[x-cloak] {
    display: none;
}

:root {
    --fc-button-bg-color: rgba(var(--primary-500));
    --fc-button-border-color: rgba(var(--primary-600));
    --fc-button-hover-bg-color: rgba(var(--primary-400));
    --fc-button-hover-border-color: rgba(var(--primary-500));
    --fc-button-active-bg-color: rgba(var(--primary-400));
    --fc-button-active-border-color: rgba(var(--primary-500));
    --fc-now-indicator-color: #991b1b;
    --fc-page-bg-color: #e5d6fe !important;
    --fc-neutral-bg-color: hsla(0, 0%, 82%, 0.3);
    --fc-neutral-text-color: grey;
    --fc-border-color: #ddd;
    --fc-event-selected-overlay-color: rgba(0, 0, 0, 0.25);
    --fc-more-link-bg-color: #d0d0d0;
    --fc-more-link-text-color: inherit;
    --fc-event-resizer-thickness: 8px;
    --fc-event-resizer-dot-total-width: 8px;
    --fc-event-resizer-dot-border-width: 1px;
    //--fc-non-business-color: hsla(41, 96%, 40%, .3);
    --fc-bg-event-opacity: 0.3;
    --fc-highlight-color: rgba(var(--primary-500, 0.3));
    --fc-today-bg-color: rgba(229, 214, 254, 0.15);
    --fc-button-bg-color: rgba(var(--primary-500));
    --fc-button-border-color: rgba(var(--primary-600));
    --fc-button-hover-bg-color: rgba(var(--primary-400));
    --fc-button-hover-border-color: rgba(var(--primary-500));
    --fc-button-active-bg-color: rgba(var(--primary-400));
    --fc-button-active-border-color: rgba(var(--primary-500));
    --fc-event-bg-color: rgba(var(--primary-500));
    --fc-event-border-color: rgba(var(--primary-600));
}

#loading-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.5rem;
    color: #f8bb54;
}

#calendar .fc-license-message {
    display: none !important;
}

.fc-license-message {
    display: none !important;
}

#fc-dom-1 .fc-license-message {
    display: none !important;
}

.fc-toolbar-title {
    font-size: 1rem;
    font-weight: 700;
    margin-top: 0.5rem;
    padding: 0.9rem;
    font-style: italic;
}

.fc-header-toolbar .fc-toolbar .fc-toolbar-ltr,
.fc .fc-toolbar.fc-header-toolbar {
    flex-wrap: wrap;
}

.fc-button-group {
    display: inline-flex;
    position: relative;
    vertical-align: middle;
    gap: 0px;
    flex-wrap: wrap;
}

.fc-view-harness.fc-view-harness-passive {
    margin-top: -23px !important;
    background-color: #fffadf !important;
    border-radius: 5px !important;
}

.fc-event-main-frame {
    padding: 0 !important;
    width: 100% !important;
}

.fc-timegrid-event,
.fc-timegrid-event-harness {
    margin: 0 !important;
}

.fc-event {
    font-size: 0.8rem;
}

.fc-timegrid-slot .fc-timegrid-slot-label .fc-scrollgrid-shrink {
    color: #000 !important;
}

.fc-toolbar-title {
    @apply !text-lg leading-5 md: !text-3xl;
}

.fc-button-primary:disabled {
    @apply opacity-70;
}

.fc-button-primary:not(:disabled).fc-button-active,
.fc-button-primary:not(:disabled):active {
    @apply shadow-none;
}

#calendar .fc-view table,
#calendar .fc-view table th {
    @apply rounded-t-xl;
}

.fc .fc-timegrid-event {
    margin: 0 !important;
}

.fc .fc-timegrid-event .fc-event-main {
    border-radius: 0 !important;
}

.fc-timegrid-slot {
    height: 1.2rem !important;
}

.fc-timegrid-event .fc-event-main {
    padding: 2px 5px 0px !important;
}

.fc-daygrid-event,
.fc-daygrid-block-event .fc-event-main {
    margin: 0 !important;
    width: 100% !important;
}

.fc-timegrid-event .fc-event-main-frame,
.fc-daygrid-event .fc-event-main-frame {
    padding: 0 !important;
}

.fc-timegrid-event,
.fc-timegrid-event-harness,
.fc-daygrid-event,
.fc-daygrid-block-event .fc-event-main {
    margin: 0 !important;
    padding: 0 !important;
}

.fc-event div[x-show="open"] {
    display: none;
}

.fc-event-title {
    white-space: pre-line;
}

.blocked-event {
    background-color: #333333;
}

.fc-timegrid-slot-label {
    color: #000 !important;
}

.fi-timeline-section {
    @apply bg-transparent !important;
}

#calendar {
    width: clamp(320px, 100%, 100%);
    height: auto;
    margin: 5px auto;
    border-radius: 5px;
}

.calendar-outer-container {
    position: relative;
    overflow: hidden;
}

.fc-timegrid-axis {
    position: sticky !important;
    left: 0;
    z-index: 3;
}

#calendar .fc-scroller {
    overflow: auto !important;
}

.fc-timegrid-slot {
    height: 1.5em !important;
}

.event-past {
    background-color: #d3d3d3 !important;
    opacity: 0.6;
}

.event-future {
    border-left: 4px solid #d1e7fd !important;
    font-weight: bold;
}

.event-start {
    border-left: 4px solid #28a745 !important;
}

.event-end {
    border-right: 4px solid #dc3545 !important;
}

.custom-now-indicator {
    background-color: red !important;
    height: 2px;
}

.now-text {
    color: white;
    background: red;
    padding: 2px 5px;
    border-radius: 4px;
    font-weight: bold;
}