:root {
  --bodyText: #151517;
  --bodyColor: #fdf4f4;
  --primary-color: #d90429;
  --primary-light: rgba(255, 58, 81, 1);
  --primary-color-hover: #b3052a;
  --grayText: #83868e;
  --dashedBorder: 1px dashed #dadbdd;
  --border-radius: 8px;
  --figtree: "Figtree", sans-serif;
}

body {
  font-family: var(--figtree);
}

.onboarding_wrap {
  height: 100%;
  position: relative;
  margin-top: 75px;
}

.onboarding_form_bg {
  background-color: #fffaf1;
  height: 100%;
  width: 50%;
  position: relative;
}

.onboarding_img_bg {
  background: url("../images/onboarding/onboarding-bg.svg") no-repeat;
  background-size: cover;
  height: 100%;
  width: 50%;
  position: relative;
}

.right_img_caption {
  color: var(--bodyText);
  font-size: 54px;
  font-weight: 600;
  line-height: 120.8%;
  letter-spacing: -0.25px;
  padding: 0 0 0 72px;
  max-width: 75%;
}

.unable_signup {
  position: absolute;
  top: 20px;
  right: 20px;
  color: var(--bodyText);
  font-size: 14px;
}

.form_text {
  color: var(--bodyText);
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 147%;
  text-transform: uppercase;
}

.form_main {
  background-color: #fff;
  border-radius: 12px;
  position: relative;
  padding: 36px;
  width: 572px;
  min-height: 550px;
  max-width: 100%;
}

.form_tab {
  padding: 16px 0 36px;
}

.tab_btn {
  background-color: #f3f3f4;
  color: var(--bodyText);
  font-size: 14px;
  font-weight: 700;
  line-height: 147%;
  padding: 10px 20px;
  cursor: pointer;
  width: 50%;
  display: flex;
  justify-content: center;
}

.tab_btn.active {
  color: #fff;
  background-color: var(--bodyText);
}

.tab_btn.active img {
  filter: brightness(0) invert(1);
}

.form_tab .tab_btn:nth-child(1) {
  border-radius: 8px 0 0 8px;
}

.form_tab .tab_btn:nth-child(2) {
  border-radius: 0 8px 8px 0;
}

.tab_btn {
  width: 100%;
  border-radius: 8px !important;
}

.tab_btn span {
  display: inline-block;
  padding-left: 12px;
}

.form_group_row {
  margin-bottom: 25px;
  position: relative;
}


.floating_input {
  border-bottom: 1px solid var(--grayText);
  color: var(--bodyText);
  caret-color: #52bd94;
  font-size: 14px;
  font-weight: 600;
  line-height: 150%;
  letter-spacing: 0.3px;
  width: 100%;
  height: 40px;
  padding-top: 8px;
  padding-right: 40px;
}

.floating_input:focus {
  border-bottom: 1px solid #52bd94;
}

.floating_input.floated {
  font-size: 12px;
}

.floated.input_error {
  caret-color: #d14343;
  border-bottom: 1px solid #d14343;
}

.floated.floated_no_focus {
  border-bottom: 1px solid var(--bodyText);
}

.floating_label {
  position: absolute;
  top: 14px;
  left: 0;
  color: var(--grayText);
  font-size: 14px;
  pointer-events: none;
  transition: 0.3s ease all;
  -moz-transition: 0.3s ease all;
  -webkit-transition: 0.3s ease all;
  -ms-transition: 0.3s ease all;
  -o-transition: 0.3s ease all;
}

.floated+.floating_label,
.floated+em+.floating_label {
  top: -8px;
  left: 0;
  font-size: 12px;
  font-weight: 400;
  color: var(--bodyText);
}

.forgot_password {
  color: var(--grayText);
  font-size: 14px;
  font-weight: 500;
  line-height: 147%;
  border-bottom: 2px dotted var(--grayText);
}

.forgot_password:hover {
  color: var(--bodyText);
  border-bottom: 2px dotted var(--bodyText);
}

.mb15 {
  margin-bottom: 15px;
}

.mb0 {
  margin-bottom: 0;
}

.primary_btn {
  background-color: var(--primary-color);
  font-family: var(--figtree);
  border-radius: var(--border-radius);
  text-align: center;
  width: 100%;
  font-weight: 700;
}

.primary_btn+.primary_link {
  margin-top: 10px;
  margin-bottom: 0;
}

