@font-face {
    font-family:Noto;
    src:url("../fonts/NotoSansArabic.ttf");
}
@font-face {
    font-family:Lato;
    font-style:normal;
    font-weight:normal;
    src:url("../fonts/Lato-Regular.ttf");
}
@font-face {
    font-family:Lato;
    font-weight:bold;
    font-style:normal;
    src:url("../fonts/Lato-Bold.ttf");
}
*,
*::after,
*::before {
    direction:rtl;
    box-sizing: border-box;
    font-family:Noto, Lato;
}
.pageWrapper .pageContent .header-first .headerLogo,
.pageWrapper .pageContent .header-second .headerLogo {
    display: block;
    text-align: right;
    height: auto;
    margin-top:1pc;
}
.pageWrapper .pageContent .header-first .headerLogo img,
.pageWrapper .pageContent .header-second .headerLogo img {
    width: 40%;
}
.pageWrapper .pageContent .formSection .form-horizontal {
    width: 90%;
    margin: auto;
}
.pageWrapper .pageContent .formSection .form-horizontal .input-group .form-control::placeholder {
    text-align:right;
}
.pageWrapper .pageContent .formSection .form-horizontal .input-group-phone .countryCode {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 9999999999;
    direction: ltr;
}
.pageWrapper .pageContent .formSection .form-horizontal .input-group-phone .countryCode .country_code_selector {
    padding-left: 1pc;
    border-radius: 0;
}
.customLink {
    text-decoration: none;
}
.pageWrapper .pageContent .formSection .form-horizontal .btn-block {
    width: 100%;
    margin: 1pc 0;
}
.pageWrapper .pageContent .header-first .headerTitle, .pageWrapper .pageContent .header-first .headerLogo, .pageWrapper .pageContent .header-second .headerTitle, .pageWrapper .pageContent .header-second .headerLogo {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1pc;
}
.pageWrapper .pageContent .formSection .form-horizontal .input-group-phone .form-control {
    padding-left: 5pc;
}
hr.separator {
    width:90%;
    margin:1pc auto;
}
.footer {
    direction:ltr;
    margin-bottom:1pc;
}
.pageWrapper .pageContent .formSection .form-horizontal .input-group input.form-control.is-invalid {
    border-color: #DC3545 !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e") !important;
}
.pageWrapper .pageContent .formSection .form-horizontal .input-group input.form-control.is-valid {
    border-color: #198754 !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e") !important;
}
.pageWrapper .pageContent .header-second {
    position:relative;
}
.pageWrapper .pageContent .header-second .headerText {
    top:2pc;
    left:2pc;
    font-size:20px;
    color:#515BD3;
    position:absolute;
}
.clearfix {
    clear: both;
    display: block;
    width: 100%;
    height: 1px;
}
.pageWrapper .pageContent .header-second .headerTitle.text-right .h1 {
    font-size: 26px;
}
.pageWrapper .pageContent .header-second .headerTitle.text-right .h2 {
    font-size: 18px;
}
.text-bold {
    font-weight: bolder;
}
.text-normal {
    font-weight: normal;
}
.smsForm {
  --placeholder-color: hsl(240, 54%, 87%);
  --bg-color: hsl(240, 54%, 97%);
  --focus-color: hsla(240, 54%, 61%, 0.6);
  --shadow-color: hsla(240, 54%, 61%, 0.2);
  --text-color: hsl(0, 0%, 20%);
  --text-color-inversed: hsl(0, 0%, 95%);
  --success-color: hsl(145, 63%, 42%);
  --success-color-desaturated: hsl(145, 0%, 42%);
  --failure-color: hsl(0, 79%, 63%);
  --border-radius: 6px;
  --z-index-xs: 1;
  --z-index-sm: 10;
  --z-index-md: 100;
  --easing: cubic-bezier(0.25, 0.01, 0.25, 1);
  --transition-duration-step-1: 450ms;
  --transition-duration-step-2: 300ms;
  --transition-duration-step-3: 300ms;
  --transition-delay-step-2: calc(var(--transition-duration-step-1));
  --transition-delay-step-3: calc(
    var(--transition-duration-step-1) + var(--transition-duration-step-2)
  );
  --transition-step-1: var(--transition-duration-step-1) var(--easing);
  --transition-step-2: var(--transition-duration-step-2) var(--easing)
    var(--transition-delay-step-2);
  --transition-step-3: var(--transition-duration-step-3) var(--easing)
    var(--transition-delay-step-3);
}
.smsFormSection .smsForm .main * {
    direction:ltr;
}
.smsFormSection .smsForm .main {
  display: grid;
  justify-content: center;
}
.smsFormSection .smsForm .label {
  font-size: 14px;
  line-height: 15px;
  text-align: center;
  letter-spacing: 0.01em;
  color: var(--text-color);
}
.smsFormSection .smsForm .fieldset {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  justify-content: center;
  column-gap: 12px;
  border-radius: 6px;
  overflow: hidden;
  will-change: transform;
  padding: 6px;
  margin: -6px;
}
.smsFormSection .smsForm .fieldset::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  transform: translateX(-100%);
}
.smsFormSection .smsForm .box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  width: 42px;
  border-radius: var(--border-radius);
  box-shadow: 0 0 6px 1px var(--shadow-color);
  overflow: hidden;
  will-change: transform;
}
.smsFormSection .smsForm .box:focus-within {
  box-shadow: 0 0 6px 1px var(--shadow-color), 0 0 0 2px var(--focus-color);
}
.smsFormSection .smsForm .box::before,
.smsFormSection .smsForm .box::after {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  border-radius: var(--border-radius);
  overflow: hidden;
}
.smsFormSection .smsForm .box::before {
  background: var(--bg-color);
  z-index: var(--z-index-xs);
  transition: background-color var(--transition-step-1);
}
.smsFormSection .smsForm .box::after {
  transform: translateY(100%);
  background-color: var(--success-color-desaturated);
  opacity: 0;
  z-index: var(--z-index-sm);
  transition: transform var(--transition-step-1),
    opacity var(--transition-step-1), background-color var(--transition-step-1);
}
.smsFormSection .smsForm .field {
  position: relative;
  border: 0;
  outline: 0;
  font-size: 25.21px;
  line-height: 42px;
  color: var(--text-color);
  background-color: transparent;
  text-align: center;
  z-index: var(--z-index-md);
}
.smsFormSection .smsForm .field::placeholder {
  color: var(--placeholder-color);
}
.smsFormSection .smsForm .animate-success.fieldset {
  padding: 0;
  margin: 0;
}
.smsFormSection .smsForm .animate-success.fieldset::before {
  transform: translateX(0);
  background-color: var(--success-color);
  transition: transform var(--transition-step-2);
}
.smsFormSection .smsForm .animate-success > .box {
  box-shadow: none;
  transition: transform var(--transition-step-3);
}
.smsFormSection .smsForm .animate-success > .box:nth-child(1) {
  transform: translateX(24px);
}
.smsFormSection .smsForm .animate-success > .box:nth-child(2) {
  transform: translateX(12px);
}
.smsFormSection .smsForm .animate-success > .box:nth-child(4) {
  transform: translateX(-12px);
}
.smsFormSection .smsForm .animate-success > .box:nth-child(5) {
  transform: translateX(-24px);
}
.smsFormSection .smsForm .animate-success > .box::before {
  background-color: transparent;
}
.smsFormSection .smsForm .animate-success > .box::after {
  opacity: 1;
  transform: translateY(0);
  background-color: var(--success-color);
}
.smsFormSection .smsForm .animate-success > .box > .field, 
.smsFormSection .smsForm .animate-success > .box > .field::placeholder {
  color: var(--text-color-inversed);
  transition: color var(--transition-step-1);
}
.smsFormSection .smsForm .animate-failure.fieldset {
  animation-name: shaking;
  animation-duration: var(--transition-duration-step-2);
  animation-timing-function: var(--easing);
  animation-delay: var(--transition-delay-step-2);
}
.smsFormSection .smsForm .animate-failure > .box::before {
  background-color: transparent;
}
.smsFormSection .smsForm .animate-failure > .box::after {
  background-color: var(--failure-color);
  transform: translateY(0);
  opacity: 1;
}
.smsFormSection .smsForm .animate-failure > .box > .field,
.smsFormSection .smsForm .animate-failure > .box > .field::placeholder {
  color: var(--text-color-inversed);
  transition: color var(--transition-step-1);
}
@keyframes shaking {
  0%,
  100% {
    transform: translateX(0);
  }
  25%,
  75% {
    transform: translateX(10px);
  }
  50% {
    transform: translateX(-10px);
  }
}
html, body, .pageWrapper {
    width: 100vw;
    height: 100vh;
    overflow-x: hidden;
}
.smsPreview, .signUpPreview {
    display:none;
    position: absolute;
    width: 100%;
    top: 0;
    left: -100%;
    transition: 0.5s all ease;
}
.signUpPreview {display:block;position: relative;left: 0;}
.formHeader {
    width: 90%;
    margin: auto;
    font-size: 20px;
}
input.hidden {
    display: none;
}
.nidSelector {
    width: 100%;
    padding: 2pc;
    height: 250px;
    display: block;
    margin-top: 1pc;
    border-radius: 10px;
    border: 1px solid #BBB;
}
.nidSelector .nidImage {
    width: 100%;
    max-height: 184px;
}
.finalSectionImage {
    width: 50%;
    margin: auto;
    display: block;
    margin-top: 1pc;
    margin-bottom: 1pc;
}
.finalSection .btn {
    width: 90%;
    margin: auto;
    display: block;
    margin-top: 10px;
}
.finalSection .btn-primary-outlined {
    color: #6F66F7;
    border: 2px solid;
}
#showHidePassword {
    top: 9px;
    left: 1pc;
    color: #777;
    z-index: 99;
    cursor:pointer;
    font-size: 20px;
    position: absolute;
}
.hint-group p.small {
    margin-bottom: 0;
}
p.finalSectionDetails {
    margin-bottom: 0;
}
.btn-primary {
    background-color: #6F66F7;
}