@charset "UTF-8";
.portlet-content {
  padding: 0px !important;
}
.portlet-content .portlet-header {
  display: none;
}

.revamp-account-container {
  padding: 104px 0px 120px 0px;
}
.revamp-account-container .control-label {
  display: none;
}
.revamp-account-container .rbpw-container {
  display: flex;
  flex-direction: column;
  background: #F6F7F880;
  padding: 48px;
  gap: 40px;
  border-radius: 8px;
}
.revamp-account-container .rbpw-container .form-content {
  width: 50%;
}
.revamp-account-container .rbpw-container .form-content .form-group .required::before,
.revamp-account-container .rbpw-container .form-content .form-group .nationalId_custom::before,
.revamp-account-container .rbpw-container .form-content .form-group .mobile_custom::before {
  display: none;
}
.revamp-account-container .rbpw-container .form-content .input-fields {
  display: flex;
  gap: 16px;
}
.revamp-account-container .rbpw-container .form-content .input-fields > div {
  width: calc(50% - 8px);
}
.revamp-account-container .rbpw-container .form-content .terms-and-privacy-box {
  margin: 24px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.revamp-account-container .rbpw-container .form-content .bulletPoint-TNC-policyNotice .fieldset-legend {
  margin-bottom: 0;
}
.revamp-account-container .rbpw-container .form-content .bulletPoint-TNC-policyNotice .fieldset-legend .legend {
  display: block;
  margin-top: 24px;
  margin-bottom: 16px;
}
.revamp-account-container .rbpw-container .form-content .bulletPoint-TNC-policyNotice .read-n-agree-privacy-notice {
  display: flex;
  align-items: center;
  color: #5A6572;
  gap: 8px;
}
.revamp-account-container .rbpw-container .form-content .bulletPoint-TNC-policyNotice .read-n-agree-privacy-notice .form-group {
  width: auto;
}
.revamp-account-container .rbpw-container .form-content .bulletPoint-TNC-policyNotice .read-n-agree-privacy-notice .form-group input {
  width: 18px;
  height: 18px;
  padding: 3px;
  border-radius: 4px;
}
.revamp-account-container .rbpw-container .form-content .custom-radio-btns {
  display: flex;
  gap: 8px;
  align-items: start;
}
.revamp-account-container .rbpw-container .form-content .custom-radio-btns > div {
  min-width: 104px;
}
.revamp-account-container .rbpw-container .form-content .custom-radio-btns > div label {
  font-family: "rb-regular";
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: -0.18px;
  color: #5A6572;
}
.revamp-account-container .rbpw-container .form-content .custom-radio-btns .radio {
  margin-bottom: 0px;
}
.revamp-account-container .rbpw-container .form-content .custom-radio-btns .radio label {
  padding-left: 24px;
}
.revamp-account-container .rbpw-container .form-content .tooltiptext {
  padding-left: 20px;
  color: #697786;
  position: relative;
  margin-top: 16px;
}
.revamp-account-container .rbpw-container .form-content .tooltiptext p {
  margin-bottom: 0px;
}
.revamp-account-container .rbpw-container .form-content .tooltiptext ul, .revamp-account-container .rbpw-container .form-content .tooltiptext ol {
  padding-left: 20px;
}
.revamp-account-container .rbpw-container .form-content .tooltiptext .last-tooltip {
  margin-top: 8px;
}
.revamp-account-container .rbpw-container .form-content .tooltiptext::before {
  content: url("../images/info-icon.png");
  display: inline-block;
  width: 13px;
  height: 13px;
  position: absolute;
  top: 0;
  left: 0;
}
.revamp-account-container .rbpw-container .form-content .account-open-form-buttons {
  margin-top: 40px;
  display: flex;
  gap: 16px;
}
.revamp-account-container .rbpw-container .rbpw-text-5-regular {
  color: #697786;
}
.revamp-account-container .rbpw-container .fieldset-legend {
  color: #17054B;
}
.revamp-account-container .rbpw-container .fieldset-legend .legend {
  font-variant-numeric: lining-nums proportional-nums;
  font-family: "rb-medium";
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -0.4px;
}
@media only screen and (max-width: 768px) {
  .revamp-account-container {
    padding: 48px 0px 64px 0px;
  }
  .revamp-account-container .rbpw-container {
    display: flex;
    flex-direction: column;
    background: #F6F7F880;
    padding: 24px;
    gap: 32px;
    margin: auto;
  }
  .revamp-account-container .rbpw-container .form-content {
    width: 100%;
  }
  .revamp-account-container .rbpw-container .form-content .input-fields {
    flex-direction: column;
  }
  .revamp-account-container .rbpw-container .form-content .input-fields > div {
    width: 100%;
  }
  .revamp-account-container .rbpw-container .form-content .custom-radio-btns {
    display: flex;
    gap: 8px;
    align-items: start;
  }
  .revamp-account-container .rbpw-container .form-content .custom-radio-btns > div {
    min-width: 104px;
  }
  .revamp-account-container .rbpw-container .form-content .custom-radio-btns > div label {
    font-family: "rb-regular";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: -0.16px;
    color: #5A6572;
  }
  .revamp-account-container .rbpw-container .form-content .tooltiptext {
    padding-left: 20px;
    color: #697786;
    position: relative;
  }
  .revamp-account-container .rbpw-container .form-content .tooltiptext::before {
    content: url("../images/info-icon.png");
    display: inline-block;
    width: 13px;
    height: 13px;
    position: absolute;
    top: 0;
    left: 0;
  }
  .revamp-account-container .rbpw-container .fieldset-legend {
    color: #17054B;
  }
  .revamp-account-container .rbpw-container .fieldset-legend .legend {
    font-variant-numeric: lining-nums proportional-nums;
    font-family: "rb-medium";
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 22px;
    letter-spacing: -0.36px;
  }
}

.account-container .acc-checkbox {
  border-radius: 4px;
  border: 1px solid #8F98A8;
  background: #FFF;
  width: 24px;
  height: 24px;
  margin-block: auto;
  accent-color: #230871 !important;
}
.account-container .grey-text {
  color: #404B61;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.21px;
}
.account-container .grey-color {
  color: #838C9E;
}
.account-container .info-icon {
  align-self: flex-start;
  margin-top: 4px;
  margin-right: 4px;
}
.account-container #tnc-block .form-group {
  margin-bottom: unset !important;
  margin-top: 0.2rem;
}
.account-container .info-block {
  margin-block: 1rem;
  display: flex;
  padding: 12px 16px;
  align-items: center;
  gap: 4px;
  border-radius: 4px;
  background: #F4F3F8;
}
.account-container .info-block .info-text {
  color: #404B61;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 18px;
}
.account-container .tooltip {
  position: relative;
  display: inline-block;
  color: #00AF9A;
  opacity: 100% !important;
  font-family: inherit;
  text-wrap: nowrap;
  z-index: 90 !important;
}
.account-container .tooltip .tooltiptext {
  text-wrap: wrap !important;
  display: none;
  font-size: 12px;
  width: 305px;
  background-color: #230871;
  color: #fff;
  text-align: left;
  padding: 10px;
  position: absolute;
  z-index: 1;
  bottom: 150%;
  left: 50%;
  margin-left: -35px;
}
.account-container .tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  top: 100%;
  left: 10%;
  border-width: 5px;
  border-style: solid;
  border-color: #230871 transparent transparent transparent;
}
.account-container .tooltip:hover .tooltiptext {
  display: block;
}

