/*CSS FOR FORM - THIS DOES OVERLAP WITH THE CALENDAR BUT I HAVE CREATED SPECIFIC CSS FOR THE CALENDAR BELOW IT*/

/*@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:wght@100;300;400;500&display=swap');*/

body {
  font-family: "Montserrat", sans-serif !important;
}

.body {
  max-width: 70% !important;
  padding-top: 35px;
  padding-bottom: 35px;
}

h1.header-center.text-decoration-underline.text-center {
  font-size: 30px;
  line-height: 35px;
  text-decoration: none !important;
  font-weight: 600;
  text-align: left;
}

.mt-4 {
  margin-top: 1.5rem !important;
  background-color: #1D864221;
  border-radius: 5px;
  width: 391px;
  margin: 0 auto;
  padding: 15px 35px;
  margin-bottom: 35px;
}

.mt-2:first-child .col-12 {
  width: 70%;
  margin: 0 auto;
}

h5.text-decoration-underline {
  font-size: 20px !important;
  text-decoration: none !important;
  padding-bottom: 25px;
}

hr {
  margin-top: 25px !important;
  margin-bottom: 35px !important;
}

.bb-row-04 .col-5 {
  width: 100%;
  margin-bottom: 25px;
  font-weight: 500;
  display: block;
}

.bb-row-04 .col-2:nth-child(2) {
  display: none;
}

.bb-row-04 .col-3 {
  width: 41.66666667%;
}

.bb-row-04 .col-2:nth-child(4), .bb-row-05 .col-2, .bb-row-10 .col-2, .bb-row-14 .col-2 {
  width: 58%;
}

.bb-row-18 .col-3 {
  width: 41.66666667%;
}

.bb-row-18 .col-2 {
  width: 29%;
}

.row.bb-row-18 .col-6 {
  display: none;
}

.row.bb-row-18 .col-2 {
  width: 66.66666667%;
}

.row.bb-row-25 .col-2{
  width: 50%;
}

.row.bb-row-25 .col-8, .row.bb-row-26 .col-5, .row.bb-row-27 .col-5, .row.bb-row-28 .col-5, .row.bb-row-29 .col-5 {
  width: 50%;
}

.row.bb-row-25 .col-2:nth-child(3), .row.bb-row-26 .col-3, .row.bb-row-27 .col-3, .row.bb-row-28 .col-3, .row.bb-row-29 .col-3 {
  display: none !important;
}

.row.mt-2.mb-2.bb-row-37 .col-8 {
  width: 70%;
}

.row.mt-2.mb-2.bb-row-37 .col-4 {
  width: 30%;
}

.row {
  margin-top: 8px !important;
  /*  --bs-gutter-x: 1.5rem 0 1.5rem 0 !important;*/
}

  .bb-row-40 .col-2, .bb-row-36 .col-2, .row.bb-row-26 .col-2:nth-child(3), .row.bb-row-27 .col-2:nth-child(3), .row.bb-row-28 .col-2:nth-child(3), .row.bb-row-29 .col-2:nth-child(3) {
    width: 33.333333% !important;
  }

input#mainMemberIncome, input#spouseIncome, input#medicalAidBudget {
  width: 119.33333%;
}

.row.bb-row-47, .row.bb-row-48, .row.bb-row-50, .row.bb-row-51, .row.bb-row-53, .row.bb-row-54, .row.bb-row-59, .row.bb-row-60 {
  display: inline !important;
}

.row.bb-row-47, .row.bb-row-50, .row.bb-row-53, .row.bb-row-59, .row.bb-row-23 .col-2 {
  width: 66.66666667%;
}

.row.bb-row-48, .row.bb-row-51, .row.bb-row-54, .row.bb-row-60 {
  width: 33.333333%;
}

  .bb-row-47 .col-12, .bb-row-48 .col-12, .row.bb-row-50 .col-12, .row.bb-row-51 .col-12, .row.bb-row-53 .col-12, .row.bb-row-54 .col-4, .row.bb-row-59 .col-12, .row.bb-row-60 .col-6 {
    width: 100%;
  }

    .row.bb-row-54 .col-4 select#provinceOfResidence, .row.bb-row-60 .col-6 input#medicalAidPayee {
      width: 107%;
    }

.bb-row-51 .form-check.form-check-inline.align-top {
  padding-left: 0;
}

.row.bb-row-60 .col-6:nth-child(2) {
  display: none;
}

button.btn.btn-primary {
  font-size: 15px;
  font-weight: 600;
  text-transform: capitalize;
  line-height: 18px;
  color: #fff;
  background-color: #1EB6B2;
  border-style: solid;
  border-width: 1px 1px 1px 1px;
  border-color: #1EB6B2;
  border-radius: 10px 10px 10px 10px;
  padding: 15px 20px 15px 20px;
}

  button.btn.btn-primary:hover {
    background-color: #F26222;
    border-color: #F26222;
  }

