.open-popup-quiz-button {
    position: fixed;
    right: 20px;
    bottom: 140px;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px;
    max-width: 320px;
    border: 0;
    -webkit-box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.2);
    box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.2);
    background-color: #fff;
    transition: .3s background-color ease;
    &:hover {
        background-color: #F1F5F8;
    }
    &._hidden {
        display: none;
    }
    svg {
        flex-shrink: 0;
    }
    span {
        font-family: 'Roboto';
        font-weight: 400;
        font-size: 15px;
        line-height: 20px;
        color: #333;
        text-align: left;
    }
}
.close-popup-quiz-button {
    position: absolute;
    right: 0;
    top: 0;
    background-color: transparent;
    border: 0;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;

}
.popup-quiz {
    display: none;
    max-width: 300px;
    width: 100%;
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 20px;
    background-color: #fff;
    -webkit-box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.2);
    box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.2);
    z-index: 1001;

    &._show {
        display: flex;
    }
    .popup-quiz-content {
        width: 100%;
    }
    .popup-quiz-button {
        font-family: 'Roboto Condensed';
        font-weight: 900;
        font-size: 15px;
        line-height: 20px;
        text-align: center;
        text-transform: uppercase;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 15px;
        border: 0;
        color: #333;
        background-color: rgba(241, 245, 248, 1);
        transition: .3s background-color ease;
        &:hover {
            background-color: #E6EDF2;
        }
    }
    .popup-quiz-button--primary {
        background-color: rgba(255, 221, 0, 1);
        &:hover {
            background-color: #fb0;
        }
    }
    .popup-quiz-form-step {
        display: none;
        flex-direction: column;
        gap: 20px;
        font-family: 'Roboto';
        font-size: 15px;
        line-height: 20px;
        &._show {
            display: flex;
        }
        strong {
            font-weight: 700;
        }
        .popup-quiz-form-step__header {
            text-align: left;
        }

    }
    .popup-quiz-form-step-5 {
        gap: 10px;
    }
    .popup-quiz-form-step__error-message {
        font-size: 12px;
        color: red;
        &:empty {
            display: none;
        }
    }
}
.popup-quiz-form-step-1 {
    .popup-quiz-button {
        width: 100%;
    }
    .popup-quiz-form-step__main {
        text-align: left;
    }
}
.popup-quiz-form-step-2, .popup-quiz-form-step-3, .popup-quiz-form-step-4 {
    .popup-quiz-form-step__main {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    label {
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 0;
        color: #333;
        font-weight: 400;
        cursor: pointer;
    }
    input {
        margin: 0;
    }
    .fake-radio {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        border: 2px solid rgba(204, 204, 204, 1);
    }
    .fake-checkbox {
        position: relative;
        width: 20px;
        height: 20px;
        border: 2px solid rgba(204, 204, 204, 1);
    }
    input:checked + .fake-radio {
        border: 7px solid rgba(0, 121, 214, 1);
    }
    input:checked + .fake-checkbox:before {
        content: '';
        display: block;
        width: 20px;
        height: 20px;
        position: absolute;
        top: -2px;
        left: -2px;
        background-color: #3076FE;
        background-position: center;
        background-repeat: no-repeat;
        background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="13" height="11" viewBox="0 0 13 11" fill="none"><path d="M1.5 6.3L4.57692 9.5L11.5 1.5" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    }
    textarea {
        width: 100%;
        height: 100px;
        padding: 10px;
        border: 1px solid #CCCCCC;
        &::placeholder {
            color: #999999;
        }
        &:focus {
            border-color: #66afe9;
            outline: 0;
            -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
        }
    }
    .popup-quiz-form-step__footer {
        display: flex;
        gap: 10px;
        .popup-quiz-button {
            width: 100%;
        }
    }
}
.popup-quiz-form-step-5 {
    .popup-quiz-form-step__header {
        margin-bottom: 10px;
    }
    .popup-quiz-form-step__main {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-bottom: 10px;
    }
    label {
        margin: 0;
    }
    input {
        display: block;
        padding: 10px;
        width: 100%;
        border: 1px solid #CCCCCC;
        font-weight: 400;
        &::placeholder {
            font-weight: 400;
            color: #999999;
        }
        &:focus {
            border-color: #66afe9;
            outline: 0;
            -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
        }
    }
    .popup-quiz-form-step__footer {
        display: flex;
        gap: 10px;
        .popup-quiz-button {
            width: 100%;
        }
    }
    .popup-quiz-form-step__links {
        font-weight: 400;
        font-size: 13px;
        color: gray;
        p {
            margin: 0;
            line-height: 100%;
        }
        p:first-child {
            margin-bottom: 10px;
        }
    }
}
.popup-quiz-form-step-6 {
    .popup-quiz-form-step__before-header {
        display: flex;
        align-items: center;
        gap: 20px;
        svg {
            flex-shrink: 0;
            width: 50px;
            height: 50px;
        }
        div {
            font-weight: 400;
        }
    }
    .popup-quiz-form-step__main {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
}