/* 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-xs) 0 var(--jl-padding-xxs) 0;  */
    padding: 7px 0 3px 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-top: var(--jl-padding-xxs);;
        margin-bottom: var(--jl-padding-xxs);
        margin-right: auto;
        margin-left: auto;
        box-sizing: border-box;


        & div.nav-section {
            padding: 0px 15px 0px 15px; 

            & .section-title {
                display: flex;
                align-items: center;
                font-weight: bold;
                color: var(--jl-text-light);
                font-size: var(--jl-font-l);
                text-align: left;
                gap: var(--jl-padding-xs);
            }
            
            & .nav-item {
                background-color: var(--jl-bg-dark);
                float: left;
                display: inline-flex;
                height: 20px; 
                align-items: center;
            }

            & .nav-item a {
                text-align: center;
                margin-right: var(--jl-margin-s);
                text-decoration: none;
                padding: var(--jl-padding-xs) 0 var(--jl-padding-xxs) 0;
                margin-bottom: var(--jl-padding-xxs);
                border-bottom: 2px solid var(--jl-bg-dark);

                & svg {
                    margin-right: var(--jl-margin-xxs)
                }
            }

            & .nav-item a.nav-link {
                font-size: var(--jl-font-xs) !important;
                font-weight: 700;
                color: var(--jl-link);
                margin-bottom: 3px;
                margin-left: 2px;
            }
            & .nav-item a.nav-help-center {
                font-size: var(--jl-font-l) !important;
                font-weight: 700;
                color: var(--jl-link);
                border-bottom: 2px solid var(--jl-bg-dark);
                margin-top: 1px !important;
                margin-left: 0px !important;
            }
    
            
            & .nav-item a.active {
                color:var(--jl-text) !important;
            }

            & a {
                padding-bottom: 0px;
            }
           
        }
        & div.nav-section-separator {
            padding: 0px 0px 0px 40px; 
        }
        & div.nav-section-tool {
            padding: 0px 40px 0px 0px; 

            & .nav-item {
                background-color: var(--jl-bg-dark);
                float: left;
                display: inline-flex;
                height: 20px; 
                align-items: center;
            }

            & .nav-item a {
                text-align: center;
                margin-right: var(--jl-margin-s);
                text-decoration: none;
                padding: var(--jl-padding-xs) 0 var(--jl-padding-xxs) 0;
                margin-bottom: var(--jl-padding-xxs);
                border-bottom: 2px solid var(--jl-bg-dark);

                & svg {
                    margin-right: var(--jl-margin-xxs)
                }
            }

            & .nav-item a.active {
                color:var(--jl-text) !important;
            }


            & .nav-item a.nav-link {
                font-size: var(--jl-font-l) !important;
                font-weight: 700;
                color: var(--jl-link);
                margin-bottom: 3px;
                margin-left: 4px;
            }
        }

        & a:hover {
            color:var(--jl-text) !important;
        }
    }

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

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