input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"] {
    min-height: 38px;
    font-size: 16px;
    cursor: text;
    min-width: 9.5em;
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    padding: 4px;
    margin-left: 2px;
    opacity: 0.6;
}
input[type="date"]:hover::-webkit-calendar-picker-indicator,
input[type="time"]:hover::-webkit-calendar-picker-indicator {
    opacity: 1;
}

@media (min-width: 641px) and (hover: hover) {
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"],
    input[type="month"] {
        font-size: 14px;
    }
}

.date-quick {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 5px;
}
.date-quick-btn {
    font: inherit;
    font-size: 11px;
    line-height: 1;
    padding: 5px 9px;
    border: 0.5px solid var(--border, #e0ddd4);
    border-radius: 99px;
    background: #fff;
    color: var(--forest, #173404);
    cursor: pointer;
    white-space: nowrap;
}
.date-quick-btn:hover {
    background: var(--forest, #173404);
    border-color: var(--forest, #173404);
    color: #fff;
}
.date-quick-btn:focus-visible {
    outline: 2px solid var(--forest, #173404);
    outline-offset: 1px;
}