* {
  font-family: 'Roboto', sans-serif;
}
body, html {
    font-family: 'Roboto', sans-serif;
    height: 100%;
    margin: 0;
  }

.body-bg {
    background: white;
}

  .full-screen-center {
    display: flex;
    justify-content: center; /* Horizontal centering */
    align-items: center;     /* Vertical centering */
    height: 100vh;           /* Full viewport height */
  }
/* General Styles for Calendar */
/* Calendar container */
.calendar {
    display: flex;
    flex-wrap: wrap;
    width: 60%;
    justify-content: flex-start; /* Align items to the left */
    margin-top: 0px;
    overflow-x: auto; /* Allows horizontal scrolling */
    white-space: nowrap; /* Prevents wrapping of calendar cells */
     border-radius: 20px 20px 0px 0px; /* ⬅️ updated */
    border: none !important;    
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    z-index: 10;
}

/* Calendar rows */
.calendar-row {
    display: flex;
    flex-wrap: nowrap; /* Ensure the row does not wrap */
    width: 100%;
}

/* Calendar cell (day box) */
.calendar-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 13px;
    border: 1px solid #fff;
    width: 14.285%; /* Each cell takes up 1/7th of the row width */
    height: 80px;
    font-size: 30px;
    background-color: #fff !important;
}
.calendar-cell.header {
    font-weight: bold;
    color: #000;
    background-color: #72cdff !important;
}
/* Empty cells */
.calendar-cell.empty {
    background-color: #fff;
}


/* Calendar date text */
.calendar-cell p {
    margin: 0;
    
}


.calendar-cell button.custom-btn {
    display: inline-block;
    padding: 10px 15px;
    font-size: 13px;
    background-color: #1ea1ff; /* Green color */
    color: white !important;
    text-align: center;
    border: none;
    border-radius: 0px;
    text-decoration: none;
    width: 100%;
    box-sizing: border-box;
}

.today {
    background-color: #D9E9FF;
}
.date-font {
    font-size: 20px;
}

.calendar-cell button.custom-btn:hover {
    background-color: #1ea1ff;    
}

.arrow {
    background-color: #fff;
    border-radius: 5px;
}


.timeslot-btn {
    background-color: white;
    border: 1px solid #1ea1ff;
    color: #000; /* Text color */
    transition: background-color 0.3s ease, color 0.3s ease;
}

.timeslot-btn:hover {
    background-color: #1ea1ff;
    color: white; /* Text color on hover */
}


/* Ensuring horizontal scroll on small screens */
@media (max-width: 768px) and (max-width: 1024px) {
    .calendar {
        overflow-x: auto; /* Enable horizontal scrolling */
        -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
        width: 100%; /* Ensure the calendar takes full width on small screens */
    }

    .calendar-row {
        display: flex;
        flex-wrap: nowrap; /* Prevent wrapping of the row */
    }

    .calendar-cell {
        height: 60px; /* Adjust height of calendar cells for small screens */
        font-size: 13px; /* Adjust font size for better readability */
        font-weight: 600;
        padding: 10px; /* Increase padding for better touch interaction */
    }

    /* Custom button resizing on smaller screens */
    .calendar-cell button.custom-btn {
        font-size: 12px; /* Font size for custom button */
        padding: 8px 12px; /* Adjust padding for buttons */
    }

    .calendar-cell p {
        margin: 0;
        font-size: 14px; /* Font size for date text */
        font-weight: 600; /* Keep the font weight bold */
    }
}

@media (max-width: 576px) {
    .full-screen-center {
        display: flex;
        justify-content: center; /* Horizontal centering */
        align-items: center;     /* Vertical centering */
        height: 63vh;           /* Full viewport height */
    }
    .calendar-cell {
        height: 50px; /* Further adjust the height for extra small screens */
        font-size: 10px; /* Smaller font size for very small screens */
    }

    /* Custom button resizing on extra small screens */
    .calendar-cell button.custom-btn {
        font-size: 10px; /* Smaller font size for buttons */
        padding: 6px 10px; /* Smaller padding for buttons */
    }

    .calendar-cell p {
        font-size: 12px; /* Adjust date text font size */
    }
}