/**
 * The only css in here should be that used by both test delivery and wa admin.
 * If it's specific to delivery put it in delivery.css if it's specific to the admin side put it in admin.css
 */
 
 :root {
  --main-font-family: proxima-nova, Helvetica, Arial, sans-serif;
  --main-font-size: 16px;
  --main-app-color: #5a5a5a;
  --main-footer-color: #545454;
  --enabled-button-bg-color: #487180;
  --disabled-button-bg-color: #cccbcd;
  --button-color: #fff;
  --table-caption-color: #5a5a5a;
  --table-head-color: #5a5a5a;
  --table-head-bg-color: #e9ebf2;
  --profile-drop-down-border-color: #5a5a5a;
  --link-color: #5a5a5a;
  --link-visited-color: #5a5a5a;
  --link-hover-color: #5a5a5a;
  --main-tab-color: #5a5a5a;
  --active-tab-bottom-color: #487180;
  --topnav-link-color: #545454;
  --header-color: #5a5a5a;
}

 body {
  margin: 0px 9px;
  padding: 2px;
  font-family: proxima-nova, Helvetica, Arial, sans-serif;
  font-family: var(--main-font-family);
  font-size: 16px;
  font-size: var(--main-font-size);
  color: #5a5a5a;
  color: var(--main-app-color);
  background-color: #FFFFFF;
  min-width: fit-content;
  width: auto;
}

#maincontent {
  margin-left: auto;
  margin-right: auto;
  border: none;
  background: #FFFFFF;
}
#mainbody {
  margin-top: 0px;
  background: none;
  padding: 0;
  padding-bottom: 20px;
}
#mainfooter {
  color: #545454;
  color: var(--main-footer-color);
  font-size: 12px;
  padding-right: 8px;
  padding-top: 10px;
  text-align: right;
  clear: both;
}
#mainfooter img {
  vertical-align: middle;
  margin-left: 10px;
}
#headerimage {
  display: block;
}
div#maintabs {
  margin: 10px 0px;
}

#mainnotabs {
  height: 30px;
}
#scoringExplanation {
  padding-bottom: 15px;
}
#matchingfeedbacktable td {
  padding: 3px;
}
td.correctmatchingtext {
  font-style: italic;
}
.errors {
  color: #c00;
  font-weight: bold;
  text-align: left;
  white-space: nowrap;
}
.info {
  color: blue;
  font-weight: bold;
  text-align: left;
  white-space: nowrap;
}
.messages {
    text-align: left;
     margin: 12px auto 6px 12px;
/*    white-space: nowrap; */
}
.redAlert {
  color: #CC0000;
  font-weight: bold;
}
/* The questiontable class is used in test delivery as well as item preview,
   item scoring, and assessment results */
/* Not sure why this is in here.  Was causing funky behavior with
   images in test delivery.  Alignment should be handled in the item itself
.questiontable img {
 float: right;
 margin-left: 5px;
 margin-bottom: 5px;
}
*/
.questiontable td {
  padding-top: 3px;
}
table.questiontable td.col1 {
  font-weight: bold;
  text-align: center;
  vertical-align: top;
  padding-right: 10px;
}

		div.bioPopupBlock {
		    padding-top: 30em;
		    z-index: 9999;
		    position: fixed;
		    top: 50%;
		    left: 50%;
		    transform: translate(-50%, -50%);
		    width: 100%;
		    height: 100%;
		}
		
		div.bioPopupCanvass {
		    background: white;
		    top: 50%;
		    left: 50%;
		    width: 30em;
		    margin: auto;
		    padding: 0.5em;
		    border: 0.1px solid;
		}		  
		    
		div.bioPopupContent {
		    text-align: left;
		    border: 2px solid #487180;
		    margin: 10px;
		    padding: 20px;
		}

      .bioPopupBlock h4 {
        margin: 1.15em 0 .5em;
      }

      .bioPopupBlock h3+p {
        margin-top: 1em;
      }

      .bioPopupBlock p {
        margin-bottom: 1em;
        line-height: 1.5em;
        text-align: left;
      }

      .bioPopupBlock .longbutton+h4 {
        margin-top: 1.5em;
      }      
      
      .is-hidden { display: none; }

/* Control code for testTaker homepage biometric enrollment zone */
      div.bioBlock {
        float: right;
        width: 40%;
        padding: 15px;
        margin: auto;
        border-radius: 40px;
        border: 2px solid #487180;
      }

      .bioBlock h4 {
        margin: 1.15em 0 .5em;
      }

      .bioBlock h3+p {
        margin-top: 1em;
      }

      .bioBlock p {
        margin-bottom: 1em;
        line-height: 1.5em;
      }

      .bioBlock .longbutton+h4 {
        margin-top: 1.5em;
      }


