/*
	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
*/

/***************************************************************************************/
/******************************** PHONE LANDSCAPE **************************************/
/***************************************************************************************/
@media only screen and (max-device-width: 991px) 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 5px !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;
  }

  body.xs .interfaceSlide {
    top: 0px;
    height: calc(100% - 40px);
  }

  body.xs .interfaceSlide.transcriptOpen {
    height: calc(100% - 182px);
  }

  body.xs .interfaceSlide.curPageSlide.menuScreen {
    height: calc(100% - 40px);
    padding-bottom: 0px;
  }

  body.xs .interfaceSlide.curPageSlide.menuScreen.transcriptOpen {
    height: calc(100% - 182px);
  }

  .interfaceSlide.curPageSlide.menuScreen #wrapper {
    padding: 0px !important;
  }

  .interfaceSlide.curPageSlide.scenarioScreen {
    top: 35px !important;
    height: calc(100% - 75px) !important;
    padding-bottom: 0px;
  }

  .interfaceSlide.curPageSlide.menuScreen #wrapper:before {
    display: none;
  }

  .createMenuHere {
    margin: 0px;
  }

  #menuItems .gm_menuItem {
    min-height: 90px;
  }

  body.xs #menuItems .goldMenuBtn.gvm_menuItem .menu_icon {
    top: 15px;
    right: 10px;
    height: 27px;
    width: 23px;
  }

  body.xs #menuItems .goldMenuBtn:not(.gvm_menuItem) .menu_icon {
    top: 30px;
    right: 20px;
    height: 27px;
    width: 27px;
  }

  body.rtl.xs #menuItems .goldMenuBtn:not(.gvm_menuItem) .menu_icon {
    right: auto;
    right: initial;
    left: 20px;
  }

  body.xs
    #menuItems
    .gvm_menuItem.currentBtn
    .videoMenuBtn:not(.menu_completed)
    .menu_icon {
    right: 15px;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
  }

  body.rtl.xs
    #menuItems
    .gvm_menuItem.currentBtn
    .videoMenuBtn:not(.menu_completed)
    .menu_icon {
    right: auto;
    right: initial;
    left: 15px;
  }

  body.xs #menuSlide.menuSlide {
    padding: 0px;
  }

  .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: 0%;
    left: 0%;
    width: 90%;
    margin-left: 5%;
    margin-top: 0px;
    height: auto;
  }

  /* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
  /* +++++++++++++++++++++++ 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;
    max-width: auto;
    max-width: initial;
  }
  .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.wide,
  #attestationItems .attestHolder.wide {
    padding-left: 70px;
  }

  #attestationDarkItems .attestHolder.selected {
    padding: 10px 65px 10px 45px;
    margin-bottom: 5px;
  }

  #attestationDarkItems .attestHolder.wide.selected {
    padding: 10px 65px 10px 70px;
    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;
  }

  /* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
  /* ++++++++++++++++ GRAPHICAL QUICKQUIZ SCREEN ++++++++++++++++++ */
  /* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

  body.xs #multiQuestionGraphical .graphicalCountdown,
  body.xs #multiQuestionGraphical .graphicalCountdown > div,
  body.xs #multiQuestionGraphical .graphicalCountdown canvas,
  body.xs #multiQuestionGraphical #mcGraphicalQuestion div#questionPanel {
    min-width: 0px !important;
    min-height: 0px !important;
  }

  /************* SCOREBAR HOLDERS ********************/

  /************* SCOREBAR LABEL **********************/
  body.xs .mcb_scorebar_label {
    position: absolute;
    top: 5px;
    left: 15px;
  }

  body.rtl.xs .mcb_scorebar_label {
    right: 15px;
    left: auto;
    left: initial;
  }

  /************* SCOREBAR ****************************/
  body.xs #multiplerScoreBarHolder {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    width: 100%;
    height: 50px;
    background-color: #fff;
    border-radius: 0px;
    box-shadow: none;
    padding: 0px;
    z-index: 100;
  }

  body.xs .mcb_scorebarHolder {
    position: absolute;
    top: 25px;
    left: 15px;
    height: 12px;
    min-height: 12px;
    width: calc(100% - 30px);
    box-shadow: 0px 2px 4px 4px #ffffff;
    border-width: 1px;
  }

  body.xs .mcb_scorebar_bar {
    right: auto;
    right: initial;
    left: 2px;
    min-height: calc(100% - 4px);
    min-width: 0px;
    max-width: calc(100% - 4px);
    width: 0%;
  }

  body.rtl.xs .mcb_scorebar_bar {
    left: auto;
    left: initial;
    right: 2px;
  }

  body.xs .mcb_scorebar_num {
    top: -28px;
    right: 10px;
    left: auto;
    left: initial;
    font-size: 20px;
    text-align: right;
    background-image: none;
  }

  body.rtl.xs .mcb_scorebar_num {
    left: 0px;
    right: auto;
    right: initial;
    text-align: left;
  }

  /************* TIME LABEL ****************************/
  body.xs .graphicalCountdownHolder .graphicalCountdown_time {
    position: fixed;
    top: 80px;
    left: 15px;
    font-size: 1em;
    width: 70px;
    text-align: center;
    font-weight: 900;
    z-index: 100;

    -webkit-transform: none;
    -moz-transform: none;
    -o-transform: none;
    transform: none;
  }

  body.xs .graphicalCountdownHolder .graphicalCountdown {
    display: none;
  }

  /************* Multiplier Graphic ********************/
  body.xs .mcb_multiplier {
    position: absolute;
    top: 45px;
    right: 0px;
    width: 110px;
    height: 70px;
  }

  body.xs .mcb_multiplier .mcb_multiplier_num {
    top: 13px;
    left: 0px;
    width: 100%;
    text-align: center;
    font-size: 2.5em;
  }

  body.xs .mcb_multiplier .mcb_multiplier_txt {
    display: none;
  }

  /************* Question layouts ********************/

  body.xs .mcGraphicalQuestionPanel {
    display: none;
  }

  body.xs .mcGraphicalQuestionPanel.mobileView {
    display: block;
    position: relative;
    margin-bottom: 0px;
    width: 100%;
    left: 0px;
    box-shadow: none;
    border-radius: 0px;
    padding: 15px;

    -webkit-transform: none;
    -moz-transform: none;
    -o-transform: none;
    transform: none;
  }

  body.xs #wrapper.game_quiz .mcGraphicalQuestionPanel.mobileView {
    padding-top: 30px;
  }

  body:not(.xs) .mcGraphicalQuestionPanel.mobileView {
    display: none;
  }

  body.xs .mcGraphicalQuestionPanel.mobileView .mcGQPanel_label {
    width: 80%;
  }

  body.xs #multiQuestionGraphical #mcGraphicalQuestion div#questionPanel {
    position: relative;
    top: 0px;
    width: 100% !important;
    left: 0% !important;
    height: 100%;
    margin: 0px;

    -webkit-transform: none;
    -moz-transform: none;
    -o-transform: none;
    transform: none;
  }

  body.xs #multiQuestionGraphical #mcGraphicalQuestion .optBox {
    border-radius: 0px;
    border: 0px;
  }

  body.xs #wrapper #mqgImageFeedback {
    display: none;
  }

  body.xs
    #multiQuestionGraphical
    #mcGraphicalQuestion
    .qi_optionsHolder
    .graphicalOpt {
    border-width: 0px;
    border-radius: 0px;
    padding: 15px 0px 5px 0px;
    min-height: 130px !important;
    height: auto;

    -webkit-transition: none;
    -moz-transition: none;
    -o-transition: none;
    transition: none;
  }

  body.xs
    #multiQuestionGraphical
    #mcGraphicalQuestion
    .qi_optionsHolder
    .graphicalOpt:not(.indicatorCorrect):not(.indicatorIncorrect),
  body.xs
    #multiQuestionGraphical
    #mcGraphicalQuestion
    .qi_optionsHolder
    .graphicalOpt.indicatorCorrect:not(.selected),
  body.xs
    #multiQuestionGraphical
    #mcGraphicalQuestion
    .qi_optionsHolder
    .graphicalOpt.indicatorIncorrect:not(.selected) {
    /*background-color: #dadada;*/
  }

  body.xs .graphicalOpt .graphicalOptTxt {
    position: absolute;
    left: auto;
    left: initial;
    width: 100%;
    padding: 0px 15px;

    -webkit-transform: none;
    -moz-transform: none;
    -o-transform: none;
    transform: none;
  }

  body.xs .graphicalOpt .graphicalOptIndicator {
    top: auto;
    top: initial;
    bottom: 10px;
  }

  body.xs .graphicalOpt:last-child .graphicalOptIndicator {
    top: 10px;
  }

  body.xs #multiQuestionGraphical #mcGraphicalQuestion {
    position: absolute;
    top: 50px;
    left: 0px;
    width: 100% !important;
  }

  body.xs
    #multiQuestionGraphical
    #mcGraphicalQuestion
    .qi_optionsHolder
    .graphicalOpt
    #feedbackSprite {
    top: auto;
    top: initial;
    bottom: 0px;
  }

  body.xs .mcb_scorebarHolder svg {
    display: none;
  }

  body.xs .mcb_scorebar_passmark {
    width: 8px;
    height: 100%;
    border: 1px solid #fff;
    border-width: 0px 1px;
    bottom: auto !important;
    bottom: initial;
  }

  body.xs #multiplerScoreBarHolder .mcb_numberOfQuestions_txt {
    position: absolute;
    right: 15px;
    top: -10px;
  }

  /* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
  /* ++++++++++++++++++++++ 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 +++++++++++++++++++ */
  /* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

  body.xs #wrapper.parallaxBg {
    height: auto;
  }

  #parallaxItems > div {
    padding: 0px;
    float: none;
  }

  .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;
    overflow: hidden;
  }

  .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;
  }

  /* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
  /* ++++++++++++++++++++++++++++ SCENARIO ELEMENTS +++++++++++++++++++++++++++++++ */
  /* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
  #scenarioGUI {
    left: 0px;
    width: 100%;
    height: auto;
    /*min-height: 35px;*/
    border-radius: 0px;

    -webkit-transition: none;
    -moz-transition: none;
    -o-transition: none;
    transition: none;
  }

  body.xs #scenarioGUI.showPanel {
    top: 0px;
    bottom: auto;
    bottom: initial;
    opacity: 1;
    margin-left: 0px;
    height: auto;
  }

  body.xs #sengui_powerbar .sengui_powerbar_holder {
    width: 100px;
  }

  body.xs .senGuiSection {
    padding: 5px;
    float: none;
    display: inline-block;
  }

  body.xs .senGuiPbar .sengui_label_txt {
    display: none;
  }

  body.xs #sengui_score .sengui_label_txt,
  body.xs #sengui_score .sengui_label_score {
    line-height: 15px;
    padding-right: 0px;
  }

  body.xs #scenarioGUI .scenarioGUIPanel #sengui_score {
    padding-left: 5px;
    width: 90px;
  }

  body.xs #scenarioGUI.gui_lives .scenarioGUIPanel #sengui_score {
    height: 30px;
    float: right;
  }

  body.xs #scenarioGUI.gui_lives #sengui_score .sengui_label_txt,
  body.xs #scenarioGUI.gui_lives #sengui_score .sengui_label_score {
    line-height: 30px;
  }

  body.xs #scenarioGUI .scenarioGUIPanel {
    padding: 6px 5px 0px 5px;
    height: auto;
  }

  body.xs #interfaceHolder #scenarioGUI .senGuiPbar.senGuiSection {
    padding: 5px 0px 3px 0px;
    margin: 0px 2px;
    border-bottom: 2px solid transparent;
  }

  body.xs
    #interfaceHolder
    #scenarioGUI.gui_dark
    .scenarioGUIPanel:not(.single_pb)
    .senGuiPbar.selected.senGuiSection {
    border-bottom: 2px solid #fff;
  }

  body.xs
    #interfaceHolder
    #scenarioGUI.gui_light
    .scenarioGUIPanel:not(.single_pb)
    .senGuiPbar.selected.senGuiSection {
    border-bottom: 2px solid #000;
  }

  body.xs #scenarioGUI .scenarioGUIPanel .mobile_powerbar_txt {
    padding-top: 0px;
  }

  body.xs #scenarioGUI.gui_lives .scenarioGUIPanel .mobile_powerbar_txt {
    display: none;
  }

  body.xs .senarioHeart,
  body.xs .senarioHeart:not(.life).lost::after {
    height: 20px;
    width: 20px;
  }

  body.xs #sengui_lives {
    float: left;
  }

  /* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
  /* ++++++++++++++++++++ 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;
  }

  .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;
}