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

    &>.auth-container {
        display: grid;
        grid-template-columns: 1.75fr 1fr;
        max-width: 1400px;
        height: 70vh;
        max-height: 1000px;
        min-height: 700px;
        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: 1440px) {
    main.auth {

        &>.auth-container {
            grid-template-columns: 1.5fr 1fr;
            max-height: none;
            max-width: none;
            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) {}