*,
::after,
::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}

:root {
  --mainGrey: #f3f4f4;
}
body {
  font-family: "Lato", sans-serif;
  line-height: 1.5;
  margin: 0 auto;
  overflow-x: hidden;
  background-color: var(--mainGrey);
}

#age{
    width: 110px;
    text-align: center;
    padding: 10px;
    border: 1px solid #5a5858;
    margin-top: 40px;
    font-size: 1rem;
    border-radius: 22px;
    height: 34px;
}

#age:focus{
    outline: none;
    border: 1px solid #FF9F1C
}

.ageSelector{
    display: flex;
    align-items: center;
    justify-content: center;
}

input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

a,
a:visited,
a:hover {
  text-decoration: none;
}

ul {
  list-style: none;
}

p {
  color: #000;
}

input {
  width: 100%;
}

.img-fluid {
  max-width: 100%;
  height: auto;
}
/* Global css */
.container {
  width: 100%;
  max-width: 1366px;
  margin: auto;
}

main {
  max-width: 550px;
  margin: auto;
}

/* === REUSABLE STYLES  */
.btn {
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 310px;
  height: 35px;
  font-size: 0.93rem;
  color: #f3f4f4;
  background-color: #ee6c4d;
  border: none;
  outline: none;
  border-radius: 10px;
  transition: all 0.2s ease-in-out;
  line-height: 1;
}

.btn:hover {
  background-color: #e65a37;
}

.border-btn {
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 284px;
  height: 34px;
  font-size: 0.95rem;
  color: #000000;
  background-color: #f3f4f4;
  outline: none;
  border-radius: 22px;
  transition: all 0.2s ease-in-out;
  line-height: 1;
  margin: 0 auto 1rem;
  border: 1px solid #5a5858;
  font-weight: 500;
  cursor: pointer;
  position: relative;
}

.border-btn:last-child {
  margin: 0 auto 0;
}

.border-btn:hover {
  border: 1px solid #ee6c4d;
}

.btn-inner-wrap .btn-icon {
  color: #000;
  position: absolute;
  left: 5%;
  display: none;
}
.show {
  border: 1px solid #ee6c4d;
}
.show .btn-icon {
  display: block;
}
/* PRICE PLANS */
a.terms-link {
  white-space: nowrap;
}
.price-plan-wrap {
  border: 1px solid #ee6c4d;
  max-width: 290px;
  height: 60px;
  margin: 3.5rem auto;
  padding: 0 0.8rem;
  border-radius: 22px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  cursor: pointer;
}

.save-wrap {
  position: absolute;
  top: -20px;
  left: 0;
  right: 0;
  margin: auto;
  width: 80px;
  padding: 5px 0;
  background-color: #ee6c4d;
  font-size: 0.81rem;
  color: #fff;
  border-radius: 10px;
  font-weight: 500;
}

.price-text-inner {
  display: flex;
  justify-content: space-between;

  align-items: center;
}

.price-plan-wrap .month {
  font-size: 1.05rem;
  font-weight: 500;
  margin-left: 0.6rem;
}
.price-plan-wrap .month small{
    display: block;
}

.price-plan-wrap .price span {
  font-size: 0.69rem;
  font-weight: 600;
  text-decoration: line-through;
  line-height: 1;
}

.price-plan-wrap .price p {
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1;
}

.price-plan-wrap .price-month {
  font-size: 0.87rem !important;
  text-decoration: none !important;
}

/* date picker input */
.date-input {
  visibility: hidden;
}

.btn-wrap {
  width: 100%;
  max-width: 300px;
  margin: auto;

  /*position: fixed;*/
  /*bottom: 10px;*/

}

/* ================================================== */

/* Mobile Logo */
.logo-wrap {
  width: 108px;
  height: 40px;
  /* margin: 15px 20px; */
  margin: 10px auto;
  margin-top: 5px;
}

.logo-wrap object{
    /*height: 40px !Important;;*/
}

.main-section {
  width: 100%;
  padding: 1rem;
  padding-top: 0px;
}

.main-content-container {
  width: 100%;
  min-height: 445px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  text-align: center;
  position: relative;
}

/* ======= PLAN PAGE=====  */

.plan-title {
  font-size: 1.5rem;
  color: #000;
}

.plan-desc {
  max-width: 245px;
  font-size: 1.1rem;
  font-weight: 300;
  margin: 1rem auto 1.5rem;
}

