@charset "UTF-8";

/*!
 * Bootstrap v4.1.3 (https://getbootstrap.com/)
 * Copyright 2011-2018 The Bootstrap Authors
 * Copyright 2011-2018 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */
:root {
  --blue: #007bff;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #e83e8c;
  --red: #dc3545;
  --orange: #fd7e14;
  --yellow: #ffc107;
  --green: #28a745;
  --teal: #20c997;
  --cyan: #17a2b8;
  --white: #fff;
  --gray: #6c757d;
  --gray-dark: #343a40;
  --success: #28a745;
  --info: #17a2b8;
  --warning: #ffc107;
  --danger: #dc3545;
  --light: #f8f9fa;
  --dark: #343a40;
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --borderRadius-sm: 0.2rem;
  --borderRadius-md: 0.4rem;
  
  
  
  --background-url: url("../img/NEXT_Suite_Login_background_only.svg");
  --primary: #009FDF; 
  --primary-hover: #0084b9;
  --primary-active: #007bac;
  --primary-border: #00729f;
  --primary-border-dark: #008DB1;
  --primary-box-shadow: rgba(0, 159, 223, 0.5);
  --primary-box-shadow-light: rgba(0, 159, 223, 0.25);
  --primary-light-background:#AFDDF2;
  --side-menu-color: #01426a; 
  --side-menu-hover: #125080;   /* toned down hover */
  --side-menu-active: #036094;  /* darker, less bright active */
  --element-light-border:#ced4da;
  --imput-focus-color:#60d1ff;
  --secondary: #707070;

  /* Themeable tokens added for white-label theming (themes/tokens.js). The
     values here are the pre-theming look; applyTheme() overrides them per
     customer at boot. */
  --primary-text-color: #fff;            /* text on .btn-primary fills */
  --nav-background: transparent;         /* top nav bar (NavBar.svelte)  */
  --nav-link-color: rgba(0, 0, 0, 0.5);
  --nav-link-disabled-color: rgba(0, 0, 0, 0.3);
  --nav-toggler-filter: none;            /* lightens the hamburger on dark bars */
  --nav-headline-color: var(--primary);  /* centred page title in the nav bar  */
  --nav-active-link-color: var(--primary); /* active nav entry                 */
  --panel-title-color: var(--primary);   /* .p-kachel headings above the rail  */
  --link-hover-color: #006893;           /* .btn-link hover (was hard-coded)   */
  --on-dark-text: #fff;                  /* text on the side rail's cards      */
  --rail-muted-text: #c0c0c0;            /* secondary text on the rail (.gray)  */
  --rail-item-border: rgba(255, 255, 255, 0.125); /* rail list-item hairline    */
  --on-tint-text: #fff;                  /* text on --primary-light-background  */
  --rail-field-border: transparent;      /* inputs sitting on the side rail     */
  /* Fill of the auth pages' primary call to action. Defaults to the darker step
     of the brand ladder, which is what a light brand needs to carry text at
     4.5:1. A brand whose BASE --primary already clears that against
     --primary-text-color overrides this with --primary — for 2kai the darker
     step is actually the worse of the two (4.4:1 vs 5.0:1), so the right step
     is a per-tenant fact and belongs in the theme. */
  --auth-cta-bg: var(--primary-active);
  /* Everything drawn ON the login page's background image. The image is the
     theme's (--background-url), so its text colour has to travel with it: a
     tenant that ships a light photo flips this, and nothing else changes. */
  --on-login-bg: #fff;
  /* 2kai corporate accents, promoted from Footer.svelte's local vars (the
     Footer still defines shadowing locals until MW-437 removes them). */
  --brand-orange: #ee9d33;
  --brand-grey: #3b3c3b;
  --brand-light-grey: #dcdcdb;
}

/* =========================================================================
   Dark-mode semantic tokens
   -------------------------------------------------------------------------
   Role-based colours consumed by the app shell and the dark overrides at the
   bottom of this file. Light values live on :root; the [data-theme="dark"]
   block redefines the same tokens, so flipping the attribute on <html>
   (scripts/theme.js) re-themes everything that reads var(--token).
   Brand tokens above (--primary, --side-menu-color, …) are intentionally kept.
   ========================================================================= */
:root {
  color-scheme: light;

  --bg-page: #f6f6f6;         /* app background            */
  --surface: #ffffff;         /* cards, boxes, modals      */
  --surface-2: #f8f9fa;       /* subtle raised / striped   */
  --surface-3: #eef0f2;       /* hover / active fills      */
  --text: #333333;            /* default body text         */
  --text-strong: #212529;     /* headings / emphasised     */
  --text-muted: #6c757d;      /* secondary / labels        */
  --border-color: #dee2e6;    /* dividers, card borders    */
  --border-subtle: #e9ecef;   /* faint separators          */
  --input-bg: #ffffff;
  --input-color: #495057;
  --input-border: #ced4da;
  --dropdown-bg: #ffffff;
  --dropdown-hover: #f1f3f5;
  --shadow-color: rgba(0, 0, 0, 0.1);

  /* Segmented control. The light values are the control's historical look
     (brand tint track, --on-tint-text labels) named as tokens so the dark block
     can restate them without redefining the brand tokens themselves — those are
     also read by the role chips and the feature matrix, which want to stay
     branded. */
  --segment-track-bg: var(--primary-light-background);
  --segment-track-border: var(--element-light-border);
  --segment-inactive-color: var(--on-tint-text);

  /* Data-cell highlight tints (min/max extremes, boolean status in .mv-table).
     Alpha overlays, so the same values read correctly on both the light and
     dark surfaces — deliberately not redefined in the dark block. The -hover
     variants deepen under the full-row hover. */
  --cell-danger: rgba(255, 0, 0, 0.25);
  --cell-danger-hover: rgba(255, 0, 0, 0.4);
  --cell-success: rgba(0, 255, 0, 0.25);
  --cell-success-hover: rgba(0, 255, 0, 0.4);

  /* Chart series palette (docs/dark-mode.md §3.4).
     These are the colours WaterMeterGraph.svelte and HymoGraph.svelte have
     always drawn with, lifted out of the two JS arrays so a chart written later
     wears the same palette and a theme can restate it. Highcharts renders SVG
     and cannot read a custom property itself — core/ui/chart-theme.js reads
     these and hands them over. 1–10 are the existing house order; 11–12 extend
     it to the 12-series limit the Trends surface allows. */
  --chart-1: #7cb5ec;
  --chart-2: #f7a35c;
  --chart-3: #31ac0d;
  --chart-4: #a960af;
  --chart-5: #ff0066;
  --chart-6: #666666;
  --chart-7: #d1c924;
  --chart-8: #eeaaee;
  --chart-9: #ffcc00;
  --chart-10: #00ccff;
  --chart-11: #8085e9;
  --chart-12: #2b908f;
  --chart-tooltip-bg: rgba(219, 219, 216, 0.8);
  --chart-tooltip-text: #212529;

  /* The navigator's selected-range wash (Highstock: `navigator.maskFill`).
     A translucent overlay rather than one of the --surface-N steps, because it
     is painted OVER the navigator's own mini-series and has to let it through.
     Highcharts' default is its highlight blue at 0.3 opacity, which has no dark
     counterpart; a neutral wash is symmetric — darker than the page in light
     mode, lighter than it in dark mode — so "this window is selected" reads the
     same way on both. */
  --chart-navigator-mask: rgba(0, 0, 0, 0.08);
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg-page: #121417;
  --surface: #1c1f24;
  --surface-2: #23272e;
  --surface-3: #2b303a;
  --text: #e4e6eb;
  --text-strong: #f5f6f7;
  --text-muted: #9aa4b2;
  --border-color: #333a44;
  --border-subtle: #2b313b;
  --input-bg: #23272e;
  --input-color: #e4e6eb;
  --input-border: #3a424e;
  --dropdown-bg: #23272e;
  --dropdown-hover: #2f3540;
  --shadow-color: rgba(0, 0, 0, 0.5);

  /* The side rail's inputs need a border here. The light default is
     `transparent`, which is right when the rail is a dark slab and the field a
     white card cut out of it — the contrast does the framing. In dark mode the
     rail is `.display_box`'s --surface and the field is --input-bg, one step
     apart, so with no border the search box has no edge at all. */
  --rail-field-border: var(--input-border);

  /* Segmented control (.segment / .segmented-control*). Its track is the brand
     TINT, a pale wash of --primary that exists to sit on a light page; on a
     dark one it is the brightest thing on screen, and the unselected label —
     --on-tint-text, chosen to read on that wash — goes with it. Dark mode
     therefore swaps the track for a neutral raised surface and lets the label
     use ordinary muted text. The SELECTED segment keeps --primary, so the
     control still says which brand it belongs to. */
  --segment-track-bg: var(--surface-2);
  --segment-track-border: var(--border-color);
  --segment-inactive-color: var(--text-muted);

  /* Chart palette on the dark surface. Most of the house colours already carry
     enough luminance against #1c1f24 and are kept verbatim so a chart is
     recognisably the same chart; the three that do not — the mid grey, the deep
     pink and the saturated yellow — are lifted just far enough to clear the
     background without becoming a different hue. */
  --chart-6: #a6adba;
  --chart-5: #ff5c95;
  --chart-9: #ffd633;
  --chart-tooltip-bg: rgba(35, 39, 46, 0.95);
  --chart-tooltip-text: #e4e6eb;
  --chart-navigator-mask: rgba(255, 255, 255, 0.12);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -ms-overflow-style: scrollbar;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

html,
body {
  font-family: 'Inter',Arial, sans-serif;
  background-color: var(--bg-page);
  transition: background-color 0.2s ease, color 0.2s ease;
}

article,
aside,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section {
  display: block;
}

body {
  margin: 0;
  /* font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; */
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--text);
  text-align: left;
}

[tabindex="-1"]:focus {
  outline: 0 !important;
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;
  margin-bottom: 0.5rem;
}

p {
  margin-top: 0;
  margin-bottom: 1rem;
}

abbr[title],
abbr[data-original-title] {
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
  cursor: help;
  border-bottom: 0;
}

address {
  margin-bottom: 1rem;
  font-style: normal;
  line-height: inherit;
}

ol,
ul,
dl {
  margin-top: 0;
  margin-bottom: 1rem;
}

ol ol,
ul ul,
ol ul,
ul ol {
  margin-bottom: 0;
}

dt {
  font-weight: 700;
}

dd {
  margin-bottom: 0.5rem;
  margin-left: 0;
}

blockquote {
  margin: 0 0 1rem;
}

dfn {
  font-style: italic;
}

b,
strong {
  font-weight: bolder;
}

small {
  font-size: 80%;
}

sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

a {
  color: var(--primary);
  text-decoration: none;
  background-color: transparent;
  -webkit-text-decoration-skip: objects;
}

a:hover {
  /* Was EWE's dark blue, so every link in the app hovered EWE-blue
     whatever the tenant. --link-hover-color resolves to that same blue for
     the EWE build. */
  color: var(--link-hover-color);
  text-decoration: underline;
}

a:not([href]):not([tabindex]) {
  color: inherit;
  text-decoration: none;
}

a:not([href]):not([tabindex]):hover,
a:not([href]):not([tabindex]):focus {
  color: inherit;
  text-decoration: none;
}

a:not([href]):not([tabindex]):focus {
  outline: 0;
}

pre,
code,
kbd,
samp {
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 1em;
}

pre {
  margin-top: 0;
  margin-bottom: 1rem;
  overflow: auto;
  -ms-overflow-style: scrollbar;
}

figure {
  margin: 0 0 1rem;
}

img {
  vertical-align: middle;
  border-style: none;
}

svg {
  overflow: hidden;
  vertical-align: middle;
}

table {
  border-collapse: collapse;
}

caption {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  color: #6c757d;
  text-align: left;
  caption-side: bottom;
}

th {
  text-align: inherit;
}

label {
  display: inline-block;
  margin-bottom: 0.5rem;
  font-weight: 500;
}

button {
  border-radius: 0;
}

button:focus {
  outline: 1px dotted;
  outline: 5px auto -webkit-focus-ring-color;
}

input,
button,
select,
optgroup,
textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

button,
html [type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  padding: 0;
  border-style: none;
}

input[type=radio],
input[type=checkbox] {
  box-sizing: border-box;
  padding: 0;
}

input[type=date],
input[type=time],
input[type=datetime-local],
input[type=month] {
  -webkit-appearance: listbox;
}

textarea {
  overflow: auto;
  resize: vertical;
}

fieldset {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}

legend {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin-bottom: 0.5rem;
  font-size: 1.5rem;
  line-height: inherit;
  color: inherit;
  white-space: normal;
}

progress {
  vertical-align: baseline;
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

[type=search] {
  outline-offset: -2px;
  -webkit-appearance: none;
}

[type=search]::-webkit-search-cancel-button,
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  font: inherit;
  -webkit-appearance: button;
}

output {
  display: inline-block;
}

summary {
  display: list-item;
  cursor: pointer;
}

template {
  display: none;
}

[hidden] {
  display: none !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  margin-bottom: 0.5rem;
  font-family: inherit;
  font-weight: 500;
  line-height: 1.2;
  color: inherit;
}

h1,
.h1 {
  font-size: 2.5rem;
}

h2,
.h2 {
  font-size: 2rem;
}

h3,
.h3 {
  font-size: 1.75rem;
}

h4,
.h4 {
  font-size: 1.5rem;
}

h5,
.h5 {
  font-size: 1.25rem;
}

h6,
.h6 {
  font-size: 1rem;
}

.lead {
  font-size: 1.25rem;
  font-weight: 300;
}

.display-1 {
  font-size: 6rem;
  font-weight: 300;
  line-height: 1.2;
}

.display-2 {
  font-size: 5.5rem;
  font-weight: 300;
  line-height: 1.2;
}

.display-3 {
  font-size: 4.5rem;
  font-weight: 300;
  line-height: 1.2;
}

.display-4 {
  font-size: 3.5rem;
  font-weight: 300;
  line-height: 1.2;
}

hr {
  margin-top: 1rem;
  margin-bottom: 1rem;
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

small,
.small {
  font-size: 80%;
  font-weight: 400;
}

mark,
.mark {
  padding: 0.2em;
  background-color: #fcf8e3;
}

.list-unstyled {
  padding-left: 0;
  list-style: none;
}

.list-inline {
  padding-left: 0;
  list-style: none;
}

.list-inline-item {
  display: inline-block;
}

.list-inline-item:not(:last-child) {
  margin-right: 0.5rem;
}

.initialism {
  font-size: 90%;
  text-transform: uppercase;
}

.blockquote {
  margin-bottom: 1rem;
  font-size: 1.25rem;
}

.blockquote-footer {
  display: block;
  font-size: 80%;
  color: #6c757d;
}

.blockquote-footer::before {
  content: "— ";
}

.img-fluid {
  max-width: 100%;
  height: auto;
}

.img-thumbnail {
  padding: 0.25rem;
  background-color: #fff;
  border: 1px solid #dee2e6;
  border-radius: 0.25rem;
  max-width: 100%;
  height: auto;
}

.figure {
  display: inline-block;
}

.figure-img {
  margin-bottom: 0.5rem;
  line-height: 1;
}

.figure-caption {
  font-size: 90%;
  color: #6c757d;
}

code {
  font-size: 87.5%;
  color: #e83e8c;
  word-break: break-word;
}

a>code {
  color: inherit;
}

kbd {
  padding: 0.2rem 0.4rem;
  font-size: 87.5%;
  color: #fff;
  background-color: #212529;
  border-radius: 0.2rem;
}

kbd kbd {
  padding: 0;
  font-size: 100%;
  font-weight: 700;
}

pre {
  display: block;
  font-size: 87.5%;
  color: #212529;
}

pre code {
  font-size: inherit;
  color: inherit;
  word-break: normal;
}

.pre-scrollable {
  max-height: 340px;
  overflow-y: scroll;
}

.container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}

.primary-color {
  color: var(--primary) !important;
}

.container-fluid {
  /* Bootstrap ships 100%; this was once 100vw, which measures the viewport
     INCLUDING the vertical scrollbar. On any page tall enough to scroll the
     wrapper was therefore ~15px wider than the document, producing a
     horizontal scrollbar and shifting everything inside it — including the
     full-bleed top bar — a few pixels off centre. */
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

.no-gutters {
  margin-right: 0;
  margin-left: 0;
}

.no-gutters>.col,
.no-gutters>[class*=col-] {
  padding-right: 0;
  padding-left: 0;
}

.col-xl,
.col-xl-auto,
.col-xl-12,
.col-xl-11,
.col-xl-10,
.col-xl-9,
.col-xl-8,
.col-xl-7,
.col-xl-6,
.col-xl-5,
.col-xl-4,
.col-xl-3,
.col-xl-2,
.col-xl-1,
.col-lg,
.col-lg-auto,
.col-lg-12,
.col-lg-11,
.col-lg-10,
.col-lg-9,
.col-lg-8,
.col-lg-7,
.col-lg-6,
.col-lg-5,
.col-lg-4,
.col-lg-3,
.col-lg-2,
.col-lg-1,
.col-md,
.col-md-auto,
.col-md-12,
.col-md-11,
.col-md-10,
.col-md-9,
.col-md-8,
.col-md-7,
.col-md-6,
.col-md-5,
.col-md-4,
.col-md-3,
.col-md-2,
.col-md-1,
.col-sm,
.col-sm-auto,
.col-sm-12,
.col-sm-11,
.col-sm-10,
.col-sm-9,
.col-sm-8,
.col-sm-7,
.col-sm-6,
.col-sm-5,
.col-sm-4,
.col-sm-3,
.col-sm-2,
.col-sm-1,
.col,
.col-auto,
.col-12,
.col-11,
.col-10,
.col-9,
.col-8,
.col-7,
.col-6,
.col-5,
.col-4,
.col-3,
.col-2,
.col-1 {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

.col {
  flex-basis: 0;
  flex-grow: 1;
  max-width: 100%;
}

.col-auto {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
}

.col-1 {
  flex: 0 0 8.3333333333%;
  max-width: 8.3333333333%;
}

.col-2 {
  flex: 0 0 16.6666666667%;
  max-width: 16.6666666667%;
}

.col-3 {
  flex: 0 0 25%;
  max-width: 25%;
}

.col-4 {
  flex: 0 0 33.3333333333%;
  max-width: 33.3333333333%;
}

.col-5 {
  flex: 0 0 41.6666666667%;
  max-width: 41.6666666667%;
}

.col-6 {
  flex: 0 0 50%;
  max-width: 50%;
}

.col-7 {
  flex: 0 0 58.3333333333%;
  max-width: 58.3333333333%;
}

.col-8 {
  flex: 0 0 66.6666666667%;
  max-width: 66.6666666667%;
}

.col-9 {
  flex: 0 0 75%;
  max-width: 75%;
}

.col-10 {
  flex: 0 0 83.3333333333%;
  max-width: 83.3333333333%;
}

.col-11 {
  flex: 0 0 91.6666666667%;
  max-width: 91.6666666667%;
}

.col-12 {
  flex: 0 0 100%;
  max-width: 100%;
}

.order-first {
  order: -1;
}

.order-last {
  order: 13;
}

.order-0 {
  order: 0;
}

.order-1 {
  order: 1;
}

.order-2 {
  order: 2;
}

.order-3 {
  order: 3;
}

.order-4 {
  order: 4;
}

.order-5 {
  order: 5;
}

.order-6 {
  order: 6;
}

.order-7 {
  order: 7;
}

.order-8 {
  order: 8;
}

.order-9 {
  order: 9;
}

.order-10 {
  order: 10;
}

.order-11 {
  order: 11;
}

.order-12 {
  order: 12;
}

.offset-1 {
  margin-left: 8.3333333333%;
}

.offset-2 {
  margin-left: 16.6666666667%;
}

.offset-3 {
  margin-left: 25%;
}

.offset-4 {
  margin-left: 33.3333333333%;
}

.offset-5 {
  margin-left: 41.6666666667%;
}

.offset-6 {
  margin-left: 50%;
}

.offset-7 {
  margin-left: 58.3333333333%;
}

.offset-8 {
  margin-left: 66.6666666667%;
}

.offset-9 {
  margin-left: 75%;
}

.offset-10 {
  margin-left: 83.3333333333%;
}

.offset-11 {
  margin-left: 91.6666666667%;
}

@media (min-width: 576px) {
  .col-sm {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
  }

  .col-sm-auto {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
  }

  .col-sm-1 {
    flex: 0 0 8.3333333333%;
    max-width: 8.3333333333%;
  }

  .col-sm-2 {
    flex: 0 0 16.6666666667%;
    max-width: 16.6666666667%;
  }

  .col-sm-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }

  .col-sm-4 {
    flex: 0 0 33.3333333333%;
    max-width: 33.3333333333%;
  }

  .col-sm-5 {
    flex: 0 0 41.6666666667%;
    max-width: 41.6666666667%;
  }

  .col-sm-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .col-sm-7 {
    flex: 0 0 58.3333333333%;
    max-width: 58.3333333333%;
  }

  .col-sm-8 {
    flex: 0 0 66.6666666667%;
    max-width: 66.6666666667%;
  }

  .col-sm-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }

  .col-sm-10 {
    flex: 0 0 83.3333333333%;
    max-width: 83.3333333333%;
  }

  .col-sm-11 {
    flex: 0 0 91.6666666667%;
    max-width: 91.6666666667%;
  }

  .col-sm-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .order-sm-first {
    order: -1;
  }

  .order-sm-last {
    order: 13;
  }

  .order-sm-0 {
    order: 0;
  }

  .order-sm-1 {
    order: 1;
  }

  .order-sm-2 {
    order: 2;
  }

  .order-sm-3 {
    order: 3;
  }

  .order-sm-4 {
    order: 4;
  }

  .order-sm-5 {
    order: 5;
  }

  .order-sm-6 {
    order: 6;
  }

  .order-sm-7 {
    order: 7;
  }

  .order-sm-8 {
    order: 8;
  }

  .order-sm-9 {
    order: 9;
  }

  .order-sm-10 {
    order: 10;
  }

  .order-sm-11 {
    order: 11;
  }

  .order-sm-12 {
    order: 12;
  }

  .offset-sm-0 {
    margin-left: 0;
  }

  .offset-sm-1 {
    margin-left: 8.3333333333%;
  }

  .offset-sm-2 {
    margin-left: 16.6666666667%;
  }

  .offset-sm-3 {
    margin-left: 25%;
  }

  .offset-sm-4 {
    margin-left: 33.3333333333%;
  }

  .offset-sm-5 {
    margin-left: 41.6666666667%;
  }

  .offset-sm-6 {
    margin-left: 50%;
  }

  .offset-sm-7 {
    margin-left: 58.3333333333%;
  }

  .offset-sm-8 {
    margin-left: 66.6666666667%;
  }

  .offset-sm-9 {
    margin-left: 75%;
  }

  .offset-sm-10 {
    margin-left: 83.3333333333%;
  }

  .offset-sm-11 {
    margin-left: 91.6666666667%;
  }
}

@media (min-width: 768px) {
  .col-md {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
  }

  .col-md-auto {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
  }

  .col-md-1 {
    flex: 0 0 8.3333333333%;
    max-width: 8.3333333333%;
  }

  .col-md-2 {
    flex: 0 0 16.6666666667%;
    max-width: 16.6666666667%;
  }

  .col-md-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }

  .col-md-4 {
    flex: 0 0 33.3333333333%;
    max-width: 33.3333333333%;
  }

  .col-md-5 {
    flex: 0 0 41.6666666667%;
    max-width: 41.6666666667%;
  }

  .col-md-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .col-md-7 {
    flex: 0 0 58.3333333333%;
    max-width: 58.3333333333%;
  }

  .col-md-8 {
    flex: 0 0 66.6666666667%;
    max-width: 66.6666666667%;
  }

  .col-md-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }

  .col-md-10 {
    flex: 0 0 83.3333333333%;
    max-width: 83.3333333333%;
  }

  .col-md-11 {
    flex: 0 0 91.6666666667%;
    max-width: 91.6666666667%;
  }

  .col-md-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .order-md-first {
    order: -1;
  }

  .order-md-last {
    order: 13;
  }

  .order-md-0 {
    order: 0;
  }

  .order-md-1 {
    order: 1;
  }

  .order-md-2 {
    order: 2;
  }

  .order-md-3 {
    order: 3;
  }

  .order-md-4 {
    order: 4;
  }

  .order-md-5 {
    order: 5;
  }

  .order-md-6 {
    order: 6;
  }

  .order-md-7 {
    order: 7;
  }

  .order-md-8 {
    order: 8;
  }

  .order-md-9 {
    order: 9;
  }

  .order-md-10 {
    order: 10;
  }

  .order-md-11 {
    order: 11;
  }

  .order-md-12 {
    order: 12;
  }

  .offset-md-0 {
    margin-left: 0;
  }

  .offset-md-1 {
    margin-left: 8.3333333333%;
  }

  .offset-md-2 {
    margin-left: 16.6666666667%;
  }

  .offset-md-3 {
    margin-left: 25%;
  }

  .offset-md-4 {
    margin-left: 33.3333333333%;
  }

  .offset-md-5 {
    margin-left: 41.6666666667%;
  }

  .offset-md-6 {
    margin-left: 50%;
  }

  .offset-md-7 {
    margin-left: 58.3333333333%;
  }

  .offset-md-8 {
    margin-left: 66.6666666667%;
  }

  .offset-md-9 {
    margin-left: 75%;
  }

  .offset-md-10 {
    margin-left: 83.3333333333%;
  }

  .offset-md-11 {
    margin-left: 91.6666666667%;
  }
}

@media (min-width: 992px) {
  .col-lg {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
  }

  .col-lg-auto {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
  }

  .col-lg-1 {
    flex: 0 0 8.3333333333%;
    max-width: 8.3333333333%;
  }

  .col-lg-2 {
    flex: 0 0 16.6666666667%;
    max-width: 16.6666666667%;
  }

  .col-lg-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }

  .col-lg-4 {
    flex: 0 0 33.3333333333%;
    max-width: 33.3333333333%;
  }

  .col-lg-5 {
    flex: 0 0 41.6666666667%;
    max-width: 41.6666666667%;
  }

  .col-lg-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .col-lg-7 {
    flex: 0 0 58.3333333333%;
    max-width: 58.3333333333%;
  }

  .col-lg-8 {
    flex: 0 0 66.6666666667%;
    max-width: 66.6666666667%;
  }

  .col-lg-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }

  .col-lg-10 {
    flex: 0 0 83.3333333333%;
    max-width: 83.3333333333%;
  }

  .col-lg-11 {
    flex: 0 0 91.6666666667%;
    max-width: 91.6666666667%;
  }

  .col-lg-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .order-lg-first {
    order: -1;
  }

  .order-lg-last {
    order: 13;
  }

  .order-lg-0 {
    order: 0;
  }

  .order-lg-1 {
    order: 1;
  }

  .order-lg-2 {
    order: 2;
  }

  .order-lg-3 {
    order: 3;
  }

  .order-lg-4 {
    order: 4;
  }

  .order-lg-5 {
    order: 5;
  }

  .order-lg-6 {
    order: 6;
  }

  .order-lg-7 {
    order: 7;
  }

  .order-lg-8 {
    order: 8;
  }

  .order-lg-9 {
    order: 9;
  }

  .order-lg-10 {
    order: 10;
  }

  .order-lg-11 {
    order: 11;
  }

  .order-lg-12 {
    order: 12;
  }

  .offset-lg-0 {
    margin-left: 0;
  }

  .offset-lg-1 {
    margin-left: 8.3333333333%;
  }

  .offset-lg-2 {
    margin-left: 16.6666666667%;
  }

  .offset-lg-3 {
    margin-left: 25%;
  }

  .offset-lg-4 {
    margin-left: 33.3333333333%;
  }

  .offset-lg-5 {
    margin-left: 41.6666666667%;
  }

  .offset-lg-6 {
    margin-left: 50%;
  }

  .offset-lg-7 {
    margin-left: 58.3333333333%;
  }

  .offset-lg-8 {
    margin-left: 66.6666666667%;
  }

  .offset-lg-9 {
    margin-left: 75%;
  }

  .offset-lg-10 {
    margin-left: 83.3333333333%;
  }

  .offset-lg-11 {
    margin-left: 91.6666666667%;
  }
}

@media (min-width: 1200px) {
  .col-xl {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
  }

  .col-xl-auto {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
  }

  .col-xl-1 {
    flex: 0 0 8.3333333333%;
    max-width: 8.3333333333%;
  }

  .col-xl-2 {
    flex: 0 0 16.6666666667%;
    max-width: 16.6666666667%;
  }

  .col-xl-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }

  .col-xl-4 {
    flex: 0 0 33.3333333333%;
    max-width: 33.3333333333%;
  }

  .col-xl-5 {
    flex: 0 0 41.6666666667%;
    max-width: 41.6666666667%;
  }

  .col-xl-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .col-xl-7 {
    flex: 0 0 58.3333333333%;
    max-width: 58.3333333333%;
  }

  .col-xl-8 {
    flex: 0 0 66.6666666667%;
    max-width: 66.6666666667%;
  }

  .col-xl-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }

  .col-xl-10 {
    flex: 0 0 83.3333333333%;
    max-width: 83.3333333333%;
  }

  .col-xl-11 {
    flex: 0 0 91.6666666667%;
    max-width: 91.6666666667%;
  }

  .col-xl-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .order-xl-first {
    order: -1;
  }

  .order-xl-last {
    order: 13;
  }

  .order-xl-0 {
    order: 0;
  }

  .order-xl-1 {
    order: 1;
  }

  .order-xl-2 {
    order: 2;
  }

  .order-xl-3 {
    order: 3;
  }

  .order-xl-4 {
    order: 4;
  }

  .order-xl-5 {
    order: 5;
  }

  .order-xl-6 {
    order: 6;
  }

  .order-xl-7 {
    order: 7;
  }

  .order-xl-8 {
    order: 8;
  }

  .order-xl-9 {
    order: 9;
  }

  .order-xl-10 {
    order: 10;
  }

  .order-xl-11 {
    order: 11;
  }

  .order-xl-12 {
    order: 12;
  }

  .offset-xl-0 {
    margin-left: 0;
  }

  .offset-xl-1 {
    margin-left: 8.3333333333%;
  }

  .offset-xl-2 {
    margin-left: 16.6666666667%;
  }

  .offset-xl-3 {
    margin-left: 25%;
  }

  .offset-xl-4 {
    margin-left: 33.3333333333%;
  }

  .offset-xl-5 {
    margin-left: 41.6666666667%;
  }

  .offset-xl-6 {
    margin-left: 50%;
  }

  .offset-xl-7 {
    margin-left: 58.3333333333%;
  }

  .offset-xl-8 {
    margin-left: 66.6666666667%;
  }

  .offset-xl-9 {
    margin-left: 75%;
  }

  .offset-xl-10 {
    margin-left: 83.3333333333%;
  }

  .offset-xl-11 {
    margin-left: 91.6666666667%;
  }
}

.table {
  width: 100%;
  margin-bottom: 1rem;
  background-color: transparent;
}

.table th,
.table td {
  padding: 0.75rem;
  vertical-align: top;
}


.table thead th {
  vertical-align: bottom;
  border-bottom: 2px solid #dee2e6;
}

.table tbody+tbody {
  border-top: 2px solid #dee2e6;
}

.table .table {
  background-color: #fff;
}

.table-sm th,
.table-sm td {
  padding: 0.3rem;
}

.table-bordered {
  border: 1px solid #dee2e6;
}

.table-bordered th,
.table-bordered td {
  border: 1px solid #dee2e6;
}

.table-bordered thead th,
.table-bordered thead td {
  border-bottom-width: 2px;
}

.table-borderless th,
.table-borderless td,
.table-borderless thead th,
.table-borderless tbody+tbody {
  border: 0;
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(0, 0, 0, 0.05);
}

.table-hover tbody tr:hover {
  background-color: rgba(0, 0, 0, 0.075);
}

.table tr:last-child {
  border-bottom: 1px solid #dee2e6;
}

.table-primary,
.table-primary>th,
.table-primary>td {
  background-color: #b8e4f6;
}

.table-hover .table-primary:hover {
  background-color: #a1dbf3;
}

.table-hover .table-primary:hover>td,
.table-hover .table-primary:hover>th {
  background-color: #a1dbf3;
}

.table-secondary,
.table-secondary>th,
.table-secondary>td {
  background-color: #d7d7d7;
}

.table-hover .table-secondary:hover {
  background-color: #cacaca;
}

.table-hover .table-secondary:hover>td,
.table-hover .table-secondary:hover>th {
  background-color: #cacaca;
}

.table-success,
.table-success>th,
.table-success>td {
  background-color: #c3e6cb;
}

.table-hover .table-success:hover {
  background-color: #b1dfbb;
}

.table-hover .table-success:hover>td,
.table-hover .table-success:hover>th {
  background-color: #b1dfbb;
}

.table-info,
.table-info>th,
.table-info>td {
  background-color: #bee5eb;
}

.table-hover .table-info:hover {
  background-color: #abdde5;
}

