/* Grabs fonts */
@import url(https://fonts.googleapis.com/css?family=Lora);

html, body
{
    margin:0%;
    padding:0%;
    height:100%;
    width:100%;
    background-color:#243d4c;
}

body {
    overflow-y:hidden;
}

button {
    border-style:none!important;
}

/* Loading screen from old trainer */


#loading-mask 
{
   position:absolute;
   top:0;
   left:0;
   width:100%;
   height:100%;
   background: url("../Images/BackingBlocks.gif") repeat-x scroll left top rgba(255, 255, 255, 1);
}

#loading-mask>div, #loadingoverlay>div
{
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
}


.copyright {
    position: absolute;
    bottom: 10px;
    right: 10px;
    color: #999;
  	z-index:  20001;
  	font: bold 13px tahoma,arial,helvetica;
}

div#history-info-row {
    padding-top: 10px;
    padding-right: 10px;
    padding-left:10px;
}

div#history-transcript-turns {
    float:left;
    font-family:Lora; 
}

div#history-feedback-check {
    text-align:right; 
    float:right;
    font-family:Lora;
}

div.historyPanelOpt {
    float:right;
    width:5%;
    text-align:center;
    margin-top:2%;
}

div#introOptionsButton {
    display:none;
    position:absolute;
    top:45%;
    left:0;
    width:25px;
    border:1px solid black;
    border-radius:3px;
    background-color:#FFF;
    color:#000;
    padding:2px 2px 2px 2px;
}

div#introOptionsButton a {
    color:#000;
    text-decoration:none;
}

div#introTop {
    height:2.5%;
    padding-right:1%;
    padding-top:0.5%;
    padding-bottom:0.5%;
    width:98%;
}

div#introLeftBtn {
    float:left;
    display:none;
    padding-left:15px;
}

div#introRightBtn {
    float:right;
    text-align:right;
}

div#introWrapper {
    width:100%;
    height:95.5%;
    -webkit-overflow-scrolling: touch;
  	overflow:hidden;
}

div#introWrapperFull {
    width:100%;
    height:100%;
    -webkit-overflow-scrolling: touch;
  	overflow:hidden;
}

iframe#introFrame {
    width:100%;
    height:100%;
}

div#userview
{
    background-color:#243d4c;
    padding: 0.3% 0.1% 0.3% 0.1%; 
}

div#simulation
{
    width:100%; 
    position:relative;     
}

div#webglview, div#webglcontainer {
    display: none;
}

div#webglview {
    width: 100%;
    height: 100%;
}

div#webglcontainer {
    height:100%;
    width:100%;
}


#webGLFrame {
    width:100%;
    height:100%;
}

div#lessonView {
    display:none;
    padding-top:5px;
    padding-bottom:5px;
    background:#ecd8c6;
}

div#lessonName {
    text-align:left;
    padding-left:25px;
    font-size:1.1em;
    font-family:Lora;
    float:left;
}

div#lessonInfo {
    text-align:right;
    padding-right:25px;
    font-size:1.3em;
    float:right;
}

div#lessonInfo a {
    text-decoration:none;
    color:black;
}

.sim {
    background-color:#FFF;
}

div#controlside
{
    float:right;
    height:100%;
    padding-left:0.05%;
    background-color:#243d4c;
}

div#controlheader
{
    min-height:6.0vh;
    max-height:6.0vh;
}

.ctrlheader
{
    background-color: #243d4c;
}

div#tabcontrol {
    float: left;
    padding-top: 1.2vh;
    /*  margin-left:0.5vw;*/
}

div#developermode {
    display:none;
    float:left;
    padding-top:2.0vh;
    padding-right:1.5vh;
}

div#devoptions-tabs {
    margin-top:5px;
    padding-top:5px;
    border-top:1px dashed #808080;
    border-bottom:1px solid #4A4A4A;
}

div.devoptiontab {
    float:left;
    border-top:1px solid #4A4A4A;
    border-left:1px solid #4A4A4A;
    border-right:1px solid #4A4A4A;
    margin-right:3px;
    font-family:Arial;
    font-size:12px;
    padding:4px;
    cursor:pointer;
    background-color:#2470a6;
    color:#FFF; 
}

div.devoptiontab.active {
    background-color:#FFF;
    color:#4A4A4A;
}

#devoption-tabcontent {
    border-left:1px solid #2470a6;
    border-right:1px solid #2470a6;
    border-bottom:1px solid #2470a6;
    height:45vh;
    overflow-y:auto;
}

#devoption-tabcontent div {
    font-size:13px;
}

#devevents-logichistory, #devevents-availability {
    display:none;
}
 
div#developerpanel {
    display:none;
    padding-left:0.05%;
    background-color:#243d4c;
    float:right;
    height:100%;
}

div#devpanelinner {
    background-color:#FFF;
    min-height:98.5vh;
    max-height:98.5vh;
}

div#developerheader {
    background-color: #2470a6;
    border-bottom: 1px solid #243d4c;
    min-height: 5.85vh;
    max-height: 5.85vh;
}

div#developertitle {
    color: #FFF;
    font-family: Arial;
    font-size: 1.2em;
    padding-top: 0.7vh;
    font-weight: bold;
    float: left;
    padding: 1vw;
    text-shadow: -1px 1px 2px black;
}

div#developerx {
    float: right;
    color: #FFF;
    font-size: 1.2em;
    margin: .3vw;
    text-shadow: -2px 2px 1px black;
}

div#developerx a {
    text-decoration:none;
    color:#FFF;
}

