@import url(variables.css);
@import url(normalize.css);
@import url(fonts.css);

* {
    box-sizing: border-box;
}

div, h2, h3, h4, h5, p, section, span {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

html, body {
    width: 100%;
    height: 100%;
}

html {
    font-size: 10px;
    line-height: 1.3;
    -webkit-text-size-adjust: 100%;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-family: 'Inter', sans-serif;
    color: var(--color-black);
}

.glightbox-open {
    height: 100% !important;
}

.goverlay {
    background: rgba(0, 0, 0, .81) !important;
}

body {
    font-size: 0.55vw;
    background: #F9F9F9;
    overflow: hidden;
}

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

/* Scroll */
::-webkit-scrollbar {
    -webkit-appearance: none;
}

::-webkit-scrollbar:vertical {
    width: 8px;
}

::-webkit-scrollbar:horizontal {
    height: 8px;
}

::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background-color: var(--color-gray400);
}

::-webkit-scrollbar-track {
    border-radius: 6px;
    background-color: var(--color-gray200);
}

.app {
    background: url("../../static/images/dots-bg.svg") repeat center, radial-gradient(100% 100% at 50% 0%, #088242 5.16%, #1540EB 59.12%, #100647 100%), linear-gradient(0deg, rgba(0, 0, 0, 0.07), rgba(0, 0, 0, 0.07));
    height: 100%;
    background-size: contain;
}

.--app-inner {
    background: none;
}

/* Content */
.content {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.main {
    height: 100%;
}

.page {
    padding: 16px 24px;
    width: 100%;
    height: calc(100dvh - 69px);
}

.page__container {
    width: 100%;
    height: 100%;
    overflow-y: auto;
}

/* Header */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 1.55vw 2.1vw;
    color: var(--color-white);
}

.--app-inner .header {
    background: url("../../static/images/dots-bg.svg") repeat center, linear-gradient(90deg, #1247BE 0%, #07793D 46.99%, #077741 53.92%, #1247BE 100%);
    border-radius: 0 0 30px 30px;
    z-index: 1005;
}

.header__wrap {
    display: flex;
    flex-direction: column;
    gap: 0.7vw;
}

.logo-list {
    display: flex;
    align-items: center;
    column-gap: 2vw;
    opacity: .7;
}

.header__title {
    color: #FFFCFC;
    font-size: 1.68vw;
    line-height: 1;
    font-weight: 700;
}

.header__subtitle {
    color: rgba(255, 252, 252, 0.7);
    font-size: 1vw;
    font-weight: 500;
}

.--app-inner .header__subtitle {
    display: none;
}

/* Regions */
.region-button {
    position: fixed;
    top: 50%;
    left: 0;
    transform: translate(0, -50%);
    background: url("../../static/images/regions-button-bg.svg") no-repeat;
    background-size: contain;
    /* clip-path: polygon(0 0, 92% 10.5%, 92% 91.5%, 0 100%); */
    clip-path: polygon(0 0, 91.2% 10.5%, 90.5% 91.4%, 0 100%);
    width: 4.4vw;
    height: 31.8vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    user-select: none;
    z-index: 1005;
    cursor: pointer;
}

.--app-inner .region-button {
    background: url("../../static/images/regions-button-bg-blue.svg") no-repeat;
    background-size: contain;
}

.region-button__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #FFF;
    width: 100%;
    padding-right: 0.54vw;
}

.region-button__text {
    font-size: 0.63vw;
    width: 100%;
    white-space: normal;
    text-align: center;
    font-weight: 300;
}

.region-button__letters {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.33vw;
    font-size: 1.05vw;
    font-weight: 600;
    margin-top: 2vw;
}

/* Main map info */
.main-map__info {
    position: fixed;
    top: 3vw;
    right: 2.1vw;
    color: var(--color-white);
    line-height: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1vw;
}

.main-map__info-item {
    display: flex;
    flex-direction: column;
    gap: 0.45vw;
    border: 2px solid var(--color-white);
    border-radius: 8px;
    padding: 0.42vw 0.53vw;
    background: rgba(18, 29, 132, 0.36);
}

.main-map__info-item:first-child {
    padding-right: 2vw;
}

.main-map__info-title {
    font-size: 1.05vw;
    font-weight: 300;
}

.main-map__info-value {
    font-size: 1.2vw;
    font-weight: 600;
}

/* Main map */
.main-map {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    /* justify-content: center; */
    /* padding-left: 4.5vw; */
}

#main-map {
    transition: transform 0.5s ease;
    transform-origin: 0 0;
}

#main-map-container {
    transition: transform 1.2s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: 0 0;
}

#main-map.zoom-in path {
    /* vector-effect: non-scaling-stroke; */
    stroke-width: 3 !important;
}

