@charset "utf-8";
/* CSS Document */

/* tsd_standard.css Overrides
====================================================*/

#contentLayer {
    color: #042f32;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.125em;
    line-height: 1.2em;
    float: left;
}

.navbar {
    background-color: #436365;
}

nav span {
    color: #FFF;
}

nav span.disabled,
nav span.disabled:hover {
    color: #FFF;
}

/* Landing page Icon Color*/
.i-index {
    color: #C60;
}

/* Link Styles */
a {
    color: #0068b3;
}

li {
    margin-bottom: .75em;
    line-height: normal;
}

ul>li>ul, ul>li>ol, ol>li>ol, ol>li>ul {
    margin: .75em 0;
}

#qstnText h2 {
    margin-bottom: 0;
}

#qstnText a {
    text-decoration: underline;
}

/* Alert Prompt Styles */
.alert {
    border-radius: 0em;
    padding: 0em .3em;
}

.alert-info {
    color: #31708f;
    background-color: #d9edf7;
    border-color: #bce8f1;
}

.gutter {
    max-width: 98.5%;
    height: 100%;
    margin-left: auto !important;
    margin-right: auto !important;
    position: relative;
}

[class*='col-'] {
    padding: 0 .25%;
}

.row {
    margin-top: .35em;
}

/* Set color of the Answer arrow
   To change style of arrow, modify .ans-arrow-(top,bottom,left,right):before*/
.ans-arrow {
    color: #006600;
}

.highlight,
a.highlight,
.highlight a,
.qstn-highlight {
    color: #0EA3AD;
}

/* Styles for question feedbacks*/
/* Set Feedback Row to Fixed position to ensure it displays when feedback is shown dynamically, 
	otherwise the content would be hidden. */
.feedback-row {
    position: relative;
}

.qstn-Correct,
.qstn-Correct h2,
.qstn-Correct li,
.qstn-Final {
    color: #047b49;
    font-weight: bold;
}

.qstn-Tryagain {
    color: red;
    font-weight: bold;
}

.qstn-Incorrect,
.qstn-Incorrect h2,
.qstn-Incorrect li {
    color: red;
    font-weight: bold;
}

a.btn-tab {
    padding: 0.25em 0.65em;
    display: inline;
}

.btn-tab-norm,
.hs-norm,
.lb-result .closeBtn.btn-tab-vis {
    color: #548254;
    background-color: #eeeeee;
    border: .1em solid #548254;
    font-size: 1em;
    line-height: 1.2em;
    padding: 0 .75em;
}

#qstnControls .btn-tab {
    padding: .25em .75em;
}

.btn-tab-ovr,
.btn-tab-sel,
.hs-ovr,
.hs-sel {
    color: #eeeeee;
    background-color: #548254;
    border: .1em solid #548254;
    font-size: 1em;
    line-height: 1.2em;
    padding: 0 .75em;

}

.hs-images .hs-ovr,
.hs-images .hs-sel {
    padding: 0 !important;

}

.btn-tab-dis,
.btn-tab-vis,
.hs-dis,
.hs-vis {
    color: #eeeeee;
    background-color: #BEBEBE;
    border: .1em solid #BEBEBE;
    font-size: 1em;
    line-height: 1.2em;
    padding: 0 .75em;

}

.lb-result .btn-tab:hover {
    color: #004455 !important;
    background-color: #12d9e7 !important;
    border: .1em solid #12d9e7 !important;
    font-size: 1em !important;
    line-height: 1.2em !important;
    padding: 0 .75em !important;

}

.hs-images .hs-dis,
.hs-images .hs-vis {
    padding: 0 !important;

}

.btn-tab-hid,
.hs-hid {
    color: #999999;
    display: none !important;
    padding: 0 .75em;
}

.qstn-Feedback {
    position: absolute;
}

.dragColumn {
    /* padding-right: 0.4em; */
}

.dragColumn>div {
    height: 3.5em;
}

#drags {
    border: 0;
    /* padding: 0em; */
}

.draggable {
    position: relative;
    background-color: #ffffff;
    border: .1em solid #548254;
    color: #548254;
    display: table;
    width: 100%;
    height: 100%;
    display: table;
    z-index: 100;
    font-weight: bold;
}

.draggable-highlight {
    background-color: #548254;
    border: .1em solid #548254;
    color: #ffffff;
    font-weight: bold;
}

.draggable>p {
    display: table-cell;
    vertical-align: middle;
    line-height: 1em;
}

.target {
    z-index: 90;
    height: 100%;
}

[class*='tsd-menuItem-']:before {
    content: '';
    visibility: hidden;
}

/* Question Text Column on Drag&Drop screens*/
.question-col {
    padding-top: 1em;
    padding-right: 1em;
}

.question-col .button-advice {
    position: relative;
    margin-top: 15%;
    left: 25%;
    width: 43%;
}

.highlight {
    color: #0EA3AD !important;
}

/* CLASSES FOR VARIOUS HOTSPOTS */
.lb-norm,
.tt-norm {
    color: #333333;
}

.lb-sel,
.lb-ovr,
.tt-ovr,
.tt-sel {
    color: #548254;
}

.lb-vis,
.lb-dis,
.tt-vis,
.tt-dis {
    color: #999999;
}

.lb-hid {
    color: #999999;
    visibility: hidden !important;
}

.hs-norm {
    color: #eeeeee;
    background-color: #666666;
    border: .1em solid #548254;
    font-size: 1em;
    line-height: 1.2em;
    padding: 0 .75em;
}

.hs-ovr,
.hs-sel {
    color: #ffffff;
    background-color: #004455;
    border: .1em solid #12d9e7;
    font-size: 1em;
    line-height: 1.2em;

}

.hs-dis,
.hs-vis {
    color: #eeeeee;
    background-color: #BEBEBE;
    border: .1em solid #BEBEBE;
    font-size: 1em;
    line-height: 1.2em;
}

.hs-images .hs-norm,
.hs-images .hs-ovr,
.hs-images .hs-sel,
.hs-images .hs-vis,
.hs-images .hs-dis {
    border: none;
}

.hs-hid {
    color: #999999;
    display: none !important;
}

/* Labels for hotspots */

.label {
    position: absolute;
    top: auto !important;
    bottom: 0 !important;
    width: 100%;
    left: 0;
    padding: .25em 0;
    text-align: center;
}

.label h2 {
    color: #ffffff;
}

.label *:last-child {
    margin-bottom: 0 !important;
}

.label-norm {
    border-top: .1em solid #548254;
    background-color: #ffffff;
    color: #548254;
}

.label-ovr,
.label-sel {
    border-top: .1em solid #548254;
    background-color: #548254;
    color: #ffffff;
}

.label-vis,
.label-dis {
    border-top: .1em solid #BEBEBE;
    background-color: #BEBEBE;
    color: #ffffff;
}


