@charset "utf-8";
/* CSS Document */
#selectAllContainer, #multipleChoiceContainer{
    display: none;
}
/* -- top section -- */
.testWrapper{
    width: 100%;
    margin-bottom: 25%;
    padding-left: 0.5%;
    padding-right: 0.5%;
}
.testHeaderContainer{
    float: left;
    width: 100%;
    height: auto;
    display: flex;
}
.testHeaderLeft{
    float: left;
    width: 25%;
    height: auto;
    order: 1;
}
.testSpecialContainer{
    float: left;
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.testHeaderCenter{
    float: left;
    width: 50%;
    height: auto;
    order: 2;
    padding-left: 1%;
    padding-right: 1%;
}
.topCenterButtonCotnainer{
    float: left;
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    padding-left: 1%;
    padding-right: 1%;
}
#openInstructionModalButton{
    width: 49%;
    margin-right: 1%;
}
#contentDocumentContainer, #contentAttachmentsButtonDiv{
    display: none;
}
.contentAttachmentsSection{
    width: 49%;
    margin-left: 1%;
}
.contentAttachmentsSection .secondaryButtonGreen{
    width: 100%;
}
/* -- timer -- */
.testTimerContainer{
    visibility: hidden;
    float: left;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 13px;
}
.showTimerBox{
    float: left;
    width: 49%;
    height: auto;
    display: flex;
    justify-content: center;
}
.timerHeader{
    float: left;
    width: 49%;
    height: auto;
    justify-content: center;
    padding: 0;
    margin: 0;
}
#testTimerBox{
    visibility: hidden;
    margin-top: 0;
}
#testTimerButton{
    width: 100%;
}
#testTimerBox h2{
    font-family: 'Roboto', sans-serif;
    text-align: center;
    font-size: 1.6rem;
}
.testHeaderRight{
    float: left;
    width: 25%;
    height: auto;
    order: 3;
}
.leaveTestContainer{
    float: left;
    width: 100%;
}
.reviewTestBox{
    float: left;
    width: 100%;
    margin-top: 13px;
    margin-bottom: 13px;
}
.leaveTestContainer .secondaryButtonGreen,
.reviewTestBox .secondaryButtonGreen,
.testSettingButton{
    width: 100%;
}
/* -- test left side -- */
.testLeftSide{
    float: left;
    width: 25%;
    height: auto;
}
/* -- test parts -- */
.showPartsBox{
    float: left;
    width: 100%;
    height: 100%;
    padding-top: 5px;
}
.showPartsBox .secondaryButtonGreen{
    width: 100%;
    margin-bottom: 13px;
}
#testPartButtonContainer{
    justify-content: flex-start;
}
.testPart{
    float: left;
    width: 20%;
    height: auto;
    padding-left: 1%;
    padding-right: 1%;
}
.testPartNumber{
    float: left;
    width: 100%;
    height: auto;
    text-align: center;
    font-weight: 500;
    padding-bottom: 2px;
    margin-bottom: 5px;
    border-bottom: 3px solid #9C9C9C;
    transition-duration: 0.3s;
}
.testPart img{
    display: block;
    float: left;
    width: 90%;
    height: auto;
    margin-left: 5%;
    scale: 0.8;
    transition-duration: 0.3s;
}
.testPart:hover{
    cursor: pointer;
}
.testPart:hover .testPartNumber, .testPart:focus .testPartNumber{
    font-weight: 700;
    color: #0a090c;
    background-color: #999999;
    border-color: #056c9b;
}
.testPartOnNotSubmitted .testPartNumber{
    font-weight: 700;
    color: #0a090c;
    background-color: #999999;
    border-color: #056c9b;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}

.testPartOnNotSubmitted:hover, .testPartOnSubmitted:hover, .testPartOffNotSubmitted:hover, .testPartOffSubmitted:hover{
    cursor: pointer;
}
.testPartOnNotSubmitted img,
.testPartOffNotSubmitted img{
    -webkit-filter: invert(62%) sepia(0%) saturate(333%) hue-rotate(147deg) brightness(98%) contrast(94%);
    filter: invert(62%) sepia(0%) saturate(333%) hue-rotate(147deg) brightness(98%) contrast(94%);
}
.testPartOnSubmitted .testPartNumber{
    font-weight: 700;
    color: #fdfdfd;
    background-color: #056c9b;
    border-color: #999999;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}
.testPartOnSubmitted:hover .testPartNumber{
    font-weight: 700;
    color: #fdfdfd;
    background-color: #056c9b;
    border-color: #999999;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}
.testPartOnNotSubmitted img,
.testPartOnSubmitted img{
    scale: 1;
}
.testPartCorrect img{
   /* green icon #305a30 */
   -webkit-filter: invert(23%) sepia(7%) saturate(4786%) hue-rotate(71deg) brightness(99%) contrast(71%);
   filter: invert(23%) sepia(7%) saturate(4786%) hue-rotate(71deg) brightness(99%) contrast(71%);
}
.testPartIncorrect img{
    /* red icon #bf161c */
    -webkit-filter: invert(13%) sepia(60%) saturate(4431%) hue-rotate(346deg) brightness(113%) contrast(102%);
    filter: invert(13%) sepia(60%) saturate(4431%) hue-rotate(346deg) brightness(113%) contrast(102%);
}
.testPartSubmitted img{
    /* blue icon #056c9b */
    -webkit-filter: invert(22%) sepia(78%) saturate(2327%) hue-rotate(179deg) brightness(97%) contrast(96%);
    filter: invert(22%) sepia(78%) saturate(2327%) hue-rotate(179deg) brightness(97%) contrast(96%);
}
/* -- main test container -- */
.test{
    float: left;
    width: 75%;
    max-width: 800px;
	margin-bottom: 50%;
    margin-top: 26px;
    padding-left: 13px;
    padding-right: 13px;
}
.fiveMinuteWarning{
    display: none;
    width: 50%;
    margin-left: 25%;
    border: 2px solid #bf161c;
}
.userNonAnswerHeader{
    display: none;
    width: 100%;
    border: 2px solid #bf161c;
}
.testText{
    float: left;
    width: 100%;
    height: auto;
    padding-left: 2.5%;
    padding-right: 2.5%;
    margin-bottom: 13px;
}
/* -- test audio -- */
.testAudioDiv{
    display: none;
    width: 100%;
    margin-bottom: 26px;
}
.testAudioDiv audio{
    width: 100%;
}
/* -- test image -- */
.viewLessonImageContainer{
    float: right;
    width: 100%;
    height: auto;
    margin-bottom: 13px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.viewLessonImageContainer .borderOnHoverButtonGreen{
    height: 50px;
}
.testimage{
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    margin-bottom: 26px;
}
/* -- test video -- */
.youTubeVideoContainer{
    display: none;
    float: left;
    width: 100%;
    position: relative;
    padding-bottom: 56.25%;/* 16:9 */
    padding-top: 25px;
    margin-top: 2%;
    margin-bottom: 26px;
    height: auto;
}
#youTubeVideoCover{
    display: none;
}
.youTubeVideoContainer .youTubeVideoCover::after {
    content:"";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    cursor: pointer;
    background-color: #0a090c;
    background-repeat: no-repeat;
    background-position: center; 
    background-size: 64px 64px;
    background-image: url(/images/icons/replayIcon.svg);
}
.youTubeVideoContainer iframe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.lessonYouTubeVideoDiv{
    float: left; 
    width: 100%;
    height: auto;
}
.lessonVimeoVideoDiv{
    float: left;
    width: 100%;
    margin-bottom: 26px;
}
#vimeoIFrame{
    float: left;
    width: 100%;
    margin-left: 0;
}
/* -- review correct incorrect answer -- */
.correctTextAnswerContainer{
    display: none;
    float: left;
    width: 100%;
    height: auto;
    justify-content: space-around;
    margin-top: 26px;
}
#userAnswer{
    display: none;
    width: 48%;
}
.correctAnswerContainer{
    width: 48%;
}
/* -- test answer inputs -- */
.singleAnswerInput, .openEndedInput{
    display: none;
    width: 100%;
}
.openEndedInfomationContainer .limitReached{
    background-color: #bf161c;
    color: #f2f2f2;
}
.openEndedInfomationContainer .gradedPoints{
    background-color: #056c9b;
    color: #f2f2f2;
    border-top-right-radius: 3px;
}
.openEndedInfomationContainer span{
    display: block;
    width: 90%;
    margin-left: 5%;
    margin-top: 1%;
}
.limitReached span{
    font-weight: bold;
    border: 2px solid #f2f2f2;
}
.gradedPoints span{
    font-weight: bold;
    border: 2px solid #f2f2f2;
}
/* -- remaining test parts -- */
.remainingTestPartCouner{
    float: right;
    width: 50%;
    height: 50px;
    background-color: #fdfdfd;
    border-bottom: none;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.remainingTestPartCouner p{
    text-align: center;
    font-size: 2rem;
    padding-right: 26px;
}
/* -- test navigation -- */
.testnav{
    float: right;
    position: fixed;
    bottom: 0;
    right: 0;
    width: 75%;  
    max-width: 1500px;  
    height: auto;
    z-index: 400;
}
.textNavTopSection{
    float: left;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-top: 13px;
}
.testNavBox{
    display: flex;
    justify-content: space-around;
    width: 99%;
    height: 100%;
    padding: 1%;
    margin-left: 1%;
    background-color: #fdfdfd; 
    z-index: 500;
}
#submitTestButton, #previousButton{
    display:  none;
}
#previousButton, #nextButton, #submitTestButton{
    width: 35%;
}



