body {
  margin: 0;
  padding: 0;
}
#company { display: flex; align-items: center; }
#address { border-bottom: solid; }
#map canvas { cursor: crosshair; }

@media screen and (max-width: 640px) {
  #logo { width: 121px; }
  #title { font-family: 'Roboto'; padding-left: 10px; }
  #map { position: fixed; top: 127px; height: calc(100% - 127px); width: 100%; }
  #helpFull { display: none; }
  #helpMin ul { list-style: none; margin: 10px 0; padding-left: 5px; font-family: 'Roboto'; font-size: small; }
  #helpMin ul li { display: inline; }
  #helpMin ul li::before { content: "•"; display: inline; font-weight: bold; font-size: 24px; padding-left: 3px; padding-right: 2px; vertical-align: sub; }
}

@media screen and (min-width: 641px) {
  #map { position: fixed; top: 132px; bottom: 0; width: 80%; }
  #title { font: xx-large "Roboto", sans-serif; padding-left: 20px; }
  input { font-size: 16px; }
  input[type=submit] { background-color: #ff0000; color: #fff; -webkit-border-radius: '5px'; border-radius: 5px; border: 0; padding: 3px 10px; }
  #helpMin { display: none; }
  #helpFull { position: fixed; top: 129px; bottom: 0; left: 80%; width: 19%; border-left: solid; font: large "Roboto", sans-serif; padding-left: 10px; }
  #colors legend { background-color: #000; color: #fff; padding: 3px 6px; }
  #helpFull ul { list-style: none; margin: 0; }
  #helpFull ul li::before { content: "•"; display: inline-block; width: .5em; font-weight: bold; font-size: 35px; vertical-align: sub; }
}

ul li.red::before { color: #ff0000; }
ul li.orange::before { color: #ffbf00; }
ul li.green::before { color: #00ff00; }

.maplibregl-ctrl-link a, a:visited, a:hover, a:active {
  color: inherit;
}

.maplibregl-popup-content {
  border: 2px solid crimson;
}

#ban {
  margin: 10px;
}

.address-text {
  width: 70%;
}