.loginWrapper {
    display: flex;
    min-height: 100%;
    flex: 1 1 0%;
    flex-direction: column;
    justify-content: center;
    padding-top: 3rem;
    padding-bottom: 3rem;
}

@media (min-width: 640px) {
    .loginWrapper {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .loginWrapper {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}


.loginHeader {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 28rem;

    .logo {
        /* gx  */
        margin-left: auto;
        margin-right: auto;
        /* nh  */
        height: 2.5rem;
        /* tm */
        width: auto;
    }

    .title {
        /* lk  */
        margin-top: 1.5rem;
        /* avk  */
        text-align: center;
        /* avq  */
        font-size: 1.5rem;
        line-height: 2rem;
        /* awc  */
        font-weight: 700;
        /* awr  */
        line-height: 2.25rem;
        /* aww  */
        letter-spacing: -0.025em;
        /* axu */
        --tw-text-opacity: 1;
        color: rgb(17 24 39 / var(--tw-text-opacity));
    }

    .subTitle {
        text-align: center;
        --tw-text-opacity: 1;
        color: rgb(17 24 39 / var(--tw-text-opacity));
    }
}

.signInContainer {
    /* kw  */
    margin-top: 2.5rem;
    /* bvb  */
    margin-left: auto;
    margin-right: auto;
    /* bzg  */
    width: 100%;
    /* bzn */
    max-width: 480px;

    .wrapper {
        /* alm  */
        --tw-bg-opacity: 1;
        background-color: rgb(255 255 255 / var(--tw-bg-opacity));
        /* arj  */
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        /* arr  */
        padding-top: 3rem;
        padding-bottom: 3rem;
        /* bbh  */
        --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
        --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
        /* cdg   (min-width: 640px)*/
        border-radius: 0.5rem;
        /* cer (min-width: 640px)*/
        padding-left: 3rem;
        padding-right: 3rem;

        .former > :not([hidden]) ~ :not([hidden]) {
            /* aby */
            --tw-space-y-reverse: 0;
            margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
            margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
        }

        .labeler {
            /* lu  */
            display: block;
            /* avz  */
            font-size: 0.875rem;
            line-height: 1.25rem;
            /* awd  */
            font-weight: 500;
            /* awo  */
            line-height: 1.5rem;
            /* axu */
            --tw-text-opacity: 1;
            color: rgb(17 24 39 / var(--tw-text-opacity));
        }

        .input-wrapper {
            /* lb */
            margin-top: 0.5rem;

            .inputter {
                /* lu  */
                display: block;
                /* tn  */
                width: 100%;
                /* adu  */
                border-radius: 0.375rem;
                /* afa  */
                border-width: 0px;
                /* arp  */
                padding-top: 0.375rem;
                padding-bottom: 0.375rem;
                /* axu  */
                --tw-text-opacity: 1;
                color: rgb(17 24 39 / var(--tw-text-opacity));
                /* bbm  */
                --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
                --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
                box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
                /* bbs  */
                --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
                --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
                box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
                --tw-ring-inset: inset;
                --tw-ring-opacity: 1;
                --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));                
                /* cia (min-width: 640px) */
                font-size: 0.875rem;
                line-height: 1.25rem;
                /* cic (min-width: 640px) */
                line-height: 1.5rem;
            }

            .inputter::-moz-placeholder {
                color: var(--main-border-color);
            }
            .inputter::placeholder {
                color: var(--main-border-color);
            }
            .inputter:focus {
                /* bnd  */
                --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
                --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
                box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
                /* bne  */
                --tw-ring-inset: inset;
                /* bnq  */
                --tw-ring-opacity: 1;
                --tw-ring-color: rgb(79 70 229 / var(--tw-ring-opacity));
            }
        }

        .submit-button {
            background-color: var(--primary-color);
            /* lx  */
            display: flex;
            /* tn  */
            width: 100%;
            /* ze  */
            justify-content: center;
            /* adu  */
            border-radius: 0.375rem;
            /* are  */
            padding-left: 0.75rem;
            padding-right: 0.75rem;
            /* arp  */
            padding-top: 0.375rem;
            padding-bottom: 0.375rem;
            /* avz  */
            font-size: 0.875rem;
            line-height: 1.25rem;
            /* awf  */
            font-weight: 600;
            /* awo  */
            line-height: 1.5rem;
            /* bag  */
            --tw-text-opacity: 1;
            color: rgb(255 255 255 / var(--tw-text-opacity));
            /* bbm  */
            --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
            --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
            box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
        }
        .submit-button:hover {
            background-color: var(--darker-primary-color);
        }
        .submit-button:focus-visible {
            /* box  */
            outline-style: solid;
            /* boy  */
            outline-width: 2px;
            /* bpa  */
            outline-offset: 2px;
            /* bph */
            outline-color: #4f46e5;
        }
    }
}