.centerMultChoiceContainer{
    float: left;
    width: 80%;
    height: auto;
    margin-left: 10%;
    overflow-x: hidden;
}

.centerMultChoiceContainer .lessonSectionHeader{
    width: 100%;
    margin-left: 0;
}

.multChoiceContainer{
    float: left;
    width: 100%;
    height: auto;
    overflow-x: hidden;
}



.multChoiceOptionBox, .multChoiceBox{
    float: left;
    width: 100%;
    height: auto;
}

.multChoice{
    display: flex;
    width: 100%;
    height: auto;
    justify-content: space-around;
    align-items: center;
    flex-direction: row;    
    margin-bottom: 2.5%;
    visibility: visible;
    animation: none;
    
}

.multChoice:hover{
    cursor: pointer;
}

.multChoice:hover .multBubble, .multChoice:focus .multBubble{
    left: 2.5px;
    opacity: 1;
}

.multChoice.testPartCorrect img{
    -webkit-filter: brightness(0) saturate(100%) invert(27%) sepia(53%) saturate(450%) hue-rotate(71deg) brightness(93%) contrast(89%);
    filter: brightness(0) saturate(100%) invert(27%) sepia(53%) saturate(450%) hue-rotate(71deg) brightness(93%) contrast(89%);
}

.multChoice.testPartIncorrect img{
    -webkit-filter: brightness(0) saturate(100%) invert(11%) sepia(62%) saturate(4331%) hue-rotate(346deg) brightness(103%) contrast(102%);
    filter: brightness(0) saturate(100%) invert(11%) sepia(62%) saturate(4331%) hue-rotate(346deg) brightness(103%) contrast(102%);
}

