@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-container {
  margin: 60px auto;
  background: var(--plainclr);
  border-radius: 25px;
  padding: 20px;
  display: flex;
  gap: 17px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
  font-family: "Poppins", sans-serif;
}
.booking-container .left_date {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 25px;
  background: linear-gradient(180deg, var(--bg-color20), var(--bg-color2));
  padding: 20px;
  border-radius: 20px;
}
.booking-container .left_date h3 {
  font-size: 22px;
  font-weight: 600;
  color: var(--text-color13);
  border-bottom: 1px solid var(--bg-color2);
  padding-bottom: 10px;
  margin-bottom: 10px;
}
.booking-container .left_date .week-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.booking-container .left_date .week-nav button {
  border: none;
  background: var(--plainclr);
  padding: 8px;
  border-radius: 50%;
  cursor: pointer;
  height: 36px;
  transition: all 0.3s;
  color: var(--darkclr);
}
.booking-container .left_date .week-nav button:hover {
  background: #3b82f6;
  color: var(--plainclr);
}
.booking-container .left_date .week-range {
  font-weight: 600;
  color: var(--text-color13);
}
.booking-container .left_date .calendar-vertical {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  overflow-y: auto;
  padding: 5px;
}
.booking-container .left_date .calendar-vertical .calendar-day {
  padding: 12px 18px;
  border-radius: 15px;
  background: var(--plainclr);
  color: var(--text-color13);
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.booking-container .left_date .calendar-vertical .calendar-day span {
  margin-left: 5px;
}
.booking-container .left_date .calendar-vertical .calendar-day.active {
  background: var(--dark-primary);
  color: var(--plainclr);
  transform: scale(1.03);
}
.booking-container .right_time {
  flex: 2;
  display: flex;
  flex-direction: column;
  gap: 25px;
  background: linear-gradient(180deg, var(--bg-color4), var(--bg-color7));
  padding: 20px;
  border-radius: 20px;
}
.booking-container .right_time .slot-group {
  margin-bottom: 20px;
}
.booking-container .right_time .slot-group .slot-group-title {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-color11);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.booking-container .right_time .slot-group .slot-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.booking-container .right_time .slot-group .slot-list .slot-card {
  flex: 0 0 18%;
  padding: 12px 0;
  border-radius: 15px;
  background: var(--plainclr);
  color: var(--darkclr);
  cursor: pointer;
  text-align: center;
  font-weight: 500;
  transition: all 0.3s;
  position: relative;
}
.booking-container .right_time .slot-group .slot-list .slot-card.available:hover {
  background: var(--color4);
  color: var(--plainclr);
  transform: translateY(-3px);
}
.booking-container .right_time .slot-group .slot-list .slot-card.selected {
  background: var(--table-color1);
  color: var(--plainclr);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}
.booking-container .right_time .slot-group .slot-list .slot-card.unavailable {
  background: var(--plainclr);
  color: #6b7280;
  cursor: default;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 40px 0;
  font-size: 16px;
  text-align: center;
  border-radius: 15px;
  flex: 0 0 100%;
  transition: all 0.3s ease;
}
.booking-container .right_time .slot-group .slot-list .slot-card.unavailable i {
  font-size: 36px;
  margin-bottom: 12px;
  color: var(--text-color2);
}
.booking-container .right_time .slot-group .slot-list .slot-card.unavailable::after {
  background: var(--themesecondaryclr);
}
.booking-container .right_time .slot-group .slot-list .slot-card::after {
  content: "";
  position: absolute;
  top: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--table-color1);
}
.booking-container .right_time .confirm-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
}
.booking-container .right_time .confirm-section .selected-info {
  font-weight: 600;
  color: var(--text-color11);
}
.booking-container .right_time .confirm-section .confirm-btn {
  flex: 1 1 auto;
  min-width: 200px;
  padding: 14px;
  border-radius: 20px;
  font-weight: 600;
  font-size: 16px;
  border: none;
  cursor: pointer;
  color: var(--plainclr);
  background: linear-gradient(135deg, var(--card7-color), var(--table-color1));
  transition: all 0.3s ease;
}
.booking-container .right_time .confirm-section .confirm-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
}
@media (max-width: 768px) {
  .booking-container {
    flex-direction: column;
    gap: 17px;
  }
  .booking-container .right_time .slot-list .slot-card {
    flex: 0 0 45%;
  }
  .booking-container .left_date .calendar-vertical {
    grid-template-columns: repeat(3, 1fr);
  }
}/*# sourceMappingURL=appointment-timingDesign2.css.map */