.maincontent .nav-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid #aab0b4;
	font-size:11px;
	line-height:1;
}

.maincontent .first-level {
	background-color:white;
}

.maincontent .nav-menu li {
    position: relative;
    border-bottom: 1px solid #aab0b4;
}

.maincontent .nav-menu li:last-child {
    border-bottom: 0;
}

.maincontent .nav-menu li > .menu-item-wrapper:hover {
    background-color: #f5f7fa;
    border: 1px solid #25afd3;
}

.maincontent .nav-menu li > .menu-item-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0 0 0 15px;
    height: 50px;
    border-bottom: 1px solid #aab0b4;
}

.maincontent .nav-menu li > .menu-item-wrapper:hover {
    border-left: 1px solid #25afd3;
}

.maincontent .nav-menu li:last-child > .menu-item-wrapper {
    border-bottom: 0;
}

.maincontent .nav-menu li a {
    color: #3f3535;
    text-decoration: none;
    font-size: 1.2em;
    flex-grow: 1;
    padding: 0 15px;
}

.maincontent .nav-menu li .icon-box {
    padding: 15px;
    cursor: pointer;
}

.maincontent .nav-menu .submenu {
    display: none;
    flex-direction: column;
    width: 100%;
    background-color: #f5f7fa;
    padding-left: 16px;
}

/* Second-level navigation styles */
.maincontent .nav-menu > li > .submenu > li {
    border-left: 3px solid #aab0b4;
    padding-left: 10px;
}

.maincontent .nav-menu > li > .submenu > li:hover > .menu-item-wrapper {
    border: 1px solid #25afd3;
}

/* Third-level navigation styles */
.maincontent .nav-menu .third-level {
    background-color: #efefef;
}

.maincontent .nav-menu .third-level li {
    border-left: 1px solid #aab0b4;
}

.maincontent .nav-menu .third-level li:hover > .menu-item-wrapper {
    border: 1px solid #25afd3;
}

.maincontent .nav-menu .submenu li {
    border-bottom: 1px solid #aab0b4;
}

.maincontent .nav-menu li.open > .submenu {
    display: flex;
}

.maincontent .nav-menu li.open > .menu-item-wrapper > .icon-box i {
    transform: rotate(90deg);
}

.maincontent .nav-menu .icon-box i {
    color: black; /* Default color for all icons */
}

/* Active and Ancestor States */
.maincontent .nav-menu .active > .menu-item-wrapper {
    border-left: 4px solid #005984;
    background-color: #01afdb;
    color: white;
}

.maincontent .nav-menu .active > .menu-item-wrapper a {
    color: white;
}

.maincontent .nav-menu .active > .menu-item-wrapper .icon-box i {
    color: white;
}

.maincontent .nav-menu .ancestor > .menu-item-wrapper {
    border-left: 4px solid #005984;
}

.maincontent .nav-menu .ancestor > .menu-item-wrapper a {
    color: #554f4f;
}

/* Ensure hover does not override active class */
.maincontent .nav-menu li > .menu-item-wrapper:hover:not(.active):not(.ancestor) {
    background-color: #f5f7fa;
    border: 1px solid #25afd3;
    border-left: 1px solid #25afd3;
}

/* Ensure the active state is preserved even when its children are hovered */
.maincontent .nav-menu .active > .menu-item-wrapper:hover {
    background-color: #01afdb;
    border-color: #005984 !important;
    border-left: 4px solid #005984 !important;
}

/* Ensure ancestor nodes are hovered correctly */
.maincontent .nav-menu .ancestor:hover > .menu-item-wrapper:not(.active) {
    background-color: #f5f7fa;
    border: 1px solid #25afd3;
    border-left: 4px solid #005984;
}