@charset "UTF-8";

:root {
    /*Quasar*/
    --q-primary: #00205B;
    --q-secondary: #00205B;
    --q-accent: #E7194F;
    --q-dark: #1D1D1D;
    --q-dark-page: #121212;
    --q-positive: #2E7B32;
    --q-negative: #D32F2F;
    --q-info: var(--q-primary);
    --q-warning: #BF5900;
    /*Global Quasar Effekte Nachbau*/
    --white-12-on-global-primary-color: #3D5582;
    /* weißer Overlay mit 12% Deckkraft auf q-primary */
    --global-primary-color-12: #E0E4EB;
    /* global-primary-color mit 12% Deckkraft */
    --global--primary-color-70: #7F8FAC;
    /* deactivated */
    --white-12-on-global-secondary-color: #3D5582;
    /* weißer Overlay mit 12% Deckkraft auf q-secondary */
    --global-secondary-color-12: #E0E4EB;
    /* global-secondary-color mit 12% Deckkraft */
    --global-secondary-color-70: #7F8FAC;
    /* deactivated */
    /*Global*/
    --global-font-title: "Encode Sans", Helvetica, arial, sans-serif;
    /*Schriftart Überschrift*/
    --global-font-content: "Open Sans", Helvetica, arial, sans-serif;
    /*Schriftart Text*/
    --global-h1-font: var(--global-font-title);
    /*Überschrift h1 Schriftart*/
    --global-h1-font-size: 32px;
    /*Überschrift h1 Schriftgröße*/
    --global-h1-font-size-responsive: 32px;
    /*Überschrift h1 Schriftgröße small*/
    --global-h1-font-color: var(--global-primary-color);
    /*Überschrift h1 Schriftfarbe*/
    --global-h1-font-weight: 700;
    /*Überschrift h1 Schriftstärke*/
    --global-h1-margin-bottom: 1rem;
    /*Abstand unter h1*/
    --global-h2-font: var(--global-font-title);
    /*Überschrift h2 Schriftart*/
    --global-h2-font-size: 1.875rem;
    /*Überschrift h2 Schriftgröße*/
    --global-h2-font-color: var(--global-primary-color);
    /*Überschrift h2 Schriftfarbe*/
    --global-h2-font-weight: 700;
    /*Überschrift h2 Schriftstärke*/
    --global-h2-margin-bottom: 1rem;
    /*Abstand unter h1*/
    --global-h4-font: var(--global-font-title);
    /*Überschrift h4 Schriftart*/
    --global-h4-font-size: 1.5rem;
    /*Überschrift h4 Schriftgröße*/
    --global-h4-font-color: var(--global-primary-color);
    /*Überschrift h4 Schriftfarbe*/
    --global-h4-font-weight: 700;
    /*Überschrift h4 Schriftstärke*/
    --global-h4-margin-bottom: 1rem;
    /*Abstand unter h1*/
    --global-text-font: var(--global-font-content);
    /*Text Schriftart*/
    --global-text-font-size: 16px;
    /*Text Schriftgröße*/
    --global-text-font-weight: normal;
    /*Text Schriftstärke*/
    --global-text-font-color: #222;
    /*Text Schriftfarbe*/
    --global-text-font-secondary-color: #707070;
    /*Zweite Text Schriftfarbe*/
    --global-caption-font-size: 0.813rem;
    /*Caption Schriftgröße*/
    --global-primary-color: var(--q-primary);
    /*Erste Hauptfarbe des Kunden*/
    --global-secondary-color: var(--q-secondary);
    /*Zweite Hauptfarbe des Kunden*/
    --global-tertiary-color: var(--q-accent);
    /*Dritte Hauptfarbe des Kunden*/
    --global-header-background: #fff;
    /*Hintergrundfarbe Header*/
    --global-main-content-background: #fff;
    /*Hintergrundfarbe Main-Content*/
    --global-content-background: #FFF;
    /*Hintergrundfarbe Content*/
    --global-content-shadow: 0px 2px 6px 2px rgba(0, 0, 0, 0.16), 0px 1px 2px 0px rgba(0, 0, 0, 0.30);
    /*Schatten Content*/
    --global-footer-background: var(--global-primary-color);
    /*Hintergrundfarbe Footer*/
    --global-footer-font-color: #fff;
    /*Schriftfarbe Footer*/
    --global-border: 1px solid var(--global-content-background);
    /*Rahmen*/
    --global-border-radius: 3px;
    /*Rahmenradius*/
    --global-divider-color: #ccc;
    /*Farbe Trennlinie */
    --global-disabled-color: #bbb;
    /*Farbe deaktiviert*/
    --global-background-darker: #F1F6FA;
    /*Hintergrund Hervorheben vom Content*/
    --global-background-important: #F1F6FA;
    /*Hintergrund Hervorheben vom Content*/
    --global-focus-visible-outline: 2px solid #000;
    /* Outline für sichtbaren Focus */
    --global-focus-visible-box-shadow: 0 0 0 4px #fff;
    /* Box-Shadow für sichtbaren Focus */
    /*Button Primary*/
    --button-font: var(--global-font-content);
    /*Schriftart Button*/
    --button-font-size: 14px;
    /*Button Schriftgröße*/
    --button-font-weight: 500;
    /*Button Schriftstärke*/
    --button-letter-spacing: .1em;
    /*Button Zeichenabstand*/
    --button-text-transform: none;
    /*Button Groß-/Kleinschreibung*/
    --button-border-radius: var(--global-border-radius);
    /*Button Rahmen Rundung*/
    --button-transition: .3s ease-in-out 0s;
    /*Button Animation*/
    --button-padding: 12px 16px;
    /*Button Rahmen Padding*/
    --button-width: auto;
    /*Button Breite*/
    --button-primary-font-color: #fff;
    /*Button Primary Schriftfarbe*/
    --button-primary-font-color-hover: #fff;
    /*Button Primary Schriftfarbe hover*/
    --button-primary-font-color-disabled: #fff;
    /*Button Primary Schriftfarbe gesperrt*/
    --button-primary-background: var(--global-secondary-color);
    ;
    /*Button Primary Hintergrund*/
    --button-primary-background-hover: var(--white-12-on-global-secondary-color);
    /*Button Primary Hintergrund hover*/
    --button-primary-background-disabled: var(--global--primary-color-70);
    /*Button Primary Hintergrund gesperrt*/
    --button-primary-border: 1px solid var(--global-secondary-color);
    /*Button Primary Rahmen*/
    --button-primary-border-hover: 1px solid var(--white-12-on-global-secondary-color);
    /*Primary hover Rahmen Button*/
    --button-primary-border-disabled: var(--global--primary-color-70);
    /*Button Primary Rahmen gesperrt */
    --button-primary-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.20);
    /*Button Primary Schatten*/
    --button-primary-shadow-hover: 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.20);
    /*Button Primary Schatten hover*/
    /*Button Secondary*/
    --button-secondary-font-color: var(--global-secondary-color);
    /*Button Secondary Schriftfarbe*/
    --button-secondary-font-color-hover: var(--global-secondary-color);
    /*Button Secondary Schriftfarbe hover*/
    --button-secondary-background: #fff;
    /*Button Secondary Hintergrund*/
    --button-secondary-background-hover: var(--global-secondary-color-12);
    /*Button Secondary Hintergrund hover*/
    --button-secondary-border: 1px solid var(--global-secondary-color);
    /*Button Secondary Rahmen*/
    --button-secondary-border-hover: 1px solid var(--global-secondary-color);
    /*Button Secondary Rahmenfarbe*/
    --button-secondary-shadow: var(--button-primary-shadow);
    /*Schatten Button Secondary*/
    --button-secondary-shadow-hover: var(--button-primary-shadow-hover);
    /*Schatten Button Secondary*/
    /*Button Flat*/
    --button-flat-font-color: var(--global-secondary-color);
    /*Button Flat Schriftfarbe*/
    /*Button Icon*/
    --button-icon-font-size: 1.25rem;
    /*Icon Button Schriftgröße */
    --button-icon-font-color: var(--button-primary-font-color);
    /*Icon Button Schriftfarbe */
    --button-icon-font-color-hover: var(--button-primary-font-color-hover);
    /*Icon Button Schriftfarbe hover*/
    --button-icon-font-color-disabled: var(--button-primary-font-color-disabled);
    /*Icon Button Schriftfarbe gesperrt*/
    --button-icon-background: var(--button-primary-background);
    /*Icon Button Hintergrund */
    --button-icon-background-hover: var(--button-primary-background);
    /*Icon Button Hintergrund  hover*/
    --button-icon-background-disabled: var(--button-primary-background-disabled);
    /*Icon Button Hintergrund gesperrt*/
    --button-icon-border: 1px solid var(--button-primary-border);
    /*Icon Button Rahmen */
    --button-icon-border-hover: 1px solid var(--button-primary-border-hover);
    /*Icon Button Rahmen hover*/
    --button-icon-border-disabled: var(--button-primary-border-disabled);
    /*Icon Button Rahmen gesperrt*/
    --button-icon-shadow: var(--button-primary-shadow);
    /*Icon Button Schatten*/
    --button-icon-shadow-hover: var(--button-primary-shadow-hover);
    /*Icon Button Schatten hover*/
    /*Button Text*/
    --button-text-font-color: var(--global-secondary-color);
    /*Button Text Schriftfarbe*/
    --button-text-font-color-hover: var(--global-secondary-color);
    /*Button Text Schriftfarbe hover*/
    --button-text-font-color-disabled: var(--global-secondary-color-70);
    /*Button Text Schriftfarbe inaktiv*/
    --button-text-background: transparent;
    /*Button Text Hintergrund*/
    --button-text-background-hover: var(--global-secondary-color-12);
    /*Button Text Hintergrund hover*/
    /*Header*/
    --header-border-bottom: 0;
    /*Header Trennlinie*/
    --header-shadow: 0 2px 3px rgb(0 0 0 / 3%);
    /*Header Schatten*/
    --header-box-background-color: var(--global-background-important);
    /*Headerbox Hintergrund*/
    --header-box-border: none;
    /*Headerbox Rahmen*/
    --header-box-border-radius: var(--global-border-radius);
    /*Headerbox Rahmen Rundung*/
    --header-box-shadow: 0px 2px 6px 2px rgba(0, 0, 0, 0.16), 0px 1px 2px 0px rgba(0, 0, 0, 0.30);
    /*Headerbox Schatten*/
    /*Anchor*/
    --anchor-color: var(--global-secondary-color);
    /*Link Schriftfarbe*/
    --anchor-text-decoration: underline;
    /*Link Dekoration*/
    --anchor-color-hover: var(--white-12-on-global-secondary-color);
    /*Link Schriftfarbe hover*/
    --anchor-text-decoration-hover: underline;
    /*Link Dekoration hover*/
    /*Input*/
    --input-field-padding: 14px 10px;
    /*Inputfeld innerer Abstand*/
    --input-field-selectbox-padding: 13px 10px;
    /*Selectbox innerer Abstand*/
    --input-field-background: #fff;
    /*Inputfeld Hintergrund*/
    --input-field-background-hover: #fff;
    /*Inputfeld Hintergrund hover*/
    --input-field-background-disabled: #eee;
    /*Inputfeld Hintergrund gesperrt*/
    --input-field-border: 1px solid #9b9b9b;
    /*Inputfeld Rahmen*/
    --input-field-border-hover: 1px solid var(--global-text-font-color);
    /*Inputfeld Rahmen hover*/
    --input-field-border-disabled: 1px solid transparent;
    /*Inputfeld Rahmen gesperrt*/
    --input-field-border-radius: var(--global-border-radius);
    /*Inputfeld Rahmen Rundung*/
    --input-field-font-family: var(--global-font-content);
    /*Inputfeld Schriftart*/
    --input-field-font-size: .875em;
    /*Inputfeld Schrfitgröße*/
    --input-field-font-color: var(--global-text-font-color);
    /*Inputfeld Schriftfarbe*/
    --input-field-font-color-disabled: #666;
    /*Inputfeld Schriftfarbe gesperrt*/
    --input-field-box-shadow: none;
    /*Inputfeld Schatten*/
    --input-field-box-shadow-hover: none;
    /*Inputfeld Schatten*/
    --input-field-box-shadow-disabled: inset 0 1px 1px #eee;
    /*Inputfeld Schatten gesperrt*/
    /*Tab*/
    --tab-background-color: transparent;
    /*Tab Hintergrundfarbe*/
    --tab-font-color: var(--global-text-font-secondary-color);
    /*Tab Schriftfarbe*/
    --tab-background-color-active: #fff;
    /*Tab Hintergrundfarbe aktiv*/
    --tab-font-color-active: var(--global-text-font-color);
    /*Tab Schriftfarbe aktiv*/
    --tab-background-color-hover: transparent;
    /*Tab Hintergrundfarbe hover*/
    --tab-font-color-hover: var(--global-primary-color);
    /*Tab Schriftfarbe hover*/
    --tab-border: 2px solid var(--global-text-font-secondary-color);
    /*Tab Rahmen unten*/
    --tab-border-active: 4px solid var(--global-tertiary-color);
    /*Tab Rahmen unten aktiv*/
    /*Menü Responsive*/
    --menu-icon-font-color: var(--global-text-font-color);
    /*Menü Icon Schriftfarbe*/
    --menu-icon-font-color-hover: var(--global-text-font-color);
    /*Menü Icon Schriftfarbe hover*/
    --menu-item-font-color: var(--global-text-font-color);
    /*Menü Schriftfarbe*/
    --menu-item-font-color-hover: var(--global-text-font-color);
    /*Menü Schriftfarbe hover*/
    --menu-item-font-size: 15px;
    /*Menü Schriftgröße*/
    --menu-item-border: 1px solid #CCC;
    /*Menü Rahmen*/
    --menu-item-background-color: #fff;
    /*Menü Hintergrundfarbe*/
    --menu-item-background-color-hover: var(--global-primary-color-12);
    /*Menü Hintergrundfarbe hover*/
    /*Sidebar*/
    --menu-sidebar-icon-font-color: var(--global-text-font-color);
    /*Sidebar Icon Schriftfarbe*/
    --menu-sidebar-item-font-color: var(--global-text-font-color);
    /*Sidebar Menü Schriftfarbe*/
    --menu-sidebar-item-font-color-active: #fff;
    /*Sidebar Menü Schriftfarbe aktiv*/
    --menu-sidebar-item-font-color-hover: var(--global-text-font-color);
    /*Sidebar Menü Schriftfarbe hover*/
    --menu-sidebar-item-background-color: transparent;
    /*Sidebar Menü Hintergrundfarbe*/
    --menu-sidebar-item-background-color-active: var(--global-primary-color);
    /*Sidebar Menü Hintergrundfarbe aktiv*/
    --menu-sidebar-item-background-color-hover: var(--global-background-darker);
    /*Sidebar Menü Hintergrundfarbe hover*/
    --menu-sidebar-item-border: 1px solid var(--global-primary-color);
    /*Sidebar Menü Rahmen*/
    --menu-sidebar-item-border-radius: var(--global-border-radius);
    /*Sidebar Menü Rahmen Rundung*/
    --menu-sidebar-bubble-background-color: var(--global-tertiary-color);
    /*Sidebar Bubble Hintergrundfarbe*/
    --menu-sidebar-bubble-text-color: #fff;
    /*Sidebar Bubble Schriftfarbe*/
    /*Tables*/
    --table-background-color: #FFF;
    /*Tabelle Hintergrundfarbe*/
    --table-header-background-color: #F4F4F4;
    /*Tabellenüberschriften Hintergrundfarbe*/
    --table-header-color: var(--global-text-font-color);
    /*Tabellenüberschriften Schriftfarbe*/
    --table-input-padding: 7px 5px;
    /*Tabelle Inputfeld Innenabstand*/
    --table-cell-divider: 1px solid var(--global-divider-color);
    /*Tabelle Trennlinie*/
    --table-content-highlight: var(--global-secondary-color-12);
    /*Tabelleneintrag Markierung*/
    /*Content - overview*/
    --overview-tile-background-color: var(--global-background-darker);
    /*Kachel Hintergrundfarbe*/
    --overview-tile-background-color-hover: #fff;
    /*Kachel Hintergrundfarbe hover*/
    --overview-tile-border: 1px solid var(--global-background-darker);
    /*Kachel Rahmen*/
    --overview-tile-border-hover: 1px solid #fff;
    /*Kachel Rahmen hover*/
    --overview-tile-border-radius: var(--global-border-radius);
    /*Kachel Rahmen Rundung*/
    --overview-tile-icon-color: var(--global-primary-color);
    /*Kachel Icon Farbe*/
    --overview-tile-shadow: 0px 2px 6px 2px rgba(0, 0, 0, 0.16), 0px 1px 2px 0px rgba(0, 0, 0, 0.30);
    /*Kachel Schatten*/
    /*Messagebox*/
    --messagebox-title-background-color: var(--global-primary-color);
    /*Dialog Titel Hintergrundfarbe*/
    --messagebox-title-color: #fff;
    /*Dialog Titel Schriftfarbe*/
    /*Chips*/
    --chip-background-color: var(--global-primary-color);
    /*Filter Chip Hintergrundfarbe*/
    --chip-background-color-hover: var(--white-12-on-global-primary-color);
    /*Filter Chip Hintergrundfarbe*/
    --chip-border-color: var(--global-primary-color);
    /*Filter Chip Rahmenfarbe*/
    --chip-border-color-hover: var(--white-12-on-global-primary-color);
    /*Filter Chip Rahmenfarbe hover*/
    --chip-remove-icon-color: #FFF;
    /*Filter Chip Löschen Schriftfarbe*/
    /*Bar*/
    --bar-background-color: var(--global-background-darker);
    /*Postbox Menü Hintergrundfarbe*/
    --bar-item-font-color: var(--global-text-font-color);
    /*Postbox Menü Eintrag aktiv*/
    --bar-item-active-color: var(--global-secondary-color);
    /*Postbox Menü Eintrag aktiv*/
    --bar-item-background-color-hover: var(--global-secondary-color-12);
    /*Postbox Menü Eintrag hover*/
    /*Components*/
    --card-border: 0;
    /*Card Rahmen*/
    --card-border-radius: var(--global-border-radius);
    /*Card Rahmen Rundung*/
    --card-box-shadow: 0px 2px 6px 2px rgba(0, 0, 0, 0.16), 0px 1px 2px 0px rgba(0, 0, 0, 0.30);
    /*Card Schatten*/
    --card-box-shadow-margin: 4px 6px 6px 6px;
    /*Extra Margin für Card Schatten in 'overflow:hidden' Situationen*/
    --card-background-color-selected: var(--global-background-darker);
    --card-padding: 1.5rem;
    /*Card innerer Abstand*/
    --card-vertical-gap: 20px;
    /*Card vertikaler Abstand*/
    --list-item-alterating-background-color: var(--global-background-darker);
    /*Card Alternate*/
    --sidebar-content-padding: 12px;
    --sidebar-header-margin: 12px;
    /*Energiearten*/
    --energy-electricity-color: var(--global-primary-color);
    --energy-gas-color: var(--global-primary-color);
    --energy-water-color: var(--global-primary-color);
    --energy-wastewater-color: var(--global-primary-color);
    --energy-heat-color: var(--global-primary-color);
    --energy-other-color: var(--global-primary-color);
    /*Chart*/
    --chart-series-color: #CECECE;
    /* z.B Linienfarbe, Balkenfüllung, gestrichelte Balkenoutline */
    --chart-current-time-data-color: #072955;
    /* z.B. jetzige Stunde, heutiger Tag, aktueller Monat, aktuelles Jahr */
    --chart-average-color: #A659AA;
    /* z.B. durschschnittliche Leistung, Verbrauch, Kosten, Preis */
    --chart-most-positive-color: #59A99B;
    /* z.B. geringste Leistung, Verbrauch, Kosten, Preis */
    --chart-most-negative-color: #E02B33;
    /* z.B. höchste Leistung, Verbrauch, Kosten, Preis */
    --chart-trend-line-color: #F0C572;
    /* z.B. Trendlinie Leistung, Verbrauch, Kosten, Preis */
    --chart-series-stroke: 4px;
    /* z.B Balkenstärke */
    /*Time Values Chart*/
    --chart-time-values-base-height-for-small-width: 300px;
    --chart-time-values-base-height-for-medium-width: 500px;
    --chart-time-values-base-height-for-large-width: 500px;
    --chart-time-values-additional-height-for-wide-horizontal-axis: 100px;
    --chart-time-values-additional-height-for-narrow-horizontal-axis: 20px;
    /*Consumption Chart*/
    --chart-consumption-series-color: #072955;
    /* Gesamtverbrauch im Diagramm der Verbrauchsübersicht und Verbrauch Medium #1 im Verbrauchsdiagramm der Unterjährigen Verbrauchsinformation */
    --chart-consumption-2-series-color: #E02B33;
    /* Verbrauch Medium #1 Diagramm der Verbrauchsübersicht und Verbrauch Medium #2 im Verbrauchsdiagramm der Unterjährigen Verbrauchsinformation */
    --chart-consumption-3-series-color: #F0C572;
    /* Verbrauch Medium #2 Diagramm der Verbrauchsübersicht und Verbrauch Medium #3 im Verbrauchsdiagramm der Unterjährigen Verbrauchsinformation */
    --chart-consumption-price-series-color: #072955;
    /* Dynamischer Preis im Diagramm der Verbrauchsdetails */
    /*Cost Chart*/
    --chart-cost-series-color: #072955;
    /* Kosten Medium #1 im Kostendiagramm der Unterjährigen Verbrauchsinformation */
    --chart-cost-2-series-color: #E02B33;
    /* Kosten Medium #2 im Kostendiagramm der Unterjährigen Verbrauchsinformation */
    --chart-cost-3-series-color: #F0C572;
    /* Kosten Medium #3 im Kostendiagramm der Unterjährigen Verbrauchsinformation */
    /*Price Chart*/
    --chart-price-series-color: #072955;
    /* Preis im Preisdiagramm */
}