.form-validator-stack.help-block [role=alert]:before {
  top: 3px;
  padding-right: 2px;
  position: relative;
  content: url(/o/com.rb.online.account/icons/icon-cross-circle-red.svg);
}

.form-group label.control-label,
.form-group .input-checkbox-wrapper label,
.blue-text {
  color: #442D86;
  font-size: 14px;
  font-style: normal;
  font-weight: 400 !important;
  line-height: 20px;
  letter-spacing: 0.21px;
  margin-bottom: 8px;
}

.form-group.has-success .form-control {
  border-color: #D3D7DD !important;
}

.reference-mark.text-warning {
  display: none !important;
}

.input-field-styles {
  height: 3.25rem;
  border-width: 1px !important;
  padding-right: 10%;
}

.pass-toggle-btn {
  position: absolute;
  top: 38%;
  right: 0%;
  padding: 1.5rem;
}

.pass-toggle-btn:focus {
  box-shadow: none;
  outline: none;
}

.toggle-switch-check:empty ~ .toggle-switch-bar:before {
  content: "No";
  color: #442D86;
  background: #D3D7DD;
  text-align: right;
  padding-bottom: 2%;
  font-weight: 400;
  border: none;
  padding-right: 8px;
  font-size: 14px;
  width: 56px;
}

.rtl .toggle-switch-check:empty ~ .toggle-switch-bar:before {
  content: "لا";
}

.toggle-switch-check:checked ~ .toggle-switch-bar:before {
  content: "Yes";
  padding-left: 12%;
  padding-bottom: 2%;
  font-weight: 400;
  text-align: left;
  color: white;
  background-color: #442D86;
  border: none;
}

.rtl .toggle-switch-check:checked ~ .toggle-switch-bar:before {
  content: "نعم";
}

.toggle-switch-check:focus ~ .toggle-switch-bar:before {
  box-shadow: none;
}

.toggle-switch-check:checked ~ .toggle-switch-bar::after,
label:not(.toggle-switch) .toggle-switch:checked ~ .toggle-switch-bar::after {
  left: 35px;
}

