[x-cloak] {
    display: none;
}

//body .fi-main-ctn>* {
//    position: relative !important;
//}

: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: #f7f3ff !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(0, 0%, 95%, 0.8);
    --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-event-bg-color: rgba(var(--primary-500));
    --fc-event-border-color: rgba(var(--primary-600));
}

.fc-non-business {
    background: repeating-linear-gradient(45deg,
            hsla(0, 0%, 96%, 0.9),
            hsla(0, 0%, 96%, 0.9) 10px,
            hsla(0, 0%, 92%, 0.9) 10px,
            hsla(0, 0%, 92%, 0.9) 20px) !important;
    opacity: 0.6;
}

.fc-day-today.fc-non-business {
    background: repeating-linear-gradient(45deg,
            hsla(270, 50%, 95%, 0.9),
            hsla(270, 50%, 95%, 0.9) 10px,
            hsla(270, 30%, 90%, 0.9) 10px,
            hsla(270, 30%, 90%, 0.9) 20px) !important;
}

.fc-timegrid-slot.fc-non-business {
    background: hsla(0, 0%, 95%, 0.5) !important;
    border-left: 3px solid hsla(0, 0%, 85%, 0.8) !important;
}

.fc-day-future.fc-non-business,
.fc-day-past.fc-non-business {
    color: hsla(0, 0%, 60%, 0.8) !important;
}

.fc-timegrid-slot:not(.fc-non-business) {
    background: rgba(255, 255, 255, 0.95) !important;
    border-left: 2px solid rgba(var(--primary-100)) !important;
}

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

.fc-license-message,
#calendar .fc-license-message,
#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;
    @apply !text-lg leading-5 md: !text-3xl;
}

.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;
    z-index: 10;
}

.fc-button-primary {
    pointer-events: auto !important;
    z-index: 10;
    transition: all 0.2s ease;
}

.fc-button-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

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

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

.fc-view-harness.fc-view-harness-passive {
    background-color: #f7f3ff !important;
    border-radius: 5px !important;
    z-index: 1;
}

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

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

.fc-event {
    font-size: 0.8rem;
    cursor: pointer !important;
    pointer-events: auto !important;
    overflow: hidden;
    transition: transform 0.2s ease;
}

.fc-event:hover {
    transform: scale(1.02);
    z-index: 10;
}

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

#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.5em !important;
}

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

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

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

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

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

.fc-event-title,
.fc-event-title-container,
.fc-event-main {
    overflow: hidden;
    text-overflow: ellipsis;
}

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

.fc-timegrid-slot-label,
.fc-timegrid-slot-label-cushion,
.fc-timegrid-axis-cushion {
    color: #000 !important;
    font-family: 'Comics', sans-serif !important;
    font-size: 16px !important;
    font-weight: normal !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;
}

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

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

.fc {
    overflow-y: auto !important;
    display: block !important;
    margin-bottom: 10px;
}

.fc *:not(.fc-event) {
    overflow: visible !important;
}

.fc-timegrid-body,
.fc-timegrid-slots table,
.fc-timegrid-slots,
.fc-timegrid-cols,
.fc-timegrid-body {
    height: auto !important;
}

.fc-view-harness {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
}