/* 
@media (min-width: 576px) {
    .col-sm {
        flex-basis: 0;
        flex-grow: 1;
        max-width: 100%;
    }
    .col-sm-4 {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
    .col-sm-3 {
        flex: 0 0 25%;
        max-width: 25%;
    }
}
@media (min-width: 768px) {
    .col-md-6 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
}
@media (min-width: 992px) {
    .col-lg-3 {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }
    .col-lg-4 {
      -ms-flex: 0 0 33.33%;
      flex: 0 0 33.33%;
      max-width: 33.33%;
  }
} */

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

.no-scroll {
  overflow: hidden;
  height: 93vh;
  padding-right: 18px;
} 
.booking-form{
    font-family: "Urbanist", sans-serif !important;
    width: 100%;
    background-color: #4B6762;
    border-radius: 15px;
  }
  .booking-form  .form-row {
        display: flex;
        flex-wrap: wrap;
        margin-right: -10px;
        margin-left: -10px;
  }
  .booking-form  .form-row  [class*="col-"] {
        padding-right: 10px;
        padding-left: 10px;
    }
  
  .booking-form  .form-row .col-6 {
        position: relative;
        width: 100%;
        flex: 0 0 50%;
        max-width: 50%;
    }
  
  .booking-form  .form-row  .col-12 {
        flex: 0 0 100%;
        max-width: 100%;
  
    }
  .booking-form  .form-row  label {
        display: inline-block;
        margin-bottom: 5px;
        font-size: 15px;
        color: #fff;
        font-weight: 500;
    }
      
  .booking-form  .form-row  label.error{
      font-size: 14px;
      color: #FF4D4D;
      margin-top: -15px !important;
      font-weight: 500;
    }
     .mandatory{
      color: #FF4D4D;
     } 
     .booking-form  .form-row  span.error{
      font-size: 14px;
      color: #FF4D4D;
      font-weight: 500;
      margin-bottom: 10px;
    }
  .booking-form  .form-row #keyverification-error{
      margin: 15px;
    }
  
  .booking-form  .form-row .form-control {
      display: block;
      margin-bottom: 15px;
      border-radius: 5px;
      border: 1px solid #D9D9D9;
      box-sizing: border-box;
      background-color: #fff;
      width: 100%;
      color: #7A7A7A;
      font-size: 16px;
      padding: 10px 15px;
      font-weight: 400;
      
  }
  .booking-form  .form-row select.form-control{
    appearance: none;
    background-image: url(assets/images/dropdown-arrow.png);
    background-repeat: no-repeat;
    background-position: center right 15px;
    background-size: 15px;
  }
  
  select option:hover {
    box-shadow: 0 0 10px 100px green inset !important;
    color:#272727;
  }
  select option:checked{
    box-shadow: 0 0 10px 100px green inset !important;
    }
  .booking-form  .form-row .form-control:focus{
      border: 1px solid #D9D9D9;
      outline: none;
      color: #7A7A7A !important;
  }
  .booking-form  .form-row input[type="time"]{
    background-image: url(../images/time.svg) !important;
    background-size: 20px !important;
    background-repeat: no-repeat !important;
    background-position: center right 15px !important;
  
  }
  .booking-form  .form-row select.select-time{
    appearance: none;
    background-image: url(../images/time.svg) !important;
    background-size: 20px !important;
    background-repeat: no-repeat !important;
    background-position: center right 15px !important;
    cursor: pointer !important;
  
  }
  .booking-form  .form-row .date-picker{
    background-image: url(../images/date.svg) !important;
    background-repeat: no-repeat !important;
    background-size: 20px !important;
    background-position: center right 15px !important;
    cursor: pointer !important;
  
  }
  .booking-form  .form-row input[type="date"]{
    display: inline-block;
    background-image: url(../images/date.svg) !important;
    background-repeat: no-repeat !important;
    background-size: 20px !important;
    background-position: center right 15px !important;
  
  }
  .booking-form  .form-email {
    padding-right: 150px !important;
  }
  
  .otp-input-fields {
    width: auto;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    margin: 10px 0 ;
  }
  .otp-input-fields p{
    margin-bottom: 0;
      margin-left: 15px;
  }
  .otp-box p{
      color: #fff;
      font-size: 13px;
      font-weight: 400;
  }
    .otp-input-fields  input {
      height: 40px;
      padding: 0 !important; 
      width: 40px !important;
      background-color: transparent;
      border-radius: 4px;
      border: 1px solid #fff !important;
      text-align: center;
      outline: none;
      font-size: 16px;
    }
    .otp-input-fields  input::-webkit-outer-spin-button,
    .otp-input-fields  input::-webkit-inner-spin-button {
      -webkit-appearance: none !important;
      margin: 0 !important;
      }
  
      /* Firefox */
      .otp-input-fields  input[type="number"] {
        -moz-appearance: textfield !important;
        color: #fff;
      }
      .otp-input-fields  input:focus {
        border-width: 2px;
        border-color: darken(#2f8f1f, 5%);
        font-size: 20px;
      }
      .booking-form .btn{
        position: absolute;
        right: 15px !important;
        top: 32px !important;
        padding: 10px 20px !important;
        min-width: 130px;
        border-radius: 5px;
        height: 40px;
        margin: 0;
        min-height: 40px;
        color: #fff !important;
        cursor: pointer;
        font-size: 15px !important;
  
      }
      .booking-form .btn-verify[disabled]{
        background-color: #B7B7B7 !important;
        cursor: not-allowed;
    }
    .booking-form .btn-verify[disabled]:hover{
      background-color: #B7B7B7 !important;
    }
    
    .booking-form .btn-verify{
  
    background-color: #0C362F !important;
    }
    .booking-form .btn-verify:hover{
      background-color: #000 !important;
    }
    .booking-form  .btn-resend{
      background: #00AD0E !important;
      border: none;
      color: white;
      cursor: pointer;
      text-align: center;
      display: flex;
      font-family: "Urbanist", sans-serif !important;
      align-items: center;
      justify-content: center;
   }
   .booking-form  .btn-resend.resend_otp{
     top: 28px !important;
   }
   .booking-form  .btn-resend .check{
     margin-top: -2px;
   }
   .booking-form .tooltip-wrap{
    position: absolute;
    right: 0;
    top: 0px;
   }
      .booking-form .relative{
          position: relative;
      }
      .booking-form .check {
          display: inline-block;
      transform: rotate(45deg);
      height: 16px;
      width: 8px;
      border-bottom: 2px solid #fff;
      border-right: 2px solid #fff;
      margin-right: 12px;
  }
  .booking-form .verified-email .form-control{
      background-color: #D9D9D9;
      pointer-events: none;
  }
  .booking-form .verified-email  .btn{
      color: #00AD0E !important;
      right: 0px !important;
      top: 29px !important;
      cursor: default;
  
  }
  .booking-form .verified-email .check{
      border-bottom: 2px solid #00AD0E;
      border-right: 2px solid #00AD0E;
  }
  
  
  .booking-form  .tooltip {
    
      position: relative !important;
      display: flex;
      justify-content: center;
      align-items: center;
      
      cursor: pointer;
      opacity: 1;
  }
  
  
  .booking-form  .tooltipText {
      background-color: #fff;
      position: absolute;
      bottom: 20%;
      right: 10px;
      padding: 10px 15px;
      border-radius: 5px;
      font-size: 12px;
      opacity: 1;
      transform: translateY(-10px);
      white-space: nowrap;
      color: #000;
      transition: all .5s;
  }
  
  
  .booking-form  .tooltipText::after {
      content: '';
      border-width: 5px;
      border-style: solid;
      border-color: #fff transparent transparent transparent;
      position: absolute;
      top: 100%;
      left: 40%;
      margin-left: 5%;
  }
  
  .iti{
    height: 46px;
  }
  .iti  .form-control{
    margin-bottom: 20px !important;
  }
  .booking-form .iti label.error{
    margin-top: 10px !important;
  }
  /* HTML: <div class="loader"></div> */
  .btn-loader-wrap{
    padding: 0 30px;
  }
  .btn-loader {
    width: 10px;
    aspect-ratio: 1;
    border-radius: 50%;
    animation: l5 1s infinite linear alternate;
  }
  @keyframes l5 {
      0%  {box-shadow: 20px 0 #fff, -20px 0 #fff2;background: #fff }
      33% {box-shadow: 20px 0 #fff, -20px 0 #fff2;background: #fff2}
      66% {box-shadow: 20px 0 #fff2,-20px 0 #fff; background: #fff2}
      100%{box-shadow: 20px 0 #fff2,-20px 0 #fff; background: #fff }
  }
  .date{
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url(assets/images/date.svg);
    background-repeat: no-repeat;
    background-size: contain;
  }
  input[type="time"]::-webkit-inner-spin-button,
  input[type="time"]::-webkit-calendar-picker-indicator {
     opacity: 0;
     cursor: pointer;
  }
  input[type="date"]::-webkit-inner-spin-button,
  input[type="date"]::-webkit-calendar-picker-indicator {
     opacity: 0;
     cursor: pointer;
  }
      
  .booking-form  .form-row  textarea{
      height: 140px;
      resize: none;
  
  }
    
  
  .booking-form button {
        margin: 20px 0 10px;
        padding: 15px 30px 15px 30px !important;
        background: #00AD0E !important;
        border: none;
        min-width: 130px;
        min-height: 56px;
        color: white;
        font-size: 17px;
        border-radius: 20px;
        cursor: pointer;
    }
    .booking-form button:hover{
      background:#006608 !important;
    }
    .booking-form button:disabled{
      background: #B7B7B7 !important;
      cursor: not-allowed;
    }
  
  
  .calender-icon {
    display: flex;
    width: 21px;
    height: 21px;
    background-image: url("assets/images/calender-icon.png");
    background-repeat: no-repeat;
    background-position: 0;
    background-size: contain;
    right: 11px;
    top: 2px;
    position: relative;
  }
  
  /* new css */
  
  .select-box .dropdown ul {
    padding-left: 0;
    margin: 0;
  }
  
  .select-box .dropdown {
    display: block;
    position: absolute;
    border: 1px solid #d9d9d9;
    left: 0;
    right: 0;
    top: 86px;
    background-color: #fff;
    padding: 0;
    width: 100%;
    margin-bottom: 0;
    z-index: 9;
  }
  
  .select-box .dropdown ul li {
    list-style: none;
  }
  
  .select-box .dropdown ul li:hover a {
    background-color: #efefef;
    color: #006608;
  }
  
  .select-box .dropdown ul li a {
    padding: 15px;
    width: 100%;
    display: block;
    text-decoration: none;
    font-size: 15px;
    color: #000;
  }
  
  .select-box{
    position: relative;
  }
  .booking-form .col-xl-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  @media (max-width: 767px) and (min-width: 320px) {
    .booking-form .col-xl-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }   
  }
  
  
  @media (max-width: 767px) and (min-width: 320px) {
    
      
  .booking-form  .form-row .col-6 {
    position: relative;
    width: 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
  }
  
  /* @media (min-width: 768px) {
      .col-md-4 {
          -ms-flex: 0 0 33.33%;
          flex: 0 0 33.33%;
          max-width: 33.33%;
      }
  } */
  
  
  .datepicker-days table tbody>tr:nth-child(odd)>td, .datepicker-days table tbody>tr:nth-child(odd)>th {
    background-color: #fff !important;
    text-align: center;
  }
  
  .datepicker-days table tbody>tr:nth-child(odd)>td.day.active, .datepicker-days table tbody>tr:nth-child(odd)>th {
    background-color: #00ad0e !important;
  }
  
  .datepicker .day:hover, .datepicker .month:hover, .datepicker .year:hover, .datepicker .datepicker-switch:hover, .datepicker .next:hover, .datepicker .prev:hover {
    background-color: #00ad0e !important;
    color: #ffffff !important;
    cursor: pointer;
  }
  
  .day.disabled, .month.disabled, .year.disabled, .start-date-active.disabled {
    cursor: not-allowed !important;
    box-shadow: none;
    opacity: .65;
    color: #000 !important;
  }
  
  .day.disabled:hover, .month.disabled:hover, .year.disabled:hover, .start-date-active.disabled:hover {
    cursor: not-allowed !important;
    background-color: #fff !important;
    box-shadow: none;
    opacity: .65;
    color: #000 !important;
  }
  
  .resv_input_outer i {
      position: absolute;
      top: 9px;
      right: 0;
      font-size: 16px;
      z-index: 3;
    
  }
  .datepicker-months .month, .datepicker-years .year {
    background-color: #fff !important;
    color: #000 !important;
    text-align: center;
  }
  
  .datepicker .today {
    color: #000 !important;
  }
  
  .datepicker-decades span.decade, .datepicker-centuries span.century {
    margin: 7px;
    display: inline-block;
  }
  .datepicker table tbody tr:hover>td, .datepicker table tbody tr:hover>th{
    background-color: #fff !important;
  }
  .datepicker  table tbody tr th, .datepicker  table tbody tr td{
    background-color: #fff !important;
    
  }
  
  .datepicker td, .datepicker th{
    padding: 7px !important;
  }
  .day.active, .start-date-active {
    color: #fff !important;
    background-color: #00ad0e !important;
  }
  .datepicker.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 232px;
    padding: 5px 0;
    margin: 4px 0 0;
    font-size: 14px;
    text-align: left;
    list-style: none;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #ccc;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
    box-shadow: 0 6px 12px rgba(0,0,0,.175);
  }
  .overlay {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    transition: opacity 500ms;
    visibility: hidden;
    opacity: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}
.close-modal {
    color: #fff;
}

.booking-form .form-row input[type="email"] {
  padding-right: 145px !important;
}
@media screen and (max-width:1199px) {
  .booking-form .btn {
    top:30px !important;
  }
}
@media screen and (max-width:575px) {
  .booking-form .form-row input[type="email"] {
    padding-right: 105px !important;
  }
  .booking-form .btn {
    min-width: 90px;
  }
  .booking-form-modal {
    padding: 25px 15px;
  }
}