@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800&display=swap");

.uem-map {
  --uem-bg: #030406;
  --uem-fill-west: #646669;
  --uem-fill-east: #595b5f;
  --uem-fill-kyiv: #3b3d42;
  --uem-fill-active: #ececec;
  --uem-stroke: #707276;
  --uem-text: #efefea;
  --uem-text-active: #111317;

  width: 100%;
  background: var(--uem-bg);
  overflow: hidden;
  line-height: 1;
}

.uem-map-shell {
  width: min(100%, 1280px);
  aspect-ratio: 1280 / 760;
}

.uem-map-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.uem-region-path {
  fill: var(--uem-fill-east);
  stroke: var(--uem-stroke);
  stroke-width: 1.8;
  vector-effect: non-scaling-stroke;
  transition: fill 0.18s linear;
  cursor: pointer;
  outline: none;
}

.uem-region-path[data-group="west"] {
  fill: var(--uem-fill-west);
}

.uem-region-path[data-group="east"] {
  fill: var(--uem-fill-east);
}

.uem-region-path[data-group="kyiv"] {
  fill: var(--uem-fill-kyiv);
}

.uem-map[data-selected-group="west"] .uem-region-path[data-group="west"],
.uem-map[data-selected-group="east"] .uem-region-path[data-group="east"],
.uem-map[data-selected-group="kyiv"] .uem-region-path[data-group="kyiv"] {
  fill: var(--uem-fill-active);
}

.uem-region-path:focus-visible {
  stroke: #ffffff;
  stroke-width: 2.4;
}

.uem-overlay-layer {
  pointer-events: none;
}

.uem-region-label,
.uem-city-label,
.uem-kyiv-label {
  fill: var(--uem-text);
  font-family: "Montserrat", "Segoe UI", sans-serif;
  letter-spacing: 0.5px;
  user-select: none;
}

.uem-region-label {
  font-size: 38px;
  font-weight: 800;
}

.uem-city-label {
  font-size: 40px;
  font-weight: 700;
}

.uem-kyiv-label {
  font-size: 38px;
  font-weight: 800;
}

.uem-city-marker .uem-marker-icon rect,
.uem-city-marker .uem-marker-icon polyline,
.uem-city-marker .uem-marker-icon line,
.uem-kyiv-marker .uem-marker-icon rect,
.uem-kyiv-marker .uem-marker-icon polyline,
.uem-kyiv-marker .uem-marker-icon line {
  fill: none;
  stroke: var(--uem-text);
  stroke-width: 2.1;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.uem-region-label.is-active,
.uem-city-marker.is-active .uem-city-label,
.uem-kyiv-marker.is-active .uem-kyiv-label {
  fill: var(--uem-text-active);
}

.uem-city-marker.is-active .uem-marker-icon rect,
.uem-city-marker.is-active .uem-marker-icon polyline,
.uem-city-marker.is-active .uem-marker-icon line,
.uem-kyiv-marker.is-active .uem-marker-icon rect,
.uem-kyiv-marker.is-active .uem-marker-icon polyline,
.uem-kyiv-marker.is-active .uem-marker-icon line {
  stroke: var(--uem-text-active);
}

@media (max-width: 1024px) {
  .uem-region-path {
    stroke-width: 1.5;
  }
}

@media (max-width: 767px) {
  .uem-region-path {
    stroke-width: 1.25;
  }
}

.uem-map-error {
  min-height: 380px;
}