:root {
    --rgbP0: 119, 187, 0; /* GRUNDTON PRIMARY*/
    --rgbPL1: 140, 208, 41; /* Abstufungen hell*/
    --rgbPL2: 160, 228, 64;
    --rgbPL3: 174, 240, 94;
    --rgbPL4: 190, 243, 117;
    --rgbPL5: 213, 243, 171; /* Abstufung heller*/
    --rgbPD1: 99, 136, 34; /* Abstufungen dunkel */
    --rgbPD2: 88, 121, 30;
    --rgbPD3: 77, 106, 26;
    --rgbPD4: 66, 91, 23;
    --rgbPD5: 55, 75, 19; /* Abstufunden dunkler */
    --rgbWhite: 255, 255, 255;
    --rgbBlack: 0, 0, 0;
    --accentTheme: rgb(var(--rgbP0));
    --accentThemeTxt: white; 
    /* secondary RGB: */
    --rgbS0: 123, 123, 129; /* GRUNDTON SECONDARY */
    --rgbSL1: 149, 149, 153; /* Abstufungen hell*/
    --rgbSL2: 175, 175, 179;
    --rgbSL3: 202, 202, 204;
    --rgbSL4: 228, 228, 230;
    --rgbSL5: 247, 247, 247; /* Abstufung heller*/
    --rgbSD1: 110, 110, 115; /* Abstufungen dunkel */
    --rgbSD2: 98, 98, 102;
    --rgbSD3: 86, 86, 89;
    --rgbSD4: 73, 73, 76;
    --rgbSD5: 61, 61, 64; /* Abstufunden dunkler */
    /* lighter-varianten aus w3 unten kopiert */
    --accentThemeL0: var(--accentTheme);
    --accentThemeL1: rgb( var(--rgbPL1));
    --accentThemeL2: rgb( var(--rgbPL2));
    --accentThemeL3: rgb( var(--rgbPL3));
    --accentThemeL4: rgb( var(--rgbPL4));
    --accentThemeL5: rgb( var(--rgbPL5));
    --accentThemeL1txt: rgb( var(--rgbBlack));
    --accentThemeL2txt: rgb( var(--rgbBlack));
    --accentThemeL3txt: rgb( var(--rgbBlack));
    --accentThemeL4txt: rgb( var(--rgbBlack));
    --accentThemeL5txt: rgb( var(--rgbBlack));
    --accentThemeD0: var(--accentTheme);
    --accentThemeD1: rgb( var(--rgbPD1));
    --accentThemeD2: rgb( var(--rgbPD2));
    --accentThemeD3: rgb( var(--rgbPD3));
    --accentThemeD4: rgb( var(--rgbPD4));
    --accentThemeD5: rgb( var(--rgbPD5));
    --accentThemeD1txt: rgb( var(--rgbWhite));
    --accentThemeD2txt: rgb( var(--rgbWhite));
    --accentThemeD3txt: rgb( var(--rgbWhite));
    --accentThemeD4txt: rgb( var(--rgbWhite));
    --accentThemeD5txt: rgb( var(--rgbWhite));
    /* einstellen was generell "hell" und "dunkel" aus dem Schema sein soll: */
    --accentThemeLight: var(--accentThemeL4);
    --accentThemeLightTxt: var(--accentThemeL4txt);
    --accentThemeDark: var(--accentThemeD5);
    --accentThemeDarkTxt: var(--accentThemeD5txt);
    /* Graustufen */
    --secondaryTheme: var(--mds-gray); /* Grundton, daraus Theme erstellen: https://www.w3schools.com/w3css/w3css_color_generator.asp */
    --secondaryThemeTxt: rgb( var(--rgbWhite));
    /* lighter-varianten aus w3 unten kopiert */
    --secondaryThemeL0: var(--secondaryTheme);
    --secondaryThemeL1: rgb( var(--rgbSL1));
    --secondaryThemeL2: rgb( var(--rgbSL2));
    --secondaryThemeL3: rgb( var(--rgbSL3));
    --secondaryThemeL4: rgb( var(--rgbSL4));
    --secondaryThemeL5: rgb( var(--rgbSL5));
    --secondaryThemeL1txt: rgb( var(--rgbWhite));
    --secondaryThemeL2txt: rgb( var(--rgbBlack));
    --secondaryThemeL3txt: rgb( var(--rgbBlack));
    --secondaryThemeL4txt: rgb( var(--rgbBlack));
    --secondaryThemeL5txt: rgb( var(--rgbBlack));
    --secondaryThemeD0: var(--secondaryTheme);
    --secondaryThemeD1: rgb( var(--rgbSD1));
    --secondaryThemeD2: rgb( var(--rgbSD2));
    --secondaryThemeD3: rgb( var(--rgbSD3));
    --secondaryThemeD4: rgb( var(--rgbSD4));
    --secondaryThemeD5: rgb( var(--rgbSD5));
    --secondaryThemeD1txt: rgb( var(--rgbWhite));
    --secondaryThemeD2txt: rgb( var(--rgbWhite));
    --secondaryThemeD3txt: rgb( var(--rgbWhite));
    --secondaryThemeD4txt: rgb( var(--rgbWhite));
    --secondaryThemeD5txt: rgb( var(--rgbWhite));
    /* einstellen was generell "hell" und "dunkel" aus dem Schema sein soll: */
    --secondaryThemeLight: var(--secondaryThemeL4);
    --secondaryThemeLightTxt: var(--secondaryThemeL4txt);
    --secondaryThemeDark: var(--secondaryThemeD5);
    --secondaryThemeDarkTxt: var(--secondaryThemeD5txt);
    /* Themen Ende */
    /* ---------------------------------------------------------------------------------------*/
    /* alte Variablennamen */
    --primary: var(--accentTheme);
    --primaryText: var(--accentThemeTxt);
    --secondary: var(--secondaryTheme);
    --secondaryText: var(--secondaryThemeTxt);
    --tertiary: var(--secondaryThemeL3);
    --tertiaryText: var(--secondaryThemeL3txt);
    /* spezial: */
    --currentColor: var(--mds-gray);
    --currentTextcolor: var(--primaryText);
    --special: var(--accentThemeL2);
    --specialText: var(--accentThemeL2txt);
    /* hell/mittel/dunkel */
    --bright: var(--secondaryThemeLight);
    --veryBright: rgb(var(--rgbWhite));
    --mediumBright: var(--secondaryThemeL3);
    --medium: var(--secondaryThemeL2);
    --dark: var(--secondaryThemeDark);
    --veryDark: rgb(var(--rgbBlack));
    --brightTransparent: rgba( var(--rgbSL5), 0.3);
    --mediumBrightTransparent: rgba(var(--rgbSL4), 0.3);
    --mediumTransparent: rgba( var(--rgbSL3), 0.3);
    --darkTransparent: rgba( var(--rgbSD5), 0.3);
}