/* STYLES FOR HOTSPOTS WITH RESULTS OVER IMAGE */
.abs-result button.hs {
    position: relative !important;
    padding: 0 !important;
    width: 100%;
    background-color: transparent;
}

.abs-result button img {
    position: relative !important;
    top: 0;
    left: 0;
}

.abs-result .border {
    position: absolute !important;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1002;
}

.abs-result .hs-norm,
.abs-result .hs-ovr,
.abs-result .hs-sel,
.abs-result .hs-vis,
.abs-result .hs-dis {
    border: none;
}

.abs-result .hs-norm .border {
    border: .25em solid transparent;
}

.abs-result .hs-ovr .border,
.abs-result .hs-sel .border,
.abs-result .highlight .border {
    border: .25em solid #c50f3c;
    box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.3);
}

.abs-result .highlight .border .text-label {
    color: #ffffff !important;
}

.abs-result .hs-vis .border,
.abs-result .hs-dis .border {
    border: .25em solid #BEBEBE;
}

.abs-result .hs-norm.correct .border,
.abs-result .hs-sel.correct .border,
.abs-result .hs-ovr.correct .border,
.abs-result .hs-vis.correct .border,
.abs-result .hs-dis.correct .border {
    border: .25em solid #009900;
}

.abs-result .hs-norm.incorrect .border,
.abs-result .hs-sel.incorrect .border,
.abs-result .hs-ovr.incorrect .border,
.abs-result .hs-vis.incorrect .border,
.abs-result .hs-dis.incorrect .border {
    border: .25em solid #cc0000;
}

.abs-result .btn-hotspot .result {
    color: black;
    font-size: .778em;
    line-height: 1.1em;
    text-align: left;
    z-index: 1001;
}

.abs-result .result {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    background-color: #ffffff;
    padding: 1em;
}

.abs-result .hasButton .result p {
    line-height: 1.2em;
}

.abs-result .result ul {
    padding-left: 1em;
}

.abs-result .hs-vis .text-label {
    background-image: url(../images/1x1trans-gray.png);
}

.abs-result .hs-vis .text-label p {
    color: #BCC4CB !important;
}

.abs-result .correctCheck {
    position: absolute !important;
    width: 20%;
    bottom: .5em !important;
    left: .5em !important;
    top: auto !important;
}

.hotspot .hs-norm {
    position: absolute;
    bottom: 0em;
    width: 97%;
    font-size: 1em;
    line-height: 1em;
    text-align: center;
    padding: .5em 0;
}

.hotspot-highlight .hs-norm,
.hotspot-selected .hs-norm {
    position: absolute;
    bottom: 0em;
    width: 97%;
    color: #eeeeee !important;
    background-color: #cc0033;
    border: .1em solid #cc0033;
    font-size: 1em;
    line-height: 1em;
    padding: .5em 0;
}

.hotspot .hs-norm,
.hotspot-highlight .hs-dis,
.hotspot-highlight .hs-vis,
.hotspot-highlight .hs-ovr,
.hotspot-highlight .hs-sel {
    position: absolute;
    bottom: 0em;
    width: 97%;
    text-align: center;
    padding: .5em .75em;
}

.btn-tab-norm,
.hs-norm {
    color: #ffffff;
    background-color: #004455;
    border: .15em solid #12d9e7;
    font-size: .9em;
    line-height: 1.2em;
    padding: .85em .75em;
}

#qstnControls .btn-tab {
    padding: .25em .75em;
}

.js-selected.hs-dis,
.btn-tab-ovr,
.btn-tab-sel,
.hs-ovr,
.hs-sel {
    color: #004455;
    background-color: #12d9e7;
    border: .15em solid #12d9e7;
    font-size: .9em;
    line-height: 1.2em;
    padding: .85em .75em;

}

.btn-tab-dis,
.btn-tab-vis,
.hs-dis,
.hs-vis {
    color: #eeeeee;
    background-color: #BEBEBE;
    border: .15em solid #BEBEBE;
    font-size: .9em;
    line-height: 1.2em;
    padding: .85em .75em;

}

.btn-tab-hid,
.hs-hid {
    color: #999999;
    visibility: hidden !important;
    padding: 0 .75em;
}

/* Course Typography  */
h1 {
    font-size: 1.33em;
    padding-top: .2em;
    color: #042f32;
}

h2 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.15em;
    line-height: 1em;
    margin-bottom: .5em;
    margin-top: 0;
    padding: 0;
    color: #436365;
    font-weight: bold;
}

h3 {
    color: #547173;
    font-weight: bold;
    text-transform: none;
    margin: .5em 0;
    font-size: 1em;
}

h4 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.2em;
    line-height: 1.2em;
    margin-bottom: .5em;
    margin-top: 0;
    padding: 0;
}

h6 {
    color: #333333;
    font-size: 0.813em;
    font-style: italic;
}

/* Structure */
/* Landing Page Overrides*/
.landing-header {
    padding: 3.125em 0 3.75em 0;
    background-color: transparent;
}

/*Interior Page Styles*/
.header {
    width: 100%;
    height: 3.5em;
    padding: .35em 1%;
}

.landing-page .header,
.menu-page .header {
    width: 100%;
    height: 12.5%;
    padding: 0.8em 1%;
    background-color: #ffffff;
    border-top: none;
    text-align: center;
}

.header table {
    width: 100%;
    height: 100%;
    vertical-align: middle;
    border: 0;
    padding: 0;
}

.header td {
    border: none;
}

.header h1 {
    font-size: 1.33em;
    padding-top: 0;
    color: #042f32;
}

.header h1 + p.instruction-text{
    font-size: .75em;
    margin: 0;
    position: absolute;
}

.landing-page .header h1,
.menu-page .header h1 {
    font-size: 1.33em;
    padding-top: 0;
    color: #042f32;
    margin-bottom: 0;
}

.instruction-text {
    color: #047b49;
    font-size: .75em;
}

/*@media only screen and (max-width: 799px) {
h4 {
	font-size: 1em;
	line-height: 1em;
}
.landing-page .header, .menu-page .header {
	padding: 0.55em 4%;
}
}*/

@media only screen and (min-width: 0px) {
    h4 {
        font-size: 1em;
        line-height: 1em;
    }

    .landing-page .header,
    .menu-page .header {
        padding: 0.55em 4%;
    }
}

@media only screen and (min-width: 800px) {
    h4 {
        font-size: 1em;
        line-height: 1em;
    }

    .landing-page .header,
    .menu-page .header {
        padding: 0.55em 4%;
    }
}

@media only screen and (min-width: 850px) {
    h4 {
        font-size: 1.12em;
        line-height: 1.12em;
    }

    .landing-page .header,
    .menu-page .header {
        padding: 0.65em 4%;
    }
}

.tagline {
    position: relative;
}

/*Course Pages with Grey Background modifier*/
.bg--media {
    background-color: #F5F5F5;
}

