body {
  background-color: white;
  color: black;
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  margin: 0;
}

#map {
  white-space: normal;
  width: 100%;
  height: 100%;
}

.leaflet-baseimage-pane {
  z-index: 210;
}

.leaflet-object-pane {
  z-index: 220;
}

.leaflet-activity-pane {
  z-index: 230;
}

.leaflet-landmark-pane {
  z-index: 300;
}

.interactive .leaflet-tile-container {
  pointer-events: auto;
}

.crisp img, .crisp canvas, .crisp {
  image-rendering: optimizeSpeed;             /*                     */
  image-rendering: -moz-crisp-edges;          /* Firefox             */
  image-rendering: -o-crisp-edges;            /* Opera               */
  image-rendering: -webkit-optimize-contrast; /* Chrome (and Safari) */
  image-rendering: optimize-contrast;         /* CSS3 Proposed (old?)      */
  image-rendering: pixelated;                 /* CSS3 Proposed (current)?      */
  -ms-interpolation-mode: nearest-neighbor;   /* IE8+                */
  }

.blur {
  filter: blur(2px);
}

.invalid canvas {
  filter: blur(5px);
}

.swatch {
  display: block;
  padding: 1px 4px;
  margin-top: 2px;
}

.cluster-label {
  /* leaflet supplied box, fixed size */
  background: transparent;
}

/* inner div, auto to text width */
.cluster-label div {
  position: absolute;
  padding-left: 0.3em;
  padding-right: 0.3em;
}

.cluster-label:before {
  content: "";
  position: absolute;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  width: 12px;
  height: 12px;
  transform: rotate(135deg);
  transform-origin: 0% 100%;
}

.object-icon {
  height: 100%;
  object-fit: contain;
}

.timecontrol-close:before {
    width: 100%;
    text-align: center;
    content: "\e083";
}

.server-select {
  flex-wrap: wrap;
}

.leaflet-control {
  opacity: 1;
  transition: opacity .5s;
}

.idle .leaflet-control {
  opacity: 0;
  transition: opacity 10s;
}

.graticule .leaflet-left .leaflet-control {
  margin-left: 20px;
}

.leaflet-control-point-legend,
.leaflet-control-color-scale {
  padding: 4px;
}

.leaflet-control-point-legend,
.leaflet-control-color-scale,
.leaflet-control-map-toggle,
.leaflet-control-map-button {
  background-clip: padding-box;
  border: 2px solid;
  border-radius: 5px;
}
.leaflet-control-map-toggle-off,
.leaflet-control-map-toggle-on,
.leaflet-control-map-button-body {
  font: bold 18px 'Lucida Console', Monaco, monospace;
  font-size: 22px;
  text-align: center;
  display: block;
  width: 36px;
  height: 36px;
  position: relative;
}
.leaflet-control-map-toggle-off svg,
.leaflet-control-map-toggle-on svg,
.leaflet-control-map-button-body svg {
  position: relative;
  top: 10px;
}
.leaflet-touch .leaflet-control-map-toggle-off,
.leaflet-touch .leaflet-control-map-toggle-on,
.leaflet-touch .leaflet-control-map-button-body {
  width: 44px;
  height: 44px;
}

svg.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.2em;
  stroke-width: 0;
  stroke: currentColor;
  fill: currentColor;
}

.light {
  background-color: white;
  color: black;
}

.light #sidebar [role="button"]:hover,
.light #sidebar a:hover {
  background-color: #eee;
}

.light .swatch {
  color: white;
}

.light .leaflet-control-point-legend,
.light .leaflet-control-color-scale,
.light .leaflet-control-map-toggle,
.light .leaflet-control-map-button {
  background-color: #fff;
  border-color: rgba(0,0,0,0.2);
}

.light .leaflet-control-map-toggle-off svg,
.light .leaflet-control-map-toggle-on svg,
.light .leaflet-control-map-button-body svg {
  color: #aaa;
}

.light svg.leaflet-control-map-toggle-highlight {
  color: rgb(59, 153, 250);
}

.light .cluster-label {
  color: #141414;
  text-shadow: 1px 1px rgb(221, 221, 221);
}

.light .cluster-label div {
  background-color: rgba(221, 221, 221, 0.4);
}

.light .cluster-label:before {
  border-bottom-color: #141414;
}

.light .icon-github { color: #24292e; }
.light .icon-twitter { color: #55acee; }

.dark {
  background-color: #222;
  color: #ddd;
}

.dark .leaflet-container {
  background-color: #333;
}

.dark .leaflet-bar a,
.dark .leaflet-bar a:hover {
  background-color: #111;
  color: #666;
  border-bottom-color: #555;
}
.dark .leaflet-bar a:hover {
  background-color: #141414;
}
.dark .leaflet-bar a.leaflet-disabled {
  background-color: #141414;
  color: #888;
}

.dark .leaflet-control-layers {
  background-color: #111;
}
.dark .leaflet-touch .leaflet-control-layers,
.dark .leaflet-touch .leaflet-bar {
  border-color: rgba(255,255,255,0.2);
}

.dark .leaflet-control-layers-expanded {
  color: #ddd;
  background-color: #141414;
}

.dark #sidebar [role="button"]:hover,
.dark #sidebar a:hover {
  background-color: #000;
}

.dark .swatch {
  color: white;
}

.dark .leaflet-control-point-legend,
.dark .leaflet-control-color-scale,
.dark .leaflet-control-map-toggle,
.dark .leaflet-control-map-button {
  background-color: #111;
  border-color: rgba(255,255,255,0.2);
}

.dark .leaflet-control-map-toggle-off svg,
.dark .leaflet-control-map-toggle-on svg,
.dark .leaflet-control-map-button-body svg {
  color: #666;
}

.dark svg.leaflet-control-map-toggle-highlight {
  color: rgb(59, 153, 250);
}

.dark .leaflet-container .leaflet-control-attribution {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.7);
}
.dark .leaflet-control-attribution,
.dark .leaflet-control-scale-line {
  color: #ddd;
}
.dark .leaflet-control-scale-line {
  border-color: #999;
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.5);
}
.dark .leaflet-control-scale-line:not(:first-child) {
  border-top-color: #999;
}
.dark .leaflet-control-scale-line:not(:first-child):not(:last-child) {
  border-bottom-color: #999;
}

.dark .leaflet-touch .leaflet-control-layers,
.dark .leaflet-touch .leaflet-bar {
  border-color: rgba(255,255,255,0.2);
}

.dark .cluster-label {
  color: #ddd;
  text-shadow: 1px 1px #141414;
}

.dark .cluster-label div {
  background-color: rgba(20, 20, 20, 0.4);
}

.dark .cluster-label:before {
  border-bottom-color: #ddd;
}

.dark .icon-github { color: #777; }
.dark .icon-twitter { color: #55acee; }

.dark .leaflet-grid-label .gridlabel-vert,
.dark .leaflet-grid-label .gridlabel-horiz {
    text-shadow: -2px 0 #000000, 0 2px #000000, 2px 0 #000000, 0 -2px #000000;
}