/* Targeting the option groups */
.select2-results__option--group {
    background-color: #f1f5f9; /* Change to any color you prefer */
    font-weight: bold;
    color:#000;
}

/* Optionally, to style the nested options differently */
.select2-results__options--nested .select2-results__option {
    background-color: #fff; /* Different color for nested options */
    color:#333;
}

.select2-results__option--highlighted
{
    color: #fff!important;
    background-color: var(--bs-primary) !important;
}

.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--selected,.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[aria-selected=true]:not(.select2-results__option--highlighted) {
    color: #fff;
    background-color: var(--bs-primary) !important;
}

.ui-menu-item:hover .ui-menu-item-wrapper {
    background-color: var(--bs-primary) !important;
    color: #fff; /* Adjust text color if needed */
    border-color: var(--bs-primary) !important;
}
/* Original hover effect for ui-menu-item */
.ui-menu-item:hover {
    background-color: var(--bs-primary) !important;
    color: #fff!important;
}


/* Hover color for select2-selection__choice__remove */
.select2-selection__choice__remove:hover {
    color: darkred; /* Replace with your preferred hover color */
    cursor: pointer; /* Optional: shows the pointer cursor on hover */
}

.select2-selection__choice
{
    background-color: var(--bs-primary) !important;
    color: #fff!important;
}

.select2-selection__choice__remove {
    width: .75rem !important;
    height: .75rem !important;
    padding: .25em !important;
    margin-right: .25rem !important;
    overflow: hidden !important;
    text-indent: 100% !important;
    white-space: nowrap !important;
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") 50% / .75rem auto no-repeat !important;
}
.select2-selection__choice__remove:hover {
    width: .75rem !important;
    height: .75rem !important;
    padding: .25em !important;
    margin-right: .25rem !important;
    overflow: hidden !important;
    text-indent: 100% !important;
    white-space: nowrap !important;
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23333333'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") 50% / .75rem auto no-repeat !important;
}
.btn-primary {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    color: #fff !important;
}



.active-day a {
    background-color: var(--bs-primary) !important;
    color: white !important; /* Ensure text is readable on the primary background */

}
.ui-datepicker table {
    width: 100%;
    text-align: center;
}

.ui-datepicker table td {
    vertical-align: middle;
    text-align: center;
}

.ui-datepicker table td a {
    display: flex;
    justify-content: center;
    align-items: center;

}

.ui-datepicker table tr td, .ui-datepicker table tr th {
    text-align: center;
    width: 40px;
    height: 30px;
    border-radius: 4px;
    border: none;
}

.ui-datepicker-inline
{
    border:none!important;
    width: 100%!important;
}
.ui-datepicker
{
    border: 2px solid #fff;
    border-radius: 3px;
    background: #f9f9f9;
    color: #999;
}

.ui-datepicker table td, 
.ui-datepicker table th a{
    text-align: center!important; /* Horizontally center text */
    vertical-align: middle; /* Vertically center text */
    width: 30px; /* Ensure uniform cell size */
    height: 30px; /* Ensure uniform cell size */

}

.unavailable
{
    text-align: center!important; /* Horizontally center text */
}
.ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled {
    opacity: 0.15!important;
    filter: Alpha(Opacity = 35)!important;
    background-image: none!important;
    border: 1px solid #fff!important;
}

/* Flex container for datepicker and time slots */
.datepicker-container {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping if there's not enough space */
    gap: 16px; /* Space between the datepicker and time slots */
    justify-content: center; /* Center content if it wraps */
}

/* Adjust width of the datepicker and time slots */
.ui-datepicker {
    width: 100%;
    max-width: 300px;
}

#timeSlots {
    flex: 1; /* Take up remaining space */
    max-width: 300px; /* Set maximum width */
}

/* Time slots grid layout */
.time-slots-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 times per row */
    gap: 8px; /* Space between buttons */
}

/* Active state for time slots */
.time-slot.active {
    background-color: var(--bs-primary);
    color: white;
}