/* Set full height and center the login wrapper */
    body,
    html {
        height: 100%;
        margin: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #f8f9fa; /* Light gray background for the page */
    }

    /* Main login container styling */
    .login-wrapper {
        display: flex;
        flex-direction: row; /* Side-by-side layout: form + image */
        background: #fff;
        border-radius: 15px; /* Rounded corners */
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Subtle shadow */
        overflow: hidden;
        width: 900px;
        height: 500px;
    }

    /* Left section: Login form */
    .login-form-section {
        flex: 1; /* Takes half of the width */
        padding: 40px; /* Inner spacing */
    }

    /* Right section: Login image */
    .login-image-section {
        flex: 1; /* Takes half of the width */
        display: flex;
        justify-content: center;
        align-items: center; /* Center image vertically and horizontally */
        background: #f0f2f5; /* Slight gray background for image section */
    }

    /* Image styling */
    .login-image-section img {
        width: 450px;
        height: 100%;
        object-fit: cover; /* Make image cover container without distortion */
    }

    /* Brand logo text */
    #logoName {
        font-size: 2.3rem;
        font-weight: bold;
        color: rgb(35, 38, 40);
    }

    /* Welcome text */
    #welcome {
        font-size: 1.5rem;
        color: rgb(29, 155, 239); /* Blue color */
        padding-left: 20px;
    }

    /* Login instruction line */
    #loginLine {
        font-size: 1.1rem;
        color: black;
        font-weight: bold;
        margin-top: 20px;
    }

    /*Icons inside input fields  */

    /* Make wrapper relative so icons can be absolutely positioned */
    .position-relative {
        position: relative;
    }

    /* Left icon (inside input) */
    .input-icon-left {
        position: absolute;
        top: 50%; /* Vertically center */
        left: 12px; /* Distance from left edge */
        transform: translateY(-50%); /* Perfect vertical centering */
        color: #6c757d; /* Gray icon color */
    }

    /* Right icon (inside input) */
    .input-icon-right {
        position: absolute;
        top: 50%; /* Vertically center */
        right: 12px; /* Distance from right edge */
        transform: translateY(-50%);
        color: #6c757d; /* Gray icon color */
        cursor: pointer; /* Pointer on hover to indicate click */
    }

    /* Extra left padding for input text so it doesn't overlap left icon */
    .input-padding-left {
        padding-left: 40px !important;
    }

    /* Extra right padding for input text so it doesn't overlap right icon */
    .input-padding-right {
        padding-right: 40px !important;
    }

    /* Additional class for icon spacing, not critical */
    .icon {
        margin-top: 15px; /* Slight vertical offset */
    }

    #popupAlert {
  text-align: center;     /* center the text */
  
  padding: 8px 15px;      /* reduce height */
  border: none !important;/* remove border */
  border-radius: 4px;     /* optional smooth corners */
  font-size: 16px;        /* smaller text */
}