:root {
    --ui-05:    #161616;
    --ui-05-hover: #2c2c2c;
    --ui-05-emphasis: #262626;
    --background: #f4f4f4;
    --layer-01: #ffffff;
    --background-inverse: #393939;
    --background-inverse-emphasis: #353535;
    --active-border: #0f62fe;
}

/* Header */
        .bx--header{
            background-color: var(--ui-05);
            border-bottom: 1px solid var(--background-inverse);
        }

    /*Header Action Buttons*/

        .bx--header-action-btn.bx--btn--primary {
            background-color: var(--ui-05);
        }

        .bx--header-action-btn.bx--btn--primary:hover {
            background-color: var(--ui-05-hover);
        }

        a.bx--header__menu-item:hover {
            background-color: var(--ui-05-hover);
            color: var(--background);
        }

    /* Home Button */
        a.bx--header__name, a.bx--header__name:hover {
            color: var(--background);
        }

    /* Expand/Collapse Side Nav button */
        .bx--header__menu-trigger > svg {
            fill: var(--background);
        }
        .bx--header__menu-trigger:hover {
            fill: var(--ui-05-hover);
        }

    /* Info and User Profile buttons */
        .bx--header__action > svg {
            fill: vay(--layer-01);
        }
        .bx--header__action:hover {
            background-color:var(--background-inverse-emphasis);
        }
        .bx--header-action-btn:active {
            background-color:var(--ui-05);
        }
        a.bx--header__menu-item > svg {
            fill: var(--background);
        }
        a.bx--header__menu-item:hover {
            background-color: --ui-05-hover;
        }
        a.bx--header__menu-item:hover > svg, a.bx--header__menu-item:active > svg, a.bx--header__menu-item:focus > svg {
            fill: var(--background);
        }
        .bx--header__menu-title[aria-expanded='true'] {
            background-color:  var(--ui-05-emphasis);
            color: vay(--layer-01);
        }

    /* User Profile Card*/
        /* card background */
        .bx--header__menu .bx--header__menu-item .iot--card {
            background-color: var(--ui-05)!important;
        }
        .bx--header__action:active, a.bx--header__menu-item:active {
            background-color: var(--ui-05)!important;
        }

        /* card text */
        .bx--header__menu .bx--header__menu-item {
            color: var(--background);
            background-color: var(--background-inverse);
        }
        .bx--header__menu .bx--header__menu-item:hover {
            color: var(--background);
            background-color: var(--background-inverse-emphasis);
        }


        /*Log-out Button*/
        .bx--header__menu-title[aria-expanded='true'] + .bx--header__menu .bx--header__menu-item:hover {
            background-color: var(--background-inverse-emphasis);
        }

        /*Manage account button*/
        .bx--header__menu .bx--header__menu-item .iot--card .bx--btn--secondary {
            color: #fff;
            border-color: #fff;
            background-color: #000;
            outline-color: #000;
            border-width: 1px;
        }


/* Side Nav */
    .bx--side-nav {
        background-color: var(--ui-05);
    }

    /* Side Nav Item Text and Icon Color */
    .bx--side-nav__submenu[aria-haspopup='true'], .bx--side-nav .bx--side-nav__link, .bx--side-nav a.bx--side-nav__link--current > span.bx--side-nav__link-text {
        color: var(--background);
    }
    .bx--side-nav__icon > svg {
        fill: vay(--layer-01);
    }

