:root {
    --accent-color: rgba(56, 102, 65);
    --accent-color-rgb: 56, 102, 65;
    --meta-color: rgba(56, 102, 65, 0.75);
    --meta-color-light: rgba(107, 157, 117, 0.75);
    --divider-color: #d4cdb1;
    --divider-color-medium: rgba(56, 102, 65, 0.15);
    --divider-color-alternate: #f3f0e7;
    --text-color: #000;
    --secondary-text-color: #dbdbdb;
    --gradient-start-color: #D4CCAC;
    --light-gradient-start-color: rgba(212, 204, 172, 0.35);
    --link-hover-color: #549060;
    --input-field-background: rgba(56, 102, 65, 0.06);
    --input-field-border: rgba(255, 255, 255, 0.38);
    --button-text-color: #fff;
    --button-hover-color: rgb(49, 90, 58);
    --button-error-hover-color: #bf403c;
    --error-color: #E4544F;
    --error-background-color: rgba(228, 84, 79, 0.1);
    --error-hover-color: rgba(228, 84, 79, 0.15);
    --tooltip-background-color: #000;
    --locked-text-color: rgba(0, 0, 0, 0.5);
    --general-divider-color: #000;
    --flat-menu-button-color: #e3e4d7;
    --flat-menu-button-hover-color: #dbded0;

    --passbook-cover-background-color: rgba(56, 102, 65, 0.15);
    --passbook-cover-border-color: rgba(56, 102, 65, 0.16);
    --passbook-page-background-color: #fff;
    --passbook-page-border-color: rgba(56, 102, 65, 0.1);
    --passbook-front-page-background-color: #fafafa;

    --paper-sheet-edge-color: #fff;
    --paper-sheet-background-color: #fafafa;

    --controls-background-color: #f5f5f5;
    --controls-hover-color: #ededed;
    --controls-placeholder-color: #adadad;
    --control-fading-edge-color: #fff;
    --control-glow-color: rgba(56, 102, 65, 0.1);

    --subcontrols-background-color: #ffffff;
    --subcontrols-border-color: #f4f4f4;
    --subcontrols-border-color-alternate: #eaeaea;

    --calendar-background-color: #fff;
    --calendar-border-color: #ebebeb;

    --unfulfilled-item-background-color: #f9f9f9;
    --unfulfilled-item-meta-color: #8b8b8b;

    --category-blue-color: #C4E2FC;
    --category-dark-blue-color: #4181C6;
    --category-orange-color: #F9D8C1;
    --category-dark-orange-color: #ED7533;
    --category-purple-color: #D4D9FC;
    --category-dark-purple-color: #5A69E1;
    --category-teal-color: #C3F2EE;
    --category-dark-teal-color: #408D80;
    --category-yellow-color: #FBE876;
    --category-dark-yellow-color: #CEAC39;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    -webkit-font-smoothing: antialiased;
    font-size: 16px;
    font-family: -apple-system, BlinkMacSystemFont, Arial, "Noto Sans", sans-serif;
    color: var(--text-color);
}

input, select {
    font-family: -apple-system, BlinkMacSystemFont, Arial, "Noto Sans", sans-serif;
}