.bg--media .frame-content {
    padding-top: 3em;
}

/* Tabs */
.tabs {
    /*text-align: center;*/
    margin-bottom: 1.5em;
}

.tab-content {
    display: none;
}

#tab-1 {
    display: block;
}

/* Responsive Styles for the Course Skin... Make sure the min-width: matches the min-width: from tsd_standard.css
============================================*/

/* END Responsive Tablet and Smaller */
/* Page Template Styles -- USED FOR DOCUMENTATION ONLY */
/* Panel Styles */
.panel {
    color: #8A6D3B;
    background-color: #FCF8E3;
    border: 1px solid #FAEBCC;
    margin: 0;
    padding: 1em;
    border-radius: 5px 5px 5px 5px;
    -moz-border-radius: 5px 5px 5px 5px;
    -webkit-border-radius: 5px 5px 5px 5px;
}

.panel p {
    margin: 0;
}

[class*='col-'] .row .panel {
    background-color: #F7EBAF;
    border: 2px dotted #EECC86;
}

pre {
    font-family: Courier, monospace;
    font-weight: normal;
    font-size: 0.875em;
    line-height: 1.3em;
    background-color: #F8F8F8;
    border: 1px dotted #DFDFDF;
    padding: 1em;
    margin: 1em 0;
}

code {
    font-family: Courier, monospace;
    font-weight: normal;
    background-color: #F8F8F8;
    border: 1px solid #DFDFDF;
    padding: 0.05em .5em;
}

p.lead {
    color: #777;
    font-size: 1.250em;
    border-bottom: 1px solid #DDD;
    margin-bottom: .5em;
    padding-bottom: 1em;
}

.border-example {
    border: 2px solid #436365;
    padding: .5em;
}

/*  END Course Skin */

