@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

#loader.hidden {
    /*display: none;*/
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 300%;
    height: 100%;
    background: #000000c9;
    z-index: 99999;
    opacity: 1;
    transition: all 0.5s;
}

.lds-dual-ring {
    display: block;
    position: fixed;
    left: 50%;
    top: 50%;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #3498db;
    -webkit-animation: spin 2s linear infinite;
    /* Chrome, Opera 15+, Safari 5+ */
    animation: spin 2s linear infinite;
    /* Chrome, Firefox 16+, IE 10+, Opera */
}

.lds-dual-ring:before {
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #e74c3c;
    -webkit-animation: spin 3s linear infinite;
    /* Chrome, Opera 15+, Safari 5+ */
    animation: spin 3s linear infinite;
    /* Chrome, Firefox 16+, IE 10+, Opera */
}

.lds-dual-ring:after {
    content: "";
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #f9c922;
    -webkit-animation: spin 1.5s linear infinite;
    /* Chrome, Opera 15+, Safari 5+ */
    animation: spin 1.5s linear infinite;
    /* Chrome, Firefox 16+, IE 10+, Opera */
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(0deg);
        /* IE 9 */
        transform: rotate(0deg);
        /* Firefox 16+, IE 10+, Opera */
    }
    100% {
        -webkit-transform: rotate(360deg);
        /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg);
        /* IE 9 */
        transform: rotate(360deg);
        /* Firefox 16+, IE 10+, Opera */
    }
}

@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(0deg);
        /* IE 9 */
        transform: rotate(0deg);
        /* Firefox 16+, IE 10+, Opera */
    }
    100% {
        -webkit-transform: rotate(360deg);
        /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg);
        /* IE 9 */
        transform: rotate(360deg);
        /* Firefox 16+, IE 10+, Opera */
    }
}


/* @keyframes lds-dual-ring {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
} */

.progress-bar-striped {
    text-shadow: 0 1px 1px #333;
}

.cssProgress {
    width: 100%;
}

#progress-bar {
    height: 18px
}

.cssProgress .progress-quiz {
    position: relative;
    overflow: hidden;
    width: 100%;
    font-family: "Roboto", sans-serif;
}

.cssProgress .cssProgress-bar {
    display: block;
    float: left;
    width: 0%;
    height: 100%;
    background: #3798d9;
    box-shadow: inset 0px -1px 2px rgba(0, 0, 0, 0.1);
    -webkit-transition: width 0.8s ease-in-out;
    transition: width 0.8s ease-in-out;
}

.cssProgress .cssProgress-label {
    position: relative;
    overflow: hidden;
    left: 0px;
    right: 0px;
    color: #fff;
    display: block;
    width: 100%;
    font-size: 0.8em;
    text-align: center;
    text-shadow: 0 1px 0 #000;
}

.cssProgress .cssProgress-info {
    background-color: #9575cd !important;
}

.cssProgress .cssProgress-danger {
    background-color: #ef5350 !important;
}

.cssProgress .cssProgress-success {
    background-color: #66bb6a !important;
}

.cssProgress .cssProgress-warning {
    background-color: #ffb74d !important;
}

.cssProgress .cssProgress-right {
    float: right !important;
}

.cssProgress .cssProgress-label-left {
    margin-left: 10px;
    text-align: left !important;
}

.cssProgress .cssProgress-label-right {
    margin-right: 10px;
    text-align: right !important;
}

.cssProgress .cssProgress-label2 {
    display: block;
    margin: 2px 0;
    padding: 0 8px;
    font-size: 0.8em;
}

.cssProgress .cssProgress-label2.cssProgress-label2-right {
    text-align: right;
}

.cssProgress .cssProgress-label2.cssProgress-label2-center {
    text-align: center;
}

.cssProgress .cssProgress-stripes,
.cssProgress .cssProgress-active,
.cssProgress .cssProgress-active-right {
    background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, 0.125) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.125) 50%, rgba(255, 255, 255, 0.125) 75%, transparent 75%, transparent);
    background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.125) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.125) 50%, rgba(255, 255, 255, 0.125) 75%, transparent 75%, transparent);
    background-size: 35px 35px;
}

.cssProgress .cssProgress-active {
    -webkit-animation: cssProgressActive 2s linear infinite;
    -ms-animation: cssProgressActive 2s linear infinite;
    animation: cssProgressActive 2s linear infinite;
}

.cssProgress .cssProgress-active-right {
    -webkit-animation: cssProgressActiveRight 2s linear infinite;
    -ms-animation: cssProgressActiveRight 2s linear infinite;
    animation: cssProgressActiveRight 2s linear infinite;
}

@-webkit-keyframes cssProgressActive {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 35px 35px;
    }
}

@-ms-keyframes cssProgressActive {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 35px 35px;
    }
}

@keyframes cssProgressActive {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 35px 35px;
    }
}

@-webkit-keyframes cssProgressActiveRight {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: -35px -35px;
    }
}

@-ms-keyframes cssProgressActiveRight {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: -35px -35px;
    }
}

@keyframes cssProgressActiveRight {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: -35px -35px;
    }
}


/* -----------------------------------------------------
Progress Bar 1
-------------------------------------------------------- */

.progress1 {
    background-color: #EEE;
    box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.2);
}

.progress1 .cssProgress-bar {
    height: 18px;
}

.progress1 .cssProgress-label {
    line-height: 18px;
}


/* -----------------------------------------------------
Progress Bar 2
-------------------------------------------------------- */

.progress2 {
    background-color: #EEE;
    border-radius: 9px;
    box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.2);
}

.progress2 .cssProgress-bar {
    height: 18px;
    border-radius: 9px;
}

.progress2 .cssProgress-label {
    line-height: 18px;
}


/* -----------------------------------------------------
Progress Bar 3
-------------------------------------------------------- */

.progress3 {
    width: auto !important;
    padding: 4px;
    background-color: rgba(0, 0, 0, 0.1);
    box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

.progress3 .cssProgress-bar {
    height: 16px;
    border-radius: 3px;
}

.progress3 .cssProgress-label {
    line-height: 16px;
}


/* -----------------------------------------------------
Progress Bar 4
-------------------------------------------------------- */

.progress4 {
    position: relative;
    width: 100%;
    background-color: #EEE;
}

.progress4.cssProgress-bg {
    background-color: #bbdefb !important;
}

.progress4.cssProgress-bg-info {
    background-color: #d1c4e9 !important;
}

.progress4.cssProgress-bg-danger {
    background-color: #ffcdd2 !important;
}

.progress4.cssProgress-bg-success {
    background-color: #c8e6c9 !important;
}

.progress4.cssProgress-bg-warning {
    background-color: #ffecb3 !important;
}

.progress4 .cssProgress-bar {
    display: block;
    float: none;
    width: 0%;
    height: 4px;
    background: #3798d9;
}

.progress4 .cssProgress-bar.cssProgress-lg {
    height: 6px;
}

.progress4 .cssProgress-bar.cssProgress-2x {
    height: 8px;
}

.progress4 .cssProgress-bar.cssProgress-3x {
    height: 10px;
}

.progress4 .cssProgress-bar.cssProgress-4x {
    height: 12px;
}

.progress4 .cssProgress-bar.cssProgress-5x {
    height: 14px;
}

.progress4 .cssProgress-bar.cssProgress-glow {
    box-shadow: 5px 0px 15px 0px #3798D9;
}

.progress4 .cssProgress-bar.cssProgress-glow.cssProgress-info {
    box-shadow: 5px 0px 15px 0px #9575cd;
}

.progress4 .cssProgress-bar.cssProgress-glow.cssProgress-danger {
    box-shadow: 5px 0px 15px 0px #ef5350;
}

.progress4 .cssProgress-bar.cssProgress-glow.cssProgress-success {
    box-shadow: 5px 0px 15px 0px #66bb6a;
}

.progress4 .cssProgress-bar.cssProgress-glow.cssProgress-warning {
    box-shadow: 5px 0px 15px 0px #ffb74d;
}

.progress4 .cssProgress-bar.cssProgress-glow-active {
    -webkit-animation: cssProgressGlowActive1 3s linear infinite;
    -ms-animation: cssProgressGlowActive1 3s linear infinite;
    animation: cssProgressGlowActive1 3s linear infinite;
}

.progress4 .cssProgress-bar.cssProgress-glow-active.cssProgress-info {
    -webkit-animation: cssProgressGlowActive2 3s linear infinite;
    -ms-animation: cssProgressGlowActive2 3s linear infinite;
    animation: cssProgressGlowActive2 3s linear infinite;
}

.progress4 .cssProgress-bar.cssProgress-glow-active.cssProgress-danger {
    -webkit-animation: cssProgressGlowActive3 3s linear infinite;
    -ms-animation: cssProgressGlowActive3 3s linear infinite;
    animation: cssProgressGlowActive3 3s linear infinite;
}

.progress4 .cssProgress-bar.cssProgress-glow-active.cssProgress-success {
    -webkit-animation: cssProgressGlowActive4 3s linear infinite;
    -ms-animation: cssProgressGlowActive4 3s linear infinite;
    animation: cssProgressGlowActive4 3s linear infinite;
}

.progress4 .cssProgress-bar.cssProgress-glow-active.cssProgress-warning {
    -webkit-animation: cssProgressGlowActive5 3s linear infinite;
    -ms-animation: cssProgressGlowActive5 3s linear infinite;
    animation: cssProgressGlowActive5 3s linear infinite;
}

@-webkit-keyframes cssProgressGlowActive1 {
    0%,
    100% {
        box-shadow: 5px 0px 15px 0px #3798D9;
    }
    45% {
        box-shadow: 1px 0px 4px 0px #3798D9;
    }
}

@-ms-keyframes cssProgressGlowActive1 {
    0%,
    100% {
        box-shadow: 5px 0px 15px 0px #3798D9;
    }
    45% {
        box-shadow: 1px 0px 4px 0px #3798D9;
    }
}

@keyframes cssProgressGlowActive1 {
    0%,
    100% {
        box-shadow: 5px 0px 15px 0px #3798D9;
    }
    45% {
        box-shadow: 1px 0px 4px 0px #3798D9;
    }
}

@-webkit-keyframes cssProgressGlowActive2 {
    0%,
    100% {
        box-shadow: 5px 0px 15px 0px #9575cd;
    }
    45% {
        box-shadow: 1px 0px 4px 0px #9575cd;
    }
}

@-ms-keyframes cssProgressGlowActive2 {
    0%,
    100% {
        box-shadow: 5px 0px 15px 0px #9575cd;
    }
    45% {
        box-shadow: 1px 0px 4px 0px #9575cd;
    }
}

@keyframes cssProgressGlowActive2 {
    0%,
    100% {
        box-shadow: 5px 0px 15px 0px #9575cd;
    }
    45% {
        box-shadow: 1px 0px 4px 0px #9575cd;
    }
}

@-webkit-keyframes cssProgressGlowActive3 {
    0%,
    100% {
        box-shadow: 5px 0px 15px 0px #ef5350;
    }
    45% {
        box-shadow: 1px 0px 4px 0px #ef5350;
    }
}

@-ms-keyframes cssProgressGlowActive3 {
    0%,
    100% {
        box-shadow: 5px 0px 15px 0px #ef5350;
    }
    45% {
        box-shadow: 1px 0px 4px 0px #ef5350;
    }
}

@keyframes cssProgressGlowActive3 {
    0%,
    100% {
        box-shadow: 5px 0px 15px 0px #ef5350;
    }
    45% {
        box-shadow: 1px 0px 4px 0px #ef5350;
    }
}

@-webkit-keyframes cssProgressGlowActive4 {
    0%,
    100% {
        box-shadow: 5px 0px 15px 0px #66bb6a;
    }
    45% {
        box-shadow: 1px 0px 4px 0px #66bb6a;
    }
}

@-ms-keyframes cssProgressGlowActive4 {
    0%,
    100% {
        box-shadow: 5px 0px 15px 0px #66bb6a;
    }
    45% {
        box-shadow: 1px 0px 4px 0px #66bb6a;
    }
}

@keyframes cssProgressGlowActive4 {
    0%,
    100% {
        box-shadow: 5px 0px 15px 0px #66bb6a;
    }
    45% {
        box-shadow: 1px 0px 4px 0px #66bb6a;
    }
}

@-webkit-keyframes cssProgressGlowActive5 {
    0%,
    100% {
        box-shadow: 5px 0px 15px 0px #ffb74d;
    }
    45% {
        box-shadow: 1px 0px 4px 0px #ffb74d;
    }
}

@-ms-keyframes cssProgressGlowActive5 {
    0%,
    100% {
        box-shadow: 5px 0px 15px 0px #ffb74d;
    }
    45% {
        box-shadow: 1px 0px 4px 0px #ffb74d;
    }
}

@keyframes cssProgressGlowActive5 {
    0%,
    100% {
        box-shadow: 5px 0px 15px 0px #ffb74d;
    }
    45% {
        box-shadow: 1px 0px 4px 0px #ffb74d;
    }
}

blockquote {
    padding: 0 0 0 9px;
}

blockquote p {
    font-size: .9em
}

blockquote:before,
blockquote:after {
    font-family: Arial, serif;
    font-size: 2.5em;
    vertical-align: middle;
    line-height: 0
}

blockquote:before {
    content: open-quote;
    margin-right: 4px
}

blockquote:after {
    content: close-quote;
    margin-left: 3px
}

blockquote.blockstyle,
blockquote.style2 {
    background: #fff;
    font-style: italic
}

blockquote.blockstyle p,
blockquote.style2 p {
    display: inline
}

blockquote.blockstyle {
    border-left: 3px solid #f0715f;
    position: relative;
}

blockquote.blockstyle>span.triangle:before {
    text-indent: 0;
    content: "\f0da";
    font-family: FontAwesome;
    color: #f0715f;
    position: absolute;
    left: -1px;
    top: 50%;
    margin-top: -11px;
    font-style: normal
}

blockquote.blockstyle:before,
blockquote.blockstyle:after {
    color: #f0715f;
}

blockquote.blockstyle.border-color-blue {
    border-color: #01b7f2
}

blockquote.blockstyle.border-color-blue>span.triangle:before {
    color: #01b7f2
}

blockquote.blockstyle.border-color-yellow {
    border-color: #fdb714
}

blockquote.blockstyle.border-color-yellow>span.triangle:before {
    color: #fdb714
}

#welcome {
    z-index: 99;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

#welcome .welcome-frame,
#welcome .welcome-background {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

#welcome .welcome-background {
    z-index: 999;
    opacity: .93;
    background: #fff;
}

