body {
    background-color: #f8f9fa;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.login-container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

.login-card {
    width: 100%;
    max-width: 960px; /* Increased max-width for the two-column layout */
    border-radius: 1rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    overflow: hidden; /* Important for keeping the rounded corners */
    border: none;
}

.login-branding {
    background: linear-gradient(to top, #005a4d, #009688); /* Green gradient */
    color: white;
    padding: 4rem 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.login-branding-logo {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 4px solid #ffffff;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.login-branding h2 {
    font-weight: 300;
    margin-bottom: 0.5rem;
}

.login-branding p {
    font-size: 1.1rem;
    opacity: 0.9;
}

.login-form-container {
    padding: 3rem;
}

.form-control:focus {
    border-color: #009688;
    box-shadow: 0 0 0 0.25rem rgba(0, 150, 136, 0.25);
}

.btn-primary {
    background-color: #009688;
    border-color: #009688;
    padding: 0.75rem;
    font-weight: 600;
}

    .btn-primary:hover {
        background-color: #007a6e;
        border-color: #007a6e;
    }

.field-icon {
    float: right;
    margin-left: -25px;
    margin-top: -30px; /* Adjust this to vertically center the icon */
    position: relative;
    z-index: 2;
    cursor: pointer;
    color: #aaa;
}

.footer-custom {
    background-color: #ffffff; /* Make footer match the login card background */
}
/*.small-text-links {
    font-size: 1rem;*/ /* Increase font size from 'small' */
/*}

    .small-text-links a {
        font-weight: 600;*/ /* Make links bold */
        /*font-size: 1.2rem;
    }*/

.form-check-label {
    font-weight: 600; /* Make 'Remember Me' bold */
    font-size: 1rem; /* Increase 'Remember Me' font size */
}
.form-group.full-width-button {
    padding: 0;
}

/* Forces the button to be 100% wide */
.btn-login {
    width: 100%;
    padding: 0.75rem;
    font-weight: 600;
}

/* This creates a container for the password input and icon */
.password-wrapper {
    position: relative;
}

    /* This positions the eye icon absolutely *inside* the wrapper */
    .password-wrapper .field-icon {
        position: absolute;
        top: 50%;
        right: 15px; /* Adjust spacing from the right edge */
        transform: translateY(-50%); /* Perfectly centers the icon vertically */
        z-index: 100;
        cursor: pointer;
        color: #888; /* A slightly darker color for better visibility */
    }