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 box */
.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 map's edge cut it off, so Google's attribution
   stays reachable. */
.lha-place-search gmp-place-autocomplete::part(prediction-list) {
  max-height: calc(100vh - 160px);
  overflow-y: auto;
  touch-action: pan-y;
}

/* While typing, keep the search box above controls in other corners, such
   as an expanded Layers panel on phones. Scoped to the control container
   because GoogleMutant's hidden map div also has these classes. */
.leaflet-control-container .leaflet-top.leaflet-left:focus-within {
  z-index: 1001;
}