* { margin: 0px; padding: 0px; box-sizing: border-box; }

:root {
  --bg-color:'#F7B563';
}

a{text-decoration: none;}
:focus-visible { outline: none;}
ul{padding: 0;}

body { background: #fff; font-family: Mulish; }


.role_steps .step+.step {
  display: none;
}

.login_sect {
  display: flex;
  /* overflow: hidden; */
}

.login_sect .left_bx {
  width: 50%;
  background: #0B57F5;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login_sect .rgt_bx {
  width: 50%;
  background: #FFF;
  height: 100vh;
  box-shadow: 4px 0px 60px 0px rgba(0, 45, 137, 0.02);
  padding-right: 120px;
  display: flex;
  align-items: center;
}

/* .login_sect .left_bx:after {
  right: 0;
  position: absolute;
  content: '';
  width: 200px;
  height: 100%;
  background: url(../images/mark1.png);
}

.login_sect .left_bx:before {
  position: absolute;
  left: 0;
  width: 225px;
  height: 100%;
  background: url(../images/mark.png);
  content: '';
} */

.form_crd .row {
  margin: 0;
}

.login_frm_sect {width: 650px;
  fill: rgba(255, 255, 255, 0.70);
  backdrop-filter: blur(35px);
  background: rgba(255, 255, 255, 0.70);
  margin-left: -90px;
  padding: 36px 40px;
}

.card_lft_login h3 {
  color: #FFF;
  font-family: Inter;
  font-size: 69.833px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%;
  letter-spacing: 1.397px;
}
.mark_bx {
  position: absolute;
  left: 0;
  top: 0;
}

.mark_bx img {
  width: 150px;
}
.card_lft_login p {
  color: #FFF;
  font-size: 15.276px;
  font-weight: 400;
  padding-right: 20%;padding-left: 10%;
}

.card_lft_login {
  padding: 0 20%;
}

.mark_bx1 {
  position: absolute;
  right: 7px;
}

.mark_bx1 img {
  width: 130px;
}
.role_stepcount {
  text-align: left;
  list-style: none;
}
.role_stepcount li {
  display: inline-block;
  z-index: 1;
  text-align: center;
  position: relative;
}
.role_stepcount li a {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 20px;
  text-align: left;
  color: #010103;
  display: block;
  font-size: 16px;
}
.role_stepcount li.active a span::before {
  cursor: pointer;
  content: '';
  background: rgba(60, 92, 197, 1);
  width: 15px;
  display: block;
  border-radius: 100px;
  height: 15px;
  margin: 0 auto;
  background-size: contain;
  position: relative;
  top: 3px;
  left: 0px;
}
.role_stepcount li + li {
  margin-left: 90px;
}
.role_stepcount li + li::before {
  content: "";
  width: 84px;
  height: 4px;
  background: rgba(219, 215, 244, 1);
  position: absolute;
  left: -84px;
  top: 12px;
  z-index: -1;
}
.role_stepcount li a span {
  height: 30px;
  margin: auto;
  width: 30px;
  background: #fff;
  border: 4px solid rgba(60, 92, 197, 1);
  position: relative;
  display: block;
  border-radius: 100px;
}

.step_list {
  width: 400px;
  margin-bottom: 20px;
  padding-left: 15px;
}
.form_crd h3 {
  color: #11142D;
  font-size: 22px;
  font-family: Mulish;
  font-weight: 700;
  margin-bottom: 5px;
}

.form_crd p {
  color: #6C6B77;
  font-family: Mulish;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  margin-bottom: 5px;
}

.frm_grp label {
  color: #11142D;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 2px;
}

.frm_grp {position: relative;
  margin-bottom: 15px;
}
.frm_grp .form-control{border-radius: 8px;border: 1px solid #3C5CC5;color:  #9A9AB0;font-size: 14px;font-weight: 400;letter-spacing: 0.08px;background:  #FFF;height: 40px;}

.footer_login {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer_login .js-btn-next {
  border-radius: 8px;
  background: #3C5CC5;
  color: #fff;
  text-align: center;
  font-size: 16px;
  padding: 8px 30px;
  font-weight: 700;
}
.footer_login .js-btn-next:hover{background: #3C5CC5;}
.footer_login h3 {
  color: #9A9AB0;
  font-size: 16px;
  font-weight: 400;
  margin: 0;
}

.footer_login h3 a {
  color: #5541D7;
  font-size: 16px;
  font-weight: 700;
  margin: 0;
}
.list_empl {
  display: flex;
  align-items: center;
  gap: 15px;
}

.list_empl .checkbox_item {
  display: inline-block;
  margin-right: 20px;
  position: relative; /* Add relative positioning for the arrow icon */
}

.list_empl .checkbox_item .custom-control-label {
  border-radius: 8px;
  border: 2px solid #6C6B77;
  color: #6C6B77;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  padding: 7px 10px;
  width: 100px;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.3s ease-in-out;
}

.list_empl .checkbox_item .custom-control-input {
  display: none;
}

/* Style for the checked radio button and its label */
.list_empl .checkbox_item .custom-control-input:checked + .custom-control-label {
  background-color: #3C5CC5;
  border-color: #3C5CC5;
  color: #fff;
}

/* Style for the arrow icon */
.icon_arrow::after {
  position: absolute;
  content: '';
  right: 10px;
  top: 70%;
  transform: translateY(-50%); /* Vertically center the icon */
  background: url(../images/expand_more.png);
  width: 24px;
  height: 24px;
  cursor: pointer;
}

.intl-tel-input {
  display: block;
}

.flag-container {
  z-index: 99;
}

.flag-container:active, .flag-container:focus, .flag-container .selected-flag:active, .flag-container .selected-flag:focus {
  -webkit-box-shadow: none;
  box-shadow: none;
  outline: 0;
}

.iti-flag {
  width: 20px;
  height: 15px;
  -webkit-box-shadow: 0px 0px 1px 0px #888;
  box-shadow: 0px 0px 1px 0px #888;
  background-image: url("https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/11.0.9/img/flags.png");
  background-repeat: no-repeat;
  background-color: #DBDBDB;
  background-position: 20px 0;
}

.iagt {text-align: left;}.agrtrms input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
.agrtrms {
  display: block;
  position: relative;
  padding-left: 30px;
  cursor: pointer;
  line-height: 22px;
  -webkit-user-select: none;
  user-select: none;
  text-align: left;
  color: #9A9AB0;

/* Body/Body 2 Regular */
  font-size: 14px;
  font-weight: 400;
   /* 18.2px */
}


.agrchckmrk {
  position: absolute;
  top: 0px;
  left: 0;
  height: 20px;
  width: 20px;
  border: 2px solid rgba(60, 92, 197, 1);
  border-radius: 4px;
  background: #fff;
}
.agrchckmrk  a{color: #0068C4;}
.agrchckmrk:after {
  content: "";
  position: absolute;
  display: none;
}

.agrtrms input:checked ~ .agrchckmrk:after {
  display: block;
}
a {
width: 20px;
height: 20px;
background-repeat: no-repeat;
}
.opt_frm {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;margin-top: 10px;
}
.agrtrms input:checked ~ .agrchckmrk:after {
  left: 1px;
  top: -1px;
  font-size: 14px;
  font-family: FontAwesome;
  content: "\f00c";
  color: #3c5cc5;
}

.success_crd {
  text-align: center;
}

.success_crd h3 {
  color: #11142D;
  font-size: 31px;
  font-weight: 700;
}

.success_crd p {
  color: #92929D;
  font-size: 16px;
  font-weight: 400;
}

.button-row .btn {
  border-radius: 8px;
  background: #3C5CC5;
  color: #fff;
  text-align: center;
  font-size: 16px;
  padding: 8px 30px;
  font-weight: 700;
}

.button-row {
  margin-top: 30px;
}

.img_succ {
  margin-bottom: 30px;
}

.img_succ img {
  width: 220px;
}

.opt_ic img {
  width: 150px;
}

.opt_ic {
  text-align: center;
}

.Verific_bx h3 {
  color: #191818;
  font-size: 24px;
  font-weight: 500;
  line-height: 150%; /* 36px */
  text-align: center;
}

.Verific_bx p {
  color: #6C6B77;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%; /* 24px */
  text-align: center;
}

.Verific_bx p a {
  color: #3C5CC5;
  font-size: 16px;
  font-weight: 600;
  line-height: 150%; /* 24px */
}

.Verific_bx h4 {
  color: #6C6B77;
  text-align: center;
  font-size: 14px;
  font-weight: 500;

}
.frm_grp .icon {
  position: absolute;
  top: 31px;
  right: 20px;
}
.Verific_bx h4 a {
  color: #191818;
}
.opt_ic{margin-bottom: 30px;}
.otp_grp {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin: 20px 0;
}

.otp_grp .form-control {
  width: 45px;
  height: 45px;
  color: #000;
  line-height: 45px;
  font-size: 24px;
  font-weight: 500;

  text-align: center;
  padding: 4px;
}
.footlogin {
  text-align: center;
}

.footlogin h3 {
  color: #9A9AB0;
  font-size: 16px;
  font-weight: 400;
  margin: 0;
  margin-top: 30px;
}

.footlogin h3 a {color: #5541D7;
  font-size: 16px;
  font-weight: 700;
  margin: 0;}
.Verific_bx .btn_grp {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 30px;
}

.Verific_bx .btn_grp .btn {
  border-radius: 8px;
  border: 1px solid #AFAFAF;
  padding: 8px 40px;
  width: 190px;
}

.Verific_bx .btn_grp .btn:last-child {
  border-radius: 8px;
  background: #3C5CC5;
  color: #fff;
  border-color: #3C5CC5;
}

.Verific_bx .btn_grp .btn:hover {
  background: #3C5CC5;
  color: #fff;
  border-color: #3C5CC5;
}
@media (max-width: 990px) {
  .login_sect .left_bx{margin-bottom: 60px;}
  .step_list{width: auto;}
  .login_sect{display: block;}
  .mark_bx,.mark_bx1{display: none;}
  .login_sect .left_bx{padding: 30px 15px;}
  .login_sect{flex-wrap: wrap;}
  .card_lft_login h3{font-size: 32px;}
  .card_lft_login{padding: 0 5%;}
  .card_lft_login p{padding: 0;}
.login_sect .left_bx,.login_sect .rgt_bx{width: 100%;}
.login_sect .rgt_bx{padding-right: 0;}
.login_frm_sect{width: auto;margin: 0;}
}.login_sect .rgt_bx{}
.login_frm_sect{width: 100%;}
.role_stepcount li + li::before{
  width: 70px;
  left: -55px;
 }.footer_login{flex-wrap: wrap;}
 .button-row{margin: 20PX 0 0;}
.role_stepcount li + li {
  margin-left: 60px;
}



@media (max-width: 575px) {
.login_frm_sect{padding: 20px;}
.button-row{margin-bottom:20px;padding: 0;}
.list_empl .checkbox_item .custom-control-label{width: auto;}
}