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

    @media (min-width: 1024px) {
        .map {
            flex-direction:row;
            padding-top: 40px;
            padding-bottom: 40px
        }
    }

    .map .map__inner {
        display: flex;
        flex-direction: column;
        width: 100%
    }

    @media (min-width: 1024px) {
        .map .map__inner {
            max-width:50%
        }
    }

    .map .map__step {
        display: flex;
        flex-direction: row;
        padding-top: 4.6875vw
    }

    @media (min-width: 1024px) {
        .map .map__step--1 {
            padding-top:35px
        }

        .map .map__step--2 {
            padding-top: 30px
        }
    }

    .map .map__step .map__step-id {
        display: flex;
        flex-shrink: 0;
        padding-right: 4.6875vw
    }

    @media (min-width: 1024px) {
        .map .map__step .map__step-id {
            padding-right:30px
        }
    }

    .map .map__step .map__inner {
        display: flex;
        flex: 1;
        flex-direction: column
    }

    @media (min-width: 1024px) {
        .map .map__step .map__inner {
            flex-direction:row;
            align-items: flex-start
        }
    }

    .map .map__wrapper {
        position: relative;
        width: 100%;
        margin-top: 4.6875vw
    }

    @media (min-width: 1024px) {
        .map .map__wrapper {
            max-width:50%;
            margin-top: 0
        }
    }

    .map .map__wrapper .map__svg {
        display: flex;
        justify-content: center;
        position: relative;
        width: 100%
    }

    @media (min-width: 1024px) {
        .map .map__wrapper .map__svg {
            position:absolute;
            top: -60px;
            width: calc(100% + 80px);
            height: calc(100% + 120px)
        }
    }

    .map .map__wrapper .map__svg>div {
        width: 100%
    }

    .map .map__wrapper .map__svg svg {
        width: 100%;
        height: 100%;
        max-height: 100%
    }

    .map .map__wrapper .map__svg svg .shadow {
        cursor: none;
        pointer-events: none
    }

    .map .map__wrapper .map__svg svg .shadow path {
        fill: #808184
    }

    .map .map__wrapper .map__svg svg .lines {
        cursor: none;
        pointer-events: none
    }

    .map .map__wrapper .map__svg svg .lines path {
        fill: #fff
    }

    .map .map__wrapper .map__svg svg .water path {
        fill: #cfdfe6
    }

    .map .map__wrapper .map__svg svg .dividers path {
        fill: transparent;
        stroke: #d8d8d8
    }

    .map .map__wrapper .map__svg svg .areas path,.map .map__wrapper .map__svg svg .areas polygon {
        cursor: pointer
    }

    .map .map__wrapper .map__svg svg .areas path.st1,.map .map__wrapper .map__svg svg .areas polygon.st1 {
        fill: #d0d2d3
    }

    .map .map__wrapper .map__svg svg .areas path.st2,.map .map__wrapper .map__svg svg .areas polygon.st2 {
        fill: #bbbdbf
    }

    .map .map__wrapper .map__svg svg .areas path.st3,.map .map__wrapper .map__svg svg .areas polygon.st3 {
        fill: #929497
    }

    .map .map__wrapper .map__svg svg .areas path.st4,.map .map__wrapper .map__svg svg .areas polygon.st4 {
        fill: #a6a8ab
    }

    .map .map__wrapper .map__svg svg .areas path.st5,.map .map__wrapper .map__svg svg .areas polygon.st5 {
        fill: #ddd
    }

    .map .map__wrapper .map__svg svg .areas path: hover,.map .map__wrapper .map__svg svg .areas polygon:hover {
        fill:var(--hover-color);
        transition: all .3s ease
    }

    .map .map__wrapper .map__svg svg .areas g: hover path,.map .map__wrapper .map__svg svg .areas g:hover polygon {
        fill:var(--hover-color);
        transition: all .3s ease
    }
}

.map[data-v-e37b461a] {
    --background: var(--e1e886b4);
    --hover-color: var(--2d5363d6)
}