div#developerbody
{
    font-family:Lora;
    padding:1vh 0.5vw 1vh 0.5vw;
}

#devoptions-top {
    padding-top:5px;
    margin-top:5px;
    border-top:1px dashed #808080;
}

#devoptions-brain {
    padding-top:5px;
    margin-top:5px;
    border-top:1px dashed #808080;
}

#devwell1-left {
    float:left;
}

#devwell1-right {
    float:right;
}

#devwell1-right button {
    width:75px;
}

div#developerbody p
{
    font-family:Lora;
}

.developerStatementValue {
    padding: 2px;
    background: #22ff05;
}

.developerIndicators {
    padding: 2px;
    background: #D587D3;
}

#devevents-availability-header, #devevents-availabilitygrid {
	margin-top:3px;
}

.devLogByTurn {
	padding: 5px;
}

.devLogByTurn .turnLog {
	cursor: default;
	margin: 3px;
	
}
.devLogByTurn .turnLog:nth-of-type(odd) {
    background: #e0e0e0;
}
.devLogByTurn .hoverable .turnLogHeader:hover {
	  background: #c4c2c2
}
.devLogByTurn .hidden
{
	display: none;
}
.devLogByTurn .expandedData {
	margin-left: 20px;
}
.devLogByTurn .logByTurnSection{
	margin: 5px;
}
.devLogByTurn .logByTurnSection div{
	padding: 3px;
}

.devLogByTurn .error {
	
	background-color: rgba(255, 0, 0, 0.5);
}
.devLogByTurn .logic {
	background-color: rgba(0, 255, 0, 0.3);
}
.devLogByTurn .events {
	background-color: yellow;
}
.devLogByTurn .milestone {
	background-color: black;
    color: white;
}
.devLogByTurn .tunnel {
	background-color: rgba(0, 0, 255, 0.3);
}
.devLogByTurn .indicator {
	background-color: rgba(255, 0, 255, 0.3);
}


#scoringPrimaryBrain, #scoringSecondaryBrain {
    border-top:1px dashed #808080;
    margin-top:10px;
    padding-top:10px;
}

#scoringSecondaryBrain {
    display:none;
}

#writers-comments-left, #writers-comments-right {
    width:48%;
    height:10vh;
    margin-top:5px;
}

#writerscommentsstatement, #writerscommentsresponse {
    width:100%;
    height:100%;
}

#devtab-misc-top div input {
    width:43px;
}

#compiledresponses {
    width:100%;
    height:10vh;
    margin-top:10px;
    margin-bottom:15px;
}

#compiledresponsestext {
    width:100%;
    height:100%;
}

.btn-transparent {
    background:none;
    border:none;
}

.devtabcontent {
    padding:0.5vh 0.5vw 0.5vh 0.5vw;
}

.developerMilestones {
    padding: 2px;
    background: #000;
    color: #fff
}

.brainGraph {
    background: #fff;
    width: 100%;
}

.brainGraph .moodLabel {
    float: left;
    height: 100%;
}
.brainGraph .moodBar {
    float: left;
    height: 100%;    
    border-left: 1px solid #000;
    position: relative;
}

.brainGraph .moodBarMeter {
    position: absolute;
    
}

.brainGraph .moodBarInfo {
    font-size: 9pt;
}
.brainGraph .moodBarMeterMin {
    position: absolute;
    width: 3px;
    background: #000;
}
.brainGraph .moodBarMeterMax {
    position: absolute;
    width: 3px;
    background: #000;
}
.brainGraph .moodContainer {
    float: left;
    width: 100%;
    margin-left: 2px;
    margin-right: 2px;
    border: 1px solid #000;
    background: #fff;
    position: relative;
}

.brainGraph .deferred {
    
}
.brainGraph .deferredOverlay {
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: rgba(255, 255,255, 0.7);

}
.brainGraph .deferredOverlay .deferredText {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    padding-top: 5px;
    font-weight: bold;
    font-size: 13pt;
}

#pnlBrainGraphSecondary {
    display:none;
}

#secondaryBrainLink {
    display:none;
}

.brainlink {
    text-decoration:none;
}

#statementindicators, #responseindicators {
    float:left;
    width:48%;
}

#statementindicators {
    border-right:1px solid #4A4A4A;
    padding-right:1%;
}

#responseindicators {
    padding-left:1%;
}

#globalindicator-grids {
    display:none;
}

.gridleft {
    float:left;
    text-align:left;
}

.gridright {
    float:right;
    text-align:right;
}

div#manualResponseCharacter {
    position:absolute;
    border:1px solid black;
    width:195px;
    height:20px;
    padding-left:5px;
    padding-top:5px;
    left:10px;
    bottom:10px;
}

.manualresponserow td {
    font-family:Lora;
    text-align:center;
    font-size:1.1em;
    padding-top:3px;
    padding-bottom:3px;
}

.manualresponserow:hover {
    background:#b8d1f3;
    cursor:pointer;
}


div#hamburgermenu
{
    float:left;
    margin-right:0.5vw;
    width:2.5vw;
    height:4.5vh;
    padding-top:1.3vh;
    cursor:pointer;
}

div#controlsection
{
    height:100%;
}

div#videoside
{
    float:left;
}

div#timerrow
{
    position:absolute;
    bottom:0.9vh;
    right:0.3vw;
    font-family:Lora;
    font-size:1em;
    display:none;
}

div#videocontainer {
    background-color:#243d4c;
    position:relative;
}