.table-hover .table-info:hover>td,
.table-hover .table-info:hover>th {
  background-color: #abdde5;
}

.table-warning,
.table-warning>th,
.table-warning>td {
  background-color: #ffeeba;
}

.table-hover .table-warning:hover {
  background-color: #ffe8a1;
}

.table-hover .table-warning:hover>td,
.table-hover .table-warning:hover>th {
  background-color: #ffe8a1;
}

.table-danger,
.table-danger>th,
.table-danger>td {
  background-color: #f5c6cb;
}

.table-hover .table-danger:hover {
  background-color: #f1b0b7;
}

.table-hover .table-danger:hover>td,
.table-hover .table-danger:hover>th {
  background-color: #f1b0b7;
}

.table-light,
.table-light>th,
.table-light>td {
  background-color: #fdfdfe;
}

.table-hover .table-light:hover {
  background-color: #ececf6;
}

.table-hover .table-light:hover>td,
.table-hover .table-light:hover>th {
  background-color: #ececf6;
}

.table-dark,
.table-dark>th,
.table-dark>td {
  background-color: #c6c8ca;
}

.table-hover .table-dark:hover {
  background-color: #b9bbbe;
}

.table-hover .table-dark:hover>td,
.table-hover .table-dark:hover>th {
  background-color: #b9bbbe;
}

.table-active,
.table-active>th,
.table-active>td {
  background-color: rgba(0, 0, 0, 0.075);
}

.table-hover .table-active:hover {
  background-color: rgba(0, 0, 0, 0.075);
}

.table-hover .table-active:hover>td,
.table-hover .table-active:hover>th {
  background-color: rgba(0, 0, 0, 0.075);
}

.table .thead-dark th {
  color: #fff;
  background-color: #212529;
  border-color: #32383e;
}

.table .thead-light th {
  color: #495057;
  background-color: white;
  /* #e9ecef */
  border-color: #dee2e6;

}

thead th::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  border-bottom: 2px solid #dee2e6;
  z-index: -1;
}

tfoot th::before {
  content: "";
  position: absolute;
  top: 0px;
  left: 0;
  width: 100%;
  border-bottom: 2px solid #dee2e6;
  z-index: -1;
}

.table-dark {
  color: #fff;
  background-color: #212529;
}

.table-dark th,
.table-dark td,
.table-dark thead th {
  border-color: #32383e;
}

.table-dark.table-bordered {
  border: 0;
}

.table-dark.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(255, 255, 255, 0.05);
}

.table-dark.table-hover tbody tr:hover {
  background-color: rgba(255, 255, 255, 0.075);
}

@media (max-width: 575.98px) {
  .table-responsive-sm {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
  }

  .table-responsive-sm>.table-bordered {
    border: 0;
  }
}

@media (max-width: 767.98px) {
  .table-responsive-md {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
  }

  .table-responsive-md>.table-bordered {
    border: 0;
  }
}

@media (max-width: 991.98px) {
  .table-responsive-lg {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
  }

  .table-responsive-lg>.table-bordered {
    border: 0;
  }
}

@media (max-width: 1199.98px) {
  .table-responsive-xl {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
  }

  .table-responsive-xl>.table-bordered {
    border: 0;
  }
}

.table-responsive {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
}

.table-responsive>.table-bordered {
  border: 0;
}

.form-control {
  display: block;
  width: 100%;
  height: calc(2.25rem + 2px);
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid var( --element-light-border);
  border-radius: 0.25rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.btn-clear2 {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;
  border: none;
}

.btn-clear3 {
  position: absolute;
  right: 20px;
  transform: translateY(-100%);
  z-index: 100;
  border: none;
}

@media screen and (prefers-reduced-motion: reduce) {
  .form-control {
    transition: none;
  }
}

.form-control::-ms-expand {
  background-color: transparent;
  border: 0;
}

.form-control:focus {
  color: #495057;
  background-color: #fff;
  border-color: var(--imput-focus-color);
  outline: 0;
  box-shadow: 0 0 0 0.2rem var(--primary-box-shadow-light);
}

.form-control::-moz-placeholder {
  color: #6c757d;
  opacity: 0.7;
}

.form-control::placeholder {
  color: #6c757d;
  opacity: 0.7;
}

.form-control:disabled,
.form-control[readonly] {
  background-color: #e9ecef;
  opacity: 1;
}

select.form-control:focus::-ms-value {
  color: #495057;
  background-color: #fff;
}

.form-control-file,
.form-control-range {
  display: block;
  width: 100%;
}

.col-form-label {
  padding-top: calc(0.375rem + 1px);
  padding-bottom: calc(0.375rem + 1px);
  margin-bottom: 0;
  font-size: inherit;
  line-height: 1.5;
}

.col-form-label-lg {
  padding-top: calc(0.5rem + 1px);
  padding-bottom: calc(0.5rem + 1px);
  font-size: 1.25rem;
  line-height: 1.5;
}

.col-form-label-sm {
  padding-top: calc(0.25rem + 1px);
  padding-bottom: calc(0.25rem + 1px);
  font-size: 0.875rem;
  line-height: 1.5;
}

.form-control-plaintext {
  display: block;
  width: 100%;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  margin-bottom: 0;
  line-height: 1.5;
  color: #333;
  background-color: transparent;
  border: solid transparent;
  border-width: 1px 0;
}

.form-control-plaintext.form-control-sm,
.form-control-plaintext.form-control-lg {
  padding-right: 0;
  padding-left: 0;
}

.form-control-sm {
  height: calc(1.8125rem + 2px);
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
  border-radius: 0.2rem;
}

.form-control-lg {
  height: calc(2.875rem + 2px);
  padding: 0.5rem 1rem;
  font-size: 1.25rem;
  line-height: 1.5;
  border-radius: 0.3rem;
}

select.form-control[size],
select.form-control[multiple] {
  height: auto;
}

textarea.form-control {
  height: auto;
}

.form-group {
  margin-bottom: 1rem;
}

.form-text {
  display: block;
  margin-top: 0.25rem;
}

.form-row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -5px;
  margin-left: -5px;
}

.form-row>.col,
.form-row>[class*=col-] {
  padding-right: 5px;
  padding-left: 5px;
}

.form-check {
  position: relative;
  display: block;
  padding-left: 1.25rem;
}

.form-check-input {
  position: absolute;
  margin-top: 0.3rem;
  margin-left: -1.25rem;
}

.form-check-input:disabled~.form-check-label {
  color: #6c757d;
}

.form-check-label {
  margin-bottom: 0;
}

.form-check-inline {
  display: inline-flex;
  align-items: center;
  padding-left: 0;
  margin-right: 0.75rem;
}

.form-check-inline .form-check-input {
  position: static;
  margin-top: 0;
  margin-right: 0.3125rem;
  margin-left: 0;
}

.valid-feedback {
  display: none;
  width: 100%;
  margin-top: 0.25rem;
  font-size: 80%;
  color: #28a745;
}

.valid-tooltip {
  position: absolute;
  top: 100%;
  z-index: 5;
  display: none;
  max-width: 100%;
  padding: 0.25rem 0.5rem;
  margin-top: 0.1rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #fff;
  background-color: rgba(40, 167, 69, 0.9);
  border-radius: 0.25rem;
}

.was-validated .form-control:valid,
.form-control.is-valid,
.was-validated .custom-select:valid,
.custom-select.is-valid {
  border-color: #28a745;
}

.was-validated .form-control:valid:focus,
.form-control.is-valid:focus,
.was-validated .custom-select:valid:focus,
.custom-select.is-valid:focus {
  border-color: #28a745;
  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}

.was-validated .form-control:valid~.valid-feedback,
.was-validated .form-control:valid~.valid-tooltip,
.form-control.is-valid~.valid-feedback,
.form-control.is-valid~.valid-tooltip,
.was-validated .custom-select:valid~.valid-feedback,
.was-validated .custom-select:valid~.valid-tooltip,
.custom-select.is-valid~.valid-feedback,
.custom-select.is-valid~.valid-tooltip {
  display: block;
}

.was-validated .form-control-file:valid~.valid-feedback,
.was-validated .form-control-file:valid~.valid-tooltip,
.form-control-file.is-valid~.valid-feedback,
.form-control-file.is-valid~.valid-tooltip {
  display: block;
}

.was-validated .form-check-input:valid~.form-check-label,
.form-check-input.is-valid~.form-check-label {
  color: #28a745;
}

.was-validated .form-check-input:valid~.valid-feedback,
.was-validated .form-check-input:valid~.valid-tooltip,
.form-check-input.is-valid~.valid-feedback,
.form-check-input.is-valid~.valid-tooltip {
  display: block;
}

.was-validated .custom-control-input:valid~.custom-control-label,
.custom-control-input.is-valid~.custom-control-label {
  color: #28a745;
}

.was-validated .custom-control-input:valid~.custom-control-label::before,
.custom-control-input.is-valid~.custom-control-label::before {
  background-color: #71dd8a;
}

.was-validated .custom-control-input:valid~.valid-feedback,
.was-validated .custom-control-input:valid~.valid-tooltip,
.custom-control-input.is-valid~.valid-feedback,
.custom-control-input.is-valid~.valid-tooltip {
  display: block;
}

.was-validated .custom-control-input:valid:checked~.custom-control-label::before,
.custom-control-input.is-valid:checked~.custom-control-label::before {
  background-color: #34ce57;
}

.was-validated .custom-control-input:valid:focus~.custom-control-label::before,
.custom-control-input.is-valid:focus~.custom-control-label::before {
  box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}

.was-validated .custom-file-input:valid~.custom-file-label,
.custom-file-input.is-valid~.custom-file-label {
  border-color: #28a745;
}

.was-validated .custom-file-input:valid~.custom-file-label::after,
.custom-file-input.is-valid~.custom-file-label::after {
  border-color: inherit;
}

.was-validated .custom-file-input:valid~.valid-feedback,
.was-validated .custom-file-input:valid~.valid-tooltip,
.custom-file-input.is-valid~.valid-feedback,
.custom-file-input.is-valid~.valid-tooltip {
  display: block;
}

.was-validated .custom-file-input:valid:focus~.custom-file-label,
.custom-file-input.is-valid:focus~.custom-file-label {
  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}

.invalid-feedback {
  display: none;
  width: 100%;
  margin-top: 0.25rem;
  font-size: 80%;
  color: #dc3545;
}

.invalid-tooltip {
  position: absolute;
  top: 100%;
  z-index: 5;
  display: none;
  max-width: 100%;
  padding: 0.25rem 0.5rem;
  margin-top: 0.1rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #fff;
  background-color: rgba(220, 53, 69, 0.9);
  border-radius: 0.25rem;
}

.was-validated .form-control:invalid,
.form-control.is-invalid,
.was-validated .custom-select:invalid,
.custom-select.is-invalid {
  border-color: #dc3545;
}

.was-validated .form-control:invalid:focus,
.form-control.is-invalid:focus,
.was-validated .custom-select:invalid:focus,
.custom-select.is-invalid:focus {
  border-color: #dc3545;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

.was-validated .form-control:invalid~.invalid-feedback,
.was-validated .form-control:invalid~.invalid-tooltip,
.form-control.is-invalid~.invalid-feedback,
.form-control.is-invalid~.invalid-tooltip,
.was-validated .custom-select:invalid~.invalid-feedback,
.was-validated .custom-select:invalid~.invalid-tooltip,
.custom-select.is-invalid~.invalid-feedback,
.custom-select.is-invalid~.invalid-tooltip {
  display: block;
}

.was-validated .form-control-file:invalid~.invalid-feedback,
.was-validated .form-control-file:invalid~.invalid-tooltip,
.form-control-file.is-invalid~.invalid-feedback,
.form-control-file.is-invalid~.invalid-tooltip {
  display: block;
}

.was-validated .form-check-input:invalid~.form-check-label,
.form-check-input.is-invalid~.form-check-label {
  color: #dc3545;
}

.was-validated .form-check-input:invalid~.invalid-feedback,
.was-validated .form-check-input:invalid~.invalid-tooltip,
.form-check-input.is-invalid~.invalid-feedback,
.form-check-input.is-invalid~.invalid-tooltip {
  display: block;
}

.was-validated .custom-control-input:invalid~.custom-control-label,
.custom-control-input.is-invalid~.custom-control-label {
  color: #dc3545;
}

.was-validated .custom-control-input:invalid~.custom-control-label::before,
.custom-control-input.is-invalid~.custom-control-label::before {
  background-color: #efa2a9;
}

.was-validated .custom-control-input:invalid~.invalid-feedback,
.was-validated .custom-control-input:invalid~.invalid-tooltip,
.custom-control-input.is-invalid~.invalid-feedback,
.custom-control-input.is-invalid~.invalid-tooltip {
  display: block;
}

.was-validated .custom-control-input:invalid:checked~.custom-control-label::before,
.custom-control-input.is-invalid:checked~.custom-control-label::before {
  background-color: #e4606d;
}

.was-validated .custom-control-input:invalid:focus~.custom-control-label::before,
.custom-control-input.is-invalid:focus~.custom-control-label::before {
  box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

.was-validated .custom-file-input:invalid~.custom-file-label,
.custom-file-input.is-invalid~.custom-file-label {
  border-color: #dc3545;
}

.was-validated .custom-file-input:invalid~.custom-file-label::after,
.custom-file-input.is-invalid~.custom-file-label::after {
  border-color: inherit;
}

.was-validated .custom-file-input:invalid~.invalid-feedback,
.was-validated .custom-file-input:invalid~.invalid-tooltip,
.custom-file-input.is-invalid~.invalid-feedback,
.custom-file-input.is-invalid~.invalid-tooltip {
  display: block;
}

.was-validated .custom-file-input:invalid:focus~.custom-file-label,
.custom-file-input.is-invalid:focus~.custom-file-label {
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

.form-inline {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
}

.form-inline .form-check {
  width: 100%;
}

@media (min-width: 576px) {
  .form-inline label {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0;
  }

  .form-inline .form-group {
    display: flex;
    flex: 0 0 auto;
    flex-flow: row wrap;
    align-items: center;
    margin-bottom: 0;
  }

  .form-inline .form-control {
    display: inline-block;
    width: auto;
    vertical-align: middle;
  }

  .form-inline .form-control-plaintext {
    display: inline-block;
  }

  .form-inline .input-group,
  .form-inline .custom-select {
    width: auto;
  }

  .form-inline .form-check {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    padding-left: 0;
  }

  .form-inline .form-check-input {
    position: relative;
    margin-top: 0;
    margin-right: 0.25rem;
    margin-left: 0;
  }

  .form-inline .custom-control {
    align-items: center;
    justify-content: center;
  }

  .form-inline .custom-control-label {
    margin-bottom: 0;
  }
}

.btn {
  display: inline-block;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  border: 1px solid transparent;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: var(--borderRadius-sm);
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

@media screen and (prefers-reduced-motion: reduce) {
  .btn {
    transition: none;
  }
}

.btn:hover,
.btn:focus {
  text-decoration: none;
}

.btn:focus,
.btn.focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem var(--primary-box-shadow-light);
}

.btn.disabled,
.btn:disabled {
  opacity: 0.65;
}

.btn:not(:disabled):not(.disabled) {
  cursor: pointer;
}

a.btn.disabled,
fieldset:disabled a.btn {
  pointer-events: none;
}

.btn-primary {
  color: var(--primary-text-color);
  background-color: var(--primary);
  border-color: var(--primary);
}

.btn-primary:hover {
  color: var(--primary-text-color);
  background-color: var(--primary-hover);
  border-color: var(--primary-active);
}

.btn-primary:focus,
.btn-primary.focus {
  box-shadow: 0 0 0 0.2rem var(--primary-box-shadow);
}

.btn-primary.disabled,
.btn-primary:disabled {
  color: var(--primary-text-color);
  background-color: var(--primary);
  border-color: var(--primary);
}

.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show>.btn-primary.dropdown-toggle {
  color: var(--primary-text-color);
  background-color: var(--primary-active);
  border-color: var(--primary-border);
}

.btn-primary:not(:disabled):not(.disabled):active:focus,
.btn-primary:not(:disabled):not(.disabled).active:focus,
.show>.btn-primary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem var(--primary-box-shadow);
}

.btn-default {
  color: #fff;
  background-color: var(--secondary);
  border-color: var(--secondary);
}

.btn-default:hover {
  color: #fff;
  background-color: #5d5d5d;
  border-color: #575757;
}

.btn-default:focus,
.btn-default.focus {
  box-shadow: 0 0 0 0.2rem rgba(112, 112, 112, 0.5);
}


.btn-secondary {
  color: #fff;
  background-color: var(--secondary);
  border-color: var(--secondary);
}

.btn-secondary:hover {
  color: #fff;
  background-color: #5d5d5d;
  border-color: #575757;
}

.btn-secondary:focus,
.btn-secondary.focus {
  box-shadow: 0 0 0 0.2rem rgba(112, 112, 112, 0.5);
}

.btn-secondary.disabled,
.btn-secondary:disabled {
  color: #fff;
  background-color: var(--secondary);
  border-color: var(--secondary);
}

.btn-secondary:not(:disabled):not(.disabled):active,
.btn-secondary:not(:disabled):not(.disabled).active,
.show>.btn-secondary.dropdown-toggle {
  color: #fff;
  background-color: #575757;
  border-color: #505050;
}

.btn-secondary:not(:disabled):not(.disabled):active:focus,
.btn-secondary:not(:disabled):not(.disabled).active:focus,
.show>.btn-secondary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(112, 112, 112, 0.5);
}

.btn-success {
  color: #fff;
  background-color: #28a745;
  border-color: #28a745;
}

.btn-success:hover {
  color: #fff;
  background-color: #218838;
  border-color: #1e7e34;
}

.btn-success:focus,
.btn-success.focus {
  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5);
}

.btn-success.disabled,
.btn-success:disabled {
  color: #fff;
  background-color: #28a745;
  border-color: #28a745;
}

.btn-success:not(:disabled):not(.disabled):active,
.btn-success:not(:disabled):not(.disabled).active,
.show>.btn-success.dropdown-toggle {
  color: #fff;
  background-color: #1e7e34;
  border-color: #1c7430;
}

.btn-success:not(:disabled):not(.disabled):active:focus,
.btn-success:not(:disabled):not(.disabled).active:focus,
.show>.btn-success.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5);
}

.btn-info {
  color: #fff;
  background-color: #17a2b8;
  border-color: #17a2b8;
}

.btn-info:hover {
  color: #fff;
  background-color: #138496;
  border-color: #117a8b;
}

.btn-info:focus,
.btn-info.focus {
  box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.5);
}

.btn-info.disabled,
.btn-info:disabled {
  color: #fff;
  background-color: #17a2b8;
  border-color: #17a2b8;
}

.btn-info:not(:disabled):not(.disabled):active,
.btn-info:not(:disabled):not(.disabled).active,
.show>.btn-info.dropdown-toggle {
  color: #fff;
  background-color: #117a8b;
  border-color: #10707f;
}

.btn-info:not(:disabled):not(.disabled):active:focus,
.btn-info:not(:disabled):not(.disabled).active:focus,
.show>.btn-info.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.5);
}

.btn-warning {
  color: #212529;
  background-color: #ffc107;
  border-color: #ffc107;
}

.btn-warning:hover {
  color: #212529;
  background-color: #e0a800;
  border-color: #d39e00;
}

.btn-warning:focus,
.btn-warning.focus {
  box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5);
}

.btn-warning.disabled,
.btn-warning:disabled {
  color: #212529;
  background-color: #ffc107;
  border-color: #ffc107;
}

.btn-warning:not(:disabled):not(.disabled):active,
.btn-warning:not(:disabled):not(.disabled).active,
.show>.btn-warning.dropdown-toggle {
  color: #212529;
  background-color: #d39e00;
  border-color: #c69500;
}

.btn-warning:not(:disabled):not(.disabled):active:focus,
.btn-warning:not(:disabled):not(.disabled).active:focus,
.show>.btn-warning.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5);
}

.btn-danger {
  color: #fff;
  background-color: #dc3545;
  border-color: #dc3545;
}

.btn-danger:hover {
  color: #fff;
  background-color: #c82333;
  border-color: #bd2130;
}

.btn-danger:focus,
.btn-danger.focus {
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5);
}

.btn-danger.disabled,
.btn-danger:disabled {
  color: #fff;
  background-color: #dc3545;
  border-color: #dc3545;
}

.btn-danger:not(:disabled):not(.disabled):active,
.btn-danger:not(:disabled):not(.disabled).active,
.show>.btn-danger.dropdown-toggle {
  color: #fff;
  background-color: #bd2130;
  border-color: #b21f2d;
}

.btn-danger:not(:disabled):not(.disabled):active:focus,
.btn-danger:not(:disabled):not(.disabled).active:focus,
.show>.btn-danger.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5);
}

.btn-light {
  color: #212529;
  background-color: #f8f9fa;
  border-color: #f8f9fa;
}

.btn-light:hover {
  color: #212529;
  background-color: #e2e6ea;
  border-color: #dae0e5;
}

.btn-light:focus,
.btn-light.focus {
  box-shadow: 0 0 0 0.2rem rgba(248, 249, 250, 0.5);
}

.btn-light.disabled,
.btn-light:disabled {
  color: #212529;
  background-color: #f8f9fa;
  border-color: #f8f9fa;
}

.btn-light:not(:disabled):not(.disabled):active,
.btn-light:not(:disabled):not(.disabled).active,
.show>.btn-light.dropdown-toggle {
  color: #212529;
  background-color: #dae0e5;
  border-color: #d3d9df;
}

.btn-light:not(:disabled):not(.disabled):active:focus,
.btn-light:not(:disabled):not(.disabled).active:focus,
.show>.btn-light.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(248, 249, 250, 0.5);
}

.btn-dark {
  color: #fff;
  background-color: #343a40;
  border-color: #343a40;
}

.btn-dark:hover {
  color: #fff;
  background-color: #23272b;
  border-color: #1d2124;
}

.btn-dark:focus,
.btn-dark.focus {
  box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5);
}

.btn-dark.disabled,
.btn-dark:disabled {
  color: #fff;
  background-color: #343a40;
  border-color: #343a40;
}

.btn-dark:not(:disabled):not(.disabled):active,
.btn-dark:not(:disabled):not(.disabled).active,
.show>.btn-dark.dropdown-toggle {
  color: #fff;
  background-color: #1d2124;
  border-color: #171a1d;
}

.btn-dark:not(:disabled):not(.disabled):active:focus,
.btn-dark:not(:disabled):not(.disabled).active:focus,
.show>.btn-dark.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5);
}

.btn-outline-primary {
  color: var(--primary);
  background-color: transparent;
  background-image: none;
  border-color: var(--primary);
}

.btn-outline-primary:hover {
  color: #fff;
  background-color: var(--primary);
  border-color: var(--primary);
}

.btn-outline-primary:focus,
.btn-outline-primary.focus {
  box-shadow: 0 0 0 0.2rem var(--primary-box-shadow);
}

.btn-outline-primary.disabled,
.btn-outline-primary:disabled {
  color: var(--primary);
  background-color: transparent;
}

.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-primary:not(:disabled):not(.disabled).active,
.show>.btn-outline-primary.dropdown-toggle {
  color: #fff;
  background-color: var(--primary);
  border-color: var(--primary);
}

.btn-outline-primary:not(:disabled):not(.disabled):active:focus,
.btn-outline-primary:not(:disabled):not(.disabled).active:focus,
.show>.btn-outline-primary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem var(--primary-box-shadow);
}

.btn-outline-secondary {
  color: var(--secondary);
  background-color: transparent;
  background-image: none;
  border-color: var(--secondary);
}

.btn-outline-secondary:hover {
  color: #fff;
  background-color: var(--secondary);
  border-color: var(--secondary);
}

.btn-outline-secondary.side-menu-button:hover {
  color: #fff;
  background-color: var(--side-menu-hover);
  border-color: var(--secondary);
}

.btn-outline-secondary:focus,
.btn-outline-secondary.focus {
  box-shadow: 0 0 0 0.2rem rgba(112, 112, 112, 0.5);
}

.btn-outline-secondary.disabled,
.btn-outline-secondary:disabled {
  color: var(--secondary);
  background-color: transparent;
}

.btn-outline-secondary:not(:disabled):not(.disabled):active,
.btn-outline-secondary:not(:disabled):not(.disabled).active,
.show>.btn-outline-secondary.dropdown-toggle {
  color: #fff;
  background-color: var(--secondary);
  border-color: var(--secondary);
}

.btn-outline-secondary:not(:disabled):not(.disabled):active:focus,
.btn-outline-secondary:not(:disabled):not(.disabled).active:focus,
.show>.btn-outline-secondary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(112, 112, 112, 0.5);
}

.btn-outline-success {
  color: #28a745;
  background-color: transparent;
  background-image: none;
  border-color: #28a745;
}

.btn-outline-success:hover {
  color: #fff;
  background-color: #28a745;
  border-color: #28a745;
}

.btn-outline-success:focus,
.btn-outline-success.focus {
  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5);
}

.btn-outline-success.disabled,
.btn-outline-success:disabled {
  color: #28a745;
  background-color: transparent;
}

.btn-outline-success:not(:disabled):not(.disabled):active,
.btn-outline-success:not(:disabled):not(.disabled).active,
.show>.btn-outline-success.dropdown-toggle {
  color: #fff;
  background-color: #28a745;
  border-color: #28a745;
}

.btn-outline-success:not(:disabled):not(.disabled):active:focus,
.btn-outline-success:not(:disabled):not(.disabled).active:focus,
.show>.btn-outline-success.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5);
}

.btn-outline-info {
  color: #17a2b8;
  background-color: transparent;
  background-image: none;
  border-color: #17a2b8;
}

.btn-outline-info:hover {
  color: #fff;
  background-color: #17a2b8;
  border-color: #17a2b8;
}

.btn-outline-info:focus,
.btn-outline-info.focus {
  box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.5);
}

.btn-outline-info.disabled,
.btn-outline-info:disabled {
  color: #17a2b8;
  background-color: transparent;
}

.btn-outline-info:not(:disabled):not(.disabled):active,
.btn-outline-info:not(:disabled):not(.disabled).active,
.show>.btn-outline-info.dropdown-toggle {
  color: #fff;
  background-color: #17a2b8;
  border-color: #17a2b8;
}

.btn-outline-info:not(:disabled):not(.disabled):active:focus,
.btn-outline-info:not(:disabled):not(.disabled).active:focus,
.show>.btn-outline-info.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.5);
}

.btn-outline-warning {
  color: #ffc107;
  background-color: transparent;
  background-image: none;
  border-color: #ffc107;
}

.btn-outline-warning:hover {
  color: #212529;
  background-color: #ffc107;
  border-color: #ffc107;
}

.btn-outline-warning:focus,
.btn-outline-warning.focus {
  box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5);
}

.btn-outline-warning.disabled,
.btn-outline-warning:disabled {
  color: #ffc107;
  background-color: transparent;
}

.btn-outline-warning:not(:disabled):not(.disabled):active,
.btn-outline-warning:not(:disabled):not(.disabled).active,
.show>.btn-outline-warning.dropdown-toggle {
  color: #212529;
  background-color: #ffc107;
  border-color: #ffc107;
}

.btn-outline-warning:not(:disabled):not(.disabled):active:focus,
.btn-outline-warning:not(:disabled):not(.disabled).active:focus,
.show>.btn-outline-warning.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5);
}

.btn-outline-danger {
  color: #dc3545;
  background-color: transparent;
  background-image: none;
  border-color: #dc3545;
}

.btn-outline-danger:hover {
  color: #fff;
  background-color: #dc3545;
  border-color: #dc3545;
}

.btn-outline-danger:focus,
.btn-outline-danger.focus {
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5);
}

.btn-outline-danger.disabled,
.btn-outline-danger:disabled {
  color: #dc3545;
  background-color: transparent;
}

.btn-outline-danger:not(:disabled):not(.disabled):active,
.btn-outline-danger:not(:disabled):not(.disabled).active,
.show>.btn-outline-danger.dropdown-toggle {
  color: #fff;
  background-color: #dc3545;
  border-color: #dc3545;
}

.btn-outline-danger:not(:disabled):not(.disabled):active:focus,
.btn-outline-danger:not(:disabled):not(.disabled).active:focus,
.show>.btn-outline-danger.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5);
}

.btn-outline-light {
  color: #f8f9fa;
  background-color: transparent;
  background-image: none;
  border-color: #f8f9fa;
}

.btn-outline-light:hover {
  color: #212529;
  background-color: #f8f9fa;
  border-color: #f8f9fa;
}

.btn-outline-light:focus,
.btn-outline-light.focus {
  box-shadow: 0 0 0 0.2rem rgba(248, 249, 250, 0.5);
}

.btn-outline-light.disabled,
.btn-outline-light:disabled {
  color: #f8f9fa;
  background-color: transparent;
}

.btn-outline-light:not(:disabled):not(.disabled):active,
.btn-outline-light:not(:disabled):not(.disabled).active,
.show>.btn-outline-light.dropdown-toggle {
  color: #212529;
  background-color: #f8f9fa;
  border-color: #f8f9fa;
}

.btn-outline-light:not(:disabled):not(.disabled):active:focus,
.btn-outline-light:not(:disabled):not(.disabled).active:focus,
.show>.btn-outline-light.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(248, 249, 250, 0.5);
}

.btn-outline-dark {
  color: #343a40;
  background-color: transparent;
  background-image: none;
  border-color: #343a40;
}

.btn-outline-dark:hover {
  color: #fff;
  background-color: #343a40;
  border-color: #343a40;
}

.btn-outline-dark:focus,
.btn-outline-dark.focus {
  box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5);
}

.btn-outline-dark.disabled,
.btn-outline-dark:disabled {
  color: #343a40;
  background-color: transparent;
}

.btn-outline-dark:not(:disabled):not(.disabled):active,
.btn-outline-dark:not(:disabled):not(.disabled).active,
.show>.btn-outline-dark.dropdown-toggle {
  color: #fff;
  background-color: #343a40;
  border-color: #343a40;
}

.btn-outline-dark:not(:disabled):not(.disabled):active:focus,
.btn-outline-dark:not(:disabled):not(.disabled).active:focus,
.show>.btn-outline-dark.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5);
}

.btn-link {
  font-weight: 400;
  color: var(--primary);
  background-color: transparent;
}

.btn-link:hover {
  color: var(--link-hover-color);
  text-decoration: underline;
  background-color: transparent;
  border-color: transparent;
}

.btn-link:focus,
.btn-link.focus {
  text-decoration: underline;
  border-color: transparent;
  box-shadow: none;
}

.btn-link:disabled,
.btn-link.disabled {
  color: #6c757d;
  pointer-events: none;
}

.btn-lg,
.btn-group-lg>.btn {
  padding: 0.5rem 1rem;
  font-size: 1.25rem;
  line-height: 1.5;
  border-radius: 0.3rem;
}

.btn-sm,
.btn-group-sm>.btn {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
  border-radius: 0.2rem;
}

.btn-block {
  display: block;
  width: 100%;
}

.btn-block+.btn-block {
  margin-top: 0.5rem;
}

input[type=submit].btn-block,
input[type=reset].btn-block,
input[type=button].btn-block {
  width: 100%;
}

.fade {
  transition: opacity 0.15s linear;
}

@media screen and (prefers-reduced-motion: reduce) {
  .fade {
    transition: none;
  }
}

.fade:not(.show) {
  opacity: 0;
}

.collapse:not(.show) {
  display: none;
}

.collapsing {
  position: relative;
  height: 0;
  overflow: hidden;
  transition: height 0.35s ease;
}

@media screen and (prefers-reduced-motion: reduce) {
  .collapsing {
    transition: none;
  }
}

.dropup,
.dropright,
.dropdown,
.dropleft {
  position: relative;
}

.dropdown-toggle::after {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0.3em solid;
  border-right: 0.3em solid transparent;
  border-bottom: 0;
  border-left: 0.3em solid transparent;
}

.dropdown-toggle:empty::after {
  margin-left: 0;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 10rem;
  padding: 0.5rem 0;
  margin: 0.125rem 0 0;
  font-size: 1rem;
  color: #333;
  text-align: left;
  list-style: none;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 0.25rem;
}

.dropdown-menu-right {
  right: 0;
  left: auto;
}

.dropup .dropdown-menu {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: 0.125rem;
}

.dropup .dropdown-toggle::after {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0;
  border-right: 0.3em solid transparent;
  border-bottom: 0.3em solid;
  border-left: 0.3em solid transparent;
}

.dropup .dropdown-toggle:empty::after {
  margin-left: 0;
}

.dropright .dropdown-menu {
  top: 0;
  right: auto;
  left: 100%;
  margin-top: 0;
  margin-left: 0.125rem;
}

.dropright .dropdown-toggle::after {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0.3em solid transparent;
  border-right: 0;
  border-bottom: 0.3em solid transparent;
  border-left: 0.3em solid;
}

.dropright .dropdown-toggle:empty::after {
  margin-left: 0;
}

.dropright .dropdown-toggle::after {
  vertical-align: 0;
}

.dropleft .dropdown-menu {
  top: 0;
  right: 100%;
  left: auto;
  margin-top: 0;
  margin-right: 0.125rem;
}