/* Resorces */
.tsd-lightbox,
.tsd-resources {
    border-color: transparent;
    border-width: 0;
    border-style: none;
    background-image: none !important;
    background-color: #ffffff;
    padding: 0;
    color: #436365;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}

.tsd-lightbox .ui-widget-content,
.tsd-resources .ui-widget-content {
    background-color: #ffffff;
    background: none !important;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    border-color: #BEBEBE !important;
    border-width: 1px 1px 0px 1px !important;
    border-style: solid solid none solid !important;
    color: #436365;
}

.tsd-lightbox .ui-widget-content h3 {
    margin-top: 0;
}

.tsd-lightbox .ui-widget-content p.caption {
    font-size: 0.85em;
    line-height: 1em;
}

.tsd-lightbox .ui-widget-content .swapOn {
    display: inline;
}

.tsd-lightbox .ui-widget-content .swapOff {
    display: none;
}

.tsd-lightbox .ui-widget-header,
.tsd-resources .ui-widget-header {
    border: none !important;
    background: none !important;
    border-color: transparent !important;
    border-width: 0 !important;
    border-style: none !important;
    background-image: none !important;
    background-color: #1b4245 !important;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}

.tsd-lightbox .ui-dialog-buttonpane,
.tsd-resources .ui-dialog-buttonpane {
    border-color: #BEBEBE !important;
    border-width: 0px 1px 1px 1px !important;
    border-style: none solid solid solid !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-right: 0.4em !important;
    background-color: #d9d9d9 !important;
}

.tsd-lightbox .ui-dialog-buttonset,
.tsd-resources .ui-dialog-buttonset {
    background-color: transparent !important;
    margin: 0.5em !important;
    margin-bottom: 0 !important;
    padding: 0.1em !important;
    width: auto !important;
    float: none !important;
    height: 2.75em;
}

.tsd-lightbox .ui-dialog-buttonpane .ui-button,
.tsd-resources .ui-dialog-buttonpane .ui-button {
    float: right;
    text-align: right !important;
}

.tsd-lightbox .ui-dialog-buttonpane .closeMSG,
.tsd-resources .ui-dialog-buttonpane .closeMSG {
    margin: 0.6em;
    padding-right: 0.5em;
    text-align: right;
    font-size: .9em;
    color: #436365;
}

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
    color: #1b4245 !important;
    background-color: #ffffff !important;
    border: .1em solid #1b4245 !important;
    font-size: 1em !important;
    line-height: 1.2em !important;
    padding: 0 .75em !important;
    background-image: none !important;
    border-radius: 0 !important;
    margin: .5em .4em .5em 0.5em !important;
}



.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-focus .ui-state-focus,
.ui-widget-header .ui-state-focus {
    color: #ffffff !important;
    background-color: #1b4245 !important;
    border: .1em solid #1b4245 !important;
    font-size: 1em !important;
    line-height: 1.2em !important;
    padding: 0 .75em !important;
    background-image: none !important;
    border-radius: 0 !important;
}

.ui-button-text-only .ui-button-text {
    padding: 0 !important;
}

.tsd-lightbox .ui-dialog-title,
.tsd-resources .ui-dialog-title {
    color: #ffffff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.65em;
    text-align: center;
}

.ui-dialog .ui-dialog-title {
    width: 100% !important;
}

.tsd-lightbox .ui-dialog-title span.name,
.tsd-resources .ui-dialog-title span.name {
    float: left;
}

.tsd-lightbox .ui-dialog-title span.title,
.tsd-resources .ui-dialog-title span.title {
    font-size: .5em !important;
    display: block;
}

.tsd-lightbox .ui-dialog-title span.titleSingle,
.tsd-resources .ui-dialog-title span.titleSingle {
    font-size: .5em !important;
}

.tsd-lightbox .no-close .ui-dialog-titlebar-close {
    display: none;
}

.tsd-lightbox .ui-dialog-title div.hero-name {
    font-size: 1.5em !important;
    float: left !important;
    font-weight: normal !important;
}

.tsd-lightbox .ui-dialog-title div.topic {
    margin-top: 0.35em;
    font-size: 0.75em !important;
    line-height: 1.25em !important;
    padding-left: 0.5em !important;
    text-indent: 0em !important;
    float: left !important;
}

.ui-dialog-titlebar-close {
    display: none !important;
}

.ui-front {
    z-index: 2010 !important;
}

/** Dialog overrides for the Resume pop-up on course launch */
.tsd-lightbox.tsd-resume {
    width: 23em !important;
}

.tsd-lightbox.tsd-resume *:focus,
body *:focus {
    /* outline-style:dotted;
	outline-width:thin;
	outline-color:#000000; */
    outline: none !important;
}

.tsd-lightbox.tsd-resume .ui-dialog-buttonset {
    height: 2.95em;
    font-size: .9em;
}

.tsd-lightbox.tsd-resume .ui-dialog-buttonpane .ui-button {
    font-size: 1.1em;
    margin-right: 0.9em;
}

/** Dialog overrides for the Jump pop-up on course launch */
.tsd-lightbox.tsd-jump {
    width: 40em !important;
    font-size: 1em;
}

.tsd-lightbox.tsd-jump .ui-dialog-content.ui-widget-content {
    height: 22em !important;
}


.ui-autocomplete {
    font-size: 1em;
}

.ui-autocomplete.ui-menu .ui-menu-item a {
    line-height: 1.1em;
}

/** Styles for the mobile scroll arrows */
.mobileScroll {
    position: absolute;
    visibility: hidden;
    right: 0;
}

.mobileScroll-top {
    bottom: 49%;
}

.mobileScroll-btm {
    top: 49%;
}

/* Course Specific Styles
============================================*/
.header-icon {
    float: left;
    width: 5.5%
}

.text-layer-center {
    padding: 0 2% !important;
}

.text-layer-left {
    padding: 0 2% 0 .75% !important;
}

.text-layer-right {
    padding: 0 2% !important;
}

.transparent-bg {
    /* IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    /* IE 5-7 */
    filter: alpha(opacity=80);
    /* Netscape */
    -moz-opacity: 0.80;
    /* Safari 1.x */
    -khtml-opacity: 0.80;
    /* Good browsers */
    opacity: 0.80;
}

.videoLayout .transparency {
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 2;
}

/* Classes for overlaying text on various background colors.  Note: Achieve this with a 1x1trans image with the correct opacity */
.text-overlay-white {
    position: absolute;
    width: 96%;
    left: 2%;
    background-image: url(../images/1x1trans-white.png);
    padding: .5em;
}

.text-overlay-gray {
    position: absolute;
    width: 90%;
    left: 5%;
    background-image: url(../images/1x1trans-gray.png);
    padding: .5em;
}

.text-overlay-white.bold,
.text-overlay-white .bold,
.text-overlay-gray.bold,
.text-overlay-gray .bold {
    font-weight: bold;
    color: #000000;
}

.text-overlay-white>p {
    color: #000000;
}

.text-overlay-gray>p {
    color: #000000;
}

.text-overlay-gray.band {
    width: 100%;
    text-align: center;
    top: 40%;
}

.text-overlay-white *:last-child,
.text-overlay-gray *:last-child,
.final {
    margin-bottom: 0;
}

/* Empty Results */
div[id^="results"].empty {
    position: absolute;
    left: 0;
    top: 0;
    width: 10;
    height: 10;
}

/*Position Item to Top of Relative Container*/
.top {
    position: absolute;
    top: 2.5%;
}

/*Position Item to Bottom of Relative Container*/
.bottom {
    position: absolute;
    bottom: 3%;
}

/* styles for the subhead-text class */
.subhead-text,
.subhead-text h2,
.subhead-text p {
    text-align: center;
    display: inline-block;
}

.subhead-text h2 {
    font-weight: bold;
}


/* Classes for the Accordion pages*/
.accordion {
    padding: 0em;
    background-color: transparent;
}

.accordion .hs-norm {
    font-weight: bold;
    color: #eeeeee;
    background-color: #666666;
    border: .1em solid #548254;
    line-height: 1em;
    padding: .2em 0em .2em .5em;
    margin-bottom: .5em;
}

.accordion a.hs-norm {
    font-weight: normal;
    color: #666666;
    line-height: 1em;
    text-decoration: underline;
}

.accordion a.hs-norm {
    font-weight: normal;
    color: #548254;
    line-height: 1em;
    text-decoration: underline;
}

.accordion .hs-norm .icon {
    position: relative;
    float: left;
    width: 3.5%;
    margin-top: 0.2em;
    margin-right: 0.5em;
}

.accordion .hs-norm p,
.accordion .hs-ovr p,
.accordion .hs-sel p,
.accordion .hs-dis p,
.accordion .hs-vis p {
    margin: 0.25em 0 0.25em 0;
}

.accordion .hs-ovr,
.accordion .hs-sel {
    color: #004455;
    background-color: #12d9e7;
    border: .1em solid #12d9e7;
    padding: .2em 0em .2em .5em;
    line-height: 1em;
    font-weight: bold;
    padding: .2em 0em .2em .5em;
    margin-bottom: .5em;
}

.accordion .hs-vis {
    color: #eeeeee;
    background-color: #BEBEBE;
    border: .1em solid #BEBEBE;
    padding: .2em 0em .2em .5em;
    margin-bottom: .5em;
    line-height: 1em;
    font-weight: bold;
}

.accordion .results {
    padding: .2em .5em;
    max-height: 7em;
    margin-bottom: .5em;
    position: relative;
    padding: .2em 0em .2em .5em;
}

.accordion .results p:last-child,
.accordion .results ul li:last-child,
.accordion .results ul:last-child {
    margin-bottom: 0;
}

.accordion .results>div {
    width: 100%;
    overflow-y: auto;
    max-height: 6em;
    -webkit-overflow-scrolling: touch;
}

/* custom scrollbars for results- webkit only */
.accordion .results::-webkit-scrollbar {
    background-color: #EEE;
    width: 10;
}

.accordion .results::-webkit-scrollbar-thumb {
    border: 1px #EEE solid;
    border-radius: 2px;
    background: #DDD;
    -webkit-box-shadow: 0 0 8px #AAA inset;
    box-shadow: 0 0 8px #AAA inset;
    -webkit-transition: all .3s ease-out;
    transition: all .3s ease-out;
}

.accordion .results::-webkit-scrollbar-track {
    -webkit-box-shadow: 0 0 2px #ccc;
    box-shadow: 0 0 2px #ccc;
}

.spot-row .container {
    background-color: #436365;
    width: 100%;
    height: 100%;
}

/* Hides the default play button displayed by the media player over videos */
.mejs-overlay-button,
.mejs__overlay-button {
    display: none;
}

.mejs__controls:not([style*="display: none"]) {
    background: rgba(0, 0, 0, .75);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, transparent, to(rgba(0, 0, 0, 0.75)));
    background: -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.75));
    background: -moz-linear-gradient(top, transparent, rgba(0, 0, 0, 0.75));
    background: -o-linear-gradient(top, transparent, rgba(0, 0, 0, 0.75));
    background: -ms-linear-gradient(top, transparent, rgba(0, 0, 0, 0.75));
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.75));
}

.mejs__container {
    background: rgb(255, 255, 255);
}

.mejs-container .mejs-controls {
    background: url(background.png);
    background: rgba(0, 0, 0, 0.7);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0, 0, 0, 0.7)), to(rgba(0, 0, 0, 0.7)));
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7));
    background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7));
    background: -o-linear-gradient(top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7));
    background: -ms-linear-gradient(top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7));
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7));
}