/* hier generiert: */
/* https://www.w3schools.com/w3css/w3css_color_generator.asp */
.w3-theme-l5 {
    color: #000;
    background-color: #f8ffec
}

.w3-theme-l4 {
    color: #000;
    background-color: #e7ffbf
}

.w3-theme-l3 {
    color: #000;
    background-color: #d0ff7e
}

.w3-theme-l2 {
    color: #000;
    background-color: #b8ff3e
}

.w3-theme-l1 {
    color: #000;
    background-color: #a0fd00
}

.w3-theme-d1 {
    color: #fff;
    background-color: #6caa00
}

.w3-theme-d2 {
    color: #fff;
    background-color: #609700
}

.w3-theme-d3 {
    color: #fff;
    background-color: #548400
}

.w3-theme-d4 {
    color: #fff;
    background-color: #487100
}

.w3-theme-d5 {
    color: #fff;
    background-color: #3c5e00
}

.w3-theme-light {
    color: #000;
    background-color: #f8ffec
}

.w3-theme-dark {
    color: #fff;
    background-color: #3c5e00
}

.w3-theme-action {
    color: #fff;
    background-color: #3c5e00
}

.w3-theme {
    color: #fff;
    background-color: #77bb00
}

.w3-text-theme {
    color: #77bb00
}

.w3-border-theme {
    border-color: #77bb00
}

.w3-hover-theme:hover {
    color: #fff;
    background-color: #77bb00
}

.w3-hover-text-theme:hover {
    color: #77bb00
}

.w3-hover-border-theme:hover {
    border-color: #77bb00
}


/* font */
@font-face {
    font-family: Catamaran;
    src: url('Font/Catamaran/static/Catamaran-Regular.ttf');
    font-weight: normal;
}

@font-face {
    font-family: Catamaran;
    src: url('Font/Catamaran/static/Catamaran-SemiBold.ttf');
    font-weight: bold;
}

@font-face {
    font-family: Catamaran;
    src: url('Font/Catamaran/static/Catamaran-Medium.ttf');
    font-weight: 500;
}

@font-face {
    font-family: Catamaran;
    src: url('Font/Catamaran/static/Catamaran-ExtraLight.ttf');
    font-weight: 200;
}

@font-face {
    font-family: Inconsolata;
    src: url('Font/Inconsolata/static/Inconsolata/Inconsolata-Medium.ttf');
    font-weight: normal;
}