.dropleft .dropdown-toggle::after {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
}

.dropleft .dropdown-toggle::after {
  display: none;
}

.dropleft .dropdown-toggle::before {
  display: inline-block;
  width: 0;
  height: 0;
  margin-right: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0.3em solid transparent;
  border-right: 0.3em solid;
  border-bottom: 0.3em solid transparent;
}

.dropleft .dropdown-toggle:empty::after {
  margin-left: 0;
}

.dropleft .dropdown-toggle::before {
  vertical-align: 0;
}

.dropdown-menu[x-placement^=top],
.dropdown-menu[x-placement^=right],
.dropdown-menu[x-placement^=bottom],
.dropdown-menu[x-placement^=left] {
  right: auto;
  bottom: auto;
}

.dropdown-divider {
  height: 0;
  margin: 0.5rem 0;
  overflow: hidden;
  border-top: 1px solid #e9ecef;
}

.dropdown-item {
  display: block;
  width: 100%;
  padding: 0.25rem 1.5rem;
  clear: both;
  font-weight: 400;
  color: #212529;
  text-align: inherit;
  white-space: nowrap;
  background-color: transparent;
  border: 0;
}

.dropdown-item:hover,
.dropdown-item:focus {
  color: #16181b;
  text-decoration: none;
  background-color: #f8f9fa;
}

.dropdown-item-new:hover,
.dropdown-item-new:focus {
  color: #16181b;
  text-decoration: none;
  background-color: var(--primary);
}



.dropdown-item.active,
.dropdown-item:active {
  color: var(--primary-text-color);
  text-decoration: none;
  background-color: var(--primary);
}

.dropdown-item.disabled,
.dropdown-item:disabled {
  color: #6c757d;
  background-color: transparent;
}

.dropdown-menu.show {
  display: block;
}

.dropdown-header {
  display: block;
  padding: 0.5rem 1.5rem;
  margin-bottom: 0;
  font-size: 0.875rem;
  color: #6c757d;
  white-space: nowrap;
}

.dropdown-item-text {
  display: block;
  padding: 0.25rem 1.5rem;
  color: #212529;
}

.btn-group,
.btn-group-vertical {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
}

.btn-group>.btn,
.btn-group-vertical>.btn {
  position: relative;
  flex: 0 1 auto;
}

.btn-group>.btn:hover,
.btn-group-vertical>.btn:hover {
  z-index: 1;
}

.btn-group>.btn:focus,
.btn-group>.btn:active,
.btn-group>.btn.active,
.btn-group-vertical>.btn:focus,
.btn-group-vertical>.btn:active,
.btn-group-vertical>.btn.active {
  z-index: 1;
}

.btn-group .btn+.btn,
.btn-group .btn+.btn-group,
.btn-group .btn-group+.btn,
.btn-group .btn-group+.btn-group,
.btn-group-vertical .btn+.btn,
.btn-group-vertical .btn+.btn-group,
.btn-group-vertical .btn-group+.btn,
.btn-group-vertical .btn-group+.btn-group {
  margin-left: -1px;
}

.btn-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.btn-toolbar .btn-distance {
  margin-bottom: 0.5rem;
}

