:root{--nav-bar-width:90px;--nav-bar-background:var(--page-background)}.nav-bar{--bar-item-height:76px;--bar-item-font-size:12px;--bar-item-icon-size:24px;display:block;flex-shrink:0;height:100%;width:var(--nav-bar-width);z-index:3}.nav-bar .nav-bar__close{display:none;font-size:22px}.nav-bar .overlay{display:none}.nav-bar .nav-bar__list{background:var(--nav-bar-background);border-right:1px solid #1c1c1c;display:flex;flex-direction:column;height:100%;list-style:none;margin:0;overflow-y:auto;padding:0;position:fixed;top:0;width:var(--nav-bar-width)}.nav-bar .nav-bar__item{align-items:center;display:flex;flex-shrink:0;justify-content:center;min-height:var(--bar-item-height);padding:0 10px}.nav-bar .nav-bar__item .bar-item{height:100%;justify-content:center;padding:var(--el-margin-xs) 0;position:relative;transition:color .25s ease-in-out;width:100%}.nav-bar .nav-bar__item .bar-item.bar-item__active:after{background-color:var(--brand-color);border-radius:4px;bottom:0;box-shadow:0 -2px 12px 1px var(--brand-color);content:" ";height:2px;left:23px;position:absolute;right:23px}.nav-bar .nav-bar__profile{display:none}@media(max-width:991px){.nav-bar{--nav-bar-background:#1c1c1c;display:none;position:fixed;top:0;transform:translate(calc(var(--nav-bar-width)*-1));transition:transform .3s;z-index:4}.nav-bar .nav-bar__close{display:flex}.nav-bar .overlay{display:block}.nav-bar .nav-bar__profile{display:flex}.nav-bar--opened{display:block;transform:translate(0);width:calc(100% + var(--nav-bar-width))}}