.radar-type-marker {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 3px solid #fff;
  border-radius: 50%;
  font-size: 18px;
  line-height: 1;
  box-shadow: 0 2px 7px rgba(0, 0, 0, .55);
}
.marker-fireworks { background: #e53935; }
.marker-rainbow { background: #7546c9; }
.marker-meteor { background: #243b72; }
.marker-heavy-rain { background: #1676a3; }
.marker-road-hazard { background: #d97800; }
.marker-generic { background: #526171; }
.safety-note { padding: 8px 10px; border-left: 4px solid #d97800; border-radius: 4px; background: #fff7e8; color: #614000 !important; }
.bearing-arrow {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  color: #0d4ea6;
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 1px 5px rgba(0, 0, 0, .4);
  transform-origin: center;
}
.bearing-badge { position: absolute; top: -11px; right: -13px; z-index: 2; }
.bearing-inline { width: 18px; height: 18px; margin-left: 6px; vertical-align: -4px; font-size: 14px; box-shadow: 0 0 0 1px #b9c8d8; }
.bearing-popup { width: 18px; height: 18px; margin-right: 6px; vertical-align: -4px; font-size: 14px; box-shadow: 0 0 0 1px #b9c8d8; }