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

  /* ###############################################################################
     FARBPALETTE
     Basisfarben für alle dunklen Layouts - es fehlen nur die jeweiligen Theme-farben
     ############################################################################### */

  --color-shade-none: var(--color-shade-dark-none);
  --color-shade-1: var(--color-shade-dark-1);
  --color-shade-2: var(--color-shade-dark-2);
  --color-shade-3: var(--color-shade-dark-3);
  --color-shade-4: var(--color-shade-dark-4);
  --color-shade-5: var(--color-shade-dark-5);
  --color-shade-6: var(--color-shade-dark-6); /* smallgrey */
  --color-shade-9: var(--color-shade-dark-9);

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

  --color-main-background: var(--color-shade-1);
  --color-main-font: #CCC;
  --color-main-header: #F6F6F6;

  --color-card-background-initial: var(--color-shade-3);
  --color-card-background: var(--color-shade-3);
  --color-card-font-initial: #DDD;
  --color-card-font: #DDD;
  --color-card-header: #F6F6F6;

  --color-toolbar-back: var(--color-card-background);
  --color-toolbar-separator: #999999;
  --color-toolbar-font: #EEEEEE;
  --color-toolbar-button: #888888;
  --color-toolbar-button-hover: #AAAAAA;
  --color-toolbar-font-hover: #FFFFFF;

  --color-tr-lodd: var(--color-tr-lodd-dark, transparent);

  --color-primary-for-text: var(--color-primary-for-text-on-dark, var(--color-primary));
  --color-primary-shade-1: var(--color-primary-darker);
  --color-primary-shade-2: var(--color-primary-darker-2);
  --color-primary-shade-3: var(--color-primary-darker-3);

  /* schrift auf primärfarbe - weiß oder schwarz wahrscheinlich */
  --color-primary-contrast: #222;
  /* schrift auf primärfarbe - weiß oder schwarz wahrscheinlich */
  --color-secondary-contrast: #222;

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

  /* ###############################################################################
     Spezialisierung: Bestimmte UI-Elemente bedienen sich aus der obigen Farbpalette
     Diese Variablen werden in manchen Layouts neu zugewiesen
     ############################################################################### */

  /* Schatten für Karten, boxen, usw */
  --shadow-cards: 0 .5px 2px rgba(0, 0, 0, 1);
  --shadow-sidebar: -1px 0 5px rgba(0, 0, 0, 1);

  --chip-color: rgba(255, 255, 255, 0.3);

  --color-table-separator: rgba(200,200,200,0.25);
  --color-table-back: transparent;
  --color-table-group: var(--color-table-back);

  --color-default-border: rgba(200,200,200,0.25);
  --color-sidebar-border: transparent;

  --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);

  /* einbabe bunt */
  --color-input-label: #888;
  --color-input-border: rgba(from var(--color-input-label) r g b / .5);
  --color-input-font: var(--color-primary-for-text);

  /*!* label bunt *!*/
  /*--color-input-label: var(--color-primary-for-text);*/
  /*--color-input-border: rgba(from var(--color-main-font) r g b / .5);*/
  /*--color-input-font: var(--color-main-font);*/

  --border-input: 1px solid var(--color-input-border);
  /*--border-radius-input: 0px;  !* bei vars dürfen wir die Einheit auch bei 0 nicht weglassen*!*/
  /*--border-radius-input-button: calc(var(--border-radius-input) / 2);*/
  --color-input-background: var(--color-shade-dark-2);
  --color-input-background-readonly: var(--color-main-background);
  --color-input-font-readonly: #888;

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

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

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

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

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

  /*  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);

  /** Die Pfade stimmen, nicht von der IDE verwirren lassen: */
  --ms-signin-de: url(../applications/ms-symbollockup_signin_dark_de.svg);
  --ms-signin-en: url(../applications/ms-symbollockup_signin_dark_en.svg);

}

.cke_top .cke_button:not(:hover) .cke_button_icon { filter: invert(1);}
.cke_top .cke_button:not(:hover) .cke_button_label,
.cke_top .cke_combo_button:not(:hover) .cke_combo_text{
  color: #CCCCCC;
  }

.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;}

html body {
  /*
    Im Darkmode gibts auch dunkle Scrollbalken
  */

  --color-scrollbar-track: rgba(64,64,64,0.75);
  --color-scrollbar-handle: rgba(128,128,128,0.75);
}


off_html body:not(.mobile-device) * {
  /* Scrollbar: firefox, könnte W3C-Standard werden */
  scrollbar-color: var(--color-scrollbar-handle) var(--color-scrollbar-track);
}

/* Scrollbar: nicht-standard-selectoren für webkit und chrome */
off_html body:not(.mobile-device) *::-webkit-scrollbar { width: 16px; }
off_html body:not(.mobile-device) *::-webkit-scrollbar-track {background-color: var(--color-scrollbar-track);}
off_html body:not(.mobile-device) *::-webkit-scrollbar-track-piece {background: var(--color-scrollbar-track);}
off_html body:not(.mobile-device) *::-webkit-scrollbar-thumb {background-color: var(--color-scrollbar-handle); width: 12px; border: 2px solid var(--color-scrollbar-track); border-radius: 8px;}       /* 5 */