/* Select region */
#main-map.zoom-in g:not(.active) > path, #main-map.zoom-in g:not(.active) > g > path {
    fill: rgba(41, 65, 140, 0.4);
    stroke-width: 3 !important;
}

g.active path {
    /* filter: drop-shadow(-5px 10px 4px rgba(0,0,0, .5)); */
    fill: #0B2A8A !important;
    fill-opacity: 1 !important;
    stroke-width: 3 !important;
    stroke-opacity: .5 !important;
}

g.active g.region-active,
g.active g.region-active path,
g.active path.region-active {
    stroke: #FFF !important;
    fill-opacity: 1 !important;
    stroke-width: 3 !important;
    stroke-opacity: 1 !important;
    filter: drop-shadow(0px 0px 8px #FFF);
}

/* Map tooltip */

@keyframes pulse-shadow {
    0% {
        box-shadow: 0 0 0 rgba(0,0,0,0);
        opacity: 0;
        transform: scale(0.9);
    }

    50% {
        box-shadow: 0 0 15px rgba(0, 128, 0, 0.5);
        opacity: 1;
        transform: scale(1.05);
    }

    100% {
        box-shadow: 0 0 8px rgba(0, 128, 0, 0.3);
        opacity: 1;
        transform: scale(1);
    }
}

.map-tooltip {
    display: none;
    opacity: 0;
    transform: scale(0.9);
    position: fixed;
    z-index: 100;
    padding: 1.7vw;
    background: rgba(36, 36, 36, 0.7);
    border: 2px solid var(--color-white);
    border-radius: 18px;
    color: var(--color-white);
    font-size: 1.05vw;
    max-width: 18.5vw;
}

.map-tooltip.active {
    animation: pulse-shadow 0.5s forwards ease;
    pointer-events: auto;
}

.map-tooltip__wrap {
}

.map-tooltip__arrow {
    position: absolute;
    left: -3vw;
    /* filter: url(#goo);
  opacity: .55; */
}

.map-tooltip__arrow-wrap {
    /* background-size: contain;
  clip-path: polygon(0 50%, 100% 100%, 100% 0);
  background: rgba(36, 36, 36, 0.7); */
    position: relative;
    height: 2px;
    background: var(--color-white);
    width: 3vw;
}

.map-tooltip__arrow-wrap:after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    height: 0.65vw;
    border-radius: 50%;
    width: 0.65vw;
    background: var(--color-white);
    transform: translate(0, -50%);
}

.map-tooltip__header {
    display: flex;
    font-size: 1.05vw;
    font-weight: 800;
    margin-bottom: 1vw;
    justify-content: flex-end;
    align-items: center;
}

.map-tooltip__logo img {
    margin-right: 1.4vw;
    max-width: 4vw;
}

.--type-district .map-tooltip__logo img {
    display: none;
}

.map-tooltip__title {
    text-transform: uppercase;
    text-align: right;
}

.--type-region .map-tooltip__title {
    text-align: left;
}

.map-tooltip__content {
    text-align: center;
}

.map-tooltip__text {
}

.map-tooltip__description {
}

/* district tooltip info */
.district-info {
    display: none;
    flex-direction: column;
    gap: 0.75vw;
}

.--type-district .district-info {
    display: flex;
}

.district-info__item {
    text-align: right;
}

.district-info__item-title {
    display: flex;
    gap: 0.4vw;
    justify-content: flex-end;
    font-size: 1.05vw;
    margin-bottom: 0.1vw;
}

.district-info__item-title img {
    max-width: 1.695vw;
    width: 100%;
}

.district-info__item-title strong {
    font-weight: 800;
    font-size: 1.25vw;
}

.district-info__item-desc {
    font-size: 0.85vw;
}

/* region tooltip info */
.region-info {
    display: none;
    flex-direction: column;
    gap: 0.75vw;
}

.--type-region .region-info {
    display: flex;
}

.region-info__item {
    text-align: left;
}

.region-info__item-title {
    display: flex;
    gap: 0.3vw;
    justify-content: flex-start;
    text-align: left;
    font-size: 1.05vw;
    margin-bottom: 0.1vw;
}

.region-info__item-title strong {
    font-weight: 800;
    font-size: 1.25vw;
}

.region-info__item-desc {
    font-size: 0.85vw;
}

.region-info__capital {
    font-weight: 700;
}

.map-tooltip__more {
    display: inline-flex;
    background: url(../../static/images/more-button-bg.svg) no-repeat;
    background-size: contain;
    width: 9.5vw;
    height: 2.2vw;
    font-size: 1vw;
    font-weight: 700;
    padding: 0 0.5vw;
    line-height: 1.5vw;
    text-align: center;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    margin: 1.5vw auto 0;
    color: var(--color-white);
    text-decoration: none;
}