.toggle-switch-check ~ .toggle-switch-bar::after,
label:not(.toggle-switch) .toggle-switch ~ .toggle-switch-bar::after {
  height: 20px;
  width: 20px;
  top: 2px;
  left: 2px;
  filter: drop-shadow(0px 3px 1px rgba(0, 0, 0, 0.06)) drop-shadow(0px 3px 8px rgba(0, 0, 0, 0.15));
}

@media (max-width: 767.98px) {
  .toggle-switch-check:checked ~ .toggle-switch-bar::after,
label:not(.toggle-switch) .toggle-switch:checked ~ .toggle-switch-bar::after {
    left: 35px !important;
  }
}
#otp-container,
#location-enable-confirm-container,
#cancel-container,
#session-container {
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.4);
  align-items: center;
  display: flex;
}
#otp-container .otp-heading,
#otp-container .location-heading,
#otp-container .session-heading,
#location-enable-confirm-container .otp-heading,
#location-enable-confirm-container .location-heading,
#location-enable-confirm-container .session-heading,
#cancel-container .otp-heading,
#cancel-container .location-heading,
#cancel-container .session-heading,
#session-container .otp-heading,
#session-container .location-heading,
#session-container .session-heading {
  color: #230871;
  text-align: center;
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
}
#otp-container .cancel-heading,
#location-enable-confirm-container .cancel-heading,
#cancel-container .cancel-heading,
#session-container .cancel-heading {
  color: #230871;
  text-align: center;
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
}
#otp-container .otp-description,
#location-enable-confirm-container .otp-description,
#cancel-container .otp-description,
#session-container .otp-description {
  display: flex;
  padding-inline: 3rem;
  align-items: center;
  align-self: stretch;
  color: #00AF9A;
  text-align: center;
}
#otp-container .cancel-description,
#otp-container .session-description,
#location-enable-confirm-container .cancel-description,
#location-enable-confirm-container .session-description,
#cancel-container .cancel-description,
#cancel-container .session-description,
#session-container .cancel-description,
#session-container .session-description {
  color: #230871;
  text-align: center;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
