:root {
    --sq-color-lightblack: #333333;
    --sq-color-darkgrey: #999999;
    --sq-color-white: #FFF;
    --sq-color-blue: var(--ev-color-blue);
    --sq-fixed-header-heigth: 70px;
    --sq-fixed-footer-heigth: 70px;
    --sq-color-right: #8AC50F;
    --sq-color-noanswer: #93D12A;
    --sq-color-wrong: #FD7822;

    --ev-sq-alert: #FF0000;
    --ev-sq-correct: #93D12A;
    --ev-sq-selected-border: #21B3FD;
    --ev-sq-incorrect: #FD8125;
    --ev-sq-evaluate: #28B3FD;
    --ev-sq-noanswer: #93D12A;
    --ev-sq-unanswered: #E2E2E2;
    --ev-sq-card-border: #E2E2E2;
    --ev-sq-object-border: #D2D2D2;
    --ev-sq-text-bg: #F2F2F2;
    --ev-sq-mark-background: #EBF9FF;
    --ev-sq-selected: #D4F0FF;
    --ev-sq-button-bg: #21B3FD;
    --ev-sq-secondary-button-bg: #D8D8D8;
    --ev-sq-selected-button-bg: #999999;
    --ev-sq-save-button-bg: #93D12A;
    --ev-sq-self-evaluation-bottom-bg: #EBEBEB;

    /*
    --ev-sq-identification-criteria-c0: #FFCD21;
    --ev-sq-identification-criteria-c1: #6EDDD4;
    --ev-sq-identification-criteria-c2: #EA8199;
    --ev-sq-identification-criteria-c3: #818FFF;
    */
    --ev-sq-identification-criteria-c0: #FDCE2E;
    --ev-sq-identification-criteria-c1: #9CC528;
    --ev-sq-identification-criteria-c2: #A4D7F6;
    --ev-sq-identification-criteria-c3: #F8A5FE;

    --ev-sq-success-color: #92CE2E;

    /* Trumbowyg */
    --tbw-cell-vertical-padding: 4px;
    --tbw-cell-horizontal-padding: 8px;
    --tbw-cell-line-height: 1.5em;
}

#player-sq {
    /* overflow: initial !important; */
}

.question-player {
    width: 100%;
    min-width: 300px;
    padding: 0 !important;
    font-family: 'Source Sans Pro Regular',sans-serif;
    font-size: 18px;
    background-color: #FFF;
    overflow: visible;
}

.question-player .item.d-flex *,
.question-player li .d-flex * {
    /* margin: 0px 4px; */
}

.question-player .item.d-flex,
.question-player li .d-flex,
.question-player .item.d-flex mjx-container * {
    margin: 0px 0px;
}

.question-player .item.d-flex strong,
.question-player .item.d-flex b,
.question-player .item.d-flex i,
.question-player .item.d-flex em,
.question-player .item.d-flex u{
    display: contents;
}

.jconfirm-row .jconfirm-cell{
    display: initial !important;
}

.question-player .container {
    width: 100%;
    min-width: 320px;
    height: 100%;
    padding: 0 15px; 
    margin: 0 auto;
}

.question-player .question-object.container,
.question-player #separator-container.container {
    /* padding: var(--sq-fixed-header-heigth) 15px 0 15px; */
    min-height: 300px;
}

.question-player .question-container{
    border: 0px;
    padding: 0px;
    margin-top: 20px;
}

body.question-player .question-object.container.sq-container,
body.question-player .footer-practice .button-container.sq-container{
    max-width: 100%;
}

#player-section{
    margin: 70px 0px 0px 0px;
    font-family: 'Source Sans Pro Regular', sans-serif;   
}

.question-player #question-header-container{
    margin: 0px 0px 0px 0px;
}

.question-player #question-info-container{
    margin: 0px 0px 0px 0px;
    background-color: #EEE;
}

.question-player .assessment-result-header{
    background-color: #EEE;
}

.question-player .assessment-result-header.final-result{
    background-color: #FFF;
}

#object-selfevaluation-container {
    width: 100%;
    background-color: #FFF;
}

/* MODALS */
.question-player .modal .modal-dialog .modal-content .modal-footer button,
.modal-button{
    text-transform: uppercase;
    white-space: normal;
    font-size: 16px;
}

.question-player .button-bar,
.search-results-container .button-bar{
    padding: 10px 0px 10px 0px;
}

#add-random-objects-div-body .text-container {
    height: 45px;
    line-height: 45px;
    white-space: normal;
}

#add-random-objects-div-body span input#totalRandomObjects{
    width: 44px;
    display: inline-block;
}

#add-random-objects-div-body span.text {
    margin: 0px 2px 0px 2px;
    float: left;
}

.question-player .sqeditor-modal input[type="numeric"]{
    width: 44px;
    display: inline-block;
}

.question-player .sqeditor-modal h5.modal-title{
    margin: 6px 0 0;
    padding: 10px 0px 4px 0px;
    position: relative;
    background-color: #FFF;
    z-index: 0;
    width: initial;
    top: initial;
}


@media (min-width: 600px) {
    .question-player .button-bar,
    .search-results-container .button-bar{
        padding: 30px 0px 10px 0px;
    }
}

/* $.alert DIALOGS */
.jconfirm-title-c{
    font-weight: 700;
    text-align: center;
}

/* BUTTONS */
.btn-sq{
    display: inline-block;
    font-weight: 400;
    line-height: 1.5;
    color: #FFF;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    background-color: var(--sq-color-blue);
    border: 1px solid var(--sq-color-blue);
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    border-radius: 0.25rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.btn-sq.disabled{
    pointer-events: none;
    opacity: .35;
}

.btn-sq-secondary{
    background-color: var(--ev-sq-secondary-button-bg);
    border-color: var(--ev-sq-secondary-button-bg);
    color: #000;
}

.btn-sq-secondary:hover {
    background-color: var(--sq-color-lightblack);
    color: var(--sq-color-white);
    text-decoration: none;
}

.btn-sq.add-group-questions,
.btn-sq.add-assessment-question,
.btn-sq.add-quiz-challenge,
.btn-sq.replace-object-item,
.btn-sq.add-random-objects{
    font-size: 16px;
    border-radius: 30px;
}

.btn-sq-object-footer,
.btn-sq-object-footer-secondary,
.btn-sq-object-footer-selected,
.btn-sq-object-footer-save{
    font: 400 16px 'Source Sans Pro Bold', sans-serif !important;
    width: 100%;
    height: 50px;
    border: 2px solid var(--sq-color-blue);
    font-size: 1rem;
    border-radius: 2rem;
    text-transform: uppercase;
}

.btn-sq-object-footer{
    color: #FFF;
    background-color: var(--sq-color-blue);
}

.btn-sq-object-footer-secondary{
    color: var(--sq-color-blue);
    background-color: #FFF;
}

.btn-sq-object-footer-save{
    color: #FFF;
    background-color: var(--ev-sq-save-button-bg);
    border: 2px solid var(--ev-sq-save-button-bg);
    cursor: default !important;
}

.btn-sq-object-footer-selected{
    color: #FFF;
    border: 2px solid var(--ev-sq-selected-button-bg);
    background-color: var(--ev-sq-selected-button-bg);
}

.btn-submit-test,
.btn-exit-test,
.btn-back-test{
    width: 100%;
    font: 700 16px 'Source Sans Pro Regular', sans-serif !important;
    margin: 4px 0px;
    border-radius: 40px !important;
}

.btn-submit-test{
    background-color: var(--sq-color-blue) !important;
    color: #FFF !important;
    border: 2px solid var(--sq-color-blue) !important;
}

.btn-exit-test,
.btn-back-test{
    background-color: #FFF !important;
    color: #333 !important;
    border: 2px solid #333 !important;
}

.btn.close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 36px;
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    padding: 0px;
    font-weight: initial;
    color: inherit;
}

.save-question-result.success .btn.close-btn {
    color: var(--ev-sq-success-color);
}

.save-question-result.error .btn.close-btn {
    color: var(--bs-danger);
}

.btn.close-btn:hover {
    font-weight: 700;
}

.btn.close-btn::before {
    content: "\45";
    width: auto;
    box-shadow: none;
}

/*
.btn,
.btn:hover,
.btn:focus{
    font-family: 'Source Sans Pro Bold', sans-serif;
    font-size: 18px;
    border: none;
    color: #FFF;
    border-radius: 30px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
}
*/

/* LOCUTIONS */

.locution-container .locution .icon{
    font-size: 28px;
    color: var(--sq-color-blue);
    font-weight: 400;
}

.locution-container .locution .icon.playing{
    background: radial-gradient(
        circle at 100%,
        #3cafe9,
        #d5f2ff 50%,
        #21b3fd 75%
    );
    background-size: 200% auto;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: animatedTextGradient 1.5s linear infinite;
}

@keyframes animatedTextGradient {
    to {
      background-position: 200% center;
    }
}

/* == TEST NAVIGATION == */

.test-navigation-container {
    width: 192px;
    height: 40px;
    margin: 0 auto;
    position: inherit;
}

.test-navigation-container .navigation-blocker{
    height: 50px;
    margin: 0 auto;
    width: 100%;
    left: 0px;
    position: absolute;
    z-index: 100;
    background-color: #FFF;
    opacity: 0.8;
    display: none;
}

@media (min-width: 500px){
    .test-navigation-container {
        width: 292px;
    }
}

@media (min-width: 650px){
    .test-navigation-container {
        width: 404px;
    }
}

.test-navigation-container .navigation-button{
    text-align: center;
    width: 50px;
    font-size: 0px;
    float: left;
    margin: 0px 10px;
}

.test-navigation-container .navigation-button span{
    margin: 0;
    -moz-border-radius: 20px;
    border-radius: 20px;
    font-size: 40px !important;
    line-height: 40px;
    background-color: #ededed;
    color: rgb(0,0,0);
    text-align: center;
    align-items: center;
    cursor: pointer;
    display: inline-block;

}

.test-navigation-container .navigation-button .navigation-circle{
    top: 3px;
    position: relative;
}

.test-navigation-container .navigation-button.disabled{
    opacity: 0.2;
    cursor: auto;
    pointer-events: none;
}

.test-navigation-container .navigation-button.carousel-prev span {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
    display: inline-block;
}

.navigation-bar {
    width: calc(100% - 102px);
    height: 45px;
}

.navigation-bar.slick-initialized{
    width: calc(100% - 120px);
}

@media (max-width: 650px) {   
    .navigation-bar.slick-initialized{
        width: calc(100% - 20px);
    }
}

.navigation-bar .navigation-circle{
    float: left;
    margin: 0 5px;
}

.navigation-bar .navigation-circle span{
    width: 40px;
    height: 40px;
    margin: 0;
    -moz-border-radius: 20px;
    border-radius: 20px;
    display: inline-block;
    line-height: 40px;
    background-color: #ededed;
    color: rgb(0,0,0);
    text-align: center;
    align-items: center;
    font-size: 19px;
    font-weight: 700;
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

.navigation-bar .navigation-circle.slick-current span,
.navigation-bar .navigation-circle.slick-slide span.selected{
    background-color: var(--sq-color-blue);
    color: rgb(255,255,255);
}

.navigation-bar .navigation-circle.slick-slide span.completed{
    background-color: rgb(0,0,0);
    color: rgb(255,255,255);
}

.navigation-bar .navigation-circle.slick-slide span:hover{
    background-color: var(--sq-color-blue);
    color: rgb(255,255,255);
}

/* == HEADER FINISH BUTTON == */
.header-test .btn-finish-test{
    width: 40px;
    height: 40px;
    padding: 5px;
    margin: 2px 0;
    font-size: 0;
    text-transform: uppercase;
    border-radius: 20px;
    display: none;
}

.header-test .btn-finish-test span.text{
    margin: 0;
    font-size: 0;
    line-height: 0;
    float: left;
    
}

.header-test .btn-finish-test span.font-icon{
    width: 30px;
    margin: 0;
    font-size: 30px;
    line-height: 30px;
    float: right;
}

@media (min-width: 650px) {   
    .header-test .btn-finish-test{
        width: 150px;
        font-size: 0;
        text-transform: uppercase;
        display: none;
        border-radius: 20px;
    }

    .header-test .btn-finish-test span.text{
        padding: 0 10px;
        font-size: 18px;
        line-height: 30px;
    }

    .header-test .btn-finish-test span.font-icon{
        width: 30px;
        margin: 0;
        font-size: 30px;
        line-height: 30px;
        float: right;
    }
}

.footer-button{
    margin: 10px 0px 10px 0px !important;
    width: 100%;
    padding: 0px 12px !important;
    height: 50px !important;
    border: 2px solid #FFF;
    border-radius: 30px;
    color: #FFF !important;
    font-family: 'Source Sans Pro Bold', sans-serif;
    font-size: 18px;
    background-color: transparent;
    font-weight: 400;
    line-height: 40px;
    text-align: center;
}

.finish-button{
    border: 2px solid #9CC51F;
    background-color: #9CC51F !important;
    color: #FFF;
    text-transform: uppercase;
    /*margin: 0px !important;*/
}

.finish-button:focus,
.finish-button:hover{
    border: 2px solid #9CC51F !important;
    background-color: #9CC51F !important;
    color: #FFF !important;    
}

/* RESOLUTION */

.resolution-button{
    border: 2px solid #666;
    background-color: #666 !important;
    color: #FFF;
    text-transform: uppercase;
    /*margin: 0px !important;*/
}

.resolution-button:focus,
.resolution-button:hover{
    border: 2px solid #666 !important;
    background-color: #666 !important;
    color: #FFF !important;    
}

.question-player .resolution-container{
    background-color: #EFEFEF;
    position: relative;
    /*top: -35px;*/
    z-index: 0;
    /*padding: 55px 15px 15px 15px;*/
    display: none;
}

.footer-practice div:has(> .save-question-result) {
    display: flex;
    justify-content: center;
}

.footer-practice .save-question-result {
    position: absolute;
    background-color: #E5F5D6;
    border: 1px solid var(--ev-sq-success-color);
    padding: 32px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transform: translateY(calc(-100% - 30px));
    opacity: 0;
    transition: opacity 0.5s linear;
    cursor: pointer;
    z-index: 100;
}

.footer-practice .save-question-result.error {
    background: #ffdada;
    border-color: var(--bs-danger);
    color: #cc0000;
}

.footer-practice .save-question-result:hover{
    transition: opacity 0.2s linear;
    opacity: 0.8;
}

.question-player .resolution-container .resolution-header,
.question-player .solution-container .resolution-header{
    height: 39px;
    border-top: 2px solid #666;
}

.question-player .resolution-container .resolution-content,
.question-player .solution-container .resolution-content{
    min-width: 400px;
    padding: 15px 0px 15px 0px;
}    

.question-player .resolution-container .resolution-content .resource.video,
.question-player .solution-container .resolution-content .resource.video{
    margin: 15px 0px 0px 0px;
    display: flex;
}

#object-solution-container.solution-container{
    /*background-color: #EFEFEF;*/
    border-top: 2px solid #D2D2D2;
    position: relative;
    display: none;
    margin: 20px 0px;
}

#object-solution-container .solution-header{
    margin: 20px 0px;
}

#object-solution-container h7{
    font-family: 'Source Sans Pro Bold',sans-serif;
    font-size: 18px;
    line-height: 18px;
    color: var(--sq-color-lightblack);
    text-transform: uppercase;
}

#object-solution-container .solution-title{
    margin: 10px 0px;
}

#object-solution-container div.solution-step ~ .solution-step {
    display: none;
}

#object-solution-container .solution-step {
    margin: 20px 0px;
}

#object-solution-container .solution-footer{
    padding: 10px;
}

#object-solution-container .solution-footer .solution-button{
    text-align: center;
    color: var(--sq-color-white);
    background-color: var(--sq-color-blue);
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 21px;
    border: none;
    width: 42px;
    height: 42px;
    cursor: pointer;
}

#object-solution-container .solution-footer .solution-button div{
    font-size: 42px;
    position: relative;
    line-height: 100%;
}


.container-changed {
    animation: show 600ms 100ms cubic-bezier(0.38, 0.97, 0.56, 0.76) forwards;
    opacity: 0;
    transform: rotateX(-90deg);
    transform-origin: top center;
}

@keyframes show {
    100% {
      opacity: 1;
      transform: none;
    }
}

/* EXTRA CONTAINER */

#object-selfevaluation-criteria-container.extra-container{
    border-top: 2px solid #D2D2D2;
    position: relative;
    display: none;
    margin: 20px 0px;
}

.extra-container .extra-header{
    margin: 20px 0px;
}

.extra-container h7{
    font-family: 'Source Sans Pro Bold',sans-serif;
    font-size: 18px;
    line-height: 18px;
    color: var(--sq-color-lightblack);
    text-transform: uppercase;
}

.extra-container .extra-title{
    margin: 10px 0px;
    font-weight: 700;
}

.extra-container .evaluation-topic{
    width: 100%;
    height: auto;
    min-height: 50px;
    padding: 10px;
    margin: 10px 15px;
    border: 2px solid #21B3FD;
    border-radius: 26px;
    float: left;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    cursor: pointer;
}

.extra-container .evaluation-topic.selected{
    background-color: var(--sq-color-blue);
    color: #FFF;
}

/* RECURSOS */
.resources-layout button.layout-mode {
    border: 2px solid black;
    background: white;
    width: 24px;
    height: 20px;
    border-radius: 3px;
    position: relative;
    transition: all 0.2s linear;
    padding: 0;
}

.resources-layout .layout-mode.no-pointer-events {
    pointer-events: none;
}

.resources-layout button.layout-mode::before {
    content: "";
    display: block;
    background-color: black;
    position: absolute;
    border-radius: 2px;
    top: 2px;
    left: 2px;
    transition: all 0.2s linear;
    pointer-events: none;
}

.resources-layout button.layout-mode[data-layout="left"]::before {
    height: 12px;
    width: 6px;
}

.resources-layout button.layout-mode[data-layout="bottom"]::before,
.resources-layout button.layout-mode[data-layout="top"]::before {
    height: 6px;
    width: 16px;
}
.resources-layout button.layout-mode[data-layout="bottom"]::before{
    top: initial;
    bottom: 2px;
}

.question-object:has(.ui-resizable.ui-resizable-resizing) {
    pointer-events: none;
}

.resources-layout button.layout-mode:hover,
.resources-layout button.layout-mode.active {
    border-color: var(--sq-color-blue);
}

.resources-layout button.layout-mode:hover::before,
.resources-layout button.layout-mode.active::before {
    background-color: var(--sq-color-blue);
}

.question-object:has(.resources-layout) .resources-container {
    position: relative;
    height: 180px;
    background: white;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    z-index: 12;
}

.question-object:has(.resources-layout) .resources-container:empty {
    display: none;
}

/* Question Container Controls / Translations Controls */
.main-resources-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.translationModalQuestionLayout .main-resources-controls {
    display: none;
}

.main-resources-controls .translations-container {
    position: relative;
    display: block;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: flex-end;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 10px;
    padding: 0 0 25px 0;
}

.main-resources-controls .translations-container .general-locutions-toggle-container {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 0;
    cursor: pointer;
}

.main-resources-controls .translations-container .general-locutions-toggle-container .font-icon {
    font-family: 'EvIcons' !important;
    font-size: 50px;
    line-height: 35px;
    cursor: pointer;
}

.main-resources-controls .translations-container .general-locutions-toggle-container #gen-locutions-toggle {
    cursor: pointer;
}

.main-resources-controls .translations-container .translations-menu-container {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 10px;
}

.main-resources-controls .translations-container .translation-button-container {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    padding: 0;
    margin: 0;
    gap: 10px;
}

.main-resources-controls .translations-container .translation-button-container .translation-button {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    /* background-color: #333333; */
    background-color: var(--sq-color-blue);
    padding: 0;
    margin: 0;
    border: none;
    outline: 0;
    cursor: pointer;
    opacity: 1;
}

.main-resources-controls .translations-container .translation-button-container .translation-button.active {
    background-color: var(--sq-color-blue);
}

.main-resources-controls .translations-container .translation-button-container .translation-button i {
    font-size: 24px;
    color: white;
    line-height: 35px;
    font-weight: 400;
}

.main-resources-controls .translations-container .translation-button-container .translation-button:hover {
    color: #000;
}

.main-resources-controls .translations-container .translation-button-container .translation-button.active:hover {
    opacity: 1;
}

.main-resources-controls .translations-container  .info-button {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: rgba(255,255,255,0);
    padding: 0;
    margin: 0;
    border: 2px solid #999999;
    color: #999999;
    outline: 0;
    cursor: pointer;
    opacity: 1;
    font-size: 14px;
    line-height: 16px;
    font-weight: bold;
}

.main-resources-controls .translations-container .info-button:hover {
    opacity: 0.9;
}

.main-resources-controls .translations-container .language-selector-container {
    position: absolute;
    top: 50px;
    left: 0;
    width: 345px;
    height: auto;
    max-height: 315px;
    overflow: auto;
    background-color: #FFFFFF;
    border-radius: 5px;
    display: none;
    z-index: 10;
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.26);
    scrollbar-width: thin;
}

.main-resources-controls .translations-container .language-selector-container.active {
    z-index: 100;
    display: block;
}

.main-resources-controls .translations-container .language-selector-container .language-item {
    width: 100%;
    height: 50px;
    background-color: #FFFFFF;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding: 10px 15px;
    margin: 0;
    gap: 15px;
    flex-wrap: nowrap;
    align-content: center;
    cursor: pointer;
    font-size: 16px;
}

.main-resources-controls .translations-container .language-selector-container .language-item[data-selected="true"] {
    /* background-color: #F2F2F2; */
}

.main-resources-controls .translations-container .translation-button-container .translation-button.notDefault {
    /* background-color: #28B3FD !important; */
}

.main-resources-controls .translations-container .language-selector-container .language-item:hover {
    background-color: #F2F2F2;
}

.main-resources-controls .translations-container .language-selector-container .language-item span.flag {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.main-resources-controls .translations-container .language-selector-container .language-item span.flag img {
    width: 28px;
    height: 28px;
}

.popover-info-white {
    width: 100%;
    max-width: 300px;
}

.popover-info-white .popover-body {
    font-size: 18px;
    line-height: 30px;
    padding: 5px 10px;
}

/* translation modal */

#translationModal {
    background-color: rgba(0,0,0,0.7);
}

#translationModal .modal-dialog {
    max-width: 1140px;
}

#translationModal .modal-dialog .modal-responsive-header {
    position: relative;
    margin: 0;
    padding: 0;
}

#translationModal .modal-dialog .modal-content {
    position: relative;
    margin: 35px 0 35px 0;
    padding: 35px 35px;
}

#translationModal .modal-dialog .modal-responsive-header .close {
    position: absolute;
    top: -23px;
    right: -20px;
    width: 35px;
    height: 100%;
    padding: 0;
    margin-left: auto;
    font-size: 35px;
    line-height: 35px;
    float: initial;
    background: transparent;
    border: 0;
}

.translationModalQuestionLayout img.flag {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 0 25px 0;
}

.animation-element {
    position: relative;
    animation-fill-mode: both;
}

.animation-element.animate__slideInRightsq{
  -webkit-animation-name: none;
  animation-name: none;
opacity:0;
}

.in-view.animation-element.animate__slideInRightsq {
  -webkit-animation-name: slideInRightsq;
  animation-name: slideInRightsq;
	animation-duration: 2000ms;
opacity: 1;
}

.animation-element.dur500 {
  -webkit-transition-duration: 0.5s; /* Safari */
   transition-duration: 0.5s;
  -webkit-animation-duration: 0.5s !important;
   animation-duration: 0.5s !important;
}

.animation-element.dur700 {
  -webkit-transition-duration: 0.7s; /* Safari */
   transition-duration: 0.7s;
  -webkit-animation-duration: 0.7s !important;
   animation-duration: 0.7s !important;
}

.animation-element.delay0 {
  -webkit-transition-delay: 0s; /* Safari */
  transition-delay: 0s;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}

@-webkit-keyframes slideInRightsq {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}
@keyframes slideInRightsq {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}

@-webkit-keyframes slideInUplite2sq {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
    visibility: visible
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}
@keyframes slideInUplite2sq {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
    visibility: visible
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}

.animation-element.animate__slideInUplite2{
  -webkit-animation-name: none;
  animation-name: none;
opacity:0;
}

.in-view.animation-element.animate__slideInUplite2 {
  -webkit-animation-name: slideInUplite2sq;
  animation-name: slideInUplite2sq;
	animation-duration: 2000ms;
opacity: 1;
}

/* translation side panel */

#translationSidePanel {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100vh;
    z-index: 10000;
    background-color: rgba(0,0,0,0.1);
    display: none;
    justify-content: flex-end;
    align-items: center;
}

#translationSidePanel .translationSidePanelMain {
    position: relative;
    width: 100%;
    height: 100vh;
    display: block;
    padding: 0;
    margin: 0;
}

#translationSidePanel .translationSidePanelMain .translationSidePanelContent {
    position: absolute;
    top: 0;
    right: 0;
    /* left: initial !important; */
    width: 100%;
    max-width: 800px;
    height: 100vh;
    padding: 0;
    margin: 0;
    background-color: #FFFFFF;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
}

#translationSidePanel .translationSidePanelMain .translationSidePanelContent .translationSidePanelContentContainer {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    margin: 0;
}

#translationSidePanel .translationSidePanelMain .translationSidePanelContent .translationSidePanelContentResizeHandle {
    position: absolute;
    top: 50%;
    left: -22px;
    cursor: ew-resize;
    width: 45px;
    height: 45px;
    transform: translateY(-50%);
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    background-color: #FFFFFF;
    z-index: 20;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}

@media (max-width: 768px) {
    #translationSidePanel .translationSidePanelMain .translationSidePanelContent .translationSidePanelContentResizeHandle {
        display: none !important;
    }
}

#translationSidePanel .translationSidePanelMain .translationSidePanelContent .translationSidePanelContentContainer .translationSidePanelHeader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 70px;
    display: grid;
    justify-content: center;
    align-items: center;
    grid-template-columns: 1fr 45px;
    padding: 0 10px 0 20px;
    margin: 0;
    background-color: #FFFFFF;
    z-index: 10;

}

#translationSidePanel .translationSidePanelMain .translationSidePanelContent .translationSidePanelContentContainer .translationSidePanelHeader .close {
    width: 40px;
    height: 40px;
    padding: 0;
    margin: 0;
    background-color: transparent;
    border: 0;
    cursor: pointer;
    user-select: none;
    border-radius: 50px;
    overflow: hidden;
    opacity: 1;
    font-size: 45px;
    z-index: 10;
}

#translationSidePanel .translationSidePanelMain .translationSidePanelContent .translationSidePanelContentContainer .translationSidePanelHeader .close:hover {
    opacity: 0.8;
}

#translationSidePanel .translationSidePanelMain .translationSidePanelContent .translationSidePanelContentContainer .translationSidePanelHeader img.flag {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
}

.translationModalQuestionLayout {
    width: 100%;
    height: 100vh;
    overflow: auto;
    padding: 50px 20px;
}

.translationSidePanelContentResizeHandle span {
    transform: rotate(45deg);
    font-size: 40px;
    line-height: 40px;
}

/* Side by side Panel */

.no-space-shared .translationSideBySidePanel {
    display: none;
    padding: 0;
    margin: 0;
    position: relative;
    width: initial !important;
    left: initial !important;
    top: -60px;
    right: 0px;
    position: absolute;
    z-index: 100;
}

.translationSideBySidePanel {
    display: none;
    padding: 0;
    margin: 0;
    position: relative;
    z-index: 8;
    top: -60px;
}

.translationSideBySidePanel.widthAuto {
    width: auto !important;
}

.translationSideBySidePanel .translationSideBySidePanelMain {
    position: relative;
    width: 100%;
    display: block;
    padding: 0;
    margin: 0;
}

.translationSideBySidePanel .translationSideBySidePanelMain .translationSideBySidePanelContent {
    width: 100%;
    padding: 0;
    margin: 0;
    background-color: #FFFFFF;
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.26);
}

.translationSideBySidePanel .translationSideBySidePanelMain .translationSideBySidePanelContent .translationSideBySidePanelContentContainer {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    margin: 0;
}

.translationSideBySidePanel .translationSideBySidePanelContentResizeHandle {
    position: absolute;
    top: 140px;
    left: -25px;
    cursor: ew-resize;
    width: 45px;
    height: 45px;
    transform: translateY(-50%);
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    background-color: #FFFFFF;
    z-index: 20;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}

@media (max-width: 768px) {
    .translationSideBySidePanel .translationSideBySidePanelMain .translationSideBySidePanelContent .translationSideBySidePanelContentResizeHandle {
        display: none !important;
    }
}

.translationSideBySidePanel .translationSideBySidePanelMain .translationSideBySidePanelContent .translationSideBySidePanelContentContainer .translationSideBySidePanelHeader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 70px;
    display: grid;
    justify-content: center;
    align-items: center;
    grid-template-columns: 45px 1fr 45px;
    padding: 0 10px 0 20px;
    margin: 0;
    background-color: #FFFFFF;
    z-index: 10;

}

.translationSideBySidePanel .translationSideBySidePanelMain .translationSideBySidePanelContent .translationSideBySidePanelContentContainer .translationSideBySidePanelHeader .close {
    width: 40px;
    height: 40px;
    padding: 0;
    margin: 0;
    background-color: transparent;
    border: 0;
    cursor: pointer;
    user-select: none;
    border-radius: 50px;
    overflow: hidden;
    opacity: 1;
    font-size: 45px;
    z-index: 10;
}

.translationSideBySidePanel .translationSideBySidePanelMain .translationSideBySidePanelContent .translationSideBySidePanelContentContainer .translationSideBySidePanelHeader .close:hover {
    opacity: 0.8;
}

.translationSideBySidePanel .translationSideBySidePanelMain .translationSideBySidePanelContent .translationSideBySidePanelContentContainer .translationSideBySidePanelHeader img.flag {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
}