#welcome .welcome-frame {
    z-index: 9999;
}

#welcome .welcome-frame h1 {
    width: 100%;
    font-size: 2em;
    text-align: center;
    margin: 20px 0;
    padding: 20px 0;
    border-bottom: 1px solid #999;
}

#welcome .welcome-content {
    overflow-y: scroll;
    padding: 10px;
    text-align: justify;
    font-size: 1em;
    height: 60vh;
    text-shadow: 0 1px 1px #bbb;
}

#welcome .welcome-footer {
    overflow: hidden;
    padding: 10px;
    text-align: center;
    width:100%;
}

#start-button.btn {
    padding: 9px 19px;
    color: #fff;
    text-decoration: none;
    border: 1px solid #002654;
    border-radius: 3px;
    background: #0089ff;
    margin: 10px 0 10px 30px;
    text-shadow: 0 1px 0 #000;
    box-shadow: rgb(0 0 0 / 40%) 0px 2px 4px, rgb(0 0 0 / 30%) 0px 7px 13px -3px, rgb(0 0 0 / 20%) 0px -3px 0px inset;
}

#start-button.btn:hover {
    color: #000d21!important;
    cursor: pointer;
    text-shadow: 0 1px 0 #d9e8ff;
    box-shadow: rgb(0 0 0 / 25%) 0px 0.0625em 0.0625em, rgb(0 0 0 / 25%) 0px 0.125em 0.5em, rgb(255 255 255 / 10%) 0px 0px 0px 1px inset;
}

#switch-light-mode {
    cursor: pointer;
}

#switch-light-mode:hover {
    text-shadow: 1px 2px 1px #000;
    color: #fff;
}

.dark-mode #welcome .welcome-background {
    background: #000;
}

.dark-mode #welcome .welcome-frame h1 {
    color: #fff;
    text-shadow: 0 1px 0 #000;
}

.dark-mode #welcome .welcome-content {
    color: #dcdcdc;
    text-shadow: 0 1px 0 #000;
}

.dark-mode div,
.dark-mode h1,
.dark-mode h2,
.dark-mode h3,
.dark-mode h4,
.dark-mode h5 {
    color: #efefef;
    text-shadow: 0 1px 0 #000;
    background: #333;
}

@keyframes lds-dual-ring {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

 ::-webkit-scrollbar {
    width: 20px;
}

 ::-webkit-scrollbar-track {
    background-color: transparent;
}

 ::-webkit-scrollbar-thumb {
    background-color: #d6dee1;
    border-radius: 20px;
    border: 6px solid transparent;
    background-clip: content-box;
}

 ::-webkit-scrollbar-thumb:hover {
    background-color: #a8bbbf;
}

#testing-exam-frame {
    background: #fff;
}

.full-screen-overlay {
    transition: all 0.3s ease;
    overflow: hidden;
    width: 100%;
    margin: 5px auto;
    border: aliceblue;
    box-shadow: 0 1px 1px 1px #eee;
    border: 1px solid #ccc;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
    overflow-y: scroll;
    height: 100%;
    background: #fff;
}

#hte-content-container.full-screen-mode .wrap,
#hte-content-container.full-screen-mode .hte-container-review {
    margin: 0;
    padding: 0;
}

#hte-content-container.full-screen-mode #testing-exam-content {
    max-height: 100vh;
    overflow-y: scroll;
    max-width: 98%;
    margin: 0 auto;
}

#testing-exam.active {}

#testing-exam-container {
    min-height: 100vh;
    overflow-y: scroll;
}

.hte-line .row h6 {
    text-align: right;
}

.select-exam .exam-dump .row {
    padding: 10px 0 5px;
    border-bottom: 1px solid #cacaca;
}

.select-exam .exam-dump .row:hover {
    border-bottom: 1px dashed #1479f4;
    outline: #a1d2ff;
    background: #e8f3ff;
    color: #111;
    text-shadow: 0 1px 0 #fff;
    cursor: pointer
}

#exam-box {
    position: relative;
    z-index: 2;
    padding: 12px;
    overflow: hidden;
    max-width: 98%;
    margin: 0 auto;
    background: #fff;
    border-radius: 5px 5px 0 0;
    align-items: center;
    justify-content: space-between;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}

#exam-box .title {
    float: left;
}

#exam-box h1 {
    margin: 15px 0 0;
    font-weight: bold;
    padding: 0;
    box-sizing: border-box;
    font-size: 1.5em;
    color: #333;
    font-family: 'Poppins', sans-serif;
}

#question-box .quiz.title h2 {
    font-size: 1.2em;
    padding: 20px 0 0;
    font-weight: 300;
    font-size: 1.2em;
    color: #222;
    text-shadow: 0 1px 1px #666;
    border-bottom: 1px solid #666;
    padding: 0 0 10px 0;
    margin: 20px 0 0;
    text-transform: uppercase;
}

#exam-box .timer {
    float: right;
    color: #363636;
    background: #dbdbdb;
    border: 1px solid #969696;
    height: 48px;
    padding: 3px 1px;
    border-radius: 2px;
    text-shadow: 0 1px 0 #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 215px;
    margin: 2px 8px 10px 5px;
    /* box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset; */
    box-shadow: rgb(0 0 0 / 25%) 0px 0.0625em 0.0625em, rgb(0 0 0 / 25%) 0px 0.125em 0.5em, rgb(255 255 255 / 10%) 0px 0px 0px 1px inset;
}

#exam-box .timer .summary {
    text-shadow: 0 1px 0 #fff;
    font-weight: 600;
}

#exam-box #total-done {
    width: 150px;
    float: right;
    overflow: hidden;
    padding: 8px 0 0;
    text-align: center;
    height: 40px;
    color: #600000;
    font-weight: 600;
    margin: 6px 2px 0px 0;
    border: 1px solid #7a1010;
    border-radius: 3px;
    background: #ffcbcb;
    cursor: pointer;
    text-shadow: 0 1px 0px #fff;
}

#exam-box #total-done.warning {
    color: #341d00;
    border: 1px solid #7a3c10;
    background: #ffddcb;
}

#exam-box #total-done.going {
    color: #001f34;
    border: 1px solid #10487a;
    background: #cbeaff;
}

#exam-box #total-done.running {
    color: #003034;
    border: 1px solid #107a78;
    background: #cbf9ff;
}

#exam-box #total-done.success {
    color: #00340d;
    border: 1px solid #107a3a;
    background: #cbffcc;
}

#exam-box .timer .time_left_txt {
    font-weight: 400;
    font-size: 17px;
    user-select: none;
}

#exam-box .timer .timer_count_down {
    font-size: 18px;
    font-weight: 500;
    height: 37px;
    width: 158px;
    color: #fff;
    border-radius: 7px;
    padding: 3px 0 0;
    line-height: 30px;
    text-align: center;
    user-select: none;
}

#exam-box .top-box {
    width: 100%;
    overflow: hidden;
}

#exam-box .complete-percentage {
    width: 100%;
    overflow: hidden;
    margin: 6px 0 0;
}

#exam-box .questions-bar {
    width: 100%;
    display: block;
    float: left;
    margin: 0 0 1px 0;
    padding: 5px 0 5px 5px;
    background: #edf7ff;
    border: 1px solid #999;
    border-radius: 3px;
}

#exam-box .circle {
    margin: 6px 6px 20px;
    display: inline-block;
    position: relative;
    text-align: center;
    line-height: 1.2;
}

#exam-box .circle canvas {
    width: 36px!important;
    height: 36px!important;
    margin: 18px 0 0 0;
}

#exam-box .circle strong {
    position: absolute;
    left: 9px;
    top: 30px;
    font-family: Roboto;
    font-size: .69em;
    font-weight: 500;
    color: #120000;
    text-shadow: 0 1px 0 #fff;
}

#exam-box ul.numbers {
    margin: 0;
    max-height: 100px;
    padding: 0;
    overflow-y: scroll;
}

#exam-box ul.numbers li {
    display: block;
    float: left;
    text-align: center;
    margin: 2px;
}

#exam-box ul.numbers li a {
    width: 33px;
    padding: 5px 3px;
    color: #333;
    font-size: 12px;
    display: block;
    border-radius: 3px;
    font-weight: 600;
    text-decoration: none;
    border: 1px dashed #666;
    background: #fafafa;
    font-family: 'Poppins', sans-serif;
}

