label {
    margin-bottom: 0;
}
/*body
{
    min-height: 100vh;
}*/
footer {
    /* position: fixed; */
    /* bottom: 0; */
    width: 100%;
}
.footer {
    padding: 26px;
}

#form-submit-test {
    /* margin-left: 15px; */
}
#form-submit-test img{
    /* width: 100% !important; */
    height: auto !important;
    max-width: 100% !important;
}
.background-image-zone-able {
    position: relative;
    max-width: 100% !important;
    width: unset !important;
}
.background-image-zone-able .preview-mdd_background{
    max-width: 100%;
    width: unset !important;
}
.background-image-zone-enable {
    position: relative;
}
.drag-text-zone {
    position: absolute;
    background: #fff;
    border-radius: 5px;
    border: 1px solid #ccc;
    text-align: center;
}
.drag-img-zone {
    position: absolute;
    border-radius: 5px;
    border: none;
}
.drag-img-zone .drag-img-element{
    border-radius: 5px;
}
.drop-zone-element {
    border: 2px dashed #dddddd;
    position: absolute;
    background: transparent;
    border-radius: 5px;
}
.quiz_name{
    font-size: 20px;
     margin-left: 15px;
    /* margin-bottom: 15px; */
}
footer .logo-footer{
    display: none;
}
footer .copyright{
    border-left: 0px;
    padding-left: 0px;
    font-size: 12px;
}
.btn-group-lg>.btn, .btn-large{
    padding: .5rem 1rem;
    font-size: 1.25rem;
    line-height: 1.5;
    border-radius: .3rem;
}
.w3-padding>.w3-light-grey,.block-question{
    margin-bottom: 20px;
}
.full-page-content-quiz .block-quiz-test {
    margin-bottom: 20px;
}
#file-upload-form {
    display: block;
    clear: both;
    margin: 0 auto;
}

#file-upload-form input[type="file"] {
    display: none;
}
.title-course{
    min-height: 45px;
}
.card-text{color: #333}

.full-page-content-quiz #file-upload-form label:hover {
    border-color: #454cad;
}

.full-page-content-quiz #file-upload-form #file-image.hidden {
    display: none;
}

.full-page-content-quiz #file-upload-form #file-image {
    object-fit: cover;
    width: 350px;
    height: 180px;
    border-radius: 7px;
    border: 3px solid #eee;
}

.full-page-content-quiz #file-upload-form img {
    border-style: none;
}

.full-page-content-quiz #file-upload-form #start {
    float: left;
    clear: both;
    width: 100%;
}

.full-page-content-quiz #file-upload-form .btn {
    font-family: inherit;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    text-transform: initial;
    border: none;
    padding: 0 1rem;
    height: 36px;
    line-height: 36px;
    color: #fff;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.full-page-content-quiz .video-upload-notify {
    margin-left: 10px;
}
.full-page-content-quiz .progress-upload-video {
    background: #ccc;
    height: 20px;
    width: 50%;
    margin-top: 7px;
    margin-bottom: 7px;
    cursor: pointer;
}
.full-page-content-quiz .uploader label {
    display: inline-grid;
}
.full-page-content-quiz .fa-video-plus {
    margin-right: 5px;
}

#quiz_button_submit,#view_result_test,.btn-complete-text-lesson {
    position: fixed;
    bottom: 0;
    z-index: 9999;
    right: 48%;
    bottom: 5%;
    padding: 10px 20px;
}
.countdown-time {
    position: fixed;
    z-index: 1000;
    right: 38%;
    font-size: 25px !important;
    text-align: right;
    bottom: 11%;
}

@media  screen and (min-width: 1680px) {
    #quiz_button_submit,#view_result_test,.btn-complete-text-lesson
    {
        position: fixed;
        bottom: 0;
        z-index: 9999;
        right: 48%;
        bottom: 1%;
        padding: 10px 20px;
    }

    .countdown-time {
        position: fixed;
        z-index: 1000;
        right: 41%;
        font-size: 25px !important;
        text-align: right;
        bottom: 1%;
    }
}
@media only screen and (max-width: 1366px) and (max-height: 1024px) {
    .countdown-time {
        position: fixed;
        z-index: 1000;
        right: 36%;
        font-size: 25px !important;
        text-align: right;
        bottom: 1%;
    }

    #quiz_button_submit,.btn-complete-text-lesson {
        position: fixed;
        bottom: 0;
        z-index:9999;
        right: 48%;
        bottom: 1%;
    }

    #view_result_test {
        position: fixed;
        bottom: 0;
        z-index: 99;
        right: 45%;
        bottom: 10%;
    }
}
@media only screen and (max-width: 1024px) and (max-height: 768px) {
    .countdown-time {
        position: fixed;
        z-index: 1000;
        right: 38%;
        font-size: 28px !important;
        text-align: right;
        bottom: 1%;
    }

    #quiz_button_submit,#view_result_test,.btn-complete-text-lesson {
        position: fixed;
        bottom: 0;
        z-index: 9999;
        right: 48%;
        bottom: 2%;
    }

}
@media only screen and (max-width: 1024px) and (max-height: 1366px) {
    .countdown-time {
        position: fixed;
        z-index: 1000;
        right: 35%;
        font-size: 25px !important;
        text-align: right;
        bottom: 1%;
    }

    #quiz_button_submit {
        position: fixed;
        bottom: 0;
        z-index: 99;
        right: 48%;
        bottom: 1%;
    }

    #view_result_test {
        position: fixed;
        bottom: 0;
        z-index: 99;
        right: 45%;
        bottom: 12%;
    }
}