.translationSideBySidePanel .translationSideBySidePanelMain .translationSideBySidePanelContent .translationSideBySidePanelContentContainer .translationSideBySidePanelHeader .translation-locutions-toggle-container {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 0;
    cursor: pointer;
}

.translationSideBySidePanel .translationSideBySidePanelMain .translationSideBySidePanelContent .translationSideBySidePanelContentContainer .translationSideBySidePanelHeader .translation-locutions-toggle-container .font-icon {
    font-family: 'EvIcons' !important;
    font-size: 50px;
    line-height: 35px;
    cursor: pointer;
}

.translationSideBySidePanel .translationSideBySidePanelMain .translationSideBySidePanelContent .translationSideBySidePanelContentContainer .translationSideBySidePanelHeader .translation-locutions-toggle-container #translation-locutions-toggle {
    cursor: pointer;
}

.translationModalQuestionLayout {
    width: 100%;
    height: initial;
    overflow: auto;
    padding: 60px 20px 0 20px;
}

.translationModalQuestionLayout .question-object{
    pointer-events: none;
}

.translationModalQuestionLayout .question-object .narration,
.translationModalQuestionLayout .question-object .resources-resize-handle,
.translationModalQuestionLayout .question-object .space-list .dropdown{
    pointer-events: auto;
}

.translationSideBySidePanelContentResizeHandle span {
    transform: rotate(45deg);
    font-size: 40px;
    line-height: 40px;
}

.separator-container-main-wrapper.separator-container-with-translation,
.question-container-wrapper.with-translation {
    display: flex;
    justify-content: center;
    align-items: start;
    justify-items: center;
    /* grid-template-columns: 1fr 1fr; */
    gap: 40px;
    width: 100%;
    max-width: 100%;
}

.separator-container-main-wrapper.separator-container-with-translation.no-space-shared,
.question-container-wrapper.with-translation.no-space-shared {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0 auto;
}

/**/

.question-container-wrapper[data-resources-layout="bottom"] .resources-container {
    height: 100% !important;
}

.question-container-wrapper[data-resources-layout="top"] .resources-container,
.question-container-wrapper[data-resources-layout="bottom"] .resources-container {
    width: 100% !important;
    margin-bottom: 20px;
}

.question-container-wrapper[data-resources-layout="top"] .resources-container {
    display: flex;
}

.question-object .question-container-wrapper[data-resources-layout="bottom"] .resources-container {
    overflow: visible;
}

.question-object .question-container-wrapper[data-resources-layout="left"] .resources-container {
    /* Impede que a barra de recursos ao ser encolhida, tenha o seu conteúdo a extravasar  */
    overflow: hidden;
    /* Impede que a altura do container seja inferior ao da questão */
    height: inherit !important;
    min-height: 100%;
}

.question-container-wrapper[data-resources-layout="top"] #resources {
    height: min-content;
}

.question-container-wrapper[data-resources-layout="left"] #resources {
    min-width: 300px;
    padding-right: 24px;
}

.separator-container-wrapper {
    display: flex;
    flex-direction: column;
}

.question-container-wrapper {
    display: flex;
}

.question-container-wrapper[data-resources-layout="top"]{
    flex-direction: column;
}

.question-container-wrapper[data-resources-layout="left"]{
    flex-direction: row;
    overflow: hidden;
}

.question-container-wrapper[data-resources-layout="left"].with-translation {
    display: grid;
    justify-content: center;
    align-items: start;
    justify-items: center;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    overflow: auto;
}

.separator-container-with-translation .separator-container-wrapper, 
.question-container-wrapper.with-translation {
    min-width: 0px;
    flex: 1;
}

.question-container-wrapper[data-resources-layout="bottom"]{
    flex-direction: column-reverse;
}

.question-container-wrapper[data-resources-layout="left"] #question-header-container {
    padding: 0 6px;
}

.question-container-wrapper .question-body {
    min-width: 0px;
    overflow-x: hidden;
    position: relative;
}

.question-container-wrapper[data-resources-layout="top"] .question-body,
.question-container-wrapper[data-resources-layout="bottom"] .question-body {
    overflow: visible;
}

.question-container-wrapper[data-resources-layout="left"] .question-body {
    z-index: 9;
    background: white;
}

.question-container-wrapper[data-resources-layout="left"] .question-body > *{
    min-width: 300px;
}

.question-container-wrapper .resources-resize-handle {
    position: absolute;
    display: flex;
    background: var(--sq-color-blue);
    justify-content: center;
    border: none;
    align-items: center;
    padding: 0px;
    cursor: ns-resize;
    z-index: 2;
    box-shadow: 0px 2px 0px 0px white; /* Fills the void caused by the offsets */
}

.question-container-wrapper .resources-resize-handle:hover {
    background: var(--sq-color-blue);
}

.resources-container.ui-resizable-resizing  .resources-resize-handle,
.question-container-wrapper .resources-resize-handle:hover {
    box-shadow: 0px 0px 2px 0px var(--sq-color-blue), 0px 2px 0px 0px white;
    border-top: 1px solid white !important;
    border-bottom: 1px solid white !important;
    box-sizing: content-box;
    margin: -1px 0;
}

.resources-container.ui-resizable-resizing  .resources-resize-handle {
    background: var(--sq-color-blue);
}

.question-object:has(.resources-layout.d-none) .resources-resize-handle {
    display: none;
}

.question-container-wrapper .resources-resize-handle::before {
    content: "";
    display: block;
    width: 22px;  /* Adjust width to fit the pattern */
    height: 10px; /* Adjust height to fit the pattern */
    background-image:
        radial-gradient(circle, white 2px, transparent 2px),
        radial-gradient(circle, white 2px, transparent 2px),
        radial-gradient(circle, white 2px, transparent 2px),
        radial-gradient(circle, white 2px, transparent 2px),
        radial-gradient(circle, white 2px, transparent 2px),
        radial-gradient(circle, white 2px, transparent 2px),
        radial-gradient(circle, white 2px, transparent 2px);
    background-position: 
        -12px -2px, -6px -2px, 0px -2px, 6px -2px, /* Top row (3 dots) */
        -9px 2px, -3px 2px, 3px 2px; /* Bottom row (4 dots) */
    background-size: 28px 10px;
}

.question-container-wrapper .resources-resize-handle.ui-resizable-s {
    bottom: 2px;
    width: 100%;
    height: 10px;
}

.question-container-wrapper[data-resources-layout="bottom"] .resources-resize-handle.ui-resizable-s {
    bottom: 2px;
    width: 100%;
    height: 10px;
}

.question-container-wrapper .resources-resize-handle.ui-resizable-e {
    top: 0px;
    height: 100%;
    width: 10px;
    right: 2px;
    cursor: e-resize;
    box-shadow: 0px 2px 0px 2px white;
    box-sizing: content-box !important;
}

.resources-container.ui-resizable-resizing .resources-resize-handle.ui-resizable-e,
.question-container-wrapper .resources-resize-handle.ui-resizable-e:hover {
    border: none !important;
    border-right: 1px solid white !important;
    border-left: 1px solid white !important;
    margin: 0px -1px;
    box-shadow: 0px 0px 2px 0px #28b3fd, 0px 2px 0px 2px white;
}

.question-container-wrapper .resources-resize-handle.ui-resizable-e::before {
    width: 10px;
    height: 28px;
    background-position: 
        -2px -12px, -2px -6px, -2px 0px, -2px 6px, /* Top row (4 dots) */
                2px -9px, 2px -3px, 2px 3px; /* Bottom row (3 dots) */
    background-size: 10px 28px;
}

.resources-container .resources-container{
    position: relative;
}

.resources-container .resource-title,
.questions-group-resource-container .resource-title,
.questions-group-resource-container .resources-title{
    font-weight: 700;
    padding: 10px 0px 10px 0px;
    background-color: #FFF;
    display: inline-block;
    height: 40px;
}

.group-resource-container #resources .resources-title{
    font-weight: 700;
}

.resources-container .resources-title,
.questions-group-resource-container .resources-title{
    font-weight: 700;
    padding: 30px 0px 10px 0px;
    background-color: #FFF;
    display: inline-block;
    height: auto;
}

.resources-container .resource-content-full,
.questions-group-resource-container .resource-content-full{
    position: relative;
    width: 100%;
    background-color: #FFF;
    height: 230px;
    overflow: hidden;
}

body:has(.main-resources-controls .resources-layout) .resource-content-full,
.question-object:has(.resources-layout) .resource-content-full{
    height: initial !important;
    overflow: initial !important;
}

.resources-container .resource-content-full.audio,
.questions-group-resource-container .resource-content-full.audio{
    height: auto;
}

.resources-container .resource-content-full.image,
.questions-group-resource-container .resource-content-full.image{
    height: auto;
}

/*
.resources-container .resource-content-full .images{
    margin-bottom: 15px;
}
*/

.resources-container p{
    margin: revert;
}

.resources-container .resource-content-full .row.images + .row.images{
    margin-top: 15px;
}

.resources-container .resource-content-full .resource,
.questions-group-resource-container .resource-content-full .resource{
    display: inherit;
    /*text-align: center;*/
}

.resources-container .resource-content-full .images img{
    max-width: 100%;
    image-rendering: -moz-crisp-edges; /* Firefox */
    image-rendering: -o-crisp-edges; /* Opera */
    image-rendering: -webkit-optimize-contrast; /* Webkit (non-standard naming) */
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */
}

.resources-container .resource-content-full .resource img,
.questions-group-resource-container .resource-content-full .resource img{
    margin: 0 auto;
}

.resources-container .resource-content-full .resource.text,
.questions-group-resource-container .resource-content-full .resource.text{
    line-height: 26px;
    text-align: left;
    display: flex;
    margin: 10px 0px 20px 0px;
}

.resources-container .resource-content-full .resource.text img,
.questions-group-resource-container .resource-content-full .resource.text img{
    width: inherit;
}

.resources-container .resource-content-full .resource.audio,
.resources-container .resource-content-full .resource.video,
.questions-group-resource-container .resource-content-full .resource.audio,
.questions-group-resource-container .resource-content-full .resource.video{
    width: 100%;
    position: relative;
}

.resources-container .resource .video-container,
.resources-container .stream .video-container .video-object,
.resources-container .resource .video-container .video-object{
    max-width: 100%;
    margin: 0px auto;
}

.resources-container .resource-content-full .resource.audio,
.questions-group-resource-container .resource-content-full .resource.audio{
    display: inline-block;
    margin: 10px 0px;
}

.resources-container .resource-content-pulldown,
.questions-group-resource-container .resource-content-pulldown{
    position: relative;
    z-index: 1;
    width: 100%;
    height: 48px;
    border-bottom: 2px #BBB solid;
    background-color: rgba(255,255,255,0.7);    
    background: -moz-linear-gradient(bottom, rgba(255,255,255,0.7) 70%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(bottom, rgba(255,255,255,0.7) 70%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to top, rgba(255,255,255,0.7) 70%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */
    bottom: 0px;
    display: none;
}

.resources-container .resource-content-pulldown span,
.questions-group-resource-container .resource-content-pulldown span{
    width: 126px !important;
    text-align: center !important;
    font-size: 76px !important;
    color: rgba(255,255,255,0.7) !important;
    right: 25% !important;
    left: 50% !important;
    margin: 0px 0px 0px -63px !important;
    cursor: pointer !important;
}

/*.resources-container .icon,*/
.questions-group-resource-container .icon{
    z-index: 1;
    width: 50px;
    height: 50px;
    line-height: 50px;
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: rgba(0,0,0, 0.3);
    color: rgb(255,255,255);
    margin: 0 auto;
    font-size: 40px;
    text-align: center;
}

.resources-container table[align=center] {
    margin: auto;
}

.resource-content-full .figure{
    display: table;
    margin: 0 auto;
}

.resource-content-full .figure img{
    max-width: 100%;
}

.resource-content-full .figure .figure-caption {
    display: table-caption;
    caption-side: bottom;
}

.question-object .figure .figure-caption {
    font-size: 18px;
    color: black;
    line-height: 26px;
    caption-side: bottom;
}

.fancybox-caption.caption--image {
    width: 100%;
    bottom: 0;
    padding: 10px;
    color: #000;
    transform: translateY(100%);
    background: white;
    border-top: 1px solid black;
    text-align: left;
    opacity: 0;
}

/* TER CUIDADO PARA NÃO ESCONDER O DROPDOWN DA VELOCIDADE DO PLAY */
.resource-content.audio{
    margin: 40px 0px 20px 0;
}

/*.resource-content.text{*/
.resource-group .resource-content.text,
.question-object .resource-content.text{
    background-color: var(--ev-sq-text-bg);
    padding: 30px;
    margin-top: 10px;
    /*display: inline-flex;*/
    display: flex;
}

.resource-content.text table[align=center] {
    margin: auto;
}

.resources-container .resource-indent-text,
.resource-content.text .resource-indent-text{
    text-indent: 20px;
}

.resource-content.text p{
    margin-block-start: 1em;
    margin-block-end: 1em;
}

.resource-content.text img{
    /*display: block;*/
    max-width: 100%;
    height: auto !important;
}

.resource-content figure .figure-caption{
    color: #333;
    text-align: left;
}

/* STATEMENT */
/*
.statement-container{
    padding-top: 30px;
    display: inline-block;
}
*/
.assessment-teacher .statement-container{
    margin-top: 10px;
    margin-bottom: 20px;
}

.statement{
    font-size: 20px;
    line-height: 26px;
}

/** List style exceptions (show bullets) */
.sortable-item ul,
.sortable-item ol,
.text-identification ol,
.text-identification ul,
.space-lists ol:not(.dropdown-menu),
.space-lists ul:not(.dropdown-menu),
.space-draggable ol,
.space-draggable ul,
.multiple-choices ol,
.multiple-choices ul,
.question-connect .item-container .text ol,
.question-connect .item-container .text ul,
.question-group ul,
.question-group ol,
.answer-text ul:not(.scribe-container):not(.dropdown-menu),
.answer-text ol:not(.scribe-container):not(.dropdown-menu),
.solution-step ol,
.solution-step ul,
.statement ul:not(.dropdown-menu),
.statement ol:not(.dropdown-menu) {
    list-style: initial;
    padding-inline-start: 40px !important;
}

.statement .old-spaces ul{
    list-style: none;
}


.statement a{
    text-decoration: underline !important;
    text-decoration-color: var(--ev-color-blue) !important;
}

body.question-player .narration-container{
    display: table-cell;
    vertical-align: middle;    
}

.me-3.narration-container:has(.locution-audio-player:empty) {
    display: none;
}

.question-player .statement .narration-container{
    /*margin: -12px 8px 4px 4px;*/
    float: left;
}

/*
.question-player :not(.statement) .narration-container {
    margin-top: -8px;
}
*/

.question-player .statement.with-narration p{
    padding: 0px 0px 12px 58px;
}

/* GENERAL ANSWER */
.question-player .answers-container{
    display: flex;
    margin: 0px 0px 0px 0px;
    padding-bottom: 50px;
}
/*
.question-player #player-question-section .answers-container{
    padding-bottom: 0px;
}
*/
.question-player .answer-container{
    /*margin-bottom: 10px;*/
    background-color: transparent;
}

.question-player .answer-container .answer{   
    padding: 10px 0px;
    height: 100%;
    background-color: #FFF;
}

.question-player .answer-text{
    font: 400 20px 'Source Sans Pro Regular', sans-serif;   
    position: relative;
    line-height: 24px;
    height: auto;
    /*
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    */
    background-color: #FFF;
    border-radius: inherit;
}

.question-player .answer-text p {
    display: inline-block;
    vertical-align: middle;
    margin: 0px;
    width: 100%;
    font: 400 20px 'Source Sans Pro Regular', sans-serif;
    line-height: 24px;
}

.question-player #assessment-search-result-section .answer-container .answer .answer-text{
    background-color: #FFF;
} 

.question-player .answer-container .with-narration .answer{   
    padding: 10px 58px;
}

.question-player .object-extra-field:not(:has(.trumbowyg-box)) {
    display: flow-root;
    border: 2px solid var(--sq-color-blue);
    border-radius: 16px;
    font: normal 20px 'Source Sans Pro Regular', sans-serif;
    letter-spacing: 0px;
    overflow: hidden;
}

.question-player .extra-field-user-answer{
    border: 2px solid var(--sq-color-blue);
    border-radius: 8px;
}

.answer-solution {
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    text-align: center;
    color: #FFF;
    line-height: 40px;
    font-size: 40px;
    background-color: var(--sq-color-blue);
}
.answer-solution .font-icon {
    font-size: 40px;
    pointer-events: none;
}

.space-solution{
    position: absolute;
    top: -2px;
    right: -4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    cursor: pointer;
    text-align: center;
    line-height: 20px;
    color: #FFF;
    background-color: var(--sq-color-blue);
}

.space-solution span{
    position: relative;
    /* left: -2px; */
    font-size: 20px;
}

.space-draggable .space-solution {
    right: 0px; /* it's different in this subtype because the border-radius is also wider */
}

.answer-solution:hover,
.answer-solution-all:hover,
.space-solution:hover{
    background-color: #000;
    color: #FFF;
}

.answer-solution.selected,
.answer-solution-all.selected,
.space-solution.selected{
    background-color: var(--sq-color-darkgrey);
    color: #FFF;
}

.true-false .answer-solution,
.multiple-choices .answer-solution {
    position: relative;
}

.true-false .row.align-items-center {
    margin-left: 0px;
    margin-right: 0px;
}

.direct-response .answer-solution{
    margin: 0px 20px;
    position: relative;
}

/* SOLUTION & CORRECTION */
.object-correction .question-object{
    min-height: 320px;
    border: 2px solid var(--ev-sq-object-border);
    border-radius: 25px;
    font-size: 20px;
}

.object-correction .sq-action-dropdown-menu{
    background-color: #FFF;
    border-radius: 20px;
    width: 40px;
    height: 40px;
}

.object-correction .question-object .header,
.object-correction .question-evaluation .header{
    background-color: #EDEDED;
    border-top-left-radius: 23px;
    border-top-right-radius: 23px;
    min-height: 75px;
}

.object-correction .question-object .content{
    min-height: 60px;
}

.object-correction .question-object .footer{
    position: relative;
    width: initial;
    background-color: #EDEDED;
    border-bottom-left-radius: 23px;
    border-bottom-right-radius: 23px;
    height: initial;
    min-height: 70px;
    max-height: initial;
}

.object-correction .resources-container .resource-content-pulldown{
    height: 60px;
    border: none;
}

.object-correction .resources-container .resource-content-pulldown span{
    position: relative;
    top: -12px;
    width: 60px !important;
    height: 60px !important;
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
    padding: 3px 0px 0px 0px;
    font-size: 62px !important;
    color: rgba(255,255,255,0.7) !important;
    margin: 0px 0px 0px -35px !important;
    background-color: rgba(0,0,0,0.5);
}

.object-correction .resource-content.text{
    background-color: var(--ev-sq-text-bg);
    padding: 30px;
}

.object-correction .question-object .footer .solution-area{
    cursor: pointer;
}

.object-correction .question-object .footer .solution-area:before {
    float: right !important;
    content: "+";
    font-size: 30px;
    top: -10px;
    position: relative;
}

.object-correction .question-object .footer .solution-area.collapsed:before {
    float: right !important;
    content:"-";
    font-size: 30px;
    top: -10px;
    position: relative;
}

.object-correction .question-object .footer .solution{
    font-size: 14px;
}

.object-correction .question-evaluation{
    border: 2px solid var(--ev-sq-object-border);
    border-radius: 25px;
}

.object-correction .question-evaluation .evaluation-comments{
    min-height: 200px;
    font-size: 16px;
}

.object-correction .question-evaluation .final-evaluation{
    height: 50px;
    font-size: 30px;
}
.object-correction .question-evaluation .evaluation-comments .teacher-comment {
    word-wrap: break-word;
}

.object-correction .question-evaluation .final-evaluation.user,
.object-correction .question-evaluation .evaluation-comments .user{
    border-color: var(--sq-color-blue) !important;
}

.object-correction .question-evaluation .evaluation-marks .label,
.object-correction .question-evaluation .evaluation-comments .label {
    width: auto;
    font-family: 'Source Sans Pro Regular', sans-serif;
    font-size: 10px;
    color: var(--sq-color-blue);
}

.teacher-evaluation-final-mark-container {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0;
    margin: 0;
}

.teacher-evaluation-final-mark{
    font-family: 'Source Sans Pro Bold', sans-serif;
    font-size: 50px;
}

.object-correction .blurry-text {
    color: transparent;
    text-shadow: 0 0 5px rgba(0,0,0,0.5);
}

.object-correction .header-title{
    font-size: 20px;
    font-weight: 700;
}

.object-correction .header-label,
.evaluation-question .header-label{
    font-size: 14px;
    font-weight: 700;
}

.object-correction .group-item-header .header-title{
    font-size: 18px;
    text-transform: uppercase;
}

.object-correction .header-title span {
    font: 400 18px 'Source Sans Pro Regular',sans-serif;
    color: var(--ev-color-blue);
    text-transform: none;
}

.object-correction .header-text{
    font-size: 18px;
}

.object-correction .header-info,
.evaluation-question .header-info{
    font-size: 16px;
}

.object-correction .header-mark{
    font-size: 16px;
    font-weight: 700;
}

.object-correction .question-object .object-item-statement .statement {
    font-size: 20px;
    line-height: 26px;
}

.object-correction .question-object .object-item-container {
    border: 0px;
    /*padding: 0px;*/
    margin-top: 20px;
}

.object-correction .question-object .object-section {
    margin-bottom: 20px;
}

.object-correction .question-object .object-section .small-subtitle {
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    border-bottom: 1px solid var(--ev-color-blue);
    color: var(--ev-color-blue);
    margin: 0px 0px 10px 0px;
}

.object-correction .question-object .object-section .small-subtitle span{
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    text-transform: none;
    color: var(--sq-color-darkgrey);
}

.object-correction .question-object .object-section li {
    border: 1px solid var(--ev-color-blue);
    border-radius: 10px;
    font-size: 16px;
    margin: 4px 0px;
    padding: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.object-item .item,
.question-object .item{
    max-width: 100%;
    overflow-y: hidden;
    overflow-x: auto;
    min-height: 50px;
    border: 2px solid var(--ev-color-blue);
    border-radius: 26px;
    color: #000;
    font-size: 20px;
}

.question-object .radio.item{
    overflow-x: hidden;
}

#player-question-section .item,
#player-section .item{
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
    line-height: inherit;
}

#player-question-section .translationSideBySidePanel .item,
#player-section .translationSideBySidePanel .item{
    cursor: default !important;
}

.question-object .item.selected{
    background-color: var(--ev-sq-selected);
}

.translationSideBySidePanel .question-object .item.selected{
    background-color: initial !important;
}

.question-object .item.right {
    border: 4px solid var(--ev-sq-correct) !important;
}

.question-object .item.wrong {
    border: 4px solid var(--ev-sq-incorrect) !important;
}

.question-object span.right {
    border: none;
}

.question-object span.wrong {
    border: none;
    color: var(--ev-sq-incorrect);
    text-decoration: line-through;
}

.question-object .noanswer{
    border-width: 2px !important;
    border-style: dashed !important;
    border-color: var(--sq-color-noanswer) !important;
}

.question-object .noanswer-freeanswer{
    border-width: 2px !important;
    border-style: solid !important;
    border-color: var(--ev-color-blue) !important;
}

.question-object span.noanswer{
    border: none !important;
}

.question-object .correction.wrong span.correction{
    color: var(--ev-sq-correct) !important;
}

.question-object img.answer-image {
    /*width: 100px;*/
    /* width: 200px; */
    object-fit: cover;
    /*
    margin-right: 5px;
    border: 1px solid #999;
    */
}

.question-object .show-resource {
    text-align: center;
    color: #CCC;
    cursor: pointer;
}

.question-object .show-resource a {
    color: #CCC;
}

.question-object .show-resource a:hover {
    color: #BBB;
}

.question-object .show-resource .font-icon {
    position: relative;
    top: 9px;
}

/* =========== TRUE OR FALSE =========== */

/*
.question-player .true-false .answer-text p{
    padding: 12px 24px 12px 0px;
}

.question-player .true-false .answer-text.with-narration p{
    padding: 12px 24px 12px 12px;
}
*/
/* ===========  MULTIPLE CHOICES =========== */
.question-player .multiple-choices .item{
    overflow: hidden;
    border-radius: 24px !important;
    line-height: 22px;
    min-height: 50px;
    height: auto;
    padding: 6px 24px;
    white-space: normal;
    text-align: left;
    -webkit-transition: all .3s ease-in-out;
}

.multiple-choices .row.g-4 > div {
    min-width: min-content;
}

.question-player .multiple-choices .item .narration-container{
    height: 40px;
    margin: 0px 0px;
}

.multiple-choices .item.with-narration{
    padding: 1px 0px 0px 1px;
}

.multiple-choices .item.with-narration p{
    padding: 12px 24px 12px 58px;
    margin: 0px;
}

.multiple-choices .item.with-audio{
    padding: 0px;
    position: relative;
}

.question-connect .item-content .audio-player,
.multiple-choices .item.with-audio .audio-player,
.multiple-choices .item.with-audio audio{
    width: 100%;
}


.question-connect .item-content .audio-player .right-controls,
.multiple-choices .item .audio-player .right-controls {
    display: none;
}

.multiple-choices figure,
.multiple-choices figure img{
    margin-bottom: 0px;
}

/* ===========  SPACES  =========== */

.space-draggable .item,
.space-lists .item{
    /*border: none;*/
    /*border-radius: 12px;*/
    min-width: 60px;
    vertical-align: middle;
}

.space-draggable .spaces.right,
.space-lists .spaces.right{
    border: 4px solid var(--ev-sq-correct) !important;
}

.space-draggable .spaces.wrong,
.space-lists .spaces.wrong{
    border: 4px solid var(--ev-sq-incorrect) !important;
}

/* ===========  DIRECT ANSWER  =========== */


/* ===========  SORTABLE  =========== */

.sortable-answer span.correct-position {
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 20px;
    -moz-border-radius: 20px;
    color: #FFF;
    text-align: center;
    display: inline-block;
}

.sortable-answer span.correct-position.right {
    background-color: var(--ev-sq-correct);
}

.sortable-answer span.correct-position.wrong {
    background-color: var(--ev-sq-incorrect);
    border-radius: 20px;
    text-decoration: none;
}

.sortable-answer .p-3.img{
    padding: 0px !important;
    min-height: inherit;
}

/* ===========  IDENTIFICATION  =========== */

.identification .card{
    border-radius: 8px;
    border: 2px solid var(--ev-color-blue);
}

.identification .card .criteria {
    width: 30px;
    height: 30px;
    border-radius: 15px;
}

.identification .text span{
    padding: 8px 2px;
    border-radius: 8px;
    /*border: 2px solid;*/
}

.identification .card.images{
    height: 100%;
    background-color: #FFF !important;
    border-color: #FFF;
    border-width: 6px;
}

.identification .card.images.right{
    border-color: var(--sq-color-right) !important;
}

.identification .card.images.wrong{
    border-color: var(--sq-color-wrong) !important;
}

.identification:has(.rubber.active) .answeridentification-text span[data-highlighted="true"]:hover{
    cursor: pointer;
    opacity: 0.8;
}

/* ===========  OPEN ANSWER  =========== */

.open-answer{
    display: flow-root;
    /*
    border: 2px solid var(--ev-sq-selected-border);
    border-radius: 16px;
    */
    font: normal 20px 'Source Sans Pro Regular', sans-serif;
    letter-spacing: 0px;
    /* cursor: pointer; */
}

.open-answer .text-counter {
    font-size: 14px;
}

.open-answer .text-response:not(:has(.trumbowyg)):not(.trumbowyg-editor) {
    width: 100%;
    overflow-x: auto;
    border: 2px solid var(--ev-color-blue);
    padding: 20px;
    font: 400 20px 'Source Sans Pro Regular', sans-serif;
    border-radius: 16px;
    min-height: 150px;
}

.open-answer .criteria-container .evaluation-topic{
    width: 100%;
    height: auto;
    min-height: 50px;
    border: 2px solid #00B3FF;
    border-radius: 26px;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    cursor: pointer;
}

.open-answer .criteria-container .evaluation-topic.selected{
    background-color: #00B3FF;
    color: #FFF;
}

.open-answer .criteria-container .evaluation-topic-item{
    font-size: 18px;
}

.open-answer .criteria-container .evaluation-topic-points{
    font-size: 18px;
    color: #00B3FF;
}

.open-answer .criteria-container .evaluation-topic.selected .evaluation-topic-points{
    color: #FFF;
}

body.question-player .object-extra-field .trumbowyg-box,
.open-answer .trumbowyg-box {
    border: 2px solid var(--ev-color-blue);
    border-radius: 25px;
    overflow: hidden;
    padding: 4px;
}

/* DIRECT RESPONSE */


.question-player .direct-response .resource.audio video,
.question-player .direct-response .resource.audio audio{
    width: 100%;
    position: relative;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}

/* IDENTIFICATION */

.question-player .identification .answer-container.images{
    width: 156px;
    height: 156px;
    padding: 3px 3px;
    border-radius: 20px;
    max-width: 100%;
}

.question-player .identification .answeridentification-text{
    font-size: 20px;
    line-height: 52px;
}

.question-player .identification .answeridentification-text span{
    cursor: pointer;
    padding: 12px 2px;
    border-radius: 8px;
    text-decoration: none;
}

.question-player .identification .answeridentification-image,
.question-object .identification .answeridentification-image {
    height: 100%;
    /* height: fit-content; */
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: center;
    border-radius: 25px;
    overflow: hidden;
    border: 6px solid #FFF;
    background: none;
}

.question-player .identification .answer-correction span,
.question-object .identification .answer-correction span{
    border: 2px solid #000;
    border-radius: 17px;
    font-size: 30px;
}

/*
.question-player .identification .answeridentification-image.right {
    border-color: var(--sq-color-right) !important;
}

.question-player .identification .answeridentification-image.wrong {
    border-color: var(--sq-color-wrong) !important;
}

.question-player .identification .answeridentification-image.noanswer{
    border-style: dashed;
    background-color: transparent !important;
}
*/

