body {
    font-family: 'Poppins', sans-serif;
}
.scrollbar {
    scrollbar-width: thin; /* For Firefox */
    scrollbar-color: #c4c3c3 #f1f4fa; /* Thumb color and track color */
}

.scrollbar::-webkit-scrollbar {
    width: 8px !important; /* Scrollbar width */
}

.scrollbar::-webkit-scrollbar-track {
    background: #f1f4fa !important; /* Track color */
}

.scrollbar::-webkit-scrollbar-thumb {
    background-color: #bbb9b9 !important; /* Thumb color */
    border-radius: 4px !important; /* Rounded edges */
}

.scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: #adabab !important; /* Darker on hover */
}
#time-slots-container {
    width: 250px;
    max-height: 230px;  /* Set maximum height */
    overflow-y: auto;   /* Enable vertical scrolling */
    padding-right:10px;
}
body.modal-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
} 
/* Custom animation classes */
.slide-in-bottom {
    animation: slide-in-bottom 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.slide-out-bottom {
    animation: slide-out-bottom 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
@keyframes slide-in-bottom {
    0% {
        transform: translateY(100%);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}
@keyframes slide-out-bottom {
    0% {
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        transform: translateY(100%);
        opacity: 0;
    }
}

.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current{
    background: #3af !important;
    border-radius: 100%;
}
.ui-widget.ui-widget-content {
    border:solid 1px #ddd !important;
    border-radius: 10px;
    padding: 5px 10px;
}
.ui-datepicker-header{
    background: none !important;
    border: none !important;
}
.ui-datepicker th {
    font-weight: normal !important;
}
.ui-datepicker td span, .ui-datepicker td a {
    text-align: center !important;
}
.ui-state-default, .ui-widget-content .ui-state-default{
    border: 1px solid transparent !important;
    border-radius: 100%;
    width: 30px;
    height: 30px;
}
.ui-state-highlight, .ui-widget-content .ui-state-highlight{
    border: 1px solid transparent !important;
    background: #DAE9FC;
    color: #4493EF;
    border-radius: 100%;
    width: 30px;
    height: 30px;
}
.ui-state-default:hover{
    border: 1px solid transparent !important;
    background: #3af;
    border-radius: 100%;
    color: #ffffff;
}

.select2-container--classic .select2-selection--single, .select2-container--classic .select2-selection--multiple {
    position: relative !important;
    width: 100% !important;
    font-size: 0.875rem !important; 
    color: rgb(107, 114, 128) !important;
    background-color: white !important; 
    padding: 0.5rem 0.75rem !important; 
    border: 1px solid rgb(209, 213, 219) !important;
    border-radius: 0.375rem !important;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05) !important; 
    background-image: none !important;
    height: fit-content !important;
}
.select2-selection--single:focus {
    outline: none;  /* focus:outline-none */
    border-color: rgb(59, 130, 246);  /* focus:border-blue-500 */
    box-shadow: 0 0 0 1px rgb(191, 219, 254);  /* focus:ring-1 focus:ring-blue-200 */
}
.select2-container .select2-selection--single .select2-selection__rendered {
    padding-left: 0px !important;
    padding-right: 0px !important;
    line-height: normal !important;
}
.select2-container--classic .select2-selection--single .select2-selection__arrow {
    border: none !important;
    background: none !important;
    top: 5px !important;
    right: 5px !important;
}
.select2-container .select2-search--inline .select2-search__field, .select2-container--classic .select2-selection--multiple .select2-selection__choice {
    margin-top: 0 !important;
    margin-left: 0 !important;
    margin-right: 10px;
}
.select2-container--classic .select2-selection--multiple .select2-selection__choice {
    background-color: #ebf5ff !important;
    border: 1px solid #3b82f6 !important;
}

.ui-datepicker-inline{
    width: auto !important;
}
#time-slots-container{
    width: 100% !important;
}