.weather-map {
  position: relative;
  width: 100%;
}
.weather-map-canvas {
  width: 100%;
  min-height: 150px;
}
.weather-map-status {
  font-size: 0.85rem;
  padding: 0 0.4rem;
}
.weather-map-status:empty {
  display: none;
}
.weather-map-select {
  background: white;
  border-radius: 4px;
  padding: 4px;
  box-shadow: 0 0 2px #666;
}
.weather-map-select select {
  color: #222;
  background: white;
  max-width: min(260px, 65vw);
}
.weather-marker {
  padding: 0;
  border: 0;
  cursor: pointer;
  background: none;
}
.weather-marker .MMContainer {
  display: block;
  position: relative;
  left: auto;
  top: auto;
  margin: 0;
}
.weather-marker:focus-visible,
.weather-fixed-marker:focus-visible {
  outline: 3px solid #166ab6;
  outline-offset: 3px;
}
.weather-fixed-marker {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.weather-fixed-marker img {
  width: 32px;
  height: 32px;
}
.weather-location-pin {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #2876b8;
  border: 3px solid white;
  box-shadow: 0 1px 4px #333;
}
.weather-map .maplibregl-popup-content {
  font: 13px/1.4 sans-serif;
  color: #222;
}
.weather-map .maplibregl-popup-content .PopContent {
  display: flex;
  gap: 10px;
}
.weather-map .maplibregl-popup-content > div > a {
  display: block;
  margin-top: 8px;
}