.plan-btn {
  margin: 2rem auto;
}

.policy-text {
  width: 100%;
  max-width: 354px;
  margin: 2rem auto 1rem;
}

.policy-text p {
  font-size: 0.9rem;
  text-align: center;
  font-weight: lighter;
  color: #494848;
}

/* ======= ABOUT PAGE =====  */

.about-image-wrap {
  width: 100%;
  max-width: 177px;
  margin: auto;
}

.about-title {
  font-size: 1.5rem;
  color: #000;
  margin: 0.5rem auto 1rem;
}

.about-desc {
  max-width: 312px;
  font-size: 1rem;
  font-weight: 300;
  margin: 1rem auto 1.5rem;
}

.about-btn {
  margin: 1rem auto 2rem;
}

/* ======= HELLO PAGE =====  */
.hello-image-wrap {
  width: 100%;
  max-width: 280px;
  margin: auto;
}

.hello-title {
  text-align: center;
  font-size: 1.5rem;
  font-weight: 600;
  color: #000;
  margin: 1.5rem auto 1rem;
}

.hello-desc {
  color: #000;
  font-size: 1rem;
  font-weight: 300;
  line-height: 22px;
  max-width: 284px;
  margin: auto;
}

.hello-bt-text {
  color: #000;
  font-size: 1rem;
  font-weight: 300;
  line-height: 22px;
  margin: 1rem auto;
}

.hello-btn {
  margin: 1rem auto 2rem;
}

/* ======= NAME PAGE =====  */
.name-title {
  color: #000;
  font-size: 1.02rem;
  font-weight: 300;
  line-height: 22px;
  text-align: center;
  margin: 1rem auto 1rem;
}

.name-input-wrap {
  width: 100%;
  margin: auto;
}

.name-input-wrap input {
  display: block;
  width: 100%;
  max-width: 312px;
  height: 30px;
  border-radius: 10px;
  border: 1px solid #5a5858;
  background-color: transparent;
  margin: auto;
  color: #505050;
  padding: 0 1rem;
  font-size: 0.87rem;
  font-weight: normal;
}

.required-text {
  color: #de5d43;
  font-size: 0.65rem;
  text-align: left;
  margin: 0.3rem 2rem;
  display: none;
  text-align: center;
}
.text-show {
  display: block;
}

.name-input-wrap input:focus {
  outline: none;
  border: 1px solid #FF9F1C;
}

.name-image-wrap {
  width: 100%;
  max-width: 292px;
  margin: 3.5rem auto;
}

.name-btn {
  margin: 0 auto 2rem;
}

/* ======= GENDER PAGE =====  */

.input-btn-wrapper {
  display: flex;
  border: 1px solid #5a5858;
  margin-bottom: 15px;
  border-radius: 10px;
  max-width: 284px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  justify-content: center;
  height: 34px;
  align-items: center;
  position: relative;
}

.input-btn-wrapper span.btn-icon {
  position: absolute;
  left: 15px;
}

.radio-input {
  opacity: 0;
  width: 0;
}

.gender-title {
  color: #5a5858;
  font-size: 0.98rem;
  font-weight: 400;
  line-height: 22px;
  text-align: center;
  margin: 1rem auto 1.5rem;
  text-align: center;
}

.gender-btn-wrap {
  display: flex;
  flex-direction: column;
  margin: auto;
}

.gender-image-wrap {
  width: 100%;
  max-width: 270px;
  margin: 3rem auto;
}

.gender-required {
  text-align: center;
  font-size: 0.67rem;
  margin: 0.5rem auto;
  font-weight: 400;
  color: #ee6c4d;
  display: none;
}
.gender-required.show-text {
  display: block;
}

.age-required{
    text-align: center;
    font-size: 0.67rem;
    margin: 0.5rem auto;
    font-weight: 400;
    color: #ee6c4d;
    display: none;
}

.age-required.show-text {
    display: block;
}

.input-error{
    outline: 1px solid #760e0e;
}

/* ======= IAM PAGE =====  */
.iam-title {
  display: block;
  color: #5a5858;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  text-align: center;
  margin: 2rem auto;
  text-align: center;
  max-width: 288px;
}

.iam-small {
  color: #b2b2b2;
  font-size: 0.95rem;
  text-align: center;
  margin: 1rem auto;
}