#exam-box ul.numbers li.current a {
    color: #3d2600;
    border: 1px dashed #683700;
    background: #ffc66a;
    text-shadow: 0 1px 0 #ccc;
}

#exam-box ul.numbers li.current a:hover {
    color: #fff;
    border: 1px dashed #472600;
    background: #e58d00;
    text-shadow: 0 1px 1px #000;
}

#exam-box ul.numbers li.correct a {
    color: #072600;
    border: 1px solid #055501;
    background: #92ff8e;
    text-shadow: 0 1px 0 #ccc;
}

#exam-box ul.numbers li.correct a:hover {
    color: #fff;
    border: 1px solid #025e00;
    background: #00aa03;
    text-shadow: 0 1px 1px #000;
}

#exam-box ul.numbers li.done a {
    color: #001226;
    border: 1px solid #001e4c;
    background: #c3e8ff;
    text-shadow: 0 1px 0 #ccc;
}

#exam-box ul.numbers li.done a:hover {
    color: #fff;
    border: 1px solid #00345e;
    background: #0095ff;
    text-shadow: 0 1px 1px #000;
}

#exam-box ul.numbers li.wrong a {
    color: #1d0000;
    border: 1px dashed #680000;
    background: #ffc2c2;
    text-shadow: 0 1px 0 #ccc;
}

#exam-box ul.numbers li.wrong a:hover {
    color: #fff;
    border: 1px solid #5e0000;
    background: #ff0000;
    text-shadow: 0 1px 1px #000;
}

#exam-box ul.numbers li.marked a {
    color: #1a001b;
    border: 1px dashed #500068;
    background: #fad1ff;
    text-shadow: 0 1px 0 #ccc;
}

#exam-box ul.numbers li.marked a:hover {
    color: #fff;
    border: 1px solid #4a005e;
    background: #b300ff;
    text-shadow: 0 1px 1px #000;
}

#exam-box ul.numbers li.none a {
    color: #252525;
    border: 1px dashed #444444;
    background: #b1b1b1;
    text-shadow: 0 1px 0 #ccc;
}

#exam-box ul.numbers li.none a:hover {
    color: #fff;
    background: #333;
    border: 1px dashed #000;
    text-shadow: 0 1px 1px #000;
}

#exam-box .doneline,
#exam-box .timeline {
    width: 100%;
    overflow: hidden;
    margin: 0 0 1px;
}

#exam-box .doneline {}

#exam-box .timeline {}

#exam-box .doneline .bar,
#exam-box .timeline .bar {}

#exam-box .doneline .exam-progress.bar {}

#exam-box .timeline .time-progress.bar {}

#question-box {
    max-width: 98%;
    margin: 0 auto;
}

#question-box .quest.detail {}

#question-box .quest.detail .image {
    overflow: hidden;
    padding: 5px 0 10px;
    text-align: center;
}

#question-box .quest.detail .image img {
    max-width: 99%;
    margin: 10px auto;
    box-shadow: 0 2px 6px 2px #666;
}

#question-box .quest.detail .content {
    text-align: justify;
    padding: 10px 15px;
    line-height: 160%;
    font-size: .9em;
    color: #333;
    box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;
}

#question-box .show-explain-content .detail {
    padding: 10px 15px;
    line-height: 160%;
    color: #555;
    border: 1px solid #ccc;
    box-shadow: rgb(50 50 93 / 25%) 0px 9px 2px -10px inset, rgb(0 0 0 / 30%) 0px 18px 36px -29px inset;
}

#question-box .show-explain-content .detail p {
    font-size: .68em;
    background: none;
}

#question-box span.quest-hint {
    font-size: .69em
}

#question-box .quest.detail .keys {
    text-align: justify;
    padding: 3px 12px 15px;
    line-height: 120%;
    font-size: .68em;
    color: #111;
    font-family: 'Roboto';
    text-shadow: 0 1px 1px #999;
}

#question-box .quest.detail .key {}

#question-box .quest.detail .key.quest {}

#question-box .quest.detail .key.answer {}

#question-box .quest.detail .hint {
    text-align: justify;
    padding: 6px 12px;
    line-height: 150%;
    font-size: .9em;
    color: #666;
    font-style: italic;
    font-family: 'Arial';
}

#question-box .list.options {
    width: 100%;
    margin: 20px 0 0;
}

#question-box .list.options .option-frame {
    overflow: hidden;
}

#question-box .list.options .option.checkbox {
    float: left;
    cursor: pointer;
    margin: 5px 0 0 0;
}

#question-box .list.options .option.detail {
    float: right;
    width: calc(100% - 60px);
    margin: 0px 0px 10px 0px;
    padding: 6px 9px;
    border: 1px solid #999;
    border-radius: 2px;
    background: #f9f9f9;
    font-family: 'Roboto';
    font-size: .8em;
}

#question-box .list .option.detail {}

#question-box .list .option-frame .check.box {
    float: left;
}

#question-box .list .option-frame.correct .detail,
.option-frame.correct.checked i.aws-box {
    background: #aeffbc!important;
    color: #016c13!important;
    text-shadow: 0 1px 1px #fff!important;
    border: 1px solid #129700!important;
    font-weight: 500;
}

#question-box .list .option-frame.wrong .detail,
.option-frame.wrong.checked i.aws-box {
    background: #ffd1d1!important;
    color: #d10000!important;
    text-shadow: 0 1px 1px #fff!important;
    border: 1px solid #ff8b8b!important;
    font-weight: 500;
}

#question-box .list .option-frame.marked .detail,
.option-frame.marked.checked i.aws-box {
    background: #d1f0ff!important;
    color: #002b56!important;
    text-shadow: 0 1px 1px #fff!important;
    border: 1px solid #10a9ff!important;
    font-weight: 500;
}

#question-box .list .option-frame:hover .detail {
    box-shadow: 0 1px 1px1px #999;
    background: #ffffff;
    color: #000;
    border: 1px dashed #000000;
    box-shadow: 0px 1px 1px 0px #ccc;
    text-shadow: 0 1px 0 #fff;
}

#question-box .list .option-frame.checked .checkbox i,
#question-box .list .option-frame.checked .detail {
    box-shadow: 0 1px 1px1px #999;
    background: #ffedca;
    color: #150c00;
    border: 1px solid #371d00;
    box-shadow: 0px 1px 1px 0px #ccc;
    text-shadow: 0 1px 0 #fff;
}

#question-box .list .option-frame.disabled .detail,
#question-box .list .option-frame.disabled:hover .detail,
.option-frame.disabled.checked i.aws-box,
.option-frame.disabled.checked:hover i.aws-box {
    color: #888;
    border: 1px solid #999;
    background: #dcdcdc;
    text-shadow: 0 1px 0px #fff;
    box-shadow: 0 -1px 0px #aaa;
}

#question-box .list .option-frame.correct:hover .detail {
    background: #1eaa35;
    color: #eefff1;
    text-shadow: 0 1px 1px #001b07;
    border: 1px solid #042400;
    font-weight: 500;
}

#question-box .list .option-frame.wrong:hover .detail {
    background: #aa1e1e;
    color: #ffeeee;
    text-shadow: 0 1px 1px #1b0000;
    border: 1px solid #240000;
    font-weight: 500;
}

#question-box .list .option-frame.marked:hover .detail {
    background: #1e66aa;
    color: #eef7ff;
    text-shadow: 0 1px 1px #000f1b;
    border: 1px solid #00306a;
    font-weight: 500;
}

.full-screen-mode #exam-bottom {
    max-width: 1100px;
    margin: 30px 0;
}

#exam-bottom .quest-line {
    width: 100%;
    display: block;
    text-align: center;
    overflow: hidden;
}

#exam-bottom .inrow {
    display: inline-block;
}

#exam-bottom .btn {
    color: #fff;
    border: 1px solid #002654;
    border-radius: 3px;
    background: #0089ff;
    text-shadow: 0 1px 0 #000;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}

#exam-bottom .btn:hover {
    box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
}

.controller .control {
    color: #666;
    cursor: pointer;
    text-shadow: 0 1px 0 #fff;
}

.controller .control.bar {
    width: 100%;
    display: block;
    text-align: center;
    overflow: hidden;
    background: #e9e9e9;
    border-top: 1px solid #aaa;
    border-left: 1px solid #aaa;
    border-right: 1px solid #aaa;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
}

.show-key-content {
    margin: 15px 0 0;
}

.show-hint-content {
    margin: 15px 0 0;
}

.show-explain-content {}

.controller .control.bar span.control {
    float: right;
    display: inline-block;
    cursor: pointer;
    margin: 3px 5px 3px 15px;
}

.controller .control.bar span.control.left {
    float: left;
    margin: 3px 0 3px 10px!important
}

.controller .control.bar span.show-explain {
    float: left;
    margin: 3px 0 3px 9px;
}

.controller .control.bar span.show-hint {}

.controller .control.bar span.show-explain:hover {
    color: #04a11f;
}

.controller .control.bar span.show-hint:hover {
    color: #0077ff;
}

.controller .control.bar span.show-keys:hover {
    color: #e61818;
}

.controller .control.bar span.mark-review.marked {
    text-shadow: 0 1px 1px #666;
}

.controller .control.bar span.mark-review:hover,
.controller .control.bar span.mark-review.marked {
    color: #9318e6;
}

.controller .control.bar span.mark-review,
.controller .control.bar span.edit-question {
    float: right;
    margin: 3px 9px 3px 0;
}

#exam-bottom .btn:hover,
.controller .control:hover {
    color: #000;
    text-shadow: 0 1px 1px #ccc;
}

.controller .control.bar span.edit-question span {
    margin: 0 0 0 20px;
}

.controller .control.bar span.mark-review:hover span,
.controller .control.bar span.edit-question:hover span {
    color: #666;
    text-shadow: 0 1px 0 #fff;
}

.controller .control.bar span.mark-review span:hover,
.controller .control.bar span.edit-question span:hover {
    color: #000;
    text-shadow: 0 1px 1px #ccc;
}

#exam-bottom .btn.back {
    width: 90px;
    float: left;
}

#exam-bottom .btn.next {
    width: 90px;
    float: right;
}

#exam-bottom .total-quest {
    font-size: .9em;
    margin: 5px 0 0;
    color: #333;
    cursor: text!important;
}

i.aws-box {
    color: #efefef;
    border: 1px solid #505050;
    background: #efefef;
    border-radius: 3px;
    padding: 3px 3px 2px 3px;
    float: left;
    margin: 0 10px 0 0;
    width: 25px;
    text-align: center;
    height: 25px;
    line-height: 120%;
}

.checked i.aws-box {
    color: #111;
    font-weight: 900!important;
    text-shadow: 0px 1px 1px #555;
}

.quiz.checkbox:hover i.aws-box {
    color: #cacaca;
    background: #fff;
}

.checked .quiz.checkbox:hover i.aws-box {
    color: #111;
    text-shadow: 0px 1px 1px #555;
}

.section.box h6 {
    float: left;
    height: 26px;
    margin: 9px 0 0 9px;
}

#select-section {
    float: left;
    margin: 3px 0 0 5px;
    border: 1px solid #cacaca;
}

#exam-bottom .total.quest {}

#exam-bottom .total.quest p {}

#exam-bottom .total.quest span {}

#exam-bottom .total.quest .current {}

#exam-bottom .total.quest .total {}

