/* Reservation time */
.reservation-time {
    text-align: center;
    margin-bottom: 20px;
}

.reservation-time h2 {
    font-size: 1.5em;
    color: #333;
    margin-bottom: 5px;
}

.reservation-time p {
    font-size: 1.1em;
    margin-bottom: 20px;
    margin-top: 15px;
}

.reservation-time h3 {
    font-size: 1.2em;
    margin-bottom: 5px;
}

.btn-group .btn {
    flex: 1 1 auto;
    margin: 5px;
    border-radius: 20px;
    transition: all 0.3s ease;
    background-color: #e9ecef;
    border: none;
    color: #495057;
    font-weight: bold;
    padding: 5px 10px;
    font-size: 1em;
}

.btn-group .btn:hover {
    background-color: #007bff;
    color: white;
}

.btn-group .btn.active {
    background-color: #0056b3;
    color: white;
    border-color: #0056b3;
}

.datepicker {
    width: 100%;
    display: flex;
    justify-content: center;
}

.datepicker table {
    width: 100%;
    margin: 0 auto;
    table-layout: inherit;
}

.datepicker .greyed-out {
    background-color: #e9ecef !important;
    color: #6c757d !important;
    cursor: not-allowed;
    pointer-events: none;
}

.datepicker .active-dates {
    /*background-color: steelblue;*/
    background-color:white;
    color: black;
    border-radius: 10%;
}

.datepicker .non-active-dates {
    cursor: not-allowed;
}

/*.datepicker-days .disabled-date {*/
/*    background-color: #cccccc; !* Light grey background *!*/
/*    color: #999999; !* Light grey text color *!*/
/*    cursor: not-allowed; !* Cursor indicates date cannot be clicked *!*/
/*}*/

.disabled-date {
    background-color: #f0f0f0; /* Light grey background */
    color: #d3d3d3; /* Grey text color */
    cursor: not-allowed; /* Change cursor to indicate unavailability */
}

.datepicker table tr th.datepicker-switch {
    text-align: center;
    width: 100%;
}

.datepicker table tr td,
.datepicker table tr th {
    text-align: center;
    padding: 15px 20px;
}

.datepicker table tr td.active {
    background-color: #007bff;
    color: white;
    border-radius: 80%;
}

.datepicker .datepicker-days .active {
    background-color: #007bff !important;
    color: white !important;
    border-radius: 80% !important;
}

.datepicker table tr td.today {
    background-color: #e9ecef;
    color: #495057;
    border-radius: 50%;
}

.datepicker table tr td.day:hover {
    background-color: #0056b3;
    /*color: white;*/
    border-radius: 50%;
}

.datepicker .prev, .datepicker .next {
    display: none;
}

.datepicker .datepicker-switch {
    pointer-events: none;
    cursor: default;
}

.datepicker .day.old,
.datepicker .day.new {
    visibility: hidden;
}

.select-time-container {
    display: none; /* Hide the container initially */
}

.select-time {
    margin-top: 15px;
    margin-bottom: 10px;
}

.list-group {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.list-group-item {
    cursor: pointer;
    text-align: center;
    padding: 10px;
    font-size: 15px;
    width: 100%; /* Ensure the width is consistent */
    height: 50px; /* Set a fixed height for all items */
    display: flex;
    align-items: center;
    justify-content: center; /* Center the text inside */
    border-radius: 0px; /* Ensure square corners */
    -webkit-appearance: none;
}

.list-group-item.active {
    background-color: #0064CC;
    color: white;
    border-color: #0064CC;
    border-radius: 0px; /* Ensure square corners for active state */
    -webkit-appearance: none;
}

.list-group-item-action:disabled {
    background-color: #cccccc;
    color: #999999;
    cursor: not-allowed;
    border-radius: 0px; /* Ensure square corners for disabled state */
}

.list-group-item .limited {
    margin-left: 20px;
}

.cancel_remind {
    margin: 0 auto;
}

.btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

@media only screen and (max-width: 768px) {

    #select-month {
        font-size: 12px;
    }

    .datepicker table tr td,
    .datepicker table tr th {
        padding: 15px 10px;
        font-size: 12px;
    }

    .list-group-item {
        font-size: 12px;
        height: 40px; /* Adjust the height for smaller screens */
        border-radius: 0px; /* Ensure square corners for smaller screens */
        -webkit-appearance: none;
    }

    .cancel_remind {
        font-size: 12px;
    }
}