.date-field{position:relative;min-width:0}
.date-field>.date-display{padding-right:43px;margin-top:0;height:42px;font-variant-numeric:tabular-nums}
label>.date-field{margin-top:7px}
.date-trigger{position:absolute;right:5px;top:5px;width:32px;height:32px;background:transparent;color:var(--green);border-radius:5px;display:grid;place-items:center}
.date-trigger:hover{background:var(--pale)}
.date-trigger svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.heading-actions>.date-field{width:185px}
.date-field[data-kind=month] .date-display{cursor:pointer;font-size:12px;text-transform:capitalize}
.date-popup{position:absolute;top:calc(100% + 8px);left:0;width:306px;max-width:calc(100vw - 78px);background:#fff;border:1px solid #dce7e0;border-radius:12px;box-shadow:0 16px 45px #153d2924;padding:17px;z-index:30;font-weight:400;cursor:default}
.date-popup[hidden]{display:none}
.date-field[data-kind=month]>.date-popup{left:auto;right:0}
.date-popup-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;gap:10px}
.date-popup-head strong{font-size:13px;font-weight:650;text-transform:capitalize;color:var(--ink)}
.date-popup .icon-button:disabled{opacity:.3;cursor:default}
.date-day-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.date-weekday{font-size:10px;text-transform:uppercase;text-align:center;color:#8b9891;padding:0 0 8px}
.date-cell{border:1px solid transparent;border-radius:7px;background:transparent;color:#3b5045;min-height:33px;font-size:12px;padding:3px}
.date-cell.weekend{color:#a5ada8;background:#f7f9f7}
.date-cell.today,.date-month.today{border-color:#a4c5b4}
.date-cell:hover:not(:disabled),.date-month:hover:not(:disabled){background:var(--pale);color:var(--green)}
.date-cell.picked,.date-month.picked{background:var(--green);color:white;border-color:var(--green)}
.date-cell.picked:hover,.date-month.picked:hover{background:var(--green-dark);color:white}
.date-cell:disabled,.date-month:disabled{color:#c7cec9;background:transparent;opacity:.5;cursor:default}
.date-month-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.date-month{min-height:43px;padding:5px;font-size:11px;border:1px solid #eaf0ec;border-radius:7px;background:#fafcfb;color:#53665b;text-transform:capitalize}
.date-popup-footer{border-top:1px solid #eaf0ec;margin-top:14px;padding-top:13px;display:flex;justify-content:space-between}
.date-popup-footer button{font-size:11px;min-height:25px}
.heading-actions .date-popup button{flex:0 0 auto}
@media(max-width:650px){.heading-actions>.date-field{flex:1;width:auto}.date-field[data-kind=month]>.date-popup{left:0;right:auto}.date-popup{padding:14px}.date-cell{min-height:34px}}
@media print{.date-popup{display:none!important}}