/*
	Copyright © Interactive Services 2013 - 2019 All Rights Reserved.
	No part of this code may be used, with or without modification, without prior consent from Interactive Services.
	Chameleon Gold Version 2.3, 01 May 2020
*/

/********************************************************************************************/
/******************************* DROP DOWN LIST GRAPHICS ************************************/
/********************************************************************************************/

.dropdown {
  position: relative;
  width: 330px;
  z-index: 2;
	-webkit-perspective: 800px;
		 -moz-perspective: 800px;
			 -o-perspective: 800px;
					perspective: 800px;
}

.dropdown:not(.disabled).active .selLabel:after {
  content: '\25B2';
}

.dropdown .selLabel{
  position: relative;
  display: block;
  width: 100%;
  height: 41px;
  line-height: 40px;
  letter-spacing: 1px;
  overflow: hidden;
  color: #fff;
  font-size: 16px;
  background: #525252;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  padding: 0px 60px 0px 15px;
  z-index: 9999;
  cursor: pointer;

  -webkit-transform-style: preserve-3d;
     -moz-transform-style: preserve-3d;
     	 -o-transform-style: preserve-3d;
         	transform-style: preserve-3d;

  -webkit-transform-origin: 50% 0%;
     -moz-transform-origin: 50% 0%;
       -o-transform-origin: 50% 0%;
          transform-origin: 50% 0%;

  transition: -webkit-transform 300ms;
  transition: transform 300ms;
  transition: transform 300ms, -webkit-transform 300ms;

	-webkit-backface-visibility: hidden;
		 -moz-backface-visibility: hidden;
			 -o-backface-visibility: hidden;
					backface-visibility: hidden;

	-webkit-touch-callout: none;
		 -moz-touch-callout: none;
			 -o-touch-callout: none;
					touch-callout: none;

	-webkit-user-select: none;
	   -moz-user-select: none;
	     -o-user-select: none;
	        user-select: none;
}

body.rtl .dropdown .selLabel{
  padding: 0px 15px 0px 60px;
}

.dropdown:not(.disabled) .selLabel:after {
  content: '\25BC';
  position: absolute;
  right: 0px;
  top: 15%;
  width: 50px;
  text-align: center;
  font-size: 12px;
  padding: 10px;
  height: 70%;
  line-height: 10px;
  border-left: 1px solid #ddd;
}

body.rtl .dropdown:not(.disabled) .selLabel:after {
	right: initial;
	right: auto;
	left: 0px;
  border-left: 0px solid #ddd;
  border-right: 1px solid #ddd;
}

.dropdown:not(.disabled) .selLabel:active {
  -webkit-transform: rotateX(45deg);
          transform: rotateX(45deg);
}

.dropdown:not(.disabled) .selLabel:active:after {
  content: '\25B2';
}

.dropdown-list {
  position: absolute;
  top: 1px;
  width: 100%;
	height: 0px;
	/*overflow: hidden;*/
}

.dropdown:not(.disabled).active .dropdown-list {
  top: 40px;
  overflow: initial;
  height: auto;
}

.dropdown:not(.disabled).active.long .dropdown-list {
	height: 350px;
  overflow-y: auto;
}

body.ie .dropdown:not(.disabled).active.long .dropdown-list li {
	padding-right: 20px !important;
}

.dropdown.long .dropdown-list {
  overflow-y: hidden;
}

.dropdown-list li {
  display: block;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  min-height: 40px;
  overflow: hidden;
  font-size: 16px;
  line-height: 40px;
  padding: 0px 15px !important;
  color: #000;
  letter-spacing: 1px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  list-style: none;
  transition: -webkit-transform 300ms ease;
  transition: transform 300ms ease;
  transition: transform 300ms ease, -webkit-transform 300ms ease;
  opacity: 1;
}

body.ios.xs .dropdown-list li, body.mac.os.x .dropdown-list li {
  transition: none !important;
}

.dropdown-list li::before{
	display:none;
}

/********************************************************************************************/
/********************************* PRELOADER GRAPHICS ***************************************/
/********************************************************************************************/

#framework_preloader .progressbar{
	position:relative;
	display:block;
	width:400px;
	height:40px;
	padding:10px 20px;
	border-bottom:1px solid rgba(255,255,255,0.25);
	border-radius:16px;
	margin:10px auto;
	-webkit-box-shadow: 0px 4px 4px -4px rgba(255, 255, 255, 0.4),0px -3px 3px -3px rgba(255, 255, 255, 0.25),inset 0px 0px 12px 0px rgba(0, 0, 0, 0.5);
					box-shadow: 0px 4px 4px -4px rgba(255, 255, 255, 0.4),0px -3px 3px -3px rgba(255, 255, 255, 0.25),inset 0px 0px 12px 0px rgba(0, 0, 0, 0.5);
}

#framework_preloader .progressbar:before{
	position:absolute;
	display:block;
	content:"";
	width:364px;
	height:20px;
	top:10px;
	left:20px;
	background:#222;
	-webkit-border-radius:20px;
					border-radius:20px;
	-webkit-box-shadow: inset 0px 0px 6px 0px rgba(0, 0, 0, 0.85);;
					box-shadow: inset 0px 0px 6px 0px rgba(0, 0, 0, 0.85);
	border:1px solid rgba(0,0,0,0.8);
}

#framework_preloader .bar {
	position:absolute;
	display:block;
	width:0px;
	height:16px;
	top:12px;
	left:22px;
	background: rgb(243,152,9);
	background: -moz-linear-gradient(top,  rgba(243,152,9,1) 0%, rgba(255,104,0,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(243,152,9,1)), color-stop(100%,rgba(255,104,0,1)));
	background: -webkit-linear-gradient(top,  rgba(243,152,9,1) 0%,rgba(255,104,0,1) 100%);
	background: -o-linear-gradient(top,  rgba(243,152,9,1) 0%,rgba(255,104,0,1) 100%);
	background: -ms-linear-gradient(top,  rgba(243,152,9,1) 0%,rgba(255,104,0,1) 100%);
	background: linear-gradient(to bottom,  rgba(243,152,9,1) 0%,rgba(255,104,0,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f39809', endColorstr='#ff6800',GradientType=0 );
	-webkit-border-radius:16px;
					border-radius:16px;
	-webkit-box-shadow: 0px 0px 12px 0px rgba(243, 152, 9, 1),inset 0px 1px 0px 0px rgba(255, 255, 255, 0.45),inset 1px 0px 0px 0px rgba(255, 255, 255, 0.25),inset -1px 0px 0px 0px rgba(255, 255, 255, 0.25);
					box-shadow: 0px 0px 12px 0px rgba(243, 152, 9, 1),inset 0px 1px 0px 0px rgba(255, 255, 255, 0.45),inset 1px 0px 0px 0px rgba(255, 255, 255, 0.25),inset -1px 0px 0px 0px rgba(255, 255, 255, 0.25);
	overflow:hidden;
}

#framework_preloader .bar:before {
	position:absolute;
	display:block;
	content:"";
	width:446px;
	height:150%;
	top:-25%;
	left:-25px;
	background: -moz-radial-gradient(center, ellipse cover,  rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.01) 50%, rgba(255,255,255,0) 51%, rgba(255,255,255,0) 100%);
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,0.35)), color-stop(50%,rgba(255,255,255,0.01)), color-stop(51%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,0)));
	background: -webkit-radial-gradient(center, ellipse cover,  rgba(255,255,255,0.35) 0%,rgba(255,255,255,0.01) 50%,rgba(255,255,255,0) 51%,rgba(255,255,255,0) 100%);
	background: -o-radial-gradient(center, ellipse cover,  rgba(255,255,255,0.35) 0%,rgba(255,255,255,0.01) 50%,rgba(255,255,255,0) 51%,rgba(255,255,255,0) 100%);
	background: -ms-radial-gradient(center, ellipse cover,  rgba(255,255,255,0.35) 0%,rgba(255,255,255,0.01) 50%,rgba(255,255,255,0) 51%,rgba(255,255,255,0) 100%);
	background: radial-gradient(ellipse at center,  rgba(255,255,255,0.35) 0%,rgba(255,255,255,0.01) 50%,rgba(255,255,255,0) 51%,rgba(255,255,255,0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#59ffffff', endColorstr='#00ffffff',GradientType=1 );
}

#framework_preloader .bar:after {
	position:absolute;
	display:block;
	content:"";
	width:64px;
	height:16px;
	right:0;
	top:0;
	-webkit-border-radius: 0px 16px 16px 0px;
	border-radius: 0px 16px 16px 0px;
	background: -moz-linear-gradient(left,  rgba(255,255,255,0) 0%, rgba(255,255,255,0.6) 98%, rgba(255,255,255,0) 100%);
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(98%,rgba(255,255,255,0.6)), color-stop(100%,rgba(255,255,255,0)));
	background: -webkit-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.6) 98%,rgba(255,255,255,0) 100%);
	background: -o-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.6) 98%,rgba(255,255,255,0) 100%);
	background: -ms-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.6) 98%,rgba(255,255,255,0) 100%);
	background: linear-gradient(to right,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.6) 98%,rgba(255,255,255,0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 );
}