.quiz-selection {
    margin: 1px 5px 5px 3px;
    overflow: hidden;
    padding: 0 0 6px 0;
    border-bottom: 1px dotted #ababab;
}

.quiz-selection input.input-number {
    width: 55px;
    font-size: .8em;
    color: #666;
}

.quiz-selection select.quiz-nums {}

.quiz-selection select.quiz-nums option {
    color: #666;
    font-size: .9em;
}

.quiz-selection select.quiz-nums option.done {
    color: #0061d0;
    font-weight: normal;
    font-style: normal;
    text-shadow: 0 1px 1px #888;
}

.quiz-selection select.quiz-nums option.correct {
    color: #00af06;
    font-weight: 600;
    text-shadow: 0 1px 1px #888;
}

.quiz-selection select.quiz-nums option.wrong {
    color: #c70000;
    font-style: italic;
    text-shadow: 0 1px 1px #888;
}

.quiz-selection select.quiz-nums option.marked {
    color: #8c02d6!important;
    text-decoration: underline;
    font-style: italic;
    font-weight: 500;
    text-shadow: 0 1px 1px #888;
}

.quiz-selection select.quiz-nums option.current {
    color: #d66802;
    font-weight: bold;
    text-shadow: 0 1px 1px #888;
}

.question-content-key .question-key {
    font-size: .56em;
    font-weight: 500;
    color: #000;
}

.question-content-key .answer-key {
    font-size: .56em;
    color: #000;
    font-style: italic;
}

.dark-mode .question-content-key .question-key {
    color: #fff;
}

.dark-mode .question-content-key .answer-key {
    color: #fff;
}

#final-results {
    display: inline;
}

#final-results .result {
    text-shadow: 0 1px 0 #fff;
}

#final-results .corrects-num,
#final-results .corrects-percentage {
    color: #009b15;
}

#final-results .failures-num,
#final-results .failures-percentage {
    color: #d10000;
}

#final-results.pass #final-conclusion {
    color: #009b15;
    font-size: 1.2em;
}

#final-results.fail #final-conclusion {
    color: #d10000;
    font-size: 1.2em;
}

.quiz-selection .result {
    display: inline;
    margin: 0 0 0 30px;
}

.quest.key-input input.edit-input,
.answer.key-input input.edit-input {
    width: calc(100% - 40px);
    margin: 0 0 0 8px;
    font-size: 0.8rem;
}

.quiz-opi.item.checkbox,
.quiz-opi.item.checkbox i,
.quiz-opi.item.checkbox .check.box,
.quiz-opi.item.detail {
    float: left
}

.quiz-opi.item.detail {
    margin: 0 0 0 15px;
    float: right;
    width: calc(100% - 63px)
}

.quiz-opi.item.detail textarea {
    width: 100%;
    height: 50px;
    margin: 0 0 5px;
}

.quiz-opi.item.detail textarea.quiz-opi.option-note {
    height: 30px;
}

.edit-quiz-options .quiz.option-item {
    overflow: hidden;
}

.edit-input,
textarea.quiz-opi {
    width: 100%;
    padding: 6px 0 6px 8px;
    font-size: .83em;
    color: #686868;
    font-style: italic;
    font-family: Arial, Helvetica, sans-serif!important;
    text-align: justify;
}

.show-keys-content {
    margin: 15px 0 0;
}

textarea.edit-input {
    width: 100%;
    height: 90px;
    margin: 5px 0 0;
    border: 1px solid #cdcdcd;
    box-shadow: 0 1px 2px #999;
}

#hint-txt {
    margin: -10px 0 15px;
}

#printing-exam .printing.btn.top.bar {
    float: right;
    margin: 0;
    padding: 0;
}

#printing-exam .printing.btn.top.bar span {
    margin: 0;
}

#printing-exam .question.line.row.bot.half {
    padding-top: 15px;
    margin-top: 15px;
    border-top: 1px solid #696969;
}

#printing-exam .quiz-id.ordering {
    width: 68px;
    position: absolute;
}

.hbtn {
    padding: 9px 19px;
    color: #fff;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    border: 1px solid #002654;
    border-radius: 3px;
    background: #0089ff;
    margin: 5px 1px 9px;
    text-shadow: 0 1px 1px #000;
    box-shadow: rgb(0 0 0 / 60%) 0px 2px 4px, rgb(0 0 0 / 30%) 0px 6px 9px -5px, rgb(0 0 0 / 20%) 0px -6px 0px inset
}

.hbtn.min {
    padding: 1px 9px;
    height: 30px;
    font-size: .86em;
    border-radius: 2px;
    box-shadow: rgb(0 0 0 / 40%) 0px 1px 2px, rgb(0 0 0 / 30%) 0px 0px 3px -1px, rgb(0 0 0 / 20%) 0px -3px 0px inset
}

.hbtn:hover,
.hbtn:active {
    color: #000!important;
    text-shadow: 0 1px 0 #72abff;
    box-shadow: rgb(0 0 0 / 25%) 0px 0.0625em 0.0625em, rgb(0 0 0 / 25%) 0px 0.125em 0.5em, rgb(255 255 255 / 10%) 0px 0px 0px 1px inset;
}

.hbtn.gray {
    border: 1px solid #333;
    background: #686868;
}

.hbtn.gray:hover,
.hbtn.gray:active {
    text-shadow: 0 1px 0 #cbcbcb;
}

.hbtn.wpbt {
    color: #2271b1;
    border: 1px solid #2271b1;
    background: #f6f7f7;
    text-shadow: 0 1px 0 #fff;
}

.hbtn.wpbt:hover,
.hbtn.wpbt:active {
    text-shadow: 0 1px 0 #fff;
}

.dark-mode .hbtn.wpbt:hover,
.dark-mode .hbtn.wpbt:active {
    background: #505050;
    border: 1px solid #c2dfff;
    text-shadow: 0 1px 0 #000;
}

.hbtns {
    z-index: 9;
    position: absolute;
    top: 23px;
    left: 105px;
}

.switch-key {
    float: left;
}

.select-exam,
.link-buttons {
    width: 100%;
    margin: 10px 0;
    padding: 20px 0;
    overflow: hidden;
}

.cheat-sheet #exam-bottom .btn.back {
    font-size: .9em!important;
}

.cheat-sheet #exam-box {
    margin: 10px 0 60px;
}

.cheat-sheet #exam-box .btn-bar {
    float: right;
}

.mobile #poststuff #titlewrap {
    margin: 0 0 45px 0;
}

.mobile .hbtns {
    top: 32px;
    left: -11px;
}

#cheat-sheet-frame {
    overflow: scroll!important;
    background: #fff;
}

#cheat-sheet-frame #exam-box h1 {
    font-weight: 500;
    font-size: 1.5em;
}

#cheat-sheet-frame h5 {
    font-size: 1.1em;
}

#question-list {}

#question-list .question-frame {}

#question-list .question.item {
    padding: 0 0 10px 0;
    margin: 0 0 30px 0;
    border-bottom: 1px dashed #555;
}

#question-list .question-content {
    font-size: .63em;
    text-align: justify;
    text-shadow: 0 1px 1px #ccc;
    color: #333;
    margin: 0 0 10px 0;
    padding: 0 0 10px 0;
    border-bottom: 1px solid #aaa;
}

.dark-mode #question-list .question-content {
    color: #dfdfdf;
    text-shadow: 0 1px 0 #000;
    border-bottom: 1px solid #666;
}

.dark-mode .fullscreen {
    background: #222!important;
}

#question-list .question.item.print-mode {
    padding: 6px 0 0 0;
    margin: 0 0 0 0;
    border-bottom: 1px dashed #ababab;
}

#question-list .question-id {
    text-align: right;
}

.question-detail .wrap,
.question-detail .wrap h1.wp-heading-inline {
    margin: 0;
}

#question-list .question-options {}

#question-list .question-options ul li {
    font-size: .56em;
    text-align: justify;
    color: #666;
    font-style: italic;
}

#question-list .question-options ul li .option-answer {}

.question-data input.form-control.input.title {
    padding: 1.2rem 0.6rem 0 0.9rem;
    height: 2.9rem;
    font-size: 0.83rem;
    text-transform: uppercase;
}

#question-tag,
.bootstrap-tagsinput,
.bootstrap-tagsinput input {
    width: 100%;
}

body.mce-content-body {
    font-size: .9em;
    font-family: calibri;
}

.answer-options li.checked {
    background: #f3f3f3;
    border: 1px solid #c9c9c9;
    border-radius: 2px;
    padding: 3px 0 2px;
}

.answer-options li.checked .head {
    font-weight: bold;
    color: #000000;
    text-shadow: 0 1px 0 #ffffff;
}

.answer-options li.checked .option-answer {
    font-weight: 500;
    color: #022700;
    text-shadow: 0 1px 0 #ffffff;
}

.hte-btns {
    top: 18px;
    left: 110px;
    z-index: 9999;
    position: absolute;
}

.hte-btns .hbtn {
    font-size: .83em;
    width: 60px;
    height: 30px;
    margin: 10px 5px 0 0;
    padding: 5px 0;
    text-align: center;
}

.mobile .hte-btns {
    top: 28px;
}

.mobile .hbtn {
    height: 36px;
    padding: 5px 0;
    width: 40px;
    text-align: center;
    margin: 10px 2px 0 0;
}

.modal-backdrop {
    z-index: 9!important;
}

#exam-modal-box {
    z-index: 99999!important;
}


/* Results style --------------------------------------------------*/

#fixed-background {
    position: fixed;
    z-index: 9;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #fff;
    opacity: .69;
}

#fixed-background.fail {
    background: #000;
}

#result-board {
    position: fixed;
    z-index: 99999;
    width: 510px;
    height: 380px;
    top: 20%;
    left: 38%;
    background: #efefef;
    border: 1px solid #868686;
    padding: 0;
    margin: 0;
    box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
    border-radius: 3px;
    display: none;
}

#result-board.pass {
    background: #9ad0ff;
    border: 1px solid #1c77ff;
}

#result-board.fail {
    background: #ff9e9e;
    border: 1px solid #ff3737;
}

#result-frame {
    width: auto;
    height: calc(100% - 20px);
    padding: 15px;
    margin: 10px;
    border: 1px solid #aaa;
    border-radius: 2px;
    background: #fefefe;
}

#result-board.pass #result-frame {
    border: 1px solid #0066d2;
}

#result-board.fail #result-frame {
    border: 1px solid #d20000;
    background: #acacac;
}

#result-box {}

#result-header {
    text-align: center;
    text-shadow: 1px 1px 2px #ccc;
    font-weight: 500;
    font-size: 2em;
    padding: 0 0 10px 0;
    border-bottom: 1px solid #333;
}

#result-detail {}

#result-detail .concul {}

#result-detail .concul b {
    width: 100%;
    font-size: 5em;
    text-align: center;
    margin: -20px 0 0 0;
    text-shadow: 1px 2px 3px #333;
}

#result-board.pass #result-detail .concul b {
    font-weight: bold;
    color: #009c27;
}

#result-board.fail #result-detail .concul b {
    font-style: italic;
    color: #e60303;
    font-weight: bold;
    ;
}

#result-detail .results {
    padding: 8px 0 0;
    margin: -10px 0 0;
    border-top: 1px dashed #666;
}

#result-detail .results .score {}

#result-detail .results .right {
    color: #008d13;
}

.pass #result-header {
    color: #009910;
}