#otp-container .otp-modal,
#otp-container .location-modal,
#otp-container .cancel-modal,
#otp-container .session-modal,
#location-enable-confirm-container .otp-modal,
#location-enable-confirm-container .location-modal,
#location-enable-confirm-container .cancel-modal,
#location-enable-confirm-container .session-modal,
#cancel-container .otp-modal,
#cancel-container .location-modal,
#cancel-container .cancel-modal,
#cancel-container .session-modal,
#session-container .otp-modal,
#session-container .location-modal,
#session-container .cancel-modal,
#session-container .session-modal {
  width: 600px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  border-radius: 4px;
  background: #FFF;
  box-shadow: 0px 6px 10px 0px rgba(25, 3, 87, 0.06);
  padding: 1rem;
  margin-inline: auto;
  max-width: 90%;
}
#otp-container .otp-modal .otp-btn,
#otp-container .location-modal .otp-btn,
#otp-container .cancel-modal .otp-btn,
#otp-container .session-modal .otp-btn,
#location-enable-confirm-container .otp-modal .otp-btn,
#location-enable-confirm-container .location-modal .otp-btn,
#location-enable-confirm-container .cancel-modal .otp-btn,
#location-enable-confirm-container .session-modal .otp-btn,
#cancel-container .otp-modal .otp-btn,
#cancel-container .location-modal .otp-btn,
#cancel-container .cancel-modal .otp-btn,
#cancel-container .session-modal .otp-btn,
#session-container .otp-modal .otp-btn,
#session-container .location-modal .otp-btn,
#session-container .cancel-modal .otp-btn,
#session-container .session-modal .otp-btn {
  padding-inline: 8rem;
}
#otp-container .otp-modal #cancel-application-btn,
#otp-container .otp-modal #quit-session-btn,
#otp-container .location-modal #cancel-application-btn,
#otp-container .location-modal #quit-session-btn,
#otp-container .cancel-modal #cancel-application-btn,
#otp-container .cancel-modal #quit-session-btn,
#otp-container .session-modal #cancel-application-btn,
#otp-container .session-modal #quit-session-btn,
#location-enable-confirm-container .otp-modal #cancel-application-btn,
#location-enable-confirm-container .otp-modal #quit-session-btn,
#location-enable-confirm-container .location-modal #cancel-application-btn,
#location-enable-confirm-container .location-modal #quit-session-btn,
#location-enable-confirm-container .cancel-modal #cancel-application-btn,
#location-enable-confirm-container .cancel-modal #quit-session-btn,
#location-enable-confirm-container .session-modal #cancel-application-btn,
#location-enable-confirm-container .session-modal #quit-session-btn,
#cancel-container .otp-modal #cancel-application-btn,
#cancel-container .otp-modal #quit-session-btn,
#cancel-container .location-modal #cancel-application-btn,
#cancel-container .location-modal #quit-session-btn,
#cancel-container .cancel-modal #cancel-application-btn,
#cancel-container .cancel-modal #quit-session-btn,
#cancel-container .session-modal #cancel-application-btn,
#cancel-container .session-modal #quit-session-btn,
#session-container .otp-modal #cancel-application-btn,
#session-container .otp-modal #quit-session-btn,
#session-container .location-modal #cancel-application-btn,
#session-container .location-modal #quit-session-btn,
#session-container .cancel-modal #cancel-application-btn,
#session-container .cancel-modal #quit-session-btn,
#session-container .session-modal #cancel-application-btn,
#session-container .session-modal #quit-session-btn {
  color: #00AF9A !important;
  background-color: #FFF !important;
  border: 1px solid #00AF9A !important;
  text-wrap: nowrap;
  box-shadow: none !important;
}
#otp-container .otp-modal #cancel-application-btn:focus,
#otp-container .otp-modal #quit-session-btn:focus,
#otp-container .location-modal #cancel-application-btn:focus,
#otp-container .location-modal #quit-session-btn:focus,
#otp-container .cancel-modal #cancel-application-btn:focus,
#otp-container .cancel-modal #quit-session-btn:focus,
#otp-container .session-modal #cancel-application-btn:focus,
#otp-container .session-modal #quit-session-btn:focus,
#location-enable-confirm-container .otp-modal #cancel-application-btn:focus,
#location-enable-confirm-container .otp-modal #quit-session-btn:focus,
#location-enable-confirm-container .location-modal #cancel-application-btn:focus,
#location-enable-confirm-container .location-modal #quit-session-btn:focus,
#location-enable-confirm-container .cancel-modal #cancel-application-btn:focus,
#location-enable-confirm-container .cancel-modal #quit-session-btn:focus,
#location-enable-confirm-container .session-modal #cancel-application-btn:focus,
#location-enable-confirm-container .session-modal #quit-session-btn:focus,
#cancel-container .otp-modal #cancel-application-btn:focus,
#cancel-container .otp-modal #quit-session-btn:focus,
#cancel-container .location-modal #cancel-application-btn:focus,
#cancel-container .location-modal #quit-session-btn:focus,
#cancel-container .cancel-modal #cancel-application-btn:focus,
#cancel-container .cancel-modal #quit-session-btn:focus,
#cancel-container .session-modal #cancel-application-btn:focus,
#cancel-container .session-modal #quit-session-btn:focus,
#session-container .otp-modal #cancel-application-btn:focus,
#session-container .otp-modal #quit-session-btn:focus,
#session-container .location-modal #cancel-application-btn:focus,
#session-container .location-modal #quit-session-btn:focus,
#session-container .cancel-modal #cancel-application-btn:focus,
#session-container .cancel-modal #quit-session-btn:focus,
#session-container .session-modal #cancel-application-btn:focus,
#session-container .session-modal #quit-session-btn:focus {
  box-shadow: none !important;
}
#otp-container .otp-modal #prefer-continue-btn,
#otp-container .otp-modal #continue-session-btn,
#otp-container .otp-modal #confirm-location-button,
#otp-container .location-modal #prefer-continue-btn,
#otp-container .location-modal #continue-session-btn,
#otp-container .location-modal #confirm-location-button,
#otp-container .cancel-modal #prefer-continue-btn,
#otp-container .cancel-modal #continue-session-btn,
#otp-container .cancel-modal #confirm-location-button,
#otp-container .session-modal #prefer-continue-btn,
#otp-container .session-modal #continue-session-btn,
#otp-container .session-modal #confirm-location-button,
#location-enable-confirm-container .otp-modal #prefer-continue-btn,
#location-enable-confirm-container .otp-modal #continue-session-btn,
#location-enable-confirm-container .otp-modal #confirm-location-button,
#location-enable-confirm-container .location-modal #prefer-continue-btn,
#location-enable-confirm-container .location-modal #continue-session-btn,
#location-enable-confirm-container .location-modal #confirm-location-button,
#location-enable-confirm-container .cancel-modal #prefer-continue-btn,
#location-enable-confirm-container .cancel-modal #continue-session-btn,
#location-enable-confirm-container .cancel-modal #confirm-location-button,
#location-enable-confirm-container .session-modal #prefer-continue-btn,
#location-enable-confirm-container .session-modal #continue-session-btn,
#location-enable-confirm-container .session-modal #confirm-location-button,
#cancel-container .otp-modal #prefer-continue-btn,
#cancel-container .otp-modal #continue-session-btn,
#cancel-container .otp-modal #confirm-location-button,
#cancel-container .location-modal #prefer-continue-btn,
#cancel-container .location-modal #continue-session-btn,
#cancel-container .location-modal #confirm-location-button,
#cancel-container .cancel-modal #prefer-continue-btn,
#cancel-container .cancel-modal #continue-session-btn,
#cancel-container .cancel-modal #confirm-location-button,
#cancel-container .session-modal #prefer-continue-btn,
#cancel-container .session-modal #continue-session-btn,
#cancel-container .session-modal #confirm-location-button,
#session-container .otp-modal #prefer-continue-btn,
#session-container .otp-modal #continue-session-btn,
#session-container .otp-modal #confirm-location-button,
#session-container .location-modal #prefer-continue-btn,
#session-container .location-modal #continue-session-btn,
#session-container .location-modal #confirm-location-button,
#session-container .cancel-modal #prefer-continue-btn,
#session-container .cancel-modal #continue-session-btn,
#session-container .cancel-modal #confirm-location-button,
#session-container .session-modal #prefer-continue-btn,
#session-container .session-modal #continue-session-btn,
#session-container .session-modal #confirm-location-button {
  text-wrap: nowrap;
}
#otp-container .otp-modal #resendOtpBtn,
#otp-container .location-modal #resendOtpBtn,
#otp-container .cancel-modal #resendOtpBtn,
#otp-container .session-modal #resendOtpBtn,
#location-enable-confirm-container .otp-modal #resendOtpBtn,
#location-enable-confirm-container .location-modal #resendOtpBtn,
#location-enable-confirm-container .cancel-modal #resendOtpBtn,
#location-enable-confirm-container .session-modal #resendOtpBtn,
#cancel-container .otp-modal #resendOtpBtn,
#cancel-container .location-modal #resendOtpBtn,
#cancel-container .cancel-modal #resendOtpBtn,
#cancel-container .session-modal #resendOtpBtn,
#session-container .otp-modal #resendOtpBtn,
#session-container .location-modal #resendOtpBtn,
#session-container .cancel-modal #resendOtpBtn,
#session-container .session-modal #resendOtpBtn {
  margin-inline: auto;
  display: flex;
  border: none;
  background: none;
  color: #00AF9A;
  margin-top: 0.5rem;
}
#otp-container .otp-modal #resendOtpBtn:disabled,
#otp-container .location-modal #resendOtpBtn:disabled,
#otp-container .cancel-modal #resendOtpBtn:disabled,
#otp-container .session-modal #resendOtpBtn:disabled,
#location-enable-confirm-container .otp-modal #resendOtpBtn:disabled,
#location-enable-confirm-container .location-modal #resendOtpBtn:disabled,
#location-enable-confirm-container .cancel-modal #resendOtpBtn:disabled,
#location-enable-confirm-container .session-modal #resendOtpBtn:disabled,
#cancel-container .otp-modal #resendOtpBtn:disabled,
#cancel-container .location-modal #resendOtpBtn:disabled,
#cancel-container .cancel-modal #resendOtpBtn:disabled,
#cancel-container .session-modal #resendOtpBtn:disabled,
#session-container .otp-modal #resendOtpBtn:disabled,
#session-container .location-modal #resendOtpBtn:disabled,
#session-container .cancel-modal #resendOtpBtn:disabled,
#session-container .session-modal #resendOtpBtn:disabled {
  color: rgba(16, 16, 16, 0.3);
}
#otp-container #otp-input-container,
#location-enable-confirm-container #otp-input-container,
#cancel-container #otp-input-container,
#session-container #otp-input-container {
  display: flex;
  gap: 5px;
}
#otp-container #otp-input-container .otp-input:focus,
#location-enable-confirm-container #otp-input-container .otp-input:focus,
#cancel-container #otp-input-container .otp-input:focus,
#session-container #otp-input-container .otp-input:focus {
  border: 2px solid #230871 !important;
}
#otp-container #otp-input-container .otp-input,
#location-enable-confirm-container #otp-input-container .otp-input,
#cancel-container #otp-input-container .otp-input,
#session-container #otp-input-container .otp-input {
  border: 1px solid #D3D7DD;
  border-radius: 4px;
  text-align: center;
  color: #00AF9A;
  width: 40px;
  height: 40px;
}
#otp-container #otp-input-container .otp-input[type=password],
#location-enable-confirm-container #otp-input-container .otp-input[type=password],
#cancel-container #otp-input-container .otp-input[type=password],
#session-container #otp-input-container .otp-input[type=password] {
  font-size: 30px;
}
#otp-container .pt-e-none,
#location-enable-confirm-container .pt-e-none,
#cancel-container .pt-e-none,
#session-container .pt-e-none {
  pointer-events: none;
}