.btn-toolbar-inverse {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.btn-toolbar .input-group {
  width: auto;
}

.btn-group>.btn:first-child {
  margin-left: 0;
}

.btn-group>.btn:not(:last-child):not(.dropdown-toggle),
.btn-group>.btn-group:not(:last-child)>.btn {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.btn-group>.btn:not(:first-child),
.btn-group>.btn-group:not(:first-child)>.btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.dropdown-toggle-split {
  padding-right: 0.5625rem;
  padding-left: 0.5625rem;
}

.dropdown-toggle-split::after,
.dropup .dropdown-toggle-split::after,
.dropright .dropdown-toggle-split::after {
  margin-left: 0;
}

.dropleft .dropdown-toggle-split::before {
  margin-right: 0;
}

.btn-sm+.dropdown-toggle-split,
.btn-group-sm>.btn+.dropdown-toggle-split {
  padding-right: 0.375rem;
  padding-left: 0.375rem;
}

.btn-lg+.dropdown-toggle-split,
.btn-group-lg>.btn+.dropdown-toggle-split {
  padding-right: 0.75rem;
  padding-left: 0.75rem;
}

.btn-group-vertical {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.btn-group-vertical .btn,
.btn-group-vertical .btn-group {
  width: 100%;
}

.btn-group-vertical>.btn+.btn,
.btn-group-vertical>.btn+.btn-group,
.btn-group-vertical>.btn-group+.btn,
.btn-group-vertical>.btn-group+.btn-group {
  margin-top: -1px;
  margin-left: 0;
}

.btn-group-vertical>.btn:not(:last-child):not(.dropdown-toggle),
.btn-group-vertical>.btn-group:not(:last-child)>.btn {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.btn-group-vertical>.btn:not(:first-child),
.btn-group-vertical>.btn-group:not(:first-child)>.btn {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.btn-group-toggle>.btn,
.btn-group-toggle>.btn-group>.btn {
  margin-bottom: 0;
}

.btn-group-toggle>.btn input[type=radio],
.btn-group-toggle>.btn input[type=checkbox],
.btn-group-toggle>.btn-group>.btn input[type=radio],
.btn-group-toggle>.btn-group>.btn input[type=checkbox] {
  position: absolute;
  clip: rect(0, 0, 0, 0);
  pointer-events: none;
}

.input-group {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  width: 100%;
}

.input-group>.form-control,
.input-group>.custom-select,
.input-group>.custom-file {
  position: relative;
  flex: 1 1 auto;
  width: 1%;
  margin-bottom: 0;
}

.input-group>.form-control+.form-control,
.input-group>.form-control+.custom-select,
.input-group>.form-control+.custom-file,
.input-group>.custom-select+.form-control,
.input-group>.custom-select+.custom-select,
.input-group>.custom-select+.custom-file,
.input-group>.custom-file+.form-control,
.input-group>.custom-file+.custom-select,
.input-group>.custom-file+.custom-file {
  margin-left: -1px;
}

.input-group>.form-control:focus,
.input-group>.custom-select:focus,
.input-group>.custom-file .custom-file-input:focus~.custom-file-label {
  z-index: 3;
}

.input-group>.custom-file .custom-file-input:focus {
  z-index: 4;
}

.input-group>.form-control:not(:last-child),
.input-group>.custom-select:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.input-group>.form-control:not(:first-child),
.input-group>.custom-select:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.input-group>.custom-file {
  display: flex;
  align-items: center;
}

.input-group>.custom-file:not(:last-child) .custom-file-label,
.input-group>.custom-file:not(:last-child) .custom-file-label::after {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.input-group>.custom-file:not(:first-child) .custom-file-label {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.input-group-prepend,
.input-group-append {
  display: flex;
}

.input-group-prepend .btn,
.input-group-append .btn {
  position: relative;
  z-index: 2;
}

.input-group-prepend .btn+.btn,
.input-group-prepend .btn+.input-group-text,
.input-group-prepend .input-group-text+.input-group-text,
.input-group-prepend .input-group-text+.btn,
.input-group-append .btn+.btn,
.input-group-append .btn+.input-group-text,
.input-group-append .input-group-text+.input-group-text,
.input-group-append .input-group-text+.btn {
  margin-left: -1px;
}

.input-group-prepend {
  margin-right: -1px;
}

.input-group-append {
  margin-left: -1px;
}

.input-group-text {
  display: flex;
  align-items: center;
  padding: 0.375rem 0.75rem;
  margin-bottom: 0;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  text-align: center;
  white-space: nowrap;
  background-color: #e9ecef;
  border: 1px solid var( --element-light-border);
  border-radius: 0.25rem;
}

.input-group-text input[type=radio],
.input-group-text input[type=checkbox] {
  margin-top: 0;
}

.input-group-lg>.form-control,
.input-group-lg>.input-group-prepend>.input-group-text,
.input-group-lg>.input-group-append>.input-group-text,
.input-group-lg>.input-group-prepend>.btn,
.input-group-lg>.input-group-append>.btn {
  height: calc(2.875rem + 2px);
  padding: 0.5rem 1rem;
  font-size: 1.25rem;
  line-height: 1.5;
  border-radius: 0.3rem;
}

.input-group-sm>.form-control,
.input-group-sm>.input-group-prepend>.input-group-text,
.input-group-sm>.input-group-append>.input-group-text,
.input-group-sm>.input-group-prepend>.btn,
.input-group-sm>.input-group-append>.btn {
  height: calc(1.8125rem + 2px);
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
  border-radius: 0.2rem;
}

.input-group>.input-group-prepend>.btn,
.input-group>.input-group-prepend>.input-group-text,
.input-group>.input-group-append:not(:last-child)>.btn,
.input-group>.input-group-append:not(:last-child)>.input-group-text,
.input-group>.input-group-append:last-child>.btn:not(:last-child):not(.dropdown-toggle),
.input-group>.input-group-append:last-child>.input-group-text:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.input-group>.input-group-append>.btn,
.input-group>.input-group-append>.input-group-text,
.input-group>.input-group-prepend:not(:first-child)>.btn,
.input-group>.input-group-prepend:not(:first-child)>.input-group-text,
.input-group>.input-group-prepend:first-child>.btn:not(:first-child),
.input-group>.input-group-prepend:first-child>.input-group-text:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.custom-control {
  position: relative;
  display: block;
  min-height: 1.5rem;
  padding-left: 1.5rem;
}

.custom-control-inline {
  display: inline-flex;
  margin-right: 1rem;
}

.custom-control-input {
  position: absolute;
  z-index: -1;
  opacity: 0;
}

.custom-control-input:checked~.custom-control-label::before {
  color: #fff;
  background-color: var(--primary);
}

.custom-control-input:focus~.custom-control-label::before {
  box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem var(--primary-box-shadow-light);
}

.custom-control-input:active~.custom-control-label::before {
  color: #fff;
  background-color: #93e0ff;
}

.custom-control-input:disabled~.custom-control-label {
  color: #6c757d;
}

.custom-disabled {
  pointer-events: none;
  opacity: 0.65;
  user-select: none;
}

.custom-control-input:disabled~.custom-control-label::before {
  background-color: #e9ecef;
}

.custom-control-label {
  position: relative;
  margin-bottom: 0;
}

.custom-control-label::before {
  position: absolute;
  top: 0.25rem;
  left: -1.5rem;
  display: block;
  width: 1rem;
  height: 1rem;
  pointer-events: none;
  content: "";
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  background-color: #dee2e6;
}

.custom-control-label::after {
  position: absolute;
  top: 0.25rem;
  left: -1.5rem;
  display: block;
  width: 1rem;
  height: 1rem;
  content: "";
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 50% 50%;
}

.custom-checkbox .custom-control-label::before {
  border-radius: 0.25rem;
}

.custom-checkbox .custom-control-input:checked~.custom-control-label::before {
  background-color: var(--primary);
}

.custom-checkbox .custom-control-input:checked~.custom-control-label::after {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E");
}

.custom-checkbox .custom-control-input:indeterminate~.custom-control-label::before {
  background-color: var(--primary);
}

.custom-checkbox .custom-control-input:indeterminate~.custom-control-label::after {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Cpath stroke='%23fff' d='M0 2h4'/%3E%3C/svg%3E");
}

.custom-checkbox .custom-control-input:disabled:checked~.custom-control-label::before {
  background-color: var(--primary-box-shadow);
}

.custom-checkbox .custom-control-input:disabled:indeterminate~.custom-control-label::before {
  background-color: var(--primary-box-shadow);
}

.custom-radio .custom-control-label::before {
  border-radius: 50%;
}

.custom-radio .custom-control-input:checked~.custom-control-label::before {
  background-color: var(--primary);
}

.custom-radio .custom-control-input:checked~.custom-control-label::after {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23fff'/%3E%3C/svg%3E");
}

.custom-radio .custom-control-input:disabled:checked~.custom-control-label::before {
  background-color: var(--primary-box-shadow);
}

.custom-select {
  display: inline-block;
  width: 100%;
  height: calc(2.25rem + 2px);
  padding: 0.375rem 1.75rem 0.375rem 0.75rem;
  line-height: 1.5;
  color: #495057;
  vertical-align: middle;
  background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right 0.75rem center;
  background-size: 8px 10px;
  border: 1px solid var( --element-light-border);
  border-radius: 0.25rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.custom-select:focus {
  border-color: var(--imput-focus-color);
  outline: 0;
  /* The focus ring belongs to the brand; --primary-box-shadow is the token
     every other focusable control already uses. */
  box-shadow: 0 0 0 0.2rem var(--primary-box-shadow);
}

.custom-select:focus::-ms-value {
  color: #495057;
  background-color: #fff;
}

.custom-select[multiple],
.custom-select[size]:not([size="1"]) {
  height: auto;
  padding-right: 0.75rem;
  background-image: none;
}

.custom-select:disabled {
  color: #6c757d;
  background-color: #e9ecef;
}

.custom-select::-ms-expand {
  opacity: 0;
}

.custom-select-sm {
  height: calc(1.8125rem + 2px);
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  font-size: 75%;
}

.custom-select-lg {
  height: calc(2.875rem + 2px);
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  font-size: 125%;
}

.custom-file {
  position: relative;
  display: inline-block;
  width: 100%;
  height: calc(2.25rem + 2px);
  margin-bottom: 0;
}

.custom-file-input {
  position: relative;
  z-index: 2;
  width: 100%;
  height: calc(2.25rem + 2px);
  margin: 0;
  opacity: 0;
}

.custom-file-input:focus~.custom-file-label {
  border-color: var(--imput-focus-color);
  box-shadow: 0 0 0 0.2rem var(--primary-box-shadow-light);
}

.custom-file-input:focus~.custom-file-label::after {
  border-color: var(--imput-focus-color);
}

.custom-file-input:disabled~.custom-file-label {
  background-color: #e9ecef;
}

.custom-file-input:lang(en)~.custom-file-label::after {
  content: "Browse";
}

.custom-file-label {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1;
  height: calc(2.25rem + 2px);
  padding: 0.375rem 0.75rem;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  border: 1px solid var( --element-light-border);
  border-radius: 0.25rem;
}

.custom-file-label::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: block;
  height: 2.25rem;
  padding: 0.375rem 0.75rem;
  line-height: 1.5;
  color: #495057;
  content: "Browse";
  background-color: #e9ecef;
  border-left: 1px solid var( --element-light-border);
  border-radius: 0 0.25rem 0.25rem 0;
}

.custom-range {
  width: 100%;
  padding-left: 0;
  background-color: transparent;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.custom-range:focus {
  outline: none;
}

.custom-range:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem var(--primary-box-shadow-light);
}

.custom-range:focus::-moz-range-thumb {
  box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem var(--primary-box-shadow-light);
}

.custom-range:focus::-ms-thumb {
  box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem var(--primary-box-shadow-light);
}

.custom-range::-moz-focus-outer {
  border: 0;
}

.custom-range::-webkit-slider-thumb {
  width: 1rem;
  height: 1rem;
  margin-top: -0.25rem;
  background-color: var(--primary);
  border: 0;
  border-radius: 1rem;
  -webkit-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  -webkit-appearance: none;
  appearance: none;
}

@media screen and (prefers-reduced-motion: reduce) {
  .custom-range::-webkit-slider-thumb {
    -webkit-transition: none;
    transition: none;
  }
}

.custom-range::-webkit-slider-thumb:active {
  background-color: #93e0ff;
}

.custom-range::-webkit-slider-runnable-track {
  width: 100%;
  height: 0.5rem;
  color: transparent;
  cursor: pointer;
  background-color: #dee2e6;
  border-color: transparent;
  border-radius: 1rem;
}

.custom-range::-moz-range-thumb {
  width: 1rem;
  height: 1rem;
  background-color: var(--primary);
  border: 0;
  border-radius: 1rem;
  -moz-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  -moz-appearance: none;
  appearance: none;
}

@media screen and (prefers-reduced-motion: reduce) {
  .custom-range::-moz-range-thumb {
    -moz-transition: none;
    transition: none;
  }
}

.custom-range::-moz-range-thumb:active {
  background-color: #93e0ff;
}

.custom-range::-moz-range-track {
  width: 100%;
  height: 0.5rem;
  color: transparent;
  cursor: pointer;
  background-color: #dee2e6;
  border-color: transparent;
  border-radius: 1rem;
}

.custom-range::-ms-thumb {
  width: 1rem;
  height: 1rem;
  margin-top: 0;
  margin-right: 0.2rem;
  margin-left: 0.2rem;
  background-color: var(--primary);
  border: 0;
  border-radius: 1rem;
  -ms-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  appearance: none;
}

@media screen and (prefers-reduced-motion: reduce) {
  .custom-range::-ms-thumb {
    -ms-transition: none;
    transition: none;
  }
}

.custom-range::-ms-thumb:active {
  background-color: #93e0ff;
}

.custom-range::-ms-track {
  width: 100%;
  height: 0.5rem;
  color: transparent;
  cursor: pointer;
  background-color: transparent;
  border-color: transparent;
  border-width: 0.5rem;
}

.custom-range::-ms-fill-lower {
  background-color: #dee2e6;
  border-radius: 1rem;
}

.custom-range::-ms-fill-upper {
  margin-right: 15px;
  background-color: #dee2e6;
  border-radius: 1rem;
}

.custom-control-label::before,
.custom-file-label,
.custom-select {
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

@media screen and (prefers-reduced-motion: reduce) {

  .custom-control-label::before,
  .custom-file-label,
  .custom-select {
    transition: none;
  }
}

.nav {
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

.nav-link {
  display: block;
  padding: 0.5rem 1rem;
}

.nav-link:hover,
.nav-link:focus {
  text-decoration: none;
}

.nav-link.disabled {
  color: #6c757d;
  pointer-events: none !important;
}

.nav-tabs {
  border-bottom: 1px solid #dee2e6;
}

.nav-tabs .nav-item {
  margin-bottom: -1px;
}

.nav-tabs .nav-link {
  border: 1px solid transparent;
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
  border-color: #e9ecef #e9ecef #dee2e6;
}

.nav-tabs .nav-link.disabled {
  color: #6c757d;
  background-color: transparent;
  border-color: transparent;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  color: #495057;
  background-color: #fff;
  border-color: #dee2e6 #dee2e6 #fff;
}

.nav-tabs .dropdown-menu {
  margin-top: -1px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.nav-pills .nav-link {
  border-radius: 0.25rem;
}

.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
  color: #fff;
  background-color: var(--primary);
}

.nav-fill .nav-item {
  flex: 1 1 auto;
  text-align: center;
}

.nav-justified .nav-item {
  flex-basis: 0;
  flex-grow: 1;
  text-align: center;
}

.tab-content>.tab-pane {
  display: none;
}

.tab-content>.active {
  display: block;
}

.navbar {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between !important;
}

.navbar>.container,
.navbar>.container-fluid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

.navbar-brand {
  display: inline-block;
  padding-top: 0.3125rem;
  padding-bottom: 0.3125rem;
  margin-right: 1rem;
  font-size: 1.25rem;
  line-height: inherit;
  white-space: nowrap;
}

.navbar-brand:hover,
.navbar-brand:focus {
  text-decoration: none;
}

.navbar-nav {
  display: flex;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

.navbar-nav .nav-link {
  padding-right: 0;
  padding-left: 0;
}

.navbar-nav .dropdown-menu {
  position: static;
  float: none;
}

.navbar-text {
  display: inline-block;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.navbar-collapse {
  max-width: 25%;
  flex-basis: 100%;
  align-items: center;
  justify-content: flex-end;
}

.navbar-toggler {
  padding: 0.25rem 0.75rem;
  font-size: 1.25rem;
  line-height: 1;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 0.25rem;
}

.navbar-toggler:hover,
.navbar-toggler:focus {
  text-decoration: none;
}

.navbar-toggler:not(:disabled):not(.disabled) {
  cursor: pointer;
}

.navbar-toggler-icon {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  vertical-align: middle;
  content: "";
  background: no-repeat center center;
  background-size: 100% 100%;
}

@media (max-width: 575.98px) {

  .navbar-expand-sm>.container,
  .navbar-expand-sm>.container-fluid {
    padding-right: 0;
    padding-left: 0;
  }
}

@media (min-width: 576px) {
  .navbar-expand-sm {
    flex-flow: row nowrap;
    justify-content: flex-start;
  }

  .navbar-expand-sm .navbar-nav {
    flex-direction: row;
  }

  .navbar-expand-sm .navbar-nav .dropdown-menu {
    position: absolute;
  }

  .navbar-expand-sm .navbar-nav .nav-link {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }

  .navbar-expand-sm>.container,
  .navbar-expand-sm>.container-fluid {
    flex-wrap: nowrap;
  }

  .navbar-expand-sm .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
  }

  .navbar-expand-sm .navbar-toggler {
    display: none;
  }
}

@media (max-width: 767.98px) {

  .navbar-expand-md>.container,
  .navbar-expand-md>.container-fluid {
    padding-right: 0;
    padding-left: 0;
  }
}

@media (min-width: 768px) {
  .navbar-expand-md {
    flex-flow: row nowrap;
    justify-content: flex-start;
  }

  .navbar-expand-md .navbar-nav {
    flex-direction: row;
  }

  .navbar-expand-md .navbar-nav .dropdown-menu {
    position: absolute;
  }

  .navbar-expand-md .navbar-nav .nav-link {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }

  .navbar-expand-md>.container,
  .navbar-expand-md>.container-fluid {
    flex-wrap: nowrap;
  }

  .navbar-expand-md .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
  }

  .navbar-expand-md .navbar-toggler {
    display: none;
  }
}

/* Navbar icon-only settings/logout controls live in components/NavBar.svelte */

/* The Einstellungen gear sits at the right edge of the horizontal bar, so open
   its menu leftwards (right-aligned) or it is clipped off the right of the
   viewport. Applies to the whole horizontal bar: this project expands
   .navbar-expand-lg at 1300px (see below), and under that width the menu is
   position:static inside the hamburger, where left/right have no effect. */
@media (min-width: 1300px) {
  #dropwdown-settings {
    left: auto;
    right: 0;
  }
}

/* Media Queries for the Button Row*/
@media (min-width: 1234px) {
  .text-button-switch {
    display: block;

  }

  .icon-button-switch {
    display: none !important;
  }
}

@media (max-width: 1233.98px) {
  .text-button-switch {
    display: none !important;
  }

  .icon-button-switch {
    display: block;
  }
}

@media (max-width: 1201px) {
  .messgroesse-text {
    display: none !important;
  }
}

@media (max-width: 993px) {
  .new-device-text {
    display: none;
  }
}

@media (max-width: 767.98px) {
  .new-device-text {
    display: contents;
  }
}

@media (max-width: 978px) {
  .date-picker-date {
    display: none;
  }
}

@media (max-width: 767.98px) {
  .date-picker-date {
    display: contents;
  }
}

@media (max-width: 840px) {
  #last_rssi {
    display: none !important;
  }
}


@media (max-width: 1298.98px) {

  /* .nav-item / .navbar-collapse overrides for this breakpoint live in
     components/NavBar.svelte */

  .navbar-expand-lg>.container,
  .navbar-expand-lg>.container-fluid {
    padding-right: 0;
    padding-left: 0;
  }
}

@media (min-width: 1300px) {


  .navbar-expand-lg {
    flex-flow: row nowrap;
    justify-content: flex-start;
  }

  .navbar-expand-lg .navbar-nav {
    flex-direction: row;
  }

  .navbar-expand-lg .navbar-nav .dropdown-menu {
    position: absolute;

  }

  .navbar-expand-lg .navbar-nav .nav-link {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }

  .navbar-expand-lg>.container,
  .navbar-expand-lg>.container-fluid {
    flex-wrap: nowrap;
  }

  .navbar-expand-lg .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
  }

  .navbar-expand-lg .navbar-toggler {
    display: none;
  }
}

@media (max-width: 1199.98px) {

  .navbar-expand-xl>.container,
  .navbar-expand-xl>.container-fluid {
    padding-right: 0;
    padding-left: 0;
  }
}

@media (min-width: 1200px) {
  .navbar-expand-xl {
    flex-flow: row nowrap;
    justify-content: flex-start;
  }

  .navbar-expand-xl .navbar-nav {
    flex-direction: row;
  }

  .navbar-expand-xl .navbar-nav .dropdown-menu {
    position: absolute;
  }

  .navbar-expand-xl .navbar-nav .nav-link {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }

  .navbar-expand-xl>.container,
  .navbar-expand-xl>.container-fluid {
    flex-wrap: nowrap;
  }

  .navbar-expand-xl .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
  }

  .navbar-expand-xl .navbar-toggler {
    display: none;
  }
}

.navbar-expand {
  flex-flow: row nowrap;
  justify-content: flex-start;
}

.navbar-expand>.container,
.navbar-expand>.container-fluid {
  padding-right: 0;
  padding-left: 0;
}

.navbar-expand .navbar-nav {
  flex-direction: row;
}

.navbar-expand .navbar-nav .dropdown-menu {
  position: absolute;
}

.navbar-expand .navbar-nav .nav-link {
  padding-right: 0.5rem;
  padding-left: 0.5rem;
}

.navbar-expand>.container,
.navbar-expand>.container-fluid {
  flex-wrap: nowrap;
}

.navbar-expand .navbar-collapse {
  display: flex !important;
  flex-basis: auto;
}

.navbar-expand .navbar-toggler {
  display: none;
}

.navbar-light .navbar-brand {
  color: rgba(0, 0, 0, 0.9);
}

.navbar-light .navbar-brand:hover,
.navbar-light .navbar-brand:focus {
  color: rgba(0, 0, 0, 0.9);
}

.navbar-light .navbar-nav .nav-link {
  color: var(--nav-link-color);
}

.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus {
  color: rgba(0, 0, 0, 0.7);
}

.navbar-light .navbar-nav .nav-link.disabled {
  color: var(--nav-link-disabled-color);
  pointer-events: none !important;
}

.navbar-light .navbar-nav .show>.nav-link,
.navbar-light .navbar-nav .active>.nav-link,
.navbar-light .navbar-nav .nav-link.show,
.navbar-light .navbar-nav .nav-link.active {
  color: rgba(0, 0, 0, 0.9);
}

.navbar-light .navbar-toggler {
  color: rgba(0, 0, 0, 0.5);
  border-color: rgba(0, 0, 0, 0.1);
}

.navbar-light .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.navbar-light .navbar-text {
  color: rgba(0, 0, 0, 0.5);
}

.navbar-light .navbar-text a {
  color: rgba(0, 0, 0, 0.9);
}

.navbar-light .navbar-text a:hover,
.navbar-light .navbar-text a:focus {
  color: rgba(0, 0, 0, 0.9);
}

.navbar-dark .navbar-brand {
  color: #fff;
}

.navbar-dark .navbar-brand:hover,
.navbar-dark .navbar-brand:focus {
  color: #fff;
}

.navbar-dark .navbar-nav .nav-link {
  color: rgba(255, 255, 255, 0.5);
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
  color: rgba(255, 255, 255, 0.75);
}

.navbar-dark .navbar-nav .nav-link.disabled {
  color: rgba(255, 255, 255, 0.25);
}

.navbar-dark .navbar-nav .show>.nav-link,
.navbar-dark .navbar-nav .active>.nav-link,
.navbar-dark .navbar-nav .nav-link.show,
.navbar-dark .navbar-nav .nav-link.active {
  color: #fff;
}

.navbar-dark .navbar-toggler {
  color: rgba(255, 255, 255, 0.5);
  border-color: rgba(255, 255, 255, 0.1);
}

.navbar-dark .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.navbar-dark .navbar-text {
  color: rgba(255, 255, 255, 0.5);
}

.navbar-dark .navbar-text a {
  color: #fff;
}

.navbar-dark .navbar-text a:hover,
.navbar-dark .navbar-text a:focus {
  color: #fff;
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid rgba(0, 0, 0, 0.125);
  border-radius: 0.25rem;
}

.card>hr {
  margin-right: 0;
  margin-left: 0;
}

.card>.list-group:first-child .list-group-item:first-child {
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}

.card>.list-group:last-child .list-group-item:last-child {
  border-bottom-right-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}

.card-body {
  flex: 1 1 auto;
  padding: 1.25rem;
}

.card-title {
  margin-bottom: 0.75rem;
}

.card-subtitle {
  margin-top: -0.375rem;
  margin-bottom: 0;
}

.card-text:last-child {
  margin-bottom: 0;
}

.card-link:hover {
  text-decoration: none;
}

.card-link+.card-link {
  margin-left: 1.25rem;
}

.card-header {
  padding: 0.75rem 1.25rem;
  margin-bottom: 0;
  background-color: rgba(0, 0, 0, 0.03);
  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}

.card-header:first-child {
  border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0;
}

.card-header+.list-group .list-group-item:first-child {
  border-top: 0;
}

.card-footer {
  padding: 0.75rem 1.25rem;
  background-color: rgba(0, 0, 0, 0.03);
  border-top: 1px solid rgba(0, 0, 0, 0.125);
}

.card-footer:last-child {
  border-radius: 0 0 calc(0.25rem - 1px) calc(0.25rem - 1px);
}

.card-header-tabs {
  margin-right: -0.625rem;
  margin-bottom: -0.75rem;
  margin-left: -0.625rem;
  border-bottom: 0;
}

.card-header-pills {
  margin-right: -0.625rem;
  margin-left: -0.625rem;
}

.card-img-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1.25rem;
}

.card-img {
  width: 100%;
  border-radius: calc(0.25rem - 1px);
}

.card-img-top {
  width: 100%;
  border-top-left-radius: calc(0.25rem - 1px);
  border-top-right-radius: calc(0.25rem - 1px);
}

.card-img-bottom {
  width: 100%;
  border-bottom-right-radius: calc(0.25rem - 1px);
  border-bottom-left-radius: calc(0.25rem - 1px);
}

.card-deck {
  display: flex;
  flex-direction: column;
}

.card-deck .card {
  margin-bottom: 15px;
}

@media (min-width: 576px) {
  .card-deck {
    flex-flow: row wrap;
    margin-right: -15px;
    margin-left: -15px;
  }

  .card-deck .card {
    display: flex;
    flex: 1 0 0%;
    flex-direction: column;
    margin-right: 15px;
    margin-bottom: 0;
    margin-left: 15px;
  }
}

.card-group {
  display: flex;
  flex-direction: column;
}

.card-group>.card {
  margin-bottom: 15px;
}

@media (min-width: 576px) {
  .card-group {
    flex-flow: row wrap;
  }

  .card-group>.card {
    flex: 1 0 0%;
    margin-bottom: 0;
  }

  .card-group>.card+.card {
    margin-left: 0;
    border-left: 0;
  }

  .card-group>.card:first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .card-group>.card:first-child .card-img-top,
  .card-group>.card:first-child .card-header {
    border-top-right-radius: 0;
  }

  .card-group>.card:first-child .card-img-bottom,
  .card-group>.card:first-child .card-footer {
    border-bottom-right-radius: 0;
  }

  .card-group>.card:last-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  .card-group>.card:last-child .card-img-top,
  .card-group>.card:last-child .card-header {
    border-top-left-radius: 0;
  }

  .card-group>.card:last-child .card-img-bottom,
  .card-group>.card:last-child .card-footer {
    border-bottom-left-radius: 0;
  }

  .card-group>.card:only-child {
    border-radius: 0.25rem;
  }

  .card-group>.card:only-child .card-img-top,
  .card-group>.card:only-child .card-header {
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
  }

  .card-group>.card:only-child .card-img-bottom,
  .card-group>.card:only-child .card-footer {
    border-bottom-right-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
  }

  .card-group>.card:not(:first-child):not(:last-child):not(:only-child) {
    border-radius: 0;
  }

  .card-group>.card:not(:first-child):not(:last-child):not(:only-child) .card-img-top,
  .card-group>.card:not(:first-child):not(:last-child):not(:only-child) .card-img-bottom,
  .card-group>.card:not(:first-child):not(:last-child):not(:only-child) .card-header,
  .card-group>.card:not(:first-child):not(:last-child):not(:only-child) .card-footer {
    border-radius: 0;
  }
}

.card-columns .card {
  margin-bottom: 0.75rem;
}

@media (min-width: 576px) {
  .card-columns {
    -moz-column-count: 3;
    column-count: 3;
    -moz-column-gap: 1.25rem;
    column-gap: 1.25rem;
    orphans: 1;
    widows: 1;
  }

  .card-columns .card {
    display: inline-block;
    width: 100%;
  }
}

.accordion .card:not(:first-of-type):not(:last-of-type) {
  border-bottom: 0;
  border-radius: 0;
}

.accordion .card:not(:first-of-type) .card-header:first-child {
  border-radius: 0;
}

.accordion .card:first-of-type {
  border-bottom: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.accordion .card:last-of-type {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  list-style: none;
  background-color: #e9ecef;
  border-radius: 0.25rem;
}

.breadcrumb-item+.breadcrumb-item {
  padding-left: 0.5rem;
}

.breadcrumb-item+.breadcrumb-item::before {
  display: inline-block;
  padding-right: 0.5rem;
  color: #6c757d;
  content: "/";
}

.breadcrumb-item+.breadcrumb-item:hover::before {
  text-decoration: underline;
}

.breadcrumb-item+.breadcrumb-item:hover::before {
  text-decoration: none;
}

.breadcrumb-item.active {
  color: #6c757d;
}

.pagination {
  display: flex;
  padding-left: 0;
  list-style: none;
  border-radius: 0.25rem;
}

.page-link {
  position: relative;
  display: block;
  padding: 0.5rem 0.75rem;
  margin-left: -1px;
  line-height: 1.25;
  color: var(--primary);
  background-color: #fff;
  border: 1px solid #dee2e6;
}

.page-link:hover {
  z-index: 2;
  color: var(--link-hover-color);
  text-decoration: none;
  background-color: #e9ecef;
  border-color: #dee2e6;
}

.page-link:focus {
  z-index: 2;
  outline: 0;
  box-shadow: 0 0 0 0.2rem var(--primary-box-shadow-light);
}

.page-link:not(:disabled):not(.disabled) {
  cursor: pointer;
}

.page-item:first-child .page-link {
  margin-left: 0;
  border-top-left-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}

.page-item:last-child .page-link {
  border-top-right-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
}

.page-item.active .page-link {
  z-index: 1;
  color: #fff;
  background-color: var(--primary);
  border-color: var(--primary);
}

.page-item.disabled .page-link {
  color: #6c757d;
  pointer-events: none;
  cursor: auto;
  background-color: #fff;
  border-color: #dee2e6;
}

.pagination-lg .page-link {
  padding: 0.75rem 1.5rem;
  font-size: 1.25rem;
  line-height: 1.5;
}

.pagination-lg .page-item:first-child .page-link {
  border-top-left-radius: 0.3rem;
  border-bottom-left-radius: 0.3rem;
}

.pagination-lg .page-item:last-child .page-link {
  border-top-right-radius: 0.3rem;
  border-bottom-right-radius: 0.3rem;
}

.pagination-sm .page-link {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
}

.pagination-sm .page-item:first-child .page-link {
  border-top-left-radius: 0.2rem;
  border-bottom-left-radius: 0.2rem;
}

.pagination-sm .page-item:last-child .page-link {
  border-top-right-radius: 0.2rem;
  border-bottom-right-radius: 0.2rem;
}

.badge {
  display: inline-block;
  padding: 0.25em 0.4em;
  font-size: 75%;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 0.25rem;
}

.badge:empty {
  display: none;
}

.btn .badge {
  position: relative;
  top: -1px;
}

.badge-pill {
  padding-right: 0.6em;
  padding-left: 0.6em;
  border-radius: 10rem;
}

.badge-primary {
  color: #fff;
  background-color: var(--primary);
}

.badge-primary[href]:hover,
.badge-primary[href]:focus {
  color: #fff;
  text-decoration: none;
  background-color: var(--primary-active);
}

.badge-secondary {
  color: #fff;
  background-color: var(--secondary);
}

.badge-secondary[href]:hover,
.badge-secondary[href]:focus {
  color: #fff;
  text-decoration: none;
  background-color: #575757;
}

.badge-success {
  color: #fff;
  background-color: #28a745;
}

.badge-success[href]:hover,
.badge-success[href]:focus {
  color: #fff;
  text-decoration: none;
  background-color: #1e7e34;
}

.badge-info {
  color: #fff;
  background-color: #17a2b8;
}

.badge-info[href]:hover,
.badge-info[href]:focus {
  color: #fff;
  text-decoration: none;
  background-color: #117a8b;
}

.badge-warning {
  color: #212529;
  background-color: #ffc107;
}

.badge-warning[href]:hover,
.badge-warning[href]:focus {
  color: #212529;
  text-decoration: none;
  background-color: #d39e00;
}

.badge-danger {
  color: #fff;
  background-color: #dc3545;
}

.badge-danger[href]:hover,
.badge-danger[href]:focus {
  color: #fff;
  text-decoration: none;
  background-color: #bd2130;
}

.badge-light {
  color: #212529;
  background-color: #f8f9fa;
}

.badge-light[href]:hover,
.badge-light[href]:focus {
  color: #212529;
  text-decoration: none;
  background-color: #dae0e5;
}

.badge-dark {
  color: #fff;
  background-color: #343a40;
}

.badge-dark[href]:hover,
.badge-dark[href]:focus {
  color: #fff;
  text-decoration: none;
  background-color: #1d2124;
}

.jumbotron {
  padding: 2rem 1rem;
  margin-bottom: 2rem;
  background-color: #e9ecef;
  border-radius: 0.3rem;
}

@media (min-width: 576px) {
  .jumbotron {
    padding: 4rem 2rem;
  }
}

.jumbotron-fluid {
  padding-right: 0;
  padding-left: 0;
  border-radius: 0;
}

.alert {
  position: relative;
  padding: 0.75rem 1.25rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  text-align: center;
}

.alert-heading {
  color: inherit;
}

.alert-link {
  font-weight: 700;
}

.alert-dismissible {
  padding-right: 4rem;
}

.alert-dismissible .close {
  position: absolute;
  top: 0;
  right: 0;
  padding: 0.75rem 1.25rem;
  color: inherit;
}

.alert-primary {
  color: #005374;
  background-color: #ccecf9;
  border-color: #b8e4f6;
}

.alert-primary hr {
  border-top-color: #a1dbf3;
}

.alert-primary .alert-link {
  color: #002f41;
}

.alert-secondary {
  color: #3a3a3a;
  background-color: #e2e2e2;
  border-color: #d7d7d7;
}

.alert-secondary hr {
  border-top-color: #cacaca;
}

.alert-secondary .alert-link {
  color: #212121;
}

.alert-success {
  color: #155724;
  background-color: #d4edda;
  border-color: #c3e6cb;
}

.alert-success hr {
  border-top-color: #b1dfbb;
}

.alert-success .alert-link {
  color: #0b2e13;
}

.alert-info {
  color: #0c5460;
  background-color: #d1ecf1;
  border-color: #bee5eb;
}

.alert-info hr {
  border-top-color: #abdde5;
}

.alert-info .alert-link {
  color: #062c33;
}

.alert-warning {
  color: #856404;
  background-color: #fff3cd;
  border-color: #ffeeba;
}

.alert-warning hr {
  border-top-color: #ffe8a1;
}

.alert-warning .alert-link {
  color: #533f03;
}

.alert-danger {
  color: #721c24;
  background-color: #f8d7da;
  border-color: #f5c6cb;
}

.alert-danger hr {
  border-top-color: #f1b0b7;
}

.alert-danger .alert-link {
  color: #491217;
}

.alert-light {
  color: #818182;
  background-color: #fefefe;
  border-color: #fdfdfe;
}

.alert-light hr {
  border-top-color: #ececf6;
}

.alert-light .alert-link {
  color: #686868;
}

.alert-dark {
  color: #1b1e21;
  background-color: #d6d8d9;
  border-color: #c6c8ca;
}

.alert-dark hr {
  border-top-color: #b9bbbe;
}

.alert-dark .alert-link {
  color: #040505;
}

@keyframes progress-bar-stripes {
  from {
    background-position: 1rem 0;
  }

  to {
    background-position: 0 0;
  }
}

.progress {
  display: flex;
  height: 1rem;
  overflow: hidden;
  font-size: 0.75rem;
  background-color: #e9ecef;
  border-radius: 0.25rem;
}

.progress-bar {
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  background-color: var(--primary);
  transition: width 0.6s ease;
}

@media screen and (prefers-reduced-motion: reduce) {
  .progress-bar {
    transition: none;
  }
}

.progress-bar-striped {
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-size: 1rem 1rem;
}

.progress-bar-animated {
  animation: progress-bar-stripes 1s linear infinite;
}

.media {
  display: flex;
  align-items: flex-start;
}

.media-body {
  flex: 1;
}

.list-group {
  display: flex;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
}

/* Device/alarm cards on the side rail. Their fill is --side-menu-color, so
   their text and hairline have to follow it: both were hard-coded light for
   the navy slab and go white-on-white the moment a theme makes the rail a
   light surface. */
.list-group-item-action {
  width: 100%;
  /* color: #495057; */
  color: var(--on-dark-text);
  text-align: inherit;
}

.list-group-item-action:hover,
.list-group-item-action:focus {
  /* color: #495057; */
  color: var(--on-dark-text);
  text-decoration: none;
  /* background-color: #f8f9fa; */
  background-color: var(--side-menu-hover);
  transition: background-color 0.15s;

}

.list-group-item-action:active {
  /* color: #333; */
  /* background-color: #e9ecef; */
  color: var(--on-dark-text);
  background-color: var(--side-menu-active);
}

.list-group-item {
  position: relative;
  display: block;
  padding: 0.75rem 1.25rem;
  margin-bottom: -1px;
  /* background-color: #fff; */
  background-color: var(--side-menu-color);
  /* border: 1px solid rgba(0, 0, 0, 0.125); */
  border: 1px solid var(--rail-item-border);
}

.list-group-item:first-child {
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}

.list-group-item:last-child {
  margin-bottom: 0;
  border-bottom-right-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}

.list-group-item:hover,
.list-group-item:focus {
  z-index: 1;
  text-decoration: none;
}

.list-group-item.disabled,
.list-group-item:disabled {
  color: #6c757d;
  background-color: #fff;
}

.list-group-item.active {
  z-index: 2;
  color: var(--primary-text-color);
  background-color: var(--primary);
  border-color: var(--primary);
}

.list-group-flush .list-group-item {
  border-right: 0;
  border-left: 0;
  border-radius: 0;
}

.list-group-flush:first-child .list-group-item:first-child {
  border-top: 0;
}

.list-group-flush:last-child .list-group-item:last-child {
  border-bottom: 0;
}

.list-group-item-primary {
  color: #005374;
  background-color: #b8e4f6;
}

.list-group-item-primary.list-group-item-action:hover,
.list-group-item-primary.list-group-item-action:focus {
  color: #005374;
  background-color: #a1dbf3;
}

.list-group-item-primary.list-group-item-action.active {
  color: #fff;
  background-color: #005374;
  border-color: #005374;
}

.list-group-item-secondary {
  color: #3a3a3a;
  background-color: #d7d7d7;
}

.list-group-item-secondary.list-group-item-action:hover,
.list-group-item-secondary.list-group-item-action:focus {
  color: #3a3a3a;
  background-color: #cacaca;
}

.list-group-item-secondary.list-group-item-action.active {
  color: #fff;
  background-color: #3a3a3a;
  border-color: #3a3a3a;
}

.list-group-item-success {
  color: #155724;
  background-color: #c3e6cb;
}

.list-group-item-success.list-group-item-action:hover,
.list-group-item-success.list-group-item-action:focus {
  color: #155724;
  background-color: #b1dfbb;
}

.list-group-item-success.list-group-item-action.active {
  color: #fff;
  background-color: #155724;
  border-color: #155724;
}

.list-group-item-info {
  color: #0c5460;
  background-color: #bee5eb;
}

.list-group-item-info.list-group-item-action:hover,
.list-group-item-info.list-group-item-action:focus {
  color: #0c5460;
  background-color: #abdde5;
}

.list-group-item-info.list-group-item-action.active {
  color: #fff;
  background-color: #0c5460;
  border-color: #0c5460;
}

.list-group-item-warning {
  color: #856404;
  background-color: #ffeeba;
}

.list-group-item-warning.list-group-item-action:hover,
.list-group-item-warning.list-group-item-action:focus {
  color: #856404;
  background-color: #ffe8a1;
}

.list-group-item-warning.list-group-item-action.active {
  color: #fff;
  background-color: #856404;
  border-color: #856404;
}

.list-group-item-danger {
  color: #721c24;
  background-color: #f5c6cb;
}

.list-group-item-danger.list-group-item-action:hover,
.list-group-item-danger.list-group-item-action:focus {
  color: #721c24;
  background-color: #f1b0b7;
}

.list-group-item-danger.list-group-item-action.active {
  color: #fff;
  background-color: #721c24;
  border-color: #721c24;
}

.list-group-item-light {
  color: #818182;
  background-color: #fdfdfe;
}

.list-group-item-light.list-group-item-action:hover,
.list-group-item-light.list-group-item-action:focus {
  color: #818182;
  background-color: #ececf6;
}

.list-group-item-light.list-group-item-action.active {
  color: #fff;
  background-color: #818182;
  border-color: #818182;
}

.list-group-item-dark {
  color: #1b1e21;
  background-color: #c6c8ca;
}

.list-group-item-dark.list-group-item-action:hover,
.list-group-item-dark.list-group-item-action:focus {
  color: #1b1e21;
  background-color: #b9bbbe;
}

.list-group-item-dark.list-group-item-action.active {
  color: #fff;
  background-color: #1b1e21;
  border-color: #1b1e21;
}

.close {
  float: right;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: #000;
  text-shadow: 0 1px 0 #fff;
  opacity: 0.5;
}

.close:not(:disabled):not(.disabled) {
  cursor: pointer;
}

.close:not(:disabled):not(.disabled):hover,
.close:not(:disabled):not(.disabled):focus {
  color: #000;
  text-decoration: none;
  opacity: 0.75;
}

button.close {
  padding: 0;
  background-color: transparent;
  border: 0;
  -webkit-appearance: none;
}

.modal-open {
  overflow: hidden;
}

.modal-open .modal {
  overflow-x: hidden;
  overflow-y: auto;
}

.modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1050;
  display: none;
  overflow: hidden;
  outline: 0;
}

.modal-dialog {
  position: relative;
  width: auto;
  margin: 0.5rem;
  pointer-events: none;
}

.modal.fade .modal-dialog {
  transition: transform 0.3s ease-out;
  transform: translate(0, -25%);
}

@media screen and (prefers-reduced-motion: reduce) {
  .modal.fade .modal-dialog {
    transition: none;
  }
}

.modal.show .modal-dialog {
  transform: translate(0, 0);
}

.modal-dialog-centered {
  display: flex;
  align-items: center;
  min-height: calc(100% - (0.5rem * 2));
}

.modal-dialog-centered::before {
  display: block;
  height: calc(100vh - (0.5rem * 2));
  content: "";
}

.modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  pointer-events: auto;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 0.3rem;
  outline: 0;
}

.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1040;
  background-color: #000;
}

.modal-backdrop.fade {
  opacity: 0;
}

.modal-backdrop.show {
  opacity: 0.5;
}

.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 1rem;
  border-bottom: 1px solid #e9ecef;
  border-top-left-radius: 0.3rem;
  border-top-right-radius: 0.3rem;
}

.modal-header .close {
  padding: 1rem;
  margin: -1rem -1rem -1rem auto;
}

/* MW-323: shared accessible modal close button. A small square with an
   always-visible themed border (so it's discoverable), a subtle hover fill,
   and a keyboard-only focus ring instead of the browser's default outline box.
   Used by all modals in place of Bootstrap's borderless `.close`; colours come
   from theme tokens so it adapts to light/dark. */
.modal-close-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-left: auto;
  padding: 0;
  border: 1px solid var(--border-color, #dee2e6);
  border-radius: 6px;
  background-color: transparent;
  color: var(--text-muted, #6c757d);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease,
    color 0.15s ease;
}

.modal-close-btn > span {
  margin-top: -2px; /* optical centering of the "×" glyph */
}

.modal-close-btn:hover {
  color: var(--text-strong, #212529);
  background-color: var(--surface-2, #f8f9fa);
  border-color: var(--text-muted, #adb5bd);
  text-decoration: none;
}

.modal-close-btn:focus {
  outline: none;
}

.modal-close-btn:focus-visible {
  /* --primary is always defined in :root, so the old EWE-blue var fallback
     was unreachable dead brand — and wrong for every other tenant if it ever
     became reachable. */
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-color: var(--primary);
}

.modal-title {
  margin-bottom: 0;
  line-height: 1.5;
}

.modal-body {
  position: relative;
  flex: 1 1 auto;
  padding: 1rem;
}

.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 1rem;
  border-top: 1px solid #e9ecef;
}

.modal-footer> :not(:first-child) {
  margin-left: 0.25rem;
}

.modal-footer> :not(:last-child) {
  margin-right: 0.25rem;
}

.modal-scrollbar-measure {
  position: absolute;
  top: -9999px;
  width: 50px;
  height: 50px;
  overflow: scroll;
}

@media (min-width: 576px) {
  .modal-dialog {
    max-width: 500px;
    margin: 1.75rem auto;
  }

    .modal-dialog-wide {
    max-width: 750px;
    margin: 1.75rem auto;
  }

  .modal-dialog-centered {
    min-height: calc(100% - (1.75rem * 2));
  }

  .modal-dialog-centered::before {
    height: calc(100vh - (1.75rem * 2));
  }

  .modal-sm {
    max-width: 300px;
  }
}

@media (min-width: 992px) {
  .modal-lg {
    max-width: 800px;
  }
}

/* .tooltip {
  position: absolute;
  z-index: 1070;
  display: block;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  text-align: start;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  word-break: normal;
  word-spacing: normal;
  white-space: normal;
  line-break: auto;
  font-size: 0.875rem;
  word-wrap: break-word;
  opacity: 0;
} */

.tooltip.show {
  opacity: 0.9;
}

.tooltip .arrow {
  position: absolute;
  display: block;
  width: 0.8rem;
  height: 0.4rem;
}

.tooltip .arrow::before {
  position: absolute;
  content: "";
  border-color: transparent;
  border-style: solid;
}

.bs-tooltip-top,
.bs-tooltip-auto[x-placement^=top] {
  padding: 0.4rem 0;
}

.bs-tooltip-top .arrow,
.bs-tooltip-auto[x-placement^=top] .arrow {
  bottom: 0;
}

.bs-tooltip-top .arrow::before,
.bs-tooltip-auto[x-placement^=top] .arrow::before {
  top: 0;
  border-width: 0.4rem 0.4rem 0;
  border-top-color: #000;
}

.bs-tooltip-right,
.bs-tooltip-auto[x-placement^=right] {
  padding: 0 0.4rem;
}

.bs-tooltip-right .arrow,
.bs-tooltip-auto[x-placement^=right] .arrow {
  left: 0;
  width: 0.4rem;
  height: 0.8rem;
}

.bs-tooltip-right .arrow::before,
.bs-tooltip-auto[x-placement^=right] .arrow::before {
  right: 0;
  border-width: 0.4rem 0.4rem 0.4rem 0;
  border-right-color: #000;
}

.bs-tooltip-bottom,
.bs-tooltip-auto[x-placement^=bottom] {
  padding: 0.4rem 0;
}

.bs-tooltip-bottom .arrow,
.bs-tooltip-auto[x-placement^=bottom] .arrow {
  top: 0;
}

.bs-tooltip-bottom .arrow::before,
.bs-tooltip-auto[x-placement^=bottom] .arrow::before {
  bottom: 0;
  border-width: 0 0.4rem 0.4rem;
  border-bottom-color: #000;
}

.bs-tooltip-left,
.bs-tooltip-auto[x-placement^=left] {
  padding: 0 0.4rem;
}

.bs-tooltip-left .arrow,
.bs-tooltip-auto[x-placement^=left] .arrow {
  right: 0;
  width: 0.4rem;
  height: 0.8rem;
}

.bs-tooltip-left .arrow::before,
.bs-tooltip-auto[x-placement^=left] .arrow::before {
  left: 0;
  border-width: 0.4rem 0 0.4rem 0.4rem;
  border-left-color: #000;
}

.tooltip-inner {
  max-width: 200px;
  padding: 0.25rem 0.5rem;
  color: #fff;
  text-align: center;
  background-color: #000;
  border-radius: 0.25rem;
}

.popover {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1060;
  display: block;
  max-width: 276px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  text-align: start;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  word-break: normal;
  word-spacing: normal;
  white-space: normal;
  line-break: auto;
  font-size: 0.875rem;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 0.3rem;
}

.popover .arrow {
  position: absolute;
  display: block;
  width: 1rem;
  height: 0.5rem;
  margin: 0 0.3rem;
}

.popover .arrow::before,
.popover .arrow::after {
  position: absolute;
  display: block;
  content: "";
  border-color: transparent;
  border-style: solid;
}

.bs-popover-top,
.bs-popover-auto[x-placement^=top] {
  margin-bottom: 0.5rem;
}

.bs-popover-top .arrow,
.bs-popover-auto[x-placement^=top] .arrow {
  bottom: calc((0.5rem + 1px) * -1);
}

.bs-popover-top .arrow::before,
.bs-popover-auto[x-placement^=top] .arrow::before,
.bs-popover-top .arrow::after,
.bs-popover-auto[x-placement^=top] .arrow::after {
  border-width: 0.5rem 0.5rem 0;
}

.bs-popover-top .arrow::before,
.bs-popover-auto[x-placement^=top] .arrow::before {
  bottom: 0;
  border-top-color: rgba(0, 0, 0, 0.25);
}

.bs-popover-top .arrow::after,
.bs-popover-auto[x-placement^=top] .arrow::after {
  bottom: 1px;
  border-top-color: #fff;
}

.bs-popover-right,
.bs-popover-auto[x-placement^=right] {
  margin-left: 0.5rem;
}

.bs-popover-right .arrow,
.bs-popover-auto[x-placement^=right] .arrow {
  left: calc((0.5rem + 1px) * -1);
  width: 0.5rem;
  height: 1rem;
  margin: 0.3rem 0;
}

.bs-popover-right .arrow::before,
.bs-popover-auto[x-placement^=right] .arrow::before,
.bs-popover-right .arrow::after,
.bs-popover-auto[x-placement^=right] .arrow::after {
  border-width: 0.5rem 0.5rem 0.5rem 0;
}

.bs-popover-right .arrow::before,
.bs-popover-auto[x-placement^=right] .arrow::before {
  left: 0;
  border-right-color: rgba(0, 0, 0, 0.25);
}

.bs-popover-right .arrow::after,
.bs-popover-auto[x-placement^=right] .arrow::after {
  left: 1px;
  border-right-color: #fff;
}

.bs-popover-bottom,
.bs-popover-auto[x-placement^=bottom] {
  margin-top: 0.5rem;
}

.bs-popover-bottom .arrow,
.bs-popover-auto[x-placement^=bottom] .arrow {
  top: calc((0.5rem + 1px) * -1);
}

.bs-popover-bottom .arrow::before,
.bs-popover-auto[x-placement^=bottom] .arrow::before,
.bs-popover-bottom .arrow::after,
.bs-popover-auto[x-placement^=bottom] .arrow::after {
  border-width: 0 0.5rem 0.5rem 0.5rem;
}

.bs-popover-bottom .arrow::before,
.bs-popover-auto[x-placement^=bottom] .arrow::before {
  top: 0;
  border-bottom-color: rgba(0, 0, 0, 0.25);
}

.bs-popover-bottom .arrow::after,
.bs-popover-auto[x-placement^=bottom] .arrow::after {
  top: 1px;
  border-bottom-color: #fff;
}

.bs-popover-bottom .popover-header::before,
.bs-popover-auto[x-placement^=bottom] .popover-header::before {
  position: absolute;
  top: 0;
  left: 50%;
  display: block;
  width: 1rem;
  margin-left: -0.5rem;
  content: "";
  border-bottom: 1px solid #f7f7f7;
}

.bs-popover-left,
.bs-popover-auto[x-placement^=left] {
  margin-right: 0.5rem;
}

.bs-popover-left .arrow,
.bs-popover-auto[x-placement^=left] .arrow {
  right: calc((0.5rem + 1px) * -1);
  width: 0.5rem;
  height: 1rem;
  margin: 0.3rem 0;
}

.bs-popover-left .arrow::before,
.bs-popover-auto[x-placement^=left] .arrow::before,
.bs-popover-left .arrow::after,
.bs-popover-auto[x-placement^=left] .arrow::after {
  border-width: 0.5rem 0 0.5rem 0.5rem;
}

.bs-popover-left .arrow::before,
.bs-popover-auto[x-placement^=left] .arrow::before {
  right: 0;
  border-left-color: rgba(0, 0, 0, 0.25);
}

.bs-popover-left .arrow::after,
.bs-popover-auto[x-placement^=left] .arrow::after {
  right: 1px;
  border-left-color: #fff;
}

.popover-header {
  padding: 0.5rem 0.75rem;
  margin-bottom: 0;
  font-size: 1rem;
  color: inherit;
  background-color: #f7f7f7;
  border-bottom: 1px solid #ebebeb;
  border-top-left-radius: calc(0.3rem - 1px);
  border-top-right-radius: calc(0.3rem - 1px);
}

.popover-header:empty {
  display: none;
}

.popover-body {
  padding: 0.5rem 0.75rem;
  color: #333;
}

.carousel {
  position: relative;
}

.carousel-inner {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.carousel-item {
  position: relative;
  display: none;
  align-items: center;
  width: 100%;
  backface-visibility: hidden;
  perspective: 1000px;
}

.carousel-item.active,
.carousel-item-next,
.carousel-item-prev {
  display: block;
  transition: transform 0.6s ease;
}

@media screen and (prefers-reduced-motion: reduce) {

  .carousel-item.active,
  .carousel-item-next,
  .carousel-item-prev {
    transition: none;
  }
}

.carousel-item-next,
.carousel-item-prev {
  position: absolute;
  top: 0;
}

.carousel-item-next.carousel-item-left,
.carousel-item-prev.carousel-item-right {
  transform: translateX(0);
}

@supports (transform-style: preserve-3d) {

  .carousel-item-next.carousel-item-left,
  .carousel-item-prev.carousel-item-right {
    transform: translate3d(0, 0, 0);
  }
}

.carousel-item-next,
.active.carousel-item-right {
  transform: translateX(100%);
}

@supports (transform-style: preserve-3d) {

  .carousel-item-next,
  .active.carousel-item-right {
    transform: translate3d(100%, 0, 0);
  }
}

.carousel-item-prev,
.active.carousel-item-left {
  transform: translateX(-100%);
}

@supports (transform-style: preserve-3d) {

  .carousel-item-prev,
  .active.carousel-item-left {
    transform: translate3d(-100%, 0, 0);
  }
}

.carousel-fade .carousel-item {
  opacity: 0;
  transition-duration: 0.6s;
  transition-property: opacity;
}

.carousel-fade .carousel-item.active,
.carousel-fade .carousel-item-next.carousel-item-left,
.carousel-fade .carousel-item-prev.carousel-item-right {
  opacity: 1;
}

.carousel-fade .active.carousel-item-left,
.carousel-fade .active.carousel-item-right {
  opacity: 0;
}

.carousel-fade .carousel-item-next,
.carousel-fade .carousel-item-prev,
.carousel-fade .carousel-item.active,
.carousel-fade .active.carousel-item-left,
.carousel-fade .active.carousel-item-prev {
  transform: translateX(0);
}

@supports (transform-style: preserve-3d) {

  .carousel-fade .carousel-item-next,
  .carousel-fade .carousel-item-prev,
  .carousel-fade .carousel-item.active,
  .carousel-fade .active.carousel-item-left,
  .carousel-fade .active.carousel-item-prev {
    transform: translate3d(0, 0, 0);
  }
}

.carousel-control-prev,
.carousel-control-next {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 15%;
  color: #fff;
  text-align: center;
  opacity: 0.5;
}

.carousel-control-prev:hover,
.carousel-control-prev:focus,
.carousel-control-next:hover,
.carousel-control-next:focus {
  color: #fff;
  text-decoration: none;
  outline: 0;
  opacity: 0.9;
}

.carousel-control-prev {
  left: 0;
}

.carousel-control-next {
  right: 0;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: transparent no-repeat center center;
  background-size: 100% 100%;
}

.carousel-control-prev-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
}

.carousel-control-next-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
}

.carousel-indicators {
  position: absolute;
  right: 0;
  bottom: 10px;
  left: 0;
  z-index: 15;
  display: flex;
  justify-content: center;
  padding-left: 0;
  margin-right: 15%;
  margin-left: 15%;
  list-style: none;
}

.carousel-indicators li {
  position: relative;
  flex: 0 1 auto;
  width: 30px;
  height: 3px;
  margin-right: 3px;
  margin-left: 3px;
  text-indent: -999px;
  cursor: pointer;
  background-color: rgba(255, 255, 255, 0.5);
}

.carousel-indicators li::before {
  position: absolute;
  top: -10px;
  left: 0;
  display: inline-block;
  width: 100%;
  height: 10px;
  content: "";
}

.carousel-indicators li::after {
  position: absolute;
  bottom: -10px;
  left: 0;
  display: inline-block;
  width: 100%;
  height: 10px;
  content: "";
}

.carousel-indicators .active {
  background-color: #fff;
}

.carousel-caption {
  position: absolute;
  right: 15%;
  bottom: 20px;
  left: 15%;
  z-index: 10;
  padding-top: 20px;
  padding-bottom: 20px;
  color: #fff;
  text-align: center;
}

.align-baseline {
  vertical-align: baseline !important;
}

.align-top {
  vertical-align: top !important;
}

.align-middle {
  vertical-align: middle !important;
}

.align-bottom {
  vertical-align: bottom !important;
}

.align-text-bottom {
  vertical-align: text-bottom !important;
}

.align-text-top {
  vertical-align: text-top !important;
}

.bg-primary {
  background-color: var(--primary) !important;
}

a.bg-primary:hover,
a.bg-primary:focus,
button.bg-primary:hover,
button.bg-primary:focus {
  background-color: var(--primary-active) !important;
}

.bg-secondary {
  background-color: var(--secondary) !important;
}

a.bg-secondary:hover,
a.bg-secondary:focus,
button.bg-secondary:hover,
button.bg-secondary:focus {
  background-color: #575757 !important;
}

.bg-success {
  background-color: #28a745 !important;
}

a.bg-success:hover,
a.bg-success:focus,
button.bg-success:hover,
button.bg-success:focus {
  background-color: #1e7e34 !important;
}

.bg-info {
  background-color: #17a2b8 !important;
}

a.bg-info:hover,
a.bg-info:focus,
button.bg-info:hover,
button.bg-info:focus {
  background-color: #117a8b !important;
}

.bg-warning {
  background-color: #ffc107 !important;
}

a.bg-warning:hover,
a.bg-warning:focus,
button.bg-warning:hover,
button.bg-warning:focus {
  background-color: #d39e00 !important;
}

.bg-danger {
  background-color: #dc3545 !important;
}

a.bg-danger:hover,
a.bg-danger:focus,
button.bg-danger:hover,
button.bg-danger:focus {
  background-color: #bd2130 !important;
}

.bg-light {
  background-color: #f8f9fa !important;
}

a.bg-light:hover,
a.bg-light:focus,
button.bg-light:hover,
button.bg-light:focus {
  background-color: #dae0e5 !important;
}

.bg-dark {
  background-color: #343a40 !important;
}

a.bg-dark:hover,
a.bg-dark:focus,
button.bg-dark:hover,
button.bg-dark:focus {
  background-color: #1d2124 !important;
}

.bg-white {
  background-color: #fff !important;
}

.bg-transparent {
  background-color: transparent !important;
}

.border {
  border: 1px solid #dee2e6 !important;
}

.border-top {
  border-top: 1px solid #dee2e6 !important;
}

.border-right {
  border-right: 1px solid #dee2e6 !important;
}

.border-bottom {
  border-bottom: 1px solid #dee2e6 !important;
}

.border-left {
  border-left: 1px solid #dee2e6 !important;
}

.border-0 {
  border: 0 !important;
}

.border-top-0 {
  border-top: 0 !important;
}

.border-right-0 {
  border-right: 0 !important;
}

.border-bottom-0 {
  border-bottom: 0 !important;
}

.border-left-0 {
  border-left: 0 !important;
}

.border-primary {
  border-color: var(--primary) !important;
}

.border-secondary {
  border-color: var(--secondary) !important;
}

.border-success {
  border-color: #28a745 !important;
}

.border-info {
  border-color: #17a2b8 !important;
}

.border-warning {
  border-color: #ffc107 !important;
}

.border-danger {
  border-color: #dc3545 !important;
}

.border-light {
  border-color: #f8f9fa !important;
}

.border-dark {
  border-color: #343a40 !important;
}

.border-white {
  border-color: #fff !important;
}

.rounded {
  border-radius: 0.25rem !important;
}

.rounded-top {
  border-top-left-radius: 0.25rem !important;
  border-top-right-radius: 0.25rem !important;
}

.rounded-right {
  border-top-right-radius: 0.25rem !important;
  border-bottom-right-radius: 0.25rem !important;
}

.rounded-bottom {
  border-bottom-right-radius: 0.25rem !important;
  border-bottom-left-radius: 0.25rem !important;
}

.rounded-left {
  border-top-left-radius: 0.25rem !important;
  border-bottom-left-radius: 0.25rem !important;
}

.rounded-circle {
  border-radius: 50% !important;
}

.rounded-0 {
  border-radius: 0 !important;
}

.clearfix::after {
  display: block;
  clear: both;
  content: "";
}

.d-none {
  display: none !important;
}

.d-inline {
  display: inline !important;
}

.d-inline-block {
  display: inline-block !important;
}

.d-block {
  display: block !important;
}

.d-table {
  display: table !important;
}

.d-table-row {
  display: table-row !important;
}

.d-table-cell {
  display: table-cell !important;
}

.d-flex {
  display: flex !important;
}

.d-inline-flex {
  display: inline-flex !important;
}

@media (min-width: 576px) {
  .d-sm-none {
    display: none !important;
  }

  .d-sm-inline {
    display: inline !important;
  }

  .d-sm-inline-block {
    display: inline-block !important;
  }

  .d-sm-block {
    display: block !important;
  }

  .d-sm-table {
    display: table !important;
  }

  .d-sm-table-row {
    display: table-row !important;
  }

  .d-sm-table-cell {
    display: table-cell !important;
  }

  .d-sm-flex {
    display: flex !important;
  }

  .d-sm-inline-flex {
    display: inline-flex !important;
  }
}

@media (min-width: 768px) {
  .d-md-none {
    display: none !important;
  }

  .d-md-inline {
    display: inline !important;
  }

  .d-md-inline-block {
    display: inline-block !important;
  }

  .d-md-block {
    display: block !important;
  }

  .d-md-table {
    display: table !important;
  }

  .d-md-table-row {
    display: table-row !important;
  }

  .d-md-table-cell {
    display: table-cell !important;
  }

  .d-md-flex {
    display: flex !important;
  }

  .d-md-inline-flex {
    display: inline-flex !important;
  }
}

@media (min-width: 992px) {
  .d-lg-none {
    display: none !important;
  }

  .d-lg-inline {
    display: inline !important;
  }

  .d-lg-inline-block {
    display: inline-block !important;
  }

  .d-lg-block {
    display: block !important;
  }

  .d-lg-table {
    display: table !important;
  }

  .d-lg-table-row {
    display: table-row !important;
  }

  .d-lg-table-cell {
    display: table-cell !important;
  }

  .d-lg-flex {
    display: flex !important;
  }

  .d-lg-inline-flex {
    display: inline-flex !important;
  }
}

@media (min-width: 1200px) {
  .d-xl-none {
    display: none !important;
  }

  .d-xl-inline {
    display: inline !important;
  }

  .d-xl-inline-block {
    display: inline-block !important;
  }

  .d-xl-block {
    display: block !important;
  }

  .d-xl-table {
    display: table !important;
  }

  .d-xl-table-row {
    display: table-row !important;
  }

  .d-xl-table-cell {
    display: table-cell !important;
  }

  .d-xl-flex {
    display: flex !important;
  }

  .d-xl-inline-flex {
    display: inline-flex !important;
  }
}

@media print {
  .d-print-none {
    display: none !important;
  }

  .d-print-inline {
    display: inline !important;
  }

  .d-print-inline-block {
    display: inline-block !important;
  }

  .d-print-block {
    display: block !important;
  }

  .d-print-table {
    display: table !important;
  }

  .d-print-table-row {
    display: table-row !important;
  }

  .d-print-table-cell {
    display: table-cell !important;
  }

  .d-print-flex {
    display: flex !important;
  }

  .d-print-inline-flex {
    display: inline-flex !important;
  }
}

.embed-responsive {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
}

.embed-responsive::before {
  display: block;
  content: "";
}

.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object,
.embed-responsive video {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.embed-responsive-21by9::before {
  padding-top: 42.8571428571%;
}

.embed-responsive-16by9::before {
  padding-top: 56.25%;
}

.embed-responsive-4by3::before {
  padding-top: 75%;
}

.embed-responsive-1by1::before {
  padding-top: 100%;
}

.flex-row {
  flex-direction: row !important;
}

.flex-column {
  flex-direction: column !important;
}

.flex-row-reverse {
  flex-direction: row-reverse !important;
}

.flex-column-reverse {
  flex-direction: column-reverse !important;
}

.flex-wrap {
  flex-wrap: wrap !important;
}

.flex-nowrap {
  flex-wrap: nowrap !important;
}

.flex-wrap-reverse {
  flex-wrap: wrap-reverse !important;
}

.flex-fill {
  flex: 1 1 auto !important;
}

.flex-grow-0 {
  flex-grow: 0 !important;
}

.flex-grow-1 {
  flex-grow: 1 !important;
}

.flex-shrink-0 {
  flex-shrink: 0 !important;
}

.flex-shrink-1 {
  flex-shrink: 1 !important;
}

.justify-content-start {
  justify-content: flex-start !important;
}

.justify-content-end {
  justify-content: flex-end !important;
}

.justify-content-center {
  justify-content: center !important;
}

.justify-content-between {
  justify-content: space-between !important;
}

.justify-content-around {
  justify-content: space-around !important;
}

.align-items-start {
  align-items: flex-start !important;
}

.align-items-end {
  align-items: flex-end !important;
}

.align-items-center {
  align-items: center !important;
}

.align-items-baseline {
  align-items: baseline !important;
}

.align-items-stretch {
  align-items: stretch !important;
}

.align-content-start {
  align-content: flex-start !important;
}

.align-content-end {
  align-content: flex-end !important;
}

.align-content-center {
  align-content: center !important;
}

.align-content-between {
  align-content: space-between !important;
}

.align-content-around {
  align-content: space-around !important;
}

.align-content-stretch {
  align-content: stretch !important;
}

.align-self-auto {
  align-self: auto !important;
}

.align-self-start {
  align-self: flex-start !important;
}

.align-self-end {
  align-self: flex-end !important;
}

.align-self-center {
  align-self: center !important;
}

.align-self-baseline {
  align-self: baseline !important;
}

.align-self-stretch {
  align-self: stretch !important;
}

@media (min-width: 576px) {
  .flex-sm-row {
    flex-direction: row !important;
  }

  .flex-sm-column {
    flex-direction: column !important;
  }

  .flex-sm-row-reverse {
    flex-direction: row-reverse !important;
  }

  .flex-sm-column-reverse {
    flex-direction: column-reverse !important;
  }

  .flex-sm-wrap {
    flex-wrap: wrap !important;
  }

  .flex-sm-nowrap {
    flex-wrap: nowrap !important;
  }

  .flex-sm-wrap-reverse {
    flex-wrap: wrap-reverse !important;
  }

  .flex-sm-fill {
    flex: 1 1 auto !important;
  }

  .flex-sm-grow-0 {
    flex-grow: 0 !important;
  }

  .flex-sm-grow-1 {
    flex-grow: 1 !important;
  }

  .flex-sm-shrink-0 {
    flex-shrink: 0 !important;
  }

  .flex-sm-shrink-1 {
    flex-shrink: 1 !important;
  }

  .justify-content-sm-start {
    justify-content: flex-start !important;
  }

  .justify-content-sm-end {
    justify-content: flex-end !important;
  }

  .justify-content-sm-center {
    justify-content: center !important;
  }

  .justify-content-sm-between {
    justify-content: space-between !important;
  }

  .justify-content-sm-around {
    justify-content: space-around !important;
  }

  .align-items-sm-start {
    align-items: flex-start !important;
  }

  .align-items-sm-end {
    align-items: flex-end !important;
  }

  .align-items-sm-center {
    align-items: center !important;
  }

  .align-items-sm-baseline {
    align-items: baseline !important;
  }

  .align-items-sm-stretch {
    align-items: stretch !important;
  }

  .align-content-sm-start {
    align-content: flex-start !important;
  }

  .align-content-sm-end {
    align-content: flex-end !important;
  }

  .align-content-sm-center {
    align-content: center !important;
  }

  .align-content-sm-between {
    align-content: space-between !important;
  }

  .align-content-sm-around {
    align-content: space-around !important;
  }

  .align-content-sm-stretch {
    align-content: stretch !important;
  }

  .align-self-sm-auto {
    align-self: auto !important;
  }

  .align-self-sm-start {
    align-self: flex-start !important;
  }

  .align-self-sm-end {
    align-self: flex-end !important;
  }

  .align-self-sm-center {
    align-self: center !important;
  }

  .align-self-sm-baseline {
    align-self: baseline !important;
  }

  .align-self-sm-stretch {
    align-self: stretch !important;
  }
}

@media (min-width: 768px) {
  .flex-md-row {
    flex-direction: row !important;
  }

  .flex-md-column {
    flex-direction: column !important;
  }

  .flex-md-row-reverse {
    flex-direction: row-reverse !important;
  }

  .flex-md-column-reverse {
    flex-direction: column-reverse !important;
  }

  .flex-md-wrap {
    flex-wrap: wrap !important;
  }

  .flex-md-nowrap {
    flex-wrap: nowrap !important;
  }

  .flex-md-wrap-reverse {
    flex-wrap: wrap-reverse !important;
  }

  .flex-md-fill {
    flex: 1 1 auto !important;
  }

  .flex-md-grow-0 {
    flex-grow: 0 !important;
  }

  .flex-md-grow-1 {
    flex-grow: 1 !important;
  }

  .flex-md-shrink-0 {
    flex-shrink: 0 !important;
  }

  .flex-md-shrink-1 {
    flex-shrink: 1 !important;
  }

  .justify-content-md-start {
    justify-content: flex-start !important;
  }

  .justify-content-md-end {
    justify-content: flex-end !important;
  }

  .justify-content-md-center {
    justify-content: center !important;
  }

  .justify-content-md-between {
    justify-content: space-between !important;
  }

  .justify-content-md-around {
    justify-content: space-around !important;
  }

  .align-items-md-start {
    align-items: flex-start !important;
  }

  .align-items-md-end {
    align-items: flex-end !important;
  }

  .align-items-md-center {
    align-items: center !important;
  }

  .align-items-md-baseline {
    align-items: baseline !important;
  }

  .align-items-md-stretch {
    align-items: stretch !important;
  }

  .align-content-md-start {
    align-content: flex-start !important;
  }

  .align-content-md-end {
    align-content: flex-end !important;
  }

  .align-content-md-center {
    align-content: center !important;
  }

  .align-content-md-between {
    align-content: space-between !important;
  }

  .align-content-md-around {
    align-content: space-around !important;
  }

  .align-content-md-stretch {
    align-content: stretch !important;
  }

  .align-self-md-auto {
    align-self: auto !important;
  }

  .align-self-md-start {
    align-self: flex-start !important;
  }

  .align-self-md-end {
    align-self: flex-end !important;
  }

  .align-self-md-center {
    align-self: center !important;
  }

  .align-self-md-baseline {
    align-self: baseline !important;
  }

  .align-self-md-stretch {
    align-self: stretch !important;
  }
}

@media (min-width: 992px) {
  .flex-lg-row {
    flex-direction: row !important;
  }

  .flex-lg-column {
    flex-direction: column !important;
  }

  .flex-lg-row-reverse {
    flex-direction: row-reverse !important;
  }

  .flex-lg-column-reverse {
    flex-direction: column-reverse !important;
  }

  .flex-lg-wrap {
    flex-wrap: wrap !important;
  }

  .flex-lg-nowrap {
    flex-wrap: nowrap !important;
  }

  .flex-lg-wrap-reverse {
    flex-wrap: wrap-reverse !important;
  }

  .flex-lg-fill {
    flex: 1 1 auto !important;
  }

  .flex-lg-grow-0 {
    flex-grow: 0 !important;
  }

  .flex-lg-grow-1 {
    flex-grow: 1 !important;
  }

  .flex-lg-shrink-0 {
    flex-shrink: 0 !important;
  }

  .flex-lg-shrink-1 {
    flex-shrink: 1 !important;
  }

  .justify-content-lg-start {
    justify-content: flex-start !important;
  }

  .justify-content-lg-end {
    justify-content: flex-end !important;
  }

  .justify-content-lg-center {
    justify-content: center !important;
  }

  .justify-content-lg-between {
    justify-content: space-between !important;
  }

  .justify-content-lg-around {
    justify-content: space-around !important;
  }

  .align-items-lg-start {
    align-items: flex-start !important;
  }

  .align-items-lg-end {
    align-items: flex-end !important;
  }

  .align-items-lg-center {
    align-items: center !important;
  }

  .align-items-lg-baseline {
    align-items: baseline !important;
  }

  .align-items-lg-stretch {
    align-items: stretch !important;
  }

  .align-content-lg-start {
    align-content: flex-start !important;
  }

  .align-content-lg-end {
    align-content: flex-end !important;
  }

  .align-content-lg-center {
    align-content: center !important;
  }

  .align-content-lg-between {
    align-content: space-between !important;
  }

  .align-content-lg-around {
    align-content: space-around !important;
  }

  .align-content-lg-stretch {
    align-content: stretch !important;
  }

  .align-self-lg-auto {
    align-self: auto !important;
  }

  .align-self-lg-start {
    align-self: flex-start !important;
  }

  .align-self-lg-end {
    align-self: flex-end !important;
  }

  .align-self-lg-center {
    align-self: center !important;
  }

  .align-self-lg-baseline {
    align-self: baseline !important;
  }

  .align-self-lg-stretch {
    align-self: stretch !important;
  }
}

@media (min-width: 1200px) {
  .flex-xl-row {
    flex-direction: row !important;
  }

  .flex-xl-column {
    flex-direction: column !important;
  }

  .flex-xl-row-reverse {
    flex-direction: row-reverse !important;
  }

  .flex-xl-column-reverse {
    flex-direction: column-reverse !important;
  }

  .flex-xl-wrap {
    flex-wrap: wrap !important;
  }

  .flex-xl-nowrap {
    flex-wrap: nowrap !important;
  }

  .flex-xl-wrap-reverse {
    flex-wrap: wrap-reverse !important;
  }

  .flex-xl-fill {
    flex: 1 1 auto !important;
  }

  .flex-xl-grow-0 {
    flex-grow: 0 !important;
  }

  .flex-xl-grow-1 {
    flex-grow: 1 !important;
  }

  .flex-xl-shrink-0 {
    flex-shrink: 0 !important;
  }

  .flex-xl-shrink-1 {
    flex-shrink: 1 !important;
  }

  .justify-content-xl-start {
    justify-content: flex-start !important;
  }

  .justify-content-xl-end {
    justify-content: flex-end !important;
  }

  .justify-content-xl-center {
    justify-content: center !important;
  }

  .justify-content-xl-between {
    justify-content: space-between !important;
  }

  .justify-content-xl-around {
    justify-content: space-around !important;
  }

  .align-items-xl-start {
    align-items: flex-start !important;
  }

  .align-items-xl-end {
    align-items: flex-end !important;
  }

  .align-items-xl-center {
    align-items: center !important;
  }

  .align-items-xl-baseline {
    align-items: baseline !important;
  }

  .align-items-xl-stretch {
    align-items: stretch !important;
  }

  .align-content-xl-start {
    align-content: flex-start !important;
  }

  .align-content-xl-end {
    align-content: flex-end !important;
  }

  .align-content-xl-center {
    align-content: center !important;
  }

  .align-content-xl-between {
    align-content: space-between !important;
  }

  .align-content-xl-around {
    align-content: space-around !important;
  }

  .align-content-xl-stretch {
    align-content: stretch !important;
  }

  .align-self-xl-auto {
    align-self: auto !important;
  }

  .align-self-xl-start {
    align-self: flex-start !important;
  }

  .align-self-xl-end {
    align-self: flex-end !important;
  }

  .align-self-xl-center {
    align-self: center !important;
  }

  .align-self-xl-baseline {
    align-self: baseline !important;
  }

  .align-self-xl-stretch {
    align-self: stretch !important;
  }
}

.float-left {
  float: left !important;
}

.float-right {
  float: right !important;
}

.float-none {
  float: none !important;
}

@media (min-width: 576px) {
  .float-sm-left {
    float: left !important;
  }

  .float-sm-right {
    float: right !important;
  }

  .float-sm-none {
    float: none !important;
  }
}

@media (min-width: 768px) {
  .float-md-left {
    float: left !important;
  }

  .float-md-right {
    float: right !important;
  }

  .float-md-none {
    float: none !important;
  }
}

@media (min-width: 992px) {
  .float-lg-left {
    float: left !important;
  }

  .float-lg-right {
    float: right !important;
  }

  .float-lg-none {
    float: none !important;
  }
}

@media (min-width: 1200px) {
  .float-xl-left {
    float: left !important;
  }

  .float-xl-right {
    float: right !important;
  }

  .float-xl-none {
    float: none !important;
  }
}

.position-static {
  position: static !important;
}

.position-relative {
  position: relative !important;
}

.position-absolute {
  position: absolute !important;
}

.position-fixed {
  position: fixed !important;
}

.position-sticky {
  position: sticky !important;
}

.fixed-top {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030;
}

.fixed-bottom {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1030;
}

@supports (position: sticky) {
  .sticky-top {
    position: sticky;
    top: 0;
    z-index: 1020;
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sr-only-focusable:active,
.sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

.shadow-sm {
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
}

.shadow {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

.shadow-lg {
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
}

.shadow-none {
  box-shadow: none !important;
}

.w-25 {
  width: 25% !important;
}

.w-50 {
  width: 50% !important;
}

.w-75 {
  width: 75% !important;
}

.w-100 {
  width: 100% !important;
}

.w-auto {
  width: auto !important;
}

.h-25 {
  height: 25% !important;
}

.h-50 {
  height: 50% !important;
}

.h-75 {
  height: 75% !important;
}

.h-100 {
  height: 100% !important;
}

.h-auto {
  height: auto !important;
}

.mw-100 {
  max-width: 100% !important;
}

.mh-100 {
  max-height: 100% !important;
}

.m-0 {
  margin: 0 !important;
}

.mt-0,
.my-0 {
  margin-top: 0 !important;
}

.mr-0,
.mx-0 {
  margin-right: 0 !important;
}

.mb-0,
.my-0 {
  margin-bottom: 0 !important;
}

.ml-0,
.mx-0 {
  margin-left: 0 !important;
}

.m-1 {
  margin: 0.25rem !important;
}

.mt-1,
.my-1 {
  margin-top: 0.25rem !important;
}

.mr-1,
.mx-1 {
  margin-right: 0.25rem !important;
}

.mb-1,
.my-1 {
  margin-bottom: 0.25rem !important;
}

.ml-1,
.mx-1 {
  margin-left: 0.25rem !important;
}

.m-2 {
  margin: 0.5rem !important;
}

.mt-2,
.my-2 {
  margin-top: 0.5rem !important;
}

.mr-2,
.mx-2 {
  margin-right: 0.5rem !important;
}

.mb-2,
.my-2 {
  margin-bottom: 0.5rem !important;
}

.ml-2,
.mx-2 {
  margin-left: 0.5rem !important;
}

.m-3 {
  margin: 1rem !important;
}

.mt-3,
.my-3 {
  margin-top: 1rem !important;
}

.mr-3,
.mx-3 {
  margin-right: 1rem !important;
}

.mb-3,
.my-3 {
  margin-bottom: 1rem !important;
}

.ml-3,
.mx-3 {
  margin-left: 1rem !important;
}

.m-4 {
  margin: 1.5rem !important;
}

.mt-4,
.my-4 {
  margin-top: 1.5rem !important;
}

.mr-4,
.mx-4 {
  margin-right: 1.5rem !important;
}

.mb-4,
.my-4 {
  margin-bottom: 1.5rem !important;
}

.ml-4,
.mx-4 {
  margin-left: 1.5rem !important;
}

.m-5 {
  margin: 3rem !important;
}

.mt-5,
.my-5 {
  margin-top: 3rem !important;
}

.mr-5,
.mx-5 {
  margin-right: 3rem !important;
}

.mb-5,
.my-5 {
  margin-bottom: 3rem !important;
}

.ml-5,
.mx-5 {
  margin-left: 3rem !important;
}

.p-0 {
  padding: 0 !important;
}

.pt-0,
.py-0 {
  padding-top: 0 !important;
}

.pr-0,
.px-0 {
  padding-right: 0 !important;
}

.pb-0,
.py-0 {
  padding-bottom: 0 !important;
}

.pl-0,
.px-0 {
  padding-left: 0 !important;
}

.p-1 {
  padding: 0.25rem !important;
}

.pt-1,
.py-1 {
  padding-top: 0.25rem !important;
}

.pr-1,
.px-1 {
  padding-right: 0.25rem !important;
}

.pb-1,
.py-1 {
  padding-bottom: 0.25rem !important;
}

.pl-1,
.px-1 {
  padding-left: 0.25rem !important;
}

.p-2 {
  padding: 0.5rem !important;
}

.pt-2,
.py-2 {
  padding-top: 0.5rem !important;
}

.pr-2,
.px-2 {
  padding-right: 0.5rem !important;
}

.pb-2,
.py-2 {
  padding-bottom: 0.5rem !important;
}

.pl-2,
.px-2 {
  padding-left: 0.5rem !important;
}

.p-3 {
  padding: 1rem !important;
}

.pt-3,
.py-3 {
  padding-top: 1rem !important;
}

.pr-3,
.px-3 {
  padding-right: 1rem !important;
}

.pb-3,
.py-3 {
  padding-bottom: 1rem !important;
}

.pl-3,
.px-3 {
  padding-left: 1rem !important;
}

.p-4 {
  padding: 1.5rem !important;
}

.pt-4,
.py-4 {
  padding-top: 1.5rem !important;
}

.pr-4,
.px-4 {
  padding-right: 1.5rem !important;
}

.pb-4,
.py-4 {
  padding-bottom: 1.5rem !important;
}

.pl-4,
.px-4 {
  padding-left: 1.5rem !important;
}

.p-5 {
  padding: 3rem !important;
}

.pt-5,
.py-5 {
  padding-top: 3rem !important;
}

.pr-5,
.px-5 {
  padding-right: 3rem !important;
}

.pb-5,
.py-5 {
  padding-bottom: 3rem !important;
}

.pl-5,
.px-5 {
  padding-left: 3rem !important;
}

.m-auto {
  margin: auto !important;
}

.mt-auto,
.my-auto {
  margin-top: auto !important;
}

.mr-auto,
.mx-auto {
  margin-right: auto !important;
}

.mb-auto,
.my-auto {
  margin-bottom: auto !important;
}

.ml-auto,
.mx-auto {
  margin-left: auto !important;
}

@media (min-width: 576px) {
  .m-sm-0 {
    margin: 0 !important;
  }

  .mt-sm-0,
  .my-sm-0 {
    margin-top: 0 !important;
  }

  .mr-sm-0,
  .mx-sm-0 {
    margin-right: 0 !important;
  }

  .mb-sm-0,
  .my-sm-0 {
    margin-bottom: 0 !important;
  }

  .ml-sm-0,
  .mx-sm-0 {
    margin-left: 0 !important;
  }

  .m-sm-1 {
    margin: 0.25rem !important;
  }

  .mt-sm-1,
  .my-sm-1 {
    margin-top: 0.25rem !important;
  }

  .mr-sm-1,
  .mx-sm-1 {
    margin-right: 0.25rem !important;
  }

  .mb-sm-1,
  .my-sm-1 {
    margin-bottom: 0.25rem !important;
  }

  .ml-sm-1,
  .mx-sm-1 {
    margin-left: 0.25rem !important;
  }

  .m-sm-2 {
    margin: 0.5rem !important;
  }

  .mt-sm-2,
  .my-sm-2 {
    margin-top: 0.5rem !important;
  }

  .mr-sm-2,
  .mx-sm-2 {
    margin-right: 0.5rem !important;
  }

  .mb-sm-2,
  .my-sm-2 {
    margin-bottom: 0.5rem !important;
  }

  .ml-sm-2,
  .mx-sm-2 {
    margin-left: 0.5rem !important;
  }

  .m-sm-3 {
    margin: 1rem !important;
  }

  .mt-sm-3,
  .my-sm-3 {
    margin-top: 1rem !important;
  }

  .mr-sm-3,
  .mx-sm-3 {
    margin-right: 1rem !important;
  }

  .mb-sm-3,
  .my-sm-3 {
    margin-bottom: 1rem !important;
  }

  .ml-sm-3,
  .mx-sm-3 {
    margin-left: 1rem !important;
  }

  .m-sm-4 {
    margin: 1.5rem !important;
  }

  .mt-sm-4,
  .my-sm-4 {
    margin-top: 1.5rem !important;
  }

  .mr-sm-4,
  .mx-sm-4 {
    margin-right: 1.5rem !important;
  }

  .mb-sm-4,
  .my-sm-4 {
    margin-bottom: 1.5rem !important;
  }

  .ml-sm-4,
  .mx-sm-4 {
    margin-left: 1.5rem !important;
  }

  .m-sm-5 {
    margin: 3rem !important;
  }

  .mt-sm-5,
  .my-sm-5 {
    margin-top: 3rem !important;
  }

  .mr-sm-5,
  .mx-sm-5 {
    margin-right: 3rem !important;
  }

  .mb-sm-5,
  .my-sm-5 {
    margin-bottom: 3rem !important;
  }

  .ml-sm-5,
  .mx-sm-5 {
    margin-left: 3rem !important;
  }

  .p-sm-0 {
    padding: 0 !important;
  }

  .pt-sm-0,
  .py-sm-0 {
    padding-top: 0 !important;
  }

  .pr-sm-0,
  .px-sm-0 {
    padding-right: 0 !important;
  }

  .pb-sm-0,
  .py-sm-0 {
    padding-bottom: 0 !important;
  }

  .pl-sm-0,
  .px-sm-0 {
    padding-left: 0 !important;
  }

  .p-sm-1 {
    padding: 0.25rem !important;
  }

  .pt-sm-1,
  .py-sm-1 {
    padding-top: 0.25rem !important;
  }

  .pr-sm-1,
  .px-sm-1 {
    padding-right: 0.25rem !important;
  }

  .pb-sm-1,
  .py-sm-1 {
    padding-bottom: 0.25rem !important;
  }

  .pl-sm-1,
  .px-sm-1 {
    padding-left: 0.25rem !important;
  }

  .p-sm-2 {
    padding: 0.5rem !important;
  }

  .pt-sm-2,
  .py-sm-2 {
    padding-top: 0.5rem !important;
  }

  .pr-sm-2,
  .px-sm-2 {
    padding-right: 0.5rem !important;
  }

  .pb-sm-2,
  .py-sm-2 {
    padding-bottom: 0.5rem !important;
  }

  .pl-sm-2,
  .px-sm-2 {
    padding-left: 0.5rem !important;
  }

  .p-sm-3 {
    padding: 1rem !important;
  }

  .pt-sm-3,
  .py-sm-3 {
    padding-top: 1rem !important;
  }

  .pr-sm-3,
  .px-sm-3 {
    padding-right: 1rem !important;
  }

  .pb-sm-3,
  .py-sm-3 {
    padding-bottom: 1rem !important;
  }

  .pl-sm-3,
  .px-sm-3 {
    padding-left: 1rem !important;
  }

  .p-sm-4 {
    padding: 1.5rem !important;
  }

  .pt-sm-4,
  .py-sm-4 {
    padding-top: 1.5rem !important;
  }

  .pr-sm-4,
  .px-sm-4 {
    padding-right: 1.5rem !important;
  }

  .pb-sm-4,
  .py-sm-4 {
    padding-bottom: 1.5rem !important;
  }

  .pl-sm-4,
  .px-sm-4 {
    padding-left: 1.5rem !important;
  }

  .p-sm-5 {
    padding: 3rem !important;
  }

  .pt-sm-5,
  .py-sm-5 {
    padding-top: 3rem !important;
  }

  .pr-sm-5,
  .px-sm-5 {
    padding-right: 3rem !important;
  }

  .pb-sm-5,
  .py-sm-5 {
    padding-bottom: 3rem !important;
  }

  .pl-sm-5,
  .px-sm-5 {
    padding-left: 3rem !important;
  }

  .m-sm-auto {
    margin: auto !important;
  }

  .mt-sm-auto,
  .my-sm-auto {
    margin-top: auto !important;
  }

  .mr-sm-auto,
  .mx-sm-auto {
    margin-right: auto !important;
  }

  .mb-sm-auto,
  .my-sm-auto {
    margin-bottom: auto !important;
  }

  .ml-sm-auto,
  .mx-sm-auto {
    margin-left: auto !important;
  }
}

@media (min-width: 768px) {
  .m-md-0 {
    margin: 0 !important;
  }

  .mt-md-0,
  .my-md-0 {
    margin-top: 0 !important;
  }

  .mr-md-0,
  .mx-md-0 {
    margin-right: 0 !important;
  }

  .mb-md-0,
  .my-md-0 {
    margin-bottom: 0 !important;
  }

  .ml-md-0,
  .mx-md-0 {
    margin-left: 0 !important;
  }

  .m-md-1 {
    margin: 0.25rem !important;
  }

  .mt-md-1,
  .my-md-1 {
    margin-top: 0.25rem !important;
  }

  .mr-md-1,
  .mx-md-1 {
    margin-right: 0.25rem !important;
  }

  .mb-md-1,
  .my-md-1 {
    margin-bottom: 0.25rem !important;
  }

  .ml-md-1,
  .mx-md-1 {
    margin-left: 0.25rem !important;
  }

  .m-md-2 {
    margin: 0.5rem !important;
  }

  .mt-md-2,
  .my-md-2 {
    margin-top: 0.5rem !important;
  }

  .mr-md-2,
  .mx-md-2 {
    margin-right: 0.5rem !important;
  }

  .mb-md-2,
  .my-md-2 {
    margin-bottom: 0.5rem !important;
  }

  .ml-md-2,
  .mx-md-2 {
    margin-left: 0.5rem !important;
  }

  .m-md-3 {
    margin: 1rem !important;
  }

  .mt-md-3,
  .my-md-3 {
    margin-top: 1rem !important;
  }

  .mr-md-3,
  .mx-md-3 {
    margin-right: 1rem !important;
  }

  .mb-md-3,
  .my-md-3 {
    margin-bottom: 1rem !important;
  }

  .ml-md-3,
  .mx-md-3 {
    margin-left: 1rem !important;
  }

  .m-md-4 {
    margin: 1.5rem !important;
  }

  .mt-md-4,
  .my-md-4 {
    margin-top: 1.5rem !important;
  }

  .mr-md-4,
  .mx-md-4 {
    margin-right: 1.5rem !important;
  }

  .mb-md-4,
  .my-md-4 {
    margin-bottom: 1.5rem !important;
  }

  .ml-md-4,
  .mx-md-4 {
    margin-left: 1.5rem !important;
  }

  .m-md-5 {
    margin: 3rem !important;
  }

  .mt-md-5,
  .my-md-5 {
    margin-top: 3rem !important;
  }

  .mr-md-5,
  .mx-md-5 {
    margin-right: 3rem !important;
  }

  .mb-md-5,
  .my-md-5 {
    margin-bottom: 3rem !important;
  }

  .ml-md-5,
  .mx-md-5 {
    margin-left: 3rem !important;
  }

  .p-md-0 {
    padding: 0 !important;
  }

  .pt-md-0,
  .py-md-0 {
    padding-top: 0 !important;
  }

  .pr-md-0,
  .px-md-0 {
    padding-right: 0 !important;
  }

  .pb-md-0,
  .py-md-0 {
    padding-bottom: 0 !important;
  }

  .pl-md-0,
  .px-md-0 {
    padding-left: 0 !important;
  }

  .p-md-1 {
    padding: 0.25rem !important;
  }

  .pt-md-1,
  .py-md-1 {
    padding-top: 0.25rem !important;
  }

  .pr-md-1,
  .px-md-1 {
    padding-right: 0.25rem !important;
  }

  .pb-md-1,
  .py-md-1 {
    padding-bottom: 0.25rem !important;
  }

  .pl-md-1,
  .px-md-1 {
    padding-left: 0.25rem !important;
  }

  .p-md-2 {
    padding: 0.5rem !important;
  }

  .pt-md-2,
  .py-md-2 {
    padding-top: 0.5rem !important;
  }

  .pr-md-2,
  .px-md-2 {
    padding-right: 0.5rem !important;
  }

  .pb-md-2,
  .py-md-2 {
    padding-bottom: 0.5rem !important;
  }

  .pl-md-2,
  .px-md-2 {
    padding-left: 0.5rem !important;
  }

  .p-md-3 {
    padding: 1rem !important;
  }

  .pt-md-3,
  .py-md-3 {
    padding-top: 1rem !important;
  }

  .pr-md-3,
  .px-md-3 {
    padding-right: 1rem !important;
  }

  .pb-md-3,
  .py-md-3 {
    padding-bottom: 1rem !important;
  }

  .pl-md-3,
  .px-md-3 {
    padding-left: 1rem !important;
  }

  .p-md-4 {
    padding: 1.5rem !important;
  }

  .pt-md-4,
  .py-md-4 {
    padding-top: 1.5rem !important;
  }

  .pr-md-4,
  .px-md-4 {
    padding-right: 1.5rem !important;
  }

  .pb-md-4,
  .py-md-4 {
    padding-bottom: 1.5rem !important;
  }

  .pl-md-4,
  .px-md-4 {
    padding-left: 1.5rem !important;
  }

  .p-md-5 {
    padding: 3rem !important;
  }

  .pt-md-5,
  .py-md-5 {
    padding-top: 3rem !important;
  }

  .pr-md-5,
  .px-md-5 {
    padding-right: 3rem !important;
  }

  .pb-md-5,
  .py-md-5 {
    padding-bottom: 3rem !important;
  }

  .pl-md-5,
  .px-md-5 {
    padding-left: 3rem !important;
  }

  .m-md-auto {
    margin: auto !important;
  }

  .mt-md-auto,
  .my-md-auto {
    margin-top: auto !important;
  }

  .mr-md-auto,
  .mx-md-auto {
    margin-right: auto !important;
  }

  .mb-md-auto,
  .my-md-auto {
    margin-bottom: auto !important;
  }

  .ml-md-auto,
  .mx-md-auto {
    margin-left: auto !important;
  }
}

@media (min-width: 992px) {
  .m-lg-0 {
    margin: 0 !important;
  }

  .mt-lg-0,
  .my-lg-0 {
    margin-top: 0 !important;
  }

  .mr-lg-0,
  .mx-lg-0 {
    margin-right: 0 !important;
  }

  .mb-lg-0,
  .my-lg-0 {
    margin-bottom: 0 !important;
  }

  .ml-lg-0,
  .mx-lg-0 {
    margin-left: 0 !important;
  }

  .m-lg-1 {
    margin: 0.25rem !important;
  }

  .mt-lg-1,
  .my-lg-1 {
    margin-top: 0.25rem !important;
  }

  .mr-lg-1,
  .mx-lg-1 {
    margin-right: 0.25rem !important;
  }

  .mb-lg-1,
  .my-lg-1 {
    margin-bottom: 0.25rem !important;
  }

  .ml-lg-1,
  .mx-lg-1 {
    margin-left: 0.25rem !important;
  }

  .m-lg-2 {
    margin: 0.5rem !important;
  }

  .mt-lg-2,
  .my-lg-2 {
    margin-top: 0.5rem !important;
  }

  .mr-lg-2,
  .mx-lg-2 {
    margin-right: 0.5rem !important;
  }

  .mb-lg-2,
  .my-lg-2 {
    margin-bottom: 0.5rem !important;
  }

  .ml-lg-2,
  .mx-lg-2 {
    margin-left: 0.5rem !important;
  }

  .m-lg-3 {
    margin: 1rem !important;
  }

  .mt-lg-3,
  .my-lg-3 {
    margin-top: 1rem !important;
  }

  .mr-lg-3,
  .mx-lg-3 {
    margin-right: 1rem !important;
  }

  .mb-lg-3,
  .my-lg-3 {
    margin-bottom: 1rem !important;
  }

  .ml-lg-3,
  .mx-lg-3 {
    margin-left: 1rem !important;
  }

  .m-lg-4 {
    margin: 1.5rem !important;
  }

  .mt-lg-4,
  .my-lg-4 {
    margin-top: 1.5rem !important;
  }

  .mr-lg-4,
  .mx-lg-4 {
    margin-right: 1.5rem !important;
  }

  .mb-lg-4,
  .my-lg-4 {
    margin-bottom: 1.5rem !important;
  }

  .ml-lg-4,
  .mx-lg-4 {
    margin-left: 1.5rem !important;
  }

  .m-lg-5 {
    margin: 3rem !important;
  }

  .mt-lg-5,
  .my-lg-5 {
    margin-top: 3rem !important;
  }

  .mr-lg-5,
  .mx-lg-5 {
    margin-right: 3rem !important;
  }

  .mb-lg-5,
  .my-lg-5 {
    margin-bottom: 3rem !important;
  }

  .ml-lg-5,
  .mx-lg-5 {
    margin-left: 3rem !important;
  }

  .p-lg-0 {
    padding: 0 !important;
  }

  .pt-lg-0,
  .py-lg-0 {
    padding-top: 0 !important;
  }

  .pr-lg-0,
  .px-lg-0 {
    padding-right: 0 !important;
  }

  .pb-lg-0,
  .py-lg-0 {
    padding-bottom: 0 !important;
  }

  .pl-lg-0,
  .px-lg-0 {
    padding-left: 0 !important;
  }

  .p-lg-1 {
    padding: 0.25rem !important;
  }

  .pt-lg-1,
  .py-lg-1 {
    padding-top: 0.25rem !important;
  }

  .pr-lg-1,
  .px-lg-1 {
    padding-right: 0.25rem !important;
  }

  .pb-lg-1,
  .py-lg-1 {
    padding-bottom: 0.25rem !important;
  }

  .pl-lg-1,
  .px-lg-1 {
    padding-left: 0.25rem !important;
  }

  .p-lg-2 {
    padding: 0.5rem !important;
  }

  .pt-lg-2,
  .py-lg-2 {
    padding-top: 0.5rem !important;
  }

  .pr-lg-2,
  .px-lg-2 {
    padding-right: 0.5rem !important;
  }

  .pb-lg-2,
  .py-lg-2 {
    padding-bottom: 0.5rem !important;
  }

  .pl-lg-2,
  .px-lg-2 {
    padding-left: 0.5rem !important;
  }

  .p-lg-3 {
    padding: 1rem !important;
  }

  .pt-lg-3,
  .py-lg-3 {
    padding-top: 1rem !important;
  }

  .pr-lg-3,
  .px-lg-3 {
    padding-right: 1rem !important;
  }

  .pb-lg-3,
  .py-lg-3 {
    padding-bottom: 1rem !important;
  }

  .pl-lg-3,
  .px-lg-3 {
    padding-left: 1rem !important;
  }

  .p-lg-4 {
    padding: 1.5rem !important;
  }

  .pt-lg-4,
  .py-lg-4 {
    padding-top: 1.5rem !important;
  }

  .pr-lg-4,
  .px-lg-4 {
    padding-right: 1.5rem !important;
  }

  .pb-lg-4,
  .py-lg-4 {
    padding-bottom: 1.5rem !important;
  }

  .pl-lg-4,
  .px-lg-4 {
    padding-left: 1.5rem !important;
  }

  .p-lg-5 {
    padding: 3rem !important;
  }

  .pt-lg-5,
  .py-lg-5 {
    padding-top: 3rem !important;
  }

  .pr-lg-5,
  .px-lg-5 {
    padding-right: 3rem !important;
  }

  .pb-lg-5,
  .py-lg-5 {
    padding-bottom: 3rem !important;
  }

  .pl-lg-5,
  .px-lg-5 {
    padding-left: 3rem !important;
  }

  .m-lg-auto {
    margin: auto !important;
  }

  .mt-lg-auto,
  .my-lg-auto {
    margin-top: auto !important;
  }

  .mr-lg-auto,
  .mx-lg-auto {
    margin-right: auto !important;
  }

  .mb-lg-auto,
  .my-lg-auto {
    margin-bottom: auto !important;
  }

  .ml-lg-auto,
  .mx-lg-auto {
    margin-left: auto !important;
  }
}

@media (min-width: 1200px) {
  .m-xl-0 {
    margin: 0 !important;
  }

  .mt-xl-0,
  .my-xl-0 {
    margin-top: 0 !important;
  }

  .mr-xl-0,
  .mx-xl-0 {
    margin-right: 0 !important;
  }

  .mb-xl-0,
  .my-xl-0 {
    margin-bottom: 0 !important;
  }

  .ml-xl-0,
  .mx-xl-0 {
    margin-left: 0 !important;
  }

  .m-xl-1 {
    margin: 0.25rem !important;
  }

  .mt-xl-1,
  .my-xl-1 {
    margin-top: 0.25rem !important;
  }

  .mr-xl-1,
  .mx-xl-1 {
    margin-right: 0.25rem !important;
  }

  .mb-xl-1,
  .my-xl-1 {
    margin-bottom: 0.25rem !important;
  }

  .ml-xl-1,
  .mx-xl-1 {
    margin-left: 0.25rem !important;
  }

  .m-xl-2 {
    margin: 0.5rem !important;
  }

  .mt-xl-2,
  .my-xl-2 {
    margin-top: 0.5rem !important;
  }

  .mr-xl-2,
  .mx-xl-2 {
    margin-right: 0.5rem !important;
  }

  .mb-xl-2,
  .my-xl-2 {
    margin-bottom: 0.5rem !important;
  }

  .ml-xl-2,
  .mx-xl-2 {
    margin-left: 0.5rem !important;
  }

  .m-xl-3 {
    margin: 1rem !important;
  }

  .mt-xl-3,
  .my-xl-3 {
    margin-top: 1rem !important;
  }

  .mr-xl-3,
  .mx-xl-3 {
    margin-right: 1rem !important;
  }

  .mb-xl-3,
  .my-xl-3 {
    margin-bottom: 1rem !important;
  }

  .ml-xl-3,
  .mx-xl-3 {
    margin-left: 1rem !important;
  }

  .m-xl-4 {
    margin: 1.5rem !important;
  }

  .mt-xl-4,
  .my-xl-4 {
    margin-top: 1.5rem !important;
  }

  .mr-xl-4,
  .mx-xl-4 {
    margin-right: 1.5rem !important;
  }

  .mb-xl-4,
  .my-xl-4 {
    margin-bottom: 1.5rem !important;
  }

  .ml-xl-4,
  .mx-xl-4 {
    margin-left: 1.5rem !important;
  }

  .m-xl-5 {
    margin: 3rem !important;
  }

  .mt-xl-5,
  .my-xl-5 {
    margin-top: 3rem !important;
  }

  .mr-xl-5,
  .mx-xl-5 {
    margin-right: 3rem !important;
  }

  .mb-xl-5,
  .my-xl-5 {
    margin-bottom: 3rem !important;
  }

  .ml-xl-5,
  .mx-xl-5 {
    margin-left: 3rem !important;
  }

  .p-xl-0 {
    padding: 0 !important;
  }

  .pt-xl-0,
  .py-xl-0 {
    padding-top: 0 !important;
  }

  .pr-xl-0,
  .px-xl-0 {
    padding-right: 0 !important;
  }

  .pb-xl-0,
  .py-xl-0 {
    padding-bottom: 0 !important;
  }

  .pl-xl-0,
  .px-xl-0 {
    padding-left: 0 !important;
  }

  .p-xl-1 {
    padding: 0.25rem !important;
  }

  .pt-xl-1,
  .py-xl-1 {
    padding-top: 0.25rem !important;
  }

  .pr-xl-1,
  .px-xl-1 {
    padding-right: 0.25rem !important;
  }

  .pb-xl-1,
  .py-xl-1 {
    padding-bottom: 0.25rem !important;
  }

  .pl-xl-1,
  .px-xl-1 {
    padding-left: 0.25rem !important;
  }

  .p-xl-2 {
    padding: 0.5rem !important;
  }

  .pt-xl-2,
  .py-xl-2 {
    padding-top: 0.5rem !important;
  }

  .pr-xl-2,
  .px-xl-2 {
    padding-right: 0.5rem !important;
  }

  .pb-xl-2,
  .py-xl-2 {
    padding-bottom: 0.5rem !important;
  }

  .pl-xl-2,
  .px-xl-2 {
    padding-left: 0.5rem !important;
  }

  .p-xl-3 {
    padding: 1rem !important;
  }

  .pt-xl-3,
  .py-xl-3 {
    padding-top: 1rem !important;
  }

  .pr-xl-3,
  .px-xl-3 {
    padding-right: 1rem !important;
  }

  .pb-xl-3,
  .py-xl-3 {
    padding-bottom: 1rem !important;
  }

  .pl-xl-3,
  .px-xl-3 {
    padding-left: 1rem !important;
  }

  .p-xl-4 {
    padding: 1.5rem !important;
  }

  .pt-xl-4,
  .py-xl-4 {
    padding-top: 1.5rem !important;
  }

  .pr-xl-4,
  .px-xl-4 {
    padding-right: 1.5rem !important;
  }

  .pb-xl-4,
  .py-xl-4 {
    padding-bottom: 1.5rem !important;
  }

  .pl-xl-4,
  .px-xl-4 {
    padding-left: 1.5rem !important;
  }

  .p-xl-5 {
    padding: 3rem !important;
  }

  .pt-xl-5,
  .py-xl-5 {
    padding-top: 3rem !important;
  }

  .pr-xl-5,
  .px-xl-5 {
    padding-right: 3rem !important;
  }

  .pb-xl-5,
  .py-xl-5 {
    padding-bottom: 3rem !important;
  }

  .pl-xl-5,
  .px-xl-5 {
    padding-left: 3rem !important;
  }

  .m-xl-auto {
    margin: auto !important;
  }

  .mt-xl-auto,
  .my-xl-auto {
    margin-top: auto !important;
  }

  .mr-xl-auto,
  .mx-xl-auto {
    margin-right: auto !important;
  }

  .mb-xl-auto,
  .my-xl-auto {
    margin-bottom: auto !important;
  }

  .ml-xl-auto,
  .mx-xl-auto {
    margin-left: auto !important;
  }
}

.text-monospace {
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.text-justify {
  text-align: justify !important;
}

.text-nowrap {
  white-space: nowrap !important;
}

.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-left {
  text-align: left !important;
}

.text-right {
  text-align: right !important;
}

.text-center {
  text-align: center !important;
}

@media (min-width: 576px) {
  .text-sm-left {
    text-align: left !important;
  }

  .text-sm-right {
    text-align: right !important;
  }

  .text-sm-center {
    text-align: center !important;
  }
}

@media (min-width: 768px) {
  .text-md-left {
    text-align: left !important;
  }

  .text-md-right {
    text-align: right !important;
  }

  .text-md-center {
    text-align: center !important;
  }
}

@media (min-width: 992px) {
  .text-lg-left {
    text-align: left !important;
  }

  .text-lg-right {
    text-align: right !important;
  }

  .text-lg-center {
    text-align: center !important;
  }
}

@media (min-width: 1200px) {
  .text-xl-left {
    text-align: left !important;
  }

  .text-xl-right {
    text-align: right !important;
  }

  .text-xl-center {
    text-align: center !important;
  }
}

.text-lowercase {
  text-transform: lowercase !important;
}

.text-uppercase {
  text-transform: uppercase !important;
}

.text-capitalize {
  text-transform: capitalize !important;
}

.font-weight-light {
  font-weight: 300 !important;
}

.font-weight-normal {
  font-weight: 400 !important;
}

.font-weight-bold {
  font-weight: 700 !important;
}

.font-italic {
  font-style: italic !important;
}

.text-white {
  color: #fff !important;
}

.text-primary {
  color: var(--primary) !important;
}

a.text-primary:hover,
a.text-primary:focus {
  color: var(--primary-active) !important;
}

.text-secondary {
  color: var(--secondary) !important;
}

a.text-secondary:hover,
a.text-secondary:focus {
  color: #575757 !important;
}

.text-success {
  color: #28a745 !important;
}

a.text-success:hover,
a.text-success:focus {
  color: #1e7e34 !important;
}

.text-info {
  color: #17a2b8 !important;
}

a.text-info:hover,
a.text-info:focus {
  color: #117a8b !important;
}

.text-warning {
  color: #ffc107 !important;
}

a.text-warning:hover,
a.text-warning:focus {
  color: #d39e00 !important;
}

.text-danger {
  color: #dc3545 !important;
}

a.text-danger:hover,
a.text-danger:focus {
  color: #bd2130 !important;
}

.text-light {
  color: #f8f9fa !important;
}

a.text-light:hover,
a.text-light:focus {
  color: #dae0e5 !important;
}

.text-dark {
  color: #343a40 !important;
}

a.text-dark:hover,
a.text-dark:focus {
  color: #1d2124 !important;
}

.text-body {
  color: #333 !important;
}

.text-muted {
  color: #6c757d !important;
}

.text-black-50 {
  color: rgba(0, 0, 0, 0.5) !important;
}

.text-white-50 {
  color: rgba(255, 255, 255, 0.5) !important;
}

.text-hide {
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}

.visible {
  visibility: visible !important;
}

.invisible {
  visibility: hidden !important;
}

@media print {

  *,
  *::before,
  *::after {
    text-shadow: none !important;
    box-shadow: none !important;
  }

  a:not(.btn) {
    text-decoration: underline;
  }

  abbr[title]::after {
    content: " (" attr(title) ")";
  }

  pre {
    white-space: pre-wrap !important;
  }

  pre,
  blockquote {
    border: 1px solid #adb5bd;
    page-break-inside: avoid;
  }

  thead {
    display: table-header-group;
  }

  tr,
  img {
    page-break-inside: avoid;
  }

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }

  h2,
  h3 {
    page-break-after: avoid;
  }

  @page {
    size: a3;
  }

  body {
    min-width: 992px !important;
  }

  .container {
    min-width: 992px !important;
  }

  /* .navbar { display: none } lives in components/NavBar.svelte */

  .badge {
    border: 1px solid #000;
  }

  .table {
    border-collapse: collapse !important;
  }

  .table td,
  .table th {
    background-color: #fff !important;
  }

  .table-bordered th,
  .table-bordered td {
    border: 1px solid #dee2e6 !important;
  }

  .table-dark {
    color: inherit;
  }

  .table-dark th,
  .table-dark td,
  .table-dark thead th,
  .table-dark tbody+tbody {
    border-color: #dee2e6;
  }

  .table .thead-dark th {
    color: inherit;
    border-color: #dee2e6;
  }
}

/*
 * Sidebar
 */
.sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
  /* Behind the navbar */
  padding: 0.5em 0 0;
  /* Height of navbar */
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.1);
  background-color: #2C2C2C;
}

@media (max-width: 767.98px) {
  .sidebar {
    top: 5rem;
  }
}

.sidebar-sticky {
  position: relative;
  top: 0;
  height: calc(100vh - 48px);
  padding-top: 0.5rem;
  overflow-x: hidden;
  overflow-y: auto;
  /* Scrollable contents if viewport is shorter than content. */
}

@supports (position: sticky) {
  .sidebar-sticky {
    position: sticky;
  }
}

.sidebar-heading {
  font-size: 0.75rem;
  text-transform: uppercase;
}

.sidebar-collapse-item input {
  background: #383838;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.sidebar-collapse-item .input-group-append,
.sidebar-collapse-item .input-group-text {
  background: #383838;
  border: none;
}

.sidebar-collapse-item .input-group-append svg,
.sidebar-collapse-item .input-group-text svg {
  color: #fff;
}

.sidebar-collapse-item__header {
  background-color: #2C2C2C;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
}

.sidebar-collapse-item__header .btn-link {
  width: 100%;
  text-align: left;
  padding-left: 1em;
  font-weight: bold;
  font-size: 18px;
}

.sidebar-collapse-item__header .btn-link:hover,
.sidebar-collapse-item__header .btn-link:focus {
  text-decoration: none;
  outline: none;
  box-shadow: none;
}

.sidebar-collapse-item__body {
  padding: 1em;
  color: #fff;
  background-color: #414141;
}

.sidebar-collapse-item__body ul {
  list-style: none;
  padding-left: 0;
}

.sidebar-collapse-item__body ul li {
  border-bottom: 1px solid #383838;
}

.sidebar-collapse-item__body ul li.sidebar-collapse-item__list__item {
  padding: 15px 0px;
}

.sidebar-collapse-item__body ul li a {
  color: #fff;
  text-decoration: none;
  width: 100%;
  display: inline-block;
  padding: 15px 0px;
}

.sidebar-collapse-item__body ul li a:hover {
  color: var(--primary);
}

.sidebar-collapse-item__body ul li .custom-control-label::before {
  background: none;
  border-radius: 0 !important;
}

/*
 * Navbar — see components/NavBar.svelte for the navbar's own styles
 */
a.dropdown-item {
  font-size: 0.8em;
}

.filter_dropdown {
  min-width: 250px;
  background: #383838;
  /* Repainted with the brand colour at .filter_dropdown below, so everything
     in here is text on --primary and has to follow --primary-text-color:
     white on the 2kai orange is ~2.2:1. */
  color: var(--primary-text-color);
}

.filter_dropdown__search {
  padding: 0.5em 0.5em;
}

.filter_dropdown_scrollable {
  max-height: 400px;
  overflow-y: auto;
  margin-bottom: 0.5em;
}

.filter_dropdown_scrollable .dropdown__checkbox {
  display: block;
  width: 100%;
  padding: 0.5em 1em;
  clear: both;
  font-weight: 400;
  text-align: inherit;
  white-space: nowrap;
  background-color: transparent;
  border: 0;
  border-bottom: 1px solid #2C2C2C;
  user-select: none;
}

.filter_dropdown_scrollable .dropdown__checkbox:hover {
  background: #454545;
}

.filter_dropdown_scrollable .dropdown__checkbox label {
  display: inline-block;
  flex: 1;
  padding-left: 0.8em;
}

.filter_dropdown_scrollable .dropdown__checkbox input {
  margin-top: 5px;
}

.filter_dropdown .dropdown-item {
  color: var(--primary-text-color);
}

.filter_dropdown .dropdown-item.dropdown__submit {
  padding: 0.5em 1em;
}

.filter_dropdown .dropdown-item:hover {
  background: #454545;
}

.filter_dropdown .dropdown-item:hover.dropdown__submit {
  background: inherit;
}

.filter_dropdown input {
  background: #383838;
  border: none;
  border-radius: 0;
  box-shadow: none;
  color: var(--primary-text-color);
}

.filter_dropdown .input-group-append,
.filter_dropdown .input-group-text {
  background: #383838;
  border: none;
}

.filter_dropdown .input-group-append svg,
.filter_dropdown .input-group-text svg {
  color: var(--primary-text-color);
}

/* ==========================================================================
   daterangepicker — the Zeitraum popup (MW-463)

   Its stylesheet is VENDORED: rollup.config.js copies
   node_modules/daterangepicker/daterangepicker.css into
   public/libs/daterangepicker/ on every build, so editing that file achieves
   nothing — the next build overwrites it. The widget's colours therefore have
   to be restated here, and styles.css is loaded AFTER the libs in
   public/index.html, which is what makes that possible at all.

   These rules used to state a light page outright — `background: #fff`,
   `color: black`, `background-color: white` on the calendar — so on a dark page
   the Zeitraum popup was a white card with orange highlights. They read the
   semantic tokens now, and deliberately NOT under a `[data-theme="dark"]`
   guard: every colour the widget needs already has a theme-aware token, so one
   tokenised rule covers both appearances and the two values cannot drift apart.
   It also fixes light mode, where two of the literals being replaced were below
   AA: #8c8c8c on white for the footer's date label measures 3.36:1 and the
   vendored #999 on white for the off-month days 2.85:1, against --text-muted's
   4.69:1 on white and 6.55:1 on the dark surface.

   The brand-orange selection stays, because it is the brand: `td.active`,
   `td.in-range`, `td.available:hover` and `.ranges li.active` carry the same
   fill as every other selected control in the app, with --primary-text-color
   over it. What changed is every surface and every text colour AROUND it.

   `!important` throughout — it is what a plain class selector needs to beat the
   vendored declarations.
   ========================================================================== */

.daterangepicker {
  background: var(--surface) !important;
  color: var(--text) !important;
  /* Vendored: `1px solid #ddd`. */
  border-color: var(--border-color) !important;
}

/* The caret that points back at the input is two stacked triangles: a #ccc
   outline with a #fff one drawn over it. Unstyled, that leaves a white notch
   hanging off the corner of the popup on a dark page. Both border edges are
   set because `drop-up` swaps which one draws the triangle, and the edge that
   is not drawing has zero width, so colouring it costs nothing. */
.daterangepicker:before,
.daterangepicker.drop-up:before {
  border-bottom-color: var(--border-color) !important;
  border-top-color: var(--border-color) !important;
}

.daterangepicker:after,
.daterangepicker.drop-up:after {
  border-bottom-color: var(--surface) !important;
  border-top-color: var(--surface) !important;
}

/* --- The two month panels --- */
.daterangepicker .calendar-table {
  background-color: var(--surface) !important;
  border-color: var(--border-color) !important;
}

/* Weekday row, day cells and the month/year header all take the popup's text
   colour. The vendored sheet leaves them at `inherit`, which is exactly why
   `color: black` on the container above reached every one of them. */
.daterangepicker .calendar-table th,
.daterangepicker .calendar-table td {
  color: var(--text) !important;
}

/* Days belonging to the neighbouring month: vendored as #999 on a #fff fill.
   The fill is dropped so the popup's own surface shows through, and the text
   drops to the muted token — still visibly secondary, and legible in both
   appearances, which #999 was not in either. */
.daterangepicker td.off,
.daterangepicker td.off.in-range,
.daterangepicker td.off.start-date,
.daterangepicker td.off.end-date {
  background: none !important;
  color: var(--text-muted) !important;
}

.daterangepicker td.week,
.daterangepicker th.week {
  color: var(--text-muted) !important;
}

.daterangepicker td.disabled,
.daterangepicker option.disabled,
.daterangepicker .calendar-time select.disabled {
  color: var(--text-muted) !important;
}

/* --- The selection: brand fill, brand text. Unchanged in substance. --- */
.daterangepicker td.available:hover {
  background-color: var(--primary) !important;
  color: var(--primary-text-color) !important;
}

.daterangepicker td.active,
.daterangepicker td.active:hover,
.daterangepicker .active.end-date.in-range.available {
  background-color: var(--primary) !important;
  color: var(--primary-text-color) !important;
}

.daterangepicker td.in-range {
  background-color: var(--primary-hover) !important;
  color: var(--primary-text-color) !important;
}

/* --- The shortcut list on the left (Heute, Gestern, …, Auswahl) --- */
.daterangepicker .ranges li {
  color: var(--text) !important;
}

.daterangepicker .ranges li.active {
  /* The vendored stylesheet pairs this fill with #fff; it is a brand fill like
     any other, so the label follows --primary-text-color. */
  background-color: var(--primary) !important;
  color: var(--primary-text-color) !important;
}

/* Hover comes after `.active` on purpose: the two selectors tie on specificity,
   so source order is what lets a hovered entry show the hover colour even when
   it is the selected one. */
.daterangepicker .ranges li:hover {
  background: var(--primary-hover) !important;
  color: var(--primary-text-color) !important;
}

/* --- The footer: the selected-range label and the two buttons --- */
.daterangepicker .drp-selected {
  color: var(--text-muted) !important;
}

/* Abbrechen carries Bootstrap 3's `btn-default`, which Bootstrap 4 does not
   define — so it has no fill of its own and sits directly on the popup body,
   and its label has to be the popup's text colour rather than white.
   Übernehmen is `btn-primary` and keeps the brand fill it has everywhere
   else. */
.daterangepicker .drp-buttons .cancelBtn {
  color: var(--text) !important;
  border-color: var(--border-color) !important;
}

/* --- Month navigation and the four selects --- */
.daterangepicker .calendar-table .next:hover,
.daterangepicker .calendar-table .prev:hover {
  background: inherit !important;
}

/* The chevrons are drawn out of two BORDERS of a span rather than from a glyph,
   so `color` never reaches them — the border colour is the arrow. */
.daterangepicker .calendar-table .next span,
.daterangepicker .calendar-table .prev span {
  border-color: var(--primary) !important;
}

/* Month, year, hour and minute. Brand-filled, like the picker's other
   controls, so their labels are --primary-text-color; what needed fixing was
   the vendored `1px solid #eee` around the hour/minute pair, a light-mode
   hairline sitting on a brand fill. The option LIST is drawn by the browser
   and follows `color-scheme`, which :root sets per theme. */
.daterangepicker .monthselect,
.daterangepicker .yearselect,
.daterangepicker .hourselect,
.daterangepicker .minuteselect {
  background: var(--primary) !important;
  border: 1px solid var(--primary) !important;
  color: var(--primary-text-color) !important;
  padding: 0.5em;
}

.daterangepicker.show-ranges.ltr .drp-calendar.left,
.drp-buttons,
.daterangepicker .calendar-table {
  border: none !important;
}

/* The one thing a token swap cannot supply: elevation. On a light page the
   popup is a white card over a grey page and reads as floating without help. In
   dark mode --surface (#1c1f24) is one step off --bg-page (#121417), and the
   rule above strips the hairline border, so the calendar would have no edge at
   all — the dark page is where it needs a shadow. */
:root[data-theme="dark"] .daterangepicker {
  box-shadow: 0 6px 24px var(--shadow-color);
}



/* #next_headline (incl. its responsive sizes) lives in components/NavBar.svelte */

@media (max-width: 1125px) {
  body {
    font-size: small;
  }
}

@media (max-width: 576px) {
  body {
    font-size: x-small;
  }
}

@media (max-width: 450px) {
  body {
    font-size: x-small;
  }
}



h1,
.h1 {
  color: var(--primary);
  font-size: 28px;
  font-weight: bold;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}

h2,
.h2 {
  color: #000;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}

.h-primary {
  color: var(--primary);
}

.hiding {
  display: none;
}

.btn {
  font-weight: 300;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  font-size: 0.9em;
}

.btn-normal {
  text-transform: none;
}

/* Used for the rows in "Aktuelle Meldungen": a borderless button drawn
   straight onto the rail, so its label follows the rail's text colour. */
.btn-transparent {
  background: none;
  border: none;
  color: var(--on-dark-text);
}

.btn-transparentBlack {
  background: none;
  border: none;
  /* box-shadow: none !important; */
}

.btn-transparentBlack:hover {
  background: rgba(0, 0, 0, 0.05);
}

.btn-transparentBlack:active {
  background: rgba(0, 0, 0, 0.1);
}

.btn-transparentBlack:focus {
  background: rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.05);
}

.btn-underline {
  text-decoration: underline;
}

.btn-distance {
  margin-right: 1rem;
}

@media (max-width: 1120px) {
  .btn-distance {
    margin-right: 0.75rem;
  }
}

@media (max-width: 767px) {
  .btn {
    font-size: 0.8em;
  }
}

@media (max-width: 576px) {
  .btn {
    font-size: 0.7em;
  }

  .btn-distance {
    margin-right: 0.5rem;
  }
}

@media (max-width: 450px) {
  .btn {
    font-size: 0.6em;
  }

  .btn-distance {
    margin-right: 0.1rem;
  }
}

.kai-datepicker {
  color: #fff;
  background: var(--primary);
  cursor: pointer;
  padding: 5px 10px;
  width: 100%;
  padding: 0.375rem 0.75rem;
}

.kai-datepicker__title {
  color: var(--primary);
  text-transform: uppercase;
  font-weight: bold;
  font-size: 0.75em;
}

@media (max-width: 767px) {
  .kai-datepicker {
    text-align: center;
  }
}

.btn-primary {
  color: var(--primary-text-color);
}

.btn-search-hymo {
  background: white;
  border-top-left-radius: 2px;
  border-bottom-left-radius: 2px;
  box-shadow: none;
}

.btn-search-hymo:hover {
  background-color: #E1E1E1;
}

.search-hymo {
  width: 20px;
  height: 20px;
}

.modal-title {
  text-transform: uppercase;
}

.collapse-chevron {
  transition: transform 0.3s ease-in-out;
}

.collapsed .collapse-chevron {
  transform: rotate(-180deg);
}

.custom-control-label {
  font-size: 13px;
}

.btn-link--primary {
  color: var(--primary) !important;
  font-size: 0.8em;
  border-bottom: 1px solid var(--primary);
  margin-bottom: 10px;
  text-transform: uppercase;
}

.current-selection {
  text-align: center;
  font-size: 0.9em;
  letter-spacing: 0.04em;
  position: relative;
}

.current-selection__title {
  text-transform: uppercase;
  font-weight: bold;
  margin-bottom: 6px;
  background: #fff;
  padding: 0 1em;
  position: relative;
  z-index: 1;
}

.current-selection__title:before {
  border-top: 1px solid #F5F5F5;
  content: "";
  margin: 0 auto;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  bottom: 0;
  width: 95%;
  z-index: -1;
}

.current-selection__title span {
  background: #fff;
  padding: 0 15px;
}

.current-selection__item {
  margin-right: 10px;
}

.current-selection__item__title {
  font-weight: bold;
}

.dropdown-delete-icon {
  display: none;
}

.dropdown-item:hover .dropdown-delete-icon {
  display: inline-block;
  opacity: 0.5;
  float: right;
  margin-top: 0.25em;
}

/* .logo lives in components/NavBar.svelte */

.content_main {
  /* 3.5rem sind padding und margin von der navbar, die zusaetzlich zu logo und footer abgezogen werden muessen */
  height: calc(100vh - 3.5rem - 50px - 1.5rem);
  min-height: 800px;
}

@media (max-width: 991px) {
  .content_main {
    margin-top: 0.25em;
  }
}

@media (max-width: 767px) {
  .content_main_side {
    font-size: small;
  }
}

@media (max-width: 576px) {
  .content_main_side {
    font-size: small;
  }
}

@media (max-width: 450px) {
  .content_main_side {
    font-size: normal;
  }
}

.half {
  height: 50%;
  min-height: 360px;
}

.full {
  height: 100%;
}

.upper-content-row {
  height: 57%;
  min-height: 420px;
}




.diagram-row-wz {
  height: 43%;
  min-height: 310px;
}


.display_box {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: var(--borderRadius-md);
  background-color: var(--surface);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.user_box {
  max-height: 100%;
  width: 100%;
  border: none;
  border-radius: 0.2rem;
  background-color: var(--surface);
}

.user_box2 {
  max-height: 100%;
  background-color: var(--surface);
  width: 100%;
  border: none;
  border-radius: 0.2rem;
}

.user_box3 {
  max-height: 100%;
  width: 100%;
  overflow: auto;
}

.side-menu {
  background-color: var(--side-menu-color);
  padding: 1rem;
}

.scroll_window {
  height: 75%;
  flex-grow: 1;
}

.scroll_window_admin {
  height: 85%;
}

.scroll_window_admin_small {
  height: 69%;
}

.scroll_window,
.scroll_window_admin,
.scroll_window_admin_small,
.side-menu-scroll {
  overflow-y: auto;
  overflow-x: hidden;
  /* Firefox */
  scrollbar-color: #c0c0c0 var(--side-menu-color);
  scrollbar-width: thin;
  /* Chrome */
}

.scroll_window::-webkit-scrollbar,
.scroll_window_admin::-webkit-scrollbar,
.scroll_window_admin_small::-webkit-scrollbar,
.side-menu-scroll::-webkit-scrollbar {
  height: 8px;
  width: 8px;
  background: var(--side-menu-color);
}

.scroll_window::-webkit-scrollbar-thumb,
.scroll_window_admin::-webkit-scrollbar-thumb,
.scroll_window_admin_small::-webkit-scrollbar-thumb,
.side-menu-scroll::-webkit-scrollbar-thumb {
  background: #c0c0c0;
  -webkit-border-radius: 4px;
}

.button-bottom {
  position: absolute;
  height: 10%;
  bottom: 0.5rem;
  right: 2rem;
  left: 2rem;
}

.p-kachel {
  color: var(--panel-title-color);
  font-size: 26px;
  font-weight: bold;
  text-align: center;
}

.p-kachel-2 {
  color: #aaa;
  font-size: 22px;
  font-weight: bold;
  text-align: center;
}

.center-flex-box {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.p-kachel-height {
  height: 10%;
}

.p-kachel-small {
  color: var(--panel-title-color);
  font-size: 20px;
  font-weight: bold;
  text-align: center;
}

.filter_dropdown {
  background-color: var(--primary);
  border: 0;
} 

.filter_dropdown_scrollable .dropdown__checkbox:hover {
  background: var(--primary-hover);
}

.filter_dropdown .dropdown-item:hover {
  background: var(--primary-hover);
}

.filter_dropdown_scrollable .dropdown__checkbox {
  border-bottom: 1px solid var(--primary-border-dark);
}

.btn-clear {
  margin-left: -30px;
  z-index: 100;
  border: none;
}

.modal-title {
  font-weight: bold;
  color: var(--primary);
}

.p-modal {
  padding-left: 0.5rem;
  font-size: 22px;
  font-weight: bold;
  color: #c0c0c0;
}

.p-h1 {
  font-size: 24px;
  color: #fff;
}

.p-h2 {
  font-size: 20px;
  color: #d6d6d6;
}

.p-h3 {
  font-size: 16px;
  color: #d6d6d6;
}

.grenzen-text {
  font-size: 18px;
}

.grenzen-input {
  border-bottom: 1px solid white;
}

.debug-border {
  border: 2px solid green;
}

.grenzen-field,
.grenzen-field:active,
.grenzen-field:focus {
  background: none;
  border: none;
  box-shadow: none;
  color: white;
}

.inactive {
  display: none;
}

.hide-title {
  font-size: 0px;
}

.map_circle:hover {
  cursor: pointer;
}

.testicon {
  transform: scale(3.57);
  stroke: red;
  stroke-width: 6;
}

/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 35px;
  height: 1rem;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 0.65rem;
  width: 0.65rem;
  left: 2.5px;
  bottom: 2.5px;
  background-color: white;
  transition: 0.4s;
}

input:checked+.slider {
  background-color: var(--primary);
}

input:checked+.slider:before {
  transform: translateX(20px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 1rem;
}

.slider.round:before {
  border-radius: 50%;
}

.up {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}

.down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

.bold {
  font-weight: bold;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

/* Secondary text on the side rail: a device card's label/value lines and the
   device name under an alarm. #c0c0c0 was chosen against the navy slab. */
.gray {
  color: var(--rail-muted-text);
}

.alert_circle {
  stroke-width: 1px;
  stroke-opacity: 0%;
}

/* Historically "paint this white", but every call site means "make this read
   on the side rail / on a brand fill" — the alarm row's mute button, the
   admin rail's form labels, icons inside a .btn-primary. It follows the rail
   token so those stay legible when a theme makes the rail light; dark-rail
   themes (ewe) set --on-dark-text to #fff and nothing changes for them. */
.white {
  color: var(--on-dark-text);
}

.range {
  -webkit-appearance: none;
}

.range::-webkit-slider-thumb {
  -webkit-appearance: none;
  cursor: pointer;
  color: var(--primary);
}

.range::-webkit-slider-runnable-track {
  background: linear-gradient(to right, #ec0404 40%, #1bc505 90%);
}

.box-minmax {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: #FFFFFF;
}

.box-minmax span:first-child {
  margin-left: 0px;
}

.axisIcon {
  transform: rotate(90deg);
}

/*******************
	Signal Bars
*******************/
.sizing-box {
  height: 30px;
  width: 30px;
}

.bottom-anchor {
  position: absolute;
  bottom: 0;
  right: 1rem;
}

.bottom-anchor-right {
  right: 0;
}

.bottom-anchor-left {
  left: 0 !important;
}

.sendezeitraum {
  height: 15px;
  margin: 0;
  padding: 0;
  font-size: 0.8rem;
  text-align: right;
  vertical-align: top;
  margin-right: 1rem;
}

.signal-bars {
  display: inline-block;
}

.signal-bars .bar {
  width: 20%;
  margin-left: 5%;
  margin-right: 0px;
  padding: 0px;
  min-height: 20%;
  display: inline-block;
}

.signal-bars .bar.first-bar {
  height: 25%;
}

.signal-bars .bar.second-bar {
  height: 50%;
}

.signal-bars .bar.third-bar {
  height: 75%;
}

.signal-bars .bar.fourth-bar {
  height: 99%;
}

.perfect {
  color: green;
}

.perfect .bar {
  background-color: green;
}

.good {
  color: green;
}

.good .bar {
  background-color: green;
}

.ok {
  color: #f1c40f;
}

.ok .bar {
  background-color: #f1c40f;
}

.bad {
  color: red;
}

.bad .bar {
  background-color: red;
}

.noData {
  color: #aaa;
}

.noData .bar,
.good .bar.fourth-bar,
.bad .bar:not(.first-bar),
.ok .bar:not(.first-bar):not(.second-bar) {
  background-color: #aaa;
}

.pointer {
  cursor: default;
}

.not-visible {
  visibility: hidden;
}

@media (max-width: 767px) {
  .sizing-box {
    height: 26px;
    width: 26px;
  }

  .sendezeitraum {
    height: 13px;
    font-size: 0.7rem;
  }
}

@media (max-width: 576px) {
  .sizing-box {
    height: 20px;
    width: 20px;
  }

  .sendezeitraum {
    height: 10px;
    font-size: 0.6rem;
  }
}

@media (max-width: 450px) {
  .sizing-box {
    height: 15px;
    width: 15px;
  }

  .sendezeitraum {
    height: 7.5px;
    font-size: 0.4rem;
  }
}

.hidden {
  display: none;
}

.map_marker_outer {
  pointer-events: none;
}

.loader {
  display: block;
  animation: rotate_2 infinite 1.5s linear;
  width: 150px;
  height: auto;
  aspect-ratio: 1 / 1;
  /* Never grow past the (sometimes narrow) container, e.g. side panels when
     the browser is zoomed in, which used to make the circle overflow. */
  max-width: 100%;
  max-height: 100%;
  box-sizing: border-box;
  border-radius: 50%;
  border: 18px solid transparent;
  border-top-color: #e1e1e1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(0deg);
}

/* Anchor for a centred .loader. .loader is absolutely positioned at top/left
   50%, so it centres inside the nearest positioned ancestor — without this on
   its own wrapper it escapes up to the whole side panel and spins over the
   heading and search field instead of the list area it belongs to. */
.loader_container {
  position: relative;
}

.loader_new {
  animation: rotate infinite 1.5s linear;
  width: 125px;
  height: 125px;
  border-radius: 50%;
  border: 16px solid transparent;
  border-top-color: #e1e1e1;
  transform:  rotate(0deg);
}

.loader-body-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  align-items: center;
}

@keyframes rotate {
  0% {
    transform:  rotate(0deg);
  }

  100% {
    transform:  rotate(360deg);
  }
}

@keyframes rotate_2 {
  0% {
    transform:  translate(-50%, -50%) rotate(0deg);
  }

  100% {
    transform:  translate(-50%, -50%) rotate(360deg);
  }
}

.loader_small {
  width: 27px;
  height: 27px;
  border: 5px solid #FFF;
  border-bottom-color: transparent;
  border-radius: 50%;
  border: 4px solid transparent;
  border-top-color: #e1e1e1;
  display: inline-block;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.no_pointer {
  pointer-events: none;
}

/* Toast styling lives in frontend/src/components/Toast.svelte — the toast is
   rendered only there, so its CSS is scoped to the component. */

.modal-open {
  overflow: hidden;
}

.modal-open .modal {
  overflow-x: hidden;
  overflow-y: auto;
}

.svelte-modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2000;
  overflow: auto;
  outline: 0;
}

.svelte-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1999;
  background-color: rgba(0, 0, 0, 0.5);
}

.svelte-modal-dialog {
  position: relative;
  width: auto;
  margin: 0.5rem;
  pointer-events: none;
}


.svelte-modal-dialog-centered {
  display: flex;
  align-items: center;
  height: 90%;
  /* HACK */
}

.svelte-modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  pointer-events: auto;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 0.3rem;
  outline: 0;
}

.svelte-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 1rem;
  border-bottom: 1px solid #e9ecef;
  border-top-left-radius: 0.3rem;
  border-top-right-radius: 0.3rem;
}


.svelte-modal-title {
  margin-bottom: 0;
  line-height: 1.5;
}

.svelte-modal-body {
  position: relative;
  flex: 1 1 auto;
  padding: 1rem;
}

.svelte-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 1rem;
  border-top: 1px solid #e9ecef;
}

.svelte-modal-footer> :not(:first-child) {
  margin-left: 0.25rem;
}

.svelte-modal-footer> :not(:last-child) {
  margin-right: 0.25rem;
}

.svelte-modal-scrollbar-measure {
  position: absolute;
  top: -9999px;
  width: 50px;
  height: 50px;
  overflow: scroll;
}

@media (min-width: 576px) {
  .svelte-modal-dialog {
    max-width: 400px;
    margin: 1.75rem auto;
  }

  .modal-dialog-centered {
    min-height: calc(100% - (1.75rem * 2));
  }

  .svelte-modal-dialog-centered::before {
    height: calc(100vh - (1.75rem * 2));
  }

  .svelte-modal-sm {
    max-width: 300px;
  }
}

@media (min-width: 992px) {
  .svelte-modal-lg {
    max-width: 800px;
  }
}

.svelte-modal-open {
  overflow: hidden;
  padding-right: 17px;
}

.segmented-control {
  display: flex;
  border: 1px solid var(--segment-track-border);
  border-radius: 0.25rem;
  overflow: hidden;
  padding: 2px;
  background-color: var(--segment-track-bg);
}


.segment {
  padding: 0.5rem 0.25rem;
  border: none;
  margin: 0;
  font-family: inherit;
  border-radius: 0.25rem;
  cursor: pointer;
  flex: 1;
  text-align: center;
  box-sizing: border-box;
  font-weight: 300;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  font-size: 0.9em;
  /* The inactive segment sits on the track, so its text colour follows the
     track, not the page: white works on EWE's light blue, but vanishes on
     2kai's pale orange — and neither tint survives dark mode, where both
     tokens resolve to the neutral pair defined at the top of this file. */
  color: var(--segment-inactive-color);
  background-color: var(--segment-track-bg);
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, opacity 0.15s ease-in-out;
}

.segment.active {
  background-color: var(--primary);
  /* Filled with --primary, so it obeys the same on-primary text rule as the
     buttons (white fails on 2kai orange). */
  color: var(--primary-text-color);
  opacity: 1;
  cursor: default;
}

/* Hovering fills the segment with the brand, exactly like selecting it does, so
   the label has to switch to the on-primary colour for the same reason
   `.segment.active` does. Without this the label keeps the TRACK's text colour
   — muted grey in dark mode, 2kai's grey on 2kai's orange in light — and the
   caption fades out at the moment the pointer lands on it. */
.segment:not(.active):hover {
  background-color: var(--primary-hover);
  color: var(--primary-text-color);
}

/* Segments are <button>s (FormToggle); keep the keyboard focus ring for a11y
   but drop the ring left behind after a mouse click, matching the original
   div-based control. */
.segment:focus:not(:focus-visible) {
  outline: none;
}

.segmented-control-flex {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid var(--segment-track-border);
  border-radius: 0.25rem;
  padding: 2px;
  background-color: var(--segment-track-bg);
}

.dropdown__label {
  margin-bottom: 0;

}

.checkbox_test {
  margin-bottom: 0.5rem;
}

.checkbox_test2 {
  margin-top: 0.5rem;
}

.main_meter {
  background-color: #f2f4f7;
  /* Light grey color */
}

.meter-list-element {
  border-bottom: 1px solid #e9ecef;

}

.meter-list-element:nth-last-child(-n+2) {
  border-bottom: none;
}


/* =========================================================================
   Legacy auth screens (pre-AUTH_REDESIGN)
   -------------------------------------------------------------------------
   FROZEN styles for the pre-redesign login/register/reset/404 screens
   (src/components/forms/legacy/ and the legacy branch of pages/NotFound),
   restored verbatim from before the redesign. A project ships these screens
   unless it installs the "auth-redesign" feature in src/features/registry.js
   (see src/scripts/auth_ui.js). Do not restyle; delete this whole section
   together with the legacy components once every deployment has moved to
   the redesigned screens (next section).
   ========================================================================= */

.login-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.form-signin {
  width: 80vw;
  max-width: 740px;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  margin-top: 10vh;
  gap: 1rem;
  overflow: auto;
}

.form-signin .checkbox {
  font-weight: 400;
}

.form-signin .form-control {
  position: relative;
  box-sizing: border-box;
  height: auto;
  padding: 1px;
  font-size: 24px;
}

.form-signin .form-control:focus {
  box-shadow: none;
  outline: none;
}

.form-signin .form-control:focus {
  z-index: 2;
}

.form-signin .login-input {
  background-color: transparent;
  border-radius: 0px;
  border: none;
  border-bottom: 1px solid var(--on-login-bg);
  color: var(--on-login-bg);
}

.form-signin ::-moz-placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: var(--on-login-bg);
  opacity: 1;
  /* Firefox */
}

.form-signin ::placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: var(--on-login-bg);
  opacity: 1;
  /* Firefox */
}

/* "Registrieren" / "Passwort vergessen?" sit on the photo, not on a card, so
   they cannot use .btn-link's --primary: a brand colour close to its own login
   image disappears into it — 2kai's orange on 2kai's orange-toned photo was
   unreadable. They follow the same colour as the rest of the text on the
   image, with the underline carrying the hover instead of a colour change. */
.form-signin .btn-link,
.form-signin .btn-link:hover,
.form-signin .btn-link:focus {
  color: var(--on-login-bg);
}

.form-signin .btn-link:hover {
  text-decoration: underline;
}

.form-signin input[type=email] {
  margin-bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.form-signin input[type=password] {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.login-headline {
  font-weight: 550;
  font-size: 25px;
  color: var(--on-login-bg);
  text-align: center;
}

/* =========================================================================
   MODE-MATCHED LOGO
   -------------------------------------------------------------------------
   A wordmark drawn for a light bar disappears on a dark one, so a theme may
   ship `assets.navLogoDark` alongside `assets.navLogo` and both chromes
   (NavBar and the app-shell top bar) render BOTH, letting CSS pick. Doing the
   swap here rather than in JS means it follows the OS setting under the
   "system" preference with no store plumbing.

   Both elements always exist: the components fall back to the light file when
   a theme ships only one, because these rules hide .logo--light in dark mode
   whether or not a replacement was rendered.
   ========================================================================= */
.logo--dark,
.app-topbar__brand .logo--dark {
  display: none;
}

[data-theme="dark"] .logo--light,
[data-theme="dark"] .app-topbar__brand .logo--light {
  display: none;
}

[data-theme="dark"] .logo--dark,
[data-theme="dark"] .app-topbar__brand .logo--dark {
  display: inline-block;
}

.background-container {
  background-image: var(--background-url);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  display: flex;
  justify-content: center;
  height: 100vh;
  width: 100vw;
}

.login-icon {
  width: 25px;
  height: 25px;
  font-size: 25px;
  line-height: 25px;
}

/* =========================================================================
   Redesigned auth screens (Login / Registrieren / Passwort-Reset / MFA / 404)
   -------------------------------------------------------------------------
   Centered card on the brand backdrop. The card and its controls read the
   semantic theme tokens (top of file), so the screens follow light/dark
   automatically; the backdrop illustration and the white logo above the
   card stay brand-navy in both themes.

   Shipped via the feature registry: only projects that install the
   "auth-redesign" feature in src/features/registry.js show these screens
   (see src/scripts/auth_ui.js); everything else still renders the legacy
   section above. Container class is .auth-screen — the legacy screens keep
   .background-container.
   ========================================================================= */

/* ===========================================================================
   Sticky footer
   ===========================================================================
   "Powered by 2kai" credits the vendor and belongs at the bottom of the WINDOW
   when a page is shorter than the viewport — not floating halfway down it,
   which is where a short page (an empty dashboard, a filtered-to-nothing list)
   used to leave it, reading as the end of the content rather than the end of
   the page.

   One rule for twelve pages: every page that renders <Footer> uses the same
   shell — .container-fluid > .row > main.col-12.ml-sm-auto.px-md-4 — with the
   footer as its last child, so the shell is the flex column and the footer
   takes the slack. Doing it per page would have meant twelve edits and twelve
   chances to miss one.

   The footer stays IN FLOW (margin-top: auto) rather than being positioned
   absolutely: on a long page it must sit after the content, and an absolutely
   positioned footer would need reserved padding that is wrong the moment the
   line wraps.

   dvh after vh: mobile browsers shrink the viewport when their chrome slides
   away, and 100vh there is taller than the window, which puts the footer just
   below the fold — the bug this rule exists to prevent, in its mobile form.
   Browsers that do not know dvh keep the vh line above. */
main.col-12.ml-sm-auto {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

main.col-12.ml-sm-auto > footer {
  margin-top: auto;
}

.auth-screen {
  background-image: var(--background-url);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  /* paint brand navy while (or if) the SVG backdrop loads */
  background-color: #12354f;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  min-height: 100vh;
  min-height: 100dvh;
  width: 100%;
  padding: 2rem 1rem;
  overflow-y: auto;
}

/* The logo lives INSIDE .auth-card — the card's surface extends up to cover it
   rather than the logo sitting on the backdrop. That was the fix for dark mode:
   on the photo, the logo had to be a light knockout in both themes, which read
   as a white slab above a charcoal card. On the card it simply follows the
   surface, the way every other logo in the app follows its bar.
   The two files are swapped by .logo--light / .logo--dark (see the logo section
   above) — CSS, not JS, so the right one is correct on the very first paint. */
.auth-logo {
  width: min(240px, 60vw);
  height: auto;
  flex-shrink: 0;
  display: block;
  margin: 0 auto 1.5rem;
}

/* The light/dark swap, spelled out for .auth-logo.
   It cannot be left to the generic .logo--light / .logo--dark rules: those sit
   EARLIER in this file at the same specificity as `.auth-logo` above, so
   `display: block` overrode their `display: none` and BOTH logos rendered — in
   light mode the dark variant showed as a ghost of its orange parts under the
   real wordmark, because its white glyphs were invisible on the white card.
   These selectors carry a class more, so they win regardless of order. */
.auth-logo.logo--dark {
  display: none;
}

[data-theme="dark"] .auth-logo.logo--light {
  display: none;
}

[data-theme="dark"] .auth-logo.logo--dark {
  display: block;
  margin: 0 auto 1.5rem;
}

.auth-card {
  width: 100%;
  max-width: 430px;
  background-color: var(--surface);
  color: var(--text);
  border-radius: 14px;
  box-shadow: 0 18px 45px rgba(4, 27, 45, 0.4);
  padding: 2rem;
}

@media (prefers-reduced-motion: no-preference) {
  .auth-card {
    animation: auth-card-in 0.3s ease-out both;
  }

  @keyframes auth-card-in {
    from {
      opacity: 0;
      transform: translateY(10px);
    }

    to {
      opacity: 1;
      transform: none;
    }
  }
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}

.auth-title {
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--text-strong);
  text-align: center;
  margin: 0;
  /* neutralize the template-wide uppercase h1 styling */
  text-transform: none;
  letter-spacing: normal;
}

.auth-subtitle {
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--text-muted);
  text-align: center;
  margin: 0.4rem 0 0;
}

/* "acting on account" line, e.g. the address a verification code went to */
.auth-account-line {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-strong);
  overflow-wrap: anywhere;
}

.auth-account-line .fa-solid {
  color: var(--text-muted);
}

.auth-field-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  text-align: left;
}

.auth-label-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
}

.auth-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-strong);
  margin: 0;
}

