.mp-duration-field {
    /* THE SHARED FIELD RHYTHM, and nothing on top of it. Every field in a modal form row is a
       <label> at display:flex/column with a 5px gap and a 38px control, so its box is exactly
       12.5 + 5 + 38 and align-items:end lines the row up on its own.

       This rule used to declare `gap: 0` and `top: 1px`, and .mp-duration-control below remade the
       gap as `margin-top: 8px` and paid for it with `top: -3px`. The PAINT came out close to right
       and the BOX came out 3px too tall, which is the half that leaks: the next field needed
       `margin-bottom: 3px` to compensate, .mp-budget-row repeated the trick a level deeper, and a
       fourth rule zeroed the third. Four nudges compounding to a label and control baseline that
       was 1px, 2px or 3px out depending on which fields the chosen shape happened to show.

       A compound control is not a reason to leave the rhythm. It is 38px like everything else, so
       it sits where everything else sits and needs no offset at all.

       position: relative stays, and is the only thing here: .mp-duration-presets and
       .mp-estimate-lock are absolutely positioned against this box. */
    position: relative;
}

.mp-duration-control {
    display: grid;
    grid-template-columns: minmax(0px, 1fr) auto;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 38px;
    padding: 4px 3px 4px 6px;
    border: 1px solid var(--mp-slate-18);
    border-radius: 5px;
    background: linear-gradient(var(--mp-fill-055), var(--mp-fill-024));
    box-shadow: var(--mp-fill-035) 0px 1px 0px inset;
}

.is-estimate-locked .mp-duration-control {
    gap: 3px;
}

.mp-duration-control:hover {
    border-color: var(--mp-slate-32);
    background: linear-gradient(var(--mp-fill-07), var(--mp-fill-035));
}

.mp-duration-control:focus-within {
    border-color: var(--mp-hl-48);
    box-shadow: var(--mp-hl-09) 0px 0px 0px 4px, var(--mp-fill-04) 0px 1px 0px inset;
}

input.mp-duration-slider, .mp-modal input.mp-duration-slider {
    appearance: none;
    display: block;
    width: 100%;
    cursor: pointer;
    touch-action: pan-y;
    min-height: 0px !important;
    height: 22px !important;
    padding: 0px !important;
    border: 0px !important;
    background: none !important;
    box-shadow: none !important;
}

input.mp-duration-slider:focus, .mp-modal input.mp-duration-slider:focus {
    outline: medium;
    box-shadow: none !important;
}

input.mp-duration-slider::-webkit-slider-runnable-track, .mp-modal input.mp-duration-slider::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 999px;
    background: var(--mp-slate-24);
}

input.mp-duration-slider::-webkit-slider-thumb, .mp-modal input.mp-duration-slider::-webkit-slider-thumb {
    appearance: none;
    width: 18px;
    height: 18px;
    margin-top: -6px;
    border: 2px solid var(--mp-cal-panel);
    border-radius: 999px;
    background: var(--highlight);
    box-shadow: var(--mp-sh-28) 0px 2px 8px;
}

input.mp-duration-slider::-moz-range-track, .mp-modal input.mp-duration-slider::-moz-range-track {
    height: 6px;
    border: 0px;
    border-radius: 999px;
    background: var(--mp-slate-24);
}

input.mp-duration-slider::-moz-range-thumb, .mp-modal input.mp-duration-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border: 2px solid var(--mp-cal-panel);
    border-radius: 999px;
    background: var(--highlight);
    box-shadow: var(--mp-sh-28) 0px 2px 8px;
}

.mp-duration-value {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 54px;
    height: 26px;
    padding: 0px 8px;
    border-radius: 5px;
    color: var(--mp-cal-solid);
    background: linear-gradient(135deg, var(--mp-ink-brand), var(--mp-accent-ink));
    font-size:var(--mp-fs-sm,12px);
    font-weight:var(--mp-fw-heavy,800);
    letter-spacing:var(--mp-ls-normal,0);
    white-space: nowrap;
}

.mp-duration-control {
}

.mp-duration-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    position: absolute;
    right: 0px;
    top: -3px;
}

