/* 
Theme Name: Evial Theme based on Hello Elementor
Theme URI: https://github.com/elementor/hello-theme/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 1.0.1
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

#header.scrolled {
    background: rgba(255,255,255,.6);
    backdrop-filter: brightness(110%) blur(6px);
}

.quiz-block-bar {
    display: flex;
    align-items: center;
}
.quiz-block-bar-percents {
    font-family: "Rubik", Sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 24px;
    width: 60px;
}
.quiz-block-bar-line {
    width: calc(100% - 60px);
    height: 8px;
    background: rgba(233, 233, 243, 1);
    border-radius: 4px;
    position: relative;
}
.quiz-block-bar-line > div {
    height: 8px;
    background: rgba(13, 16, 37, 1);
    border-radius: 4px;
    position: absolute;
    top: 0; left: 0;
}
.quiz-block-question-items {
    padding: 40px 0;
}
.quiz-block-question-item {
    display: none;
}
.quiz-block-question-item-title {
    font-family: "Libre Baskerville", Sans-serif;
    font-size: 45px;
    font-weight: 700;
    line-height: 56px;
    color: rgba(13, 16, 37, 1);
    padding-bottom: 20px;
}
.quiz-block-question-item-text {
    font-family: "Rubik", Sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 24px;
    color: rgba(93, 107, 123, 1);
}
.quiz-block-question-item-fields {
    display: flex;
    flex-wrap: wrap;
    width: calc(100% + 20px);
    margin: 0 -10px;
    padding-top: 30px;
}
.quiz-block-question-item-field-container {
    padding: 10px;
}
.quiz-block-question-item-field {
    font-family: "Libre Baskerville", Sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    padding: 10px 20px;
    border-radius: 22px;
    background: rgba(233, 233, 243, 1);
    cursor: pointer;
}
.quiz-block-question-item-field-container > input:checked + label  {
    background: rgba(255, 215, 173, 1);
}
.quiz-block-question-item-field-container input {
    display: none;
}
.quiz-block-button-container {
    display: flex;
}
.quiz-block-button {
    font-family: "Rubik", Sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 24px;
    color: white;
    background: rgba(13, 16, 37, 1);
    padding: 16px 25px;
    min-width: 240px;
    text-align: center;
    border-radius: 15px;
    cursor: pointer;
}
.quiz-block-button.disable {
    background: rgb(93 93 111);
    cursor: default;
}
#quiz-submit {
    display: none;
}
@media screen and (max-width: 520px) {
    .quiz-block-question-item-title {
        font-size: 32px;
        line-height: 40px;
    }
    .quiz-block-question-item-text {
        font-size: 16px;
        line-height: 20px;
    }
    .quiz-block-button {
        width: 100%;
    }
}

.quiz-overlay-white {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    background: white;
    z-index: 99;
}
.quiz-overlay {
    display: none;
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    background: white;
    z-index: 99;
    justify-content: center;
    align-items: center;
}
.quiz-overlay-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
}
@-webkit-keyframes rotating {
    from {
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes rotating {
    from {
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
.rotating {
    width: 32px;
    height: 32px;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMwIDE2QzMwIDE3LjgzODUgMjkuNjM3OSAxOS42NTkgMjguOTM0MyAyMS4zNTc2QzI4LjIzMDggMjMuMDU2MSAyNy4xOTk1IDI0LjU5OTUgMjUuODk5NSAyNS44OTk1QzI0LjU5OTUgMjcuMTk5NSAyMy4wNTYxIDI4LjIzMDcgMjEuMzU3NiAyOC45MzQzQzE5LjY1OSAyOS42Mzc5IDE3LjgzODUgMzAgMTYgMzBDMTQuMTYxNSAzMCAxMi4zNDEgMjkuNjM3OSAxMC42NDI0IDI4LjkzNDNDOC45NDM4NyAyOC4yMzA3IDcuNDAwNTIgMjcuMTk5NSA2LjEwMDUgMjUuODk5NUM0LjgwMDQ4IDI0LjU5OTUgMy43NjkyNSAyMy4wNTYxIDMuMDY1NjkgMjEuMzU3NkMyLjM2MjEyIDE5LjY1OSAyIDE3LjgzODUgMiAxNkMyIDE0LjE2MTUgMi4zNjIxMiAxMi4zNDEgMy4wNjU2OSAxMC42NDI0QzMuNzY5MjYgOC45NDM4NyA0LjgwMDQ5IDcuNDAwNTIgNi4xMDA1MSA2LjEwMDVDNy40MDA1MyA0LjgwMDQ4IDguOTQzODggMy43NjkyNSAxMC42NDI0IDMuMDY1NjhDMTIuMzQxIDIuMzYyMTIgMTQuMTYxNSAyIDE2IDJDMTcuODM4NSAyIDE5LjY1OSAyLjM2MjEyIDIxLjM1NzYgMy4wNjU2OUMyMy4wNTYxIDMuNzY5MjYgMjQuNTk5NSA0LjgwMDQ5IDI1Ljg5OTUgNi4xMDA1MUMyNy4xOTk1IDcuNDAwNTMgMjguMjMwOCA4Ljk0Mzg4IDI4LjkzNDMgMTAuNjQyNEMyOS42Mzc5IDEyLjM0MSAzMCAxNC4xNjE1IDMwIDE2TDMwIDE2WiIgc3Ryb2tlPSJ1cmwoI3BhaW50MF9saW5lYXJfNDUxXzMpIiBzdHJva2Utd2lkdGg9IjQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLWRhc2hhcnJheT0iMC4xIDgiLz4KPGRlZnM+CjxsaW5lYXJHcmFkaWVudCBpZD0icGFpbnQwX2xpbmVhcl80NTFfMyIgeDE9IjE2IiB5MT0iMiIgeDI9IjE2IiB5Mj0iMzAiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KPHN0b3Agc3RvcC1jb2xvcj0iI0ZGQkI1NiIvPgo8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiNGRkJCNTYiIHN0b3Atb3BhY2l0eT0iMC4yNiIvPgo8L2xpbmVhckdyYWRpZW50Pgo8L2RlZnM+Cjwvc3ZnPgo=");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    -webkit-animation: rotating 2s linear infinite;
    -moz-animation: rotating 2s linear infinite;
    -ms-animation: rotating 2s linear infinite;
    -o-animation: rotating 2s linear infinite;
    animation: rotating 2s linear infinite;
}
.quiz-overlay-text {
    font-family: "Rubik", Sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 22px;
    padding-top: 20px;
    color: rgba(93, 107, 123, 1);
}