.react-tile-map {
  position: relative;
}

.react-tile-map-canvas.clickable {
  cursor: pointer;
}

.react-tile-map-canvas.draggable {
  cursor: move; /* fallback if grab cursor is unsupported */
  cursor: grab;
  cursor: -webkit-grab;
}

.react-tile-map-canvas.draggable:active {
  cursor: grabbing;
  cursor: -webkit-grabbing;
}

.react-tile-map-canvasPopup {
  position: absolute;
  pointer-events: none;
}

.react-tile-map-popup {
  width: 100%;
  margin-left: -50%;
  border-radius: 4px;
  background-color: rgba(0, 0, 0, 0.7);
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.react-tile-map-popup.move-left {
  padding-left: 100%;
}

.react-tile-map-popup.move-right {
  padding-left: 0%;
}

.react-tile-map-popup.visible {
  opacity: 1;
}

.react-tile-map .zoom-controls {
  display: flex;
  flex-direction: column;
  position: absolute;
  right: 20px;
  bottom: 20px;
  box-shadow: 0 1px 8px rgb(0 0 0 / 30%);
  border-radius: 6px;
}

.react-tile-map .zoom-controls button {
  color: rgb(214, 214, 214);
  font-size: 20px;
  background-color: #736e7d;
  border: 0;
  height: 48px;
  width: 40px;
  position: relative;
  cursor: pointer;
}

.react-tile-map .zoom-controls button:hover:not(:disabled) {
  color: white;
}

.react-tile-map .zoom-controls button:disabled {
  cursor: default;
  color: #969696
}

.react-tile-map .zoom-controls button:first-child {
  border-radius: 6px 6px 0 0;
}

.react-tile-map .zoom-controls button:last-child {
  border-radius: 0 0 6px 6px;
}

.react-tile-map .zoom-controls button:last-child::before {
  content: '';
  position: absolute;
  left: 10%;
  top: -2px;
  height: 1px;
  width: 80%;
  border-bottom: 1px solid #161419;
  opacity: 0.4;
}