.multChoice.testPartSubmitted img{
    -webkit-filter: brightness(0) saturate(100%) invert(19%) sepia(61%) saturate(4093%) hue-rotate(183deg) brightness(100%) contrast(96%);
    filter: brightness(0) saturate(100%) invert(19%) sepia(61%) saturate(4093%) hue-rotate(183deg) brightness(100%) contrast(96%);
}

/* Multiple choice buttons */

.multipleChoice{
    width: 80%;
    height: auto;
    min-height: 40px;
    padding: 2%;
    cursor: pointer;
    font-size: 1.8rem;
    margin-left: 0;
    background-color: #f2f2f2;
    border: 3px solid transparent;
    border-left: 3px solid #9C9C9C;
    transition-duration: 0.3s;
    text-align: left;
}

.multipleChoice:hover, .multipleChoice:focus{
    border-color:#056c9b;
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}

.multipleChoice:active{
    box-shadow: none;
}

.choiceSelected{
    border-left-color:#4f4c4d;
    border-bottom-color: #4f4c4d;
}

.choiceSubmitted{
    background-color: #fdfdfd;
    border-color:#056c9b;
}

.choiceCorrect{
    background-color: #f2f2f2;
    border-color: #305a30;
}

.choiceWrong{
    background-color: #f2f2f2;
    border-color: #bf161c;
}