#framework_preloader .bar span {
	position:absolute;
	display:block;
	width:100%;
	height:64px;
	-webkit-border-radius:16px;
	border-radius:16px;
	top:0;
	left:0;

	-webkit-animation: sparkle 1500ms linear infinite;
     -moz-animation: sparkle 1500ms linear infinite;
       -o-animation: sparkle 1500ms linear infinite;
    			animation: sparkle 1500ms linear infinite;
	opacity:0.2;
}

#framework_preloader .label {
	font-family: "Roboto_Regular", Arial, sans-serif;
	position:absolute;
	display:block;
	width:46px;
	height:32px;
	line-height:28px;
	top:38px;
	left:0px;
	background: rgb(76,76,76);
	background: -moz-linear-gradient(top,  rgba(76,76,76,1) 0%, rgba(38,38,38,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(76,76,76,1)), color-stop(100%,rgba(38,38,38,1)));
	background: -webkit-linear-gradient(top,  rgba(76,76,76,1) 0%,rgba(38,38,38,1) 100%);
	background: -o-linear-gradient(top,  rgba(76,76,76,1) 0%,rgba(38,38,38,1) 100%);
	background: -ms-linear-gradient(top,  rgba(76,76,76,1) 0%,rgba(38,38,38,1) 100%);
	background: linear-gradient(to bottom,  rgba(76,76,76,1) 0%,rgba(38,38,38,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#262626',GradientType=0 );
	font-weight:bold;
	font-size:12px;
	color:#fff;
	text-align:center;
	-webkit-border-radius:6px;
					border-radius:6px;
	border:1px solid rgba(0,0,0,0.2);
	-webkit-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.3);
				  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.3);
	text-shadow: 0px -1px 0px #000000,0px 1px 1px #000000;
  filter: dropshadow(color=#000000, offx=0, offy=-1);
}

#framework_preloader .label span {
	position:absolute;
	display:block;
	width:12px;
	height:9px;
	top:-9px;
	left:14px;
	background:transparent;
	overflow:hidden;
}

#framework_preloader .label span:before {
	position:absolute;
	display:block;
	content:"";
	width:8px;
	height:8px;
	top:4px;
	left:2px;
	border:1px solid rgba(0,0,0,0.5);
	background: rgb(86,86,86);
	background: -moz-linear-gradient(-45deg,  rgba(86,86,86,1) 0%, rgba(76,76,76,1) 50%);
	background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(86,86,86,1)), color-stop(50%,rgba(76,76,76,1)));
	background: -webkit-linear-gradient(-45deg,  rgba(86,86,86,1) 0%,rgba(76,76,76,1) 50%);
	background: -o-linear-gradient(-45deg,  rgba(86,86,86,1) 0%,rgba(76,76,76,1) 50%);
	background: -ms-linear-gradient(-45deg,  rgba(86,86,86,1) 0%,rgba(76,76,76,1) 50%);
	background: linear-gradient(135deg,  rgba(86,86,86,1) 0%,rgba(76,76,76,1) 50%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#565656', endColorstr='#4c4c4c',GradientType=1 );
	-webkit-box-shadow: 0px -1px 2px 0px rgba(0, 0, 0, 0.15);
					box-shadow: 0px -1px 2px 0px rgba(0, 0, 0, 0.15);
	-webkit-transform: rotate(45deg);
		 -moz-transform: rotate(45deg);
			-ms-transform: rotate(45deg);
			 -o-transform: rotate(45deg);
					transform: rotate(45deg);
}

@media only screen and (max-width : 480px) {
	#framework_preloader .progressbar {
  		width: 260px;
	}

	#framework_preloader .progressbar:before {
  		width: 224px;
	}

	#framework_preloader .bar:before {
  		width: 306px;
	}
}

@-webkit-keyframes sparkle {
	from {background-position: 0 0;}
	to {background-position: 0 -64px;}
}
@-moz-keyframes sparkle {
	from {background-position: 0 0;}
	to {background-position: 0 -64px;}
}
@-o-keyframes sparkle {
	from {background-position: 0 0;}
	to {background-position: 0 -64px;}
}
@keyframes sparkle {
	from {background-position: 0 0;}
	to {background-position: 0 -64px;}
}

/********************************************************************************************/
/********************************* GOLD VIDEO MENU ******************************************/
/********************************************************************************************/

.menuSlide{
	position: absolute;
	top: -3000px;
	left: 0px;
	height: auto;
	width: 100%;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: cover;
}

.menuSlide.curSlide{
	display: block;
	top: 0px;
}

#menuSlide.menuSlide{
	padding: 0px 20px;
}

body:not(.xs) #wrapper.noVideoMenuTxt #menuSlide{
	padding-top: 40px;
}

.videoMenuSlide.template{
	display: none;
}

.createMenuHere[data-menu_type="videomenu"]{
	position: relative;
	margin: 20px 0px 20px 20px;
	width: 450px;
	max-width: 30%;
	z-index:20;
}

body.sm .createMenuHere[data-menu_type="videomenu"]{
	width: 100%;
	max-width: 100%;
}

body.xs .createMenuHere[data-menu_type="videomenu"]{
	width: 100%;
	max-width: 100%;
	margin: 0px;
	padding: 5px 5px 0px 25px;
}

#menuItems .gvm_menuItem{
	position: relative;
	margin-bottom: 5px;
	border-width: 0px !important;
	cursor: pointer;
	min-height: 70px;
	cursor: pointer;
}

#menuItems .gvm_menuItem .videoMenuBtn.mainVideoBtn{
	position: relative;
	padding: 10px 35px 0px 10px;
	min-height: 70px;
}

body.rtl.xs #menuItems .gvm_menuItem .videoMenuBtn.mainVideoBtn, body.rtl.sm #menuItems .gvm_menuItem .videoMenuBtn.mainVideoBtn{
	padding: 10px 15px 0px 40px;
}

body.sm #menuItems .gvm_menuItem{
	width: calc(50% - 40px);
	margin-right: 40px;
	float: left;
}

body.rtl.sm #menuItems .gvm_menuItem{
	margin-right: 0px;
	margin-left: 40px;
}

body.xs #menuItems .gvm_menuItem{
	width: 100%;
}

#menuItems .gvm_menuItem #buttonTitle{
	padding-bottom: 30px;
}

#menuItems .gvm_menuItem:before {
	content:"";
	display:block;
	position:absolute;
	left:-20px;
	top:0px;
	background-color:#fff666;
	width:20px;
	height:100%;
	opacity: 0.15;
  -webkit-transition: all 0.4s linear;
  	 -moz-transition: all 0.4s linear;
  		 -o-transition: all 0.4s linear;
  				transition: all 0.4s linear;
}

#menuItems .gvm_menuItem.currentBtn:before {
	opacity: 1;
}

#menuItems .gvm_menuItem .menu_icon {
	top: 15px;
	right: 10px;
	height: 23px;
	width: 23px;
	background-image:url(../framework_images/menu_images/vmenu_arrow.png);
	background-size: auto;
	background-size: initial;

  -webkit-transition: transform 0.4s ease-in;
  	 -moz-transition: transform 0.4s ease-in;
  		 -o-transition: transform 0.4s ease-in;
  				transition: transform 0.4s ease-in;

}

body.rtl #menuItems .gvm_menuItem .menu_icon {
	right: auto;
	right: initial;
  left: 10px;
}

body.rtl #menuItems .gvm_menuItem .mainVideoBtn:not(.menu_completed) .menu_icon{
	-webkit-transform: scaleX(-1);
		 -moz-transform: scaleX(-1);
		   -o-transform: scaleX(-1);
					transform: scaleX(-1);
}

#menuItems .gvm_menuItem .mainVideoBtn.menu_completed .menu_icon{
	background-image:url(../framework_images/menu_images/vmenu_tick.png);
}

#menuItems .gvm_menuItem .mainVideoBtn.disabledMenuItem .menu_icon{
	background-image:url(../framework_images/menu_images/vmenu_lock.png);
}

#menuItems .gvm_menuItem .menu_progress, #menuItems .gvm_menuItem .menu_progress_bar {
	height: 3px;
}

