:root {
  --orange-primary: #FF6B3D;
  --black: #000000;
  --light-black: #19110D;
  --text-dark-black: #18181B;
  --divider-color: rgba(0, 0, 0, 0.3);
  --button-bgcolor: #FF6B3D;
  --star-color: #FCD34D;
  --text-light-grey: #4B5768;
  --testimonials-text: #090914;
  --secborder-color: #E5E5E5;
}

.text-orange {
  color: var(--orange-primary) !important;
}

.text-orange:hover {
  color: var(--black) !important;
}

.form-control,
.btn,
.input-group-sm>.custom-select,
.input-group-sm>.form-control,
.input-group-sm>.input-group-append>.btn,
.input-group-sm>.input-group-append>.input-group-text,
.input-group-sm>.input-group-prepend>.btn,
.input-group-sm>.input-group-prepend>.input-group-text {
  font-size: 12px !important;
}

/* Login Signup Start */

.login-page-wrapper {
  background: var(--white) !important;
}

.back_signup-arrow {
  box-shadow: 0 -1px 4px var(--black) !important;
  height: 51px !important;
}

.login-hero-image {
  position: relative !important;
  text-align: center !important;
  color: var(--white) !important;
  height: calc(100vh - 51px) !important;
}

.login-hero-image img {
  height: 100% !important;
  width: 100% !important;
  object-fit: cover !important;
}

.login-hero-text {
  position: absolute !important;
  bottom: 20% !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  padding: 10px !important;
  border-radius: 5px !important;
  width: 80% !important;
}

.login-hero-text h4 {
  font-size: 2rem !important;
  text-align: left !important;
}

.login-form-wrapper {
  height: calc(100vh - 51px) !important;
  overflow: scroll !important;
  padding: 10px 0 !important;
}

.login-form-wrapper::-webkit-scrollbar {
  display: none !important;
}

.login-form-main-wrapper {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
}

.login-form-wrapper .login-container {
  text-align: center !important;
  width: 60% !important;
}

.create-account-content {
  font-size: 1rem !important;
  font-weight: 500 !important;
}

.login-form-wrapper .btn-social {
  width: 48% !important;
  margin: 5px 1% !important;
}

.login-form-wrapper .divider {
  display: flex !important;
  align-items: center !important;
  text-align: center !important;
  color: var(--text-light-grey) !important;
  font-weight: 600 !important;
}

.login-form-wrapper .divider::before,
.login-form-wrapper .divider::after {
  content: '' !important;
  flex: 1 !important;
  border-bottom: 1px solid var(--secborder-color) !important;
}

.login-form-wrapper .divider::before {
  margin-right: 0.625rem !important;
}

.login-form-wrapper .divider::after {
  margin-left: 0.625rem !important;
}

.welcome-text-content {
  font-weight: 600 !important;
  font-size: 1.5rem !important;
  color: var(--black) !important;
}

.welcome-text-content-des {
  font-weight: 500 !important;
  font-size: 0.9rem !important;
  color: var(--text-light-grey) !important;
}

.login-label {
  text-align: left !important;
  width: 100% !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  color: var(--black) !important;
}

.login-form-wrapper .form-group input,
.login-form-wrapper .form-group input:focus,
.login-form-wrapper .form-group input:active,
.login-form-wrapper .form-group input:hover,
.login-form-wrapper .form-group select,
.login-form-wrapper .form-group select:focus,
.login-form-wrapper .form-group select:active,
.login-form-wrapper .form-group select:hover {
  box-shadow: none !important;
  border: solid 1px var(--black) !important;
}

.login-form-wrapper .form-group input {
  background-color: none !important;
}

.login-form-wrapper .form-group {
  text-align: left !important;
  width: 100% !important;
}

.facebook-connect-btn {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 0 10px !important;
  border: solid 1.5px var(--text-light-grey) !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  color: var(--black) !important;
  border-radius: 7px !important;
  -webkit-border-radius: 7px !important;
  -moz-border-radius: 7px !important;
  -ms-border-radius: 7px !important;
  -o-border-radius: 7px !important;
}