.auth-field {
  position: relative;
}

.auth-field-icon {
  position: absolute;
  left: 0.95rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1;
  pointer-events: none;
}

/* extends .form-control */
.auth-input {
  height: 46px;
  padding: 0.375rem 0.85rem;
  font-size: 1rem; /* >=16px: prevents iOS zoom-on-focus */
  background-color: var(--input-bg);
  color: var(--input-color);
  border: 1px solid var(--input-border);
  border-radius: 8px;
}

.auth-field-icon~.auth-input {
  padding-left: 2.6rem;
}

.auth-input--trailing {
  padding-right: 3rem; /* room for the show/hide toggle */
}

.auth-input::placeholder {
  color: var(--text-muted);
  opacity: 0.65;
}

.auth-input:focus {
  background-color: var(--input-bg);
  color: var(--input-color);
  border-color: var(--imput-focus-color);
  box-shadow: 0 0 0 0.2rem var(--primary-box-shadow-light);
  outline: 0;
}

.auth-input:disabled {
  background-color: var(--surface-2);
  color: var(--text-muted);
}

/* one-time verification code: centered, spaced digits */
.auth-code-input {
  text-align: center;
  letter-spacing: 0.35em;
  font-weight: 600;
  font-size: 1.15rem;
}

.auth-code-input::placeholder {
  letter-spacing: normal;
  font-weight: 400;
  font-size: 1rem;
}

