#sidebar .components > li > a.liHeader,
#sidebar .components > li > a.liHeader > .faHeader,
#sidebar .submenuItem ul li > a,
#sidebar .liHeader .faHeader {
    transition: background-color .18s ease, color .18s ease,
                transform .18s ease, box-shadow .22s ease,
                text-shadow .18s ease !important;
}

#sidebar .components > li:not(.active) > a.liHeader:not([aria-expanded="true"]):hover {
    background-color: rgba(255,255,255,0.24);
    color: #fff !important;
    box-shadow: 0 10px 22px rgba(0,0,0,0.30),
                0 0 34px rgba(0,163,211,0.60);
}
.dark-mode #sidebar .components > li:not(.active) > a.liHeader:not([aria-expanded="true"]):hover {
    color: #00a3d3 !important;
}
#sidebar.top .components > li:not(.active) > a.liHeader:not([aria-expanded="true"]):hover {
    transform: translateY(4px) scale(1.06);
}
#sidebar:not(.top) .components > li:not(.active) > a.liHeader:not([aria-expanded="true"]):hover {
    transform: translateX(6px) scale(1.04);
}
#sidebar .components > li:not(.active) > a.liHeader:not([aria-expanded="true"]):hover > .faHeader {
    transform: scale(1.28) translateY(-1px);
    text-shadow: 0 0 16px rgba(255,255,255,0.95),
                 0 0 26px rgba(0,163,211,0.70);
}

#sidebar a.liHeader[aria-expanded="true"] {
    box-shadow: 0 0 30px rgba(0,163,211,0.65);
}

@keyframes vs1NavGlow {
    0%, 100% { box-shadow: 0 0 26px rgba(0,163,211,0.18); }
    50%      { box-shadow: 0 0 60px rgba(0,163,211,0.42); }
}

.popper-popup[show-popper],
#popperBounder .submenuItem {
    background-color: rgb(107,109,122) !important;
}
.dark-mode .popper-popup[show-popper],
.dark-mode #popperBounder .submenuItem {
    background-color: var(--dm-surface-2) !important;
}
#sidebar.top > ul > li > div.submenuItem > ul > li > a {
    background-color: transparent !important;
}

@keyframes vs1PopIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.popper-popup[show-popper],
#popperBounder .submenuItem {
    animation: vs1PopIn .18s ease both;
    box-shadow: 0 14px 34px rgba(0,0,0,0.34),
                0 0 30px rgba(0,163,211,0.42) !important;
    border-radius: 10px;
}
.popper-popup li a,
.popper-popup li > span,
#popperBounder .submenuItem ul li > a {
    transition: background-color .16s ease, color .16s ease,
                transform .16s ease, box-shadow .18s ease !important;
    border-radius: 7px;
}
.popper-popup li a:hover,
.popper-popup li > span:hover,
#popperBounder .submenuItem ul li > a:hover {
    transform: translateX(5px);
    color: #fff !important;
    background-color: rgba(0,163,211,0.22) !important;
    box-shadow: inset 3px 0 0 #00a3d3;
}

#sidebar .submenuItem ul li > a {
    transition: background-color .16s ease, color .16s ease,
                transform .16s ease !important;
}
#sidebar .submenuItem ul li > a:hover {
    transform: translateX(6px);
    color: #fff !important;
    background-color: rgba(0,163,211,0.14);
}

.popper-popup[show-popper],
#popperBounder .submenuItem { position: relative; }
.popper-popup[show-popper]::before,
#popperBounder .submenuItem::before {
    content: ""; position: absolute; inset: 0; z-index: 0;
    pointer-events: none; border-radius: inherit;
    background: radial-gradient(220px circle at var(--tx, -999px) var(--ty, -999px),
                rgba(255,255,255,0.45), rgba(255,255,255,0.15) 34%, transparent 62%);
    transition: background .04s linear;
}
.dark-mode .popper-popup[show-popper]::before,
.dark-mode #popperBounder .submenuItem::before {
    z-index: 2;
    background: radial-gradient(220px circle at var(--tx, -999px) var(--ty, -999px),
                rgba(0,163,211,0.28), rgba(0,163,211,0.10) 34%, transparent 62%);
}
.popper-popup[show-popper] > *,
#popperBounder .submenuItem > * { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
    #sidebar { animation: none; }
    #sidebar .components > li > a.liHeader:hover,
    #sidebar .submenuItem ul li > a:hover,
    #sidebar .components > li > a.liHeader:hover > .faHeader { transform: none; }
}