.mp-duration-presets button {
    min-height: 18px;
    padding: 0px 6px;
    border: 1px solid var(--mp-slate-18);
    border-radius: 5px;
    background: var(--mp-cal-dim);
    color: var(--mp-ink-soft);
    font-style: inherit;
    font-variant-caps: inherit;
    font-width: inherit;
    line-height: inherit;
    font-family: inherit;
    font-size-adjust: inherit;
    font-kerning: inherit;
    font-variant-alternates: inherit;
    font-variant-ligatures: inherit;
    font-variant-numeric: inherit;
    font-variant-east-asian: inherit;
    font-variant-position: inherit;
    font-feature-settings: inherit;
    font-optical-sizing: inherit;
    font-variation-settings: inherit;
    font-size:var(--mp-fs-sm,12px);
    font-weight:var(--mp-fw-bold,700);
    cursor: pointer;
}

.mp-duration-presets button:hover, .mp-duration-presets button.is-active {
    border-color: var(--mp-hl-45);
    color: var(--text);
    background: var(--mp-hl-12);
}

#calendar-task-form.is-readonly .mp-duration-control, #calendar-task-form.is-readonly .mp-duration-presets {
    opacity: 0.75;
    pointer-events: none;
}

.ai-cloud-datepicker-input {
    cursor: pointer !important;
}

.flatpickr-calendar.ai-cloud-datepicker {
    width: 318px !important;
    background: var(--mp-cal-cell) !important;
    border: 1px solid var(--mp-fill-14) !important;
    border-radius: 12px !important;
    box-shadow: var(--mp-sh-45) 0px 18px 50px !important;
    overflow: hidden !important;
    color: var(--mp-ink-invert) !important;
    font-family: inherit !important;
}

.flatpickr-calendar.ai-cloud-datepicker::before, .flatpickr-calendar.ai-cloud-datepicker::after {
    border-bottom-color: var(--mp-cal-cell) !important;
}

.flatpickr-calendar.ai-cloud-datepicker .flatpickr-months {
    height: 56px !important;
    background: linear-gradient(var(--border), var(--mp-fill-03)) !important;
    border-bottom: 1px solid var(--mp-fill-12) !important;
}

.flatpickr-calendar.ai-cloud-datepicker .flatpickr-month {
    height: 56px !important;
    color: var(--mp-ink-invert) !important;
    fill: var(--mp-ink-invert) !important;
}

.flatpickr-calendar.ai-cloud-datepicker .flatpickr-current-month {
    top: 0px !important;
    left: 50% !important;
    width: auto !important;
    min-width: 226px !important;
    height: 56px !important;
    padding: 0px !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 18px !important;
    color: var(--mp-ink-invert) !important;
    font-size:var(--mp-fs-lg,16px) !important;
    line-height: 56px !important;
    font-weight:var(--mp-fw-heavy,800) !important;
    letter-spacing:var(--mp-ls-normal,0) !important;
    text-align: center !important;
}

.flatpickr-calendar.ai-cloud-datepicker .flatpickr-current-month .cur-month, .flatpickr-calendar.ai-cloud-datepicker .flatpickr-current-month input.cur-year {
    color: var(--mp-ink-invert) !important;
    font-size:var(--mp-fs-lg,16px) !important;
    font-weight:var(--mp-fw-heavy,800) !important;
    background: none !important;
    border: 0px !important;
    box-shadow: none !important;
    padding: 0px !important;
    margin: 0px !important;
    height: 56px !important;
    line-height: 56px !important;
    text-align: center !important;
}

.flatpickr-calendar.ai-cloud-datepicker .flatpickr-current-month .numInputWrapper {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 78px !important;
    height: 56px !important;
    flex: 0 0 auto !important;
}

.flatpickr-calendar.ai-cloud-datepicker .flatpickr-current-month input.cur-year {
    width: 78px !important;
}

.flatpickr-calendar.ai-cloud-datepicker .flatpickr-current-month .numInputWrapper span.arrowUp, .flatpickr-calendar.ai-cloud-datepicker .flatpickr-current-month .numInputWrapper span.arrowDown {
    display: none !important;
}

