@layer components-widgets {
    .survey__content {
        width: -moz-fit-content;
        width: fit-content;
        margin: auto
    }

    .survey__buttons {
        display: flex;
        gap: 12px;
        margin-top: 12px;
        padding-inline:20.5px}

    .survey__buttons button {
        width: 100%
    }

    .survey__button-number {
        display: none
    }

    .survey__feedback {
        width: 100%;
        max-width: 616px;
        height: 149px;
        padding: 10px;
        border: none;
        border-radius: 4px;
        background-color: var(--gray);
        margin-block:12px}

    .survey__feedback:hover,.survey__feedback:focus {
        border: none;
        outline: none
    }

    .survey__feedback:focus::-moz-placeholder {
        color: rgba(0,0,0,0)
    }

    .survey__feedback:focus::placeholder {
        color: rgba(0,0,0,0)
    }

    .survey__button-send {
        display: block;
        width: 100%;
        max-width: 324px;
        margin: auto
    }

    .survey__button-no:hover {
        background: var(--tertiary-black)
    }

    .survey_with-number {
        text-align: center
    }

    .survey_with-number .survey__buttons {
        display: flex;
        justify-content: center;
        gap: 12px;
        margin-top: 0;
        padding-inline:0}

    .survey_with-number .survey__buttons button {
        width: 80px;
        height: 80px
    }

    @media screen and (max-width: 1279px) {
        .survey_with-number .survey__buttons button {
            width:64px;
            height: 64px
        }
    }

    @media screen and (max-width: 767px) {
        .survey_with-number .survey__buttons button {
            width:48px;
            height: 48px
        }
    }

    .survey_with-number .survey__button-yes,.survey_with-number .survey__button-no {
        display: none
    }

    .survey_with-number button.survey__button-number {
        display: block;
        color: var(--black);
        border-radius: 50%
    }

    .survey_with-number button.survey__button-number:nth-child(5) {
        background-color: var(--light-red)
    }

    .survey_with-number button.survey__button-number:nth-child(6) {
        background-color: var(--light-orange)
    }

    .survey_with-number button.survey__button-number:nth-child(7) {
        background-color: var(--light-yellow)
    }

    .survey_with-number button.survey__button-number:nth-child(8) {
        background-color: var(--light-green)
    }

    .survey_with-number button.survey__button-number:nth-child(9) {
        background-color: var(--green)
    }
}
.survey__content-hide {
    display:none;
}