.gvm_textPanel{
	position: relative;
	z-index: 25;
}

body.xs .gvm_textPanel{
	padding: 15px;
}

#videoMenu{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	overflow: hidden;
	z-index: 10;
}

#videoMenu .videoMenuSlide{
	display: none;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-size: cover;
	z-index: 2;
}

#videoMenu .videoMenuSlide.inView{
	display: block;
	z-index: 3;
}

.topicPanel {
	position: absolute;
  right: 6%;
  width: 60%;
  padding: 30px;
  margin-top: 20px;
  z-index: 5;
}

body.rtl .topicPanel{
	right: auto;
	right: initial;
  left: 6%;
}

body.rtl .videoMenuSlide .topicPanel{
  left: 0%;
}

body.sm .topicPanel {
	position: absolute;
  right: auto;
  right: initial;
  width: 100%;
  margin-bottom: 100px;
}

body.sm #wrapper #videoMenu, body.sm #wrapper #videoMenu .videoMenuSlide, body.sm #wrapper #videoMenu .videoMenuSlide .topicPanel{
	position: relative;
}

body.sm #wrapper #videoMenu .videoMenuSlide{
	background-image: none !important;
}

body.sm #wrapper #videoMenu .videoMenuSlide .topicPanel{

}

body.xs .gvm_menuItem .topicPanel {
	display: none;
	position: relative;
  right: auto;
  right: initial;
  width: 100%;
  margin: 0px;
  background-color: transparent;
  padding: 0px 15px 20px 15px;
}

body.rtl.xs .gvm_menuItem .topicPanel {
  right: auto;
  right: initial;
  left: auto;
  left: initial;
}

body.xs .gvm_menuItem .topicPanel .topic_title, body.xs .gvm_menuItem .topicPanel .topic_detail, body.xs .gvm_menuItem .topicPanel .topic_duration{
	margin-bottom: 10px;
}


.topicPanel > .videoMenuLaunch{
	display: inline-block;
	width: auto;
	min-width: 150px;
	margin-top: 20px;
	border-width: 2px;
	cursor: pointer;
}

.topicPanel > .videoMenuLaunch.disabled{
	opacity: 0.5;
	cursor: default;
}

.videoMenuReplay{
	display: inline-block;
	width: auto;
	min-width: 200px;
	float: right;
	cursor: pointer;
}

body.xs .videoMenuReplay{
	float: none;
	display: block;
	width: 200px;
	margin: 30px auto 30px auto;
}

body.sm .videoMenuReplay{
	float: none;
	margin-bottom: 30px;
}

.videoMenuSkip{
	display: none;
	position: fixed;
	bottom: 120px;
	right: 30px;
	width: auto;
	min-width: 200px;
	cursor: pointer;
	z-index: 100;
}

.menuSlide.curSlide .videoMenuSkip{
	display: block;
}

body.xs .menuSlide.curSlide .videoMenuSkip{
	display: block;
	right: 50%;
	margin-right: -100px;
}

/********************************************************************************************/
/************************************ GOLD MENU *********************************************/
/********************************************************************************************/
.menu_center{
	padding: 100px 15% 0px 15%;
}

body.sm .menu_center, body.md .menu_center{
	padding: 40px 40px 0px 40px;
}

.goldMenuBtnPadding{
	padding: 0px 2px 4px 2px;
}

#menuItems .gm_menuItem{
	position: relative;
	min-height: 180px;
	padding: 10px;
	padding-bottom: 30px;
	background-image: none;
	border-width: 1px !important;

	-webkit-transition: background-image 0.5s ease-in;
  	 -moz-transition: background-image 0.5s ease-in;
  		-ms-transition: background-image 0.5s ease-in;
  		 -o-transition: background-image 0.5s ease-in;
  				transition: background-image 0.5s ease-in;

	cursor: pointer;
}

.gm_menuItem.menu_completed .menu_icon{
	background-image:url(../framework_images/menu_images/menu_tick.png);
}

.gm_menuItem.disabledMenuItem .menu_icon{
	background-image:url(../framework_images/menu_images/menu_lock.png);
}


#wrapper.inverseColors .gm_menuItem.menu_completed .menu_icon{
	background-image:url(../framework_images/menu_images/menu_tick_grey.png);
}

#wrapper.inverseColors .gm_menuItem.disabledMenuItem .menu_icon{
	background-image:url(../framework_images/menu_images/menu_lock_grey.png);
}


.menu_icon{
	position: absolute;
	top: 70px;
	right: 20px;
	height: 67px;
	width: 67px;

	background-image:url(../framework_images/menu_images/menu_arrow.png);
	background-repeat:no-repeat;
	background-position: 0px 0px;
	background-size: 100%;
}

body.rtl .menu_icon{
	right: initial;
	right: auto;
	left: 20px;
}

body.rtl .gm_menuItem:not(.menu_completed) .menu_icon{
	-webkit-transform: scaleX(-1);
		 -moz-transform: scaleX(-1);
		   -o-transform: scaleX(-1);
					transform: scaleX(-1);
}

#wrapper.inverseColors .menu_icon{
	background-image:url(../framework_images/menu_images/menu_arrow_grey.png);
}

.menu_num{
	position: absolute;
	top: 5px;
	right: 40px;
}

body.rtl .menu_num{
	right: initial;
	right: auto;
	left: 30px;
}

.menu_progress{
	position: absolute;
	bottom: 10px;
	left: 15px;
	width: calc(100% - 30px);
	height: 10px;
	background-color: #323232;
}

body.rtl .menu_progress{
	-webkit-transform: scaleX(-1);
		 -moz-transform: scaleX(-1);
		   -o-transform: scaleX(-1);
					transform: scaleX(-1);
}

.menu_progress_bar{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 0%;
	height: 10px;
}


.gm_menuItem div[data-inject_text*="title"], .gm_menuItem div[data-inject_text*="duration"]{
	width: calc(100% - 90px);
	-webkit-transition: color 0.5s ease-in-out;
  	 -moz-transition: color 0.5s ease-in-out;
  		 -o-transition: color 0.5s ease-in-out;
  				transition: color 0.5s ease-in-out;
}



body:not(.touch_device) #wrapper:not(.inverseColors) .gm_menuItem:not(.disabledMenuItem):hover{
	background-image:url(../framework_images/menu_images/pattern.jpg);
	background-color: transparent !important;
}

body:not(.touch_device) #wrapper.inverseColors .gm_menuItem:not(.disabledMenuItem):hover{
	/*background-image:url(../framework_images/menu_images/pattern.jpg);*/
	background-color: #fff; /*** TEMP UNTIL I GET AN UPDATED pattern.jpg */
}


.interfaceSlide.curPageSlide.vm_video #menuDashboard{
	display: none;
}

.interfaceSlide.curPageSlide #menuDashboard{
	position: fixed;
	bottom: 0px;
	left: 0px;
	min-height: 70px;
	width: 100%;
	padding: 20px;
	z-index:25;
}

.dash_heading{
	width: 350px;
}

.dashIndicatorHolders{
	display: block;
	width: 260px;
	margin: 0px auto;
}

.dashProgressIndicator{
	position: relative;
	width: 120px;
	margin: 0px 5px;
}

#courseProgressSprite, #assessmentProgressSprite{
	display: block;
	margin: 0px auto;
}
/*
body.rtl #courseProgressSprite, body.rtl #assessmentProgressSprite{
	-webkit-transform: scaleX(-1);
		 -moz-transform: scaleX(-1);
		   -o-transform: scaleX(-1);
					transform: scaleX(-1);
}*/

/********************************************************************************************/
/************************************* LEFTSCREEN MENU  *************************************/
.createMenuHere[data-menu_type="leftscreen"]{
	margin: 20px 0px;
	height: 500px;
	width: 350px;
	margin-left:20px;
	-webkit-columns: 4 350px;
		 -moz-columns: 4 350px;
			 -o-columns: 4 350px;
					columns: 4 350px;
}

/*
body.mac.os.x.sm .createMenuHere[data-menu_type="leftscreen"], body.mac.os.x.md .createMenuHere[data-menu_type="leftscreen"]{
	margin-bottom: 300px;
}
*/
.gm_textPanel{
	position: relative;
}

