html,
body {
  margin: 0;
  padding: 0;
}

body {
  font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;

  /* For vertically centering dialog boxes on top of the map */
  align-items: center;
  display: flex;
  justify-content: center;
}

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

.masthead-modular {
  color: #000;
  text-shadow: 0 0 12px #fff,
              -0.5px -0.5px 0 #fff,
              0.5px -0.5px 0 #fff,
              -0.5px 0.5px 0 #fff,
              0.5px 0.5px 0 #fff;
}

@media screen and (max-width: 500px) {
  .masthead-desktop {
    display: none;
  }
}

/* Make links on Google map clickable */
.leaflet-google-mutant a,
.leaflet-google-mutant button {
  pointer-events: auto;
}

.leaflet-control-toggle,
.lha-map-dialog-title {
  background: #ddd;
}

.leaflet-control-toggle,
.leaflet-top .leaflet-control-layers,
.lha-legend {
  width: 178px;
}

.leaflet-control-toggle {
  border: 2px solid rgba(0,0,0,0.2);
  background-clip: padding-box;
  border-radius: 5px 5px 0 0;
  cursor: default;
  padding: 4px 10px 4px 11px;
}

.toggle-arrow {
  padding-right: 8px;
}

.leaflet-top .leaflet-control-layers,
.leaflet-top .lha-legend {
  margin-top: 0;
  border-radius: 0 0 5px 5px;
  border-top: 0;
}

.lha-legend {
  background: #fff;
  background-clip: padding-box;
  border: 2px solid rgba(0,0,0,0.2);
  color: #333;
  padding: 6px 12px 6px 12px;
}

.lha-legend img,
#lha-full-legend img {
  vertical-align: middle;
}

.lha-legend .legend-drivable,
.lha-legend .legend-not-drivable {
  width: 9px;
}

#lha-full-legend .legend-drivable,
#lha-full-legend .legend-not-drivable {
  width: 50px;
}

.legend-drivable {
  height: 7px;
}

.legend-not-drivable {
  height: 3px;
}

.ev-legend-header {
  margin-top: 12px;
  margin-bottom: 0;
}

.ev-legend {
  margin-top: 0;
}

.ev-legend img {
  height: 16px;
  width: 16px;

  /* Clip the empty space on the left within the image. */
  margin-left: -3px;
  margin-right: 3px;
}

.lha-legend ul {
  list-style-type: none;
}

.lha-legend ul,
.lha-legend li {
  margin: 0;
  padding: 0;
}

.lha-legend .lha-legend-links {
  margin-top: 12px;
}

.last-updated {
  font-size: 10px;
  text-align: right;
}

.lha-map-dialog {
  position: absolute;
  z-index: 2000;
  max-width: 465px;
  background: #fff;
  border: 2px solid rgba(0,0,0,0.2);
  border-radius: 5px;
}

.lha-map-dialog-title,
.lha-map-dialog-content,
.lha-map-dialog-controls {
  padding: 6px 12px;
}

.lha-map-dialog-title {
  font-weight: bold;
}

.lha-map-dialog-controls {
  text-align: right;
  padding-bottom: 12px;
}

hr {
  border: 1px solid #ddd;
}

.lha-center-your-location,
.leaflet-pegman {
  box-sizing: content-box;
}

.lha-center-your-location {
  background: #fff;
  padding: 0.25em 0.5em 0.25em 0.25em;
}

.lha-center-your-location-label {
  display: flex;
  align-items: center;
}

.lha-center-your-location-checkbox {
  margin-right: 0.5em;
}

.lha-credits td {
  width: 50%;
  vertical-align: top;
}

.lha-credits dt {
  font-size: 10px;
  font-weight: bold;
  text-transform: uppercase;
  margin-top: 12px;
}

.lha-credits dl,
.lha-credits dd {
  margin: 0;
  padding: 0;
}

.lha-credits ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.lha-credits-note {
  font-size: 8px;
  margin-top: 12px;
}

@media screen and (max-height: 699px) {
  .lha-credits dt {
    font-size: 8px;
  }
}

@media screen and (max-height: 625px) {
  .lha-credits {
    font-size: 10px;
  }

  .lha-map-dialog-content {
    padding-top: 0;
    padding-bottom: 0;
  }

  .lha-credits-first dt {
    margin-top: 8px;
  }

  .lha-map-dialog-controls {
    padding-top: 0;
    padding-bottom: 8px;
  }
}

@media screen and (max-height: 550px) {
  .lha-credits dt {
    font-size: 6px;
  }

  .lha-credits {
    font-size: 8px;
  }
}

/* Place search */
.lha-place-search-button {
  display: block;
  width: 100%;
  margin-top: 0.25em;
  font: inherit;
}

/* Grays out the whole page, above the controls and Street View (z-index
   1000) and the dialogs (2000), with the search box at the top center. */
.lha-place-search {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2500;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 10px;
  background: rgba(0, 0, 0, 0.4);
  -webkit-tap-highlight-color: transparent;
  /* Like the map, block the browser's own pinch zoom and pull to refresh.
     iOS ignores user-scalable=no, and the map wouldn't let a zoomed-in page
     zoom back out. The suggestion list scrolls on its own. */
  touch-action: none;
}

.lha-place-search gmp-place-autocomplete {
  width: 300px;
  max-width: calc(100vw - 20px);
  /* Otherwise the widget turns dark when the OS is in dark mode. */
  color-scheme: light;
  border: 2px solid rgba(0,0,0,0.2);
  border-radius: 5px;
  background-clip: padding-box;
}

/* On short screens (e.g. landscape phones), scroll the suggestion list
   rather than letting the page's edge cut it off, so Google's attribution
   stays reachable. The list starts 62px down (10px gap plus the 52px box)
   and leaves another 10px below. dvh keeps it above Safari's toolbar. */
.lha-place-search gmp-place-autocomplete::part(prediction-list) {
  max-height: calc(100vh - 72px);
  max-height: calc(100dvh - 72px);
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
}