.multBubble{
    left: 80px;
    display:block;
    position: relative;
    width: 10%;
    max-width: 40px;
    opacity: 0;
    transition-duration: 0.3s;
    -webkit-filter: brightness(0) saturate(100%) invert(64%) sepia(0%) saturate(0%) hue-rotate(67deg) brightness(94%) contrast(96%);
    filter: brightness(0) saturate(100%) invert(64%) sepia(0%) saturate(0%) hue-rotate(67deg) brightness(94%) contrast(96%);
}

.multBubbleSelected{
    left: 2.5px;
    display:block;
    position: relative;
    width: 10%;
    max-width: 40px;
    opacity: 1;
    transition-duration: 0.3s;
    -webkit-filter: brightness(0) saturate(100%) invert(19%) sepia(61%) saturate(4093%) hue-rotate(183deg) brightness(100%) contrast(96%);
    filter: brightness(0) saturate(100%) invert(19%) sepia(61%) saturate(4093%) hue-rotate(183deg) brightness(100%) contrast(96%);
}

.multBubble img, .multBubbleSelected img{
    display: block;
    width: 50%;
    height: auto;
}


#lessonSettingsModal .inputContainer.animations{
    width: 100%;
}

.inputContainerContent{
    background-color: #fdfdfd;
}

/* responsive screen code */
@media only screen and (min-width: 1500px) {
/* Extra large devices (large laptops and desktops, 1500px and up) */
    .testnav{
        position: sticky;
        max-width: calc(1500px - 25%);
    }
}
@media only screen and (min-width: 1200px) and (max-width: 1499px) {
/* Extra large devices (large laptops and desktops, 1200px and up) */
    .viewLessonImageContainer .borderOnHoverButtonGreen{
        width: 40%;
    }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
/* Large devices (laptops/desktops, 992px and up) */
    .viewLessonImageContainer .borderOnHoverButtonGreen{
        width: 40%;
    }
} 
@media only screen and (min-width: 768px) and (max-width: 991px) {
/* Medium devices (landscape tablets, 768px and up) */
    .viewLessonImageContainer .borderOnHoverButtonGreen{
        width: 50%;
    }
    .openEndedInfomationContainer{
        flex-wrap: wrap;
    }
    .openEndedInfomationContainer p{
        width: 33.33%;
        padding-left: 5px;
        text-align: left;
    }
    .gradedPoints span{
        padding-left: 13px;
    }
}
@media only screen and (min-width: 601px) and (max-width: 767px) {
/* Small devices (portrait tablets and large phones, 600px and up) */
    .organizationContainer, .currentCommmunityContainer{
        width: 100%;
    }
    .currentCommunityCard{
        width: 100%;
    }
    .testSpecialContainer .topSpecialContainer{
        min-height: 1px;
    }
    .testHeaderContainer{
        flex-wrap: wrap;
    }
    .testHeaderLeft{
        width: 50%;
        padding-right: 1%;
    }    
    .testHeaderRight{
        width: 50%;
        padding-left: 1%;
    }
    .testHeaderRight{
        order: 2;
    }
    .topCenterButtonCotnainer{
        padding-left: 0;
        padding-right: 0;
    }    
    .leaveTestContainer button, .submitTestBox button, .reviewTestBox button{
        width: 95%;
        margin-left: 2.5%;
    }
    .testHeaderCenter{
        order: 3;
        width: 100%;
        margin-top: 2%;
        padding-left: 0;
        padding-right: 0;
    }
    .testHeaderLeft{
        order: 1;
    }
    .testLeftSide, .test{
        width: 100%;
    }    
    #openInstructionModalButton{
        width: 49%;
        margin-right: 0;
    }
    .showPartsBox .secondaryButtonGreen{
        width: 49%;
    }    
    .testTimerContainer{
        width: 100%;
    }
    .showTimerBox{
        padding-left: 0;
    }    
    #testTimerButton{
        width: 100%;
    }    
    .testPart{
        width: 10%;
    }    
    .viewLessonImageContainer{
        display: none;
    }    
    .answerSubmittedModal{
        width: 80%;
        height: auto;
        margin-right: 10%;
    }
    .multChoiceContainer{
        width: 80%;
        margin-left: 10%;
    }    
    .documentListItem{
        float: left;
        width: 50%;
    }
    .testnav{
        width: 100%;
    }  
    #previousButton, #nextButton{
        width: 48%;
    }  
    input[type="text"], .test_input{
        width: 80%;
    }    
    .textareaContainer{
        display: none/*inline-block*/;
        width: 80%;
        min-width: 80%;
        max-width: 80%;
        margin-left: 0;
    }    
    .lessonSettingsContainer{
        margin-top: 2%;
    }    
    #testCompleteModal .buttonBox{
        justify-content: flex-start;
    }
    .imageBox{
        width: 32%;
    }
    .remainingTestPartCouner p{
        font-size: 1.8rem;
    }
    #testInstructionsModal .modalButtonContainer{
        padding-left: 10px;
        padding-right: 10px;
    }
    #testInstructionsModal .modalButtonContainer #instructionsBackButton,
    #testInstructionsModal .modalButtonContainer #organizationTestCloseButton,
    #testInstructionsModal .modalButtonContainer #organizationTestStartButton{
        width: 48%;
    }
    #exitTestModal .modalButtonContainer{
        padding-left: 10px;
        padding-right: 10px;
    }
    #exitTestModal .modalButtonContainer #exitTestModalButton,
    #exitTestModal .modalButtonContainer #continueTestModalButton{
        width: 48%;
    }
    .openEndedInfomationContainer{
        flex-wrap: wrap;
    }
    .openEndedInfomationContainer p{
        width: 33.33%;
        padding-left: 5px;
        text-align: left;
    }
    .remainingTestPartCouner{
        width: 50%;
    }
    .gradedPoints span{
        padding-left: 13px;
    }
    .textNavTopSection{
        flex-wrap: wrap;
        padding-left: 0;
    }
    .inputContainer.singleAnswerInput,
    .inputContainer.openEndedInput{
        width: 98%;
        margin-bottom: 0px;
    }
}
@media only screen and (max-width: 600px) {
/* Extra small devices (phones, 600px and down) */
    .testSpecialContainer .topSpecialContainer{
        min-height: 1px;
    }
    .testWrapper{
        margin-bottom: 100%;
    }
    .organizationContainer{
        width: 100%;
    }
    .testHeaderContainer{
        flex-wrap: wrap;
    }
    .testHeaderLeft{
        width: 50%;
        padding-right: 1%;
    }
    .testHeaderRight{
        width: 50%;
        padding-left: 1%;
        order: 2;
    }    
    .submitTestBox{
        margin-top: 5%;
    }    
    .leaveTestContainer button, .submitTestBox button, .reviewTestBox button{
        width: 90%;
        margin-left: 5%;
    }
    .testHeaderCenter{
        order: 3;
        width: 100%;
        margin-top: 2%;
    }
    .topCenterButtonCotnainer{
        padding-left: 0;
        padding-right: 0;
    }
    .showPartsBox .secondaryButtonGreen{
        width: 49%;
    }
    .testHeaderLeft{
        order: 1;
    }
    .test{
        width: 100%;
        margin-bottom: 2%;
    }
    .testLeftSide, .multChoiceContainer{
        width: 100%;
        padding-left: 1%;
        padding-right: 1%;
    }    
    #openInstructionModalButton{
        width: 49%;
        margin-right: 1%;
    }    
    .testTimerContainer{
        width: 100%;
    }    
    #testTimerButton{
        width: 100%;
    }
    .contentAttachmentsSection{
        width: 49%;
    }    
    .testPart{
        width: 10%;
    }
    .viewLessonImageContainer{
        display: none;
    }
    .answerSubmittedModal{
        width: 90%;
        height: auto;
        margin-right: 5%;
    }
    .testnav{
        width: 100%;
    }
    #previousButton, #nextButton, #submitTestButton{
        width: 48%;
    }
    .textNavTopSection{
        padding-left: 0;
        flex-wrap: wrap;
    }    
    .textareaContainer{
        display: none/*inline-block*/;
        width: 80%;
        min-width: 80%;
        max-width: 80%;
        margin-left: 0;
    }
    .lessonSettingsContent{ 
        z-index: 1; 
        left: 0;
        bottom: 0;
        width: 100%; 
        height: 50%; 
    }    
    .documentListItem{
        float: left;
        width: 50%;
    }    
    .lessonSettingsContainer{
        margin-top: 2%;
    }    
    .lessonSettingsButton{
        width: 50%;
    }
    .imageBox{
        width: 49%;
    }    
    #testCompleteModal .buttonBox{
        justify-content: flex-start;
    }
    #testCompleteModal #reviewTestButton, #testCompleteModal #submitTestModalButton, .testPageLink{
        margin: 1%;
        width: 48%;
    }
    .remainingTestPartCouner p{
        font-size: 1.8rem;
    }    
    #testInstructionsModal .modalButtonContainer{
        padding-left: 10px;
        padding-right: 10px;
    }
    #testInstructionsModal .modalButtonContainer #instructionsBackButton,
    #testInstructionsModal .modalButtonContainer #organizationTestCloseButton,
    #testInstructionsModal .modalButtonContainer #organizationTestStartButton{
        width: 48%;
    }
    #exitTestModal .modalButtonContainer{
        padding-left: 10px;
        padding-right: 10px;
    }
    #exitTestModal .modalButtonContainer #exitTestModalButton,
    #exitTestModal .modalButtonContainer #continueTestModalButton{
        width: 48%;
    }
    .correctTextAnswerContainer{
        flex-wrap: wrap;
    }
    .userAnswerContainer, .correctAnswerContainer,
    #wrongUserAnswer{
        width: 48%;
    }
    .centerMultChoiceContainer{
        width: 100%;
        margin-left: 0;
    }
    .inputContainer.singleAnswerInput,
    .inputContainer.openEndedInput{
        width: 98%;
        margin-bottom: 0px;
    }
    .remainingTestPartCouner{
        width: 50%;
    }
    .gradedPoints span{
        padding-left: 13px;
    }
}
@media only screen and (max-width: 400px) {
/* Super Extra small devices (phones, 400px and down) */
    .testPart{
        width: 15%;
    }
    .userAnswerContainer, .correctAnswerContainer, #wrongUserAnswer, #userAnswer{
        width: 90%;
    }

}