/* Add your custom styles here */
.calendar {
    border: 1px solid #ccc;
    padding: 20px;
    max-width: 100%;
    margin: 0 auto;
}

.list-group {
    max-width: 150px;
}

.calendar,
.list-group {
    margin: 2px; /* Padding of 2 between calendar and time intervals */
}

.calendar-header {
    text-align: center;
    margin-bottom: 20px;
}

.calendar-header button {
    margin: 0 10px;
}

.calendar-table {
    width: 100%;
    table-layout: fixed;
}

.calendar-table th,
.calendar-table td {
    text-align: center;
    padding: 10px;
    width: 40px; /* Set fixed width for all cells */
    height: 40px; /* Set fixed height for all cells */
    border: 1px solid #ccc;
}

.calendar-table th {
    font-weight: bold;
    font-size: 14px;
    background-color: #007bff; /* Blue background color for header */
    color: #fff; /* White text color for header */
}

.calendar-table td {
    border: 1px solid #ccc;
    cursor: pointer;
}

.calendar-table td:hover {
    background-color: #d2e3f5;
}

.selected-date {
    background-color: #007bff;
    color: #fff;
}

.calendar-table td.disabled {
   
    background-color: #f8d7da; /* Light red background color for disabled Fridays */
    color: #721c24; /* Dark red text color for disabled Fridays */
}

.disabled-friday {
    color: #ccc; /* Disabled cell text color */
    pointer-events: none; /* Disable pointer events */
}

.disabled-date {
    color: #ccc; /* Disabled cell text color */
    pointer-events: none; /* Disable pointer events */
}

.list-group-item:hover {
    background-color: #d2e3f5; /* Light blue hover color */
}


@media (max-width: 767.98px) {
    
}