.map-tooltip__more:hover, .map-tooltip__more:active {
    outline: none;
    text-decoration: none;
    color: var(--color-white);
}

.map-tooltip__close {
    position: absolute;
    right: -0.8vw;
    bottom: -0.6vw;
    background: url(../../static/images/icons/icon-close.svg) no-repeat;
    background-size: contain;
    width: 1.6vw;
    height: 1.6vw;
}

.map__modal-district-regions {
    display: none;
    position: fixed;
    top: 50%;
    left: 7vw;
    transform: translate(0, -50%);
    color: var(--color-white);
    font-size: 0.95vw;
    width: 28vw;
}

.map__modal-district-name {
    font-size: 1.8vw;
    font-weight: 600;
    margin-bottom: 3vw;
}

.map__modal-district-inner {
}

.map__modal-district-inner > ul {
    list-style-position: inside;
    padding: 0;
    margin: 0;
    column-count: 2;
    column-gap: 30px;
}

.map__modal-region-item {
    line-height: 2.5;
    padding-left: 1.2vw;
    text-indent: -1.2vw;
}

/* All regions modal */
.modal-all-regions {
    display: none;
    position: fixed;
    top: 50%;
    left: 0;
    transform: translate(0, -50%);
    color: var(--color-white);
    font-size: 0.95vw;
    /* width: 80%; */
    height: 70%;
    border: 2px solid #FFFFFF;
    border-left: none;
    border-radius: 0 18px 18px 0;
    z-index: 1005;
}


.--app-inner .modal-all-regions {
    border: none;
    box-shadow: 0 0 15px 0px rgba(0,0,0, .8);
}


.modal-all-regions.active {
    display: flex;
}

.modal-all-regions__close {
    position: absolute;
    right: -0.8vw;
    bottom: -0.6vw;
    background: url(../../static/images/icons/icon-close-blue.svg) no-repeat;
    background-size: contain;
    width: 1.6vw;
    height: 1.6vw;
    cursor: pointer;
}

.modal-all-regions__districts {
    display: flex;
    flex-direction: column;
    gap: 1vw;
    border-right: 2px solid #FFFFFF;
    background: rgba(217, 217, 217, 0.15);
    border-radius: 0 18px 18px 0;
    padding: 1vw 2vw 2vw 1vw;
}

.--app-inner .modal-all-regions__districts {
    background: rgba(5, 17, 45, 0.75);
    border-radius: 0;
}

.modal-all-regions__districts-title {
    font-size: 1.4vw;
    font-weight: 700;
    margin-bottom: 1.5vw;
}

.districts-list__item {
    font-size: 1.2vw;
    font-weight: 500;
    padding: 0.5vw;
    margin-bottom: 0.85vw;
    position: relative;
    cursor: pointer;
}

.districts-list__item::after {
    content: "";
    display: inline-block;
    background: url(../../static/images/icons/icon-text-arrow.svg) no-repeat center;
    background-size: contain;
    height: 0.83vw;
    width: 0.365vw;
    margin-left: 0.85vw;
}

.modal-all-regions__regions {
    background: rgba(31, 30, 30, 0.15);
    border-radius: 0 18px 18px 0;
    /* border: 2px solid #FFFFFF;
  border-radius: 0 18px 18px 0; */
    padding: 1vw 2vw 2vw 3vw;
    /* margin-left: -8px; */
    border-left: none;
}

.--app-inner .modal-all-regions__regions {
    background: rgba(5, 17, 45, 0.75);
}

.modal-all-regions__regions-title {
    font-size: 1.4vw;
    font-weight: 700;
    margin-bottom: 0.7vw;
}

.regions-list {
    display: flex;
    flex-direction: column;
    max-height: 100%;
    flex-wrap: wrap;
    font-size: 0.57vw;
    column-gap: 2vw;
}

.regions-list__group {
    margin-bottom: 0.5vw;
    flex-direction: column;
    display: flex;
    flex-wrap: wrap;
    max-height: 25vw;
}

.regions-list__letter {
    font-size: 1.25vw;
    font-weight: 700;
    margin-bottom: 0.3vw;
}

.regions-list__item {
    padding: 0.2vw 0;
    cursor: pointer;
    text-decoration: none;
    color: currentColor;
}

.regions-list__item:hover {
    outline: none;
    text-decoration: none;
    color: currentColor;
}

.go-first-screen {
    position: fixed;
    bottom: 1.455vw;
    left: 2.1vw;
    z-index: 100;
    color: #fff;
    font-size: 0.85vw;
    display: none;
    gap: 0.5vw;
    align-items: center;
    font-weight: 700;
    cursor: pointer;
    z-index: 1005;
    text-decoration: none;
}

.go-first-screen:hover, .go-first-screen:active {
    text-decoration: none;
    outline: none;
}

