html {
  & .login-card,
  & #error-40x {
    position: fixed;
    z-index: 99999;
    background-color: var(--bg-card);
    border-radius: 0.25rem;
    text-align: center;
    opacity: 0;
    animation: appearText 1s forwards;
    animation-delay: 0.25s;
    & img {
      width: 15rem; 
      padding: 2.5rem 5rem;
      border-bottom: 1px solid #414759;
    }
    & h1 {
      font-family: 'FK Grotesk';
      text-align: center;
      margin: 1rem 2rem;
      font-size: 1.5rem;
      font-weight: 400;
      text-transform: uppercase;
      letter-spacing: 0.25rem;
    }
    & h4 {
      font-family: 'FK Grotesk';
      text-align: center;
      color: var(--white);
      font-weight: 400;
      font-size: 0.75rem;
      letter-spacing: 0.05rem;
    }
    & p {
      margin: 0.5rem 1rem 1.5rem;
      font-size: 0.75rem;
      font-weight: 400;
      color: rgba(186, 186, 187, 1);
      font-family: 'FK Grotesk';
      text-align: center;
      &:first-of-type {
        margin: 0.5rem;
      }
    }
    & .login-contents {
      padding-bottom: 1.5rem;
      & .login-sso-check {
        max-height: 10rem;
        opacity: 1;
        overflow: hidden;
        padding: 0 7.5rem;
        & .dt-button {
          font-family: 'FK Grotesk';
          text-align: center;
          border: none;
          outline: none;
          width: 100%;
          margin: 0.5rem 0;
          box-sizing: border-box;
          cursor: pointer;
          background-color: #7285b5;
          color: #08090d;
          font-size: 0.75rem;
          font-weight: 700;
          letter-spacing: .025rem;
          line-height: 1.5rem;
          padding: 0.25rem 0.75rem;
          border-radius: 1.4rem;
          white-space: nowrap;
        }
      }
    }
  }
}