.form-check.form-check-inline.fill.float-end.p-5.pt-0 {
  padding: 0 !important;
  margin-right: 0;
}

.row.bb-row-65, .row.bb-row-66, .row.bb-row-66 .col-12 {
  padding-right: 0;
  margin-right: 0 !important;
}

.form-check-input:checked {
  background-color: #1EB6B2 !important;
  border-color: #1EB6B2 !important;
}

.bb-row-05 .col-3, .bb-row-06 .col-10, .bb-row-07 .col-10, .bb-row-08 .col-10, .bb-row-09 .col-10, .bb-row-10 .col-3, .bb-row-11 .col-10, .bb-row-12 .col-10, .bb-row-13 .col-10, .bb-row-14 .col-3, .bb-row-15 .col-10, .bb-row-16 .col-10, .bb-row-17 .col-10, .bb-row-17 .col-3 {
  width: 41.66666667% !important;
}

.bb-row-06 .col-2, .bb-row-06 .col-2, .bb-row-07 .col-2, .bb-row-08 .col-2, .bb-row-09 .col-2, .bb-row-11 .col-2, .bb-row-12 .col-2, .bb-row-13 .col-2, .bb-row-15 .col-2, .bb-row-16 .col-2, .bb-row-17 .col-2 {
  width: 58% !important;
}

.bb-row-06 .col-2 {
  padding-top: .5rem;
}

.bb-row-05 .col-2:nth-child(2), .bb-row-10 .col-2:nth-child(2), .bb-row-14 .col-2:nth-child(2), .bb-row-18 .col-2:nth-child(2) {
  padding-bottom: .5rem;
}

.row.bb-row-06 {
  margin-top: 0 !important;
}

.bb-row-19 .col-2, .bb-row-20 .col-2, .bb-row-21 .col-2 {
  width: 29% !important;
  /*    margin-left: 71%;*/
}

.bb-row-19 .col-10, .bb-row-20 .col-10, .bb-row-21 .col-10 {
  width: 70.8%;
}


.bb-row-18 .col-2:nth-child(5) {
  margin-left: 29%;
}

.row .row {
  width: 100% !important;
  margin: 0 auto !important;
  margin-bottom: 8px !important;
}

@media only screen and (max-width: 850px) {
  .body {
    max-width: 95% !important;
  }

  /*.m2 {
    width: 95% !important;
  }*/

  .row.bb-row-44 .form-check.form-check-inline:nth-child(2), .row.bb-row-45 .form-check.form-check-inline:nth-child(2) {
    width: 80%;
  }

  .row.bb-row-51, .row.bb-row-51 .col-12 {
    padding-right: 0;
  }

    .row.bb-row-51 .form-check.form-check-inline:nth-child(2) {
      width: 80%;
    }

  input#mainMemberIncome, input#spouseIncome, input#medicalAidBudget {
    width: 109.33333%;
  }

  .row.bb-row-54 .col-4 select#provinceOfResidence, .row.bb-row-60 .col-6 input#medicalAidPayee {
    width: 112%;
  }
}

@media only screen and (max-width: 550px) {
  .body {
    max-width: 90% !important;
  }

  .bb-row-03, .bb-row-04, .bb-row-05, .bb-row-10, .bb-row-14, .bb-row-18 {
    padding-right: 0 !important;
  }

  .row {
    --bs-gutter-x: 0 !important;
    flex-direction: column !important;
    /*    padding-top: .5rem!important;*/
  }

    .bb-row-04 .col-2:nth-child(4), .bb-row-05 .col-2, .bb-row-10 .col-2, .bb-row-14 .col-2, .bb-row-18 .col-2, .bb-row-18 .col-3, .row.bb-row-47, .row.bb-row-50, .row.bb-row-53, .row.bb-row-59, .row.bb-row-23 .col-2, .col-4, .col-8, .bb-row-40 .col-2, .bb-row-36 .col-2, .row.bb-row-48, .row.bb-row-51, .row.bb-row-54, .row.bb-row-60, .col-5, .bb-row-05 .col-3, .bb-row-05 .col-3, .bb-row-06 .col-10, .bb-row-07 .col-10, .bb-row-08 .col-10, .bb-row-09 .col-10, .bb-row-10 .col-3, .bb-row-11 .col-10, .bb-row-12 .col-10, .bb-row-13 .col-10, .bb-row-14 .col-3, .bb-row-15 .col-10, .bb-row-16 .col-10, .bb-row-17 .col-10, .bb-row-17 .col-3, .bb-row-06 .col-2, .bb-row-06 .col-2, .bb-row-07 .col-2, .bb-row-08 .col-2, .bb-row-09 .col-2, .bb-row-11 .col-2, .bb-row-12 .col-2, .bb-row-13 .col-2, .bb-row-15 .col-2, .bb-row-16 .col-2, .bb-row-17 .col-2, .bb-row-19 .col-2, .bb-row-20 .col-2, .bb-row-21 .col-2, .bb-row-19 .col-10, .bb-row-20 .col-10, .bb-row-21 .col-10 {
      width: 100% !important;
    }

  .bb-row-18 .col-2 {
    /*    padding-top: .5rem!important;*/
  }

  .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
    padding-top: .5rem !important;
  }

  input#mainMemberIncome, input#spouseIncome, input#medicalAidBudget {
    width: 100%;
  }

  .row.bb-row-54 .col-4 select#provinceOfResidence, .row.bb-row-60 .col-6 input#medicalAidPayee {
    width: 100%;
  }

  h6, .h6, button.btn.btn-primary, p {
    font-size: 1.1rem !important;
    line-height: 1.7rem !important;
  }

  .bb-row-18 .col-2:nth-child(5) {
    margin-left: 0;
  }

  .mt-4 {
    width: 100% !important;
  }

  .row.bb-row-24 .col-2, .row.bb-row-30 .col-2 {
    width: 91%;
    display: inline-block;
  }

  .row.bb-row-24 .col-1, .row.bb-row-25 .col-1, .row.bb-row-30 .col-1 {
    /*    width: 20%;*/
    display: inline-block;
  }

  .row.bb-row-24, .row.bb-row-30, .row.bb-row-26, .row.bb-row-27, .row.bb-row-28, .row.bb-row-29 {
    flex-direction: row !important;
    align-items: center;
  }

  .row.bb-row-25 .col-8, .row.bb-row-25 .col-2 {
    width: 100% !important;
  }

  .bb-row-40 .col-2, .bb-row-36 .col-2, .row.bb-row-26 .col-2:nth-child(3), .row.bb-row-27 .col-2:nth-child(3), .row.bb-row-28 .col-2:nth-child(3), .row.bb-row-29 .col-2:nth-child(3) {
    width: 70% !important;
    margin-right: 5px;
  }
}