.gm_leftmenuItem{
	display: inline-block;
	position: relative;
	width: 350px;
	min-height: 95px;
	background-color: rgba(234, 233, 234, 0.95);
	padding: 10px 50px 20px 65px;
	margin-bottom: 10px;
	cursor: pointer;

	-webkit-transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
		 -moz-transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
			-ms-transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
		   -o-transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
					transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

body:not(.touch_device) .gm_leftmenuItem:not(.disabledMenuItem):hover{
	box-shadow: 2px 2px 7px #999999;
}

body:not(.touch_device) .gm_leftmenuItem:not(.menu_completed):hover{
	background-color: rgba(255, 255, 255, 1);
}

.gm_leftmenuItem.menu_completed{
	background-color: rgba(17, 23, 34, 0.85);
}

.gm_leftmenuItem.menu_completed div[data-inject_text*="duration"]{
	color: #fff;
}

#wrapper.inverseColors .gm_leftmenuItem{
	background-color: rgba(17, 23, 34, 0.85);
}

body:not(.touch_device) #wrapper.inverseColors .gm_leftmenuItem:not(.disabledMenuItem):hover{
	box-shadow: 2px 2px 7px #999999;
}

body:not(.touch_device) #wrapper.inverseColors .gm_leftmenuItem:not(.menu_completed):hover{
	background-color: rgba(17, 23, 34, 1);
}

#wrapper.inverseColors .gm_leftmenuItem.menu_completed{
	background-color: rgba(234, 233, 234, 0.95);
}

#wrapper.inverseColors .gm_leftmenuItem.menu_completed div[data-inject_text*="duration"]{
	color: #333333;
}

.gm_leftmenuItem div[data-inject_text*="title"], .gm_leftmenuItem div[data-inject_text*="duration"]{
	line-height: 1.2;
	-webkit-transition: color 0.2s ease-in-out;
		 -moz-transition: color 0.2s ease-in-out;
		   -o-transition: color 0.2s ease-in-out;
					transition: color 0.2s ease-in-out;

}


.gm_leftmenuItem .menu_icon{
	position: absolute;
	top: 50%;
	right: 5px;
	height: 40px;
	width: 40px;
	margin-top: -20px;

	background-image:url(../framework_images/menu_images/menu_arrow_small.png);
	background-repeat:no-repeat;
	background-position: 0px 0px;

	-webkit-transition: background-image 0.2s ease-in-out;
		 -moz-transition: background-image 0.2s ease-in-out;
		   -o-transition: background-image 0.2s ease-in-out;
					transition: background-image 0.2s ease-in-out;
}


.gm_leftmenuItem.menu_completed .menu_icon{
	background-image:url(../framework_images/menu_images/menu_tick_small.png);
}

.gm_leftmenuItem.disabledMenuItem .menu_icon{
	background-image:url(../framework_images/menu_images/menu_lock_small.png);
}

#wrapper.inverseColors .gm_leftmenuItem .menu_icon{
	background-image:url(../framework_images/menu_images/menu_arrow_small.png);
}

#wrapper.inverseColors .gm_leftmenuItem.menu_completed .menu_icon{
	background-image:url(../framework_images/menu_images/menu_tick_small_grey.png);
}

#wrapper.inverseColors .gm_leftmenuItem.disabledMenuItem .menu_icon{
	background-image:url(../framework_images/menu_images/menu_lock_small.png);
}

.gm_leftmenuItem .menu_num{
	position: absolute;
	top: 0px;
	left: 0px;
	right: auto;
	font-size: 50px;
	line-height: 80px;
	height: 100%;
	width: 60px;
	text-align: center;

	-webkit-transition: color 0.2s ease-in-out;
		 -moz-transition: color 0.2s ease-in-out;
		   -o-transition: color 0.2s ease-in-out;
					transition: color 0.2s ease-in-out;
}

.gm_leftmenuItem .menu_progress{
	position: absolute;
	bottom: 10px;
	left: 65px;
	width: calc(100% - 115px);
	height: 5px;
	background-color: #97989a;
}

.gm_leftmenuItem .menu_progress_bar{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 0%;
	height: 5px;
}

body.rtl .gm_leftmenuItem{
	padding: 10px 65px 20px 50px;
}

body.rtl .gm_leftmenuItem .menu_num{
	left: initial;
	left: auto;
	right: 5px;
}

body.rtl .gm_leftmenuItem .menu_icon{
	right: initial;
	right: auto;
	left: 5px;
}

body.rtl .gm_leftmenuItem:not(.menu_completed) .menu_icon{
	-webkit-transform: scaleX(-1);
		 -moz-transform: scaleX(-1);
		   -o-transform: scaleX(-1);
					transform: scaleX(-1);
}



/*********************/
/***** COMPLETED *****/
/*********************/



/* column-width is not supported in IE9 */
body.ie9 .createMenuHere[data-menu_type="leftscreen"]{
	height: auto;
}

/********************************************************************************************/
/************************************* MENU PANEL *******************************************/
/********************************************************************************************/
#menu_Panel #close_menu{
	position: absolute;
	top: 100px;
	right: 50px;
}

body.rtl #menu_Panel #close_menu{
	right: initial;
	right: auto;
	left: 50px;
}

#menu_Panel{
	display: none;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background-color: #ccc;
	overflow-y: auto;
	padding-top: 145px;
	z-index: 70;

	background-image:url(../tools/interface_1/images/menu_bg_dark.jpg);
	background-repeat:no-repeat;
	background-size: cover;
}

#menu_Panel.open{
	display: block;
}

.compMenuBtn{
	padding: 10px 0px;
	cursor: pointer;
}

body:not(.touch_device) .compMenuBtn:not(.disabled):hover{
	/*color: #f78c22;*/
}


/*#menu_Panel{
	display: none;
	position: absolute;
	top: 25%;
	left: 50%;
	margin-left: -370px;
	width: 740px;
	z-index: 51;
	background-color: #000;
  padding: 32px;
}
*/

#menuarea{
	margin-top: 20px;
}

.menuItem_tier1{
	background-image:url(../framework_images/menu_images/overlay_menu_not_started.png);
	background-position: 40px 50%;
	background-repeat: no-repeat;
	padding-left: 90px;
	min-height: 45px;
	margin: 5px;
	cursor: pointer;
}

.menuItem_tier2{
	background-repeat: no-repeat;
	background-position: 90px 50%;
	padding-left: 140px;
	min-height: 35px;
	margin: 5px;
	cursor: pointer;
}

.menuItem_tier3{
	background-repeat: no-repeat;
	background-position: 140px 50%;
	padding-left: 190px;
	min-height: 35px;
	margin: 5px;
	cursor: pointer;
}

.menuItem_tier1.menu_notStarted, .menuItem_tier2.menu_notStarted, .menuItem_tier3.menu_notStarted{
	background-image:url(../framework_images/menu_images/overlay_menu_not_started.png);
}

.menuItem_tier1.menu_inprogress, .menuItem_tier2.menu_inprogress, .menuItem_tier3.menu_inprogress{
	background-image:url(../framework_images/menu_images/overlay_menu_started.png);
}

.menuItem_tier1.menu_completed, .menuItem_tier2.menu_completed, .menuItem_tier3.menu_completed{
	background-image:url(../framework_images/menu_images/overlay_menu_complete.png);
}

.menuItem_tier1.disabledMenuItem, .menuItem_tier2.disabledMenuItem, .menuItem_tier3.disabledMenuItem{
	background-image:url(../framework_images/menu_images/menu_lock.png);
	background-position: 20px 50%;
}

body.rtl .menuItem_tier1{
	padding-left: initial;
	padding-left: auto;
	padding-right: 90px;
	background-position: calc(100% - 40px) 50%;
}


/********************************************************************************************/
/************************************** LANGUAGES *******************************************/
/********************************************************************************************/
#language_Panel{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	z-index: 51;
	background-color: #000;
	overflow-y: auto;

	background-image:url(../framework_images/language_select/languageSelect_bg.jpg);
	background-repeat:no-repeat;
	background-size: cover;
}

.languageHolder{
	padding-top: 25%;
}

.langBtnStyle{
	width: 250px;
	margin: 10px auto;
	border: 3px solid #fff;
	border-radius: 15px 0px;
	background-color: #1b829e;
	color: #ffffff;
	cursor: pointer;

	-webkit-transition: border-radius 0.5s ease-in-out, background-color 0.5s ease-in-out, color 0.5s ease-in-out;
  	 -moz-transition: border-radius 0.5s ease-in-out, background-color 0.5s ease-in-out, color 0.5s ease-in-out;
  		-ms-transition: border-radius 0.5s ease-in-out, background-color 0.5s ease-in-out, color 0.5s ease-in-out;
  		 -o-transition: border-radius 0.5s ease-in-out, background-color 0.5s ease-in-out, color 0.5s ease-in-out;
  				transition: border-radius 0.5s ease-in-out, background-color 0.5s ease-in-out, color 0.5s ease-in-out;
}

