@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap");
:root {
  --themeprimaryclr: #3611c9;
  --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: #FABB05;
  --open-now-color: #00AE14;
  --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;
  --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;
  --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;
  --shadow1: #00000040;
  --shadow2: #DBDBDB40;
  --bottom-btn-bg1: #201169;
  --bottom-btn-bg2: #e20200;
  --primary-font: "Plus Jakarta Sans", serif;
}

.calendar-container {
  width: 100%;
  margin: auto;
  margin-top: 25px;
  background: var(--plainclr);
  border-radius: 12px;
  box-shadow: 0 4px 15px var(--shadow2);
  padding: 30px 20px 20px 20px;
  font-family: var(--primary-font);
}
.calendar-container .calendar-heading {
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  color: var(--themeprimaryclr);
  margin-bottom: 25px;
}
.calendar-container .date-slider {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 25px;
  width: 100%;
}
.calendar-container .date-slider .date-list {
  display: flex;
  gap: 5px;
  flex: 1;
  overflow-x: auto;
  padding: 5px;
}
.calendar-container .date-slider .date-list .date-item {
  flex: 0 0 auto;
  background: var(--light-bg);
  padding: 10px 8px;
  border-radius: 8px;
  text-align: center;
  cursor: pointer;
  transition: 0.3s;
  font-size: 14px;
  min-width: 63px;
  color: var(--text-color6);
}
.calendar-container .date-slider .date-list .date-item.active {
  background: var(--themeprimaryclr);
  color: var(--plainclr);
  font-weight: 600;
}
.calendar-container .date-slider .date-list .date-item:hover {
  background: var(--themehoverclr);
  color: var(--darkclr);
}
.calendar-container .date-slider button.btn-outline-secondary {
  font-size: 14px;
  padding: 5px 10px;
  color: var(--text-color6);
  border-color: var(--border-color2);
}
.calendar-container .date-slider button.btn-outline-secondary:hover {
  background: var(--themehoverclr);
  border-color: var(--themeprimaryclr);
  color: var(--darkclr);
}
.calendar-container .date-slider button i {
  pointer-events: none;
}
.calendar-container .slot-section .slot-accordion {
  border: 1px solid var(--border-color2);
  border-radius: 8px;
  margin-bottom: 12px;
  overflow: hidden;
}
.calendar-container .slot-section .slot-accordion .slot-accordion-header {
  padding: 10px 15px;
  background: var(--light-bg);
  cursor: pointer;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 15px;
  color: var(--text-color6);
}
.calendar-container .slot-section .slot-accordion .slot-accordion-header:hover {
  background: var(--themeprimaryclr);
  color: var(--plainclr);
}
.calendar-container .slot-section .slot-accordion .slot-accordion-header i {
  transition: transform 0.3s;
}
.calendar-container .slot-section .slot-accordion .slot-accordion-body {
  display: none;
  padding: 10px 15px;
  background: var(--plainclr);
  gap: 10px;
  flex-wrap: wrap;
  display: flex;
}
.calendar-container .slot-section .slot-accordion .slot-accordion-body .slot-btn {
  min-width: 80px;
  background: var(--themeprimaryclr);
  border: none;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 13px;
  cursor: pointer;
  text-align: center;
  color: var(--plainclr);
  box-shadow: 0 3px 6px rgba(55, 40, 112, 0.2);
}
.calendar-container .slot-section .slot-accordion .slot-accordion-body .slot-btn small {
  display: block;
  font-size: 11px;
  color: var(--plainclr);
}
.calendar-container .slot-section .slot-accordion .slot-accordion-body .slot-btn:hover {
  background: var(--dark-primary);
  transform: translateY(-1px);
}
.calendar-container .slot-section .slot-accordion .slot-accordion-body .noslot-msg {
  width: 100%;
  text-align: center;
  font-size: 14px;
  font-style: italic;
  color: var(--text-color12);
  background: var(--bg-color15);
  padding: 12px 0;
  border-radius: 6px;
}
.calendar-container .selected-appointment {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 15px;
  font-size: 16px;
  font-weight: 600;
  color: var(--themeprimaryclr);
}
.calendar-container .selected-appointment #confirmBtn {
  margin-top: 8px;
  background: var(--bottom-btn-bg1);
  border: none;
  color: var(--plainclr);
}
.calendar-container .selected-appointment #confirmBtn:hover {
  background: var(--bottom-btn-bg2);
}
.calendar-container .date-list::-webkit-scrollbar,
.calendar-container .slot-accordion-body::-webkit-scrollbar {
  height: 6px;
}
.calendar-container .date-list::-webkit-scrollbar-thumb,
.calendar-container .slot-accordion-body::-webkit-scrollbar-thumb {
  background: var(--border-color2);
  border-radius: 6px;
}
@media screen and (max-width: 768px) {
  .calendar-container .date-list .date-item {
    min-width: calc((100% - 9px) / 3) !important;
  }
  .calendar-container .slot-accordion-body {
    padding: 10px 9px !important;
  }
  .calendar-container .slot-btn {
    min-width: 77px !important;
    padding: 8px 8px !important;
  }
}/*# sourceMappingURL=appointment-timingDesign4.css.map */