.testBox{
    /*border: 1px solid #EEE;
    /*box-shadow: 0 0 0.5rem #F2F2F2;*/
    background-color: var(--themeColorModeUiElementBackground);
    border-radius:1rem;
    margin: 0 0 1rem 0;
    display:flex;
}

.testBox.flashcard{
    min-height:50vh;
    position: relative;
    transition: all 400ms ease-in-out;
}

.testBox.flashcard.active{
    border:2px solid var(--themeMain);
}

.testBox.flashcard.inactive{
    opacity:0.1;
}

.mpInfoBox{
    border-radius: 0.5rem;
    margin: 0 10% 1rem 10%;
    padding: 1rem;
    font-size: 1.1rem;
}

.mpTextContainer{
    padding:0.25rem 3rem;
    text-align: center;
}

.mpTextContainer SMALL{
    display: block;
    margin-top:1rem;
}

.mpButtonContainer{
    margin-top:0.5rem;
    flex:1 1;
    text-align: center;
}

.mpButtonContainer .button{
    background-color: var(--themeColorText);
    border-color: var(--themeColorModeText);
    color: var(--themeColorTextInvert);
    font-size:0.9rem;
    padding:0.5rem 2rem;
    margin-top:1rem;
}

.mpInfoBox .mpLogo{
    display: inline-block;
    width:90px;
    height:16px;
    margin-left:0.25rem;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 0 3px;
    background-image: url("/lib/images/logoPro-inv.png");
}
:root.darkTheme .mpInfoBox .mpLogo{
    background-image: url("/lib/images/logoPro.png");
}

/*
.testBox.flashcard .flashcardNumber{
    position: absolute;
    font-size:5rem;
    left:6rem;
    top:50%;
    transform: translateY(-50%);
    color:var(--themeMainLiteMax);
}
*/


.testBox.flashcard .sides{
    flex:auto;
    display: flex;
    position: relative;
}

.testBox.flashcard .image{
    margin: 2rem 2rem 2rem -1rem;
    box-sizing: border-box;
}

.testBox.flashcard .image IMG{
    border-radius:1rem;
}

.testBox.flashcard .side{
    margin:2rem;
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding:2rem 8rem;
    box-sizing: border-box;
    text-align: center;
    width:100%;,
}

.testBox.flashcard .questionOptions{
    margin-top:1rem;
    font-size:80%;
}

.testBox.flashcard .questionOptions > DIV{
    border-bottom:1px solid #32323210;
    padding:0.5rem 2rem;
    display: block;
}


.testBox.flashcard .flashcardNumber{
    position: absolute;
    top:0.5rem;
    margin:0;
    right:2rem;
    font-weight: bold;
}


.testBox.flashcard .body{
    display: none !important;
}

.testBox.flashcard .pairElement{
    background-color: var(--themeMainLiteMax);
    display: inline-block;
}

.testBox.flashcard .answerBox{
    margin:2rem 0 0 0;
    display: flex;
}

.testBox.flashcard .statusIndicators{
    position: absolute;
    bottom:2rem;left:50%;
    transform: translateX(-50%);
}

.testBox.flashcard .statusIndicators .button{
    padding:0.5rem 2rem;
    background-color: var(--themeColorModeUiQuizElementBackground);
    border-color: var(--themeColorModeUiQuizElementBackground);
}

.testBox.flashcard .statusIndicators .button:hover{
    background-color: var(--themeMainMed);
    border-color: var(--themeMainMed);
}

.testBox:first-of-type{
    margin-top:0;
}

.testBox:last-of-type{
    border-bottom: 1px solid var(--themeColorModeBorders);
}

.testBox .body{
    flex:auto;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    border-radius: 1rem;
}

.testBox .body.correct{
    background-color: var(--themeMainLiteMax);
}


.testBox .body.correct .summaryAnswerBlock{
    background-color: var(--themeMainLiteMax);
}

.explanation
{
    padding:1rem;
    border-radius:1rem;
    margin:0 2rem 1rem 2rem;
    color:var(--themeMain);
    font-size:1rem;
    display: flex;
    align-items: center;
    background-color: var(--themeMainLiteMax);
}