.primary_btn.mb15 {
  margin-bottom: 0;
}

.primary_btn.mb15+.secondry_btn,
.primary_btn.mb15+.discard_btn {
  margin-top: 15px;
}

.secondry_btn {
  color: var(--primary-color);
  padding: 9px 24px;
  margin-top: 12px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  font-family: var(--figtree);
  line-height: 22px;
  width: 100%;
  background-color: transparent;
  border: 1px solid var(--primary-color);
  border-radius: var(--border-radius);
  transition: all 0.3s ease-in;
}

.error {
  font-size: 12px;
  padding-top: 5px;
  font-weight: 500;
  display: inline-block;
  color: var(--primary-color);
}

.eye_icon {
  position: absolute;
  width: 20px;
  height: 20px;
  right: 0;
  top: 14px;
}

.password_has_text .eye_icon {
  right: 30px;
}

.eye_icon img {
  filter: invert(87%) sepia(5%) saturate(40%) hue-rotate(180deg) brightness(93%) contrast(90%);
}

.clear_text {
  position: absolute;
  background: #cdcfd2;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  top: 15px;
  right: 0;
  cursor: pointer;
}

.clear_text:before {
  position: absolute;
  content: "";
  width: 10px;
  height: 2px;
  transform: rotate(-45deg);
  background-color: #fff;
  left: 3px;
  top: 7px;
}

.clear_text:after {
  position: absolute;
  content: "";
  width: 2px;
  height: 10px;
  transform: rotate(-45deg);
  background-color: #fff;
  left: 7px;
  top: 3px;
}

.or-seperator {
  text-align: center;
  margin: 45px 0 22px;
  height: 10px;
  border-top: 1px solid #cdcfd2;
}

.or-seperator i {
  padding: 0 10px;
  background: #fff;
  color: var(--grayText);
  position: relative;
  top: -11px;
  font-style: normal;
  z-index: 1;
}

.continue_google {
  border: 1px solid #dadbdd;
  border-radius: var(--border-radius);
  padding: 8px 16px;
  text-align: center;
}

.line_gap {
  margin-bottom: 36px;
}

.google_text {
  color: var(--bodyText);
  font-size: 18px;
  font-weight: 700;
  line-height: 150%;
  padding-left: 8px;
}

.policy_info {
  color: var(--bodyText);
  font-size: 14px;
  font-weight: 500;
  line-height: 147%;
}

.policy_link {
  font-weight: 700;
  border-bottom: 1px dotted var(--bodyText);
  display: inline-block;
}

.signup_info {
  color: var(--bodyText);
  font-size: 14px;
  font-weight: 500;
  line-height: 147%;
}

.primary_link_blk {
  color: var(--bodyText);
  font-weight: 700;
}

.primary_link_blk:hover {
  color: var(--primary-color);
  border-bottom: 2px dotted var(--primary-color);
}

.primary_link {
  color: var(--primary-color);
  font-weight: 700 !important;
  border-bottom: 2px dotted var(--primary-color);
  background-color: #fff;
  display: inline-block;
  margin-left: 5px;
}

.primary_btn.error_btn {
  background: #f5c0c9;
  cursor: not-allowed;
}

.tab_num {
  background-color: #e6e7e8;
  border: 1px solid #e6e7e8;
  border-radius: 50%;
  margin-right: 4px;
  color: var(--grayText);
  font-size: 12px;
  font-weight: 400;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.current .tab_num {
  color: var(--bodyText);
  border: 1px solid var(--bodyText);
}

.completed .tab_num {
  color: #fff;
  border: 1px solid var(--bodyText);
  background-color: var(--bodyText);
}

.tab_text {
  color: var(--grayText);
  font-size: 12px;
  font-weight: 600;
  line-height: 136%;
  border-bottom: 1px dotted transparent;
}

.completed .tab_text {
  color: var(--bodyText);
}

.current .tab_text {
  color: var(--bodyText);
}

.current .tab_text:hover {
  border-bottom: 1px dotted var(--bodyText);
}

.service_provider_tabs {
  padding: 14px 0 36px;
}

.service_tab_btn {
  position: relative;
  cursor: pointer;
  background: transparent;
}

.service_provider_tabs>.dp_flx .service_tab_btn:not(:nth-child(1)) {
  padding-left: 30px;
}

.service_provider_tabs>.dp_flx .service_tab_btn:not(:nth-child(1))::before {
  position: absolute;
  content: "";
  background: url("../images/onboarding/service-tab-arrow.svg") no-repeat;
  width: 14px;
  height: 10px;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
}

.profile_panel {
  position: relative;
}

.profile_box {
  position: absolute;
  top: 44px;
  left: 0;
  width: 100%;
  border-radius: 12px;
  border: 1px solid #dadbdd;
  padding: 16px 5px 16px 16px;
  background: #fff;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  display: none;
}

.profile_subtext {
  color: var(--bodyText);
  font-size: 14px;
  font-weight: 500;
  line-height: 147%;
  padding-right: 4px;
  display: inline-block;
}

.profile_list_wrap {
  overflow-y: scroll;
  max-height: 270px;
  margin-right: 5px;
  padding-right: 5px;
}

.profile_list_wrap::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 4px;
}

