* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: 'Segoe UI', sans-serif;
    overflow: hidden;
}

.login-page {
    min-height: 100vh;
    display: flex;
    width: 100%;
}

.login-left {
    width: 75%;
    min-height: 100vh;
    background-image: url('/images/LoginBG.png');
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
}

.login-right {
    width: 25%;
    min-height: 100vh;
    display: flex;
    align-items: stretch;
    justify-content: center;
    padding: 0;
    background: rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.login-card {
    width: 100%;
    max-width: none;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2rem 2.5rem;
    background: rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow: -8px 0 30px rgba(80, 149, 25, 0.75), -2px 0 10px rgba(80, 149, 25, 0.5), inset 1px 0 1px rgba(255, 255, 255, 0.25);
    animation: fadeInSlide 0.7s ease-in-out;
    color: #306e00;
}

.logo {
    display: block;
    margin: 0 auto 1rem;
    width: 150px;
    height: auto;
}

.login-card .form-label,
.login-card p,
.login-card h1,
.login-card h2,
.login-card h3,
.login-card h4,
.login-card h5,
.login-card h6 {
    color: #306e00;
    text-shadow: 0 0 4px rgba(92, 116, 73, 0.8), 0 0 10px rgba(92, 116, 79, 0.5);
}

.btn-primary {
    --bs-btn-bg: #abf76e !important;
    --bs-btn-border-color: #abf76e !important;
    --bs-btn-hover-bg: #4da10a !important;
    --bs-btn-hover-border-color: #509519 !important;
    --bs-btn-active-bg: #509519 !important;
    --bs-btn-active-border-color: #509519 !important;
}

.login-color-btn {
    color: #064e3b !important;
    text-shadow: 0 0 4px rgba(92, 116, 73, 0.8), 0 0 10px rgba(92, 116, 79, 0.5);
}

    .login-color-btn:hover,
    .login-color-btn:focus,
    .login-color-btn:active {
        color: white !important;
    }

.txt-danger {
    color: red !important;
}

@@keyframes fadeInSlide {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@@media (max-width: 768px) {
    body {
        overflow: auto;
    }

    .login-page {
        display: block;
    }

    .login-left {
        width: 100%;
        min-height: 100vh;
        padding: 1rem;
    }

    .login-right {
        display: none;
    }

    .login-card {
        width: 100%;
        max-width: none;
        min-height: 100vh;
    }
}