.mejs-controls .mejs-time-rail .mejs-time-total,
.mejs-controls .mejs-time-rail .mejs-time-loaded {
    background: #aca8a6;
    background: rgba(134, 131, 132, 0.8);
    background: -webkit-gradient(linear, 0% 0, 0% 100%, from(rgba(172, 168, 166, 0.8)), to(rgba(134, 131, 132, 0.8)));
    background: -webkit-linear-gradient(top, rgba(172, 168, 166, 0.8), rgba(134, 131, 132, 0.8));
    background: -moz-linear-gradient(top, rgba(172, 168, 166, 0.8), rgba(134, 131, 132, 0.8));
    background: -o-linear-gradient(top, rgba(172, 168, 166, 0.8), rgba(134, 131, 132, 0.8));
    background: -ms-linear-gradient(top, rgba(172, 168, 166, 0.8), rgba(134, 131, 132, 0.8));
    background: linear-gradient(rgba(172, 168, 166, 0.8), rgba(134, 131, 132, 0.8));
    background-image: linear-gradient(rgba(172, 168, 166, 0.8), rgba(134, 131, 132, 0.8))
}

.box-incorrect {
    border: 1px solid #d90026;
    margin-bottom: 1em;
}

.box-incorrect p,
.box-correct p {
    padding: 0.5em;
    padding-left: 1em;
    padding-right: 1em;
}

.box-incorrect p:first-child {
    background-color: #d90026;
    color: #ffffff;
    font-size: 1.5em;
    padding-left: 0.5em;
    padding-right: 0.5em;
}

.box-correct {
    border: 1px solid #5D9674;
    margin-bottom: 1em;
}

.box-correct p:first-child {
    background-color: #5D9674;
    color: #ffffff;
    font-size: 1.5em;
    padding-left: 0.5em;
    padding-right: 0.5em;
}

.border-dash-left {
    border-left: 2px dashed #436365;
    padding-left: 0.5em;
}

.border-dash-right {
    border-right: 2px dashed #436365;
    padding-right: 0.5em;
}

.btn-hotspot .fa-check-circle,
.btn-stop .fa-minus-circle,
.btn-hotspot .fa-play-circle {
    font-size: 1.5em;
    line-height: 0.85em;
    padding: 0;
    margin: 0;
}

.box-incorrect .fa-times-circle {
    font-size: 1.45em;
    line-height: 0.45em;
    padding: 0;
    margin: 0;
}

.panorama {
    position: relative;
    width: 675px;
    min-height: 500px;
    border: 1px solid #666666;
}

/* Classes for screen 2001 */
p.banner-text {
    top: 40%;
    width: 100%;
    padding: 0.75em;
    margin-top: .5em;
    text-align: center;
    font-size: 2em;
    color: #ffffff;
    background-image: url(../images/1x1trans-gray.png);
    font-weight: bold;
}

p.caption {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.2em;
    line-height: 1.2em;
    text-align: center;
    color: #436365;
}

.bg-gray,
.bg-blue,
.bg-blank {
    height: 100%;
    padding: .4em;
}

.bg-gray, 
.lb-result.bg-gray {
    background-color: #d2dada;
}

.bg-blue {
    background-color: #0079c2;
}

.bg-gray p.caption,
.bg-blue p.caption {
    position: absolute;
    margin-top: 25%;
}

.bg-blue p.caption {
    color: #ffffff;
}

#slider-value.ui-state-default,
#slider-value.ui-slider-horizontal .ui-slider-handle {
    border: none !important;
    width: 3.3em;
    height: 2em;
    top: 0em;
}

#slider-value.ui-slider {
    width: 96%;
    /*width: 100%;*/
    height: 2em;
    border: none;
    /*left: -1%;*/
    left: -4.5%;
    /* position: absolute;*/
    top: 2.5em;
}

.slider-bar {
    position: absolute;
    top: 2.5em;
    left: 0;
    width: 100%;
    padding: 0 !important;
}

.slider-bar img {
    height: 2em;
}

#slider-value {
    position: absolute;
    width: 100%;
    /*left: 0;*/
    /*bottom: 60px;*/
    left: -2%;
    top: -2.6em;
    background-image: url(../images/1x1trans.gif);
}

.inner {
    position: absolute;
    /* width: 41px;*/
    height: 2em;
    bottom: 0;
}

/* Styles for the slider */
#zone0,
#zone1,
#zone2,
#zone3,
#zone4,
#zone5,
#zone6,
#zone7,
#zone8,
#zone9,
#zone10 {
    top: 3.5em;
    padding: 0.3em;
    font-size: 1.2em;
}

#zone0>p:first-child,
#zone1>p:first-child,
#zone2>p:first-child,
#zone3>p:first-child,
#zone4>p:first-child,
#zone5>p:first-child,
#zone6>p:first-child,
#zone7>p:first-child,
#zone8>p:first-child,
#zone9>p:first-child,
#zone10>p:first-child {
    /*top: -4.6em;*/
    top: -5.5em;
}

#zone1>p:first-child,
#zone2>p:first-child,
#zone3>p:first-child,
#zone4>p:first-child,
#zone5>p:first-child,
#zone6>p:first-child,
#zone7>p:first-child,
#zone8>p:first-child,
#zone9>p:first-child {
    left: -2.3em;
}

#zone10>p:first-child {
    right: 0;
}

#zone0 {
    left: 0%;
}

#zone1 {
    left: 10%;
}

#zone2 {
    left: 20%;
}

#zone3 {
    left: 30%;
}

#zone4 {
    left: 40%;
}

#zone5 {
    left: 50%;
}

#zone6 {
    left: 60%;
}

#zone7 {
    left: 70%;
}

#zone8 {
    left: 80%;
}

#zone9 {
    left: 90%;
}

#zone10 {
    right: 0%;
}

.ui-slider .ui-slider-handle {
    position: absolute;
    width: 2.28em;
    height: 1.83em;
    /*background: url(../images/slider_handle2.png) no-repeat !important;*/
    background: none !important;
    overflow: visible;
    border-style: none;
    z-index: 120;
    padding: 0 !important;
}

/*.slider-area {
	margin-top:1.2em;
}*/
.slider.question #qstnControls {
    margin-top: 25%;
}

.slider.question #qstnFeedback {
    margin-top: 25%;
    text-align: center;
}

.slider-area .inner p.txt-center,
.slider-area .inner p.txt-left,
.slider-area .inner p.txt-right {
    position: absolute;
    white-space: nowrap;
    top: 100%;
    color: #0079c2;
}

.slider-area [id*='zone']>p:first-child {
    visibility: hidden;
}

.slider-area .fa-arrow-down,
    {
    zoom: expression(this.runtimeStyle['zoom']="1", this.innerHTML='');
    font-style: normal;
}

.show {
    visibility: visible !important;
}

input.hotspot[type=checkbox]:disabled {
    background-color: #d9d9d9;
    border-color: #d9d9d9;
    color: #d9d9d9;
}

input.hotspot[type=checkbox]:disabled+label {
    color: #d9d9d9;
}

.button-time-norm {
    color: #333333;
}

.button-time-ovr,
.button-time-sel {
    color: #cc0033;
}

.button-time-vis {
    color: #999999;
}

