#map {
  height: 100%;
}

/* Optional: Makes the sample page fill the window. */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.name {
  font-size: 14pt;
  font-weight: bold;
  margin-right: 1em;
}

#legend {
  position: absolute;
  left: 15pt;
  bottom: 20pt;
  font: 400 10pt Roboto, Arial, sans-serif;
  background: #ffffff;
  border-radius: 5pt;
  width: 200pt;
  padding: 10pt;
}

/*#legend.dark-mode, .content.dark-mode {*/
/*  background: #333333;*/
/*  color: white;*/
/*}*/

#legend .name {
  text-align: center;
}

.key {
  display: flex;
  align-items: center;
  padding: 5pt;
}

.key img {
  height: 20pt;
}