/*
	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.0, 01 January 2019
*/

/***************************************************************************************/
/******************************** PHONE LANDSCAPE **************************************/
/***************************************************************************************/
@media only screen and (max-device-width : 736px) and (orientation : landscape){ 
	/* FORCE USER TO ROTATE BACK TO POTRAIT MODE */
	#phonelandscape{
		display: block;
	}
}

body.touch_device.android.xs #glossary_Panel #glossary_search{
	display: none;
}

/***************************************************************************************/
/******************************** PHONE PORTRAIT ***************************************/
/***************************************************************************************/
/*@media only screen and  (max-width: 610px) and (orientation : portrait) {*/
@media only screen and  (max-width: 767px){
	
	#wrapper{
		padding: 0px;
		height: 100%;
	}
	
	.phonePanel {
    display: table;
	}
	
	/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
	/* ++++++++++++++++++++++ GENERAL SETUP +++++++++++++++++++++++++ */
	/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
	body {
		width:100%;
		min-width:100%;
		max-width:100%;
	}
	
	.defaultPagePadding{
		padding: 15px !important;
	}
	
	.screenSlide {
		padding: 0px !important;
	}
	
	#wrapper .screenSlide.noPhoneBg{
		background-image: none !important;
	}
	
	.centerVerticalPanel {
		position:static;
		top:0px;
		transform:translateY(0px);
	}
	
	.attestationImg{
		padding-top: 20px;
		width: 60%;
	}
	
	#logo{
		padding-bottom: 30px;
	}

	/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
	/* +++++++++++++++++++ PHONE GUI AND MENU +++++++++++++++++++++++ */
	/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
	
	.closeOverlay{    
		top: 5%;
    right: 5%;
		left: auto;
    left: initial;
	}
		
	.slide_up, .slide_down, .slide_left, .slide_right, .frameworkProgressIndicator, .pillNav{
		display: none;
	}
	
	/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
	/* +++++++++++++++++++++++++ DEBUGGER +++++++++++++++++++++++++++ */
	/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
	#debugWindow {
		display: none;
	}
	
	#debugWindowPhone {
		display: block;
	}
	
	#ts_holder{
		display: none;
	}
	
	/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
	/* ++++++++++++++++++++++++++ MENU ++++++++++++++++++++++++++++++ */
	/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
	#phoneMenu_Panel, #menu_Panel, #help_Panel, #resources_Panel, #glossary_Panel, #contacts_Panel, #complaints_Panel{
		padding-top: 60px;
		padding-bottom: 50px;
	}
	
	#phoneMenu_Panel .phoneElements, #menu_Panel .menuElements, #help_Panel .helpElements, #resources_Panel .resourceElements, #glossary_Panel .glossaryElements, #contacts_Panel .contactsElements, #complaints_Panel .complaintElements{
		overflow-y: auto;
		height: 100%;
		padding: 0px;
	}
	
	body #language_Panel #close_language.interfaceBtn, #phoneMenu_Panel #close_phoneMenu, #menu_Panel #close_menu, #help_Panel #close_help, #contacts_Panel #close_contacts, #complaints_Panel #close_complaints, #resources_Panel #close_resources, #glossary_Panel #close_glossary{
		position: fixed;
		top: 15px;
		right: 15px;
		margin: 0px;
	}
	
	#menu_Panel [data-inject_text="title_1"]{
		text-align: center;
	}
	
	.interfaceSlide.curPageSlide #menuDashboard{
		top: 0px;
		bottom: auto;
		bottom: initial;
		padding: 0px;
		padding-bottom: 15px;
		height: auto;
	}
	
	.interfaceSlide.curPageSlide #menuDashboard .title_txt_1{
		padding-top: 15px;
		text-align: center;
	}
	
	.dash_progress, .dash_percentage{
		display: none;
	}
	
	#courseProgressSprite, #assessmentProgressSprite{
		display: block;
	}
	
	#menuDashboard div[data-inject_text="dash_course_progress"],#menuDashboard div[data-inject_text="dash_assessment_progress"]{
		text-align: center;
		font-weight: bold;
	}
	
	.interfaceSlide{
    top: 0px !important;
    height: calc(100% - 40px) !important;
  }
	
	.interfaceSlide.curPageSlide.menuScreen{
		top: 0px !important;
		height: calc(100% - 40px) !important;
		padding-bottom: 0px;
	}
	
	.interfaceSlide.curPageSlide.menuScreen #wrapper{
		padding: 0px !important;
	}
	
	.interfaceSlide.curPageSlide.menuScreen #wrapper:before {
		display:none;
	}
	
	.createMenuHere {
    margin: 0px;
	}
	
	#menuItems .gm_menuItem{
		min-height: 90px;
	}
	
	.menu_icon{
		top: 30px;
    right: 20px;
    height: 27px;
    width: 27px;
    background-size: 100%;
	}
	
	.menu_num {
    right: 30px;
	}
	
	.menu_progress, .menu_progress_bar{
		height: 5px;
	}
	
	.dashProgressIndicator{
		padding-top: 5px;
	}
	
	/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
	/* ++++++++++++++++++++++ LEFTSCREEN MENU +++++++++++++++++++++++ */
	/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
	.createMenuHere[data-menu_type="leftscreen"]{
		margin-top: 20px;
		height: auto;
		width: 100%;
		margin: 0px;
    padding: 0px;
		
		-webkit-columns: auto auto;	
			 -moz-columns: auto auto;	
				 -o-columns: auto auto;	
						columns: auto auto;			
								
	}
	
	.gm_leftmenuItem{
		width: 100%;
		margin-bottom: 2px;
		min-height: 75px !important;
	}
	
	.gm_textPanel{
		position: relative;
	}
	
	/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
	/* ++++++++++++++++++++++ CENTER SCREEN MENU ++++++++++++++++++++ */
	/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
	.menu_center{
		padding: 0px;
	}
	
	/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
	/* ++++++++++++++++++++++++++ HELP ++++++++++++++++++++++++++++++ */
	/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
	
	#help_Panel [data-inject_text="title_1"]{
		text-align: center;
	}
	/*
	#help_Panel #helpElements{
		overflow-y: auto;
		height: calc(100% - 135px);
	}*/
	
	.help_item {
    width: 100%;
    margin: 0px auto 10px auto;
  }
	
	/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
	/* +++++++++++++++++++++++++++ RESOURCES ++++++++++++++++++++++++ */
	/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
	
	
	#resources_Panel [data-inject_text="title_1"]{
		text-align: center;
	}

	#resources_Panel .resource_item{
		min-height: auto;
	}

	#resources_Panel .resource_item_num{
		width: 10px;
    height: 40px;
	}

	.resource_item_link, .resource_item_text{
		padding-left: 40px;
	}

	body.rtl .resource_item_link, body.rtl .resource_item_text{
		padding-left: 0px;
		padding-right: 50px;
	}
	
	#resourcesTemplate {
    height: auto;
  }
  
	/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
	/* +++++++++++++++++++++++++++ GLOSSARY +++++++++++++++++++++++++ */
	/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
	#glossary_Panel [data-inject_text="title_1"]{
		text-align: center;
	}

	#glossary_Panel ul#alphabet, #glossary_Panel .glossary_search_icon, #glossary_Panel #glossaryTemplate .glossary_item{
		display: none;
	}
	
	#glossary_Panel #glossary_search{
		width: 100%;
	}
	
	#glossary_mobile_list{
		display: block;
	}
	
	#glossaryTemplate{
		height: 23px;
		overflow: hidden; /* hide the customised scrollbar */
	}
	
	#glossary_search_holder input {
		font-size: 16px;
	}
	.glossary_definition_holder {
		margin-top:20px;
	}
		
	/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
	/* +++++++++++++++++++++ BOOKMARK PROMPT ++++++++++++++++++++++++ */
	/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
	.bookmarkPanel{
		position: absolute;
		top: 20%;
		left: 0%;
		width: 90%;
		height: auto;
		margin-left: 5%;
	}
	
	
	#bmark_yes, #bmark_no{
		display: block;
		width: 200px;
		float: none !important;
		margin: 10px auto;
	}
	
	#bookmark_prompt {
		background-size: 60% 60%;
  }
	
	/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
	/* +++++++++++++++++++++ ACTIVITY PROMPT ++++++++++++++++++++++++ */
	/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
	#activity_prompt{
		position: absolute;
	    top: 20%;
	    left: 0%;
	    width: 90%;
	    height: auto;
	    margin: 0px 5%;
	}
	
	/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
	/* +++++++++++++++++++++++ GAMING PROMPT ++++++++++++++++++++++++ */
	/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
	#game_prompt{
		position: absolute;
		top: 0%;
		left: 0%;
		width: 90%;
		margin-left: 5%;
		margin-top: 50px;
		height: auto;
	}
	
	/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
	/* ++++++++++++++++++++ CERTIFICATE PROMPT ++++++++++++++++++++++ */
	/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
	#certificate_prompt{
		position: absolute;
		top: 0%;
		left: 0%;
		width: 90%;
		margin-left: 5%;
		margin-top: 50px;
		height: auto;
	}
	
	/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
	/* +++++++++++++++++++ MULTIMEDIA PROMPT ++++++++++++++++++++++++ */
	/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
	#audioOverlay{
		position: absolute;
		top: 20%;
		left: 0%;
		width: 90%;
		height: auto;
		margin: 0px 5%;
	}
	
	/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
	/* +++++++++++++++ SCORM ERROR REPORTING ++++++++++++++++++++++++ */
	/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
	#scormErrorPanel{
		position: absolute;
		top: 0%;
		left: 0%;
		width: 90%;
		margin-left: 5%;
		margin-top: 30px;
	}
	
	/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
	/* +++++++++++++++++++ PRINT CERTIFICATE ++++++++++++++++++++++++ */
	/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
	#certificateName{
		position: absolute;
		top: 0%;
		left: 0%;
		width: 90%;
		margin-left: 5%;
		margin-top: 30px;
		height: 190px;
	}
	
	/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
	/* ++++++++++++++++++++++ TRANSCRIPT ++++++++++++++++++++++++++++ */
	/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
	#transcript_Panel{
		position: absolute;
		top: inherit;
		left: 0px;
		bottom: 0px;
		margin-bottom: 40px;
		margin-left: 0px;
		width: 100%;
		z-index: 32;
	}

	#transcript_Panel > .transcriptHolder > div > .transcript_header{
		background-image: none;
		cursor: default;
	}
	
	#centreContent.trans_open{
		padding-bottom: 170px;
	}

	
	.questionStemPanel {
		padding: 10px;
		position: relative;
		bottom: auto;
		bottom: initial;
		top: 0px;
		width: auto;
		margin: 5px;
	}

	.pu_header{
		padding: 15px 0px 0px 0px;
	}
	
	.pu_body{
		padding: 10px 10px 15px 10px;
	}
	
	.multimediaBtn.btnRight, .multimediaBtn.btnLeft{
		float: none;
		margin: 10px auto;
	}
	
	
	/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
	/* +++++++++++++++++ VERTICAL TIMELINE SCREEN +++++++++++++++++++ */
	/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
	.vertBtnStyle{
		background-size: 30px;
	}
	
	#vertTitle{
		margin-top: 30px;
	}
	
	body.xs .vertBtnStyle .clickIcon {
    left: 2px;
    top: 0px;
	}
	
	/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
	/* +++++++++++++++++++++ SLIDESHOW SCREEN +++++++++++++++++++++++ */
	/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
	.arrowHolder .ssIndicatorHolder{
		display: none;
	}
	
	.arrowHolder{
		position: fixed;
		top: 50%;
		left: 0px;
		margin-top: -10px;
		width: 100% !important;
		z-index: 60;
	}
	
	.interfaceSlide #wrapper[data-screen_type='slideshow'] {
		padding:0px !important;
	}
	
	.slideshowHolder, .slideshowHolder.ss_numberMargin{
		height: auto;
		margin: 0px;
	}
	.ss_slide {
		opacity: 1; 
		transition: opacity 0s;
		-webkit-transition: opacity 0s;
		/*background-color:transparent;*/
		background-position:4px top;
		padding:0px;
	}
	
	.ss_slide > div:not(.ss_txtPanel) {
		padding-bottom:10px;
	}
	
	
	.ss_txtPanel.padding_none img.img-responsive {
		width: auto;
		height: auto;
		opacity: 1;
		display: block;
		max-height: 200px;
		margin: 10px auto;
	}
	
	.ss_slide .full_height_image {
		background-size: auto;
    background-position: center top;
    height: auto;
    min-height: 230px;
    background-repeat: repeat;
	}
	.ss_slide .num_txt_2{
		text-align: center;
		font-size:10em;
	}
	
	#wrapper .ss_iconPanel {
    float: none;
    padding: 0px; 
    min-height: 0px;
    padding-bottom: 10px; 
  }
	
	.ssNext, .ssBack {
		background-image: url(../framework_images/next_icon.png) !important;
		background-position: 15% 50%;
	  width: 40px;
	  max-width:40px;
	  height: 50px;
	  background-color: black;
	  border-radius:25%;
	  font-size:1em;
	  background-size:40%;		
	}
	.ssNext{
		position: absolute;
		right: -20px;
	}

	.ssBack{
	  left:-20px;
	  -webkit-transform: rotate(180deg);
			 -moz-transform: rotate(180deg);
			  -ms-transform: rotate(180deg);
				 -o-transform: rotate(180deg);
						transform: rotate(180deg);
	}
	
	.ssNext.disabled, .ssBack.disabled{
	  background-color: #ccc;
	}

	.defaultPagePadding[data-screen_type='slideshow'] > div {
		padding: 0px;
	}
		/*
	.defaultPagePadding[data-screen_type='slideshow'] > div > div.arrowHolder {
		padding:0px;
	}
	
	.defaultPagePadding[data-screen_type='slideshow'] > div > div:not(.ss_slide) {
		padding-top:15px;
	}*/
	
	.ss_txtPanel {
/*		margin-top:20px;  */
		padding:30px;
	}
	
	.ss_txtImgPanel {
		padding:30px;
	}
	
	.ss_txtPanel, .ss_txtImgPanel, .ss_txtPanel[data-setting*="-inside"] div.ss_textContent {
		box-shadow:none;
		border-radius:0px;
		border-width: 7px 0px 0px 0px !important;
		/*background-color:white !important;*/
		border-left:0px;
		min-height: 190px;
	}
	
	.ss_txtPanel[data-setting="text-only"] {
		min-height:240px;
	}
	
	.ss_txtPanel[data-setting*="-inside"] div.ss_textContent {
		padding-bottom:20px;
		padding:10px;
		
	}
	
	.ss_txtPanel[data-setting*="-inside"], .ss_txtPanel[data-setting*="-inside"], .ss_txtImgPanel .ss_txtImgPanel {
		border-top:0px !important;
		padding:0px;
	}
	
	.ss_iconPanel {
		text-align:center;
	}

	.ss_iconPanel img {
		max-width:150px;
	}
	
	.ss_txtPanel:not[data-setting*="images"] > div {
		margin:20px 30px;
	}
	
	.ss_txtPanel[data-setting*="images"] {
		border-top:none !important;
		margin-top:0px;
	}
	
	.ss_txtPanel[data-setting*="images"] > div {
		box-shadow:none;
	}
	/*
	.ss_txtPanel[data-setting*="-inside"] > div {
		margin:0px;
	}
	*/
	.ss_txtPanel[data-setting*="-inside"] .ss_textContent > div {
		margin:20px 20px;
	}
		
	.img-responsive.left, .img-responsive.right, .right_radius {
		border-radius:0px !important;
	}
