.air-datepicker.qua-datepicker {
    --adp-font-family: "Noto Sans JP", "Yu Gothic", "Hiragino Sans", sans-serif;
}

.air-datepicker {
    --adp-width: 292px;
    --adp-grid-areas: "nav" "body" "timepicker" "seconds" "buttons";
    --adp-font-family: "Noto Sans JP", "Yu Gothic", "Hiragino Sans", sans-serif;
    --adp-background-color: #ffffff;
    --adp-color: #24364d;
    --adp-color-secondary: #6d7d92;
    --adp-accent-color: #1f5fd4;
    --adp-cell-background-color-selected: #1f5fd4;
    --adp-cell-background-color-selected-hover: #1849a9;
    --adp-day-name-color: #52647b;
    --adp-border-color: #c9d5e5;
    --adp-border-color-inner: #dfe6f0;
    --adp-border-radius: 6px;
    --adp-cell-border-radius: 4px;
    --adp-z-index: 1000;
    box-shadow: 0 12px 28px rgb(15 39 71 / 18%);
}

.air-datepicker-cell.qua-calendar-sunday:not(.-selected-),
.air-datepicker-body--day-name[data-day-index="0"] {
    color: #cf334d;
}

.air-datepicker-cell.qua-calendar-saturday:not(.-selected-),
.air-datepicker-body--day-name[data-day-index="6"] {
    color: #2368c4;
}

.air-datepicker-cell.qua-calendar-holiday:not(.-selected-) {
    color: #cf334d;
    font-weight: 700;
}

.qua-datepicker-seconds {
    grid-area: seconds;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    min-height: 36px;
    padding: 4px 10px;
    border-top: 1px solid var(--adp-border-color-inner);
    color: var(--adp-color-secondary);
    font-size: 12px;
}

.qua-datepicker-seconds input {
    width: 58px;
    height: 28px;
    padding: 3px 7px;
    border: 1px solid var(--adp-border-color);
    border-radius: 4px;
    color: var(--adp-color);
    background: var(--adp-background-color);
    font: inherit;
    text-align: right;
}

.qua-datepicker-seconds input:focus {
    border-color: var(--adp-accent-color);
    outline: 2px solid rgb(31 95 212 / 18%);
    outline-offset: 1px;
}

.air-datepicker-button.qua-datepicker-close {
    font-weight: 600;
}

[data-qua-datetime] {
    min-width: 220px;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 520px) {
    .air-datepicker {
        --adp-width: min(320px, calc(100vw - 32px));
    }
}