#ui-datepicker-div.ui-datepicker {
--bb-bg: #ffffff;
--bb-text: #0f172a; --bb-muted: #64748b; --bb-border: #e2e8f0; --bb-primary: #0ea5e9; --bb-primary-600: #0284c7;
--bb-hover: #dbedff;
--bb-focus: #e0f2fe; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
background: var(--bb-bg);
color: var(--bb-text);
border: 1px solid var(--bb-border);
border-radius: 12px;
box-shadow: 0 10px 30px rgba(15, 23, 42, 0.1);
padding: 6px 6px 10px;
width: auto;
z-index: 9999;
} #ui-datepicker-div .ui-datepicker-header {
background: transparent;
border: 0;
border-bottom: 1px solid var(--bb-border);
padding: 10px 8px;
border-radius: 12px 12px 0 0;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
#ui-datepicker-div .ui-datepicker-title {
font-weight: 600;
color: var(--bb-text);
font-size: 15px;
text-align: center;
flex: 1; } #ui-datepicker-div .ui-datepicker-prev,
#ui-datepicker-div .ui-datepicker-next {
position: absolute;
top: 6px;
}
#ui-datepicker-div .ui-datepicker-prev { left: 6px; }
#ui-datepicker-div .ui-datepicker-next { right: 6px; } #ui-datepicker-div .ui-datepicker-prev,
#ui-datepicker-div .ui-datepicker-next {
position: absolute;
top: 6px;
width: 36px;
height: 36px;
border-radius: 10px;
display: grid;
place-items: center;
cursor: pointer;
transition: background 120ms ease;
}
#ui-datepicker-div .ui-datepicker-prev { left: 6px; }
#ui-datepicker-div .ui-datepicker-next { right: 6px; }
#ui-datepicker-div .ui-datepicker-prev:hover,
#ui-datepicker-div .ui-datepicker-next:hover {
background: var(--bb-hover);
}
#ui-datepicker-div .ui-datepicker-prev.ui-state-disabled,
#ui-datepicker-div .ui-datepicker-next.ui-state-disabled {
opacity: .35;
pointer-events: none;
} #ui-datepicker-div .ui-icon { background: none; } #ui-datepicker-div .ui-datepicker-prev .ui-icon {
width: 24px; height: 24px;
mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z'/></svg>") no-repeat center;
-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z'/></svg>") no-repeat center;
background-color: var(--bb-primary-600);
} #ui-datepicker-div .ui-datepicker-next .ui-icon {
width: 24px; height: 24px;
mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M8.59 16.59 13.17 12 8.59 7.41 10 6l6 6-6 6z'/></svg>") no-repeat center;
-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M8.59 16.59 13.17 12 8.59 7.41 10 6l6 6-6 6z'/></svg>") no-repeat center;
background-color: var(--bb-primary-600);
} #ui-datepicker-div .ui-datepicker-prev:hover .ui-icon,
#ui-datepicker-div .ui-datepicker-next:hover .ui-icon {
background-color: var(--bb-primary);
transform: scale(1.2);
transition: transform 150ms ease, background-color 150ms ease;
} #ui-datepicker-div .ui-datepicker-prev.ui-state-disabled .ui-icon,
#ui-datepicker-div .ui-datepicker-next.ui-state-disabled .ui-icon {
background-color: var(--bb-muted);
opacity: 0.4;
transform: none;
} #ui-datepicker-div .ui-datepicker-calendar {
width: 100%;
border-collapse: collapse;
margin-top: 6px;
}
#ui-datepicker-div .ui-datepicker-calendar th {
font-weight: 600;
font-size: 11px;
color: var(--bb-muted);
padding: 8px 0;
text-transform: uppercase;
letter-spacing: .03em;
border: 0;
text-align:center;
}
#ui-datepicker-div .ui-datepicker-calendar td {
border: 0;
padding: 2px;
} #ui-datepicker-div .ui-datepicker-calendar td a,
#ui-datepicker-div .ui-datepicker-calendar td span {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px; height: 40px;
border-radius: 10px;
text-decoration: none;
color: var(--bb-text);
transition: background 120ms ease, color 120ms ease, box-shadow 120ms ease;
border: 1px solid transparent;
font-size: 14px;
} #ui-datepicker-div .ui-datepicker-other-month .ui-state-default,
#ui-datepicker-div td.ui-datepicker-unselectable span,
#ui-datepicker-div td.ui-datepicker-unselectable a {
color: #cbd5e1; background: #f8fafc !important;
border: 1px dashed var(--bb-border);
cursor: not-allowed !important;
} #ui-datepicker-div .ui-datepicker-calendar td a:hover {
background: var(--bb-hover);
}
#ui-datepicker-div .ui-datepicker-calendar td a:focus {
outline: none;
box-shadow: 0 0 0 3px var(--bb-focus);
} #ui-datepicker-div .ui-state-highlight {
border-color: var(--bb-border);
background: #f8fafc;
} #ui-datepicker-div .ui-state-active {
background: var(--bb-primary);
color: #fff !important;
border-color: var(--bb-primary);
} #ui-datepicker-div .ui-datepicker-week-end a {
color: #334155;
} #ui-datepicker-div .ui-datepicker-buttonpane {
border-top: 1px solid var(--bb-border);
margin-top: 8px;
padding: 8px;
display: flex;
justify-content: flex-end;
gap: 8px;
}
#ui-datepicker-div .ui-datepicker-buttonpane .ui-priority-primary,
#ui-datepicker-div .ui-datepicker-buttonpane .ui-priority-secondary {
background: var(--bb-hover);
border: 1px solid var(--bb-border);
border-radius: 8px;
padding: 6px 10px;
color: var(--bb-text);
cursor: pointer;
}
#ui-datepicker-div .ui-datepicker-buttonpane .ui-priority-primary:hover,
#ui-datepicker-div .ui-datepicker-buttonpane .ui-priority-secondary:hover {
background: #e2e8f0;
} @media (max-width: 420px) {
#ui-datepicker-div.ui-datepicker {
width: 100vw;
max-width: 360px;
left: 50% !important; transform: translateX(-50%);
border-radius: 14px;
}
#ui-datepicker-div .ui-datepicker-calendar td a,
#ui-datepicker-div .ui-datepicker-calendar td span {
width: 44px; height: 44px;
}
}