div#webglcontainer {
    background:transparent;
    position:relative;
}

#divLastTurnRapportMeterHoriz {
    display:none;
    position:absolute;
    bottom:10px;
    left:5px;
    z-index:1000;
}

.horizontalRapportMeter {
    height: 23px;
    width: 160px;
}

.horizontalRapportMeter img {
    position: absolute;
    width: 150px;
    height: 14px;
    top: 4px;
    left: 8px;
}

.meterIndicator {
    height: 23px;
    width: 20px;
    position: absolute;
    border-radius: 5px;
    left: 5px;
    top: 0px;
    -webkit-box-shadow: inset 1px 1px 7px 0px rgba(48, 50, 50, 0.75);
    -moz-box-shadow: inset 1px 1px 7px 0px rgba(48, 50, 50, 0.75);
    box-shadow: inset 1px 1px 7px 0px rgba(48, 50, 50, 0.75);
    -webkit-box-shadow: 1px 1px 7px 0px rgba(48, 50, 50, 0.75);
    -moz-box-shadow: 1px 1px 7px 0px rgba(48, 50, 50, 0.75);
    box-shadow: 1px 1px 7px 0px rgba(48, 50, 50, 0.75);
}

span#pleasetap {
    color:#FFF;
    display:none;
    font-size:1.5em;
    font-family:Arial;
}

#chart1 {
    width:76vw;
    height:28vh;
    line-height:1.2em;
    margin-bottom:4vh;
    margin-left:0.8vw;
    display:none;
}

#charttooltip {
    display:none;
    position:absolute;
    border:1px solid #4A4A4A;
    background:#808080;
    color:white;
    z-index:999999;
}

.flot-y-axis {
    left:-15px !important;
}

div#feedback
{
    height:100%;
}

div#feedback-branding {
    text-align: center;
    margin-top: 9vh;
}

div#feedback-branding img {
    width:20vw;
    opacity:0.5;
}

div#feedback-content
{
    padding:0.3% 2% 0.3% 2%;
    overflow-y:auto;
    overflow-x:hidden;
}

div#feedback-content.video4
{
    height:36vh;
}

div#feedback-content.video16
{
    height:45vh;
}

.helpagent {
    color:black;
    font-family:Lora;
}

.feedback-text-cls {
    font-family:Lora;
}

.default-feedback {
    color:#606060;
}

.feedbackrow {
    margin-top:1%;
}

.feedback-quote {
    /*width:85%;
    float:left;
    text-align:right;*/
    max-width: 71%;
    float: left;
    background-color: #dcdcdc;
    border-radius: 15px;
    padding: 0 .65em 0 .65em;
}

.feedback-avatar {
    float:left;
    width:12%;
}

.feedback-avatar img {
    /*height:8vh;*/
    margin-top: 1vh;
    }

.problemtext {
    font-family:Lora;
}

.sr-only {
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
    margin: -1px;
}

#dr_problem {
    width:48vw;
    height:25vh;
}

#dr_yourname {
   width:30vw;
}

div#shadow-history-table {
    display:none;
}

div#history-header {
    margin-top:0.5vh;
}

div#history-title {
    float:left;
    font-family:Arial;
    font-size:1.4em;
    margin-right:3vw;
    padding-top:0.6vh;
    padding-left:0.2vw;
    font-weight:bold;
}

.historybtn {
    min-width: 6vw;
    height: 3vh;
    color: #FFF;
    margin-right: 0.5vw;
    background-color: #1f3d7a;
    text-decoration: none;
    text-align: center;
    border-radius: 3px;
    font-family: Arial;
    font-size: 1em;
    font-weight: bold;
}

#history-table {
    width:100%;
    margin-top:1vh;
}

#history-table-header {
   background-color:#f9f7e8;
   width:100%;
   display:none;
}

#history-table-header-row {
    display:table-row;
    width:100%;
}

#history-table-wrapper {
    height:79vh;
    display:block;
    overflow-y:auto;
}

#history-table-contents {
    display:table;
    width:100%;
}

.historyfullrow {
    width:100%;
    display:table;
    padding-bottom:4px;
    cursor:pointer;
}

.historyreviewer {
    display:table-row;
    text-align:center;
    padding-top:1vh;
    padding-right:1vw;
    font-weight:bold;
    font-size:1.1em;
    font-family:Arial;
    width:95%;
}

.historyreviewer textarea {
    width:95%;
    height:75px;
    margin-bottom:5px;
}

.history-table-header-turn {
    font-family:Arial;
    font-weight:bold;
    font-size:1.1em;
    text-align:center;
    vertical-align:middle;
    display:none;
}

.history-table-item-block {
    display:table-row;
    width:100%;
}

#returnBtn {
    float: right;
    width: 10vw;
    height: 3vh;
    color: #FFF;
    margin-right: 0.5vw;
    background-color: #56778F;
    text-decoration: none;
    padding-top: 1vh;
    text-align: center;
    border-radius: 3px;
    font-family: Arial;
    font-size: 1em;
    font-weight: bold;
    display: none;
}


#notesfieldset legend,#mofieldset legend {
    font-family:Lora;
}

#moobjectlinks a {
    color:blue;
    text-decoration:none;
}

#generalreviewnotes {
    width:100%;
    height:15vh;
}

.avatar-mini {
    width:2vw;
}

div#progressbar {
    display:none;
    position:absolute;
    top:0;
    left:0;
    width:30vw;
    height:5vh;
    border:1px solid #4A4A4A;
    z-index:90000;
    margin-left:35vw;
    margin-top:47.5vh;
}

