﻿
/*---------------------------- quiz modal ------------------------------------*/
div#questionPanel, div#testquestionPanel, div#testreplayquestionPanel, #pollingQuestionPanel {
    display: none;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    background-color: rgba(0, 0, 0, 0.6);
}

.question-panel-sub-container {
    background-color: rgb(255, 255, 255);
    max-width: 480px;
    max-height: calc(100% - 4px);
    overflow: auto;
    padding: 30px;
    margin: 0 auto;
    border-radius: 8px;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
}
div#QuizHeaderContainer, div#testQuizHeaderContainer {
    border-bottom: 6px solid rgb(224, 224, 224);
    padding: 0 0 15px 4px;
    font-size: 1.8rem;
    line-height: 2rem;
}
div#questionTypecontiner, div#testquestionTypecontiner, div#testreplayquestionTypecontiner {
    font-weight: 500;
    max-height: 60px;  
    word-break: break-all;
    max-width: calc(100% - 54px);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    -webkit-line-clamp: 2;
}

#questionContainer, #PollQuestionContainer, #testreplayquestionContainer, #testquestionContainer, #quizzingResultContainer, #testquizzingResultContainer {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    font-size: 1.8rem;
    font-weight: 400;
    line-height: 1.8rem;
    padding: 15px 4px;
}
div#quizzingResultContainer, #testquizzingResultContainer {
    margin: 8px 0;
    padding:0;
}
.quiz-options-container li {
    padding: 8px 15px;
    border-radius: 20px;
    margin: 2px auto;
}
span#choiceContainer, span#testchoiceContainer, span#testReplayChoiceContainer {
    max-width: 100%;
    max-height: 1.8rem;
    overflow: hidden;
    font-size: 1.3rem;
    font-weight: 400;
    white-space: normal;
    text-overflow: inherit;
    color: rgb(96, 96, 96);
}

    span#choiceContainer ol, span#choiceContainer li, span#testchoiceContainer ol, span#testchoiceContainer li, span#testReplayChoiceContainer ol,, span#testReplayChoiceContainer li{
        font-size: 1.4rem;
        font-weight: 400;
        padding: 4px;
        margin-bottom: 4px;
        margin-left: 20px;
        text-transform: capitalize;
    }

 

div#QuizProgressBar, div#testQuizProgressBar, div#QuizPreviewProgressBar {
    border-radius: 10px;
    width: 25%;
    height: 6px;
}
#txtAnswer.correct-answer, #txtaAnswer.correct-answer, #testtxtAnswer.correct-answer, #testtxtaAnswer.correct-answer {
    border: 2px solid rgb(76, 175, 80);
}
#txtAnswer.wrong-answer, #txtaAnswer.wrong-answer, #testtxtAnswer.wrong-answer, #testtxtaAnswer.wrong-answer {
    border: 2px solid rgb(204, 0, 0);
}
div#quizzingControls, #testquizzingControls {
    padding: 6px 0;
    height: 50px;
    position: relative;
}

div#pauseTimerPanel, div#testpauseTimerPanel {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.7);
    height: 100%;
    width: 100%;
    z-index: 1;
    text-align: center;
}

span.pausetimer {
    color: #fff;
    font-size: 2rem;
    font-weight: 500;
    position: relative;
    float: left;
    top: calc(50% - 50px);
    left: calc(50% - 43px);
    padding: 6px 10px;
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 4px;
}
.quiz-icon-control-list {
    padding: 4px 5px;
    height: 30px;
}
span.quiz-continue-button {
    position: relative;
    float: left;
    top: calc(50% - 10px);
    left: calc(50% - 160px);
    padding: 10px;
}

