/* Fixed to the top */
#root {
    /* min-height: 1575px; 
    padding-top: 4.5rem;
    border-right: 1px solid var(--jl-border); */
}
.jl-navbar {
    width: 1911px;
    right: unset;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    padding: var(--jl-padding-m) 0 var(--jl-padding-xs) 0;
    z-index: 20;
    border-bottom: 2px solid var(--jl-border-nav);
    border-right: 1px solid var(--jl-border);
    background: var(--jl-bg-dark);

    & .container {
        display: flex;
        flex-wrap: inherit;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding-right: var(--jl-padding-s);
        padding-left: var(--jl-padding-s);
        margin-right: auto;
        margin-left: auto;
        box-sizing: border-box;
    
        & div {
            display: flex !important;
            flex-basis: auto;
            flex-grow: 1;
            align-items: center;
        }
    }

    & ul {
        list-style-type: none !important;
        margin: 0 !important;
        padding: 0;
        padding-inline-start: 0 !important;
        overflow: hidden;
        background-color: var(--jl-bg-dark);
    }

    & li {
        float: left;

        & span {
            display: inline-flex;
            align-items: center;
            margin-left: var(--jl-margin-l);
            & svg {
                fill: var(--jl-link);
            }
        }
        & span:has(a.active) {
            & svg {
                fill: var(--jl-text);
            }
        }
    }
      
    & li a {
        display: block;
        font-size: var(--jl-font-l) !important;
        font-weight: bold;
        color: var(--jl-link);
        text-align: center;
        margin-left: var(--jl-margin-xs);
        text-decoration: none;
        padding-block: var(--jl-padding-xxs);
    }
    
    & li a.active {
        font-weight: 700;
        color:var(--jl-text) !important;
        border-bottom: 2px solid var(--jl-text);
    }

    & li a:hover:not(.active) {
        border-bottom: 2px solid var(--jl-link);
    }

    & a {
        padding-bottom: 0px;
    }

}
.navbar-brand {
    font-weight: 700;
    font-size: calc(1.5 * var(--jl-base-font-size));
    color: var(--jl-brand) !important;
    text-decoration: none;
}

.navbar-brand:hover {
    color: var(--jl-brand-secondary) !important;
    text-decoration: none;
}