/*END OF FORM CSS*/

/*BEGINNING OF CALENDAR CSS - ID FOR CALENDAR = #schedulerpage_body */

h1.text-center.text-decoration-underline {
  font-size: 26px;
  line-height: 35px;
  text-decoration: none !important;
  font-weight: 600;
  text-align: left;
}

#schedulerpage_body .col-4 {
  width: 100%;
  margin: 0 auto !important;
  text-align: center;
}

#schedulerpage_body .form-check.form-check-inline.float-end.p-5.pt-0 {
  padding: 0 !important;
  margin: 0 auto !important;
  float: none !important;
  display: block;
  text-align: center;
}

#schedulerpage_body .bb-row-73 .col-9 {
  width: 100% !important;
  padding: 0;
  display: inline-block;
}

#schedulerpage_body .row:nth-child(4) {
  --bs-gutter-x: 0 !important;
  margin-left: 1.5rem;
}

/*.row.bb-row-72 .col-4 {
    display: none !important;
}*/
.row.m-2.bb-row-68 .col-8 {
  width: 100%;
}

#schedulerpage_body .row.m-2.bb-row-68 .col-8 {
  margin: 0 auto;
}

ngb-datepicker.wide-datepicker.ng-untouched.ng-pristine.ng-valid, ngb-datepicker.wide-datepicker.ng-valid.ng-touched.ng-dirty {
  margin: 0 auto;
  display: block;
}

#schedulerpage_body .row.m-2.bb-row-71 .col-4 {
  border: 1px solid #1EB6B2;
  background-color: #1EB6B2;
  color: #fff;
  border-radius: 10px;
  width: 31.3333% !important;
  padding: 5px !important;
  margin: 5px !important;
}

  #schedulerpage_body .row.m-2.bb-row-71 .col-4:hover {
    border: 1px solid #F26222;
    background-color: #F26222;
  }

.bb-row-70 .col-7, .bb-row-69 .container.table-light.col-8.d-grid {
  width: 100% !important;
}

#schedulerpage_body .row.m-2.bb-row-71 .col-4:has(.disabledHourLabel) {
  background-color: #efefef !important;
  border-color: #efefef;
}

#schedulerpage_body .row.m-2.bb-row-71 .col-4:has(.form-check-input:checked), .form-check-input:checked {
  border: 1px solid #F26222 !important;
  background-color: #F26222 !important;
}

@media only screen and (max-width: 850px) {
  .wide-datepicker[_ngcontent-prh-c19], .wide-datepicker[_ngcontent-prh-c19] .ngb-dp-weekdays, .wide-datepicker[_ngcontent-prh-c19] .ngb-dp-month, .wide-datepicker[_ngcontent-prh-c19] .ngb-dp-week, .wide-datepicker[_ngcontent-prh-c19] .ngb-dp-day {
    width: 500px !important;
  }
}

@media only screen and (max-width: 850px) {
  .row.m-2.bb-row-71 {
    flex-direction: row !important;
  }

  #schedulerpage_body .row.m-2.bb-row-71 .col-4 {
    width: 30% !important;
  }
}

/*END OF CALEDNAR CSS*/