/* ============================================================ */
/* Display Styles */

:root {
  --popup-fg-color: black;
  --popup-bg-color: white;
  --popup-highlight-color: #E32736; /* TODO: Needed? */
  --popup-border: 1px solid var(--popup-fg-color);
  --popup-scrollbar: #444;
  --popup-button-hover: lightgray;
  --popup-button-border: 1px solid lightgray;
  --popup-textbox-border: 1px solid darkgray;

  --alert-fg-color: #e0e0e0;
  --alert-bg-color: #202020;
}

/* ==================================================*/
/* Poster (default; color on black background) */
body {
  /* ---------------------------------------- */
  /* UI */
  --fg-color: white;
  --bg-color: black;
  --highlight-color: #E32736;

  --link-color: var(--footer-fg-color);
  --textbox-bg-color: white;
  --textbox-fg-color: black;
  --textbox-border: none;
  --textbox-shadow: 2px 2px 4px #404040;
  --textbox-font-weight: normal;
  --direction-color: var(--highlight-color);
  --footer-fg-color: white;
  --footer-bg-color: rgba(0,0,0,0.65);
  --stripe-color: var(--highlight-color);
  --font-family-title: Optima, Marcellus, "Times New Roman", serif;
  --font-family-body: Univers, Helvetica, Arial, sans-serif;
  --font-family-copyright: Helvetica, Arial, sans-serif; /* Univers' (C) is tiny. */
  --logo-flat: url("res/ui/logo-flat.svg");
  --logo-stacked: url("res/ui/logo-stacked.svg");
  --button-fg-color: black;
  --button-bg-color: #606060;
  --button-hover-color: var(--highlight-color);
  --button-shadow: 2px 2px 4px #404040;
  --map-bg-image: var(--checkerboard-dark);

  --status-official: #048104;
  --status-preserve: #048104;
  --status-inreview: orange;
  --status-unreviewed: orange;
  --status-apocryphal: magenta;
  --status-unofficial: #E32736;

  /* ---------------------------------------- */
  /* Legend */

  --legend-fg-color: var(--fg-color);
  --legend-bg-color: var(--bg-color);
  --legend-border: 1px solid gray;
  --legend-shadow: 2px 2px 4px #404040;
  --legend-scrollbar: #888;

  --legend-image1: url("res/ui/Legend_1003_poster.svg");
  --legend-image2: url("res/ui/Legend_1006_poster.svg");

  --legend-colors-display: block;
  --legend-bases-display: block;
  --legend-pop-display: block;

  --greenzone-display: none;
  --greenzone: #048104;
  --amberzone: #FFCC00;
  --redzone: #E32736;

  --glyph-highlight: #E32736;
  --water-color: #00bfff;
  --water-border: transparent;
  --nowater-color: var(--fg-color);
  --nowater-border: transparent;

  --pop-transform: none;
  --pop-few-weight: normal;
  --pop-few-decoration: none;
  --pop-many-weight: normal;
  --pop-many-decoration: none;
  --pop-capital-weight: normal;
  --pop-capital-decoration: none;
  --pop-capital-color: var(--glyph-highlight);
}

/* ==================================================*/
/* Print (color on white background) */
body.style-print {
  /* ---------------------------------------- */
  /* UI */
  --fg-color: black;
  --bg-color: white;
  --textbox-bg-color: #e0e0e0;
  --footer-fg-color: black;
  --footer-bg-color: rgba(255,255,255,0.65);
  --stripe-color: black;
  --logo-flat: url("res/ui/logo-flat-gray.svg");
  --logo-stacked: url("res/ui/logo-stacked-gray.svg");
  --map-bg-image: var(--checkerboard-lite);

  /* ---------------------------------------- */
  /* Legend */
  --legend-image1: url("res/ui/Legend_1003_print.svg");
  --legend-image2: url("res/ui/Legend_1006_print.svg");

  --nowater-color: white;
  --nowater-border: black;
}

/* ================================================== */
/* Mongoose */
body.style-mongoose {
  /* ---------------------------------------- */
  /* UI */
  --fg-color: black;
  --bg-color: #e6e7e8;

  /* ---------------------------------------- */
  /* Legend */
  --legend-image1: url("res/ui/Legend_1003_mongoose.svg");
  --legend-image2: url("res/ui/Legend_1006_mongoose.svg");

  --greenzone-display: block;
  --greenzone: #80C676;
  --amberzone: #FBB040;

  --water-color: mediumblue;
  --nowater-color: darkkhaki;

  --pop-transform: uppercase;
  --pop-many-weight: bold;
}

/* ================================================== */
/* Eye Candy (bitmap worlds, simplified details) */
body.style-candy {
  /* ---------------------------------------- */
  /* Legend */
  --legend-image1: url("res/ui/Legend_1003_candy.svg");
  --legend-image2: url("res/ui/Legend_1006_candy.svg");

  --legend-colors-display: none;
  --legend-bases-display: none;
}

/* ================================================== */
/* Draft (hand-drawn) */
body.style-draft {
  /* ---------------------------------------- */
  /* UI */
  --fg-color: black;
  --bg-color: antiquewhite;
  --textbox-bg-color: #e0e0e0;
  --footer-fg-color: black;
  --footer-bg-color: antiquewhite;
  --logo-flat: url("res/ui/logo-flat-gray.svg");
  --logo-stacked: url("res/ui/logo-stacked-gray.svg");
  --map-bg-image: var(--checkerboard-lite);

  /* ---------------------------------------- */
  /* Legend */
  --legend-image1: url("res/ui/Legend_1003_draft.svg");
  --legend-image2: url("res/ui/Legend_1006_draft.svg");

  --amberzone: #4D4943;

  --water-color: antiquewhite;
  --water-border: #4D4943;
  --nowater-color: #4D4943;

  --pop-transform: uppercase;
  --pop-many-weight: bold;
  --pop-many-decoration: underline;
}

/* ================================================== */
/* FASA (simplified print) */
body.style-fasa {
  /* ---------------------------------------- */
  /* UI */
  --fg-color: black;
  --bg-color: white;
  --link-color: #5C4033;
  --textbox-bg-color: #e0e0e0;
  --direction-color: #5C4033;
  --footer-fg-color: #5C4033;
  --footer-bg-color: rgba(255,255,255,0.65);
  --stripe-color: #5C4033;
  --logo-flat: url("res/ui/logo-flat-gray.svg");
  --logo-stacked: url("res/ui/logo-stacked-gray.svg");
  --map-bg-image: var(--checkerboard-lite);

  /* ---------------------------------------- */
  /* Legend */
  --legend-image1: url("res/ui/Legend_1003_fasa.svg");
  --legend-image2: url("res/ui/Legend_1006_fasa.svg");

  --legend-colors-display: none;
  --legend-bases-display: none;
  --legend-pop-display: none;

  --amberzone: #5C4033;
  --redzone: #AD9F98;
}

/* ================================================== */
/* Atlas (black on white) */
body.style-atlas {
  /* ---------------------------------------- */
  /* UI */
  --fg-color: black;
  --bg-color: white;
  --textbox-bg-color: #e0e0e0;
  --direction-color: gray;
  --footer-fg-color: black;
  --footer-bg-color: rgba(255,255,255,0.65);
  --stripe-color: black;
  --logo-flat: url("res/ui/logo-flat-gray.svg");
  --logo-stacked: url("res/ui/logo-stacked-gray.svg");
  --map-bg-image: var(--checkerboard-lite);

  /* ---------------------------------------- */
  /* Legend */
  --legend-image1: url("res/ui/Legend_1003_atlas.svg");
  --legend-image2: url("res/ui/Legend_1006_atlas.svg");

  --amberzone: #c0c0c0;
  --redzone: #black;

  --glyph-highlight: gray;
  --water-color: black;
  --nowater-color: white;
  --nowater-border: black;
}

/* ================================================== */
/* Terminal (retro computer) */
body.style-terminal {
  /* ---------------------------------------- */
  /* UI */
  --fg-color: cyan;
  --textbox-shadow: none;
  --textbox-border: 1px solid gray;
  --textbox-font-weight: bold;
  --font-family-body: "Courier New", "Courier", monospace;
  --font-family-copyright: "Courier New", "Courier", monospace;
  --button-bg-color: lightgray;
  --button-shadow: none;
  --stripe-color: cyan;

  /* ---------------------------------------- */
  /* Legend */
  --legend-image1: url("res/ui/Legend_1003_terminal.svg");
  --legend-image2: url("res/ui/Legend_1006_terminal.svg");

  --water-color: black;
  --water-border: cyan;

  --pop-transform: uppercase;
  --pop-many-weight: bold;
  --pop-capital-weight: bold;
  --pop-capital-color: white;
}

/* ============================================================ */
/* General Layout */

html, body { overflow: hidden; }
html { margin: 0; padding: 0; width: 100%; height: 100%; }

form { margin: 0; padding: 0; }
p { margin: 0; }
.indent { margin-left: 20px; }
.nowrap { white-space: nowrap; display: inline-block; }

.dim:not(:hover) { opacity: 0.5; }

