/* ------------------------------------------------- FONT ------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;500&display=swap');

/* ------------------------------------------------- GLOBAL ------------------------------------------------- */

*, *::before, *::after {
    margin: 0;
    padding: 0;
    list-style: none;
    box-sizing: border-box;
}

:root {
    --fs: 16px;
}

p, h4, h5, h6 {
    width: clamp(45ch, inital, 85ch);
}

img {
    max-width: 100%;
    height: auto;
}

body.page {
    min-height: 100vh; /* Fallback for browsers that do not support Custom Properties */
    min-height: calc(var(--vh, 1vh) * 100);
    line-height: 1.5;
    font-family: 'Poppins';
    font-weight:300;
    margin-top: 0;
    margin-bottom: 0;
}

#primary .uagb-columns__wrap > .uagb-columns__inner-wrap {
    /*max-width: 1200px;*/
}


.form-qpage-loader {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.loader {
    width: 100px;
    height: 100px;
}

body.page-template-page-content-centered-only-php div#page {
    height: calc(var(--vh, 1vh) * 100);
    width: 100%;
}

body.page-template-page-content-centered-only-php div#page main#primary {
    width:100%;
    height:100%;
    display:
            flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

body.page-template-page-content-centered-only-php .page-container {
    max-width: 400px;
    padding: 0 15px;
}

body.page-template-page-content-centered-only-php h3 {
    font-size: 34px;
    color: #002C64;
    margin-bottom: 30px;
}

.global-loader {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    background: #FFFFFF;
    display: flex;
    justify-content: center;
    align-items: center;
    -webkit-transition: opacity 500ms ease;
    -moz-transition: opacity 500ms ease;
    -ms-transition: opacity 500ms ease;
    -o-transition: opacity 500ms ease;
    transition: opacity 500ms ease;
}

body.page-loaded .global-loader {
    opacity:0;
}

body.page-loaded-end .global-loader {
    display:none;
}



/* ------------------------------------------------- QUIZZ ------------------------------------------------- */

body.questionnaire-template-default {
    background: #2B2B2B;
    color: #FFFFFF;
}

.quiz-form-logo {
    position: fixed;
    right: 20px;
    top: 25px;
    z-index: 999;
    height: 50px;
    width: 50px;
}

img {
    max-width:100%;
}

.quiz-container > .quiz-outer > .quiz-inner {
    display: grid;
    grid-template-areas:
        "illustration form";
    grid-template-columns: 50% 50%;
    grid-template-rows: 100%;
    height: 100%;
    overflow: hidden;
}

.quiz-illustration-container {
    grid-area: illustration;
}

.quiz-form-container {
    grid-area: form;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    position: relative;
}

.quiz-form-container-inner {
    /* position: relative; */
    height: calc(100% - 125px);
    width: calc(100% - 100px);
    max-width: 430px;
    display: grid;
    grid-template-rows: auto 1fr;
    padding-bottom: 2vh;
    pointer-events: all;
    opacity: 1;
    -webkit-transition: opacity 500ms ease;
    -moz-transition: opacity 500ms ease;
    -ms-transition: opacity 500ms ease;
    -o-transition: opacity 500ms ease;
    transition: opacity 500ms ease;align-self: flex-end;
}

.quiz-illustration {
    position: relative;
    width: 100%;
    height: 100%;
}

.quiz-illustration-logo {
    position: absolute;
    left: 2%;
    top: 2%;
}

.quiz-illustration-controls {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 15px;
}

.quiz-illustration-image {
    height: 100%;
    width: 100%;
    position: relative;
    overflow: hidden;
    box-shadow: -4px 0px 12px #00000057;
}

.quiz-illustration-image > img {
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%;
}

.quiz-illustration-video {
    height: 100%;
    width: 100%;
    position: relative;
    overflow: hidden;
    box-shadow: -4px 0px 12px #00000057;
}

.quiz-illustration-video > div.form-video-player {
    position:relative;
}

.quiz-illustration-video > div.form-video-player,
.quiz-illustration-video > div.form-video-player > div.form-video-overlay,
.quiz-illustration-video > div.form-video-player > div.form-video-player-video{
    width: 100%;
    height: 100%;
}

