section#book-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

section#book-page .title {
  align-self: flex-start;
  margin-top: 40px;
}

section#book-page .title .back {
  display: none;
}

section#book-page .title .form-heading {
  font-size: 24px;
  line-height: 32px;
  border-left: 16px solid #e53f00;
  padding: 10px 16px;
  margin-bottom: 46px;
}

section#book-page .title .confirm-form-heading {
  font-size: 24px;
  line-height: 32px;
  border-left: 16px solid #e53f00;
  padding: 10px 16px;
  margin-bottom: 46px;
}

section#book-page .body {
  display: flex;
  flex-direction: column;
  margin: 0 30px 50px 32px;
}

/* default behaviour design */
section#book-page .body .heading {
  font-size: 30px;
  line-height: 39px;
  font-weight: normal;
}

section#book-page .body form label {
  display: inline-block;
  position: relative;
  cursor: pointer;
}

section#book-page .body form label input[type="radio"],
section#book-page .body form label input[type="radio"]:checked {
  position: absolute;
  opacity: 0;
}

section#book-page .body form label input[type="radio"] ~ div {
  display: inline-block;
  text-align: center;
  border: 1px solid #101010;
  border-radius: 5px;
  color: #101010;
}

section#book-page .body form label input[type="radio"]:disabled ~ div {
  border-color: #a6a6a6;
  color: #a6a6a6;
}

section#book-page .body form label input[type="radio"]:hover ~ div {
  border-color: #e53f00;
  color: #e53f00;
}

section#book-page .body form label input[type="radio"]:disabled:hover ~ div {
  border-color: #a6a6a6;
  color: #a6a6a6;
}

section#book-page .body form label input[type="radio"]:checked ~ div {
  background-color: #e53f00;
  border-color: #e53f00;
  color: #ffffff;
}
/* custom design start */

/* course start */
section#book-page .body .course {
  display: flex;
  flex-direction: column;
  margin-bottom: 100px;
}

section#book-page .body .course .course-form {
  display: flex;
  margin: 24px 0 8px;
}

section#book-page .body .course .selected {
  font-size: 16px;
  line-height: 21px;
}

section#book-page .body .course input ~ div {
  height: auto;
  width: auto;
  max-width: 75px;
  padding: 27px 21px;
}
/* course end */

/* grade start */
section#book-page .body .grade {
  display: flex;
  flex-direction: column;
  margin-bottom: 100px;
}

section#book-page .body .grade .grade-form {
  margin-top: 24px;
  display: flex;
  flex-direction: row;
}

section#book-page .body .grade .grade-form > div:nth-child(1) {
  width: auto;
}

section#book-page .body .grade .grade-form > div {
  display: flex;
  flex-wrap: wrap;
}

section#book-page .body .grade input ~ div {
  height: 43px;
  width: 43px;
  padding: 14px 0;
  margin: 8px;
}
/* grade end */

/* shedule start */
section#book-page .body .shedule {
  display: flex;
  flex-direction: column;
}

section#book-page .body .schedule p {
  font-size: 14px;
  line-height: 19px;
  color: #e53f00;
  margin-bottom: 32px;
}

section#book-page .body .schedule .schedule-table {
  display: flex;
  flex-direction: column;
  margin-bottom: 100px;
}

section#book-page .body .schedule .change-day {
  display: flex;
  max-width: 300px;
  justify-content: space-between;
  margin-bottom: 32px;
}

section#book-page .body .schedule .change-day .day {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  padding-bottom: 5px;
}

section#book-page .body .schedule .change-day .day div:first-child {
  margin-bottom: 5px;
  font-size: 12px;
}

section#book-page .body .schedule .change-day .day:hover * {
  color: #e53f00;
}

section#book-page .body .schedule .change-day .day.active {
  color: #e53f00;
  border-bottom-color: #e53f00;
}

section#book-page .body .schedule .change-day .day.active div {
  color: #e53f00;
}

section#book-page .body .schedule .schedule-form {
  display: flex;
  flex-direction: column;
}

section#book-page .body .schedule .schedule-form img {
  height: 24px;
  width: 24px;
  margin: 15px 15px 0 0;
}

