html[data-theme='light'] {
    /*Einheitliche Akzentfarben*/
    --primary-accent-bg-color: #06a59d; /*primary accent background color kann man nach Wunsch ändern*/
    --primary-accent-font-color: var(--mx-white);
    --secondary-accent-bg-color: #212529; /*dunkelgrau*/
    --secondary-accent-font-color: #FFF;
    --tertiary-aacent-bg-color: #f5f5f5; /*hellgrau*/
    --tertiary-aacent-font-color: #000;
    /*Light Theme variables*/
    --mx-pink: #FF0068;
    --mx-green: #00FFCE;
    --mx-blue: #336DEF;
    --mx-yellow: #FFF700;
    --mx-black: #212529;
    --mx-white: #ffffff;
    --mx-red: #dc3545;
    --mx-grey: #e5e5e5;
    --mx-dark-grey: #555;
    --mx-light-grey: #f8f9fa;
    /*site.css*/
    --dark-blue: #1861ac;
    /*Accordion*/
    --accordion-active-bg: var(--mx-light-grey);
    --accordion-arrow-color: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    /*Alert-Danger*/
    --bs-danger-bg-subtle: #f8d7da;
    --bs-danger-border-subtle: #F1AEB5;
    --bs-danger-text-emphasis: #58151C;
    /*Body*/
    --background-color: var(--mx-white);
    --bs-body-color: var(--mx-black);
    --bs-darker-body-color: var(--mx-black);
    /*Buttons*/
    --button-background-color: var(--mx-black);
    --button-color: var(--secondary-accent-font-color);
    --button-background-color-hover: var(--primary-accent-bg-color);
    --button-outline-color: var(--mx-black);
    /*Charts*/
    --bs-white-rgb: 255,255,255;
    /*Checkboxes & Radioboxes*/
    --checkbox-background-color: var(--secondary-accent-bg-color);
    --checkbox-border: var(--bs-border-width) solid var(--bs-border-color);
    /*Cookie*/
    --bs-light-bg-subtle: #fcfcfd; /*cookies background*/
    --bs-light-border-subtle: #e9ecef; /*cookies border*/
    --bs-light-text-emphasis: var(--bs-body-color); /*text color*/
    /*Dropdown*/
    --devextreme-dropdown-background-color-hover: var(--mx-light-grey);
    /*Footer*/
    --footer-color: #595C5F;
    /*Grids*/
    --devextreme-grey: #f5f5f5;
    --devextreme-grid-row-white: var(--mx-white);
    --devextreme-grid-row-grey: var(--devextreme-grey);
    --devextreme-grid-background-color: var(--mx-white);
    --devextreme-grid-header-background-color: #212529;
    --devextreme-inputs-background: var(--mx-white);
    --devextreme-inputs-border-color: #dddddd;
    --devextreme-inputs-color: #444444;
    --devextreme-inputs-background-header-row: var(--devextreme-grey);
    --devextreme-dropdown-background: var(--devextreme-grey);
    --devextreme-buttons-background-color: #d4d4d4;
    --devextreme-checkbox-checked-color: var(--mx-blue);
    --devextreme-tags-background: #eeeeee;
    --devextreme-tags-color: var(--bs-body-color);
    /*Images*/
    --img-slider: var(--devextreme-inputs-border-color);
    --img-slider-hover: #e8e9e9;
    /*KPI*/
    --bs-body-bg: var(--mx-white) !important;
    --border-color: var(--mx-grey);
    /*Links*/
    --link-color: var(--mx-black);
    /*Loader*/
    --loader-background-color: var(--mx-white);
    /*Map*/
    --map-background-color: var(--mx-white);
    --map-legend-background-color: var(--mx-white);
    /*Menu*/
    --menu-dropdown-color: var(--bs-dropdown-link-hover-color);
    --menu-dropdown-background-color: var(--bs-dropdown-link-hover-bg);
    /*Navbar*/
    --bs-light-rgb: 248,249,250;
    --bs-emphasis-color-rgb: 0,0,0;
    /*Progress Bar*/
    --bs-secondary-bg: #E9ECEF;
    /*Switch*/
    /*--switch-background-color: #747474;*/
    --switch-border-color: #DEE2E6;
    --logo-url: url('/img/nvm_logo_rgb.png');
    /*Tabs*/
    --tabs-background-color: var(--mx-white);
    --tabs-border-color: var(--devextreme-inputs-border-color);
    /*Tooltip*/
    --tooltip-color: #f5f5f5;
}