.acc-btn {
  border-radius: 0.4em !important;
  min-width: unset !important;
  min-height: unset !important;
  padding-inline: 3rem;
  padding-block: 0.6rem;
}

.acc-btn:disabled {
  background: #D3D7DD !important;
  border: 1px solid #D3D7DD !important;
}

.oa-form-btn {
  border-radius: 0.4em !important;
  padding-inline: 3rem;
  padding-block: 0.6rem;
}

.oa-form-btn:disabled {
  background: #D3D7DD !important;
  border: 1px solid #D3D7DD !important;
  color: var(--tertiary-new-600, #697786) !important;
}

.rbpw-revamp-form .oa-form-btn:disabled {
  background: #D3D7DD !important;
  border: 1px solid #D3D7DD !important;
  color: var(--tertiary-new-600, #697786) !important;
}

.a-modal {
  position: fixed;
  height: 90%;
  width: 100%;
  top: 0;
  padding-inline: 1%;
  z-index: 1100;
  background-color: #FFF;
}
.a-modal .a-modal-content {
  background: #FFF;
}
.a-modal .a-modal-content .form-group.input-text-wrapper {
  padding-inline: unset;
}
.a-modal .a-modal-content .login-banner {
  width: -webkit-fill-available;
}
.a-modal .a-modal-content .blue-text {
  color: #230871;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.21px;
}

.green-text {
  color: #00AF9A;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.21px;
}

.locked-field {
  border-radius: 4px;
  border: 1px solid #E0E2E7;
  background-color: #EEEFF2 !important;
  color: #404B61 !important;
  font-size: 18px;
  background-image: url(/o/com.rb.online.account/icons/icon-lock.svg);
  background-size: 24px !important;
  background-position: 98% 11px !important;
  background-repeat: no-repeat;
}

.cursor-ptr {
  cursor: pointer;
}

.input-with-note .form-group.input-text-wrapper {
  margin-bottom: 8px;
}

.grey-helper-text {
  color: #838C9E;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.21px;
}

.password-field {
  border-radius: 4px;
  border: 1px solid #E0E2E7;
  color: #404B61 !important;
  font-size: 18px;
  background-image: url(/o/com.rb.online.account/icons/icon-view-close-light.svg);
  background-size: 24px !important;
  background-position: 98% 11px !important;
  background-repeat: no-repeat;
}

.password-field[type=text] {
  background-image: url(/o/com.rb.online.account/icons/icon-view-open-light.svg) !important;
}

.password-field.filled[type=password] {
  background-image: url(/o/com.rb.online.account/icons/icon-view-close-dark.svg) !important;
}

.password-field.filled[type=text] {
  background-image: url(/o/com.rb.online.account/icons/icon-view-open-dark.svg) !important;
}

.nafath-container {
  margin-inline: 290px;
}
.nafath-container .nafath-code {
  margin-inline: auto;
  margin-bottom: 32px;
  font-size: 42px;
  font-weight: 400;
  color: #00AF9A;
  display: flex;
  width: 105px;
  height: 72px;
  flex-direction: column;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid #00AF9A;
  background: #FFF;
  box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.04), 0px 4px 15px 0px rgba(0, 0, 0, 0.06);
}

.timer {
  color: #838C9E;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0.024px;
  display: flex;
  justify-content: center;
}

.page-width {
  padding-inline: 290px;
}

.steppers .stepper {
  color: #442D86;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0.21px;
}
.steppers .stepper img {
  width: 24px;
  height: 24px;
}
.steppers .stepper .checkbox {
  background: #00AF9A;
  border-radius: 1px;
  width: 20px !important;
  height: 20px !important;
  padding: 2px;
  margin-block: unset;
}
.steppers .stepper .green-color {
  color: #00AF9A;
}

.disabled-steppers {
  margin-top: 40px;
  margin-bottom: 56px;
}
.disabled-steppers .d-stepper {
  display: flex;
  align-items: center;
  color: #B6BCC7;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0.21px;
}
.disabled-steppers .d-stepper .disabled-badge {
  border-radius: 1px;
  background: #B6BCC7;
  display: flex;
  width: 20px;
  height: 20px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  color: #FFF;
  text-align: center;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0.21px;
}

.acc-form-container {
  background: #F5F4F5;
}
.acc-form-container .acc-form-title {
  color: #230871;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: 0.21px;
}
.acc-form-container .acc-form-title .acc-title-badge {
  background: #230871;
  color: #FFF;
  text-align: center !important;
  font-size: 16px;
  font-weight: 400;
  border-radius: 1px;
  width: 20px;
  height: 20px;
}
.acc-form-container .acc-sub-title {
  color: #442D86;
  font-size: 20px;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: 0.21px;
}

.personal-form .multiselect {
  min-height: 3.25rem;
  border: 1px solid #D3D7DD;
  border-radius: 0.25rem;
  display: flex;
  position: relative;
  background-color: #FFF;
  background-image: url(/o/com.rb.online.account/icons/icon-chevron-green-down.svg);
  background-position: right 0.5em center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  cursor: pointer;
  padding-right: 2em;
}
.personal-form .multiselect:hover .ms-dropdown {
  display: block;
}
.personal-form .multiselect.required {
  border-color: var(--negative);
}
.personal-form .selected-options {
  padding-inline: 0.5rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  cursor: pointer;
}
.personal-form .selected-options .pill {
  height: 24px;
  display: inline-flex;
  align-items: center;
  background-color: #F4F3F8;
  color: #404B61;
  border-radius: 0.25rem;
  padding: 4px 10px;
  margin: 4px;
  font-size: 0.75rem;
}
.personal-form .selected-options .pill .remove-btn {
  margin-left: 8px;
  cursor: pointer;
}
.personal-form .selected-options .pill .remove-btn img {
  width: 7px;
  margin-bottom: 0.1rem;
}
.personal-form .ms-dropdown {
  display: none;
  top: calc(100% + 1px);
  padding: 1rem;
  width: auto;
  position: absolute;
  background: white;
  border: 1px solid #ccc;
  border-radius: 4px;
  max-height: 200px;
  overflow-y: auto;
  z-index: 10;
  width: 100%;
}
.personal-form .ms-dropdown label {
  margin-bottom: 1rem;
  font-size: 1rem;
  font-weight: 400;
  align-items: center;
  display: flex;
}
.personal-form .ms-dropdown label input[type=checkbox] {
  cursor: pointer;
  height: 24px;
  width: 24px;
  margin-right: 8px;
  appearance: none;
}
.personal-form .ms-dropdown label input[type=checkbox]:before {
  position: absolute;
  display: block;
}
.personal-form .ms-dropdown label input[type=checkbox]:after {
  display: block;
  width: 24px;
  height: 24px;
  border: 1px solid #E9E9EB;
  border-radius: 4px;
  content: "";
  background-position: center;
}
.personal-form .ms-dropdown label input[type=checkbox]:checked:after {
  background-image: url(/o/com.rb.online.account/icons/icon-checkbox-check-white-12px.svg);
  background-repeat: no-repeat;
  background-color: #230871;
}

.financial-form .green-icon {
  color: #00af9a;
  font-size: large;
  cursor: pointer;
}
.financial-form .green-align-top {
  color: #00af9a;
  vertical-align: text-bottom;
  cursor: pointer;
}
.financial-form .fatca-field-width {
  width: 60%;
}
.financial-form .taxcountrydiv {
  display: flex;
  background: white;
  margin-top: 2rem;
  border-radius: 0.7rem;
  padding: 1.5rem;
  box-shadow: 0 0 50px #EEE;
}
.financial-form .addCountryDivBtn {
  display: flex;
}

#branch-select-map {
  position: relative;
  height: 455px;
}