body {
  position: absolute; /* size may be changed by script */
  margin: 0; padding: 0;
  border: none; overflow: hidden;
  width: 100%; height: 100%; max-height: 100%;

  font-size: 10pt;
  color: var(--fg-color);
  background-color: var(--bg-color);

  /* Bad things to UI in Safari? */
  x-text-wrap: balance;

  -webkit-touch-callout: none;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0,0,0,0); /* No gray highlight when clicking divs. */
}
body, input[type=text], button {
  font-family: var(--font-family-body);
}
.copyright {
  font-family: var(--font-family-copyright);
}

a {
  -webkit-tap-highlight-color: initial;
  color: var(--link-color);
}

input[type=text] {
  -webkit-appearance: none; /* No inner shadow on iOS. */
  color: var(--textbox-fg-color);
  background-color: var(--textbox-bg-color);
  font-weight: var(--textbox-font-weight);
}

:root {
  scrollbar-color: var(--popup-scrollbar) transparent;
  scrollbar-width: thin;
}

/* ============================================================ */
/* Map Display */

#mapContainer {
  position: absolute;
  overflow: hidden;
  left: 0; top: 0; right: 0; bottom: 0;
}
#dragContainer {
  position: absolute;
  width: 100%; height: 100%;
  transform: translateZ(500px) perspective(1000px);
  transition: 1s ease-in-out;
  background-image: var(--map-bg-image);
  cursor: crosshair;
}

.tilt #dragContainer {
  transform: translateZ(500px) perspective(1000px) rotateX(45deg);
  transition: 1s ease-in-out;
}

#dragContainer.dragging {
  cursor: move;
  cursor: url(res/ui/grabbing.cur), move;
  cursor: grabbing;
}

.direction {
  font-weight: bold; text-transform: uppercase; font-size: 120%;
  color: var(--direction-color);
  pointer-events: none;
  position: absolute;
  text-align: center;
  z-index: 1;
  visibility: hidden;
}
.show-directions .direction { visibility: visible; }

#direction-coreward {
  top: 4px; left: 0; right: 0;
}
#direction-rimward {
  bottom: 4px; left: 0; right: 0;
}
#direction-spinward {
  top: 50%; left: 0.9em;
  transform: translateY(-50%) translateX(-50%) rotate(270deg);
}
#direction-trailing {
  top: 50%; right: 0.9em;
  transform: translateY(-50%) translateX(50%) rotate(270deg);
}

/* ============================================================ */
/* Bottom Pane */

#bottom-pane {
  position: absolute;
  box-sizing: border-box;
  left: 0; right: 0; bottom: 0; height: 105px;
  padding: 10px; padding-top: 0;
  overflow: hidden;
  color: var(--footer-fg-color);
  background-color: var(--footer-bg-color);
 }

#LogoImage {
  float: right;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: top right;
  width: 416px; height: 71px;
  background-image: var(--logo-flat);
}

#stripe {
  margin: 6.5px 0;
  height: 7px;
  background-color: var(--stripe-color);
}

/* ============================================================ */
/* Credits/Metadata */

.credits { font-style: italic; }

.metadata-status a { text-decoration: none; font-weight: bold; }
.metadata-status .official { visibility: hidden;
                             color: var(--status-official); }
.metadata-status .preserve { color: var(--status-preserve); }
.metadata-status .inreview { color: var(--status-inreview); }
.metadata-status .unreviewed { color: var(--status-unreviewed); }
.metadata-status .apocryphal { color: var(--status-apocryphal); }
.metadata-status .unofficial { color: var(--status-unofficial); }
.metadata-status .bar { font-size: 120%; }

/* ============================================================ */
/* Close Buttons */

.closebtn {
  position: absolute;
  right: -10px;
  top: -5px;
  width: 50px;
  height: 50px;
  min-width: 0;

  padding: 0;
  border: none;
  box-shadow: none;
  background-color: transparent;
  background-position: center;
  background-repeat: no-repeat;
}
.closebtn:hover { background-color: transparent; }
#legend-closebtn {
  filter: invert(100%);
}

.closebtn,
#closeRouteBtn,
#closeSearchBtn {
  background-image: var(--close-symbol);
}

/* ============================================================ */
/* Sector/World Data Sheet (Modeless Side Panel) */

#panel-shade,
#ds-shade {
  display: none;
  position: absolute;
  z-index: 29;
  left: 0; right: 0; top: 0; bottom: 0;
  background-color: rgba(0, 0, 0, 0.50);
}

body:not(.sds-visible) #sds-frame,
body:not(.wds-visible) #wds-frame { display: none; }

:-webkit-full-screen .ds-frame { bottom: 15px; }
:fullscreen .ds-frame { bottom: 15px; }
.hide-footer .ds-frame { bottom: 15px; }

.ds-frame {
  position: absolute;
  z-index: 40;
  color: var(--popup-fg-color);
  background-color: var(--popup-bg-color);
  border: var(--popup-border);

  left: 10px; right: auto; width: 320px;
  top: 55px; min-height: 179px; height: auto; bottom: 110px;

  overflow-y: scroll;
  overflow-x: hidden;
}
@supports (left: max(0px)) and (left: env(safe-area-inset-left)) {
  .ds-frame { left: max(10px, env(safe-area-inset-left)); }
}

.ds-scroll { margin: 10px; }
.ds-mini .ds-scroll { margin-bottom: 0; }

.ds-frame a {
  color: var(--popup-fg-color);
}

.ds-credits p {
  margin-bottom: 1em;
}

#spinner {
  display: none;

  position: absolute;
  top: 10px; right: 40px;
  width: 20px;
  height: 20px;

  background-color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-image: var(--loading-spinner);
}

.ds-map-links,
.ds-print-links {
  text-align: center;
}

.ds-map-links {
  margin-top: 10px;
}

/* Mini Mode */

.ds-mini-toggle {
  touch-action: none;
  clear: both;
  height: 32px;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: var(--chevron-down);
}
.ds-mini .ds-mini-toggle {
  background-image: var(--chevron-up);
}

.ds-mini .ds-mini-hidden { display: none; }
.ds-mini .ds-frame { bottom: auto; padding-bottom: 0; }

#sds-data > div:not(:first-child) { margin: 8px 0; }
#sds-data .ds-mini-hidden > div { margin: 8px 0; }

#sds-data > div:not(:first-child).ds-mini-toggle { margin: -8px 0; }

.ds-wiki-link {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ds-wiki-link a { color: blue; }


#ds-route-link a {
  padding-left: 28px;
  background-repeat: no-repeat;
  background-position: left center;
}

.ds-frame #sds-data > div,
.ds-frame .wds-names > div {
  overflow-x: hidden;
  text-overflow: ellipsis;
}

.wds-wiki-link { margin-top: 6px; margin-left: 10px; }

/* Titles */

.ds-title {
  font-family: var(--font-family-title);
  font-size: 26px;
  font-weight: bold;
  font-style: italic;
  padding-bottom: 1px;
  border-bottom: 4px solid var(--popup-fg-color);
  margin-bottom: 8px;
}
.ds-title small { font-size: 65%; }

/* ======================================== */
/* World Data Sheet */

.wds-ssname,
.wds-sectorhex {
  font-family: var(--font-family-title);
  font-size: 14px;
  font-weight: bold;
  font-style: italic;
}

.wds-names {
  overflow: hidden; /* So stripe does not extend under floated image. */
}

#wds-map {
  width: 272px;
  height: auto;
  border: 2px solid var(--popup-fg-color);
  cursor: zoom-in;
}

#wds-print-jump-links {
  line-height: 30px;
}

/* World Image */

#wds-world-image {
  position: relative;
  float: left;
  width: 100px;
  height: 100px;
  margin: 0 10px 5px 0;
  border: 2px solid var(--popup-fg-color);
  background-color: var(--popup-fg-color);
}

/* Expand/Collapse */

.wds-expandy { cursor: pointer; }
.wds-toggle { float: right; }
.wds-expandy:not(:hover) .wds-toggle { opacity: 0.5; }
.wds-toggle {
  display: block;
  height: 14px;
  width: 14px;
  margin-right: 15px;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: var(--chevron-up);
}

#wds-frame:not(.wds-expand-uwp) #wds-uwp,
#wds-frame:not(.wds-expand-ex) #wds-ex,
#wds-frame:not(.wds-expand-cx) #wds-cx { display: none; }

.wds-expand-uwp .wds-expandy[data-wds-expand="wds-expand-uwp"] .wds-toggle,
.wds-expand-ex .wds-expandy[data-wds-expand="wds-expand-ex"] .wds-toggle,
.wds-expand-cx .wds-expandy[data-wds-expand="wds-expand-cx"] .wds-toggle {
  background-image: var(--chevron-down);
}

/* Data Blocks */

.wds-properties {
  margin: 5px 0;
  width: 100%;
  table-layout: fixed;
  clear: both;
  border-collapse: collapse;
}

.wds-properties td {
  margin: 0;
  padding: 10px 0 4px;
  font-size: 11px; line-height: 14px;
  font-weight: bold;
  vertical-align: top;
}
.wds-properties tbody:nth-child(2) td { padding-top: 0; }

.wds-properties td:first-child { text-align: right; padding-right: 4px; width: 75px; }
.wds-properties td:last-child { text-align: left; padding-left: 4px; width: auto; }

