.select-bg-color {
    background-color: #F2F2F2
}

.question-no {
    width: 40%
}

.question-n-text {
    word-wrap: break-word
}

.checked-back-color {
    background-color: #8AC5FF
}

.correct-back-color {
    background-color: #88F078 !important
}

.incorrect-back-color {
    background-color: rgba(255,31,31,0.55) !important
}

.nonSelect-back-color {
    background-color: #F2F2F2 !important
}

.correct-text-color {
    color: #2EBB55
}

.incorrect-text-color {
    color: #FF1F1F
}

.success-err-icon {
    width: 25px;
    height: 25px
}

.result-img-size {
    max-width: 100%;
    height: auto;
    margin: 0 auto
}

.movie {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
    width: 90%
}

    .movie iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%
    }

.read-text-width {
    width: 100%
}

.audio-size {
    width: 100%
}

.youtube_play {
    position: relative
}

    .youtube_play:hover {
        cursor: pointer
    }

.youtube_btn {
    width: 20%;
    height: 20%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto
}

.anwser-commentary {
    background-color: #FFF9E2;
    color: #5c5c5c;
    padding: .75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: .25rem
}

    .anwser-commentary .anwser-commentary-title {
        font-weight: 700
    }

    .anwser-commentary .movie {
        margin: 0 auto
    }

.test-result-img {
    display: flex;
    flex-flow: wrap;
    text-align: center
}

.btn-translate {
    cursor: pointer;
    color: #ee9201;
    font-weight: 600
}

.translate-text {
    text-align: justify
}

.material-content {
    margin-top: 2em
}

    .material-content #begin-wapper {
        display: flex;
        flex-direction: column;
        align-content: center;
        justify-content: center;
        align-items: center;
        padding: 2em
    }

        .material-content #begin-wapper h2 {
            font-size: 3rem;
            color: #F60
        }

        .material-content #begin-wapper img {
            max-width: 30%;
            margin: 2em auto
        }

        .material-content #begin-wapper .btn-start {
            text-transform: uppercase;
            background-color: #F60;
            color: #fff;
            border-radius: 2em;
            padding: .5em 3em
        }

            .material-content #begin-wapper .btn-start:hover {
                background-color: #0086a0
            }

    .material-content .test-duration {
        font-size: 2em;
        font-weight: 600;
        text-align: center
    }

    .material-content .card h5 {
        background-color: #e8e8e8;
        color: #000;
        text-align: center;
        padding: .375em 0;
        margin: 0
    }

    .material-content .card p {
        margin-bottom: 0
    }

#test-wapper {
    overflow: hidden
}

    #test-wapper .col-left .card-header {
        border: none;
        background-color: #00000080;
        border-radius: 0
    }

    #test-wapper .col-right .card-header {
        border: none;
        border-radius: 0
    }

    #test-wapper .col-right .card-body {
        padding: .5em
    }

    #test-wapper .modal-content {
        height: calc(100vh - 105px);
        padding: 0;
        box-shadow: rgba(0,0,0,0.15) 1.95px 1.95px 2.6px;
        border: none
    }

    #test-wapper .card {
        border: none
    }

    #test-wapper .card-title {
        text-align: center;
        margin: 0
    }

    #test-wapper .test-title {
        color: #fff;
        margin: 0;
        text-align: center
    }

    #test-wapper .col-left .btn {
        padding: .75em 1.5em;
        width: 175px
    }

#test-panel {
    height: calc(100vh - 225px);
    overflow: hidden scroll;
    padding: 1em;
    position: relative
}

    #test-panel::-webkit-scrollbar {
        width: 10px;
        height: 100px;
        background-color: transparent
    }

    #test-panel::-webkit-scrollbar-track {
        border-radius: 10px
    }

    #test-panel::-webkit-scrollbar-thumb {
        background-color: #c8c8c8;
        border-radius: 10px
    }

#test-wapper .list-question {
    display: flex;
    flex-flow: wrap
}

    #test-wapper .list-question .question-item {
        background-color: #eae9e9;
        flex: 0 0 10.5%;
        flex-flow: column;
        text-align: center;
        margin-right: 2%;
        margin-bottom: 3px;
        border-radius: 10px 0 0 0;
        padding: .375rem;
        cursor: pointer
    }

        #test-wapper .list-question .question-item:hover {
            color: #f60
        }

        #test-wapper .list-question .question-item.done {
            background-color: #f37724;
            color: #fff
        }

        #test-wapper .list-question .question-item.empty {
            background-color: #494646;
            color: #fff
        }

.read-text-wrap {
    white-space: pre-line !important
}

#clockdiv {
    font-family: sans-serif;
    text-align: center;
    font-size: 26px
}

    #clockdiv > div {
        padding: 7px;
        border-radius: 3px;
        display: inline-block;
        color: #5c5c5c;
        background-color: #eaeaea;
        width: 85px
    }

    #clockdiv div > span {
        border-radius: 3px;
        display: inline-block;
        color: #F60
    }

    #clockdiv .smalltext {
        font-size: 12px
    }

.bootbox.modal {
    z-index: 1100
}

    .bootbox.modal.show ~ .modal-backdrop {
        z-index: 1099
    }

    .bootbox.modal .btn {
        min-width: 150px
    }

.score-box {
    width: 100%;
    text-align: center;
    margin: 6rem 0;
    font-family: Nunito;
    font-weight: 600
}

    .score-box svg {
        margin: 0 1em
    }

    .score-box .text-score {
        color: #F60;
        font-size: 6em;
        line-height: 125px;
        vertical-align: middle
    }

    .score-box .text-max-score {
        color: #0003;
        font-size: 4.5em;
        line-height: 125px;
        vertical-align: middle;
        padding-left: 15px;
        position: relative
    }

        .score-box .text-max-score:before {
            content: "";
            width: 3px;
            height: 65px;
            background: #c4c4c4;
            position: absolute;
            top: 50%;
            left: 0;
            transform: rotate(15deg) translateY(-50%)
        }