.go-first-screen svg {
    color: #3599A1;
}

.--app-inner .go-first-screen {
    position: static;
    display: inline-flex;
    background: rgba(255, 255, 255, 0.81);
    border-radius: 34px;
    padding: 0.63vw 0.8vw;
    color: #060694;
}

.--app-inner .go-first-screen svg {
    color: #0B3BA8;
    max-height: 2.45vw;
    max-width: 4vw;
}

.--app-inner .go-first-screen svg path {
    fill-opacity: 0.85;
}

.go-first-screen.active {
    display: flex;
}

.go-first-screen svg {
    max-height: 122px;
}

.go-first-screen span {
    max-width: 8vw;
    text-align: left;
}

/* Main map bottom */
.main-map__bottom {
    position: fixed;
    bottom: 1.455vw;
    left: 0;
    right: 0;
    max-width: 80%;
    width: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 1005;
}

.back-button {
    position: fixed;
    left: 2.1vw;
    bottom: 1.8vw;
    width: 2.75vw;
    height: 2.2vw;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAyIiBoZWlnaHQ9Ijg1IiB2aWV3Qm94PSIwIDAgMTAyIDg1IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMjguMjAyMSAxSDcyLjY5MDRDNzcuNzU2OCAxIDgyLjM2MiAzLjk0MzgzIDg0LjQ4OTMgOC41NDE5OUw5Ny45Mjc3IDM3LjU4ODlDOTkuNTUzOCA0MS4xMDM2IDk5LjUyNzcgNDUuMTYwNCA5Ny44NTc0IDQ4LjY1NDNMODQuNTQzIDc2LjUwNTlDODIuMzgzMyA4MS4wMjMxIDc3LjgyMTQgODMuODk4NCA3Mi44MTQ1IDgzLjg5ODRIMjguMDgxMUMyMi45OTM0IDgzLjg5ODQgMTguMzczMiA4MC45MzA3IDE2LjI1NzggNzYuMzAzN0wzLjUyNzM0IDQ4LjQ1NjFDMS45ODE0MiA0NS4wNzQzIDEuOTU3NjggNDEuMTkyNCAzLjQ2MTkxIDM3Ljc5MkwxNi4zMTM1IDguNzQwMjNDMTguMzk1MiA0LjAzNDc4IDIzLjA1NjggMS4wMDAxMiAyOC4yMDIxIDFaIiBmaWxsPSIjMEQ3QTlGIiBmaWxsLW9wYWNpdHk9IjAuNSIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIi8+CjxwYXRoIGQ9Ik02OC4yMjk0IDUzLjk5OTlDNjcuOTIwNCA1My45OTk5IDY3LjYzNyA1My44MjM3IDY3LjUxNTUgNTMuNTM0N0M2Ny40MjY1IDUzLjMyNDkgNjUuMTk5NyA0OC4zNDg3IDU2Ljg3NDUgNDcuMzYzMkM1NS4xNDAzIDQ3LjE1MzQgNTMuMDYzNCA0Ny4wNDU5IDUwLjU0MTEgNDcuMDI3VjUzLjIyOTRDNTAuNTQxMSA1My41MTU5IDUwLjM4NiA1My43NzUzIDUwLjEzMDkgNTMuOTEyNUM0OS44NzcyIDU0LjA0NDMgNDkuNTczNiA1NC4wMjU0IDQ5LjMzNzQgNTMuODY4MUwzMy4zNDI4IDQzLjE0MTJDMzMuMTI2OSA0Mi45OTc0IDMzIDQyLjc1NTMgMzMgNDIuNTAxM0MzMyA0Mi4yNDQ0IDMzLjEyNjkgNDIuMDEwNSAzMy4zNDI4IDQxLjg1OTlMNDkuMzQ0MSAzMS4xMzE3QzQ5LjU4MDMgMzAuOTY5IDQ5Ljg4MTMgMzAuOTU4MyA1MC4xMzc3IDMxLjA5MjdDNTAuMzk0IDMxLjIyOTggNTAuNTQ2NSAzMS40ODkzIDUwLjU0NjUgMzEuNzY3N1YzNy41Mzk4QzU0LjAyNTcgMzcuOTkxNiA2OSA0MC42NzI2IDY5IDUzLjIzNjJDNjkgNTMuNjAwNiA2OC43NDIyIDUzLjkxOTIgNjguMzgwNiA1My45OTE4QzY4LjMzMDYgNTMuOTk5OSA2OC4yNzggNTMuOTk5OSA2OC4yMjk0IDUzLjk5OTlaIiBmaWxsPSJ3aGl0ZSIgZmlsbC1vcGFjaXR5PSIwLjciLz4KPC9zdmc+Cg==");
    display: inline-block;
    background-repeat: no-repeat;
    background-size: contain;
    border-radius: 6px;
    z-index: 90;
}