.testBox .body.correct .explanation{
    background-color: var(--themeMain);
    color:var(--themeColorTextInvert);
}

.explanation .icon{
    font-size:1.2rem;
    padding:0 1rem;
    width:2rem;
}

.explanation .message{
    flex:auto;
}

.testBox .hintBox{
    padding:0.5rem;
}

.testBox .hintBox .letter{
    padding:0.5rem;
    width:1rem;
    text-align: center;
    text-transform: uppercase;
    font-weight: bold;
    background-color: var(--themeColorModeUiQuizElementBackground);
    color:var(--themeColorModeText);
    border:1px solid var(--themeColorModeBorders);
    color:var(--themeColorModeText);
    margin:0 0.5rem 0 0;
    border-radius: 0.25rem;
    display: inline-block;
    cursor:pointer;
}

.testBox .body .questionNumber{
    font-size:0.8rem;
    background-color: var(--themeMainMed);
    display: inline-block;
    padding:0.25rem 1rem;
    border-radius: 1rem 0 1rem 0;
    transition: all 1s;
    box-sizing: border-box;
}
.testBox .body .questionSummary{
    font-size:0.8rem;
    background-color: var(--themeColorModeButtonBackground);
    color:var(--themeColorModeTextMed);
    display: inline-block;
    padding:0.25rem 1rem;
    box-sizing: border-box;
    border-radius: 0 1rem;
    margin-left: 1rem;
    flex:auto;
}

.testBox .body .questionSummary.correct{
    color: var(--themeMain);
}

.testBox .body .questionSummary.incorrect{
    color: var(--themeColorModeBackgroundDarker);
    color: var(--themeColorTextInvert);
}

.testBox .body .questionNumber .icon{
    margin-right: 0.5rem;
}

.testBox .body .questionNumber.incorrect{
    border-right-color: #323232;
    background-color: #323232;
    color:#FFFFFF;
}

.questionText{
    font-weight:bold;
    margin:0 3rem 2rem 3rem;
    font-size:1.1rem;
    border-bottom:1px solid var(--themeColorModeBorders);
    padding:0.5rem 0 0.5rem 0;
}


.testBox .body .answerBox{
    height:100%;
    padding: 1rem 3rem 3rem 3rem;
    /*display: flex;
    flex-direction: column;*/
}

.testBox .body .answerBox.qwt6{
    line-height: 2rem;
}

.testBox .body .answerBox H5{
    font-size:0.9rem;
    padding:0 0 0.25rem 0;
    color:var(--themeColorModeTextMed);
    text-transform: uppercase;
    display: inline-block;
    margin:0 0 1rem 0;
}

.testBox .image{
    position: relative;
}

.testBox .image IMG{
    display: block;
    border-radius: 0 0.5rem 0.5rem 0;
    width: 25vw;
    min-height: 25vw;
    object-fit: contain;
    cursor:zoom-in;
}

.testBox.summary .image IMG{
    width:10vw;
}

.testBox .type6Text{
    line-height:1.8rem;
}


.imageFullscreenContainer{
    position: fixed;
    top:0;left:0;width:100%;height:100%;
    z-index: 100;
}

.imageFullscreenContainer IMG{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 0.25rem;
    border:2rem solid var(--themeColorModeButtonBackground);
    cursor:zoom-out;
    max-width:100%;
    max-height: 100%;
    -webkit-box-shadow: 0px 12px 27px -12px rgba(0, 0, 0, 1);
    -moz-box-shadow: 0px 12px 27px -12px rgba(0, 0, 0, 1);
    box-shadow: 0px 12px 27px -12px rgba(0, 0, 0, 1);
}

.zoomButton{
    position: absolute;
    bottom:1rem;right:1rem;
    background-color: #000000CC;
    color:#FFF;
    padding:0.5rem;
    border-radius: 0.25rem;
    cursor: pointer;
}

.testBox .buttons{
    position: relative;
    padding: 0.5rem 1rem;
    border-radius:0 0 0.25rem 0.25rem;
    margin:0;
    border:none;
    height:1.8rem;
    background-color: var(--themeColorModeButtonBackground);
}

