/*иконка в кнопке .q-button*/
:root {
        
        /*Настройки иконок*/
        --IconWidth: 25px; /*Ширина иконки*/
        --IconHeight: 25px; /*Высота иконки*/
        --MarginRight: 10px; /*Отступ справа от иконки до текста (иконка находится слева)*/
        --MarginLeft: 10px; /*Отступ слева от иконки до текста (иконка находится справа)*/
        --IconDuration: 0.3s; /*Продолжительность анимации иконки, при наведении на кнопку (выставить значение такое же, что и у самой кнопки, при наведении на неё)*/
        --IconTransformRight: 15px; /*Сдвиг иконки вправо, при наведении (иконка находится справа)*/
        --IconTransformLeft: 0px; /*Сдвиг иконки вправо, при наведении (иконка находится слева)*/
}

body{
    background: linear-gradient(135deg, #0086C2 0%, #006FA4 100%);
    min-height: 100vh;
}

/*не трогаем*/
.button-icon-left .tn-atom {
    transition-duration: var(--IconDuration);
}

.button-icon-right .tn-atom {
    transition-duration: var(--IconDuration);
}
/*.button-icon-left .tn-atom:before {
    content: '';
    width: var(--IconWidth);
    height: var(--IconHeight);
    margin-right: var(--MarginRight);
    display: inline-block;
    background-size: cover;
    background-repeat: no-repeat;
    vertical-align: middle;
    position: relative;
    transition-duration: var(--IconDuration);
}*/

.button-icon-right .tn-atom:after {
    content: '';
    width: var(--IconWidth);
    height: var(--IconHeight);
    margin-left: var(--MarginLeft);
    display: inline-block;
    background-size: cover;
    background-repeat: no-repeat;
    vertical-align: middle;
    position: relative;
    transition-duration: var(--IconDuration);
}



/*Иконка в пасивном состоянии*/
.q-button .tn-atom:after {
    left: 0;
    transition-duration: var(--IconDuration);
    background-image: url(https://static.tildacdn.com/tild6366-3666-4463-a237-633137376439/Frame_59.svg);
}
/*Иконка в активном состоянии*/
.q-button .tn-atom:hover:after {
    transition-duration: var(--IconDuration);
    left: var(--IconTransformRight);
    background-image: url(https://static.tildacdn.com/tild6366-3666-4463-a237-633137376439/Frame_59.svg);
}


/*Иконка в пасивном состоянии*/
.a-button .tn-atom:after {
    left: 0;
    transition-duration: var(--IconDuration);
    background-image: url(https://static.tildacdn.com/tild3961-6433-4663-a665-333436616565/Frame_69.svg);
}
/*Иконка в активном состоянии*/
.a-button .tn-atom:hover:after {
    transition-duration: var(--IconDuration);
    left: var(--IconTransformRight);
    background-image: url(https://static.tildacdn.com/tild3961-6433-4663-a665-333436616565/Frame_69.svg);
}

.button-start,
.q-button,
.a-button{
    cursor: pointer;
}

.uc-correct-answer,
.uc-wrong-answer{
    display: none;
}
.t-checkbox__control{
    display: flex;
    align-items: center;
}
.t-checkbox__control span{
    display: block;
    color: #222222;
    font-size: 18px;
    font-family: "Onest", Arial, sans-serif;
    font-weight: 400;
    user-select: none;
}
.t-checkbox__indicator{
    display: block;
    width: 32px;
    height: 32px;
    margin-right: 24px;
    border: 3px solid #5091d4;
    opacity: 1;
    flex-shrink: 0;
}
.t-checkboxes__wrapper .t-checkbox__control{
    margin: 32px 0;
}
.t-checkboxes__wrapper .t-checkbox__control:first-child{
    margin-top: 7px;
}
.t-checkbox__indicator:after{
    content: '';
    position: absolute;
    display: none;
    left: 3px;
    top: -5px;
    width: 31px;
    height: 26px;
    border: initial;
    border-width: initial;
    transform: initial;
    background: url(https://static.tildacdn.com/tild6563-3333-4131-a632-396431653963/Vector_1.svg) no-repeat center;
    background-size: 100%;
}

@media(max-width: 767px){
    .t-checkbox__indicator{
        width: 22px;
        height: 23px;
    }
    .t-checkbox__control span{
        font-size: 16px;
        line-height: 23px;
    }
    .t-checkbox__indicator:after{
        left: 1px;
        top: -4px;
        width: 22px;
        height: 17px;
    }
    .t-checkboxes__wrapper .t-checkbox__control{
        margin: 29px 0;
    }
}