input#btnContinueQuiz, input#testbtnContinueQuiz {
    height: 30px;
    line-height: 30px;
    padding: 0px 10px;
}
input#txtAnswer {
    width: calc(100% - 100px);
    font-size: 1.6rem;
    border-radius: 4px;
    border: 1px solid #9e9e9e;
    padding: 6px 10px;
}
div#quizResultPopup, div#testquizResultPopup {
    display: none;
    width: calc(100% - 40px);
    max-height: calc(100% - 30px);
    background-color: #fff;
    position: absolute;
    top: 14px;
    left: 20px;
    border-radius: 4px;
    z-index: 1;
    overflow-y: auto;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.68);
    padding: 0 15px 15px;
}
.quiz-result-container {
    padding: 0 15px 15px;
}
table#tblQuizResult, table#testtblQuizResult {
    width: 100%;
}
#btnQuizResultOk, #testbtnQuizResultOk {
    padding: 8px 15px;
    width: 78px;
}
.quiz-result-currect-answer {
    margin-left: 5px;
    font-size: 1.6rem;
}
    .quiz-result-currect-answer ul li span {
        display: inline-block;
        width: auto; 
        margin-right: 10px;
    }
.form-group-checkbox p,
.Quiz-result-option-green-color p,
.quiz-result-question p,
.list-quiz-report-option p {
    display: inline;
    margin: 0;
}

.close-quiz-result {
    float: right;
    margin: 23px 0px 0px 0px;
    border-radius: 0px;
    background-color: transparent;
}
.quiz-summary-header {
/*    border-bottom: 6px solid rgb(224, 224, 224);
    min-height: 80px;*/
}
#quizResultTitle.quiz-score-show, #testquizResultTitle.quiz-score-show {
    max-width: calc(100% - 112px);
}
#quizResultTitle, #testquizResultTitle {
    font-size: 1.8rem;
    text-align: left;
    padding: 0 4px;
    margin: 20px 0;
    float: left;
    font-weight: 500;
    max-height: 60px;
    word-break: break-word;
    max-width: calc(100% - 177px);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    -webkit-line-clamp: 2;
}

div#quizResultPanel, div#testquizResultPanel {
    border-top: 6px solid rgb(224, 224, 224);
    min-height: 50px;
    width: 100%;
    max-height: calc(100% - 106px);
    padding: 15px 8px 8px;
    overflow: auto;
}

div#quizResultControls, div#testquizResultControls {
    position: relative;
    height: 50px;
    text-align: center;
    padding: 8px;
}
.quiz-result-question {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    font-size: 1.8rem;
    font-weight: 400;
    line-height: 1.8rem;
    padding: 10px 6px;
    position: relative;
}
.quiz-result-qustion-seperation {
    margin: 15px auto;
    border-top: 1px solid #e0e0e0;
}
div#quizCompletionTimer{
    background-color: rgba(0, 0, 0, 0.4);
    width: 80px;
    padding: 4px;
    position: absolute;
    top: 0;
    right: 0;
}
span.quiz-completion-timer-container {
    font-size: 1.6rem;
    font-weight: 500;
    color: #fff;
    margin: 4px;
}

.quiz-result-label {
    font-size: 1.6rem;
}
.quiz-result-answer-label {
    font-size: 1.6rem;
}
.list-quiz-report-option {
    padding-left: 17px;
    margin: 0 auto;
}
    .list-quiz-report-option img {
       /* width: 20px;
        height: 20px;*/
        vertical-align: middle;
        margin: 0px 8px;
    }
    .list-quiz-report-option li {
        font-size: 1.6rem;
        padding: 6px 8px;
        border-radius: 20px;
    }


.quiz-incorrect-answer {
    color: rgb(222, 81, 69);
}
.quiz-partial-correct-answer {
    color: rgb(255, 205, 66);
}

.quiz-correct-answer {
    color: rgb(24, 161, 94);
}
span.Quiz-result-option-green-color {
    color: rgb(24, 161, 94);
    font-weight: 500;
}
span.Quiz-result-option-yellow-color {
    color: rgb(255, 205, 66);
    font-weight: 500;
}
span.Quiz-result-option-red-color {
    color: rgb(222, 81, 69);
    font-weight: 500;
}
.user-answered-answer { 
    font-size: 1.6rem;
}
.quiz-textarea-answer {
    resize: none;
    width: 100%;
    height: 62px;
    font-size: 1.6rem;
    padding: 6px;
    overflow: hidden;
    border-radius: 4px;
    border: 1px solid rgb(211, 211, 211);
}