.langBtnStyle.disabled{
	color: #777;
	background-color: #dedede;
	cursor: default;
}

body:not(.touch_device) .langBtnStyle:not(.disabled):hover{
	border-radius: 0px 15px;
	border: 3px solid #1b829e;
	background-color: #fff;
	color: #1b829e;
}

#language_Panel #close_language.interfaceBtn{
	position: absolute;
	top: 100px;
	right: 20px;
	margin: 0px;
}

body.rtl #language_Panel #close_language.interfaceBtn{
	right: initial;
	right: auto;
	left: 20px;
}

/********************************************************************************************/
/******************************************* HELP *******************************************/
/********************************************************************************************/
#help_Panel #close_help{
	position: absolute;
	top: 100px;
	right: 50px;
}

body.rtl #help_Panel #close_help{
	right: initial;
	right: auto;
	left: 50px;
}

#help_Panel{
	display: none;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	padding-top: 200px;
	background-color: #ccc;
	overflow-y: auto;
	z-index: 70;

	background-image:url(../tools/interface_1/images/help_bg_dark.jpg);
	background-repeat:no-repeat;
	background-size: cover;
}

#help_Panel.open{
	display: block;
}

.help_item{
	width: 350px;
	text-align: center;
	margin: 0px auto 60px auto;
	max-width:100%;
}

.helpImgHolder{
	min-height: 90px;
}

body.rtl .help_item.nav .helpImgHolder{
	-webkit-transform: scaleX(-1);
		 -moz-transform: scaleX(-1);
		   -o-transform: scaleX(-1);
					transform: scaleX(-1);
}

.help_nav_img {
	background-image: url(../tools/interface_1/images/help_icon_navigation_white.png);
  background-repeat: no-repeat;
  width: 130px;
  height: 86px;
  margin: 10px auto;
}

/********************************************************************************************/
/******************************************* CONTACTS ***************************************/
/********************************************************************************************/
#contacts_Panel #close_contacts{
	position: absolute;
	top: 100px;
	right: 50px;
}

body.rtl #contacts_Panel #close_contacts{
	right: initial;
	right: auto;
	left: 50px;
}

#contacts_Panel{
	display: none;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	padding-top: 200px;
	background-color: #ccc;
	overflow-y: auto;
	z-index: 70;

	background-image:url(../tools/interface_1/images/contacts_bg_dark.jpg);
	background-repeat:no-repeat;
	background-size: cover;
}

#contacts_Panel.open{
	display: block;
}

/********************************************************************************************/
/******************************************* CONTACTS ***************************************/
/********************************************************************************************/
#complaints_Panel #close_complaints{
	position: absolute;
	top: 100px;
	right: 50px;
}

body.rtl #complaints_Panel #close_complaints{
	right: initial;
	right: auto;
	left: 50px;
}

#complaints_Panel{
	display: none;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	padding-top: 200px;
	background-color: #ccc;
	overflow-y: auto;
	z-index: 70;

	background-image:url(../tools/interface_1/images/complaints_bg_dark.jpg);
	background-repeat:no-repeat;
	background-size: cover;
}

#complaints_Panel.open{
	display: block;
}


/********************************************************************************************/
/************************************** RESOURCES *******************************************/
/********************************************************************************************/
#resources_Panel #close_resources{
	position: absolute;
	top: 100px;
	right: 50px;
}

body.rtl #resources_Panel #close_resources{
	right: initial;
	right: auto;
	left: 50px;
}

#resources_Panel{
	display: none;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	padding-top: 200px;
	background-color: #ccc;
	overflow-y: auto;
	z-index: 70;

	background-image:url(../tools/interface_1/images/resources_bg_dark.jpg);
	background-repeat:no-repeat;
	background-size: cover;
}

#resources_Panel.open{
	display: block;
}

#resourcesTemplate{
  overflow-y: auto;
  height: calc(100% - 260px);
}

.resource_item{
	position: relative;
	width: 100%;
	margin-bottom: 30px;
}

.resource_item_num{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 70px;
	margin-right: 20px;
	line-height:	1;
	clear: both;
}

body.rtl .resource_item_num{
	left: initial;
	left: auto;
	right: 0px;
	margin-right: 0px;
	margin-left: 20px;
}

.resource_item_link, .resource_item_text {
	line-height:1.4em !important;
	padding-left: 90px;
}

body.rtl .resource_item_link, body.rtl .resource_item_text {
	padding-left: 0px;
	padding-right: 100px;
}

.resource_item a {
	color: inherit;
}

#resourcesTemplate::-webkit-scrollbar-track{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
}

#resourcesTemplate::-webkit-scrollbar{
	width: 10px;
	background-color: #F5F5F5;
}

#resourcesTemplate::-webkit-scrollbar-thumb{
	background-color: #000000;
	border: 2px solid #555555;
}



/********************************************************************************************/
/************************************** GLOSSARY ********************************************/
/********************************************************************************************/

#glossary_Panel #close_glossary{
	position: absolute;
	top: 100px;
	right: 50px;
}

body.rtl #glossary_Panel #close_glossary{
	right: initial;
	right: auto;
	left: 50px;
}

#glossary_Panel{
	display: none;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	padding-top: 200px;
	background-color: #ccc;
	overflow-y: auto;
	z-index: 70;

	background-image:url(../tools/interface_1/images/glossary_bg_dark.jpg);
	background-repeat:no-repeat;
	background-size: cover;
}

#glossary_Panel.open{
	display: block;
}

#glossary_Panel ul#alphabet li{
	float: left;
	/*color: #f78c22;*/
	width: 26px;
	height: 45px;
	margin: 0px 2px;
	text-transform: uppercase;
	list-style-type: none;
	font-family: "Roboto_Regular", Arial, sans-serif;
	font-size: 30px;
	text-align: center;
	padding: 0px;
	cursor: pointer;
}

body.rtl #glossary_Panel ul#alphabet li{
	float: right;
}

#glossary_Panel ul#alphabet li::before{
	display: none;
}

#glossary_Panel ul#alphabet li:not(.active) {
	/*color: rgba(255,255,255,1);*/
	cursor: default;
}

#glossary_Panel ul#alphabet li.current {
	/*border-bottom: 3px solid #f78c22;*/
}

.glossary_item{
	display: none;
	padding: 6px 10px;
	margin-bottom: 6px;
	cursor: pointer;

	-webkit-transition: background-color .55s ease-in;
		 -moz-transition: background-color .55s ease-in;
			 -o-transition: background-color .55s ease-in;
			-ms-transition: background-color .55s ease-in;
					transition: background-color .55s ease-in;
}

.glossary_item.showItem{
	display: block;
}

/* TO RECTIFY RENDERING ISSUES FOR IE */
body.ie .glossary_item.showItem{
	display: inline-block;
	width: 100%;
}

.glossary_item.glossary_selected{
	background-color: white;
}

#glossary_mobile_list {
	display:none;
	width:100%;
	height: 23px;
	font-size: 16px;
	color: #000;
}

#glossaryTemplate{
	height: 350px;
	overflow-y: auto;
  background-color: #083064;
	padding: 0px;
}

#glossaryTemplate::-webkit-scrollbar-track{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: black;
}

#glossaryTemplate::-webkit-scrollbar{
	width: 10px;
	background-color: black;
}

#glossaryTemplate::-webkit-scrollbar-thumb{
	background-color: #ffffff;
	border: 2px solid #555555;
}

#glossary_search_holder input{
	width: 270px;
	padding: 4px;
	border:none;
	font-size:28px;
}

.glossary_search_icon{
	height: 38px;
	margin-top: -7px;
	margin-left: 5px;
}


/********************************************************************************************/
/************************************** TRANSCRIPT ******************************************/
/********************************************************************************************/
#transcript_Panel{
	position: absolute;
	left: -600px;
	display: none;
	width: 528px;
	height: 142px;
	z-index: 100;
}

.transcriptHolder{
	padding-left: 0px;
	padding-right: 0px;
	background-color: #FFF;
	border: 1px solid #d2d2d2;
	box-shadow:0px 0px 10px 2px rgba(36, 45, 61, 0.5);
	font-size: 14px !important;
}

.transcript_header {
	display: block;
	min-height: 30px;
	padding-top: 5px;
	overflow: hidden;
	background-image:url(../framework_images/trans_drag.png);
	background-repeat:no-repeat;
	background-position:5px center;
	font-size: 14px !important;
	cursor: pointer;
}

.closeTranscript{
	position: absolute;
	top: 1px;
	right: 1px;
	width: 24px;
	height: 30px;
	background-image:url(../framework_images/x.png);
	background-repeat:no-repeat;
	background-size: 18px 21px;
	background-position:center center;
	cursor: pointer;
}

