: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-icon-container-bg-color: rgb(0, 120, 212);
    --base-submenu-item-active-before-left: 34px;
    --base-nav-menu-header-height: var(--base-header-height);
    /* colors */
    /*--base-header-bg-color: rgb (248, 248, 248) = rgba(var(--bs-body-color-rgb), 0.03);  Need to set RGB to get the same color withour transparency */
    --base-header-bg-color: rgb(248, 248, 248);
    --base-header-border-color: var(--bs-border-color-translucent);
    /*--base-nav-menu-bg-color-hover: rgb(233, 236, 239);*/
    --base-nav-menu-bg-color-hover: var(--bs-tertiary-bg);
    --base-nav-link-active: var(--base-nav-menu-bg-color-hover);
}

[data-bs-theme=dark] {
    /*    --base-nav-menu-bg-color-hover: rgb(72, 72, 72);*/
    /*--base-header-bg-color: #272b2f = rgba(var(--bs-body-color-rgb), 0.03);  Need to set RGB to get the same color withour transparency */
    --base-header-bg-color: #272b2f;
    --base-nav-link-active: rgba(177, 186, 196, 0.1);
}

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

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

    .btn.btn-nav-menu-toggle:active,
    .btn.btn-nav-brand-toggle:active {
        border-color: transparent;
    }

.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.offcanvas-nav-menu {
    width: var(--base-nav-menu-width);
    /*transition: transform 0.1s ease-in-out;*/
    transition: none;
}

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

    .offcanvas.offcanvas-nav-menu .offcanvas-body {
        padding: 0;
    }

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

.nav-container {
    width: 100%;
    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;
}

    .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: inherit;
    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: var(--base-icon-container-bg-color);
            opacity: 1;
            transition: opacity 300ms ease 0s;
        }

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

.text-185 {
    flex: 1 1 auto;
    text-overflow: ellipsis;
    overflow-x: hidden;
    white-space: nowrap;
    pointer-events: none;
}

.active .text-185 {
    color: var(--base-icon-container-bg-color);
}

.secondaryIcon-190,
.secondaryIcon-433 {
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    font-style: normal;
    font-weight: normal;
    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;
    }
}