@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap");
:root {
  --themeprimaryclr: #372870;
  --dark-primary: #1F134B;
  --themesecondaryclr: #FB3D3B;
  --plainclr: #fff;
  --darkclr: #000;
  --themehoverclr: #ffed3b;
  --bs-table-color: #cdcdcd;
  --header-bg: #435050;
  --text-color: #696969;
  --card1-color: #439300;
  --card2-color: #003B62;
  --card3-color: #660095;
  --card4-color: #9E5400;
  --card5-color: #0014A2;
  --card6-color: #A70000;
  --card7-color: #007474;
  --card8-color: #FB302E;
  --card9-color: #E8A000;
  --card10-color: #483C92;
  --card11-color: #528BC9;
  --table-color1: #00AC06;
  --table-color2: #F43D3E;
  --disable-btn-clr: #DEDEDE;
  --color1: #555555;
  --color2: #D9D9D9;
  --color3: #444444;
  --color4: #059005;
  --color5: #00000099;
  /* --stars-color:#fbd34e; */
  --stars-color: #FABB05;
  --open-now-color: #00AE14;
  --text-color: #7B7B7B;
  --text-color1: #777777;
  --text-color2: #c9c9c9;
  --text-color3: #717171;
  --text-color4: #373737;
  --text-color5: #8D8D8D;
  --text-color6: #333333;
  --text-color7: #7C7C7C;
  --text-color8: #00000080;
  --text-color9: #000000CC;
  --text-color10: #00000066;
  --text-color11: #00A651;
  --text-color12: #EE3131;
  --text-color13: #387ABE;
  --text-color14: #223142;
  /* bg color  */
  --light-bg: #f1f1f1;
  --light-primary-bg: #E6F5FF;
  --dark-shadow: #D9D9D9;
  --card1-bg: #EEFFE0;
  --card2-bg: #E6F5FF;
  --card3-bg: #F9ECFF;
  --card4-bg: #FFF7EE;
  --card5-bg: #EFF1FF;
  --card6-bg: #FFEEEE;
  --card7-bg: #E3FFFF;
  --card8-bg: #F6DFDF;
  --card9-bg: #FFEFCA;
  --card10-bg: #DFF6F6;
  --card11-bg: #EDDFF6;
  --card12-bg: #F6DFE0;
  --card13-bg: #DFF6EE;
  --bg-color1: #F9F9F9;
  --bg-color2: #EADEFF;
  --bg-color3: #FFFCB0;
  --bg-color4: #DBFFD8;
  --bg-color5: #FFD9DB;
  --bg-color6: #FFEFD7;
  --bg-color7: #DBFFDD;
  --bg-color8: #E5FFE6;
  --bg-color9: #FFEEC2;
  --bg-color10: #BAFFFF;
  --bg-color11: #F3F3F3;
  --bg-color12: #FBFBFB;
  --bg-color13: #EDFEFF;
  --bg-color14: #FFE1E0;
  --bg-color15: #f8d7da;
  --bg-color16: #F7FFF6;
  --bg-color17: #daffe8;
  --bg-color18: #f2f2f2cc;
  --bg-color19: #e5f9ff;
  --bg-color20: #ECF7FF;
  --bg-color21: #ffdada;
  --bg-color22: #ddd;
  --bg-color23: #FFECEC;
  --bg-color24: #f0f8ff;
  --table-bg-clr: #FFF2F2;
  --gray-bg1: #EEEEEE;
  --footer-bg: #372B6F;
  --tab1-bg: #FFEDD8;
  --tab2-bg: #E8FFEC;
  --circle1-bg: #FFFFFF1F;
  --circle2-bg: #FFF9F921;
  --bread-bg: #F6F6F6;
  --light-pink-bg: #FFE5E5;
  --table-border1: #D2D2D2;
  /* border  */
  --gray-border: gray;
  --border-color2: #D9D9D9;
  --border-color3: #0000001A;
  --border-color4: #00000010;
  --border-color5: #00000033;
  --border-color6: #ABABAB;
  --border-color7: #EBEBEB;
  --border-color8: #0000000D;
  --border-color9: #ccc;
  /* shadow */
  --shadow1: #00000040;
  --shadow2: #DBDBDB40;
  /* bottom btn color  */
  --bottom-btn-bg1: #201169;
  --bottom-btn-bg2: #e20200;
  /* font  */
  /* --primary-font:'Plus Jakarta Sans Regular'; */
  --primary-font: "Plus Jakarta Sans", serif;
}

