/* Basic page setup */
body, html {
    height: 100%;
    margin: 0;
    overflow: hidden;
    font-family: sans-serif;
}

/*
 * The main container now holds your single, split-screen background image.
 */

.login-page-container {
    width: 100%;
    height: 100%;
    /* !!! IMPORTANT: UPDATE THIS with the path to your new split image !!! */
    background-size: cover; /* Ensures the image covers the entire screen */
    
    /* These lines will position your login form on the right side */
    display: flex;
    align-items: center;     /* Vertically centers the form */
    justify-content: flex-end; /* Pushes the form to the right */
}

/*
 * We no longer need the left panel, so we hide it.
 */
.login-image-panel {
    display: none;
}

/*
 * This is the container for the form content on the right.
 */
.login-form-panel {
    flex: 0 0 50%; /* Takes up the right 50% of the screen */
    display: flex;
    justify-content: center;
    align-items: center;
}

/*
 * This is the form itself. It has no background or shadow
 * so it appears to sit directly on your image's white half.
 */
.login-form-content {
    width: 100%;
    max-width: 600px;
    background: transparent;
    padding: 2rem; /* Adds some spacing */
    position: relative;
    left: 96px;
}

.main-logo {
    max-width: 280px;
    height: auto;
}

/* Input Group Styling */
.input-group-text {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-right: none;
}

.form-control {
    border-left: none;
}

.form-control:focus {
    box-shadow: none;
    border-color: #ced4da;
}

/* Bottom Links Styling */
.bottom-links {
    display: flex;
    justify-content: space-between;
    margin-top: 25px;
}

.bottom-links a {
    color: black;
    text-decoration: none;
    font-size: 14px;
}
.bottom-links a:hover {
    color: #dc3545;
}
.text-secondary {
    color: rgb(0 0 0) !important;
    font-weight: bold;
}
.btn-danger:hover {
    color: black;
    background-color: white;
    border-color: black;
}
/*
* register page
*/

/* Allows the form content to scroll if it's too long for the screen */
.login-form-content .register-form-content {
    max-height: 90vh; /* Max height is 90% of the viewport height */
    overflow-y: auto; /* Add a scrollbar only when needed */
}

/* Style for the text labels in the registration form */
.login-form-content .input-group-text {
    width: 39px; /* Gives all labels a consistent width */
    justify-content: flex-start;
}
.register-form-content {
    justify-content: flex-start;
    padding-top: 50px;
}

/* Style for the checkbox section */
.login-form-content .form-check .register-form-content {
    text-align: left;
    padding-left: 2.5em;
}
.text-center {
    color: black;
    font-weight: bold;
}
}