/* BetConstruct-inspired verification layout, isolated from the regular login screen. */
.ax-login-accounts-layout .ax-two-factor-brand {
  display: none;
}

body.ax-login-accounts-layout.ax-two-factor-active > .ax-login-shell {
  grid-template-columns: minmax(0, 50%) minmax(0, 50%) !important;
}

.ax-login-accounts-layout.ax-two-factor-active .ax-auth {
  align-items: flex-start !important;
  justify-content: flex-start !important;
  padding: 70px clamp(48px, 6.45vw, 100px) 48px !important;
}

.ax-login-accounts-layout.ax-two-factor-active .ax-auth-card {
  width: min(480px, 100%) !important;
  max-width: 480px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.ax-login-accounts-layout.ax-two-factor-active .ax-two-factor-brand {
  display: flex !important;
  align-items: baseline !important;
  min-height: 34px !important;
  margin: 0 0 25px !important;
  color: #b21b67 !important;
  font-family: "Open Sans", Arial, sans-serif !important;
}

.ax-login-accounts-layout.ax-two-factor-active .ax-form-wordmark,
.ax-login-accounts-layout.ax-two-factor-active .ax-form-wordmark-icon,
.ax-login-accounts-layout.ax-two-factor-active .ax-kicker,
.ax-login-accounts-layout.ax-two-factor-active .ax-mobile-brand,
.ax-login-accounts-layout.ax-two-factor-active .ax-auth-card > footer,
.ax-login-accounts-layout.ax-two-factor-active .ax-two-factor-login-notice,
.ax-login-accounts-layout.ax-two-factor-active .ax-two-factor-hint,
.ax-login-accounts-layout.ax-two-factor-active .ax-two-factor-mode,
.ax-login-accounts-layout.ax-two-factor-active .ax-two-factor-back,
.ax-login-accounts-layout.ax-two-factor-active .ax-pin-cells {
  display: none !important;
}

.ax-login-accounts-layout.ax-two-factor-active .ax-two-factor-brand strong {
  color: #b21b67 !important;
  font: 700 29px/34px "Open Sans", Arial, sans-serif !important;
  letter-spacing: -.8px !important;
}

.ax-login-accounts-layout.ax-two-factor-active .ax-two-factor-brand em {
  color: #b21b67 !important;
  font: italic 300 29px/34px "Open Sans", Arial, sans-serif !important;
  letter-spacing: -.8px !important;
  font-weight: 300 !important;
}

.ax-login-accounts-layout.ax-two-factor-active .ax-auth-card > header {
  min-height: 0 !important;
  margin: 0 0 25px !important;
  padding: 0 !important;
}

.ax-login-accounts-layout.ax-two-factor-active .ax-auth-card > header h2 {
  margin: 0 !important;
  color: #1f2d44 !important;
  font: 600 23px/31px "Open Sans", Arial, sans-serif !important;
  letter-spacing: 0 !important;
}

.ax-login-accounts-layout.ax-two-factor-active .ax-auth-card > header p {
  max-width: none !important;
  margin: 17px 0 0 !important;
  color: #34415a !important;
  font: 400 14px/21px "Open Sans", Arial, sans-serif !important;
}

.ax-login-accounts-layout.ax-two-factor-active .ax-two-factor-login {
  gap: 0 !important;
  margin: 0 !important;
}

.ax-login-accounts-layout.ax-two-factor-active .ax-two-factor-login-error {
  margin: 0 0 18px !important;
}

.ax-login-accounts-layout.ax-two-factor-active .ax-two-factor-code-field {
  margin: 0 0 22px !important;
}

.ax-login-accounts-layout.ax-two-factor-active .ax-two-factor-code-field .ax-label-row {
  min-height: 19px !important;
  margin: 0 0 8px !important;
}

.ax-login-accounts-layout.ax-two-factor-active .ax-two-factor-code-field label {
  color: #34415a !important;
  font: 400 14px/19px "Open Sans", Arial, sans-serif !important;
}

.ax-login-accounts-layout.ax-two-factor-active .ax-two-factor-single-input {
  display: block !important;
  width: 100% !important;
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.ax-login-accounts-layout.ax-two-factor-active .ax-two-factor-single-input > input {
  position: static !important;
  display: block !important;
  width: 100% !important;
  height: 42px !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 0 16px !important;
  opacity: 1 !important;
  color: #1f2d44 !important;
  border: 1px solid #c9d0dc !important;
  border-radius: 4px !important;
  outline: 0 !important;
  background: #fff !important;
  font: 400 14px/40px "Open Sans", Arial, sans-serif !important;
  letter-spacing: 0 !important;
  caret-color: #b21b67 !important;
  box-shadow: none !important;
}

.ax-login-accounts-layout.ax-two-factor-active .ax-two-factor-single-input > input::placeholder {
  color: #9aa4b4 !important;
  opacity: 1 !important;
}

.ax-login-accounts-layout.ax-two-factor-active .ax-two-factor-single-input:focus-within > input {
  border-color: #aeb7c7 !important;
  box-shadow: 0 0 0 1px rgba(178, 27, 103, .08) !important;
}

.ax-login-accounts-layout.ax-two-factor-active .ax-two-factor-single-input.is-invalid > input {
  border-color: #d84c59 !important;
}

.ax-login-accounts-layout.ax-two-factor-active .ax-two-factor-remember {
  position: relative !important;
  display: flex !important;
  width: fit-content !important;
  min-height: 20px !important;
  margin: 0 0 34px 3px !important;
  padding: 0 !important;
  align-items: center !important;
  gap: 14px !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #34415a !important;
  background: transparent !important;
  box-shadow: none !important;
}

.ax-login-accounts-layout.ax-two-factor-active .ax-two-factor-remember:hover,
.ax-login-accounts-layout.ax-two-factor-active .ax-two-factor-remember:focus-within {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.ax-login-accounts-layout.ax-two-factor-active .ax-two-factor-remember-box {
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px !important;
  border: 1px solid #99a4b5 !important;
  border-radius: 4px !important;
  background: #fff !important;
  font-size: 10px !important;
}

.ax-login-accounts-layout.ax-two-factor-active .ax-two-factor-remember > input:checked + .ax-two-factor-remember-box {
  color: #fff !important;
  border-color: #b21b67 !important;
  background: #b21b67 !important;
}

.ax-login-accounts-layout.ax-two-factor-active .ax-two-factor-remember-copy strong {
  color: #34415a !important;
  font: 400 14px/20px "Open Sans", Arial, sans-serif !important;
}

.ax-login-accounts-layout.ax-two-factor-active .ax-two-factor-login .ax-submit {
  width: 100% !important;
  height: 42px !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 0 18px !important;
  border: 0 !important;
  border-radius: 999px !important;
  color: #fff !important;
  background: #cf89b0 !important;
  font: 700 14px/42px "Open Sans", Arial, sans-serif !important;
  box-shadow: none !important;
}

.ax-login-accounts-layout.ax-two-factor-active .ax-two-factor-login .ax-submit:hover:not(:disabled),
.ax-login-accounts-layout.ax-two-factor-active .ax-two-factor-login .ax-submit:focus-visible:not(:disabled) {
  background: #c56f9f !important;
  box-shadow: none !important;
}

.ax-login-accounts-layout.ax-two-factor-active .ax-two-factor-login .ax-submit:disabled {
  background: #d6a1bd !important;
}

@media (max-width: 667px) {
  body.ax-login-accounts-layout.ax-two-factor-active > .ax-login-shell {
    display: block !important;
    width: 100% !important;
  }

  .ax-login-accounts-layout.ax-two-factor-active .ax-visual {
    display: none !important;
  }

  .ax-login-accounts-layout.ax-two-factor-active .ax-auth {
    width: 100% !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    padding: max(34px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(28px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)) !important;
  }

  .ax-login-accounts-layout.ax-two-factor-active .ax-auth-card {
    width: 100% !important;
    max-width: 480px !important;
  }

  .ax-login-accounts-layout.ax-two-factor-active .ax-two-factor-brand {
    margin-bottom: 24px !important;
  }

  .ax-login-accounts-layout.ax-two-factor-active .ax-two-factor-brand strong,
  .ax-login-accounts-layout.ax-two-factor-active .ax-two-factor-brand em {
    font-size: 26px !important;
    line-height: 32px !important;
  }

  .ax-login-accounts-layout.ax-two-factor-active .ax-auth-card > header h2 {
    font-size: 21px !important;
    line-height: 29px !important;
  }

  .ax-login-accounts-layout.ax-two-factor-active .ax-auth-card > header p {
    margin-top: 14px !important;
  }

  .ax-login-accounts-layout.ax-two-factor-active .ax-two-factor-single-input,
  .ax-login-accounts-layout.ax-two-factor-active .ax-two-factor-single-input > input,
  .ax-login-accounts-layout.ax-two-factor-active .ax-two-factor-login .ax-submit {
    height: 46px !important;
    min-height: 46px !important;
  }

  .ax-login-accounts-layout.ax-two-factor-active .ax-two-factor-single-input > input {
    font-size: 16px !important;
    line-height: 44px !important;
  }

  .ax-login-accounts-layout.ax-two-factor-active .ax-two-factor-login .ax-submit {
    line-height: 46px !important;
  }
}