html[data-bs-theme=light] {
    --fc-accepted: rgb(5, 202, 146);
    --fc-day-off: rgba(138, 150, 156, 0.9); /* --ct-grey */
    --fc-not-yet-approved: var(--ct-red); /* --ct-red */
    --fc-planned: var(--ct-info); /* --ct-yellow */
    --fc-font-color: var(--ct-body-color);
}

html[data-bs-theme=dark] {
    --fc-accepted: rgb(5, 202, 146);
    --fc-day-off: rgba(138, 150, 156, 0.4); /* --ct-grey */
    --fc-not-yet-approved: var(--ct-red); /* --ct-red */
    --fc-planned: var(--ct-info); /* --ct-yellow */
    --fc-font-color: var(--ct-body-color);
}

:root {
    --fc-btn-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
}

.calendarEntry.calendarPlanned {
    border-top: 6px solid var(--fc-planned);
    border-bottom: 6px solid var(--fc-planned);
}

.calendarEntry.calendarAccepted {
    border-top: 6px solid var(--fc-accepted);
    border-bottom: 6px solid var(--fc-accepted);
}

.calendarEntry.calendarDayOff {
    background: var(--fc-day-off);
    border: none;
}

.calendarEntry {
    font-weight: bold;
    padding: .7em;
    font-size: 13px;
    background: var(--fc-day-off);
    border-radius: 10px!important;
    word-wrap: break-word;
    white-space: normal;
    border-top: 6px solid var(--fc-not-yet-approved);
    border-bottom: 6px solid var(--fc-not-yet-approved);
    border-left: none;
    border-right: none;
    color: var(--fc-font-color);
}

.fc-event-title:before {
    display: inline-block;
    width: 1.5em;
    top: .2em;
    height: 1.5em;
    position: relative;
    margin-right: .75em;
}

.calendarVacation .fc-event-title:before {
    content: url("../../icons/fa-umbrella-beach-solid-0e2dd68cac7fa918886796474da8bd98.svg");
}

.calendarFlexDay .fc-event-title:before {
    content: url("../../icons/fa-clock-rotate-left-solid-white-5e55589e3a804c0df822c2d8c2f020dd.svg");
    top: .3em;
}

.calendarFlexHours .fc-event-title:before {
    content: url("../../icons/fa-door-open-solid-white-478825354a6d3dce4e67b9244c9e5465.svg");
}

.fc-submitPlannedAbsences-button {
    position: relative;
    background-color: var(--ct-primary) !important;
    border: none!important;
    transition: var(--fc-btn-transition);
    border-radius: 5px;
    background-repeat: no-repeat;
    box-sizing: border-box;
    z-index: 1;
    font-weight: bold !important;
}

.fc-submitPlannedAbsences-button:hover {
    background-color: var(--ct-btn-hover-bg);
    border-color: var(--ct-btn-hover-border-color);
}

.fc-submitPlannedAbsences-button:after {
    content: url("../../icons/fa-paper-plane-solid-white-7002c0972ecd4d1611000a5ebb21626b.svg");
    display: inline-block;
    width: 1em;
    top: .2em;
    height: 1em;
    position: relative;
    margin-left: .6em;
}

.fc-event-title-container {
    text-align: center;
}

.fc-toolbar-title {
    font-size: 20px !important;
}

.absenceDurationContainer > .card:last-of-type {
    border-bottom-left-radius: var(--ct-border-radius)!important;
    border-bottom-right-radius: var(--ct-border-radius)!important;
}

.absenceDurationContainer > .card {
    border-radius: 0;
    border-top: 0
}

.iconPaddingTop  {
    padding-top: 0.2rem;
}

.plannedCalendarAbsence {
    border-top: 6px solid var(--fc-planned);
    border-bottom: 6px solid var(--fc-planned);
}

.editAbsenceRequestButton,
.cancelAbsenceRequestButton,
.submitAbsenceRequestButton {
    line-height: 0;
    --ct-btn-padding-y: .25rem;
    --ct-btn-padding-x: .25rem;
}

.cardLeftBox.expandable {
    transition: transform 0.1s ease;
    cursor: pointer;
}

.cardLeftBox.expandable:hover {
    transform: scale(1.015);
}

.cardLeftBox.expandable:active {
    transform: scale(0.987);
}

.fc-reload-button {
    background-color: transparent !important;
    color: var(--ct-dark) !important;
    border: 1px var(--ct-light) solid !important;
    transition: var(--fc-btn-transition);
}

.fc-reload-button:hover {
    background-color: var(--ct-light) !important;
}

.calendarRangeStart {
    margin-right: 0 !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.calendarRangeMiddle {
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-radius: 0 !important;
}

.calendarRangeLast {
    margin-left: 0 !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.fc-day-today {
    background-color: transparent!important;
}

.fc .fc-daygrid-day.fc-day-today .fc-daygrid-day-number {
    background-color: #727cf5;
    color: #fff;
}

.fc .fc-daygrid-day-number {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    padding: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    background-color: var(--ct-tertiary-bg);
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 500;
    margin: 2px;
    color: var(--ct-body-color);
}

.fc-day > .fc-scrollgrid-sync-inner > a {
    color: var(--ct-body-color); !important
}

.fc td, .fc th {
    border: var(--ct-border-width) solid var(--ct-border-color) !important;
}

.fc .fc-scrollgrid {
    border: 0;
}