.day-name {
   background-color: #a4c1b6;
   color: white !important;
   font-weight: 600;
   padding: 12px;
   border-radius: 12px;
}
.calendar-container {
   display: inline-block;
   transition: transform 0.3s ease;
}
.calendar-container:hover {
   transform: scale(1.05);
}
.calendar-container svg {
   filter: drop-shadow(0px 2px 4px rgba(46, 125, 50, 0.3));
}
.calendar-container {
   background-color: #ffffff;
   border-radius: 16px;
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
   margin-top: 50px;
}
.calendar-header {
   font-size: 1.4rem;
   font-weight: bold;
   margin-bottom: 20px;
   color: #4a5a3e;
}
.calendar-days {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
   gap: 5px;
   text-align: center;
}
.day,
.day-name {
   padding: 12px;
   border-radius: 12px;
}
.day-name.selected {
   background-color: #4a5a3e !important;
}    
.day {
   background-color: #cedbe8;
   cursor: pointer;
   transition: all 0.3s ease;
   font-weight: 500;
}
.day:hover {
   background-color: #4a5a3e;
   color: #fff;
}
.day.disabled {
   background-color: #e9ecef;
   color: #adb5bd;
   cursor: not-allowed;
   opacity: 0.3;
}
.day.selected {
   background-color: #4a5a3e;
   color: #fff;
}
.time-slot {
   background-color: #fff;
   border: 1px solid #dee2e6;
   padding: 8px;
   border-radius: 8px;
   cursor: pointer;
   text-align: center;
   transition: background-color 0.3s ease;
   font-size: 0.9rem;
   direction: rtl;
   width: 160px;
}
.time-slot:hover {
   background-color: #4a5a3e;
   color: #fff;
}
.time-slot.selected {
   background-color: #4a5a3e;
   color: #fff;
}
#timeSlots {
   max-height: 315px;
   overflow-y: auto;
}
@keyframes fadeIn {
   from {
      opacity: 0;
      top: 0;
   }

   to {
      opacity: 1;
      top: 20px;
   }
}

@media (max-width: 600px) {
   .day, .day-name {
      border-radius: 8px;
   }

   #calendar-days-container{
      padding: 0 !important;
      width: 600px;
      overflow-x: auto;
   }
}
@media (max-width: 374px) {
   *{
      font-size: 14px !important;
   }
}
#calendar-days-container::-webkit-scrollbar {
   height: 8px;
}
#calendar-days-container::-webkit-scrollbar-track {
   background: #f1f1f1;
   border-radius: 4px;
}
#calendar-days-container::-webkit-scrollbar-thumb {
   background: #4a5a3e;
   border-radius: 4px;
}
#calendar-days-container::-webkit-scrollbar-thumb:hover {
   background: #555;
}