#branch-map {
  border-radius: 4px;
  height: 100%;
}

.absolute {
  position: absolute;
  top: 0px;
  left: 10px;
  z-index: 90;
}

.map-controls {
  position: absolute;
  bottom: 20px;
  right: 10px;
  z-index: 90;
}
.map-controls #locationBtn {
  background: #00AF9A;
  border-radius: 4px;
}
.map-controls #locationBtn:focus {
  box-shadow: none;
}
.map-controls #zoom-in {
  background: #F2FBFA;
  border-radius: 4px;
}
.map-controls #zoom-in:focus {
  box-shadow: none;
}
.map-controls #zoom-out {
  background: #F2FBFA;
  border-radius: 4px;
}
.map-controls #zoom-out:focus {
  box-shadow: none;
}

.mobile-items {
  position: relative;
  display: flex;
  overflow: auto;
  gap: 8px;
  scroll-behavior: smooth;
}
.mobile-items .selected-m-item {
  background: #F2FBFA;
  border: 1px solid #00AF9A;
}

.items {
  overflow-y: scroll;
  scroll-behavior: smooth;
  max-height: 455px;
  height: fit-content;
  border-radius: 8px;
  mix-blend-mode: luminosity;
}

.mobile-branch-item {
  border-radius: 4px;
  background: #FFF;
  display: flex;
  width: 256px;
  padding: 16px;
  letter-spacing: 0.21px;
  flex: 2 0 auto;
  flex-direction: column;
}
.mobile-branch-item .branch-name {
  color: #442D86;
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 20px;
}
.mobile-branch-item .branch-distance {
  color: #636D80;
  text-align: right;
  font-size: 10px;
  font-style: normal;
  font-weight: 400;
  line-height: 14px;
}
.mobile-branch-item .green-link {
  border: none;
  background: none;
  margin-left: auto;
  color: #00AF9A;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.21px;
}