@media only screen and (max-width: 1024px) and (max-height: 768px) {
    .countdown-time {
        position: fixed;
        z-index: 1000;
        right: 35%;
        font-size: 25px !important;
        text-align: right;
        bottom: 1%;
    }

    #quiz_button_submit,.btn-complete-text-lesson {
        position: fixed;
        bottom: 0;
        z-index: 9999;
        right: 48%;
        bottom: 1%;
    }

    #view_result_test {
        position: fixed;
        bottom: 0;
        z-index: 99;
        right: 40%;
        bottom: 11%;
    }

}


@media only screen and (max-width: 885px) {
    .main-test
    {
        margin-bottom: 50px;
        height: unset;
    }

    .countdown-time {
        position: fixed;
        z-index: 1000;
        right: 32%;
        font-size: 25px !important;
        text-align: right;
        bottom: 1%;
    }

    #quiz_button_submit,#view_result_test,.btn-complete-text-lesson {
        position: fixed;
        bottom: 0;
        z-index: 9999;
        right: 48%;
        bottom: 1%;
    }

}
@media only screen and (max-width: 823px) {
    .countdown-time {
        position: fixed;
        z-index: 1000;
        right: 32%;
        font-size: 25px !important;
        text-align: right;
        bottom: 1%;
    }

    #quiz_button_submit,.btn-complete-text-lesson {
        position: fixed;
        z-index: 9999;
        right: 48%;
        bottom: 1%;
    }

    #view_result_test {
        position: fixed;
        z-index: 99;
        right: 40%;
        bottom: 20%;
    }
}
@media only screen and (max-width: 812px) {
    .countdown-time {
        position: fixed;
        z-index: 1000;
        right: 32%;
        font-size: 25px !important;
        text-align: right;
        bottom: 1%;
    }

    #quiz_button_submit,.btn-complete-text-lesson {
        position: fixed;
        z-index: 9999;
        right: 48%;
        bottom: 1%;
    }

    #view_result_test {
        position: fixed;
        z-index: 99;
        right: 40%;
        bottom: 22%;
    }
}
@media only screen and (max-width: 767px) {
    #box-list-page-quiz .action-submit-test{
        position: fixed;
        bottom: 0;
        z-index: 1000;
        right: 0;
        padding: 10px !important;
        background: cadetblue;
    }

}
@media only screen and (max-width: 768px) {
    .background-image-zone-able {
        position: relative;
        max-width: 100% !important;
        width: unset !important;
    }
    .countdown-time {
        position: fixed;
        z-index: 1000;
        right: 33%;
        font-size: 25px !important;
        text-align: right;
        bottom: 7%;
    }

    footer {
        /* position: fixed;
        bottom: 0; */
        width: 100%;
    }

    #quiz_button_submit,.btn-complete-text-lesson {
        position: fixed;
        bottom: 0;
        z-index: 9999;
        right: 48%;
        bottom: 8%;
    }

    #view_result_test {
        position: fixed;
        bottom: 0;
        z-index: 99;
        right: 40%;
        bottom: 8%;
    }

}
@media only screen and (max-width: 736px) {
    .countdown-time {
        position: fixed;
        z-index: 1000;
        right: 30%;
        font-size: 25px !important;
        text-align: right;
        bottom: 18%;
    }

    #quiz_button_submit,.btn-complete-text-lesson {
        position: fixed;
        z-index: 9999;
        right: 48%;
        bottom: 20%;
    }

    #view_result_test {
        position: fixed;
        z-index: 99;
        right: 40%;
        bottom: 20%;
    }
}
@media only screen and (max-width: 731px) {
    .countdown-time {
        position: fixed;
        z-index: 1000;
        right: 30%;
        font-size: 25px !important;
        text-align: right;
        bottom: 18%;
    }

    #quiz_button_submit,.btn-complete-text-lesson {
        position: fixed;
        bottom: 0;
        z-index: 9999;
        right: 48%;
        bottom: 20%;
    }

    #view_result_test {
        position: fixed;
        bottom: 0;
        z-index: 99;
        right: 40%;
        bottom: 20%;
    }
}
@media only screen and (max-width: 667px) {
    .countdown-time {
        position: fixed;
        z-index: 1000;
        right: 30%;
        font-size: 21px !important;
        text-align: right;
        bottom: 21%;
    }

    #quiz_button_submit,.btn-complete-text-lesson {
        position: fixed;
        bottom: 0;
        z-index: 9999;
        right: 48%;
        bottom: 23%;
    }
    #view_result_test {
        position: fixed;
        z-index: 99;
        right: 40%;
        bottom: 22%;
    }
}
@media only screen and (max-width: 640px) {
    .countdown-time {
        position: fixed;
        z-index: 1000;
        right: 30%;
        font-size: 21px !important;
        text-align: right;
        bottom: 10%;
    }

    #quiz_button_submit,#view_result_test,.btn-complete-text-lesson {
        position: fixed;
        bottom: 0;
        z-index: 9999;
        right: 48%;
        bottom: 10%;
    }
    #view_result_test {
        position: fixed;
        z-index: 99;
        right: 40%;
        bottom: 10%;
    }
}
@media only screen and (max-width: 568px) {
    .btn-group-lg>.btn, .btn-large{
        padding: 0.3rem 1rem;
        font-size: 1rem;
        line-height: 1.5;
        border-radius: .3rem;
        margin-bottom: 4px;
    }
    #countdown:not(.down-time-new) {
        position: fixed;
        bottom: 26%;
        z-index: 99;
        right: 26%;
    }

    .footer {
        /* position: fixed;
        bottom: 0; */
        width: 100%;
        padding: 20px;
    }

    #quiz_button_submit,.btn-complete-text-lesson{
        left: 35%;
        position: fixed;
        bottom: 24%;
        z-index: 9999;
        padding: 5px;
    }
    #view_result_test {
        position: fixed;
        z-index: 99;
        left: 40%;
        bottom: 24%;
    }
}
@media only screen and (max-width: 500px) {
    #view_result_test {
        position: fixed;
        z-index: 99;
        right: 32%;
        bottom: 1px;
    }
}
@media only screen and (max-width: 414px)
{
    #quiz_button_submit,.btn-complete-text-lesson {
        left: 30%;
        position: fixed;
        bottom: 11%;
        z-index: 9999;
        padding: 5px;
    }

    #view_result_test {
        left: 40%;
        position: fixed;
        bottom: 11%;
        z-index: 99;
        padding: 5px;
    }

    #countdown:not(.down-time-new) {
        position: fixed;
        bottom: 12%;
        z-index: 99;
        right: 25%;
    }

}
@media only screen and (max-width: 375px) and (max-height: 812px)
{
    #quiz_button_submit {
        left: 28%;
        position: fixed;
        bottom: 10%;
        z-index: 99;
        padding: 5px;
    }

    #view_result_test {
        left: 36%;
        position: fixed;
        bottom: 10%;
        z-index: 99;
        padding: 5px;
    }

    #countdown:not(.down-time-new) {
        position: fixed;
        bottom: 11%;
        z-index: 99;
        right: 23%;
    }

}
@media only screen and (max-width: 375px) and (max-height: 667px)
{
    #quiz_button_submit,.btn-complete-text-lesson {
        left: 28%;
        position: fixed;
        bottom: 12%;
        z-index: 9999;
        padding: 5px;
    }

    #view_result_test {
        left: 35%;
        position: fixed;
        bottom: 12%;
        z-index: 99;
        padding: 5px;
    }

    #countdown:not(.down-time-new) {
        position: fixed;
        bottom: 13%;
        z-index: 99;
        right: 23%;
    }

}
@media only screen and (max-width: 375px) and (max-height: 568px)
{
    #quiz_button_submit,#view_result_test,.btn-complete-text-lesson {
        left: 28%;
        position: fixed;
        bottom: 12%;
        z-index: 9999;
        padding: 5px;
    }

    #countdown:not(.down-time-new) {
        position: fixed;
        bottom: 13%;
        z-index: 99;
        right: 23%;
    }

}
@media only screen and (max-width: 320px)
{
    #quiz_button_submit,.btn-complete-text-lesson {
        left: 23%;
        position: fixed;
        bottom: 14%;
        z-index: 9999;
        padding: 5px;
    }

    #view_result_test {
        left: 35%;
        position: fixed;
        bottom: 14%;
        z-index: 99;
        padding: 5px;
    }

    #countdown:not(.down-time-new) {
        position: fixed;
        bottom: 15%;
        z-index: 99;
        right: 21%;
    }

}
body{
    background-color: #fff;
}
/*input[type=checkbox], input[type=radio] {
    -ms-transform: scale(2);
    -moz-transform: scale(2);
    -webkit-transform: scale(2);
    -o-transform: scale(2);
    transform: scale(2);
    padding: 10px;
    margin: 0 7px;
}*/
input[type=checkbox], input[type=radio] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid #999;
    transition: 0.2s all linear;
    margin-right: 5px;
    position: relative;
    top: 5px;
}
input[type=radio]{
    border-radius: 50%;
}
input:checked {
    border: 6px solid #7a6767;
    outline: unset !important;
}
.header-dashboard {
    background: #07669e !important;
    margin-bottom: 50px;
}
.btn-remake-quiz{
    margin-left: 10px;
}
#view_result_test{
    left: 1%;
}
.content-info-list-quiz{
    border-right: 1px solid #ccc;
    padding-top: 42px;
}
.content-info-quiz-test{
    padding-top: 50px;
}