#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    filter: alpha(opacity=25);
    -moz-opacity: 0.25;
    -khtml-opacity: 0.25;
    opacity: 0.25;
    z-index: 10000;
}


.abs {
    position: absolute;
}


.rel {
    position: relative;
}

.z1 {
    z-index: 1;
}

.z2 {
    z-index: 2;
}

.z3 {
    z-index: 3;
}



#drags .qstn-Incorrect,
.target .qstn-Incorrect {
    color: red !important;
    background-color: #fff !important;
    border: 1px solid red !important;
}

#drags .qstn-Feedback.qstn-Incorrect,
.target .qstn-Feedback.qstn-Incorrect {
    border: none !important;
}

/* Styles for the Question Page Element's layout */
#qstnFeedback.row,
#qstnControls.row {
    margin-top: 1em;
    text-align: center;
}

#qstnAnswers {
    margin-left: .25em;
}

#qstnAnswers .fa {
    line-height: .8em !important
}

.qstn-answer input {
    width: .8em;
    height: .8em;
    line-height: 1em;

}

.lb-result .closeBtn.btn-tab-vis .qtip {
    font-size: 1em;
    line-height: 1em;
}

.prompt {
    /*min-width:16% !important;*/
}

.alert {
    padding-top: .25em;
    padding-bottom: .25em;
}

.videoLayout {
    position: relative;
    left: 0;
    top: 0;
    max-width: 100%;
    height: 450px;
    overflow: hidden;
}

.col-4 .videoLayout {
    width: 320px;
    height: 450px;
}

.col-6 .videoLayout {
    width: 470px;
    height: 450px;
}

.col-12 .videoLayout {
    width: 950px;
    height: 450px;
}

.videoLayout .percent,
.videoLayout.percent {
    width: 100% !important;
    height: 100% !important;
}

.videoLayout .videoLoading {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 20;
}

.lightboxVideo.videoLayout {
    width: 100%;
    height: 100% !important;
    overflow: hidden;
}

.lightboxVideo.videoLayout .percent {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

.col-4 .loading-anim {
    width: 20%;
}

.col-6 .loading-anim {
    width: 14%;
}

.col-12 .loading-anim {
    width: 8%;
}

video::-webkit-media-controls-fullscreen-button {
    display: none !important;
}

.mejs-ted .mejs-controls .mejs-fullscreen-button {
    display: none !important;
}

.mejs-wmp .mejs-controls .mejs-fullscreen-button {
    display: none !important;
}

.mejs-ted .mejs-controls .mejs-fullscreen-button button {
    display: none !important;
}

.mejs-wmp .mejs-controls .mejs-fullscreen-button button {
    display: none !important;
}

.text-label {
    position: absolute;
    z-index: 1000;
    width: 100%;
    left: 0%;
    bottom: 0;
    background-color: #666666;
    /*border:.15em solid #ffd933;*/
    background-repeat: repeat;
    text-align: center;
    color: #ffffff;
    padding: .3em;
}

.hs-ovr .text-label,
.hs-sel .text-label {
    background-color: #c50f3c;
    color: #333333;
}

.hs-vis .text-label,
.hs-dis .text-label {
    background-color: #bebebe;
    border-color: #bebebe;
    color: #ffffff;
}

.page-hotspot .border {
    position: absolute !important;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1002;
}

.page-hotspot .btn-hotspot,
.page-hotspot .hotspot {
    position: relative;
}

.page-hotspot .hs-norm .border,
.page-hotspot .hotspot .border {
    border: .222em solid transparent;
}

.page-hotspot .hs-ovr .border,
.page-hotspot .hs-sel .border,
.page-hotspot .hotspot-highlight .border,
.page-hotspot .hotspot-selected .border,
.page-hotspot .highlight .border {
    border: .222em solid #ffd933;
    box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.3);
}

.page-hotspot .highlight .border .text-label {
    color: #ffffff !important;
}

.page-hotspot .hs-vis .border,
.page-hotspot .hs-dis .border,
.page-hotspot .hotspot-visited .border,
.page-hotspot .hotspot-disabled .border {
    border: .222em solid #BEBEBE;
}

button.hs,
button.menuItem {
    width: 100%;
}

.question .fa.hs,
.question .fa.hs-norm,
.question .fa.hs-ovr,
.question .fa.hs-sel,
.question .fa.hs-vis,
.question .fa.hs-dis {
    position: absolute;
    top: 0em;
    left: -1.45em;
    height: 0.8em;
    width: 0.8em;
    border: none !important;
    background: transparent;
    z-index: 1000;
}

.question .fa.hs::before {
    display: none;
    content: "";
    font-size: 1.5em;
    line-height: 0.8em;
    height: 0.8em;
    width: 0.8em;
    background: #ffffff;
    border-radius: 50%;
    z-index: 2000;
}

.question .fa.hs.qstn-Correct::before {
    display: block;
    content: "\f058";
    height: 0.8em;
    width: 0.8em;
    color: #009900 !important;
    background: #ffffff;
}

.question .fa.hs.qstn-Incorrect::before {
    display: block;
    content: "\f057";
    height: 0.8em;
    width: 0.8em;
    color: #cc0000 !important;
    background: #ffffff;
}

.question .fa.hs.hs-norm::before {
    color: #333333;
}

.question .fa.hs.hs-ovr::before,
.question .fa.hs.hs-sel::before {
    color: #0079c2;
}

.hs-ovr,
.hs-sel,
.hs-vis,
.hs-dis {
    width: 100%;
}

.question button {
    text-align: left;
}

.question p {
    font-size: 1.15em;
}

.question .instruction-text {
    font-size: .75em;
}

.question #qstnControls button {
    width: auto;
    height: auto !important;
    /*background:none;*/
    float: left;
    margin-right: .5em;
    /* color: #333333; */
    text-align: center;
}

.question #qstnControls button.hs-norm {
    color: #ffffff;
    background-color: #004455;
    border: .1em solid #12d9e7;
    font-size: 1.1em;
    line-height: 1.8em;
    padding: 0 .75em;
}

.question #qstnControls button.hs-ovr,
.question #qstnControls button.hs-sel {
    color: #004455;
    background-color: #12d9e7;
    border: .1em solid #12d9e7;
    font-size: 1.1em;
    line-height: 1.8em;
    padding: 0 .75em;
}

.question #qstnControls button.hs-vis,
.question #qstnControls button.hs-dis {
    color: #eeeeee;
    background-color: #BEBEBE;
    border: .1em solid #BEBEBE;
    font-size: 1.1em;
    line-height: 1.8em;
    padding: 0 .75em;
}

.question #qstnControls button.js-done-button,
.question #qstnControls button.js-reset-button,
.question #qstnControls button.js-showcorrect-button,
.question .qstn-Feedback button.reviewBtn {
    border-radius: 5px;
    font-size: .75em;
    font-weight: bold;
    padding: .5em 1.25em;
    float: none;
    display: inline-block;
    margin: 0;
    width: auto;
    height: auto !important;
    text-align: center;
}

