html,
body,
#map {
  width : 100%;
  height: 100%;
  margin: 0;
}

#map {
  cursor: cell;
}

h2 {
  padding: 16px 16px 0;
  margin : 0;
}

.maps-list {
  display  : flex;
  gap      : 16px;
  padding  : 16px;
  flex-wrap: wrap;
}

.layer-props {
  font-family   : 'Noto Sans', sans-serif;
  position      : absolute;
  top           : 8px;
  right         : 8px;
  width         : min-content;
  display       : flex;
  flex-direction: column;
  gap           : 4px;
  background    : #ccca;
  padding       : 4px;
  border-radius : 4px;
}

.layer-props img {
  image-rendering: pixelated;
}

.layer-props-row {
  display: flex;
  gap    : 4px;
}

#viewing-radius {
  width: 5rem;
}

#can-reach-markers {
  display  : flex;
  gap      : 2px;
  flex-wrap: wrap;
}

.can-reach-marker {
  font-weight   : bold;
  color         : DarkGreen;
  display       : flex;
  flex-direction: column;
  align-items   : center;
}

.can-reach-marker img {
  max-width : 32px;
  max-height: 32px;
}

.ol-popup {
  position        : absolute;
  background-color: white;
  box-shadow      : 0 1px 4px rgba(0, 0, 0, 0.2);
  padding         : 15px;
  border-radius   : 10px;
  border          : 1px solid #cccccc;
  bottom          : 12px;
  left            : -50px;
}

.ol-popup:after,
.ol-popup:before {
  top           : 100%;
  border        : solid transparent;
  content       : " ";
  height        : 0;
  width         : 0;
  position      : absolute;
  pointer-events: none;
}

.ol-popup:after {
  border-top-color: white;
  border-width    : 10px;
  left            : 48px;
  margin-left     : -10px;
}

.ol-popup:before {
  border-top-color: #cccccc;
  border-width    : 11px;
  left            : 48px;
  margin-left     : -11px;
}

.ol-popup-closer {
  text-decoration: none;
  position       : absolute;
  top            : 4px;
  right          : 8px;
  cursor         : pointer;
}

.ol-popup-closer:after {
  content: "✖";
}

.hidden {
  display: none !important;
}