@font-face {
    font-family: Inconsolata;
    src: url('Font/Inconsolata/static/Inconsolata/Inconsolata-ExtraBold.ttf');
    font-weight: bold;
}

@font-face {
    font-family: Inconsolata;
    src: url('Font/Inconsolata/static/Inconsolata/Inconsolata-Light.ttf');
    font-weight: 200;
}
h1, h2, h3, h4, h5, html, body{
    font-family:"Segoe UI", Arial, sans-serif;
    /*font-family:"Catamaran", Arial, sans-serif;*/
}
    html, html.darkTheme, body, body.darkTheme {
        /*background-image: unset;
        position:relative;*/
        /*background-image: url("Logo.png");
        background-repeat: no-repeat;
        background-position: bottom;
        background-position-x: 0;
        background-attachment: fixed;
        background-size: 40%;*/
    }

        /*html:before, html.darkTheme:before, body:before, body.darkTheme:before {
            content:'';
            bottom:0;
            left:0;
            right:0;
            width:100%;
            height:100%;
            position:absolute;
            pointer-events:none;
            background-image: url("Logo.png");
            background-repeat: no-repeat;
            background-position: bottom;
            background-position-x: center;
            background-attachment: fixed;
            background-size: 40%;
            background-position-x: 0;*/
            /*opacity:0.6;*/
        /*}*/
/* sonstige overrides */
:root {
    --warning: var(--w3Red);
    --warningText: #fff;
    --round: 4px;
    --paddingX: var(--w3PaddingX);
    --paddingXSmall: var(--w3PaddingSmallX);
    --paddingY: var(--w3PaddingY);
    --paddingYSmall: var(--w3PaddingSmallY);
    --padding: var(--paddingY) var(--paddingX);
    --paddingSmall: var(--paddingYSmall) var(--paddingXSmall);
    --transparent: rgb(0,0,0,0);
}
/* Top-Navigation*/
.darkTheme #topBar_layout.w3-white {
    background-color: var(--mediumDarkThemeBG);
    outline: 1px solid var(--secondary);
}
#topBar_layout #top_login_info{
    color:var(--accentThemeD2);
}
.darkTheme #topBar_layout .mds-button-base, .darkTheme #topBar_layout #themeSwitchBtn {
    background-color: unset;
}
/* Sidebar */
.darkTheme #mySidebar{
    border-right:1px solid var(--secondary);
}

/*.filterPanelSection{
    border:1px solid var(--mediumBright);
}
.filterPanelSection.sectionBG {
    box-shadow: none;
}
*//* ================= */
.jdm_OccurrenceHome .filterBtn {
}


.jdm_OccurrenceForm pre {
    font-family: inherit;
    max-width: 100%;
    overflow: auto;
    white-space: break-spaces;
}

.jdm_OccurrenceForm #tblSpecialConfirmation {
    outline: 2px solid orange;
    outline-offset: -4px;
    /*box-shadow:inset 0px 0px 0px 2px orangered;*/
}

    .jdm_OccurrenceForm #tblSpecialConfirmation.checked {
        outline: none;
        /*box-shadow:none;*/
    }

.occurrenceList_Root .tabulator{
    font-size:0.8rem;
}

.vehicleReservation_Root table.vehicleReservations tr{
    cursor:pointer;
    border:0px;
}
    .vehicleReservation_Root table.vehicleReservations tr.selected {
        font-weight: bold;
        box-shadow: 4px 0px var(--accentTheme), -4px 0px var(--accentTheme);
    }
    .vehicleReservation_Root table.vehicleReservations tr td {
        position:relative;
        box-shadow:inset 0px 1px var(--mediumBright);
    }
        .vehicleReservation_Root table.vehicleReservations tr:hover td:after {
            opacity:1;
        }
        .vehicleReservation_Root table.vehicleReservations tr td:after {
            content: '';
            inset:0;
            position:absolute;
            opacity:0;
            transition: opacity 0.15s;
            box-shadow: inset 0px 4px var(--medium), inset 0px -4px var(--medium);
        }
        .vehicleReservation_Root table.vehicleReservations tr td:first-child:after {
            content: '';
            box-shadow: inset 4px 4px var(--medium),inset 0px -4px var(--medium);
        }
        .vehicleReservation_Root table.vehicleReservations tr td:last-child:after {
            content:'';
            box-shadow: inset -4px -4px var(--medium), inset 0px 4px var(--medium);
        }

.vehicleReservation_Root table.vehicleReservations thead .status {
    width:18ch;
}
.vehicleReservation_Root table.vehicleReservations thead .zeitraum {
    width:18ch;
}