:root {
    /* sizes */
    --base-header-height: 3.5rem;
    --base-nav-menu-width: 297px;
    --base-nav-menu-font-size: 1rem;
    --base-primary-icon-font-size: 1.4em;
    --base-icon-container-width: 48px;
    --base-submenu-item-active-before-left: 34px;
    --base-nav-menu-header-height: var(--base-header-height);
    /* colors */
    --base-header-bg-color: #f7f7f7;
    --base-header-border-color: #d6d5d5;
    --base-nav-menu-color: rgb(50, 49, 48);
    --base-nav-menu-bg-color-hover: rgb(233, 236, 239);
    --base-nav-wrapper-bg-color: #f9f9f9;
    --base-nav-container-color: var(--base-nav-menu-color);
    --base-nav-menu-header-bg-color: var(--base-header-bg-color);
    --base-primary-icon-color: var(--base-nav-menu-color);
    --base-nav-link-active: rgb(220, 220, 220);
}

    :root .dark {
        --base-header-bg-color: rgb(72, 72, 72);
        --base-header-border-color: #d6d5d5;
        --base-nav-menu-color: rgb(237, 237, 237);
        --base-nav-menu-bg-color-hover: rgb(72, 72, 72);
        --base-nav-wrapper-bg-color: rgb(33, 33, 33);
        --base-nav-container-color: var(--base-nav-menu-color);
        --base-nav-menu-header-bg-color: var(--base-header-bg-color);
        --base-primary-icon-color: var(--base-nav-menu-color);
        --base-nav-link-active: #3b3a39;
    }


.btn-nav-brand-toggle {
    font-size: 1.1rem;
    font-weight: 500;
    white-space: nowrap;
    padding-left: 0;
}

.btn-nav-menu-toggle:focus,
.btn-nav-brand-toggle:focus {
    box-shadow: none;
}

.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--base-header-height);
    background-color: var(--base-header-bg-color);
    border-bottom: 1px solid var(--base-header-border-color);
    position: sticky;
    top: 0;
    z-index: 6;
}

    .header .header-left {
        display: flex;
        align-items: center;
    }

    .header .header-middle {
        display: flex;
        align-items: center;
        overflow: hidden;
    }

    .header .header-right {
        display: flex;
        align-items: center;
        margin-right: 1rem;
    }

.offcanvas-nav-menu {
    width: var(--base-nav-menu-width);
    /*transition: transform 0.1s ease-in-out;*/
    transition: none;
}

    .offcanvas-nav-menu .offcanvas-header {
        padding: 0;
        height: var(--base-nav-menu-header-height);
        min-height: var(--base-nav-menu-header-height);
        background-color: var(--base-nav-menu-header-bg-color);
        border-bottom: 1px solid var(--base-header-border-color);
        cursor: pointer;
    }

    .offcanvas-nav-menu .offcanvas-body {
        background-color: var(--base-nav-wrapper-bg-color);
        padding: 0;
    }

.nav-wrapper {
    overflow: hidden auto;
    height: 100%;
}

.nav-container {
    width: 100%;
    color: var(--base-nav-container-color);
    overflow: hidden auto;
    user-select: none;
}

.navGroup-179 {
    margin: 0px;
    padding: 0px;
    list-style: none;
}

.navItem-421 {
    margin: 0px;
    padding: 0px;
}

.icon-container {
    display: flex;
    flex: 0 0 var(--base-icon-container-width);
    align-items: center;
    justify-content: center;
    color: var(--base-primary-icon-color);
}

    .icon-container .primaryIcon {
        font-size: var(--base-primary-icon-font-size);
    }

.root-422,
.root-434 {
    -webkit-font-smoothing: antialiased;
    font-size: var(--base-nav-menu-font-size);
    font-weight: inherit;
    outline: transparent;
    position: relative;
    min-height: 40px;
    color: var(--base-nav-menu-color);
    text-decoration: none;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    cursor: pointer;
    width: 100%;
    background: transparent;
    border: none;
    padding: 0px;
    text-align: inherit;
    height: 40px;
}

    .root-422:hover,
    .root-434:hover {
        background-color: var(--base-nav-menu-bg-color-hover);
    }

.root-434 {
    min-height: 32px;
    height: 32px;
}

.root-187 {
    display: flex;
}

    .root-187.active {
        background-color: var(--base-nav-link-active);
        font-weight: 500;
    }

      /*  .root-187.active .icon-container::before {
            content: " ";
            position: absolute;
            left: 4px;
            width: 4px;
            height: 24px;
            background-color: rgb(0, 120, 212);
            opacity: 1;
            transition: opacity 300ms ease 0s;
        }

        .root-187.active .root-434 .icon-container::before {
            left: var(--base-submenu-item-active-before-left);
            height: 16px;
            top: 7px;
        }*/



        .root-422.active .icon-container::before {
            left: var(--base-submenu-item-active-before-left);
            height: 16px;
            top: 7px;
            content: " ";
            position: absolute;
            left: 4px;
            width: 4px;
            height: 24px;
            background-color: rgb(0, 120, 212);
            opacity: 1;
            transition: opacity 300ms ease 0s;
        }


.text-185 {
    flex: 1 1 auto;
    text-overflow: ellipsis;
    overflow-x: hidden;
    white-space: nowrap;
    color: var(--base-nav-menu-color);
    pointer-events: none;
}

.root-422.active .text-185 {
    color: rgb(0, 120, 212);
}

.secondaryIcon-190,
.secondaryIcon-433 {
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    font-style: normal;
    font-weight: normal;
    color: var(--base-nav-menu-color);
    transition: transform 200ms ease 0s;
    text-align: center;
    flex: 0 0 48px;
}

.secondaryIcon-190 {
    font-size: 12px;
}

.nestedNavLinksWrapper {
    animation-name: css-0, css-13;
    animation-duration: 0.367s;
    animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
    animation-fill-mode: both;
}

    .nestedNavLinksWrapper.collapsed {
        display: none;
    }

.nestedNavLinks {
    padding: 0px;
    list-style: none;
}

@keyframes css-0 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes css-13 {
    0% {
        transform: translate3d(0px, -20px, 0px);
        pointer-events: none;
    }

    100% {
        transform: translate3d(0px, 0px, 0px);
        pointer-events: auto;
    }
}