:root {
    --dp-fg: #000000; /* Overall FG and BG colors */
    --dp-bg: #ffffff;
    --dp-normal-fg: #000000; /* Per item colors (FG, BG, + hover) */
    --dp-normal-bg: #ffffff;
    --dp-hnormal-fg: #ffffff;
    --dp-hnormal-bg: #333333;
    --dp-oldnew-fg: #aaaaaa; /* Old and New colors */
    --dp-oldnew-bg: #ffffff;
    --db-holdnew-fg: #666666;
    --dp-holdnew-bg: #eeeeee;
    --dp-active-bg: var(--button-color); /* Active colors: these follow the current */
    --dp-active-fg: #ffffff; /* date as one goes up from days to months, */
    --dp-hactive-bg: var(--button-color); /* years, decades, and centuries. */
    --dp-hactive-fg: #000000;
    --dp-focusact-fg: #ffffff; /* This is used if the selected is the same */
    --dp-focusact-bg: var(--main-color); /* as the current date. */
    --dp-hfocusact-fg: #ffffff;
    --dp-hfocusact-bg: var(--main-color);
    --dp-focus-fg: #ffffff; /* This is used for the selected date, only */
    --dp-focus-bg: var(--main-color_80); /* if different than the current date. */
    --dp-hfocus-fg: #ffffff;
    --dp-hfocus-bg: var(--main-color);
}

.datepicker {
    color: var(--dp-fg) !important;
    background-color: var(--dp-bg) !important;
}

    .datepicker td, th {
        text-align: center;
        padding: 0.25em 0.5em;
    }

    .datepicker .prev:not(.disabled),
    .datepicker .next:not(.disabled) {
        cursor: pointer;
    }

td.day,
span.month,
span.year,
span.decade,
span.century {
    color: var(--dp-normal-fg) !important;
    background-color: var(--dp-normal-bg) !important;
}

    td.day:hover,
    span.month:hover,
    span.year:hover,
    span.decade:hover,
    span.century:hover {
        color: var(--dp-hnormal-fg) !important;
        background-color: var(--dp-hnormal-bg) !important;
        cursor: pointer;
    }

    td.old.day,
    td.new.day,
    span.year.old,
    span.year.new,
    span.decade.old,
    span.decade.new,
    span.century.old,
    span.century.new {
        color: var(--dp-oldnew-fg) !important;
        background-color: var(--dp-oldnew-bg) !important;
    }

        td.old.day:hover,
        td.new.day:hover,
        span.year.old:hover,
        span.year.new:hover,
        span.decade.old:hover,
        span.decade.new:hover,
        span.century.old:hover,
        span.century.new:hover {
            color: var(--dp-holdnew-fg) !important;
            background-color: var(--dp-holdnew-bg) !important;
        }

    td.today.day,
    span.month.focused,
    span.year.focused,
    span.decade.focused,
    span.century.focused {
        color: var(--dp-focus-fg) !important;
        background-color: var(--dp-focus-bg) !important;
    }

        td.today.day:hover,
        span.month.focused:hover,
        span.year.focused:hover,
        span.decade.focused:hover,
        span.century.focused:hover {
            color: var(--dp-hfocus-fg) !important;
            background-color: var(--dp-hfocus-bg) !important;
        }

    td.active.day,
    span.month.active,
    span.year.active,
    span.decade.active,
    span.century.active {
        color: var(--dp-active-fg) !important;
        background-color: var(--dp-active-bg) !important;
    }

        td.active.day:hover,
        span.month.active:hover,
        span.year.active:hover,
        span.decade.active:hover,
        span.century.active:hover {
            color: var(--dp-hactive-fg) !important;
            background-color: var(--dp-hactive-bg) !important;
        }

        td.today.active.today,
        span.month.focused.active,
        span.year.active.focused,
        span.decade.active.focused,
        span.century.active.focused {
            color: var(--dp-focusact-fg) !important;
            background-color: var(--dp-focusact-bg) !important;
        }

            td.today.active.today:hover,
            span.month.focused.active:hover,
            span.year.active.focused:hover,
            span.decade.active.focused:hover,
            span.century.active.focused:hover {
                color: var(--dp-hfocusact-fg) !important;
                background-color: var(--dp-hfocusact-bg) !important;
            }