:root {
    --background: #FFF;
    --background-secondary: #F7F7FB;
    --background-secondary-td: var(--background-secondary);
    --hover: #E5E6F6;
    --border-color: #E5E6F6;
    --border-radius: 1rem;
    --box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.07);
    --font-color: #022873;
    --accent-color: #022873;
    --accent-color-secondary: #34538F;
    --accent-font-color: #FFF;
    --accent-font-color-secondary: #BF0404;
    --disabled-color: #EEE;
    --disabled-color-darker: #CCC;
    --icon-family: "fontAwesome";
    --button-primary-color: var(--accent-font-color);
    --button-primary-background: var(--accent-color);
    --button-secondary-color: var(--accent-color);
    --button-secondary-background: var(--accent-color);
    --button-info-color: #FFF;
    --button-info-background: #4169e1;
    --button-danger-color: #FFF;
    --button-danger-background: #DC143C;
    --menu-font-color: #FFF;
    --menu-hovor-background: #34538F;
    --menu-font-color-secondary: #BF0404;
    --gray-color: rgb(219, 223, 236);
    /* for testing just overwrite existing last set value is used */
    --light: 300;
    --regular: 400;
    --medium: 500;
    --semibold: 600;
    --bold: 700;
    --box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.07);
    --box-shadow-sticky: 0 2px 20px 0 rgba(0, 0, 0, 0.13);
    --box-shadow-large: 0 2px 10px 5px rgba(0, 0, 0, 0.13);
    --progress-color: var(--font-color);
    --progress-color-critical: #c63438;
    --progress-color-bad: #fba518;
    --progress-color-good: #b1c29e;
}



.ui-widget-header {
    color: var(--accent-font-color);
    background-color: var(--accent-color);
}
    .ui-datepicker-calendar th {
        text-align: center;
        color: var(--accent-color);
        text-transform: lowercase;
    }
    .ui-datepicker-calendar td a {
        text-align: center;
        color: var(--accent-color);
    }

    .ui-datepicker-calendar td a:hover {
        color: var(--accent-color-secondary);
    }

.ui-datepicker-header > .ui-icon {
    color: var(--accent-font-color);
}
.ui-state-active {
    background-color: var(--accent-color) !important;
    color: var(--accent-font-color) !important;
}