.wds-properties big { font-size: 14px; }
.wds-properties small { font-size: 10px; }

.wds-properties .wds-decode tr:nth-child(odd) { background-color: #ddd; }
.wds-properties .wds-decode tr:nth-child(even) { background-color: #eee; }
.wds-properties .wds-decode td {
  padding-top: 2px; padding-bottom: 2px;
  font-size: 11px; font-weight: normal;
  vertical-align: middle;
}
.wds-properties .wds-decode td:nth-child(2) {
  width: 25px;
  font-size: 14px; font-weight: bold;
  text-align: center;
}

/* Specific Data Fields */

.wds-stars .wds-star:after,
.wds-bases .wds-base:after,
.wds-nobility .wds-noble:after { content: ' \2014 '; } /* U+2014 EM DASH */

.wds-stars .wds-star:last-child:after,
.wds-bases .wds-base:last-child:after,
.wds-nobility .wds-noble:last-child:after { content: ''; }

.wds-star { white-space: nowrap; display: inline-block; }

.wds-imp-blurb { font-weight: normal; padding-left: 10px; }

.wds-zone-amber { background-color: var(--amberzone); padding: 2px 20px; display: inline-block; }
.wds-zone-red { background-color: var(--redzone); padding: 2px 20px; display: inline-block; }

/* ======================================== */
/* Sector Data Sheet */

.sds-status {
  text-align: center;
}

#sds-frame .sds-status a { text-decoration: none; font-weight: bold; }
#sds-frame .sds-status a.official { color: var(--status-official); }
#sds-frame .sds-status a.preserve { color: var(--status-preserve); }
#sds-frame .sds-status a.inreview { color: var(--status-inreview); }
#sds-frame .sds-status a.unreviewed { color: var(--status-unreviewed); }
#sds-frame .sds-status a.apocryphal { color: var(--status-apocryphal); }
#sds-frame .sds-status a.unofficial { color: var(--status-unofficial); }
#sds-frame .sds-status a.bar { font-size: 120%; }

/* ============================================================ */
/* Link-Buttons */

.link-button {
  text-align: center;
  clear: both;
}
.link-button-inline {
  display: inline-block;
  padding: 0 1em;
}

.link-button, .link-button-inline {
  line-height: 30px;
  border-radius: 15px;
  border: var(--popup-button-border);
}
.link-button:hover,
.link-button-inline:hover {
  background-color: var(--popup-button-hover);
}
.link-button-inline a,
.link-button a
{
    text-decoration: none;
}

/* ============================================================ */
/* Icons Buttons */

.print-icon {
  padding-left: 24px;
  background-repeat: no-repeat;
  background-position: left center;
  background-image: var(--print-symbol);
}
.download-icon {
  padding-left: 24px;
  background-repeat: no-repeat;
  background-position: left center;
  background-image: var(--download-symbol);
}
.copy-icon {
  padding-left: 24px;
  background-repeat: no-repeat;
  background-position: left center;
  background-image: var(--copy-symbol);
}

/* ============================================================ */
/* Top-Level UI Elements */

.ui {
  z-index: 20;
}

.hide-ui .ui { display: none; }
:-webkit-full-screen #bottom-pane { display: none; }
:fullscreen #bottom-pane { display: none; }
.hide-footer #bottom-pane { display: none; }

button {
  font-size: 10pt;
  font-weight: bold;
  padding: 0 10px; margin: 0; border: none;
  min-width: 37px;
  color: var(--button-fg-color);
  background-color: var(--button-bg-color);
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: var(--button-shadow);
  border-radius: 2px;
}
button:hover {
  background-color: var(--button-hover-color);
}

.hoverbox {
  display: none;
  position: absolute;
  overflow-x: hidden;
  overflow-y: auto;
  color: var(--popup-fg-color);
  background-color: var(--popup-bg-color);
  border: var(--popup-border);
  z-index: 30;
}
.hoverbox a {
  color: var(--popup-fg-color);
}
.hoverbox-right {
  right: 10px; top: 55px; bottom: 160px;
}
@supports (right: max(0px)) and (right: env(safe-area-inset-right)) {
  .hoverbox-right {
    right: max(10px, env(safe-area-inset-right));
  }
}
.hoverbox-left {
  left: 10px; top: 55px; bottom: 110px;
}
@supports (left: max(0px)) and (left: env(safe-area-inset-left)) {
  .hoverbox-left {
    left: max(10px, env(safe-area-inset-left));
    top: calc(45px + max(10px, env(safe-area-inset-top)));
  }
}

/* ============================================================ */
/* Search Bar / Box */

#searchForm {
  display: block;
  position: relative;
  float: left;
  width: 275px;
  transition: width 0.1s ease-in-out;
}
#searchBox {
  box-sizing: border-box;
  height: 40px; width: 100%;
  font-size: 12pt;
  padding: 5px 10px; margin: 0;
  border: var(--textbox-border);
  border-radius: 2px;
  box-shadow: var(--textbox-shadow);
}

/* -- Results */

#resultsBox {
  box-sizing: border-box;
  width: 320px;
  min-height: 50px;
  max-height: 250px;
  padding: 20px;
}
.search-results #resultsBox { display: block; }
#resultsBox .tip a:not(:hover) { text-decoration: none; }

#resultsContainer .item-main { font-size: 125%; }
#resultsContainer .item-location { margin-left: 10pt; }
#resultsContainer .item-title { margin-left: 10pt; }
#resultsContainer .item-uwp { margin-left: 10pt; }
#resultsContainer .item-status { font-style: italic; }

#searchForm button {
  position: absolute;
  top: 0; right: 0;
  width: 40px; height: 40px;
  background-color: transparent;
  box-shadow: none;
}

/* -- Route */

#routeBox {
  left: 5px; top: 5px; width: 300px;
  padding: 9px; /* +1px border to align box with search form at 10px */
  min-height: 115px;
  max-height: 350px;
}
@supports (left: max(0px)) and (left: env(safe-area-inset-left)) {
  #routeBox {
    left: max(5px, env(safe-area-inset-left));
    top: max(5px, env(safe-area-inset-top));
  }
}
.route-ui #routeBox { display: block; }

body:not(.route-shown) #routeDisplay { display: none; }
body:not(.route-shown) #routeBox { min-height: 135px; max-height: 135px; }

#routeBox input[type=text] {
  box-sizing: border-box;
  height: 40px; width: 100%;

  font-size: 12pt;
  padding: 5px 10px;
  margin: 0 0 10px;
  border: none;
  border-bottom: var(--popup-textbox-border);
  border-radius: 0;
}
#routeForm button {
  height: 20px; margin: 0 2px;
}

#routeForm.J-1 #J-1,
#routeForm.J-2 #J-2,
#routeForm.J-3 #J-3,
#routeForm.J-4 #J-4,
#routeForm.J-5 #J-5,
#routeForm.J-6 #J-6 { background-color: var(--highlight-color); }

#routeForm .jump-button {
  text-align: center;
  clear: both;
  line-height: 30px;
  border-radius: 15px;
  border: var(--popup-button-border);
  height: auto;
  background-color: var(--popup-bg-color);
  box-shadow: none;
}
#routeForm .jump-button:hover {
  background-color: var(--popup-button-hover);
}

#routeForm #closeRouteBtn,
#routeForm #swapRouteBtn {
  position: absolute;
  right: 0;
  padding: 0;
  margin: 0;
  width: 50px;
  height: 50px;
  box-shadow: none;
  background-color: transparent;
}

#H-1 { display: none; }
.milieu-M1900 #H-1 { display: initial; }
.milieu-M1900 #routeForm .jump-button { padding: 0 5px; margin: 0; }

#routeBox #closeRouteBtn { top: 5px; }
#routeBox #swapRouteBtn { top: 57px; }

#routeBox { overflow: hidden; }
#routeDisplay {
  position: absolute;
  top: 150px;
  left: 20px;
  right: 20px;
  bottom: 10px;
  overflow: auto;
}

.routeOptions-item { min-height: 24px; text-align: left; }

#routePath { margin-bottom: 10px; text-align: left; }

#routePath .item {
  position: relative;
  padding-left: 30px;
  background-image: var(--route-stop);
  background-repeat: no-repeat;
  background-position: 3px 3px;
  padding-top: 2px;
  padding-bottom: 5px;
  margin-bottom: -5px;
}
#routePath .item:last-of-type {
  background-image: var(--route-end);
}
#routePath .item-distance { position: absolute; left: 0px; top: 22px; }
#routePath .item-main { font-size: 125%; }
#routePath .item-location { margin-left: 10pt; }
#routePath .item-title { margin-left: 10pt; }
#routePath .route-summary  { display: block; text-align: center; padding: 5px 0; }
#routePath .route-links { display: block; text-align: center; padding-top: 10px; }

/* ============================================================ */
/* UI State */

/* Panels */
.show-more #moreBox,
.show-legend #legendBox { display: block; }

.show-more #moreBtn,
.show-legend #legendBtn { background-color: var(--highlight-color); }

/* Tabs */
.show-settings #settings-tab,
.show-lab #lab-tab,
.show-milieu #milieu-tab,
.show-share #share-tab,
.show-help #help-tab { display: block; }