div#modal
{
    position:absolute;
    z-index:10000;
    border:2px solid #243d4c;
    border-radius:3px;
    background:#FFF;
}

div#modalheader {
    background: #48647b;
    padding: 1vh 1vw 1vh 1vw;
}

div#modaltitle
{
    color:#FFF; 
    font-family:Arial;
    font-size:1.2em;
    padding-top:0.2vh;
    font-weight:bold;
    float:left;
}

div#modalx
{
    float:right;
    color:#FFF;
    font-size:1.2em;
}

div#modalx a {
    text-decoration:none;
    color:#FFF;
}

div#modalhiddenfields {
    display:none;
}

div#modalbody
{
    padding:1vh 0vw 1vh 1vw;
}

div#modalbody p
{
    font-family:Lora;
}

div#modalbuttonwell
{
    position:absolute;
    right:0;
    bottom:0;
    padding:1vh 1vw 1vh 1vw;
}

.modallink {
    display:block;
    float:left;
    text-decoration:none;
    margin-left:1vw;
    padding:0.5vh 0.5vw 0.5vh 0.5vw;
    color:#FFF;
    font-family:Arial;
    font-weight:bold;
    font-size:1.1em;
}

#interact-statements {
    float:left;
    margin-right:0.5%;
    margin-top:0.5vh;
    height:84.5vh;
    overflow-y:auto;
}

#interact-categories {
    float:left;
    height:85vh;
    width:20%;
    display:none;
    overflow-y:auto;
}

#categories {
    height:76vh;
    width:100%;
    overflow-y:auto;
}

#categories a {
    position:relative;
    display:block;
}


#permbranding, #permbranding img {
    width:100%;
}

#permbranding img {
    opacity:0.5;
}

#interact-search-text
{
    height:20px;
    font-family:Arial;
    width:79%;
    margin-right:0.5%;
    margin-bottom:1vh;
    color:#000;
    float:left;
}

#top-options {
    width:8%;
    height:20px;
    padding-top:6px;
    float:left;
    text-align:right;
    font-family:Lora;
}

#top-options a {
    text-decoration:none;
    color:#000;
}

#top-slowconn {
    width:9.5%;
    float: left;
    padding-top: 2px;
    padding-left: 5px;
    text-align:center;
}

#top-slowconn a {
    font-size:0.9em;
    color:#000;
    text-decoration:none;
}

div#alert {
    position:absolute;
    top:6.5vh;
    right:5vw;
    width:20vw;
    height:15vh;
    display:none;
    border-radius:0;
    text-align:center;
    padding-top:3vh;
    font-family:Arial;
    font-weight:bold;
}

#alrtbutton {
    border:0;
    width:60px;
    height:25px;
}

div#catsearch 
{
    display:none;
}

#helpagent-wrapper {
    position:absolute;
    z-index:1000;
    bottom:0;
    right:0;
    width:134px;
    height:134px;
    display:none;
}

div#loadingoverlay {
    width:100%;
    height:99%;
    top:0;
    left:0;
    position:absolute;
    display:none;
    z-index:999998;
}

div#fullscreenvideo
{
    top:0;
    left:0;
    display:none;
    background-color:#4A4A4A;
    position:absolute;
    z-index:500;
    width:100%;
    height:99%;
}

div#videoposter {
    display:none;
    width:100%;
    height:100%;
}

div#videoposter img {
    display:inline-block;
    width:100%;
    height:100%;
}

div#videotext {
    width:90%;
    height:40vh;
    padding-left:5%;
    padding-right:5%;
    padding-top:5vh;
    display:none;
    text-align:center;
    background-color:#FFF;
    font-family:Lora;
    font-size:1.2em;
    border-bottom:1px solid #243d4c;
    overflow:auto;
}

.videotext-sm {
    font-size:0.9em;
    font-weight:bold;
}

div#videoskipbtn {
    position:absolute;
    display:none;
    bottom:40px;
    left:13px;
    z-index:550;
}

#videousingexternal {
    display:none;
  
}

#videotoggle {
    display:none;
    position: absolute;
    top: 20px;
    right: 13px;
    z-index: 550;
    font-family:Lora;
}

#videoexternal {
    position: absolute;
    top: 20px;
    right: 13px;
    z-index: 550;
}

#videoexternal a {
    color:#FFF;
    font-size:16px;
    text-decoration:none;
}


div#videoclosecaptioning {
    display:none;
    position:absolute;
    z-index:1100;
    bottom:20px;
    width:60%;
    left:15%;
    padding:1vh 1vw 1vh 1vw;
    color:white;
    font-size:1.1em;
    text-align:center;
    text-transform:uppercase;
    overflow-y:auto;
    border:1px solid black;
    border-radius:3px;
    background-color:black;
}

/* Hide the video controls on IOS */

button#skipbtn {
    background-color:transparent;
    border:1px solid red;
    border-radius:3px;
    color:#fafafa;
}

div#minimalmoderesumebtn {
    position:absolute;
    display:none;
    bottom:2vh;
    left:2vh;
    z-index:550;
}

button#minimalmodebtn {
    background-color:transparent;
    border:1px solid black;
    border-radius:3px;
    color:black;
    font-weight:bold;
    height:20px;
}

video#charvideo
{
    display:none;
    width:100%;
    height:100%;
}

div#frontscreens {
    display:none;
    width:100%;
    height:100%;
    background-color:#FFF;
}