body:not(.touch_device) .closeTranscript:hover{
	background-color:#dedede;
}

body.touch_device .closeTranscript:hover{
	background-color:#000;
}


#transcriptHolder {
	overflow-y: scroll;
	height: 110px;
	width: 100%;
	padding: 0px 10px;
	font-size: 14px !important;
}


body.xs #transcriptHolder {
	padding-bottom: 20px;
}

body.rtl #transcriptHolder {
	direction: ltr;
}

.closeComponentBtn.animated {
	-webkit-transition: transform .4s ease-in-out;
  	 -moz-transition: transform .4s ease-in-out;
  		-ms-transition: transform .4s ease-in-out;
  		 -o-transition: transform .4s ease-in-out;
  				transition: transform .4s ease-in-out;
	width:44px;
	height:44px;
	margin-right:calc(17% - 22px);
}

.closeComponentBtn.animated:hover{
	-webkit-transform: rotate(-90deg);
  	 -moz-transform: rotate(-90deg);
  		-ms-transform: rotate(-90deg);
  		 -o-transform: rotate(-90deg);
  				transform: rotate(-90deg);
}


/********************************************************************************************/
/******************************** SELECT INTERFACE ******************************************/
/********************************************************************************************/
.interface_Panel{
	display:none;
	z-index: 307;
	position: fixed;
	top: 0px;
	left:0px;
	height: 100%;
	width: 100%;
}

.selectinterface_panel{
	position: absolute;
	top: 40%;
	left: 50%;
	margin-left: -200px;
	margin-top: -150px;
	width: 400px;
	height: auto;
	padding: 20px 5px;
	padding-bottom: 5px;
	background-color: #FFF;
	border: 1px solid #FFF;
	box-shadow: #dadad8 0px 0px 5px 2px;
	z-index: 598;
}

.selectinterface_panel > img{
	position: absolute;
	left: 10px;
	top: 5px;
	height: 23px;
}



/********************************************************************************************/
/********************************  SCORM LOGGING WINDOW CSS  ********************************/
/********************************************************************************************/
#logcontent {
	text-align: left;
	font-size: 10px;
	font-family: "Roboto_Regular", Arial, sans-serif;
}

.info{
	color: #0066FF;
}

.success{
	color: #00CC00;
}

.failure{
	color: #FF0000;
}

/************************************************************************************/
/*********************************  Debugger  ***************************************/
/************************************************************************************/
.debugger_title_txt_1 {
	font-family: "Roboto_Regular", Arial, sans-serif;
	color:#767c87;
	font-size:14px;
	font-style: normal;
	line-height: 16px;
}

.debugger_btn_txt_1 {
	font-family: "Roboto_Regular", Arial, sans-serif;
	color: #fff;
	font-size:15px;
	font-style: normal;
	line-height: 16px;
}

.debugger_btn_txt_2 {
	font-family: "Roboto_Regular", Arial, sans-serif;
	color: #fff;
	font-size:12px;
	font-style: normal;
	line-height: 14px;
}

.debugger_label_txt_1{
	font-family: "Roboto_Regular", Arial, sans-serif;
	color: #999;
	font-size:12px;
	font-style: normal;
	line-height: 14px;
}

.debugger_label_txt_2{
	font-family: "Roboto_Regular", Arial, sans-serif;
	color: #ED6C6C;
	font-size:12px;
	font-style: normal;
	line-height: 14px;
}

.debugger_label_txt_3{
	font-family: "Roboto_Regular", Arial, sans-serif;
	color: #0d5fa0;
	font-size:12px;
	font-weight: normal;
	line-height: 21px;
}

.debugger_label_txt_4{
	font-family: "Roboto_Regular", Arial, sans-serif;
	color: #6b6b6b;
	font-size:12px;
	font-weight: normal;
	line-height: 21px;
}

.db_txt_black{
	color: #000;
}

#section_home hr{
	margin: 5px;
}

#section_home a{
	width: 300px;
	display: block;
	margin: 5px auto 10px auto;
	text-align: center;
	color: #2baee9;
	font-size: 15px;
	text-decoration: none;
	border-radius: 5px;
	border: 1px solid #ccc;
	padding: 5px;
	box-shadow: 2px 2px 10px 0px rgba(0,0,0,0.3);
}

#section_home a:hover{
	box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.4);
}

#debug_clientlogin {
  position: absolute;
  top: 30%;
  left: 50%;
  margin-left: -240px;
  margin-top: -80px;
  width: 90%;
  max-width: 480px;
  min-height: 160px;
  height: auto;
  background-color: #FFF;
  border: 1px solid #FFF;
  box-shadow: 0px 0px 5px 5px #777;
	z-index: 100;
}

#debug_clientlogin > #dragarea{
	padding-top: 4px;
	background-color: #ccc;
	cursor: pointer;
	height: 25px;
}

#debug_code{
	width: 60%;
	margin-left: 20%;
}

.debugLogo{
	position: absolute;
	top: 2px;
	left: 5px;
	width: 60px;
}

#debug_buildInfo {
  position: absolute;
  top: 30%;
  left: 50%;
  margin-left: -240px;
  margin-top: -80px;
  width: 90%;
  max-width: 480px;
  min-height: 160px;
  height: auto;
  background-color: #FFF;
  border: 1px solid #FFF;
  box-shadow: 0px 0px 5px 5px #777;
	z-index: 100;
}

#debug_buildInfo > #dragarea{
	padding-top: 4px;
	background-color: #ccc;
	cursor: pointer;
	height: 25px;
}

.buildInfoHolder{
	padding: 10px;
}

#courseclientcode{
	position: absolute;
	bottom: 2%;
	left: 5px;
}

.debugbtn{
  cursor: pointer;
}

.debugbtn.shadowTracking{
  position: absolute;
  top: 2px;
  left: 100%;
	height: 20px;
  width: 20px;
  margin-left: -50px;
	background: #fa7515;
	color: #fff;
	font-size: 12px;
	padding-top: 2px;
	text-align: center;
	cursor: pointer;
}

.debugbtn.showAnswer{
  position: absolute;
  top: 2px;
  left: 100%;
	height: 20px;
  width: 20px;
  margin-left: -75px;
	background: #fa7515;
	color: #fff;
	font-size: 12px;
	padding-top: 2px;
	text-align: center;
	cursor: pointer;
}

.debugbtn.inverse{
  position: absolute;
  top: 2px;
  left: 100%;
	height: 20px;
  width: 20px;
  margin-left: -100px;
	background: #fa7515;
	color: #fff;
	font-size: 12px;
	padding-top: 2px;
	text-align: center;
	cursor: pointer;
}

.debugbtn.closebtn{
  position: absolute;
  top: 2px;
  left: 100%;
	height: 20px;
  width: 20px;
  margin-left: -25px;
  background-image: url(../framework_images/close.jpg);
  background-position: top center;
  background-repeat: no-repeat;
  background-size: 20px 20px;
  cursor: pointer;
}

.debugbtn.togglebtn{
  position: absolute;
  top: 2px;
  left: 100%;
	height: 20px;
  width: 20px;
  margin-left: -50px;
  background-image: url(../framework_images/minimise.jpg);
  background-position: top center;
  background-repeat: no-repeat;
  background-size: 20px 20px;
  cursor: pointer;
}

.debugbtn.togglebtn.maxBtn{
  background-image: url(../framework_images/maximise.jpg);
}

.debugbtn.commondebugbtn{
  background: #97d669;
  width: auto;
  max-width: 175px;
  text-align: center;
  padding: 10px;
  cursor: pointer;
  border-radius: 5px;
  box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.2);
  margin: 5px auto;
}

.debugbtn.smalldebugbtn{
  background: #97d669;
  width: auto;
  max-width: 100px;
  text-align: center;
  padding: 5px;
  cursor: pointer;
  border-radius: 5px;
  box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.2);
  margin: 5px auto;
}

.debugbtn.smalldebugbtn:hover{
	color: #767C87;
}

.debugbtn.mediumdebugbtn{
  background: #97d669;
  width: auto;
  max-width: 125px;
  text-align: center;
  padding: 5px;
  cursor: pointer;
  border-radius: 5px;
  box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.2);
  margin: 5px auto;
}

.debugbtn.mediumdebugbtn:hover{
	color: #767C87;
}

#debugWindow {
	position: absolute;
  top: 20px;
  left: 20px;
  width: 480px;
  height: auto;
	color: #333;
  background-color: #FFF;
  border: 1px solid #FFF;
  box-shadow: 0px 0px 5px 5px #777;
  z-index: 70;
}

