@mixin size($point) {
    @if $point==xs {
        @media (max-width: 576px) {
            @content ;
        }
    }
    @else if $point==sm {
        @media (max-width: 768px) {
            @content ;
        }
    }
    @else if $point==md {
        @media (max-width: 991px) {
            @content ;
        }
    }
    @else if $point==lg {
        @media (max-width: 1200px) {
            @content ;
        }
    }
}

@mixin scrollbar {
    &::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
        background-color: #F5F5F5;
    }
    &::-webkit-scrollbar {
        width: 6px;
        background-color: #F5F5F5;
    }
    &::-webkit-scrollbar-thumb {
        background-color: #000000;
    }
}

@mixin reset {
    padding: 0;
    margin: 0;
    list-style: none;
}

@mixin center {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

@mixin center-2 {
    transform: translateY(-50%) rotate(180deg);
}

@mixin overflow {
    width: 100%;
    -webkit-overflow-scrolling: touch !important;
    min-height: .01%;
    overflow-x: auto;
    overflow-y: hidden;
}

@mixin icon {
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-color: transparent;
}

@mixin after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

@mixin gallery {
    position: relative;
    padding-bottom: 100%;
    height: 0;
    width: 100%;
    img {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        object-fit: cover;
        height: 100%;
        width: 100%;
    }
}

@mixin resize {
    position: relative;
    img {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        object-fit: cover;
        height: 100%;
        width: 100%;
    }
}

@mixin w-width {
    position: relative;
    width: 100vw;
    left: 50%;
    transform: translate(-50%);
}

@mixin img16 {
    position: relative;
    padding-bottom: 56.2%;
    width: 100%;
    height: 0;
    img {
        position: absolute;
        object-fit: cover;
        width: 100%;
        height: 100%;
    }
}

@mixin img100 {
    display: block;
    width: 100%;
    height: auto;
}

@mixin video {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 0;
    }
}
#calcContainerForm {
    .f-30 {
        font-size: 25px;
        line-height: 100%;
    }
    .pop-blue {
        background: #EDF1F5;
        font-family: 'NTSomic-Regular';
        position: relative;
        padding: 18px 24px;
        width: 100%;
        max-width: 790px;

        .row {
            --bs-gutter-x: 16px;
        }

        .carousel__button.is-close {
            background-color: #BE182E;
            width: 50px;
            background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.311086 0.311307C0.510334 0.112119 0.780536 0.000221592 1.06227 0.000221592C1.34401 0.000221592 1.61421 0.112119 1.81346 0.311307L8.49977 6.99762L15.1861 0.311307C15.2841 0.209828 15.4013 0.128884 15.531 0.0731995C15.6606 0.0175149 15.8 -0.0117955 15.9411 -0.0130214C16.0822 -0.0142473 16.2221 0.0126357 16.3527 0.0660592C16.4832 0.119483 16.6019 0.198377 16.7016 0.298138C16.8014 0.397899 16.8803 0.516529 16.9337 0.647106C16.9871 0.777683 17.014 0.917593 17.0128 1.05867C17.0116 1.19975 16.9823 1.33917 16.9266 1.4688C16.8709 1.59843 16.7899 1.71567 16.6885 1.81368L10.0021 8.49999L16.6885 15.1863C16.882 15.3867 16.9891 15.6551 16.9867 15.9337C16.9843 16.2123 16.8725 16.4787 16.6755 16.6757C16.4785 16.8727 16.212 16.9845 15.9334 16.9869C15.6549 16.9893 15.3865 16.8822 15.1861 16.6887L8.49977 10.0024L1.81346 16.6887C1.61307 16.8822 1.34468 16.9893 1.0661 16.9869C0.787513 16.9845 0.521024 16.8727 0.324028 16.6757C0.127032 16.4787 0.0152903 16.2123 0.0128694 15.9337C0.0104486 15.6551 0.117543 15.3867 0.311086 15.1863L6.9974 8.49999L0.311086 1.81368C0.111898 1.61443 0 1.34423 0 1.06249C0 0.780758 0.111898 0.510555 0.311086 0.311307Z' fill='white'/%3E%3C/svg%3E%0A");
            background-position: 50% 50%;
            background-repeat: no-repeat;
            height: 50px;
            border-radius: 0;
            right: 0;
            top: 0;

            svg {
                display: none;
            }
        }
    }

    .pop-trans {
        font-family: 'NTSomic-Regular';
        position: relative;
        width: 100%;
        max-width: 600px;
        padding: 0;
        background: #EDF1F5;

        .request-content {
            padding: 0;
            max-width: 100% !important;
        }

        .request-item {
            padding: 78px 50px 36px 50px;

            &.good {
                background: none;
            }

            &.yello {
                background: none;
                padding-left: 24px;
                padding-right: 24px;
            }
        }

        .carousel__button.is-close {
            background-color: #BE182E;
            width: 50px;
            background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.311086 0.311307C0.510334 0.112119 0.780536 0.000221592 1.06227 0.000221592C1.34401 0.000221592 1.61421 0.112119 1.81346 0.311307L8.49977 6.99762L15.1861 0.311307C15.2841 0.209828 15.4013 0.128884 15.531 0.0731995C15.6606 0.0175149 15.8 -0.0117955 15.9411 -0.0130214C16.0822 -0.0142473 16.2221 0.0126357 16.3527 0.0660592C16.4832 0.119483 16.6019 0.198377 16.7016 0.298138C16.8014 0.397899 16.8803 0.516529 16.9337 0.647106C16.9871 0.777683 17.014 0.917593 17.0128 1.05867C17.0116 1.19975 16.9823 1.33917 16.9266 1.4688C16.8709 1.59843 16.7899 1.71567 16.6885 1.81368L10.0021 8.49999L16.6885 15.1863C16.882 15.3867 16.9891 15.6551 16.9867 15.9337C16.9843 16.2123 16.8725 16.4787 16.6755 16.6757C16.4785 16.8727 16.212 16.9845 15.9334 16.9869C15.6549 16.9893 15.3865 16.8822 15.1861 16.6887L8.49977 10.0024L1.81346 16.6887C1.61307 16.8822 1.34468 16.9893 1.0661 16.9869C0.787513 16.9845 0.521024 16.8727 0.324028 16.6757C0.127032 16.4787 0.0152903 16.2123 0.0128694 15.9337C0.0104486 15.6551 0.117543 15.3867 0.311086 15.1863L6.9974 8.49999L0.311086 1.81368C0.111898 1.61443 0 1.34423 0 1.06249C0 0.780758 0.111898 0.510555 0.311086 0.311307Z' fill='white'/%3E%3C/svg%3E%0A");
            background-position: 50% 50%;
            background-repeat: no-repeat;
            height: 50px;
            border-radius: 0;
            right: 0;
            top: 0;

            svg {
                display: none;
            }
        }
    }

    .btn-back {
    / / min-width: 107 px;
    }


    /* Скрываем все шаги по умолчанию */

    .steps-1,
    .steps-2,
    .steps-3,
    .steps-4 {
        display: none;
    }


    /* Активный шаг */

    .steps-active {
        display: block;
    }

    .pop-title {
        font-family: 'NTSomic-Medium';
        font-weight: 400;
        font-style: Medium;
        font-size: 30px;
        leading-trim: NONE;
        line-height: 100%;
        letter-spacing: 0%;
        color: #252525;
        margin: 0 0 48px 0;
        @include size(sm) {
            font-size: 25px;
            margin-bottom: 25px;
        }
    }

    .form-title-small {
        font-weight: 400;
        font-size: 14px;
        leading-trim: NONE;
        line-height: 100%;
        color: #252525;
        letter-spacing: 0%;
        display: block;
        margin-bottom: 10px;

        &.mb0 {
            @include size(sm) {
                margin-bottom: 0;
            }
        }
    }

    .steps {
        display: flex;
        align-items: center;
        gap: 40px;
        margin: 0 auto;
        min-height: 50px;
        justify-content: center;
    }

    .step {
        display: flex;
        align-items: center;
        position: relative;
    }

    .step-circle {
        width: 16px;
        height: 16px;
        border-radius: 50%;
        border: 2px solid #929DA8;
        background: #EDF1F5;
    }

    .step.active .step-circle {
        background: #252525;
        border-color: #252525;
    }

    .step-line {
        position: absolute;
        left: 16px;
        width: 40px;
        height: 2px;
        background: #929DA8;
    }

    .step.active .step-line {
        background: #252525;
    }

    .btn-red {
        height: 50px;
        display: inline-flex;
        align-items: center;

        .title {
            font-family: 'NTSomic-Medium';
        }
    }

    .btn-white {
        height: 50px;
        display: inline-flex;
        align-items: center;
        color: #BE182E;

        .title {
            font-family: 'NTSomic-Medium';
        }

        &:hover {
            svg path {
                fill: #fff;
            }
            color: white;
        }
    }

    .icon-center {
        display: inline-flex;
        flex-flow: row wrap;
        align-items: center;
        justify-content: center;
        width: 100%;
        gap: 2px 6px;
        height: min-content;

        svg {
            display: block;
        }

        .text {
            width: 100%;
            font-weight: 400;
            font-size: 10px;
            line-height: 100%;
            letter-spacing: 0%;
        }
    }

    .pay-row {
        gap: 12px 0;
        margin-bottom: 32px;

        &.mb0 {
            margin-bottom: 0;
        }
    }

    .row-order {
        margin-bottom: 32px;
        gap: 20px 0;
    }

    .row-order-page {
        margin-bottom: 20px;
        gap: 20px 0;
    }

    .g-6 {
        gap: 0 6px;
    }

    .bolder {
        font-family: 'NTSomic-Medium';
        @include size(xs) {
            white-space: nowrap;
        }
    }

    .form-row {
        margin-bottom: 33px;
        gap: 12px 0;
    }

    .form-bron {
        margin-bottom: 32px;

        &.mb16 {
            margin-bottom: 16px;
        }

        @include size(sm) {
            gap: 16px 0;
            margin-bottom: 16px;
            &.form-bron-32 {
                margin-bottom: 32px;
            }
        }
    }

    .form-bron-row {
    / / margin-bottom: 32 px;

        &.mb16 {
            margin-bottom: 16px;
        }

        @include size(sm) {
            gap: 16px 0;
            margin-bottom: 16px;
            &.form-bron-32 {
                margin-bottom: 32px;
            }
        }
    }

    .form-bron-section {
        margin-bottom: 32px;

        &.mb16 {
            margin-bottom: 16px;
        }

        @include size(lg) {
            gap: 16px 0;
            margin-bottom: 16px;
            &.form-bron-32 {
                margin-bottom: 32px;
            }

            .form-title-small {
                &.mb0 {
                    margin-bottom: 0;
                }
            }
        }
    }

    .info-price {
        padding-left: 18px+10px;
        color: #252525;
        font-weight: 400;
        font-style: Regular;
        font-size: 14px;
        leading-trim: NONE;
        line-height: 100%;
        letter-spacing: 0%;
    }

    .btn-gray {
        border: 1px solid #929DA8;
        color: #929DA8;
        transition: 0.5s all;
        display: flex;
        align-items: center;
        min-height: 53px;
        justify-content: center;
        gap: 0 10px;

        &:hover {
            background: #fff;
            border: 1px solid #BE182E;
        }
    }

    .step-title {
        font-family: 'NTSomic-Medium';
        font-weight: 500;
        font-style: Medium;
        font-size: 16px;
        leading-trim: NONE;
        line-height: 100%;
        letter-spacing: 0%;
        color: #000;
        margin-bottom: 20px;
    }

    .pay-block {
    }

    .order-block {
        display: flex;
        flex-flow: row;

        .photo {
            width: 100%;
            max-width: 167px;

            img {
                max-width: 100%;
                height: auto;
            }
        }

        .info {
            margin-left: 10px;
            display: flex;
            flex-direction: column;

            .title {
                color: #252525;
                font-weight: 400;
                font-style: Medium;
                font-size: 14px;
                leading-trim: NONE;
                line-height: 100%;
                letter-spacing: 0%;
                margin: 0 0 8px 0;
            }

            .sub-title {
                font-weight: 400;
                font-style: Regular;
                font-size: 14px;
                leading-trim: NONE;
                line-height: 100%;
                letter-spacing: 0%;
                color: #929DA8;
                margin-bottom: 10px;
            }
        }

        .price {
            font-weight: 400;
            font-style: Regular;
            font-size: 24px;
            leading-trim: NONE;
            line-height: 100%;
            letter-spacing: 0%;
            color: #BE182E;
            margin-top: auto;
        }
    }

    .info-route {
        .title {
            font-weight: 400;
            font-style: Regular;
            font-size: 14px;
            leading-trim: NONE;
            line-height: 100%;
            letter-spacing: 0%;
            margin: 0 0 8px 0;
            color: #929DA8;
        }

        .route-item {
            display: flex;
            flex-flow: row;
            align-items: center;
            margin-bottom: 8px;

            &:last-child {
                margin-bottom: 0;
            }

            .text {
                font-weight: 400;
                font-style: Regular;
                font-size: 14px;
                leading-trim: NONE;
                line-height: 100%;
                letter-spacing: 0%;
                color: #252525;
            }

            .divider {
                margin: 0 10px;
                background: url("data:image/svg+xml,%3Csvg width='21' height='8' viewBox='0 0 21 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.5 3.18201C0.223858 3.18201 0 3.40586 0 3.68201C0 3.95815 0.223858 4.18201 0.5 4.18201V3.68201V3.18201ZM20.8536 4.03556C21.0488 3.8403 21.0488 3.52372 20.8536 3.32845L17.6716 0.146473C17.4763 -0.0487893 17.1597 -0.0487893 16.9645 0.146473C16.7692 0.341735 16.7692 0.658318 16.9645 0.85358L19.7929 3.68201L16.9645 6.51043C16.7692 6.7057 16.7692 7.02228 16.9645 7.21754C17.1597 7.4128 17.4763 7.4128 17.6716 7.21754L20.8536 4.03556ZM0.5 3.68201V4.18201H20.5V3.68201V3.18201H0.5V3.68201Z' fill='%23929DA8'/%3E%3C/svg%3E%0A") 50% 50% no-repeat;
                width: 21px;
                height: 8px;
                display: block;
            }

            .circle {
                width: 2px;
                height: 2px;
                display: block;
                background: #929DA8;
                margin: 0 8px;
            }
        }
    }

    .row-form-blue {
        --bs-gutter-x: 40px;
        --bs-gutter-y: 0;
        margin-top: 50px;
    }

    .calc-disc {
        font-weight: 400;
        font-style: Regular;
        font-size: 20px;
        leading-trim: NONE;
        line-height: 100%;
        letter-spacing: 0%;
    }


    .order-block-column-row {
        flex: 1;
        @include size(md) {
            width: 100%;
            .pay-block {
                margin-top: 30px;
            }
        }
    }

    .order-block-column {
        width: 383px;
        flex-shrink: 0;
        @include size(md) {
            width: 100%;
        }
        flex-direction: column;
        display: flex;
        height: 100%;

        &.height-auto {
            height: auto;
        }

        .name {
            font-style: Medium;
            font-size: 20px;
            font-family: 'NTSomic-Medium';
            leading-trim: NONE;
            line-height: 100%;
            margin: 0 0 8px 0;
            letter-spacing: 0%;
        }

        .top-title {
            display: flex;
            flex-flow: row wrap;
            align-items: center;
            gap: 15px;
            margin-bottom: 10px;

            span {
                font-style: Medium;
                font-size: 20px;
                leading-trim: NONE;
                line-height: 100%;
                letter-spacing: 0%;
                font-family: 'NTSomic-Medium';
            }

            .title {
                margin-bottom: 0;
                top: 2px;
                position: relative;
            }
        }

        .photo-mid {
            width: 100%;
            max-width: 100%;
            margin-bottom: 25px;

            img {
                display: block;
                width: 100%;
                aspect-ratio: 343 / 198;
                object-fit: cover;
            }
        }

        .info {
            margin-left: 0;
            margin-top: auto;
        }

        .price {
            font-weight: 400;
            font-style: Regular;
            font-size: 24px;
            leading-trim: NONE;
            line-height: 100%;
            letter-spacing: 0%;
            color: #BE182E;
            margin-top: auto;

            span {
                font-family: 'NTSomic-Medium';
                color: #252525;
                font-weight: 400;
                font-style: Medium;
                font-size: 16px;
                line-height: 100%;
                letter-spacing: 0%;
            }
        }
    }

    .checkBlock {
        flex-shrink: 0;
    }

    .checkbox-flex {
        display: flex;
        flex-flow: row;
    }

    .order-info {
        margin-bottom: 33px;
        @include size(sm) {
            margin-bottom: 20px;
        }

        .text {
            font-weight: 400;
            font-style: Regular;
            font-size: 14px;
            leading-trim: NONE;
            line-height: 100%;
            letter-spacing: 0%;
            color: #929DA8;
            margin-top: 8px;
        }

        .number {
            font-weight: 400;
            font-size: 14px;
            leading-trim: NONE;
            line-height: 100%;
            letter-spacing: 0%;
            color: #252525;
            display: flex;
            flex-flow: row wrap;
            gap: 10px 0;

            span {
                font-family: 'NTSomic-Medium';
            }

            .price {
                margin-left: 6px;
                color: #BE182E;
                margin-right: 16px;
                font-family: 'NTSomic-Medium';
            }

            .date-info {
                color: #252525;
                font-weight: 400;
                font-style: Regular;
                font-size: 14px;
                leading-trim: NONE;
                line-height: 100%;
                letter-spacing: 0%;
            }
        }
    }

    .form-flex {
        display: flex;
        flex-direction: column;
        gap: 12px 0;
    }

    .form-group-animate {
        position: relative;

        .form-control {
            height: 54px;
            padding-top: 30px !important;

            &.form-control-textarea {
                height: 186px;
                resize: none;
                @include size(sm) {
                    height: 87px;
                }
            }

            &.form-control-textarea-small {
                height: 104px;
                resize: none;
                @include size(sm) {
                    height: 87px;
                }
            }
        }

        label {
            position: relative;
        }

        span {
            font-weight: 400;
            font-style: Regular;
            font-size: 12px;
            leading-trim: NONE;
            line-height: 100%;
            letter-spacing: 0%;
            position: absolute;
            top: 0px;
            transform: translate(0px, 10px);
            color: #929DA8;
            top: 0px;
            padding-left: 1rem;
            cursor: text;
            transition: all 0.5s ease-in-out;

            i {
                font-style: normal;
                color: #929DA8;
            }
        }

        input.has-value + span,
        input:focus + span,
        textarea.has-value + span,
        textarea:focus + span {
            opacity: 1;
            transform: translate(0px, 10px);
            font-size: 10px;
            cursor: default;
            top: 0px;
        }
    }

    .request-content {
        width: 100%;
        margin-right: auto;
        margin-left: auto;
        max-width: 400px;
        padding: 20px 0;
    }

    .btn-inline-flex {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .req {
        a {
            text-decoration: underline !important;
            cursor: pointer;
        }
    }

    .request-list {
        display: flex;
        gap: 50px 0;
        flex-direction: column;
    }

    .request-item {
        font-size: 14px;
        text-align: center;

        &.good {
            background: #CFFFD8;
        }

        &.yello {
            background: #FFF7CF;

            .request-content {
                max-width: 476px;
            }
        }

        .phone {
            a {
                color: #BE182E;
                font-family: 'NTSomic-Medium';

                &:hover {
                    color: #252525;
                }
            }
        }

        .request-title {
            font-size: 25px;
            leading-trim: NONE;
            line-height: 100%;
            letter-spacing: 0%;
            text-align: center;
            font-family: 'NTSomic-Medium';
            display: flex;
            flex-flow: row wrap;
            justify-content: center;
            align-items: center;
            margin-bottom: 22px;
            color: #0FC530;

            svg {
                margin-right: 10px;
            }

            &.yello {
                color: #E4980B;
            }
        }

        .red {
            color: #BE182E;
        }

        .black {
            color: #252525;
            font-family: 'NTSomic-Medium';
        }

        .gray {
            color: #929DA8;
        }

        .green {
            color: #0FC530;
        }

        .item {
            margin-bottom: 10px;

            &:last-child {
                margin-bottom: 0;
            }
        }

        .button-block {
            margin-top: 22px;

            .row {
                gap: 10px 0;
            }
        }
    }

    .order-hr {
        margin-bottom: 1.5rem;
        background: #929DA8;
        width: 100%;
        height: 1px;
        opacity: 0.1;
    }
}