.iam-image-wrap {
  width: 100%;
  max-width: 292px;
  margin: 3rem auto;
}

.iam-btn {
  margin: 0 auto 2rem;
}

.input-btn-wrapper span.do-btn-icon {
  position: absolute;
  left: 15px;
}

.do-option .do-btn-icon {
  display: none;
}

.do-option.do-icon-show .do-btn-icon {
  display: inline;
}
.do-option.do-icon-show {
    border: 1px solid #FF9F1C;
}




/* ======= FOCUS PAGE =====  */
.checkbox-wrapper {
  display: flex;
  width: max-content;
  border-radius: 10px;
  justify-content: center;
  cursor: pointer;
  border: 1px solid #5a5858;
  padding-left: 10px;
  padding-right: 10px;
    position: relative;
}

.checkbox-wrapper.red-border{
    padding-left: 20px;
    padding-right: 0px;
}

.checkbox-wrapper .do-btn-icon {
    display: none;
}

.checkbox-wrapper.red-border .do-btn-icon{
    position: absolute;
    left: 13px;
    top: 5px;
    display: inline;
    margin: 0px !important;
    padding: 0px !important;
}

.checkbox-wrapper label {
  width: 100%;
  height: 100%;
  padding: 5px 15px;
  border-radius: 22px;
  cursor: pointer;
}

.checkbox-wrapper input {
  opacity: 0;
  width: 0;
}

.focus-title {
  display: block;
  color: #000;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 22px;
  text-align: center;
}

.focus-desc {
  color: #000;
  font-size: 1rem;
  font-weight: 300;
  line-height: 22px;
  text-align: center;
  max-width: 288px;
  margin: 1.1rem auto;
}

.focus-btn-wrap {
  display: flex;
  flex-wrap: wrap;
  /* grid-template-columns: repeat(2, 1fr); */
  gap: 1rem;
  justify-content: center;
  align-items: center;
  margin: 5rem auto;
  max-width: 345px;
}

.focus-btn-wrap .focus-btn {
  margin: auto;
  max-width: 150px;
  font-size: 0.95rem;
  font-weight: 500;
  padding: 0 0.5rem;
}

.focus-btn.red-border {
    border: 1px solid #FF9F1C;
}

.focus-btn-wrap .focus-btn:hover {
  border: 1px solid #ee6c4d;
}

.focus-btn-bottom {
  margin: 0 auto 2rem;
}

.checkbox-wrapper.red-border {
    border: 1px solid #FF9F1C;
}

/* ======= INTRO PAGE =====  */
.intro-title {
  text-align: center;
  font-size: 1.5rem;
  font-weight: 500;
  color: #000;
}

.intro-desc {
  color: #000;
  font-size: 1rem;
  font-weight: 300;
  line-height: 22px;
  max-width: 288px;
  margin: 1.5rem auto;
}

.intro-image-wrap {
  width: 100%;
  max-width: 275px;
  margin: 4.5rem auto;
}

.intro-btn {
  margin: 0 auto 2rem;
}

/* ======= EMAIL PAGE =====  */
.email-title {
  text-align: center;
  font-size: 1.5rem;
  font-weight: bold;
  color: #000;
}

.email-desc {
  color: #000;
  font-size: 1rem;
  font-weight: 300;
  line-height: 22px;
  margin: 1rem auto 0;
}

.email-desc-bottom {
  color: #000;
  font-size: 1rem;
  font-weight: 300;
  line-height: 22px;
  margin: auto;
  max-width: 288px;
}

.email-input-wrap {
  width: 100%;
  margin: 3rem auto 0.4rem;
  position: relative;
}

.email-input-wrap input {
  display: block;
  width: 100%;
  max-width: 312px;
  height: 30px;
  border-radius: 10px;
  border: 1px solid #5a5858;
  background-color: transparent;
  margin: auto;
  color: #505050;
  padding: 0 1rem;
  font-size: 0.87rem;
  font-weight: normal;
}

.email-input-required {
  display: block;
  position: relative;
  font-size: 0.67rem;
  color: #ee6c4d;
  text-align: center;
  font-weight: 400;
  display: none;
}
.email-input-required.show-email-text {
  display: block;
}

.email-input-wrap input:focus {
  outline: none;
  border: 1px solid #FF9F1C
}