/* SQ Toast Message */
.inlineSQMsgContainer {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
    display: none;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 0;
    overflow: visible;
    padding: 0 20px;
}

.inlineSQMsgContainer .alert {
    width: 100%;
    max-width: 500px;
    margin: 140px auto 0 auto;
}

.question-player .identification .answeridentification-image img{
    max-height: 100%;
    max-width: 100%;
    cursor: pointer;
}

.translationModalQuestionLayout .identification .answeridentification-image {
    border-color: rgba(0,0,0,0) !important;
}

.question-player .identification .answeridentification-text span{
    cursor: default;
}

/*
.question-player .identification .answeridentification-text span.wrong{
    border: 2px solid var(--sq-color-wrong) !important;
}    

.question-player .identification .answeridentification-text span.right{
    border: 2px solid #88BF3A !important;
}   
*/

.question-player .identification .criteria-container,
.question-object .identification .criteria-container {
    width: auto;
    min-height: auto;
    display: flex;
    border-color: var(--sq-color-blue);
    border-radius: 10px;
    border-width: 2px;
    border-style: solid;
}

.question-player .identification .criteria-container:hover{
    background-color: #D4F0FF;
    cursor: pointer;
}

.question-player .identification .col-sm-6.col-md-3 {
    min-width: fit-content;
}

.question-player .identification .font-button{
    width: 40px;
    height: 40px;
    border: 2px solid var(--sq-color-blue);
    border-radius: 20px;
}

.question-player .identification .font-button:hover{
    background-color: #D4F0FF;
    cursor: pointer;
}

.question-player .identification .font-button.size-small{
    font-size: 14px;
}

.question-player .identification .font-button.size-medium{
    font-size: 20px;
}

.question-player .identification .font-button.size-large{
    font-size: 28px;
}

.question-player .identification .criteria-container.rubber{
    width: 125px;
    height: 40px;
    border: 2px solid var(--sq-color-blue);
    border-radius: 30px;
}

.question-player .identification[data-mode="selfevaluation"] .row {
    margin: 0px;
}

.question-player .translationModalQuestionLayout .identification .criteria-container.rubber{
    display: none !important;
}

.question-player .criteria-container.active,
.question-player .criteria-container.rubber.active,
.question-object .criteria-container.active,
.question-object .criteria-container.rubber.active{
    background-color: #D4F0FF;
}

.question-player .criteria-container.active .criteria,
.question-object .criteria-container.active .criteria{
    width: 40px;
    height: 40px;
    border-color: #FFF !important;
}

.question-player .criteria-container .rubber-icon {
    width: 40px;
    height: 40px;
    border-radius: 20px;
    float: left;
}

.question-player .criteria-container .rubber-icon span {
    top: -10px;
    left: 6px;
    position: relative;
    font-size: 38px;
}

.question-player .criteria-container .criteria,
.question-object .criteria-container .criteria {    
    width: 40px;
    height: 40px;
    border-radius: 20px;
    border: 4px solid #FFF !important;
    margin: initial;
    float: initial;
    transform: initial;
}

.question-player .criteria-container .criteria-text,
.question-object .criteria-container .criteria-text {
    width: auto;
    padding: 6px 10px;
}


.question-player .identification .criteria-text figure,
.question-player .identification .criteria-text figure img,
.question-player .identification .criteria-text img.answer-image {
    width: initial;
    max-width: 100%;
    max-height: 125px;
    height: auto;
    padding: 0;
    margin: 0;
}

.question-player .identification .narration-container,
.question-object .identification .narration-container{
    display: flex;
}


.question-player .answeridentification-text-words .answer-text-words{
    display: block;
}

.question-player .answeridentification-text-words word {
    display: inline-flex;
    margin: 0px 30px 15px 0px;
}

.question-player .answeridentification-text-words word.return {
    display: block;
    margin: 0px 0px 0px 0px;
}

.question-player .identification-word,
.question-object .identification-word{
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--sq-color-blue) !important;
    border-radius: 8px;
    margin: 0px 4px 12px 0px;
    font-weight: 700;
    cursor: pointer;
}

.identification-word.c0{
    background-color: var(--ev-sq-identification-criteria-c0);
}

.identification-word.c1{
    background-color: var(--ev-sq-identification-criteria-c1);
}

.identification-word.c2{
    background-color: var(--ev-sq-identification-criteria-c2);
}

.identification-word.c3{
    background-color: var(--ev-sq-identification-criteria-c3);
}

.translationModalQuestionLayout .identification-word {
    background-color: rgba(0, 0, 0, 0) !important;
}

.question-player .identification-word.wrong,
.question-object .identification-word.wrong{
    border: 2px solid var(--sq-color-wrong) !important;
}    

.question-player .identification-word.right,
.question-object .identification-word.right{
    border: 2px solid #88BF3A !important;
}  

.question-player .answeridentification-text-words .answer-text-words word,
.question-object .answeridentification-text-words .answer-text-words word{
    display: inline-flex;
    margin: 0px 15px 5px 0px;
}

.question-player .answeridentification-text-words .answer-text-words word.return,
.question-object.answeridentification-text-words .answer-text-words word.return{
    display: block;
    margin: 0px 0px 0px 0px;
}

/* CRITERIA COLORS */

.c0{
    background-color: var(--ev-sq-identification-criteria-c0);
    border-color: var(--ev-sq-identification-criteria-c0);
    color: #000 !important;
}

.c1{
    background-color: var(--ev-sq-identification-criteria-c1);
    border-color: var(--ev-sq-identification-criteria-c1);
    color: #000 !important;
}

.c2{
    background-color: var(--ev-sq-identification-criteria-c2);
    border-color: var(--ev-sq-identification-criteria-c2);
    color: #000 !important;
}

.c3{
    background-color: var(--ev-sq-identification-criteria-c3);
    border-color: var(--ev-sq-identification-criteria-c3);
    color: #000 !important;
}

.scribe-container{
    display: inline-flex;
}

.scribe-container.right{
    border: 4px solid var(--sq-color-right) !important;
    border-radius: 10px;
    padding: 0px 4px;
}

.scribe-container.wrong{
    border: 4px solid var(--sq-color-wrong) !important;
    border-radius: 10px;
    padding: 0px 4px;
}

.scribe-container.noanswer{
    border: 4px dashed var(--sq-color-noanswer) !important;
    border-radius: 10px;
    padding: 0px 4px;
}

.scribe-container li{
    cursor: pointer;
}

.scribe-container.correction li{
    border: 4px solid transparent !important;
}

.scribe-container li.scribed{
    text-decoration: line-through;
}

.scribe-container li.scribed.right{
    border: 4px solid var(--sq-color-right) !important;
    border-radius: 10px;
    padding: 0px 4px;
}

.scribe-container li.scribed.wrong{
    border: 4px solid var(--sq-color-wrong) !important;
    border-radius: 10px;
    padding: 0px 4px;
}

.translationModalQuestionLayout .scribe-container li.scribed{
    text-decoration: initial !important;
}

/* SPACES */

.container.space-lists,
.container.space-draggable {
    padding-right: 15px !important;
    padding-left: 15px !important;
}

.space-lists .dropdown.solutions {
    max-width: 100%;
    overflow-x: auto;
}

.question-player .old-spaces .spaces{
    line-height: 36px;
}

.question-player .old-spaces .narration-container{
    margin: 4px 8px 4px 4px;
}

.question-player .old-spaces .spaces-correction{
    display: inline-block;
    border: 2px solid #30B2FB;
    border-radius: 8px;
    color: #333;
    background-color: #FFF;
    top: -1px;
    min-width: 160px;
    margin: 6px 3px;
    line-height: initial;
    padding: 8px 0px 8px 12px;
}

.question-player .old-spaces .spaces-correction.wrong{
    border: 2px solid var(--sq-color-wrong);
}

.question-player .old-spaces .spaces-correction.right{
    border: 2px solid #00CC33;
}

.question-player .old-spaces .spaces-correction.noanswer{
    border: 2px dashed #00CC33;
}

.question-player .old-spaces .spaces-correction span.wrong{
    text-decoration: line-through;
    color: var(--sq-color-wrong);
    margin: 0px 8px 0px 0px;
}

.question-player .old-spaces .spaces-correction span.right{
    color: #00CC33;
}

.question-player .space-lists .resposta-div-container{
    padding: 5px 0px 0px 0px;
}

.question-player .space-list {
    font: 400 20px 'Source Sans Pro Regular', sans-serif;
    display: flex;
    padding: 10px 0px 10px 0px;
}

.question-player .old-spaces.space-list {
    display: inline-block;
}

.question-player .space-list sup {
    top: -1em;
}

.question-player .space-list sup input {
    line-height: 0;
    vertical-align: text-bottom;
}

/*
.question-player .space-list .item {
    background-color: #FFF;
    color: #333;
    border-radius: 26px !important;
    font-family: 'Source Sans Pro Regular', sans-serif;
    font-size: 20px;
    line-height: 22px;
    min-height: 50px;
    height: auto;
    padding: 12px 24px;
    white-space: normal;
    text-align: left;
}


.question-player .space-list .item.with-narration,
.question-player .space-lists .item.with-narration{
    padding: 1px 0px 0px 1px;
}
*/

.question-player .old-spaces.space-list .narration-container{
    margin-top: 0px;
}

/* SELF EVALUATION PAGE */

.self-evaluation-object .self-evaluation-title{
    font: 400 20px 'Source Sans Pro Bold', sans-serif;
    color: #000;
    line-height: 26px;
}

.question-player .self-evaluation-object .open-answer .response-counter{
    line-height: 30px;
    font: normal 20px 'Source Sans Pro Regular', sans-serif;
    color: var(--ev-sq-evaluate);
}

.question-player .self-evaluation-object .open-answer .text-response{
    width: 100%;
    padding: 18px 24px;
    min-height: auto;
    resize: none;
    font: 400 20px 'Source Sans Pro Regular', sans-serif;
    border: 2px solid var(--ev-color-blue);
    border-radius: 8px;
    opacity: 1;
    background-color: var(--ev-sq-selected);
    color: #000;
}

.self-evaluation-object .evaluation-topics-container{
    border-top: 2px solid var(--ev-sq-object-border);
}

.self-evaluation-object .evaluation-title{
    font: 400 18px 'Source Sans Pro Bold', sans-serif;
    color: #000;
    line-height: 26px;
    text-transform: uppercase;
}

.self-evaluation-object .evaluation-topics-container .evaluation-intro{
    font: 400 20px 'Source Sans Pro Regular', sans-serif;
    color: #000;
    line-height: 30px;
}

.self-evaluation-object .small-subtitle{
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    border-bottom: 1px solid var(--ev-color-blue);
    color: var(--ev-color-blue);
    margin: 0px 0px 10px 0px;
}

.self-evaluation-object .solution-title{
    margin: 0px 0px 6px 0px;
    font-size: 16px;    
}

.self-evaluation-object .solution-step{
    margin: 0px 0px 6px 0px;
    font-size: 16px;
}

.self-evaluation-object .solution-step span{
    display: block;
    font-size: 16px;
    color: var(--ev-color-blue);
    padding: 0px 6px 0px 0px;
    font-weight: 700;
}

.self-evaluation-object .evaluation-topic-group{
    font: 400 18px 'Source Sans Pro Bold', sans-serif;
    color: #000;
    line-height: 26px;
}

.self-evaluation-object .evaluation-topics-container .evaluation-topic-item{
    font: 400 20px 'Source Sans Pro Regular', sans-serif;
    line-height: 26px;
    height: auto;
    min-height: 50px;
    border: 2px solid var(--ev-color-blue);
    border-radius: 25px;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    cursor: pointer;
}

.self-evaluation-object .evaluation-topics-container .evaluation-topic-item.selected{
    background-color: var(--ev-sq-selected);
}

.question-player .self-evaluation-object .extra-field-user-answer,
.evaluation-question .extra-field-user-answer{
    font: 400 20px 'Source Sans Pro Regular', sans-serif;
    /*padding: 18px 24px;*/
    min-height: 50px;
    border: 2px solid var(--ev-color-blue);
    border-radius: 8px;
    opacity: 1;
    background-color: var(--ev-sq-selected);
    color: #000;
}

.question-player .self-evaluation-object .extra-field-user-answer.selected-right,
.evaluation-question .extra-field-user-answer.selected-right{
    border: 4px solid var(--ev-sq-correct);
}

.question-player .self-evaluation-object .extra-field-user-answer.selected-wrong,
.evaluation-question .extra-field-user-answer.selected-wrong{
    border: 4px solid var(--ev-sq-incorrect);
}

.question-player .self-evaluation-object .extra-field-user-answer.extra-field-expected-result{
    background-color: #FFF;
}

.question-player .self-evaluation-object .extra-field-user-answer.extra-field-expected-result.selected-right,
.evaluation-question .extra-field-user-answer.extra-field-expected-result.selected-right{
    border: 2px solid var(--ev-sq-correct);
}

.question-player .self-evaluation-object .extra-field-user-answer.extra-field-expected-result.selected-wrong,
.evaluation-question .extra-field-user-answer.extra-field-expected-result.selected-wrong{
    border: 2px solid var(--ev-color-blue);
}

.self-evaluation-object .extra-field-container,
.evaluation-question .extra-field-container{
    border: 2px solid var(--ev-color-blue);
    border-radius: 8px;
    font: 400 18px 'Source Sans Pro Regular', sans-serif !important;
    grid-template-columns: 1fr;
}

.self-evaluation-object .extra-field-container .self-evaluation-options,
.evaluation-question .extra-field-container .self-evaluation-options{
    background-color: var(--ev-sq-self-evaluation-bottom-bg);
    border-top: 2px solid var(--ev-color-blue);
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.self-evaluation-object .extra-field-container .self-evaluation-options .btn-sq-self-evaluation-option,
.evaluation-question .extra-field-container .self-evaluation-options .btn-sq-self-evaluation-option{
    font: 400 20px 'Source Sans Pro Regular', sans-serif !important;
    line-height: 30px !important;
    color: #000;
    text-transform: capitalize;
    position: relative;
    cursor: pointer !important;
}

.object-correction .evaluation-question .extra-field-container .self-evaluation-options .btn-sq-self-evaluation-option{
    cursor: default !important;
}

.btn-sq-self-evaluation-option span{
    position: absolute;
    top: 8px;
    left: 12px;
    text-transform: none;
}

.btn-sq-self-evaluation-option.selected span{
    top: 6px;
    left: 10px;
}

.btn-sq-self-evaluation-option.self-evaluation-right.selected{
    border: 4px solid var(--ev-sq-correct);
}

.btn-sq-self-evaluation-option.self-evaluation-right.selected span{
    color: var(--ev-sq-correct);
    font-weight: 700;
}

.btn-sq-self-evaluation-option.self-evaluation-wrong.selected{
    border: 4px solid var(--ev-sq-incorrect);
}

.btn-sq-self-evaluation-option.self-evaluation-wrong.selected span{
    color: var(--ev-sq-incorrect);
    font-weight: 700;
}

/* =========== OPEN ANSWER =========== */

.question-player .open-answer .response-counter{
    height: 40px;
    /*text-align: center;*/
    line-height: 30px;
    padding: 5px 0;
    font: bolder 20px 'Source Sans Pro Regular', sans-serif;
    color: #000;
}
/*
.question-player .open-answer .response{
    padding: 0 0 30px 0;
}
*/
.question-player .open-answer .response .cke_textarea_inline {
    width: 100%;
    min-height: 250px;
    padding: 8px;
    resize: none;
    font: 400 16px 'Source Sans Pro Regular', sans-serif;
    border: 1px solid #9E9E9E;
    border-radius: 4px;
    opacity: 1;
    background-color: #fff;
}

.open-answer .response-topics .response-topics-title {
    line-height: 30px;
    padding: 5px 0;
    font: bold 18px 'Source Sans Pro Regular', sans-serif;
    color: #000;
}

.open-answer .response-topics .response-topic .response-topic-item {
    width: 100%;
    height: auto;
    min-height: 50px;
    padding: 10px;
    margin: 10px 0;
    border: 2px solid #21B3FD;
    border-radius: 26px;
    float: left;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
}

.open-answer .response-topics .response-topic-item.right {
    border-color: #89C22B;
}

.open-answer .response-topics .response-topic-item.noanswer {
    border-color: #89C22B;
    border-style: dashed;
}

.open-answer .response-topics .response-topic .response-topic-item {
    width: 100%;
    height: 100%;
    line-height: 20px;
    border-radius: 20px;
    color: #000;
    font-size: 18px;
    font-family: "Source Sans Pro Regular", sans-serif;
    font-weight: normal;
    float: left;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
}

.open-answer .response-topics .response-topic.selected,
.open-answer .response-topics .response-topic.selected .response-topic-item {
    color: #fff;
}

.open-answer .evaluation-description,
.open-answer-self-evaluation .evaluation-description,
.question-draw .evaluation-description {
    font-size: 18px;
    font-weight: 700;
    line-height: 30px;
    padding: 5px 0;
    color: #000;
}

.open-answer .evaluation-topics .evaluation-topic,
.open-answer-self-evaluation .evaluation-topics .evaluation-topic,
.question-draw .evaluation-topics .evaluation-topic {
    width: 100%;
    height: auto;
    min-height: 50px;
    padding: 10px;
    margin: 10px 0;
    border: 2px solid var(--sq-color-blue);
    border-radius: 26px;
    float: left;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    cursor: pointer;
    /*
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    */
}

.evaluation-topics .evaluation-topic{
    border: 2px solid var(--sq-color-blue) !important;
    cursor: default;
}

.evaluation-topics .evaluation-topic.right {
    border-style: solid !important;
}

.evaluation-topics .evaluation-topic.noanswer {
    border-style: dashed !important;
}

.open-answer .evaluation-topics .evaluation-topic.right,
.question-draw .evaluation-topics .evaluation-topic.right,
.open-answer .evaluation-topics .evaluation-topic.selected,
.question-draw .evaluation-topics .evaluation-topic.selected,
.open-answer-self-evaluation .evaluation-topics .evaluation-topic.selected {
    background-color: var(--sq-color-blue);
    color: #FFF;
}

/* =========== OPEN ANSWER - SELFEVALUATION MODAL =========== */
#openAnswerSelfEvaluationModal.modal .open-answer-self-evaluation {
    min-height: 500px;
    padding: 10px 0 20px 0;
    border: none;
    position: relative;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: height 0.3s ease-out;
}

#openAnswerSelfEvaluationModal.modal .modal-responsive-header {
    padding: 0 15px;
}

#openAnswerSelfEvaluationModal.modal .modal-responsive-content {
    padding: 0 15px 65px 15px;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: height 0.3s ease-out;
}

#openAnswerSelfEvaluationModal.modal .self-evaluation-container {
    opacity: 1;
    -webkit-transition: all .6s ease-in-out;
    -moz-transition: all .6s ease-in-out;
    -ms-transition: all .6s ease-in-out;
    -o-transition: all .6s ease-in-out;
}

#openAnswerSelfEvaluationModal.modal .self-evaluation-container.vanished {
    opacity: 0;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}


#openAnswerSelfEvaluationModal.modal .modal-responsive-header .modal-responsive-title {
    width: 100%;
    margin: 15px 0 0 0;
    text-align: center;
}

#openAnswerSelfEvaluationModal.modal .modal-responsive-content .self-evaluation-subtitle {
    padding: 10px 0 0 0;
    color: #21B3FD;
    font-size: 18px;
    font-family: "Source Sans Pro Bold", sans-serif;
    line-height: 20px;
    text-align: center;
}

#openAnswerSelfEvaluationModal.modal .modal-responsive-content .self-evaluation-description,
.evaluation-topic .self-evaluation-description {
    padding: 5px 0 10px 0;
    color: #21B3FD;
    font-size: 17px;
    font-family: "Source Sans Pro Bold", sans-serif;
    line-height: 20px;
}

#openAnswerSelfEvaluationModal.modal .object-section{
    margin-bottom: 20px;
}

#openAnswerSelfEvaluationModal.modal .object-section .small-subtitle{
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    border-bottom: 1px solid var(--ev-color-blue);
    color: var(--ev-color-blue);
    margin: 0px 0px 10px 0px;
}

#openAnswerSelfEvaluationModal.modal .object-section .title{
    font-size: 16px;
    font-weight: 700;
}

#openAnswerSelfEvaluationModal.modal .object-section li{
    border: 1px solid var(--ev-color-blue);
    border-radius: 10px;
    font-size: 16px;
    margin: 4px 0px;
    padding: 8px;
}

#openAnswerSelfEvaluationModal.modal .object-section .solution-title{
    margin: 0px 0px 6px 0px;
    font-size: 16px;    
}

#openAnswerSelfEvaluationModal.modal .object-section .solution-step{
    margin: 0px 0px 6px 0px;
    font-size: 16px;
}

#openAnswerSelfEvaluationModal.modal .object-section .solution-step span{
    display: block;
    font-size: 16px;
    color: var(--ev-color-blue);
    padding: 0px 6px 0px 0px;
    font-weight: 700;
}

@media (min-width: 600px) {
    #openAnswerSelfEvaluationModal.modal .modal-responsive-header .modal-responsive-title,
    #openAnswerSelfEvaluationModal.modal .modal-responsive-content .self-evaluation-subtitle {
        text-align: left;
    }

    #openAnswerSelfEvaluationModal.modal .modal-responsive-content .self-evaluation-description,
    .evaluation-topic .self-evaluation-description {
        padding: 5px 0 10px 0;
        font-size: 20px;
        line-height: 25px;
    }
}

#openAnswerSelfEvaluationModal.modal .modal-responsive-content .user-response div.text-response{
    width: 100%;
    min-height: 200px;
    padding: 8px;
    resize: none;
    font: 400 16px 'Source Sans Pro Regular', sans-serif;
    border: 1px solid #9E9E9E;
    border-radius: 4px;
    opacity: 1;
    background-color: #ededed;
    cursor: not-allowed;
    display: inline-block;
    margin: 0px 0px 20px 0px;
}

#openAnswerSelfEvaluationModal.modal .modal-responsive-content .self-evaluation-topic,
.evaluation-topic .self-evaluation-topic {
    width: 100%;
    height: auto;
    min-height: 50px;
    padding: 10px;
    margin: 10px 0;
    border: 2px solid #21B3FD;
    border-radius: 26px;
    float: left;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    cursor: pointer;
}

.evaluation-topic .self-evaluation-topic.right {
    border: 2px solid var(--sq-color-right) !important;
}

.evaluation-topic .self-evaluation-topic.noanswer {
    border: 2px dashed var(--sq-color-noanswer) !important;
}

#openAnswerSelfEvaluationModal.modal .modal-responsive-content .self-evaluation-topic.selected,
.evaluation-topic .self-evaluation-topic.selected {
    background-color: #21B3FD;
}

#openAnswerSelfEvaluationModal.modal .modal-responsive-content .self-evaluation-topic-item,
.evaluation-topic .self-evaluation-topic-item {
    width: 100%;
    height: 100%;
    line-height: 20px;
    border-radius: 20px;
    color: #000;
    font-size: 16px;
    font-family: "Source Sans Pro Regular", sans-serif;
    font-weight: normal;
    /*text-align: center;*/
    float: left;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
}

#openAnswerSelfEvaluationModal.modal .modal-responsive-content .self-evaluation-topic.selected,
#openAnswerSelfEvaluationModal.modal .modal-responsive-content .self-evaluation-topic.selected .self-evaluation-topic-item,
.evaluation-topic .self-evaluation-topic.selected,
.evaluation-topic .self-evaluation-topic.selected .self-evaluation-topic-item {
    color: #fff;
}

#openAnswerSelfEvaluationModal.modal .modal-responsive-footer {
    padding: 0 15px 20px 15px;
    margin: 0;
    position: absolute;
    bottom: 0;
}

#openAnswerSelfEvaluationModal.modal .modal-responsive-footer #selfEvaluationFooterPrevious {
    width: calc(50% - 5px);
    margin: 10px 5px 10px 0;
}

#openAnswerSelfEvaluationModal.modal .modal-responsive-footer #selfEvaluationFooterNext,
#openAnswerSelfEvaluationModal.modal .modal-responsive-footer #selfEvaluationFooterFinish {
    width: calc(50% - 5px);
    margin: 10px 0 10px 5px;
}

@media (min-width: 600px) {
    #openAnswerSelfEvaluationModal.modal .modal-responsive-header,
    #openAnswerSelfEvaluationModal.modal .modal-responsive-footer {
        padding: 0 30px 20px 30px;
    }
    
    #openAnswerSelfEvaluationModal.modal .modal-responsive-content {
        padding: 0 30px 85px 30px;
    }
    
    #openAnswerSelfEvaluationModal.modal .modal-responsive-footer #selfEvaluationFooterPrevious,
    #openAnswerSelfEvaluationModal.modal .modal-responsive-footer #selfEvaluationFooterNext,
    #openAnswerSelfEvaluationModal.modal .modal-responsive-footer #selfEvaluationFooterFinish {
        width: 40%;
        margin: 10px 0;
    }
}

/* =========== SORTABLE ANSWER =========== */
.question-player .sortable-answer {
    width: 100%;
    display: flex;
    flex-direction: column;
}

body.question-player .sortable-answer ul {
    width: 100%;
    position: relative;
}

.question-player .sortable-answer ul:has(.img-container) {
    display: flex;
    justify-content: center;
}

.question-player .sortable-answer #sortable>li {
    min-height: 60px;
    cursor: move;
    font-size: 0;
    line-height: 40px;
    color: #000;
    background-color: #fff;
    border: 2px solid var(--sq-color-blue);
    border-radius: 8px;
    -webkit-transition: width 0.3s ease-in-out, margin 0.3s ease-in-out, background-color 0.3s ease-in-out, border-color 0.3s ease-in-out, color 0.3s ease-in-out;
       -moz-transition: width 0.3s ease-in-out, margin 0.3s ease-in-out, background-color 0.3s ease-in-out, border-color 0.3s ease-in-out, color 0.3s ease-in-out;
        -ms-transition: width 0.3s ease-in-out, margin 0.3s ease-in-out, background-color 0.3s ease-in-out, border-color 0.3s ease-in-out, color 0.3s ease-in-out;
         -o-transition: width 0.3s ease-in-out, margin 0.3s ease-in-out, background-color 0.3s ease-in-out, border-color 0.3s ease-in-out, color 0.3s ease-in-out;
            transition: width 0.3s ease-in-out, margin 0.3s ease-in-out, background-color 0.3s ease-in-out, border-color 0.3s ease-in-out, color 0.3s ease-in-out;
    float: left;
}

.question-player .sortable-answer #sortable.sorting-txt li.sorting-item {
    width: 100% !important;
    margin: 7px 0 !important;
    color: #fff;
    background-color: var(--sq-color-blue);
}

.question-player .sortable-answer #sortable>li .text {
    width: 100%;
    min-height: 60px;
    /*padding: 10px 0 0 10px;*/
    font-family: "Source Sans Pro Regular", sans-serif;
    font-size: 20px;
    line-height: 24px;
    display: inline-block;
}

.question-player .sortable-answer .sortable-list .narration-container{
    margin-top: 0px;
}

/*
.question-player .sortable-answer #sortable>li.narration-active .text {
    width: calc(100% - 40px);
}
*/
/*
.question-player .sortable-answer #sortable>li .narration-container  {
    width: 40px;
    margin: 10px 0;
    display: inline-block;
    vertical-align: top;
}

.question-player .sortable-answer #sortable>li .narration-container .narration {
    border-radius: 20px;
    cursor: pointer;
}

.question-player .sortable-answer #sortable>li .narration-container .narration .f-icon-narration {
    padding: 2.5px;
    color: #000;
    line-height: 35px;
    font-size: 35px;
    text-align: center;
}
*/
/** Sortable Answers with Images **/
.question-player .sortable-answer #sortable.sorting-img-small li,
.question-player .sortable-answer #sortable.sorting-img li,
.question-player .sortable-answer #sortable.sorting-img-big li {
    /* width: calc(33.33% - 10px); */
    padding: 0;
    margin: 35px 5px 25px 5px;
    border-color: #000;
    float: left;
    max-width: fit-content;
}

@media (min-width: 400px) {
    /*
    .question-player .sortable-answer #sortable>li .text {
        padding: 18px 0 0 10px;
    }
    */
    .question-player .sortable-answer #sortable.sorting-img-small {
        width: 75%;
        margin: 0 auto;
    }
    
    .question-player .sortable-answer #sortable.sorting-img li,
    .question-player .sortable-answer #sortable.sorting-img-big li {
        width: calc(25% - 10px);
        padding: 0;
        margin: 35px 5px 25px 5px;
        border-color: #000;
        float: left;
    }
    
}

@media (min-width: 650px) {
    .question-player .sortable-answer #sortable.sorting-img-small {
        width: 60%;
        margin: 0 auto;
    }
    
    .question-player .sortable-answer #sortable.sorting-img {
        width: 80%;
        margin: 0 auto;
    }
    
    .question-player .sortable-answer #sortable.sorting-img-big li {
        width: calc(15% - 10px);
        padding: 0;
        margin: 35px 5px 25px 5px;
        border-color: #000;
        float: left;
    }
}

.question-player .sortable-answer #sortable>li.sorting-item {
    border-color: #21B3FD;
}

.question-player .sortable-answer .sortable-item.img-small,
.question-player .sortable-answer .sortable-item.img-big {
    padding: 0px !important;
}

.question-player .sortable-answer #sortable.sorting-img-small li span,
.question-player .sortable-answer #sortable.sorting-img li span,
.question-player .sortable-answer #sortable.sorting-img-big li span {
    width: 100%;
    float: left;
    font-size: 20px;
    line-height: 24px;
    font-family: "Source Sans Pro Regular", sans-serif;
}

.question-player .sortable-answer #sortable.sorting-img-small li .img-container,
.question-player .sortable-answer #sortable.sorting-img li .img-container,
.question-player .sortable-answer #sortable.sorting-img-big li .img-container {
    position: relative;
    float: left;
    width: auto;
    height: auto;
    max-height: 400px;
    max-width: 400px;
}


