:root {
  --default-state-color: #241f5a;
  --circle-state-color: #4c97bb;
  --hover-state-color: #414d5f;
  --active-state-color: #414d5f;
  --disabled-state-color: #999;
  --state-text-color: #fff;
}
.svg-map {
  width: 460px;
  height: 465px;
}
.svg-map path {
  fill: var(--default-state-color);
  stroke: #fff;
  stroke-width: 1.0404;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.svg-map text {
  fill: var(--state-text-color);
  font-size: 12px;
  cursor: pointer;
}
.svg-map a:hover {
  cursor: pointer;
}
.svg-map a:hover path {
  fill: var(--hover-state-color) !important;
}
.svg-map .circle {
  fill: var(--circle-state-color);
  color: #222;
}
.svg-map a:hover .circle {
  fill: var(--hover-state-color) !important;
  cursor: pointer;
}
.svg-map a[data-selected-state] path {
  fill: var(--active-state-color);
}
.svg-map a[data-disabled-state] {
  pointer-events: none;
}
.svg-map a[data-disabled-state] path {
  fill: gray;
}
.mobile-map {
  display: none;
}
@media only screen and (max-width: 768px) {
  .svg-map {
    display: none;
  }
  .mobile-map {
    display: block;
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    background-color: #fff;
    border: 1px solid #ccc;
  }
}