:root {
    
    /* Font */
    --font-family: 'Noto Sans', sans-serif;

    /* Logo */
    /* --logo-url: url(/custom/logo/eon.png); */
    --logo-url: url(/custom/logo/eon.png);

    /* Colors */
    --brand-select: #EA1B0A;
    --brand-progress: #EA1B0A;
    --brand-question: #000000;
    --brand-button: #EA1B0A;
    /* --bg-color: #FCFBFA; */
    --bg-color: #f0ebe5;
    
    /* Option box */
    --option-shadow: 0 5px 10px 0 rgba(0, 0, 0, .08);
    --option-border: none;

    --radius-option: 6px;
    --radius-nav-button: 100px;
    --radius-input: 10px;
    --radius-circle: 100px;

    /* Number box */
    --number-shadow: 0 5px 10px 0 rgba(0, 0, 0, .08);
    --number-border: 0;
    --number-radius: 6px;

    /* Form inputs */
    --input-border: none;
    --input-radius: 6px;
    --input-shadow: 0 5px 10px 0 rgba(0, 0, 0, .08);
    --input-outline: var(--brand-select);
}

.header__logo {
    grid-column: 1/-1;
}
.header {
    position: relative;
}
/* .header::after {
    content: '';
    position: absolute;
    bottom: -5px;
    width: 100%;
    height: 10px;
    background: rgb(68,176,188);
    background: linear-gradient(90deg, rgba(234,66,52,1) 0%, rgba(234,66,52,1) 10%, rgba(228,226,45,1) 10%, rgba(228,226,45,1) 20%, rgba(68,176,188,1) 20%, rgba(68,176,188,1) 100%);
} */
.header__language {
    grid-column: 1/2;
    grid-row: 1;
    padding: 0;
    justify-content: center;
}
.question__main {
    /*text-align: left;*/
}
.question__secondary {
    /*text-align: left;*/
}
.navigation__next {
    border: 2px solid var(--brand-button);
    color: var(--brand-button);
    background-color: #fff;
    transition: .2s ease;
}
.navigation__next:hover {
    background-color: var(--brand-button);
    color: #fff;
}

/* person */

