main.auth {
  display: grid;
  height: 100dvh;
  place-items: center;

  & > .auth-container {
    display: grid;
    grid-template-columns: 1.75fr 1fr;
    max-width: 1400px;
    height: 60vh;
    max-height: 575px;
    min-height: 475px;
    align-items: center;
    margin: 0 2rem;
    transition: all 400ms;
    transition-behavior: allow-discrete;
    interpolate-size: allow-keywords;

    & > div {
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      gap: 1.5rem;

      &:first-child {
        background-color: var(--bs-primary);

        & > div:not(.saprator) {
          width: 100%;
        }

        & .chmsu-brand {
          display: flex;
          gap: 0.5rem;
          align-items: center;

          & img {
            border: 1px solid white;
            border-radius: 50%;
          }

          & h1 {
            display: block;
            text-transform: uppercase;
            margin: 0;
            line-height: 1;
            font-weight: 600;
            font-size: 2.375rem;
            text-align: center;
            white-space: nowrap;

            & span {
              display: block;
              font-size: 0.535em;
            }
          }
        }

        & .system-title {
          h1 {
            color: white;
            margin: 0;
            text-wrap-style: balance;
            text-transform: uppercase;
            font-size: 2.6rem;
            line-height: 1.15;
            font-weight: 700;

            & span {
              color: color-mix(in srgb, transparent, white 70%);
              font-weight: normal;

              &:last-child {
                font-size: 0.5em;
              }
            }
          }
        }

        & .system-description {
          p {
            color: white;
          }
        }

        & h4 {
          margin: 0;
        }
      }

      &:last-child {
        overflow: hidden;

        & > .auth-form {
          width: 100%;
          max-width: 375px;
          position: relative;
          height: 100%;
          min-height: 500px;
          display: grid;
          align-items: center;

          & > div {
            background-color: white;
            position: absolute;
            left: 0;
            right: 0;
            transition: all 800ms;
            transition-behavior: allow-discrete;
            opacity: 1;

            &.show {
              transform: translateX(0%);

              @starting-style {
                opacity: 0;
                transform: translateX(-120%);
              }
            }

            &.hide {
              transform: translateX(120%);
              opacity: 0;

              @starting-style {
                opacity: 1;
                transform: translateX(0%);
              }
            }
          }
        }
      }
    }
  }
}

.saprator {
  position: relative;
  display: flex;
  align-self: center;
  justify-content: center;

  & > span {
    font-size: 0.875rem;
    padding: 8px 24px;
    background: var(--bs-card-bg);
    z-index: 5;
    text-transform: capitalize;
    color: var(--pc-heading-color);
    font-weight: 500;
  }

  &::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--bs-border-color);
    z-index: 1;
  }
}

@media screen and (max-width: 1200px) {
  main.auth {
    & > .auth-container {
      grid-template-columns: 1.5fr 1fr;
      max-height: none;
      max-width: none;
      width: 100%;
      height: 100%;
      border: none;
      margin: 0px;
      border-radius: 0 !important;
    }
  }
}

@media screen and (max-width: 1024px) {
  main.auth {
    height: auto;

    & > .auth-container {
      grid-template-columns: 1fr;
      min-height: max-content;
      height: 100vh;
      width: 100%;

      & > div {
        &:first-child {
          & > div {
            text-align: center;
            justify-content: center !important;
            align-self: unset !important;
            flex-direction: column;
          }
        }

        &:last-child {
          overflow: unset;
        }
      }
    }
  }
}

@media screen and (max-width: 768px) {
  main.auth {
    & > .auth-container {
      grid-template-rows: auto 1fr;

      & > div {
        padding: 1rem 3rem !important;

        &:first-child {
          padding: 1.25rem 1rem !important;
          gap: 0.75rem;

          & .chmsu-brand {
            & img {
              width: 60px;
              height: 60px;
            }

            & h1 {
              display: none;
            }
          }

          & .system-title {
            h1 {
              font-size: 1.75rem;
            }
          }

          & .system-description {
            display: none;

            & + div {
              display: none;
            }
          }

          .saprator {
            display: none;
          }
        }
      }
    }
  }
}

.input-group {
  & input:has(+ button) {
    & + button {
      border-radius: 0 8px 8px 0;
      min-width: 56.5px;
      border: 1px solid #bec8d0;
      border-left: 0;
      display: grid;
      place-items: center;
    }
  }
}

/* .modal.show {
  display: grid;
  place-content: center;
} */

#loadingModal {
  & .ti-loader {
    aspect-ratio: 1;
    animation: spin 4s linear infinite;

    &::before {
      display: block;
      margin-top: -4px;
    }
  }

  & p {
    & span {
      display: inline-block;
      font-family: monospace;
      width: 0ch;
      padding-left: 0.25ch;
      overflow: clip;
      animation: loadingDots 4s infinite;
    }
  }
}

#customConfirmModal,
#customAlertModal {
  z-index: 2000;

  & .modal-content {
    & .modal-body {
      text-align: center;
      min-height: 100px;
      font-size: 1rem;
      font-weight: 500;
      display: grid;
      place-content: center;
    }

    & .modal-footer {
      border: none;
      padding: 0 0.25rem 0.25rem 0.25rem;

      & button {
        flex-grow: 1 !important;
        margin-top: 0;
      }
    }
  }
}

.modal-backdrop.show + .modal-backdrop.show {
  z-index: 1999;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes loadingDots {
  0% {
    width: 0ch;
    opacity: 1;
  }

  15% {
    width: 1.25ch;
  }

  30% {
    width: 2.25ch;
  }

  45% {
    width: 3.25ch;
  }

  70% {
    opacity: 1;
  }

  80% {
    width: 3.25ch;
    opacity: 0;
  }

  99% {
    width: 0ch;
    opacity: 0;
  }

  100% {
    width: 0ch;
    opacity: 1;
  }
}

@media screen and (max-width: 480px) {
}