.btn-custom-light {
    min-width: 200px;
    color: rgba(0,0,0,0.4);
    background-color: transparent;
    border-color: transparent
}

    .btn-custom-light:hover {
        color: #f60
    }

#test-wapper .list-question-desc {
    display: flex;
    justify-content: center;
    margin-bottom: 1em;
    border-bottom: 2px dashed #ececec
}

    #test-wapper .list-question-desc span {
        position: relative
    }

        #test-wapper .list-question-desc span:before {
            content: '';
            width: 15px;
            height: 15px;
            border-radius: 50%;
            position: absolute;
            left: -10px;
            top: 10px
        }

        #test-wapper .list-question-desc span.btn-correct:before {
            background-color: #f60
        }

        #test-wapper .list-question-desc span.btn-wrong:before {
            background-color: #494646
        }

.modal {
    padding: 0;
    border: none;
    border-radius: 0
}

.practice-test-modal {
    padding: 0 !important;
}

.translate-box .div-pre {
    white-space: normal
}

@media (max-width: 736px) {
    .custom-modal.modal-dialog {
        max-width: 700px;
    }

    .practice-test-modal .modal-header {
        display: none;
    }
}

@media only screen and (min-width : 1224px) {
    .custom-modal.modal-dialog {
        max-width: 1140px;
        width: max-content;
    }
}

@media only screen and (max-width : 736px) {
    .material-content > .row {
        flex-flow: column-reverse;
        margin: 0
    }

    .material-content #begin-wapper h2 {
        font-size: 2.2em
    }

    .material-content #begin-wapper h3 {
        font-size: 1.3em
    }

    #test-wapper .modal-content {
        height: calc(100vh - 80px)
    }

    #test-wapper .modal .container-fluid > .row {
        flex-flow: column-reverse
    }

    #test-wapper .col-left .card-header {
        display: none
    }

    #test-wapper .col-right .card-header {
        padding: .3rem
    }

    #test-wapper .col-right .card-body {
        box-shadow: rgba(0,0,0,0.15) 0 -50px 36px -28px inset;
        padding: 0
    }

    #test-wapper .card-title, #test-wapper .test-title {
        font-size: 20px
    }

    #test-wapper .col-left .btn {
        width: 8em;
        padding: .375rem .75rem
    }

    #test-wapper #test-panel {
        box-shadow: rgba(0,0,0,0.1) 0 1px 2px 0;
        height: calc(100vh - 230px)
    }

    #clockdiv {
        font-size: 16px
    }

        #clockdiv .smalltext {
            font-size: 10px
        }
}

@media only screen and (max-width : 1024px) {
    .modal {
        padding: 0;
        border: none;
        border-radius: 0
    }

    #clockdiv {
        font-size: 20px
    }

        #clockdiv > div {
            width: 65px;
            padding: 7px 0;
            background-color: transparent
        }
}

@media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : portrait) {
    #test-wapper .list-question .question-item {
        flex: 0 0 23%
    }

    #test-wapper .test-title {
        font-size: 20px
    }
}

@media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : landscape) {
    .modal-dialog {
        width: 960px;
        max-width: 960px
    }

    #test-wapper .list-question {
        max-height: calc(100vh - 300px);
        overflow: hidden scroll
    }

        #test-wapper .list-question .question-item {
            flex: 0 0 18%
        }

    #clockdiv > div {
        width: 70px;
        padding: 7px 0;
        background-color: transparent
    }
}

@media only screen and (min-width : 1600px) {
    .custom-modal.modal-dialog {
        max-width: 1400px
    }
}

@media (min-width: 768px) {
    .audio-size {
        width: 75%
    }
}

@media only screen and (min-width : 375px) and (max-width : 812px) and (orientation : landscape) {
    .modal-dialog {
        width: 760px;
        max-width: 760px
    }
}

@media screen and (max-width : 736px) and (orientation : landscape) {
    #test-wapper #test-panel {
        height: calc(100vh - 195px)
    }

    .modal-dialog {
        width: 700px;
        max-width: 700px
    }
}

@media screen and (max-width : 667px) and (orientation : landscape) {
    .modal-dialog {
        width: 640px;
        max-width: 640px
    }
}

@media only screen and (max-width : 568px) and (orientation : landscape) {
    .modal-dialog {
        width: 500px;
        max-width: 500px !important;
        margin: auto
    }
}

@media only screen and (min-width : 375px) and (max-width : 812px) and (orientation : landscape) {
    #test-wapper .modal-content {
        height: calc(100vh - 50px)
    }

    #test-panel {
        height: calc(100vh - 170px)
    }

    #test-wapper .list-question {
        max-height: calc(100vh - 260px) !important
    }
}

.question_obj > div.custom-control {
    background-color: #f2f2f2;
    margin-bottom: .2em;
    padding: .375em .375em .375em 2em
}

.question_obj > div.selected {
    background-color: #8ac5ff !important
}

.question_obj > div.custom-control input[type=radio] {
    position: absolute;
    padding: 0;
    margin: 0;
    opacity: 0
}

    .question_obj > div.custom-control input[type=radio]::before {
        display: none
    }

    .question_obj > div.custom-control input[type=radio]::after {
        display: none
    }

.question_obj > div.custom-control label {
    width: 100%;
    cursor: pointer;
    color: #000
}

.cus-list-question {
    max-height: 550px;
    overflow: hidden scroll;
    margin-top: 1rem;
}