:root {
    --color-red: #d32d45;
}

.ff-body .flatpickr-calendar {
    /*box-shadow: none;
    border: none;*/
}

.ff-body .flatpickr-current-month .numInputWrapper {
    pointer-events: none;
}

/* actieve dag */
.ff-body .flatpickr-day.selected,
.ff-body .flatpickr-day.startRange,
.ff-body .flatpickr-day.endRange,
.ff-body .flatpickr-day.inRange {
    background: var(--color-red);
    color: #fff;
    border-color: var(--color-red);
}

/* hover over dag */
.ff-body .flatpickr-day:not(.flatpickr-disabled):hover {
    background: #000 !important;
    color: #fff;
    border-color: #000 !important;
}

.ff-body .flatpickr-day.flatpickr-disabled {
    color: #d32d465d;
}

.ff-body .flatpickr-day.flatpickr-disabled:hover {
    color: #d32d465d;
}

/* dag zonder data (grijs) */
.ff-body .flatpickr-day.disabled,
.ff-body .flatpickr-day.nextMonthDay,
.ff-body .flatpickr-day.prevMonthDay {
    color: #fff;
    pointer-events: none;
}

.ff-body .flatpickr-day.today {
    border-color: var(--color-red);
}

.ff-body .flatpickr-day {
    color: var(--color-red);
    font-weight: 500;
}

.ff-body .flatpickr-monthDropdown-months {
    pointer-events: none;
    appearance: none !important;
    /* Voor Safari en iOS */
    -webkit-appearance: none !important;
    /* Voor oudere WebKit */
    -moz-appearance: none !important;
    text-align: right;
    color: var(--color-red) !important;
    font-family: var(--heading-font-family) !important;
    text-transform: lowercase;
    font-weight: 500 !important;
    font-size: 18px !important;
    width: 113px !important;
    padding-left: 0 !important;
    padding-right: 3px !important;
}

.numInputWrapper {
    width: 113px !important;
}

.numInputWrapper input {
    color: var(--color-red) !important;
    font-family: var(--heading-font-family);
    font-weight: 500 !important;
    font-size: 18px !important;
    width: 113px !important;
    padding-left: 3px !important;
}

.ff-body .flatpickr-months .flatpickr-prev-month,
.ff-body .flatpickr-months .flatpickr-next-month {
    color: var(--color-red);
    fill: var(--color-red);
}

.ff-body .flatpickr-weekday {
    color: var(--color-red);
}

.ff-body .flatpickr-calendar {
    width: 100%;
    max-width: 340px;
    min-width: 320px;
}

.ff-body .flatpickr-innerContainer,
.ff-body .flatpickr-rContainer,
.ff-body .flatpickr-weekdays,
.ff-body .flatpickr-days {
    width: 100%;
    max-width: 340px;
}

.dayContainer {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    width: 100%;
    max-width: 340px;
    box-sizing: border-box;
}

.ff-body .flatpickr-day {
    width: 100%;
    /* height: 50px; */
    /* line-height: 50px; */
    box-sizing: border-box;
    justify-self: center;
}