.status-P {
       background-color: rgba(76, 175, 80, .85) !important;

       color: white !important;
   }

   .status-SD {
       background-color: rgba(255, 235, 59, .85) !important;

       color: black !important;
   }

   .status-LP {
       background-color: rgba(255, 152, 0, .85) !important;

       color: white !important;
   }

   .status-HD {
       background-color: rgba(33, 150, 243, .85) !important;

       color: white !important;
   }

   .status-Holiday {
       background-color: rgba(156, 39, 176, .85) !important;

       color: white !important;
   }

   .status-A {
       background-color: rgba(244, 67, 54, .85) !important;

       color: white !important;
   }

   .status-WO {
       background-color: rgba(248, 215, 218, .85) !important;
       color: #721c24;
   }

   .status-Attend {
       background-color: rgba(140, 176, 141, .85) !important;
       /* Red */
       color: white !important;
   }

   /* //for calendar */
   .calendar-views .fc-event {
       border-left: 2px solid var(--textColor);
   }

   .calendar-views .fc-daygrid-dot-event .fc-event-title {
       font-weight: 600;
       cursor: unset;
   }

   .calendar-views.fc .fc-daygrid-body-unbalanced .fc-daygrid-day-events {
       display: flex;
       flex-direction: column;
       gap: 5px;
   }

   .calendar-views.fc .fc-bg-event {
       opacity: 1;
       background-color: #DDD6FF !important;
       font-weight: 600;
       color: #5A4F96;
       margin: 0;
   }

   .calendar-views .fc-daygrid-day-events .fc-daygrid-event-harness:nth-last-of-type(3) .alert {
       cursor: pointer;
   }

   .calendar-views .fc-daygrid-day-events .fc-daygrid-event-harness:nth-last-of-type(4) .alert {
       cursor: pointer;
   }

   .calendar-views .alert {
       color: var(--textColor);
       background-color: var(--bgColor);
       min-width: 0;
   }

   .calendar-views .alert.alert-primary {
       --textColor: #E76C00;
       --bgColor: rgba(255, 144, 47, .1);
   }

   .calendar-views .alert.alert-info {
       --textColor: #00629B;
       --bgColor: rgba(0, 158, 251, .1);
   }

   .calendar-views .alert.alert-success {
       --textColor: #318B35;
       --bgColor: rgba(85, 206, 99, .1);
   }

   .calendar-views .alert.alert-warning {
       --textColor: #B77B00;
       --bgColor: rgba(255, 144, 47, .1);
   }

   .calendar-views .alert.alert-danger {
       --textColor: #CF0025;
       --bgColor: rgba(252, 19, 61, .1);
   }

   .calendar-views .alert.alert-dark {
       --textColor: #100b00;
       --bgColor: rgba(46, 27, 10, 0.1);
   }

   /* Inverting on Hover */
   .calendar-views .alert:hover {
       /* min-width: 100%; */
       /* width: fit-content; */
       position: relative;
       z-index: 9;
       min-width: 170px;
       transition: min-width .2s;
   }

   .calendar-views .alert:hover {
       color: #fff;
       border-left-color: var(--bgColor);
       background-color: var(--textColor);
       cursor: auto;
   }

   /* .calendar-views .alert.alert-primary:hover {
    background-color: var(--textColor);
}
.calendar-views .alert.alert-info:hover {
    background-color: var(--textColor);
}
.calendar-views .alert.alert-success:hover {
    background-color: var(--textColor);
}
.calendar-views .alert.alert-warning:hover {
    background-color: var(--textColor);
} */
   .calendar-views .alert.alert-info:hover {
       /* color: var(--textColor);
    background-color: var(--bgColor); */
       cursor: auto !important;
   }

   .calendar-views .alert.alert-danger:hover {
       cursor: not-allowed;
   }

   /* .calendar-views .fc-daygrid-dot-event .fc-event-title {
    transition: min-width .3s;
    min-width: 0;
}
.calendar-views .fc-daygrid-dot-event .fc-event-title:hover {
    min-width: 180px;
} */

   /* for chant coments */
   .chat-contents .chat-content-wrap .chats .chat-right .chat-body .chat-content {
       background-color: #fd9017;
       color: whitesmoke;
       max-width: 80%;
   }

   .chat-contents .chat-content-wrap .chats .chat-right .chat-body .chat-content p {
       word-break: break-word;
       /* Ensures long words break properly */
       white-space: normal;
       /* Allows wrapping */
   }

   .chat-contents .chat-content-wrap .chats .chat-left .chat-body .chat-content p {
       word-break: break-word;
       /* Ensures long words break properly */
       white-space: normal;
       /* Allows wrapping */
   }

   .chat-contents .chat-content-wrap .chats .chat-left .chat-body .chat-content {
       background-color: #7cf64370;
       max-width: 80%;
   }

   .chat-wrap-inner_ {

       max-height: 400px;
       /* Or any suitable value */
       overflow-y: auto;
   }