.fc-event-title {
    display: flex;
    justify-content: space-between;
}

.shelf-badge {
    background-color: #28a745;
    color: white;
    padding: 0px 6px;
    border-radius: 4px;
    font-size: 0.75em;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
tr.fi-ta-row.bg-red-50 {
  background-color: #fef2f2;
}

.dark tr.fi-ta-row.dark\:bg-red-950\/50 {
  background-color: rgba(76, 5, 25, 0.5); /* red-950 with 50% opacity */
}

tr.fi-ta-row.\!border-l-red-600 {
  border-left-color: #dc2626 !important;
}

.dark tr.fi-ta-row.dark\:\!border-l-red-400 {
  border-left-color: #f87171 !important;
}

tr.fi-ta-row.\!border-l-4 {
  border-left-width: 4px !important;
}

tr.fi-ta-row.hover\:bg-opacity-75:hover {
  background-color: rgba(254, 242, 242, 0.75); /* bg-red-50 with 75% opacity */
}

.fc-event-main-frame.completed {position: relative;}

.fc-event-main-frame.completed:after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: -1;
    backdrop-filter: grayscale(0.7);
}
#unassigned-jobs .fi-ta-color-item.h-6.w-6.rounded-md {
    width: 0.7rem;
    height: 0.7rem;
}
.object-contain {
    object-fit: contain;
}
.max-w-screen-2xl {
    max-width: 1800px !IMPORTANT;
}
.fc .fc-col-header-cell-cushion {
    font-size: 12px;
}
@media  (min-width: 768px) {
    .fi-ta-table thead {
        position: sticky !important;
        top: 0;
        z-index: 9;
    }

    /* opacity does not looks good in dark mode, so insert the corresponding bg color here */
    .fi-ta-table :is(:where(.dark) .dark\:bg-white\/5){
        backdrop-filter: blur(30px);
    }

    /* sset the height of content (table) */
    .fi-ta-content {
        max-height: calc(100vh - 22rem);
        position: relative;
    }

    /* fix filters and columns modal */
    .fi-dropdown-panel{
        z-index: 40 !important;
    }
}