.vc[data-vc-input] {
    z-index: 6000;
}

.vc,
.vc button,
.vc input,
.vc select,
.vc textarea {
    font-family: inherit;
}

.vc {
    font-size: var(--font-size-default);
}

[data-vc=month], [data-vc=year] {
    font-size: var(--font-size-default);
}

[data-vc-theme] .vc-months__month,
[data-vc-theme] .vc-years__year {
    font-weight: 400;
}

[data-vc-week-day],
[data-vc-theme] .vc-week-number,
[data-vc-theme] .vc-week-numbers__title {
    font-weight: 500;
}


/* Dark surfaces. The library generates ~40 slate permutations of
   weekend/holiday x disabled/adjacent x selected/today, so these are flattened
   to intent and ordered by precedence rather than matched selector-for-selector. */

[data-vc-theme=dark].vc {
    background-color: var(--color-bg-light-primary);
    border: solid 1px var(--color-bg-light-secondary);
    color: var(--color-text-default);
}

[data-vc-theme=dark] .vc-header__content,
[data-vc-theme=dark] .vc-month,
[data-vc-theme=dark] .vc-year,
[data-vc-theme=dark] .vc-week__day,
[data-vc-theme=dark] .vc-week-number,
[data-vc-theme=dark] .vc-week-numbers__title {
    color: var(--color-text-default) !important;
}

[data-vc-theme=dark] .vc-date__btn,
[data-vc-theme=dark] .vc-months__month,
[data-vc-theme=dark] .vc-years__year {
    background-color: transparent !important;
    color: var(--color-text-default) !important;
}

[data-vc-theme=dark] .vc-date[data-vc-date-month=next] .vc-date__btn,
[data-vc-theme=dark] .vc-date[data-vc-date-month=prev] .vc-date__btn,
[data-vc-theme=dark] .vc-date[data-vc-date-disabled] .vc-date__btn,
[data-vc-theme=dark] .vc-month:disabled,
[data-vc-theme=dark] .vc-year:disabled,
[data-vc-theme=dark] .vc-months__month:disabled,
[data-vc-theme=dark] .vc-years__year:disabled {
    color: var(--color-text-light) !important;
}

[data-vc-theme=dark] .vc-date__btn:hover,
[data-vc-theme=dark] .vc-months__month:hover,
[data-vc-theme=dark] .vc-years__year:hover {
    background-color: var(--color-bg-light-secondary) !important;
    color: var(--color-text-default) !important;
}

[data-vc-theme=dark] .vc-month:hover,
[data-vc-theme=dark] .vc-year:hover,
[data-vc-theme=dark] button.vc-week__day:hover,
[data-vc-theme=dark] .vc-week-number:hover {
    color: var(--color-link-primary) !important;
}

[data-vc-theme=dark] .vc-time {
    border-color: var(--color-bg-light-secondary);
}

[data-vc-theme=dark] .vc-time__hour input,
[data-vc-theme=dark] .vc-time__minute input {
    background-color: var(--color-bg-light-secondary) !important;
    color: var(--color-text-default) !important;
}

[data-vc-theme=dark] .vc-time__hour input:hover,
[data-vc-theme=dark] .vc-time__minute input:hover,
[data-vc-theme=dark] .vc-time__hour input[data-vc-input-focus],
[data-vc-theme=dark] .vc-time__minute input[data-vc-input-focus] {
    background-color: var(--color-bg-dark) !important;
}

/* light mode hovers/focuses these to orange-100 (#ffedd5) */
[data-vc-theme=light] .vc-time__hour input:hover,
[data-vc-theme=light] .vc-time__minute input:hover,
[data-vc-theme=light] .vc-time__hour input[data-vc-input-focus],
[data-vc-theme=light] .vc-time__minute input[data-vc-input-focus],
[data-vc-theme=light] .vc-time__keeping:hover {
    background-color: var(--color-bg-light-secondary) !important;
}

/* Vendor pseudo-elements must each get their own rule: an unknown selector
   invalidates the whole selector list, so grouping -webkit- with -moz- would
   drop the rule entirely in both engines. */

