@layer template {
    .region {
        display: flex;
        flex-direction: column;
        padding-top: 4.6875vw;
        padding-bottom: 5.46875vw;
        background: var(--background)
    }

    @media (min-width: 1024px) {
        .region {
            padding-top:40px;
            padding-bottom: 40px
        }
    }

    .region .region__step {
        display: flex;
        flex-direction: row
    }

    .region .region__step--1 {
        padding-top: 4.6875vw
    }

    @media (min-width: 1024px) {
        .region .region__step--1 {
            align-items:center;
            padding-top: 35px
        }
    }

    .region .region__step--1 .region__step-id {
        padding-top: 4.6875vw
    }

    @media (min-width: 1024px) {
        .region .region__step--1 .region__step-id {
            padding-top:0
        }
    }

    .region .region__step--2 {
        padding-top: 4.6875vw
    }

    @media (min-width: 1024px) {
        .region .region__step--2 {
            padding-top:30px
        }
    }

    .region .region__step .region__step-id {
        display: flex;
        flex-shrink: 0;
        padding-right: 4.6875vw
    }

    @media (min-width: 1024px) {
        .region .region__step .region__step-id {
            padding-right:40px
        }
    }

    .region .region__step .region__inner {
        display: flex;
        flex: 1;
        flex-direction: column
    }

    @media (min-width: 1024px) {
        .region .region__step .region__inner {
            flex-direction:row
        }
    }

    .region .region__step .region__inner .button {
        width: 100%;
        margin-top: 3.125vw;
        background: var(--button-background);
        box-shadow: 0 .9375vw 0 0 var(--button-shadow)
    }

    @media (max-width: 1023px) {
        .region .region__step .region__inner .button {
            min-height:12.5vw
        }
    }

    @media (min-width: 1024px) {
        .region .region__step .region__inner .button {
            width:50%;
            max-height: 65px;
            margin-top: 0;
            margin-left: 10px;
            box-shadow: 0 6px 0 0 var(--button-shadow)
        }
    }

    .region .region__step .region__inner .button:hover,.region .region__step .region__inner .button:active {
        box-shadow: 0 0 0 0 var(--button-shadow);
        background: var(--button-background-hover)
    }

    @media (min-width: 1024px) {
        .region .region__step .region__inner .button:hover,.region .region__step .region__inner .button:active {
            box-shadow:0 0 0 0 var(--button-shadow)
        }
    }

    .region .region__step .region__inner .select {
        width: 100%
    }

    @media (min-width: 1024px) {
        .region .region__step .region__inner .select {
            width:50%;
            height: 65px;
            margin-right: 10px
        }
    }

    .region .region__step .region__inner .select .arrow-wrapper path,.region .region__step .region__inner .select .arrow-wrapper polygon {
        fill: var(--select-arrow-color)
    }
}

.region[data-v-f66f4433] {
    --background: var(--dc568e1e);
    --button-background: var(--07844cea);
    --button-background-hover: var(--c94c398c);
    --button-shadow: var(--51e98a8a);
    --select-arrow-color: var(--38816811)
}