div#scoringpages {
    display:none;
    width:100%;
    height:100%;
    background-color:#FFF;
}

div#scoring-shadow-print {
    display:none;
     width:100%;
    height:100%;
    background-color:#FFF;
}

.videoStacks>div
{
    width:100%;
    height:100%;
}

.videoStacks>div>.video16
{
    width:100%;
    height:100%;
}

.conversation-body
{
    padding:1vh 0.5vw 1vh 0.5vw;
    min-height:90.4vh;
    max-height:90.4vh;
    background-color:#FFF;
}


div#catempty {
    display:none;
}

.categorywell
{
    margin-bottom:1vh;
    margin-right:0.5%;
}

.categorywelltitle
{
    background-color:#f9f7e8;
    padding-top:1vh;
    height:3.9vh;
    color:#2e3033;
    padding-left:1vw;
    position:relative;
}


.categorywelltitlebox {
    border:2px solid gray;
    border-radius:3px;
    padding:0.3vh 0.4vw 0.0vh 0.4vw;
    font-size:1em;
    margin-right:0.6vw;
    float:left;
    color:#474a4f;
    cursor:pointer;
}

.categorywelltitletext {
    float:left;
    font-family:Arial;
    font-weight:bold;
    font-size:1.3em;
    cursor:pointer;
    background:none;
    margin:0px;
    padding:0px;
}

.bubbles {
    background: none repeat scroll 0 0 red;
    border-radius: 50%;
    box-shadow: 0 1px 2px #444;
    color: #fafafa;
    position:absolute;
    font-size: 0.88em;
    font-weight: bold;
    height: 2.2vh;
    position: absolute;
    right: -0.5vw;
    line-height:2.2vh;
    text-align: center;
    top: -0.5vh;
    width: 1.2vw;
}

.subbubbles {
    background: none repeat scroll 0 0 red;
    border-radius: 50%;
    box-shadow: 0 1px 2px #444;
    color: #fafafa;
    position:absolute;
    font-size: 0.88em;
    font-weight: bold;
    height: 2.2vh;
    position: absolute;
    right: 0.5vw;
    line-height:2.2vh;
    text-align: center;
    top: -0.5vh;
    width: 1.2vw;
}

.categorylink {
    position: relative;
    display: table;
    height: 4vh;
    width: 88%;
    margin-top: 0.5vh;
    padding: 2%;
    text-decoration: none;
    color: #FFF;
    text-align: center;
    border-radius: 3px;
    font-family: Arial;
    font-size: 0.9em;
    margin-bottom: 0.5vh;
    font-weight: bold;
    background-color:#48647b;
    cursor: pointer;
}

.categorylink:hover
{
 
}

.categorylinkname 
{
    height:4.5vh;
    vertical-align:middle;
    text-align:center;
}

.categorylinkname:hover
{
   
}

.subcategorylink
{

}

.subcategorylink:hover
{
    color:#FFF;
}

.subleftarrow {
    float:left;
    width:9%;
    height:1.5vh;
    font-size:0.1em;
    border-left:1px dashed #4A4A4A;
    border-bottom:1px dashed #4A4A4A;
}

.subcategorylinkname {
    float: left;
    height: 4vh;
    text-align: center;
    background-color: #48647b;
    width:80%;
    margin-bottom: 5px;
    color: #FFF;
}


.subcategorylinktext {
    position: relative;
    font-weight:700;
    font-size:12px;
    top: 5%;
    -webkit-transform: translateY(-25%);
    -ms-transform: translateY(-25%);
    transform: translateY(-25%);
}

.categorywelllinks
{
    padding:0.5vh 0vw 0vh 0vw;
}

.statementblock {
    padding: 0.5vh 1vw 0.5vh 1vw;
    margin-bottom:1vh;
}

.statementblock:hover, .statementblock.speechactive 
{
    background-color:rgba(67, 128, 225, 0.10);
}

.statementblock:hover>a {
    font-weight:bold;
    color:#4A4A4A;
}

.ralLink {
    text-decoration:none;
    vertical-align:middle;
}

.clearing {
    clear:both;
}

.statementlink
{
    font-family:Lora; 
    font-size:1.1em;
    text-decoration:none;
    vertical-align:middle;
    color:black;
}

.statementlink:hover
{
    color:#4A4A4A;
    font-weight:bold;
}

.statementlink.followon:hover
{
    color:#2d61b5;
}

.saveloadheader th {
    font-family:Arial;
    font-weight:bold;
    padding:3px;
    text-align:center;
    background-color:#DDD;
    border:1px solid #4A4A4A;
}

.saveloadrow td {
    font-family:Lora;
    text-align:center;
    font-size:1.1em;
    padding-top:3px;
    padding-bottom:3px;
}

.trackerrow td {
    font-family:Lora;
    text-align:center;
    font-size:1em;
    padding-top:3px;
    padding-bottom:3px;
}

.saveloadrow td a {
    text-decoration:none;
}

.saveloadrow td span.sl_playbtn {
    color:green;
    font-size:1.2em;
}

.saveloadrow td span.sl_savebtn {
    color:#4485b3;
    font-size:1.2em;
}

.saveloadrow td span.sl_delbtn {
    color: red;
    font-size:1.2em;
}

.searchlink {
    color:green;
}

.followon {
    color:#2d61b5;
}

.greenButton {
    background: #003300;
    margin-bottom:4px !important;
    color:#FFF;
}

.normalButton {
    background-color: #1f3d7a;
  
    margin-bottom: 4px !important;
}

