.datepicker {
width: -moz-min-content;
width: min-content; --mf-form-datepicker-bg: var(--mf-bg-secondary);
--mf-form-datepicker-header-text: var(--mf-text-secondary);
--mf-form-datepicker-bt-default: var(--mf-text-primary);
--mf-form-datepicker-bt-hover: var(--mf-text-primary);
--mf-form-datepicker-bt-active: var(--mf-text-primary);
--mf-form-datepicker-bt-disabled: var(--mf-text-disabled);
--mf-form-datepicker-bt-bg-default: var(--mf-bg-tertiary);
--mf-form-datepicker-bt-bg-hover: var(--mf-bg-tertiary);
--mf-form-datepicker-bt-bg-active: var(--mf-link-color-hover);
--mf-form-datepicker-bt-bg-disabled: transparent;
--mf-form-datepicker-bt-inRange: rgba(153, 102, 51, 1);
--mf-form-datepicker-border-inRange: rgba(153, 102, 51, 1);
--mf-form-datepicker-bt-bg-selected: var(--mf-link-color-active);
--mf-form-datepicker-bt-border-selected: var(--mf-link-color-active);
--mf-form-icon-arrow-next: url('data:image/svg+xml,<svg fill="none" viewBox="0 0 12 18" xmlns="http://www.w3.org/2000/svg"><path stroke="%23E6E6E6" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 2l7 7-7 7"/></svg>');
--mf-form-icon-arrow-prev: url('data:image/svg+xml,<svg fill="none" viewBox="0 0 12 18" xmlns="http://www.w3.org/2000/svg"><path stroke="%23E6E6E6" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 2l-7 7 7 7"/></svg>');
--mf-datepicker-gap: 8px 6px;
--mf-datepicker-width: 460px;
--mf-datepicker-btn-controls-size: 32px;
--mf-form-transition: color 250ms, box-shadow 250ms, background-color 250ms, transform 250ms, opacity 250ms, border-color 250ms; border-radius: 8px;
border: 1px solid var(--mf-border-color);
box-shadow: rgba(50, 50, 105, 0.15) 0px 2px 5px 0px, rgba(0, 0, 0, 0.05) 0px 1px 1px 0px;
background-color: var(--mf-bg-secondary);
padding: 32px;
max-width: var(--mf-datepicker-width);
width: 100%;
}
body.mf-zoom-110 .datepicker {
--mf-datepicker-width: 400px;
}
body.mf-zoom-125 .datepicker {
--mf-datepicker-width: 350px;
}
body.mf-zoom-150 .datepicker,
body.mf-zoom-175 .datepicker,
body.mf-zoom-200 .datepicker {
--mf-datepicker-width: 310px;
}
div.datepicker:not(.active) {
display: none;
} .datepicker-dropdown {
position: absolute;
z-index: 9999;
}
.datepicker.datepicker-orient-top {
margin-bottom: 6px;
}
.datepicker.datepicker-orient-bottom {
margin-top: 6px;
} .datepicker-picker {
background-color: transparent;
border-radius: unset;
display: flex;
flex-direction: column;
gap: 16px;
}
.datepicker-dropdown .datepicker-picker {
box-shadow: unset;
} .datepicker-main {
flex: auto;
padding: 0;
width: 100%;
} .datepicker-footer {
display: none;
} .datepicker-title {
box-shadow: inset 0 -1px 1px hsla(0,0%,4%,.1);
font-weight: 700;
text-align: center;
} .datepicker-controls {
display: flex;
}
.datepicker-header .datepicker-controls {
align-items: center;
gap: 8px;
padding: 0;
} .datepicker-controls .button {
align-items: center;
box-shadow: none;
cursor: pointer;
display: inline-flex;
justify-content: center;
position: relative;
text-align: center;
vertical-align: top;
white-space: nowrap;
}
.datepicker-controls .button[disabled] {
cursor: not-allowed;
} .datepicker-header .datepicker-controls button:not(.view-switch) {
all: unset;
background-color: var(--mf-bg-tertiary);
border: 1px solid var(--mf-border-color);
width: var(--mf-datepicker-btn-controls-size);
height: var(--mf-datepicker-btn-controls-size);
border-radius: 4px;
transition: var(--mf-form-transition);
position: relative;
display: grid;
place-items: center;
cursor: pointer;
text-indent: -9999px;
padding: 0 !important;
font-size: 0;
line-height: 0;
background-position: center;
background-repeat: no-repeat;
background-size: 10px;
stroke: var(--mf-text-primary) !important;
}
.datepicker-header .datepicker-controls button.prev-button {
background-image: var(--mf-form-icon-arrow-prev) !important;
}
.datepicker-header .datepicker-controls button.next-button {
background-image: var(--mf-form-icon-arrow-next) !important;
}
.datepicker-header .datepicker-controls button:not(.view-switch, :disabled):hover {
border-color: var(--mf-border-color-hover);
}
.datepicker-header .datepicker-controls button:not(.view-switch, :disabled):active,
.datepicker-header .datepicker-controls button:not(.view-switch, :disabled):focus {
background-color: var(--mf-bg-secondary);
border-color: var(--mf-border-color-hover);
}
.datepicker-header .datepicker-controls button:disabled {
opacity: 0.4 !important;
cursor: not-allowed;
background-color: var(--mf-bg-tertiary) !important;
} .datepicker-controls .view-switch {
flex: auto;
}
.datepicker-header .datepicker-controls button.view-switch {
all: unset;
font-family: var(--mf-font-base);
color: var(--mf-text-primary);
text-align: center;
font-size: 18px;
font-weight: 700;
line-height: 28px;
margin: 0 auto;
text-transform: capitalize;
letter-spacing: 0;
} .datepicker-controls .next-button,
.datepicker-controls .prev-button {
flex: 0 0 14.2857142857%;
padding-left: .375rem;
padding-right: .375rem;
}
.datepicker-controls .next-button.disabled,
.datepicker-controls .prev-button.disabled {
visibility: hidden;
}
.datepicker-footer .datepicker-controls .button {
border-radius: 2px;
flex: auto;
font-size: .75rem;
margin: calc(.375rem - 1px) .375rem;
} .datepicker-grid,
.datepicker-view {
display: flex;
}
.datepicker-view {
align-items: stretch;
width: 100%;
padding: 0;
}
.datepicker-grid {
flex: auto;
flex-wrap: wrap;
}
.datepicker-main .days-of-week,
.datepicker-main .datepicker-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: var(--mf-datepicker-gap);
} .datepicker .days {
display: flex;
flex: auto;
flex-direction: column;
}
.datepicker .days-of-week {
display: flex;
}
.datepicker .week-numbers {
display: flex;
flex: 0 0 9.6774193548%;
flex-direction: column;
}
.datepicker .weeks {
align-items: stretch;
display: flex;
flex: auto;
flex-direction: column;
} .datepicker span {
-webkit-touch-callout: none;
align-items: center;
border-radius: 4px;
cursor: default;
display: flex;
justify-content: center;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.datepicker .dow {
font-size: .875rem;
font-weight: 700;
height: 1.5rem;
}
.datepicker-main .days-of-week span,
.datepicker-main .datepicker-grid span {
aspect-ratio: 1 / 1;
height: auto;
}
.datepicker .week {
color: #b8b8b8;
flex: auto;
font-size: .75rem;
}
.datepicker .days .dow,
.datepicker-cell {
flex-basis: 14.2857142857%;
} .datepicker-cell {
height: 2.25rem;
}
.datepicker-cell:not(.day) {
flex-basis: 25%;
height: 4.5rem;
}
.datepicker-main .datepicker-grid span {
box-shadow: unset !important;
border-radius: 4px;
display: inline-flex;
justify-content: center;
align-items: center;
text-align: center;
color: var(--mf-form-datepicker-bt-default);
border: 1px solid var(--mf-border-color);
background: var(--mf-form-datepicker-bt-bg-default);
font-size: 14px;
font-weight: 700;
line-height: 22px;
font-family: var(--mf-font-base);
position: relative;
transition: var(--mf-form-transition);
}
.datepicker-cell:not(.disabled):hover,
.datepicker-main .datepicker-grid span:not(:focus, :active, .selected, .range-end, .range-start):hover {
background: var(--mf-form-datepicker-bt-bg-hover);
border-color: var(--mf-border-color-hover);
color: var(--mf-form-datepicker-bt-hover);
cursor: pointer;
}
.datepicker-main .datepicker-grid span:not(.range, .selected, .range-end, .range-start):active {
background: var(--mf-form-datepicker-bt-bg-active);
border-color: var(--mf-form-datepicker-bt-bg-active);
color: var(--mf-form-datepicker-bt-active);
} .datepicker-cell.selected,
.datepicker-cell.selected:hover,
.datepicker-main .datepicker-grid span.range-end,
.datepicker-main .datepicker-grid span.range-start,
.datepicker-main .datepicker-grid span.selected {
background: var(--mf-form-datepicker-bt-bg-selected);
color: #fff;
font-weight: 600;
border: unset;
} .datepicker-cell.range,
.datepicker-main .datepicker-grid span.range {
background: var(--mf-form-datepicker-bt-inRange) !important;
border: unset;
border-radius: 0;
} .datepicker-cell.range-start:not(.range-end),
.datepicker-main .datepicker-grid span.range-start:not(.range-end) {
border-radius: 4px 0 0 4px;
}
.datepicker-cell.range-end:not(.range-start),
.datepicker-main .datepicker-grid span.range-end:not(.range-start) {
border-radius: 0 4px 4px 0;
}
.datepicker-main .datepicker-grid span.range:not(.range-end) {
border-radius: 0;
} .datepicker-main .datepicker-grid span.range-start ~ span.range:not(.disabled):before,
.datepicker-main .datepicker-grid span.range-end:not(.disabled, .range-start):before,
.datepicker-main .datepicker-grid span.range:not(.disabled):before {
content: '';
position: absolute;
background: var(--mf-form-datepicker-bt-inRange);
width: 6px;
height: 100%;
left: -6px;
top: 0;
}
.datepicker-main .datepicker-grid span:nth-child(7n - 6):before,
.datepicker-main .datepicker-grid span.range.prev.disabled:before,
.datepicker-main .datepicker-grid span.disabled + span.range:before,
.datepicker-main .datepicker-grid span.disabled + span.range-end:before {
display: none;
}
.datepicker-main .datepicker-grid span.range:nth-child(7n - 6):not(.disabled) {
border-radius: 4px 0 0 4px !important;
}
.datepicker-main .datepicker-grid span.range:nth-child(7n):not(.disabled) {
border-radius: 0 4px 4px 0 !important;
} .datepicker-cell.disabled,
.datepicker-main .datepicker-grid span.disabled {
background: var(--mf-form-datepicker-bt-bg-disabled) !important;
box-shadow: unset !important;
border: unset !important;
color: var(--mf-form-datepicker-bt-disabled) !important;
font-weight: 400 !important;
border-radius: unset !important;
cursor: not-allowed !important;
} .datepicker-cell.next:not(.disabled),
.datepicker-cell.prev:not(.disabled),
.datepicker-main .datepicker-grid span.next,
.datepicker-main .datepicker-grid span.prev {
opacity: 0.4;
} @media(max-width: 768px) {
.datepicker {
left: 24px !important;
padding: 24px;
width: calc(100% - 48px);
}
}