.testBox .sequence{
    margin-bottom:1rem;
    display: flex;
    align-content: center;
    align-items: center;
    padding:1rem;
}

.tFRow{
    margin-bottom:1rem;
    display: flex;
    align-content: center;
    align-items: center;
    padding:1rem;
    background-color: var(--themeColorModeUiQuizElementBackground);
    border:1px solid var(--themeColorModeBorders);
    border-radius:0.5rem;
}

.tFRow .sentence{
    flex:auto;
}

.switch{
    font-weight: bold;
    letter-spacing: 0.075rem;
    background-color: var(--themeColorModeButtonBackgroundHover);
    border-radius: 1rem;
    margin-left:3rem;
    padding:0.25rem 1rem;
    cursor: pointer;
    width:100px;
    min-width: 100px;
    text-align: right;
    transition: all 1s;
    font-size:0.7rem;
    position: relative;
    box-sizing: border-box;
    text-transform: uppercase;
}



.switch.left{
    margin-right:3rem;
    margin-left:0;
}

.switch .dot{
    position: absolute;
    transition: all 400ms;
    width:1rem;height:1rem; border-radius: 0.5rem;
    background-color: var(--themeColorTextInvert);
    top:0.2rem;
}

.switch.ccB .dot, .switch.true .dot{
    left:6px;
    background-color: var(--themeColorText);

}

.switch.false .dot{
    left:78px;
    background-color:var(--themeColorText);
}

.switch.false{
    background-color: var(--themeColorModeButtonBackground);
    border:1px solid var(--themeColorModeBorders);
    color:var(--themeColorText);
    text-align: left;
}

.switch.true{
    color:var(--themeColorTextInvert);
}

.testBox .sequence:last-of-type{
    margin-bottom:0;
}

.testBox .sequence LABEL{
    font-weight:bold;
    flex:1 1;
    margin:0 1rem 0 0;
}

.testBox .sequence .input{
    flex:2 2;
}

.testBox INPUT{
    margin:0;
    border:none !important;
    border:1px solid var(--themeMain) !important;
    background-color: var(--themeColorModeUiQuizElementBackgroundHover);
    transition: all 1s;
}

.testBox INPUT:focus{
    border-bottom:1px dashed #323232;
    background: linear-gradient(-10deg, var(--themeColorTextInputFocus) 0%, var(--themeMainLiteMax) 100%);
    outline: none;
}

.testBox .buttons .learnIndicator{
    position: absolute;
    right:1rem;
    top:0.4rem;
    background-color: var(--themeColorModeUiElementBackground);
    border:1px solid var(--themeColorModeBorders);
    border-radius: 0.25rem;
    font-size:0.8rem;
    padding:0.25rem 0.5rem;
}

.testBox .buttons .learnIndicator .dot{
    display: inline-block;
    margin:0 0.5rem;
}

.testBox .buttons .learnIndicator .message{
    animation: learnIndicatorWait 5s ease 0s infinite normal forwards;
}

.testBox .buttons .learnIndicator I{
    margin-left:1rem;
}

.testBox .buttons .learnIndicator I:first-of-type{
    margin-left:0;
}

.testBox .buttons .button{
    border:1px solid var(--themeColorModeBorders);
    border-radius:0.25rem;
    display: inline-block;
    background-color: var(--themeColorModeUiQuizElementBackground);
    color:var(--themeColorModeText);
    font-size:0.8rem;
    padding:0.2rem 0.5rem;
    margin:0 0.5rem 0 0;
}

.answerCheckbox{
    flex:1 1;
    max-width: calc(50% - 1rem);
    min-width: calc(50% - 1rem);
    box-sizing: border-box;
    background-color: var(--themeColorModeUiQuizElementBackground);
    font-weight: normal;
    margin:0 1rem 1rem 0;
    padding:1rem 2rem 2rem 1rem;
    border-radius: 1rem;
    border:1px solid var(--themeColorModeBordersLite);
    font-size:1rem;
    display: inline-flex;
    align-content: center;
    cursor:pointer;
    transition:all 500ms;
}

.typeBox .answerCheckbox{
    margin:0;
}