.question-player .sortable-answer #sortable>li .img-container img,
.question-player .sortable-answer .sortable-item .img-container img {
    border-radius: 8px;
    float: left;
}

.question-player .sortable-answer .sortable-item {
    height: auto;
}

.question-player .sortable-answer #sortable>li .img-container a {
    position: absolute;
    bottom: -15px;
    right: -1px;
    float: left;
}

.question-player .sortable-answer #sortable>li .img-container .img-expand-button {
    width: 35px;
    height: 35px;
    padding: 0;
    font-size: 32.5px;
    line-height: 35px;
    background-color: #fff;
    border: 1px solid #000;
    border-radius: 30px;
    position: absolute;
    bottom: -15px;
    right: -1px;
}

/** Image Expanded Modal **/
#imageExpandedModal .image-expanded-modal {
    padding: 5px;
    border: none;
}

#imageExpandedModal .image-expanded-modal img {
    margin: 0 auto;
}


/** Correction mode **/
.question-player #object-container .sortable-answer #sortable>li.correction {
    cursor: default;
}

.question-player .sortable-answer #sortable>li.correction.right,
.question-player .sortable-answer #sortable>li.correction.wrong {
    border: none;
}

.question-player .sortable-answer #sortable>li.correction.right span.text {
    border: 2px solid var(--sq-color-right);
    border-radius: 8px;
}

.question-player .sortable-answer #sortable>li.correction.wrong span.text {
    border: 2px solid var(--sq-color-wrong);
    border-radius: 8px;
}

.question-player .sortable-answer #sortable>li.correction .text {
    width: calc(100% - 50px);
}

.question-player .sortable-answer #sortable>li.narration-active.correction .text {
    width: calc(100% - 100px);
    padding: 12.5px 10px 0 10px;
    margin: 0px 0px 0px 10px;
}

/*
.question-player .sortable-answer #sortable>li.answer-type-img-small span .img-container .img-expand-button,
.question-player .sortable-answer #sortable>li.answer-type-img span .img-container .img-expand-button,
.question-player .sortable-answer #sortable>li.answer-type-img-big span .img-container .img-expand-button {
    display: none;
}
*/

.question-player .sortable-answer #sortable>li.answer-type-img-small span.correct-position,
.question-player .sortable-answer #sortable>li.answer-type-img span.correct-position,
.question-player .sortable-answer #sortable>li.answer-type-img-big span.correct-position {
    width: 40px;
    height: 40px;
    margin: 10px calc(50% - 20px) 0 calc(50% - 20px);
    border: none;
    font: 400 18px 'Source Sans Pro Regular', sans-serif;
    line-height: 40px;
    border-radius: 20px;
    -moz-border-radius: 20px;
    color: #FFF;
    vertical-align: top;
    text-align: center;
    display: inline-block;
    float: none;
}

.question-player .sortable-answer #sortable>li.answer-type-text span.correct-position {
    width: 40px;
    height: 40px;
    margin: 10px 0 0 10px;
    border: none;
    font: 400 18px 'Source Sans Pro Regular', sans-serif;
    line-height: 40px;
    border-radius: 20px;
    -moz-border-radius: 20px;
    color: #FFF;
    vertical-align: top;
    text-align: center;
    display: inline-block;
}

.question-player .sortable-answer #sortable>li span.correct-position.right {
    background-color: var(--sq-color-right);
}

.question-player .sortable-answer #sortable>li span.correct-position.wrong {
    background-color: var(--sq-color-wrong);
    border-radius: 20px;
}

/** Solution Mode **/
.question-player .sortable-answer #sortable.solutions li {
    cursor: default;
}

/* SPACES */

.question-player .space-lists audio{
    position: relative !important;
}

.question-player .space-draggable .target.ui-droppable .narration-container{
    padding: 0;
    float: left;
    height: 100%;
    display: flex;
}

/*
.question-player .space-draggable .draggableoption-text .narration-container{
    padding: 0px 0px 0px 0px;
    float: left;
    height: 100%;
    position: relative;
    left: -19px;
    top: -4px;
    margin: 0px;
}
*/

.question-player .target.ui-droppable .narration,
.question-player .draggableoption-text .narration,
.question-object.paper-execution .target.ui-droppable .narration,
.question-object.paper-execution .draggableoption-text .narration{
    width: 26px;
    height: 26px;
    border-radius: 13px;
    margin-right: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.question-player .target.ui-droppable .narration .icon,
.question-player .draggableoption-text .narration .icon,
.question-object.paper-execution .target.ui-droppable .narration .icon,
.question-object.paper-execution .draggableoption-text .narration .icon{
    font-size: 26px;
    position: relative;
    font-style: normal;
}

.question-player .target.ui-droppable .narration .playing,
.question-player .draggableoption-text .narration .playing{
    width: 26px;
    height: 26px;
    border-radius: 13px;
    background-color: #009de0;
    color: #FFF;
}

.space-draggable .option-container, .space-lists .option-container{
    padding: 0px;
    margin: 10px 0px;
    min-height: 40px;
    border: none;
}

.question-player .space-lists .answer div.space{
    min-width: 90px;
    height: 30px;
    line-height: 28px;
    display: inline-block;
    border: 0px;
    vertical-align: bottom;
    text-align: center;
    overflow: hidden;
}

.question-player .space-lists .answer div.space select{
    width: 100%;
}

.question-player .space-lists .answer div.space option:first-of-type{
    display: none;
}

.question-player .space-draggable .target span{
    border: 0px;
    padding: 0px;
}

.question-player .space-lists .answer{
    position: relative;
    align-items: center;
    line-height: 42px; 
    background-color: transparent;
}

body.question-player .answer li,
body.question-player .answer ul {
    position: relative;
}

body.question-player .space-lists .item.with-narration .answer{
    padding: 4px 0px 12px 58px;
    line-height: 42px; 
}

.question-player .space-lists .combobox{
    width: auto;
    height: 44px;
    padding: 4px 10px 4px 4px;
    margin: 4px 0px 4px 0px;
    color: #000;
    background: #FFF;
    border: 2px solid var(--sq-color-blue);
    border-radius: 8px;
    font-size: 20px;
}

.question-player .space-lists .combobox option{
    border: 2px solid #30B2FB;
}

.question-player .space-lists .dropdown{
    display: inline-block;
    border: 2px solid var(--sq-color-blue);
    border-radius: 8px;
    color: #333;
    background-color: #FFF;
    top: -1px;
    /*min-width: 160px;*/
    margin: 6px 3px;
    line-height: initial;
}

.question-player .space-lists.borderless input[type=text],
.question-player .space-lists.borderless .dropdown {
    border: none;
}

.question-player .space-lists.borderless input[type=text],
.question-player .space-lists.borderless .dropdown button {
    background: #F7F7F7;
    border-radius: 3px;
    box-shadow: inset 1px 1px 2px 1px #ddd;
}

.question-player .space-lists .dropdown.single{
    min-width: 55px;
}

.question-player .space-lists .dropdown.minimal{
    min-width: 70px;
}

.question-player .space-lists .dropdown.medium{
    min-width: 120px;
}

.question-player .space-lists .dropdown.maximum{
    min-width: 180px;
}

.question-player .space-lists .dropdown.gigantic{
    min-width: 280px;
}

.question-player .space-lists .dropdown.mathml{
    min-width: 60px;
}

.question-player .space-lists .dropdown.noanswer {
    border-color: #89C22B;
    border-style: dashed;
}

.question-player .space-lists .dropdown.right{
    border-color: #89C22B;
}

.question-player .space-lists .dropdown.wrong{
    border-color: var(--sq-color-wrong);
}

.question-player .space-lists .dropdown.solutions{
    display: inline-flex;
    border-style: dashed;
}

.question-player .space-lists.borderless .dropdown.solutions{
    border: none;
    background: #F7F7F7;
    border-radius: 3px;
    box-shadow: inset 1px 1px 2px 1px #ddd;
}

.question-player .space-lists .dropdown .solutions,
.question-player .space-lists .dropdown .correction{
    /*min-width: 160px;*/
    min-height: 44px;
    padding: 8px 30px 8px 12px;
    color: #333;
    font-size: 20px;
    text-align: initial;
}

.question-player .space-lists .dropdown:hover{
    background-color: #FFF;
}

.question-player .space-lists .dropdown.open{
    border-radius: 8px 8px 0px 0px;
}

.question-player .space-lists .dropdown button {
    font-family: 'Source Sans Pro Regular';
    margin: 0px;
    /*min-width: 160px;*/
    padding-right: 30px;
    color: #333;
    font-size: 20px;
    text-align: initial;
    background-color: #FFF;
    border-radius: 5px;
    border: 0px;
    transition: all 0.2s;
}

.question-player .space-lists .dropdown button:before{
    box-shadow: none;
    -webkit-box-shadow: none;
}

.question-player .space-lists .dropdown button.single{
    min-width: 59px;
}

.question-player .space-lists .dropdown button.extrasmall{
    min-width: 64px;
}

.question-player .space-lists .dropdown button.small{
    min-width: 114px;
}

.question-player .space-lists .dropdown button.medium{
    min-width: 174px;
}

.question-player .space-lists .dropdown button.large{
    min-width: 274px;
}

.question-player .space-lists .dropdown button.extralarge{
    min-width: 340px;
}

.question-player .space-lists .dropdown button.mathml{
    min-width: 160px;
    width: auto;
}

.question-player .space-lists .dropdown button:hover,
.question-player .space-lists .dropdown button:focus {
    font-family: 'Source Sans Pro Regular';
    background-color: #FFF;
    box-shadow: none;
}

.question-player .space-lists.borderless .dropdown button:hover,
.question-player .space-lists.borderless .dropdown button:focus {
    background-color: #E3E3E3;
    box-shadow: inset 1px 1px 2px 1px #ccc;
}

.question-player .space-lists .dropdown button:after {
    content: none;
}

.question-player .space-lists .open>.dropdown-toggle.btn-secondary,
.question-player .space-lists .dropdown .btn-secondary:active{
    background-color: #FFF;
    box-shadow: none;
}

.question-player .space-lists .dropdown-toggle::after{
    display: none;
}

.question-player .space-lists .dropdown .caret/*,
.question-player .space-list .dropdown button .caret,
.question-player .space-list .dropdown .solutions .caret,
.question-player .space-list .dropdown .correction .caret*/{
    position: absolute;
    top: 20px;
    right: 10px;
    border: 6px solid var(--sq-color-blue);
    border-color: #3694d7 transparent transparent transparent;
    transition: .4s all ease-in-out;
}

.question-player .space-lists .dropdown.open button .caret{
    transform: rotate(-180deg);
    top: 12px;
}

.question-player .space-lists .dropdown .dropdown-menu.show {
    border-top: 0px;
    border-left: 2px;
    border-right: 2px;
    border-bottom: 2px;
    border-style: solid;
    border-color: var(--sq-color-blue);
    border-radius: 5px;
    padding: 0px;
    box-shadow: none;
    position: absolute;
    top: -5px !important;
    left: -2px !important;
    min-width: calc(100% + 4px);
    display: inline-table;
}

.question-player .space-lists.borderless .dropdown .dropdown-menu.show{
    border-radius: 3px;
    background: #F7f7f7;
    box-shadow: inset 1px 1px 2px 1px #ddd;
    min-width: 100%;
    margin-left: 2px !important;
    border: none;
}

.question-player .space-lists .dropdown .dropdown-menu li {
/*.question-player .space-lists .dropdown.open .dropdown-menu li{*/
    border-top: 2px solid var(--sq-color-blue);
    border-radius: 0px;
    padding: 10px;
    font-size: 20px;
    cursor: pointer;
    white-space: nowrap;
}

.question-player .space-lists.borderless .dropdown .dropdown-menu li {
    border-top: 3px solid #E3E3E3;
    border-radius: 0px;
}

.question-player .space-lists.borderless .dropdown .dropdown-menu li:first-child {
    border: none;
}

.question-player .space-lists .dropdown .dropdown-menu li:hover{
    background-color: var(--sq-color-blue);
    color: #FFF;
}

.question-player .space-lists.borderless .dropdown .dropdown-menu li:hover{
    background-color: #E3E3E3;
    color: black;
    border-radius: 3px;
}

.question-player .space-lists .spaces{
    border: 2px solid var(--sq-color-blue);
    border-radius: 8px;
    min-width: 60px;
    height: auto;
    line-height: 42px;
    padding: 0px 10px;
    margin: 0 2px;
    vertical-align: middle;
}

.question-player .space-lists big:has(.spaces){
    font-size: 20px;
}

.question-player .space-lists .wiris-response{
    display: inline-block;
}

.question-player .space-lists .spaces.single{
    width: 35px;
}

.question-player .space-lists .spaces.extrasmall{
    width: 50px;
}

.question-player .space-lists .spaces.small{
    width: 100px;
}

.question-player .space-lists .spaces.medium{
    min-width: 160px;
}

.question-player .space-lists .spaces.large{
    min-width: 260px;
}

.question-player .space-lists .spaces.extralarge{
    min-width: 340px;
}

.question-player .space-lists .spaces.doubleextralarge{
    min-width: 570px;
}

.question-player .space-lists .spaces.mathml {
    max-width: 100%;
    min-width: 60px;
    padding: 0px 10px;
    height: auto;
    margin: 0 2px;
    display: inline-block;
    min-height: 46px;
    vertical-align: middle;
    cursor: pointer;
}

.question-player td:has(.spaces.mathml){
    position: relative;
    overflow: visible;
}

.question-player .space-lists .spaces.disrupter{
    width: 110px;
    height: 46px;    
}

.question-player .space-lists .spaces.mathml:not(:empty){
    display: inline-flex;
    align-items: center;
}

.question-player .space-lists .spaces.right{
    border-color: #89C22B;
}

.question-player .space-lists .spaces.wrong{
    border-color: var(--sq-color-wrong);
}

.question-player .space-lists .spaces.noanswer{
    border-color: #89C22B;
    border-style: dashed;
}

.question-player .space-lists .spaces.solutions,
.question-player .space-lists .spaces.correction{
    display: inline-block;
    padding: 0px 10px 0px 10px;
    min-width: 40px;
    min-height: 46px;
}

.question-player .space-lists .spaces.correction{
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
}

.question-player .space-lists .spaces.solutions{
    position: relative;
    /*
    overflow-x: auto;
    width: 100%;
    */
    border-style: dashed;
}

.question-player .space-draggable .target.solutions,
.question-player .space-draggable .target.correction{
    display: inline-table;
    padding: 0px 10px 0px 10px;
}

.question-player .space-draggable .target.solutions{
    border-style: dashed;
}

.question-player .space-draggable .answer,
.question-object.paper-execution .space-draggable .answer{
    /*padding: 4px 0px 20px 0px;*/
    line-height: 42px;
    font-size: 20px;
}

.question-player .space-draggable .item.with-narration .answer{
    padding: 8px 0px 8px 58px;
    line-height: 42px; 
    font-size: 20px;
}

.question-player .space-draggable .answer .target,
.question-object.paper-execution .space-draggable .answer .target{
    display: inline-flex;
    border: 2px dashed var(--sq-color-blue);
    border-radius: 26px;
    background-color: #FFF;
    margin: 2px 4px;
    padding: 6px 8px;
    min-width: 60px;
    min-height: 44px;
    line-height: 20px !important;
    font-size: 20px;
    vertical-align: middle;
    text-align: center;
    align-items: center;
    justify-content: center;
}

.question-player .space-draggable.borderless .answer .target,
.question-object.paper-execution .space-draggable.borderless .answer .target{
    border: none;
    box-shadow: inset 1px 1px 4px 1px #999;
}

.question-player .space-draggable .answer .target.drag-active,
.question-object.paper-execution .space-draggable .answer .target.drag-active{
    transform: scale(1.2);
    margin: 2px 0px;
    -webkit-transition: all .1s ease-in-out;
    -moz-transition: all .1s ease-in-out;
    -ms-transition: all .1s ease-in-out;
    -o-transition: all .1s ease-in-out;
}

.question-player .space-draggable .answer .target.ui-draggable-dragging,
.question-object.paper-execution .space-draggable .answer .target.ui-draggable-dragging{
    background-color: var(--sq-color-blue);
    color: #FFF;
    border: 2px solid var(--sq-color-blue);
    box-shadow: none;
}

.question-player .space-draggable .answer-spaces{
    margin-top: 20px;
}

.question-player .space-draggable .space-with-button,
.question-player .space-lists .space-with-button,
.question-player .space-draggable .space-with-button,
.question-player .space-lists .space-with-button {
    display: inline-block;
    position: relative;
}

.question-player .space-lists .space-with-button .space-solution-text{
    display: inline-block;
    border: 2px solid var(--ev-sq-selected-border);
    border-radius: 8px;
    color: #333;
    background-color: #FFF;
    margin: 0px 2px;
    position: relative;
    padding: 0px 10px;
    line-height: 42px;
    vertical-align: middle;
}

.question-player .space-lists .space-with-button .space-solution-text.mathml{
    min-width: 60px;
    /*padding: 10px;*/
    height: auto;
    margin: 0px 2px;
}

.question-player .space-draggable .option-container .draggableoption-text,
.question-object.paper-execution .space-draggable .option-container .draggableoption-text{
    padding: 4px 20px;
    width: fit-content;
    height: 44px;
    background-color:var(--sq-color-blue);
    color: #FFF;
    border: 2px solid var(--sq-color-blue);
    border-radius: 26px;
    cursor: pointer;
    text-align: center;
    z-index: 100;
    font-size: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.question-player .space-draggable .draggableoption-text{
    cursor: pointer;
}

.question-player .space-draggable .draggableoption-text:hover:not(:focus):not(.selected){
    background-color: #000;
    border-color: #000;
    color: #FFF;
}

.question-player .space-draggable.borderless .answer .target:hover:not(:focus):not(.selected):not(.ui-draggable-dragging){
    background: #F7F7F7;
}

.question-player .space-draggable .draggableoption-text.ui-draggable-dragging{
    transform: scale(1.3);
    overflow: hidden;
    white-space: nowrap;
    width: auto !important;
    max-width: 250px;
    text-overflow: ellipsis;
}

.question-player .space-draggable .target[data-curr-val]{
    color: rgba(0, 0, 0, 0.5);
}

.question-player .space-draggable .target.selected,
.question-object.paper-execution .space-draggable .target.selected {
    font-style: italic;
    color: white;
    border-color: #000;
    background-color: #000;
    border-style: solid;
}

.question-player .space-draggable .draggableoption-text.selected,
.question-object.paper-execution .space-draggable .draggableoption-text.selected{
    border-color: #000;
    background-color: #000;
}

.question-player .space-draggable.borderless .target.draggableoption-text.selected:not(.ui-draggable-dragging),
.question-object.paper-execution .space-draggable.borderless .target.draggableoption-text.selected:not(.ui-draggable-dragging) {
    background: #e7e7e7;
    color: black;
    font-weight: bold;
}

.question-player .space-draggable .target .draggableoption-text{
    padding: 4px;
}

.question-player .space-draggable .draggableoption-text.hide{
    display: none;
}

.question-player .space-draggable .spaces,
.question-object.paper-execution .space-draggable .spaces{
    padding: 0px;
    width: auto;
}

.question-player .space-draggable .spaces .draggableoption-text {
    margin: 0 10px;
}


/* NARRATION */
.question-player .narration{
    width: 40px;
    height: 40px;
    border-radius: 20px;
    text-align: center;
    cursor: pointer;
    background-color: #CCC;
    color: #000;    
}

/* .question-player .translationModalQuestionLayout .narration {
    display: none !important;
} */

.question-player .narration .icon{
    font-size: 40px;
    font-weight: 400;
    line-height: initial;
}

.question-player .narration .playing{
    width: 40px;
    height: 40px;
    border-radius: 20px;
    background-color: var(--sq-color-blue);
    color: #FFF !important;
}

.question-player .narration.disabled{
    cursor: initial !important;
    background-color: #FFF !important;
    border: 1px solid #CCC !important;
}

.question-player .narration.disabled .icon{
    color: #CCC !important;
}

#object-editor-content.object-editor .container:first-of-type{
    margin-top: 0px;
}

#object-editor-content.object-teacher .container:first-of-type{
    margin-top: 0px;
}

#object-editor-content.object-teacher .container{
    margin-top: 30px;
}

@media (min-width: 768px) {
    .question-player .statement.with-narration p{
        padding: 0px 0px 12px 58px;
    }

    /* GENERAL ANSWER */

    .question-player .answers-container{
        margin: 30px 0px 0px 0px;
    }

    /*
    .question-player .multiple-choices .btn:hover:not(.right):not(.wrong):not(.noanswer),
    .question-player .multiple-choices .btn:active:not(.right):not(.wrong):not(.noanswer){
        background-color: #21B3FD;
        color: #FFF !important;
    }
    */

    .question-player .single-choice.multiple-option .radio,
    .question-player .single-choice.multiple-option .checkbox {
        width: calc(100% - 20px);
    }

    .question-player .single-choice.multiple-option .radio:first-of-type,
    .question-player .single-choice.multiple-option .checkbox:first-of-type {
        margin-left: 0px;
    }

    /*
    .question-player .identification .narration{
        margin: 15px 15px 0px 0px;
    }
    */

    .question-player .identification .answeridentification-text{
        padding: 0px 0px;
    }

    .question-player .identification-word,
    .question-object .identification-word{
        width: 40px;
        height: 40px;
    }
    
    .question-player .answeridentification-text-words .answer-text-words word,
    .question-object .answeridentification-text-words .answer-text-words word{
        margin: 0px 30px 15px 0px;
    }
}

/* DIRECT ANSWER */

.container.direct-response {
    padding-right: 15px !important;
    padding-left: 15px !important;
}

.question-object .direct-response .wrong{
    background-color: #FFF !important;
    color: var(--ev-sq-correct) !important;
}


/* DIRECT ANSWER - AUDIO */

.question-player .direct-response .narration-container{
    margin: -2px 8px 6px 4px;
    float: left;
    padding: 0px;
}

.question-player .direct-response .answer-container .answer{
    padding: 10px 0px !important;
}

.question-player .direct-response .answer.with-narration{
    margin-top: 20px;
    margin-bottom: 10px;
}

.question-player .direct-response .response-input {
    padding: 10px 0px 10px 0px !important;
}

.question-player .direct-response .direct-response-option {
    width: 100%;
    font-size: 18px;
    border: 2px solid var(--sq-color-blue);
    float: left;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    border-radius: 8px;
    background-color: #fff;
    min-height: 44px;
    display: flex;
    align-items: center;
}

.question-player .direct-response .direct-response-option.wiris-response {
    padding: 6px 0;
    cursor: pointer;
}

.question-player .direct-response .sendAudioFile .direct-response-option{
    width: 100%;
    padding: 10px 10px;
    font-size: 18px;
    border: 2px solid var(--sq-color-blue);
    float: left;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    border-radius: 26px;
    background-color: #fff;
}

.question-player .direct-response .direct-response-option.right{
    border-color: var(--sq-color-right);
}

.question-player .direct-response .direct-response-option.noanswer{
    border: 2px dashed var(--sq-color-noanswer);
}

.question-player .direct-response .direct-response-option.wrong{
    border-color: var(--sq-color-wrong);
}

.question-player .direct-response .direct-response-option span{
    /* line-height: 36px; */
}

.question-player .direct-response .direct-response-option span.wrong{
    /* line-height: 36px; */
    text-decoration: line-through;
    color: var(--sq-color-wrong);
}

.question-player .direct-response .direct-response-option span.correction {
    margin: 0px 0px 0px 10px;
    color: #00cc33;
}

.wiris-response-textarea{
    display: none;
}

.audio-response {
    display: block;
    position: relative;
    width: 100%;
    height: 250px;
}

.audio-response-oportunities {
    font: 700 20px 'Source Sans Pro Bold', sans-serif;
    padding: 5px 0;
    /*text-align: center;*/
    bottom: 0;
}

.audio-response-oportunities span{
    color: #30B2FB;
}

.soundbar-scale{
    width: 200px;
    margin: 0 auto;
    height: 120px;
    background: url(/assets/sq/img/questions/scale.png) no-repeat transparent;
    background-position: center;
    background-position-y: 30px;
    float: left;
    opacity: 0.1;
}

.soundbar-scale svg{
    stroke: #FFF;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0px 15px;
    margin: 0;
    position:absolute;
}

.soundbar-scale path{
    stroke-linecap: square;
    stroke: white;
    stroke-width: 0.5px;
}

.soundbar-scale-full{
    /*display: none;*/
    position: relative;
    height: 110px;
    width: 0px;
    top: 30px;
    left: 24px;
    z-index: 500000;
    /*background: url(/assets/sq/img/questions/soundbar.png) no-repeat transparent;*/
    background: url(/assets/sq/img/questions/scale.png) no-repeat transparent;
}

.soundbar-bar{
    /*display: none;*/
    position: absolute;
    height: 110px;
    width: 10px;
    top: 11px;
    left: 19px;
    z-index: 3;
    background: url(/assets/sq/img/questions/soundbar.png) no-repeat transparent;
}

audio.audio-recorder{
    display: none;
}

.button-container{
    position: relative;
}

.button-container .rec-container,
.button-container .stop-container{
    /* display: contents; */
    position: absolute;
    top: 0px;
    right: 0px;
}

.button-container .stop-container,
.button-container .pause-container{
    display: none;
    z-index: 10;
}


.button-container .play-container{
    position: absolute;
    top: 15px;
    left: 0px;
}

.button-container .pause-container{
    position: absolute;
    top: 15px;
    left: 0px;
}

.button-container .verify-container{
    position: absolute;
    top: 15px;
    left: 80px;
}

.record-button,
.stop-button,
.play-button,
.verify-button,
.pause-button{
    cursor: pointer;
    margin: 0 auto;
    position: relative;
    top: 0px;
    border: 0;
    background: transparent;
}
/*
.play-button,
.verify-button {
    cursor: pointer;
    margin: 0 auto;
    position: relative;
    top: 0px !important;
    border: 0;
    background: transparent;
}
*/
.record-button:after {
    bottom: 0;
    color: #ff0000;
    content: "?";
    display: block;
    font-family: EvIcons;
    font-size: 50px;
}

.stop-button:after {
    bottom: 0;
    color: #000;
    content: "!";
    display: block;
    font-family: EvIcons;
    font-size: 50px;
}

.play-button:after {
    bottom: 0;
    color: #000;
    content: "%";
    display: block;
    font-family: EvIcons;
    font-size: 50px; 
}

.pause-button:after {
    bottom: 0;
    color: #000;
    content: "\0147";
    display: block;
    font-family: EvIcons;
    font-size: 50px;
}
/*
.play-button.half-speed:after {
    bottom: 0;
    color: #000;
    content: "%";
    display: block;
    font-family: EvIcons;
    font-size: 20px; 
}

.play-button.double-speed:after {
    bottom: 0;
    color: #000;
    content: "%";
    display: block;
    font-family: EvIcons;
    font-size: 40px; 
}
*/
.verify-button:after {
    bottom: 0;
    color: #000;
    content: "a";
    display: block;
    font-family: EvIcons;
    font-size: 50px; 
}


.play-button.disabled:after,
.record-button.disabled:after,
.stop-button.disabled:after,
.verify-button.disabled:after {
    color: #BBB !important;
    pointer-events: none;
}

.hide { display: none; }

.disabled {
    cursor: auto;
    pointer-events: none;
}

#defaultCanvas0 {
    position: absolute;
    z-index: -1;
}
.audio-response-wrapper {
    position: relative;
    background-color: rgb(244, 244, 244);
    box-shadow: inset 0px 11px 4px -9px #BBB;
    top: 0;
    
}

.makeVisible {
    opacity: 1 !important;
}

#question-test .container {
    padding-bottom: 0 !important;
}

/* AUDIO PLAYER */