.show-lab #labBtn,
.show-milieu #milieuBtn,
.show-settings #settingsBtn,
.show-share #shareBtn,
.show-help #helpBtn {
  border-bottom: 2px solid var(--highlight-color);
  filter: none;
}

/* ============================================================ */
/* Legend Box */

#legendBox {
  width: 310px;
  max-height: 620px;
  z-index: 50;

  text-align: center;
  padding: 0;

  color: var(--legend-fg-color);
  background-color: var(--legend-bg-color);
  border: var(--legend-border);
  box-shadow: var(--legend-shadow);

  scrollbar-color: var(--legend-scrollbar) transparent;
  scrollbar-width: thin;
}

#legendBoxContent {
  margin: 20px;
}

#legendBox section h2 {
  display: inline-block;
  margin-top: 0;
  margin-bottom: 6px;
  border-bottom: 3px solid var(--fg-color);
  padding: 2px 0px;
  text-transform: uppercase;
  font-size: 100%;
  font-weight: normal;
}

#legendBox section:first-of-type { margin-top: 0; }
#legendBox section { margin-top: 1em; }

#legendBox section ul {
  text-align: left;
  display: inline-block;
  vertical-align: top;
  padding: 0; margin: 0;
  list-style-type: none;
}

#legendBox section li {
    line-height: 13pt;
}

#legendBox .glyph { display: inline-block; width: 20px; text-align: center; }
#legendBox .highlight { color: var(--glyph-highlight); }
#legendBox .glyph.water {
  color: var(--water-color);
  text-shadow: -1px -1px 0 var(--water-border), -1px 1px 0 var(--water-border), 1px -1px 0 var(--water-border), 1px 1px 0 var(--water-border);
}
#legendBox .glyph.nowater {
  color: var(--nowater-color);
  text-shadow: -1px -1px 0 var(--nowater-border), -1px 1px 0 var(--nowater-border), 1px -1px 0 var(--nowater-border), 1px 1px 0 var(--nowater-border);
}

#greenzone-item { display: var(--greenzone-display); }
#legendBox .amberzone { color: var(--amberzone); }
#legendBox .greenzone { color: var(--greenzone); }
#legendBox .redzone { color: var(--redzone); }

#legendBox .popname { display: inline-block; width: 70px; }

#legendBox .pop-few {
  text-transform: var(--pop-transform);
  font-weight: var(--pop-few-weight);
  text-decoration: var(--pop-few-decoration);
}
#legendBox .pop-many {
  text-transform: var(--pop-transform);
  font-weight: var(--pop-many-weight);
  text-decoration: var(--pop-many-decoration);
}
#legendBox .pop-capital {
  text-transform: var(--pop-transform);
  font-weight: var(--pop-capital-weight);
  text-decoration: var(--pop-capital-decoration);
  color: var(--pop-capital-color);
}

#legendBox .glyph { font-size: 140%; }
#legendBox .glyph.g8 { font-size: 80%; }
#legendBox .glyph.g10 { font-size: 100%; }
#legendBox .glyph.g12 { font-size: 120%; }

#legendBox:not(.world_colors) li.extended-only,
#legendBox:not(.opt-mh) li.opt-mh-only,
#legendBox:not(.opt-dw) li.opt-dw-only,
#legendBox:not(.opt-an) li.opt-an-only { display: none; }

/* Extended World Colors */
#legendBox .glyph.RiAg { color: rgb(241,194,50); }
#legendBox .glyph.Ag { color: rgb(106,168,79); }
#legendBox .glyph.Ri { color: purple; }
#legendBox .glyph.In { color: gray; }
#legendBox .glyph.corrosive { color: rgb(180,95,6); }
#legendBox .glyph.Va {
  color: black;
  text-shadow: -1px -1px 0 white, -1px 1px 0 white, 1px -1px 0 white, 1px 1px 0 white;
}

#legendBox #world_colors { display: var(--legend-colors-display); }
#legendBox #bases { display: var(--legend-bases-display); }
#legendBox #population { display: var(--legend-pop-display); }

#legendBox #image1
{
  display: inline-block;
  width: 200px; height: 200px; margin: 0; padding: 0;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: var(--legend-image1);
}
#legendBox #image2
{
  display: inline-block;
  width: 200px; height: 200px; margin: 0; padding: 0;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: var(--legend-image2);
}

/* ============================================================ */
/* Settings Tabs (Settings, Lab, Milieu) */

#styles { text-align: center; }

#styles button.style-choice {
  width: 40px; height: 40px;
  margin: 2px 4px;
  background-size: cover;
  box-shadow: none;
  border: 1px solid gray;
}
#styles button.styles-pager {
  width: 22px; height: 40px;
  padding: 0; min-width: 0;
  margin: 2px 0;
  box-shadow: none;
  background-color: transparent;
}

#styles { font-size: 0; } /* eliminate whitespace */
#styles:not(.p2) .styles-p2 { display: none; }
#styles.p2 .styles-p1 { display: none; }

.settings section { margin-top: 1em; }
.settings section:first-of-type { margin-top: 0; }

/* checkbox/radio buttons are larger on iOS */
.settings h3 { font-size: 10pt; font-weight: bold; margin: 0; }
.settings-item { line-height: 25px; margin-left: 20px; white-space: nowrap; }

#settingsBtn-poster { background-image: url('res/ui/style-poster.png'); }
#settingsBtn-atlas  { background-image: url('res/ui/style-atlas.png'); }
#settingsBtn-print  { background-image: url('res/ui/style-print.png'); }
#settingsBtn-candy  { background-image: url('res/ui/style-candy.png'); }
#settingsBtn-fasa  { background-image: url('res/ui/style-fasa.png'); }
#settingsBtn-draft  { background-image: url('res/ui/style-draft.png'); }
#settingsBtn-terminal { background-image: url('res/ui/style-terminal.png'); }
#settingsBtn-mongoose { background-image: url('res/ui/style-mongoose.png'); }

/* ============================================================ */
/* Share Tab */

#share-tab section { margin-top: 1em; }
#share-tab section:first-of-type { margin-top: 0; }
#share-tab input { width: 240px; padding: 5px; border: var(--popup-textbox-border); }
#share-tab a.share {
  display: inline-block;
  font-size: 0;
  width: 40px; height: 40px; margin: 5px;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url('res/ui/share.png');
}
#share-tab .copy-icon {
  display: inline-block;
  float: right;
  margin-right: 20px;
}
#share-tab .copy-icon:not(:hover) {
  text-decoration: none;
}
#share-email     { background-position:      0 0; }
#share-facebook  { background-position:  -40px 0; }
#share-pinterest { background-position: -120px 0; }
#share-reddit    { background-position: -160px 0; }
#share-tumblr    { background-position: -240px 0; }
#share-linkedin  { background-position: -320px 0; }



/* ============================================================ */
/* Help Tab */

#help-tab section { margin-top: 1em; }
#help-tab section:first-of-type { margin-top: 0; }

#help-tab p { margin-top: 0.5em; }
#help-tab p:first-of-type { margin-top: 0; }

#help-tab h3:first-of-type { margin-top: 0; }
#help-tab h3 { x-font-style: italic; x-font-weight: normal;
              color: var(--highlight-color);
              border-bottom: 2px solid var(--highlight-color);
              margin-bottom: 10px; }
#help-tab a:not(:hover) { text-decoration: none; }


/* ============================================================ */
/* Search Bar Buttons */

#searchBtn {
  background-image: var(--search-symbol);
}
.search-results #searchBtn { display: none; }

body:not(.search-results) #closeSearchBtn { display: none; }

#swapRouteBtn {
  background-image: var(--swap-symbol);
}

.route-icon,
#routeBtn {
  background-image: var(--route-symbol);
}
.route-ui #routeBtn { display: none; }

/* ============================================================ */
/* More Box */

#moreBox {
  display: none;
  position: absolute;
  z-index: 50;
  color: var(--popup-fg-color);
  background-color: var(--popup-bg-color);
  border: var(--popup-border);

  right: 10px; left: auto; width: 310px;
  top: 55px; min-height: 155px; height: auto; bottom: 155px;

  overflow: hidden;
}
@supports (right: max(0px)) and (right: env(safe-area-inset-right)) {
  #moreBox {
    right: max(10px, env(safe-area-inset-right));
  }
}
#more-tabs {
  position: absolute;
  left: 20px; right: 20px; top: 5px; height: 40px;
  text-align: center;
}
#more-tabs button {
  width: 40px; height: 40px;
  background-color: transparent;
  box-shadow: none;
  border-bottom: 2px solid transparent;
  filter: brightness(0%);
}
#more-tabs button:hover {
  background-color: transparent;
  border-bottom: 2px solid var(--highlight-color);
  filter: none;
}
#moreScroll {
  position: absolute;
  left: 0; right: 0; top: 55px; bottom: 0;
  padding: 0 20px 10px 20px;

  overflow-y: auto;
  overflow-x: hidden;
}
.more-tab {
  display: none;
}
.more-tab a {
  color: var(--popup-fg-color);
}
#more-closebtn {
  margin-right: 5px; /* no scrollbar to push it over, unlike ds-closebtn */
}


/* ============================================================ */
/* Options Bar Buttons */