.testBox.repetition .answerCheckbox{
    background-color: transparent;
    border:none;
    min-width: auto;
    max-width: none;
    display: block;
    padding:0.5rem 0;
    margin:0;
    font-weight: normal;
}

.answerCheckbox.checked,
.answerCheckbox.checked:hover{
    color:var(--themeColorText);
    border-color: var(--themeMainLite) !important;
    background-color: var(--themeMainLiteMax) !important;
}

.answerCheckbox .icon{
    font-size: 2rem;
}

.answerCheckbox.checked .icon{
    color: var(--themeMain);
}

.answerCheckbox SPAN.check{
    font-size:1.2rem;
    margin-right:1rem;
}


.answerCheckbox.text{
    max-width: initial;
    min-width: auto;
    display: block;
}

.answerCheckbox.active:hover{
    background-color: var(--themeColorModeUiQuizElementBackgroundHover);
    border-color:var(--themeColorModeUiQuizElementBackgroundHover);
}

.answerCheckbox.hint{
    opacity: 0.2;
    text-decoration: line-through;
    cursor: default;
}

.answerCheckbox .fa-regular, .answerCheckbox .icon{
    color:#CCC;
    font-size:1.5rem;
    margin-right:1rem;
}

.imageCheckboxContainer{
    display: flex;
    flex-wrap: wrap;
}

.imageCheckboxContainer .imageCheckbox{
    flex:1 1;
    max-width:calc(50% - 1rem);
    min-width:calc(50% - 1rem);
    margin:0.5rem;
    box-sizing: border-box;
}

.imageCheckboxContainer .imageCheckbox .imageContainer{
    width: 100%;
    background-color: #FFF;
    background-position: center;
    border-radius:1rem;
}

.imageCheckboxContainer .imageCheckbox .imageContainerMask{
    background-color: #000000AA;
    padding:1rem;
    transition: all 400ms;
    border-radius:1rem;
}

.imageCheckboxContainer .imageCheckbox.checked .imageContainerMask{
    background-color: var(--themeMainMed);
}

.imageCheckboxContainer .imageCheckbox.wrong{
    opacity:0.1;
}

.imageCheckboxContainer .imageCheckbox IMG{
    max-height:25vh;
    min-height:25vh;
    width:100%;
    object-fit: contain;
    box-sizing: border-box;
    display: block;
    margin:0 auto;
    cursor:pointer;
}

.pairs{
    display: flex;
    width:100%;
}


.pairElement{
    flex: 1 1;
    padding: 1rem 2rem;
    box-sizing: border-box;
    border-radius: 1rem;
    margin: 0 0.5rem 0.5rem 0;
    text-align: center;
    background-color: var(--themeColorModeUiQuizElementBackground);
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    flex-direction: column;
    font-size:0.9rem;
    transition: all 400ms;
    border:1px solid var(--themeColorModeBordersLite);
}

.pairElement.inactive{
    opacity:0.1;
}

.pairElement.active{
    cursor: pointer;
}

.pairElement.active:hover{
    background-color: var(--themeColorModeUiQuizElementBackgroundHover);
}

.pairElement.match{
    max-width:2rem;
    font-weight: bold;
    color: var(--themeMain);
}

.pairElement.match:hover{
    color:#FFFFFF !important;
    background-color: var(--themeMain);
}

.orderBox{
    font-size:1rem;
    padding:1rem 2rem;
    box-sizing: border-box;
    background-color: var(--themeColorModeUiQuizElementBackground);
    border: 1px solid var(--themeColorModeBordersLite);
    border-radius: 1rem;
    margin:0 1.5rem 1.5rem 0;
    display: inline-block;
    text-align: center;
    cursor: pointer;
}

.orderField, .typeField{
    flex:1 1;
    padding: 1rem;
    background-color: var(--themeColorModeUiQuizElementBackground);
    border: 1px solid var(--themeColorModeBordersLite);
    border-radius: 1rem;
}

.orderField .orderBox{
    display: inline-flex !important;
}

.orderField .orderBox,
.typeField .typeBox{
    display: flex;
    background-color: var(--themeColorModeUiElementBackground);
    margin:0;
    font-weight: bold;
    text-align: left;
    padding:1rem;
    cursor: auto;
    border-radius: 1rem;
}
.typeField .typeBox{
    margin-bottom:1rem !important;
}

