.map-item {
  stroke: #517087;
  stroke-width: 0.5;
  fill: #ddd;
  /* transition: fill 0.4s; */
}

.map-item:active {
  fill: #bbb;
}

.item-idle {
  fill: #ddd;
}

.map-item.item-wrong:active {
  fill: #bb0606;
}

.item-correct {
  fill: #2ed557;
}

.map-item.item-correct:active {
  fill: #21a642;
}

.item-not-found {
  animation-name: blink-red;
  animation-duration: 0.5s;
  animation-iteration-count: 8;
  animation-direction: alternate;
  animation-fill-mode: both;
}

.item-wrong {
  animation-name: fade-out;
  animation-duration: 3s;
  animation-iteration-count: 1;
  animation-fill-mode: both;
}

@keyframes blink-red {
  0% { fill: #cf6060 }
  100% { fill: #f0bcbc }
}

@keyframes fade-out {
  0% { fill: #ff9800 }
  50% { fill: #ff9800 }
  100% { fill: #ddd }
}

.pin, .pin-line {
  stroke: black;
  stroke-width: 1;
}