.fail #result-header {
    color: #dc0000;
}

.pass #result-detail .results .right {
    color: #008d13;
}

.fail #result-detail .results .right {
    color: #44574b;
    text-shadow: 0 1px 1px #fff;
}

#result-detail .results .wrong {
    color: #ed0000;
}

.pass #result-detail .results .wrong {
    color: #de6767;
}

.fail #result-detail .results .wrong {
    color: #ed0000;
    text-shadow: 0 1px 1px #000;
}

#result-detail .results .done {
    color: #3e3e3e;
    font-size: .8em;
}

#result-detail .results .total {
    text-shadow: 0 1px 1px #c3c3c3;
    font-size: .9em;
    padding: 1px 0 0 0;
}

#result-detail .results .percent {
    font-weight: bold;
}

#result-detail .results .timed {}

#result-detail .results .donetime {
    text-align: center;
}

#result-detail .results .donetime p {
    margin: 0;
    font-size: 1.2em;
    font-weight: 500;
    text-shadow: 1px 1px 2px #acacac;
}

#result-detail .comment {
    height: 80px;
    margin: 5px 0 0;
    padding: 10px 0 0;
    text-align: justify;
    border-top: 1px solid #333;
}

#result-detail .comment p {
    font-style: italic;
    font-size: .83em;
    padding: 0;
    margin: 0;
    text-align: justify;
}

#result-detail .continue {}

#result-detail .continue .learn {
    text-align: center;
}

#result-detail .continue .retry {
    text-align: center;
}

#result-detail .continue .test {
    text-align: center;
}

#result-detail .continue .hbtn {
    margin: 5px auto;
}

.exam-form .main-info {
    margin-bottom: 10px;
}


/* Congratulation --------------------------------------------------*/

#congratulation-frame {
    width: calc(100% - 230px);
    height: 100vh;
    position: fixed;
    background: #030;
    z-index: 99999;
}

#confettiCanvas {
    z-index: 9999;
}

@keyframes confetti-slow {
    0% {
        transform: translate3d(0, 0, 0) rotateX(0) rotateY(0);
    }
    100% {
        transform: translate3d(25px, 105vh, 0) rotateX(360deg) rotateY(180deg);
    }
}

@keyframes confetti-medium {
    0% {
        transform: translate3d(0, 0, 0) rotateX(0) rotateY(0);
    }
    100% {
        transform: translate3d(100px, 105vh, 0) rotateX(100deg) rotateY(360deg);
    }
}

@keyframes confetti-fast {
    0% {
        transform: translate3d(0, 0, 0) rotateX(0) rotateY(0);
    }
    100% {
        transform: translate3d(-50px, 105vh, 0) rotateX(10deg) rotateY(250deg);
    }
}

.confetti-container {
    perspective: 700px;
    position: absolute;
    overflow: hidden;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.confetti {
    position: absolute;
    z-index: 1;
    top: -10px;
    border-radius: 0%;
    &--animation-slow {
        animation: confetti-slow 2.25s linear 1 forwards;
    }
    &--animation-medium {
        animation: confetti-medium 1.75s linear 1 forwards;
    }
    &--animation-fast {
        animation: confetti-fast 1.25s linear 1 forwards;
    }
}

.checkmark-circle .checkmark.draw:after {
    -webkit-animation-delay: 100ms;
    -moz-animation-delay: 100ms;
    animation-delay: 100ms;
    -webkit-animation-duration: 3s;
    -moz-animation-duration: 3s;
    animation-duration: 3s;
    -webkit-animation-timing-function: ease;
    -moz-animation-timing-function: ease;
    animation-timing-function: ease;
    -webkit-animation-name: checkmark;
    -moz-animation-name: checkmark;
    animation-name: checkmark;
    -webkit-transform: scaleX(-1) rotate(135deg);
    -moz-transform: scaleX(-1) rotate(135deg);
    -ms-transform: scaleX(-1) rotate(135deg);
    -o-transform: scaleX(-1) rotate(135deg);
    transform: scaleX(-1) rotate(135deg);
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

.checkmark-circle .checkmark:after {
    opacity: 1;
    height: 75px;
    width: 37.5px;
    -webkit-transform-origin: left top;
    -moz-transform-origin: left top;
    -ms-transform-origin: left top;
    -o-transform-origin: left top;
    transform-origin: left top;
    border-right: 15px solid white;
    border-top: 15px solid white;
    border-radius: 2.5px !important;
    content: '';
    left: 25px;
    top: 75px;
    position: absolute;
}

.hte.image-frame {
    max-width: 100%;
    text-align: center;
    margin: 40px auto 10px;
    padding: 5px;
    overflow: hidden;
}

.hte.image-frame img {
    max-width: 69%;
    margin: 0 auto 10px;
    padding: 6px;
    box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;
}

tbody#the-list {}

table th#title,
tbody#the-list tr td.column-title {
    width: 20%;
}

table th#certificate,
tbody#the-list tr td.column-certificate {
    width: 20%;
}

table th#section,
tbody#the-list tr td.column-section {
    width: 20%;
}

table th#content,
tbody#the-list tr td.column-content {
    width: 50%;
}

table th#description,
tbody#the-list tr td.column-description {
    width: 50%;
}

table th#contribution,
tbody#the-list tr td.column-contribution {
    width: 10%;
    text-align: center;
}

tbody#the-list tr td.column-contribution::after {
    content: '%';
    display: inline-block;
}

table th#actived,
tbody#the-list tr td.column-actived {
    width: 5%;
}

table th#season,
tbody#the-list tr td.column-season {
    width: 10%;
}

table th#image,
tbody#the-list tr td.column-image {
    width: 20%;
}

table th#group,
tbody#the-list tr td.column-group {
    width: 10%;
}

table th#year,
tbody#the-list tr td.column-year {
    width: 9%;
}

table th#type,
tbody#the-list tr td.column-type {
    width: 10%;
}

#col-distribution-content .section-line {
    padding: 6px 0 0 0;
    border-top: 1px dashed #aaa;
}

#col-distribution-content .section-name {}

#col-distribution-content .section-name input {
    width: 100%;
    border: none;
}

#col-distribution-content .section-contribution {}

#col-distribution-content .section-contribution input {
    border: none;
    width: 100%;
    max-width: 100%;
    text-align: right;
}

#col-distribution-content input:hover,
#col-distribution-content input:active,
#col-distribution-content input:focus {
    border: none;
    border-color: inherit;
    -webkit-box-shadow: none;
    box-shadow: none;
    outline: none;
}

#col-distribution-content .section-percent {
    padding: 6px 0 0 3px;
}

#training-paging {
    min-width: 56px;
}

.quiz.option-item {
    overflow: hidden;
}

.quiz.option-item .checkbox {
    margin: 5px 0 0;
}

.quiz-opi.item.checkbox input {
    float: left;
    width: 25px;
    height: 25px;
    outline: none;
    background: #fafafa;
    margin: 0 9px 0 0;
}

.quiz-opi.item.checkbox input:focus,
.quiz-opi.item.checkbox input:active {
    outline-style: none!important;
    box-shadow: none!important;
    border-color: transparent!important;
}

.quiz-opi.item.checkbox input:before {
    width: 25px;
    height: 25px;
    outline: none;
    background: #ffffff;
    margin: -.05rem 0 0 -.05rem;
    border-radius: 4px;
}

#loading-multi-devices {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.controller-pause {
    margin: 3px 25px 5px 0!important;
}

.loading-message {
    position: fixed;
    width: 100%;
    text-shadow: 0 1px 1px #000;
    z-index: 9999;
    text-align: center;
    cursor: pointer;
    top: 48vh;
    left: 0;
}

.loading-message:hover span {
    color: #10ff2e!important;
}

#loading-box.dark .loading-message {
    text-shadow: 0 1px 0 #fff;
}

#loading-box.dark .loading-message:hover span {
    color: #111!important;
    text-shadow: 0 1px 1px #999;
}


/* The loader container */

#loading-multi-devices {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 8888;
}

#loading-multi-devices {
    position: fixed;
    top: calc(36% - 100px);
    left: calc(55% - 100px);
    width: 200px;
    height: 200px;
    margin-top: -100px;
    margin-left: -100px;
    z-index: 9999;
}


/* The dot */

#loading-multi-devices>.dot {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 10;
    width: 160px;
    height: 100px;
    margin-top: -50px;
    margin-left: -80px;
    border-radius: 5px;
    background-color: #073353;
    transform-type: preserve-3d;
    animation: dot1 3s cubic-bezier(.55, .3, .24, .99) infinite;
}

#loading-multi-devices>.dot:nth-child(2) {
    z-index: 11;
    width: 150px;
    height: 90px;
    margin-top: -45px;
    margin-left: -75px;
    border-radius: 3px;
    background-color: #b7e0ff;
    animation-name: dot2;
}

#loading-multi-devices>.dot:nth-child(3) {
    z-index: 12;
    width: 40px;
    height: 20px;
    margin-top: 50px;
    margin-left: -20px;
    border-radius: 0 0 5px 5px;
    background-color: #6bb2cd;
    animation-name: dot3;
}

@keyframes dot1 {
    3%,
    97% {
        width: 160px;
        height: 100px;
        margin-top: -50px;
        margin-left: -80px;
    }
    30%,
    36% {
        width: 80px;
        height: 120px;
        margin-top: -60px;
        margin-left: -40px;
    }
    63%,
    69% {
        width: 40px;
        height: 80px;
        margin-top: -40px;
        margin-left: -20px;
    }
}

@keyframes dot2 {
    3%,
    97% {
        width: 150px;
        height: 90px;
        margin-top: -45px;
        margin-left: -75px;
    }
    30%,
    36% {
        width: 70px;
        height: 96px;
        margin-top: -48px;
        margin-left: -35px;
    }
    63%,
    69% {
        width: 32px;
        height: 60px;
        margin-top: -30px;
        margin-left: -16px;
    }
}

@keyframes dot3 {
    3%,
    97% {
        width: 40px;
        height: 20px;
        margin-top: 50px;
        margin-left: -20px;
    }
    30%,
    36% {
        width: 8px;
        height: 8px;
        margin-top: 49px;
        margin-left: -5px;
        border-radius: 8px;
    }
    63%,
    69% {
        width: 16px;
        height: 4px;
        margin-top: -37px;
        margin-left: -8px;
        border-radius: 10px;
    }
}

#loading-frame {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 999;
    top: 32px;
    left: 36px;
    display: block;
}

#loading-detail {
    position: relative;
    z-index: 999;
    top: 36%;
    text-align: center;
    color: #111;
    text-shadow: 0 1px 0 #fff;
}

#loading-spinner {
    margin: 0 auto 30px;
}

#loading-background {
    background: #eee;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    opacity: .83;
    left: 0;
    z-index: 99;
    text-align: center;
}

.dark-mode #loading-detail,
.dark-mode h1.wp-heading-inline {
    color: #fff;
    text-shadow: 0 1px 0 #000;
}

.dark-mode #loading-background {
    background: #000;
}

span.option-answer.option-mark {
    float: right;
}

#hte-toast {
    position: fixed;
    top: 50px;
    z-index: 99999;
    right: calc(50% - 250px);
}

#primary-title-box,
#secondary-title-box {
    position: relative;
    margin: 0 0 0.6rem 0;
}

#question-season,
.question-code-input {
    text-transform: uppercase;
}

#hte-toast .toast-title {
    font-size: 500;
}