.auth-toggle-visibility {
  position: absolute;
  right: 0.35rem;
  top: 50%;
  transform: translateY(-50%);
  width: 2.4rem;
  height: 2.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.95rem;
  cursor: pointer;
}

.auth-toggle-visibility:hover {
  color: var(--text);
  background-color: var(--surface-3);
}

.auth-toggle-visibility:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}

.auth-hint {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.auth-hint--warning {
  color: #9a6700;
}

[data-theme="dark"] .auth-hint--warning {
  color: #ffc866;
}

.auth-field-error {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin: 0;
  font-size: 0.8rem;
  color: #c22f3d;
}

[data-theme="dark"] .auth-field-error {
  color: #f5a3ad;
}

.auth-field-success {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin: 0;
  font-size: 0.8rem;
  color: #1a7f37;
}

[data-theme="dark"] .auth-field-success {
  color: #86e0a9;
}

/* live password-policy checklist (Registrieren / Passwort-Reset) */
.auth-requirements {
  background-color: var(--surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 0.6rem 0.85rem;
  text-align: left;
}

.auth-requirements-title {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}

.auth-requirements-list {
  display: flex;
  flex-wrap: wrap;
  gap: 3px 14px;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.8rem;
}

.auth-requirements-list li {
  transition: color 0.15s ease;
}

.auth-requirements-list li.met {
  color: #1a7f37;
}

.auth-requirements-list li.unmet {
  color: var(--text-muted);
}

[data-theme="dark"] .auth-requirements-list li.met {
  color: #86e0a9;
}

/* compact alert variant inside the card (base colors from .alert-*) */
.auth-alert {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  margin: 0;
  padding: 0.65rem 0.9rem;
  font-size: 0.875rem;
  border-radius: 8px;
  text-align: left;
}

.auth-submit {
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  margin-top: 0.25rem;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 8px;
  /* The CTA carries text at 16px, where AA wants 4.5:1. A brand's base
     --primary does not always clear that against --primary-text-color, so the
     button uses the darker step of the brand ladder. Which step is right is a
     per-tenant question, not a fixed colour: see --auth-cta-bg below. */
  background-color: var(--auth-cta-bg);
  border-color: var(--primary-border);
}

/* Hover and active are the CTA's own fill stepped down, mixed from the token
   rather than written out — the literals here were one tenant's blues. */
.auth-submit:hover {
  background-color: color-mix(in srgb, var(--auth-cta-bg) 85%, #000);
  border-color: color-mix(in srgb, var(--primary-border) 85%, #000);
}

/* match the specificity of Bootstrap's .btn-primary:not(:disabled):not(.disabled):active */
.auth-submit:not(:disabled):not(.disabled):active {
  background-color: color-mix(in srgb, var(--auth-cta-bg) 75%, #000);
  border-color: color-mix(in srgb, var(--primary-border) 75%, #000);
}

.auth-submit:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.auth-divider {
  margin: 0.25rem 0;
  border: 0;
  border-top: 1px solid var(--border-subtle);
}

.auth-links {
  display: flex;
  justify-content: center;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-muted);
  text-align: center;
}

.auth-link {
  font-weight: 600;
  /* A brand's base --primary is often too light to be text on the white card,
     so links use the darker step; the dark-theme block below restores
     --primary, which is the accessible pairing on a dark surface. */
  color: var(--primary-active);
  border-radius: 4px;
}

.auth-link:hover {
  color: var(--link-hover-color);
  text-decoration: underline;
}

.auth-link:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.auth-link--small {
  font-size: 0.82rem;
  font-weight: 500;
}

/* link-styled <button> (back-navigation, resend code, …) */
.auth-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0;
  border: none;
  background: none;
  font-size: inherit;
  font-weight: 600;
  color: var(--primary-active);
  cursor: pointer;
  border-radius: 4px;
}

.auth-link-btn:hover {
  color: var(--link-hover-color);
  text-decoration: underline;
}

.auth-link-btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.auth-link-btn:disabled {
  color: var(--text-muted);
  cursor: not-allowed;
  text-decoration: none;
}

/* On dark surfaces the BRIGHTER brand shade is the accessible pairing — the
   darker light-theme token does not clear AA there. Hover keeps the colour;
   the underline is the hover signal. */
[data-theme="dark"] .auth-link,
[data-theme="dark"] .auth-link:hover,
[data-theme="dark"] .auth-link-btn:not(:disabled),
[data-theme="dark"] .auth-link-btn:not(:disabled):hover {
  color: var(--primary);
}

.auth-footer {
  margin: 0;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.75);
  text-align: center;
  flex-shrink: 0;
}

/* 404 */
.auth-404-code {
  margin: 0;
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 1;
  color: var(--primary);
  text-align: center;
}

@media (max-width: 480px) {
  .auth-screen {
    padding: 1.25rem 0.75rem;
    gap: 1.15rem;
  }

  .auth-card {
    padding: 1.5rem 1.25rem;
  }
}

.icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-container-left {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.icon-container-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.input-group .form-control::placeholder {
  opacity: 0.7;
}

.centered-content {
  align-items: center;
}

.table-head-btn {
  position: sticky;
  top: -1px;
  background-color: var(--primary) !important;
  color: var(--primary-text-color) !important;
  border-left: 1px solid #dee2e6 !important;
  cursor: pointer;
  user-select: none;
  text-align: center;

}

.table-head-btn:hover {
  background-color: var(--primary-hover) !important;
}

.table-head-btn:active {
  background-color: var(--primary-active) !important;
}

.table-element-btn {
  cursor: pointer;
}

tr:nth-child(odd) .table-element-btn:hover:not(.table-element-disabled) {
  background-color: rgba(0, 0, 0, 0.075) !important;
}


tr:nth-child(odd) .table-element-btn:hover:active:not(.table-element-disabled) {
  background-color: rgba(0, 0, 0, 0.1) !important;
  box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.075);
}

tr:nth-child(even) .table-element-btn:hover:not(.table-element-disabled) {
  background-color: rgba(0, 0, 0, 0.1) !important;
}

tr:nth-child(even) .table-element-btn:hover:active:not(.table-element-disabled) {
  background-color: rgba(0, 0, 0, 0.125) !important;
  box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.1);
}

.table-element-disabled {
  cursor: auto;
}


/* The custom info-tooltip styles that used to live here (.tooltip-container /
   .tooltip) were moved into the scoped Svelte component
   src/components/core/common/Tooltip.svelte and renamed (.mv-tooltip*) to avoid
   colliding with Bootstrap's own .tooltip class. */

/* The clear-"×" that sits inside a search or multi-select field. Its hover was
   a literal `lightgrey`, which is a light-mode assumption: the button sits on
   --input-bg, so on the dark surface the hover flashed a near-white block under
   an off-white glyph. The raised-surface tokens keep the same "one step
   lighter than the field" reading in both themes. */
.delete-btn:hover,
.delete-btn:focus {
  background-color: var(--surface-3);
}

.delete-btn:active {
  background-color: var(--border-color) !important;
}

.css-bars-icon {
    display: inline-block;
    width: 22px;
    height: 18px;
    position: relative;
}
.css-bars-icon::before,
.css-bars-icon::after,
.css-bars-icon div {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;           /* thinner bars */
    /* The drag handle is drawn on a device card, i.e. on the side rail. */
    background: var(--on-dark-text);
    border-radius: 1px;
    transition: background 0.2s;
}
.css-bars-icon::before {
    top: 2px;              /* top bar */
}
.css-bars-icon div {
    top: 8px;              /* middle bar */
}
.css-bars-icon::after {
    bottom: 2px;           /* bottom bar */
}

/* .arrow {
  border: solid white;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
} */

.device-button-header {
  padding: 0.75rem 0.75rem;
  cursor: pointer;
}

.arrow {
  position: relative;
  display: block;
  width: 18px;
  height: 18px;
  margin: 0 auto;
}

/* Legacy CSS-border arrow: the device buttons now use Font Awesome chevrons
   (fa-chevron-down / fa-chevron-right). This ::after triangle was invisible
   under FA's old SVG/JS mode (pseudo-elements don't render on <svg>), but in
   webfont mode it painted a duplicate grey arrow on top of the chevron.
   The .arrow-down/.arrow-up rotation classes are unused. Removed. */

.alarm-icon {
  width: 1.1rem;
  height: 1.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: 0.5em;

}
.alarm-data{
  font-size: 0.9rem;
}

.alarm-data-row {
  display: flex;
  align-items: center;
  justify-content: start;
}

.checkbox-icon {

}

.checkbox-button {
  padding: 0 0.25rem;
  font-size: larger;
  margin:0;
  min-width: 40px;
}

.alarm-element-header {
  padding: 0.5rem 0.75rem;
}


.btn-border {
    border: 1px solid var( --element-light-border);
    border-radius: 0.25rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
   opacity: 1;
}

.form-check-input {
  width: 1em;
  height: 1em;
  margin-top: 0.25em;
  vertical-align: top;
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: 1px solid rgba(0, 0, 0, 0.25);
  appearance: none;
  -webkit-appearance: none;
  print-color-adjust: exact;
  border-radius: 0.25em;
}

.form-check-input:active {
  filter: brightness(90%);
}

.form-check-input:focus {
  border-color: #86b7fe;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.form-check-input:checked {
  background-color: #0d6efd;
  border-color: #0d6efd;
}

/* Checkbox checkmark (not required for switch but keeps behavior consistent) */
.form-check-input[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
}

/* Switch addon */
.form-switch {
  padding-left: 2.5em;
}

.form-switch .form-check-input {
  width: 2em;
  height: 1em;
  margin-left: -2.5em;
  margin-top: 0.25em;
  border-radius: 2em;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba(0,0,0,.25)'/%3e%3c/svg%3e");
  background-position: left center;
  transition: background-position .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
}

.form-switch .form-check-input:checked {
  background-position: right center;
  background-color: var(--primary);
  border-color: var(--primary);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}

/* ==========================================================================
   EWE-Admin Dashboard (Angebot 182-2026 / MW-170)
   Shared table styles for the dashboard widgets. Card and badge visuals live
   in the respective components (DashboardCard.svelte / StatusBadge.svelte).
   ========================================================================== */
.dash-table-scroll {
  overflow-y: auto;
  width: 100%;
}

.dash-table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.dash-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: var(--surface-2);
  color: var(--text-muted);
  font-weight: 600;
  text-align: left;
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--border-color);
  white-space: nowrap;
}