.question .qstn-Feedback button.reviewBtn {
    margin: 0 auto;
    display: block;
}

.question .qstn-Feedback button.reviewBtn.btn-tab-vis,
.question .qstn-Feedback button.reviewBtn.btn-tab-sel {
    color: #ffffff;
    background-color: #004455;
    border: .15em solid #12d9e7;
}

/* Overlay for EAP */
.overlay-banner {
    position: absolute;
    width: 100%;
    top: 45%;
    background-image: url(../images/1x1trans-white.png);
    text-align: center;
    padding: 1em;
}

.overlay-banner h2 {
    margin: 0;
    /* padding: 1em; */
    font-size: 1.3em;
    line-height: 1.2em;
    padding-bottom: 1em;
}

.overlay-banner h2:last-of-type {
    margin: 0;
    /* padding: 1em; */
    /* font-size: 1.3em;
    line-height: 1.2em; */
    padding-bottom: 0em;
    font-weight: normal;
}

/* Pads text that has a background image since it is absolute */
.pageText {
    padding: 1em;
    width: 100%;
    /* not working in safari and ie */
    /* display: table; */ 
    display: block;
    height: 100%;
}

.pageText.middle {
    display: flex;
    align-items: center;
}
.pageText.bottom {
    display: flex;
    align-items: flex-end;
}

.build-container .pageText.middle .cell,
.build-container .pageText.bottom .cell {
    display: unset;
    vertical-align: unset;
}

.game .build-container .pageText {
    padding: 1em;
    width: 100%;
    /* not working in safari and ie */
    /* display: table; */ 
    height: 100%;
    display: block;
    -webkit-border-vertical-spacing: 0.35em;
    /* Not supported by IE*/
    border-spacing: 0 0.35em;
}

.build-container .pageText .cell {
    display: table-cell;
    vertical-align: middle;
}

.cell p,
.cell h2 {
    /* line-height: 1.5em !important; */
    line-height: normal;
}

.pageText ul,
.pageText ol {
    padding-left: 1.2em;
}

.game button {
    padding-left: .5em;
    padding-right: .5em;
    height: 100% !important;
}

.game .build-container>.row,
.game .build-container>.row>div {
    height: 100% !important;
}

.game .pageText .row {
    height: 33%;
    display: table-row;
    margin-top: 0 !important;
}

.game .pageText .row .cell>div {
    height: 100%;
    position: relative;
}

/* Styles for dropdown Activity */
.page-dropdown .dd {
    position: relative;
    color: #436365;
    margin-right: -0.3em;
    z-index: 1000;
    padding-left: .25em;
}

.page-dropdown .dd-norm {
    border: 1px solid #000000;
    color: #436365;
}

.page-dropdown .dd-ovr,
.page-dropdown .dd-sel {
    border: 1px solid #0079c2;
    color: #0079c2;
}

.page-dropdown .dd-norm.qstn-Correct {
    color: #009900;
    border-color: #009900;
    background-color: transparent;
}

.page-dropdown .dd-norm.qstn-Incorrect {
    color: #cc0000;
    border-color: #cc0000;
    background-color: transparent;
}

.page-dropdown p {
    margin-bottom: 0;
}

.page-dropdown .fa.ddArrow::before {
    position: relative;
    content: "\f0dd";
    top: -3px;
    left: -0.6em;
    z-index: 2000;
}

.page-dropdown .fa.ddArrow.qstn-Correct::before {
    content: "\f058";
    color: #009900 !important;
    top: -7px;
    left: -0.4em;
}

.page-dropdown .fa.ddArrow.qstn-Incorrect::before {
    content: "\f057";
    color: #cc0000 !important;
    top: -7px;
    left: -0.4em;
}

.page-dropdown .fa.ddArrow.ddArrow-norm::before {
    color: #000000;
}

.page-dropdown .fa.ddArrow.ddArrow-ovr::before,
.page-dropdown .fa.ddArrow.ddArrow-sel::before {
    color: #0079c2;
}

/* Do not group these rules */
.page-dropdown input[type="text"].dd-ovr::-webkit-input-placeholder {
    color: #0079c2 !important;
}

.page-dropdown input[type="text"].dd-ovr::-moz-placeholder {
    color: #0079c2 !important;
}

.page-dropdown input[type="text"].dd-ovr:-ms-input-placeholder {
    color: #0079c2 !important;
}

.page-dropdown input[type="text"].dd-ovr:-moz-placeholder {
    color: #0079c2 !important;
}

button.alarmButton {
    position: absolute !important;
    width: 40% !important;
    top: auto;
    bottom: 1em;
    left: 30%;
    padding-left: 1em;
}

.alarmButton img {
    position: absolute;
    width: 2.5em;
    left: -1em;
    top: -.5em;
}

/* positioning and styles for the Check Score menu item on 3002 */
button.checkButton {
    position: absolute;
    z-index: 1000;
    width: auto;
    top: -8%;
    padding-left: 2em;
    padding-right: 1em;
    right: 2%;
    font-size: .9em;
}

.checkButton img {
    position: absolute;
    width: 2.5em;
    left: -1em;
    top: -.38em;
}

.checkButton div[class^="status-"] {
    visibility: hidden;
}

/* Score Meter and positioning - In Header */
.meter-container {
    position: absolute;
    left: auto;
    right: 14%;
    top: 7%;
    bottom: auto;
    width: 35%
}

.meter {
    position: absolute;
    top: 59.38%;
    left: .94%;
    width: 98.31%;
    height: 34.38%;
}




/* Styles for the Lightbox imitation */
.lb-result {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: auto;
    z-index: 1002;
    background-color: #ffffff;
    padding-bottom: 0.7em;
}

.lb-result [class*='col-'] {
    padding: 0 .35em !important;
}


.lb-result .header {
    padding: .5em;
    background-color: #5ca35c;
    border: 0;
    margin: 0;
    color: #ffffff;
}

.lb-result .closeBtn {
    position: absolute;
    width: auto;
    right: .75em;
    bottom: .75em;
}

/* CustomGame styles */
/* Hides the arrow and correct indicator on custom game. */
.customGame .hs-sel.js-selected:before,
.customGame .hs-dis.js-selected:before,
.customGame .question .fa.hs.qstn-Correct::before {
    visibility: hidden;
}

.customGame .hs {
    position: absolute !important;
    background-color: transparent;
    background-image: url("../images/1x1trans.gif");
    background-repeat: repeat;
    cursor: default !important;
    /* border: 2px solid red; */
}

/* Styles for hotspot pages that use images rather than labels.  USE THE CLASS "hs-images" on the frame. */
.hs-images button {
    width: 100%;
}

.hs-images .hs-norm {
    padding: 0;
    background-color: transparent;
}

