:root {

    /* Font */
    --font-family: 'Calibri', sans-serif;

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

    /* Colors */
    --brand-select: #ee7f00;
    --brand-progress: #ee7f00;
    --brand-question: #ee7f00;
    --brand-button: #ee7f00;
    --bg-color: #f5f4ee;


    /* 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);
}

textarea {
    border-radius: 8px;
}
textarea:focus {
    outline: 1px solid var(--brand-button);
}

.numbers__notes {
    padding-top: 80px;
}
.numbers__notes span:first-child, .numbers__notes span:last-child {
    position: relative;
}
.numbers__notes span:first-child::before {
    content: '';
    width: 30px;
    height: 30px;
    display: block;
    background: url("/svg/face-sad.svg") no-repeat center center;
    position: absolute;
    left: 50%;
    top: -45px;
    transform: translateX(-50%);
}
.numbers__notes span:last-child::before {
    content: '';
    width: 30px;
    height: 30px;
    display: block;
    background: url("/svg/face-happy.svg") no-repeat center center;
    position: absolute;
    left: 50%;
    top: -45px;
    transform: translateX(-50%);
}

.question-1-Q5 .numbers__notes span:last-child::before {
    background: url("/svg/face-sad.svg") no-repeat center center;
}

.question-1-Q5 .numbers__notes span:first-child::before {
    background: url("/svg/face-happy.svg") no-repeat center center;
}

.question-4-Q2 .numbers__notes span:last-child::before {
    background: url("/svg/face-sad.svg") no-repeat center center;
}

.question-4-Q2 .numbers__notes span:first-child::before {
    background: url("/svg/face-happy.svg") no-repeat center center;
}

.header {
    grid-template-columns: 100%;
}
.header__logo {
    grid-column: 1 / -1;
    max-width: 970px;
    margin-inline: auto;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-decoration: none;
}
.header__logo::after {
    content: 'Na vás záleží';
    display: block;
    font-size: 18px;
    color: var(--brand-select);
    white-space: nowrap;
    font-weight: 700;
}
.header__logo-box {
    background: var(--logo-url) no-repeat left;
    background-size: contain;
}

@media (min-width: 560px) {
    .multiple__row .multiple__heading {
        padding-right: 30px;
    }

    .multiple__row[data-row="hints"] .multiple__notes {
        min-width: 656px;
    }
    
    .numbers__row {
        gap: 16px;
    }
}
@media (max-width: 560px) {
    .numbers__label {
        background: #fff;
        border: 2px solid #dbdbdb;
        border-right: 0;
        cursor: pointer;
        display: block;
        flex: 1;
        font-size: 16px;
        padding: 10px 7px;
        position: relative;
        text-align: center;
        border-radius: 0;
    }
    .numbers__row .numbers__number:last-of-type .numbers__label {
        border-right: 2px solid #dbdbdb;
    }
}




.numbers__number {
    flex: 1;
}