:root {
    --primary-color: rgb(229, 9, 20);
    --primary-hover: var(--mantine-primary-color-filled-hover);
    --on-primary: rgba(254, 254, 254, 1);

    --secondary-color: rgba(255, 173, 173, 1);
    --secondary-hover: rgba(193, 195, 235, 1);
    --on-secondary: rgba(0, 0, 0, 1);

    --background-color: rgba(254, 254, 254, 1);
    --background-hover: rgb(165, 165, 165);
    --on-background: rgba(0, 0, 0, 1);

    --sidebar-background-color: linear-gradient(315deg, #0e0e0e 0%, #0e0e0e 74%);
    /* --sidebar-background-color: rgb(34, 31, 31); */
    --sidebar-background-hover: var(--primary-hover);
    --on-sidebar-background: rgba(254, 254, 254, 1);
    --sidebar-active: var(--primary-color);
    --on-sidebar-active: var(--on-primary);
    --sidebar-padding-y: 1rem;
    --sidebar-padding-x: 1rem;
    --sidebar-padding: var(--sidebar-padding-x) var(--sidebar-padding-y);
    --sidebar-logos-margin-top: 8px;

    --graph-card-color: rgba(254, 254, 254, 1);
    --space-between-cards: 20px;

    /* If used with Plotly, you need to change the plotly font in python code. */
    --font-global: "Inter", "Arial", sans-serif;
    --font-title: "Poppins";
}


@media (min-width: 992px) {
    :root {
        --app-shell-header-offset: 0px !important;
    }
}

body {
    background-color: var(--background-color);
    color: var(--on-background);
}



@media (min-width: 992px) {
    .page-main-content-container {
        padding-top: 36px;
        padding-bottom: 24px;
        width: 90%;
        margin: auto;
    }
}


@media (max-width: 992px) {
    .page-main-content-container {
        padding: 8px;
        width: 100%;
    }
}

.header-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    max-height: calc(48px + 48px + var(--sidebar-padding-y) + var(--sidebar-logos-margin-top) + 1rem);
    /* 48px (insight logo height -not into sidebar header anymore but we keep the space-), 48px (brand logo height),
    sidebar-padding-y, sidebar-logos-margin-top, 1rem (margin of the divider) */
}

.header-title {
    margin: 0;
    /* Remove default margin */
}

.header-container img {
    width: 100%;
    object-fit: cover;
    max-height: inherit;
}

/* AG Grid theme */
.ag-theme-material {
    --ag-font-family: var(--font-global) !important;
    --ag-material-accent-color: var(--primary-color) !important;
    --ag-background-color: var(--background-color) !important;
    /* Table background in the same color as our cards */
    /* --ag-background-color: rgba(0, 0, 0, 0) !important;  */
    /* Transparent background */
    --ag-header-background-color: rgba(0, 0, 0, 0) !important;
}


/* App language dropdown */
#app-language-dropdown div div div .Select-value {
    display: flex;
    align-items: center;
}