.quiz-answer-timer {
    padding-right: 4px;
    font-weight: 500;
    max-height: 60px;
    font-size: 1.8rem;
    float: right;
    text-align: center;
    color: rgb(122, 122, 122);
    max-width: 118px;
}
.quiz-summary-score {
    font-size: 1.8rem;
    padding: 20px 4px;
    font-weight: 500;
    max-height: 60px;
    float: right;
    text-align: center;
    color: #333333;
}
.quiztimer-container {
    font-weight: 400;
}
.quiz-options-container .form-group-checkbox {
    min-height: 20px;
    
}
    .quiz-options-container .form-group-checkbox label {
        font-size: 1.6rem;
        word-break: break-word;
        line-height: 2.4rem;
    }

    .quiz-options-container .form-group-checkbox label:before {
        padding: 8px;
        margin-right: 10px;
    }

.quiz-options-container .form-group-checkbox input:checked + label:after {
    top: 5px;
    left: 7px;
    width: 6px;
    height: 12px;
}
.quiz-options-container .ev-radio-button {
    margin: 0 auto;
}

    .quiz-options-container .ev-radio-button input[type="radio"] + .ev-radio-button-label:before {
        margin-right: 10px;
    }
.quiz-options-container .ev-radio-button-label {
    margin: 0 auto;
}
.ev-checkbox.form-group-checkbox label {
    font-size: 1.6rem;
}

    .ev-checkbox.form-group-checkbox label:before {
        padding: 8px;
        margin-right: 10px;
    }

.ev-checkbox.form-group-checkbox input:checked + label:after, .ev-checkbox.form-group-checkbox.checked label:after {
    top: 3px;
    left: 7px;
    width: 6px;
    height: 12px;
}
.quiz-textarea-answer.answer-submited {
    width: calc(100% - 25px);
}
.Currection-marks {
    position: absolute;
    top: 10px;
    left: 0px;
}
    .Currection-marks img {
        width: 22px;
        height: 22px;
        opacity: 0.8;
    }

.quiz-summary-title {
    max-width: calc(100% - 153px);
    max-height: 60px;
    overflow: hidden;
}

@media (max-width: 767px) {
    .quiz-summary-title {
        width: calc(100% - 35px) !important;
        max-width: calc(100% - 35px) !important;
        max-height: 115px !important;
        margin: 20px 0 10px !important;
    }
}

.quiz-summary-score-align {    
    max-height: 60px;
}

@media (max-width: 767px) {
    .quiz-summary-score-align {
        width: calc(100% - 37px);
        float: left !important;
        padding: 0 4px 20px;
        max-height: 115px;
        text-align: left;
    }
    #create_pdf {
        margin-top: 0 !important;
        float: right !important;
    }
}
@media screen and (min-width: 800px) and (max-width: 1200px) {
    div#quizzingControls, #testquizzingControls {
        height: 70px;
    }
}
div#quizzingResultNotAnswered, #testquizzingResultNotAnswered {
    padding: 4px 0;
}
.bulk-upload-disable {
    cursor: not-allowed;
    color: #ababab !important;
}
.icon-color-green {
    color: rgb(76, 175, 80) !important;
}
textarea#txtaAnswer::-webkit-input-placeholder, textarea#txtaAnswer:-ms-input-placeholder, textarea#txtaAnswer:-moz-placeholder, textarea#txtaAnswer::placeholder {
    color: #999 !important;
}
.quiz-summary-popup-background {
    width: 100%;
    height: 100%;
    z-index: 1;
    background-color: rgba(0, 0, 0, 0.6);
    position: absolute;
    top: 0;
}
.preview-quiz-summary {
    z-index: 4;
}
/*--------------------web-accessibility for Quiz-------------------------*/
.web-accessibility-keyboard-active {
    outline: dashed 4px #c00 !important;
}

.web-accessibility-reader-active {
    color: #000 !important;
    background-color: #ff0 !important;
}
.multiplechoice-images img {
    max-width: 120px;
    max-height: 68px;
}
