@charset "UTF-8";

/* Scope all presentation changes to the existing login modal. */
:is(.sak-login-modal, .modal#loginModal) {
  --sak-login-red: #f5223d;
  position: fixed !important;
  inset: 0 !important;
  z-index: 3300 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 20px 16px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  box-sizing: border-box !important;
  background: rgba(17, 24, 39, .38) !important;
  -webkit-backdrop-filter: blur(7px) !important;
  backdrop-filter: blur(7px) !important;
  direction: rtl;
  font-family: inherit;
  color: #17212f;
}

/* The modal itself supplies the tint and blur, including when a plugin
   disables Bootstrap's backdrop. Its existing backdrop stays transparent. */
.modal-backdrop.sak-login-backdrop {
  background: transparent !important;
  opacity: 0 !important;
}

:is(.sak-login-modal, .modal#loginModal) .modal-dialog {
  width: 100% !important;
  max-width: 448px !important;
  min-height: calc(100vh - 40px) !important;
  min-height: calc(100dvh - 40px) !important;
  margin: 0 auto !important;
  display: flex !important;
  align-items: center !important;
  pointer-events: none;
}

:is(.sak-login-modal, .modal#loginModal) .modal-content {
  position: relative !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .9) !important;
  border-top: 3px solid var(--sak-login-red) !important;
  border-radius: 22px !important;
  background: #fff !important;
  color: #17212f !important;
  box-shadow: 0 28px 90px rgba(9, 17, 30, .25) !important;
  pointer-events: auto;
}

:is(.sak-login-modal, .modal#loginModal) .modal-content::before {
  content: "";
  display: block;
  flex: 0 0 58px;
  width: 58px;
  height: 58px;
  margin: 28px auto 14px;
  border: 1px solid #ffe1e6;
  border-radius: 18px;
  background: #fff2f4 center / 29px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f5223d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.5'/%3E%3Cpath d='M4.5 21v-2a7.5 7.5 0 0 1 15 0v2'/%3E%3C/svg%3E");
}

:is(.sak-login-modal, .modal#loginModal) .modal-header {
  padding: 0 28px !important;
  border: 0 !important;
  justify-content: center !important;
}