section#book-page .body .schedule .schedule-form input ~ div {
  min-width: 66px;
  font-size: 12px;
  padding: 12px 0;
  margin: 8px;
}

section#book-page .body .schedule .schedule-form .morning {
  display: flex;
  margin-bottom: 32px;
}

section#book-page .body .schedule .schedule-form .afternoon {
  display: flex;
  margin-bottom: 32px;
}

section#book-page .body .schedule .schedule-form .evening {
  display: flex;
}

/* schedule end */

/* contact start */
section#book-page .body .contact {
  display: flex;
  flex-direction: column;
  margin-bottom: 100px;
}

section#book-page .body form {
  display: flex;
  flex-direction: column;
  margin-top: 32px;
}

section#book-page .body form > div {
  position: relative;
  width: 100%;
  margin-bottom: 24px;
}

section#book-page .body .contact form input {
  border-bottom: 2px solid #e5e5e5;
  width: 100%;
  padding: 18px 0 5px 13px;
  font-size: 16px;
  line-height: 22px;
}

section#book-page .body .contact form input.error {
  border-color: #eb4d4d;
}

section#book-page .body .contact form .floating-label.require {
  color: #eb4d4d;
}

section#book-page .body .contact input:focus ~ .floating-label,
section#book-page .body .contact input.ng-touched ~ .floating-label {
  top: 0px;
  left: 13px;
  font-size: 12px;
  opacity: 1;
}

section#book-page .body .contact .floating-label {
  position: absolute;
  pointer-events: none;
  left: 13px;
  top: 20px;
  transition: 0.2s ease all;
}

section#book-page .body .contact form input[type="button"] {
  width: 100%;
  margin-top: 16px;
  padding: 16px 0;
  background-color: #e53f00;
  border: 1px solid #e53f00;
  border-radius: 5px;
  color: #ffffff;
  font-size: 17px;
  line-height: 22px;
  cursor: pointer;
}

section#book-page .body .contact form input[type="button"]:disabled {
  background-color: #ff804d;
  border: 1px solid #ff804d;
}

/* contact end */

/*Form footer Start*/
.demo {
    display: flex;
    height: 127px;
    
}

.demo div {
    width: 33.33%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: #227aeb;
}

.demo .p1 {
    font-family: 'Tahoma';
    font-size: 28px;
    font-style: normal;
    font-weight: 600;
  
}

.demo .p2 {
  margin-top: -25;
  margin-bottom: 1rem;
  text-align: center;
}

.colorWhite {
    color: #fff;
}
/*Form footer End*/

@media only screen and (min-width: 992px) {
  section#book-page .title {
    align-self: center;
    margin: 85px 0 0;
  }

  section#book-page .title .form-heading {
    display: inline-block;
    font-size: 31px;
    line-height: 16px;
    margin: 0 0 82px -140px;
    border-left: none;
  }

  section#book-page .title .confirm-form-heading {
    display: inline-block;
    font-size: 31px;
    line-height: 16px;
    margin-bottom: 82px;
    border-left: none;
  }

  section#book-page .title .form-heading .back {
    display: inline-block;
    width: 25px;
    height: 35px;
    padding-top: 10px;
    margin-right: 44px;
  }

  /* default behaviour */
  section#book-page .body .heading {
    font-size: 32px;
    line-height: 43px;
    font-weight: normal;
  }

  /* schedule table start */
  section#book-page .body .schedule .change-day {
    max-width: 350px;
  }
  /* schedule table end */

   .amazon {
    font-size: 14px;
    /* background-color: #227aeb; */
    background-image: linear-gradient(-45deg, #227aeb 0, #1da8d3 100%);
    padding: 0 18px;
    border-radius: 16px;
    margin-bottom: 15px;
    width: 60%;
}

.amazon .giftText {
    color: white;
    position: relative;
    top: -4px;
    width: 60%;
}

  /* contact start */
  section#book-page .body .contact form input[type="button"] {
    width: 60%;
  }
  /* contact end */
}

/* confirmation page start */
section#book-page .confirm-body {
  display: flex;
  flex-direction: column;
  margin: 0 24px 70px;
}

section#book-page .confirm-body > img {
  align-self: center;
  margin-bottom: 40px;
}

