.container {
  margin-bottom: 40px;
}
#d3-region-map path {
  stroke-linejoin: round;
}

.region-fill {
  fill: rgba(0, 0, 0, 0);
  stroke: #202020;
}

.region-fill.region-hover {
  fill: rgba(255, 255, 255, 0.7);
  stroke-width: 3px;
}

.county-path {
  stroke: #202020;
  fill: none;
}

.county-fill.region-1,
.region-fill.region-1.region-selected {
  fill: rgb(246, 182, 135);
}

.county-fill.region-2,
.region-fill.region-2.region-selected {
  fill: rgb(200, 215, 167);
}

.county-fill.region-3,
.region-fill.region-3.region-selected {
  fill: rgb(249, 226, 168);
}

.county-fill.region-4,
.region-fill.region-4.region-selected {
  fill: rgb(168, 222, 235);
}

.county-fill.region-5,
.region-fill.region-5.region-selected {
  fill: rgb(222, 205, 186);
}

.county-fill.region-6,
.region-fill.region-6.region-selected {
  fill: rgb(174, 188, 151);
}

#d3-region-map .label,
#d3-region-map .label-bg {
  font-weight: 700;
  pointer-events: none;
  text-anchor: middle;
  font-size: 16px;
}

#d3-region-map .label-bg {
  fill: none;
  stroke: white;
  stroke-width: 3px;
  opacity: 0.9;
  stroke-linejoin: round;
}

#d3-region-map .label {
  fill: #202020;
}

.region-fill.region-selected {
  stroke-width: 3px;
  fill: #7286a0;
}

.map-highlight .region-fill:not(.region-selected),
.map-highlight .county-fill:not(.region-selected) {
  fill: rgba(237, 242, 245, 0.7);
}