.email-image-wrap {
  width: 100%;
  max-width: 235px;
  margin: 3rem auto 2.5rem;
  /* margin: 4.5rem auto; */
}
/* .email-continue {
  width: 310px;
} */

/* ======= PAYMENT DONE PAGE =====  */
.paymentdone-title {
  text-align: center;
  font-size: 1.5rem;
  font-weight: bold;
  color: #000;
  line-height: 31px;
}

.paymentdone-desc {
  color: #000;
  font-size: 1rem;
  font-weight: 500;
  line-height: 22px;
  margin: 1rem auto;
}

.paymentdone-image-wrap {
  width: 100%;
  max-width: 175px;
  margin: 2.5rem auto;
}

.paymentdone-btn-wrap {
  width: 100%;
  max-width: 310px;
}

/* ======= PAYMENT ERROR PAGE =====  */
.paymenterror-image-wrap {
  width: 100%;
  max-width: 308px;
  margin: 2rem auto 4rem;
}

.paymenterror-title {
  text-align: center;
  font-size: 1.5rem;
  font-weight: bold;
  color: #000;
  line-height: 31px;
}

.paymenterror-desc {
  color: #000;
  font-size: 1rem;
  font-weight: 400;
  line-height: 22px;
  margin: 1rem auto 4rem;
  max-width: 333px;
}

.return-btn {
  margin: 0 auto 2rem;
  font-weight: 600;
}

/* ======= NOT FOUND PAGE =====  */
.notfound-image-wrap {
  width: 100%;
  max-width: 308px;
  margin: 0 auto 0;
}

.notfound-title {
  text-align: center;
  font-size: 1.4rem;
  font-weight: bold;
  color: #000;
  line-height: 31px;
}

.notfound-desc {
  color: #000;
  font-size: 1.12rem;
  font-weight: 400;
  line-height: 22px;
  margin: 1rem auto 4rem;
  max-width: 325px;
}

/* ======= LEAVING PAGE =====  */
.leaving-image-wrap {
  width: 100%;
  max-width: 282px;
  margin: 0 auto 4rem;
}

.leaving-title {
  text-align: center;
  font-size: 1.49rem;
  font-weight: bold;
  color: #000;
  line-height: 31px;
}

.leaving-desc {
  color: #000;
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 22px;
  margin: 1rem auto;
  max-width: 290px;
}

/* ======= PAYMENT FEATUREPAGE =====  */
.payment-plan-title {
  /* text-align: left; */
  text-align: center;
  font-size: 1.5rem;
  font-weight: bold;
  color: #000;
  line-height: 31px;
  padding: 0 1.5rem;
}
.color-text {
  color: #ee6c4d;
}

.price-feature-list {
    margin: 1rem auto 1rem;
    width: 350px;
    margin-bottom: 10px;
    text-align: left;
    padding-left: 30px;
    padding-right: 30px;
}

.feature-item {
  display: flex;
  gap: 0.6rem;
  margin-bottom: 0.4rem;
}
.feature-item span{
    font-size: 10px;
}
.feature-item p{
  font-size: 12px;
  font-weight: lighter;
}

.paymentView .feature-item p{
    font-size: 16px;
    margin-top: -5px;
}
.paymentView .feature-item .price-icon i{
    font-size: 16px;
}

.feature-price-container .month p {
  font-size: 0.9rem;
  font-weight: 600;
}

.feature-price-container .price p {
  font-size: 1.1rem;
  font-weight: 600;
}

.feature-price-container .price-month {
  font-weight: 500 !important;
}
.feature-price-container .price-plan-wrap {
  border: 1px solid #c9c9c9;
  margin: 0.5rem auto;
}
.feature-price-container .price-plan-normal {
  border: 1px solid #c9c9c9;
}

.feature-price-container .price-plan-wrap.selected {
  border: 2px solid #ee6c4d;
}
.price-plan-btm-text {
  font-size: 0.7rem;
  font-weight: 600;
  margin: 0 auto 3.5rem;
    margin-bottom: 10px;
}

.agree-wrap {
  max-width: 265px;
  margin: auto;
  display: flex;
  gap: 0.5rem;
}
.agree-wrap a {
  color: #000;
  text-decoration: underline;
}
/*.agree-wrap input[type="checkbox"] {*/
/*  width: 14px;*/
/*}*/

.consent-chekbox{
    width: 30px !important;
    height: 30px !important;
}