.profile_list_wrap::-webkit-scrollbar-thumb {
  background-color: #f4f4f4;
  border-radius: 12px;
}

.profile_img {
  border-radius: var(--border-radius);
  background: #f3f3f4;
  padding: 2px;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.profile_text {
  padding-left: 16px;
}

.profile_box .profile_list:not(:last-child) {
  border-bottom: 1px dashed #dadbdd;
  padding-bottom: 16px;
  margin-bottom: 16px;
}

.profile_head {
  color: #000;
  font-size: 18px;
  font-weight: 700;
  line-height: 160%;
  padding-bottom: 3px;
}

.profile_text .primary_link {
  margin: 0;
}

.profile_status {
  display: flex;
  padding: 2px 8px;
  justify-content: center;
  border-radius: 4px;
  align-items: center;
  margin-left: 12px;
  font-size: 12px;
  font-weight: 400;
}

.unclaimed {
  color: #d14343;
  border: 1px solid #d14343;
  background-color: #fdf4f4;
}

.claimed {
  color: #3366ff;
  border: 1px solid #3366ff;
  background-color: #f3f6ff;
}

.mnhgt {
  min-height: 320px;
}

/* Modal */
.hidden_dialog {
  display: none;
}

.dialog_overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.75);
  z-index: 9999;
  transition: all 0.5s;
}

.modal_container {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 99999;
  transform: translate(-50%, -50%);
  width: 460px;
  max-width: 100%;
}

.auth_modal {
  background-color: #fff;
  padding: 36px;
  border-radius: 12px;
}

.onboarding_form_bg .auth_modal {
  min-width: 572px;
}


