html, body, #map-div {
  margin: 0;
  padding: 0;
  height: 100%;
}

label {
  display: block;
}

#map-div {
  max-width: 2047px;
  max-height: 1600px;
}

#playback-slider {
  vertical-align: middle;
}

#viz-control-div {
  position: absolute;
  width: 250px;
  left: 50%;
  bottom: 10px;
  margin-left: -125px;
}

#map-key-div {
  position: absolute;
  right: 10px;
  top: 50%;
  vertical-align:  middle
}

.map-overlay {
  background-color: rgba(255, 255, 255, .8);
  border: 1px solid rgba(128, 128, 128, .8);
  border-radius: 5px;
  box-shadow: 2px 2px 2px rgba(64, 64, 64, .8);
  padding: 5px;
}

#pause-button {
  width: 20px;
  height: 20px;
  vertical-align: bottom;
}

#segments-status {
  display: inline;
}

.gradient {
  width: 25px;
  display: inline-block;
  margin-right: 5px;
  margin-top: 2px;
}

#map-key-vessels {
  background: linear-gradient(to right, red, yellow);
}

#map-key-buoys {
  /*background: linear-gradient(to right, blue, magenta);*/
  background: linear-gradient(to right, blue, cyan);
}

#map-key-other {
  background: linear-gradient(to right, green, cyan);
}

#map-attribution {
  font-size: 10px;
  font-family: Arial, sans-serif;
  margin: 0 2px 0 0;
  padding: 1px 5px 1px 5px;
  background-color: rgba(200, 200, 200, .8);
}