src/app.css

/* Hide the standard Gradio footer */
footer {
    display: none !important;
}
/* Make the text in the input box and chat label bigger */
textarea, .wrapper > label {
    font-size: var(--text-md)
}
.input-container {
    align-items: center;
}
/* Make the chat label bold */
.wrapper > label {
    font-weight: bold;
}
/* Limit the overall width of the demo */
.gradio-container {
    max-width: 1200px !important;
}
/* Theme anchor links with Carbon coloring */
.gr_docs_link a {
    color: #78A9FF;
}
/* Title alignment with the Granite icon */
.gr_title {
    display: flex;
    align-items: center;
    margin-bottom: -0.5rem;
}
.gr_title img {
    height: 42px;
    width: 42px;
    margin-right: 1rem;
    filter: invert(0%) sepia(0%) saturate(7459%) hue-rotate(154deg) brightness(96%) contrast(100%);
}
.gr_title h1 {
    margin: auto !important;
}
/* Color the Granite icon in white for dark mode */
@media (prefers-color-scheme: dark) {
    .gr_title img {
        filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(162deg) brightness(101%) contrast(104%);
    }
}
/* Only one form on the page, within the Accordion component */
.form {
    flex-direction: row;
    background-color: var(--block-background-fill);
}
.gr_accordion_element {
    width: 50%;
    margin: 0px;
}
/* Centre the example text within the example box */
.example-text-content {
    margin-top: auto;
    margin-bottom: auto;
}
/* Centre the values in advanced settings */
.tab-like-container  {
    align-items: center;
}