#debugWindow > #dragarea{
	padding-top: 5px;
	background-color: #000;
	color: #fff;
	text-align: center;
	cursor: pointer;
}

#debugWindowPhone {
	display: none;
	position: absolute;
  top: 10px;
  left: 10px;
  width: 300px;
  height: auto;
  color: #333;
  background-color: #FFF;
  border: 1px solid #FFF;
  box-shadow: 0px 0px 5px 5px #777;
  z-index: 652;
}

#debugWindowPhone > #dragarea{
	padding-top: 5px;
	background-color: #ccc;
	cursor: pointer;
}

body.rtl #debugWindowPhone > #dragarea{
	padding-top: 5px;
	text-align: left;
}

.debugNav{
	float: left;
	width: 100%;
	height: auto;
	padding: 0px 5px;
	border-bottom: 1px solid #DDD;
}

.debugFrameworkNav{
	position: absolute;
  left: 50%;
  bottom: 0px;
  margin-left: -60px;
  width: 120px;
  height: 40px;
}

.debugPhoneNav{
 	margin: 0px auto;
  width: 120px;
  height: 40px;
}

.debugNext{
	height: 40px;
	width: 40px;
	background-image: url(../framework_images/debug_next.png);
	background-position: top center;
	background-repeat: no-repeat;
	background-size: 40px 40px;
}

.debugBack{
	height: 40px;
	width: 40px;
	background-image: url(../framework_images/debug_back.png);
	background-position: top center;
	background-repeat: no-repeat;
	background-size: 40px 40px;
}

.debugReplay{
	height: 40px;
	width: 40px;
	background-image: url(../framework_images/debug_replay.png);
	background-position: top center;
	background-repeat: no-repeat;
	background-size: 40px 40px;
}

.debugNavBtn{
	float: left;
	width: auto;
	padding: 2px 8px;
	height: 20px;
	border: 1px solid #DDD;
	border-bottom: 0px solid #DDD;
	border-radius: 4px 4px 0px 0px;
	margin-top: 5px;
	text-align: center;
	background-color: #fff;
	font-family: "Roboto_Regular", Arial, sans-serif;
	color:#969696;
	font-size:12px;
	line-height:14px;
	font-weight:normal;
	cursor: pointer;
	margin-left: 1px;
	margin-right: 1px;
}

.debugNavBtn:hover{
	color:#fff;
	background-color: #969696;
}

.debugNavBtn.cursection{
	color:#fff;
	background-color: #83B2EF;
}

.debugSection{
	height: 315px;
	text-align: left;
	padding: 5px;
	font-family: "Roboto_Regular", Arial, sans-serif;
	font-size: 13px;
	line-height:20px;
	color: #767c87;
	overflow-y: auto;
	padding-bottom: 40px;
}

.debugEntry{
	font-family: "Roboto_Regular", Arial, sans-serif;
  font-size: 12px;
  line-height: 12px;
  color: #767C87;
  width: 50px;
  height: 20px;
  text-align: center;
}

.debugCheckBox{
	width: 21px;
	height: 21px;
	background-image: url(../framework_images/debug_checkbox.png);
	background-position: -21px -3px;
	background-repeat: no-repeat;
}

.debugCheckBox.debugLocal{
	margin-left: 10px;
}

.debugCheckBox.checked{
	background-position: 0px -3px;
}

.debugCheckbtn{
	cursor: pointer;
}

.debugtxt_completionupdated, .debugtxt_statusupdated, .debugtxt_shadowcleared{
	display: none;
	text-align: center;
  font-size: 10px;
  line-height: 12px;
	font-style: italic;
	padding: 5px;
}

.debugtxt_shadowsuspend, .debugtxt_tracksuspend{
	height:auto;
	word-wrap:break-word;
}


#tracers {
	text-align:left;
	height: 205px;
	margin: 10px 10px 0px 10px;
	overflow:auto;
}

.debugtxt_pageName{
  width: 100%;
  text-align: left;
  border: 0px;
  font-size: 13px;
  line-height: 15px;
}

.debug_selectPagePhone{
	padding-top: 10px;
	padding-left: 5px;
}

select#debugger_select {
	width: 160px;
}

.db_width1, .isort_width1  {
  width: 8.333333337%;
	box-sizing:border-box;
}

.db_width2, .isort_width2 {
  width: 16.66666667%;
	box-sizing:border-box;
}

.db_width3, .isort_width3 {
	width: 25%;
	box-sizing:border-box;
}

.db_width4, .isort_width4 {
  width: 33.33333333%;
	box-sizing:border-box;
}

.db_width5, .isort_width5 {
  width: 41.66666667%;
	box-sizing:border-box;
}

.db_width6, .isort_width6 {
	width:50%;
	box-sizing:border-box;
}

.db_width7, .isort_width7 {
  width: 58.33333333%;
	box-sizing:border-box;
}

.db_width8, .isort_width8 {
  width: 66.66666667%;
	box-sizing:border-box;
}

.db_width9, .isort_width9 {
	width:75%;
	box-sizing:border-box;
}

.db_width10, .isort_width10 {
  width: 83.33333333%;
	box-sizing:border-box;
}

.db_width11, .isort_width11{
	width: 91.66666667%;
	box-sizing:border-box;
}

.db_width12, .isort_width12 {
	width:100%;
	box-sizing:border-box;
}

body.editing .debug_selectPageHome,
body.editing .debugFrameworkNav,
body.editing .debug_selectPage{
	display: none;
}
/************************************************************************************/
/********************************  SALES PANEL  *************************************/
/************************************************************************************/
#salesPanel{
	position: absolute;
	top: -500px;
	right: calc(50% - 175px);
	width: 350px;
	height: auto;
	color: #333;
	background-color: #000;
	border: 1px solid #fff;
	box-shadow: 0 0 10px 5px #8c8c8c;
	z-index: 90;
}

#salesPanel .salesPanel_Header {
	font-family: Calibri, Candara, Segoe, Segoe UI, Optima, Arial, sans-serif;
	font-size: 16px;
	line-height: 25px;
	width: auto;
	height: 40px;
	padding: 7px 5px;
	color: #fff;
	background-color: #000000;
	text-align: center;
	text-transform: uppercase;
	background-image:url(../framework_images/trans_drag.png);
	background-position: 9px;
	background-repeat: no-repeat;
	background-size: 20px;
	cursor: pointer;
}

.closeSalesPanel{
	position: absolute;
	top: 7px;
	right: 7px;
	border: 2px solid #fff;
	border-radius: 100%;
	width: 25px;
	height: 25px;
	line-height: 22px;
	font-size: 16px;
}

#salesPanel .salesLogin{
	height: 120px;
	padding: 23px 0px 20px 0px;
}

#salesPanel .salesLogin .salesWelcomeTxt{
	display: none;
}

#salesPanel .salesLogin .salesLogin_inputHolder{
	position: relative;
	font-family: Calibri, Candara, Segoe, Segoe UI, Optima, Arial, sans-serif;
	color: #fff;
	text-align: center;
	font-size: 30px;
	line-height: 50px;
	border: 2px solid #fff;
	border-radius: 50px;
	height: 56px;
	width: 220px;
	margin: 0px auto;
}

#salesPanel .salesLogin input{
	position: absolute;
  left: 23px;
  top: 2px;
	text-align: center;
  width: 170px;
  background-color: #000;
  border-width: 0px;
  color: #fff;
  height: 46px;
}

#salesPanel .debugbtn.closebtn{
  position: absolute;
  top: 2px;
  left: auto;
  left: initial;
  right: 2px;
}

.debugbtn.salesBtn{
	font-family: Calibri, Candara, Segoe, Segoe UI, Optima, Arial, sans-serif;
	color: #fff;
  background: #000;
  width: 135px;
  text-align: center;
  padding: 2px;
  cursor: pointer;
  border-radius: 5px;
  border: 2px solid #fff;
  margin: 5px auto;
}

#salesPanel .salesTxt{
	font-family: Calibri, Candara, Segoe, Segoe UI, Optima, Arial, sans-serif;
	color: #fff;
	font-size: 16px;
	line-height: 25px;
}

#salesPanel .salesContent{
	padding: 0px 20px;
}

#salesPanel .salesContent input{
	display: block;
	width: 50px;
	margin: 2px auto;
	border: 0px;
	background-color: #000;
}

#salesPanel .salesContent #sales_mode, #salesPanel .salesContent #projector_mode{
	margin: 0px auto;
}

/************************************************************************************/
/*****************************  Debugger Auto-complete  *****************************/
/************************************************************************************/
#screenSearch{
	width: 160px;
	height: 22px;
	padding: 0px;
}


