.date-control { display: block; position: relative; min-width: 0; width: 100%; }
.date-control input[type="date"], .date-control input[type="month"] { position: relative; width: 100%; box-sizing: border-box; padding-right: 36px !important; cursor: pointer; }
.date-control .date-placeholder { position: absolute; inset: 0 auto 0 11px; display: none; align-items: center; color: var(--muted); font: 14px var(--body); pointer-events: none; }
.date-control.is-empty .date-placeholder { display: flex; }
.date-control.is-empty input:not(:focus) { color: transparent; }
.date-control.is-empty input:not(:focus)::-webkit-datetime-edit { opacity: 0; }
.date-control.is-empty:focus-within .date-placeholder { display: none; }
.date-control .date-icon { position: absolute; right: 11px; top: 50%; transform: translateY(-50%); display: flex; color: var(--muted); pointer-events: none; }
.date-control .date-icon svg { width: 17px; height: 17px; }
.date-control input::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: pointer; }
.ledger-month-control .date-control { width: 148px; flex: 0 0 148px; }
@media (max-width: 767px) {
  .ledger-month-control .date-control { width: 130px; flex-basis: 130px; }
  .date-control .date-placeholder { font-size: 16px; }
}