.flatpickr-calendar.ai-cloud-datepicker .flatpickr-prev-month, .flatpickr-calendar.ai-cloud-datepicker .flatpickr-next-month {
    top: 12px !important;
    width: 32px !important;
    height: 32px !important;
    padding: 0px !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--mp-ink-cal) !important;
    fill: var(--mp-ink-cal) !important;
}

.flatpickr-calendar.ai-cloud-datepicker .flatpickr-prev-month {
    left: 12px !important;
}

.flatpickr-calendar.ai-cloud-datepicker .flatpickr-next-month {
    right: 12px !important;
}

.flatpickr-calendar.ai-cloud-datepicker .flatpickr-prev-month:hover, .flatpickr-calendar.ai-cloud-datepicker .flatpickr-next-month:hover {
    background: var(--mp-hl-14) !important;
    color: var(--highlight) !important;
    fill: var(--highlight) !important;
}

.flatpickr-calendar.ai-cloud-datepicker .flatpickr-prev-month span, .flatpickr-calendar.ai-cloud-datepicker .flatpickr-next-month span {
    font-size:var(--mp-fs-3xl,24px) !important;
    line-height:var(--mp-lh-none,1) !important;
    margin-top: -4px !important;
}

.flatpickr-calendar.ai-cloud-datepicker .flatpickr-weekdays {
    height: 34px !important;
    background: var(--mp-cal-cell) !important;
    border-bottom: 1px solid var(--border) !important;
}

.flatpickr-calendar.ai-cloud-datepicker .flatpickr-weekday {
    color: var(--mp-fill-64) !important;
    font-size:var(--mp-fs-xs,11px) !important;
    font-weight:var(--mp-fw-heavy,800) !important;
    text-transform: uppercase !important;
    letter-spacing:var(--mp-ls-wide,0.04em) !important;
}

.flatpickr-calendar.ai-cloud-datepicker .flatpickr-days {
    width: 318px !important;
    background: var(--mp-cal-cell) !important;
    padding: 8px 9px 10px !important;
}

.flatpickr-calendar.ai-cloud-datepicker .dayContainer {
    width: 300px !important;
    min-width: 300px !important;
    max-width: 300px !important;
}

.flatpickr-calendar.ai-cloud-datepicker .flatpickr-day {
    color: var(--mp-ink-cal-soft) !important;
    border-radius: 8px !important;
    border: 1px solid transparent !important;
    max-width: 42px !important;
    height: 36px !important;
    line-height: 34px !important;
    font-size:var(--mp-fs-md,14px) !important;
    font-weight:var(--mp-fw-bold,700) !important;
}

.flatpickr-calendar.ai-cloud-datepicker .flatpickr-day.prevMonthDay, .flatpickr-calendar.ai-cloud-datepicker .flatpickr-day.nextMonthDay {
    color: var(--mp-fill-28) !important;
}

.flatpickr-calendar.ai-cloud-datepicker .flatpickr-day:hover, .flatpickr-calendar.ai-cloud-datepicker .flatpickr-day:focus {
    background: var(--mp-hl-14) !important;
    border-color: var(--mp-hl-25) !important;
    color: var(--highlight) !important;
}