.redButton {
    background: maroon;
    margin-bottom: 4px !important;
}



.videoStacks {
    position:absolute;
    z-index:4;
    top:0;
    left:0;
    width:100%;
    height:100%; 
}

.tab {
    float: left;
    background-color: #48647b; 
    margin-right:0.25vw;
    color: white;
    font-family: Arial;
    font-size: 1em;
    text-align: center;
    font-weight: bold;
    padding-top: 0.4vh;
    width: 10vw;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    height: 4.8vh;
    text-decoration: none;
    cursor: pointer;
}

.tab.activestate {
    background-color:#FFF;
    color:#404040;
}

.tab:hover
{
    background-color:#FFF;
    color:#404040;
}

.visible {
    display:block;
}

.hidden {
    display:none;
}

#micloading {
    display:none;
    top:0.1vw;
    left:3vw;
    position:absolute;
}

.micspinneroverlay {
    position:absolute;
    z-index:10;
    top:2px;
    left:2vw;
}

.micoff, .micon {
    font-size: 2.4em;
}

.micoff {
    color:#FFF;
}

.micon {
    color:green;
}

#microphone-off, #microphone-on {
    text-decoration:none;
}

#microphone-mute {
    width: 1.5vw;
    margin-right: 0.3vw;
    display: none;
    text-decoration: none;
}

#microphoneMuteText {
   color:#FFF;
    font-size:1.8em;
}

div#speechicon
{
    margin-top:1.5vh;
    float:left;
    margin-right:0.8vw;
    text-align:right;
    position:relative;
}

#ctrlVoiceoverCtrl {
    position:fixed;
    bottom:0;
    left:35vw;
}

#ctrlAudioResponseCtrl {
    position: fixed;
    bottom: 0;
    left: 35vw;
}

#ctrlSpeechTTSCtrl {
    position: fixed;
    bottom: 0;
    left: 35vw;
}

div#volumebar
{
    float:left;
    margin-top:1.5vh;
    margin-left:0.2vh;
    margin-right:1vw;
}

.volume 
{
  width:4px;
  margin-left:2px;
  background:#FFF;
  float:left;
  border-radius:3px;
}

#v1 {
   height:3vh;
}

#v2 {
   height:2.7vh;
   margin-top:0.15vh;
}

#v3 {
   height:2.4vh;
   margin-top:0.3vh;
}

#v4 {
  height:2.1vh;
  margin-top:0.45vh;
}

#v5 {
  height:1.8vh;
  margin-top:0.6vh;
}

.volume.on {
   background:green;
}

.reviewernotesfield {
    width:99.1%;
    height:8vh;
    margin-right:0.9%;
}

.reviewernotestext {
    border:1px solid black;
    font-family:Arial;
    width:100%;
    height:100%;
    font-style:italic;
    font-size:0.9em;
    color:#808080;
}

.topdottedline
{
    border-top:1px dashed gray;
    padding-top:15px;
}

.uidisabled 
{
    pointer-events:none;
    opacity:0.3!important;
}

.video4full
{
    margin-left:17.75%;
    width:64.5%;
}

.video16full 
{
    margin-left:7%;
    width:86%;
}

/* Presets */
.substitutionblock {
    margin-top:1vh;
}

.substitutionleft {
    float:left;
    width:10vw;
    padding-top:0.2vh;
    margin-top:0vh;
    font-family:Lora;
}

.substitutionright {
    float:left;
}


/* Form options */
.scrollwindow {
    overflow-y:auto;
}

.checkleft {
    float:left;
    margin-top:8px;
    margin-right:10px;
}

.checkright
{
    float:left;
    margin-top:8px;
    font-family:Lora;
}

.selectleft 
{
    float:left;
    padding-top:10px;
    margin-right:10px;
    font-family:Lora;
}

.selectright
{
    float:left;
    margin-top:10px;
}

.optionssectionheader {
    font-weight:bold;
    margin-top:1.5vh;
}

.optionssectionchild1 {
    margin-left:2vw;
}

.optionssectionchild2 {
    margin-left:4vw;
}

div.fancy-select {
	position: relative;
}

div.fancy-select select:focus + div.trigger {
	box-shadow: 0 0 0 2px #4B5468;
}

div.fancy-select div.trigger {
	cursor: pointer;
	padding: 5px 12px 4px 4px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	position: relative;
	background: #FFF;
	border: 1px solid #99A5BE;
	border-top-color: #A5B2CB;
	color: #000;
    font-family:Lora;
	width: 10vw;

	transition: all 240ms ease-out;
	-webkit-transition: all 240ms ease-out;
	-moz-transition: all 240ms ease-out;
	-ms-transition: all 240ms ease-out;
	-o-transition: all 240ms ease-out;
}

div.fancy-select div.trigger:after {
	content: "";
	display: block;
	position: absolute;
	width: 0;
	height: 0;
	border: 5px solid transparent;
	border-top-color: #4B5468;
	top: 20px;
	right: 9px;
}

div.fancy-select div.trigger.open {
	background: #FFF;
	border: 1px solid #475062;
	color: #000;
    font-family:Lora;
	box-shadow: none;
}

div.fancy-select div.trigger.open:after {
	border-top-color: #7A8498;
}

