/*Transition Dark-Mode Swith Slider*/
html.transition,
html.transition *,
html.transition *:before,
html.transition *:after {
    transition: cubic-bezier(0.68, -0.55, 0.27, 01.55) 420ms !important;
    transition-delay: 0 !important;
}

/*Light Theme variables*/
html {
    /*Login Bild Opacity*/
    --login-bg-opacity: 0;
    /*Temporär Info Accprdion Hinweis*/
    --info-hinweis-accordion-color: #F5C600;
    /*Body*/
    --background-color: #ffffff;
    /*Bootstrap*/
    --popup-background-color: #ffffff;
    /*Headings*/
    --basic-font-color: #444444;
    --basic-footer-color: #ffffff;
    /*Loader*/
    --loader-background-color: #ffffff;
    /*Menu Sidebar*/
    --menu-background-color: #DEDEDE;
    --menu-shadow: 1px 0 0 0 #dddddd;
    --menu-item: #2a2a2a;
    --menu-titel-responsive-color: #ffffff;
    /*Modules*/
    --karte-background-color: #ffffff;
    --karte-border: 1px solid #dddddd;
    /*DevExtreme Elements*/
    --devextreme-inputs-background: #ffffff;
    --devextreme-inputs-border-color: #dddddd;
    --devextreme-inputs-color: #444444;
    --devextreme-inputs-background-header-row: #f5f5f5;
    --devextreme-dropdown-background: #f5f5f5;
    --devextreme-grid-row-white: #ffffff;
    --devextreme-grid-row-grey: #f5f5f5;
    --devextreme-grid-background-color: #ffffff;
    --devextreme-buttons-background-color: #d4d4d4;
    --devextreme-grid-header-background-color: #f5f5f5;
    --devextreme-checkbox-checked-color: #444444;
    /*Timeline*/
    --timeline-background-color: #fffdec;
    --timeline-scroller-background-color: #444444;
    /*TreeView*/
    --treeview-background-color: #f5f5f5;
    /*Hinweis Text*/
    --hinweis-danger: #fff4f5;
}

/*Dark Theme variables*/
html[data-theme='dark'] {
    /*Login Bild Opacity*/
    --login-bg-opacity: 0.5;
    /*Temporär Info Accprdion Hinweis*/
    --info-hinweis-accordion-color: #9f8101;
    /*Body*/
    --background-color: #232323;
    /*Bootstrap*/
    --popup-background-color: #232323;
    /*Headings*/
    --basic-font-color: #858585;
    --basic-footer-color: #444444;
    /*Loader*/
    --loader-background-color: #232323;
    /*Menu Sidebar*/
    --menu-background-color: #232323;
    --menu-shadow: 1px 0 0 0 #3f3f3f;
    --menu-item: #858585;
    --menu-titel-responsive-color: #ffffff;
    /*Modules*/
    --karte-background-color: #232323;
    --karte-border: 1px solid #3f3f3f;
    /*DevExtreme Elements*/
    --devextreme-inputs-background: #232323;
    --devextreme-inputs-border-color: #3f3f3f;
    --devextreme-inputs-color: #8b8b8b;
    --devextreme-inputs-background-header-row: #232323;
    --devextreme-dropdown-background: #232323;
    --devextreme-grid-row-white: #232323;
    --devextreme-grid-row-grey: #171717;
    --devextreme-grid-background-color: #232323;
    --devextreme-buttons-background-color: #787878;
    --devextreme-grid-header-background-color: #171717;
    --devextreme-checkbox-checked-color: #F5C600;
    /*Timeline*/
    --timeline-background-color: #232323;
    --timeline-scroller-background-color: #F1F1F1;
    /*TreeView*/
    --treeview-background-color: #171717;
    /*Hinweis Text*/
    --hinweis-danger: #221c1d;
}


html {
    /*Accordion*/
    --accordion-background-color: #F1D234;
    --accordion-font: 700 16px "Open Sans", sans-serif;
    --accordion-color: #2a2a2a;
    --accordion-border: 1px solid #FFD55D;
    --accordion-hover: #FEDF85;
    --accordion-hover-color: #2a2a2a;
    --accordion-active: #F1D234;
    --accordion-active-color: #2a2a2a;
    --accordion-panel-background-color: #f2f2f2;
    --accordion-shadow: 0 1px 4px 0 rgba(0,0,0,.5);
    /*Body*/
    --border-radius: 3px;
    --basic-font: 16px "Open Sans", sans-serif;
    /*Buttons*/
    --button-background-color: #F5C600;
    --button-background-color-hover: #FEDF85;
    --button-color: #2a2a2a;
    --button-shadow: 0 1px 4px 0 rgba(0,0,0,.5);
    --button-font: bold 14px "Open Sans", sans-serif;
    --button-padding: 8px 15px;
    /*dxElements*/
    --gridview-background-color: #ffffff;
    --gridview-font: 14px "Open Sans", sans-serif;
    --gridview-font-bold: bold 14px "Open Sans", sans-serif;
    --gridview-color: #000000;
    --gridview-shadow: 0px 1px 4px 0px rgba(0,0,0,0.1);
    --gridview-btn-disabled: rgba(0,125,100,.4);
    --gridview-btn-color-disabled: #b0b0b0;
    --gridview-tab-background-color: #257D64;
    /*Headings*/
    --headline-font: 600 26px "Open Sans",sans-serif;
    --master-sub-headline-font: 600 18px "Open Sans",sans-serif;
    --content-headline-font: 700 14px "Open Sans", sans-serif;
    --sub-headline-font: 700 16px "Open Sans", sans-serif;
    --gridview-titel-font: 700 16px "Open Sans", sans-serif;
    --p-font: 16px "Open Sans", sans-serif;
    /*Slider*/
    --slider-active-background-color: #2a2a2a;
    --slider-inactive-background-color: #cccccc;
    --slider-button-background-color: #ffffff;
    /*Login*/
    --login-font: 100 14px "Open Sans", sans-serif;
    --login-shadow: 0px 1px 10px 0px rgba(0,0,0,0.3);
    /*Menu Sidebar*/
    --menu-item-hover: #FDD55D;
    --menu-font: bold 16px "Open Sans", sans-serif;
    /*Modules*/
    --karte-shadow: 0px 1px 4px 0px rgba(0,0,0,0.1);
    --kachel-background-color: #567ABC;
    --kachel-hover: #1f58a9;
    --kachel-shadow: 0 1px 10px 0 rgba(0,0,0,.3);
    --kachel-color: #ffffff;
    --kachel-font: bold 16px "Open Sans", sans-serif;
    --kpi-background-color: #F4EA9C;
    --kpi-hover: #f5f5f5;
    --kpi-color: #444444;
    --filter-background-color: #B1CD00;
    --filter-border: 2px solid #B1CD00;
    /*Tabs*/
    --tab-active-color: #484848;
    --tab-basic-color: #b4b4b4;
    --tab-active-border: 2px solid #737373;
    --tab-basic-border: none;
    --tab-padding: 14px 16px;
    --tab-font: 600 17px "Open Sans", sans-serif;
}