.main-map__buttons {
    display: none;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 9.7vw;
}

.main-map__button:focus-visible {
    box-shadow: none;
    outline: none;
}

.main-map__buttons.active {
    display: flex;
}

/* .main-map__button {
  display: inline-block;
  position: relative;
  padding: 15px 60px 15px 30px;
  color: white;
  font-weight: bold;
  font-size: 1.5rem;
  background: rgba(0, 75, 150, 0.7);
  border: 2px solid white;
  cursor: pointer;
  user-select: none;
  transition: all 0.3s;
  clip-path: polygon(
    20px 0%, 
    100% 0%, 
    100% 100%, 
    20px 100%, 
    0 50%
  );
} */

/* .main-map__buttons-item {
  filter: url(#goo);
}

.main-map__button {
  position: relative;
  clip-path: polygon(5% 0, 95% 0, 100% 50%, 95% 100%, 5% 100%, 0 50%);
  background: #0E4379;
  border: none;
  font-size: 1.05vw;
  font-weight: 700;
  padding: 1.25vw;
  min-width: 10vw;
  color: var(--color-white);
} */


.main-map__button {
    position: relative;
    border: none;
    font-size: 1.05vw;
    font-weight: 700;
    padding: 1.1vw;
    min-width: 11vw;
    color: var(--color-white);
    background: transparent;
    cursor: pointer;
}

.main-map__button-bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: all .2s ease;
    color: #0D7A9F;
}

.main-map__button.--main-map__button-long {
    min-width: 20.75vw;
}

.--button-green .main-map__button-bg {
    color: #0F8436;
}

.--button-blue .main-map__button-bg {
    color: #0D7A9F
}

.--button-light-blue .main-map__button-bg {
    color: #3599A1
}


.main-map__button.active .main-map__button-bg, .main-map__button:hover .main-map__button-bg {
    outline: none;
    user-select: none;
}

.main-map__button-text {
    position: relative;
    z-index: 1;
}

/* Popup modals */
.popup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--color-white);
    font-size: 0.95vw;
    max-width: 80%;
    max-height: 70%;
    min-width: 40%;
    min-height: 20%;
    border: 2px solid #FFFFFF;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 34px;
    padding: 1.8vw;
    flex-direction: column;
    z-index: 1020;
}

.popup.--popup-dark {
    background: rgba(36, 36, 36, 0.6);
}

.popup.--popup-blue {
    background: rgba(11, 59, 168, 0.81);
    border: 2px solid var(--color-white);
}

.popup.open {
    display: block;
}

.popup__content {
    width: 100%;
}

.popup__content-title {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 1vw;
    font-size: 1.25vw;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 1.25vw;
}

.popup__content-title img {
    max-width: 4vw;
}

.popup__close {
    position: absolute;
    right: -0.8vw;
    bottom: -0.6vw;
    background: url(../../static/images/icons/icon-close-blue.svg) no-repeat;
    background-size: contain;
    width: 1.6vw;
    height: 1.6vw;
    cursor: pointer;
}

.popup.--popup-blue .popup__close {
    background: url(../../static/images/icons/icon-close.svg) no-repeat;
    background-size: contain;
}

.map-stats__green-text {
    color: #86EA4C;
    margin-bottom: 0.95vw;
}

.map-stats {
}

.map-stats__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.map-stats__grid-item {
}

.map-stats__grid-item:nth-child(even) {
    border-left: 2px dashed rgba(255, 255, 255, 0.38);
}

.map-stats__grid-item:nth-child(3), .map-stats__grid-item:nth-child(4) {
    border-bottom: none;
}

.map-stats__item {
    display: flex;
    flex-direction: column;
    gap: 0.2vw;
    align-items: center;
    justify-content: center;
    margin: 1vw;
}

.map-stats__grid-item:nth-child(3) .map-stats__item, .map-stats__grid-item:nth-child(4) .map-stats__item {
    border-top: 2px dashed rgba(255, 255, 255, 0.38);
    padding-top: 2vw;
}

.circle-progress__desc {
    font-size: 0.85vw;
    font-weight: 500;
    margin-top: 0.4vw;
}

/* Circles */
.circle-progress {
    max-width: 250px;
    position: relative;
}

.circle-progress .progressbar-text {
    display: flex;
    align-items: center;
    font-size: 2.5vw;
    font-weight: 300;
}

.circle-progress .progress-percent {
    font-size: 1.25vw;
    font-weight: 500;
    padding-left: 0.3vw;
}

.map-numbers {
    display: flex;
    flex-direction: column;
}

