@import '_content/Blazor.Bootstrap/Blazor.Bootstrap.7t9tbfaemk.bundle.scp.css';

/* /Pages/AuthPages/LoginPage.razor.rz.scp.css */

.login-wrapper[b-oy1epjznd9] {
    display: flex;
    justify-content: center;
    align-items: start;
    width: 100%;
}

/* Login Card */
.login-container[b-oy1epjznd9] {
    background: white;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

    .login-container h2[b-oy1epjznd9] {
        margin-bottom: 20px;
        font-size: 24px;
        color: #333;
    }

    .login-container input[b-oy1epjznd9] {
        width: 100%;
        padding: 12px;
        margin: 10px 0;
        border: 1px solid #ddd;
        border-radius: 5px;
        font-size: 16px;
        color: #333;
    }

        .login-container input[type="submit"][b-oy1epjznd9] {
            background-color: #2575fc;
            color: white;
            font-size: 16px;
            cursor: pointer;
            border: none;
            border-radius: 5px;
            padding: 14px;
            transition: background-color 0.3s;
        }

            .login-container input[type="submit"]:hover[b-oy1epjznd9] {
                background-color: #6a11cb;
            }

    .login-container .forgot-password[b-oy1epjznd9] {
        display: block;
        margin-top: 10px;
        color: #2575fc;
        text-decoration: none;
        font-size: 14px;
    }

        .login-container .forgot-password:hover[b-oy1epjznd9] {
            text-decoration: underline;
        }

    .login-container p[b-oy1epjznd9] {
        margin-top: 20px;
        font-size: 14px;
        color: #777;
    }

        .login-container p a[b-oy1epjznd9] {
            color: #2575fc;
            text-decoration: none;
        }

            .login-container p a:hover[b-oy1epjznd9] {
                text-decoration: underline;
            }

/* Image Card */
.login-image-card[b-oy1epjznd9] {
    width: 45%;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}
/* /Pages/SharedPages/Loader.razor.rz.scp.css */
.loader-wrapper[b-7133kyux7a] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* semi-transparent black background */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* Make sure it appears on top of everything */
}


.loader[b-7133kyux7a] {
    position: relative;
    width: 75px;
    height: 100px;
    background-repeat: no-repeat;
    background-image: linear-gradient(#DDD 50px, transparent 0), linear-gradient(#DDD 50px, transparent 0), linear-gradient(#DDD 50px, transparent 0), linear-gradient(#DDD 50px, transparent 0), linear-gradient(#DDD 50px, transparent 0);
    background-size: 8px 100%;
    background-position: 0px 90px, 15px 78px, 30px 66px, 45px 58px, 60px 50px;
    animation: pillerPushUp-b-7133kyux7a 4s linear infinite;
}

    .loader[b-7133kyux7a]:after {
        content: '';
        position: absolute;
        bottom: 10px;
        left: 0;
        width: 10px;
        height: 10px;
        background: #de3500;
        border-radius: 50%;
        animation: ballStepUp-b-7133kyux7a 4s linear infinite;
    }

@keyframes pillerPushUp-b-7133kyux7a {
    0%, 40%, 100% {
        background-position: 0px 90px, 15px 78px, 30px 66px, 45px 58px, 60px 50px
    }

    50%, 90% {
        background-position: 0px 50px, 15px 58px, 30px 66px, 45px 78px, 60px 90px
    }
}

@keyframes ballStepUp-b-7133kyux7a {
    0% {
        transform: translate(0, 0)
    }

    5% {
        transform: translate(8px, -14px)
    }

    10% {
        transform: translate(15px, -10px)
    }

    17% {
        transform: translate(23px, -24px)
    }

    20% {
        transform: translate(30px, -20px)
    }

    27% {
        transform: translate(38px, -34px)
    }

    30% {
        transform: translate(45px, -30px)
    }

    37% {
        transform: translate(53px, -44px)
    }

    40% {
        transform: translate(60px, -40px)
    }

    50% {
        transform: translate(60px, 0)
    }

    57% {
        transform: translate(53px, -14px)
    }

    60% {
        transform: translate(45px, -10px)
    }

    67% {
        transform: translate(37px, -24px)
    }

    70% {
        transform: translate(30px, -20px)
    }

    77% {
        transform: translate(22px, -34px)
    }

    80% {
        transform: translate(15px, -30px)
    }

    87% {
        transform: translate(7px, -44px)
    }

    90% {
        transform: translate(0, -40px)
    }

    100% {
        transform: translate(0, 0);
    }
}