input.question-title-input {
    width: 100%;
    padding: 0.8rem 0.9rem 0.6rem!important;
}

input.question-code-input {
    position: absolute;
    right: 6.3rem;
    top: 0.3rem;
    border-top: none!important;
    border-bottom: none!important;
    border-right: none!important;
    padding: 0.5rem 1rem!important;
    border-left: 1px solid #dbdbdb!important;
}

input.question-code-input {
    opacity: 0.68;
}

#wpbody.hte-exam li .input-group input,
#wpbody.hte-exam li .input-group select {
    width: 160px;
    height: 35px;
    margin: 0 0 0 -1px;
}

#wpbody.hte-exam li .input-group input {
    width: 160px;
}

#wpbody.hte-exam li .col-6 .input-group input {
    width: 45px;
    height: 30px;
}

input#question-code {
    width: 160px!important;
}

.save-add-btn, .cancel-edit-btn {
    position: absolute;
    width: 63px;
    padding: 5px 0 0;
    text-align: center;
    margin: 0 0 0 136px;
    font-size: 0.86em;
    cursor: pointer;
    border: 1px solid #363636;
    height: 36px;
    z-index: 99;
}
.cancel-edit-btn {
    width: 69px;
    margin: 0 0 0 210px;
}

.question-form-loading {
    position: absolute;
    width: 100%;
    top: 0;
    height: 462px;
    z-index: 9999;
    display: none;
}


#mainframe-loading {
    height: 1020px;
}

#secondary-loading {
    top: 423px;
    height: 435px;
    left: 0;
}

.question-form-loading-background {
    width: 100%;
    height: 100%;
    position: absolute;
    background: #fff;
    top: 0;
    opacity: .69;
}

.question-form-loader {
    position: relative;
    top: 50%;
}

.saving-loader, .loading-loader {
    display: block;
    position: relative;
    width: 120px;
    text-align: center;
    height: 20px;
    top: 45%;
    top: -webkit-calc(50% - 10px);
    top: calc(50% - 10px);
    left: 25%;
    left: -webkit-calc(50% - 75px);
    left: calc(50% - 75px);
}

.saving-loader:before, .loading-loader:before {
    content: "";
    position: absolute;
    background-color: #ffb200;
    top: -8px;
    left: 0px;
    height: 36px;
    width: 0px;
    z-index: 0;
    border-top: 1px solid #b10000;
    opacity: 1;
    border-bottom: 1px solid #ad0000;
    -webkit-transform-origin: 100% 0%;
    transform-origin: 100% 0%;
    -webkit-animation: loader3 10s ease-in-out infinite;
    animation: loader3 10s ease-in-out infinite;
}

.saving-loader:after, .loading-loader:after {
    content: "Saving...";
    color: #f60707;
    font-weight: 500;
    font-size: 16px;
    position: absolute;
    width: 100%;
    height: 20px;
    text-shadow: 0 1px 1px #acacac;
    line-height: 20px;
    left: 0;
    top: 0;
    z-index: 1;
    padding: 0 0 0 20px;
}

.loading-loader:after {
    content: "Loading...";
}

.saving-loader i, .loading-loader i {
    top: 3px;
    z-index: 99;
    position: absolute;
    color: #f60707;
    left: 15px;
    text-shadow: 0 1px 1px #999;
}

.saving-loader span, .loading-loader span {
    z-index: 99;
    position: absolute;
    left: 15px;
    top: 1px;
    color: #f60707;
}

#mainframe-loader .saving-loader {
    width: 100%;
    left: 0;
    top: 20%;
}

#mainframe-loader .saving-loader::before, #mainframe-loader .loading-loader::before {
    background-color: #4fa9ff;
    border-top: 2px solid #0072ff;
    border-bottom: 2px solid #0072ff;
}

#mainframe-loader .saving-loader::after, #mainframe-loader .loading-loader::after {
    color: #181818;
}

#mainframe-loader .saving-loader span, #mainframe-loader .loading-loader span {
    left: calc(50% - 50px);
    color: #181818;
}

@-webkit-keyframes loader3 {
    0% {
        width: 0px;
    }
    70% {
        width: 100%;
        opacity: 1;
    }
    90% {
        opacity: 0;
        width: 100%;
    }
    100% {
        opacity: 0;
        width: 0px;
    }
}

@keyframes loader3 {
    0% {
        width: 0px;
    }
    70% {
        width: 100%;
        opacity: 1;
    }
    90% {
        opacity: 0;
        width: 100%;
    }
    100% {
        opacity: 0;
        width: 0px;
    }
}

#primary-form {
    padding: 0 0 12px 0;
    border-bottom: 1px dashed #cacaca;
    margin: 0 0 18px 0;
}

#primary-frame {
    padding:  0;
}

#primary-frame.editing {
    background: #a7f0ff;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
}

#secondary-form:hover {
    background: #dbfbff;
}


/** Styles for upload file input START ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

#mainframe-question-uploader {
    position: absolute;
    right: -10px;
    width: 102px;
    top: -2px;
    z-index: 9999;
}

#primary-question-uploader,
#secondary-question-uploader {
    z-index: 999;
    position: absolute;
    cursor: pointer;
    margin: -2px 3px 0 0;
    right: 0;
    padding: 0;
    width: 100px;
}

.form-content-uploader {
    position: relative;
    max-width: 90px;
    margin: 0;
}

.question.form-content-uploader {
    margin: 3px 0 0;
    right: -10px;
}

.image-uploading {
    position: absolute;
    right: 0;
    z-index: 1;
    top: 1px;
}

.image-uploading input {
    display: none;
}

.image-uploading label {
    display: inline-block;
    width: 35px;
    height: 35px;
    margin-bottom: 0;
    background: #e9faff;
    border: 1px solid transparent;
    box-shadow: 0px 2px 4px 0px rgb(0 0 0 / 12%);
    cursor: pointer;
    font-weight: normal;
    transition: all .2s ease-in-out;
}

.image-uploading label:hover {
    background: #f1f1f1;
    border-color: #d6d6d6;
}

.image-uploading label:after {
    content: "\f03e";
    font-family: 'FontAwesome';
    color: #757575;
    text-shadow: 0 1px 0 #fff;
    font-weight: 300;
    position: absolute;
    top: 10px;
    left: 0;
    right: 0;
    text-align: center;
    margin: auto;
}

.image-uploading label.attached:after {
    content: "\e1e0";
}

.question.image-uploading label {
    width: 44px;
    height: 44px;
}

.question.upload-image-preview {
    width: 45px;
    height: 45px;
}

.upload-image-preview {
    width: 37px;
    height: 37px;
    z-index: 9;
    position: relative;
    background: #fff;
    border: aliceblue;
    box-shadow: 0px 2px 4px 0px rgb(0 0 0 / 10%);
}

.file-upload-preview {
    width: 99%;
    height: 99%;
    background-size: cover;
    background-repeat: no-repeat;
    margin: 3px 3px 0;
    background-position: center;
}

.option.form-content-uploader {
    position: absolute;
    width: 98px;
    max-width: 98px;
    right: 0;
    margin: 0px 0px 0;
}

.option.image-uploading label {
    width: 48px;
    height: 48px;
    border-radius: 0 5px 5px 0;
}

.option.image-uploading label:after {
    top: 12px;
}

.option.upload-image-preview {
    top: 1px;
    width: 48px;
    height: 45px;
}

.question.upload-image-preview.actived:hover div {
    position: fixed;
    border: 5px solid #fff;
    top: 20%;
    left: 20%;
    width: 60%;
    height: 60%;
    z-index: 999;
    border-radius: 3px;
    background-color: #fff;
    /* box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px; */
    /* box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px; */
    box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
}

.option.upload-image-preview.actived:hover::before {
    content: "\f55a";
    font-family: 'FontAwesome';
    color: #e10c0c;
    width: 99%;
    cursor: pointer;
    font-size: 1.5rem;
    line-height: 2.8rem;
}

.question.upload-image-preview.actived:hover::before {
    content: "\f2ed";
    font-family: 'FontAwesome';
    color: #e10c0c;
    width: 99%;
    text-align: center;
    cursor: pointer;
    font-size: 1rem;
    line-height: 2.5rem;
    display: block;
}

.option.upload-image-preview.actived:hover div {
    position: absolute;
    border: 5px solid #fff;
    top: -150px;
    left: -568px;
    width: 560px;
    height: 380px;
    border-radius: 3px;
    background-color: #fff;
    /* box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px; */
    /* box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px; */
    box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
}

#titlewrap input {
    height: 3rem!important;
    width: 100%;
    margin: 0 0 3px 0;
}


/** Styles for upload file input END =======================================================================*/

.option-answer span.option-mark {
    display: block;
    margin: 0;
}

.input-data-box textarea.option-detail-content {
    font-size: .69rem;
    height: 50px;
    padding: 1.2rem 0 0 0.8rem;
    line-height: 1.5rem;
    margin: 0 0 0.5rem 0;
}

#hte_exam_meta_data .input-data-box textarea.option-detail-content {
    font-size: .68rem;
    height: 58px;
    padding: 1rem 0 0 0.9rem;
    line-height: 1.2rem;
    margin: 0 0 0.9rem 0;
    border-radius: 6px 0px 0px 6px;
}
.form-floating>label {
    color: #868686;
    font-size:  0.86rem;
}

#hte_exam_meta_data .form-floating>label {
    padding: 0.6rem 0.8rem!important;
}

.option-answer span.option-symbol {
    margin: 10px 0 0;
    display: block;
    float: left;
    width: 20px;
}

#hte_exam_meta_data .option.form-content-uploader {
    position: absolute;
    width: 114px;
    max-width: 114px;
    right: 13px;
    margin: 0;
}

#hte_exam_meta_data .option.image-uploading label {
    width: 56px;
    height: 56px;
    border-radius: 0;
}

#hte_exam_meta_data .option.upload-image-preview {
    top: -2px;
    width: 56px;
    height: 56px;
}

input.input.box.correct {
    width: 20px;
    height: 20px;
    margin: 10px 0 0;
    border-radius: 4px;
    border: 1px solid #a4bcd4;
    background: #f9fcff;
}

input.input.box.correct:checked:before {
    width: 20px;
    height: 20px;
    margin: -0.05em 0 0 -0.05em;
    border-radius: 3px;
}

textarea.textbox.content {
    width: 100%;
    font-size: .74em;
    height: 40px;
    padding: 3px 8px;
    line-height: 150%;
    text-align: justify;
    letter-spacing: .03em;
}

#button-controllers-bar {
    position: absolute;
    width: 230px;
    text-align: center;
    display: block;
    top: -15px;
    padding: 0;
    height: 45px;
    right: 168px;
    margin: -50px 0 0px;
}

#button-controllers-bar #edit-slug-box {
    margin: 0;
    padding: 0;
    width: 99%;
    text-align: center;
}

#titlediv #edit-slug-box {
    margin: 23px 0 0 8px!important;
}

.loading.multi-spinner {}

.cm-spinner {
    height: 90px;
    width: 90px;
    border: 1px solid transparent;
    border-radius: 50%;
    border-top: 2px solid #f15e41;
    -webkit-animation: spin 3s linear infinite;
    animation: spin 3s linear infinite;
    position: relative;
    margin: 0 auto;
}

.cm-spinner::before,
.cm-spinner::after {
    content: "";
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 3px;
    right: 3px;
    border-radius: 50%;
    border: 2px solid transparent;
}

