/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/terriajs-typings-for-css-modules-loader/src/index.js!./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[5].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[5].use[4]!./lib/Styles/variables.scss ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************/
@import url(https://fonts.googleapis.com/css?family=Inter:300,400,500,400italic,600,700&display=swap);
/*!*******************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/terriajs-typings-for-css-modules-loader/src/index.js!./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[5].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[5].use[4]!./lib/Views/global.scss ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************************************/
@import url(https://fonts.googleapis.com/css?family=Inter:300,400,500,400italic,600,700&display=swap);
/*!***************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/terriajs-typings-for-css-modules-loader/src/index.js!./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[5].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[5].use[4]!./lib/Styles/variables.scss (1) ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Default variables for TerriaJS styles.
 *
 * These variables are default theme values used throughout TerriaJS.
 * All variables use the !default flag to allow for overriding.
 *
 * USING VARIABLES:
 * These variables are made available to the rest of codebase as webpack `terriajs-variables`
 * alias, and can be used by importing the ./_variables.scss file (i.e. `@use "../Sass/common/_variables";`)
 *
 * OVERRIDING VARIABLES:
 * To override variables values in your application:
 * 1. Create a custom variables file in your app
 * 2. Configure the `terriajs-variables` webpack alias to point to your custom variables file
 * 3. In your custom variables file, override specific variables values using the `@use ... with` syntax
 * 
 * For a complete example, see the `variables.scss` file in the TerriaMap repository.
 */
/**
// To customise the look of your map, uncomment and change values here (remove line above after uncommenting) and in lib/Views/global.scss

@forward "~terriajs/lib/Sass/common/_default_variables.scss" with ( 
    // If your logo is big, set this to give it more room.
    //$logo-height: 120px;

    // If using a non-standard font, remember to include an @import statement in global.scss
    $font-base: 'Josefin Sans', sans-serif;
    $font-pop: $font-base; // If you just want to use one font throughout, do this.

    // These variables are for buttons and text.
    // "color-secondary" should be a lighter color than "color-primary" but still readable contrasted with white.
    $color-primary: maroon;
    $color-secondary: hsl(60,80%,60%); // or: lighten($color-primary, 20%);

    // These variables set background panel colors
    $dark: hsl(0,30%,30%);
    $dark-with-overlay: hsl(0,30%,30%);;
    $dark-lighter: hsl(0,30%,50%);

    // You might find it helpful to define these and use them.
    $color-primary-light:lighten($color-primary,10%);
    $color-primary-dark:darken($color-primary,10%);
    $dark-darker: hsl(0,30%,15%);
);
*/
/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/terriajs-typings-for-css-modules-loader/src/index.js!./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[5].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[5].use[4]!./lib/Views/global.scss (1) ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/**
 * Default variables for TerriaJS styles.
 *
 * These variables are default theme values used throughout TerriaJS.
 * All variables use the !default flag to allow for overriding.
 *
 * USING VARIABLES:
 * These variables are made available to the rest of codebase as webpack `terriajs-variables`
 * alias, and can be used by importing the ./_variables.scss file (i.e. `@use "../Sass/common/_variables";`)
 *
 * OVERRIDING VARIABLES:
 * To override variables values in your application:
 * 1. Create a custom variables file in your app
 * 2. Configure the `terriajs-variables` webpack alias to point to your custom variables file
 * 3. In your custom variables file, override specific variables values using the `@use ... with` syntax
 * 
 * For a complete example, see the `variables.scss` file in the TerriaMap repository.
 */
/**
// To customise the look of your map, uncomment and change values here (remove line above after uncommenting) and in lib/Views/global.scss

@forward "~terriajs/lib/Sass/common/_default_variables.scss" with ( 
    // If your logo is big, set this to give it more room.
    //$logo-height: 120px;

    // If using a non-standard font, remember to include an @import statement in global.scss
    $font-base: 'Josefin Sans', sans-serif;
    $font-pop: $font-base; // If you just want to use one font throughout, do this.

    // These variables are for buttons and text.
    // "color-secondary" should be a lighter color than "color-primary" but still readable contrasted with white.
    $color-primary: maroon;
    $color-secondary: hsl(60,80%,60%); // or: lighten($color-primary, 20%);

    // These variables set background panel colors
    $dark: hsl(0,30%,30%);
    $dark-with-overlay: hsl(0,30%,30%);;
    $dark-lighter: hsl(0,30%,50%);

    // You might find it helpful to define these and use them.
    $color-primary-light:lighten($color-primary,10%);
    $color-primary-dark:darken($color-primary,10%);
    $dark-darker: hsl(0,30%,15%);
);
*/
/* ── windIQ Design-Tokens ──────────────────────────────────────────────────────
 * Bisher stand dieser Block wortgleich am Kopf jeder Panel-scss ("Design-Tokens
 * identisch zu den übrigen windIQ-Panels"). Mit der Icon-Rail kommen weitere
 * Flächen dazu, die dieselben Werte brauchen — deshalb einmal zentral.
 *
 * Einbinden mit:  @use "../Styles/windiq-tokens" as t;   →  t.$primary
 * Die bestehenden Panel-scss bleiben vorerst unangetastet; sie wandern
 * schrittweise hierher, wenn sie ohnehin angefasst werden.
 * ──────────────────────────────────────────────────────────────────────────── */
/* Flächen */
/* Kante zwischen zwei Flächen, die aneinanderstossen (Rail/Panel, Panelfuss).
   Der Rand einer freistehenden Fläche ist ein anderer — dafür $float-bdr. */
/* Weisse Schleier auf dunklem Grund. Es standen sechs davon in den Dateien
   (0.04 / 0.06 / 0.07 / 0.1 / 0.12 / 0.2) — Abstufungen, die niemand sehen
   kann, die aber dafür sorgten, dass zwei Knöpfe nebeneinander verschieden
   hell aufleuchteten. Zwei Stufen reichen: eine für Hover, eine für den
   Druck und für Ränder, die sich vom Grundrand abheben sollen. */
/* Dritte Stufe, nur als Rand: der Hover-Rand einer Fläche, die schon einen
   Rand hat. $border (0.15) und $veil-strong (0.12) liegen so dicht am
   Ruhezustand, dass der Wechsel nicht auffällt — genau dafür ist diese hier. */
/* Akzent */
/* Die Rail und ihr aktiver Zustand nutzen den helleren Teal-Ton aus dem
   Entwurf — auf der dunklen Rail liest sich #2e9a96 zu stumpf. */
/* Dieselbe Fläche eine Stufe kräftiger — für den Hover auf einer bereits
   akzentuierten Fläche (Aktionszeile „Suche 'X' im Datenkatalog"). */
/* Schmale Teal-Scrollbar in Panels und Trefferlisten. */
/* Rahmen und Schein für den Fokuszustand von Eingaben. Bewusst zwei Stufen
   desselben Tons statt einer zweiten Farbe: der Fokus soll auffallen, aber
   nicht als eigene Bedeutungsebene gelesen werden. */
/* Schrift auf der hellen Akzentfläche (Läufer des 2D/3D-Schalters). Reines
   Schwarz wäre auf dem Teal zu hart. */
/* Text */
/* Zwischenstufe zwischen $text-dim und $text-muted. Sie ist entstanden, weil
   der Datenkatalog eine Rangfolge braucht (Blätter kräftiger als Ordner) und
   trotzdem beide Stufen über 4,5:1 liegen müssen: $text-muted trägt auf der
   Panelfläche nur 3,96:1, $text-dim gehört den Blättern. Diese Stufe misst
   4,91:1. Überall dort verwenden, wo Text eine Stufe zurücktreten soll, ohne
   die Lesbarkeitsschwelle zu unterschreiten — $text-muted bleibt Icons und
   Metaspalten vorbehalten, für die 3:1 genügt. */
/* ── Zustandsfarben ───────────────────────────────────────────────────────────
 * Diese vier Töne standen bis eben in vier Panel-Stylesheets kopiert
 * (tr10, repraesentativitaet, bestandsanlagen, legend) — mit dem Ergebnis, dass
 * derselbe Zustand je Modul anders aussah und ein harter Ladefehler in
 * Bestandsanlagen mangels Rot in Warngelb erschien.
 *
 * WICHTIG — nicht zu verwechseln mit den Klassenfarben der Repraesentativitaet
 * ($klasse-repraesentativ #00B140 / -bedingt / -nicht). Die spiegeln
 * KLASSEN_FARBE aus lib/Core/trixApi.js und müssen mit den Punkten auf der
 * Karte übereinstimmen; sie sind Kartensignaturen, keine Zustandsanzeige. Dass
 * dort ein zweites Grün vorkommt, ist deshalb kein Fehler, sondern eine zweite
 * Bedeutung. Wo beide in einem Panel nebeneinander stehen, muss die Form sie
 * trennen (Punkt = Klasse, Kasten = Zustand), nicht der Farbton.
 *
 * Die Textvarianten sind die aufgehellten Töne für Schrift auf dem dunklen
 * Grund; die Grundflächen und Ränder leiten sich aus demselben Wert ab, damit
 * je Bedeutung nur eine Farbe gepflegt wird.
 * ──────────────────────────────────────────────────────────────────────────── */
/* Rot für ein Bedienelement, das etwas entfernt (× in der Legende). Heller als
   $error: es steht auf dunklem Grund und muss als Fläche und als Symbol
   funktionieren, nicht nur als Randfarbe. */
/* Form */
/* Haarlinie zwischen Zeilen und Abschnitten. Schwächer als $border: die
   trennt Flächen, diese hier gliedert nur innerhalb einer Fläche. */
/* ── Bewegung ─────────────────────────────────────────────────────────────────
 * $transition oben ist die alte Allzweckkurve (Material-Standard). Sie bleibt
 * für Farb- und Layoutwechsel. Für alles, was der Nutzer als Bewegung liest,
 * stehen hier kräftigere Kurven: die eingebauten CSS-Easings sind zu weich und
 * lassen jede Animation zäh wirken.
 *   $ease-out     — Elemente, die auftauchen; startet schnell, wirkt sofort
 *   $ease-in-out  — Elemente, die auf dem Schirm wandern (Läufer im Schalter)
 *   $ease-drawer  — Schubladen; die iOS-Kurve aus Ionic, langer ruhiger Auslauf
 * Ein `ease-in` steht bewusst nicht dabei: es verzögert genau den Moment, in
 * dem der Nutzer hinsieht.
 * ──────────────────────────────────────────────────────────────────────────── */
/* Rückmeldung auf Druck/Hover, Zustandswechsel, Schubladen. */
/* Geometrie der neuen Oberfläche.
   Die Rail-Breiten stehen zusätzlich als CSS-Custom-Property am :root (siehe
   AppShell.jsx) — SCSS kennt den aktuellen Zustand nicht, Layoutregeln, die
   sich mit dem Aus-/Einklappen bewegen, müssen deshalb var(--wiq-rail-w)
   benutzen und nicht diese Werte. */
/* Der Entwurf nennt 396px. In der Praxis ist das zu eng: Repräsentativität und
   TR10 zeigen breite Tabellen, und der Datenblock plus Modulinhalt drängen
   sich sichtbar. 440px ist der Kompromiss — merklich mehr Luft, ohne dass das
   Panel bei 1440px Fensterbreite ein Drittel der Karte verdeckt. */
/* Höhe der Statusleiste (status-bar.scss) — sie liegt über allem und ist die
   untere Kante der bespielbaren Fläche. */
/* Breite von Terrias rechter Fusshälfte: Namensnennung der Datenanbieter
   (220px), Koordinatenanzeige (157px), Maßstabsbalken (84px) plus Abstände. Sie
   hängt am rechten Rand der Kartensektion und ist über alle Fensterbreiten
   konstant — nachgemessen bei 1000, 1280, 1600 und 1920px. Die linke Hälfte
   (status-bar.scss) darf deshalb genau alles bekommen, was davor übrig bleibt,
   und keinen Pixel mehr: überdruckt würde sonst zuerst die Namensnennung, und
   die verlangen die Datenanbieter lizenzrechtlich. */
/* ── Staffelung in der Tiefe ──────────────────────────────────────────────────
 * Die Reihenfolge ist die Bedienlogik von unten nach oben: das Modulpanel liegt
 * auf der Karte, die schwebenden Pillen darüber (ihre Aufklapplisten dürfen das
 * Panel überdecken), die Statusleiste über Terrias Fußzeile, die Rail über
 * allem davon — sie darf nie verdeckt sein. Der Startbildschirm liegt vor der
 * ganzen Oberfläche und ist der einzige Wert oberhalb der Staffel; er stand
 * vorher als 9999 daneben, was die Ordnung nur so lange trägt, wie niemand eine
 * zweite Ausnahme dazuschreibt.
 * ──────────────────────────────────────────────────────────────────────────── */
/* Zwei Sprossen brauchen eine Erklärung:
 *
 * $z-auf-karte — Elemente, die zur KARTE gehören und nicht zur Oberfläche:
 *   das Anlagen-Popup, die Mess-Sprechblasen. Sie liegen über dem Kartenbild,
 *   müssen aber unter Rail und Panel bleiben, sonst decken sie die Bedienung
 *   zu, wenn eine Anlage am linken Kartenrand liegt.
 *
 * $z-dialog — modale Dialoge (Import-Assistent). Über der Rail, weil ein Modal
 *   die ganze Oberfläche sperrt; unter dem Startbildschirm, weil der auch einen
 *   offenen Dialog verdecken muss, wenn neu geladen wird.
 *
 * $z-ueber-terria — die eine begründete Ausnahme, und zwar ausserhalb unserer
 *   Staffel, weil sie gegen einen FREMDEN Baum arbeitet: Aufklapplisten, die
 *   per Portal am <body> hängen und über Terrias Komponenten liegen müssen.
 *   Terrias höchster eigener Wert ist $notification-window-z-index: 99999
 *   (packages/terriajs/lib/Sass/common/_default_variables.scss); .top-element
 *   rechnet daraus 99989 (standard-user-interface.scss, mit !important) — im
 *   laufenden DOM an der FeatureInfo-Tafel nachgemessen. Ein Wert innerhalb
 *   unserer Staffel reicht nicht: #ui ist position:static/z-index:auto und
 *   bildet keinen Stapelkontext, unsere 100er stehen also direkt neben Terrias
 *   99989.
 *   GRENZE: Generic/TooltipWrapper.tsx rechnet frontComponentZIndex + 999999 + 2
 *   = 1000100. Darüber kommt dieser Wert nicht, und das ist richtig so — ein
 *   Tooltip gehört über eine Aufklappliste. */
/* ── Schwebende Flächen über der Karte ────────────────────────────────────────
 * Suchfeld, 2D/3D-Schalter, Legenden-Lasche, Trefferliste, Rail und Modulpanel
 * sind dasselbe Material: dunkler Grund, leicht durchscheinend, hinterlegt
 * unscharf. Genau das behauptete dieser Absatz schon vorher — die Werte gaben
 * es nur nicht her: zwei Grundfarben (#111827 für Rail und Panel, #0e1a22 für
 * die Pillen), vier Unschärfen (5/6/8/10px) und drei Randstärken. Nebeneinander
 * auf einer hellen Karte liest sich das als zwei verschiedene Materialien.
 *
 * Jetzt EIN Grundton ($dark, derselbe wie überall sonst in der Oberfläche), EINE
 * Unschärfe und EIN Rand für alles, was frei über der Karte steht. Was sich
 * unterscheiden darf, ist allein die Deckung: je höher eine Fläche liegt, desto
 * weniger scheint sie durch. ($border bleibt daneben bestehen — das ist die
 * Kante zwischen zwei aneinanderstossenden Flächen, keine Aussenkante.)
 * ──────────────────────────────────────────────────────────────────────────── */
/* Aufklappende Listen (Trefferliste der Suche) bekommen einen ruhigeren Radius
   — eine volle Pille würde die erste und letzte Zeile anschneiden. */
/* Eine Stärke für alle: 8px ist kräftig genug, dass Kartenbeschriftung unter
   der Fläche zu Textur wird, und schwach genug, dass der Compositor darunter
   nicht jede Kartenbewegung neu unscharf rechnen muss. */
/* Rechts im Band stehen feste Nachbarn, denen das mittig zentrierte Suchfeld
   ausweichen muss — auf breiten Schirmen fällt das nicht auf, auf schmalen
   sofort. Zwei Stufen:
     $float-rechts        — 2D/3D-Schalter: 21px Rand + 76px Breite + 14px Luft
     $float-rechts-lasche — zusätzlich die eingeklappte Legenden-Lasche, die
                            links daran anschliesst. Sie meldet keine Breite
                            (--wiq-legend-w ist dann 0), deshalb steht sie hier
                            als gemessener Wert: 245px bei „1 aktiv", 254px bei
                            „2 aktiv" — der Zähler lässt sie wachsen, deshalb
                            etwas Zugabe. */
/* Rail und Modulpanel gehören zum selben Material, liegen aber als Spalte fest
   am Rand statt frei über der Karte — sie decken deshalb stärker. */
/* Oberkante der Modulpanels: ganz oben, bündig mit der Rail.
   Das Panel hängt an der Rail und bildet mit ihr eine Fläche — dann darf es
   auch dort anfangen, wo die Rail anfängt. Das schwebende Band (Suchfeld,
   2D/3D, Legenden-Lasche) liegt nicht in dieser Spalte: das Suchfeld ist über
   der freien Kartenfläche zentriert, die beiden anderen sitzen rechts. Die
   frühere Oberkante von 62px hielt Platz für die Werkzeuggruppe frei, die
   inzwischen in die Rail gewandert ist — sie verschenkte nur noch Höhe.
   Unterkante = Oberkante der Statusleiste: beide Kanten treffen sich. */
/* Ränder auf Bildflächen (Vorschaukacheln der Grundkarten). Bilder bringen
   eigene Helligkeit mit — $float-bdr (9 % Weiß) verschwindet auf einer hellen
   Luftbildkachel. Zwei Stufen: ruhend und ausgewählt. */
/* Grund einer Tabellenkopfzeile bzw. einer abgesetzten Zeile innerhalb eines
   Panels — dunkler als die Panelfläche, damit die Kopfzeile beim Scrollen
   stehen bleiben kann, ohne den Inhalt durchscheinen zu lassen. */
/* Hover auf einer bereits gefüllten grauen Fläche ($dark-lighter). */
/* Flächen der schwebenden Panels.
   Vorher 0.82. Das war der Grund für rund ein Dutzend Kontrastbefunde quer
   durch alle Module: die Panelfläche über einer hellen Basiskarte maß real
   #333949 bis #515664 statt #111827, und damit fiel jeder gedämpfte Text auf
   2,9–4,0:1 — je nachdem, worüber das Panel gerade lag. Ein Kontrast, der mit
   dem Kartenausschnitt schwankt, ist kein Kontrast.
   0.93 lässt die Karte als Bewegung hinter dem Panel noch ahnen (darum geht es
   bei der Durchsicht), rechnet die Palette aber wieder verlässlich gegen
   $dark. Der Panelinhalt braucht keinen Durchblick — die Karte liegt daneben,
   nicht darunter.

   Gemessen über weisser Karte (der ungünstigste Fall):
     $text-muted  3,93 -> 5,75   (erst damit über 4,5)
     $text-soft   4,89 -> 7,14
     $text-dim    6,80 -> 9,93
     $primary     2,97 -> 4,34   bleibt UNTER 4,5 — der Akzentton taugt auch
                                 bei dichterem Panel nicht als Schriftfarbe.
                                 Für Text ist $primary-bright zuständig (6,81).
   Wer diesen Wert wieder senkt, holt sich rund ein Dutzend Kontrastbefunde
   zurück. */
/* Das Modulpanel hängt an der Rail und wirft deshalb keinen Schatten nach
   links — dort ist keine Karte, sondern die Rail. Versatz nach rechts plus
   negativer Spread halten den Schatten von der Rail fern. */
/**
 * Wrapper around TerriaJS variables allowing us to easy override them from TerriaMap. 
 * For the default values of variables check ./_default_variables.scss
 */
/* Mixin */
.leaflet-container {
  cursor: auto !important;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

 {
  /* required styles */
  /* Safari renders non-retina tile on retina better with this, but Chrome is worse */
  /* hack that prevents hw layers "stretching" when loading new tiles */
  /* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */
  /* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */
  /* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
  /* control positioning */
  /* zoom and fade animations */
  /* cursors */
  /* marker & overlays interactivity */
  /* visual tweaks */
  /* general typography */
  /* general toolbar styles */
  /* zoom control */
  /* layers control */
  /* attribution and scale controls */
  /* popup */
  /* div icon */
  /* Tooltip */
  /* Base styles for the element that has a tooltip */
  /* Directions */
}
.leaflet-pane, .leaflet-tile, .leaflet-marker-icon, .leaflet-marker-shadow, .leaflet-tile-container, .leaflet-pane > svg, .leaflet-pane > canvas, .leaflet-zoom-box, .leaflet-image-layer, .leaflet-layer {
  position: absolute;
  left: 0;
  top: 0;
}
.leaflet-container {
  overflow: hidden;
}
.leaflet-tile, .leaflet-marker-icon, .leaflet-marker-shadow {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}
.leaflet-safari .leaflet-tile {
  image-rendering: -webkit-optimize-contrast;
}
.leaflet-safari .leaflet-tile-container {
  width: 1600px;
  height: 1600px;
  -webkit-transform-origin: 0 0;
}
.leaflet-marker-icon, .leaflet-marker-shadow {
  display: block;
}
.leaflet-container .leaflet-overlay-pane svg, .leaflet-container .leaflet-marker-pane img, .leaflet-container .leaflet-shadow-pane img, .leaflet-container .leaflet-tile-pane img, .leaflet-container img.leaflet-image-layer {
  max-width: none !important;
}
.leaflet-container.leaflet-touch-zoom {
  -ms-touch-action: pan-x pan-y;
  touch-action: pan-x pan-y;
}
.leaflet-container.leaflet-touch-drag {
  -ms-touch-action: pinch-zoom;
}
.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
  -ms-touch-action: none;
  touch-action: none;
}
.leaflet-tile {
  width: 257px;
  height: 257px;
  filter: inherit;
  visibility: hidden;
}
.leaflet-tile-loaded {
  visibility: inherit;
}
.leaflet-zoom-box {
  width: 0;
  height: 0;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  z-index: 800;
}
.leaflet-overlay-pane svg {
  -moz-user-select: none;
}
.leaflet-pane {
  z-index: 400;
}
.leaflet-tile-pane {
  z-index: 200;
}
.leaflet-overlay-pane {
  z-index: 400;
}
.leaflet-shadow-pane {
  z-index: 500;
}
.leaflet-marker-pane {
  z-index: 600;
}
.leaflet-tooltip-pane {
  z-index: 650;
}
.leaflet-popup-pane {
  z-index: 700;
}
.leaflet-map-pane canvas {
  z-index: 100;
}
.leaflet-map-pane svg {
  z-index: 200;
}
.leaflet-vml-shape {
  width: 1px;
  height: 1px;
}
.lvml {
  behavior: url(#default#VML);
  display: inline-block;
  position: absolute;
}
.leaflet-control {
  position: relative;
  z-index: 800;
  pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
  pointer-events: auto;
}
.leaflet-top, .leaflet-bottom {
  position: absolute;
  z-index: 1000;
  pointer-events: none;
}
.leaflet-top {
  top: 0;
}
.leaflet-right {
  right: 0;
}
.leaflet-bottom {
  bottom: 0;
}
.leaflet-left {
  left: 0;
}
.leaflet-control {
  float: left;
  clear: both;
}
.leaflet-right .leaflet-control {
  float: right;
}
.leaflet-top .leaflet-control {
  margin-top: 10px;
}
.leaflet-bottom .leaflet-control {
  margin-bottom: 10px;
}
.leaflet-left .leaflet-control {
  margin-left: 10px;
}
.leaflet-right .leaflet-control {
  margin-right: 10px;
}
.leaflet-fade-anim .leaflet-tile {
  will-change: opacity;
}
.leaflet-fade-anim .leaflet-popup {
  opacity: 0;
  -webkit-transition: opacity 0.2s linear;
  -moz-transition: opacity 0.2s linear;
  -o-transition: opacity 0.2s linear;
  transition: opacity 0.2s linear;
}
.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
  opacity: 1;
}
.leaflet-zoom-animated {
  -webkit-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  transform-origin: 0 0;
}
.leaflet-zoom-anim .leaflet-zoom-animated {
  will-change: transform;
}
.leaflet-zoom-anim .leaflet-zoom-animated {
  -webkit-transition: -webkit-transform 0.25s cubic-bezier(0, 0, 0.25, 1);
  -moz-transition: -moz-transform 0.25s cubic-bezier(0, 0, 0.25, 1);
  -o-transition: -o-transform 0.25s cubic-bezier(0, 0, 0.25, 1);
  transition: transform 0.25s cubic-bezier(0, 0, 0.25, 1);
}
.leaflet-zoom-anim .leaflet-tile, .leaflet-pan-anim .leaflet-tile {
  -webkit-transition: none;
  -moz-transition: none;
  -o-transition: none;
  transition: none;
}
.leaflet-zoom-anim .leaflet-zoom-hide {
  visibility: hidden;
}
.leaflet-interactive {
  cursor: pointer;
}
.leaflet-grab {
  cursor: -webkit-grab;
  cursor: -moz-grab;
}
.leaflet-crosshair, .leaflet-crosshair .leaflet-interactive {
  cursor: crosshair;
}
.leaflet-popup-pane, .leaflet-control {
  cursor: auto;
}
.leaflet-dragging .leaflet-grab, .leaflet-dragging .leaflet-grab .leaflet-interactive, .leaflet-dragging .leaflet-marker-draggable {
  cursor: move;
  cursor: -webkit-grabbing;
  cursor: -moz-grabbing;
}
.leaflet-marker-icon, .leaflet-marker-shadow, .leaflet-image-layer, .leaflet-pane > svg path, .leaflet-tile-container {
  pointer-events: none;
}
.leaflet-marker-icon.leaflet-interactive, .leaflet-image-layer.leaflet-interactive, .leaflet-pane > svg path.leaflet-interactive {
  pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
  pointer-events: auto;
}
.leaflet-container {
  background: #ddd;
  outline: 0;
}
.leaflet-container a {
  color: #0078a8;
  text-decoration: none;
  color: #2E9A96;
}
.leaflet-container a:visited {
  color: #2E9A96;
}
.leaflet-container a.leaflet-active {
  outline: 2px solid orange;
}
.leaflet-zoom-box {
  border: 2px dotted #38f;
  background: rgba(255, 255, 255, 0.5);
}
.leaflet-container {
  font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
}
.leaflet-bar {
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
  border-radius: 4px;
}
.leaflet-bar a, .leaflet-bar a:hover {
  background-color: #fff;
  border-bottom: 1px solid #ccc;
  width: 26px;
  height: 26px;
  line-height: 26px;
  display: block;
  text-align: center;
  text-decoration: none;
  color: black;
}
.leaflet-bar a, .leaflet-control-layers-toggle {
  background-position: 50% 50%;
  background-repeat: no-repeat;
  display: block;
}
.leaflet-bar a:hover {
  background-color: #f4f4f4;
}
.leaflet-bar a:first-child {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
.leaflet-bar a:last-child {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  border-bottom: none;
}
.leaflet-bar a.leaflet-disabled {
  cursor: default;
  background-color: #f4f4f4;
  color: #bbb;
}
.leaflet-touch .leaflet-bar a {
  width: 30px;
  height: 30px;
  line-height: 30px;
}
.leaflet-control-zoom-in, .leaflet-control-zoom-out {
  font: bold 18px "Lucida Console", Monaco, monospace;
  text-indent: 1px;
}
.leaflet-control-zoom-out {
  font-size: 20px;
}
.leaflet-touch .leaflet-control-zoom-in {
  font-size: 22px;
}
.leaflet-touch .leaflet-control-zoom-out {
  font-size: 24px;
}
.leaflet-control-layers {
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
  background: #fff;
  border-radius: 5px;
}
.leaflet-control-layers-toggle {
  width: 36px;
  height: 36px;
}
.leaflet-retina .leaflet-control-layers-toggle {
  background-size: 26px 26px;
}
.leaflet-touch .leaflet-control-layers-toggle {
  width: 44px;
  height: 44px;
}
.leaflet-control-layers .leaflet-control-layers-list, .leaflet-control-layers-expanded .leaflet-control-layers-toggle {
  display: none;
}
.leaflet-control-layers-expanded .leaflet-control-layers-list {
  display: block;
  position: relative;
}
.leaflet-control-layers-expanded {
  padding: 6px 10px 6px 6px;
  color: #333;
  background: #fff;
}
.leaflet-control-layers-scrollbar {
  overflow-y: scroll;
  padding-right: 5px;
}
.leaflet-control-layers-selector {
  margin-top: 2px;
  position: relative;
  top: 1px;
}
.leaflet-control-layers label {
  display: block;
}
.leaflet-control-layers-separator {
  height: 0;
  border-top: 1px solid #ddd;
  margin: 5px -10px 5px -6px;
}
.leaflet-container .leaflet-control-attribution {
  background: #fff;
  background: rgba(255, 255, 255, 0.7);
  margin: 0;
}
.leaflet-control-attribution, .leaflet-control-scale-line {
  padding: 0 5px;
  color: #333;
}
.leaflet-control-attribution a {
  text-decoration: none;
}
.leaflet-control-attribution a:hover {
  text-decoration: underline;
}
.leaflet-container .leaflet-control-attribution, .leaflet-container .leaflet-control-scale {
  font-size: 11px;
}
.leaflet-left .leaflet-control-scale {
  margin-left: 5px;
}
.leaflet-bottom .leaflet-control-scale {
  margin-bottom: 5px;
}
.leaflet-control-scale-line {
  border: 2px solid #777;
  border-top: none;
  line-height: 1.1;
  padding: 2px 5px 1px;
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: #fff;
  background: rgba(255, 255, 255, 0.5);
}
.leaflet-control-scale-line:not(:first-child) {
  border-top: 2px solid #777;
  border-bottom: none;
  margin-top: -2px;
}
.leaflet-control-scale-line:not(:first-child):not(:last-child) {
  border-bottom: 2px solid #777;
}
.leaflet-touch .leaflet-control-attribution, .leaflet-touch .leaflet-control-layers, .leaflet-touch .leaflet-bar {
  box-shadow: none;
}
.leaflet-touch .leaflet-control-layers, .leaflet-touch .leaflet-bar {
  border: 2px solid rgba(0, 0, 0, 0.2);
  background-clip: padding-box;
}
.leaflet-popup {
  position: absolute;
  text-align: center;
  margin-bottom: 20px;
}
.leaflet-popup-content-wrapper {
  padding: 1px;
  text-align: left;
  border-radius: 12px;
}
.leaflet-popup-content {
  margin: 13px 19px;
  line-height: 1.4;
}
.leaflet-popup-content p {
  margin: 18px 0;
}
.leaflet-popup-tip-container {
  width: 40px;
  height: 20px;
  position: absolute;
  left: 50%;
  margin-left: -20px;
  overflow: hidden;
  pointer-events: none;
}
.leaflet-popup-tip {
  width: 17px;
  height: 17px;
  padding: 1px;
  margin: -10px auto 0;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
  background: white;
  color: #333;
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
}
.leaflet-container a.leaflet-popup-close-button {
  position: absolute;
  top: 0;
  right: 0;
  padding: 4px 4px 0 0;
  border: none;
  text-align: center;
  width: 18px;
  height: 14px;
  font: 16px/14px Tahoma, Verdana, sans-serif;
  color: #c3c3c3;
  text-decoration: none;
  font-weight: bold;
  background: transparent;
}
.leaflet-container a.leaflet-popup-close-button:hover {
  color: #999;
}
.leaflet-popup-scrolled {
  overflow: auto;
  border-bottom: 1px solid #ddd;
  border-top: 1px solid #ddd;
}
.leaflet-oldie .leaflet-popup-content-wrapper {
  zoom: 1;
}
.leaflet-oldie .leaflet-popup-tip {
  width: 24px;
  margin: 0 auto;
  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
  filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
}
.leaflet-oldie .leaflet-popup-tip-container {
  margin-top: -1px;
}
.leaflet-oldie .leaflet-control-zoom, .leaflet-oldie .leaflet-control-layers, .leaflet-oldie .leaflet-popup-content-wrapper, .leaflet-oldie .leaflet-popup-tip {
  border: 1px solid #999;
}
.leaflet-div-icon {
  background: #fff;
  border: 1px solid #666;
}
.leaflet-tooltip {
  position: absolute;
  padding: 6px;
  background-color: #fff;
  border: 1px solid #fff;
  border-radius: 3px;
  color: #222;
  white-space: nowrap;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  pointer-events: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.leaflet-tooltip.leaflet-clickable {
  cursor: pointer;
  pointer-events: auto;
}
.leaflet-tooltip-top:before, .leaflet-tooltip-bottom:before, .leaflet-tooltip-left:before, .leaflet-tooltip-right:before {
  position: absolute;
  pointer-events: none;
  border: 6px solid transparent;
  background: transparent;
  content: "";
}
.leaflet-tooltip-bottom {
  margin-top: 6px;
}
.leaflet-tooltip-top {
  margin-top: -6px;
}
.leaflet-tooltip-bottom:before, .leaflet-tooltip-top:before {
  left: 50%;
  margin-left: -6px;
}
.leaflet-tooltip-top:before {
  bottom: 0;
  margin-bottom: -12px;
  border-top-color: #fff;
}
.leaflet-tooltip-bottom:before {
  top: 0;
  margin-top: -12px;
  margin-left: -6px;
  border-bottom-color: #fff;
}
.leaflet-tooltip-left {
  margin-left: -6px;
}
.leaflet-tooltip-right {
  margin-left: 6px;
}
.leaflet-tooltip-left:before, .leaflet-tooltip-right:before {
  top: 50%;
  margin-top: -6px;
}
.leaflet-tooltip-left:before {
  right: 0;
  margin-right: -12px;
  border-left-color: #fff;
}
.leaflet-tooltip-right:before {
  left: 0;
  margin-left: -12px;
  border-right-color: #fff;
}

/* stylelint-disable */
.react-datepicker__navigation-icon::before, .react-datepicker__year-read-view--down-arrow, .react-datepicker__month-read-view--down-arrow, .react-datepicker__month-year-read-view--down-arrow {
  border-color: #ccc;
  border-style: solid;
  border-width: 3px 3px 0 0;
  content: "";
  display: block;
  height: 9px;
  position: absolute;
  top: 6px;
  width: 9px;
}
.react-datepicker-wrapper {
  display: inline-block;
  padding: 0;
  border: 0;
}
.react-datepicker {
  font-family: "Helvetica Neue", helvetica, arial, sans-serif;
  font-size: 0.8rem;
  background-color: #fff;
  color: #000;
  border: 1px solid #aeaeae;
  border-radius: 0.3rem;
  display: inline-block;
  position: relative;
  line-height: initial;
}
.react-datepicker--time-only .react-datepicker__time-container {
  border-left: 0;
}
.react-datepicker--time-only .react-datepicker__time, .react-datepicker--time-only .react-datepicker__time-box {
  border-bottom-left-radius: 0.3rem;
  border-bottom-right-radius: 0.3rem;
}
.react-datepicker-popper {
  z-index: 1;
  line-height: 0;
}
.react-datepicker-popper .react-datepicker__triangle {
  stroke: #aeaeae;
}
.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle {
  fill: #f0f0f0;
  color: #f0f0f0;
}
.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle {
  fill: #fff;
  color: #fff;
}
.react-datepicker__header {
  text-align: center;
  background-color: #f0f0f0;
  border-bottom: 1px solid #aeaeae;
  border-top-left-radius: 0.3rem;
  padding: 8px 0;
  position: relative;
}
.react-datepicker__header--time {
  padding-bottom: 8px;
  padding-left: 5px;
  padding-right: 5px;
}
.react-datepicker__header--time:not(.react-datepicker__header--time--only) {
  border-top-left-radius: 0;
}
.react-datepicker__header:not(.react-datepicker__header--has-time-select) {
  border-top-right-radius: 0.3rem;
}
.react-datepicker__year-dropdown-container--select, .react-datepicker__month-dropdown-container--select, .react-datepicker__month-year-dropdown-container--select, .react-datepicker__year-dropdown-container--scroll, .react-datepicker__month-dropdown-container--scroll, .react-datepicker__month-year-dropdown-container--scroll {
  display: inline-block;
  margin: 0 15px;
}
.react-datepicker__current-month, .react-datepicker-time__header, .react-datepicker-year-header {
  margin-top: 0;
  color: #000;
  font-weight: bold;
  font-size: 0.944rem;
}
h2.react-datepicker__current-month {
  padding: 0;
  margin: 0;
}
.react-datepicker-time__header {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.react-datepicker__navigation {
  align-items: center;
  background: none;
  display: flex;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  position: absolute;
  top: 2px;
  padding: 0;
  border: none;
  z-index: 1;
  height: 32px;
  width: 32px;
  text-indent: -999em;
  overflow: hidden;
}
.react-datepicker__navigation--previous {
  left: 2px;
}
.react-datepicker__navigation--next {
  right: 2px;
}
.react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {
  right: 85px;
}
.react-datepicker__navigation--years {
  position: relative;
  top: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.react-datepicker__navigation--years-previous {
  top: 4px;
}
.react-datepicker__navigation--years-upcoming {
  top: -4px;
}
.react-datepicker__navigation:hover *::before {
  border-color: rgb(165.75, 165.75, 165.75);
}
.react-datepicker__navigation-icon {
  position: relative;
  top: -1px;
  font-size: 20px;
  width: 0;
}
.react-datepicker__navigation-icon--next {
  left: -2px;
}
.react-datepicker__navigation-icon--next::before {
  transform: rotate(45deg);
  left: -7px;
}
.react-datepicker__navigation-icon--previous {
  right: -2px;
}
.react-datepicker__navigation-icon--previous::before {
  transform: rotate(225deg);
  right: -7px;
}
.react-datepicker__month-container {
  float: left;
}
.react-datepicker__year {
  margin: 0.4rem;
  text-align: center;
}
.react-datepicker__year-wrapper {
  display: flex;
  flex-wrap: wrap;
  max-width: 180px;
}
.react-datepicker__year .react-datepicker__year-text {
  display: inline-block;
  width: 4rem;
  margin: 2px;
}
.react-datepicker__month {
  margin: 0.4rem;
  text-align: center;
}
.react-datepicker__month .react-datepicker__month-text, .react-datepicker__month .react-datepicker__quarter-text {
  display: inline-block;
  width: 4rem;
  margin: 2px;
}
.react-datepicker__input-time-container {
  clear: both;
  width: 100%;
  float: left;
  margin: 5px 0 10px 15px;
  text-align: left;
}
.react-datepicker__input-time-container .react-datepicker-time__caption {
  display: inline-block;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container {
  display: inline-block;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input {
  display: inline-block;
  margin-left: 10px;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input {
  width: auto;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-inner-spin-button, .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time] {
  -moz-appearance: textfield;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__delimiter {
  margin-left: 5px;
  display: inline-block;
}
.react-datepicker__time-container {
  float: right;
  border-left: 1px solid #aeaeae;
  width: 85px;
}
.react-datepicker__time-container--with-today-button {
  display: inline;
  border: 1px solid #aeaeae;
  border-radius: 0.3rem;
  position: absolute;
  right: -87px;
  top: 0;
}
.react-datepicker__time-container .react-datepicker__time {
  position: relative;
  background: white;
  border-bottom-right-radius: 0.3rem;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {
  width: 85px;
  overflow-x: hidden;
  margin: 0 auto;
  text-align: center;
  border-bottom-right-radius: 0.3rem;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list {
  list-style: none;
  margin: 0;
  height: calc(195px + 1.7rem / 2);
  overflow-y: scroll;
  padding-right: 0;
  padding-left: 0;
  width: 100%;
  box-sizing: content-box;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item {
  height: 30px;
  padding: 5px 10px;
  white-space: nowrap;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover {
  cursor: pointer;
  background-color: #f0f0f0;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected {
  background-color: #216ba5;
  color: white;
  font-weight: bold;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover {
  background-color: #216ba5;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled {
  color: #ccc;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled:hover {
  cursor: default;
  background-color: transparent;
}
.react-datepicker__week-number {
  color: #ccc;
  display: inline-block;
  width: 1.7rem;
  line-height: 1.7rem;
  text-align: center;
  margin: 0.166rem;
}
.react-datepicker__week-number.react-datepicker__week-number--clickable {
  cursor: pointer;
}
.react-datepicker__week-number.react-datepicker__week-number--clickable:not(.react-datepicker__week-number--selected):hover {
  border-radius: 0.3rem;
  background-color: #f0f0f0;
}
.react-datepicker__week-number--selected {
  border-radius: 0.3rem;
  background-color: #216ba5;
  color: #fff;
}
.react-datepicker__week-number--selected:hover {
  background-color: rgb(28.75, 93.2196969697, 143.75);
}
.react-datepicker__day-names {
  white-space: nowrap;
  margin-bottom: -8px;
}
.react-datepicker__week {
  white-space: nowrap;
}
.react-datepicker__day-name, .react-datepicker__day, .react-datepicker__time-name {
  color: #000;
  display: inline-block;
  width: 1.7rem;
  line-height: 1.7rem;
  text-align: center;
  margin: 0.166rem;
}
.react-datepicker__day, .react-datepicker__month-text, .react-datepicker__quarter-text, .react-datepicker__year-text {
  cursor: pointer;
}
.react-datepicker__day:not([aria-disabled=true]):hover, .react-datepicker__month-text:not([aria-disabled=true]):hover, .react-datepicker__quarter-text:not([aria-disabled=true]):hover, .react-datepicker__year-text:not([aria-disabled=true]):hover {
  border-radius: 0.3rem;
  background-color: #f0f0f0;
}
.react-datepicker__day--today, .react-datepicker__month-text--today, .react-datepicker__quarter-text--today, .react-datepicker__year-text--today {
  font-weight: bold;
}
.react-datepicker__day--highlighted, .react-datepicker__month-text--highlighted, .react-datepicker__quarter-text--highlighted, .react-datepicker__year-text--highlighted {
  border-radius: 0.3rem;
  background-color: #3dcc4a;
  color: #fff;
}
.react-datepicker__day--highlighted:not([aria-disabled=true]):hover, .react-datepicker__month-text--highlighted:not([aria-disabled=true]):hover, .react-datepicker__quarter-text--highlighted:not([aria-disabled=true]):hover, .react-datepicker__year-text--highlighted:not([aria-disabled=true]):hover {
  background-color: rgb(49.8551020408, 189.6448979592, 62.5632653061);
}
.react-datepicker__day--highlighted-custom-1, .react-datepicker__month-text--highlighted-custom-1, .react-datepicker__quarter-text--highlighted-custom-1, .react-datepicker__year-text--highlighted-custom-1 {
  color: magenta;
}
.react-datepicker__day--highlighted-custom-2, .react-datepicker__month-text--highlighted-custom-2, .react-datepicker__quarter-text--highlighted-custom-2, .react-datepicker__year-text--highlighted-custom-2 {
  color: green;
}
.react-datepicker__day--holidays, .react-datepicker__month-text--holidays, .react-datepicker__quarter-text--holidays, .react-datepicker__year-text--holidays {
  position: relative;
  border-radius: 0.3rem;
  background-color: #ff6803;
  color: #fff;
}
.react-datepicker__day--holidays .overlay, .react-datepicker__month-text--holidays .overlay, .react-datepicker__quarter-text--holidays .overlay, .react-datepicker__year-text--holidays .overlay {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 4px;
  border-radius: 4px;
  white-space: nowrap;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.3s ease-in-out;
}
.react-datepicker__day--holidays:not([aria-disabled=true]):hover, .react-datepicker__month-text--holidays:not([aria-disabled=true]):hover, .react-datepicker__quarter-text--holidays:not([aria-disabled=true]):hover, .react-datepicker__year-text--holidays:not([aria-disabled=true]):hover {
  background-color: rgb(207, 82.9642857143, 0);
}
.react-datepicker__day--holidays:hover .overlay, .react-datepicker__month-text--holidays:hover .overlay, .react-datepicker__quarter-text--holidays:hover .overlay, .react-datepicker__year-text--holidays:hover .overlay {
  visibility: visible;
  opacity: 1;
}
.react-datepicker__day--selected, .react-datepicker__day--in-selecting-range, .react-datepicker__day--in-range, .react-datepicker__month-text--selected, .react-datepicker__month-text--in-selecting-range, .react-datepicker__month-text--in-range, .react-datepicker__quarter-text--selected, .react-datepicker__quarter-text--in-selecting-range, .react-datepicker__quarter-text--in-range, .react-datepicker__year-text--selected, .react-datepicker__year-text--in-selecting-range, .react-datepicker__year-text--in-range {
  border-radius: 0.3rem;
  background-color: #216ba5;
  color: #fff;
}
.react-datepicker__day--selected:not([aria-disabled=true]):hover, .react-datepicker__day--in-selecting-range:not([aria-disabled=true]):hover, .react-datepicker__day--in-range:not([aria-disabled=true]):hover, .react-datepicker__month-text--selected:not([aria-disabled=true]):hover, .react-datepicker__month-text--in-selecting-range:not([aria-disabled=true]):hover, .react-datepicker__month-text--in-range:not([aria-disabled=true]):hover, .react-datepicker__quarter-text--selected:not([aria-disabled=true]):hover, .react-datepicker__quarter-text--in-selecting-range:not([aria-disabled=true]):hover, .react-datepicker__quarter-text--in-range:not([aria-disabled=true]):hover, .react-datepicker__year-text--selected:not([aria-disabled=true]):hover, .react-datepicker__year-text--in-selecting-range:not([aria-disabled=true]):hover, .react-datepicker__year-text--in-range:not([aria-disabled=true]):hover {
  background-color: rgb(28.75, 93.2196969697, 143.75);
}
.react-datepicker__day--keyboard-selected, .react-datepicker__month-text--keyboard-selected, .react-datepicker__quarter-text--keyboard-selected, .react-datepicker__year-text--keyboard-selected {
  border-radius: 0.3rem;
  background-color: rgb(186.25, 217.0833333333, 241.25);
  color: rgb(0, 0, 0);
}
.react-datepicker__day--keyboard-selected:not([aria-disabled=true]):hover, .react-datepicker__month-text--keyboard-selected:not([aria-disabled=true]):hover, .react-datepicker__quarter-text--keyboard-selected:not([aria-disabled=true]):hover, .react-datepicker__year-text--keyboard-selected:not([aria-disabled=true]):hover {
  background-color: rgb(28.75, 93.2196969697, 143.75);
}
.react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range, .react-datepicker__month-text--in-range, .react-datepicker__quarter-text--in-range, .react-datepicker__year-text--in-range), .react-datepicker__month-text--in-selecting-range:not(.react-datepicker__day--in-range, .react-datepicker__month-text--in-range, .react-datepicker__quarter-text--in-range, .react-datepicker__year-text--in-range), .react-datepicker__quarter-text--in-selecting-range:not(.react-datepicker__day--in-range, .react-datepicker__month-text--in-range, .react-datepicker__quarter-text--in-range, .react-datepicker__year-text--in-range), .react-datepicker__year-text--in-selecting-range:not(.react-datepicker__day--in-range, .react-datepicker__month-text--in-range, .react-datepicker__quarter-text--in-range, .react-datepicker__year-text--in-range) {
  background-color: rgba(33, 107, 165, 0.5);
}
.tjs-global__react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range, .react-datepicker__month-text--in-selecting-range, .react-datepicker__quarter-text--in-selecting-range, .react-datepicker__year-text--in-selecting-range), .tjs-global__react-datepicker__year--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range, .react-datepicker__month-text--in-selecting-range, .react-datepicker__quarter-text--in-selecting-range, .react-datepicker__year-text--in-selecting-range),
.tjs-global__react-datepicker__month--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range, .react-datepicker__month-text--in-selecting-range, .react-datepicker__quarter-text--in-selecting-range, .react-datepicker__year-text--in-selecting-range),
.tjs-global__react-datepicker__year--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range, .react-datepicker__month-text--in-selecting-range, .react-datepicker__quarter-text--in-selecting-range, .react-datepicker__year-text--in-selecting-range),
.tjs-global__react-datepicker__month--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range, .react-datepicker__month-text--in-selecting-range, .react-datepicker__quarter-text--in-selecting-range, .react-datepicker__year-text--in-selecting-range),
.tjs-global__react-datepicker__year--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range, .react-datepicker__month-text--in-selecting-range, .react-datepicker__quarter-text--in-selecting-range, .react-datepicker__year-text--in-selecting-range),
.tjs-global__react-datepicker__month--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range, .react-datepicker__month-text--in-selecting-range, .react-datepicker__quarter-text--in-selecting-range, .react-datepicker__year-text--in-selecting-range),
.tjs-global__react-datepicker__year--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range, .react-datepicker__month-text--in-selecting-range, .react-datepicker__quarter-text--in-selecting-range, .react-datepicker__year-text--in-selecting-range) {
  background-color: #f0f0f0;
  color: #000;
}
.react-datepicker__day--disabled, .react-datepicker__month-text--disabled, .react-datepicker__quarter-text--disabled, .react-datepicker__year-text--disabled {
  cursor: default;
  color: #ccc;
}
.react-datepicker__day--disabled .overlay, .react-datepicker__month-text--disabled .overlay, .react-datepicker__quarter-text--disabled .overlay, .react-datepicker__year-text--disabled .overlay {
  position: absolute;
  bottom: 70%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 4px;
  border-radius: 4px;
  white-space: nowrap;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.3s ease-in-out;
}
.react-datepicker__input-container {
  position: relative;
  display: inline-block;
  width: 100%;
}
.react-datepicker__input-container .react-datepicker__calendar-icon {
  position: absolute;
  padding: 0.5rem;
  box-sizing: content-box;
}
.react-datepicker__view-calendar-icon input {
  padding: 6px 10px 5px 25px;
}
.react-datepicker__year-read-view, .react-datepicker__month-read-view, .react-datepicker__month-year-read-view {
  border: 1px solid transparent;
  border-radius: 0.3rem;
  position: relative;
}
.react-datepicker__year-read-view:hover, .react-datepicker__month-read-view:hover, .react-datepicker__month-year-read-view:hover {
  cursor: pointer;
}
.react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow, .react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow, .react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow, .react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow, .react-datepicker__month-year-read-view:hover .react-datepicker__year-read-view--down-arrow, .react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow {
  border-top-color: rgb(178.5, 178.5, 178.5);
}
.react-datepicker__year-read-view--down-arrow, .react-datepicker__month-read-view--down-arrow, .react-datepicker__month-year-read-view--down-arrow {
  transform: rotate(135deg);
  right: -16px;
  top: 0;
}
.react-datepicker__year-dropdown, .react-datepicker__month-dropdown, .react-datepicker__month-year-dropdown {
  background-color: #f0f0f0;
  position: absolute;
  width: 50%;
  left: 25%;
  top: 30px;
  z-index: 1;
  text-align: center;
  border-radius: 0.3rem;
  border: 1px solid #aeaeae;
}
.react-datepicker__year-dropdown:hover, .react-datepicker__month-dropdown:hover, .react-datepicker__month-year-dropdown:hover {
  cursor: pointer;
}
.react-datepicker__year-dropdown--scrollable, .react-datepicker__month-dropdown--scrollable, .react-datepicker__month-year-dropdown--scrollable {
  height: 150px;
  overflow-y: scroll;
}
.react-datepicker__year-option, .react-datepicker__month-option, .react-datepicker__month-year-option {
  line-height: 20px;
  width: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.react-datepicker__year-option:first-of-type, .react-datepicker__month-option:first-of-type, .react-datepicker__month-year-option:first-of-type {
  border-top-left-radius: 0.3rem;
  border-top-right-radius: 0.3rem;
}
.react-datepicker__year-option:last-of-type, .react-datepicker__month-option:last-of-type, .react-datepicker__month-year-option:last-of-type {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border-bottom-left-radius: 0.3rem;
  border-bottom-right-radius: 0.3rem;
}
.react-datepicker__year-option:hover, .react-datepicker__month-option:hover, .react-datepicker__month-year-option:hover {
  background-color: #ccc;
}
.react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming, .react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming, .react-datepicker__month-year-option:hover .react-datepicker__navigation--years-upcoming {
  border-bottom-color: rgb(178.5, 178.5, 178.5);
}
.react-datepicker__year-option:hover .react-datepicker__navigation--years-previous, .react-datepicker__month-option:hover .react-datepicker__navigation--years-previous, .react-datepicker__month-year-option:hover .react-datepicker__navigation--years-previous {
  border-top-color: rgb(178.5, 178.5, 178.5);
}
.react-datepicker__year-option--selected, .react-datepicker__month-option--selected, .react-datepicker__month-year-option--selected {
  position: absolute;
  left: 15px;
}
.react-datepicker__close-icon {
  cursor: pointer;
  background-color: transparent;
  border: 0;
  outline: 0;
  padding: 0 6px 0 0;
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  display: table-cell;
  vertical-align: middle;
}
.react-datepicker__close-icon::after {
  cursor: pointer;
  background-color: #216ba5;
  color: #fff;
  border-radius: 50%;
  height: 16px;
  width: 16px;
  padding: 2px;
  font-size: 12px;
  line-height: 1;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  content: "×";
}
.react-datepicker__close-icon--disabled {
  cursor: default;
}
.react-datepicker__close-icon--disabled::after {
  cursor: default;
  background-color: #ccc;
}
.react-datepicker__today-button {
  background: #f0f0f0;
  border-top: 1px solid #aeaeae;
  cursor: pointer;
  text-align: center;
  font-weight: bold;
  padding: 5px 0;
  clear: left;
}
.react-datepicker__portal {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.8);
  left: 0;
  top: 0;
  justify-content: center;
  align-items: center;
  display: flex;
  z-index: 2147483647;
}
.react-datepicker__portal .react-datepicker__day-name, .react-datepicker__portal .react-datepicker__day, .react-datepicker__portal .react-datepicker__time-name {
  width: 3rem;
  line-height: 3rem;
}
@media (max-width: 400px), (max-height: 550px) {
  .react-datepicker__portal .react-datepicker__day-name, .react-datepicker__portal .react-datepicker__day, .react-datepicker__portal .react-datepicker__time-name {
    width: 2rem;
    line-height: 2rem;
  }
}
.react-datepicker__portal .react-datepicker__current-month, .react-datepicker__portal .react-datepicker-time__header {
  font-size: 1.44rem;
}
.react-datepicker__children-container {
  width: 13.8rem;
  margin: 0.4rem;
  padding-right: 0.2rem;
  padding-left: 0.2rem;
  height: auto;
}
.react-datepicker__aria-live {
  position: absolute;
  clip-path: circle(0);
  border: 0;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  width: 1px;
  white-space: nowrap;
}
.react-datepicker__calendar-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
}

/* stylelint-enable */
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
   ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  /* Removed as it affects text rendering in a few places, eg: workbench item titles */
  /* line-height: 1.15; */ /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */
/**
 * Remove the border on images inside links in IE 10.
 */
img {
  border-style: none;
}

/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
  /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
  /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type=checkbox],
[type=radio] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type=search] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/* Misc
   ========================================================================== */
/**
 * Add the correct display in IE 10+.
 */
template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
  display: none;
}

.terria .react-datepicker {
  border: none;
  margin: 0 auto;
  background: none;
  border: none;
  color: #000;
  margin-top: -10px;
}
.react-datepicker .react-datepicker__day {
  color: #fff;
  border: 1px solid #3498db;
  border-radius: 3px;
}
.react-datepicker .react-datepicker__day:hover {
  background: #2E9A96;
  color: #fff;
}
.react-datepicker .react-datepicker__day--disabled, .react-datepicker .react-datepicker__day--disabled:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #111827;
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.react-datepicker__navigation {
  display: none;
}
.Select {
  color: #000;
}
.terria .react-datepicker__header, .terria .react-datepicker {
  background: #111827;
  padding-top: 0;
}
.terria .react-datepicker__current-month, .terria .react-datepicker__day-name {
  color: #fff;
}
.terria .react-datepicker__current-month {
  display: none;
}
.terria .react-datepicker:not(:focus-within) .react-datepicker__day--keyboard-selected {
  background-color: transparent;
}
.terria .react-datepicker:is(:focus-within) .react-datepicker__day--keyboard-selected {
  background-color: rgb(57.73, 193.27, 188.25);
  color: #fff;
}

.rc-slider {
  position: relative;
  height: 14px;
  padding: 5px 0;
  width: 100%;
  border-radius: 6px;
  touch-action: none;
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.rc-slider * {
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.rc-slider-rail {
  position: absolute;
  width: 100%;
  background-color: #e9e9e9;
  height: 4px;
  border-radius: 6px;
}
.rc-slider-track {
  position: absolute;
  left: 0;
  height: 4px;
  border-radius: 6px;
  background-color: #abe2fb;
}
.rc-slider-handle {
  position: absolute;
  width: 14px;
  height: 14px;
  cursor: pointer;
  cursor: -webkit-grab;
  margin-top: -5px;
  cursor: grab;
  border-radius: 50%;
  border: solid 2px #96dbfa;
  background-color: #fff;
  touch-action: pan-x;
}
.rc-slider-handle-dragging.rc-slider-handle-dragging.rc-slider-handle-dragging {
  border-color: #57c5f7;
  box-shadow: 0 0 0 5px #96dbfa;
}
.rc-slider-handle:focus {
  outline: none;
}
.rc-slider-handle-click-focused:focus {
  border-color: #96dbfa;
  box-shadow: unset;
}
.rc-slider-handle:hover {
  border-color: #57c5f7;
}
.rc-slider-handle:active {
  border-color: #57c5f7;
  box-shadow: 0 0 5px #57c5f7;
  cursor: -webkit-grabbing;
  cursor: grabbing;
}
.rc-slider-mark {
  position: absolute;
  top: 18px;
  left: 0;
  width: 100%;
  font-size: 12px;
}
.rc-slider-mark-text {
  position: absolute;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  cursor: pointer;
  color: #999;
}
.rc-slider-mark-text-active {
  color: #666;
}
.rc-slider-step {
  position: absolute;
  width: 100%;
  height: 4px;
  background: transparent;
}
.rc-slider-dot {
  position: absolute;
  bottom: -2px;
  margin-left: -4px;
  width: 8px;
  height: 8px;
  border: 2px solid #e9e9e9;
  background-color: #fff;
  cursor: pointer;
  border-radius: 50%;
  vertical-align: middle;
}
.rc-slider-dot-active {
  border-color: #96dbfa;
}
.rc-slider-dot-reverse {
  margin-right: -4px;
}
.rc-slider-disabled {
  background-color: #e9e9e9;
}
.rc-slider-disabled .rc-slider-track {
  background-color: #ccc;
}
.rc-slider-disabled .rc-slider-handle, .rc-slider-disabled .rc-slider-dot {
  border-color: #ccc;
  box-shadow: none;
  background-color: #fff;
  cursor: not-allowed;
}
.rc-slider-disabled .rc-slider-mark-text, .rc-slider-disabled .rc-slider-dot {
  cursor: not-allowed !important;
}
.rc-slider-vertical {
  width: 14px;
  height: 100%;
  padding: 0 5px;
}
.rc-slider-vertical .rc-slider-rail {
  height: 100%;
  width: 4px;
}
.rc-slider-vertical .rc-slider-track {
  left: 5px;
  bottom: 0;
  width: 4px;
}
.rc-slider-vertical .rc-slider-handle {
  margin-left: -5px;
  touch-action: pan-y;
}
.rc-slider-vertical .rc-slider-mark {
  top: 0;
  left: 18px;
  height: 100%;
}
.rc-slider-vertical .rc-slider-step {
  height: 100%;
  width: 4px;
}
.rc-slider-vertical .rc-slider-dot {
  left: 2px;
  margin-bottom: -4px;
}
.rc-slider-vertical .rc-slider-dot:first-child {
  margin-bottom: -4px;
}
.rc-slider-vertical .rc-slider-dot:last-child {
  margin-bottom: -4px;
}
.rc-slider-tooltip-zoom-down-enter, .rc-slider-tooltip-zoom-down-appear {
  animation-duration: 0.3s;
  animation-fill-mode: both;
  display: block !important;
  animation-play-state: paused;
}
.rc-slider-tooltip-zoom-down-leave {
  animation-duration: 0.3s;
  animation-fill-mode: both;
  display: block !important;
  animation-play-state: paused;
}
.rc-slider-tooltip-zoom-down-enter.rc-slider-tooltip-zoom-down-enter-active, .rc-slider-tooltip-zoom-down-appear.rc-slider-tooltip-zoom-down-appear-active {
  animation-name: rcSliderTooltipZoomDownIn;
  animation-play-state: running;
}
.rc-slider-tooltip-zoom-down-leave.rc-slider-tooltip-zoom-down-leave-active {
  animation-name: rcSliderTooltipZoomDownOut;
  animation-play-state: running;
}
.rc-slider-tooltip-zoom-down-enter, .rc-slider-tooltip-zoom-down-appear {
  transform: scale(0, 0);
  animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}
.rc-slider-tooltip-zoom-down-leave {
  animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
}
@keyframes tjs-global__rcSliderTooltipZoomDownIn {
  0% {
    opacity: 0;
    transform-origin: 50% 100%;
    transform: scale(0, 0);
  }
  100% {
    transform-origin: 50% 100%;
    transform: scale(1, 1);
  }
}
@keyframes tjs-global__rcSliderTooltipZoomDownOut {
  0% {
    transform-origin: 50% 100%;
    transform: scale(1, 1);
  }
  100% {
    opacity: 0;
    transform-origin: 50% 100%;
    transform: scale(0, 0);
  }
}
.rc-slider-tooltip {
  position: absolute;
  left: -9999px;
  top: -9999px;
  visibility: visible;
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.rc-slider-tooltip * {
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.rc-slider-tooltip-hidden {
  display: none;
}
.rc-slider-tooltip-placement-top {
  padding: 4px 0 8px 0;
}
.rc-slider-tooltip-inner {
  padding: 6px 2px;
  min-width: 24px;
  height: 24px;
  font-size: 12px;
  line-height: 1;
  color: #fff;
  text-align: center;
  text-decoration: none;
  background-color: #6c6c6c;
  border-radius: 6px;
  box-shadow: 0 0 4px #d9d9d9;
}
.rc-slider-tooltip-arrow {
  position: absolute;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
}
.rc-slider-tooltip-placement-top .rc-slider-tooltip-arrow {
  bottom: 4px;
  left: 50%;
  margin-left: -4px;
  border-width: 4px 4px 0;
  border-top-color: #6c6c6c;
}
.rc-slider {
  margin-right: 5px;
  margin-top: 5px;
}
.rc-slider-dot {
  width: 2px;
  border-radius: 1px;
  border: none;
  background-color: #2E9A96;
  height: 10px;
  bottom: -4px;
  margin-left: -2px;
}
.rc-slider-rail, .rc-slider-track, .rc-slider-step {
  height: 2px;
}
.rc-slider-handle {
  border: 0;
  width: 12px;
  height: 12px;
  background-color: #2E9A96;
}
.rc-slider-rail {
  background-color: #8b919b;
}
.rc-slider-track {
  background-color: #2E9A96;
}

 {
  /* pre-built style */
}
.ui-sortable {
  display: block;
  position: relative;
  overflow: visible;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.ui-sortable:before, .ui-sortable:after {
  content: " ";
  display: table;
}
.ui-sortable:after {
  clear: both;
}
.ui-sortable .ui-sortable-item {
  float: left;
  cursor: move;
}
.ui-sortable .ui-sortable-item.ui-sortable-dragging {
  position: absolute;
  z-index: 1688;
}
.ui-sortable .ui-sortable-placeholder {
  display: none;
}
.ui-sortable .ui-sortable-placeholder.visible {
  display: block;
  z-index: -1;
}

body {
  margin: 0;
  overflow: hidden;
}

 {
  /*
    // Import any custom fonts here
    //@import url(https://fonts.googleapis.com/css?family=Josefin+Sans:300,400,700);

    html {
        font-family: $font-base;
    }

    // Logo area in top left
    .tjs-branding__branding {
        a:first-child, a:last-child {
            display: none;

            @media screen and (min-width: $sm) {
                display: inline;
            }
        }
        // Different font size for the branding
        font-weight: 300;
        color: white;
        font-size: 26px;
        padding-top:2px;
        padding-left:6px;

        // To make the logo clickable, it should be instead set in config.json, at "brandBarElements"
        // background:$dark url(http://www.public-domain-image.com/backgrounds/slides/abstract-waves-on-a-blue-background.jpg);
        // background-position: top right;
        // background-size: 100%;
        // background-repeat: no-repeat;

    }
    // Background of whole left panel
    .tjs-standard-user-interface__sidePanel {
        background:$dark-darker;
    }
    // Individual sections within the left panel
    .tjs-side-panel__workBench {
        font-family:$font-base;
        font-weight:400;
        font-size:18px;
        background:$dark-darker;
    }

    // All kinds of buttons in various screens
    .tjs-_buttons__btn {
        &-primary {
            font-family: $font-base;
        }
        &:hover {
            color: $color-primary;
        }
    }

    // Buttons like "Share" within the map area.
    .tjs-_buttons__btn--map {
        background: $dark;
        &:focus, &:hover { color: white; }
    }

    // Lat/lon buttons
    .tjs-legend__locationBar, .tjs-legend__distanceLegend {

        background:$dark;
        color:white;
        &:hover,&:focus { background: $dark; color: white; }

    }

    // Progress bar while datasets are loading
    .tjs-progress-bar__progress-bar {
        background: $color-primary;
    }

    // Flatten and simplify display of timeline controls
    .tjs-timeline-controls__timeline__control {
        background:$dark-lighter;
        border:none;
    }

    .tjs-timeline__text-cell {
        font-family: $font-base;
    }

    .tjs-timeline__timeline {
        background:$dark-lighter;
    }

    .cesium-timeline-bar {
        background:$dark-with-overlay;
    }

    // Feature info table
    .tjs-feature-info-section__content {
        h1 {
            color: $color-primary;
        }
        table th {
            // font-family: $font-base; // if you don't want monospaced
            font-weight:200; // not bold
            padding-right:0.5em;
        }

        table td {
            border:none;
            // font-family: $font-base; // if you don't want monospaced
            font-weight:normal; // not bold
            color:hsl(0,0%,90%);

        }
        a {
            color:$color-secondary;
        }
    }

    // The Data Catalog ("Add Data") page
      // expandable catalog groups
    .tjs-data-catalog-group__btn--catalog {
        &:hover { background: $color-secondary; color: white; }
        &:focus { background: $color-primary; color: white;}
    }
      // The currently selected item in the list
    .tjs-data-catalog-item__btn-catalog-item--is-previewed {
        ,&:focus {color: $color-primary; }
    }
      // The tabs at the top
    .tjs-tabs__btn--tab {
        font-family:$font-base
    }

    .tjs-tabs__btn--selected {
        color:$color-primary-dark;
    }
    .tjs-tabs__btn--tab:hover {
        color:$color-secondary;
    }
    */
}
@media print {
  .nationalmap-print-disclaimer {
    color: #000;
    display: block;
  }
}
#ui :focus-visible {
  outline: 2px solid #4fd3c0;
  outline-offset: 2px;
}
#ui {
  box-sizing: border-box;
  padding-left: var(--wiq-rail-w, 62px);
  padding-right: var(--wiq-legend-w, 0px);
}
.tjs-menu-bar__menu-bar {
  display: none !important;
}
.tjs-standard-user-interface__showWorkbenchButton {
  display: none !important;
}
.tjs-standard-user-interface__map div:has(> div > [class*=CreditsContainer]) {
  margin: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
}
[class*=CreditsContainer] {
  margin-left: auto;
  font-family: ui-monospace, "SFMono-Regular", "Consolas", monospace;
  font-size: 10px;
  opacity: 0.75;
}
[class*=CreditsContainer] img {
  height: 16px !important;
  opacity: 0.7;
}
[class*=LocationBar], [class*=DistanceLegend] {
  font-family: ui-monospace, "SFMono-Regular", "Consolas", monospace;
  font-size: 11px;
}
/*!*******************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/terriajs-typings-for-css-modules-loader/src/index.js!./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[5].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[5].use[4]!./lib/Views/loader.scss ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/* ── windIQ Design-Tokens ──────────────────────────────────────────────────────
 * Bisher stand dieser Block wortgleich am Kopf jeder Panel-scss ("Design-Tokens
 * identisch zu den übrigen windIQ-Panels"). Mit der Icon-Rail kommen weitere
 * Flächen dazu, die dieselben Werte brauchen — deshalb einmal zentral.
 *
 * Einbinden mit:  @use "../Styles/windiq-tokens" as t;   →  t.$primary
 * Die bestehenden Panel-scss bleiben vorerst unangetastet; sie wandern
 * schrittweise hierher, wenn sie ohnehin angefasst werden.
 * ──────────────────────────────────────────────────────────────────────────── */
/* Flächen */
/* Kante zwischen zwei Flächen, die aneinanderstossen (Rail/Panel, Panelfuss).
   Der Rand einer freistehenden Fläche ist ein anderer — dafür $float-bdr. */
/* Weisse Schleier auf dunklem Grund. Es standen sechs davon in den Dateien
   (0.04 / 0.06 / 0.07 / 0.1 / 0.12 / 0.2) — Abstufungen, die niemand sehen
   kann, die aber dafür sorgten, dass zwei Knöpfe nebeneinander verschieden
   hell aufleuchteten. Zwei Stufen reichen: eine für Hover, eine für den
   Druck und für Ränder, die sich vom Grundrand abheben sollen. */
/* Dritte Stufe, nur als Rand: der Hover-Rand einer Fläche, die schon einen
   Rand hat. $border (0.15) und $veil-strong (0.12) liegen so dicht am
   Ruhezustand, dass der Wechsel nicht auffällt — genau dafür ist diese hier. */
/* Akzent */
/* Die Rail und ihr aktiver Zustand nutzen den helleren Teal-Ton aus dem
   Entwurf — auf der dunklen Rail liest sich #2e9a96 zu stumpf. */
/* Dieselbe Fläche eine Stufe kräftiger — für den Hover auf einer bereits
   akzentuierten Fläche (Aktionszeile „Suche 'X' im Datenkatalog"). */
/* Schmale Teal-Scrollbar in Panels und Trefferlisten. */
/* Rahmen und Schein für den Fokuszustand von Eingaben. Bewusst zwei Stufen
   desselben Tons statt einer zweiten Farbe: der Fokus soll auffallen, aber
   nicht als eigene Bedeutungsebene gelesen werden. */
/* Schrift auf der hellen Akzentfläche (Läufer des 2D/3D-Schalters). Reines
   Schwarz wäre auf dem Teal zu hart. */
/* Text */
/* Zwischenstufe zwischen $text-dim und $text-muted. Sie ist entstanden, weil
   der Datenkatalog eine Rangfolge braucht (Blätter kräftiger als Ordner) und
   trotzdem beide Stufen über 4,5:1 liegen müssen: $text-muted trägt auf der
   Panelfläche nur 3,96:1, $text-dim gehört den Blättern. Diese Stufe misst
   4,91:1. Überall dort verwenden, wo Text eine Stufe zurücktreten soll, ohne
   die Lesbarkeitsschwelle zu unterschreiten — $text-muted bleibt Icons und
   Metaspalten vorbehalten, für die 3:1 genügt. */
/* ── Zustandsfarben ───────────────────────────────────────────────────────────
 * Diese vier Töne standen bis eben in vier Panel-Stylesheets kopiert
 * (tr10, repraesentativitaet, bestandsanlagen, legend) — mit dem Ergebnis, dass
 * derselbe Zustand je Modul anders aussah und ein harter Ladefehler in
 * Bestandsanlagen mangels Rot in Warngelb erschien.
 *
 * WICHTIG — nicht zu verwechseln mit den Klassenfarben der Repraesentativitaet
 * ($klasse-repraesentativ #00B140 / -bedingt / -nicht). Die spiegeln
 * KLASSEN_FARBE aus lib/Core/trixApi.js und müssen mit den Punkten auf der
 * Karte übereinstimmen; sie sind Kartensignaturen, keine Zustandsanzeige. Dass
 * dort ein zweites Grün vorkommt, ist deshalb kein Fehler, sondern eine zweite
 * Bedeutung. Wo beide in einem Panel nebeneinander stehen, muss die Form sie
 * trennen (Punkt = Klasse, Kasten = Zustand), nicht der Farbton.
 *
 * Die Textvarianten sind die aufgehellten Töne für Schrift auf dem dunklen
 * Grund; die Grundflächen und Ränder leiten sich aus demselben Wert ab, damit
 * je Bedeutung nur eine Farbe gepflegt wird.
 * ──────────────────────────────────────────────────────────────────────────── */
/* Rot für ein Bedienelement, das etwas entfernt (× in der Legende). Heller als
   $error: es steht auf dunklem Grund und muss als Fläche und als Symbol
   funktionieren, nicht nur als Randfarbe. */
/* Form */
/* Haarlinie zwischen Zeilen und Abschnitten. Schwächer als $border: die
   trennt Flächen, diese hier gliedert nur innerhalb einer Fläche. */
/* ── Bewegung ─────────────────────────────────────────────────────────────────
 * $transition oben ist die alte Allzweckkurve (Material-Standard). Sie bleibt
 * für Farb- und Layoutwechsel. Für alles, was der Nutzer als Bewegung liest,
 * stehen hier kräftigere Kurven: die eingebauten CSS-Easings sind zu weich und
 * lassen jede Animation zäh wirken.
 *   $ease-out     — Elemente, die auftauchen; startet schnell, wirkt sofort
 *   $ease-in-out  — Elemente, die auf dem Schirm wandern (Läufer im Schalter)
 *   $ease-drawer  — Schubladen; die iOS-Kurve aus Ionic, langer ruhiger Auslauf
 * Ein `ease-in` steht bewusst nicht dabei: es verzögert genau den Moment, in
 * dem der Nutzer hinsieht.
 * ──────────────────────────────────────────────────────────────────────────── */
/* Rückmeldung auf Druck/Hover, Zustandswechsel, Schubladen. */
/* Geometrie der neuen Oberfläche.
   Die Rail-Breiten stehen zusätzlich als CSS-Custom-Property am :root (siehe
   AppShell.jsx) — SCSS kennt den aktuellen Zustand nicht, Layoutregeln, die
   sich mit dem Aus-/Einklappen bewegen, müssen deshalb var(--wiq-rail-w)
   benutzen und nicht diese Werte. */
/* Der Entwurf nennt 396px. In der Praxis ist das zu eng: Repräsentativität und
   TR10 zeigen breite Tabellen, und der Datenblock plus Modulinhalt drängen
   sich sichtbar. 440px ist der Kompromiss — merklich mehr Luft, ohne dass das
   Panel bei 1440px Fensterbreite ein Drittel der Karte verdeckt. */
/* Höhe der Statusleiste (status-bar.scss) — sie liegt über allem und ist die
   untere Kante der bespielbaren Fläche. */
/* Breite von Terrias rechter Fusshälfte: Namensnennung der Datenanbieter
   (220px), Koordinatenanzeige (157px), Maßstabsbalken (84px) plus Abstände. Sie
   hängt am rechten Rand der Kartensektion und ist über alle Fensterbreiten
   konstant — nachgemessen bei 1000, 1280, 1600 und 1920px. Die linke Hälfte
   (status-bar.scss) darf deshalb genau alles bekommen, was davor übrig bleibt,
   und keinen Pixel mehr: überdruckt würde sonst zuerst die Namensnennung, und
   die verlangen die Datenanbieter lizenzrechtlich. */
/* ── Staffelung in der Tiefe ──────────────────────────────────────────────────
 * Die Reihenfolge ist die Bedienlogik von unten nach oben: das Modulpanel liegt
 * auf der Karte, die schwebenden Pillen darüber (ihre Aufklapplisten dürfen das
 * Panel überdecken), die Statusleiste über Terrias Fußzeile, die Rail über
 * allem davon — sie darf nie verdeckt sein. Der Startbildschirm liegt vor der
 * ganzen Oberfläche und ist der einzige Wert oberhalb der Staffel; er stand
 * vorher als 9999 daneben, was die Ordnung nur so lange trägt, wie niemand eine
 * zweite Ausnahme dazuschreibt.
 * ──────────────────────────────────────────────────────────────────────────── */
/* Zwei Sprossen brauchen eine Erklärung:
 *
 * $z-auf-karte — Elemente, die zur KARTE gehören und nicht zur Oberfläche:
 *   das Anlagen-Popup, die Mess-Sprechblasen. Sie liegen über dem Kartenbild,
 *   müssen aber unter Rail und Panel bleiben, sonst decken sie die Bedienung
 *   zu, wenn eine Anlage am linken Kartenrand liegt.
 *
 * $z-dialog — modale Dialoge (Import-Assistent). Über der Rail, weil ein Modal
 *   die ganze Oberfläche sperrt; unter dem Startbildschirm, weil der auch einen
 *   offenen Dialog verdecken muss, wenn neu geladen wird.
 *
 * $z-ueber-terria — die eine begründete Ausnahme, und zwar ausserhalb unserer
 *   Staffel, weil sie gegen einen FREMDEN Baum arbeitet: Aufklapplisten, die
 *   per Portal am <body> hängen und über Terrias Komponenten liegen müssen.
 *   Terrias höchster eigener Wert ist $notification-window-z-index: 99999
 *   (packages/terriajs/lib/Sass/common/_default_variables.scss); .top-element
 *   rechnet daraus 99989 (standard-user-interface.scss, mit !important) — im
 *   laufenden DOM an der FeatureInfo-Tafel nachgemessen. Ein Wert innerhalb
 *   unserer Staffel reicht nicht: #ui ist position:static/z-index:auto und
 *   bildet keinen Stapelkontext, unsere 100er stehen also direkt neben Terrias
 *   99989.
 *   GRENZE: Generic/TooltipWrapper.tsx rechnet frontComponentZIndex + 999999 + 2
 *   = 1000100. Darüber kommt dieser Wert nicht, und das ist richtig so — ein
 *   Tooltip gehört über eine Aufklappliste. */
/* ── Schwebende Flächen über der Karte ────────────────────────────────────────
 * Suchfeld, 2D/3D-Schalter, Legenden-Lasche, Trefferliste, Rail und Modulpanel
 * sind dasselbe Material: dunkler Grund, leicht durchscheinend, hinterlegt
 * unscharf. Genau das behauptete dieser Absatz schon vorher — die Werte gaben
 * es nur nicht her: zwei Grundfarben (#111827 für Rail und Panel, #0e1a22 für
 * die Pillen), vier Unschärfen (5/6/8/10px) und drei Randstärken. Nebeneinander
 * auf einer hellen Karte liest sich das als zwei verschiedene Materialien.
 *
 * Jetzt EIN Grundton ($dark, derselbe wie überall sonst in der Oberfläche), EINE
 * Unschärfe und EIN Rand für alles, was frei über der Karte steht. Was sich
 * unterscheiden darf, ist allein die Deckung: je höher eine Fläche liegt, desto
 * weniger scheint sie durch. ($border bleibt daneben bestehen — das ist die
 * Kante zwischen zwei aneinanderstossenden Flächen, keine Aussenkante.)
 * ──────────────────────────────────────────────────────────────────────────── */
/* Aufklappende Listen (Trefferliste der Suche) bekommen einen ruhigeren Radius
   — eine volle Pille würde die erste und letzte Zeile anschneiden. */
/* Eine Stärke für alle: 8px ist kräftig genug, dass Kartenbeschriftung unter
   der Fläche zu Textur wird, und schwach genug, dass der Compositor darunter
   nicht jede Kartenbewegung neu unscharf rechnen muss. */
/* Rechts im Band stehen feste Nachbarn, denen das mittig zentrierte Suchfeld
   ausweichen muss — auf breiten Schirmen fällt das nicht auf, auf schmalen
   sofort. Zwei Stufen:
     $float-rechts        — 2D/3D-Schalter: 21px Rand + 76px Breite + 14px Luft
     $float-rechts-lasche — zusätzlich die eingeklappte Legenden-Lasche, die
                            links daran anschliesst. Sie meldet keine Breite
                            (--wiq-legend-w ist dann 0), deshalb steht sie hier
                            als gemessener Wert: 245px bei „1 aktiv", 254px bei
                            „2 aktiv" — der Zähler lässt sie wachsen, deshalb
                            etwas Zugabe. */
/* Rail und Modulpanel gehören zum selben Material, liegen aber als Spalte fest
   am Rand statt frei über der Karte — sie decken deshalb stärker. */
/* Oberkante der Modulpanels: ganz oben, bündig mit der Rail.
   Das Panel hängt an der Rail und bildet mit ihr eine Fläche — dann darf es
   auch dort anfangen, wo die Rail anfängt. Das schwebende Band (Suchfeld,
   2D/3D, Legenden-Lasche) liegt nicht in dieser Spalte: das Suchfeld ist über
   der freien Kartenfläche zentriert, die beiden anderen sitzen rechts. Die
   frühere Oberkante von 62px hielt Platz für die Werkzeuggruppe frei, die
   inzwischen in die Rail gewandert ist — sie verschenkte nur noch Höhe.
   Unterkante = Oberkante der Statusleiste: beide Kanten treffen sich. */
/* Ränder auf Bildflächen (Vorschaukacheln der Grundkarten). Bilder bringen
   eigene Helligkeit mit — $float-bdr (9 % Weiß) verschwindet auf einer hellen
   Luftbildkachel. Zwei Stufen: ruhend und ausgewählt. */
/* Grund einer Tabellenkopfzeile bzw. einer abgesetzten Zeile innerhalb eines
   Panels — dunkler als die Panelfläche, damit die Kopfzeile beim Scrollen
   stehen bleiben kann, ohne den Inhalt durchscheinen zu lassen. */
/* Hover auf einer bereits gefüllten grauen Fläche ($dark-lighter). */
/* Flächen der schwebenden Panels.
   Vorher 0.82. Das war der Grund für rund ein Dutzend Kontrastbefunde quer
   durch alle Module: die Panelfläche über einer hellen Basiskarte maß real
   #333949 bis #515664 statt #111827, und damit fiel jeder gedämpfte Text auf
   2,9–4,0:1 — je nachdem, worüber das Panel gerade lag. Ein Kontrast, der mit
   dem Kartenausschnitt schwankt, ist kein Kontrast.
   0.93 lässt die Karte als Bewegung hinter dem Panel noch ahnen (darum geht es
   bei der Durchsicht), rechnet die Palette aber wieder verlässlich gegen
   $dark. Der Panelinhalt braucht keinen Durchblick — die Karte liegt daneben,
   nicht darunter.

   Gemessen über weisser Karte (der ungünstigste Fall):
     $text-muted  3,93 -> 5,75   (erst damit über 4,5)
     $text-soft   4,89 -> 7,14
     $text-dim    6,80 -> 9,93
     $primary     2,97 -> 4,34   bleibt UNTER 4,5 — der Akzentton taugt auch
                                 bei dichterem Panel nicht als Schriftfarbe.
                                 Für Text ist $primary-bright zuständig (6,81).
   Wer diesen Wert wieder senkt, holt sich rund ein Dutzend Kontrastbefunde
   zurück. */
/* Das Modulpanel hängt an der Rail und wirft deshalb keinen Schatten nach
   links — dort ist keine Karte, sondern die Rail. Versatz nach rechts plus
   negativer Spread halten den Schatten von der Rail fern. */
/* ── Startbildschirm ──────────────────────────────────────────────────────────
 * Vollflächige Fläche vor der Karte, solange geladen wird (Loader.tsx).
 * Farben kommen aus den Tokens, nicht mehr aus dem alten Sondergrau #383F4D:
 * der Startbildschirm ist das erste, was der Nutzer sieht — er soll wie die
 * Anwendung aussehen, nicht wie ein Vorspann.
 *
 * Dieselben Werte stehen ein zweites Mal in lib/Styles/loader.css, für den
 * Bildschirm, den entry.js vor React aufbaut. Was hier geändert wird, gehört
 * dort nachgezogen.
 * ──────────────────────────────────────────────────────────────────────────── */
.tjs-loader__loader-ui {
  position: fixed;
  inset: 0;
  /* $z-loader, nicht 9999: die Oberfläche staffelt sich sauber von 100 bis 110,
     und ein Wert aus einer anderen Grössenordnung daneben ist keine Ordnung
     mehr, sondern eine Ausnahme, die die nächste einlädt. */
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #111827;
  opacity: 1;
  /* 0,3s. Vorher waren es zwei Sekunden — der Startbildschirm hing damit nach
     dem Laden noch länger über der fertigen Karte als mancher Ladevorgang
     dauert, und weil er `pointer-events: none` trägt, klickte man die ganze
     Zeit durch einen Schleier hindurch. Es ist ein Übergang, kein Abspann.
     $ease-out, weil er verschwindet: schnell weg, ruhig auslaufend. */
  transition: opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  pointer-events: none;
}

.tjs-loader__inhalt {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Anlage und Schriftzug sind eine Sperrmarke, kein Stapel aus zwei Dingen:
     der Abstand ist kleiner als die Höhe des Schriftzugs. Die Zeichnung hat
     oben und unten noch je rund 5px Luft in der viewBox, optisch sind es
     also etwa 30px. */
  gap: 24px;
}

/* Die Anlage. Breite und Höhe stehen beide fest (156 : 196 aus der viewBox),
   damit beim ersten Paint nichts springt — auf einem Startbildschirm fällt
   genau das auf. */
.tjs-loader__wea {
  width: 200px;
  height: 251px;
  /* Das SVG zeichnet mit currentColor — das Türkis steht nur hier. */
  color: #4fd3c0;
}

/* Drehung des Rotors.
 * Drehpunkt ist die Nabe (78 | 78 in der viewBox). Deshalb `view-box` und
 * nicht `fill-box`: die Bounding-Box der drei Blätter ist zwar um die Nabe
 * zentriert, die der Gruppe samt Nabenring aber nicht zwingend — und mit
 * `view-box` steht der Drehpunkt als Koordinate da, statt aus Blattlängen zu
 * folgen. Ändern sich die Blätter, bleibt er richtig. Die viewBox beginnt bei
 * 0 0, damit die Koordinate direkt der Nabe entspricht.
 *
 * 1.4s pro Umdrehung. Vorher standen hier 3s mit der Begründung, echte Anlagen
 * drehten mit 10–20 U/min. Das stimmt, taugt hier aber nicht: der
 * Startbildschirm steht oft nur eine Sekunde, und in der Zeit dreht sich das
 * Rad bei 3s gerade um ein Drittel — gemessen 12 Grad pro 100 ms. Das liest
 * sich als Standbild, nicht als Bewegung. Eine Ladeanzeige muss auf den ersten
 * Blick lebendig sein; Anlagenrealismus ist hier das schwächere Argument.
 * 1.4s (rund 43 U/min) dreht sichtbar und bleibt trotzdem eine Windenergie-
 * anlage statt eines Kreisels — dank der drei Blätter alle 120 Grad wiederholt
 * sich das Bild sogar rund dreimal je Umdrehung.
 *
 * `linear`, weil die Drehung endlos ist: jede Ease-Kurve würde bei jedem
 * Durchlauf an derselben Stelle bremsen und beschleunigen, und genau dieses
 * Stocken liest sich als Ruckeln. */
.tjs-loader__rotor {
  transform-box: view-box;
  transform-origin: 78px 78px;
  animation: tjs-loader__wiq-rotor 1.4s linear infinite;
}

@keyframes tjs-loader__wiq-rotor {
  to {
    transform: rotate(360deg);
  }
}
/* Der Schriftzug aus der Logodatei, ohne die Bildmarke.
 * Die Datei ist 2297 × 496 px: Bildmarke bei x 0–413, Lücke, Schriftzug ab
 * x 472 bis zum rechten Rand. Der Ausschnitt entsteht deshalb ohne zweite
 * Datei allein aus Seitenverhältnis und Ausrichtung: das Fenster bekommt
 * exakt das Verhältnis des Schriftzugs (1825 × 496), `cover` skaliert das
 * Bild auf Fensterhöhe, und `object-position: 100%` schiebt es nach rechts
 * bündig — abgeschnitten wird damit genau der Teil links von x 472.
 * Dieselbe Technik wie in icon-rail.scss, dort nur andersherum.
 *
 * Die Bildmarke gehört hier nicht hin: darüber steht bereits eine Anlage,
 * zwei Windräder übereinander wären ein Fehler. */
.tjs-loader__schriftzug {
  display: block;
  width: 240px;
  aspect-ratio: 1825/496;
  max-width: none;
  object-fit: cover;
  object-position: 100% 50%;
}

/* Für Screenreader, nicht für Augen: aus dem Layout genommen, aber nicht
   `display: none` — sonst wird es nicht vorgelesen. */
.tjs-loader__nur-vorlesen {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Weniger Bewegung: keine Dauerdrehung. Der Rotor steht, und dass gearbeitet
   wird, sagt ein ruhiges Auf- und Abblenden — Deckkraft statt Bewegung.
   Es pulsiert nur der Rotor, nicht die ganze Zeichnung: ein Turm, der mit
   atmet, sähe nach fehlerhaftem Rendern aus. Langsamer als die Drehung
   (2,4s), weil eine Helligkeitsänderung schneller auffällt als eine
   gleichförmige Bewegung. */
@media (prefers-reduced-motion: reduce) {
  .tjs-loader__rotor {
    animation: tjs-loader__wiq-rotor-puls 2.4s ease-in-out infinite;
  }
}
@keyframes tjs-loader__wiq-rotor-puls {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.45;
  }
}