section#book-page .confirm-body .confirm-text {
  margin-bottom: 24px;
  display: flex;
}

section#book-page .confirm-body .confirm-text img {
  height: 18px;
  width: 18px;
  margin: 5px 10px 0 0;
}

section#book-page .confirm-body .confirm-text p {
  font-size: 14px;
  letter-spacing: 0.28px;
  line-height: 25px;
}

section#book-page .confirm-body .confirm-block {
  margin: 42px 0 16px;
  padding-left: 15px;
}

section#book-page .confirm-body .confirm-block > div * {
  display: inline-block;
}

section#book-page .confirm-body .confirm-block img {
  height: 14px;
  width: 14px;
  margin-right: 11px;
}

section#book-page .confirm-body .confirm-block > p {
  font-size: 20px;
  letter-spacing: 0.4;
  line-height: 50px;
  margin-top: 8px;
}

section#book-page .confirm-body .personal-info {
  display: flex;
}

section#book-page .confirm-body .personal-info {
  display: flex;
  flex-direction: column;
  margin: 0 0 60px 15px;
}

section#book-page .confirm-body .personal-info > div {
  display: flex;
  flex-direction: row;
}

section#book-page .confirm-body .personal-info > div > div {
  width: auto;
  padding: 10px;
  border: 0.5px solid #191919;
}

section#book-page .confirm-body .personal-info > div > div img {
  margin-right: 5px;
}

section#book-page .confirm-body .personal-info > div > div > div {
  margin-bottom: 10px;
}

section#book-page .confirm-body .personal-info .first-row .first-item {
  width: 70%;
}

section#book-page .confirm-body .personal-info .first-row .second-item {
  width: 30%;
}

section#book-page .confirm-body .personal-info .second-row .first-item {
  width: 50%;
}

section#book-page .confirm-body .personal-info .second-row .second-item {
  width: 50%;
}

section#book-page .confirm-body .footer {
  display: flex;
}

section#book-page .confirm-body .footer {
  display: flex;
  justify-content: center;
  align-items: center;
}

section#book-page .confirm-body .footer a.explore-more {
  padding: 16px 24px;
  background-color: #e53f00;
  color: #ffffff; 
  letter-spacing: 0.32px;
  line-height: 20px;
  border-radius: 27px;
  cursor: pointer;
}

@media only screen and (min-width: 992px) {
  section#book-page .confirm-body {
    display: flex;
    flex-direction: column;
    min-width: 350px;
    margin: 0 500px 50px;
  }
}
/* confirmation page end */

/*Confirmation Footer start*/


.completion-certificate {
    display: flex;
    align-items: center;
    line-height: 1.35;
    margin-top: 40px;
    background-color: #f5bf64;
    border-radius: 8px;
    color: #272727;
}

.certificate-image {
    background-color: #ffaa1c;
    padding: 6px 10px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.certification {
    padding: 6px 16px;
}

.completion-certificate .certification-header {
    font-weight: 500;
    font-size: 18px;
    line-height: 1.35;
}

.completion-certificate .d-mobile {
    display: none;
}

.completion-certificate .certification-desc {
    margin-top: 15px;
    line-height: 1.5;
}

.joinWithLaptop {
    display: flex;
    margin-top: 20px;
    line-height: 1.35;
    background-color: #59c9f7;
    border-radius: 8px;
    padding: 16px;
    position: relative;
}

.deviceContent {
    font-size: 13px;
    padding: 10px;
}

.device-type {
    font-family: "Avenir";
    font-weight: 500;
    font-size: 18px;
}

.recommend {
    background-color: #4066FF;
    border-radius: 2px;
    color: #FFF;
    padding: 2px 4px 0;
    font-size: 12px;
    float: right;
    text-transform: uppercase;
    margin-top: 3px;
}

.deviceTextLaptop {
    margin-top: 15px;
    font-size: 16px;
    line-height: 1.35;
}

.amazonVoucher {
    background: #5B84B1;
    width: 100%;
    text-align: center;
    padding: 20px;
    margin-top: 40px;
    font-size: 14px;
    box-sizing: border-box;
    transform: translateY(100%);
    animation: slide-from-bottom 2s 4s linear;
    animation-fill-mode: forwards;
}

/* Confirmation Footer End*/