/* Calendar popup of the backoffice date components (Components/Backoffice/BackofficeDateInput / BackofficeDateRangeInput,
   RadzenDatePicker). Radzen moves the popup to <body> when it opens, outside the scoped css and .tmcTailwind, so it is
   styled here. Only those pickers: their ids start with "bo-date-" and the popup id is "popup" + picker id.
   Look as the Selection facets: 12px radius, Montserrat, selected #195C90, today/hover in the warning yellow.
   Only default-base.css of Radzen is loaded: the Radzen variables are overridden on the popup. */

.rz-datepicker-popup-container[id^="popupbo-date-"] {
    --rz-datepicker-popup-width: 18rem;
    --rz-datepicker-panel-border: 1px solid var(--touch-neutral-400, #E7E7E7);
    --rz-datepicker-panel-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    --rz-datepicker-header-background-color: #fff;
    --rz-datepicker-header-color: #000;
    --rz-datepicker-header-padding-block: 0.5rem;
    --rz-datepicker-header-padding-inline: 0.5rem;
    --rz-datepicker-calendar-padding-block: 0 0.5rem;
    --rz-datepicker-calendar-padding-inline: 0.5rem;
    --rz-datepicker-calendar-header-font-size: 12px;
    --rz-datepicker-calendar-header-text-transform: none;
    --rz-datepicker-calendar-header-color: #000;
    --rz-datepicker-calendar-item-padding: 0.375rem 0;
    --rz-datepicker-calendar-font-size: 13px;
    --rz-datepicker-calendar-color: var(--touch-neutral-900, #333333);
    --rz-datepicker-calendar-border: none;
    --rz-datepicker-calendar-border-radius: 6px;
    --rz-datepicker-calendar-hover-color: #000;
    --rz-datepicker-calendar-hover-background-color: var(--touch-warning, #FFC800);
    --rz-datepicker-calendar-selected-color: #fff;
    --rz-datepicker-calendar-selected-background-color: var(--touch-primary, #195C90);
    --rz-datepicker-calendar-selected-hover-color: #fff;
    --rz-datepicker-calendar-selected-hover-background-color: var(--touch-primary-hover, #004D7F);
    --rz-datepicker-calendar-today-color: #000;
    --rz-datepicker-calendar-today-background-color: var(--touch-warning, #FFC800);
    --rz-datepicker-calendar-today-border-radius: 6px;
    border-radius: 12px;
    overflow: hidden;
    font-family: "Montserrat", sans-serif;
}

.rz-datepicker-popup-container[id^="popupbo-date-"] .rz-calendar-view th {
    font-weight: 600;
}

.rz-datepicker-popup-container[id^="popupbo-date-"] .rz-calendar-view td .rz-calendar-today {
    font-weight: 600;
}

.rz-datepicker-popup-container[id^="popupbo-date-"] .rz-calendar-prev,
.rz-datepicker-popup-container[id^="popupbo-date-"] .rz-calendar-next {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

/* Month / year dropdowns of the header */
.rz-datepicker-popup-container[id^="popupbo-date-"] .rz-calendar-title .rz-dropdown {
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: #000;
}