.person {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.person__image {
    width: 320px;
    height: 320px;
    object-fit: cover;
    border-radius: 100%;
    margin: 15px 0;
    box-shadow: 0 1px 7px rgba(0, 0, 0, .1);
}
.person__name, .person__position {
    font-weight: 400;
    font-size: 16px;
    color: #1b1b1b;
}
.person__name {
    font-size: 20px;
    color: #1b1b1b;
    font-weight: 500;
}

/* Numbers */
/*.numbers__number {
    padding-top: 10px;
    width: 100%;
    display: flex;
    justify-content: center;
}
.numbers__label {
    background: none;
    padding: 0;
    border-radius: 100px;
    width: 26px;
    height: 26px;
    border: 1px solid red;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    font-size: 14px;
    font-weight: bold;
    position: relative;
}
.numbers__label::before {
    content: '';
    position: absolute;
    height: 70px;
    width: 70px;
    top: -80px;
    left: -22px;
    right: 0;
    display: block;
    background: red;
    border-radius: 100px;    
    background-size: contain;
    background-repeat: no-repeat;
}
.numbers__number:nth-of-type(1) .numbers__label, .numbers__number:nth-of-type(2) .numbers__label {
    color: #a5170d;
    border-color: #a5170d;
}
.numbers__number:nth-of-type(3) .numbers__label, 
.numbers__number:nth-of-type(4) .numbers__label, 
.numbers__number:nth-of-type(5) .numbers__label, 
.numbers__number:nth-of-type(6) .numbers__label, 
.numbers__number:nth-of-type(7) .numbers__label {
    color: #ff4227;
    border-color: #ff4227;
}
.numbers__number:nth-of-type(8) .numbers__label, 
.numbers__number:nth-of-type(9) .numbers__label {
    color: #e5df3f;
    border-color: #e5df3f;
}
.numbers__number:nth-of-type(10) .numbers__label, 
.numbers__number:nth-of-type(11) .numbers__label {
    color: #56cfdc;
    border-color: #56cfdc;
}
.numbers__number:nth-of-type(1) .numbers__label::before {
    background-image: url(/custom/svg/icon-0.svg);
}
.numbers__number:nth-of-type(2) .numbers__label::before {
    background-image: url(/custom/svg/icon-1.svg);
}
.numbers__number:nth-of-type(3) .numbers__label::before {
    background-image: url(/custom/svg/icon-2.svg);
}
.numbers__number:nth-of-type(4) .numbers__label::before {
    background-image: url(/custom/svg/icon-3.svg);
}
.numbers__number:nth-of-type(5) .numbers__label::before {
    background-image: url(/custom/svg/icon-4.svg);
}
.numbers__number:nth-of-type(6) .numbers__label::before {
    background-image: url(/custom/svg/icon-5.svg);
}
.numbers__number:nth-of-type(7) .numbers__label::before {
    background-image: url(/custom/svg/icon-6.svg);
}
.numbers__number:nth-of-type(8) .numbers__label::before {
    background-image: url(/custom/svg/icon-7.svg);
}
.numbers__number:nth-of-type(9) .numbers__label::before {
    background-image: url(/custom/svg/icon-8.svg);
}
.numbers__number:nth-of-type(10) .numbers__label::before {
    background-image: url(/custom/svg/icon-9.svg);
}
.numbers__number:nth-of-type(11) .numbers__label::before {
    background-image: url(/custom/svg/icon-10.svg);
}*/


@media screen and (max-width: 760px) {    
    .question-1-Q1 .option,
    .question-3-Q1 .option {
        font-size: 14px;
    }
    .numbers__number {
        padding-top: 35px;
    }
    .numbers__label::before {
        content: '';
        position: absolute;
        height: 26px;
        width: 26px;
        top: -35px;
        left: 0;
        right: 0;
        display: block;
        /* background: red; */
        border-radius: 100px;
        background-size: contain;
        background-repeat: no-repeat;
    }
}

@media screen and (min-width: 992px) {
    .end-page-banner {
        position: relative;
        top: -200px;
    }
    .end-page-banner--text {
        position: relative;
        top: -200px;
        font-size: 20px;
        color: gray;
    }
}


.numbers__input:checked~.numbers__label {
    /*width: 26px;*/
    position: relative;
    left: unset;
    border-color: #EA1B0A;
    color: white;
}
.header__logo-box {
    background: var(--logo-url) no-repeat center left;
    background-size: contain;
    height: 100%;
    min-height: 40px;
    width: 100%;
}

.question-1-Q1 .row,
.question-3-Q1 .row {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.question-1-Q1 .row .col-12:first-of-type textarea,
.question-3-Q1 .row .col-12:first-of-type textarea {
    width: calc(200% + 30px);
}
.question-1-Q1 .row .col-12:nth-of-type(2) textarea,
.question-3-Q1 .row .col-12:nth-of-type(2) textarea {
    width: calc(200% + 30px);
    position: relative;
    left: calc(-100% - 30px);
}

.question-1-Q1 .row .col-12:first-of-type .option__input:checked~.option__label,
.question-3-Q1 .row .col-12:first-of-type .option__input:checked~.option__label {
    --brand-select: #0093f5;
}

.question-1-Q3 .row {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.question-1-Q3 .row .col-12:first-of-type .option__input:checked~.option__label {
    --brand-select: #0093f5;
}

.numbers__note:first-of-type {
    color: var(--brand-select);
}
.numbers__note:last-of-type {
    color: #0093f5;
}


.error {
    border-bottom-color: #EA1B0A;
    color: #EA1B0A;
}

.error__text {
    color: #EA1B0A;
}