:root {
    --app-dp-primary: #13304a;
    --app-dp-accent: #1d6fb8;
    --app-dp-text: #1b2733;
    --app-dp-muted: #5b6b7c;
    --app-dp-faded: #b8c2cc;
    --app-dp-border: #d5dde6;
    --app-dp-divider: #e3e8ee;
    --app-dp-hover: #e6edf5;
    --app-dp-range: #e6edf5;
}

.flatpickr-calendar.app-dp {
    border: 1px solid var(--app-dp-border);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(19, 48, 74, .18);
    font-family: inherit;
    color: var(--app-dp-text);
    overflow: hidden;
}

.flatpickr-calendar.app-dp::before,
.flatpickr-calendar.app-dp::after {
    display: none;
}

.app-dp .flatpickr-months {
    padding-top: 6px;
}

.app-dp .flatpickr-months .flatpickr-month {
    height: 40px;
    color: var(--app-dp-primary);
    fill: var(--app-dp-primary);
}

.app-dp .flatpickr-current-month {
    padding-top: 8px;
    font-size: 15px;
    font-weight: 700;
}

.app-dp .flatpickr-current-month .flatpickr-monthDropdown-months,
.app-dp .flatpickr-current-month input.cur-year {
    font-weight: 700;
    color: var(--app-dp-primary);
}

.app-dp .flatpickr-current-month .flatpickr-monthDropdown-months:hover,
.app-dp .flatpickr-current-month .numInputWrapper:hover {
    background: var(--app-dp-hover);
    border-radius: 6px;
}

.app-dp .flatpickr-months .flatpickr-prev-month,
.app-dp .flatpickr-months .flatpickr-next-month {
    top: 6px;
    margin: 0 6px;
    padding: 8px;
    border-radius: 8px;
    color: var(--app-dp-primary);
    fill: var(--app-dp-primary);
}

.app-dp .flatpickr-months .flatpickr-prev-month:hover,
.app-dp .flatpickr-months .flatpickr-next-month:hover {
    background: var(--app-dp-hover);
}

.app-dp .flatpickr-months .flatpickr-prev-month:hover svg,
.app-dp .flatpickr-months .flatpickr-next-month:hover svg {
    fill: var(--app-dp-accent);
}

.app-dp span.flatpickr-weekday {
    color: var(--app-dp-muted);
    font-size: 12px;
    font-weight: 600;
}

.app-dp .flatpickr-day {
    border-radius: 8px;
    color: var(--app-dp-text);
    font-variant-numeric: tabular-nums;
}

.app-dp .flatpickr-day:hover,
.app-dp .flatpickr-day:focus {
    border-color: transparent;
    background: var(--app-dp-hover);
}

.app-dp .flatpickr-day.today {
    border-color: var(--app-dp-accent);
    font-weight: 700;
}

.app-dp .flatpickr-day.today:hover {
    border-color: var(--app-dp-accent);
    background: var(--app-dp-hover);
    color: var(--app-dp-text);
}

.app-dp .flatpickr-day.selected,
.app-dp .flatpickr-day.startRange,
.app-dp .flatpickr-day.endRange,
.app-dp .flatpickr-day.selected:hover,
.app-dp .flatpickr-day.startRange:hover,
.app-dp .flatpickr-day.endRange:hover {
    border-color: var(--app-dp-primary);
    background: var(--app-dp-primary);
    color: #ffffff;
    font-weight: 700;
}

.app-dp .flatpickr-day.inRange {
    border-color: var(--app-dp-range);
    background: var(--app-dp-range);
    box-shadow: -5px 0 0 var(--app-dp-range), 5px 0 0 var(--app-dp-range);
}

.app-dp .flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),
.app-dp .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),
.app-dp .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
    box-shadow: -10px 0 0 var(--app-dp-primary);
}

.app-dp .flatpickr-day.prevMonthDay,
.app-dp .flatpickr-day.nextMonthDay {
    color: var(--app-dp-faded);
}

.app-dp .flatpickr-day.flatpickr-disabled,
.app-dp .flatpickr-day.flatpickr-disabled:hover {
    color: #d5dbe1;
    background: transparent;
    text-decoration: line-through;
}

.app-dp.hasTime .flatpickr-time {
    height: 52px;
    max-height: 52px;
    line-height: 52px;
    border-top: 1px solid var(--app-dp-divider) !important;
}

.app-dp .flatpickr-time input {
    font-size: 20px;
    font-weight: 700;
    color: var(--app-dp-primary);
    border-radius: 8px;
    font-variant-numeric: tabular-nums;
}

.app-dp .flatpickr-time input:hover,
.app-dp .flatpickr-time input:focus,
.app-dp .flatpickr-time .flatpickr-am-pm:hover {
    background: var(--app-dp-hover);
}

.app-dp .flatpickr-time .flatpickr-time-separator {
    color: var(--app-dp-primary);
    font-weight: 700;
}

.app-dp .numInputWrapper span.arrowUp::after {
    border-bottom-color: var(--app-dp-primary);
}

.app-dp .numInputWrapper span.arrowDown::after {
    border-top-color: var(--app-dp-primary);
}

.app-dp-shortcuts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 10px 12px;
    border-top: 1px solid var(--app-dp-divider);
}

.app-dp-shortcut {
    height: 28px;
    padding: 0 10px;
    border: 1px solid #c8d1db;
    border-radius: 999px;
    background: #ffffff;
    color: #2b3a49;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.app-dp-shortcut:hover,
.app-dp-shortcut:focus-visible {
    border-color: var(--app-dp-primary);
    background: var(--app-dp-primary);
    color: #ffffff;
    outline: none;
}

input.app-dp-input {
    padding-right: 34px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235b6b7c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
    cursor: pointer;
    font-variant-numeric: tabular-nums;
}

input.app-dp-input--datetime {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235b6b7c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
}

input.app-dp-input:disabled {
    cursor: not-allowed;
    opacity: .7;
}