.agree-text {
  text-align: left;
  font-size: 0.7rem;
  line-height: 1.2;
}
.pay-btn {
  margin: 0.5rem auto 2rem;
  font-weight: 600;
}
.small-btn-text {
  font-size: 0.71rem;
  font-weight: 500;
}

.price-required-text {
  font-size: 0.7rem;
  color: #ee6c4d;
  margin-bottom: 0.5rem;
  display: none;
}

.price-show {
  display: block;
}

#agree {
  accent-color: #ee6c4d;
  cursor: pointer;
}

.price-icon i {
  font-size: 12px;
}

.price-plan-wrap .radio-input {
  opacity: 0;
  right: 0;
  position: absolute;
  background-color: #494848;
}

.price-plan-wrap label {
  padding: 1rem 0.5rem;
}

/* ======= LOADING PAGE =====  */
.loading-title {
  text-align: center;
  font-size: 1.5rem;
  font-weight: bold;
  color: #000;
  line-height: 31px;
}

.loading-desc {
  color: #000;
  font-size: 1rem;
  font-weight: 400;
  line-height: 22px;
  margin: 1rem auto 4rem;
  max-width: 285px;
}
.loading-btn {
  margin: 0 auto;
  display: none;
}
/* ======= WAKEUP PAGE =====  */
.wakeup-title {
  /* text-align: left; */
  text-align: center;
  font-size: 1.5rem;
  font-weight: 400;
  color: #000;
  line-height: 30px;
  max-width: 300px;
}

.wakeup-desc {
  /* text-align: left; */
  text-align: center;
  padding: 0.3rem 0 0 0;
  color: #5a5858;
  font-size: 0.67rem;
}
.wakeup-btn {
  margin: 0.5rem auto 2rem;
  font-weight: 600;
}
.wakeup-btn-text {
  color: #929292;
  font-size: 0.66rem;
  font-weight: 600;
  text-align: center;
}
.date-picker-container {
  margin: 5rem auto 4rem;
  position: relative;
}

/* ======= AGE PAGE =====  */
.age-desc {
  text-align: center;
  padding: 0.3rem 0 0;
  color: #5a5858;
  font-size: 0.93rem;
}
.age-btn {
  margin: 0.5rem auto 2rem;
  font-weight: 600;
}

/* ======= MEAL PAGE =====  */
.meal-title {
  /* text-align: left; */
  text-align: center;
  padding: 0;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 30px;
  max-width: 300px;
}
.meal-desc {
  /* text-align: left; */
  text-align: center;
  padding: 0.3rem 0 0 0;
  color: #5a5858;
  font-size: 0.67rem;
}

/* =========================================== */
/* DATEPICKER  */
/* ========================================== */

/* ------------------------------------------ */
.rolldate-container {
  position: absolute !important;
  top: 50% !important;
  left: 0 !important;
  right: 0 !important;
  font-size: 1.43rem !important;
}

section.rolldate-content {
  background-color: #f3f4f4;
}

section.rolldate-content {
  max-width: 150px;
  margin-left: auto;
  margin-right: auto;
}