.quiz-illustration-video video {
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.form-video-overlay, .form-video-poster {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: transparent;
    z-index: 997;
    display:
            flex;
    justify-content:
            center;
    align-items:
            center;
}

.form-video-poster {
    opacity:0;
    -webkit-transition: opacity 150ms ease;
    -moz-transition: opacity 150ms ease;
    -ms-transition: opacity 150ms ease;
    -o-transition: opacity 150ms ease;
    transition: opacity 150ms ease;

}

.form-video-poster.active {
    opacity:1;
}

.form-video-overlay {
    cursor:pointer;
}
.form-video-pass {
    position: absolute;
    bottom: 0;
    font-size: 18px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    text-shadow: 0 0 5px black, 0 0 2px black;
    padding: 30px;
    z-index: 998;
    cursor: pointer;
}

.form-video-poster img {
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%;
}

.form-video-button {
    width: 60px;
    height: 60px;
    background: #d8a94f;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.form-video-button svg {
    width:36px;
}

.vjs-poster {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: initial;
    object-position: center;
    max-width: none;
    background-size: cover;
    background-position: 50%;
}

video[poster]{
    object-fit: cover;
}

.iframe-video {
    width: 100%;
    height: 100%;
}

.iframe-video iframe {
    width: 100%;
    height: 100%;
    object-fit: cover;
    align-items: center;
}

.form-video-audio {
    position: absolute;
    left: 30px;
    top: 30px;
    width: 60px;
    height: 60px;
    padding:15px;
    z-index: 1000;
    cursor: pointer;
}

.form-video-audio > div {
    background: #FFFFFF;
    border-radius: 100%;
    width:30px;
    height:30px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.muted .form-video-audio .sound-wave {
    display: none;
}

.quiz-illustration-legend {
    position: absolute;
    bottom: 0;
}







.quiz-container {
    height: 100vh; /* Fallback for browsers that do not support Custom Properties */
    height: calc(var(--vh, 1vh) * 100);
    width: 100%;
}

.quiz-outer {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.quiz-form-help {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: #2b2b2b;
    z-index: 1001;
    display: flex;
    opacity: 0;
    display: none;
}

.quiz-form-help.visible {
    display: flex;
    opacity: 1;
    justify-content: center;
    align-items: center;
}

.quiz-form-help-content {
    margin-top: 120px;
    height: calc(100% - 120px);
    max-width: calc(100% - 60px);
    overflow-y: auto;
}

.quiz-form-help-exit {
    position: absolute;
    right: 0;
    top: 0;
    font-size: 30px;
    width: 30px;
    cursor:pointer;
}

.quiz-form-chapter-name {
    font-size: 18px;
    color: #7a79f3;
    margin-bottom: 15px;
}

.quiz-form-nav {
    position: absolute;
    left: calc(50% + 20px);
    right: 20px;
    top: 30px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 60px;
    z-index: 9;
}

.quiz-inner.displaying-qpage .quiz-form-nav {
    left: calc(25%);
    right: calc(25%);
}

.quiz-inner.displaying-qpage .quiz-form-nav.right {
    left: calc(50% + 20px);;
    right: 0;
}

.quiz-inner.displaying-qpage .quiz-form-nav.left {
    left: 0%;
    right: calc(50% + 20px);;
}

ul.quiz-form-nav-items {
    display: flex;
    justify-content: space-between;
    margin: 0;
    position: relative;
    z-index: 1;
}

.quiz-form-nav-bar {
    height: 4px;
    background: #ebebeb;
    z-index: 0;
    border-radius: 10px;
    width: calc(100% - 120px);
    max-width: 430px;
    position: relative;
    margin-top: 13px;
}

.quiz-form-nav-title {
    z-index: 0;
    border-radius: 10px;
    width: calc(100% - 120px);
    position: relative;
    margin-top: 4px;
    text-align:
            center;
    font-weight: 400;
}

.quiz-form-nav-item {
    background: #50b9ff;
    color: #FFFFFF;
    width: 45px;
    height: 25px;
    text-align: center;
    line-height: 26px;
    border-radius: 20px;
}

.quiz-form-nav-item.current {
    background: #3b7296;
}

.quiz-form-nav-bar > span {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    border-radius: 10px;
    background: #7a79f3;
    right: 100%;
}

.quiz-form-back {
    color: #50b9ff;
    cursor: pointer;
    text-align: left;
    width: 75px;
    display: flex;
    align-items: center;
    justify-content: left;
    gap: 5px;
}
.quiz-form-back > div {
    display: flex;
    padding: 0 7px;
}

.quiz-form-back > div.quiz-nav-replay {
    width: 40px;
    height: 25px;
}

.quiz-form-back > div.quiz-nav-replay > svg {max-width: 100%;height: auto;}


.quiz-form-replay {
    text-align: center;
    color: #50b9ff;
    width: 100%;
    display: flex;
    justify-content: center;
    display:none;
}

.quiz-form-replay > .form-video-button {
    cursor: pointer;
}

.nav-logo-spacer {
    width: 75px;
    height: 30px;
}

.quiz-form-question-content {
    display: flex;
    height: 100%;
    width: 100%;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    /* overflow-y: auto; */
}

.quiz-form-help-button {
    width: 100%;
    margin-bottom: 30px;
    font-size: 12px;
    color: #c2c2c2;
    cursor: pointer;
    display: flex;
    justify-content: right;
}

.question-help-trigger {
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.quiz-form-help-button:hover {
    color: #777777;
}

.question-help-trigger.dashicons-before.dashicons-editor-help {
    display: inline-block;
    vertical-align: middle;
}

.quiz-form-title {
    width: 100%;
    font-size: 22px;
    margin-bottom: 30px;
    line-height: 1.4;
    max-height: 44vh;
    overflow-y: auto;
    font-weight: 400;
}

.quiz-form-fields-container {
    width: 100%;
    align-self: flex-start;
}

.quiz-form-question-content-inner {
    width: 100%;
}

.quiz-form-title-container {
    width: 100%;
    align-self: start;
}

.quiz-form-field > div {
    margin-bottom: 15px;
}

.quiz-form-field {
    font-size: 18px;
}

.quiz-form-submit {
    position:
            relative;
    font-size: 18px;
    text-align: center;
    padding: 15px;
    border-radius: 8px;
    width: 100%;
    color: #FFFFFF;
    background: #7A79F3;
    margin-bottom: 30px;
    cursor: pointer;
}

.quiz-form-submit:after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    background: #7A79F3;
    z-index: -1;
    top: 0;
    left: 0;
    -webkit-transition: all 250ms ease;
    -moz-transition: all 250ms ease;
    -ms-transition: all 250ms ease;
    -o-transition: all 250ms ease;
    transition: all 250ms ease;
    transform:
            scale(1);
}

.quiz-form-submit:hover:after {
    transform:scale(1.05);
}

.quiz-form-fields {
    margin-bottom: 30px;
}


.form-results-container, .form-qpage-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 8;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #2b2b2b;
}

.form-results, .form-qpage {
    width: 100%;
    height: 100%;
    max-width: 800px;
    max-height: 80vh;
    overflow-y: auto;
    padding: 90px 30px 15px 30px;
    border: 1px solid #bebebe;
    border-radius: 8px;
    color: #FFFFFF;
    background: #2b2b2b;
}

.qpage-raw-contents {
    display: none;
}

.form-qpage {
    border: none;
    height: 100%;
    max-height: none;
    max-width: 1200px;
}

.form-qpage .form-qpage-content, .form-qpage .form-qpage-content > div {
    height:100%;
}


.vjs-text-track-display > div {
    margin-bottom: 80px!important;
}

.form-video-player.paused .vjs-text-track-display {
    opacity:0;
}

.vjs-text-track-display div,
.media-controls-container div div {
    font-size:0.5em;
    line-height: 0.8em!important;
    font-family: 'Poppins', sans-serif!important;
    font-weight:300;
}



@media screen and (max-width: 1100px) {

    .quiz-form-logo {
        position: fixed;
        right: 20px;
        top: 30px;
        z-index: 999;
        height: 30px;
        width: 30px;
    }

    .quiz-form-question-content-inner {
        height: 100%;
        /* display: flex; */
        /* align-items: flex-end; */
        /* flex-wrap: wrap; */
    }

    .quiz-container > .quiz-outer > .quiz-inner{
        position: relative;
        display: block;
        width: 100%;
        height: 100vh; /* Fallback for browsers that do not support Custom Properties */
        height: calc(var(--vh, 1vh) * 100);
        overflow-y: auto;
    }

    .quiz-illustration-container,
    .quiz-form-container,
    .form-results-container,
    .quiz-form-container:after{
        position:
                absolute;
        top:0;
        left:0;
        right: 0;
        bottom: 0;
        width: 100%;
    }

    .quiz-form-help-exit {
        top: 80px;
        right:15px;
    }

    .quiz-illustration-container
    {
        z-index:2;
        position: fixed;
    }

    .quiz-form-container {
        z-index:3;
    }

    .quiz-form-fields {
        height: 100%;
    }

    .quiz-form-container.waiting-videoend {
        pointer-events: none;
    }

    .quiz-form-container:after{
        content:
                "";
        display:
                block;
        z-index:0;
        opacity:1;
        position: fixed;
        background: #000000c4;
        -webkit-transition: opacity 500ms ease;
        -moz-transition: opacity 500ms ease;
        -ms-transition: opacity 500ms ease;
        -o-transition: opacity 500ms ease;
        transition: opacity 500ms ease;
    }

    .quiz-form-container.waiting-videoend:after {
        opacity:0;
        -webkit-transition: opacity 0ms ease;
        -moz-transition: opacity 0ms ease;
        -ms-transition: opacity 0ms ease;
        -o-transition: opacity 0ms ease;
        transition: opacity 0ms ease;
    }

    .quiz-form-container-inner {
        z-index: 2;
        width: calc(100% - 60px);
    }

    .form-results-container {
        z-index:4;
    }

    .quiz-form-container.waiting-videoend .quiz-form-container-inner {
        opacity:0;
        pointer-events: none;
        -webkit-transition: opacity 0ms ease;
        -moz-transition: opacity 0ms ease;
        -ms-transition: opacity 0ms ease;
        -o-transition: opacity 0ms ease;
        transition: opacity 0ms ease;
    }

    .quiz-form-nav, .quiz-inner.displaying-qpage .quiz-form-nav {
        left: 20px;
        right: 20px;
    }

    .quiz-form-nav.video-playing {
        display:none;
    }

    .form-video-replay
    {
        display:none;
    }

    .quiz-form-replay {
        display: flex;
    }

    .quiz-form-title {
        font-size: 18px;
    }
    .quiz-form-field {
        font-size: 16px;
    }

    .form-video-pass {
        display:flex;
    }

    .vjs-text-track-display div {
        font-size:0.8em;
        line-height: 0.9em!important;
    }

    video::-webkit-media-text-track-display {
        font-size: 120%;
        top:100%;
    }


}


body.qpage-template-default.single.single-qpage .quiz-result-container-inner {
    opacity: 1;
    display: block;
}