.autocomplete {
  /*the container must be positioned relative:*/
  position: relative;
  display: inline-block;
}
.autocomplete-items {
  position: absolute;
  border: 1px solid #d4d4d4;
  border-bottom: none;
	left: 122px;
	width: 300px;
	overflow-y: auto;
	max-height: 220px;
  z-index: 99;
}
.autocomplete-items div {
  padding: 5px;
  cursor: pointer;
  background-color: #fff;
  border-bottom: 1px solid #d4d4d4;
}
.autocomplete-items div:hover {
  /*when hovering an item:*/
  background-color: #e9e9e9;
}
.autocomplete-active {
  /*when navigating through the items using the arrow keys:*/
  background-color: DodgerBlue !important;
  color: #ffffff;
}

/************************************************************************************/
/************************************  iSort  ***************************************/
/************************************************************************************/
.isort_label_1{
	font-family: "Roboto_Regular", Arial, sans-serif;
	color: #0d5fa0;
	font-size:12px;
	font-weight: normal;
	line-height: 18px;
}

.isort_label_2{
	font-family: "Roboto_Regular", Arial, sans-serif;
	color: #767c87;
	font-size:12px;
	font-weight: normal;
	line-height: 14px;
}

.isort_btn_txt_1 {
	font-family: "Roboto_Regular", Arial, sans-serif;
	color: #fff;
	font-size:15px;
	font-style: normal;
	line-height: 16px;
}

.isort_btn_txt_2 {
	font-family: "Roboto_Regular", Arial, sans-serif;
	color: #fff;
	font-size:12px;
	font-style: normal;
	line-height: 14px;
}

#isortWindow{
	position: absolute;
	top: 20px;
	left: 20px;
	width: 480px;
	height: auto;
	background-color: #FFF;
	border: 1px solid #FFF;
	box-shadow: 0px 0px 5px 5px #777;
	z-index:601;
	text-align: left;
}

#isortWindow > #dragarea{
	padding-top: 5px;
	background-color: #ccc;
	cursor: pointer;
}

.isortSection{
	padding: 5px;
	font-family: "Roboto_Regular", Arial, sans-serif;
	font-size: 13px;
	line-height:20px;
	min-height: 150px;
	color: #767c87;
	overflow-y: auto;
}

#isort_dbCommunication.isortSection{
	background-color: #767c87;
	color: #fff;
}

.isortedit_screen{
	overflow: hidden;
}

.isort_progress{
	width: 220px;
	margin: 25px auto;
	text-align: center;
}

.isortLogo{
	position: absolute;
	top: 5px;
	left: 5px;
	width: 60px;
}

#isort_uname{
	text-align: center;
	width: 90%;
	max-width: 250px;
}

.isortbtn{
  cursor: pointer;
}

.isortbtn.togglebtn{
  position: absolute;
  top: 5px;
  left: 100%;
	height: 20px;
  width: 20px;
  margin-left: -25px;
  background-image: url(../framework_images/minimise.jpg);
  background-position: top center;
  background-repeat: no-repeat;
  background-size: 20px 20px;
  cursor: pointer;
}

.isortbtn.togglebtn.maxBtn{
  background-image: url(../framework_images/maximise.jpg);
}

.isortbtn.commonisortbtn{
  background: #97d669;
  width: auto;
  max-width: 175px;
  text-align: center;
  padding: 7px;
  cursor: pointer;
  border-radius: 5px;
  box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.2);
  margin: 5px auto;
}

.isortbtn.commonisortbtn:hover{
	color: #767C87;
}

.isortbtn.mediumisortbtn{
  background: #97d669;
  width: auto;
  max-width: 125px;
  min-width: 100px;
  text-align: center;
  padding: 5px;
  cursor: pointer;
  border-radius: 5px;
  box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.2);
  margin: 5px 5px;
}

.isortbtn.mediumisortbtn.isort_center_align{
	margin: 5px auto;
}

.isortbtn.mediumisortbtn:hover{
	color: #767C87;
}

.isortNav {
	float: left;
	width: 100%;
	height: auto;
	padding: 0px 5px;
	border-bottom: 1px solid #DDD;
}

.isortbtn.isortNavBtn{
	float: left;
	width: auto;
	padding: 2px 8px;
	height: 20px;
	border: 1px solid #DDD;
	border-bottom: 0px solid #DDD;
	border-radius: 4px 4px 0px 0px;
	margin-top: 5px;
	text-align: center;
	background-color: #fff;
	font-family: "Roboto_Regular", Arial, sans-serif;
	color:#969696;
	font-size:12px;
	line-height:14px;
	font-weight:normal;
	cursor: pointer;
	margin-left: 1px;
	margin-right: 1px;
}

.isortbtn.isortNavBtn:hover{
	color:#fff;
	background-color: #969696;
}

.isortbtn.isortNavBtn.isorttab{
	color:#fff;
	background-color: #83B2EF;
}

.isortNavBtn.disabled, .isortNavBtn.disabled:hover{
	cursor: default;
	font-style: italic;
	background-color: #CCCCCC !important;
	color: #fefefe;
}


.isortEditNav{
  margin: 5px auto;
  width: 150px;
  height: 40px;
}

.isortEditNext{
	height: 40px;
	width: 40px;
	background-image: url(../framework_images/debug_next.png);
	background-position: top center;
	background-repeat: no-repeat;
	background-size: 40px 40px;
}

.isortEditBack{
	height: 40px;
	width: 40px;
	background-image: url(../framework_images/debug_back.png);
	background-position: top center;
	background-repeat: no-repeat;
	background-size: 40px 40px;
}

#isortBreadCrumb{
	padding-top: 10px;
	min-width: 70px;
	text-align: center;
}

.isorttxt_comment{
	min-height: 80px;
	max-height: 100px;
	overflow-y: auto;
}

#isortedit_comment{
	width: 100%;
	min-width: 350px;
}

.updateBtnHolder{
	width:220px;
	margin:0px auto;
}

#isort_btnGlobal{
  cursor: pointer;
}

.isortedit_global{
  max-width: 21px;
  height: 21px;
  background-image: url(../framework_images/debug_checkbox.png);
  background-position: -21px -3px;
  background-repeat: no-repeat;
}

.isort_deleteeditmessage{
	padding: 5px;
	height: 130px;
	overflow-y: auto;
}

.isortedit_global.selected{
	background-position: 0px -3px;
}

.alledit_title{
	text-align: left;
	border-bottom: 1px solid #ff8400;
	font-family: "Roboto_Regular", Arial, sans-serif;
	font-size: 12px;
	font-weight: bold;
	line-height: 14px;
	color: #ff8400;
	float: left;
	padding: 5px;
	padding-bottom: 2px;
}

.alledit_base{
	text-align: left;
	font-family: "Roboto_Regular", Arial, sans-serif;
	font-size: 10px;
	font-weight: normal;
	line-height: 14px;
	color: #0d5fa0;
	float: left;
	padding: 5px;
}

.alledit_screen{
	width: 130px;
}

.alledit_date{
	width:60px;
}

.alledit_logged{
	width: 80px;
}

.alledit_edit{
	width: 325px;
}

.alledit_type{
	width: 80px;
}

.alledit_severity{
	width: 80px;
}

.alledit_platform{
	width: 325px;
}

.alledit_globalHolder{
	width: 45px;
	float: left;
	padding: 0px 5px;
	padding-top: 3px;
}

.alledit_global{
	width: 45px;
}

.alledit_globalon{
	width: 21px;
	height: 21px;
	background-image: url(../framework_images/debug_checkbox.png);
	background-position: 0px -3px;
	background-repeat: no-repeat;
	margin: 0px auto;
}

.alledit_globaloff{
	width: 21px;
	height: 21px;
	background-image: url(../framework_images/debug_checkbox.png);
	background-position: -21px -3px;
	background-repeat: no-repeat;
	margin: 0px auto;
}

.alledit_basecolor{
	background-color: #F0F8FF;
}

.closeOverlay {
  display: none;
  position: absolute;
  top: 10px;
  right: 10px;
  width: 22px;
  cursor: pointer;
  z-index: 100;
}
.closeOverlay:hover {
  opacity: .7;
	-webkit-transition: opacity .25s ease-in;
		 -moz-transition: opacity .25s ease-in;
			 -o-transition: opacity .25s ease-in;
			-ms-transition: opacity .25s ease-in;
					transition: opacity .25s ease-in;
}

#tools_dot_css{
	display: none;
}

@media only screen and (max-width : 767px) {
	.help_nav_img {
		background-image: url(../tools/interface_1/images/help_icon_navigation_white_mob.png);
    	width: 110px;
    	margin: 0 auto;
	}
}