.branch-item {
  border-radius: 4px;
  background: #F2FBFA;
  display: flex;
  width: 408px;
  padding: 16px;
  flex-direction: column;
  gap: 8px;
  letter-spacing: 0.21px;
}
.branch-item .branch-name {
  color: #442D86;
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 20px;
}
.branch-item .branch-distance {
  color: #636D80;
  text-align: right;
  font-size: 10px;
  font-style: normal;
  font-weight: 400;
  line-height: 14px;
}
.branch-item .branch-details {
  color: #404B61;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px;
  margin-left: 32px;
}
.branch-item .green-link {
  border: none;
  background: none;
  margin-left: auto;
  color: #00AF9A;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.21px;
}
.branch-item .green-link img {
  vertical-align: sub;
}

.joiningdate {
  background: url(/o/com.rb.online.account/icons/icon-calendar.svg) no-repeat 0px 0px #FFF;
  background-size: 24px !important;
  background-position: 3% 11px !important;
  padding-left: 3.5em;
}

.sar-inp {
  border-radius: 4px;
  border: 1px solid #D3D7DD;
  background-color: #EEEFF2 !important;
  text-align: right;
  color: #758393 !important;
  font-size: 18px;
  background-image: url(/o/com.rb.online.account/icons/icon-sa-flag-round.svg);
  background-size: 24px !important;
  background-position: 10% 11px !important;
  background-repeat: no-repeat;
}