.orderField .orderBox .orderNumber,
.typeField .typeBox .orderNumber{
    min-width:3rem;
    max-width: 3rem;
    line-height:3rem;
    border-radius: 0.25rem;
    font-size:1.8rem;
    margin:0 2rem 0 0;
    text-align: center;
    flex:auto;
    background-color: var(--themeMainLiteMax);
    color: var(--themeMainMed);
}

.comboBox{
    padding:0.15rem 1rem;
    margin:0 0.5rem 0.5rem 0;
    display: inline-block;
    position: relative;
    border-radius: 0.25rem;
    cursor:pointer;
    transition: all 1s;
    user-select:none;
}

.comboBox .options{
    position: absolute;
    top:1.8rem;left:0;
    background-color: #FFF;
    color:#000;
    z-index: 100;
    border-radius: 0 0.5rem 0.5rem 0.5rem;
    border-top:none;
    white-space: nowrap;
    min-width:3rem;
    display: inline-block;
    margin-bottom:1rem;
}

.comboBox .options .option{
    padding:0.4rem 4rem 0.4rem 2rem;
    background-color: var(--themeMainLite);
}
.comboBox .options .option:first-of-type{
    border-radius:0 0.5rem 0 0;
}

.comboBox .options .option:last-of-type{
    border-radius:0 0 0.5rem 0.5rem;
}

.comboBox .picked{
    font-weight: bold;
    padding:0 0.5rem;
}

.comboBox.ccError{
    background-color: #b5163d !important;
    color:#FFFFFF !important;
}

.comboBox .options .option:hover{
    background-color: var(--themeMain) !important;
    color: #FFF !important;
}

.comboBox .options .option:nth-child(even){
    background-color: var(--themeMainLiteMax);
}

.pairElement.picked{
    opacity:0.2;
}

.answerCheckboxContainer{
    margin:0 0 1rem 0;
    transition: all 1s;
    display: flex;
    flex-wrap: wrap;
}

.answerCheckboxContainer.wrong{
    opacity: 0.1;
    color:#FF0000;
    order:100;
}

.assistant{
    position: relative;
    background-color: var(--themeMainLiteMax);
    padding:1rem;
    box-sizing: border-box;
    border-radius:1rem;
}

.assistant.fixed{
    position: fixed;
    top:4rem;
}

.assistant .timer{
    font-size:2.5rem;
    text-align: center;
    font-weight: bold;
}

.assistant .timer SPAN.digit{
    display: inline-block;
    width:3.2rem;
}

.assistant .progressBar{
    background-color: #DADADA;
    margin:1rem 0;
    height:2rem;
    border-radius:0.5rem;
    position: relative;
}

.assistant .progressBar .gaugePercent{
    position: absolute;left:50%;top:50%;
    transform: translate(-50%,-50%);
}

.assistant .progressBar .gauge{
    height:2rem;
    text-align: center;
    border-radius: 0.5rem 0 0 0.5rem;
    background-color: var(--themeMain);
}

.ccError{
    color:#810a27 !important;
}

.ccCorrect{
    color:#0fa828 !important;
}

.ccWarning{
    color:#d1a244;
}

