body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Tailwind's bg-gray-100 is likely already setting a background,
       but this can be a fallback or base. */
    background-color: #f7fafc; /* Equivalent to Tailwind's bg-gray-100 or a similar light gray */
}

/* Styles for the left panel which will have the background image */
.login-panel-left {
    position: relative; /* Establishes a positioning context for the ::before pseudo-element */
    background-color: #e2e8f0; /* A fallback background color (Tailwind's slate-200 or similar)
                                  This will be visible if the image fails to load or while it's loading. */
    /* Tailwind classes like 'w-full md:w-1/2 flex flex-col items-center justify-center p-8 lg:p-12 text-white'
       will handle the layout and text color. We override text color for content for better readability. */
}

/* Pseudo-element for the background image with opacity */
.login-panel-left::before {
    content: ""; /* Necessary for pseudo-elements to be generated */
    position: absolute; /* Positioned relative to .login-panel-left */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("images/mapbg.png"); 
    background-size: cover;       /* Ensures the image covers the entire panel */
    background-position: center;  /* Centers the image */
    background-repeat: no-repeat; /* Prevents the image from tiling */
    opacity: 0.3;                 /* Sets the desired opacity for the background image */
    z-index: 0;                   /* Places the pseudo-element behind the panel's actual content */
}

/* Wrapper for the content within the left panel (logo, title, form) */
.login-panel-left .left-panel-content-wrapper {
    position: relative; /* Ensures this content sits on top of the ::before pseudo-element */
    z-index: 1;         /* Higher z-index than the pseudo-element */
    width: 100%;        /* Takes full width of its designated area */
    max-width: 28rem;   /* Equivalent to Tailwind's max-w-md, adjust as needed */
    text-align: center;
}