.page_list_quiz_button{
    margin: 5px;
    width: 40px;
    background-color: #f5f5f5;
    border: none;
    outline: none;
    cursor: pointer;
}
.page_list_quiz_button.quiz_answered{
    background-color: #bcbcbc;
}
.page_list_quiz_button.active, .page_list_quiz_button.btn:hover {
  background-color: #57c1ff;
  color: white;
}
.page_list_quiz_button:focus{
    box-shadow:none;
}
.list-button-quiz{
    border-top: 1px solid #ccc;
}


@media screen and (min-width: 768px) {
    .list-button-quiz{
        max-height: calc(100vh - 250px);
        overflow-y: auto;
    }
    .config-margin-left-20{
        margin-left: 20px;
    }
}
.quiz_note{
    font-size: 13px !important;
    background-color: #fffa93a6;
    padding: 10px;
    border-radius: 5px;
}
.next_page_quiz,.back_page_quiz{
    border:none;
    background-color: #c1ddf9;
}
.show_view_page_quiz{
	display: none;
}
@media only screen and (max-width: 768px) {
	.content-info-list-quiz{
	    border-right: unset;
	    padding-top: 10px;
	}
	.show_view_page_quiz{
		display: block;
	}
	#box-list-page-quiz .list-button-quiz{
		display: none;
	}
	.show_page{
		display: block !important;
	}
	.content-info-quiz-test{
		padding-top: 30px;
	}
}
.show_view_page_quiz{
	position: absolute;
    right: 48%;
    z-index: 99;
}
.radio label {
    margin-bottom: 5px;
}