.middle-container {
    /* ab */
    position: relative;
    /* kw */
    margin-top: 2.5rem;

    .middle-block {
        /* aa  */
        position: absolute;
        /* ak */
        inset: 0px;
        /* lx */
        display: flex;
        /* yz */
        align-items: center;

        .sub-middle-block {
            /* tn  */
            width: 100%;
            /* afm  */
            border-top-width: 1px;
            /* afu */
            --tw-border-opacity: 1;
            border-color: rgb(229 231 235 / var(--tw-border-opacity));
        }
    }

    .continue-container {
        /* ab */
        position: relative;
        /* lx */
        display: flex;
        /* ze */
        justify-content: center;
        /* avz */
        font-size: 0.875rem;
        line-height: 1.25rem;
        /* awd */
        font-weight: 500;
        /* awo */
        line-height: 1.5rem;

        .continue-text {
            /* alm */
            --tw-bg-opacity: 1;
            background-color: rgb(255 255 255 / var(--tw-bg-opacity));
            /* arj */
            padding-left: 1.5rem;
            padding-right: 1.5rem;
            /* axu */
            --tw-text-opacity: 1;
            color: rgb(17 24 39 / var(--tw-text-opacity));
        }
    }
}

.social-sign-in-container {
    /* lk  */
    margin-top: 1.5rem;
    /* mb  */
    display: flex;

    .social-link {
        /* lx */
        display: flex;
        /* tn */
        width: 100%;
        /* yz */
        align-items: center;
        /* ze  */
        justify-content: center;
        /* zo  */
        gap: 0.75rem;
        /* adu */
        border-radius: 0.375rem;
        /* alm */
        --tw-bg-opacity: 1;
        background-color: rgb(255 255 255 / var(--tw-bg-opacity));
        /* are */
        padding-left: 0.75rem;
        padding-right: 0.75rem;
        /* aru */
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        /* avz  */
        font-size: 0.875rem;
        line-height: 1.25rem;
        /* awf  */
        font-weight: 600;
        /* axu */
        --tw-text-opacity: 1;
        color: rgb(17 24 39 / var(--tw-text-opacity));
        /* bbm */
        --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
        --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
        /* bbs */
        --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
        --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
        box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
        /* bbw */
        --tw-ring-inset: inset;
        /* bce */
        --tw-ring-opacity: 1;
        --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));

        .social-svg {
            /* nz */
            height: 1.25rem;
            /* sb */
            width: 1.25rem;
            /* aoi */
        }

        .social-text {
            /* avz  */
            font-size: 0.875rem;
            line-height: 1.25rem;
            /* awf  */
            font-weight: 600;
            /* awo */
            line-height: 1.5rem;
        }

    }

    .social-link:hover {
        /* big: hover */
        --tw-bg-opacity: 1;
        background-color: rgb(249 250 251 / var(--tw-bg-opacity));
    }
    .social-link:focus-visible {
        /* bpp */
        --tw-ring-color: transparent;
    }
}

.errorlist {
    list-style-type: circle;
    color: red;
}