@font-face {
	font-family: 'Material Icons';
	font-style: normal;
	font-weight: 400;
	src: url(https://fonts.gstatic.com/s/materialicons/v70/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
  }
  
  .material-icons {
	font-family: 'Material Icons' !important;
	font-weight: normal;
	font-style: normal;
	font-size: 24px;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	display: inline-block;
	white-space: nowrap;
	word-wrap: normal;
	direction: ltr;
	-webkit-font-feature-settings: 'liga';
	-webkit-font-smoothing: antialiased;
  }


.audio-player {
	background-color: #ebebeb;
	border-radius: 3px;
	border: 0px;
	border-radius: 20px;
	position: relative;
	color: #333;
    padding: 0;
    display: flex !important;
    min-width: 130px;
    width: 100%;
    /* max-width: 400px; */
    direction: ltr !important;
  }
  
  .controls {
	display: flex !important;
	flex-wrap: nowrap;
    padding: 1px;
    width: 100%;
  }

  .controls button {
	font-size: 14px;
	padding: 0;
	border: 0;
	background-color: transparent;
	color: inherit;
	font-size: inherit;
	line-height: inherit;
	display: inline-flex;
	align-items: center;
    width: 25px;
    height: 35px;
  }

  .controls .left-controls button.js-volume {
    margin-right: 0;
  }


  .left-controls {
    display: flex !important;
	align-items: center;
    min-width: 150px;
    position: relative;
    width: 100%;
    flex-grow: 1;
  }

  .slider-controls {
	display: flex !important;
	flex-grow: 1;
	align-items: center;
  }

  .right-controls {
	display: flex !important;
	align-items: center;
    justify-content: center;
    width: 110px;
    padding: 0;
  }
  
  .progress-slider-background {
	width: 98%;
	background-color: #FFF;
	cursor: pointer;
	padding-right: 7px;
	box-sizing: border-box;
	border-radius: 20px;
  }

  .progress-slider {
	position: relative;
	pointer-events: none;
	/*background-color: #000;*/
	height: 10px;
	margin-left: 0;
	margin-right: 0;
	width: 0%;
	padding-left: 7px;
	box-sizing: border-box;
    display: block !important;
  }
  
  .progress-slider::after {
	content: "";
	position: absolute;
	right: 0;
	top: 50%;
	transform: translate(50%, -50%);
	display: block;
	width: 12px;
	height: 12px;
	background-color: #000;
	border-radius: 50%;
	z-index: 1;
	box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
  }
  
  .playback-time {
	font-family: "Roboto", sans-serif;
	margin-right: 15px;
	margin-top: 2px;
	font-size: 12px;
  }
  
  .volume-group {
    position: relative;
	display: flex;
	flex-grow: 0;
	align-items: center;
  }

  .js-volume-slider-container {
    width: 40px;
    padding: 0;
    border-radius: 20px;
    display: none;
  }

  .js-volume-slider-container.active {
    display: block;
  }
  
  .volume-slider-background {
	cursor: pointer;
	display: inline-block;
	width: 100%;
    max-width: 40px;
	background-color: #FFFFFF;
	margin-left: 0;
    margin-bottom: 2px;
    margin-right: 0;
	border-radius: 20px;
  }

  .volume-slider {
	pointer-events: none;
	position: relative;
	height: 10px;
	width: 100%;
    display: block !important;
	/*background-color: #3357d4;*/
  }
  .volume-slider::after {
	content: "";
	position: absolute;
	right: 0;
	top: 50%;
	transform: translate(50%, -50%);
	display: block;
	width: 12px;
	height: 12px;
	background-color: #000;
	border-radius: 50%;
	z-index: 1;
	box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
  }
  
  .audio-player .dropdown-speed{
    position: relative;
    display: inline-block;
    width: 45px;
  }

  .audio-player .dropdown-speed-content{
    display: none;
    position: absolute;
    background-color: #d1d1d1;
    width: 34px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    /* z-index: 1000; */
    padding: 0px;
    top: -20px !important;
    right: 7px;
    border-radius: 8px;
  }

  .audio-player .dropdown-speed-content .dropdown-speed-text{
    color: black;
    padding: 4px 3px;
    text-decoration: none;
    display: block;
    cursor: pointer;
  }

  .audio-player .dropdown-speed-content .dropdown-speed-text:hover{
      background-color: #000;
      color: #FFF;
  }

  .audio-player .dropdown-speed .js-playback-speed{
    border: none;
    cursor: pointer;
  }

  .audio-player button {
	cursor: pointer;
	margin: 0px 10px 0px 10px;
    /*margin-right: 3px;*/
	vertical-align: middle;
	position: relative;
  }

  .js-playback-speed {
    width: 30px !important;
  }
  
  .controls .replay-button {
	margin-right: 0px;
  }
  .material-icons {
	font-size: 24px;
  }
  .material-icons-copy {
	font-size: 16px;
  }
  
  .material-icons-playbackspeed {
	font-size: 24px;
	margin-right: 1px;
  }
  .material-icons-volume {
	font-size: 22px;
  }
  .speed-text,
  .dropdown-speed-text {
	font-family: "Roboto", sans-serif;
	font-size: 12px;
  }
  
  .copy-msg {
	color: #3357d4;
	font-size: 13px;
	font-family: "Roboto", sans-serif;
	opacity: 0;
	transition: opacity 0.5s ease-out;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: #3357d4;
	color: #ffffff;
	border-radius: 3px;
	box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
	padding: 2px 6px;
	z-index: 1;
	text-align: center;
	pointer-events:none;
  }
  


@media only screen and (min-width: 1024px) {
}

@media only screen and (min-width: 768px) {
    
    .button-container .rec-container,
    .button-container .stop-container{
        position: absolute;
        top: 15px;
        right: 0px;
    }

    .button-container .play-container,
    .button-container .pause-container{
        position: absolute;
        top: 15px;
        left: 0px;
    }

    .play-button,
    .verify-button,
    .pause-button {
        cursor: pointer;
        margin: 0 auto;
        position: relative;
        top: 30px !important;
        border: 0;
        background: transparent;
    }

    .soundbar-scale-full{
        /*display: none;*/
        position: relative;
        height: 110px;
        width: 0px;
        top: 30px;
        left: 24px;
        z-index: 10;
        /*background: url(/assets/sq/img/questions/soundbar.png) no-repeat transparent;*/
        background: url(/assets/sq/img/questions/scale.png) no-repeat transparent;
    }

    /*#soundbar-bar{*/
        /*display: none;*/
        /*position: absolute;
        height: 110px;
        width: 10px;
        top: 11px;
        left: 19px;
        z-index: 100;
        background: url(/assets/sq/img/questions/soundbar.png) no-repeat transparent;
    }*/

    .audio-response {
        height: 200px;
    }

    .soundbar-container{
        margin: 0px 20px 0px 20px;
        height: 130px;
    }

    .play-button,
    .record-button,
    .stop-button,
    .verify-button,
    .pause-button {
        top: 30px;
    }

    .record-button:after,
    .stop-button:after,
    .play-button:after,
    .verify-button:after,
    .pause-button:after {
        line-height: 56px;
    }
}


/* ASSESSMENT */

body.teacher-layout .question-object h4,
.question-player h4{
    font: 700 18px 'Source Sans Pro Regular', sans-serif;
    padding: 10px 0px 4px 0px;
}

.question-player h5{
    font: 400 18px 'Source Sans Pro light', sans-serif;
    padding: 10px 0px 4px 0px;
    position: fixed;
    background-color: #FFF;
    z-index: 100;
    width: 100%;
    top: 134px;
}

.question-player h6{
    font: 400 16px 'Source Sans Pro light', sans-serif;
    padding: 10px 0px 4px 0px;
    position: fixed;
    background-color: #FFF;
    z-index: 100;
    width: 100%;
    top: 134px;
}

.question-player #object-container h4 {
    font: 700 18px 'Source Sans Pro Regular', sans-serif;
    padding: 10px 0px 4px 0px;
}

.question-player #object-container h5{
    position: initial;
    font: 700 18px 'Source Sans Pro Regular', sans-serif;
    padding: 10px 15px 4px 15px;
}

.question-player #assessment-search-result-section h6,
.question-player #object-item-list h6,
.question-player #object-container h6{
    position: initial;
    font: 700 18px 'Source Sans Pro Regular', sans-serif;
    padding: 10px 0px 0px 0px;
    background-color: transparent;
}

.question-player #object-container h7{
    position: initial;
    font: 400 18px 'Source Sans Pro Regular', sans-serif;
    background-color: transparent;
    color: #999999;
    display: block;
}

/* ASSESSMENT - Search questions */
/*
#assessment-search-result-section,
.search-result-section{
    margin: 140px 0px;
    padding-bottom: 150px;
}

.search-result-section-header h1.section-title{
    font-family: 'Source Sans Pro light', sans-serif;
    font-size: 30px;
    margin-bottom: 0px;
}

.search-result-section-header .search-bar-container .container {
    margin-top: 16px;
}

.search-result-section-header .search-bar-container {
    top: 64px;
}

#assessment-search-result-section h5,
.search-result-section h5{
    top: 138px;
    position: fixed !important;
    font: 400 30px 'Source Sans Pro light', sans-serif !important;
    padding: 10px 0px 10px 0px !important;
    background-color: #FFF;
    z-index: 100;
    width: 100%;
}

.questions-group-question-container h4{
    border: 0px !important;
}
*/
/*
.questions-group .group-header h6{
    font: 700 18px 'Source Sans Pro Bold', sans-serif !important;
    margin-top: 12px;
    text-transform: uppercase;
    position: initial;
}

.questions-group h6 span{
    font: 400 18px 'Source Sans Pro Regular', sans-serif;
    color: #666666 !important;
    text-transform: none;
}
*/
/* ASSOCIATION QUESTIONS */
.question-player .association .association-answer{
    display: flex;
    justify-content: center;
    flex-direction: column;
    min-height: 100px;
    text-align: center;
}

/* CHALLENGES */


.challenge-statement{
    padding: 0px 15px !important;
    
}

.container-object .challenge{
    margin: 20px 0px 0px 0px;
}

.container-object .challenge .multiple-choices{
    padding-bottom: 18px !important;
}
    
.container-object .challenge .card{
    border: 0px;
}

.container-object .challenge .answer-content {
    border: 2px solid #21B3FD;
    border-radius: 14px !important;
    background-color: transparent;
    /*margin-bottom: 30px;*/
}

.container-object .challenge .answer-content.selected{
    background-color: #21B3FD;
}

.container-object .challenge .answer-text {
    display: flex;
    justify-content: center;
    flex-direction: column;
    color: #666;
    padding: 0px;
    border-radius: 28px;
    background-color: transparent;
}

.container-object .challenge .answer-content.selected .answer-text{
    color: #FFF;
}

.container-object .challenge .answer-symbol{
    width: 46px;
    height: 46px;
    float: left;
    margin: 8px;
    padding: 0;
    border-radius: 5px;
    text-align: center;
}

.container-object .challenge .answer-symbol span{
    color: #FFF;
    font-size: 46px;
    line-height: 46px;
}

.container-object .challenge .answer-symbol.option-3{
    transform: rotate(90deg);
}

/*
.container-object .challenge .answer-symbol div{
    margin: 18px 10px;
    padding: 0;
    width: 16px;
    height: 9px;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    border: 4px solid;
    border-bottom: 0;
    border-color: #FFF;
}

.container-object .challenge .answer-content.selected .answer-symbol.option-0,
.container-object .challenge .answer-content.selected .answer-symbol.option-1,
.container-object .challenge .answer-content.selected .answer-symbol.option-2,
.container-object .challenge .answer-content.selected .answer-symbol.option-3{
    background-color: #FFF;
}
*/

.container-object .challenge .answer-symbol.option-0{
    background-color: #63C125;
}

.container-object .challenge .answer-content.selected  .answer-symbol.option-0 div{
    border-color: #63C125;
}

.container-object .challenge .answer-symbol.option-1{
    background-color: #FE7622;
}

.container-object .challenge .answer-content.selected  .answer-symbol.option-1 div{
    border-color: #FE7622;
}

.container-object .challenge .answer-symbol.option-2{
    background-color: #FD477F;
}

.container-object .challenge .answer-content.selected  .answer-symbol.option-2 div{
    border-color: #FD477F;
}

.container-object .challenge .answer-symbol.option-3{
    background-color: #2187ED;
}

.container-object .challenge .answer-content.selected  .answer-symbol.option-3 div{
    border-color: #2187ED;
}

.container-object .challenge-answer {
    min-height: 64px;
}

.container-object .challenge-answer .answer-text img{
    width: 150px;
}

/*
.container-object .challenge .answer-symbol.option-0 div{
    transform: rotate(0deg);
}

.container-object .challenge .answer-symbol.option-1 div{
    transform: rotate(-90deg);
}

.container-object .challenge .answer-symbol.option-2 div{
    transform: rotate(90deg);
}

.container-object .challenge .answer-symbol.option-3 div{
    transform: rotate(180deg);
}
*/

.search-results-container .container-object{
    border: 0px;
    padding: 0px;
}

.search-results-container .challenge .answer-object{
    padding: 5px 0px 0px 0px;
}

.search-results-container .challenge .answer-container{
    background-color: transparent;
}

.search-results-container .challenge .answer-text{
    /* flex-direction: initial;
    justify-content: initial; */
}

.search-results-container .challenge .answer-text p{
    padding: 12px 24px 12px 0px;
}

.search-results-container .single-choice {
    font: 400 20px 'Source Sans Pro Regular', sans-serif;
    display: flex;
    padding: 10px 0px 10px 0px;
}

.search-results-container .single-choice .radio{
    padding: 0px;
    width: 100%;
    height: auto;
    border: 2px solid #21B3FD;
    border-radius: 26px !important;
    background-color: transparent;
}

.search-results-container .single-choice .item{
    background-color: #FFF;
    color: #333;
    border-radius: 24px !important;
    font-family: 'Source Sans Pro Regular', sans-serif;
    font-size: 20px;
    line-height: 22px;
    min-height: 50px;
    height: auto;
    padding: 12px 24px;
    white-space: normal;
    text-align: left;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
}

/* SPIINERS */

body.spinner-player{
    width: 100%;
    min-width: 320px;
    padding: 0 !important;
    font-family: 'Source Sans Pro Regular',sans-serif;
    font-size: 18px;
    background-color: #FFF;
    overflow: visible;
    background-repeat: no-repeat;
    background-size: cover;
}

body.spinner-player.dice-player{
    background-color: #67C5D9;
}

body.spinner-player.wheel-player{
    background-color: #0E498E;
}

.dice-player #object-container.spinner-container{
    /*background-color: #67C5D9;*/
    background-repeat: no-repeat;
    background-size: cover;
}
.wheel-player #object-container.spinner-container{
    /*background-color: #0E498E;*/
    background-repeat: no-repeat;
    background-size: cover;
}

body.spinner-player .object-header {
    background-color: rgb(255,255,255);
    z-index: 10;
    position: fixed;
    width: 100%;
    height: 70px;
    padding: 13px 0;
    font-size: 26px;
    color: rgb(255,255,255);
    top: 0px;
}

section.player-section{
    padding: 0;
    /*margin: 70px 0px 0px 0px;*/
    font-family: 'Source Sans Pro Regular', sans-serif;   
}

.dice-player .spinner-statement{
    background-color: #FFF;
    border-radius: 10px;
    text-align: center;
    font-family: 'Source Sans Pro Bold', sans-serif;   
    font-size: 24px;
    line-height: 30px;
    min-height: 50px;
    color: #000;
}

.wheel-player .spinner-statement{
    background-color: #FFF;
    border-radius: 10px;
    text-align: center;
    font-size: 24px;
    font-family: 'Source Sans Pro Bold', sans-serif;   
    line-height: 30px;
    min-height: 50px;
    color: #000;
}

/*
#object-container .spinner-title{
    text-align: center;
    color: #FFF;
    font-size: 40px;
    text-transform: uppercase;
    line-height: 100px;
}
*/
.full-screen-button{
    position: fixed;
    bottom: 20px;
    right: 20px;
    color: #FFF;
}

.full-screen-button span{
    font-size: 60px;
}

/*
#object-container.spinner-container{
    padding: var(--sq-fixed-header-heigth) 15px 0 15px;
}
*/

#object-container.spinner-container.normal-screen{
    transition: all .15s linear;
}

#object-container.spinner-container.full-screen{
    max-width: 100%;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 999;
    transition: all .15s linear;
}

#player-section.object-spinner{
    margin: 0;
    font-family: 'Source Sans Pro Regular', sans-serif;
    background: none;
}

/* DICE */
section.cube-container {
    position: relative;
    perspective: 1000px;
    perspective-origin: 50% 100%;
    background: none;
}

section.cube-container.preview{
    width: 200px;
    height: 200px;
    position: relative;
    margin: 0 auto 150px;
    perspective: 1000px;
    perspective-origin: 50% 100%;
}

.col-12 section.cube-container {
    width: 300px;
    height: 300px;
    margin: 0 auto 150px;
}

section.cube-container .cube-object {
    width: 100%;
    height: 100%;
    position: absolute;
    transform-style: preserve-3d;
    transition: transform 6s;
}

section.cube-container.preview .cube-object {
    top: 100px;
}

.col-12 .cube-object {
    top: 100px;
}

.col-sm-6 .cube-object {
    top: 100px;
}

.col-sm-4 .cube-object {
    top: 75px;
}

.col-sm-3 .cube-object {
    top: 75px;
}

.cube-object:hover {
    cursor: pointer;
}

.cube-object div.face {
    width: 200px;
    height: 200px;
    background: rgba(255, 255, 255, 1);
    display: block;
    position: absolute;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    margin: 0 auto;  
    font-family: Arial, Helvetica, sans-serif;
    font-size: 30px;
    line-height: 30px;
    text-align: center;
    color: #000;
    /*box-shadow: -10px 10px 30px #00000029 inset;*/
    -webkit-box-shadow: inset -10px 10px 30px rgba(0, 0, 0, 0.16);
    box-shadow: inset -10px 10px 30px rgba(0, 0, 0, 0.16);
}

.col-12 .cube-object div.face {
    width: 300px;
    height: 300px;
    padding: 10px;
    font-size: 40px;
    font-weight: 700;
    line-height: 40px;
    text-align: center;
}

.cube-object .face .face-image-container{
    width: 100%;
    height: 100%;
    /*
    margin: 0 auto;
    background-size: cover;
    */
}

.cube-object .face .face-image {
    width: 100%;
    height: 100%;
  }
  
.cube-object .face .face-image-contain {
    object-fit: contain;
    object-position: center;
}
  
.cube-object .face .face-image-cover {
    object-fit: contain;
    object-position: center;
}

.cube-object .face-content{
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
}

.col-12 .cube-object .front {
    transform: translateZ(150px);
}
  
.col-12 .cube-object .back {
    transform: rotateX(-180deg) translateZ(150px);
}

.col-12 .cube-object .right {
    transform: rotateY(90deg) translateZ(150px);
}

.col-12 .cube-object .left {
    transform: rotateY(-90deg) translateZ(150px);
}

.col-12 .cube-object .top {
    transform: rotateX(90deg) translateZ(150px);
}

.col-12 .cube-object .bottom {
    transform: rotateX(-90deg) translateZ(150px);
}


section.cube-container.preview .cube-object .front {
    transform: translateZ(100px)
}

section.cube-container.preview .cube-object .back {
    transform: rotateX(-180deg) translateZ(100px)
}

section.cube-container.preview .cube-object .right {
    transform: rotateY(90deg) translateZ(100px)
}

section.cube-container.preview .cube-object .left {
    transform: rotateY(-90deg) translateZ(100px)
}

section.cube-container.preview .cube-object .top {
    transform: rotateX(90deg) translateZ(100px)
}

section.cube-container.preview .cube-object .bottom {
    transform: rotateX(-90deg) translateZ(100px)
}

.spinner-action-button{
    display: inline-block;
    width: 50px;
    height: 50px;
    border-radius: 25px !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    padding: 2px 0px;
    cursor: pointer;
    color: #000;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    box-shadow: inset 0px -5px 4px rgba(0, 0, 0, 0.16), 0px 5px 10px rgba(0, 0, 0, 0.16);
    text-align: center;
}

span.spinner-action-button.wheel {
    position: relative;
    /*left: -25px;*/
}

.spinner-action-all-button{
    display: inline-block;
    width: 230px;
    height: 50px;
    background: #FFF 0% 0% no-repeat padding-box;
    box-shadow: inset 0px -5px 4px rgba(0, 0, 0, 0.16), 0px 5px 10px rgba(0, 0, 0, 0.16);
    border-radius: 24px;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0px;
    color: #000;
    padding: 10px;
    cursor: pointer;
    /*margin-bottom: 50px;*/
}

.col-sm-12 .cube-object .cube-textfill{
    width: 400px;
    height: 400px;
}

.col-sm-6 .cube-object .cube-textfill{
    width: 300px;
    height: 300px;
}

.col-sm-4 .cube-object .cube-textfill{
    width: 200px;
    height: 200px;
}

.col-sm-3 .cube-object .cube-textfill{
    width: 150px;
    height: 150px;
}

.cube-object .face-content.audio:hover:before{
    content: '%';
}

/* WHEEL */
section.wheel-container {
    width: 400px;
    height: 400px;
    position: relative;
    margin: 0 auto;
    margin-top: 50px;
    background: none;
    transform: rotate(-90deg);
}

section.wheel-container.preview {
    width: 400px;
    height: 400px;
    position: relative;
    margin: 0 auto;
    margin-top: 50px;
    padding-top: 65px;
}

.wheel-container .wheel-pointer{
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    z-index: 10;
    text-align: center;
    top: -100px;
}

.wheel-container.preview .wheel-pointer{
    top: -40px;
}

.wheel-container .wheel-pointer span{
    font-size: 110px;
    color: #FFF;
}

.wheel-container.preview .wheel-pointer span{
    color: #000;
}

.col-sm-12 section.wheel-container {
    width: 300px;
    height: 300px;
    position: relative;
    margin: 0 auto;
    margin-top: 50px;
}

.col-12 section.wheel-container{
    width: 400px;
    height: 400px;
    position: relative;
    margin: 0 auto;
    margin-top: 50px;
    left: 25px;
}

.wheel-object{
    width: 350px;
    height: 350px;
    margin: 0 auto;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    border: 8px solid transparent;
    box-shadow: 0px 6px 31px rgb(0, 0, 0, 0.16);
    transform: rotate(0deg);
    /*
    margin: 0 auto;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    border: 8px solid transparent;
    box-shadow: 0px 6px 31px rgba(0, 0, 0, 0.16);
    border: 8px solid #fff;
    box-shadow: rgba(0,0,0,0.2) 0px 0px 10px, rgba(0,0,0,0.05) 0px 3px 0px;
    */
    transform: rotate(0deg);
}
/*
.col-sm-12 .wheel-object{
    width: 300px;
    height: 300px;
}
*/
/*.col-sm-6 .wheel-object{*/
.col-sm-12 .wheel-object{
    width: 351px;
    height: 351px;
}
/*
.col-sm-4 .wheel-object{
    width: 251px;
    height: 251px;
}
*/
.wheel-object:before{
    content: '';
    position: absolute;
    border: 4px solid rgba(0,0,0,0.1);
    width: 342px;
    height: 342px;
    border-radius: 50%;
    z-index: 1000;	
}
/*
.col-sm-12 .wheel-object:before{
    content: '';
    position: absolute;
    border: 4px solid rgba(0,0,0,0.1);
    width: 292px;
    height: 292px;
    border-radius: 50%;
    z-index: 1000;	
}

.col-sm-6 .wheel-object:before{
*/
.col-12 .wheel-object:before{
    content: '';
    position: absolute;
    border: 4px solid rgba(0,0,0,0.1);
    width: 342px;
    height: 342px;
    border-radius: 50%;
    z-index: 1000;	
}
/*
.col-sm-4 .wheel-object:before{
    content: '';
    position: absolute;
    border: 4px solid rgba(0,0,0,0.1);
    width: 242px;
    height: 242px;
    border-radius: 50%;
    z-index: 1000;	
}
*/
.inner-wheel{
    position: absolute;
    width:100%;
    height:100%;
    -webkit-transition: all 6s cubic-bezier(0,.99,.44,.99);
    -moz-transition:    all 6 cubic-bezier(0,.99,.44,.99);
    -o-transition:      all 6s cubic-bezier(0,.99,.44,.99);
    -ms-transition:     all 6s cubic-bezier(0,.99,.44,.99);
    transition:         all 6s cubic-bezier(0,.99,.44,.99);	
}

.spin-button{
    width: 68px;
    height: 68px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -34px 0 0 -34px;
    border-radius: 50%;
    box-shadow: rgba(0,0,0,0.1) 0px 3px 0px;
    z-index: 1000;
    background: #fff;
    cursor: pointer;
    -webkit-user-select: none; 
    -moz-user-select: none;    
    -ms-user-select: none;     
    -o-user-select: none;
    user-select: none;
    font-size: 16px;
}

.spin-button:before{
	content: "";
	position: absolute;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 20px 28px 20px;
	border-color: transparent transparent #ffffff transparent;
	top: -12px;
	left: 14px;
    /*
    top: 20px;
    left: 45px;
    transform: rotate(90deg);
    */
}

.wheel-center{
    width: 68px;
    height: 68px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -34px 0 0 -34px;
    border-radius: 50%;
    box-shadow: 0px 6px 12px #00000029;
    z-index: 1000;
    background: #E0E0E0;
    -webkit-user-select: none; 
    -moz-user-select: none;    
    -ms-user-select: none;     
    -o-user-select: none;
    user-select: none;
    font-size: 16px;
}

/*
.wheel-center:before{
	content: "";
	position: absolute;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 20px 28px 20px;
	border-color: transparent transparent #ffffff transparent;
	top: -12px;
	left: 14px;
*/

.inner-center{
    width: 38px;
    height: 38px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -19px 0 0 -19px;
    border-radius: 50%;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    z-index: 999;
    box-shadow: 0px 6px 12px #00000029;
    text-align: center;
}

.new-spin-button{
    width: 68px;
    height: 68px;
    border-radius: 50%;
    box-shadow: rgba(0,0,0,0.1) 0px 3px 0px;
    z-index: 1000;
    background: #fff;
    cursor: pointer;
    -webkit-user-select: none; 
    -moz-user-select: none;    
    -ms-user-select: none;     
    -o-user-select: none;
    user-select: none;
    font-size: 16px;
    margin: 0 auto;
}



.new-spin-button:before{
	content: "";
	border-style: solid;
	border-width: 0 20px 28px 20px;
	border-color: transparent transparent #ffffff transparent;
	top: -12px;
	left: 14px;
}

