.calendar-container {
  background: #333;
}

.calendar {
  margin: 20px 0px;
  overflow: hidden;
  display: flex;
  width: 100%;
  max-width: 100%;
  flex: 1 1 auto;
  flex-wrap: wrap;
  justify-content: space-evenly;
  background: #333;
  color: #fff;
  padding: 10px;
}
.calendar .days-week-container {
  display: flex;
  flex: 1 1 auto;
  width: 100%;
  flex-wrap: wrap;
}

.calendar .days-week-container .week-labels {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: space-between;
  align-self: self-start;
  color: #a2f7a9;
}
.calendar .days-week-container .wk-days-grp {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.calendar .days-week-container .wk_day,
.calendar .days-week-container span {
  /*width: 4.69rem;*/
  width: 14.285%;
  display: flex;
  text-align: center;
  line-height: 50px;
  justify-content: center;
}
.calendar .days-week-container span {
  line-height: 4.5rem;
  justify-content: center;
  border-radius: 50px;
}
.calendar .days-week-container span:hover {
  background: #a2f7a9;
  color: #333;
  font-weight: 600;
  cursor: pointer;
}

.calendar .days-week-container span.disabled {
  background: #222;
  color: #666;
}

.calendar .days-week-container span.disabled:hover {
  cursor: text;
  background: #222;
  color: #666;
}

.calendar .days-week-container span.active {
  background: #fff;
  color: #333;
}

.calendar .days-week-container .wk_day {
  font-size: 18px;
  font-weight: 500;
}

.calendar .calendar-month-year {
  width: 100%;
  justify-content: space-between;
  display: flex;
  flex: 1;
  background: #ff9f00;
}

.calendar .calendar-month-year div {
  width: 50%;
  text-align: center;
  line-height: 55px;
  font-size: 20px;
  font-weight: 600;
}

.currConsultDate {
  display: flex;
  flex-direction: column;
  margin: 0;
  flex: 0 0 auto;
  justify-self: start;
  align-self: start;
  width: -webkit-fill-available;
}
.currConsultDate h6 {
  font-size: 2rem;
}
.selectedDate,
.bookSession,
.patientData,
.availableSessionDay,
.form-slider {
  display: none;
}

.form-slider.active {
  display: block;
}

.calendar-group {
  display: none;
  flex: 0 0 auto;
  flex-direction: column;
}

.calendar-group.active {
  display: flex;
}