.map-numbers__item {
    display: flex;
    flex-direction: row;
    align-items: center;
    border-bottom: 1px solid var(--color-white);
    padding: 0.85vw 0;
    padding-right: 2vw;
}

.map-numbers__item:last-child {
    border-bottom: none;
}

.--map-numbers__item-dashed {
    border-bottom: 2px dashed rgba(255, 255, 255, 0.38);
}

.map-numbers__item-value {
    align-items: center;
    display: flex;
    min-width: 14vw;
    font-size: 1.67vw;
    font-weight: 500;
}

.map-numbers__item-value span {
    font-size: 3.35vw;
    font-weight: 300;
    margin: 0 0.6vw;
}

.map-numbers__item-value.--green-text {
    color: #86EA4C;
    font-weight: 400;
    font-size: 1.25vw;
    letter-spacing: -2px;
}

.map-numbers__item-value.--green-text span {
    font-size: 2.5vw;
    font-weight: 300;
}

.map-numbers__item-desc {
    font-size: 0.85vw;
    line-height: 2;
    white-space: nowrap;
}

.map-numbers__item-desc ul {
}

.map-numbers__item-desc li {
}

.objects-info {
    max-width: 37vw;
}

.objects-slider {
}

.objects-slider .swiper-slide {
}

.objects-slider .swiper-slide img {
    /* max-height: 874px; */
}

.objects-slider__arrows {
    display: flex;
    justify-content: flex-end;
    gap: 1.4vw;
    margin-top: 1.35vw;
}

.objects-slider-arrow {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    gap: 0.4vw;
    font-size: 0.75vw;
}


.objects-slider-arrow.swiper-button-disabled {
    opacity: .5;
}

.objects-slider-arrow:focus-visible {
    outline: none;
    box-shadow: none;
}

.objects-slider-arrow img {
    max-height: 2.5vw;
}

/* About district */
.about-district {
    display: flex;
    flex-direction: column;
    border-top: 2px solid #FFFF;
    padding-top: 0.85vw;
}

.about-district__item {
    display: flex;
    gap: 1.25vw;
    padding-bottom: 0.3vw;
    margin-bottom: 0.3vw;
    border-bottom: 2px dashed rgba(255, 255, 255, 0.38);
}

.about-district__item:last-child {
    border-bottom: none;
}

.--about-district__item-center {
    align-items: center;
}

.about-district__item-title {
    font-size: 0.85vw;
    font-weight: 500;
    align-items: center;
    display: flex;
    gap: 0.5vw;
}

.about-district__item:not(.--about-district__item-center) .about-district__icon {
    margin-top: 0.5vw;
}

.about-district__item-title .text__value {
    font-size: 1.7vw;
    font-weight: 600;
}

.about-district__item-title .text__units {
    font-size: 1.05vw;
    font-weight: 600;
}

.about-district__item-subtitle {
    font-size: 0.65vw;
    text-decoration: underline;
}

.about-district__including {
    font-size: 0.65vw;
    margin-top: 0.4vw;
}

.about-district__including .text__value {
    font-size: 1.05vw;
    font-weight: 500;
}

.about-district__including .text__units {
    font-weight: 600;
}

.about-district__including-item {
    margin-bottom: 0.2vw;
}

/* About agglomeration */
.about-agglomeration {
    display: flex;
    flex-direction: column;
    border-top: 2px solid #FFFF;
    padding-top: 0.85vw;
}

.about-agglomeration__item {
    display: flex;
    gap: 1.25vw;
    padding-bottom: 0.3vw;
    margin-bottom: 0.3vw;
    border-bottom: 2px dashed rgba(255, 255, 255, 0.38);
}

.about-agglomeration__item:last-child {
    border-bottom: none;
}

.--about-district__item-center {
    align-items: center;
}

.about-agglomeration__item-title {
    font-size: 0.85vw;
    font-weight: 500;
    align-items: center;
    display: flex;
    gap: 0.5vw;
}

.about-agglomeration__item:not(.--about-district__item-center) .about-agglomeration__icon {
    margin-top: 0.5vw;
}

.about-agglomeration__item-title .text__value {
    font-size: 1.7vw;
    font-weight: 600;
}

.about-agglomeration__item-title .text__units {
    font-size: 1.05vw;
    font-weight: 600;
}

.about-agglomeration__item-subtitle {
    font-size: 0.65vw;
    text-decoration: underline;
}

.about-agglomeration__including {
    font-size: 0.65vw;
    margin-top: 0.4vw;
}

.about-agglomeration__including .text__value {
    font-size: 1.05vw;
    font-weight: 500;
}

.about-agglomeration__including .text__units {
    font-weight: 600;
}

.about-agglomeration__including-item {
    margin-bottom: 0.2vw;
}


/* Map inner */
#map-inner, .map-inner {
    height: 100%;
}