.inner-spin{
    width: 54px;
    height: 54px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -27px 0 0 -27px;
    border-radius: 50%;
    background: #000;
    z-index: 999;
    box-shadow: rgba(255,255,255,1) 0px -2px 0px inset, rgba(255,255,255,1) 0px 2px 0px inset,  rgba(0,0,0,0.4) 0px 0px 5px ;
    background: rgb(255,255,255); /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%, rgba(234,234,234,1) 100%); /* FF3.6+ */
    background: -webkit-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(234,234,234,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(234,234,234,1) 100%); /* Opera 12+ */
    background: -ms-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(234,234,234,1) 100%); /* IE10+ */
    background: radial-gradient(ellipse at center,  rgba(255,255,255,1) 0%,rgba(234,234,234,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    text-align: center;	
}

.new-inner-spin{
    width: 54px;
    height: 54px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -27px 0 0 -27px;
    border-radius: 50%;
    background: #000;
    z-index: 999;
    box-shadow: rgba(255,255,255,1) 0px -2px 0px inset, rgba(255,255,255,1) 0px 2px 0px inset,  rgba(0,0,0,0.4) 0px 0px 5px ;
    background: rgb(255,255,255); /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%, rgba(234,234,234,1) 100%); /* FF3.6+ */
    background: -webkit-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(234,234,234,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(234,234,234,1) 100%); /* Opera 12+ */
    background: -ms-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(234,234,234,1) 100%); /* IE10+ */
    background: radial-gradient(ellipse at center,  rgba(255,255,255,1) 0%,rgba(234,234,234,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    text-align: center;	
}

.inner-spin span{
    font-size: 50px;
    display: block;
    margin: -8px;
}

.spin-button:active .inner-spin{
	box-shadow:rgba(0,0,0,0.4) 0px 0px 5px inset;
}

.spin-button:active:after{
	font-size: 15px;	
}

.wheel-result{
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 335px;
    height: 335px;
    transition: visibility 0s, opacity 0.5s linear;
    z-index: 10000;
    background-color: rgba(0,0,0, 0.7);
    color: #FFF;
    font-size: 20px;
    transform: rotate(90deg);
}
/*
.col-sm-12 .wheel-result{
    width: 284px;
    height: 284px;
    font-size: 20px;
}

.col-sm-6 .wheel-result{
    width: 335px;
    height: 335px;
}

.col-sm-4 .wheel-result{
    width: 235px;
    height: 235px;
}
*/
.wheel-result.show {
    visibility: visible;
    opacity: 1;
}

.wheel-result.show span.result-content{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 100px;
    width: 100%;
    text-align: center;
}

.col-sm-12 .wheel-result.show span.result-content{
    font-size: 55px;
    padding: 40px;
}

.col-sm-6 .wheel-result.show span.result-content{
    font-size: 60px;
    padding: 30px;
}

.col-sm-4 .wheel-result.show span.result-content{
    /*font-size: 50px;*/
    font-size: 30px;
    padding: 12px;
}

.wheel-result .resource-frame{
    white-space: nowrap;
    text-align: center;
    margin: 1em 0;
}

.col-sm-12 .wheel-result .resource-frame{
    height: 284px;
}

.col-sm-6 .wheel-result .resource-frame{
    height: 334px;
}

.col-sm-4 .wheel-result .resource-frame{
    height: 234px;
}

.wheel-result .resource-frame .helper {
    display: inline-block;
    height: 90%;
    vertical-align: middle;
}

.wheel-result .wheel-result-image{
    position: absolute;
    top: 50%;
    transform: translateX(34%) translateY(-50%);
    margin: 0 auto;
    /*border-radius: 50%;*/
    background-size: cover;
    width: 59%;
    height: 59%;
}

/*
.col-sm-4 .wheel-result .wheel-result-image{
    width: 200px;
    height: 200px;
    left: 18px;
}
*/

.wheel-result .sq-resource{
    border: 0px;
    margin: 0 auto;
    float: initial;
    cursor: pointer;
    padding-top: 50%;
    position: relative;
}

.wheel-object .sq-resource-object {
    position: relative;
    height: 50px;
    border-radius: 18px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    top: -25px;
    z-index: 100000;
}

.wheel-object .sq-resource-object.audio span{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 80px;
    background-color: transparent;
}

.wheel-result .sq-resource-object.audio span{
    color: #FFF;
    font-size: 120px;
}
/*
.wheel-result .sq-resource-object.audio span:hover{
    font-size: 120px;
    
}

.wheel-result .sq-resource-object.audio span:hover:before{
    content: '%';
}
*/
.wheel-slice-image{
    width: 65px;
    height: 65px;
    margin: 0 auto;
    border-radius: 6px;
    background-size: cover;
}

.col-sm-12 .wheel-slice-image {
    width: 35px;
    height: 35px;
}

.col-sm-6 .wheel-slice-image {
    width: 85px;
    height: 85px;
}

.col-sm-6 .wheel-4 .wheel-slice-image,
.col-sm-6 .wheel-5 .wheel-slice-image{
    width: 70px;
    height: 70px;  
}

.col-sm-6 .wheel-6 .wheel-slice-image,
.col-sm-6 .wheel-7 .wheel-slice-image,
.col-sm-6 .wheel-8 .wheel-slice-image,
.col-sm-6 .wheel-9 .wheel-slice-image,
.col-sm-6 .wheel-10 .wheel-slice-image {
    width: 55px;
    height: 55px;
}

.col-sm-4 .wheel-slice-image {
    width: 45px;
    height: 45px;
}

.col-sm-4 .wheel-6 .wheel-slice-image,
.col-sm-4 .wheel-7 .wheel-slice-image,
.col-sm-4 .wheel-8 .wheel-slice-image,
.col-sm-4 .wheel-9 .wheel-slice-image,
.col-sm-4 .wheel-10 .wheel-slice-image {
    width: 35px;
    height: 35px;
}

/*
.wheel-slice-resource{
    width: 65px;
    height: 65px;
    margin: 0 auto;
}

.wheel-slice-resource span{
    font-size: 100px;
}

.col-sm-4 .wheel-slice-resource{
    width: 45px;
    height: 45px;
}
*/

section.wheel-container li {
    overflow: hidden;
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 50%;
    transform-origin: 0% 100%;  
}

section.wheel-container .wheel-3 li{
    overflow: hidden;
    position: absolute;
    top: -20%;
    right: -20%;
    width: 70%;
    height: 70%;
    transform-origin: 0% 100%;
}

section.wheel-container .text .wheel-textfill{
    position: absolute;
    transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    font-size: 28px;
    line-height: 28px;
    text-align: center;
}

section.wheel-container .wheel-3 .text .wheel-textfill{
    line-height: inherit;
}

.col-12 section.wheel-container .text .wheel-textfill{
    font-size: 18px;
    font-weight: 700;
    line-height: 18px;
    text-align: left;
    /* done */
}

.col-12 section.wheel-container .wheel-3 .text .wheel-textfill {
    top: 80px;
    left: 181px;
    width: 111px;
    height: 112px;
    /* done */
}

.col-12 section.wheel-container .wheel-4 .text .wheel-textfill{
    top: 30px;
    left: 111px;
    width: 115px;
    height: 83px;
    /* done */   
}

.col-12 section.wheel-container .wheel-5 .text .wheel-textfill{
    top: 30px;
    left: 115px;
    width: 105px;
    height: 70px;
    /* done */
}

.col-12 section.wheel-container .wheel-6 .text .wheel-textfill{
    top: 40px;
    left: 113px;
    width: 105px;
    height: 54px;
    /* done */
}

.col-12 section.wheel-container .wheel-7 .text .wheel-textfill{
    top: 42px;
    left: 115px;
    width: 105px;
    height: 49px;
    /* done */
}

.col-12 section.wheel-container .wheel-8 .text .wheel-textfill{
    top: 55px;
    left: 108px;
    width: 118px;
    height: 33px;
    /* done */
}

.col-12 section.wheel-container .wheel-9 .text .wheel-textfill{
    top: 44px;
    left: 117px;
    width: 100px;
    height: 40px;
    /* done */
}

.col-12 section.wheel-container .wheel-10 .text .wheel-textfill{
    top: 36px;
    left: 122px;
    width: 92px;
    height: 45px;
    /* done */
}



section.wheel-container .text .wheel-textfill div{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 100%;
    /*padding: 0px 10px;*/
    /*
    width: inherit;
    height: inherit;
    */
}

section.wheel-container li:first-child .text {
    background: #7dbff8; 
}
section.wheel-container li:nth-child(2) .text {
	background: #fdb626; 
}
section.wheel-container li:nth-child(3) .text {
	background: #db82b4; 
}
section.wheel-container li:nth-child(4) .text {
	background: #9d887d;  
}
section.wheel-container li:nth-child(5) .text {
	background: #3dcd72;  
}
section.wheel-container li:nth-child(6) .text {
	background: #257b92;  
}
section.wheel-container li:nth-child(7) .text {
	background: #f5793a;  
}
section.wheel-container li:nth-child(8) .text {
	background: #9466ed;  
}
section.wheel-container li:nth-child(9) .text {
	background: #a2392b;  
}
section.wheel-container li:nth-child(10) .text {
	background: #117b28;  
}

section.wheel-container .text {
    position: absolute;
    left: -100%;
    width: 200%;
    height: 200%;
    text-align: center;
    padding-top: 20px;
}

.col-sm-12 section.wheel-container .wheel-3 .text {
    top: 20px;
    left: -58%;
    width: 147%;
    height: 151%;
    padding-top: 110px;    
}

.col-sm-6 section.wheel-container .wheel-3 .text {
    padding-top: 90px;
}

.col-sm-4 section.wheel-container .wheel-3 .text {
    padding-top: 70px;
}


.col-sm-12 section.wheel-container .wheel-4 .text {
    padding-top: 30px;
}

.col-sm-4 section.wheel-container .wheel-4 .text {
    padding-top: 14px;
}

.col-sm-12 section.wheel-container .wheel-6 .text {
    padding-top: 30px;
}

.col-sm-4 section.wheel-container .wheel-6 .text {
    padding-top: 14px;
}

.col-sm-12 section.wheel-container .wheel-7 .text {
    padding-top: 30px;
}

.col-sm-4 section.wheel-container .wheel-7 .text {
    padding-top: 14px;
}

section.wheel-container .text .wheel-textfill.audio span{
    font-size: 80px;
    color: #000;
    position: relative;
    top: 10px;
}

.col-12 section.wheel-container .text .wheel-textfill.audio span{
    top: 45px;
    font-size: 145px;
    font-weight: 400;
}

.col-sm-12 section.wheel-container .wheel-3 .text .wheel-textfill.audio span{
    top: 59px;
    left: -6px;
    /* done */
}

.col-sm-12 section.wheel-container .wheel-4 .text .wheel-textfill.audio span{
    top: 53px;
    left: -5px;
    /* done */
}

.col-sm-12 section.wheel-container .wheel-5 .text .wheel-textfill.audio span{
    top: 47px;
    left: -3px;
    /* done */
}

.col-sm-12 section.wheel-container .wheel-6 .text .wheel-textfill.audio span{
    top: 47px;
    font-size: 120px;
    left: -3px;
    /* done */
}

.col-sm-12 section.wheel-container .wheel-7 .text .wheel-textfill.audio span{
    top: 35px;
    font-size: 120px;
    left: -6px;
    /* done */
}

.col-sm-12 section.wheel-container .wheel-8 .text .wheel-textfill.audio span{
    top: 16px;
    font-size: 120px;
    left: -8px;
    /* done */
}

.col-sm-12 section.wheel-container .wheel-9 .text .wheel-textfill.audio span{
    top: 16px;
    font-size: 120px;
    left: -9px;
    /* done */
}

.col-sm-12 section.wheel-container .wheel-10 .text .wheel-textfill.audio span{
    top: 22px;
    font-size: 110px;
    /* done */
}

.col-sm-6 section.wheel-container .text .wheel-textfill.audio span{
    font-size: 100px;
    font-weight: 400;
    /* done */
}

.col-sm-6 section.wheel-container .wheel-3 .text .wheel-textfill.audio span{
    top: 47px;
    left: -2px;
    /* done */
}

.col-sm-6 section.wheel-container .wheel-4 .text .wheel-textfill.audio span{
    top: 33px;
    left: -4px;
    /* done */
}

.col-sm-6 section.wheel-container .wheel-5 .text .wheel-textfill.audio span{
    top: 26px;
    left: -14px;
    /* done */
}

.col-sm-6 section.wheel-container .wheel-6 .text .wheel-textfill.audio span{
    top: 15px;
    left: -10px;
    /* done */
}

.col-sm-6 section.wheel-container .wheel-7 .text .wheel-textfill.audio span{
    top: 15px;
    left: -10px;
    /* done */
}

.col-sm-6 section.wheel-container .wheel-8 .text .wheel-textfill.audio span{
    top: 8px;
    left: -6px;
    /* done */
}

.col-sm-6 section.wheel-container .wheel-9 .text .wheel-textfill.audio span{
    top: 10px;
    left: -16px;
    /* done */
}

.col-sm-6 section.wheel-container .wheel-10 .text .wheel-textfill.audio span{
    top: 14px;
    left: -16px;
    font-size: 84px;
    /* done */
}

.col-sm-4 section.wheel-container .text .wheel-textfill.audio span{
    top: 0px;
    font-size: 80px;
    font-weight: 400;
}

.col-sm-4 section.wheel-container .wheel-3 .text .wheel-textfill.audio span{
    top: 36px;
    left: -12px;
    /* done */
}

.col-sm-4 section.wheel-container .wheel-4 .text .wheel-textfill.audio span{
    top: 22px;
    left: -12px;
    /* done */
}

.col-sm-4 section.wheel-container .wheel-5 .text .wheel-textfill.audio span{
    top: 20px;
    left: -16px;
    /* done */
}

.col-sm-4 section.wheel-container .wheel-6 .text .wheel-textfill.audio span{
    top: 22px;
    left: -15px;
    /* done */
}

.col-sm-4 section.wheel-container .wheel-7 .text .wheel-textfill.audio span{
    top: 12px;
    font-size: 60px;
    left: -9px;
    /* done */
}

.col-sm-4 section.wheel-container .wheel-8 .text .wheel-textfill.audio span{
    top: 10px;
    font-size: 60px;
    left: -6px;
    /* done */
}

.col-sm-4 section.wheel-container .wheel-9 .text .wheel-textfill.audio span{
    top: 8px;
    font-size: 60px;
    left: -4px;
    /* done */
}

.col-sm-4 section.wheel-container .wheel-10 .text .wheel-textfill.audio span{
    top: 8px;
    font-size: 60px;
    left: -5px;
    /* done */
}

#player-section.object-spinner .sq-resource-object.audio .f-icon-audio-raw.playing{
    -webkit-animation: pulsate 2s ease-out;
    -webkit-animation-iteration-count: infinite; 
    opacity: 0.5;
}

@-webkit-keyframes pulsate {
    0% { 
        opacity: 0.5;
    }
    50% { 
        opacity: 1.0;
    }
    100% { 
        opacity: 0.5;
    }
}

@keyframes pulsate {
    0% { 
        opacity: 0.5;
    }
    50% { 
        opacity: 1.0;
    }
    100% { 
        opacity: 0.5;
    }
}

@media (max-width: 380px){

    .col-12 section.cube-container {
        width: 200px;
        height: 200px;
        margin: 0 auto 150px;
    }

    .col-12 .cube-object div.face{
        width: 200px;
        height: 200px;
        padding: 10px;
        font-size: 30px;
        font-weight: 700;
        line-height: 30px;
        text-align: center;
    }

    .col-12 .cube-object .front {
        transform: translateZ(100px);
    }
      
    .col-12 .cube-object .back {
        transform: rotateX(-180deg) translateZ(100px);
    }
    
    .col-12 .cube-object .right {
        transform: rotateY(90deg) translateZ(100px);
    }
    
    .col-12 .cube-object .left {
        transform: rotateY(-90deg) translateZ(100px);
    }
    
    .col-12 .cube-object .top {
        transform: rotateX(90deg) translateZ(100px);
    }
    
    .col-12 .cube-object .bottom {
        transform: rotateX(-90deg) translateZ(100px);
    }

    .col-12 section.wheel-container {
        width: 300px;
        height: 300px;
        position: relative;
        margin: 0 auto;
        margin-top: 50px;
    }

}

@media (min-width: 768px) {

    .col-12 section.cube-container {
        width: 400px;
        height: 400px;
        margin: 0 auto 200px;
    }

    .col-12.col-sm-6 section.cube-container {
        width: 300px;
        height: 300px;
        margin: 0 auto 150px;
    }

    .col-12.col-sm-4 section.cube-container {
        width: 200px;
        height: 200px;
        margin: 0 auto 100px;
    }

    .col-12.col-sm-3 section.cube-container {
        width: 150px;
        height: 150px;
        margin: 0 auto 100px;
    }

    .col-12 .cube-object div.face{
        width: 400px;
        height: 400px;
        padding: 10px;
        font-size: 50px;
        line-height: 50px;
        font-weight: 700;
    }

    .col-12.col-sm-6 .cube-object div.face {
        width: 300px;
        height: 300px;
        font-size: 40px;
        line-height: 40px;
        font-weight: 700;
    }

    .col-12.col-sm-4 .cube-object div.face {
        width: 200px;
        height: 200px;
        font-size: 30px;
        line-height: 30px;
        font-weight: 700;
    }
    
    .col-12.col-sm-3 .cube-object div.face {
        width: 150px;
        height: 150px;
        font-size: 24px;
        line-height: 24px;
        font-weight: 700;
    }

    .col-12 .cube-object .front {
        transform: translateZ(200px);
    }
      
    .col-12 .cube-object .back {
        transform: rotateX(-180deg) translateZ(200px);
    }
    
    .col-12 .cube-object .right {
        transform: rotateY(90deg) translateZ(200px);
    }
    
    .col-12 .cube-object .left {
        transform: rotateY(-90deg) translateZ(200px);
    }
    
    .col-12 .cube-object .top {
        transform: rotateX(90deg) translateZ(200px);
    }
    
    .col-12 .cube-object .bottom {
        transform: rotateX(-90deg) translateZ(200px);
    }

    .col-12.col-sm-6 .cube-object .front {
        transform: translateZ(150px);
    }
      
    .col-12.col-sm-6 .cube-object .back {
        transform: rotateX(-180deg) translateZ(150px);
    }
    
    .col-12.col-sm-6 .cube-object .right {
        transform: rotateY(90deg) translateZ(150px);
    }
    
    .col-12.col-sm-6 .cube-object .left {
        transform: rotateY(-90deg) translateZ(150px);
    }
    
    .col-12.col-sm-6 .cube-object .top {
        transform: rotateX(90deg) translateZ(150px);
    }
    
    .col-12.col-sm-6 .cube-object .bottom {
        transform: rotateX(-90deg) translateZ(150px);
    }

    .col-12.col-sm-4 .cube-object .front {
        transform: translateZ(100px);
    }
      
    .col-12.col-sm-4 .cube-object .back {
        transform: rotateX(-180deg) translateZ(100px);
    }
    
    .col-12.col-sm-4 .cube-object .right {
        transform: rotateY(90deg) translateZ(100px);
    }
    
    .col-12.col-sm-4 .cube-object .left {
        transform: rotateY(-90deg) translateZ(100px);
    }
    
    .col-12.col-sm-4 .cube-object .top {
        transform: rotateX(90deg) translateZ(100px);
    }
    
    .col-12.col-sm-4 .cube-object .bottom {
        transform: rotateX(-90deg) translateZ(100px);
    }

    .col-12.col-sm-3 .cube-object .front {
        transform: translateZ(75px);
    }
      
    .col-12.col-sm-3 .cube-object .back {
        transform: rotateX(-180deg) translateZ(75px);
    }
    
    .col-12.col-sm-3 .cube-object .right {
        transform: rotateY(90deg) translateZ(75px);
    }
    
    .col-12.col-sm-3 .cube-object .left {
        transform: rotateY(-90deg) translateZ(75px);
    }
    
    .col-12.col-sm-3 .cube-object .top {
        transform: rotateX(90deg) translateZ(75px);
    }
    
    .col-12.col-sm-3 .cube-object .bottom {
        transform: rotateX(-90deg) translateZ(75px);
    }

    /* WHEELS */

    .col-sm-12 section.wheel-container {
        width: 600px;
        height: 600px;
        position: relative;
        margin: 0 auto;
        margin-top: 50px;
    }

    .col-sm-6 section.wheel-container {
        width: 400px;
        height: 400px;
        position: relative;
        margin: 0 auto;
        margin-top: 50px;
    }

    .col-sm-4 section.wheel-container {
        width: 300px;
        height: 300px;
        position: relative;
        margin: 0 auto;
        margin-top: 50px;
    }

    .col-sm-12 .wheel-object{
        width: 550px;
        height: 550px;
        margin: 0 auto;
        border-radius: 50%;
        position: relative;
        overflow: hidden;
        border: 8px solid transparent;
        box-shadow: 0px 6px 31px rgb(0,0,0,0.16);
        transform: rotate(0deg);
    }

    .col-sm-12 .wheel-object:before{
        content: '';
        position: absolute;
        border: 4px solid rgba(0,0,0,0.1);
        width: 542px;
        height: 542px;
        border-radius: 50%;
        z-index: 1000;	
    }

    .col-sm-12 .wheel-result{
        width: 534px;
        height: 534px;
        font-size: 20px;
    }
    
    .col-sm-6 .wheel-result{
        width: 335px;
        height: 335px;
    }
    
    .col-sm-4 .wheel-result{
        width: 235px;
        height: 235px;
    }

    .col-sm-12 .wheel-result .resource-frame{
        height: 534px;
    }

    .col-sm-12 section.wheel-container .wheel-3 .text {
        top: 20px;
        left: -58%;
        width: 147%;
        height: 151%;
        padding-top: 110px;    
    }

    .col-sm-12 section.wheel-container .text .wheel-textfill{
        font-size: 22px;
        font-weight: 700;
        line-height: 22px;
        text-align: left;
        /* done */
    }
    
    .col-sm-12 section.wheel-container .text .wheel-textfill div{
        padding: 0px 10px;
    }

    .col-sm-12 section.wheel-container .wheel-3 .text .wheel-textfill {
        top: 136px;
        left: 173px;
        width: 214px;
        height: 142px;
        /* done */
    }
    
    .col-sm-12 section.wheel-container .wheel-4 .text .wheel-textfill{
        top: 48px;
        left: 174px;
        width: 190px;
        height: 126px;
        /* done */
    }
    
    .col-sm-12 section.wheel-container .wheel-5 .text .wheel-textfill{
        top: 44px;
        left: 180px;
        width: 175px;
        height: 115px;
        /* done */
    }

    .col-sm-12 section.wheel-container .wheel-6 .text .wheel-textfill{
        top: 44px;
        left: 186px;
        width: 166px;
        height: 104px;
        /* done */
    }

    .col-sm-12 section.wheel-container .wheel-7 .text .wheel-textfill{
        top: 44px;
        left: 188px;
        width: 158px;
        height: 94px;
        /* done */
    }

    .col-sm-12 section.wheel-container .wheel-8 .text .wheel-textfill{
        top: 78px;
        left: 172px;
        width: 185px;
        height: 58px;
        /* done */
    }
    
    .col-sm-12 section.wheel-container .wheel-9 .text .wheel-textfill{
        top: 80px;
        left: 175px;
        width: 184px;
        height: 54px;
        /* done */
    }

    .col-sm-12 section.wheel-container .wheel-10 .text .wheel-textfill{
        top: 60px;
        left: 189px;
        width: 158px;
        height: 63px;
        /* done */
    }
    
    .col-sm-6 .wheel-object{
        width: 351px;
        height: 351px;
        margin: 0 auto;
        border-radius: 50%;
        position: relative;
        overflow: hidden;
        border: 8px solid transparent;
        box-shadow: 0px 6px 31px rgb(0,0,0,0.16);
        transform: rotate(0deg);
    }

    .col-sm-6 .wheel-object:before{
        content: '';
        position: absolute;
        border: 4px solid rgba(0,0,0,0.1);
        width: 342px;
        height: 342px;
        border-radius: 50%;
        z-index: 1000;	
    }

    .col-sm-6 section.wheel-container .text .wheel-textfill div{
        padding: 0px 4px;
    }

    .col-sm-6 section.wheel-container .text .wheel-textfill{
        font-size: 18px;
        font-weight: 700;
        line-height: 18px;
        text-align: left;
        /* done */
    }
    
    .col-sm-6 section.wheel-container .wheel-3 .text .wheel-textfill {
        top: 80px;
        left: 181px;
        width: 111px;
        height: 112px;
        /* done */
    }
    
    .col-sm-6 section.wheel-container .wheel-4 .text .wheel-textfill{
        top: 30px;
        left: 111px;
        width: 115px;
        height: 83px;
        /* done */   
    }

    .col-sm-6 section.wheel-container .wheel-5 .text .wheel-textfill{
        top: 30px;
        left: 115px;
        width: 105px;
        height: 70px;
        /* done */
    }
    
    .col-sm-6 section.wheel-container .wheel-6 .text .wheel-textfill{
        top: 40px;
        left: 113px;
        width: 105px;
        height: 54px;
        /* done */
    }
    
    .col-sm-6 section.wheel-container .wheel-7 .text .wheel-textfill{
        top: 42px;
        left: 115px;
        width: 105px;
        height: 49px;
        /* done */
    }

    .col-sm-6 section.wheel-container .wheel-8 .text .wheel-textfill{
        top: 55px;
        left: 108px;
        width: 118px;
        height: 33px;
        /* done */
    }
    
    .col-sm-6 section.wheel-container .wheel-9 .text .wheel-textfill{
        top: 44px;
        left: 117px;
        width: 100px;
        height: 40px;
        /* done */
    }
    
    .col-sm-6 section.wheel-container .wheel-10 .text .wheel-textfill{
        top: 36px;
        left: 122px;
        width: 92px;
        height: 45px;
        /* done */
    }
    
    .col-sm-4 .wheel-object{
        width: 251px;
        height: 251px;
        margin: 0 auto;
        border-radius: 50%;
        position: relative;
        overflow: hidden;
        border: 8px solid transparent;
        box-shadow: 0px 6px 31px rgb(0,0,0,0.16);
        transform: rotate(0deg);
    }

    .col-sm-4 .wheel-object:before{
        content: '';
        position: absolute;
        border: 4px solid rgba(0,0,0,0.1);
        width: 242px;
        height: 242px;
        border-radius: 50%;
        z-index: 1000;	
    }

    .col-sm-4 section.wheel-container .text .wheel-textfill{
        font-size: 13px;
        font-weight: 700;
        line-height: 13px;
        text-align: left;
        /* done */
    }
    
    .col-sm-4 section.wheel-container .wheel-3 .text .wheel-textfill{
        top: 54px;
        left: 131px;
        width: 70px;
        height: 84px;
        /* done */
    }
    
    .col-sm-4 section.wheel-container .wheel-4 .text .wheel-textfill{
        top: 22px;
        left: 79px;
        width: 78px;
        height: 55px;
        /* done */
    }

    .col-sm-4 section.wheel-container .wheel-5 .text .wheel-textfill{
        top: 18px;
        left: 85px;
        width: 65px;
        height: 56px;
        /* done */
    }
    
    .col-sm-4 section.wheel-container .wheel-6 .text .wheel-textfill{
        top: 14px;
        left: 89px;
        width: 58px;
        height: 56px;
        /* done */
    }

    .col-sm-4 section.wheel-container .wheel-7 .text .wheel-textfill{
        top: 26px;
        left: 83px;
        width: 68px;
        height: 41px;
        /* done */
    }

    .col-sm-4 section.wheel-container .wheel-8 .text .wheel-textfill{
        top: 26px;
        left: 85px;
        width: 65px;
        height: 35px;
        /* done */
    }

    .col-sm-4 section.wheel-container .wheel-9 .text .wheel-textfill{
        top: 30px;
        left: 85px;
        width: 65px;
        height: 29px;
        /* done */
    }

    .col-sm-4 section.wheel-container .wheel-10 .text .wheel-textfill{
        top: 28px;
        left: 85px;
        width: 65px;
        height: 29px;
        /* done */
    }

    span.spinner-action-button.wheel {
        position: relative;
        /*left: -25px;*/
    }

    .col-sm-12 .wheel-slice-image {
        width: 85px;
        height: 85px;
    }

    .col-sm-12 section.wheel-container .text .wheel-textfill.audio span {
        top: 45px;
        font-size: 145px;
    }
}

/* /////////////////// Captions /////////////////// */
.caption-player .figure-caption {
    text-align: center;
}

.image-container {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.image-preview {
    padding: 0;
    width: auto !important;
    position: relative;
}

.image-preview img.caption-image {
    max-height: 100%;
    max-width: 100%;
}

/* caption-wrapper */
.caption-player .caption-wrapper,
.question-player .caption-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    padding: 0 6px;
    position: absolute;
    height: 50px;
    width: 200px;
    font-size: clamp(8px, calc(0.01458 * 100vw + 3.334px), 22px);;
    background-color: white;
    border: 2px solid var(--sq-color-blue);
    border-radius: 25px;
    text-align: center;
    flex-direction: column;
    cursor: auto;
    transition: transform 0.1s linear;
    scrollbar-width: thin;
    transform: translate(-50%, -50%);
}

.caption-player .caption-wrapper .caption-response-container {
    display: block;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    align-content: center;
    margin: 1px 0;
}

.question-player .caption-wrapper input[type=number] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* Hide the input number arrows for Firefox */
.question-player .caption-wrapper input[type=number]::-webkit-outer-spin-button,
.question-player .caption-wrapper input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.caption-player .caption-wrapper input {
    background: none;
}

/* .caption-player .caption-wrapper .caption-response,
.question-player .caption-wrapper .caption-response {
    border: none;
    width: 80%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    font-weight: bold;
    text-align: center;
    font-size: 24px;
    line-height: 100%;
} */

.caption-player .caption-wrapper .caption-response,
.question-player .caption-wrapper .caption-response {
    border: none;
    width: 100%;
    height: auto;
    font-weight: bold;
    text-align: center;
    font-size: clamp(8px, calc(0.01458 * 100vw + 3.334px), 16px);
    line-height: calc(100% + 6px);
    overflow: hidden;
    align-content: center;
}


.caption-player .caption-wrapper .dropdown-menu,
.question-player .caption-wrapper .dropdown-menu {
    min-width: 300px;
    width: calc(100% - 15px);
    max-width: calc(100% - 15px);
}

.caption-wrapper.unanswered .caption-response {
    display: block;
    align-content: center;
}

.caption-player .caption-wrapper.expanded,
.question-player .caption-wrapper.expanded{
    min-height: 50px;
    height: auto;
    align-items: flex-start;
}

.caption-player .caption-wrapper.wiris.expanded,
.question-player .caption-wrapper.wiris.expanded{
    min-width: 200px;
    width: auto;
    padding: 5px;
}

.caption-player .caption-wrapper.wiris.expanded .caption-response,
.question-player .caption-wrapper.wiris.expanded .caption-response{
    overflow-x: hidden;
    width: auto;
    padding: 5px;
    margin: 0px 20px;
}

.caption-player .caption-wrapper.expanded .caption-response,
.question-player .caption-wrapper.expanded .caption-response{
    text-overflow: initial !important;
    white-space: normal !important;
    overflow: auto;
    overflow-wrap: break-word;
    font-size: 14px;
    line-height: 18px;
    margin: 2px 0;
}

.caption-player .caption-wrapper .caption-response.invalid,
.question-player .caption-wrapper .caption-response.invalid {
    position: relative;
    top: 2px;
    color: var(--ev-sq-incorrect);
    text-decoration: line-through;
    font-size: 14px;
    line-height: 20px;
}

.caption-player .caption-wrapper .right-answer,
.question-player .caption-wrapper .right-answer {
    color: var(--ev-sq-correct);
    position: relative;
    top: -2px;
    font-weight: bold;
    font-size: 20px;
    line-height: 24px;
}

.caption-player .caption-wrapper.correct,
.question-player .caption-wrapper.correct {
    border: 2px solid var(--ev-sq-correct) !important;
}

.caption-player .caption-wrapper.incorrect,
.question-player .caption-wrapper.incorrect {
    border: 2px solid var(--ev-sq-incorrect) !important;
}

.caption-player .caption-wrapper.unanswered,
.question-player .caption-wrapper.unanswered {
    border: 2px dashed #89C22B !important;
}

.caption-player[data-mode="practice"] .caption-points.borderless .caption-wrapper {
    background: #F7F7F7;
    border-radius: 3px;
    box-shadow: inset 1px 1px 2px 1px #ddd;
}

.caption-player[data-mode="validation"] .caption-points.borderless .caption-solution.f-icon-eye-preview,
.caption-player[data-mode="practice"] .caption-points.borderless .caption-solution.f-icon-eye-preview {
    top: -6px;
    right: -6px;
}

.caption-player[data-mode="validation"] .caption-points.borderless .caption-solution.f-icon-eye-no-preview,
.caption-player[data-mode="practice"] .caption-points.borderless .caption-solution.f-icon-eye-no-preview {
    top: -8px;
    right: -8px;
}

.caption-player .caption-wrapper .caption-text,
.question-player .caption-wrapper .caption-text {
    font-size: var(--caption-font-size);
}

.translationModalQuestionLayout .caption-wrapper.dropdown {
    pointer-events: auto;
}

.translationModalQuestionLayout .caption-wrapper.dropdown li {
    pointer-events: none;
}

.caption-player .caption-wrapper:has(textarea) {
    overflow: hidden;
    padding: 0;
    line-height: 100%;
}

.caption-player .caption-line {
    z-index: 0;
}

.caption-player .caption-points.borderless .caption-wrapper:not(.correct):not(.incorrect):not(.unanswered) {
    background: #F7F7F7;
    border-radius: 3px;
    border: none;
    box-shadow: inset 1px 1px 2px 1px #ddd;
}

/* Line */
.caption-player .caption-line,
.question-player .caption-line {
    height: 4px;
    background-color: #28B3FC;
    position: absolute;
    transform-origin: 0 0;
    z-index: 1;
}

.caption-player .caption-line::before,
.question-player .caption-line::before {
    cursor: auto;
    content: "";
    transform: translate(-50%, -50%);
    display: block;
    width: 14px;
    height: 14px;
    background-color: #28B3FC;
    border-radius: 50%;
}

.caption-player .caption-points.lineless .caption-line,
.question-player .caption-points.lineless .caption-line {
    display: none;
}

/* Subtype Dropdown */
.caption-player .caption-wrapper .dropdown-toggle,
.question-player .caption-wrapper .dropdown-toggle {
    width: 100%;
    padding: 0 30px 0 20px;
    border: none;
    background: none;
    text-align: left;
    position: relative;
    text-align: center;
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    min-height: 50px;
}

/* Caret */
.question-player .caption-wrapper .dropdown-toggle::after {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #28B3FC;
}

.question-player .caption-wrapper .dropdown-menu.show {
    z-index: 4;
    padding: 5px;
    min-width: 180px;
    transform: translate(8px, 42px) !important;
    box-shadow: 0px 10px 10px var(--ev-color-shadows);
    -webkit-box-shadow: 0px 10px 10px var(--ev-color-shadows);
    border-radius: 8px;
}

.question-player .caption-wrapper .dropdown-item {
    padding: 8px;
    text-align: center;
}

.question-player .caption-wrapper .dropdown-menu li:not(:last-child) {
    margin-bottom: 2px;
    border-bottom: 1px solid #eee;
}