.img-dimensions {
  width: 64px;
  height: 64px;
  margin-inline: auto;
  display: flex;
}

.card-img-dimensions {
  position: relative;
  width: 267.413px;
  height: 160px;
  margin-inline: auto;
  display: flex;
}
.card-img-dimensions img {
  border-radius: 14px;
}
.card-img-dimensions .card-user-name {
  position: absolute;
  color: #FFFF;
  bottom: 3%;
  left: 7%;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
}

.bg-grey {
  background: #F4F3F8;
}

.red-text {
  color: #FF6D70;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.21px;
}

.black-text {
  color: #212225;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.21px;
}

#username-error {
  display: flex;
  align-items: center;
}

#email-error {
  position: relative;
  top: -1rem;
}
#email-error .red-text {
  color: #FF6D70;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.21px;
  margin-left: 2px;
}

.success-heading {
  color: #230871;
  text-align: center;
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  line-height: 38px;
  letter-spacing: 0.21px;
}

.success-description {
  color: #230871;
  text-align: center;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
  /* 125% */
  letter-spacing: 0.21px;
}

.img-dimensions {
  width: 64px;
  height: 64px;
  margin-inline: auto;
  display: flex;
}

.error-info {
  display: block;
  color: #230871;
  text-align: center;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 32px;
  letter-spacing: 0.21px;
}

.white-btn {
  color: #00AF9A;
  background: none;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  /* 125% */
  letter-spacing: 0.21px;
  display: flex;
  height: 40px;
  padding: 8px 32px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-radius: 4px;
  border: 1px solid #00AF9A;
}

.green-btn {
  color: #FFF;
  border: none;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.21px;
  display: flex;
  height: 40px;
  padding: 16px 32px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-radius: 4px;
  background: #00AF9A;
}

.error-code {
  color: #758393;
  text-align: center;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 0.21px;
}

.oa-loading-mask {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 250;
  background: rgba(35, 8, 113, 0.1);
  align-items: center;
  justify-content: center;
  display: flex;
}
.oa-loading-mask .load-spinner {
  animation: rotation 1s ease-in-out infinite;
  width: 90px;
  height: 90px;
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@media screen and (max-width: 576px) {
  #map-parent {
    margin-inline: 1% !important;
  }
}
.items::-webkit-scrollbar {
  display: none;
}

@media (max-width: 1136px) {
  .page-width {
    padding-inline: 150px;
  }
}
@media (max-width: 820px) {
  .nafath-container {
    margin-inline: 48px;
  }

  .page-width {
    padding-inline: 48px;
  }
}
@media (max-width: 768px) {
  .account-container {
    margin-inline: unset;
  }
  .account-container .tooltip .tooltiptext {
    width: 153px;
    left: -84%;
    margin-left: unset;
  }
  .account-container .tooltip .tooltiptext::after {
    left: 49%;
  }

  .nafath-container {
    margin-inline: 24px;
  }

  .page-width {
    padding-inline: 24px;
  }
}
@media (max-width: 430px) {
  .fatca-field-width {
    width: 90% !important;
  }

  .oa-form-btn {
    width: 100%;
  }

  .otp-input[type=password] {
    font-size: unset !important;
  }
}