.app-title {
    font-weight: 600;
}
body {
    --mid-gray: 164, 164, 192;
    --topbar-height: 56px !important;
}
[data-mantine-color-scheme="dark"] body {
    --mantine-color-body: #09092b;
}
.sidebar-slot.bottom-slot {
    flex-direction: row-reverse !important;
    align-items: center;
    justify-content: space-between;
}
header#main-header {
    background: #f5f5ff;
    padding: 0 2rem !important;
}
[data-mantine-color-scheme="dark"] header#main-header {
    background: #262630;
}
div#header-logo {
    height: 24px;
    width: 24px;
    margin-right: 0.25rem;
}
div#_pages_content {
    padding: 1.5rem 2rem !important
}

.markdown-div {
    border-left: 4px solid var(--mantine-color-orbitPrimary-light-color);
    border-radius: 0 4px 4px 0;
    background-color: rgba(var(--mid-gray), 0.1);
    width: 100%;
    margin: 0.5rem 0;
    padding: 0.5rem 0.5rem;
    max-width: 65ch;
    margin: 1.5rem auto 0;
    min-height: 150px;
    display: grid;
    place-items: center;
}
.markdown-div.green{
    border-left: 4px solid green;
}
.markdown-div.orange{
    border-left: 4px solid orange;
}
.markdown-div.red{
    border-left: 4px solid red;
}
.hidden {
    display: none;
}
#main-header {
    z-index: 2 !important; /* So that Library menu appears on top of the page contents */
}
#content-scroll {
    z-index: 1;
}

/* Plotly light/dark mode styling */
body {
    --graph-text-color: #333;
    --graph-legend-bg: rgba(255, 255, 255, 0.9);
}
[data-mantine-color-scheme="dark"] body {
    --graph-text-color: #eee;
    --graph-legend-bg: rgba(16, 16, 16, 0.9);
}
div.plotly svg.main-svg text {
    fill: var(--graph-text-color) !important;
}
div.plotly g.legend rect.bg,
div.plotly g.annotation-text-g rect.bg,
div.plotly g.button rect.selector-rect {
    fill: var(--graph-legend-bg) !important;
    fill-opacity: 1 !important;
}

.tooltip-wrapper {
    margin-top: -2px;
}
.tooltip-wrapper > div {
    display: flex;
    align-items: center;
}

#__avatar > div {
    display: flex;
}
.markdown-update p {
    margin: 0.5rem 0 0;
    max-width: 80ch;
}
img {
    max-width: 100%;
}
.markdown-update img {
    display: block;
    margin: 0.5rem 0 0;
}
.mantine-Notifications-root[data-position="top-right"],
.mantine-Notifications-root[data-position="top-left"] {
    transform: translateY(var(--topbar-height));
}
.hover-visible {
    opacity: 0;
    transition: opacity 150ms;

    *:hover > & {
        opacity: 0.5;
    }
    &:hover {
        opacity: 1;
    }
}

#breakpoints-layout-wrapper:has(#_pages_content:empty) {
    opacity: 0;
}