#moreBtn {
  background-image: var(--menu-symbol);
}

#homeBtn, #homeBtn2 {
  background-image: var(--home-symbol);
}

#legendBtn {
  background-image: var(--key-symbol);
}

/* ============================================================ */
/* Tab Buttons */

#settingsBtn {
  background-image: var(--gear-symbol);
}

#labBtn {
  background-image: var(--flask-symbol);
}

#milieuBtn {
  background-image: var(--clock-symbol);
}

#shareBtn {
  background-image: var(--share-symbol);
}

#helpBtn {
  background-image: var(--help-symbol);
}

/* ============================================================ */
/* Nav Bar Buttons */

#zoomInBtn {
  background-image: var(--plus-symbol);
}

#zoomOutBtn {
  background-image: var(--minus-symbol);
}

#tiltBtn {
  background-image: var(--tilt-symbol);
}

#fsBtn {
  background-image: var(--fullscreen-symbol);
}

:-webkit-full-screen #fsBtn {
  background-image: var(--exitfullscreen-symbol);
}
:fullscreen #fsBtn {
  background-image: var(--exitfullscreen-symbol);
}

/* ============================================================ */
/* Generic Icons */

.chevron-left {
  background-repeat: no-repeat;
  background-position: center center;
  background-image: var(--chevron-left);
}
.chevron-right {
  background-repeat: no-repeat;
  background-position: center center;
  background-image: var(--chevron-right);
}

/* ============================================================ */
/* Tool Bars */

.ui.bar {
  position: absolute;
  left: 10px; right: 10px;
  height: 40px;
  white-space: nowrap;
  pointer-events: none;
}
@supports (left: max(0px)) and (left: env(safe-area-inset-left)) {
  .ui.bar {
    left: max(10px, env(safe-area-inset-left));
    right: max(10px, env(safe-area-inset-right));
  }
}

.ui.bar > * {
  pointer-events: auto;
}

#scaleIndicator {
  margin-top: 10px;
  pointer-events: none;
}

#topBar, #topBarRight { top: 10px; }
#topBar {
  overflow: hidden;
  z-index: 21; /* So search box overlaps right buttons */
}

@supports (top: max(0px)) and (top: env(safe-area-inset-top)) {
  #topBar,#topBarRight { top: max(10px, env(safe-area-inset-top)); }
}


#navBar, #navBarRight { bottom: 110px; }
:-webkit-full-screen #navBar,
:-webkit-full-screen #navBarRight { bottom: 15px; }
:fullscreen #navBar,
:fullscreen #navBarRight { bottom: 15px; }
.hide-footer #navBar,
.hide-footer #navBarRight { bottom: 15px; }

#homeBtn2 { display: none; } /* only shown in mobile layout */

.bar-button {
  height: 40px; width: 40px;
}

.ui.bar > * {
  float: left;
  margin-left: 4px;
}
.ui.bar > *:first-child {
  margin-left: 0;
}

.ui.bar .bar-right {
  float: right;
  margin: 0;
  pointer-events: none;
}

.ui.bar .bar-right > * {
  float: left;
  margin-right: 4px;
  pointer-events: auto;
}
.ui.bar .bar-right > *:last-child { margin-right: 0; }


/* ============================================================ */
/* Form Control Styles */

.routeOptions-item,
.settings-item {
  line-height: 30px;
  margin-left: 0;
  border-bottom: 1px solid lightgray;
}
.routeOptions-item:last-child,
.settings-item:last-child { border-bottom: none; }

input:checked + label { color: var(--highlight-color); }
input:disabled + label { opacity: 0.5; }

input[type=checkbox],
input[type=radio] { width: 0; height: 0; margin: 0; opacity: 0; }

input[type=checkbox] + label:before,
input[type=radio] + label:before {
  display: inline-block;
  vertical-align: bottom;
  content: '';
  background-position: center;
  background-repeat: no-repeat;
}

input[type=checkbox] + label:before {
  width: 40px; height: 30px;
  background-image: var(--checkbox-unchecked);
}
input[type=checkbox]:checked + label:before {
  background-image: var(--checkbox-checked);
}

input[type=radio] + label:before {
  width: 30px; height: 30px;
}
input[type=radio]:checked + label:before {
  background-image: var(--radio-checked);
}


/* ============================================================ */
/* Responsive Layout */

/* "Big Tablet" - stack logo logo a bit */
@media only screen and (max-width: 850px), only screen and (max-height: 425px) {
  #LogoImage { width: 210px; height: 71px; background-image: var(--logo-stacked); }
}

/* ... */
@media only screen and (max-width: 640px), only screen and (max-height: 425px) {
  #bottom-pane { font-size: 75%; height: 45px; padding: 2px;}
  #stripe { height: 4px; margin: 2px 0; }
  #LogoImage { width: 105px; height: 35.5px; }
  #navBar, #navBarRight { bottom: 55px; }
  .hoverbox-right,
  .hoverbox-left,
  #moreBox,
  .ds-frame {
    bottom: 10px;
  }

  @supports (bottom: max(0px)) and (bottom: env(safe-area-inset-bottom)) {
    .hoverbox-right,
    .hoverbox-left,
    #moreBox,
    .ds-frame { bottom: max(10px, env(safe-area-inset-bottom)); }
  }
}

/* "Small Tablet" - shrink bottom bar a lot, data sheets/menu at bottom */
@media only screen and (max-width: 640px) {

  /* Info cards at bottom */
  .wds-visible:not(.ds-mini) #ds-shade { display: block; }

  .ds-frame {
    left: 10px; right: 10px; width: auto;
    top: auto; bottom: -1px; height: 90%;
    transition: height 0.25s;
    min-height: 0;
    border-color: darkgray;
    border-bottom: none;
    border-radius: 5px 5px 0 0;
  }
  body:not(.sds-visible) #sds-frame,
  body:not(.wds-visible) #wds-frame { height: 0; display: block; }

  body:not(.ds-mini) #sds-frame {
    height: 320px;
  }
  .ds-mini .ds-frame {
    bottom: -1px; /* Chrome rendering bug with bottom border */
    height: 179px;
  }
  .ds-mini #sds-frame {
    height: 149px;
  }
  @supports (height: env(safe-area-inset-bottom)) {
    .ds-mini .ds-frame { height: calc(179px + env(safe-area-inset-bottom)); }
    .ds-mini #sds-frame { height: calc(149px + env(safe-area-inset-bottom)); }
  }

  /* Don't wrap when mini so height is fixed and can be transitioned. */
  .ds-mini .ds-frame #sds-data > div,
  .ds-mini .ds-frame .wds-names > div {
    white-space: nowrap;
  }

  .sds-visible #bottom-pane,
  .wds-visible #bottom-pane { display: none; }

  .ds-mini .ds-mini-toggle { background-image: var(--chevron-down); }
  .ds-mini-toggle { background-image: var(--chevron-up); }

  /* More/Legend box docked bottom, modal */
  #moreBox,
  #legendBox {
    left: 10px; right: 10px; width: auto;
    top: auto; bottom: -1px;
    transition: height 0.25s;
    min-height: 0;
    border-color: darkgray;
    border-bottom: none;
    border-radius: 5px 5px 0 0;
  }
  #moreBox { height: 330px; }
  @supports (height: env(safe-area-inset-bottom)) {
    #moreBox { height: calc(330px + env(safe-area-inset-bottom)); }
  }

  #legendBox { height: 90%; }
  body:not(.show-more) #moreBox,
  body:not(.show-legend) #legendBox { height: 0; display: block; }
  .show-legend #panel-shade,
  .show-more #panel-shade { display: block; }

  /* No Zoom/Tilt/Fullscreen buttons (but keep scale indicator)*/
  #navBarRight .bar-button { display: none; }
}

/* "Phone" - simplify controls/options significantly */
@media only screen and (max-width: 480px), only screen and (max-height: 480px) {
  /* Mobile (portrait or landscape) */

  /* Simplify/merge footer/navigation bar */

  #navBarRight .bar-button { display: none; }
  #navBar, #navBarRight { bottom: 5px; right: 115px; pointer-events: none; }
  @supports (bottom: max(0px)) and (bottom: env(safe-area-inset-bottom)) {
    #navBar, #navBarRight { bottom: max(10px, env(safe-area-inset-bottom)); }
  }

  #bottom-pane { background-color: transparent !important; pointer-events: none; }
  #stripe, #MetadataDisplay { display: none; }
  #LogoImage { position: absolute; right: 5px; bottom: 5px; }

  /* Simplify options */

  #share-embed { display: none; }

  #help-tools,
  #help-developers { display: none; }

  .direction { display: none; }
  #settings-show { display: none; }

  /* Show alternate Home button in lower right */

  #homeBtn { display: none; }
  #homeBtn2 { display: block; }
}


@media only screen and (max-width: 425px) {
  /* Mobile/Portrait - Dock Route UI to top */

  #searchForm { width: 180px; }

  .route-ui #routeBox {
    left: 0; top: 0; right: 0; width: auto;
    height: 300px;
  }
  @supports (left: env(safe-area-inset-left)) {
    .route-ui #routeBox {
      left: env(safe-area-inset-left);
      right: env(safe-area-inset-right);
      top: env(safe-area-inset-top);
    }
  }

  .route-ui.route-shown #mapContainer {
    top: 320px;
  }
  .route-ui #mapContainer {
    top: 137px;
  }

  .route-ui #moreBox,
  .route-ui #legendBox { display: none !important; }

  /* Resize search box */
  .search-results #searchForm { width: 100%; }
  #resultsBox { right: 10px; width: auto; }
}

