/*
 * ROKN client styles for the authentication pages (sign-in, access denied, error): a clean light page with one
 * large, faint ROKN mark (icon-color.png from this folder, unchanged) as a watermark behind the card.
 * Decoration only: never interactive; smaller on tablets and hidden on phones.
 */

/* Replace Sneat's decorative dot grid and translucent squares around the card. */
.authentication-wrapper.authentication-basic .authentication-inner::before,
.authentication-wrapper.authentication-basic .authentication-inner::after {
  display: none;
}

/* The watermark, centered on the card and offset so part of the mark extends beyond it. */
.authentication-wrapper.authentication-basic {
  position: relative;
}

.authentication-wrapper.authentication-basic::before {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  inline-size: 70rem;
  block-size: 70rem;
  content: "";
  background: url("icon-color.png") center / contain no-repeat;
  opacity: 0.05;
  transform: translate(-44%, -50%);
  pointer-events: none;
}

/* A soft shadow for the card. */
.authentication-wrapper.authentication-basic .authentication-inner .card {
  box-shadow:
    0 0.125rem 0.375rem rgba(var(--app-brand-primary-rgb), 0.05),
    0 0.75rem 2rem rgba(var(--app-brand-primary-rgb), 0.08);
}

@media (max-width: 991.98px) {
  .authentication-wrapper.authentication-basic::before {
    inline-size: 60rem;
    block-size: 60rem;
    opacity: 0.04;
  }
}

@media (max-width: 575.98px) {
  .authentication-wrapper.authentication-basic::before {
    display: none;
  }
}