html {
    /*mx main colors*/
    --mx-darkblue: #0B1733;
    --mx-aqua: #08e4bc;
    /*Colors*/
    --white: #ffffff;
    --black: #000000;
    /*Accordion*/
    --accordion-background-color: var(--white);
    --accordion-font: 700 16px /*"Open Sans", sans-serif*/;
    --accordion-color: var(--black);
    --accordion-hover: #F8F8F8;
    --accordion-panel-background-color: #f2f2f2;
    --accordion-shadow: 0 1px 4px 0 rgba(0,0,0,.5);
    /*Body*/
    --background-color: #F5F5F5;
    --border-radius: 3px;
    --basic-font: 16px /*"Open Sans", sans-serif*/;
    /*Buttons*/
    --button-background-color: var(--mx-aqua);
    --button-background-color-hover: #fdd55d;
    --button-color: var(--mx-darkblue);
    --button-shadow: 0 1px 4px 0 rgba(0,0,0,.5);
    --button-font: bold 14px /*"Open Sans", sans-serif*/;
    --button-padding: 10px 15px;
    /*dxElements*/
    --gridview-background-color: var(--white);
    --gridview-font: 14px /*"Open Sans", sans-serif*/;
    --gridview-font-bold: bold 14px /*"Open Sans", sans-serif*/;
    --gridview-color: var(--black);
    --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*/
    --basic-font-color: #444444;
    --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*/;
    /*Inputs*/
    --slider-active-background-color: #005ea8;
    --slider-inactive-background-color: #cccccc;
    --slider-button-background-color: var(--white);
    /*Login*/
    --login-font: 100 14px /*"Open Sans", sans-serif*/;
    --login-shadow: 0px 1px 10px 0px rgba(0,0,0,0.3);
    /*Menu Sidebar*/
    --menu-background-color: var(--mx-darkblue);
    --menu-shadow: 1px 0 0 0 #d2d2d2;
    --menu-item: var(--white);
    --menu-item-hover: #4CE5BD;
    --menu-font: bold 16px /*"Open Sans", sans-serif*/;
    --menu-titel-responsive-color: var(--white);
    /*Modules*/
    --karte-background-color: var(--white);
    --karte-shadow: 0px 1px 4px 0px rgba(0,0,0,0.1);
    --kachel-background-color: var(--mx-darkblue);
    --kachel-hover: #1f58a9;
    --kachel-shadow: 0 1px 10px 0 rgba(0,0,0,.3);
    --kachel-color: var(--white);
    --kachel-font: bold 16px /*"Open Sans", sans-serif*/;
    --kpi-background-color: var(--mx-darkblue);
    --kpi-border: 1px solid #d2d2d2;
    --kpi-color: #444444;
    --filter-background-color: var(--mx-darkblue);
    --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*/;
}

.mx-darkblue-bg {
    background-color: var(--mx-darkblue);
}