.booking2023_lesson_step2 {  
  padding: 0;  
  overflow: hidden;
}

/* ==================== Begin Progressbar ==================== */
.container {
  width: 100%;
}



.progressbar {
  text-align: center;
  padding: 0 0;
}

.progressbar li {
  list-style: none;
  display: inline-block;
  width: 150px;
  position: relative;
  text-align: center;
  cursor: pointer;
  font-family: "roboto", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 14px;
  letter-spacing: 0;
  color: #FFF;
}


.progressbar li:before {
  content: "";
  width: 20px;
  height: 20px;
  line-height : 20px;
  border: 1px solid #333333;
  border-radius: 100%;
  display: block;
  text-align: center;
  margin: 0 auto 10px auto;
  background-color: #333333;
  font-size: 14px;
  position: relative;
  z-index : 2;
}

.progressbar li:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  background-color: #333333;
  top: 10px;
  left: -50%;
  z-index : 1;
}

.progressbar li:first-child:after {
  content: none;
}

/* Active */
.progressbar li.active {
  color: #FFF;
}

.progressbar li.active:before {
  content: '\2713';
  background: #72D54A;
  border-color: #72D54A;
}

.progressbar li.active + li:after {
  background-color: #72D54A;
}

/* Current */
.progressbar li.current {
  color: #FFF;
}

.progressbar li.current:before {
  content: "";
  background: #333333;
  border-color: #72D54A;
}

.progressbar li.current + li:after {
  background-color: #333333;
}

/* ==================== End Progressbar ==================== */

/* ==================== Begin Booking2023 Lesson Title ==================== */
.booking2023_lesson_title {
 padding-bottom: 25px; 
}

.booking2023_lesson_title h4 {
  margin: 0 0 10px 0;
  font-family: "roboto", sans-serif;
  font-size: 22px;
  font-weight: 600;
  line-height: 27px;
  letter-spacing: 0;
  text-align: center;
  color: #FFF;
}

.booking2023_lesson_title p {
  margin: 0 0;
  font-family: "roboto", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 17px;
  letter-spacing: 0;
  text-align: center;
  color: #FFF;
}


/* ==================== End Booking2023 Lesson Title ==================== */

/* ==================== Begin Booking2023 Lesson Calendar ==================== */
.booking2023_lesson_calendar {
  float: left;
  width: 60%;
  overflow: hidden;
}



/* Calendar Date */
.booking2023_lesson_calendar .calendar_date {
  overflow: hidden;
  display: flex;
}

.booking2023_lesson_calendar .calendar_date .calendar_date_left {
  width: 10%;
  display: table;

  text-align: center;
  font-family: "roboto", sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: 0;
  color: #FFF;
}

.booking2023_lesson_calendar .calendar_date .calendar_date_left div,
.booking2023_lesson_calendar .calendar_date .calendar_date_right div {
  vertical-align:middle;
  display: table-cell;
  cursor: pointer;
}

.booking2023_lesson_calendar .calendar_date .calendar_date_middle {
  width: 80%;
}

.booking2023_lesson_calendar .calendar_date .calendar_date_right {
  width: 10%;
  display: table;

  text-align: center;
  font-family: "roboto", sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: 0;
  color: #FFF;
}

.booking2023_lesson_calendar .calendar_date .calendar_date_middle div.circle_a {
  float: left;
  position: relative;
  margin: 0 2%;
  width: calc(16%);
  padding-bottom: calc(16%);
}

.booking2023_lesson_calendar .calendar_date .calendar_date_middle div.circle_b {
  position: absolute;
  width: 66%;
  height: 66%;
  top: 17%;
  left : 17%;
  display: table;

  font-family: "roboto", sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: 0;
  text-align: center;
  color: #FFF;
}

.booking2023_lesson_calendar .calendar_date .calendar_date_middle div.circle_b div {
  vertical-align:middle;
  display: table-cell;
  cursor: pointer;
}