@media screen and (max-width: 640px){
    .testBox{
        flex-direction: column-reverse;
        margin:0.5rem 0;
    }

    .testBox .sequence{
        display: block;
    }

    .testBox .sequence LABEL{
        display: block;
        margin-bottom:1rem;
    }

    .testBox .image{
        margin:0;
    }

    .testBox.flashcard .image{
        margin:0;
    }

    .testBox .body .questionSummary{
        margin:0;
        border-radius: 0 0 0.5rem 0.5rem;
        line-height:1.5rem;
        display: block;
    }

    .testBox.summary .image IMG{
        width:100%;
    }

    .testBox.flashcard .side{
        padding:1rem;
        margin:0.5rem;
    }

    .testBox .image IMG{
        border-radius: 0.5rem;
        max-height:40vh;
        width:100%;
        min-width:100%:
    }

    .testBox .body .questionText{
        font-size:1rem;
        margin: 0.5rem;
    }

    .testBox .body .answerBox{
        padding:3rem 0.5rem;
    }

    .testBox .body .questionNumber{
        display: block;
        border-radius: 1rem 1rem 0 0;
        padding:0.5rem 1rem;
        font-size:0.7rem;
        background-color: var(--themeColorModeBackgroundDarker);
        border-bottom:1px solid var(--themeMain);
        color:var(--themeColorTextInvert);
    }

    .testBox.summary .body .questionNumber{
        border-radius: 0.5rem 0.5rem 0 0;
    }

    .answerCheckbox{
        min-width: auto;
        max-width: initial;
        font-size: 0.8rem;
        padding: 0.5rem;
        margin: 0 0 0.5rem 0;
        display: flex;
        align-items: center;
        border-radius: 0.25rem;
    }

    .answerCheckbox .fa-regular, .answerCheckbox .icon{
        font-size:1rem;
    }

    .orderBox{
        font-size:0.9rem;
        margin:0 auto 1rem auto
    }

    .orderField .orderBox .orderNumber, .typeField .typeBox .orderNumber{
        max-width:1.5rem;
        min-width: 1.5rem;
        font-size:0.9rem;
        line-height:1.2rem;
        margin:0 1rem 0 0;
    }

    .pairs{
        display: flex;
        flex-direction: column;
        width:100%;
        margin-bottom:2rem;
    }

    .pairs .pairElement:nth-child(1){
        border-radius: 1rem 1rem 0 0;
        margin-bottom:0;
        border-bottom: none !important;
    }

    .pairs .pairElement:nth-child(2){
        border-radius: 0;
        margin-bottom:0;
        border-top: none !important;
        border-bottom: none !important;
    }

    .pairs .pairElement:nth-child(3){
        border-top: none !important;
        border-radius: 0 0 1rem 1rem;
    }

    .pairElement{
        font-size:0.8rem;
        padding:0.5rem 1rem;
        border-radius: 0.25rem;
        margin-right:0;
        font-weight: normal;
    }

    .pairElement.match{
        max-width: none;
        font-size:1rem;
        padding:0;
    }

    .tFRow{
        flex-direction: column;
    }

    .tFRow .sentence{
        font-size:0.8rem;
    }

    .comboBox .options {
        position: fixed;
        top: 0;
        left: 0;
        display: flex;
        flex-direction: column;
        background-color: var(--themeColorModeBackground);
        color: var(--themeColorModeText);
        z-index: 100;
        white-space: nowrap;
        width: 100vw;
        height: 100vh;
        justify-content: center;
    }

    .comboBox .options .option {
        padding:0.5rem;
        border-radius: 0;
        text-align: center;
    }

    .testBox .type6Text{
        font-size:0.8rem;
        line-height: 1.2rem;
    }

    .mpInfoBox{
        margin:0 0.5rem;
    }

    .mpTextContainer{
        padding:1rem;
    }
}

@keyframes learnIndicatorWait {
    0% {
        color:#EEE;
    }

    50% {
        color:#333;
    }

    100% {
        color:#EEE;
    }
}

@keyframes learnCheckboxWrong {
    0%{
        color:#000000;
    }

    60%{
        color:#FF0000;
    }

    70%{
        opacity: 1;
    }
    99%{
        opacity:0;
    }
    100%{
        opacity:0;
        clip-path: inset(100% 0 0 0);
    }
}

@keyframes learnItemIncorrect {
    10%{
        background-color:#FF0000;
        color:#FFF;
        margin-left:10px;
    }
    20%{
        margin-left:-10px;
    }
    30%{
        margin-left:5px;
    }
    40%{
        margin-left:-5px;
    }
    50%{
        margin-left:2px
    }
    60%{
        margin-left:-2px
    }
    70%{
        margin-left:inherit;
        background-color:#FF0000;
        color:#FFF;

    }
    100%{
        background-color: inherit;
        color:inherit;
    }
}

@keyframes learntFRowIncorrect {
    0%{
        color:#FFF;
        margin-left:10px;
    }
    40%{
        background-color:#FF0000;
    }
    80%{
        background-color:inherit;
        opacity:1;
    }
    100%{
        opacity:0.1;
    }
}