.modal_logo {
  width: 40px;
  height: 40px;
  margin: 0 auto 24px;
  padding: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bg_box {
  background-color: #f3f6ff;
  height: 64px;
  width: 64px;
  border-radius: var(--border-radius);
}

.modal_logo img {
  max-width: 100%;
}

.dialog_head {
  color: var(--bodyText);
  font-size: 22px;
  font-weight: 400;
  line-height: 147%;
  margin-bottom: 12px;
  text-align: center;
}

.dialog_head.line_seperator {
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px dashed #dadbdd;
}

.dialog_para {
  color: var(--bodyText);
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  line-height: 147%;
  margin-bottom: 21px;
}

.confirm_check {
  border-radius: var(--border-radius);
  background: #f3f3f4;
  padding: 12px;
  margin-bottom: 10px;
}

.check__input {
  display: none;
}

.check_label {
  display: flex;
  align-items: center;
  color: var(--bodyText);
  font-size: 14px;
  font-weight: 500;
  line-height: 147%;
  position: relative;
  cursor: pointer;
}

em {
  font-style: normal;
}

.check_label span {
  width: 18px;
  height: 18px;
  position: relative;
  margin-right: 12px;
}

.check__input+.check_label span:before {
  content: "";
  appearance: none;
  -webkit-appearance: none;
  background-color: transparent;
  border: 2px solid var(--primary-color);
  border-radius: 2px;
  display: inline-block;
  position: relative;
  vertical-align: middle;
  cursor: pointer;
  margin-right: 12px;
  width: 15px;
  height: 15px;
}

.check__input:checked+.check_label span:after {
  content: "";
  display: block;
  position: absolute;
  top: 4px;
  left: 7px;
  width: 3px;
  height: 9px;
  border: solid var(--primary-color);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.fill_form_heading {
  color: var(--bodyText);
  font-size: 16px;
  font-weight: 600;
  line-height: 147%;
  text-transform: uppercase;
}

.formHead {
  color: var(--bodyText);
  font-size: 22px;
  font-weight: 600;
  line-height: 147%;
}

.bold {
  font-weight: 800;
}

.modal_container form {
  margin-top: 36px;
}

.modal_container.clain_profile_modal {
  width: 1144px;
}

.clain_profile_modal .auth_modal {
  padding: 0;
}

.left_form {
  padding: 24px;
  width: 50%;
}

.right_graphic {
  background-color: #49e6aa;
  border-radius: 0 12px 12px 0;
  padding: 24px;
  width: 50%;
}

.right_graphic .fdc {
  height: 100%;
}

.center {
  text-align: center;
}

.img_caption {
  color: var(--bodyText);
  font-size: 22px;
  font-weight: 600;
  line-height: 147%;
  margin-top: 24px;
  padding: 0 40px;
}

.close_auth_modal {
  position: absolute;
  right: 10px;
  top: 10px;
  cursor: pointer;
}

.discard_btn {
  font-size: 14px;
  font-weight: 700;
  color: var(--primary-color);
  background-color: transparent;
  margin-top: 15px;
  display: inline-block;
}

.form_sunhd {
  color: var(--bodyText);
  font-size: 14px;
  font-weight: 500;
  line-height: 147%;
  padding-top: 4px;
}

.reset {
  width: 572px;
}

.back_btn {
  color: var(--bodyText);
  font-size: 16px;
  font-weight: 600;
  line-height: 147%;
  text-transform: uppercase;
  background-color: transparent;
  margin-bottom: 36px;
  padding-left: 18px;
  position: relative;
}

.back_btn svg {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  transition: all 0.1s ease-in;
}

.back_btn:hover svg {
  left: -5px;
}

.discard path {
  fill: #d14343;
}

.discard span {
  color: #d14343;
}

/* otp */
.otp_label {
  color: var(--bodyText);
  font-size: 12px;
  font-weight: 400;
  line-height: 142%;
  padding-bottom: 8px;
  display: inline-block;
}

.otp_input_list {
  margin-bottom: 36px;
}

.otp_input {
  border-bottom: 1px solid #83868e;
  text-align: center;
  padding-bottom: 8px;
  width: 58px;
  font-size: 14px;
  font-weight: 700;
}

.otp_input:focus {
  border-bottom: 1px solid #52bd94;
  caret-color: #52bd94;
}

.otp_input.filled_otp {
  border-bottom: 1px solid var(--bodyText);
}

.rsend_code {
  color: #83868e;
  font-size: 14px;
  font-weight: 500;
  line-height: 147%;
  padding-top: 4px;
}

.primary_link {
  margin-left: 0;
}

/* otp */
/* Modal ends*/

/* Loader */
.form__loader {
  width: 60px;
  margin: 0 auto 30px;
  aspect-ratio: 2;
  --loaderBg: no-repeat radial-gradient(circle closest-side, #d90429 90%, #fff);
  background: var(--loaderBg) 0% 50%, var(--loaderBg) 50% 50%,
    var(--loaderBg) 100% 50%;
  background-size: calc(100% / 3) 50%;
  animation: l3 1s infinite linear;
}

@keyframes l3 {
  20% {
    background-position: 0% 0%, 50% 50%, 100% 50%;
  }

  40% {
    background-position: 0% 100%, 50% 0%, 100% 50%;
  }

  60% {
    background-position: 0% 50%, 50% 100%, 100% 0%;
  }

  80% {
    background-position: 0% 50%, 50% 50%, 100% 100%;
  }
}

/* Loader ends*/

.change {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  color: #3366ff;
  font-size: 14px;
  font-weight: 700;
  line-height: 142%;
  text-transform: uppercase;
  cursor: pointer;
}

.change:hover {
  border-bottom: 2px dotted #3366ff;
}

.disabled_field .clear_text {
  display: none !important;
}

.disabled_field .floating_label,
.disabled_field .floating_input {
  color: var(--grayText);
}

.disabled_field .floated.floated_no_focus {
  border-bottom: 1px solid var(--grayText);
}

.searched_company_logo {
  max-width: 100%;
}

input:-webkit-autofill {
  box-shadow: 0 0 0 1000px white inset;
  -webkit-text-fill-color: #000;
}

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

input[type="number"] {
  -moz-appearance: textfield;
}

@media screen and (max-width: 1899px) {
  .form_main {
    padding: 25px;
    width: 520px;
  }
}

@media screen and (max-width: 1680px) {
  .form_main {
    width: 480px;
  }

  .eye_icon {
    top: 7px;
  }

  .clear_text {
    top: 8px;
  }

  .floating_input {
    height: 38px;
  }

  .right_img_caption {
    font-size: 34px;
  }

  .unable_signup {
    top: 15px;
    right: 15px;
  }

  .form_tab {
    padding: 10px 0 22px;
  }

  .form_group_row {
    margin-bottom: 18px;
  }

  .or-seperator {
    margin: 22px 0 15px;
  }

  .primary_btn,
  .secondry_btn {
    padding: 8px 24px;
  }

  .floated+.floating_label {
    font-size: 12px;
  }

  .floating_label {
    top: 8px;
    font-size: 12px;
  }

  .line_gap {
    margin-bottom: 18px;
  }

  .floated+.floating_label,
  .floated+em+.floating_label {
    top: -15%;
  }

  .mb0 {
    margin-bottom: 0;
  }

  .change {
    font-size: 12px;
  }
}

@media screen and (max-width: 1440px) {
  .mb0 {
    margin-bottom: 0;
  }

  .service_provider_tabs {
    padding: 14px 0 24px;
  }

  .error {
    font-size: 10px;
    padding-top: 3px;
  }

  .form_main {
    padding: 20px 25px;
  }


  .form_group_row {
    margin-bottom: 15px;
  }

  .floating_input {
    height: 36px;
  }

  .right_img_caption {
    font-size: 32px;
  }

  .service_tab_detail .primary_btn {
    margin-top: 0;
  }

  .line_gap {
    margin-bottom: 12px;
  }

  .policy_info,
  .signup_info,
  .forgot_password,
  .form_text,
  .unable_signup {
    font-size: 12px;
  }

  .unable_signup {
    top: 6px;
    right: 10px;
  }

  .form_tab {
    padding: 10px 0 22px;
  }

  .or-seperator {
    margin: 22px 0 15px;
  }

  .primary_btn,
  .secondry_btn {
    padding: 8px 24px;
  }

  .profile_subtext,
  .primary_link {
    font-size: 12px;
  }

  .img_caption {
    font-size: 18px;
  }

  .google_text {
    font-size: 16px;
  }
}

@media screen and (max-width: 767px) {

  .onboarding_wrap,
  .onboarding_form_bg {
    flex-direction: column;
  }

  .right_img_caption {
    font-size: 18px;
    line-height: 130%;
    padding: 50px 15px 20px;
  }

  .onboarding_img_bg {
    display: none;
  }

  .onboarding_wrap {
    margin-top: 59px;
  }

  .onboarding_form_bg {
    width: 100%;
    height: auto;
  }

  .tab_btn {
    font-size: 12px;
    padding: 10px 12px;
  }

  .form_main {
    width: 100%;
    margin: 0 15px;
    padding: 20px 15px;
  }

  .profile_box {
    padding: 10px 5px 10px 10px;
  }

  .profile_img {
    padding: 15px;
  }

  .profile_head {
    font-size: 12px;
    line-height: 130%;
    padding-bottom: 0;
  }

  .profile_box .profile_list:not(:last-child) {
    padding-bottom: 12px;
    margin-bottom: 12px;
  }

  .profile_status {
    padding: 1px 5px;
    margin-left: 10px;
    font-size: 10px;
  }

  .profile_text .dp_flx {
    padding-bottom: 6px;
  }

  .password_has_text .eye_icon {
    right: 22px;
  }

  .modal_container {
    width: calc(100% - 30px) !important;
  }

  .otp_input_list {
    gap: 10px;
  }

  .auth_modal,
  .left_form {
    padding: 20px;
  }

  .fill_form_heading,
  .back_btn {
    font-size: 14px;
  }

  .back_btn {
    margin-bottom: 24px;
  }

  .otp_input {
    width: 36px;
  }

  .right_graphic {
    display: none;
  }

  .left_form {
    width: 100%;
  }

  .dialog_head {
    font-size: 18px;
  }

  .modal_logo {
    margin: 0 auto 20px;
  }
}