html[data-theme='dark'] {
    /*Einheitliche Akzentfarben*/
    --primary-accent-bg-color: #00b092; /*primary accent background color kann man nach Wunsch ändern*/
    --primary-accent-font-color: var(--mx-black);
    --secondary-accent-bg-color: var(--mx-light-grey); /*dunkelgrau*/
    --secondary-accent-font-color: var(--mx-white);
    --tertiary-aacent-bg-color: var(--mx-dark-grey); /*hellgrau*/
    --tertiary-aacent-font-color: #000;
    /*Dark Theme variables*/
    --mx-pink: #bf2061;
    --mx-green: #00b092;
    --mx-blue: #2b58bd;
    --mx-yellow: #949015;
    --mx-black: #000;
    --mx-white: var(--bs-body-color);
    /*--mx-red:*/
    /*--mx-grey:*/
    --mx-dark-grey: #555;
    --mx-light-grey: #292929;
    /*site.css*/
    /*--dark-blue:*/
    /*Accordion*/
    --accordion-active-bg: #292929;
    --accordion-arrow-color: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23747474'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    /*Alert-Danger*/
    --bs-danger-bg-subtle: #4E3534; /*#482629*/
    --bs-danger-border-subtle: #521219;
    --bs-danger-text-emphasis: #2c060a;
    /*Body*/
    --background-color: #232323;
    --bs-body-color: #a8a8a8; /*this is a font color*/
    --bs-darker-body-color: var(--mx-black);
    /*Buttons*/
    --button-background-color: var(--secondary-accent-bg-color);
    --button-color: var(--bs-body-color);
    --button-background-color-hover: var(--primary-accent-bg-color);
    --button-outline-color: var(--bs-body-color);
    /*Charts*/
    --bs-white-rgb: 47,47,47;
    /*Checkboxes & Radioboxes*/
    --checkbox-background-color: var(--mx-dark-grey);
    --checkbox-border: none;
    /*Cookie*/
    --bs-light-bg-subtle: #2F2F2F; /*cookies background*/
    --bs-light-border-subtle: #1D1D1D; /*cookies border*/
    --bs-light-text-emphasis: var(--bs-body-color); /*text color*/
    /*Dropdown*/
    --devextreme-dropdown-background-color-hover: var(--tertiary-aacent-bg-color);
    /*Footer*/
    --footer-color: var(--bs-body-color);
    /*Grids*/
    --devextreme-grey: #292929;
    --devextreme-grid-row-white: var(--bs-body-bg);
    --devextreme-grid-row-grey: var(--devextreme-grey);
    --devextreme-grid-background-color: var(--bs-body-bg);
    --devextreme-grid-header-background-color: var(--devextreme-grey);
    --devextreme-inputs-background: var(--devextreme-grey);
    --devextreme-inputs-border-color: #3f3f3f;
    --devextreme-inputs-border-hover-color: var(--bs-body-color);
    --devextreme-inputs-color: #8b8b8b;
    --devextreme-inputs-background-header-row: var(--devextreme-grey);
    --devextreme-dropdown-background: var(--devextreme-grey);
    --devextreme-buttons-background-color: #787878;
    --devextreme-checkbox-checked-color: var(--mx-blue);
    --devextreme-tags-background: var(--bs-body-bg);
    --devextreme-tags-color: var(--bs-body-color);
    /*Images*/
    --img-slider: var(--bs-body-bg);
    --img-slider-hover: var(--bs-body-color);
    /*KPI*/
    --bs-body-bg: #2f2f2f !important;
    --border-color: #1D1D1D;
    /*Links*/
    --link-color: #0366d6;
    /*Loader*/
    --loader-background-color: var(--bs-body-bg);
    /*Map*/
    --map-background-color: var(--bs-body-bg);
    --map-legend-background-color: var(--bs-body-bg);
    /*Menu*/
    --menu-dropdown-color: var(--bs-body-color);
    --menu-dropdown-background-color: #424649;
    /*Navbar*/
    --bs-light-rgb: 47,47,47;
    --bs-emphasis-color-rgb: 116,116,116;
    /*Progress Bar*/
    --bs-secondary-bg: var(--bs-body-color);
    /*Switch*/
    --switch-background-color: var(--bs-body-color);
    --switch-border-color: var(--bs-body-color);
    --logo-url: url('/img/nvm_logo_rgb.png');
    /*Tabs*/
    --tabs-background-color: var(--background-color);
    --tabs-border-color: var(--devextreme-inputs-border-color);
    /*Tooltip*/
    --tooltip-color: var(--bs-body-color);
}

html {
    /*For footer*/
    position: relative;
    min-height: 100%;
    font-size: 14px;
}

body {
    background-color: var(--background-color);
    /* Margin bottom by footer height */
    margin-bottom: 60px;
}

a {
    color: var(--link-color);
    text-decoration: none;
}

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    white-space: nowrap;
    /* Vertically center the text there */
    line-height: 60px;
    border-top: 1px solid var(--border-color);
    color: var(--footer-color);
}

    .footer a {
        text-decoration: none;
        color: var(--footer-color);
    }

.loader-partial {
    /*Partial Loader für jede Komponente*/
    position: absolute;
    top: 0px;
    right: 0px;
    width: 100%;
    height: 100%;
    background-color: var(--loader-background-color);
    background-image: url('/img/loader.gif');
    background-size: 30px;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 998; /*Vorsicht wenn Wert ändern: Tooltip unsichtbar */
    opacity: 1;
    border-radius: 5px;
}

.loader-container {
        position: relative;
        min-height: 200px
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}