@page "/login"
@layout EmptyLayout

<div class="login-page">
    <div class="login-container">
        <LoginCard />
    </div>
</div>

<style>
    html, body {
        margin: 0 !important;
        padding: 0 !important;
        height: 100% !important;
        overflow: hidden !important;
    }

    #app {
        height: 100% !important;
    }

    .login-page {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        margin: 0;
        padding: 0;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('_content/Bimix.UI.Shared/images/login-background.jpg') no-repeat center;
        background-size: cover;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .login-container {
        padding: 20px;
        width: 100%;
        max-width: 450px;
    }

</style>