.dash-table tbody td {
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text);
  vertical-align: middle;
}

.dash-table tbody tr:last-child td {
  border-bottom: none;
}

.dash-table tbody tr:hover td {
  background-color: var(--surface-3);
}

.dash-table .text-right {
  text-align: right;
}

.dash-num--active {
  color: color-mix(in srgb, var(--success) 70%, #000);
  font-weight: 600;
}

.dash-num--inactive {
  color: color-mix(in srgb, var(--danger) 85%, #000);
  font-weight: 600;
}

/* Metric tables (e.g. Kundenkonten): use a fixed layout so the columns are
   distributed evenly across the full width, instead of auto-sizing each one to
   its header text (which left "User" cramped and other columns stretched). The
   label column gets a bit more room; the numeric columns share the rest equally. */
.dash-table--metrics {
  table-layout: fixed;
}

.dash-table--metrics th:first-child,
.dash-table--metrics td:first-child {
  width: 24%;
}

.dash-table tbody td.dash-empty {
  text-align: center;
  color: var(--text-muted);
  padding: 1.25rem 0.75rem;
}

/* Battery level colour (see BatterieWidget.svelte battery_class()). */
.dash-battery--ok {
  color: var(--success);
}
.dash-battery--warning {
  color: color-mix(in srgb, var(--warning) 80%, #000);
}
.dash-battery--danger {
  color: var(--danger);
}

/* =========================================================================
   MV-TABLE — unified table design system
   -------------------------------------------------------------------------
   One clean, theme-aware table look shared across the app, rendered by the
   <DataTable> component (components/core/table/DataTable.svelte). Design goals:
   single-surface rows (no zebra striping), a hairline divider between rows,
   a full-row hover highlight, a sticky muted header, and a rounded, bordered
   container. Everything reads the semantic tokens (top of file), so light and
   dark themes both work with no per-theme overrides.
   Migration note: the older `.table.table-striped` markup and the dashboard
   `.dash-table` styles are meant to be folded into this system incrementally.
   ========================================================================= */
.mv-table-wrap {
  width: 100%;
  max-height: 100%;
  overflow: auto;
  background-color: var(--surface);
  border: 1px solid var(--border-color);
  border-radius: var(--borderRadius-md);
  box-shadow: 0 1px 2px var(--shadow-color);
  /* thin, theme-matched scrollbars (Firefox) */
  scrollbar-width: thin;
  scrollbar-color: var(--border-color) transparent;
}
.mv-table-wrap--fill {
  height: 100%;
}
.mv-table-wrap::-webkit-scrollbar {
  height: 8px;
  width: 8px;
}
.mv-table-wrap::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 4px;
}

.mv-table {
  width: 100%;
  margin: 0;
  /* separate (not collapse) keeps the row dividers painted correctly under a
     position: sticky header — collapsed borders detach from sticky cells. */
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.9rem;
  color: var(--text);
  background-color: var(--surface);
}

/* Header — muted label, sticky, one firm divider beneath it */
.mv-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background-color: var(--surface-2);
  color: var(--text-muted);
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
  padding: 0.7rem 0.85rem;
  border-bottom: 2px solid var(--border-color);
}

/* Body cells — single surface, hairline divider between rows */
.mv-table tbody th,
.mv-table tbody td {
  padding: 0.65rem 0.85rem;
  vertical-align: middle;
  text-align: left;
  border-bottom: 1px solid var(--border-subtle);
}
.mv-table tbody td {
  color: var(--text);
}
/* First-column row headers carry a little more emphasis */
.mv-table tbody th {
  font-weight: 600;
  color: var(--text-strong);
  white-space: nowrap;
}
/* No divider under the last row — it meets the container edge cleanly */
.mv-table tbody tr:last-child > th,
.mv-table tbody tr:last-child > td {
  border-bottom: none;
}

/* Full-row hover highlight (unicolour, no stripes) */
.mv-table tbody tr {
  transition: background-color 0.12s ease;
}
.mv-table tbody tr:hover > th,
.mv-table tbody tr:hover > td {
  background-color: var(--surface-3);
}

/* Per-column alignment helpers (applied by the component) */
.mv-table .mv-cell--center {
  text-align: center;
}
.mv-table .mv-cell--right {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Highlighted data cells — coloured tints (min/max extremes, boolean status)
   applied by class rather than inline style, so the full-row hover can deepen
   them instead of an inline background winning the cascade. */
.mv-table tbody td.mv-cell--danger {
  background-color: var(--cell-danger);
}
.mv-table tbody td.mv-cell--success {
  background-color: var(--cell-success);
}
.mv-table tbody tr:hover > td.mv-cell--danger {
  background-color: var(--cell-danger-hover);
}
.mv-table tbody tr:hover > td.mv-cell--success {
  background-color: var(--cell-success-hover);
}

/* Compact density variant. The .mv-table prefix raises specificity above the
   base `.mv-table tfoot th/td` rule below — without it the two tie and the
   later (non-compact) footer padding would win, leaving compact footers with
   the wrong, larger padding. */
.mv-table.mv-table--compact thead th,
.mv-table.mv-table--compact tbody th,
.mv-table.mv-table--compact tbody td,
.mv-table.mv-table--compact tfoot th,
.mv-table.mv-table--compact tfoot td {
  padding: 0.4rem 0.6rem;
}

/* Empty-state row */
.mv-table tbody td.mv-table__empty {
  text-align: center;
  color: var(--text-muted);
  padding: 1.5rem 0.85rem;
}
.mv-table tbody tr:hover > td.mv-table__empty {
  background-color: transparent;
}

/* Footer (e.g. column totals) — mirrors the muted header surface */
.mv-table tfoot th,
.mv-table tfoot td {
  padding: 0.65rem 0.85rem;
  background-color: var(--surface-2);
  color: var(--text-strong);
  font-weight: 600;
  border-top: 2px solid var(--border-color);
}

/* =========================================================================
   Selection bar — a compact indicator shown above content: a tinted icon, a
   quiet uppercase caption, a strong value, and optional meta pushed to the
   right. Shared by the Montage "Aktuelle Auswahl" chip and the data-table
   title so they read as one family. Token-based, so light/dark both work.
   ========================================================================= */
.mv-selection {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  margin-bottom: 0.75rem;
  padding: 0.5rem 0.9rem;
  background: var(--surface);
  border: 1px solid var(--border-color);
  border-radius: var(--borderRadius-md);
  box-shadow: 0 1px 2px var(--shadow-color);
}
.mv-selection__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  /* A 12% wash of the brand colour, mixed from the token rather than frozen
     at EWE's blue — the icon on top already reads --primary. */
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--primary);
  font-size: 0.95rem;
}
.mv-selection__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.2;
}
.mv-selection__label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.mv-selection__value {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-strong);
}
/* Monospace, tabular figures — for id-like values such as a DevEUI. */
.mv-selection__value--mono {
  font-family: var(--font-family-monospace);
  font-variant-numeric: tabular-nums;
}
/* Secondary count / detail, pushed to the right edge. */
.mv-selection__meta {
  margin-left: auto;
  padding-left: 1rem;
  flex: 0 0 auto;
  font-size: 0.82rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Empty state: mute the icon and the (plain) placeholder value. */
.mv-selection--empty .mv-selection__icon {
  background: var(--surface-3);
  color: var(--text-muted);
}
.mv-selection--empty .mv-selection__value {
  font-weight: 600;
  color: var(--text-muted);
}

/* =========================================================================
   DARK MODE — surface overrides
   -------------------------------------------------------------------------
   Applied only when <html data-theme="dark"> is set (scripts/theme.js).
   The app shell reads semantic tokens directly (see top of file), so the rules
   here mainly re-skin Bootstrap 4 components — which hardcode light colours and
   predate any dark theme — plus a few shared app classes. Component-scoped
   Svelte styles that still hardcode colours can be migrated onto these tokens
   incrementally; this block covers the common surfaces.
   ========================================================================= */

/* --- Base text / links ---
   Default text colour comes from `body { color: var(--text) }` (top of file)
   via inheritance. We deliberately do NOT blanket-override every
   div/span/p/li/label here: that (0,1,1) selector would beat Bootstrap's
   single-class contextual rules (e.g. `.alert-warning`, specificity 0,1,0) and
   force near-white text onto their light backgrounds, breaking contrast.
   Components that carry their own background + colour are re-skinned explicitly
   below (see Alerts). */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
  color: var(--text-strong);
}
[data-theme="dark"] a:not(.btn):not(.nav-link) {
  color: var(--primary);
}
[data-theme="dark"] hr {
  border-top-color: var(--border-color);
}
[data-theme="dark"] .text-muted {
  color: var(--text-muted) !important;
}
[data-theme="dark"] .text-dark {
  color: var(--text) !important;
}