.cm-spinner::before {
    border-top-color: #bad375;
    -webkit-animation: 2s spin linear infinite;
    animation: 2s spin linear infinite;
}

.cm-spinner::after {
    border-top-color: #26a9e0;
    -webkit-animation: spin 1s linear infinite;
    animation: spin 1s linear infinite;
}

@-webkit-keyframes spin {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes spin {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-webkit-keyframes checkmark {
    0% {
        height: 0;
        width: 0;
        opacity: 1;
    }
    20% {
        height: 0;
        width: 37.5px;
        opacity: 1;
    }
    40% {
        height: 75px;
        width: 37.5px;
        opacity: 1;
    }
    100% {
        height: 75px;
        width: 37.5px;
        opacity: 1;
    }
}

@-moz-keyframes checkmark {
    0% {
        height: 0;
        width: 0;
        opacity: 1;
    }
    20% {
        height: 0;
        width: 37.5px;
        opacity: 1;
    }
    40% {
        height: 75px;
        width: 37.5px;
        opacity: 1;
    }
    100% {
        height: 75px;
        width: 37.5px;
        opacity: 1;
    }
}

@keyframes checkmark {
    0% {
        height: 0;
        width: 0;
        opacity: 1;
    }
    20% {
        height: 0;
        width: 37.5px;
        opacity: 1;
    }
    40% {
        height: 75px;
        width: 37.5px;
        opacity: 1;
    }
    100% {
        height: 75px;
        width: 37.5px;
        opacity: 1;
    }
}

#snowfall-wrapper .flake {
    z-index: 99999;
}

#snowfall-wrapper .flake i,
#snowfall-wrapper .flake i::before {
    color: #ffffff;
}


/* Printing style --------------------------------------------------*/

#printing-exam #exam-box {
    margin: 0px 0 9px;
    padding: 0 0 9px 0;
    box-shadow: none!important;
    border-bottom: 1px solid #686868;
}

#printing-exam #exam-box h1 {
    font-size: .68em;
    margin: 10px 0 0px 0;
}

#printing-exam #exam-box .switch-key {
    margin: 0px 10px;
    padding: 2px 10px;
    font-size: .68em;
}

#printing-exam #question-list h6 {
    font-size: .39em!important;
    font-weight: bold;
    padding: 1px 0 0px;
    margin: 0 0 0px;
}

#printing-exam #question-list .question.item.print-mode {
    width: 48%;
    padding: 0px 0 0 0;
    border-bottom: 0.5px dashed #363636;
}

#printing-exam #question-list .top .question.item.print-mode {
    border-bottom: 0.5px solid #9a9a9a;
}

#printing-exam #question-list .question.item.print-mode .question-key {
    padding: 0 0 0 33px;
}

#printing-exam #question-list .question-content-key.keys-detail {
    padding: 0 0 0px;
    margin: 0 0 0px;
}

#printing-exam #question-list .question-content {
    font-size: .63em;
}

#printing-exam #question-list .question-options ul li {
    text-shadow: none!important;
    font-size: .56em;
}

#printing-exam .question-content-key .question-key,
#printing-exam .question-content-key .answer-key {
    font-size: .42em;
}

#printing-exam #question-list .question-options ul li.checked {
    background-color: #efefef;
    print-color-adjust: exact;
}

#printing-exam #question-list .question.item.print-mode.head {
    margin: 0 3.8% 0 0;
}

body {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
}


/* Dark style --------------------------------------------------*/

.dark-mode #question-list .question-options ul li {
    color: #bbb;
    text-shadow: 0 1px 0 #000;
}

.dark-mode #testing-exam #testing-exam-frame {
    background: #222;
}

.dark-mode #testing-exam .container {
    background: #222;
}

.dark-mode #testing-exam #exam-box {
    background: #555;
}

.dark-mode #testing-exam #exam-box h1 {
    color: #fff!important;
    text-shadow: 0 1px 0 #000;
}

.dark-mode #testing-exam #question-box .quiz.title h2 {
    color: #efefef;
    text-shadow: 0 1px 0 #000;
    border-bottom: 1px solid #ccc;
}

.dark-mode #testing-exam #exam-bottom .btn,
.dark-mode .hbtn {
    color: #000;
    text-shadow: 0 1px 0 #7ac6ff;
}

.dark-mode .hbtn:hover {
    color: #fff!important;
}

.dark-mode #testing-exam #question-box .quest.detail .content {
    color: #ccc;
    background: #111;
}

.dark-mode #testing-exam #question-box .quest.detail .keys {
    color: #eee;
    text-shadow: 0 1px 0 #000;
}

.dark-mode #testing-exam #exam-bottom .total-quest {
    color: #ccc;
}

.dark-mode #testing-exam .explaination {
    color: #aaa;
    text-shadow: 0 1px 0 #000;
}

.dark-mode #testing-exam #exam-bottom .btn:hover {
    color: #fff;
    text-shadow: 0px 1px 0 #000;
}

.dark-mode #testing-exam #question-box .list .option-frame:hover .detail {
    box-shadow: 0px 1px 1px 0px #000;
}

.dark-mode #testing-exam #question-box .list .option-frame .check.box {
    color: #fff;
}


/* Setup ------------------------------------------------------------------------------------------- */

.hidden {
    display: none
}

.disabling {
    opacity: 0.18;
    cursor: none;
    /* cursor: default; */
}

.is-layout-flex.wp-block-buttons {
    display: none!important;
}

::-webkit-scrollbar {
    width: 20px;
}

::-webkit-scrollbar-track {
    background-color: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: #d6dee1;
    border-radius: 20px;
    border: 6px solid transparent;
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #a8bbbf;
}

.alert .head {
    color: #fff;
    text-shadow: 0 1px 0 #000;
}

.alert .body {
    font-size: 0.9em;
}

.alert .foot {
    font-size: 0.86em;
    text-shadow: 0 1px 0 #ffffff;
}

.alert.alert-danger .head {
    background: #d61a1a;
}

.alert.alert-danger .foot {
    background: #ffeeee;
    color: #9a3e3e;
}

.alert.alert-danger .hbtn {
    border: 1px solid #540000;
    background: #ff0000;
}

.alert.alert-info .head {
    background: #0a9da2;
}

.alert.alert-info .foot {
    background: #eefdff;
    color: #336e7a;
}

.alert.alert-info .hbtn {
    border: 1px solid #004e54;
    background: #09acb2;
}

.alert.alert-success .head {
    background: #0eaa3f;
}

.alert.alert-success .foot {
    background: #eefff0;
    color: #337a3f;
}

.alert.alert-success .hbtn {
    border: 1px solid #005406;
    background: #09b236;
}

.alert.alert-primary .head {
    background: #0f95fc;
}

.alert.alert-primary .foot {
    background: #eef6ff;
    color: #335a7a;
}

.alert.alert-primary .hbtn {
    border: 1px solid #003154;
    background: #095bb2;
}

.alert.alert-secondary .head {
    background: #737a7f;
}

.alert.alert-secondary .foot {
    background: #eef6ff;
    color: #63717c;
}

.alert.alert-secondary .hbtn {
    border: 1px solid #252525;
    background: #565656;
}

.alert.alert-info .head {
    background: #0fa7bb;
}

.alert.alert-info .foot {
    background: #eefcff;
    color: #33767a;
}

.alert.alert-info .hbtn {
    border: 1px solid #004d54;
    background: #0794a6;
}

.alert.alert-warning .head {
    background: #e69808;
}

.alert.alert-warning .foot {
    background: #fff8ee;
    color: #7a5433;
}

.alert.alert-warning .hbtn {
    border: 1px solid #543200;
    background: #b25e09;
}


/* Backend stylesheets: ------------------------------------------------------------------------- */

#page hr {}

#page #header,
#page #header>hr {
    display: none!important;
}

#hte-page {}

#hte-header h1 a {
    text-decoration: none;
    color: #333;
    text-shadow: 0 1px 1px #999;
    font-family: calibri;
    font-weight: bold;
    text-transform: uppercase;
}

.json-editor-box pre {
    height: 200px;
    margin: 12px 0 0 0;
    padding: 10px;
    overflow: scroll;
    font-size: .9em;
    letter-spacing: 1px;
    background: #fff;
    color: #333;
    font-family: 'Courier Prime', monospace;
}

#meta-json-display .json-string {
    color: #1bb80f;
}

#meta-json-display .json-property {
    color: #207bc3;
}

#meta-json-display .json-literal-number {
    color: #ff0000;
}

.dark-mode #meta-json-display {
    color: #fff;
    background: #333;
    text-shadow: #000;
}

.dark-mode #meta-json-display .json-string {
    color: #1bf20a;
}

.dark-mode #meta-json-display .json-property {
    color: #13b0ff;
}

.dark-mode #meta-json-display .json-literal-number {
    color: #ff5454;
}

.multi-image-uploader {
    &__box {
        padding: 40px;
    }
    &__inputfile {
        width: .1px;
        height: .1px;
        opacity: 0;
        overflow: hidden;
        position: absolute;
        z-index: -1;
    }
    &__btn {
        display: inline-block;
        font-weight: 600;
        color: #fff;
        text-align: center;
        min-width: 116px;
        padding: 5px;
        transition: all .3s ease;
        cursor: pointer;
        border: 2px solid;
        background-color: #4045ba;
        border-color: #4045ba;
        border-radius: 10px;
        line-height: 26px;
        font-size: 14px;
        &:hover {
            background-color: unset;
            color: #4045ba;
            transition: all .3s ease;
        }
        &-box {
            margin-bottom: 10px;
        }
    }
    &__img {
        &-wrap {
            display: flex;
            flex-wrap: wrap;
            margin: 0 -10px;
        }
        &-box {
            width: 200px;
            padding: 0 10px;
            margin-bottom: 12px;
        }
        &-close {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background-color: rgba(0, 0, 0, 0.5);
            position: absolute;
            top: 10px;
            right: 10px;
            text-align: center;
            line-height: 24px;
            z-index: 1;
            cursor: pointer;
            &:after {
                content: '\2716';
                font-size: 14px;
                color: white;
            }
        }
    }
}

.upload_place {
    width: 99.9%;
    margin: 3px auto;
    height: 55px;
    border: 1px dashed #999;
    background: #eff8fd;
    border-radius: 3px;
    padding: 10px;
    cursor: pointer;
    text-shadow: 0 1px 0px #fff;
}

.input_multifile_uploader {
    display: none;
}

.upload_image_wrap {
    width: 99%;
    overflow: hidden;
    margin: 10px auto;
    text-align: center;
}

.upload_image_close {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    top: 10px;
    right: 10px;
    text-align: center;
    line-height: 24px;
    z-index: 1;
    cursor: pointer;
}

.upload_image_close:after {
    content: "✖";
    font-size: 14px;
    color: white;
}

.upload_image_box {
    width: 23%;
    float: left;
    margin: 1%;
}

.img-bg {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;
    padding-bottom: 100%;
}

.hte-inp.label {
    padding: 10px 0 0;
    border-top: 1px dashed #aaa;
    margin: 25px 0 0;
}

.hte-exam.input-label {
    margin: 5px 0;
    padding: 0 0 0 2px;
    font-weight: 500;
}

.review-image {
    width: 99%;
    margin: 10px auto;
    padding: 0 0 10px 0;
    text-align: center;
}

.review-image img {
    max-width: 99%;
    margin: 5px auto 3px;
}