.rolldate-container .rolldate-dim {
  background: linear-gradient(0deg, #f3f4f4b6, #f3f4f4a6) !important;
}
.rolldate-container .rolldate-mask {
  position: relative !important;
  z-index: 999 !important;
  width: auto !important;
  height: auto !important;
}
.rolldate-container .rolldate-panel {
  position: relative !important;
  bottom: 0;
  left: 0;
  width: auto !important;
  height: auto !important;
  z-index: 1000;
  background: transparent !important;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  -webkit-transform: translate3d(0, 273px, 0);
  transform: translate3d(0, 273px, 0);
}
.rolldate-container header {
  position: relative;
  line-height: 60px;
  font-size: 18px;
  border-bottom: 1px solid #e0e0e0;
  display: none !important;
}

/* time picker styles*/

.select-wrap {
  position: relative;
  height: 100%;
  text-align: center;
  overflow: hidden;
  font-size: 20px;
  /* color: #ddd; */
  color: #000;
}
.select-wrap:before,
.select-wrap:after {
  position: absolute;
  z-index: 1;
  display: block;
  content: "";
  width: 100%;
  height: 50%;
}
.select-wrap:before {
  top: 0;
  /* background-image: linear-gradient(to bottom, rgba(1, 1, 1, 0.5), rgba(1, 1, 1, 0)); */
}
.select-wrap:after {
  bottom: 0;
  /* background-image: linear-gradient(to top, rgba(1, 1, 1, 0.5), rgba(1, 1, 1, 0)); */
}
.select-wrap .select-options {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 0;
  transform-style: preserve-3d;
  margin: 0 auto;
  display: block;
  transform: translateZ(-150px) rotateX(0deg);
  -webkit-font-smoothing: subpixel-antialiased;
  color: #919191;
}
.select-wrap .select-options .select-option {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  -webkit-font-smoothing: subpixel-antialiased;
}
.select-wrap .select-options .select-option:nth-child(1) {
  transform: rotateX(0deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(2) {
  transform: rotateX(-18deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(3) {
  transform: rotateX(-36deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(4) {
  transform: rotateX(-54deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(5) {
  transform: rotateX(-72deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(6) {
  transform: rotateX(-90deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(7) {
  transform: rotateX(-108deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(8) {
  transform: rotateX(-126deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(9) {
  transform: rotateX(-144deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(10) {
  transform: rotateX(-162deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(11) {
  transform: rotateX(-180deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(12) {
  transform: rotateX(-198deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(13) {
  transform: rotateX(-216deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(14) {
  transform: rotateX(-234deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(15) {
  transform: rotateX(-252deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(16) {
  transform: rotateX(-270deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(17) {
  transform: rotateX(-288deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(18) {
  transform: rotateX(-306deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(19) {
  transform: rotateX(-324deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(20) {
  transform: rotateX(-342deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(21) {
  transform: rotateX(-360deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(22) {
  transform: rotateX(-378deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(23) {
  transform: rotateX(-396deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(24) {
  transform: rotateX(-414deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(25) {
  transform: rotateX(-432deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(26) {
  transform: rotateX(-450deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(27) {
  transform: rotateX(-468deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(28) {
  transform: rotateX(-486deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(29) {
  transform: rotateX(-504deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(30) {
  transform: rotateX(-522deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(31) {
  transform: rotateX(-540deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(32) {
  transform: rotateX(-558deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(33) {
  transform: rotateX(-576deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(34) {
  transform: rotateX(-594deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(35) {
  transform: rotateX(-612deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(36) {
  transform: rotateX(-630deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(37) {
  transform: rotateX(-648deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(38) {
  transform: rotateX(-666deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(39) {
  transform: rotateX(-684deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(40) {
  transform: rotateX(-702deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(41) {
  transform: rotateX(-720deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(42) {
  transform: rotateX(-738deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(43) {
  transform: rotateX(-756deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(44) {
  transform: rotateX(-774deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(45) {
  transform: rotateX(-792deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(46) {
  transform: rotateX(-810deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(47) {
  transform: rotateX(-828deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(48) {
  transform: rotateX(-846deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(49) {
  transform: rotateX(-864deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(50) {
  transform: rotateX(-882deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(51) {
  transform: rotateX(-900deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(52) {
  transform: rotateX(-918deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(53) {
  transform: rotateX(-936deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(54) {
  transform: rotateX(-954deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(55) {
  transform: rotateX(-972deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(56) {
  transform: rotateX(-990deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(57) {
  transform: rotateX(-1008deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(58) {
  transform: rotateX(-1026deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(59) {
  transform: rotateX(-1044deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(60) {
  transform: rotateX(-1062deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(61) {
  transform: rotateX(-1080deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(62) {
  transform: rotateX(-1098deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(63) {
  transform: rotateX(-1116deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(64) {
  transform: rotateX(-1134deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(65) {
  transform: rotateX(-1152deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(66) {
  transform: rotateX(-1170deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(67) {
  transform: rotateX(-1188deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(68) {
  transform: rotateX(-1206deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(69) {
  transform: rotateX(-1224deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(70) {
  transform: rotateX(-1242deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(71) {
  transform: rotateX(-1260deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(72) {
  transform: rotateX(-1278deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(73) {
  transform: rotateX(-1296deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(74) {
  transform: rotateX(-1314deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(75) {
  transform: rotateX(-1332deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(76) {
  transform: rotateX(-1350deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(77) {
  transform: rotateX(-1368deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(78) {
  transform: rotateX(-1386deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(79) {
  transform: rotateX(-1404deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(80) {
  transform: rotateX(-1422deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(81) {
  transform: rotateX(-1440deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(82) {
  transform: rotateX(-1458deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(83) {
  transform: rotateX(-1476deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(84) {
  transform: rotateX(-1494deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(85) {
  transform: rotateX(-1512deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(86) {
  transform: rotateX(-1530deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(87) {
  transform: rotateX(-1548deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(88) {
  transform: rotateX(-1566deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(89) {
  transform: rotateX(-1584deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(90) {
  transform: rotateX(-1602deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(91) {
  transform: rotateX(-1620deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(92) {
  transform: rotateX(-1638deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(93) {
  transform: rotateX(-1656deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(94) {
  transform: rotateX(-1674deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(95) {
  transform: rotateX(-1692deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(96) {
  transform: rotateX(-1710deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(97) {
  transform: rotateX(-1728deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(98) {
  transform: rotateX(-1746deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(99) {
  transform: rotateX(-1764deg) translateZ(150px);
}
.select-wrap .select-options .select-option:nth-child(100) {
  transform: rotateX(-1782deg) translateZ(150px);
}

.highlight {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  width: 100%;
  /* background-color: #000; */
  background-color: #f3f4f4;
  border-top: 0.5px solid #cccccc;
  border-bottom: 0.5px solid #cccccc;
  font-size: 24px;
  overflow: hidden;
}

.highlight-list {
  position: absolute;
  width: 100%;
}

/* date */
.date-selector {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  perspective: 2000px;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  width: 600px;
  height: 300px;
}
.date-selector > div {
  flex: 1;
}
.date-selector .select-wrap {
  font-size: 18px;
}
.date-selector .highlight {
  font-size: 20px;
}

/* hour css try */
/* date */
.hour-selector {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  perspective: 2000px;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  width: 75%;
  max-width: 600px;
  /* height: 300px; */
  height: 170px;
  margin-top: 50px;
}

.hour-selector > div {
  flex: 1;
}

.hour-selector .select-wrap {
  font-size: 18px;
}

.hour-selector .highlight {
  font-size: 20px;
  height: 40px !important;
  line-height: 35.5px !important;
}

.input-btn-wrapper .btn-icon {
  display: none;
}

.input-btn-wrapper .btn-icon.show-check {
  display: block;
}

.input-btn-wrapper {
  cursor: pointer;
}

.input-btn-wrapper label {
  width: 100%;
  cursor: pointer;
  border-radius: 22px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* time picker styles ends here */

/* ===== JQUERY AGE PICKER STYLES ====== */
.picker-wrapper {
  background: #f3f4f4 !important;
}

.picker-up {
  /* background: transparent !important; */
  background: #f3f4f4d3;
  border: none !important;
}
.picker-down {
  /* background: transparent !important; */
  border: none !important;
  background: #f3f4f4b6;
}
.clone-scroller {
  box-shadow: none !important;
}

.clone-scroller {
  overflow-y: scroll;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* Internet Explorer 10+ */
}
.clone-scroller::-webkit-scrollbar {
  /* WebKit */
  width: 0;
  height: 0;
}

/*tab-portrait*/
@media (min-width: 768px) {
  .logo-wrap {
    margin-top: 50px;
  }
}

.feature-item i{
    color: #999999;
}

.feature-item.selected i{
    color: #76C893;
}

/* Progress bar */
.progress-bar-wrapper{
    width: 100%;
    height: 10px;
    background-color: #f3f4f4;
    border-radius: 10px;
    margin-top: 30px;
    margin-bottom: 30px;
    text-align: center;
}
.progress-bar-wrapper .progress{
    width: 262px;
    height: 9px;
    background-color: #D9D9D9;
    border-radius: 10px;
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
}

.progress-bar-wrapper .progress .progress-bar{
    background-color: #2C4B61;
    height: 9px;
    border-radius: 10px;
}
.progress-bar-wrapper small{
    color: #010101;
    font-size: 10px;
    text-transform: uppercase;
}

.show-border, .do-icon-show, .checkbox-wrapper.red-border{
    border: 2px solid darkgreen !important;
}


.show-border .btn-icon, .do-icon-show .do-btn-icon, .checkbox-wrapper.red-border .do-btn-icon{
    color: darkgreen;
}

.btn .bg{
    fill: #FFFFFF;
}