.booking2023_lesson_calendar .calendar_date .calendar_date_middle div.circle_b span {
  font-family: "roboto", sans-serif;
  font-size: 10px;
  font-weight: 500;
  line-height: 12px;
  letter-spacing: 0;
}

.booking2023_lesson_calendar .calendar_date .calendar_date_middle div.circle_b.date_selected {
  border: 1px solid #72D54A;
  border-radius: 100%;
  background-color: #72D54A;
  color: #000;
}

.booking2023_lesson_calendar .calendar_date .calendar_date_middle div.circle_b.date_unavailable {
  color: #999;
}


/* Calendar Content */
.booking2023_lesson_calendar .calendar_content {
  overflow: hidden;
  display: flex;
}

.booking2023_lesson_calendar .calendar_content .calendar_content_left {
  width: 10%;
}

.booking2023_lesson_calendar .calendar_content .calendar_content_middle {
  width: 80%;
}

.booking2023_lesson_calendar .calendar_content .calendar_content_right {
  width: 10%;
}

.booking2023_lesson_calendar .calendar_content .calendar_content_middle div {
  float: left;
  margin: 8px 2%;
  padding: 10px 0;
  width: calc(16%);
  
  border: 1px solid #FFF;
  font-family: "roboto", sans-serif;
  font-size: 10px;
  font-weight: 500;
  line-height: 12px;
  letter-spacing: 0;
  text-align: center;
  color: #FFF;
}

.booking2023_lesson_calendar .calendar_content div.calendar_selected {
  border: 1px solid #72D54A;
  background-color: #72D54A;
  color: #000;
}

.booking2023_lesson_calendar .calendar_content div.calendar_unavailable {
  border: 1px solid #999;
  color: #999;
}

.booking2023_lesson_calendar .calendar_content div.calendar_unavailable span {
  display: block;
  margin: 6px auto 5px auto;
  height: 1px;
  width: 20px;
  background-color: #999;
  color: #999;
}

/* Calendar Month View */
.booking2023_lesson_calendar .calendar_month_view {
  clear: both;
  margin: 15px 0 0 calc(12%);
}

.booking2023_lesson_calendar .calendar_month_view a {
  font-family: "roboto", sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 15px;
  letter-spacing: 0;
  text-align: left;
  color: #FFF;
}

/* ==================== End Booking2023 Lesson Calendar ==================== */

/* ==================== Begin Booking2023 Lesson Sidebar ==================== */
.booking2023_lesson_sidebar {
  float: left;
  width: 40%;
  overflow: hidden;
}


/* Menu Title Sidebar */
.booking2023_lesson_sidebar .menu_title_sidebar {
  margin: 0 0 25px 0;
  font-family: "roboto", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: 0;
  text-align: right;
  color: #FFF;
}

/* Menu Sidebar */
.booking2023_lesson_sidebar ul.menu_sidebar {
  width: 100%;
  margin: 0 0;
  padding: 0 0 0 30px;
}

.booking2023_lesson_sidebar ul.menu_sidebar li {
  list-style: none;
  width: 100%;
  margin-bottom: 12px;
}

.booking2023_lesson_sidebar ul.menu_sidebar .menu_content {
  width: 100%;
  overflow: hidden;
}

.booking2023_lesson_sidebar ul.menu_sidebar .menu_action {
  width: 100%;
  text-align: right;
}

.booking2023_lesson_sidebar ul.menu_sidebar .menu_content label {
  float: left;
  margin: 0 0;
  padding: 0 0;
  text-align: left;
  font-family: "roboto", sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 19px;
  letter-spacing: 0;
  color: #FFF;
}

.booking2023_lesson_sidebar ul.menu_sidebar .menu_content span {
  float: right;
  margin: 0 0;
  padding: 0 0;
  text-align: right;
  font-family: "roboto", sans-serif;
  font-size: 15px;
  font-weight: 300;
  line-height: 19px;
  letter-spacing: 0;
  color: #BEBEBE;
}