.question-images {
    width: 100%;
    overflow: hidden;
    margin: 30px auto 15px;
    padding: 15px 0;
    text-align: center;
    border-bottom: 1px solid #cdcdcd;
}

.question-images .quest.box {
    position: relative;
    margin: 5px auto 10px;
    padding: 6px 3px;
    max-width: calc(100% - 22px);
}

.question-images .quest.box img {
    padding: 6px;
    box-shadow: rgb(6 24 44 / 40%) 0px 0px 0px 2px, rgb(6 24 44 / 65%) 0px 4px 6px -1px, rgb(255 255 255 / 8%) 0px 1px 0px inset;
}

i.ico {
    margin: 3px 0;
}

ul.list-group li {
    padding: 10px;
    margin-bottom: 0;
}


/** Quizs listing Style --------------------------------------------------------------------------------------------------*/
#hte-book-open a, #hte-book-open a:hover, #hte-book-open a:actived {
    text-decoration: none;
}
#filter-by {
    position: absolute;
    right: 89px;
}
#quiz-list-frame {
    position: relative;
}
#quiz-list-loading {
    height: 622px;
    display: block;
    opacity: .86;
    top: 35px;
    left: 0;
    background: #fff;
    display: none;
}
#quiz-list-search-box {
    width:  100%;
    padding: 0;
    margin: 0;
    position: relative;
}
#quiz-list-search {
    width:  100%;
    margin: 0 0 0px 0;
}
#quiz-list-count {
    position: absolute;
    width: 90px;
    top: 0;
    right: 0;
}
#quiz-list-content-line {

}
#quiz-list li:hover {
    cursor: pointer;
    background: #fff5ca;
    color:  #000;
    text-shadow: 0 -1px 0 #fff;
    box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 1px, rgba(6, 24, 44, 0.65) 0px 2px 3px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;
}
#quiz-list li.is_selected {
    color: #053851;
    background: #a7f0ff;
    text-shadow: 0 1px 1px #999;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 1px 2px 0px inset, rgba(0, 0, 0, 0.3) 0px 1px 3px 1px inset;
    font-weight: 500;
}
ul.quizs-listing, ul.quizs-listing li {
    width: 100%;
    float: left;
    overflow: hidden;
    list-style: none;
    padding: 0;
    margin: 0;
}
ul#quiz-title li {
    color: #fff;
    font-weight: 600;
    width: 100%;
    text-shadow: 0 1px 1px #000;
    border-top: 1px solid #363636;
}
ul#quiz-list, ul#quiz-title {
    padding: 0;
    margin: 0;
    overflow-y: scroll;
    /*box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 1px, rgba(6, 24, 44, 0.65) 0px 2px 3px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;*/
    box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px, rgba(0, 0, 0, 0.3) 0px 5px 7px -2px, rgba(0, 0, 0, 0.2) 0px -2px 0px inset;
}
ul#quiz-list {
    height: 554px;
    background: #fff;
}
ul.quizs-listing li:nth-child(odd) {
    background:  #fff;
}
ul.quizs-listing li:nth-child(even) {
    background:  #eaeaea;
}
ul#quiz-title, ul#quiz-title li {
    background: #363636;
}
ul.quizs-listing li .quiz-item-detail {
    float: left;
    padding: 4px 3px 3px 5px;
    border-bottom: 1px solid #686868;
    border-right: 1px solid #363636;
    font-size: 0.86em;
    text-shadow: 0 -1px 0 #fff;
    margin: 0 -1px 0 0;
}
ul.quizs-listing li {
    border-right: 1px solid #363636;
}
ul.quizs-listing li .quiz-item-detail.id {
    width: 6%;
    text-align: right;
    border-left: 1px solid #363636;
}
ul.quizs-listing li .quiz-item-detail.title {
    width: 71%;
}
ul.quizs-listing li .quiz-item-detail.answer {
    width: 12%;
}
ul.quizs-listing li .quiz-item-detail.key {
    width: 6%;
    text-align: center;
}
ul.quizs-listing li .quiz-item-detail.del {
    width: 5%;
    text-align: center;
    border-right: none;
}
ul.quizs-listing li .quiz-item-detail.id {
    cursor: pointer;
}
ul.quizs-listing li .quiz-item-detail.del {
    cursor: drag;   
}
ul.quizs-listing li .quiz-item-detail.title, ul.quizs-listing li .quiz-item-detail.answer {
    cursor: auto;
}

.font-size,
.font-size a,
.font-size ul li,
.font-size label,
.font-size input,
.font-size textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-size: 1em;
}

.font-size.big,
.font-size.big a,
.font-size.big ul li,
.font-size.big label,
.font-size.big input,
.font-size.big textarea,
.font-size.big select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-size: 1.2em;
}

.font-size.huge,
.font-size.huge a,
.font-size.huge ul li,
.font-size.huge label,
.font-size.huge input,
.font-size.huge textarea,
.font-size.huge select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-size: 1.5em;
}

.font-size.max,
.font-size.max a,
.font-size.max ul li,
.font-size.max label,
.font-size.max input,
.font-size.max textarea,
.font-size.max select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-size: 2em;
}

.font-size.mini,
.font-size.mini a,
.font-size.mini ul li,
.font-size.mini label,
.font-size.mini input,
.font-size.mini textarea,
.font-size.mini select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-size: 0.9em;
}

.font-size.min,
.font-size.min a,
.font-size.min ul li,
.font-size.min label,
.font-size.min input,
.font-size.min textarea,
.font-size.min select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-size: 0.86em;
}

.font-size.inm {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-size: 1em!important;
}

.font-size.ibig {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-size: 1.2em!important;
}

.font-size.ihuge {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-size: 1.5em!important;
}

.font-size.imax {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-size: 2em!important;
}

.font-size.imini {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-size: .9em!important;
}

.font-size.imin {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-size: .86em!important;
}

.tag.label {
    padding: 3px 9px;
    margin: 2px;
    color: #fff;
    text-shadow: 0 1px 1px #000;
    border: 1px solid #111;
    border-radius: 3px;
    display: block;
    float: left;
}

.tag.label.label-info {
    background: #0096fa;
    border: 1px solid #0e305e;
}

.tag.label.label-primary {
    background: #009398;
    border: 1px solid #0a3a4c;
}

.tag.label.label-success {
    background: #00801c;
    border: 1px solid #0a4f1b;
}

.tag.label.label-alert {
    background: #980000;
    border: 1px solid #5e0e0e;
}

.tag.label.label-danger {
    background: #984200;
    border: 1px solid #5e2a0e;
}

.tag.label.label-caution {
    background: #987a00;
    border: 1px solid #5e4e0e;
}

#exam-modal-box .btn-close {
    color: #fff;
}

.total-quest .quiz {
    font-weight: 500;
    text-shadow: 0 1px 1px #aaa;
}

.total-quest .done {
    color: #006ff7;
}

.total-quest .current {
    color: #f09c00;
}

.total-quest .left {
    color: #c00000;
}

.total-quest .review {
    color: #a600fa;
}

.hte.input-group {}

.hte.input-group .input-group-prepend span {
    height: 30px;
    margin: 0 -3px 0 0;
}

.hte.input-group .input-group-prepend i {
    width: 18px;
}

.hte.input-group input,
.hte.input-group select {
    height: 30px;
}

hr.hte-break {
    width: 99%;
    display: block;
    overflow: hidden;
    clear: both;
    margin: 5px 0;
}

hr.hte-break.none {
    border: none;
}


/** Mobile Style --------------------------------------------------------------------------------------------------*/

.mobile #result-board {
    top: 18%;
    left: 0%;
    width: 100%;
}

.mobile h6.cheatsheet {
    margin: 0 0 0 -20px;
}

.mobile #exam-bottom {
    position: fixed;
    bottom: 0;
    width: 100%;
    padding: 2%;
    left: 0;
    background: #fff;
}

.mobile #exam-box .btn-bar {
    position: fixed;
    left: calc(50% - 80px);
    width: 160px;
    text-align: center;
    bottom: calc(1% + 5px);
}

.mobile #exam-box .btn-bar .hbtn {
    font-size: .86em!important;
    padding: 5px 0;
    text-align: center;
    width: 33px;
    height: 35px;
    margin: 0 0 0 2px;
}

.mobile #exam-box .btn-bar #show-key-switch {
    width: 74px;
}

.mobile .link-buttons .hbtn {
    width: 83px;
    margin: 10px 2px 0 12px;
}

.mobile .link-buttons #cheat-way {
    width: 145px;
    margin: 15px 0 0 60px;
}

.mobile #exam-bottom .btn {
    display: inline-block;
    margin: 10px 2px 5px;
    width: 79px;
    font-size: .8em;
    font-weight: 500;
}

.mobile #exam-bottom .btn.back {}

.mobile #exam-bottom .btn.reset {}

.mobile #exam-bottom .btn.submit {
    width: 89px;
}

.mobile #exam-bottom .btn.next {
    float: right;
}

input[type=checkbox]:checked::before {
    background: #FFF!important;
    border: 2px solid #2890ff;
    border-radius: 5px;
}

#primary-content-line, #primary-title-line {
    position: relative;
}

.keys-text {
    position: relative;
    overflow: hidden;
    height: 40px;
    width: 50%;
}

.keys-text input.text {
    z-index: 1;
    height:  36px;
    font-size: .74rem;
    padding: 3px 0 0 36px;
    position: absolute;
    width: calc(100% - 23px);
}

.keys-text i {
    z-index: 5;
    top: 8px;
    left: 23px;
    position: absolute;
}

/** Export Style --------------------------------------------------------------------------------------------------*/

#download-excel {
    position: absolute;
    top:  3px;
    left:  6px;
    font-size: 12px;
    cursor: pointer;
}

table#export-list {

}

table#export-list thead {

}

table#export-list thead tr {
    background: #333;
}

table#export-list thead tr td {
    color:  #fff;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
    font-size: 11px;
    padding:  12px;
    border-right:  1px solid #565656;
}

table#export-list tbody {

}

table#export-list tbody tr.spl {
    border-top:  1px solid #333
}

table#export-list tbody tr {
    border:  1px dashed #555
}

table#export-list tbody tr td {
    font-size: 9px;
    color: #333;
    text-align: justify;
    border-right:  1px solid #565656;
    vertical-align: top!important;
    padding:  6px 5px 5px 6px;
}

table#export-list tbody tr td.alright {
    text-align: right;
}

table#export-list tbody tr.obb td {
    background: #f1f1f1;
}

table#export-list thead tr td.centre, table#export-list tbody tr td.centre {
    text-align: center;
}



table#export-print tbody tr td {
    font-size: 6px;
    color: #111;
    text-align: justify;
    font-family: Roboto;
    vertical-align: top!important;
    padding:  2px 0px 1px 2px;
}

table#export-print tbody tr td.alright {
    text-align: right;
}

table#export-print tbody tr td.idcol {
    padding:  2px 2px 1px 0px;
    box-shadow: 0.1px 0 0 #333;   
}

table#export-print tbody tr.obb {
    background: #f1f1f1;
}

table#export-print thead tr td.centre, table#export-print tbody tr td.centre {
    text-align: center;
}


.hte-exam table tbody tr td a {
    font-size: .86em!important;
}

#hte-content-container code {
    color: #000!important;
    font-weight: 500!important;
    font-size: .83rem!important;
    font-family: Calibri!important;
    letter-spacing: -.01rem!important;
    text-shadow: 0 1px 0px #fff!important;    
}