.booking_appointment {
  margin-top: 50px;
  font-family: var(--primary-font);
}
.booking_appointment .booking-container {
  width: 100%;
  max-width: 480px;
  padding: 18px;
  border-radius: 14px;
  background: var(--plainclr);
  box-shadow: 0 6px 20px var(--shadow1);
  margin: auto;
  /* ================= CALENDAR ================= */
  /* ================= TIME SLOTS ================= */
  /* ================= CONFIRM BUTTON ================= */
}
.booking_appointment .booking-container h2 {
  font-size: 1.2rem;
  font-weight: 700;
  text-align: center;
  color: var(--text-color6);
  margin-bottom: 6px;
}
.booking_appointment .booking-container .sub-heading {
  font-size: 0.8rem;
  text-align: center;
  color: var(--text-color5);
  margin-bottom: 14px;
}
.booking_appointment .booking-container .calendar .week-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.booking_appointment .booking-container .calendar .week-nav button {
  border: none;
  background: var(--light-bg);
  padding: 6px 10px;
  border-radius: 8px;
  transition: 0.3s;
  font-size: 0.8rem;
  color: var(--text-color7);
}
.booking_appointment .booking-container .calendar .week-nav button:hover {
  background: var(--themeprimaryclr);
  color: var(--plainclr);
}
.booking_appointment .booking-container .calendar .week-nav span {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-color9);
}
.booking_appointment .booking-container .calendar .week-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-bottom: 14px;
}
.booking_appointment .booking-container .calendar .week-days .week-day {
  text-align: center;
  padding: 6px 4px;
  border-radius: 8px;
  background: var(--light-bg);
  font-size: 0.75rem;
  cursor: pointer;
  transition: 0.25s;
}
.booking_appointment .booking-container .calendar .week-days .week-day:hover {
  background: var(--gray-bg1);
}
.booking_appointment .booking-container .calendar .week-days .week-day.active {
  background: linear-gradient(135deg, #2563eb, #4f46e5);
  color: var(--plainclr);
  font-weight: 600;
  box-shadow: 0 3px 6px rgba(37, 99, 235, 0.25);
}
.booking_appointment .booking-container .calendar .week-days .week-day.active span {
  color: var(--plainclr) !important;
}
.booking_appointment .booking-container .calendar .week-days .week-day span {
  display: block;
  font-size: 0.65rem;
  color: var(--text-color5);
}
@media (max-width: 767px) {
  .booking_appointment .booking-container .calendar .week-days {
    grid-template-columns: repeat(4, 1fr);
  }
}
.booking_appointment .booking-container .time-slots-section {
  margin-bottom: 14px;
}
.booking_appointment .booking-container .time-slots-section .time-slots-title {
  font-weight: 600;
  font-size: 0.75rem;
  color: var(--text-color4);
  margin-bottom: 5px;
}
.booking_appointment .booking-container .time-slots-section .time-slots {
  display: grid;
  gap: 6px;
  margin-bottom: 10px;
}
@media (min-width: 992px) {
  .booking_appointment .booking-container .time-slots-section .time-slots {
    grid-template-columns: repeat(6, 1fr);
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .booking_appointment .booking-container .time-slots-section .time-slots {
    grid-template-columns: repeat(6, 1fr);
  }
}
@media (max-width: 767px) {
  .booking_appointment .booking-container .time-slots-section .time-slots {
    grid-template-columns: repeat(3, 1fr);
  }
}
.booking_appointment .booking-container .time-slots-section .time-slots .time-slot {
  text-align: center;
  padding: 7px 4px;
  font-size: 0.7rem;
  border-radius: 6px;
  border: 1px solid var(--border-color2);
  background: var(--plainclr);
  cursor: pointer;
  transition: 0.25s;
  white-space: nowrap;
}
.booking_appointment .booking-container .time-slots-section .time-slots .time-slot:hover {
  background: var(--light-primary-bg);
  border-color: var(--themeprimaryclr);
}
.booking_appointment .booking-container .time-slots-section .time-slots .time-slot.active {
  background: linear-gradient(135deg, #2563eb, #4f46e5);
  color: var(--plainclr);
  border-color: transparent;
  font-weight: 600;
}
.booking_appointment .booking-container .time-slots-section .no-slots {
  text-align: center;
  font-size: 0.8rem;
  color: var(--text-color5);
  margin-bottom: 12px;
}
.booking_appointment .booking-container .confirm-btn {
  width: 100%;
  padding: 9px;
  border-radius: 8px;
  font-weight: 600;
  background: linear-gradient(135deg, #2563eb, #4f46e5);
  border: none;
  color: var(--plainclr);
  font-size: 0.85rem;
  transition: 0.3s;
}
.booking_appointment .booking-container .confirm-btn:hover {
  background: linear-gradient(135deg, #2563eb, #4f46e5);
}

/* RESPONSIVE CALENDAR ADJUSTMENTS */
@media (max-width: 767px) {
  .booking_appointment .booking-container .calendar .week-days {
    grid-template-columns: repeat(4, 1fr);
  }
  .booking_appointment .booking-container .time-slots {
    grid-template-columns: repeat(3, 1fr);
  }
}/*# sourceMappingURL=appointment-timingDesign1.css.map */