.inner-map__bottom {
    position: fixed;
    bottom: 1.455vw;
    left: 0;
    right: 0;
    width: 100%;
    padding: 0 1.83vw;
    margin: 0 auto;
    z-index: 1005;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.inner-map__bottom-col {
    display: flex;
    align-items: flex-end;
    width: 100%;
}

.--inner-map__bottom-center {
    justify-content: center;
}

.inner-map__left {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    width: 100%;
}

.inner-map__center {
}

.map-controls {
    display: flex;
    align-items: center;
    gap: 1vw;
    padding-right: 15%;
}

.map-controls__item {
    cursor: pointer;
    border: none;
    outline: none;
    background: none;
    transition: all .2s ease;
}

.map-controls__item:hover, .map-controls__item:active {
    border: none;
    outline: none;
}

/* .map-controls__item:active {
  transform: scale(1.05);
} */

.map-years {
    background: rgba(11, 59, 168, 0.83);
    border-radius: 30px;
    margin-top: 0.4vw;
    color: var(--color-white);
    padding: 0.85vw 1.7vw;
}

.map-years__list {
    display: flex;
    gap: 0.5vw;
    align-items: center;
    justify-content: space-between;
    font-size: 1.25vw;
    margin-bottom: -0.1vw;
}

.map-years__list-item {
    padding-bottom: 0.1vw;
    border-bottom: 2px solid transparent;
    cursor: pointer;
}

.map-years__list-item.active {
    border-bottom: 2px solid var(--color-white);
}

.inner-map__right {
    display: flex;
    justify-content: flex-end;
    width: 100%;
}

.about-region {
    display: inline-flex;
    align-items: center;
    gap: 0.55vw;
    color: #000080;
    background: rgba(255, 255, 255, 0.81);
    border-radius: 20px;
    padding: 1.15vw 2.6vw;
    font-size: 0.85vw;
    font-weight: 700;
}

.about-region {
}


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

.legend {
    display: flex;
    gap: 1.05vw;
    justify-content: center;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 20px;
    padding: 0.6vw 1vw;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 24px;
}

.legend-color {
    display: inline-flex;
    width: 1.55vw;
    border-radius: 20px;
    height: 0.5vw;
}

.legend-text {
    color: #060694;
    font-size: 0.6vw;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
}

.map__region-title {
    position: fixed;
    z-index: 1005;
    right: 0;
    top: 8vw;
    color: var(--color-white);
}

.map__region-title:before {
    content: "";
    position: absolute;
    clip-path: polygon(7% 0%, 100% 0%, 100% 50%, 100% 100%, 7% 100%, 0% 50%);
    background: #0B3BA8;
    width: 100%;
    height: 100%;
    opacity: .81;
}

.map__region-title-container {
    position: relative;
    z-index: 2;
    padding: 0.85vw 1.5vw;
}

.map__region-title-value {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1.05vw;
    font-weight: 600;
    font-size: 1.5vw;
}

.map-info {
    display: none;
    position: fixed;
    right: 0;
    top: 55%;
    z-index: 1010;
    max-width: 45%;
    color: var(--color-white);
    transform: translate(0, -50%);
}

.map-info:before {
    content: "";
    position: absolute;
    background: #0B3BA8;
    width: 100%;
    height: 100%;
    opacity: .81;
    /* clip-path: polygon(0% 8%, 4% 0%, 100% 0%, 100% 100%, 4% 100%, 0% 92%); */
    clip-path: polygon(0% 6%, 5% 0%, 100% 0%, 100% 100%, 5% 100%, 0% 94%);
}

.map-info__content {
    position: relative;
    z-index: 2;
    padding: 1.5vw 2vw 1.5vw 2.5vw;
    max-height: 50vw;
    overflow-y: auto;
}

.map-info__close {
    position: absolute;
    left: 0.4vw;
    bottom: -0.3vw;
    background: url(../../static/images/icons/icon-close.svg) no-repeat;
    background-size: contain;
    width: 1.8vw;
    height: 1.8vw;
    cursor: pointer;
    z-index: 2;
}

.map-info__title {
    font-size: 1.25vw;
    margin-bottom: 0.8vw;
    padding-bottom: 0.575vw;
    border-bottom: 2px solid var(--color-white);
}

.map-info__about {
    margin-bottom: 0.8vw;
    padding-bottom: 0.575vw;
    border-bottom: 2px dashed rgba(255, 255, 255, 0.38);
}

.map-info__columns {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5vw 1.65vw;
}

.map-info__about-item {
    display: flex;
    column-gap: 0.2vw;
    align-items: center;
    font-size: 0.73vw;
}

.map-info__about-label {
    display: flex;
    column-gap: 0.2vw;
    align-items: center;
}

.map-info__about-label img {
}

.map-info__about-label span {
    font-weight: 300;
}

.map-info__about-value {
    font-weight: 700;
}

.map-info__description {
    margin-bottom: 0.8vw;
    padding-bottom: 0.575vw;
    border-bottom: 2px dashed rgba(255, 255, 255, 0.38);
}

.map-info__description-title {
    font-size: 0.73vw;
    font-weight: 500;
    margin-bottom: 0.5vw;
    display: flex;
    align-items: center;
    column-gap: 0.2vw;
}

.map-info__description-title img {
}

.map-info__description-title span {
}

.map-info__description-text {
    font-size: 0.65vw;
    font-weight: 300;
    line-height: 1.6;
    padding-left: 1.8vw;
}

.map-info__media {
}

.map-info__media-title {
    font-size: 0.75vw;
    font-weight: 500;
    margin-bottom: 0.5vw;
}


.map-info__media-list {
    display: flex;
    flex-wrap: wrap;
    gap: 1vw;
}

.map-info__media-item {
}

.map-info__media-item img {
    max-width: 10vw;
}

@media (max-width: 2048px) {
    .header__wrap {
        gap: 0.6vw;
    }

    .logo-list__item img {
        max-height: 40px;
    }

    .--app-inner .header {
        border-radius: 0 0 15px 15px;
    }

    .map__region-title-value img {
        max-height: 32px;
    }

    .map__region-title-value {
        font-size: 1.25vw;
    }

    .header__title {
        font-size: 1.25vw;
    }

    .header__subtitle {
        font-size: 0.85vw;
    }

    .main-map__info-title {
        font-size: 0.85vw;
    }

    .main-map__info-value {
        font-size: 1vw;
    }

    .go-first-screen {
        border-radius: 12px !important;
    }

    .go-first-screen svg {
        max-height: 3.15vw;
        max-width: 4vw;
    }

    .map__modal-district-regions {
        left: 5.5vw;
        font-size: 0.85vw;
        width: 25vw;
    }

    .map__modal-district-name {
        font-size: 1.25vw;
        margin-bottom: 1.5vw;
    }

    .map__modal-region-item {
        line-height: 2;
    }

    .region-button {
        width: 3.8vw;
        height: 28vw;
    }

    #main-map {
        width: 100%;
        height: 100%;
    }

    .modal-all-regions__regions {
        padding: 1vw;
    }

    .regions-list {
        column-gap: 1vw;
    }

    .modal-all-regions__regions-title {
        font-size: 1.05vw;
        margin-bottom: 0.5vw;
    }

    .modal-all-regions__districts-title {
        font-size: 1.05vw;
        margin-bottom: 1vw;
    }

    .modal-all-regions__districts {
        padding: 1vw 1vw 1vw 1vw;
    }

    .districts-list__item {
        font-size: 0.85vw;
        padding: 0.25vw;
        margin-bottom: 0.5vw;
    }

    .districts-list__item::after {
        height: 0.63vw;
        width: 0.365vw;
        margin-left: 0.55vw;
    }

    .popup {
        border-radius: 20px;
        padding: 1vw;
    }

    .popup__content-title {
        font-size: 1vw;
        margin-bottom: 1vw;
    }

    .popup__content-title img {
        max-width: 70px;
    }

    .map-stats__item {
        margin: 0.5vw;
    }

    .circle-progress {
        max-width: 120px;
        position: relative;
    }

    .circle-progress .progressbar-text {
        font-size: 1.8vw;
        font-weight: 300;
    }

    .map-numbers__item-value {
        min-width: 12vw;
        font-size: 1.25vw;
    }

    .map-numbers__item-value span {
        font-size: 2.5vw;
    }

    .about-district__icon img, .about-agglomeration__icon img {
        max-width: 32px;
    }

    .about-district__item-title .text__value, .about-agglomeration__item-title .text__value {
        font-size: 1.4vw;
    }

    .map-controls__item.zoom-in img {
        max-height: 3.5vw;
    }

    .map-controls__item.zoom-out img {
        max-height: 2.5vw;
    }

    .map-years {
        border-radius: 15px;
        padding: 0.55vw 1.2vw;
    }

    .map-years__list {
        font-size: 1.05vw;
    }

    .legend {
        border-radius: 10px;
    }

    .about-region {
        border-radius: 10px;
        padding: 0.8vw 1.2vw;
        font-size: 0.85vw;
    }

    .about-region img {
        max-height: 1.5vw;
    }

    .map-info__about-label img, .map-info__description-title img {
        max-height: 32px;
    }

    .map-info__columns {
        gap: 0 1.25vw;
    }
}

@media (max-width: 1367px) {
}

@media (max-width: 991px) {
}

@media (max-width: 768px) {
}

.leaflet-container .leaflet-attribution-flag {
    display: none !important;
}