body {
     font-family: Arial, sans-serif;
     padding: 30px;
     background-color: #f4f4f4;
     text-align: center;
 }

 h2 {
     margin-bottom: 10px;
 }

 #calendar-header {
     display: flex;
     justify-content: center;
     align-items: center;
     max-width: 400px;
     margin: 0 auto 10px;
     gap: 10px;
 }

     #calendar-header button {
         cursor: pointer;
         padding: 5px 10px;
         font-size: 16px;
         border: none;
         background-color: #007bff;
         color: white;
         border-radius: 4px;
     }

 #monthYear {
     font-weight: bold;
     font-size: 18px;
     min-width: 150px;
     text-align: center;
 }

 .calendar-header {
     display: grid;
     grid-template-columns: repeat(7, 1fr);
     font-weight: bold;
     text-align: center;
     max-width: 400px;
     margin: 0 auto;
 }

 #calendar {
     display: grid;
     grid-template-columns: repeat(7, 1fr);
     gap: 5px;
     max-width: 400px;
     margin: 10px auto 20px;
 }

 .day {
     padding: 10px;
     border: 1px solid #ccc;
     text-align: center;
     cursor: pointer;
     background-color: #fff;
     border-radius: 5px;
     user-select: none;
 }

 .disabled {
     background-color: #eee;
     color: #999;
     cursor: not-allowed;
 }

 .today {
     background-color: #007bff;
     color: #fff;
     font-weight: bold;
 }

 .day:hover:not(.disabled):not(.today) {
     background-color: #cce5ff;
 }

 #timeSlotWrapper {
     max-width: 400px;
     margin: 0 auto;
     display: none;
     text-align: center;
 }

 #slotDate {
     margin-bottom: 10px;
     font-weight: bold;
     font-size: 18px;
 }

 #slotsContainer {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 10px;
 }

 .time-slot {
     background-color: #007bff;
     color: white;
     padding: 10px 15px;
     border-radius: 5px;
     cursor: pointer;
     user-select: none;
     min-width: 80px;
     text-align: center;
     transition: background-color 0.3s;
 }

     .time-slot:hover {
         background-color: #0056b3;
     }

 #backBtn {
     margin-top: 20px;
     padding: 8px 16px;
     font-size: 16px;
     cursor: pointer;
     border: none;
     border-radius: 5px;
     background-color: #6c757d;
     color: white;
     user-select: none;
 }

     #backBtn:hover {
         background-color: #5a6268;
     }