.question-player .caption-wrapper .dropdown-menu li:hover {
    background-color: #30B2FB;
    color: #FFF;
    border-radius: 5px;
}

.question-player .caption-wrapper .input-open {
    text-align: center;
    border: none;
    width: 100%;
    padding: 4px;
    overflow: hidden;
    font-weight: bold;
    resize: none;
    height: 100%;
    align-content: center;
}

.question-player .caption-wrapper .input-open:focus-visible {
    border: none;
    outline: none;
}

.question-player .borderless .caption-wrapper .input-open {
    background: #F7F7F7;
}

.question-player .caption-wrapper:has(.cke_focus),
.question-player .caption-wrapper:has(.input-open:focus) {
    box-shadow: 0px 0px 5px #ccc !important;
    transform: translate(-50%, -50%) scale(1.05);
    overflow: hidden;
}

.question-player .caption-points.borderless .caption-wrapper:has(.cke_focus),
.question-player .caption-points.borderless .caption-wrapper:has(.input-open:focus) {
    box-shadow: inset 1px 1px 2px 1px #ccc !important;
}

.question-player .caption-wrapper .input-open:focus {
    font-weight: normal;
}

.question-player .caption-wrapper:focus-within {
    min-height: 50px;
    height: auto;
}

.question-player .caption-wrapper:focus-within .input-open {
    text-overflow: initial;
    overflow: auto;
    white-space: normal;
}

/* Move & copy */
.caption-move-options {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 208px));
    column-gap: 10px;
}

.caption-move-options .caption-move-option {
    z-index: 2;
    display: inline-block;
    margin: 2px;
}

.caption-move-option:hover,
.caption-move-option:hover *:not(.caption-move-option-btn) {
    cursor: move;
}

.caption-move-option .text {
    border: 2px solid var(--sq-color-blue);
    border-radius: 8px;
    text-align: center;
    overflow: hidden;
    margin: 4px 0px;
    font-size: 18px;
    line-height: 25px;
    font-weight: 700;
    padding: 4px 12px;
    background-color: white;
}

.caption-move-options .caption-move-option:hover .text,
.caption-move-options .caption-move-option.selected .text {
    background-color: var(--sq-color-blue);
    color: white;
}

.caption-move-option.ui-draggable-dragging {
    width: 200px !important;
    height: auto;
    z-index: 2;
}

.caption-move-option.ui-draggable-dragging .text{
    width: 100%;
}

.caption-player[data-mode="default"] .caption-wrapper .caption-move-option.selected {
    height: 100%;
    width: 100%;
    border-radius: 25px;
    padding: 0;
    text-align: center;
    background-color: #28B3FC;
    align-items: center;
    color: white;
}

.caption-player[data-mode="default"] .caption-wrapper.filled-answer-dragging {
    background-color: white;
    z-index: 3 !important;
}

.question-player .caption-wrapper .caption-move-option:not(.ui-draggable-dragging){
    width: 100%;
}

.question-player .caption-wrapper .caption-move-option:not(.ui-draggable-dragging) .text {
    width: 100%;
    border: none;
    background: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}

.caption-wrapper:has(.ui-draggable) {
    padding: 0;
}

.caption-wrapper.dropdown {
    padding: 0;
}

.question-player .caption-wrapper.selected .caption-move-option:not(.ui-draggable-dragging) .text {
    color: white;
}

.question-player .caption-wrapper .remove::before {
    display: none;
}

.caption-wrapper.filled-answer .remove:hover::before {
    background-color: red;
}

.caption-wrapper.filled-answer .remove::before {
    width: 18px;
    height: 18px;
    background-color: #333;
    color: white;
    border-radius: 50%;
    font-size: 20px;
    align-items: center;
    justify-content: center;
    display: flex;
    z-index: 3;
    position: absolute;
    right: 0px;
    top: 0px;
    cursor: pointer;
    transition: background-color 0.1s linear;
}

/* Open */
/* .question-player .caption-wrapper #ckEditorTypeOpen {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
} */

.question-player .caption-wrapper .wiris-content {
    min-height: 29px;
    display: flex;
    border: none;
    outline: none;
    width: 100%;
    height: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    font-weight: bold;
    font-size: 18px;
    align-items: center;
    border-radius: 0;
    justify-content: center;
    cursor: pointer;
}

/* Prevents cursor offsets */
.question-player .caption-wrapper .wiris-content:has(math:empty:only-child),
.question-player .caption-wrapper .wiris-content:empty {
    max-height: max(46px, 50%);
}

/* Prevents cursor offsets */
.question-player .caption-wrapper .wiris-content > math:empty:only-child {
    display: none;
}

.question-player .caption-wrapper.wiris:has(.wqs-popup) {
    overflow: visible;
    z-index: 3;
}

.question-player .caption-wrapper.wiris:not(:has(.wqs-popup)):has(.wqs-inline-toolbar) {
    transform: translate(-50%, -50%) scale(1.1);
}

/* Preview Btn */
.caption-solution {
    position: absolute;
    display: flex;
    font-size: 20px;
    color: #FFF;
    border: none;
    width: 20px;
    height: 20px;
    top: -3px;
    right: -3px;
    border-radius: 50%;
    cursor: pointer;
    text-align: center;
    line-height: 20px;
    background-color: var(--ev-sq-selected-border);
    justify-content: center;
    align-items: center;
    z-index: 20;
}

.caption-locution {
    position: absolute;
    display: flex;
    font-size: 20px;
    color: #FFF;
    border: none;
    width: 20px;
    height: 20px;
    top: -3px;
    left: -3px;
    border-radius: 50%;
    cursor: pointer;
    text-align: center;
    line-height: 20px;
    background-color: var(--ev-sq-selected-border);
    justify-content: center;
    align-items: center;
}

.caption-locution.playing{
    background-color: #FFF;
    color: #009de0 !important;
}

/* /////////////////// END CAPTIONS QUESTION /////////////////// */

/* /////////////////// PAINT QUESTION /////////////////// */
.paint-player .paint-canvas-solutions,
.paint-player .paint-canvas {
    pointer-events: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    touch-action: none;
    position: absolute;
    max-width: 80%;
}

.paint-player .paint-canvas-solutions:hover,
.paint-player .paint-canvas:hover {
    cursor: default;
}

.paint-player .paint-wrapper{
    width: 100%;
    overflow: auto;
    display: flex;
    justify-content: center;
    position: relative;
    border-radius: 25px;
    border: 5px solid black;
    padding: 50px;
}

.paint-player .paint-wrapper img {
    max-width: 80%;
    user-drag: none;
    -webkit-user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

.paint-player .colors-wrapper {
    margin: 15px 0px;
    gap: 14px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.paint-player .colors-wrapper.disabled{
    pointer-events: none;
}

.paint-player .color-palette {
    padding: 5px;
    gap: 14px;
    display: inline-flex;
    border-radius: 25px;
    border: 2px solid #E2E2E2;
    flex-wrap: wrap;
    width: auto;
}

.paint-player .color-palette input[type=radio] {
    appearance: none;
    border: 8px solid #E2E2E2;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    position: relative;
    cursor: pointer;
    transition: all .1s linear;
}

.paint-player .color-palette input[type=radio]:hover {
    border: 5px solid #ccc;
}

.paint-player .color-palette .eraser {
    top: 0px !important;
    background-color: #E2E2E2 !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.paint-player .color-palette input[type=radio]:checked {
    box-shadow: 0px 0px 2px 2px black;
    border: 4px solid #E2E2E2;
}

.paint-player .color-palette input[type=radio].eraser:checked,
.paint-player .color-palette input[type=radio].eraser {
    background: none;
    border: none;
    top: -2px;
}

.paint-player .color-palette input[type=radio].eraser::before {
    background: none;
    left: 0px;
    top: 5px;
}

.paint-player .paint-correction {
    position: absolute;
}

.paint-player .paint-correction .correction-mark{
    display: flex;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.16);
    border-radius: 50%;
    width: 20px;
    height: 20px;
    position: absolute;
    background: white;
    transform: translate(-50%, -50%);
    justify-content: center;
    align-items: center;
}

.paint-player .paint-correction .correction-mark.right::before{
    content: "";
    transform: rotate(45deg);
    height: 9px;
    width: 5px;
    border-bottom: 2px solid black;
    border-right: 2px solid black;
}

.paint-player .paint-correction .correction-mark.wrong::before{
    content: '\d7';
    font-weight: 700;
    color: black;
    position: absolute;
    text-align: center;
    font-size: 18px;
}

.paint-player .figure-caption {
    text-align: center;
}

.sq-table{
    border-style: none !important;
    border-color: #DEE2E6;
}

.sq-table.table-striped thead th{
    border-style: solid;
    border-color: #212529;
    border-left-width: 0px;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 1px;
}



.sq-table.table-striped tbody tr th,
.sq-table.table-striped tbody tr td{
    border-style: solid;
    border-color: #DEE2E6;
    border-left-width: 0px;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 1px;
}

.sq-table.table-bordered{
    border-style: solid;
    border-color: #DEE2E6;
}

.sq-table.table-bordered>:not(caption)>*{
    border-style: solid;
    border-color: #DEE2E6;
    border-width: 1px 0;
}

.sq-table.table-bordered>:not(caption)>*>*{
    border-style: solid;
    border-color: #DEE2E6;
    border-width: 0px 1px;
}


/** Overwriting jconfirm styles*/
#player-sq .jconfirm .jconfirm-bg {
    background-color: rgb(255 255 255 / 0.3);
    backdrop-filter: blur(1px);
    opacity: 1;
}

#player-sq .jconfirm .jconfirm-box {
    border-radius: 10px;
    border: 2px solid rgba(0,0,0,0.2);
}

/* Turn wiris response divs scrollable */
.cke_editable {
    overflow-x: auto;
}

/* /////////////////// QUESTIONS OF TYPE DRAW /////////////////// */
.question-draw .colorButtons {
    display: block;
}

.question-draw .user-drawing,
.question-draw .scaled-canvas {
    border-radius: 5px;
    outline: 2px solid black !important;
}

.question-draw .scaled-canvas {
    cursor: none;
}

.question-draw .user-drawing,
.question-draw .bg-image {
    height: auto;
    max-width: 80%;
}

.question-draw .scaled-canvas,
.question-draw .tmp-canvas,
.question-draw .cursor-canvas {
    width: auto;
    max-width: 80%;
}

.question-draw .cursor-canvas,
.question-draw .scaled-canvas {
    position: absolute;
    z-index: 1;
}

.question-draw .cursor-canvas {
    pointer-events: none;
}

.question-draw .canvas-container:not(:has(.bg-image)) .scaled-canvas {
    position: relative !important;
    background: white;
    width: 80%;
    max-width: 800px;
}

.question-draw div.sidebar {
    display: flex;
    position: relative;
    width: auto;
    padding: 20px 20px;
}

.question-draw .sidebar>* {
    margin: 20px;
}

.question-draw .btn {
    width: 100%;
    margin-bottom: 10px;
}

.question-draw input {
    width: 100%;
}

.question-draw .input-group {
    margin-bottom: 10px;
}

.question-draw .sizeButtons .btn {
    width: auto;
}

.question-draw .colorpicker {
    height: 40px;
    background: transparent;
}

.question-draw .canvas-container {
    display: flex;
    width: auto;
    padding: 20px;
    justify-content: center;
}

.question-draw .canvas-container canvas {
    user-drag: none;
    -webkit-user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

.question-draw .toolbar-container {
    position: relative;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.question-draw .toolbar {
    border-radius: 25px;
    padding: 5px;
    display: inline-flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    margin: 5px;
    gap: 14px;

    user-drag: none;
    -webkit-user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

.question-draw .toolbar.disabled > * {
    pointer-events: none;
    opacity: 0.3;
    border: none !important;
}

.question-draw .toolbar .tool-item {
    transition: background 0.2s linear;
    border-radius: 50%;
    display: flex;
    width: 40px;
    height: 40px;
    text-align: center;
    justify-content: center;
    align-items: center;
    background: #E2E2E2;
}


/* @media screen and (max-width: 570px) {
    .question-draw .toolbar {
        width: 260px;
    }

    .question-draw .toolbar .tool-item::before {
        width: 50px;
        height: 48px;
    }

    .question-draw .toolbar .tool-item {
        flex-basis: 20%;
    }

}

*/

.question-draw[data-mode="teacherevaluation"] .toolbar-container .toolbar {
    width: 800px;
    scale: 0.8;
}


.question-draw .toolbar .tool-item:not(.disabled) {
    cursor: pointer;
}

.question-draw .toolbar .tool-item:not(.disabled):not(:has(input:checked)):not(:active):hover {
    background-color: #f3f3f3;
    border: 2px solid #aaa;
}

.question-draw .toolbar .tool-item:not(.disabled):active:hover,
.question-draw .toolbar .tool-item:not(.disabled):has(input:checked):active:hover {
    border: 2px solid black;
    background-color: #999;
}

.question-draw .toolbar .tool-item:not(.disabled):has(input:checked) {
    border: 2px solid black;
}

.question-draw .toolbar .tool-item:last-child {
    border-right: none;
}

.question-draw .toolbar .tool-item>* {
    pointer-events: none;
}

.question-draw .toolbar .tool-item input[type=radio],
.question-draw .toolbar .tool-item input[type=button] {
    display: none;
}

.question-draw .toolbar .tool-item.disabled {
    background: #d2d2d2;
    box-shadow: 0px -25px 10px #d9d9d9 inset;
    color: #a9a9a9;
}

.question-draw .color-picker-wrapper {
    border-radius: 50%;
    display: flex;
    width: 100%;
    height: 100%;
    cursor: pointer;
    overflow: hidden;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    z-index: 1;
}

.question-draw .color-picker-wrapper::after {
    border-radius: 50%;
    position: absolute;
    width: 20px;
    height: 20px;
    content: "";
    pointer-events: none;
    box-shadow: 0px 0px 1px 1px black, 0px 0px 1px 2px white inset;
    transition: background-image 0.3s linear;
}

.question-draw .color-picker {
    border-radius: 50%;
    display: flex;
    width: 20px;
    height: 50%;
    cursor: pointer;
    pointer-events: auto;
    overflow: hidden;
    padding: 0;
    pointer-events: none;
}

.question-draw[data-mode="default"] .color-picker,
.question-draw[data-mode="undefined"] .color-picker{
    pointer-events: auto;
}

.question-draw .thickness-container {
    display: flex;
    background: #E2E2E2;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 240px;
    height: 40px;
    border-radius: 25px;
}

.question-draw .thickness-container label {
    font-size: 18px;
}

.question-draw .thickness-container .show-size {
    width: 16px;
}

.question-draw .thickness-container .thickness {
    margin: 0px 15px;
    width: 80px;
    height: 2px;
    /* background: linear-gradient(to right, black 50%, white 50%); */
    background: black;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    border-radius: 15px;
}


/* Thumb: webkit */
.question-draw .thickness-container .thickness::-webkit-slider-thumb {
    width: 20px;
    height: 20px;
    border: 2px solid black;
    -webkit-appearance: none;
    appearance: none;
    background-color: white;
    border-radius: 50%;
    transition: .2s ease-in-out;
}

/* Thumb: Firefox */
.question-draw .thickness-container .thickness::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border: 2px solid black;
    background-color: white;
    border-radius: 50%;

    /* box-shadow: -407px 0 0 400px black; emove this line */
    transition: .2s ease-in-out;
}

.question-draw .toolbar-container .save-message {
    font-size: 16px;
    color: #333;
    font-style: italic;
    bottom: -18px;
    position: absolute;
}

.translationModalQuestionLayout .question-draw .toolbar-container .save-message {
    display: none !important;
}

/* ############################### CONNECT QUESTION ############################### */
.question-connect .columns-wrapper {
    display: flex;
    justify-content: space-between;
    margin: 20px 0px;
    
    user-drag: none;
    -webkit-user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

.question-connect.vertical .columns-wrapper {
    flex-direction: column;
    gap: 200px;
}

.question-connect.vertical {
    padding: 25px 0 50px 0;
    overflow-x: visible;
    position: relative;
}

.question-connect.vertical[data-mode="editor"] {
    padding: 75px 0 100px 0;
}

/* Mode practice and validation, has answer-solution buttons */
.question-connect .columns-wrapper:has(.answer-solution) {
    margin: 20px 50px;
}

.question-connect.vertical .columns-wrapper:has(.answer-solution) {
    margin: 20px 0;
}

.question-connect .columns-wrapper:has(.connection.drawing) {
    cursor: pointer;
}

/* Questions of type connect with 3 columns */
.question-object .question-connect[data-mode="solutions"]:has(.columns-wrapper .column:nth-child(3)),
.question-object .question-connect[data-mode="teacherevaluation"]:has(.columns-wrapper .column:nth-child(3)){
    width: 100%;
    min-width: 1000px;
}

.question-object .question-connect[data-mode="solutions"].vertical:has(.columns-wrapper .column:nth-child(3)),
.question-object .question-connect[data-mode="teacherevaluation"].vertical:has(.columns-wrapper .column:nth-child(3)){
    width: 100%;
    min-width: initial;
}

/* Questions of type connect with 2 columns */
.question-object .question-connect[data-mode="solutions"]:not(:has(.columns-wrapper .column:nth-child(3))),
.question-object .question-connect[data-mode="teacherevaluation"]:not(:has(.columns-wrapper .column:nth-child(3))){
    width: 100%;
    min-width: 726px;
}

.question-object .object-item-container:has(.question-connect){
    overflow-x: auto;
}

.question-connect .column {
    display: flex;
    width: 25%;
    gap: 20px;
    flex-direction: column;
    position: relative;
    justify-content: space-evenly;
}

.question-connect.vertical .column {
    flex-direction: row;
    width: 100%;
    align-items: stretch;
}

.question-connect.vertical .connect-point.right {
    right: initial;
    bottom: -50px;
}

.question-connect.vertical .connect-point.left {
    left: initial;
    top: -50px;
}

.question-connect .item-container {
    background: none;
    display: flex;
    width: 100%;
    min-height: 50px;
    border: 2px solid #DDDDDD;
    border-radius: 25px;
    opacity: 1;
    position: relative;
    justify-content: center;
    align-items: center;
}

.question-connect .item-container .answer-solution {
    position: absolute;
    left: -55px;
    top: initial;
    transform: initial;
    width: 40px;
    height: 40px;
    font-size: 40px;
    line-height: 40px;
}

.question-connect.vertical .item-container .answer-solution {
    position: absolute;
    right: -10px;
    left: initial;
    top: -15px;
    transform: initial;
}

.question-connect .column:last-of-type .item-container .answer-solution {
    left: initial;
    right: -55px;
}

.question-connect.vertical .column:last-of-type .item-container .answer-solution {
    position: absolute;
    right: -10px;
    left: initial;
    top: -15px;
    transform: initial;
    z-index: 1;
}

.question-connect .item-container .item-content {
    width: 100%;
    padding: 10px;
    gap: 20px;
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: flex-start;
}

.question-connect .item-container .item-content .text,
.question-connect .item-container .item-content .text .figure {
    max-width: 240px;
    /*width: 240px;*/
    width: auto;
    max-height: 100%;
    overflow: hidden;
    box-sizing: border-box;
    display: table;
    margin: 0 auto;
}

.question-connect .item-container .item-content .narration-container {
    margin-top: 0px;
    padding: 0px;
}

.question-connect .item-container img {
    height: initial;
    width: initial;
    max-width: min(100%, 240px);
    max-height: min(100%, 240px);
}

.question-connect.vertical .item-container img {
    width: 100%;
    height: 100%;
    max-width: 240px;
    max-height: 240px;
    display: block;
}

.question-connect .item-container:has(.connect-point.connected),
.question-connect .item-container:has(.connection-wrapper) {
    border: 2px solid var(--ev-color-blue);
}


.translationModalQuestionLayout .question-connect .item-container:has(.connect-point.connected),
.translationModalQuestionLayout .question-connect .item-container:has(.connection-wrapper) {
    border: 2px solid #DDDDDD;
}


.question-connect .connect-point {
    box-sizing: border-box;
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    box-shadow: 0px 0px 0px 2px #D0D0D0 inset;
    cursor: pointer;
    transition: all 0.2s linear;
}
.question-connect .connect-point {
    box-shadow: 0px 0px 0px 8px #D0D0D0 inset
}

.translationModalQuestionLayout .question-connect .connect-point {
    cursor: default !important;
}

.question-connect[data-mode="default"]:has(.connection.drawing),
.question-connect[data-mode="undefined"]:has(.connection.drawing) {
    overflow: hidden;
}

.question-connect[data-mode="default"] .connect-point:has(.drawing),
.question-connect[data-mode="undefined"] .connect-point:has(.drawing) {
    background: radial-gradient(circle, rgba(255,255,255,0) 26%, rgba(255,255,255,0) 52%, rgba(208,208,208,1) 55%, rgba(208,208,208,1) 58%);
    box-shadow: 0px 0px 0px 2px var(--ev-color-blue) inset;
}

.question-connect[data-mode="default"] .connect-point.available,
.question-connect[data-mode="default"]:not(:has(.drawing)):not(:has(.connection:hover)) .connect-point:hover,
.question-connect[data-mode="undefined"] .connect-point.available,
.question-connect[data-mode="undefined"]:not(:has(.drawing)):not(:has(.connection:hover)) .connect-point:hover{
    box-shadow: 0px 0px 0px 5px #D0D0D0 inset;
}

.question-connect[data-mode="default"] .connect-point.available:hover,
.question-connect[data-mode="undefined"] .connect-point.available:hover{
    z-index: 2;
    box-shadow: 0px 0px 0px 5px var(--ev-color-blue) inset, 0px 0px 3px 1px #D0D0D0;
    background: white;
}

.question-connect .connect-point::before {
    content: "";
    display: block;
    position: absolute;
    width: 40px;
    height: 40px;
    background-color: black;
    z-index: 2;
    border-radius: 50%;
    pointer-events: auto;
    padding: 10px;
    background-clip: content-box;
    transition: all 0.2s linear;
}

.question-connect[data-mode="default"] .connect-point:has(.drawing)::before,
.question-connect[data-mode="default"] .connect-point:has(.connection-wrapper)::before,
.question-connect[data-mode="default"] .connect-point.connected::before,
.question-connect[data-mode="default"]:not(:has(.drawing)) .connect-point:hover::before,
.question-connect[data-mode="default"] .connect-point:has(.drawing)::before,
.question-connect[data-mode="undefined"] .connect-point:has(.connection-wrapper)::before,
.question-connect[data-mode="solutions"] .connect-point:has(.connection-wrapper)::before,
.question-connect[data-mode="undefined"] .connect-point.connected::before,
.question-connect[data-mode="solutions"] .connect-point.connected::before,
.question-connect[data-mode="undefined"]:not(:has(.drawing)) .connect-point:hover::before {
    background-color: var(--ev-color-blue);
}

.question-connect[data-mode="default"] .connect-point:has(.drawing)::before,
.question-connect[data-mode="default"] .connect-point.available::before,
.question-connect[data-mode="default"]:not(:has(.drawing)) .connect-point:not(:has(.connection:hover)):hover::before,
.question-connect[data-mode="undefined"] .connect-point:has(.drawing)::before,
.question-connect[data-mode="undefined"] .connect-point.available::before,
.question-connect[data-mode="undefined"]:not(:has(.drawing)) .connect-point:not(:has(.connection:hover)):hover::before {
    scale: 1.3;
}

.question-connect:has(.connection.drawing) .connect-point::before {
    z-index: 0;
}

.question-connect .connect-point.right {
    right: -50px;
}

.question-connect .connect-point.left {
    left: -50px;
}

.dir-rtl .question-connect .connect-point.right {
    right: initial;
    left: -50px;
}

.dir-rtl .question-connect .connect-point.left {
    left: initial;
    right: -50px;
}

.dir-rtl .question-connect.vertical .connect-point.right {
    right: 50px;
    left: initial;
}

.dir-rtl .question-connect.vertical .connect-point.left {
    left: 50px;
    right: initial;
}

.question-connect .connection-wrapper {
    position: absolute;
    height: inherit;
    width: inherit;
    z-index: 1;
    transform: translate(50%, 50%);
    pointer-events: none;
}

.translationModalQuestionLayout .question-connect .connection-wrapper {
    display: none !important;
}

.question-connect .connection-wrapper .connection {
    pointer-events: auto;
    position: relative;
    background-color: var(--ev-color-blue);
    transform-origin: 0 50%;
}

.question-connect[data-mode="default"] .connection-wrapper .connection:hover,
.question-connect[data-mode="undefined"] .connection-wrapper .connection:hover {
    background-color: #777;
}

.question-connect:has(.connection.drawing) .connection {
    pointer-events: none;
}

.question-connect:has(.connection.drawing) .connect-point:not(.available) {
    cursor: not-allowed;
}

.question-connect .connect-point.correct::before,
.question-connect .connection.correct{
    background-color: #8DC82C;
}

.question-connect .connect-point.wrong::before,
.question-connect .connection.wrong{
    background-color: #FD8125;
}

.question-connect .connection.corrected{
    background-color: transparent;
    background-image: repeating-linear-gradient(to right, #8DC82C, #8DC82C 6px, transparent 6px, transparent 12px);
}

.feedback-dialog {
    width: 370px;
    padding: 20px;
    border: 1px #999999 solid;
    border-radius: 10px;
    margin: auto;
    box-shadow: 0px 3px 6px #00000029;
}

.feedback-dialog::backdrop {
    background: none;
}

.feedback-dialog .feedback-message{
    font-weight: bold;
    font-size: 28px;
    line-height: 40px;
}

.feedback-dialog .feedback-message.success{
    color: var(--ev-sq-correct);
}

.feedback-dialog .feedback-message.unsuccess{
    color: var(--ev-sq-incorrect);
}

.feedback-dialog .feedback-message img{
    width: 36px;
}

/* ############################### QUESTION GROUP ############################### */
.question-group {
    pointer-events: none;
}

.question-group .self-evaluation-options,
.question-group[data-mode="default"],
.question-group[data-mode="undefined"]{
    pointer-events: auto;
}

.question-group .groups-container {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}

.question-group .groups-container .group-wrapper {
    max-width: calc(50% - 15px);
    width: 100%;
    min-height: 210px;
    position: relative;
}

.question-group .groups-container:has(.group-wrapper[data-group-index="2"]) .group-wrapper {
    max-width: calc(33% - 15px);
}

@media screen and (max-width: 900px) {
    .question-group .groups-container .group-wrapper {
        max-width: calc(50% - 15px) !important;
        width: calc(50% - 15px) !important;
    }
}

@media screen and (max-width: 550px) {
    .question-group .groups-container .group-wrapper {
        max-width: 100% !important;
        width: 100% !important;
    }
}

.question-group .groups-container .group-title-wrapper {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 12px;
}

.question-group .groups-container .group-title-wrapper .answer-solution {
    right: 0;
    top: -6px !important;
    position: absolute;
}

.question-group .groups-container .group-title-wrapper .narration-container {
    padding-right: 10px;
}

.question-group .groups-container .group-title-wrapper .answer-solution {
    pointer-events: auto;
    top: initial;
    left: initial;
    font-size: 40px;
    transform: initial;
    width: 40px;
    height: 40px;
    line-height: 40px;
}

.question-group .groups-container .group-droppable-zone .group-option-wrapper:hover,
.question-group .options-container .option-wrapper:hover,
.question-group .options-container .option-wrapper.ui-draggable-dragging {
    border-color: var(--ev-color-blue);
}

.question-group .group-wrapper .remove-option {
    top: 5px;
    right: 5px;
    opacity: 0;
    transition: all 0.1s linear;
    position: absolute;
    padding: 0px;
    background: none;
    border: none;
    pointer-events: none;
}

.question-group .group-wrapper .remove-option::before {
    background-color: #D7D7D7;
    color: black;
    border-radius: 50%;
    display: flex;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
}

.question-group .group-wrapper .remove-option:hover::before {
    background-color: #333;
    color: white;
}

.question-group .groups-container .group-droppable-zone {
    display: flex;
    align-items: flex-start;
    position: relative;
    width: 100%;
    border: 2px solid #D7D7D7;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    min-height: 211px;
    border-radius: 8px;
    margin: 10px 0;
    z-index: 0;
    transition: border 0.2s linear, backround  0.2s linear, scale 0.2s linear;
}

.question-group .groups-container .group-droppable-zone .group-option-wrapper .remove-option {
    top: 5px;
    right: 5px;
    opacity: 0;
    transition: all 0.1s linear;
}

.question-group[data-mode="default"] .groups-container .group-droppable-zone .group-option-wrapper.selected .remove-option,
.question-group[data-mode="default"] .groups-container .group-droppable-zone .group-option-wrapper:not(.ui-draggable-dragging):hover .remove-option,
.question-group[data-mode="undefined"] .groups-container .group-droppable-zone .group-option-wrapper.selected .remove-option,
.question-group[data-mode="undefined"] .groups-container .group-droppable-zone .group-option-wrapper:not(.ui-draggable-dragging):hover .remove-option {
    opacity: 1;
    pointer-events: auto;
}

.question-group .groups-container .group-droppable-zone:has(.ui-draggable-dragging) {
    z-index: 1;
}

.question-group:has(.option-wrapper.selected) .groups-container .group-droppable-zone,
.question-group:has(.group-option-wrapper.selected) .groups-container .group-droppable-zone,
.question-group .groups-container .group-droppable-zone.active {
    border: 2px solid var(--ev-color-blue);
}

.question-group:has(.option-wrapper.selected) .groups-container .group-droppable-zone:hover,
.question-group:has(.group-option-wrapper.selected) .groups-container .group-droppable-zone:not(:has(.group-option-wrapper.selected)):hover,
.question-group .groups-container .group-droppable-zone.hovering {
    background-color: #D4F0FF;
    cursor: pointer;
    scale: 1.05;
}

.question-group .options-container .option-wrapper,
.question-group .groups-container .group-option-wrapper {
    position: relative;
    border: 2px solid var(--ev-color-blue);
    cursor: pointer;
    transition: background-color 0.1s linear;
    border-radius: 8px;
    background: white;

    user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
}

.translationModalQuestionLayout .question-group .groups-container .group-option-wrapper {
    display: none !important;
}

.question-group .options-container .option-wrapper:has(.option[data-mode="image"]){
    border: none;
}

.question-group .options-container .option-wrapper .option[data-mode="image"]{
    max-height: unset;
}

.question-group .options-container .option[data-mode="image"] img{
    border-radius: 8px;
    border: 2px solid var(--ev-color-blue);
}

.question-group .options-container .option[data-mode="image"]:hover{
    z-index: 10;
    position: relative;
}

.question-group .groups-container .group-droppable-zone {
    gap: 8px;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: initial;
    padding: 10px;
}

.question-group .groups-container .group-droppable-zone .group-option-wrapper {
    display: flex;
    min-height: 46px;
    min-width: min(110px, 100%);
    justify-content: center;
    align-items: center;
    padding: 4px;
}

.question-group .groups-container .group-droppable-zone .group-option-wrapper.correct {
    border: 4px solid var(--ev-sq-correct);
}

.question-group .groups-container .group-droppable-zone .group-option-wrapper.noanswer {
    border: 4px dashed var(--sq-color-noanswer) !important;
}

.question-group .groups-container .group-droppable-zone .group-option-wrapper.incorrect {
    border: 4px solid var(--ev-sq-incorrect);
}

.question-group .groups-container .group-droppable-zone .group-option[data-mode="text"] {
    margin: 4px;
}

.question-group .groups-container .group-droppable-zone .group-option[data-mode="image"] {
    max-width: 100px;
    max-height: 100px;
    display: flex;
}

.question-group .groups-container .group-droppable-zone .group-option[data-mode="image"] img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}

.question-group .options-container {
    display: flex;
    position: relative;
    margin-top: 28px;
    gap: 20px;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
}

.question-group .options-container .option {
    margin: 2px;
}

.question-group .options-container .option[data-mode="image"] {
    max-width: 100px;
    max-height: 100px;
}

.question-group .options-container .option[data-mode="text"] {
    width: 100%;
    overflow-x: auto;
    padding: 10px;
}

.question-group .options-container .option:has(.narration-container){
    display: flex;
    gap: 10px;
    flex-direction: row;
    align-items: center;
}

.question-group .options-container .narration-container,
.question-group .group-option-wrapper .narration-container {
    padding-left: 4px;
    margin-top: 0px !important;
    display: flex;
}

.question-group .options-container .option-caption {
    margin-top: 10px;
    font-size: 16px;
    color: black;
    line-height: 100%;
}

.question-group .groups-container .group-droppable-zone .group-option-wrapper:hover,
.question-group .groups-container .group-option-wrapper.selected,
.question-group .options-container .option-wrapper.selected,
.question-group .options-container .option-wrapper:hover,
.question-group .options-container .option-wrapper.ui-draggable-dragging {
    border-color: var(--ev-color-blue);
    background-color: var(--ev-color-blue);
    color: white;
    z-index: 1;
}

.question-group .options-container .option-wrapper:has(.option[data-mode="text"]) {
    display: flex;
    cursor: pointer;
    min-width: 164px;
    max-width: 30%;
    align-items: center;
    min-height: 55px;
}

.question-group .options-container .option-wrapper img {
    max-width: 100%;
    max-height: 156px;
}

.question-group .f-icon-narration {
    pointer-events: auto;
}
/*  ################### QUESTIONS OF TYPE WORD SEARCH ################### */
.question-word-search {
    pointer-events: none;
}

.question-word-search .self-evaluation-options,
.question-word-search[data-mode="default"],
.question-word-search[data-mode="undefined"] {
    pointer-events: auto;
}

.question-word-search .container-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-wrap: wrap;
}

.question-word-search .words-list {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    flex-direction: row;
}

.question-word-search .words-list li {
    border: 1px solid #cfcfcf;
    line-height: 1;
    border-radius: 5px;
    padding: 0px 10px;
    display: flex;
    align-items: center;
}

.question-word-search .words-list li .remove-option {
    transition: all 0.1s linear;
    padding: 0px;
    background: none;
    border: none;
    margin-left: 4px;
}

.question-word-search .words-list li .remove-option::before {
    font-size: 20px;
    background-color: #D7D7D7;
    color: black;
    border-radius: 50%;
    display: flex;
    width: 20px;
    height: 20px;
    align-items: center;
    justify-content: center;
}

.question-word-search .words-list li .remove-option:hover::before {
    background-color: #333;
    color: white;
}

.question-word-search .words-list li:has(label.found) {
    background: #fbfbfb;
    border: 1px solid #e9e9e9;
}

.translationModalQuestionLayout .question-word-search .words-list li:has(label.found) {
    background: initial;
    border: 1px solid #cfcfcf;
}

.translationModalQuestionLayout .question-word-search .words-list label.found,
.translationModalQuestionLayout .question-word-search .words-list label.pinned {
    text-decoration: initial;
    font-style: initial;
    opacity: 1;
}

.translationModalQuestionLayout .question-word-search .word-search-table[data-selecting] td.user-answer button,
.translationModalQuestionLayout .question-word-search .word-search-table[data-selecting] td.pinned.user-answer button,
.translationModalQuestionLayout .question-word-search .word-search-table[data-selecting] td.drawing-path button,
.question-word-search .word-search-table[data-selecting] button.valid:hover {
    background: initial !important;
    color: #000;
    font-weight: normal;
}

.question-word-search .words-list label.found,
.question-word-search .words-list label.pinned {
    text-decoration: line-through;
    font-style: italic;
    opacity: 0.7;
}

.question-word-search .word-search-table {
    margin: 20px;
    
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
    user-drag: none;
    -webkit-user-drag: none;
    pointer-events: none;
}

.question-word-search[data-mode="default"] .word-search-table,
.question-word-search[data-mode="paper"] .word-search-table,
.question-word-search[data-mode="undefined"] .word-search-table {
    pointer-events: auto;
}

.question-word-search .word-search-table td {
    position: relative;
    width: 36px;
    height: 36px;
    border: 2px solid var(--sq-color-blue);
    /* overflow: hidden; */
    padding: 0px;
}

.question-word-search .word-search-table td:has(button:empty) {
    border: none;
    pointer-events: none;
}

.question-word-search .word-search-table td.pinned button {
    background: #84daff !important;
    color: white;
    font-weight: bold;
}

.question-word-search .word-search-table td button:hover {
    box-shadow: 0px 0px 0px 1px inset #20B3FE;
}
.question-word-search .word-search-table td:has(.invalid) button:hover {
    box-shadow: 0px 0px 0px 1px inset var(--ev-sq-alert);
}

.question-word-search .word-search-table td button.letter {
    width: 100%;
    height: 100%;
    margin: 0;
    border: none;
    padding: 0;
    display: block;
    text-transform: uppercase;
    font-size: 22px;
    background: white;
}

.question-word-search .word-search-table td.highlighted button.letter {
    background: #E0F6FE;
    font-weight: bold;
}

.question-word-search .word-search-table[data-selecting] td.user-answer button,
.question-word-search .word-search-table[data-selecting] td.pinned.user-answer button,
.question-word-search .word-search-table[data-selecting] td.drawing-path button,
.question-word-search .word-search-table[data-selecting] button.valid:hover {
    background: #E0F6FE !important;
    color: #000;
    font-weight: normal;
}

.question-word-search .word-search-table[data-selecting] td.origin {
    background: #e9f9ff !important;
}

.question-word-search .word-search-table[data-selecting] td.origin button {
    background: #c3e9ff !important;
}

.question-word-search .word-search-table[data-selecting] td.origin button.invalid,
.question-word-search .word-search-table[data-selecting] button.invalid {
    background: #FFCCCC !important;
    cursor: not-allowed;
}

/* ############################### QUESTION CROSSGRAM ############################### */

.question-crossgram {
    pointer-events: none;
}

.question-crossgram[data-mode="paper"],
.question-crossgram[data-mode="default"],
.question-crossgram[data-mode="undefined"],
.question-crossgram[data-mode="practice"]{
    pointer-events: auto;
}

.question-crossgram .container-wrapper {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.question-crossgram .container-wrapper .image-wrapper {
    max-width: 80%;
    position: relative;
}
.question-crossgram .container-wrapper .image-wrapper img {
    max-width: 100%;
    /* z-index: -2; */
    position: relative;

    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
    user-drag: none;
    -webkit-user-drag: none;
}

.question-crossgram .crossgram-table {
    border-collapse: collapse;
    
    -webkit-user-select: none;
    /* Safari */
    -ms-user-select: none;
    /* IE 10 and IE 11 */
    user-select: none;
    /* Standard syntax */
    user-drag: none;
    -webkit-user-drag: none;
}

.question-crossgram:not(:has(.image-wrapper)) .crossgram-table {
    margin: 0 auto;
}

.question-crossgram .crossgram-table.fill-void {
    border: 2px solid #20b3fe;
}

.question-crossgram .crossgram-table td {
    position: relative;
    width: 36px;
    height: 36px;
    border: none;
    padding: 0;
    background: white;
}

.question-word-search .word-search-table td.corrected::before,
.question-crossgram .crossgram-table td::before {
    content: "";
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    display: block;
    position: absolute;
    top: -1px;
    left: -1px;
    box-sizing: content-box;
    border: 2px solid var(--sq-color-blue);
    pointer-events: none;
}

.question-word-search .word-search-table td.corrected::before {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0px;
    transform: translate(-2px, -2px);
}

.question-crossgram .crossgram-table.borderless td::before {
    border-color: transparent;
}

.question-word-search .word-search-table td.corrected,
.question-crossgram .crossgram-table td.word.unanswered,
.question-crossgram .crossgram-table td.word.wrong,
.question-crossgram .crossgram-table td.word.correct {
    border-color: white;
}

.question-word-search .word-search-table td.corrected.unanswered::before,
.question-crossgram .crossgram-table td.word.unanswered::before {
    border: 2px dashed var(--sq-color-noanswer);
}

.question-word-search .word-search-table td.corrected.wrong::before,
.question-crossgram .crossgram-table td.word.wrong::before {
    border: 2px solid var(--sq-color-wrong);
    z-index: 1;
}

.question-word-search .word-search-table td.corrected.correct::before,
.question-crossgram .crossgram-table td.word.correct::before {
    border: 2px solid var(--sq-color-right);
    z-index: 2;
}

.question-crossgram .crossgram-table td input {
    width: inherit;
    height: inherit;
    border: none;
    margin: 0;
    padding: 0;
    text-align: center;
    line-height: 100%;
    font-size: 20px;
    text-transform: uppercase;
}

.question-crossgram .crossgram-table.borderless td input {
    border: none !important;
    background: #F7F7F7;
    border-radius: 3px;
    box-shadow: inset 1px 1px 2px 1px #ddd;
}

.question-crossgram .crossgram-table td {
    transition: background 0.1s linear;
}

.question-crossgram .crossgram-table.borderless td {
    border: none;
}

.question-crossgram .crossgram-table:not(.borderless) td input:not([disabled]):hover {
    background: #E0F6FE;
}

.question-crossgram .crossgram-table.borderless td input:not([disabled]):hover {
    background: white;
}

.question-crossgram .crossgram-table td:not(.word) {
    border: none; /* Duvidoso */
    opacity: 0;
    pointer-events: none;
}

.question-crossgram .crossgram-table.fill-void td:not(.word) input,
.question-crossgram .crossgram-table.fill-void td:not(.word) {
    opacity: 1;
    background: #80D4FF;
    z-index: 0;
}

.question-crossgram .crossgram-table.fill-void.borderless td {
    padding: 1px;
}

.question-crossgram .crossgram-table.fill-void.borderless td:not(.word) {
    background: white;
}

.question-crossgram .crossgram-table.borderless.fill-void td:not(.word) input {
    box-shadow: inset -0.5em -0.5em 0.8em 0.1em #39bcff;
    background: #80D4FF;
}

.question-crossgram .crossgram-table td.visible input {
    pointer-events: none;
    font-weight: bold;
}

.question-crossgram .crossgram-table span.word-index {
    display: flex;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 42%;
    height: 42%;
    background: var(--sq-color-blue);
    content: attr(data-word-index);
    font-size: 12px;
    line-height: 100%;
    pointer-events: none;
    color: white;
    justify-content: center;
    align-items: center;
}

.question-crossgram .crossgram-table.hide-numbers span.word-index {
    display: none;
}

#assessment-section *[data-type="AUTO-RUNTIME"] .narration,
#assessment-section *[data-type="AUTO-RUNTIME"] .locution,
#assessment-section .narration[data-type="AUTO-RUNTIME"],
#assessment-section .locution[data-type="AUTO-RUNTIME"] {
    display: none !important;
}

#students-dashboard *[data-type="AUTO-RUNTIME"] .narration,
#students-dashboard *[data-type="AUTO-RUNTIME"] .locution,
#students-dashboard .narration[data-type="AUTO-RUNTIME"],
#students-dashboard .locution[data-type="AUTO-RUNTIME"] {
    display: none !important;
}

#questions-dashboard *[data-type="AUTO-RUNTIME"] .narration,
#questions-dashboard *[data-type="AUTO-RUNTIME"] .locution,
#questions-dashboard .narration[data-type="AUTO-RUNTIME"],
#questions-dashboard .locution[data-type="AUTO-RUNTIME"] {
    display: none !important;
}

