/*----------------------------------
*             Calendar
----------------------------------*/
.calendar,
.calendar-default {
    @apply flex flex-col flex-1 border border-gray-300 rounded-lg bg-white shadow-md ml-10 mr-5;
}

.calendar .day,
.calendar-default .day {
    @apply flex flex-wrap justify-between items-center bg-color p-[0.1rem] rounded-t-lg mb-1;
}

.calendar .day .actions,
.calendar-default .day .actions {
    @apply flex flex-1 justify-between items-center w-full;
}

.calendar .day .actions .currentDate,
.calendar-default .day .actions .currentDate {
    @apply text-sm font-semibold text-color;
}

.calendar .day .actions .prev,
.calendar .day .actions .next,
.calendar-default .day .actions .prev,
.calendar-default .day .actions .next {
    @apply cursor-pointer px-4 text-color;
}

.calendar .employee-container,
.calendar-default .employee-container {
    @apply overflow-x-auto;
}

.calendar .employee-container .hours,
.calendar-default .employee-container .hours {
    @apply text-base md:text-sm lg:text-base table-fixed;
}

.hours .time-cell {
    @apply w-[10vw] !min-w-[10vw] !max-w-[10vw] sticky left-[-0.5px] bg-white z-10;
    user-select: none;
}

.hours .select-none {
    @apply min-w-[10vw];
}

/*----------------------------------
*             Events
----------------------------------*/
.appointment-blocked {
    @apply border-b border-l border-gray-300 rounded-md text-white cursor-pointer;
}

.appointment {
    @apply border-b border-l border-gray-300 rounded-md text-white cursor-pointer;

}

/*----------------------------------
*        Scrollbar Calendar
----------------------------------*/
.calendar .employee-container::-webkit-scrollbar,
.calendar-default .employee-container::-webkit-scrollbar {
    height: 15px !important;
}