div.techFooter {
  color: #666666;
  clear: both;
  padding: 20px 0px 0px 0px;
}
table.questionResults td {
  padding: 3px 5x 3px 5px;
  vertical-align: top;
}
/* Gladiator */
#welcome {
  padding: 6px 0px 0px 0px;
}
#login {
  width: 250px;
  float: right;
  padding: 5px;
  border: solid 1px;
  border-radius: 8px;
}
#publicNews {
  padding: 10px 10px 10px 10px;
  border-style: dashed;
}
#candidateNews {
  padding: 10px 10px 10px 10px;
  border-style: dashed;
}
#forgotPasswordMessage1 {
  display: none;
}
#forgotPasswordMessage2 {
  display: none;
}

span.disabledbutton a, input.disabledbutton {
   pointer-events: none;
}

/* Below is for WA-2679 Allow Font Styles in HTML Editor */
/* HEADINGS */

h1 {
  font-size: 19px;
}
h2 {
  font-size: 18px;
}
h3 {
  font-size: 17px;
}
h4 {
  font-size: 16px;
}
h5 {
  font-size: 15px;
}
h6 {
  font-size: 14px;
}
/* COLORS */

.black {
  color: #000000;
}
.red {
  color: #FF0000;
}
.yellow {
  color: #FFFF00;
}
.darkblue {
  color: #0000FF;
}
.lightblue {
  color: #00CCFF;
}
.green {
  color: #00FF00;
}
/* FONTS */

.arial {
  font: Arial;
}
.arialblack {
  font: Arial Black;
}
.verdana {
  font: Verdana;
}
.timesnewroman {
  font-family: "Times New Roman", Times, serif;
}
.sansserif {
  font: sans-serif;
}
/* style */

.bold {
  font-weight: bold;
}
.italic {
  font-style: italic;
}
/* FONTS */

.font8 {
  font-size: 8pt;
}
.font10 {
  font-size: 10pt;
}
.font12 {
  font-size: 12pt;
}
.font14 {
  font-size: 14pt;
}
.font16 {
  font-size: 16pt;
}
.font18 {
  font-size: 18pt;
}
.font20 {
  font-size: 20pt;
}
.font22 {
  font-size: 22pt;
}
.font24 {
  font-size: 24pt;
}
.font26 {
  font-size: 26pt;
}
.font28 {
  font-size: 28pt;
}
.font30 {
  font-size: 30pt;
}
.font32 {
  font-size: 32pt;
}
.font34 {
  font-size: 34pt;
}
.font36 {
  font-size: 36pt;
}
/* Session Review */
div .videobody {
  font-family: Verdana;
  display: grid;
  grid-template-columns: 35% 1fr;
}

.grid-item-1,
.grid-item-2 {
  padding: 20px;
}

div.videobody p {
  line-height: 1.5em;
}

div.videobody h1 {
  margin-bottom: 20px;
}

div.videobody img {
  margin-top: 15px;
  border: 1px solid #ccc;
}

.videobody .table-wrapper {
  overflow: hidden;
  overflow-y: scroll;
  height: 450px;
  border: 1px solid #ccc;
  margin-top: 20px;
}

.videobody table.newblue {
  width: 100%;
}

table#eventSessionTranscript.newblue td,
table#eventSessionTranscript.newblue th {
  padding: 4px 3px 5px;
  margin: 0;
}
.dropdown {
    position: relative;
    display: inline-block;
    border-bottom: solid 1px #487180;
    min-width: 150px;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: white;
    overflow: hidden;
    padding-top: 15px;
    color:white;
    z-index: 1;
    border: 1px solid #5a5a5a;
    border: 1px solid var(--profile-drop-down-border-color);
    border-radius: 15px;
    text-align: center;
    width: 90%;
    width: -webkit-fill-available;
}

.dropdown:hover .dropdown-content {
    display: block;
}
.splashPage {
  position: relative;
  position: sticky;
}
.elevatedBox {
    max-width: 1060px;
    padding: 15px;
    margin: auto;
}
img#rightHeadImage {
  float: right;
}

/* Confirm password box */
table.plain_form #passwordBox, table.userdetails #passwordBox {
  display: none; 
  width: 100%;
} 
table.plain_form #passwordBox td.col2, table.userdetails #passwordBox td.col2 {
  width: 24em; 
  margin: 6px 0px; 
  padding: 6px;
  border-radius: 4px;  
  border: 2px solid #cf7180; 
  align: right;
}

/* responsive frame */
.iframe-container {
  overflow: hidden;
}
 
.iframe-container iframe {
   border: 0;
   height: 80em;
   left: 0;
   top: 0;
   width: 100%;
}

div.authBlock {
  display: block;
  margin: 10px;
  padding: 10px 5px 5px 10px;
  height: auto !important;
  text-align: center;
}

div.authBlockText {
  font-size:  1.5em;
  margin:     0.625em;
}

body.privateEventAuthLayout {
    margin: 0px;
    padding: 0px;
    font-family: proxima-nova, Helvetica, Arial, sans-serif;
    font-family: var(--main-font-family);
    font-size: 16px;
    font-size: var(--main-font-size);
    color: #5a5a5a;
    color: var(--main-app-color);
    background-color: white;
    min-width: fit-content;
    width: auto;
}