.question-crossgram .solutions-container {
    width: 100%;
    display: flex;
    justify-content: center;
}

.locution-container .locution {
    pointer-events: auto !important;
}

.question-crossgram .hints-container,
.question-crossgram .locutions-solutions-container {
    display: flex;
    flex-direction: row;
    gap: 55px;
    margin-top: 20px;
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
}

.question-crossgram .hints-container .hints-column {
    width: 100%;
    max-width: 300px;
}

.question-crossgram .hints-container h2.orientation,
.question-crossgram .locutions-solutions-container h2.orientation {
    font-weight: bold;
    font-size: 20px;
    color: var(--sq-color-blue);
}

.question-crossgram .hints-container .hint-text,
.question-crossgram .locutions-solutions-container .hint-text {
    width: 250px;
}

.question-crossgram .hints-container .word-index~,
.question-crossgram .locutions-solutions-container .word-index {
    /*width: 20px;*/
    font-weight: bold;
    font-size: 18px;
    color: #20B3FE;
    text-align: right;
}

.question-crossgram .hints-container .hint,
.question-crossgram .locutions-solutions-container .hint {
    display: flex;
    gap: 11px;
}

.question-crossgram:has(.crossgram-table.hide-numbers) .hints-container .word-index,
.question-crossgram:has(.crossgram-table.hide-numbers) .locutions-solutions-container .word-index {
    display: none;
}

.question-crossgram:has(.crossgram-table.hide-numbers) .hints-container .hint-text,
.question-crossgram:has(.crossgram-table.hide-numbers) .locutions-solutions-container .hint-text {
    padding-left: 20px;
}

.question-crossgram .hints-container .hint .word-index,
.question-crossgram .locutions-solutions-container .hint .word-index {
    font-weight: bold;
    color: var(--sq-color-blue);
}

/* SQ-POPUP-MESASGE */

.sq-popup-message {
    width: 400px;
    position: fixed;
    top: 25%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.7) 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.3);
    opacity: 1;
    padding: 32px;
    transition: opacity 0.5s linear;
    cursor: pointer;
    font-size: 18px;
    z-index: 1000;
}

.sq-popup-message h3{
    font-size: 18px;
    font-weight: 700;
    color: var(--ev-sq-success-color);
}

.sq-popup-message p{
    color: #FFF;
}

.sq-popup-message.success .btn.close-btn {
    color: #EDEDED;
}

.sq-popup-message.error .btn.close-btn {
    color: var(--bs-danger);
}

.sq-popup-message.error {
    background: #ffdada;
    border-color: var(--bs-danger);
    color: #cc0000;
}

.sq-popup-message:hover{
    transition: opacity 0.2s linear;
    opacity: 0.8;
}

/* WQS */

.wqs-popup{
    position: absolute;
    background-color: #f9f9f9;
    border: 1px solid #ccc;
    padding: 10px;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
    z-index: 1000;
    max-width: 690px;
    min-width: 344px;
    border-radius: 4px;
}

.wqs-popup.ui-draggable .wqs-plugin,
.wqs-popup.ui-draggable .wqs-btns-wrapper .button-default{
    cursor: auto;
}

.wqs-popup img.wrsUI_aux_mathTypeComponentePlaceholderImage {
    max-width: 100%;
}

.wqs-inline-toolbar {
    position: absolute;
    display: flex;
    width: auto;
    height: auto;
    top: 0px;
    transform: translateY(-100%);
    border: 1px solid #ddd;
    padding: 2px;
    border-radius: 6px 6px 0 0;
    border-bottom: none;
    background: white;
    transition: all 0.2s;
}

.wqs-inline-toolbar:hover {
    box-shadow: 0 0 4px 0px #3DBAFD;
    border-color: transparent;
}

.wqs-inline-toolbar .wqs-mathtype,
.wqs-inline-toolbar .wqs-chemtype { 
    display: flex;
    background-color: white;
    padding: 4px;
    border: none;
    border-radius: 2px;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.2s;
    width: 36px;
    height: 36px;
    justify-content: center;
    align-items: center;
}

.wqs-inline-toolbar .wqs-mathtype:hover,
.wqs-inline-toolbar .wqs-chemtype:hover { 
    border-bottom: 2px solid #3DBAFD;
    color: #3DBAFD;
}

.wqs-inline-toolbar .wqs-mathtype:active,
.wqs-inline-toolbar .wqs-chemtype:active { 
    background-color: #3dbafd8a;
    color: white;
}

.wqs-btns-wrapper .drag-handler {
    position: relative;
    border-radius: 50%;
    min-width: 50px;
    height: 50px;
    border: none;
    background: white;
    box-shadow: 0px 0px 3px 1px #ccc;
    color: #777;
    cursor: move;
    transition: color 0.2s linear;
}

.wqs-btns-wrapper .drag-handler:hover {
    color: black;
}

#testcontainer{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    width: 100%;
    margin: 12px 0;
}

#feedback{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
    margin-left: 20px;
}

/* ############################### QUESTION WIRIS MULTIPLE SELECTION ############################### */
.answer-options-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.answer-options-container .item {
    padding: 1rem;
    -webkit-transition: all .3s ease-in-out;
}

.answer-options-container .item.selected {
}

/* ############################### QUESTION WIRIS MULTIPLE SELECTION ############################### */
.author-answer-container span.wrsUI_component.wrsUI_label.wrsUI_labelImportant {
    display: none;
}

/* ########################################### TRUMBOWYG ########################################### */
.trumbowyg-box .wqs-popup-wrapper{
    display: flex;
    position: absolute;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.trumbowyg-box .wqs-popup {
    z-index: 12;
    min-width: 344px;
    align-self: center;
    top: 50%;
    transform: translateY(round(to-zero, -50%, 1px));
}

.trumbowyg-button-pane {
    background: white !important;
}

.trumbowyg-button-pane button {
    display: flex !important;
    align-items: center;
    justify-content: center;
    transition: 0.15s linear !important;
    /* Border used as margin */
    border: 2px solid white !important;
    border-radius: 4px !important;
}

.trumbowyg-button-pane button:not(.trumbowyg-disable):focus,
.trumbowyg-button-pane button.trumbowyg-active {
    box-shadow: inset 0px 0px 1px 2px #737373;
}

.trumbowyg-button-pane button.trumbowyg-active,
.trumbowyg-button-pane button:not(.trumbowyg-disable):focus,
.trumbowyg-button-pane button:not(.trumbowyg-disable):hover {
    background: #999 !important;
    fill: white !important;
    color: white;
}

.trumbowyg-button-pane button.trumbowyg-active svg,
.trumbowyg-button-pane button:not(.trumbowyg-disable):focus svg,
.trumbowyg-button-pane button:not(.trumbowyg-disable):hover svg {
    fill: white;
    color: white;
}

.trumbowyg-editor {
    padding: 10px;
}

.trumbowyg-editor-box p {
    font: 400 20px 'Source Sans Pro Regular', sans-serif;
}

.trumbowyg-editor-box ol {
    list-style: auto;
    padding: 0 40px;
}

.trumbowyg-editor-box ul {
    list-style: disc;
    padding: 0 40px;
}

.trumbowyg-editor-box a {
    color: revert;
    text-decoration: revert;
}

.trumbowyg-editor-box .mathml-container {
    display: inline-block;
    transition: all 0.2s linear;
    outline: 1px solid transparent;
    cursor: pointer;
    border-radius: 2px;
}

.trumbowyg-editor-box .mathml-container:hover {
    background: #f9fdff;
    outline: 1px solid #cde9ff;
}

.trumbowyg-editor-box .mathml-container > * {
    pointer-events: none;
}

.trumbowyg-editor table td,
.trumbowyg-editor table th {
    border: 1px solid #e7eaec !important;
    padding: var(--tbw-cell-vertical-padding) var(--tbw-cell-horizontal-padding);
    height: calc(var(--tbw-cell-vertical-padding) * 2 + var(--tbw-cell-line-height));
    min-width: calc(var(--tbw-cell-horizontal-padding) * 2);
}

.trumbowyg-box:not(.trumbowyg-editor-hidden) .trumbowyg-editor-box {
    display: flex !important;
}

.trumbowyg-editor > span.mathml-container,
.trumbowyg-editor-box p {
    margin: 0.5em;
}

/* This is required for the editor div to inherit the parent's height */
.trumbowyg-box .trumbowyg-editor {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    padding: 20px;
    border: 0;
}

/* Prevents cursor jumping when paragraphs are created in the editor */
.trumbowyg-box .trumbowyg-editor:has(p) {
    padding: calc(20px - 0.5em);
}

/* #region WIRIS MODAL STYLES */
.wrs_editor .wrs_multipleRowPanel{
    height: auto !important;
}

.wrs_modal_dialogContainer{
    background: white !important;
    padding: 6px;
    border-radius: 15px !important;
}

.wrsUI_component.wrsUI_inputComponent.wrsUI_mathTypeComponent {
    max-width: unset !important;
}

.wrs_modal_wrapper {
    max-width: calc(100% - 12px) !important;
    max-height: calc(100% - 12px) !important;
}

.wrs_modal_title_bar {
    background: white !important;
}

.wrs_modal_title {
    font-size: 14px !important;
    font-weight: bold !important;
    color: #333333 !important;
}

.wrs_modal_title_bar a {
    filter: brightness(0.3) !important;
}

.wrs_editor .wrs_toolbar .wrs_header > button.wrs_context, .wrs_editor .wrs_toolbar .wrs_header > div.wrs_context,
.wrs_editor .wrs_toolbar .wrs_header > button, .wrs_editor .wrs_toolbar .wrs_header > div {
    background: #9d9d9d !important
}

.wrs_editor .wrs_toolbar .wrs_header > button.wrs_context:hover, .wrs_editor .wrs_toolbar .wrs_header > div.wrs_context:hover,
.wrs_editor .wrs_toolbar .wrs_header > button:hover, .wrs_editor .wrs_toolbar .wrs_header > div:hover {
    cursor: pointer;
    background: #333 !important
}

.wrs_editor .wrs_toolbar .wrs_header > button {
    border-bottom: 1px solid #ccc;
}

.wrs_editor .wrs_toolbar .wrs_header > div.wrs_selected, .wrs_editor .wrs_toolbar .wrs_header > button.wrs_selected {
    background: white !important;
    border: 1px solid #ccc !important;
    border-bottom: none !important;
}

.ck-toolbar-container:has(.ck-toolbar__items:empty){
    display: none !important;
}

.wrs_editor .wrs_panelContainer {
    background: white !important;
    border: 1px solid #ccc !important;
}

.wrs_editor .wrs_layoutFor3Rows .wrs_button:active, .wrs_editor .wrs_layoutFor3Rows .wrs_button.wrs_toggled, .wrs_editor .wrs_layoutFor3Rows .wrs_button.wrs_pressed,
.wrs_editor .wrs_button {
    border: none !important;
}

.wrs_editor .wrs_layoutFor2Rows .wrs_button:active,
.wrs_editor .wrs_button:hover {
    background: #F0F0F0 !important;
}

.wrs_button:active, .wrs_editor .wrs_layoutFor3Rows .wrs_button.wrs_toggled, .wrs_editor .wrs_layoutFor3Rows .wrs_button.wrs_pressed,
.wrs_editor .wrs_button:focus {
    background: #F0F7FF !important;
}

.wrs_imageContainer .wrs_button:focus img {
    background-color: #2977FF !important;
    mix-blend-mode: multiply !important;
}

.wrs_content_container.wrs_modal_desktop {
    max-height: calc(100% - 60px) !important;
}

.wrs_editor .wrs_layoutFor3Rows .wrs_button:active, .wrs_editor .wrs_layoutFor3Rows .wrs_button.wrs_toggled, .wrs_editor .wrs_layoutFor3Rows .wrs_button.wrs_pressed {
    border: 1px solid #28B3FC !important;
}

.wrs_editor.wrs_withHand:not(.wrs_handDisabled):not(.wrs_toolbarHidden) .wrs_handWrapper > input {
    border: none !important;
    background-color: #9d9d9d !important;
}

.wrs_editor.wrs_withHand:not(.wrs_handDisabled):not(.wrs_toolbarHidden) .wrs_handWrapper > input:hover {
    background-color: #333333 !important;
}

.wrs_modal_controls {
    height: 47px !important;
}

.wrs_modal_button_accept {
    background: #28B3FC !important;
    border: none !important;
}
.wrs_modal_button_accept:hover {
    background: #31D2F2 !important;
}

.wrs_modal_button_cancel {
    border: none !important;
    color: white !important;
    background: #9d9d9d !important;
}

.wrs_modal_button_cancel:hover {
    background: #333333 !important;
}

.wqs-popup .wrs_formulaDisplay {
    box-shadow: 2px 2px 3px #ccc inset, 0 0 !important;
    border: 1px solid #d7d7d7 !important;
}

.wrs_linksContainer img {
    filter: sepia(96%) saturate(1304%) hue-rotate(185deg) contrast(103%) !important;
}

.wrs_bottom_right_resizer {
    color: #28B3FC !important;
    right: 12px !important;
    bottom: 14px !important;
}

.wrs_editor .wrs_selectPanel {
    background: #ffffff !important;
    color: #333 !important;
    border: 1px solid #ccc !important;
}

.wrs_editor .wrs_selectPanel div.wrs_selected {
    background: #ccc !important;
}

.wrs_editor .wrs_select {
    color: #333 !important;
}

.wrs_editor .wrs_select.wrs_pressed {
    background: #28B3FC !important;
    color: #fff !important;
}

.wrs_editor .wrs_selectPanel div:hover {
    background: #333 !important;
    color: #fff !important;
}

.wrs_editor .wrs_select:hover {
    color: #333 !important;
    border: 1px solid #28B3FC !important;
}

#trumbowyg-icons, .trumbowyg-icons {
    display: none;
}

/* #endregion */
.image-hover-container {
    box-shadow: 1px 1px 3px 1px #ccc;
    position: fixed;
    z-index: 100;
    pointer-events: none;
}

/* LOCUTIONS AUDIO PLAYER */

.narration-container .locution-audio-player {
    width: var(--px-40);
    height: var(--px-40);
    position: relative;
    display: inline-block;
    /*margin: var(--px-20);*/
    user-select: none;
    pointer-events: auto;
}

.narration-container .locution-audio-player:empty {
    display: none;
}

/* Buttons */
.narration-container .locution-audio-player .control {
    width: var(--px-40);
    height: var(--px-40);
    border-radius: 50%;
    border: none;
    background: #CCC;
    color: #000;
    cursor: pointer;
    font-size: var(--px-18);
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    line-height: normal;
}

.narration-container .locution-audio-player .control span{
    font-size: var(--px-35);
    position: relative;
}

/*
.narration-container .locution-audio-player .control.play {
    z-index: 3;
}
*/

/* Side buttons base state */
.narration-container .locution-audio-player .control.back,
.narration-container .locution-audio-player .control.forward {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease;
    background: transparent;
    color: #000;
}

.narration-container .locution-audio-player.show-controls .back,
.narration-container .locution-audio-player.show-controls .forward {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* close to play */
.narration-container .locution-audio-player .back {
    transform: translateX(-32px);
}

.narration-container .locution-audio-player .forward {
    transform: translateX(32px);
}

/*
.locution-audio-player.is-touch .back,
.locution-audio-player.is-touch .forward {
    display: none !important;
}
*/

/* progress ring */
.narration-container .locution-audio-player .progress-ring {
    position: absolute;
    top: -4px;
    left: -4px;
    width: var(--px-48);
    height: var(--px-48);
    transform: rotate(-90deg);
    z-index: 1;
}

.narration-container .locution-audio-player .ring-bg {
    fill: none;
    stroke: #FFF;
    stroke-width: 3;
}

.narration-container .locution-audio-player .progress-ring__circle {
    fill: none;
    stroke: #006DC0;
    stroke-width: 6;
    stroke-dasharray: 125.6;
    stroke-dashoffset: 125.6;
    /*transition: stroke-dashoffset 0.1s linear;*/
}

/* tooltip */
.narration-container .locution-audio-player .seek-tooltip {
    position: absolute;
    top: -26px;
    left: 50%;
    transform: translateX(-50%);
    background: black;
    color: white;
    font-size: var(--px-10);
    padding: var(--px-2) var(--px-6);
    border-radius: var(--px-4);
    opacity: 0;
    pointer-events: none;
}

.narration-container .locution-audio-player.seeking .seek-tooltip {
    opacity: 1;
}

.question-word-search .words-list .narration-container,
.question-crossgram .hint .narration-container,
.question-spaces .target .narration-container,
.spaces .narration-container {
    scale: 0.8;
    display: flex;
}

/* keyboard focus */
.locution-audio-player .control:focus-visible {
    outline: var(--px-2) solid #4cafef;
    outline-offset: var(--px-3);
}

#smartplayerRoot.preview .sp-main {
    max-height: 100%;
}