.auth-page {
    --mb-4: 1.5rem;
    --auth-font-size: 0.875rem;
    --auth-font-color: var(--neutral-600);
    background-color: var(--page-bg);
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
  }
  .auth-page a {
    text-decoration: underline;
    text-underline-offset: 0.25em;
    font-size: var(--auth-font-size);
  }
  .auth-page a:hover {
    text-underline-offset: 0.2em;
  }
  .auth-page .auth-container {
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
  }
  .auth-page .auth-inner {
    position: relative;
    width: 100%;
    max-width: 400px;
  }
  .auth-page .auth-inner .card {
    z-index: 1;
    box-shadow: 0 0.25rem 1.125rem hsla(253.6, 13.6%, 31.8%, 0.1);
    border: none;
  }
  .auth-page .auth-inner .card-body {
    padding: 2rem;
  }
  .auth-page .auth-inner::before, .auth-page .auth-inner::after {
    opacity: 0.25;
    width: 128px;
    height: auto;
    content: "";
    position: absolute;
    aspect-ratio: 1/1;
    background-repeat: no-repeat;
    background-size: contain;
  }
  .auth-page .auth-inner::before {
    top: 0;
    left: -20%;
    transform: rotate(-17deg);
    background-image: url("../images/auth/boxes@2x.png");
  }
  @media screen and (max-width: 560px) {
    .auth-page .auth-inner::before {
      top: -13%;
      left: -6%;
    }
  }
  .auth-page .auth-inner::after {
    /* z-index: -1; */
    bottom: 0;
    right: -27%;
    transform: rotate(-9deg);
    background-image: url("../images/auth/truck@2x.png");
  }
  @media screen and (max-width: 560px) {
    .auth-page .auth-inner::after {
      bottom: -14%;
      right: -6%;
    }
  }
  .auth-page .logo-wrapper {
    margin-block-start: 0.5rem;
    margin-block-end: var(--mb-4);
  }
  .auth-page .logo-wrapper .home-link {
    display: flex;
    align-items: center;
    justify-content: center;
    align-content: center;
  }
  .auth-page .logo-wrapper .sh-logo {
    max-height: 2.75rem;
    object-fit: contain;
    width: auto;
  }
  .auth-page .title {
    margin-bottom: 0.25rem;
    padding-top: 0.5rem;
    color: var(--neutral-500);
  }
  .auth-page .welcome-text {
    margin-bottom: var(--mb-4);
    color: var(--auth-font-color);
    font-size: 0.875rem;
  }
  @media screen and (max-width: 387px) {
    .auth-page .welcome-text {
      font-size: 0.75rem;
    }
  }
  .auth-page .separator {
    display: flex;
    width: 100%;
    -moz-box-pack: center;
    justify-content: center;
    -moz-box-align: center;
    align-items: center;
    text-align: center;
    column-gap: 1rem;
  }
  .auth-page .separator::before, .auth-page .separator::after {
    content: "";
    border-top: 1px solid hsl(211.3, 28.4%, 84.1%);
    flex: 1 0 20px;
  }
  .auth-page .block_form .form-label, .auth-page .block_form .form-check-label {
    font-size: var(--auth-font-size);
    color: var(--auth-font-color);
  }
  .auth-page .block_form .form-label {
    margin-bottom: 0.25rem;
  }
  .auth-page .block_form .form-control::placeholder {
    color: var(--neutral-400);
  }
  .auth-page .block_form .input-block {
    margin-bottom: var(--mb-4);
  }
  .auth-page .block_form .input-block.pswd .form-control {
    margin-bottom: 0.25rem;
  }
  .auth-page .block_form .input-block.auth-action {
    display: grid;
  }
  .auth-page .block_form .forgot-pswd {
    display: flex;
    justify-content: end;
  }
  .auth-page .sign-up-now-text {
    font-size: var(--auth-font-size);
    text-align: center;
    color: var(--auth-font-color);
  }
  .auth-page .back-sign-in {
    color: var(--auth-font-color);
    font-size: var(--auth-font-size);
    text-align: center;
  }
  .auth-page .sh-footer {
    --auth-font-size: 0.75rem;
    --bs-body-bg: var(--page-bg);
    --bs-body-color: var(--auth-font-color);
  }
  
  .auth-page.sign-up {
    --mb-4: 1rem;
    gap: 0.5rem;
  }
  .auth-page.sign-up .auth-inner .card-body {
    padding-block: 1.5rem;
  }