/*	
	.ss_txtImgPanel.border_none {
		border-top:7px solid transparent;
	}
*/
	/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
	/* +++++++++++++++++++ ATTESTATION SCREEN +++++++++++++++++++++++ */
	/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
	#attestationDarkItems .attestHolder.current, #attestationItems .attestHolder.current{
		width: 100%;
	}
	
	#attestationDarkItems .attestHolder.selected {
		padding: 10px 65px 10px 45px;
		margin-bottom: 5px;
	}
	
	#attestationDarkItems .attestHolder {
		min-height: 50px;
	}

	.questionBorderTopBottomOrange {
		border-top:none;
		border-bottom:none;
	}
	
	#completeSection{
		padding: 0px;
		padding-top: 40% !important;
		min-height: 100% !important;
	}
	
	#completeSection.attest_ceo{
		padding-top: 0% !important;
	}
	
	#completeSection .fill:not(.mobileFill) .centerVertical{
		margin-top: 5%;
		text-align: center;
	}
	
	#attestSection{
		padding-top: 15px !important;
	}
	
	/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
	/* +++++++++++++++++++ MULTI SLIDE QUIZ SCREEN ++++++++++++++++++ */
	/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
	body.xs #multiQuestion > div.mqModule.currentmqModule{
		padding: 10px;
	}
	
	body.xs .msCountdownHolder{
		top: 0px;
		left: 0px;
		width: 100%;
		text-align: center;
	}
   
  body.xs .knob_score{
  	width: 90px;
  	height: 90px;
  	margin: 0px 0px 0px -45px;
  }
  
  body.xs .knob_score input {
    margin: -15px 0px 0px 0px !important;
    width: 90px !important;
  	font-size: 18px;
  }
  
	body.xs .final_score{
  	width: 130px;
  	height: 130px;
	}
  
	body.xs .final_score input {
		margin: -21px 0px 0px 0px !important;
    width: 130px !important;
    font-size: 25px;
	}
  
  body.xs #questionPanel .qi_optionsHolder .qiOpt.flipPanel{
  	float:none;
  	padding: 10px 5px 5px 5px;
  	text-align: center;
  	width: 260px;
  	margin: 10px auto;
  	min-height: 46px;
	}
	
	body.xs #questionPanel .qi_optionsHolder .qiOpt.flipPanel .baseFlipPanel{
  	width: 260px;
  	min-height: 46px;
  	padding: 15px;
		background-image: none;
	}
		
	body.xs .msIndicatorHolder.numHolder{
		font-size: 25px;
	}
		
	#mcMultiQuestion #questionPanel{
		margin-top: 0px;
	}
	
	body.xs #questionPanel .qi_optionsHolder .qiOpt.flipPanel .flipPanelBack .qiOptIndicator{
		left: 20px;
	}
	
	body.xs #questionPanel .qi_optionsHolder.samc .qiOpt.flipPanel .baseFlipPanel.flipPanelBack{
		padding-left: 40px;
	}
	
	
	/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
	/* ++++++++++++++++++++++ QUESTION SCREEN +++++++++++++++++++++++ */
	/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
	body.rtl.xs #questionPanel .qi_optionsHolder .qiOpt{
		text-align: right;
	}
	
	#qiShowFeedback{
		display: none !important;
	}
	
	.sl-slider-wrapper {
		overflow: auto;
	}
	
	.sl-slide-feedback{
		display: none;
	}
	
	.qiGridStag {
		padding: 10px;
		margin-bottom:15px;
	}
	
	.qiGridStag.current {
		padding: 15px;
		margin-bottom: 20px;
	}
	
	.qiGridStag.current .qiGridStagTxt {
    font-size: inherit;
    line-height: inherit;
	}

	.qiGridStag .qiGridStagTxt {
		width: 100%;
	  padding-right: 0px;
		float: none;
	}
	
	.qiGridStag .qiGridStagOpts{
		margin: 10px auto;
		float: none;
	}
	
	.gridBtns{
		padding: 0px;
	}
	
	.gridBtns .qibtn{
		margin: 0px auto;
		float: none !important;
	}

	.fill:not(.mobileFill).gridFeedback.qiFeedback {
		position:static;
		/*background-color: rgba(255,255,255,0.7);*/
		border-radius:5px;
		margin:30px 15px;
		height: auto !important;
		padding: 20px 20px 20px 150px;
	    background-size: 100px;
		min-height:170px !important;
		float:left;
		width:calc(100% - 30px);
	}
	
	.questionStemPanelFront, .questionStemPanelBack {
		margin: 0px !important;
	}
	
	.questionStemPanelBack{
		display: none;
	}
	
	.flipCard{
		position: auto;
		position: initial;
		padding: 15px;
	}
	
	.questionStemPanelFront.flipCard{
		position: auto;
		position: initial;
		padding: 15px;
		min-width: 0px;
		width: 100%;
	}

	.prompt_padding {
    	padding: 0px 60px 0px 0px;
	}

	.fullscreenFeedback .screenSlide {
    	padding: 0px 20px;
	}
	
	
	.qiOptIcon{
		display: none;
	}
	
	#mcBlockItems .qiOpt{
		margin-bottom: 10px;
	}
	
	#mcSimpleItems, #mcBubbleItems {
		margin-left:5px;
		margin-right:5px;
	}
	
	.qImg{
		width: 70px;
	}
	
	.simpleFeedbackHolder{
		display: none;
	}
	
	#ICTmcItems{
		padding: 0px 10px;
	}

	.greyRoundedPanel, .blackBg{
		background-color: transparent;
	}
	
	#wrapper #inlineIndicator{
		display: none;
	}
	
	.sl-slide-inner{
		background-image: none !important;
	}
	
	.qi_optionsHolder .qiOpt.ictSquare{
		min-height: 50px !important;
	}
	
	.greyRoundedPanel {
    border-bottom-right-radius: 0px;
	}
	
	/* ++++++++++++++++++ SAMC FULLSCREEN FEEDBACK ++++++++++++++++++ */
	
	#questionPanel .qi_optionsHolder .qiOpt:not(.qiOptGraphical){
		padding: 5px 4px 5px 50px;
		text-align: left;
		min-height: 50px !important;
		margin-bottom: 10px;
		margin-left: -10px;
		margin-right: -10px;
	}
	
	body.rtl #questionPanel .qi_optionsHolder .qiOpt:not(.qiOptGraphical){
		padding: 5px 50px 5px 5px;
	}
	
	#questionPanel .qi_optionsHolder .qiOpt:not(.qiOptGraphical) > div.qiOptIndicator{
		top: 50%;
		left: 0px;
		bottom: auto;
		width: 46px;
		height: 46px;
		margin-top: -23px;
		margin-left: 0px;
	}
	
	body.rtl #questionPanel .qi_optionsHolder .qiOpt:not(.qiOptGraphical) > div.qiOptIndicator, body.rtl .qiOptIndicator:not(.bottom) {
    right: 0px;
  }
	
	#questionPanel .qi_optionsHolder .qiOpt.mcBubble{
		margin-bottom: 30px;
	}
	
	
	/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
	/* ++++++++++++++++++++++ ICT QUESTION TEMPLATE +++++++++++++++++ */
	/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
	.flipQuestionPanel.bottomAlignPanel{
		position: relative;
    width: 100%;
    bottom: auto;
    bottom: initial;
    margin: 0px;
    padding: 0px;
	}
	
	body.rtl .flipQuestionPanel.bottomAlignPanel {
    margin: 0px;
	}
	
	.flipQuestionPanel.bottomAlignPanel .questionStemPanelFront{
		border-radius: 0px;
		padding: 15px;
	}
	
	.largeIndicatorPadding{
		padding: 15px;
	}
	
	#questionPanel .qi_optionsHolder .qiOpt.ictWhite{
		margin: 0px;
		margin-bottom: 10px;
	}
	
	.promptPadding {
    padding: 0px 15px 15px 15px;
  }
	
	/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
	/* ++++++++++++++++++ PARALLAX TEMPLATE +++++++++++++++++++ */
	/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
	
	#parallaxItems > div {
		padding:0px;
	}
	
	.parallaxContentPanel.defaultPagePadding {
		/*background-color: rgba(48,77,94, 1);*/
		padding-right: 30px !important;
	}
	
	#parallaxItems .parallaxIconsPanel {
		padding-left: 0px;
		padding-right:20px;
	}
	
	#parallaxItems .parallaxLeft .parallaxContentPanel, #parallaxItems .parallaxRight .parallaxContentPanel, #parallaxItems .parallaxContentPanel {
		padding: 15px 15px 40px 15px;
	}
	
	#parallaxItems .parallaxIcon {
		position:static;
		width:100%;
		margin-top: 20px;
		padding-left:0px;
	}
	
	#parallaxItems .parallaxIcon[class*="_txt_"] {
		text-align:left;
	}
	
	body.rtl #parallaxItems .parallaxIcon[class*="_txt_"] {
		text-align:right;
		padding-right: 0px;
	}
	
	#parallaxItems .parallaxIcon img {
		max-width:80px;
		width:80px !important;
	}
