@charset "utf-8";
@import url("../../components/css/buttons.css");
@import url("../../components/css/feedback_popup.css");

/*----------------------BB-Font-Family-----------------------------*/


/*Publicasans-Bold*/

@font-face {
    font-family: 'flavorsregular';
    src: url('../../fonts/flavors-regular-webfont.woff2') format('woff2'),
        url('../../fonts/flavors-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

body,
html {
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
    user-select: none;
}

#wrapper_parent {
    position: relative;
    width: auto;
    height: auto;
    display:none;
    /* margin: 0 auto; */
    /* -webkit-transform-origin: 0% 0%; */
    -moz-transform-origin: 0% 0%;
    -ms-transform-origin: 0% 0%;
    /* transform-origin: 0% 0%; */
    /* box-shadow: 2px -2px 2px 2px #1f1313; */
}

#wrapper {
    position: relative;
    width: 1600px;
    height: 1600px;
    -webkit-transform-origin: center top;
    -moz-transform-origin: center top;
    -ms-transform-origin: center top;
    transform-origin: center top;
}

#shellDisabler {
    display: none !important;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background-color: black;
    opacity: 0.2;
    z-index: 80000;
    
}
.main_container {
    width: 100%;
    /* height: 100%; */
    display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: flex-start;
   background-color: #000;
   position: absolute;
    
}
.shellWrap {
    background: none repeat scroll 0 0 #fff;
    height: 100%;
    width: 100%;
    left: 0px;
    display: none;
    top: 0px;
    position: absolute;
    /* overflow: visible; */
    background-color: white;
    /* border: 2px solid red; */
}

.shell_pageHolder {
    width: 100%;
    position: absolute;
    /* overflow: hidden; */
    height: 100%;
}

.ShellContantarea {
    top: 0px;
    height: 100%;
    width: 100%;
    position: absolute;
    overflow: hidden;
}

.ShellOverlay.menuovrlay {
    display: none;
    top: 60px;
    background-color: #000;
    opacity: 0;
}

.pageWrapper {
    position: relative;
    width: 100%;
    left: 0px;
    top: 0px;
    position: absolute;
    height: 100%;
}

.pageWrapper .container {
    left: 0px;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    color: #575A5D;
}

.objectiveWrapper {
    min-height: 20px;
    padding-bottom: 10px;
    position: relative;
    text-align: left;
}

#tracer {
    display: none;
}


/* tooltiptext */

.transcriptButton .tooltiptexts {
    visibility: hidden;
    text-align: center;
    position: absolute;
    opacity: 0;
    /* transition: opacity 1s; */
    font-size: 12px;
    background-color: white;
    display: inline-table;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 2px;
    padding-bottom: 3px;
    white-space: nowrap;
    box-shadow: 2px 2px 5px 0px black;
    z-index: 12;
}

.transcriptButton:hover .tooltiptexts:not(.disabled) {
    visibility: visible;
    opacity: 1;
}

#tooltiptext1 {
    position: absolute;
    top: -23px;
    left: -23px;
}

#tooltiptext2 {
    position: absolute;
    top: -5px;
    left: 18px;
}

#tooltiptext3 {
    position: absolute;
    top: -24px;
    left: -15px;
    transform: rotate(0deg) !important;
}

#tooltiptext4 {
    position: absolute;
    top: -28px;
    left: -13px;
}

#tooltiptext5 {
    position: absolute;
    top: -28px;
    left: -29px;
    display: none;
}

#tooltiptext6 {
    position: absolute;
    top: -24px;
    left: -11px;
}

#tooltiptext7 {
    position: absolute;
    top: -14px;
    left: 150px;
}

#tooltiptext8 {
    position: absolute;
    top: -24px;
    left: -11px;
}

#tooltiptext9 {
    position: absolute;
    top: -24px;
    left: 45px;
}

#tooltiptext10 {
    position: absolute;
    top: -7px;
    left: -36px;
}

.lmsbookmarkTxt {
    text-align: center;
    text-align: center;
    width: 400px;
    left: 4px;
    position: absolute;
}

.deactive {
    cursor: default !important;
    pointer-events: none !important;
    /* opacity: 0.5; */
}

.gotoPage {
    position: absolute;
    left: 0px;
    top: 50px;
    width: 60px;
    height: 50px;
    background: beige;
    display: none;
}

.gotoPage .pageNum {
    position: absolute;
    left: 13px;
    top: 3px;
    width: 30px;
    height: 20px;
    text-align: center;
}

.gotoPage .btnGo {
    position: absolute;
    left: 6px;
    top: 30px;
    width: 46px;
    height: 18px;
    background-color: black;
    color: white;
    text-align: center;
}

.Intro_button.icon-play {
    border: 1px solid #fff;
    border-radius: 50%;
    display: inline-block;
    cursor: pointer;
}

#supportingfacts {
    height: 31px;
    width: 186px;
    top: -1px;
    position: absolute;
    left: 333px;
    z-index: 1;
    /* cursor: default !important; */
}

.supportingfacts_normal {
    background: url('../images/supporting_facts_normal.png') no-repeat;
    background-position-y: 0px;
}

.supportingfacts_disabled {
    background: url('../images/supporting_facts_disabled.png') no-repeat;
    background-position-y: 0px;
}

.supporting_facts {
    background: url('../images/supporting_facts_over_and_blink.png') no-repeat;
    color: #004054;
}

.supportingfacts_selected {
    background: url('../images/supporting_facts_selected.png') no-repeat;
}

.supportingfacts_selecttext {
    color: #004054;
}

.supportingfacts_selectarrow {
    background: url('../images/down_arrow_blue.png') no-repeat;
    top: 7px !important;
}

