body,
html {
  margin: 0;
  padding: 0;
}

body {
  background-color: #2587bc;
  background-image: url(./background.svg);
  background-size: cover;
}

#root {
  min-height: 100vh;

  /*padding-top: 0.1px;*/
  /*! Ez okozza a popover + scrollbar bugot
    nem jöttem rá mire használjuk, ha valaki visszarakná jelezzen
  */
}

.marker svg.frame {
  position: absolute;
  width: 80px;
  height: 80px;
  z-index: 1;
}

.marker svg:not(.frame) {
  position: absolute;
  top: 7px;
  left: 20px;
  width: 40px;
  height: 40px;
  z-index: 10;
}

.marker img {
  position: absolute;
  top: 11%;
  left: 20px;
  z-index: 10;
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.marker.hidden {
  display: none;
}

.arrow svg {
  position: absolute;
  width: 100%;
  height: 100%;
}

@keyframes something {
  from {
    transform: scale(0.9);
    opacity: 0.7;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

.circle > svg {
  animation-duration: 1s;
  animation-name: something;
  animation-iteration-count: infinite;
  /* animation-delay: 2s; */
  animation-direction: alternate;
}

.leaflet-marker-icon.leaflet-interactive.circle {
  pointer-events: none;
}

.circle path {
  pointer-events: all;
  transition-delay: 0.2s;
  transition-duration: 0.5s;
  transition-property: stroke;
  transition-timing-function: ease-in-out;
}

.circle .part-one path {
  stroke: #fc0;
}

.circle > svg:has(path:hover) {
  transform: scale(1.2);
}

.circle-tooltip {
  visibility: hidden;
}

body:has(.circle .part-one path:hover) .circle-tooltip.one {
  visibility: visible;
}
body:has(.circle .part-two path:hover) .circle-tooltip.two {
  visibility: visible;
}
body:has(.circle .part-three path:hover) .circle-tooltip.three {
  visibility: visible;
}

.circle .part-two path {
  stroke: #0f0;
}

.circle .part-three path {
  stroke: #0cf;
}

.circle path:hover {
  stroke: #f00;
}