@media only screen and (max-width: 375px) {
  /* Mobile Medium */
  #searchForm { width: 140px; }
}

@media only screen and (display-mode: standalone) {
  /* True full-screen for standlone mode */
  html, body, #dragContainer  { width: 100vw; height: 100vh; max-height: 100vh}
}

/* ============================================================ */
/* Touch-optimized styles */

@media (pointer: coarse) {
  #routeBox button,
  .bar-button { border-radius: 20px; box-shadow: none; }

  #searchBox, #routeBox input[type=text] { box-shadow: none; }
}


/* ============================================================ */

.style-terminal #routeBox,
.style-terminal #resultsBox,
.style-terminal #moreBox,
.style-terminal .bar-button,
.style-terminal .jump-button,
.style-terminal .style-choice,
.style-terminal #searchForm,
.style-terminal .ds-frame,
.style-terminal .sds-status,
.style-terminal #searchBtn { filter: invert(100%); }
.style-terminal #wds-world-image,
.style-terminal #wds-map { filter: invert(100%); }

/* ============================================================ */
/* Milieu */

#milieu-escape {
  color: var(--alert-fg-color);
  background-color: var(--alert-bg-color);
  z-index: 10;
  position: absolute;
  top: 60px;
  left: 50%;
  margin-left: -170px;
  padding: 0 20px;
  width: 300px;
  height: 40px;
  border-radius: 10px;
  text-align: center;
  line-height: 40px;
  cursor: pointer;
}
.hide-ui #milieu-escape,
body:not(.milieu-not-default) #milieu-escape {
  display: none;
}
@supports (top: env(safe-area-inset-top)) {
  #milieu-escape {
    top: calc(60px + env(safe-area-inset-top));
  }
}


/* ============================================================ */
/* Lightbox */

.lightbox {
  display: block;
  position: fixed;
  left: 0; top: 0; right: 0; bottom: 0;
  background-color: rgba(0,0,0,0.9);
  cursor: zoom-out;
  z-index: 9999;
}
.lightbox > * {
  position: absolute;
  left: 10%; top: 10%; right: 10%; bottom: 10%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}

/* ============================================================ */
/* Promo */

#promo-hover {
  color: var(--alert-fg-color);
  background-color: var(--alert-bg-color);
  z-index: 10;
  position: absolute;
  bottom: 120px;
  left: 50%;
  margin-left: -160px;
  padding: 20px 20px;
  width: 280px;
  min-height: 40px;
  border-radius: 10px;
  text-align: center;

  font-size: 16px;
  font-family: var(--font-family-title);
  line-height: 20px;
  cursor: pointer;

  animation: fadein 1s linear 1 forwards;
}
#promo-hover a:not(:hover) { text-decoration: none; }

#promo-closebtn { filter: invert(100%); }

@media only screen and (max-width: 640px) { #promo-hover { bottom: 60px; } }
:-webkit-full-screen #promo-hover { bottom: 15px; }
:fullscreen #promo-hover { bottom: 15px; }
.hide-footer #promo-hover { bottom: 15px; }
body:not(.show-promo) #promo-hover {
  display: none;
}

@keyframes fadein {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* ============================================================ */
/* Cookies */

#cookies {
  color: var(--alert-fg-color);
  background-color: var(--alert-bg-color);
  z-index: 9999;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 45px;
  text-align: center;
  line-height: 45px;
  font-size: 14pt;
}
body:not(.cookies-not-accepted) #cookies {
  display: none;
}
@supports (padding: env(safe-area-inset-bottom)) {
  #cookies {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

#cookies button {
  font-size: 14pt;
  font-weight: bold;
}
#cookies a {
  color: #e02020;
  font-weight: bold;
}
#cookies a:not(:hover) { text-decoration: none; }

/* ============================================================ */
/* Scripting Disabled */

noscript div {
  display: block;
  position: absolute;
  top: 50%; left: 50%;
  width: 400px;
  height: 200px;
  margin-top: -100px;
  margin-left: -200px;
  text-align: center;
  line-height: 200px;
  z-index: 9999;
  color: white;
  background-color: inherit;
  border: 2px solid white;
}

/* ============================================================ */
/* Browser-specific Hacks */

/* Buttons - FF */
@supports selector(::-moz-focus-inner) {
  ::-moz-focus-inner {
    padding: 0;
  }
}

