/* LogonTemplateStyles.css */

/* Ensure the component takes full height */
#logon-template-component {
    height: 100vh;
    background-image: url('/images/background.jpg'); /* Replace with your image path */
    background-size: cover;
    background-position: center;
}

/* Left Column Styles */
.left-column {
    flex: 1;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent overlay for better text readability */
    overflow-y: auto;
}

/* Right Column Styles */
.right-column {
    flex: 1;
    background-color: rgba(255, 255, 255, 0.9); /* Slightly opaque background for the login box */
}

/* Adjust links to be visible on the dark background */
.left-column a {
    color: #FFD700; /* Gold color for links */
    text-decoration: underline;
}

    .left-column a:hover {
        color: #FFA500; /* Darker gold on hover */
    }

/* Responsive Design */
@media (max-width: 768px) {
    .logon-template-body {
        flex-direction: column;
    }

    .left-column, .right-column {
        flex: none;
        width: 100%;
    }

    .left-column {
        height: 200px; /* Adjust as needed */
    }
}