/*	
	#parallaxItems div.margin_top_20 {
		margin-top:0px;
	}
*/	
	/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
	/* ++++++++++++++++++ MULTI QUESTION TEMPLATE +++++++++++++++++++ */
	/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
	#multiQuestion #sqStart{
		width: 100px;
		height: 100px;
		line-height: 100px !important;
	}
	
	.mqbtn_select{
		margin: 10px auto !important;
	}
	
	.mqbtn_select:nth-child(even) {
		margin: 10px auto !important;
	}
	
	.mqbtn_select_text{
		padding: 8px 10px 8px 50px;
	}
	
	.mqbtn_select:nth-child(odd) .mqbtn_select_text{
		padding: 8px 10px 8px 50px;
	}
	
	.mqbtn_select .numIndicator {
		left: 5px;
	}
	
	.mqbtn_select:nth-child(odd) .numIndicator {
		left: 5px;
		right: auto;
	}

	.mq_bg{
		/*background-color: transparent;*/
		padding-top: 10px;
	}
	
	#qiReturn, #qiNext.mqBtn{
		left: auto;
    top: auto;
    right: auto;
    position: relative;
    margin: 0px auto 10px auto;
    width: 230px;
    background-color: #76d9ff;
    border-radius: 0px;
    height: 35px;
    padding: 0px;
	}
	
	#qiToggle{
		margin-bottom: 20px;
	}
	
	.qiBtnHolder {
  	margin-top: 0px;
    padding-top: 10px;
    min-height: 50px;
	}
	
	.mqGrid{
		margin-bottom: 0px;
	}
	
	.qiFeedback.multiQuestion{
		margin-bottom: 20px;
	}

	/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
	/* +++++++++++++++++++++++++ VIDEO SCREEN +++++++++++++++++++++++ */
	/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
	.vidIconBtn{
		width: 90px;
		height: 90px;
		background-size: 90px;
		margin: 0px auto;
	}

	.vid_intro_content{
		padding-top: 15px;
	}

	/* Must be present on smartphones to include bottom navigation bar 
	video {
		padding-bottom: 40px;
	}*/
	
	/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
	/* ++++++++++++++++++++++ TIMELINE SCREEN +++++++++++++++++++++++ */
	/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
 
	.timelinebar{
		display: none;
	}
	
	.tl_mobileNext, .tl_mobileBack{
		display: block;
	}
	
	#timelineItems .timeTarget {
    position: absolute;
    top: 0px;
    left: 2000px;
    visibility: visible !important;
    transform: none !important; 
    opacity: 1 !important;
		padding:0px;
	}
	
	#timelineItems .timeTarget.constrained {
		width:100%;
		margin-left:0px;
	}
		
	#timelineItems .timeTarget.curTimeSlide {
    left: 0px;
  }
  
  .tl_panelNumber, .tl_panelText{
		float: none;
		width: auto;
		padding: 0px;
		min-height: 0px;
	}
	
	.tl_panelNumber.icons {
    max-width: 20000px; 
    padding: 0px;
  }
	

	.tl_panelText {
		border-width: 7px 0px 0px 0px !important;
		padding: 20px 25px;
	}
	
	
	#timelineItems {
		margin-top: 0px;
	} 
	
	#timelineItems #slider_bar {
		display:none;
	}
	
	.tl_fact {
		margin: 0em;
		width: 100%;
		height: 100px;
	}
	
	.tl_fact:after {
		content:" ";
		display:table;
		clear:both;
	}
	
	#timelineItems .timeTarget.textFact {
		top: 100px;
		width: 100%;
		margin-left: 0%;
	}

	#timelineItems .timeTarget.textFact > div.CGpanel {
		padding: 25px !important;	
	}
	
	#timelineItems .timeTarget.largeNumber {
		padding-top:0px;
		padding-bottom: 0px;
	}
	
	#timelineItems .CGpanel {
		box-shadow: 0px 0px 0px 0px transparent;
		border-width: 0px 0px 0px 0px !important;
		padding: 0px !important;
		margin-top: 0px !important;
	}
	
	#timelineItems .CGpanel.tl_panelTextUnderImage, #timelineItems .timeTarget .CGpanel.tl_panelTextUnderImage {
		border-width: 7px 0px 0px 0px !important;
		padding: 20px 25px !important;
	}
	
	#timelineItems .timeTarget.smallNumber > div {
		float:none;
	}
	
	#timelineItems  .timeTarget img.img-responsive {
		width: auto;
		height: auto;
		opacity: 1;
		display: block;
		max-height: 180px;
		margin: 10px auto;
		border:none !important;
	}
	
	#timelineItems  .timeTarget .tl_panelImage{
		width:100%;
		float: none;
	}
	
	#timelineItems  .timeTarget .tl_panelImageText{
		width:100%;
		float: none;
		border-width: 7px 0px 0px 0px !important;
		padding: 20px 25px;
		background-color:white;
	}
	
	
	
	
	/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
	/* ++++++++++++++++++++++ REFLECTION SCREEN ++++++++++++++++++++++ */
	/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
	
	.interfaceSlide #wrapper[data-screen_type='reflection'] > div.fill {
		padding-top:10px;
	}
	
	.interfaceSlide #wrapper[data-screen_type='reflection'] > div.fill > div.col-xs-12, #reflectionItems > div:first-child > div.padding20 {
		padding:0px;
	}
	
	/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
	/* +++++++++++++++++++ POPUP TEXT SCREEN ++++++++++++++++++++++++ */
	/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
	#popupTextBtns{
		display: none;
	}
	
	#wrapper #popupTextItems{
		min-height: 100% !important;
	}
	
	
	#wrapper.pt_panelNumbers  .popupTextItem::before {
		position: absolute;
		top: 100px;
		font-size: 200px;
		line-height: 200px;
		height: 200px;
		color: inherit;
		opacity: 1;
 		border-bottom-width: 7px !important;
		border-bottom-color: inherit;
		border-bottom-style: inherit;
		margin-bottom: 10px;
		background-image: inherit;
	}
	
	#wrapper #popupTextItems .pt_slideImage{
		border-bottom-width: 7px !important;
		padding: 0px;
		margin-bottom: 0px;
	}
	
	#wrapper #popupTextItems .pt_slideImage .pt_img{
		max-width: 240px;
    margin: 20px auto;
    display: block;
	}
	
	#wrapper #popupTextItems .pt_slideIcon{
		max-width: 180px;
		padding: 15px;
		margin: 0px auto;
		display: block;
	}
	
	#wrapper #popupTextItems .popupTextItem{
		visibility: visible;
		top: 0px;
		left: 2000px;
		padding: 0px;
		text-align: left;
		border-width: 0px;
	}
	
	body.rtl #wrapper #popupTextItems .popupTextItem{
		text-align: right;
	}
	
	#wrapper #popupTextItems .popupTextItem.current{
		left: 0px;
	}
	
	.pt_mobileNext, .pt_mobileBack{
		display: block;
	}
	
	.pt_numberPadding{
		padding-top: 220px !important;
	}
	
	.pt_textHolder{
		padding: 15px 35px 0px 35px;
	}
	
	.mobileInlineImage{
		display: block;
		max-width: 100%;
		margin: 15px 0px;
	}
	
	/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
	/* +++++++++++++++++++ POPUP EXPAND SCREEN ++++++++++++++++++++++ */
	/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
	.popExpandBody{
		padding: 10px;
	}
	
	/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
	/* ++++++++++++++++++++++ ACCORDION SCREEN ++++++++++++++++++++++ */
	/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
 	.accordionHolder{
 		position: absolute;
 		top: 0px;
 		left: -1000px;
 		float: none;
 		width: 100% !important;
 		height: 100%;
		overflow: auto;
 		overflow: initial;
 	}
 	

 	.accordionHolder.current{
 		left: 0px;
 	}
 	
 	.accordionHolder .accordionSlide, .accordionHolder .accordionPanel #closeAccordion{
 		visibility: hidden;
 	}
 	
 	.accordionPanel::before {
		top: 30px;
		font-size: 150px;
		line-height: 200px;
		height: 200px;
		color: inherit;
		opacity: 1;
		margin-bottom: 10px;
	}
	 	
 	.accordionHolder .accordionPanel{
 		position: absolute;
 		visibility: visible;
 		padding-top: 220px;
 		overflow-y: visible;
 		border-bottom-width: 7px !important;
 	}
 	
 	.accord_mobileNext, .accord_mobileBack{
		display: block;
	}
	
	.accord_slideImage, .accord_slideIcon{
    position: absolute;
    top: -200px;
    left: 50%;
    width: 180px;
    max-height: 160px;
    margin-left: -90px;
	}
	
	#accordionItems .accord_slideIcon{
		margin-bottom: 0px;
    width: 100%;
    max-width: 160px;
	}
	
	.accordionPanelTxt{
		padding: 20px 25px 20px 25px;
	}
 	
	.accordionHolder.open .accordionPanel .accordionPanelTxt.iconVersion {
		padding: 0px;
	}
	
	.accordionHolder.open .accordionPanel .accordionPanelTxt.iconVersion  > div {
		margin-left:25px;
		margin-right:25px;
	}
	
	.accordionHolder.iconVersion .accordionPanel {
		padding-top:0px;
	}
	
	.accordionHolder.iconVersion .accordionPanel:before {
		display:none;
	}
	/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
	/* ++++++++++++++++++++++++++ EXAMS +++++++++++++++++++++++++++++ */
	/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
	
	.whitePanel.examPanel{
		position: auto;
		position: initial;
		width: 100%;
		padding: 10px;
    height: auto;
    min-height: auto !important;
    min-height: initial !important;
    margin-bottom: 50px;
	}
	
	#gonext, #retryQuiz{
		margin-bottom: 0px;
	}
	
	.examPanel .qbtn#printcert {
		margin: 0px;
		width: 100%;
    margin: 10px 0px !important;
    background-size: 15px;
	}
	
	.examPanel {
		padding-top:10px;
	}
	/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
	/* ++++++++++++++++++++ CHAT THREAD TEMPLATE ++++++++++++++++++++ */
	/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
	
	#chatItems{
		padding: 0px;
	}
	
	.chatBtnHolder{
		margin: 0px auto;
	}
	
	.chatBtnHolder > img{
		width: 120px;
	}
	
	
	/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
	/* ++++++++++++++++++++++++++ INTRO SCREENS +++++++++++++++++++++ */
	/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

	.fill .CGpanel.centerVertical {
		height:calc(100vh - 40px) !important;
		box-shadow:0px 0px 0px rgba(0,0,0,0) !important;
		padding-left:10px;
		padding-top: 20px;
		top:0px;
		transform:translateY(0px);
		margin-top: 0px !important;
	}
	
	/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
	/* ++++++++++++++++++++++++++ BASIC SCREENS +++++++++++++++++++++ */
	/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
	.tt_right > div.margin_top_20{
		margin: 0px;
	}
	
	.reflectionImage{
/*		display: none; */
	}
	
	#reflection .text-center{
		text-align: left;
	}
	
	body.rtl #wrapper #reflection .text-center{
		text-align: right;
	}
	
	.textLeftPanel, .textRightPanel{
		padding: 15px 15px 0px 15px;
	}
	

	/***************************************************************************/
	/*********************** Popup Click Template ******************************/
	/***************************************************************************/
	
	#wrapper.xs #popupClick{
		padding: 3px 3px 30px 10px;
		min-height: 700px;
	}

	#wrapper.xs #popupClick .pcBtnHolder{
		width: 100%; 
		margin-bottom: 20px;
	}

	#wrapper.xs #popupClick .pcTxtHolder{
		padding: 0px;
		float: none;
		width: 100%;
	}
	
	#wrapper.xs #popupClick .pcBtnStyle{
		width: 50%; 
		margin: 0px;
		padding: 7px 7px 0px 0px;
		border-width: 0px;
		border-color: transparent;
	}
	
	#wrapper.xs #popupClick .pcBtnStyle .pcImg{
		border: 3px solid transparent;
	}
	
	#wrapper.xs #popupClick .pcBtnStyle.current .pcImg{
		border-color: inherit;
		color: inherit;
	}
	
	
	
	/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
	/* ++++++++++++++++++++++++++ GENERAL +++++++++++++++++++++++++++ */
	/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
	#basicPanel{
		padding-top: 0px; /* changed for intro screens but the 10px may be required elsewhere */
	}
	
	.mobile_padding {
		padding-left: 5px;
		padding-right: 5px;
	}

	.mobile_padding_none {
		padding-left: 0px !important;
		padding-right: 0px !important;
	}

	.padding_40 {
		padding: 10px;
	}
	
	.CGpanel{
		padding: 5px;
		border-radius: 0px;
	}
	
	.core_image{
		padding: 0px;
	}
	
	#particles-js{
		display: none;
	}
	
	.txt_panel_30, .white_panel, .tt_right, .tt_left, .padding_20{
		padding: 10px;
	}
	
	.data-inject_mobile_image.hidden {
		display:block !important;
		width:100%;
		padding-bottom: 25px;
	}
	
	.bottomAlign{
		position: auto;
		bottom: auto;
		position: initial;
		bottom: initial;
	}
	
	.fill:not(.mobileFill){
		height: auto !important; 
		min-height: 0px !important;
	}
	
	.fill:not(.mobileFill) .centerVertical, #popupTextItems .centerVertical{
		top: 0px;
		margin-top: 0px;
	  -webkit-transform: none;
	  	 -moz-transform: none;
	  		 -o-transform: none;
	  		-ms-transform: none;
	 				  transform: none;
	}
	
	.mobileStartSlide .fill {
		height: calc(100vh - 40px) !important;
	}
	
	.mobile-center-text{
		text-align: center;
	}
	
	.disableMobileBG{
		background-image: none !important;
	}
	
	#wrapper .mobileNoBG{
		background-color: transparent;
	}
	
	.mobileDiv{
		display: block;
	}
	
	.phoneNotAvailable{
		position: absolute;
		top: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
		background-color: #fff;
		text-align: center;
		padding: 35% 5% 0% 5%;
		color: #000;
		font-size: 20px;
		
		background-image: url(../framework_images/scorm_error.jpg);
		background-repeat: no-repeat;
		background-position: center 10%;
		z-index: 20;
	}

	.clearContentPanel {
		padding: 10px 15px 20px;
	}
	
	.vtPadding{
		padding: 0px;
	}
	
	.clientLogo{
		right: auto;
		right: initial;
		width: 90%;
		margin-bottom: 10%;
	}
	
	.clientLogo img{
		width: 100%
	}
	
	.startLogo{
		width: 100%;
		max-width: 320px;
	}
	
	body.xs .mobileCenter{
		text-align: center;
	}

	.mobile_padding_25 {
		padding: 25px;
	}

	.mobile_padding_30 {
		padding: 30px;
	}
	
	/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
	/* ++++++++++++++++++++ MOBILE BACKGROUND TILES & GRADIENTS +++++++++++++++++++++ */
	/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
	
	.interfaceSlide.curPageSlide div[class*='goldGradient_']{
		background: inherit;
	}
	
	.interfaceSlide.curPageSlide #wrapper[class*='_mobile_background_color_']:before, .interfaceSlide.curPageSlide #wrapper[class*='mobile_background_pattern_']:before{
		position:fixed;
		display:block;
		width:100%;
		height:100%;
		content:"";
		z-index:0;
		top:0px;
		left:0px;
	}
	
	.mobile_background_pattern_1{
		position: relative;
		background-image:url(../framework_images/mobile_tile_patterns/tile_pattern_1.png);
		background-position: center center;
		background-repeat: repeat;
		overflow: scroll;
	}
	
	.interfaceSlide.curPageSlide.inverseColors .mobile_background_pattern_1{
		background-image:url(../framework_images/mobile_tile_patterns/inverse_tile_pattern_1.png);
	}
	
	.mobile_background_pattern_2{
		position: relative;
		background-image:url(../framework_images/mobile_tile_patterns/tile_pattern_2.png);
		background-position: center center;
		background-repeat: repeat;
		overflow: scroll;
	}
	
	.interfaceSlide.curPageSlide.inverseColors .mobile_background_pattern_2{
		background-image:url(../framework_images/mobile_tile_patterns/inverse_tile_pattern_2.png);
	}
	
	.mobile_background_pattern_3{
		position: relative;
		background-image:url(../framework_images/mobile_tile_patterns/tile_pattern_3.png);
		background-position: center center;
		background-repeat: repeat;
		overflow: scroll;
	}
	
	.interfaceSlide.curPageSlide.inverseColors .mobile_background_pattern_3{
		background-image:url(../framework_images/mobile_tile_patterns/inverse_tile_pattern_3.png);
	}
	
	.mobile_background_pattern_4{
		position: relative;
		background-image:url(../framework_images/mobile_tile_patterns/tile_pattern_4.png) !important;
		background-position: center center;
		background-repeat: repeat;
		overflow: scroll;
	}
	
	.interfaceSlide.curPageSlide.inverseColors .mobile_background_pattern_4{
		background-image:url(../framework_images/mobile_tile_patterns/inverse_tile_pattern_4.png) !important;
	}
	
	.mobile_background_pattern_5{
		position: relative;
		background-image:url(../framework_images/mobile_tile_patterns/tile_pattern_5.png);
		background-position: center center;
		background-repeat: repeat;
		overflow: scroll;
	}
	
	.interfaceSlide.curPageSlide.inverseColors .mobile_background_pattern_5{
		background-image:url(../framework_images/mobile_tile_patterns/inverse_tile_pattern_5.png);
	}
	
	.mobile_background_pattern_6{
		position: relative;
		background-image:url(../framework_images/mobile_tile_patterns/tile_pattern_6.png);
		background-position: center center;
		background-repeat: repeat;
		overflow: scroll;
	}
	
	.interfaceSlide.curPageSlide.inverseColors .mobile_background_pattern_6{
		background-image:url(../framework_images/mobile_tile_patterns/inverse_tile_pattern_6.png);
	}
	
	.mobile_background_pattern_dark{
		background-color: rgba(0,0,0,0.7);
	}
	
	.mobile_cover_dark:before{
		content:"";
		position: absolute;
		top: 0px;
		left: 0px;
		height: 100%;
		width: 100%;
		background-color: rgba(0,0,0,0.7);
	}
	
	/* SOMETIMES THE PATTERNS NEED TO BE INHERITED*/
	.mobile_background_pattern_hidden{
		background-size: 0px;
    background-repeat: no-repeat;
	}
	
	.accordionPanel.mobile_background_pattern_1{
		overflow: visible;
	}

	body.ie .interfaceSlide #wrapper .fill{
		overflow: initial;
	}

}

#phone_media_queries_dot_css{
	display: none;
}
