.d3map-tooltip {
  background: white;
  padding: 5px 10px;
  border: 1px solid #ccc;
  border-radius: 3px;
  font-size: 12px;
  -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  opacity: 0;
  pointer-events: none;
}

#map-wrapper {
  margin-bottom: 6px;
  position: relative;
}

#map {
  position: relative;
  background: inherit;
  border: none;
  border-radius: 5px;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  overflow: hidden;
  aspect-ratio: 1.6;
}
#map svg {
  border: none;
  width: 100%;
  height: 100%;
}
#map .feature {
  stroke: white;
  stroke-width: 1px;
  fill: rgb(0, 61, 166);
  cursor: pointer;
  -webkit-transition: fill 0.2s ease;
  transition: fill 0.2s ease;
}
#map .feature.hover, #map .feature:hover {
  fill: rgb(160, 130, 210);
}
#map .feature.active {
  stroke-width: 1px;
  fill: #00A9E0;
}
#map .labels {
  pointer-events: all;
  cursor: default;
  font-weight: normal;
}
#map .labels .state-label {
  cursor: pointer;
}
#map .labels .state-label text {
  fill: #fff;
  font-family: Monospace;
  pointer-events: all;
  stroke: none;
  font-size: 12px;
}
#map .labels .state-label circle {
  fill: rgb(0, 61, 166);
  pointer-events: all;
  stroke: gray;
  -webkit-transition: fill 0.2s ease;
  transition: fill 0.2s ease;
}
#map .labels .state-label.hover circle, #map .labels .state-label:hover circle {
  fill: rgb(160, 130, 210);
}
#map .labels .state-label.active circle {
  fill: #00A9E0;
}
#map .labels .state-label.label-position-A text {
  pointer-events: none;
}
#map .labels .state-label.label-position-A circle {
  pointer-events: none;
  stroke: none;
  fill: transparent;
}
#map .labels .state-label.label-position-A.hover, #map .labels .state-label.label-position-A:hover {
  pointer-events: none;
  stroke: none;
  fill: transparent;
}
#map.layer-1 .feature {
  opacity: 1;
}
#map.layer-2 #layer-1-features .feature {
  opacity: 0.3;
}
#map.layer-2 #layer-1-features .feature.active {
  opacity: 0.5;
}
#map.layer-2 #layer-2-features .feature {
  opacity: 1;
}

.reset-button {
  position: absolute;
  bottom: 10px;
  right: 10px;
  z-index: 1000;
  color: rgb(176, 210, 56);
  background: white;
  font-size: 1.5rem;
  text-decoration: none;
  padding: 5px 10px;
  border-radius: 5px;
  -webkit-box-shadow: 0 2px 5px rgba(248, 151, 29, 0.1);
          box-shadow: 0 2px 5px rgba(248, 151, 29, 0.1);
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.reset-button:hover {
  color: #91af28;
  text-decoration: none;
  -webkit-transform: translateY(-1px);
          transform: translateY(-1px);
  -webkit-box-shadow: 0 4px 8px rgba(248, 151, 29, 0.15);
          box-shadow: 0 4px 8px rgba(248, 151, 29, 0.15);
}
.reset-button i {
  display: block;
}

@media (max-width: 768px) {
  .reset-button {
    font-size: 1.2rem;
    padding: 4px 8px;
  }
  #map .labels .state-label text {
    font-size: 10px;
  }
}
@media print {
  .reset-button {
    display: none !important;
  }
  #map {
    border: 1px solid rgb(160, 130, 210);
    background: white;
  }
}