:root {
    --background: #FFF;
    --background-secondary: #F7F7FB;
    --hover: #E5E6F6;
    --border-color: #E5E6F6;
    --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: "icons-1647267483000";
    --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;
    /* for testing just overwrite existing last set value is used */
}



.ui-widget-header {
    color: var(--accent-font-color);
    background-color: var(--accent-color);
}
.ui-datepicker-calendar {
    width: 100%;
}
    .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;
}