.hs-images .border {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.hs-images .hs-norm .border,
.hs-images .lb-norm .border {
    border: .2em solid transparent;
}

.hs-images .hs-ovr,
.hs-images .hs-sel,
.hs-images .lb-ovr,
.hs-images .lb-sel {
    padding: 0;
    background-color: transparent;
}

.hs-images .hs-ovr .border,
.hs-images .hs-sel .border,
.hs-images .lb-ovr .border,
.hs-images .lb-sel .border,
.hs-images .highlight .border {
    border: .2em solid #548254;
}

.hs-images .hs-vis,
.hs-images .lb-vis {
    padding: 0;
}

.hs-images .hs-vis .border,
.hs-images .hs-dis .border,
.hs-images .lb-vis .border,
.hs-images .lb-dis .border {
    border: .2em solid transparent;
}

.hs-label,
.label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    color: #ffffff;
    line-height: 1.2em;
    padding: .5em .25em;
}

.hs-label.singleLine,
.label.singleLine {
    padding: 1.1em .25em;
}

.hs-label p,
.label p {
    margin-bottom: 0;
}

.hs-images .hs-norm .hs-label,
.hs-images .lb-norm .hs-label,
.label {
    background-color: rgba(102, 102, 102, 0.85);
}

.hs-images .hs-ovr .hs-label,
.hs-images .hs-sel .hs-label,
.hs-images .lb-ovr .hs-label,
.hs-images .lb-sel .hs-label,
.hs-images .highlight .hs-label {
    background-color: rgba(83, 130, 83, 0.85);
}

.hs-images .hs-vis .hs-label,
.hs-images .hs-dis .hs-label,
.hs-images .lb-vis .hs-label,
.hs-images .lb-dis .hs-label {
    background-color: rgba(102, 102, 102, 0.85);
}

.hs-images .hs-sel.has-result-over .hs-label {
    display: none;
}

.hs-images .result-over {
    background-image: url(../images/1x1trans_black_95.png);
    background-repeat: repeat;
    color: #ffffff;
    padding: 1em .25em 1em .75em;
    border: solid 3px #548254;
    height: 99.5%;
    width: 100%;
}

.result-over h2 {
    color: #ffffff;
}

.hs-images button {
    line-height: ;
}

/* End HS classes */
/* DRAG AND DROP classes */
.draggable {
    background-color: #004455;
    color: #ffffff;
    padding: .5em;
    font-weight: normal;
    border: solid #12d9e7;
}

.draggable-highlight {
    background-color: #12d9e7;
    border: 1px solid #12d9e7;
    color: #ffffff;
    padding: .5em;
}

.draggable p {
    line-height: 1em;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* .target .draggable {
    border: 0 !important;
} */

.target {
    z-index: 90;
}

.dragColumn>div {
    height: 2.5em;
}

.target-title {
    background-color: #666666;
    color: #ffffff;
}

.target-blank,
.target-title {
    padding: .5em;
}

.target-blank,
.target-title,
.target {
    position: relative;
    border: dashed .15em #12d9e7;
    line-height: 1em;
    height: 2.1em;
}

.target-title {
    height: auto;
}

.border-full {
    border: solid 1px #979797;
}

.drag-row {
    position: relative;
    line-height: 1em;
    height: 2em;
}

/* Question Text Column on Drag&Drop screens*/
.question-col {
    padding-top: 1em;
    padding-right: 1em;
}

.question-col .button-advice {
    position: relative;
    margin-top: 15%;
    left: 25%;
    width: 43%;
}

.js-type-dragdrop .v-center {
    left: 0.5em !important;
}

.custBtn {
    width: auto !important;
    font-size: 1em;
    line-height: 1.2em;
    padding: .25em .75em;
}

.custBtn-norm {
    color: #ffffff;
    background-color: #7b7b7b;
    border: .25em solid #548254;
}

.custBtn-ovr,
.custBtn-sel,
.custBtn-norm.highlight,
.highlight .custBtn-norm {
    color: #eeeeee !important;
    background-color: #548254;
    border: .25em solid #548254;
}

.custBtn-vis,
.custBtn-dis {
    color: #eeeeee;
    background-color: #7b7b7b;
    border: .25em solid #7b7b7b;
}

/*Styles to hide the header and size the lightbox*/
.tsd-lightbox.intro-box .ui-widget-header {
    /* display: none; */
}

.tsd-lightbox.intro-box .ui-widget-content {
    /* height: 100% !important; */
}

.tsd-lightbox.intro-box {
    /* top: 5% !important; */
}

.border-lightblue {
    border-color: #12d9e7;
}
.border-darkblue {
    border-color: #07575c;
}
.border-green {
    border-color: #a9f440;
}
.bg-lightblue {
    background-color: #0ea3ad;
}
.bg-darkblue {
    background-color: #004455;
}
.bg-green {
    background-color: #047b49;
}
.bg-white {
    background-color: #ffffff;
}

.boxspot > button {
    display: flex;
    background-color: #ffffff;
    border-width: initial;
    border-style: solid;
    align-items: center;
    justify-content: center;
}
.boxspot > button img {
    margin-top: 20%;
}
.boxspot > button .label {
    display: flex;
    align-items: center;
    position: absolute;
    top: 0 !important;
    bottom: unset !important;
    left: 0;
    padding: 0;
    margin: 0;
    right: unset;
    border: none;
    font-size: 1.25em;
    font-weight: bold;
    height: 25%;
}

.boxspot > button.border-green:hover .label {
    background-color: #a9f440;
}
.boxspot > button.border-lightblue:hover .label {
    background-color: #12d9e7;
}
.boxspot > button.border-darkblue:hover .label {
    background-color: #07575c;
}
.boxspot > button .label img {
    height: 50%;
    width: auto;
    display: inline-block;
    margin: 0 .5em 0 1.25em;
}

.boxspot .result {
    width: 100%;
    height: 100%;
    background-color: #d2dada;
}
.boxspot .result h2 {
    text-align: center;
    font-size: 1.25em;
}
.boxspot .result.lightblue h2,
.boxspot .result.lightblue figcaption {
    color: #0ea3ad;
}
.boxspot .result.darkblue h2 {
    color: #004455;
}
.boxspot .result.green h2,
.boxspot .result.green figcaption  {
    color: #047b49;
}
.boxspot .result ul, .boxspot .result p {
    font-size: .9em;
    line-height: 1.15em !important;
}
.boxspot .pageText ul, .boxspot .pageText ol {
    padding-left: 2.5em;
    margin-bottom: 1em;
}
.boxspot .result .pageText > div {
    margin: 0 0 1em;
}
.boxspot .result .pageText > div img {
    border: solid #fff .5em;
}
.boxspot figcaption {
    text-align: center;
    font-size:.85em;
    font-weight: bold;
    line-height: 1em;
    margin-top: .5em;
}