@charset "UTF-8";
:root{ color-scheme: light;} /* Damit der Browser Toolbars etc entsprechend rendert */

body {

    /* ###############################################################################
       FARBPALETTE
       Basisfarben für alle hellen Layouts - es fehlen nur die jeweiligen Theme-farben
       ############################################################################### */
    --color-shade-none: var(--color-shade-light-none);
    --color-shade-1:    var(--color-shade-light-1);
    --color-shade-2:    var(--color-shade-light-2);
    --color-shade-3:    var(--color-shade-light-3);
    --color-shade-4:    var(--color-shade-light-4);
    --color-shade-5:    var(--color-shade-light-5);
    --color-shade-6:    var(--color-shade-light-6); /* smallgrey */
    --color-shade-9:    var(--color-shade-light-9);

    --color-shade-none-contrast: var(--color-shade-dark-4);
    --color-shade-1-contrast:    var(--color-shade-dark-3);
    --color-shade-2-contrast:    var(--color-shade-dark-2);
    --color-shade-3-contrast:    var(--color-shade-dark-1);
    --color-shade-4-contrast:    var(--color-shade-dark-none);
    --color-shade-9-contrast:    var(--color-shade-light-none);

    /* Eine leere Seite, die Leinwand unserer App*/
    --color-main-background: var(--color-shade-1);
    --color-main-font: #484848;
    --color-main-header: #333;

    /* Grafische Benutzerinterface-Elemente: Dialoge, Popups, Listen */
    --color-card-background-initial: #FFFFFF;
    --color-card-background: #FFFFFF;
    --color-card-font-initial: #484848;
    --color-card-font: #484848;
    --color-card-header: #333;

    /* Toolbars und Header für grafische Benutzerinterface-Elemente */
    --color-toolbar-back: #E1E1E1;
    --color-toolbar-font: #646464;
    --color-toolbar-separator: #CCC;
    --color-toolbar-button: #e1e0e5;
    --color-toolbar-button-hover: #CCC;
    --color-toolbar-font-hover: #333;
    --color-tr-lodd: var(--color-tr-lodd-light, transparent);

    --color-secondary-for-text: var(--color-secondary-for-text-on-light);

  /* ###############################################################################
     Spezialisierung: Bestimmte UI-Elemente bedienen sich aus der obigen Farbpalette
     Diese Variablen werden in manchen Layouts neu zugewiesen
     ############################################################################### */
    --chip-color: rgba(128,128,128,0.125);

    --color-default-border: #eceff1;
    --color-sidebar-border: #f2f2f2;
    --color-table-separator: #e1e0e5;
    --color-table-back: transparent;
    --color-table-group: var(--color-table-back);
    --color-footer-back: var(--color-toolbar-back);
    --color-footer-font: var(--color-toolbar-font);
    --color-quickfilter-back: var(--color-shade-1);
    --color-quickfilter-font: var(--color-shade-1-contrast);

    /* Inputs */
    --border-input: 1px solid currentColor;
    --border-radius-input: 0px; /* bei vars dürfen wir die Einheit auch bei 0 nicht weglassen*/
    --border-radius-input-button: var(--border-radius-input);
    --color-input-font: inherit;
    --color-input-background: var(--color-card-background);
    --color-scrollbar-track: rgba(200,200,200,0.5);
    --color-scrollbar-handle: rgba(64,64,64,0.75);


    --color-status-blue: var(--color-status-blue-light);
    --color-status-green: var(--color-status-green-light);
    --color-status-yellow: var(--color-status-yellow-light);
    --color-status-red: var(--color-status-red-light);
    --color-status-orange: var(--color-status-orange-light);
    --color-status-grey: var(--color-status-grey-light);
    --color-tint-blue: var(--color-tint-blue-light);
    --color-tint-green: var(--color-tint-green-light);
    --color-tint-yellow: var(--color-tint-yellow-light);
    --color-tint-red: var(--color-tint-red-light);
    --color-tint-orange: var(--color-tint-orange-light);
    --color-tint-grey: var(--color-tint-grey-light);

    --color-default-hover:  var(--color-default-hover-light);
    --color-default-hover-contrast: #333;
    --color-current-item: var(--color-current-item-light);
    --color-selected-item: var(--color-selected-item-light);
    --color-selected-item-hover: var(--color-selected-item-hover-light);
    --color-tint-0125: var(--color-tint-light-0125);
    --color-tint-25: var(--color-tint-light-25);
    --color-tint-50: var(--color-tint-light-50);
    --color-tint-75: var(--color-tint-light-75);
    --color-tint-contrast-00625: var(--color-tint-dark-00625);
    --color-tint-contrast-0125: var(--color-tint-dark-0125);
    --color-tint-contrast-25: var(--color-tint-dark-25);
    --color-tint-contrast-50: var(--color-tint-dark-50);
    --color-tint-contrast-75: var(--color-tint-dark-75);
    --color-tint-weekend: var(--color-tint-weekend-light);
    --color-tint-holiday: var(--color-tint-holiday-light);
    --color-tint-vacation: var(--color-tint-vacation-light);
    --color-tint-vacation-request: var(--color-tint-vacation-request-light);
    --color-tint-sick: var(--color-tint-sick-light);
    --color-tint-birthday: var(--color-tint-birthday-light);
    --color-tint-extern: var(--color-tint-extern-light);
    --color-board-card: var(--color-board-card-light);
    --color-font-weekend: var(--color-font-weekend-light);
    --color-worker-cap-free: var(  --color-worker-cap-free-light);
    --color-worker-cap-error: var(--color-worker-cap-error-light);
    --color-worker-cap-time: var(--color-worker-cap-time-light);

    --color-tint-mark-bg-1: var(--color-tint-mark-bg-1-light);
    --color-tint-mark-bg-2: var(--color-tint-mark-bg-2-light);
    --color-tint-mark-bg-3: var(--color-tint-mark-bg-3-light);
    --color-tint-mark-bg-4: var(--color-tint-mark-bg-4-light);
    --color-tint-mark-bg-5: var(--color-tint-mark-bg-5-light);

    --backdrop-filter-ui: var(--backdrop-filter-ui-light);

    /*  Chart Color */
    --color-chart-0:  var(--color-chart0);
    --color-chart-1:  var(--color-chart1);
    --color-chart-2:  var(--color-chart2);
    --color-chart-3:  var(--color-chart3);
    --color-chart-4:  var(--color-chart4);
    --color-chart-5:  var(--color-chart5);
    --color-chart-6:  var(--color-chart6);
    --color-chart-7:  var(--color-chart7);
    --color-chart-8:  var(--color-chart8);
    --color-chart-9:  var(--color-chart9);
    --color-chart-10: var(--color-chart10);

    --ms-signin-de: url(../applications/ms-symbollockup_signin_light_de.svg);
    --ms-signin-en: url(../applications/ms-symbollockup_signin_light_en.svg);
}

.jml-tile-header-dark, .jml-tile-dark, .dark {--color-secondary-for-text: var(--color-secondary-for-text-on-dark); --color-card-font: #DDD;}
.jml-imagetile, .jml-imagetile .jml-tile-header-dark,.jml-imagetile .jml-tile-dark {--color-secondary-for-text: var(--color-secondary-for-text-on-dark); --color-card-font: #FFF;}
.jml-tile-header-light, .jml-tile-light, .light {--color-secondary-for-text: var(--color-secondary-for-text-on-light);--color-card-font: #333;}
.jml-tile-header-dark.twilight, .jml-tile-dark.twilight, .dark.twilight {--color-secondary-for-text: #FFF; --color-card-font: #FFF;}
.jml-tile-header-light.twilight, .jml-tile-light.twilight, .light.twilight {--color-secondary-for-text: #000; --color-card-font: #000;}