/*New*/

    .bx--side-nav__navigation:not(.iot--side-nav--expanded):not(:hover) li.triMenuItemTopParentActiveBackground, li.triMenuItemActiveBackground a.triMenuItemActiveBackground, li.triMenuItemActiveBackground button.triMenuItemActiveBackground, li.triMenuItemClosestParentActiveBackground>.bx--side-nav__submenu[aria-expanded=false] {
        background-color: var(--background-inverse);
    }

    .iot--side-nav--expanded li.triMenuItemTopParentActiveBackground, .iot--side-nav--expanded li.triMenuItemTopParentActiveDescendantBackground, .iot--side-nav--expanded li.triMenuItemTopParentActiveDescendantBackground:not(.triMenuItemActive) {
        background-color: var(--ui-05-hover);
    } 

    .iot--side-nav .bx--side-nav__item:not(.bx--side-nav__item--active)>.bx--side-nav__link:hover, .iot--side-nav .bx--side-nav__submenu:hover, .iot--side-nav .bx--side-nav__submenu:hover+.bx--side-nav__menu, .iot--side-nav [aria-expanded=true].bx--side-nav__submenu, .iot--side-nav [aria-expanded=true].bx--side-nav__submenu+.bx--side-nav__menu {
        background-color: var(--ui-05-hover);
    }

    .iot--side-nav .bx--side-nav__link--current, .iot--side-nav .bx--side-nav__menu .bx--side-nav__link--current, .iot--side-nav .bx--side-nav__menu .bx--side-nav__link:not(.bx--side-nav__link--current):not([aria-current=page]):hover, .iot--side-nav .bx--side-nav__menu .bx--side-nav__link[aria-current=page] {
        background-color: var(--background-inverse);
    }

    li.bx--side-nav__item:hover a.triMenuItemActiveBackground, li.bx--side-nav__item:hover button.triMenuItemActiveBackground, li.bx--side-nav__item:hover li.triMenuItemActiveBackground {
        background-color: var(--background-inverse);
    }

    a.triMenuItemActiveBackground, button.triMenuItemActiveBackground {
        background-color: var(--background-inverse);
    }

    a.triMenuItemActive {
        border-left: 4px solid var(--active-border);
    }

    /* top level node with children hover */
    .bx--side-nav__item:hover .bx--side-nav__submenu, .bx--side-nav__item:hover .bx--side-nav__menu {
        background-color: var(--ui-05-hover);
    }

    .bx--side-nav__item .bx--side-nav__submenu:hover {
      background-color: var(--background-inverse);
    }

    /* leaf nodes background color*/
    .bx--side-nav__item:hover .bx--side-nav__link {
        background-color: var(--ui-05-hover);
    }

    /* 2nd 3rd 4th level leaf node hover */
    .bx--side-nav__item:hover .bx--side-nav__link:not(.bx--side-nav__link--current):not([aria-current='page']):hover, 
    .bx--side-nav__item:hover a.bx--side-nav__link:not(.bx--side-nav__link--current):not([aria-current='page']):hover {
        background-color:  var(--background-inverse);
    }

    /* top level leaf node hover */
    .bx--side-nav__item:not(.bx--side-nav__item--active) > .bx--side-nav__link:hover {
        background-color: var(--ui-05-hover);
    }

    .iot--side-nav .bx--side-nav__item:not(.bx--side-nav__item--active)>.bx--side-nav__link:hover {
      background-color: var(--background-inverse);
    }

    /* 2nd 3rd 4th level nodes with children hover */
    .bx--side-nav__item:not(.bx--side-nav__item--active):hover .bx--side-nav__item:not(.bx--side-nav__item--active) > .bx--side-nav__submenu:hover {
        background-color:  var(--background-inverse);
    }

    /* Side nav Item Text Hover*/
    .bx--side-nav__item:not(.bx--side-nav__item--active) > .bx--side-nav__link:hover > span {
        color: var(--background);
    }
    .bx--side-nav__item:not(.bx--side-nav__item--active):hover .bx--side-nav__item:not(.bx--side-nav__item--active) > .bx--side-nav__submenu:hover {
        color: var(--background);
    }
    .bx--side-nav__item:not(.bx--side-nav__item--active) .bx--side-nav__menu-item > .bx--side-nav__link:hover > span {
        color: var(--background);
    }

    /*child hover color*/
    .bx--side-nav__item:hover .bx--side-nav__link:not(.bx--side-nav__link--current):not([aria-current="page"]):hover, .bx--side-nav__item:hover a.bx--side-nav__link[role="menuitem"]:not(.bx--side-nav__link--current):not([aria-current="page"]):hover{
        background-color: var(--background-inverse);
    }

    /* Expanded side nav item background color. These background colors should only appear when side nav is expanded.
     * Note that .iot--side-nav--expanded indicates when the hamburger icon has been toggeled to expand the side nav.
     * Hover without .iot--side-nav--expanded indicates when the hamburger icon is not used, and a mouse hover expands the side nav.
     */
    /* No longe needed, but keeping for reference.
    /* .bx--side-nav__navigation.iot--side-nav--expanded .bx--side-nav__submenu[aria-expanded="true"],
    .bx--side-nav__navigation:not(.iot--side-nav--expanded):hover .bx--side-nav__submenu[aria-expanded="true"] {
        background-color: var(--ui-05-hover);
    }
    .bx--side-nav__navigation.iot--side-nav--expanded .bx--side-nav__menu,
    .bx--side-nav__navigation:not(.iot--side-nav--expanded):hover .bx--side-nav__menu {
        background-color: var(--ui-05-hover);
    } */

    /*Side nav expanded on small breakpoint*/

    @media only screen and (max-width: 864px) {
        
        .iot--side-nav--expanded + .iot--main-content {
            width: 100% !important;
            transform:  translateX(0) !important;
            transition: all .2s ease-in;
        }
        
        .bx--side-nav--expanded {
            box-shadow: 0 calc(100vw - 1px) 0 100vw rgb(22 22 22 / 50%);
        }
        
        .projectContainerDiv > div {
            padding-top: 8px !important;
            padding-left: 0px !important;
            padding-right: 0px !important;
        }
    }

    @media only screen and (min-width: 673px) {
        
        .iot--side-nav--expanded + .iot--main-content {
            transition: all .2s ease-in;
        }
    }


    /* Breadcrumb */
    .breadcrumb-container {
        height: 22px !important;
        padding-bottom: 4px !important;
    }