.booking2023_lesson_sidebar ul.menu_sidebar .menu_action a {
  font-family: "roboto", sans-serif;
  font-size: 12px;
  font-style: italic;
  font-weight: 400;
  line-height: 15px;
  letter-spacing: 0;
  color: #72D54A;
  text-decoration: none;
}

/* Book Sidebar */
.booking2023_lesson_sidebar .book_sidebar span {
  float: right;
  margin-bottom: 10px;
  font-family: "roboto", sans-serif;
  font-size: 12px;
  font-style: italic;
  font-weight: 400;
  line-height: 15px;
  letter-spacing: 0;
  color: #FFF;
  text-align: right;
}

.booking2023_lesson_sidebar .book_sidebar input {
  clear: both;
  float: right;
  margin: 0 0;
}

@media only screen and (max-width: 768px) {
  .booking2023_lesson_step1 {
    text-align: center;
  }
  .button-findatime {
    padding-top: 20px;
    padding-bottom: 20px;
    justify-items: center;    
    display: grid;    
  }
  .button-area {
    width: 225px;
  }
  .booking2023_lesson_calendar .calendar_date .calendar_date_middle div.circle_b {
    font-size: 14px;
    line-height: 14px;
  }
  .booking2023_lesson_sidebar .menu_title_sidebar {
    font-size: 14px;
  }
  .booking2023_lesson_sidebar ul.menu_sidebar .menu_content label {
    font-size: 13px;
  }
  .booking2023_lesson_sidebar ul.menu_sidebar .menu_content span {
    font-size: 13px;
  }
}

/* ==================== End Booking2023 Lesson Sidebar ==================== */

@media only screen and (max-width: 640px) {
  .progressbar li {
    width: 140px;      
  }
}

@media only screen and (max-width: 480px) {
  .container {
    margin:0 auto;
    padding: 0 15px;
  }
  
  .progressbar li {
    width: 82px;
  }
  .booking2023_lesson_title h4 {
    font-size: 18px;
    line-height: 22px;
  }

  .booking2023_lesson_title p {
    display: none;
  }
  .progressbar li {
    font-size: 10px;
    line-height: 10px;
  }
  .booking2023_lesson_calendar {
    width: 100%;
    clear: both;
  }

  .booking2023_lesson_calendar .calendar_date .calendar_date_middle div.circle_a {
    float: left;
    position: relative;
    margin: 0 2%;
    width: calc(29%);
    padding-bottom: calc(29%);
  }

  .booking2023_lesson_calendar .calendar_date .calendar_date_middle div.circle_a:nth-child(5n),
  .booking2023_lesson_calendar .calendar_date .calendar_date_middle div.circle_a:nth-child(5n -1) {
    display: none;
  }

  .booking2023_lesson_calendar .calendar_content .calendar_content_middle div {
    float: left;
    margin: 8px 2%;
    padding: 10px 0;
    width: calc(29%);
  }

  .booking2023_lesson_calendar .calendar_month_view {
    margin: 10px 0 0 calc(12%);
  }

  .booking2023_lesson_calendar .calendar_content .calendar_content_middle div:nth-child(5n),
  .booking2023_lesson_calendar .calendar_content .calendar_content_middle div:nth-child(5n -1) {
    display: none;
  }

  .booking2023_lesson_sidebar {
    width: 100%;
    clear: both;
    padding-top: 40px;
  }

}

@media only screen and (max-width: 393px) {
  .container {    
    padding: 0;
  }
}

@media only screen and (max-width: 360px) {
  .progressbar li {
    width: 75px;
    font-size: 9px;
  }
  .booking2023_lesson_title h4 {
    font-size: 16px;
  }
  .booking2023_lesson_title {
    padding-bottom: 0;
  }
  .booking2023_lesson_step1-welcome h2 {
    font-size: 22px;
  }
  .booking2023_lesson_step1-welcome h3 {
    font-size: 17px;
  }
  .handedness-lbl {
    font-size: 17px;
  }
  
}

@media only screen and (max-width: 320px) {
  .progressbar li {
      width: 70px;
      font-size: 8px;
  }
}