body {
  margin: 0;
  padding: 0;
}

#map {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}

.mapboxgl-ctrl-style button,
.mapboxgl-ctrl-download button {
  font-size: 1.5rem;
  width: 40px;
  height: 40px;
}

.mapboxgl-ctrl-style button + button {
  border-top-color: rgb(0 0 0/20%);
}

.style-menu {
  position: relative;
}
.style-menu-container {
  display: none;
  position: absolute;
  margin: 0;
  top: -11px;
  left: 40px;
  padding: 10px;
}

.style-menu .mapboxgl-ctrl-group {
  padding: 0;
  flex-direction: row;
  display: flex;
  margin: 0;
}

.style-menu .mapboxgl-ctrl-group button:last-child {
  border-radius: 0 4px 4px 0px;
}

.style-menu.active .style-menu-container,
.style-menu:hover .style-menu-container {
  display: block;
}

.mapboxgl-ctrl-style > button {
  overflow: visible;
}

.mapboxgl-ctrl-style > button:not(:disabled):hover,
.mapboxgl-ctrl-style > button.active {
  background-color: #3277e5;
  text-shadow: 0 0 5px white;
}

.mapboxgl-ctrl-style > button.active:hover {
  background-color: #4287f5;
}

.style-menu-container button:first-child {
  border-radius: 4px 0 0 4px;
}

.style-menu-container .style-btn {
  text-shadow: 0 0 5px white;
  border: none;
}

.style-menu-container .style-btn + .style-btn {
  border: none;
}

.style-btn.active {
  background-color: #3277e5;
}

.style-btn.active:not(:disabled):hover {
  background-color: #4287f5;
}