div.fancy-select ul.options {
	list-style: none;
	margin: 0;
	position: absolute;
	top: 40px;
	left: 0;
	visibility: hidden;
	opacity: 0;
	z-index: 50;
	max-height: 150px;
	overflow: auto;
	background: #FFF;
	border-radius: 4px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
	min-width: 10vw;

	transition: opacity 300ms ease-out, top 300ms ease-out, visibility 300ms ease-out;
	-webkit-transition: opacity 300ms ease-out, top 300ms ease-out, visibility 300ms ease-out;
	-moz-transition: opacity 300ms ease-out, top 300ms ease-out, visibility 300ms ease-out;
	-ms-transition: opacity 300ms ease-out, top 300ms ease-out, visibility 300ms ease-out;
	-o-transition: opacity 300ms ease-out, top 300ms ease-out, visibility 300ms ease-out;
}

div.fancy-select ul.options.open {
	visibility: visible;
	top: 40px;
	opacity: 1;
  
	/* have to use a non-visibility transition to prevent this iOS issue (bug?): */
	/*http://stackoverflow.com/questions/10736478/css-animation-visibility-visible-works-on-chrome-and-safari-but-not-on-ios*/
	transition: opacity 300ms ease-out, top 300ms ease-out;
	-webkit-transition: opacity 300ms ease-out, top 300ms ease-out;
	-moz-transition: opacity 300ms ease-out, top 300ms ease-out;
	-ms-transition: opacity 300ms ease-out, top 300ms ease-out;
	-o-transition: opacity 300ms ease-out, top 300ms ease-out;
}

div.fancy-select ul.options.overflowing {
	top: auto;
	bottom: 40px;

	transition: opacity 300ms ease-out, bottom 300ms ease-out, visibility 300ms ease-out;
	-webkit-transition: opacity 300ms ease-out, bottom 300ms ease-out, visibility 300ms ease-out;
	-moz-transition: opacity 300ms ease-out, bottom 300ms ease-out, visibility 300ms ease-out;
	-ms-transition: opacity 300ms ease-out, bottom 300ms ease-out, visibility 300ms ease-out;
	-o-transition: opacity 300ms ease-out, bottom 300ms ease-out, visibility 300ms ease-out;
}

div.fancy-select ul.options.overflowing.open {
	top: auto;
	bottom: 50px;

	transition: opacity 300ms ease-out, bottom 300ms ease-out;
	-webkit-transition: opacity 300ms ease-out, bottom 300ms ease-out;
	-moz-transition: opacity 300ms ease-out, bottom 300ms ease-out;
	-ms-transition: opacity 300ms ease-out, bottom 300ms ease-out;
	-o-transition: opacity 300ms ease-out, bottom 300ms ease-out;
}

div.fancy-select ul.options li {
	padding: 8px 12px;
	color: #000;
    font-family:Lora;
	cursor: pointer;
	white-space: nowrap;

	transition: all 150ms ease-out;
	-webkit-transition: all 150ms ease-out;
	-moz-transition: all 150ms ease-out;
	-ms-transition: all 150ms ease-out;
	-o-transition: all 150ms ease-out;
}

div.fancy-select ul.options li.selected {
	background: #FFF;
	color: #000;
    font-family:Lora;
}

div.fancy-select ul.options li.hover {
	color: blue;
}

.logicErrorTextArea {
    width:96%;
    height:22vh;
}


/* Hamburger menu */

.hamburger
{
    display:inline-block;
    max-width:100%;
}

.hamburgerlink
{
    margin-top:0.2vh;
    cursor:pointer;
    background:none;
}

.hamburgerlink>div {
    width: 2.2vw;
    height: 0.6vh;
    background-color: #FFF;
    margin-bottom: 0.5vh;
    border-radius:3px;
}

.hamburgerlink>div.bottom-hamburger
{
    margin-bottom:0!important;
}

.menu {
    position: absolute;
    background-color: #F0F0D3;
    width: 25vw;
    margin-left: -22.5vw;
    margin-top: 1.6vh;
    /*border:1px solid #4D76B0;*/
    border-radius: 3px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 99999;
}

.bottom-menu-item
{
    margin-bottom:1.5vh;
}


.menu-style
{
    list-style-type:none;
    line-height:2.4em;
    padding:1vh 2vw 1vh 2vw;
}

ul.menu-style li>button>span
{
    font-size:2em;
    color:#2d61b5;  
    vertical-align:middle; 
}

ul.menu-style li > button {
    vertical-align: middle;
    font-size: 1.1em;
    font-weight: bold;
    color: #4F4F4C;
    font-family: Lora;
}

.helptiparrowshell {
    z-index: 9000;
    position: absolute;
}

.helptiparrowbox {
    background-color: #fff;
    border-radius: 14px;
    font-family: Arial;
    color: black;
    border:1px solid #777;
    padding: 15px;
    float:left;
}

.helptiparrowleft, .helptiparrowright {
    float:left;
}

.helptiparrowbuttonwell {
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
}

.helptiparrowbox p button {
    font-family: Arial;
    font-size: 1.2em;
}

.helptiparrowbox .bubbles {
    top:10px;
    right:0px;
    background-color: #000 !important;
}

.helptiparrowbox .bubbles a {
    color: #FFF;
    text-decoration: none;
}

.htavert {
    width:33%;
    text-align:center;
    float:left;
    line-height:10px;
}

.htavbot {
    width: 33%;
    text-align: center;
    float: left;
    line-height:10px;
}

.htaside {
    height:33%;
    width:10px;
    position:relative;
}

#htatopleft, #htatopright, #htatopmid, #htarightleft, #htarightmid, #htarightright, #htabotleft, #htabotmid, #htabotright, #htaleftleft, #htaleftmid, #htaleftright {
    display:none;
}

