/* =========================
========================= */

#topbar {

    position: fixed;

    top: var(--header-height);
    left: var(--sidebar-width);

    width: calc(100% - var(--sidebar-width));
    height: var(--topbar-height);

    background: var(--bg-topbar);

    border-bottom: 1px solid var(--border-color);

    z-index: 2100;

    transition: var(--transition);
}

#topbar.full {
    left: var(--sidebar-collapse-width);
    width: calc(100% - var(--sidebar-collapse-width));
}

/* =========================
   CONTENT
========================= */

#content {

    margin-left: var(--sidebar-width);

    padding-top: calc(var(--layout-top-spacing) + 16px);

    padding-left: 16px;
    padding-right: 16px;
    padding-bottom: 24px;

    min-height: 100vh;
    min-width: 0;

    overflow:hidden;

    transition: var(--transition);
}

#content.full {
    margin-left: var(--sidebar-collapse-width);
}

/* =========================
   OVERLAY MOBILE
========================= */

#sidebar-overlay {

    position: fixed;
    inset: 0;

    background: rgba(0,0,0,0.4);

    opacity: 0;
    visibility: hidden;

    transition: var(--transition);

    z-index: 2000;
}

#sidebar-overlay.active {
    opacity: 1;
    visibility: visible;
}