.flatpickr-calendar.ai-cloud-datepicker .flatpickr-day.selected, .flatpickr-calendar.ai-cloud-datepicker .flatpickr-day.startRange, .flatpickr-calendar.ai-cloud-datepicker .flatpickr-day.endRange {
    background: linear-gradient(135deg, #00ea5e, #38bdf8);
    ;
    border-color: var(--highlight) !important;
  color: rgb(6, 18, 10) !important;  
    box-shadow: var(--mp-hl-18) 0px 0px 0px 2px !important;
}
.flatpickr-calendar.ai-cloud-datepicker .flatpickr-day.today {
    border-color: var(--highlight) !important;
    color: var(--mp-ink-invert) !important;
}

.flatpickr-calendar.ai-cloud-datepicker .flatpickr-day.today.selected {
    color: rgb(6, 18, 10) !important;
}

.flatpickr-calendar.ai-cloud-datepicker .flatpickr-day.selected:hover{
    color: #fff!important;
}

.flatpickr-calendar.ai-cloud-datepicker.hasTime .flatpickr-time {
    display: none !important;
}

.flatpickr-calendar.ai-cloud-datepicker .ai-cloud-timebar {
    padding: 12px 14px 14px !important;
    border-top: 1px solid var(--mp-fill-10) !important;
    background: var(--mp-cal-cell) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
}

.flatpickr-calendar.ai-cloud-datepicker .ai-cloud-time-control {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}

.flatpickr-calendar.ai-cloud-datepicker .ai-cloud-time-select {
    flex: 1 1 0px !important;
    min-width: 0px !important;
    max-width: 120px !important;
    height: 44px !important;
    padding: 0px 26px 0px 12px !important;
    border: 1px solid var(--mp-fill-16) !important;
    border-radius: 10px !important;
    background-color: var(--mp-fill-043) !important;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2012%2012'%3E%3Cpath%20d='M2.5%204.5%206%208l3.5-3.5'%20fill='none'%20stroke='white'%20opacity='0.55'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 9px center !important;
    background-size: 11px 11px !important;
    color: var(--mp-ink-invert) !important;
    font-size:var(--mp-fs-lg,16px) !important;
    font-weight:var(--mp-fw-heavy,800) !important;
    line-height: 44px !important;
    text-align: center !important;
    text-align-last: center !important;
    appearance: none !important;
    box-shadow: none !important;
    cursor: pointer !important;
}

.flatpickr-calendar.ai-cloud-datepicker .ai-cloud-time-select:hover {
    border-color: var(--mp-hl-40) !important;
    background-color: var(--mp-fill-07) !important;
}

.flatpickr-calendar.ai-cloud-datepicker .ai-cloud-time-select:focus {
    outline: 0px !important;
    border-color: var(--mp-hl-55) !important;
    box-shadow: var(--mp-hl-18) 0px 0px 0px 3px !important;
}

.flatpickr-calendar.ai-cloud-datepicker .ai-cloud-time-select option {
    color: var(--mp-ink-invert) !important;
    background: var(--mp-cal-cell) !important;
    font-weight:var(--mp-fw-bold,700) !important;
    text-align: center !important;
}

.flatpickr-calendar.ai-cloud-datepicker .ai-cloud-time-sep {
    flex: 0 0 auto !important;
    color: var(--mp-fill-85) !important;
    font-size:var(--mp-fs-xl,18px) !important;
    font-weight:var(--mp-fw-black,900) !important;
    line-height:var(--mp-lh-none,1) !important;
}

.flatpickr-calendar.ai-cloud-datepicker .ai-cloud-time-confirm {
    background: linear-gradient(135deg, var(--mp-ink-brand), var(--mp-accent-ink));
    flex: 0 0 44px !important;
    width: 44px !important;
    height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0px !important;
    border: 0px !important;
    border-radius: 10px !important;
    color: rgb(6, 18, 10) !important;
    box-shadow: var(--mp-hl-18) 0px 0px 0px 1px, var(--mp-sh-25) 0px 6px 16px !important;
    cursor: pointer !important;
}

.flatpickr-calendar.ai-cloud-datepicker .ai-cloud-time-confirm svg {
    width: 22px !important;
    height: 22px !important;
    display: block !important;
    pointer-events: none !important;
}

.flatpickr-calendar.ai-cloud-datepicker .ai-cloud-time-confirm:hover, .flatpickr-calendar.ai-cloud-datepicker .ai-cloud-time-confirm:focus {
    outline: 0px !important;
    filter: brightness(1.06) !important;
    box-shadow: var(--mp-hl-35) 0px 0px 0px 3px !important;
}

.flatpickr-calendar.ai-cloud-datepicker .ai-cloud-time-confirm:active {
    transform: translateY(1px) !important;
}

input.flatpickr-input.ai-cloud-datepicker-input, input.ai-cloud-datepicker-input + input.flatpickr-input {
    width: 100%;
}