.hta-arrow-up {
    display:inline-block;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #777;
}

.hta-arrow-down {
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #777;
}


.hta-arrow-left {
    display: inline-block;
    width: 0;
    height: 0;
    top:50%;
    left:50%;
    position:absolute;
    transform:translate(-50%, -50%);
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 10px solid #777;
}

.hta-arrow-right {
    display: inline-block;
    width: 0;
    height: 0;
    top: 50%;
    left: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid #777;
}



.helptipbox {
    z-index:9000;
    position:absolute;
    background-color:#fff2e6;
    border-radius:6px;
    font-family:Arial;
    color:black;
    width:425px;
    height:325px;
    padding:15px;
}

.helptipbox p button {
    font-family:Arial;
    font-size:1.2em;
}

.helptipbox .bubbles {
    background-color:#000!important;
}

.helptipbox .bubbles a {
    color:#FFF;
    text-decoration:none;
}

.helptipbuttonwell {
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    text-align:center;
}


/* Visual Formatting*/
.floatRight {
    float:right;
}
/*chat bubble head and tail*/
.chatTail {
    position: relative;
}

 .chatTail:after {
    left: 101.8%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(236, 236, 236, 0);
    border-left-color: #f5f5f5;
    border-width: .3vw .75vw .2vw .75vw;
    margin: -3vh 0 0 0;
}

.chatHead {
    position: relative;
}

.chatHead:before {
    right: 87.5%;
    top: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(236, 236, 236, 0);
    border-right-color: #dcdcdc;
    border-width: .2vw .75vw .3vw .75vw;
    margin-top: 1.6vh;
}
.feedback-quote-User {
    background-color:#f5f5f5;

}
/*Reverse Mode Last Statement*/
#reversemodedisplay {
    margin-top:1vh;
    padding:1vw;
    display:none;
}

#reversemodepicture {
    margin-top:1vh;
    display:none;
}

.chatHeadReverse {
    position:relative;
}

.chatHeadReverse:before {
        right: 99.7%;
        top: 22%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
        border-color: rgba(236, 236, 236, 0);
        border-right-color: #dcdcdc;
        border-width: .2vw .5vw .3vw .8vw;
    }

/*History Chat Style*/
.historyCharacterSide {
    background-color: #dcdcdc;
    border-radius: 15px;
    padding: 1em;
    float: left;
    max-width: 80%;
    margin:0 0 0 .3vw;
}

.historyUserSide {
    float: right;
    background-color: #f5f5f5;
    padding: 1vh;
    margin: 1vh .3vw 1vh 0;
    border-radius: 15px;
    max-width: 75%;
}
.historyAvatar {
    float: left;
    margin-top:1%;
}

.historyUser {
    float: right;
    margin-top: 1vw;
}

.historyChatTail {
    position: relative;
}

.historyChatTail:after {
    left: 100%;
    top: 80%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(236, 236, 236, 0);
    border-left-color: #f5f5f5;
    border-width: .3vw .75vw .2vw .75vw;
    margin: -3.6vw 0 0 -0.25vw;
}

.historyChatHead {
    position: relative;
}

.historyChatHead:before {
        right: 99.8%;
        top: 13%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
        border-color: rgba(236, 236, 236, 0);
        border-right-color: #dcdcdc;
        border-width: .2vw .5vw .3vw .8vw;
}

/*Developer mode styles*/
button#devmode {
    position: relative;
    background-color: #2470a6;
    border: none;
    color: #FFFFFF;
    padding: 0.9vh;
    text-align: center;
    text-decoration: none;
    overflow: hidden;
    cursor: pointer;
    box-shadow: -2px 2px 2px 1px #1a5077;
    margin-top: -10vh;
    text-shadow: -1px -1px black;
}

/* Trainer desktop styles */
.loginLeft {
    float:left;
    width:12vw;
}

.loginLeft img {
    width:12vw;
}

.loginRight {
    float:left;
    width:29vw;
    margin-left:2vw;
}

.loginRight p {
    font-family:Arial;
}

.loginTitle {
    font-family:Arial;
}

.loginBox {
    margin-top:3vh;
    border:1px solid black;
    height:20vh;
    width:36vw;
    padding:1vh 1vw 1vh 1vw;
}

.loginBoxRight {
    float:left;
    width:6vw;
    font-family:Arial;
    margin-top:1vh;
    padding-top:1vh;
}

.loginBoxLeft {
    float:right;
    width:20vw;
    margin-top:1vh;
}

.loginBoxLeft input {
    width:19vw;
    height:3vh;
}

.loginError {
    font-family:Arial;
    color:red;
}

#lopMenuItemLine, #lopMenuItemID 
{
    display:none;
}

/* Toggle Switch */
/* The switch - the box around the slider */
.switch {
    position: relative;
    display: inline-block;
    width: 45px;
    height: 17px;
}

    /* Hide default HTML checkbox */
    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

/* The slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

    .slider:before {
        position: absolute;
        content: "";
        height: 18px;
        width: 22px;
        background-color: #2196F3;
        -webkit-transition: .4s;
        transition: .4s;
    }

input:checked + .slider {
    background-color: #000;
}

input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

    .slider.round:before {
        border-radius: 50%;
    }

/* Mark's change for categories */
@media screen and (max-height:760px) and (min-width: 1025px) {
    span.categorylinkname, .subcategorylinktext {
        font-size: 0.6em !important;
    }

    div#top-slowconn, div#top-options {
        font-size: .7em !important;
    }
}