.error-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--dimen-xl);
  min-height: 250px;
}

.error-icon {
  display: flex;
  justify-content: center;
  opacity: 0.7;
}

.deactivated-icon {
  display: inline-block;
  color: var(--on-surface);
  opacity: 0.8;
}


.generic-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--dimen-m);
}

.back-to-login-button {
  width: 100%;
  padding: var(--dimen-xl) var(--dimen-xxxl);
  background: var(--on-surface);
  border: none;
  border-radius: var(--radius-xxxxl);
  color: var(--surface);
  font-style: var(--font-main);
  font-size: var(--font-size-m);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  transition: all var(--duration-300) ease;
  font-family: var(--font-main);
  text-align: center;
  text-decoration: none;
  margin-top: var(--dimen-l);
  display: inline-block;
}

.back-to-login-button:hover {
  background: var(--on-surface);
  box-shadow: 0px 8px 24px 9px var(--on-surface-112);
}

/* Client-gated "Sign up" CTA on the Account-not-found error page (PORTAL-2708).
   Primary white pill, matching the login/signup primary buttons. */
.signup-cta-button {
  width: 100%;
  padding: var(--dimen-xl) var(--dimen-xxxl);
  background: var(--on-surface);
  border: none;
  border-radius: var(--radius-xxxxl);
  color: var(--surface);
  font-size: var(--font-size-m);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  transition: all var(--duration-300) ease;
  font-family: var(--font-main);
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

.signup-cta-button:hover {
  background: var(--on-surface);
  box-shadow: 0px 8px 24px 9px var(--on-surface-112);
}