:is(.sak-login-modal, .modal#loginModal) .modal-title,
:is(.sak-login-modal, .modal#loginModal) .modal-body h4,
:is(.sak-login-modal, .modal#loginModal) .modal-body h5 {
  width: 100%;
  margin: 0 0 14px !important;
  color: #17212f !important;
  font-size: 23px !important;
  font-weight: 800 !important;
  line-height: 1.6 !important;
  text-align: center !important;
}

:is(.sak-login-modal, .modal#loginModal) .btn-close {
  position: absolute !important;
  top: 16px !important;
  left: 16px !important;
  right: auto !important;
  z-index: 2;
  width: 36px !important;
  height: 36px !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
  border: 1px solid #eef0f4;
  border-radius: 11px;
  background-color: #f7f8fa !important;
  background-size: 12px !important;
  opacity: .75 !important;
  box-shadow: none !important;
}

:is(.sak-login-modal, .modal#loginModal) .btn-close:hover {
  opacity: 1 !important;
  background-color: #fff2f4 !important;
}

:is(.sak-login-modal, .modal#loginModal) .modal-body {
  flex: 1 1 auto;
  width: 100% !important;
  padding: 10px 28px 22px !important;
  box-sizing: border-box;
  color: #687180;
  font-size: 14px;
  line-height: 1.85;
}

:is(.sak-login-modal, .modal#loginModal) .modal-body form,
:is(.sak-login-modal, .modal#loginModal) .returning-wrapper,
:is(.sak-login-modal, .modal#loginModal) .fieldset,
:is(.sak-login-modal, .modal#loginModal) .pnl-username,
:is(.sak-login-modal, .modal#loginModal) .form-floating,
:is(.sak-login-modal, .modal#loginModal) .otp-useranme,
:is(.sak-login-modal, .modal#loginModal) .otp-token {
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
  box-sizing: border-box;
}

:is(.sak-login-modal, .modal#loginModal) .fieldset {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

:is(.sak-login-modal, .modal#loginModal) .modal-body .hstack {
  margin-bottom: 12px !important;
}

:is(.sak-login-modal, .modal#loginModal) .form-floating {
  margin-bottom: 20px !important;
}

:is(.sak-login-modal, .modal#loginModal) #UserName,
:is(.sak-login-modal, .modal#loginModal) #OtpToken {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 56px !important;
  height: 56px !important;
  margin: 0 !important;
  padding-inline: 16px !important;
  box-sizing: border-box !important;
  border: 1px solid #dfe4ec !important;
  border-radius: 12px !important;
  background: #f8fafc !important;
  color: #17212f !important;
  font-family: inherit !important;
  font-size: 16px !important;
  direction: ltr !important;
  text-align: center !important;
  box-shadow: none !important;
  transition: border-color .18s ease, box-shadow .18s ease;
}

:is(.sak-login-modal, .modal#loginModal) #UserName:focus,
:is(.sak-login-modal, .modal#loginModal) #OtpToken:focus {
  border-color: var(--sak-login-red) !important;
  background: #fff !important;
  box-shadow: 0 0 0 4px rgba(245, 34, 61, .08) !important;
  outline: none;
}

:is(.sak-login-modal, .modal#loginModal) .form-floating > label {
  width: 100% !important;
  max-width: 100% !important;
  color: #7d8592;
  font-size: 13px;
  text-align: center !important;
}

:is(.sak-login-modal, .modal#loginModal) .otp-useranme .input-group,
:is(.sak-login-modal, .modal#loginModal) .otp-token .input-group {
  width: 100% !important;
  flex-wrap: nowrap;
  gap: 8px;
}

:is(.sak-login-modal, .modal#loginModal) .input-group #UserName,
:is(.sak-login-modal, .modal#loginModal) .input-group #OtpToken {
  flex: 1 1 auto !important;
  width: 1% !important;
}

:is(.sak-login-modal, .modal#loginModal) .btn-primary {
  --bs-btn-bg: var(--sak-login-red);
  --bs-btn-border-color: var(--sak-login-red);
  --bs-btn-hover-bg: #df1731;
  --bs-btn-hover-border-color: #df1731;
  --bs-btn-active-bg: #df1731;
  --bs-btn-active-border-color: #df1731;
  --bs-btn-disabled-bg: var(--sak-login-red);
  --bs-btn-disabled-border-color: var(--sak-login-red);
  min-height: 48px;
  border: 1px solid var(--sak-login-red) !important;
  border-radius: 12px !important;
  background: var(--sak-login-red) !important;
  color: #fff !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 700;
  box-shadow: 0 6px 16px rgba(245, 34, 61, .14);
  transition: background-color .18s ease, box-shadow .18s ease;
}

:is(.sak-login-modal, .modal#loginModal) .btn-primary:hover {
  border-color: #df1731 !important;
  background: #df1731 !important;
}

:is(.sak-login-modal, .modal#loginModal) #requsetOtpToken,
:is(.sak-login-modal, .modal#loginModal) .btn-request-token,
:is(.sak-login-modal, .modal#loginModal) .btn-resend-token,
:is(.sak-login-modal, .modal#loginModal) .btn-verify-token {
  width: 100% !important;
  min-height: 50px !important;
  margin-inline: 0 !important;
  padding: 11px 18px !important;
}

:is(.sak-login-modal, .modal#loginModal) .btn-change-username {
  flex: 0 0 auto;
  padding-inline: 12px;
  white-space: nowrap;
}

:is(.sak-login-modal, .modal#loginModal) .modal-footer {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding: 0 28px 28px !important;
  border: 0 !important;
}

:is(.sak-login-modal, .modal#loginModal) .modal-footer > * {
  margin: 0;
}

:is(.sak-login-modal, .modal#loginModal) .js-password-login {
  margin-top: 18px !important;
  padding-top: 14px !important;
  border-top: 1px solid #edf0f4;
  text-align: center;
}

:is(.sak-login-modal, .modal#loginModal) .btn-link,
:is(.sak-login-modal, .modal#loginModal) .js-password-login a {
  color: #d92038 !important;
  font-size: 13px !important;
  text-decoration: none;
}

:is(.sak-login-modal, .modal#loginModal) .otp-countdown {
  color: #687180;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

:is(.sak-login-modal, .modal#loginModal) .input-group-text {
  border: 1px solid #e7ebf1;
  border-radius: 12px !important;
  background: #f8fafc;
}

:is(.sak-login-modal, .modal#loginModal) .btn:focus-visible {
  outline: 2px solid #17212f;
  outline-offset: 3px;
}

@media (max-width: 575.98px) {
  :is(.sak-login-modal, .modal#loginModal) .modal-content {
    border-radius: 18px !important;
  }
  :is(.sak-login-modal, .modal#loginModal) .modal-header {
    padding-inline: 22px !important;
  }
  :is(.sak-login-modal, .modal#loginModal) .modal-body {
    padding-inline: 22px !important;
  }
  :is(.sak-login-modal, .modal#loginModal) .modal-footer {
    padding-inline: 22px !important;
    padding-bottom: 22px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  :is(.sak-login-modal, .modal#loginModal),
  :is(.sak-login-modal, .modal#loginModal) .modal-dialog,
  :is(.sak-login-modal, .modal#loginModal) .form-control,
  :is(.sak-login-modal, .modal#loginModal) .btn {
    transition: none !important;
  }
}