body, html {
    width      : 100%;
    height     : 100%;
    margin     : 0px;
    padding    : 0px;
    overflow-x : visible;}

label {
    font-weight: 450;}

.container {
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

#text-data {
  font-size: 21px;
}

.narration-container {
    font-family: monospace;
}

.table {
    overflow-x: scroll;
}

h5.answerText, h5.incorrectText {
    font-style  : italic;
    font-weight : 300;}

#menu-toolbar {
    width: 102.8% !important; }

.card {
    min-width        : 40vw;
    background-color : #efeff0;
    margin           : 50px auto;
    padding          : 40px;}

.card-header {
    background-color : initial;
    border-bottom    : none;
    margin-bottom    : 10px;}

.survey-contain {
    font-size: 1.05rem;
}

input.survey.checkbox {
    margin-left: 15px;
    margin-right: 5px;
}

thead {
    background-color : #000080;
    color            : #ffffff;}

.bonus-question {
    background-color: #fea ! important;}

.btn-toolbar {
    margin-left  : auto;
    margin-right : auto;
    margin-top : 10px;}

.btn-toolbar .btn-group .btn {
    -moz-box-shadow: 3px 4px 0px 0px #a1a1a1;
    -webkit-box-shadow: 3px 4px 0px 0px #a1a1a1;
    box-shadow: 3px 4px 0px 0px #a1a1a1;
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #bab1ba));
    background:-moz-linear-gradient(top, #ededed 5%, #bab1ba 100%);
    background:-webkit-linear-gradient(top, #ededed 5%, #bab1ba 100%);
    background:-o-linear-gradient(top, #ededed 5%, #bab1ba 100%);
    background:-ms-linear-gradient(top, #ededed 5%, #bab1ba 100%);
    background:linear-gradient(to bottom, #ededed 5%, #bab1ba 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#bab1ba',GradientType=0);
    background-color:#ededed;
    -moz-border-radius:15px;
    -webkit-border-radius:15px;
    border-radius:15px;
    border:1px solid #c2c2c2;
    cursor:pointer;
    color:#000000;
    font-family:Arial;
    font-size:18px;
    text-decoration:none;
    text-shadow:0px 1px 0px #e1e2ed;}

.btn-3d {
    -moz-box-shadow: 3px 4px 0px 0px #a1a1a1;
    -webkit-box-shadow: 3px 4px 0px 0px #a1a1a1;
    box-shadow: 3px 4px 0px 0px #a1a1a1;
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #96cbff), color-stop(1, #808080));
    background:-moz-linear-gradient(top, #96cbff 5%, #63b1ff 100%);
    background:-webkit-linear-gradient(top, #96cbff 5%, #63b1ff 100%);
    background:-o-linear-gradient(top, #96cbff 5%, #63b1ff 100%);
    background:-ms-linear-gradient(top, #96cbff 5%, #63b1ff 100%);
    background:linear-gradient(to bottom, #96cbff 5%, #63b1ff 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#96cbff', endColorstr='#63b1ff',GradientType=0);
    background-color:#96cbff;
    -moz-border-radius:15px;
    -webkit-border-radius:15px;
    border-radius:15px;
    border:1px solid #96cbff;
    cursor:pointer;
    color:#444444;
    font-family:Arial;
    font-size:18px;
    text-decoration:none;
    text-shadow:0px 1px 0px #e1e2ed;}

.btn-primary {
    border-radius    : 50px;
    background-color : #000080;
    border           : 1px solid #0000b3;}

.btn-primary:active {
    background-color : #2952a3;}

.btn-link {
    color            : white;
    background-color : #1E2B41;
    border-radius    : 50px;}

.hotword {
    text-decoration:underline;
    font-weight:bold;
    color: mediumblue;
    cursor: pointer;}

.icon-sizing {
    padding     : .7rem .85rem;
    font-size   : 1rem;
    line-height : 1.5;}

.icon-middle {
    margin-left  : 4rem;
    margin-right : 4rem;}

.hide-on-startup {
    display : none;}

.invisible {
    visibility : hidden;}

.wide-btn {
    width : 50%;}

.table-container {
    overflow-x : auto;}

.alert-success {
    color            : #ffffff;
    background-color : #66a3ff;
    border-color     : #c3e6cb;}

.narration-text {
    max-height       : 250px;
    background-color : white;
    font-family      : monospace;
    margin           : 5px auto 10px auto;
    overflow         : auto;
    padding          : 15px;
    font-size        : 1rem;}

.answerText {
    display    : inline-block;
    text-align : left;}

.centering {
    margin-left  : auto;
    margin-right : auto;}

.hide-on-startup {
    display : none;}

.question-button-row {
    margin-left  : auto;
    margin-right : auto;}

.question-button {
    -moz-box-shadow: 3px 4px 0px 0px #a1a1a1;
    -webkit-box-shadow: 3px 4px 0px 0px #a1a1a1;
    box-shadow: 3px 4px 0px 0px #a1a1a1;
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #bab1ba));
    background:-moz-linear-gradient(top, #ededed 5%, #bab1ba 100%);
    background:-webkit-linear-gradient(top, #ededed 5%, #bab1ba 100%);
    background:-o-linear-gradient(top, #ededed 5%, #bab1ba 100%);
    background:-ms-linear-gradient(top, #ededed 5%, #bab1ba 100%);
    background:linear-gradient(to bottom, #ededed 5%, #bab1ba 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#bab1ba',GradientType=0);
    background-color:#ededed;
    -moz-border-radius:15px;
    -webkit-border-radius:15px;
    border-radius:15px;
    border:1px solid #c2c2c2;
    cursor:pointer;
    color:#000000;
    font-family:Arial;
    font-size:18px;
    text-decoration:none;
    text-shadow:0px 1px 0px #e1e2ed;}

.bonus-button {
    -moz-box-shadow: 3px 4px 0px 0px #a1a1a1;
    -webkit-box-shadow: 3px 4px 0px 0px #a1a1a1;
    box-shadow: 3px 4px 0px 0px #a1a1a1;
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f9ff82), color-stop(1, #bab1ba));
    background:-moz-linear-gradient(top, #f9ff82 5%, #e6e625 100%);
    background:-webkit-linear-gradient(top, #f9ff82 5%, #e6e625 100%);
    background:-o-linear-gradient(top, #f9ff82 5%, #e6e625 100%);
    background:-ms-linear-gradient(top, #f9ff82 5%, #e6e625 100%);
    background:linear-gradient(to bottom, #f9ff82 5%, #e6e625 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9ff82', endColorstr='#e6e625',GradientType=0);
    background-color:#f9ff82;
    -moz-border-radius:15px;
    -webkit-border-radius:15px;
    border-radius:15px;
    border:1px solid #c2c2c2;
    cursor:pointer;
    color:#000000;
    font-family:Arial;
    font-size:18px;
    text-decoration:none;
    text-shadow:0px 1px 0px #e1e2ed;}

.bonus-button.active, .bonus-button.selected {
    -moz-box-shadow: 3px 4px 0px 0px #a1a1a1;
    -webkit-box-shadow: 3px 4px 0px 0px #a1a1a1;
    box-shadow: 3px 4px 0px 0px #a1a1a1;
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ff8282), color-stop(1, #ffff00));
    background:-moz-linear-gradient(top, #e67f25 5%, #ff8282 100%);
    background:-webkit-linear-gradient(top, #e67f25 5%, #ff8282 100%);
    background:-o-linear-gradient(top, #e67f25 5%, #ff8282 100%);
    background:-ms-linear-gradient(top, #e67f25 5%, #ff8282 100%);
    background:linear-gradient(to bottom, #e67f25 5%, #ff8282 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e67f25', endColorstr='#ff8282',GradientType=0);
    color:black;}

.bonus-button:hover {
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #fffaaa), color-stop(1, #ffff00));
    background:-moz-linear-gradient(top, #e67f25 5%, #ff8282 100%);
    background:-webkit-linear-gradient(top, #e67f25 5%, #ff8282 100%);
    background:-o-linear-gradient(top, #e67f25 5%, #ff8282 100%);
    background:-ms-linear-gradient(top, #e67f25 5%, #ff8282 100%);
    background:linear-gradient(to bottom, #e67f25 5%, #ff8282 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e67f25', endColorstr='#ff8282',GradientType=0);
    color:black;}

.btn.active {
    background-color : #cee3ed}

.btn.focus, .btn:focus {
    outline    : 0;
    box-shadow : none!important;}

.selected {
    background-color:#ffff00;
    color:white;}

.question-button.active, .question-button.selected {
    -moz-box-shadow: 3px 4px 0px 0px #a1a1a1;
    -webkit-box-shadow: 3px 4px 0px 0px #a1a1a1;
    box-shadow: 3px 4px 0px 0px #a1a1a1;
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #fffaaa), color-stop(1, #ffff00));
    background:-moz-linear-gradient(top, #fffaaa 5%, #ffff00 100%);
    background:-webkit-linear-gradient(top, #fffaaa 5%, #ffff00 100%);
    background:-o-linear-gradient(top, #fffaaa 5%, #ffff00 100%);
    background:-ms-linear-gradient(top, #fffaaa 5%, #ffff00 100%);
    background:linear-gradient(to bottom, #fffaaa 5%, #ffff00 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffaaa', endColorstr='#ffff00',GradientType=0);
    color:black;}

#question-submit-button {
    margin           : 10px auto;
    background-color : #bac1c4;
    font-weight      : bold;
}

#page-head-container {
    display          : inline-block;
    background-color : #B9CDD1;
    padding          : 8px;
    border-radius    : 15px;}

#page-head {color: black;
font-size: 16px;
font-weight: bold;}

hr {
    margin-top: .5rem;
    margin-bottom: .5rem;
}

#myVideo,
#myImage,
#myAudio {
    width : 100%;}

#myAudio:focus {
    outline : none;}

.lesson {
    width: 300px; }

.module-inactive {
    color: gray;}

.module-to-take {
    border: 1px dotted rgba(176, 147, 4);
    background-color: rgba(22, 138, 201, 0.35);
}

.short-text { display: none; }

.min-height {
    min-height : 75px;}

.bottom-space {
    margin-bottom : 35px;}

.unsatisfactory {
    color : red;}

.right-border {
    border-right: 1px solid #ccc;}

.print-link {
    padding: 10px 5px;
    width: 50%;
    border: 1px solid black;
    background-color: #6c757d;
    border-radius: 5px;
    color: white;
    text-align: center;
    cursor: pointer;
    margin-left: auto;
    margin-right: auto;}

.too-far {
    color: #ABB2B9;}

.bonus-button.active {
    background-color: #DC7633;
}

.media-button {
    padding: 0.7rem 1.1rem;
    font-size: 1.5rem;
    line-height: 1.5;
    color: white;
    background-color: #1E2B41;
    border-radius: 50px;
    outline: none; }

.lesson-wrapper {
    max-width:750px;}

/* Small devices (landscape phones, 544px and up) */
@media (max-width: 767.98px)
{
    #page-head-container {
        float         : right;
        margin-bottom : 25px; }
    .hide-on-break {
        display : none;
    }

    #page-content {
        padding: 10px;}
}

@media (max-width: 500px)
{
    .card {
        padding : 5px; }

    #page-head {
        color: black;
        font-size: 12px;
        font-weight: normal;}

    #page-head-container {
        padding : 3px;}

    h2 {
        font-size: 1.5rem;}

    .card-header {
        margin-bottom : 0px;}
}

@media (max-width: 402px)
{
    .short-text {
        display   : inline-block;
        font-size : 20px; }
    .full-text { display: none; }

}

/*show hover on devices with a mouse (hide on mobile)*/
@media (hover: hover)
{
    .bonus-button:hover {
        background-color: #DC7633;}

    .module-inactive:hover {
        cursor : no-drop;}

    .module-active:hover {
        color  : #01A2E8  !important;
        text-color: #01A2E8;
        cursor : pointer; }

    #question-submit-button:hover {
        background-color : #cee3ed}

    .btn:hover {
        background-color : #cee3ed}

    .question-button:hover {
        background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #fffaaa), color-stop(1, #ffff00));
        background:-moz-linear-gradient(top, #fffaaa 5%, #ffff00 100%);
        background:-webkit-linear-gradient(top, #fffaaa 5%, #ffff00 100%);
        background:-o-linear-gradient(top, #fffaaa 5%, #ffff00 100%);
        background:-ms-linear-gradient(top, #fffaaa 5%, #ffff00 100%);
        background:linear-gradient(to bottom, #fffaaa 5%, #ffff00 100%);
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffaaa', endColorstr='#ffff00',GradientType=0);
        color:black;}

    #play-button:hover {
        color: #0056b3;
        background-color: #cee3ed;}

    #exit-button:hover {
        color: #d01c1c;
        background-color: #cee3ed
    }
}

@media print {
    footer, .card-header, #menu-toolbar, #logout-button {
        display: none !important;
    }
    #print-score-title, .print-score-header {
        display: block;
    }
    @page {
        margin-top: 15mm;
        margin-bottom: 15mm;
    }
}

@media only screen and (max-width: 1199px) {
    .mobile-flex {
        display: flex;
        flex-direction: column;
    }
}

#media-controls {
    padding : 20px;}

.security-question {
    text-transform : uppercase;}

.red {
    color: red;
}

#AFS-param-container,
#RBS-param-container {
    display: inline-block;
    -webkit-box-shadow:0 0 10px #9FA83B;
    -moz-box-shadow: 0 0 10px #9FA83B;
    box-shadow:0 0 10px #9FA83B;
    padding: 10px;
    border-radius: 20px;
    background: rgba(159, 168, 59, 0.3);
}

/* Loading overlay used when launching modules/exams */
#module-loading-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(255,255,255,0.95);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
}

.loader-spinner {
    width: 64px;
    height: 64px;
    border: 8px solid #e0e0e0;
    border-top-color: #007bff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 16px;
}

.loader-text {
    font-size: 1.1rem;
    color: #333;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}


body.loading-state * {
    cursor: wait !important;
}