[data-vc-theme=dark] .vc-time__range input,
[data-vc-theme=dark] .vc-time__range:before,
[data-vc-theme=dark] .vc-time__range:after {
    background-color: var(--color-bg-light-secondary) !important;
}

[data-vc-theme=dark] .vc-time__range input::-webkit-slider-runnable-track {
    background-color: var(--color-bg-light-secondary) !important;
}

[data-vc-theme=dark] .vc-time__range input::-moz-range-track {
    background-color: var(--color-bg-light-secondary) !important;
}

[data-vc-theme=dark] .vc-time__range input::-webkit-slider-thumb,
[data-vc-theme=dark] .vc-time__range:hover input::-webkit-slider-thumb {
    background-color: var(--color-link-primary) !important;
    border-color: var(--color-link-primary) !important;
}

[data-vc-theme=dark] .vc-time__range input::-moz-range-thumb,
[data-vc-theme=dark] .vc-time__range:hover input::-moz-range-thumb {
    background-color: var(--color-link-primary) !important;
    border-color: var(--color-link-primary) !important;
}


/* Keyboard focus ships as orange (#fdba74) in both themes - not just on the
   time inputs but on every focusable element in the calendar. */

[data-vc-theme].vc:focus-visible,
[data-vc-theme].vc button:focus-visible,
[data-vc-theme].vc [tabindex="0"]:focus-visible,
[data-vc-theme] .vc-time__hour input:focus-visible,
[data-vc-theme] .vc-time__minute input:focus-visible,
[data-vc-theme] .vc-time__keeping:focus-visible {
    outline-color: var(--color-text-lighter) !important;
}

[data-vc-theme] .vc-time__range input:focus-visible::-webkit-slider-thumb {
    border-color: var(--color-text-lighter) !important;
}

[data-vc-theme] .vc-time__range input:focus-visible::-moz-range-thumb {
    border-color: var(--color-text-lighter) !important;
}


/* States, in ascending precedence: weekend -> today -> selected */

[data-vc-theme] .vc-week__day[data-vc-week-day-off],
[data-vc-theme] button.vc-week__day[data-vc-week-day-off]:hover,
[data-vc-theme] .vc-date[data-vc-date-weekend] .vc-date__btn,
[data-vc-theme] .vc-date[data-vc-date-holiday] .vc-date__btn {
    color: var(--color-text-light) !important;
}

[data-vc-theme] .vc-date[data-vc-date-weekend] .vc-date__btn:hover,
[data-vc-theme] .vc-date[data-vc-date-holiday] .vc-date__btn:hover {
    background-color: var(--color-bg-light-secondary) !important;
}

[data-vc-theme] .vc-date[data-vc-date-today] .vc-date__btn,
[data-vc-theme] .vc-date[data-vc-date-today] .vc-date__btn:hover,
[data-vc-theme] .vc-date[data-vc-date-weekend][data-vc-date-today] .vc-date__btn,
[data-vc-theme] .vc-date[data-vc-date-holiday][data-vc-date-today] .vc-date__btn {
    color: var(--color-link-primary) !important;
}

[data-vc-theme] .vc-date[data-vc-date-selected] .vc-date__btn,
[data-vc-theme] .vc-date[data-vc-date-selected] .vc-date__btn:hover {
    background-color: var(--color-link-primary) !important;
    color: #fff !important;
}

[data-vc-theme] .vc-months__month[data-vc-months-month-selected],
[data-vc-theme] .vc-months__month[data-vc-months-month-selected]:hover,
[data-vc-theme] .vc-years__year[data-vc-years-year-selected],
[data-vc-theme] .vc-years__year[data-vc-years-year-selected]:hover {
    background-color: var(--color-link-primary) !important;
    color: #fff !important;
}

[data-vc-time-input=hour] input, [data-vc-time-input=minute] input {
    font-weight: normal;
}

.vc-ehsys-footer {
    display: flex;
    justify-content: flex-end;
    border-top: solid 1px var(--color-bg-light-secondary);
    margin-top: var(--padding-half);
    padding-top: var(--padding-default);
}