@font-face {
    font-display: swap;
    font-family: "DM Sans";
    font-style: normal;
    font-weight: 600;
    src: url('/fonts/dm-sans-semibold.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: "Phudu";
    font-style: normal;
    font-weight: 600;
    src: url('/fonts/phudu-semibold.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: "DM Mono";
    font-style: normal;
    font-weight: 500;
    src: url('/fonts/dm-mono-medium.woff2') format('woff2');
}

.flatpickr-calendar {
    border-radius: 14px !important;
    background: var(--calendar-background-color) !important;
    -webkit-box-shadow: 1px 0 0 var(--calendar-border-color),
    -1px 0 0 var(--calendar-border-color),
    0 1px 0 var(--calendar-border-color),
    0 -1px 0 var(--calendar-border-color),
    0 3px 13px rgba(0, 0, 0, 0.08) !important;
    box-shadow: 1px 0 0 var(--calendar-border-color),
    -1px 0 0 var(--calendar-border-color),
    0 1px 0 var(--calendar-border-color),
    0 -1px 0 var(--calendar-border-color),
    0 3px 13px rgba(0, 0, 0, 0.08) !important;
}

.flatpickr-months {
    margin: 8px 10px !important;
}

.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month {
    left: 5px !important;
    top: 7px !important;
}

.flatpickr-months .flatpickr-next-month.flatpickr-next-month {
    right: 5px !important;
    top: 7px !important;
}

.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
    fill: var(--accent-color) !important;
}

.flatpickr-current-month {
    color: var(--accent-color) !important;
    font-size: 1.3rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: -2px !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
    position: relative;
    font-weight: 600 !important;
    text-align: center !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    line-height: 1.2 !important;
    padding: 0 18px 0 0.5ch !important;
}

.flatpickr-current-month::after {
    position: absolute;
    top: 14px;
    right: 41%;
    content: '';
    width: 14px;
    height: 14px;
    background-image: url('/images/chevron-up-down.svg');
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
}

.flatpickr-current-month input.cur-year {
    font-weight: 600 !important;
    text-align: center !important;
    padding: 0 0.5ch 0 0.5ch !important;
}

.flatpickr-current-month .numInputWrapper:hover,
.flatpickr-time .numInputWrapper:hover,
.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
    background: none !important;
}

span.flatpickr-weekday {
    color: var(--meta-color) !important;
}

.flatpickr-weekdays .flatpickr-weekdaycontainer {
    padding: 0 8px !important;
}

.flatpickr-days .dayContainer {
    padding: 0 8px !important;
}

.flatpickr-days {
    padding-bottom: 10px !important;
}

.flatpickr-day {
    color: var(--text-color) !important;
    font-weight: 500 !important;
}

.flatpickr-day:hover {
    background: var(--controls-hover-color) !important;
    border-color: var(--controls-hover-color) !important;
}

.flatpickr-calendar.hasTime .flatpickr-time {
    border-top: 1px solid var(--divider-color-alternate) !important;
    margin-top: 8px !important;
}

.flatpickr-time .flatpickr-time-separator, .flatpickr-time .flatpickr-am-pm {
    color: var(--text-color) !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
}

.flatpickr-time .flatpickr-time-separator {
    font-size: 1.2rem !important;
    margin-top: -2px !important;
}

.flatpickr-time input {
    color: var(--text-color) !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
}

.flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay {
    color: var(--meta-color-light) !important;
}

.flatpickr-day.flatpickr-disabled {
    color: var(--controls-placeholder-color) !important;
}

.flatpickr-day.today {
    background-color: var(--divider-color-alternate) !important;
    border: none !important;
    font-weight: 600 !important;
}

.flatpickr-day.selected {
    background: var(--accent-color) !important;
    border-color: var(--accent-color) !important;
    color: var(--button-text-color) !important;
    font-weight: 700 !important;
}

.flatpickr-time input:hover {
    background: var(--controls-hover-color) !important;
}

.flatpickr-time input.flatpickr-hour:hover {
    border-bottom-left-radius: 14px !important;
}

.flatpickr-time input:focus {
    background: none !important;
}

.flatpickr-time .flatpickr-am-pm:hover {
    background: var(--controls-hover-color) !important;
    border-bottom-right-radius: 14px !important;
}

.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.endRange.nextMonthDay,
.flatpickr-day.inRange {
    background: var(--accent-color) !important;
    color: var(--button-text-color) !important;
    -webkit-box-shadow: -5px 0 0 var(--accent-color), 5px 0 0 var(--accent-color) !important;
    box-shadow: -5px 0 0 var(--accent-color), 5px 0 0 var(--accent-color) !important;
    border-color: var(--accent-color) !important;
}

.chart-tooltip {
    position: absolute;
    transform: translate(-50%, -120%);
    color: var(--button-text-color);
    background: var(--tooltip-background-color);
    border: 1px solid var(--input-field-border);
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.15),
    inset 0 -2px 2px rgba(0, 0, 0, 0.05),
    0 2px 6px rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    padding: 7px 10px;
    text-align: center;
    transition: all 0.1s ease;
}

.tooltip-date {
    font-size: 0.75rem;
    opacity: 0.7;
    font-weight: 600;
    margin-bottom: 3px;
}

.tooltip-value {
    font-size: 0.85rem;
    font-weight: 600;
}