/* Custom CSS for Chainlit UI */

/* Hide the orange background on login page */
.relative.hidden.bg-muted.lg\\:block.overflow-hidden {
    display: none !important;
}

/* Alternative approach if the above doesn't work */
div[class*="lg:block overflow-hidden"] {
    display: none !important;
}

/* Hide any image with favicon in the URL */
img[src*="favicon"] {
    display: none !important;
}

/* Make sure the parent container doesn't show the background either */
div.grid.h-screen.overflow-hidden.grid-cols-1.lg\\:grid-cols-2.\\32 xl\\:grid-cols-3>div:nth-child(2) {
    background: none !important;
}

/* Make login form fill the screen */
.grid.min-h-svh.lg\\:grid-cols-2 {
    grid-template-columns: 1fr !important;
    /* Override the 2-column layout */
}

/* Expand the login form container */
.flex.flex-col.gap-4.p-6.md\\:p-10 {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100%;
    max-width: 100%;
}

/* Make the form wider */
.flex.flex-1.items-center.justify-center .w-full.max-w-xs {
    max-width: 400px !important;
}

/* Center the logo */
.flex.justify-center.gap-2.md\\:justify-start {
    justify-content: center !important;
}