.user-choice .chart-answer{
    background: green !important;
    color: #fff;
}
.user-choice {
    border: 2px solid #0a78d9 !important;
}
.text-answer p:last-child
{
    margin-bottom: 0 !important;
}

/* PDF */
.answer-pdf{
    border: 1px solid;
    border-radius: 100px;
    width: 32px;
    height: 32px;
    display: flex;
    font-weight: bold;
    cursor: pointer;
}

.active-pdf{
    background: #7371db;
    color: #fff;
}

.active-correct{
    background: #28a745;
    color: #fff;
}

.quiz-title-pdf{
    font-size: 18px;
    font-weight: bold;
}

.content-pdf-file{
    flex-grow: 1;
    padding: 0 20px;
}

.learn-content-pdf{
    display: flex;
    font-size: 18px;
    font-weight: bold;
}

.list-question-pdf {
    border-right: 4px solid #d2d3d3;
    padding: 10px;
}

.list-question-pdf_text{
    border-bottom: 4px solid #d2d3d3;
}

.list-table-question{
    max-height: 70vh;
    overflow-y: auto;
    margin-bottom: 10px;
}

.content-pdf-file iframe
{
    width: 100%;
    height: 70vh;
}

@media screen and (max-width: 768px) {
    .learn-content-pdf{
        -webkit-box-orient: vertical !important;
        -webkit-box-direction: reverse !important;
        flex-direction: column-reverse !important;
        overflow-y: auto;
        max-height: 100%;
    }

    .content-pdf-file iframe
    {
        height: 50vh;
    }
    .list-table-question{
        max-height: 35vh;
    }
    .list-question-pdf{
        margin-bottom: 120px;
    }
    .list-question-pdf #countdown{
        position: inherit !important;
    }
}

/* Highlight */
.color-picker > div {
    height: 20px;
    min-width: 20px;
    cursor: pointer;
}
.color-picker .selected {
    border: 2px solid #c5c5c5;
}
.highlight_child-content {
    background: rgba(0,0,0,.7);
    color: #fff;
    padding: 5px 10px;
    border-radius: 10px;
}

.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 20px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked + .slider {
    background-color: #2196F3;
}

input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

span.highlighted {
    cursor: pointer;
}

.content-info-quiz-test .show-result-content {
    display: none;
}