/* Scrollbars - Chrome/Safari */
@supports selector(::-webkit-scrollbar) {
  ::-webkit-scrollbar { background-color: transparent; width: 6px; height: 6px; }
  ::-webkit-scrollbar-thumb { background-color: #888; }
  ::-webkit-scrollbar-thumb:hover { background-color: #444; }

  #legendBox::-webkit-scrollbar-thumb { background-color: #444; }
  #legendBox::-webkit-scrollbar-thumb:hover { background-color: #888; }
}

/* ============================================================ */
/* Images */

:root {
  /* Map background */
  --checkerboard-dark: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" height="32" width="32"><path d="M0 0h32v32H0z"/><path fill="%23404040" d="M0 0h16v16H0zM16 16h16v16H16z"/></svg>');
  --checkerboard-lite: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" height="32" width="32"><path fill="white" d="M0 0h32v32H0z"/><path fill="%23D0D0D0" d="M0 0h16v16H0zM16 16h16v16H16z"/></svg>');

  /* Button symbols */

  --close-symbol: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMS44OCIgaGVpZ2h0PSIxMS44OCI+PHBhdGggZD0iTTEuOTUgMEwwIDEuOTNsNCA0LjAxLTQgNCAxLjkzIDEuOTQgNC4wMS00IDQgNCAxLjk0LTEuOTMtNC00LjAxIDQtNEw5Ljk1IDBsLTQgNC00LjAyLTR6Ii8+PC9zdmc+);

  --print-symbol: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZD0iTTIgMHY1QzEgNSAwIDYgMCA3djRoMnY0aDEydi00aDJWN2MwLTEtMS0yLTItMlYwSDJ6bTEgMWgxMHY0SDNWMXptMTEgNWExIDEgMCAwIDEgMSAxIDEgMSAwIDAgMS0xIDEgMSAxIDAgMCAxLTEtMSAxIDEgMCAwIDEgMS0xek0zIDloMTB2NUgzVjl6bTEgMXYxaDh2LTFINHptMCAydjFoOHYtMUg0eiIvPjwvc3ZnPgo=);

  --download-symbol: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZD0iTTggM3Y4TTExIDhsLTMgMyBNMyAxMXYzTTEzIDExdjNNMyAxNGgxME01IDhsMyAzIiBzdHlsZT0ic3Ryb2tlOiMwMDA7c3Ryb2tlLXdpZHRoOjEuNTtzdHJva2UtbGluZWNhcDpyb3VuZCIvPjwvc3ZnPgo=');

  --copy-symbol: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2UtbGluZWNhcD0ic3F1YXJlIiBzdHJva2Utd2lkdGg9IjEuMzIiIGQ9Ik00LjYzIDEyLjM0SDEuNjZWLjY2aDkuNjh2Mi45MiIvPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2Utd2lkdGg9IjEuMzIiIGQ9Ik00LjY2IDMuNjZoOS42OHYxMS42OEg0LjY2eiIvPjwvc3ZnPgo=);

  --search-symbol: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNS42NyIgaGVpZ2h0PSIxNS42NyI+PHBhdGggZD0iTTEuNzggMS43OGE2IDYuMDUgNDUgMCAwLS4wMyA4LjUyIDYgNi4wNSA0NSAwIDAgOC4xOS4yN2wuNDcuNDctLjQuMzkgNC4yNSA0LjI0IDEuNDEtMS40MS00LjI0LTQuMjQtLjQuMzktLjQ2LS40N2E2IDYuMDUgNDUgMCAwLS4yNy04LjIgNiA2LjA1IDQ1IDAgMC04LjUyLjA0ek0zLjIgMy4yYTQgNC4wMyA0NSAwIDEgNS42OC0uMDMgNCA0LjAzIDQ1IDAgMS0uMDMgNS42OCA0IDQuMDMgNDUgMCAxLTUuNjguMDNBNCA0LjAzIDQ1IDAgMSAzLjIgMy4yeiIvPjwvc3ZnPg==);

  --swap-symbol: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSIxNC40Ij48cGF0aCBkPSJNMTAuNSAwTDcuMDIgMy44M2gyLjIydjkuMzdoMi42VjMuODNIMTR6bS03IDE0LjRMMCAxMC41N2gyLjIyVjEuMmgyLjZ2OS4zOGgyLjE1eiIvPjwvc3ZnPgo=);

  --route-symbol: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMy4xNSIgaGVpZ2h0PSIxMS4xNSI+PHBhdGggZD0iTTIwLjM3IDBhMi43OSAyLjc5IDAgMCAwLTIuNCA0LjJsLTMuMzIgMy4zNy01LjQxLTUuNTRhLjg1Ljg1IDAgMCAwLS42MS0uMjYuODUuODUgMCAwIDAtLjYuMjRMNC4wNiA1LjljLS4zOS0uMi0uODItLjMyLTEuMjYtLjMyQTIuNzkgMi43OSAwIDEgMCA1LjI2IDcuMUw4LjYgMy44Mmw1LjQzIDUuNTZhLjg1Ljg1IDAgMCAwIDEuMiAwbDQtNC4wNEEyLjc5IDIuNzkgMCAxIDAgMjAuMzYgMHoiLz48L3N2Zz4K);

  --menu-symbol: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMyIgaGVpZ2h0PSIxNSI+PHJlY3Qgd2lkdGg9IjEzIiBoZWlnaHQ9IjMiIHk9IjYiIHJ5PSIwIi8+PHJlY3Qgd2lkdGg9IjEzIiBoZWlnaHQ9IjMiIHk9IjEyIiByeT0iMCIvPjxyZWN0IHdpZHRoPSIxMyIgaGVpZ2h0PSIzIiByeT0iMCIvPjwvc3ZnPg==);

  --home-symbol: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZD0iTTcuMjkgOC45MnY1LjQ2aC01LjVWOC4wOUguMjNMOC4xIDEuNjJsMy4yOCAyLjgxVjIuNTdoMS4zNXYyLjg3bDMuMDQgMi42NWgtMS41NXY2LjI5aC0zLjg1VjguOTJ6Ii8+PC9zdmc+Cg==);

  --key-symbol: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMy40NiIgaGVpZ2h0PSIxMSI+PHBhdGggZD0iTTUuNSAwYTUuNSA1LjUgMCAxIDAgNS4yMiA3LjIyaDMuNDd2Mi4xNWMwIC4zMi4yNS41OC41Ny41OGgyLjNhLjU3LjU3IDAgMCAwIC41OC0uNThWNy4yMkgyMHYyLjE1YzAgLjMyLjI2LjU4LjU4LjU4aDIuM2EuNTcuNTcgMCAwIDAgLjU3LS41OFY0LjRhLjU3LjU3IDAgMCAwLS40Mi0uNTUuNTcuNTcgMCAwIDAtLjI4LS4wOEgxMC43QTUuNSA1LjUgMCAwIDAgNS41IDB6bTAgMy42MmExLjg4IDEuODggMCAxIDEgMCAzLjc2IDEuODggMS44OCAwIDAgMSAwLTMuNzZ6IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4=);

  --gear-symbol: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMy4xNyIgaGVpZ2h0PSIxMy4xNyI+PHBhdGggZmlsbD0icmVkIiBkPSJNNS4xOCAwdjEuNzlhNSA1IDAgMCAwLTEgLjRMMi45Mi45NS45NCAyLjkyIDIuMiA0LjJhNSA1IDAgMCAwLS40MS45OUgwdjIuODFoMS43OWE1IDUgMCAwIDAgLjQgMUwuOTUgMTAuMjVsMS45OCAxLjk4IDEuMjctMS4yNmE1IDUgMCAwIDAgLjk5LjQxdjEuNzloMi44MXYtMS43OWE1IDUgMCAwIDAgMS0uNGwxLjI2IDEuMjUgMS45OC0xLjk4LTEuMjYtMS4yN2E1IDUgMCAwIDAgLjQxLS45OWgxLjc5VjUuMThoLTEuNzlhNSA1IDAgMCAwLS40LTFsMS4yNS0xLjI2TDEwLjI1Ljk0IDguOTggMi4yQTUgNSAwIDAgMCA4IDEuNzlWMEg1LjE4em0xLjQgMy42OGEyLjkgMi45IDAgMCAxIDIuOSAyLjkgMi45IDIuOSAwIDAgMS0yLjkgMi45IDIuOSAyLjkgMCAwIDEtMi45LTIuOSAyLjkgMi45IDAgMCAxIDIuOS0yLjl6Ii8+PC9zdmc+Cg==);

  --flask-symbol: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZmlsbD0icmVkIiBkPSJNNi4xNy4yM2MtMS44MyAwLTEuODMgMS44MiAwIDEuODJWNS43TDMuNDMgMTAuM2MtMi43NSAzLjY1LTEuODMgNS40OCAwIDUuNDhoOS4xNGMxLjgzIDAgMi43NS0xLjgzIDAtNS40OEw5LjgzIDUuN1YyLjA1YzEuODMgMCAxLjgzLTEuODIgMC0xLjgyem0uOTIgMS44Mkg4Ljl2NC41OGwyLjc1IDQuNTdINC4zNEw3LjEgNi42M3oiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPgo=);

  --clock-symbol: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNS43MSIgaGVpZ2h0PSIxNS43MSI+PHBhdGggZmlsbD0icmVkIiBkPSJNNy44NiAwQTcuODYgNy44NiAwIDAgMCAwIDcuODZhNy44NiA3Ljg2IDAgMCAwIDcuODYgNy44NSA3Ljg2IDcuODYgMCAwIDAgNy44NS03Ljg1QTcuODYgNy44NiAwIDAgMCA3Ljg2IDB6bTAgMi4wNWE1LjggNS44IDAgMCAxIDUuOCA1LjggNS44IDUuOCAwIDAgMS01LjggNS44MSA1LjggNS44IDAgMCAxLTUuOC01LjggNS44IDUuOCAwIDAgMSA1LjgtNS44em0tMS4xIDEuMTNMNi43IDguMDVhMS4wNiAxLjA2IDAgMCAwIC41OS45NmwzLjU1IDEuNzguOTUtMS45LTIuOTctMS40Ny4wNi00LjIxLTIuMTItLjAzeiIvPjwvc3ZnPgo=);

  --share-symbol: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZmlsbD0icmVkIiBkPSJNMTAuNzguNTl2My4wNXMtNS4wMy42Ny01LjkzIDUuNTVjMy4xNS0zLjM2IDUuOTMtMi41IDUuOTMtMi41djMuMDRsNS00LjU3LTUtNC41N3pNLjIgNC4zNHYxMS4wN2gxNC44NlY5Ljg2bC0xLjc3IDEuNDF2Mi4zN0gxLjk4VjUuOTdoLjczbDEuMjctMS42M0guMjF6Ii8+PC9zdmc+Cg==);

  --help-symbol: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZmlsbD0icmVkIiBkPSJNNi40OCAxMi43NWgzLjE4djMuMDJINi40OHYtMy4wMnpNMi42IDUuMjVxLjEzLTIuOTggMi4xMi00LjIyIDEuMjYtLjggMy4xLS44IDIuNCAwIDQgMS4xM3QxLjYgMy4zNHEwIDEuMzUtLjcgMi4yOC0uNC41Ny0xLjU1IDEuNDRMMTAuNCA5cS0uNjIuNDctLjgyIDEuMS0uMTMuMzktLjE0IDEuMjJINi41NnEuMDYtMS43Ni4zNC0yLjQzLjI4LS42OCAxLjQzLTEuNTVsLjc4LS42cS4zOC0uMjguNjItLjYxLjQzLS41OC40My0xLjI2IDAtLjgtLjQ4LTEuNDQtLjQ3LS42Ni0xLjczLS42Ni0xLjI0IDAtMS43Ni44dC0uNTIgMS42N0gyLjZ6Ii8+PC9zdmc+Cg==);

  --plus-symbol: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMyIgaGVpZ2h0PSIxMyI+PHBhdGggZD0iTTUgMHY1SDB2M2g1djVoM1Y4aDVWNUg4VjB6Ii8+PC9zdmc+);

  --minus-symbol: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMyIgaGVpZ2h0PSIzIj48cmVjdCB3aWR0aD0iMTMiIGhlaWdodD0iMyIgcnk9IjAiLz48L3N2Zz4=);

  --tilt-symbol: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZD0iTTIuODMgMi41NmwtLjY5IDQuMjhINy4xVjIuNTZIMi44M3ptNi4wOCAwdjQuMjhoNC45NWwtLjY4LTQuMjhIOC45em0tNyA1Ljc0bC0uODIgNS4xNGg2VjguM0gxLjkxem03IDB2NS4xNGg2TDE0LjEgOC4zSDguOTF6Ii8+PC9zdmc+);

  --fullscreen-symbol: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZD0iTTAgMGg2LjV2Mi41aC00djRIMHptMTYgMEg5LjV2Mi41aDR2NEgxNnpNMCAxNmg2LjV2LTIuNWgtNHYtNEgwem0xNiAwSDkuNXYtMi41aDRWOUgxNnoiLz48L3N2Zz4=);

  --exitfullscreen-symbol: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZD0iTTYuNSA2LjVIMFY0aDRWMGgyLjV6bTMgMEgxNlY0aC00VjBIOS41em0tMyAzSDBWMTJoNHY0aDIuNXptMyAwSDE2VjEyaC00djRIOS41eiIvPjwvc3ZnPg==);

  /* Widgets */

  --chevron-left: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZD0iTTEyLjM0IDMuMkwxMC40IDEuMjYgMy42NyA4bDYuNzMgNi43NCAxLjkzLTEuOTRMNy41NCA4bDQuOC00Ljh6Ii8+PC9zdmc+);

  --chevron-right: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZD0iTTMuNjcgMy4yTDUuNiAxLjI2IDEyLjMzIDggNS42IDE0Ljc0IDMuNjcgMTIuOCA4LjQ3IDhsLTQuOC00Ljh6Ii8+PC9zdmc+);

  --chevron-down: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZD0iTTMuMiAxMi4zNEwxLjI2IDEwLjQgOCAzLjY3bDYuNzQgNi43My0xLjk0IDEuOTRMOCA3LjU0bC00LjggNC44eiIvPjwvc3ZnPg==);

  --chevron-up: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZD0iTTMuMiAzLjY2TDEuMjYgNS42IDggMTIuMzNsNi43NC02LjczLTEuOTQtMS45NEw4IDguNDZsLTQuOC00Ljh6Ii8+PC9zdmc+);

  --checkbox-unchecked: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8.73 5.29" height="20" width="33"><g transform="translate(163.1 -206.83)"><circle r="2.34" transform="scale(1 -1)" cx="-160.38" cy="-209.48" fill="%23b3b3b3"/><path d="M-160.39 207.83c-1-.04-1.8 1.06-1.47 2 .2.69.9 1.15 1.6 1.1l4.02-.01c.98 0 1.75-1.08 1.43-2-.2-.69-.9-1.14-1.6-1.1h-3.98z" fill="%23b3b3b3"/><circle r="2.23" cy="209.4" cx="-160.38" fill="%23fafafa"/></g></svg>');

  --checkbox-checked: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="33" height="20" viewBox="0 0 8.73 5.29"><g transform="translate(163.1 -206.83)"><circle cy="-209.48" cx="157.08" transform="scale(-1)" r="2.34" fill="%23b3b3b3"/><path d="M-157.08 207.83c1-.04 1.81 1.06 1.48 2-.2.69-.9 1.15-1.6 1.1l-4.02-.01c-.99 0-1.75-1.08-1.43-2 .2-.69.9-1.14 1.6-1.1h3.97z" fill="%23ffa9a9"/><circle cx="157.08" cy="209.4" r="2.23" transform="scale(-1 1)" fill="red"/></g></svg>');

  --radio-checked: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3.97 3.17" height="12" width="15"><path d="M.07 1.71l1.39 1.4L3.89.66 3.32.09 1.46 1.94l-.81-.81z" fill="red"/></svg>');

  /* Stops on route display */

  --route-stop: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAABACAMAAAAkowekAAAAXVBMVEUAAAAEgAQEgAQEgAQEgAQFgAUAgAAFgAUEgAQEgQQDgAMFgQUIgggAfQAEgAQFgQUFgAUEgQQEgAQGgAYEgAQFgAUEgQQEgAQFgAUFgAUEggQAfQAFiAUEgwQFiwW93JAKAAAAHHRSTlMA/YN6+GII1ol8UzUfEOXPmHRFLPDcwLWgbj0ZMLiehgAAAJNJREFUOMvtjlkWgzAMAwVN2LdC98rc/5g1cUPLHTIfedYkfhEC/ez93GMnH4SUoSosdiMlU2QtOyhFSZcFHK/bWrU6MSGOE/C+iCVTHRrqsBt6nPnNsjnmqFUYQVTwR/HEYsvxbIE7/769AVhEYjHRB0ojNEFpEGhHa1W+EJmo9489FqEdax0i9SZy/DglkUQS+ADPkhRvsxWe1wAAAABJRU5ErkJggg==);

  --route-end: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAY1BMVEUAAAAEgQQEgAQEgAQEgAQEgQQEgAQFgQUGfwYDfwMFgQUEgAQFgAUFgQUFgAUEgQQEgAQFgQUHfgcAfQAEgQQFgAUEgAQEgAQEgAQEgAQEgAQFgQUEfwQEgQQFiAUFiQUEhASbbATQAAAAHXRSTlMA+/34e/Q8Xicc4bSmnZZYRy8jE/DRycWriIFxQjzjP6sAAACGSURBVBjTZY/pEsMgCIQBNdYcTdL7Enj/p6w6pmMn369lYWCBwslbOwfYCA9kEXbTGQrdRSIiUpT+UMadGooJMtznmUFMrBiZANbUqnUSLsCbMf4gnuHYGih2b9g/gz10Ss1STElu3JwdctAkajB1JapXxgwxLfWZqzKz6H2FjeU5jq9PkV+jnBB2/Qv6fAAAAABJRU5ErkJggg==);

  --loading-spinner: url(data:image/gif;base64,R0lGODlhFAAUAPYLAP///wAAAe/v74eHh39/gI+Pjw8PD5+fn9/f39fX101NTW9vb1xcXD09PT4+PqCgoK+vr7OzsyEhIRcXFw4ODh0dHV9fX0BAQICAgGBgYD8/Px4eHqenp8fHx7+/v7e3t/f39w0NDefn52VlZTs7Oy8vL1dXWDExMTAwMFNTUwsLC1BQUGhoaE9PT09PUMLCwoaGhiwsLH9/f5CQkMnJydHR0V1dXQwMDDw8PHBwcC0tLWlpaU5OThgYGCIiIsDAwBwcHDIyMlFRURsbGwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQFBgALACH+GE9wdGltaXplZCB3aXRoIGV6Z2lmLmNvbQAsAAAAABQAFAAABo1AgHAIQBgCSNRMQGwWOSOkNGA4OIWdQcGTIpFC05yTQ/iAmlxphphNXIUFqbU4ML+FB+QGXzjfhQ1IVnV/Qx5JAgQIhUNgAQkETIwAJEiQkoyVAYmLk44AhIyHASUAHH2MDEh9IqF/KlSSbX8JJidzfHZjBBxXWVsJAgIJHgUDHXcCZATMzByYf8PBb0EAIfkEBQYAGAAsBwAAAA0AEwAABUIgICSJIDxYqg5ES0gppKaIiUzqNc9Cs/8xoBBjEAwVqcJwyWw6n9Bc6iA8BDAVALAQ6AoZ3YAFGAkvhg7KAcAGhAAAIfkEBQYABgAsCAAAAAwAFAAABktAg9AAKA6PwgFHAEAOPYVBp+ksfgismVMIgCW3Bg/42BgjNeOAeS2MrdXsFntbEFIEWwrY43DSdjoBcAYWeAYugol+IYItB0xFRUEAIfkEBQYADAAsBAADABAAEQAABk9AhnBIFHIAxaQwQegglUTAZyB4QoWgwvE6lI4Q3OGKYQibk6SzOlkyK4SFdfgQIJpuNs91ITwF/hQ4OBRFTwcUf3VEFUkCBSV/fQwAlJVBACH5BAUGAAYALAEABwATAA0AAAZJQINwSCwKBwCjcpggCJZLASEBVUqp1WLzGckKET2fwBGweRvCAyUQKFQhxAM7cPDCDYu5w8gbaogWAV5KFUsUUAB1RQUCAI6OQQAh+QQFBgAGACwAAAgAFAAMAAAGTsCXq2YoGo/IYijASjqPgYDuSY0GqM9W1IMtAjwDwOHq6BpABQ4AYfZ+BgLAkTJ7ggkdedFy/CHLBix6RQJIUgZXRgVPFFSLT4UtRxpOQQAh+QQFBgAKACwAAAQAEQAQAAAHW4AKB0EmCoaHiIcCBgE3iY+GMgEBDJCPJZMelomTIZucCiSfj6KjiBSmhiWprI8AQIYHrQoBmwAJkDyahwAgHwQchgALpzgKQh4FAx0ApiMcAs2PBauGFQi9vYEAIfkEBQYABQAsAAABAA0AEwAAB02ABYIFBwYag4iCCwGMEYmCFowBDI+CkgeVAEAFAZiVng2VoqNDo6anqKmVMoI8owIUqoIQqQ4CooeCPQkCAgmJtAUSBMTEjwe9CbwAgQAh+QQFBgAHACwAAAAADAAUAAAGTMCDUIh4rAIByms4RDpdQkGmGYixakxhw5MdhgpdhEEI7pqzrXM2oBbG2nAh+6yBlx1xrllGBpwLLAQfIH5dAB0DBXqGAhwDagCRTEEAIfkEBQYADQAsAAAAABAAEQAABlLAhlAIOKCEgQAKIxgOK85GMmA4EC3OEIkUmp6Ei6jTw1CZnAGreNgUqtfCglABd5bq8BA+Str7xRQNKX8IIx4AfkUFIIkiAx+IewAdBAl/RX5BACH5BAUGABQALAAAAAATAA0AAAVFICWKAjaOD3CuxjpujyuvQXZqo+I2Qb+IkNnp0AscTkFhoWc4UhrCESPgEEgmgugoQikhtKsEIQseicnlLuGbpgAGbVEIACH5BAUGAAgALAAAAAAUAAwAAAZQQIRwOLsEjoEVQgBoOp2yoVRoODydBeQREQtMmU/WsTGdZp4dAsxzxYakANHgAyjblwBOAdRuN45Wc31tHkctd4hIiHddXotlYm+PUzQuL0EAOw==);
}