/* --- Surfaces: cards, modals, boxes --- */
[data-theme="dark"] .card,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .display_box,
[data-theme="dark"] .user_box,
[data-theme="dark"] .user_box2,
[data-theme="dark"] .user-profile-box,
[data-theme="dark"] .list-group-item,
[data-theme="dark"] .popover {
  background-color: var(--surface);
  color: var(--text);
  border-color: var(--border-color);
}
[data-theme="dark"] .card-header,
[data-theme="dark"] .card-footer,
[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer {
  background-color: var(--surface-2);
  border-color: var(--border-color);
}
[data-theme="dark"] .modal-header .close {
  color: var(--text);
  text-shadow: none;
}
[data-theme="dark"] .bg-white,
[data-theme="dark"] .bg-light {
  background-color: var(--surface) !important;
}

/* --- Navbar / header --- see components/NavBar.svelte --- */
[data-theme="dark"] .border-bottom,
[data-theme="dark"] .border-top,
[data-theme="dark"] .border,
[data-theme="dark"] .border-left,
[data-theme="dark"] .border-right {
  border-color: var(--border-color) !important;
}

/* --- Forms / inputs --- */
[data-theme="dark"] .form-control,
[data-theme="dark"] .custom-select,
[data-theme="dark"] textarea {
  background-color: var(--input-bg);
  color: var(--input-color);
  border-color: var(--input-border);
}
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .custom-select:focus {
  background-color: var(--input-bg);
  color: var(--input-color);
}
[data-theme="dark"] .form-control::placeholder {
  color: var(--text-muted);
}
[data-theme="dark"] .form-control:disabled,
[data-theme="dark"] .form-control[readonly] {
  background-color: var(--surface-2);
  color: var(--text-muted);
}
[data-theme="dark"] .input-group-text {
  background-color: var(--surface-2);
  color: var(--text);
  border-color: var(--input-border);
}

/* --- Dropdowns --- */
[data-theme="dark"] .dropdown-menu {
  background-color: var(--dropdown-bg);
  color: var(--text);
  border-color: var(--border-color);
  box-shadow: 0 0.5rem 1rem var(--shadow-color);
}
[data-theme="dark"] .dropdown-item {
  color: var(--text);
}
[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
  background-color: var(--dropdown-hover);
  color: var(--text);
}
[data-theme="dark"] .dropdown-divider {
  border-top-color: var(--border-color);
}

/* --- Tables --- */
[data-theme="dark"] .table {
  color: var(--text);
}
[data-theme="dark"] .table th,
[data-theme="dark"] .table td {
  border-color: var(--border-color);
}
[data-theme="dark"] .table thead th {
  border-bottom-color: var(--border-color);
  color: var(--text-muted);
}
[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) {
  background-color: var(--surface-2);
}
[data-theme="dark"] .table-hover tbody tr:hover {
  background-color: var(--surface-3);
  color: var(--text);
}

/* --- Secondary buttons (brand primary already reads well on dark) --- */
[data-theme="dark"] .btn-secondary {
  background-color: var(--surface-3);
  border-color: var(--border-color);
  color: var(--text);
}
[data-theme="dark"] .btn-secondary:hover {
  background-color: var(--surface-2);
  color: var(--text-strong);
}
[data-theme="dark"] .btn-outline-secondary {
  color: var(--text);
  border-color: var(--border-color);
}
[data-theme="dark"] .close {
  color: var(--text);
  text-shadow: none;
}

/* --- Alerts / contextual boxes ---
   These carry their own background + text colour in Bootstrap, so they must be
   re-skinned explicitly (a light alert box on a dark page is both inconsistent
   and, if only the text were flipped, unreadable). Class+attribute specificity
   (0,2,0) keeps them above the shell rules. */
[data-theme="dark"] .alert-warning {
  background-color: #3a3320;
  border-color: #574a20;
  color: #ffe08a;
}
[data-theme="dark"] .alert-info {
  background-color: #10323d;
  border-color: #1b5061;
  color: #9edcf0;
}
[data-theme="dark"] .alert-danger {
  background-color: #3a2226;
  border-color: #5c2a30;
  color: #f5a3ad;
}
[data-theme="dark"] .alert-success {
  background-color: #1e3529;
  border-color: #2c5c40;
  color: #86e0a9;
}

/* Device-map (StreetMap) styles now live in the component's own <style>
   block: src/components/StreetMap.svelte — authored with :global(...) for
   the Leaflet-injected DOM (markers, clusters, popups, legend, controls).
   Dark mode inverts the OSM tile pane with a CSS filter (in that component),
   and the .leaflet-container background moved into the component too. */


/* ============================================================
   APP SHELL — sidebar navigation ("app-shell" feature)
   ------------------------------------------------------------
   Everything below is inert unless the feature is installed in
   features/registry.js, but by two different mechanisms — worth
   knowing which is which before editing:

     - The rules that MOVE THE PAGE (the body offset and the
       content_main height correction) are attribute-scoped to
       :root[data-shell="on"], which only AppShell.svelte sets.
       These are the only rules that can affect an existing page,
       so they must stay scoped.
     - Everything else (.app-shell, .app-topbar, .app-sidebar,
       .settings-nav__*, .nav-badge, .nav-flyout) is a plain
       global class selector. It is inert simply because no other
       component emits those class names — AppShell.svelte and
       AppSidebar.svelte are their only source. If you ever reuse
       one of these class names elsewhere, that assumption breaks.

   Styling is token-based, so it themes automatically in light and
   dark. The rules live here (global) rather than in the component
   because the <a> elements are rendered by svelte-routing's <Link>
   and would otherwise fall outside Svelte's component scope.
   ============================================================ */
.settings-nav__list,
.settings-nav__sublist {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Group headers (Überwachung / Betrieb / Verwaltung). Quiet by design: they
   are orientation, not navigation, so they sit lighter than the entries and
   lean on spacing rather than weight to separate the groups. */
.settings-nav__group + .settings-nav__group {
  margin-top: 1.4rem;
}
.settings-nav__grouplabel {
  margin: 0 0.75rem 0.35rem;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
  opacity: 0.8;
}

.settings-nav__item + .settings-nav__item {
  margin-top: 0.1rem;
}

/* Entries are inset pills rather than full-bleed rows: the rounded hover/active
   shape reads as a discrete target and keeps the tint off the sidebar edge. */
.settings-nav__link {
  display: flex;
  position: relative;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 0.7rem;
  border-radius: 8px;
  color: var(--text-strong);
  font-size: 0.925rem;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.settings-nav__link:hover,
.settings-nav__link:focus {
  background-color: var(--surface-3);
  color: var(--text-strong);
  text-decoration: none;
}

/* Fixed icon column so every label starts on the same x, whatever the glyph's
   natural width. Icons are muted until the entry matters (hover/active), which
   stops the rail reading as a wall of equally-loud symbols. */
.settings-nav__link i {
  flex: 0 0 1.25rem;
  width: 1.25rem;
  text-align: center;
  font-size: 0.95rem;
  color: var(--text-muted);
  transition: color 0.15s ease;
}
.settings-nav__link:hover i,
.settings-nav__link:focus i {
  color: var(--text-strong);
}

/* Active leaf / sub-item (svelte-routing also sets aria-current="page").
   Tint + accent + strong text: reads clearly AND meets WCAG AA contrast,
   which white-on-brand-cyan (~2.7:1) did not. The accent is a short rounded
   bar drawn inside the pill, so it follows the inset shape instead of the
   flush full-height edge the old inset box-shadow produced. */
.settings-nav__link.is-active,
.settings-nav__link[aria-current="page"] {
  background-color: var(--surface-3);
  color: var(--text-strong);
  font-weight: 600;
}
.settings-nav__link.is-active::before,
.settings-nav__link[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 1.1rem;
  border-radius: 0 3px 3px 0;
  background-color: var(--primary);
}
.settings-nav__link.is-active i,
.settings-nav__link[aria-current="page"] i {
  color: var(--primary);
}

/* Parent row: the label link + an expand/collapse caret. */
.settings-nav__parent {
  display: flex;
  align-items: center;
}

.settings-nav__link--parent {
  flex: 1 1 auto;
}

/* Section (parent) active state is subtler than a selected leaf: just the
   brand text colour, so the selected child (tint + bar) stays distinct. */
.settings-nav__link--parent.is-section {
  color: var(--primary);
}

.settings-nav__caret {
  flex: 0 0 auto;
  background: none;
  border: none;
  color: var(--text-muted);
  padding: 0.4rem 0.5rem;
  cursor: pointer;
  border-radius: var(--borderRadius-md);
}

.settings-nav__caret:hover {
  background-color: var(--surface-3);
}

.settings-nav__caret i {
  transition: transform 0.15s ease;
}

.settings-nav__caret.is-open i {
  transform: rotate(90deg);
}

/* Nested sub-items (e.g. Rollen & Rechte → Rollen / Richtlinien / …). */
.settings-nav__sublist {
  margin: 0.15rem 0 0.35rem 1.1rem;
  padding-left: 0.5rem;
  border-left: 2px solid var(--border-subtle);
}

.settings-nav__sublink {
  padding: 0.45rem 0.75rem;
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* Long labels: ellipsis instead of wrapping (full text via the title attr).
   Must exclude .nav-badge — it is a <span> inside the same link, so an
   unqualified rule gave it `flex: 1 1 auto` and stretched the count into a
   wide pill that ate the row. */
.settings-nav__link span:not(.nav-badge) {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Active sub-item: tint only — no accent bar (the sublist has its own rail). */
.settings-nav__sublink.is-active,
.settings-nav__sublink[aria-current="page"] {
  background-color: var(--surface-3);
  color: var(--text-strong);
  box-shadow: none;
  font-weight: 600;
}

/* Keyboard focus ring (inset so the sidebar's overflow can't clip it). */
.settings-nav__link:focus-visible,
.settings-nav__sublink:focus-visible,
.settings-nav__caret:focus-visible,
.app-topbar__toggle:focus-visible,
.account-trigger:focus-visible,
.app-scrim:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

/* Honour reduced-motion for the shell's transitions. */
@media (prefers-reduced-motion: reduce) {
  .app-sidebar,
  :root[data-shell="on"] body,
  .settings-nav__link,
  .settings-nav__caret i,
  .app-topbar__toggle {
    transition: none;
  }
}

/* Alarm badges on nav items: a count when expanded, a dot when collapsed.
   Deliberately small — it is a status marker beside the label, not a button. */
.nav-badge {
  flex: 0 0 auto;
  margin-left: auto;
  min-width: 1.1rem;
  height: 1.1rem;
  padding: 0 0.3rem;
  border-radius: 999px;
  background-color: #dc3545;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
}
/* Only the desktop rail shrinks the badge to a dot; the mobile drawer shows
   full labels + counts (see the drawer width override below). */
@media (min-width: 992px) {
  .app-shell.is-collapsed .nav-badge {
    position: absolute;
    top: 7px;
    right: 12px;
    min-width: 0;
    width: 9px;
    height: 9px;
    padding: 0;
    font-size: 0;
    border: 2px solid var(--surface);
  }
}

/* ============================================================
   App shell — global sidebar navigation (Option A)
   A slim fixed top bar + a fixed, collapsible left sidebar that
   is the primary navigation for every page, with the page body
   in the content area. Reuses the .settings-nav__* item styles
   for the nav entries so both light and dark themes come free.
   ============================================================ */
.app-shell {
  /* Marker class for the chrome wrapper; the metrics below live on :root
     because <body> carries the content offset and is NOT a descendant of
     this element, so it could not read custom properties set here. */
  display: contents;
}
:root[data-shell="on"] {
  --app-topbar-h: 56px;
  --app-sidebar-w: 250px;
}
:root[data-shell="on"][data-shell-collapsed="true"] {
  --app-sidebar-w: 66px;
}

.app-topbar {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--app-topbar-h);
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0 1rem;
  background-color: var(--surface);
  border-bottom: 1px solid var(--border-color);
  z-index: 1030;
}
.app-topbar__toggle {
  border: none;
  background: transparent;
  color: var(--text-strong);
  width: 38px;
  height: 38px;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
}
.app-topbar__toggle:hover {
  background-color: var(--surface-3);
}
.app-topbar__brand {
  display: flex;
  align-items: center;
}
.app-topbar__brand img {
  height: 26px;
  width: auto;
}
.app-topbar__headline {
  color: var(--text-muted);
  font-weight: 600;
  white-space: nowrap;
}
.app-topbar__spacer {
  flex: 1 1 auto;
}
.app-topbar__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background-color: var(--primary);
  color: var(--primary-text-color);
  font-size: 0.8rem;
  font-weight: 600;
}
.app-topbar__nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Mobile drawer backdrop (below the sidebar, above content). */
.app-scrim {
  position: fixed;
  inset: var(--app-topbar-h) 0 0 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1010;
  border: none;
  padding: 0;
  cursor: pointer;
}

.app-sidebar {
  position: fixed;
  top: var(--app-topbar-h);
  bottom: 0;
  left: 0;
  width: var(--app-sidebar-w);
  background-color: var(--surface);
  border-right: 1px solid var(--border-color);
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0.9rem 0.6rem;
  z-index: 1020;
  transition: width 0.16s ease;
}

/* The chrome is fixed and does not wrap the page, so the offset goes on <body>
   instead of a content wrapper: padding-top clears the fixed top bar (the
   in-flow navbar it replaces is not rendered at all), padding-left clears the
   sidebar/rail. Scoped to [data-shell="on"] so none of this applies while the
   feature is un-shipped. */
:root[data-shell="on"] body {
  padding-left: var(--app-sidebar-w);
  padding-top: var(--app-topbar-h);
  transition: padding-left 0.16s ease;
}
/* Correct pages' viewport-based content height for the app top bar
   (replaces the old in-flow navbar the calc originally accounted for). */
:root[data-shell="on"] .content_main {
  height: calc(100vh - var(--app-topbar-h) - 50px - 1rem);
  min-height: 0;
}

/* Collapsed rail: icons only, group labels become dividers. Gated to the
   desktop rail (>= lg): below that the sidebar is a full-width drawer that
   must keep its labels even if the desktop rail is collapsed (--app-sidebar-w
   is overridden in the drawer media query below). */
@media (min-width: 992px) {
  .app-shell.is-collapsed .settings-nav__grouplabel {
    height: 0;
    margin: 0.55rem 0.4rem;
    padding: 0;
    color: transparent;
    overflow: hidden;
    border-top: 1px solid var(--border-subtle);
  }
  .app-shell.is-collapsed .settings-nav__link span:not(.nav-badge) {
    display: none;
  }
  .app-shell.is-collapsed .settings-nav__link {
    justify-content: center;
    padding: 0.6rem 0;
  }
  .app-shell.is-collapsed .settings-nav__caret,
  .app-shell.is-collapsed .settings-nav__sublist {
    display: none;
  }
}

/* Collapsed-rail flyout: a parent's children in a small fixed panel to the
   right of the rail (JS-positioned in AppSidebar.svelte so the rail's
   overflow can't clip it). z-index sits above the rail (1020) and top bar
   (1030). */
.nav-flyout {
  position: fixed;
  z-index: 1050;
  min-width: 190px;
  max-height: calc(100vh - 16px);
  overflow-y: auto;
  padding: 0.4rem;
  background-color: var(--surface);
  border: 1px solid var(--border-color);
  border-radius: 0.6rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}
.nav-flyout__title {
  margin: 0.2rem 0.55rem 0.4rem;
  font-size: 0.7rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 700;
  white-space: nowrap;
}
.nav-flyout ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-flyout__link {
  display: block;
  padding: 0.5rem 0.6rem;
  border-radius: var(--borderRadius-md);
  color: var(--text-strong);
  font-size: 0.9rem;
  text-decoration: none;
  white-space: nowrap;
}
.nav-flyout__link:hover,
.nav-flyout__link:focus,
.nav-flyout__link.is-active,
.nav-flyout__link[aria-current="page"] {
  background-color: var(--surface-3);
  color: var(--text-strong);
  text-decoration: none;
}
.nav-flyout__link:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}
/* Same dark-mode guard as the sidebar links: keep flyout links on the nav
   tokens instead of the global brand-cyan link colour. Scoped to .nav-flyout
   (not .app-sidebar) so it holds wherever the fixed panel sits in the DOM, and
   specificity-matched to the global rule so source order wins. */
[data-theme="dark"] .nav-flyout a.nav-flyout__link {
  color: var(--text-strong);
}

/* Below lg the sidebar becomes an off-canvas drawer over the content. */
@media (max-width: 991px) {
  .app-sidebar {
    /* Full drawer width regardless of the desktop collapse state, so a
       collapsed --app-sidebar-w (66px) can't shrink the drawer to a rail. */
    width: min(84vw, 300px);
    transform: translateX(-100%);
    transition: transform 0.18s ease;
    box-shadow: 6px 0 24px rgba(0, 0, 0, 0.16);
  }
  .app-shell.is-drawer-open .app-sidebar {
    transform: translateX(0);
  }
  :root[data-shell="on"] body {
    padding-left: 0;
  }
}

/* Dark mode: the global `[data-theme="dark"] a:not(.btn):not(.nav-link)` rule
   tints every plain link with the brand colour, which would recolour the
   sidebar labels (and make the active label cyan-on-cyan). Sidebar nav links
   are chrome, not content links — keep them on the nav tokens. Scoped to the
   sidebar container and specificity-matched so it wins on source order.
   Only needed under an explicit dark choice; system-dark uses the base rules. */
[data-theme="dark"] .app-sidebar a.settings-nav__link {
  color: var(--text-strong);
}
[data-theme="dark"] .app-sidebar a.settings-nav__sublink {
  color: var(--text-muted);
}
[data-theme="dark"] .app-sidebar a.settings-nav__link--parent.is-section {
  color: var(--primary);
}
[data-theme="dark"] .app-sidebar a.settings-nav__link.is-active {
  color: var(--text-strong);
}

/* ==========================================================================
   Highcharts on a dark page (MW-463)

   core/ui/chart-theme.js is the right place to colour a chart: it reads the
   theme tokens and hands Highcharts a value per slot. It only reaches charts
   that ASK for it, though, and the two oldest graphs in the product —
   components/WaterMeterGraph.svelte and components/HymoGraph.svelte, the ones
   on Wasserzähler, Hydranten and Trinkwasser-Netzdaten — predate the module
   and still build their options by hand. Neither passes a colour for the
   title, the subtitle, the axis labels, the navigator or the scrollbar, so all
   five keep Highcharts' factory defaults, and every one of those defaults
   describes a white page: #333333 title text, #666666 axis labels, a #cccccc
   scrollbar bar, a #999999 navigator outline and black date labels wearing a
   white contrast outline. On the dark surface that is a dark-grey heading on
   near-black and a bright white scrollbar under the plot.

   Highcharts draws into the page's own DOM rather than a canvas, so a
   stylesheet can reach that SVG — which is what makes this fixable from here
   at all, without touching either graph component. `!important` is required
   because Highcharts writes text colours as INLINE styles on the <text>
   element, and an inline declaration outranks any rule that is not important.
   (The rects and paths carry SVG presentation attributes instead, which lose
   to any declaration; they are marked important only so the whole block reads
   the same way.)

   Two things are deliberately left alone:
     - `.highcharts-axis-line` and `.highcharts-axis-title`. WaterMeterGraph
       colours each y-axis line and title with ITS SERIES' colour, on purpose —
       that is what tells the reader which scale a curve belongs to, and those
       colours are already theme-aware (--chart-1 … --chart-12 are restated in
       the dark block). Overriding them here would erase the one piece of the
       chart that was already right.
     - light mode. Every rule below is scoped to the dark page, so a chart on a
       light page is byte-for-byte what it was before.

   This is a safety net for charts that have not adopted the house shell, not a
   replacement for it: a chart built through `apply_house_style()` gets these
   colours from chart-theme.js in both themes, and these rules simply agree
   with it.
   ========================================================================== */

/* --- Headings and axis furniture --- */
[data-theme="dark"] .highcharts-container .highcharts-title,
[data-theme="dark"] .highcharts-container .highcharts-title tspan {
  fill: var(--text-strong) !important;
  color: var(--text-strong) !important;
}

[data-theme="dark"] .highcharts-container .highcharts-subtitle,
[data-theme="dark"] .highcharts-container .highcharts-subtitle tspan {
  fill: var(--text-muted) !important;
  color: var(--text-muted) !important;
}

/* Both spellings of a label: an ordinary axis renders <text>, while an axis
   with `labels.useHTML` (WaterMeterGraph sets it on every y-axis) renders a
   <span> in an overlay div. Only covering the SVG form would have left the
   water-meter y-axis numbers grey. */
[data-theme="dark"] .highcharts-container .highcharts-axis-labels text,
[data-theme="dark"] .highcharts-container .highcharts-axis-labels text tspan,
[data-theme="dark"] .highcharts-container .highcharts-axis-labels span {
  fill: var(--text-muted) !important;
  color: var(--text-muted) !important;
}

/* Highcharts' "contrast" text outline is a cloned tspan stroked in the colour
   it thinks the background is — white. Left alone it haloes every label on the
   navigator in white. Restroking it with the card colour keeps the outline
   doing its job (separating the label from the mini-series behind it) instead
   of fighting the page. */
[data-theme="dark"] .highcharts-container .highcharts-text-outline {
  stroke: var(--surface) !important;
}

[data-theme="dark"] .highcharts-container .highcharts-grid-line {
  stroke: var(--border-subtle) !important;
}

[data-theme="dark"] .highcharts-container .highcharts-legend-item text,
[data-theme="dark"] .highcharts-container .highcharts-legend-item text tspan {
  fill: var(--text) !important;
  color: var(--text) !important;
}

/* --- The navigator strip (Highstock) --- */
[data-theme="dark"] .highcharts-container .highcharts-navigator-mask-inside,
[data-theme="dark"] .highcharts-container .highcharts-navigator-mask-outside {
  fill: var(--chart-navigator-mask) !important;
}

[data-theme="dark"] .highcharts-container .highcharts-navigator-outline {
  stroke: var(--border-color) !important;
}

[data-theme="dark"] .highcharts-container .highcharts-navigator-handle {
  fill: var(--surface-3) !important;
  stroke: var(--border-color) !important;
}

/* --- The scrollbar under it: the white bar in the report --- */
[data-theme="dark"] .highcharts-container .highcharts-scrollbar-track {
  fill: var(--surface-2) !important;
  stroke: var(--border-color) !important;
}

[data-theme="dark"] .highcharts-container .highcharts-scrollbar-thumb,
[data-theme="dark"] .highcharts-container .highcharts-scrollbar-button {
  fill: var(--surface-3) !important;
  stroke: var(--border-color) !important;
}

[data-theme="dark"] .highcharts-container .highcharts-scrollbar-arrow {
  fill: var(--text) !important;
}

[data-theme="dark"] .highcharts-container .highcharts-scrollbar-rifles {
  stroke: var(--text-muted) !important;
}

/* --- The range selector, and every other chart button --- */
[data-theme="dark"] .highcharts-container .highcharts-range-label text,
[data-theme="dark"] .highcharts-container .highcharts-range-input text {
  fill: var(--text-muted) !important;
  color: var(--text-muted) !important;
}

[data-theme="dark"] .highcharts-container .highcharts-range-input rect {
  fill: var(--input-bg) !important;
  stroke: var(--input-border) !important;
}

[data-theme="dark"] .highcharts-container .highcharts-button-box {
  fill: var(--surface-2) !important;
  stroke: var(--border-color) !important;
}

[data-theme="dark"] .highcharts-container .highcharts-button text,
[data-theme="dark"] .highcharts-container .highcharts-button text tspan {
  fill: var(--text) !important;
  color: var(--text) !important;
}

/* A selected range button keeps the brand fill, like every other selected
   control in the app. */
[data-theme="dark"] .highcharts-container .highcharts-button-pressed .highcharts-button-box {
  fill: var(--primary) !important;
  stroke: var(--primary) !important;
}

[data-theme="dark"] .highcharts-container .highcharts-button-pressed text,
[data-theme="dark"] .highcharts-container .highcharts-button-pressed text tspan {
  fill: var(--primary-text-color) !important;
  color: var(--primary-text-color) !important;
}

/* --- Tooltip ---
   The two old graphs state `rgba(219,219,216,0.8)` outright, which is a pale
   grey card floating over a near-black page. The direct-child selector is the
   point of the text rule: the tooltip's HTML lists each series with a coloured
   bullet in its OWN inline span, and a descendant rule with !important would
   repaint those bullets and destroy the series/row association. */
[data-theme="dark"] .highcharts-container .highcharts-tooltip-box {
  fill: var(--chart-tooltip-bg) !important;
  stroke: var(--border-color) !important;
}

[data-theme="dark"] .highcharts-container .highcharts-tooltip > text,
[data-theme="dark"] .highcharts-container .highcharts-tooltip > span {
  fill: var(--chart-tooltip-text) !important;
  color: var(--chart-tooltip-text) !important;
}