.contentbox {
    height: 343px;
    width: 500px;
    z-index: 1;
    background-color: white;
    border-top: 2px solid white;
    border-bottom: 2px solid white;
    border-right: 2px solid white;
    border-left: 2px solid white;
    background: #009a3d;
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    color: #fff;
    box-sizing: border-box;
}

#supportingfactstext {
    font-size: 14px;
    position: relative;
    left: 20px;
    top: 7px;
    display: inline-block;
}

.supportingheadingTopBorder {
    position: absolute;
    height: 10px;
    width: 100%;
    top: -1px;
    background-color: #002d73;
}

.supportingfactstext {
    color: #fff;
}

.supporting_facts .supportingfactstext {
    color: #004054;
}

.supporting_facts_select {
    color: #004054;
}

#supporting_facts_image {
    height: 8px;
    width: 15px;
    position: relative;
    left: 8px;
    top: 7px;
    display: inline-block;
    cursor: pointer;
}

.arrowchange {
    background: url('../images/down_arrow_white.png') no-repeat;
    height: 8px;
    width: 15px;
    position: relative;
    left: 7px;
    top: 4px;
    display: inline-block;
}

.imagedown {
    background: url('../images/up_arrow_white.png') no-repeat;
    /* top: 7px !important; */
}

.supporting_facts .supporting_facts_image {
    background: url('../images/up_arrow_blue.png') no-repeat;
}

.supportingcontent {
    display: none;
}

.supportingheading {
    position: absolute;
    top: 0px;
    left: 0px;
    font-size: 16px;
    font-weight: Bold;
    color: white;
    width: 235px;
    height: 40px;
    padding-left: 20px;
    padding-top: 8px;
    background: url(../images/green/supportingfacts_left.png) no-repeat;
    /* width: 100%;
  height: 40px; */
    background-repeat: no-repeat;
    /*  background-size: 100%;
  box-sizing: border-box; */
}

.exitbutton_for_support {
    background: url('../images/exit_normal.png') no-repeat;
    position: absolute;
    height: 17px;
    width: 17px;
    top: 8px;
    right: 10px;
}

.exitbutton_for_supportBG {
    background: url('../images/exit_normal.png') no-repeat;
    position: absolute;
    height: 40px;
    width: 84px;
    top: 0px;
    right: 1px;
    background: url(../images/supportingfacts_right.png) no-repeat;
}

.supportingheadingTopBorder {
    position: absolute;
    height: 10px;
    width: 100%;
    top: 1px;
    background-color: #002d73;
}

.support_text1 {
    top: 50px;
    position: absolute;
    left: 0px;
    width: 93%;
    font-size: 16px;
    padding: 0px 20px;
}

.support_text1 .bulletList_container {
    color: white !important;
    left: 25px;
    width: 100%;
}

.support_text1 .bulletList_container li:before {
    background-color: white;
    height: 7px;
    border-radius: 50%;
    left: -22px;
    position: absolute;
    top: 5px;
    width: 7px;
    content: " ";
}

.support_text1 .bulletList_container li {
    color: white;
}

.support_text2 {
    top: 126px;
    position: absolute;
    left: 22px;
    width: 480px;
    font-size: 16px;
}

.exitbutton_for_support:hover {
    background: url('../images/exit_selected.png') no-repeat;
    cursor: pointer;
}

.supportingimage {
    width: 84px;
    position: absolute;
    height: 50px;
    background: url('../images/supportingfacts_right.png') no-repeat;
    right: 0px;
}

.supportingimageLine {
    width: 100%;
    position: absolute;
    height: 8px;
    background-color: #004053;
    left: 0px;
    overflow: hidden;
}

.background_dummy {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0px;
    /*   background: #004054;
  opacity: 0.4; */
    z-index: 1;
}

.selectedwhitebackground {
    background: #fff !important;
}

.supportingfacts_selected .supportingfactsbutton .supportingfactstext {
    color: #000 !important;
}

.bluecolor {
    color: #004054;
    cursor: pointer;
}

.contentboxPerent {
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0px;
    top: 0px;
    background: rgba(0, 64, 84, 0.4);
    display: none;
    z-index: 110000;
}

#iePatch {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background-color: white;
    opacity: 0;
    display: none;
}

#layoutSetter {
    content: 'Go';
    width: 34px;
    height: 34px;
    right: 500px;
    top: 32px;
    z-index: 10000;
    position: absolute;
    background-color: white;
    cursor: pointer;
    border: 2px solid;
    display: none;
}

#layoutPath {
    width: 154px;
    height: 34px;
    right: 332px;
    top: 31px;
    z-index: 10000;
    position: absolute;
    cursor: pointer;
    display: none;
}

#layoutFader {
    width: 120px;
    height: auto;
    right: 150px;
    top: 34px;
    text-align: center;
    z-index: 10000;
    position: absolute;
    background-color: white;
    cursor: pointer;
    /* border: 2px solid; */
    display: none;
}

#layoutHider {
    width: 94px;
    height: auto;
    right: 50px;
    text-align: center;
    top: 32px;
    z-index: 10000;
    position: absolute;
    background-color: white;
    cursor: pointer;
    /* border: 2px solid; */
    display: none;
}

#shellVideoContainer {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: none;
    z-index: 1;
    opacity: 0.4;
}

#shellpopUpOverlay {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    top: 0;
    display: none;
}

#trigPlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/play_icon.png);
    background-repeat: no-repeat;
    background-position: center center;
    top: 0px;
    left: 0px;
    right: 0px;
    margin: 0 auto;
    cursor: pointer;
    z-index: 10001;
    background-color: rgba(0, 0, 0, 0.5);
    display: none !important;
}