.facebook-connect-btn:hover {
  border: solid 1.5px var(--orange-primary) !important;
  background: var(--orange-primary) !important;
  color: var(--white) !important;
}

.facebook-connect-btn:hover svg path {
  fill: var(--white) !important;
}

.btn-form-submit {
  background: var(--orange-primary) !important;
  color: var(--white) !important;
}

.btn-form-submit:hover {
  background: var(--text-dark-black) !important;
  color: var(--white) !important;
}

.have-account {
  font-size: 1.3rem !important;
  font-weight: 600 !important;
  color: var(--text-dark-black) !important;
}

.have-account a {
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: var(--orange-primary) !important;
}

@media screen and (max-width: 769px) {
  .login-form-wrapper {
    height: unset !important;
  }
}

@media screen and (max-width: 560px) {
  .login-container .welcome-text-content {
    font-size: 1.8rem !important;
  }

  .login-container .welcome-text-content-des,
  .login-container .login-label,
  .login-container .resend-otp.send-otp {
    font-size: 1rem !important;
  }

  .login-container .btn-form-submit {
    font-size: 1.2rem !important;
  }

  .login-container .have-account {
    font-size: 1.1rem !important;
  }

  .login-container .have-account a {
    font-size: 1rem !important;
  }

  .login-form-wrapper .form-group input, .login-form-wrapper .form-group input:focus, .login-form-wrapper .form-group input:active, .login-form-wrapper .form-group input:hover{
    font-size: 1rem !important;
  }

  .firstNameInputWrap{
    margin-bottom: 1rem !important;
  }

  .previous-step, .next-step{
    font-size: 1.2rem !important;
  }

}

.login-form-wrapper .form-group .phone-number-input,
.login-form-wrapper .form-group .phone-number-input:active,
.login-form-wrapper .form-group .phone-number-input:focus,
.login-form-wrapper .form-group .phone-number-input:hover {
  border-radius: 0 0.42rem 0.42rem 0 !important;
  border-left: none !important;
}

.select-phone-number,
.select-phone-number:hover,
.select-phone-number:active,
.select-phone-number:focus {
  border: solid 1px var(--black) !important;
  border-radius: 0.42rem 0 0 0.42rem !important;
  -webkit-border-radius: 0.42rem 0 0 0.42rem !important;
  -moz-border-radius: 0.42rem 0 0 0.42rem !important;
  -ms-border-radius: 0.42rem 0 0 0.42rem !important;
  -o-border-radius: 0.42rem 0 0 0.42rem !important;
}

.btn-orange {
  background: var(--button-bgcolor) !important;
  border: solid 1px var(--orange-primary) !important;
  color: var(--white) !important;
  font-size: 1rem !important;
  border-radius: 5px !important;
  padding: 5px 10px !important;
  -webkit-border-radius: 5px !important;
  -moz-border-radius: 5px !important;
  -ms-border-radius: 5px !important;
  -o-border-radius: 5px !important;
}

.btn-orange:hover {
  background: var(--white) !important;
  border: solid 1px var(--orange-primary) !important;
  color: var(--orange-primary) !important;
}

.f-login-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.f-login-wrapper .login-form-main-wrapper {
  width: 100%;
}

/* Login Signup End */

@media screen and (max-width: 768px) {
  .login-hero-mobile-none {
    display: none !important;
  }

  .login-form-wrapper .login-container {
    width: 85% !important;
  }

  .login-main-card-wrapper {
    width: unset !important;
  }

}

.input-icon.input-icon-right .form-control.loginPassworInputMain{
  padding-right: calc(1.5em + 1.3rem + 0px) !important;
}

.was-validated .form-control.loginPassworInputMain:valid, .form-control.loginPassworInputMain.is-valid{
  background-image: none !important;
}