.pf-c-date-picker__calendar.flatpickr-calendar { --pf-c-date-picker__flatpickr__calendar--BackgroundColor: var(--pf-global--BackgroundColor--light-100); --pf-c-date-picker__flatpickr__calendar--PaddingTop: var(--pf-global--spacer--md); --pf-c-date-picker__flatpickr__calendar--PaddingRight: var(--pf-global--spacer--md); --pf-c-date-picker__flatpickr__calendar--PaddingBottom: var(--pf-global--spacer--md); --pf-c-date-picker__flatpickr__calendar--PaddingLeft: var(--pf-global--spacer--md); --pf-c-date-picker__flatpickr__calendar--open--ZIndex: var(--pf-global--ZIndex--sm); --pf-c-date-picker__flatpickr__months--PaddingBottom: var(--pf-global--spacer--md); --pf-c-date-picker__flatpickr__month--BackgroundColor: var(--pf-global--BackgroundColor--light-100); --pf-c-date-picker__flatpickr__month--PaddingTop: 10px; --pf-c-date-picker__flatpickr__month--FontSize: var(--pf-global--FontSize--md); --pf-c-date-picker__flatpickr__month-select--PaddingRight: var(--pf-global--spacer--lg); --pf-c-date-picker__flatpickr__month-select--FontWeight: var(--pf-global--FontWeight--normal); --pf-c-date-picker__flatpickr__month-select--BackgroundUrl: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='%23urrentColor' d='M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z'/%3E%3C/svg%3E"); --pf-c-date-picker__flatpickr__month-select--BackgroundSize: .625em; --pf-c-date-picker__flatpickr__month-select--BackgroundPosition: calc(100% - var(--pf-global--spacer--sm)) center; --pf-c-date-picker__flatpickr__month-select--BackgroundColor: var(--pf-global--BackgroundColor--light-100); --pf-c-date-picker__flatpickr__month-select--hover--BackgroundColor: var(--pf-c-date-picker__flatpickr__month-select--BackgroundColor); --pf-c-date-picker__flatpickr__month-select--year--MarginLeft: var(--pf-global--spacer--sm); --pf-c-date-picker__flatpickr__month-arrow--Color: var(--pf-global--Color--dark-200); --pf-c-date-picker__flatpickr__month-arrow--hover--Color: var(--pf-global--Color--dark-100); --pf-c-date-picker__flatpickr__year--hover--BackgroundColor: var(--pf-global--BackgroundColor--light-100); --pf-c-date-picker__flatpickr__year--FontWeight: var(--pf-global--FontWeight--normal); --pf-c-date-picker__flatpickr__weekdays--BackgroundColor: var(--pf-global--BackgroundColor--light-100); --pf-c-date-picker__flatpickr__weekdays--PaddingBottom: var(--pf-global--spacer--md); --pf-c-date-picker__flatpickr__weekdays--MarginBottom: var(--pf-global--spacer--sm); --pf-c-date-picker__flatpickr__weekdays--BorderBottomWidth: var(--pf-global--BorderWidth--sm); --pf-c-date-picker__flatpickr__weekdays--BorderBottomColor: var(--pf-global--BorderColor--100); --pf-c-date-picker__flatpickr__weekday--BackgroundColor: var(--pf-global--BackgroundColor--light-100); --pf-c-date-picker__flatpickr__calendar__day--Color: var(--pf-global--Color--dark-100); --pf-c-date-picker__flatpickr__calendar__day--disabled--Color: var(--pf-global--disabled-color--200); --pf-c-date-picker__flatpickr__calendar__day--hover--BorderColor: var(--pf-global--BackgroundColor--light-300); --pf-c-date-picker__flatpickr__calendar__day--hover--BackgroundColor: var(--pf-global--BackgroundColor--light-300); --pf-c-date-picker__flatpickr__calendar__day--selected--hover--BorderColor: var(--pf-global--primary-color--100); --pf-c-date-picker__flatpickr__calendar__day--selected--hover--Background: var(--pf-global--primary-color--100); --pf-c-date-picker__flatpickr__calendar__day--selected--hover--BorderColor: var(--pf-global--Color--light-100); --pf-c-date-picker__flatpickr__calendar__day--today--BorderColor: var(--pf-global--primary-color--100); --pf-c-date-picker__flatpickr__calendar__day--today--hover--BorderColor: var(--pf-global--primary-color--100); --pf-c-date-picker__flatpickr__calendar__day--today--hover--Background: var(--pf-global--primary-color--100); --pf-c-date-picker__flatpickr__calendar__day--today--hover--Color: var(--pf-global--Color--light-100); width: auto; background: var(--pf-c-date-picker__flatpickr__calendar--BackgroundColor); padding: var(--pf-c-date-picker__flatpickr__calendar--PaddingTop) var(--pf-c-date-picker__flatpickr__calendar--PaddingRight) var(--pf-c-date-picker__flatpickr__calendar--PaddingBottom) var(--pf-c-date-picker__flatpickr__calendar--PaddingLeft); } .pf-c-date-picker__calendar.flatpickr-calendar.open { z-index: var(--pf-c-date-picker__flatpickr__calendar--open--ZIndex); } .pf-c-date-picker__calendar .flatpickr-innerContainer { border: 0; } .pf-c-date-picker__calendar .flatpickr-months { position: relative; padding-bottom: var(--pf-c-date-picker__flatpickr__months--PaddingBottom); } .pf-c-date-picker__calendar .flatpickr-months .flatpickr-month { background: var(--pf-c-date-picker__flatpickr__month--BackgroundColor); } .pf-c-date-picker__calendar .flatpickr-current-month { padding-top: var(--pf-c-date-picker__flatpickr__month--PaddingTop); font-size: var(--pf-c-date-picker__flatpickr__month--FontSize); } .pf-c-date-picker__calendar .flatpickr-current-month .flatpickr-monthDropdown-months { -moz-appearance: none; -webkit-appearance: none; background-image: var(--pf-c-date-picker__flatpickr__month-select--BackgroundUrl); background-position: var(--pf-c-date-picker__flatpickr__month-select--BackgroundPosition); background-size: var(--pf-c-date-picker__flatpickr__month-select--BackgroundSize); background-repeat: no-repeat; background-color: var(--pf-c-date-picker__flatpickr__month-select--BackgroundColor); font-weight: var(--pf-c-date-picker__flatpickr__month-select--FontWeight); padding-right: var(--pf-c-date-picker__flatpickr__month-select--PaddingRight); line-height: var(--pf-c-date-picker__flatpickr__month-select--LineHeight); } .pf-c-date-picker__calendar .flatpickr-current-month .flatpickr-monthDropdown-months:hover { --pf-c-date-picker__flatpickr__month-select--BackgroundColor: var(--pf-c-date-picker__flatpickr__month-select--hover--BackgroundColor); } .pf-c-date-picker__calendar .numInputWrapper:hover { background: var(--pf-c-date-picker__flatpickr__year--hover--BackgroundColor); } .pf-c-date-picker__calendar .flatpickr-months .flatpickr-next-month, .pf-c-date-picker__calendar .flatpickr-months .flatpickr-prev-month { color: var(--pf-c-date-picker__flatpickr__month-arrow--Color); fill: var(--pf-c-date-picker__flatpickr__month-arrow--Color); } .pf-c-date-picker__calendar .flatpickr-months .flatpickr-next-month:hover, .pf-c-date-picker__calendar .flatpickr-months .flatpickr-prev-month:hover, .pf-c-date-picker__calendar .flatpickr-months .flatpickr-next-month:hover svg, .pf-c-date-picker__calendar .flatpickr-months .flatpickr-prev-month:hover svg { color: var(--pf-c-date-picker__flatpickr__month-arrow--hover--Color); fill: var(--pf-c-date-picker__flatpickr__month-arrow--hover--Color); } .pf-c-date-picker__calendar .flatpickr-monthDropdown-months + .numInputWrapper { margin-left: var(--pf-c-date-picker__flatpickr__month-select--year--MarginLeft); } .pf-c-date-picker__calendar .flatpickr-current-month input.cur-year { font-weight: var(--pf-c-date-picker__flatpickr__year--FontWeight); } .pf-c-date-picker__calendar .flatpickr-weekdays { background: var(--pf-c-date-picker__flatpickr__weekdays--BackgroundColor); } .pf-c-date-picker__calendar span.flatpickr-weekday { background: var(--pf-c-date-picker__flatpickr__weekday--BackgroundColor); } .pf-c-date-picker__calendar .flatpickr-weekdays { padding-bottom: var(--pf-c-date-picker__flatpickr__weekdays--PaddingBottom); margin-bottom: var(--pf-c-date-picker__flatpickr__weekdays--MarginBottom); border-bottom: var(--pf-c-date-picker__flatpickr__weekdays--BorderBottomWidth) solid var(--pf-c-date-picker__flatpickr__weekdays--BorderBottomColor); } .pf-c-date-picker__calendar .flatpickr-days { border: 0; } .pf-c-date-picker__calendar .flatpickr-day:focus, .pf-c-date-picker__calendar .flatpickr-day:hover { border-color: var(--pf-c-date-picker__flatpickr__calendar__day--hover--BorderColor); background: var(--pf-c-date-picker__flatpickr__calendar__day--hover--BackgroundColor); } .pf-c-date-picker__calendar .flatpickr-day.selected, .pf-c-date-picker__calendar .flatpickr-day.selected:focus, .pf-c-date-picker__calendar .flatpickr-day.selected:hover { border-color: var(--pf-c-date-picker__flatpickr__calendar__day--selected--hover--BorderColor); background: var(--pf-c-date-picker__flatpickr__calendar__day--selected--hover--Background); color: var(--pf-c-date-picker__flatpickr__calendar__day--selected--hover--BorderColor); } .pf-c-date-picker__calendar .flatpickr-day.flatpickr-disabled, .pf-c-date-picker__calendar .flatpickr-day.flatpickr-disabled:hover, .pf-c-date-picker__calendar .flatpickr-day.nextMonthDay, .pf-c-date-picker__calendar .flatpickr-day.notAllowed, .pf-c-date-picker__calendar .flatpickr-day.notAllowed.nextMonthDay, .pf-c-date-picker__calendar .flatpickr-day.notAllowed.prevMonthDay, .pf-c-date-picker__calendar .flatpickr-day.prevMonthDay { color: var(--pf-c-date-picker__flatpickr__calendar__day--disabled--Color); } .pf-c-date-picker__calendar .flatpickr-day { color: var(--pf-c-date-picker__flatpickr__calendar__day--Color); } .pf-c-date-picker__calendar .flatpickr-day.today { border-color: var(--pf-c-date-picker__flatpickr__calendar__day--today--BorderColor); } .pf-c-date-picker__calendar .flatpickr-day.today:focus, .pf-c-date-picker__calendar .flatpickr-day.today:hover { border-color: var(--pf-c-date-picker__flatpickr__calendar__day--today--hover--BorderColor); background: var(--pf-c-date-picker__flatpickr__calendar__day--today--hover--Background); color: var(--pf-c-date-picker__flatpickr__calendar__day--today--hover--Color); }