.side-menu-wrapper {
    width: clamp(300px, 22%, 450px);
    transition: all 400ms ease-in-out;
    padding-right: 0;
}
.side-menu-wrapper.active {
    width: 0px;
    padding: 0px;
}

.side-menu-wrapper * {
    transition: opacity 400ms ease-in-out;
}
.side-menu-wrapper.active * {
    opacity: 0;
}

/* width */
.side-menu-wrapper::-webkit-scrollbar {
    width: 6px;
}

/* Track */
.side-menu-wrapper::-webkit-scrollbar-track {
    background: var(--background-main);
}

/* Handle */
.side-menu-wrapper::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,.1);
    border-radius: var(--border-radius)
}

/* Handle on hover */
.side-menu-wrapper::-webkit-scrollbar-thumb:hover {
    background: rgba(0,0,0,.05);
}

.logo-wrapper  {
    width: 55px;
    height: 55px;
}

.logo-wrapper img {
    width: 100%;
}

.menu-wrapper .menu-item.active > a,
.settings-wrapper .menu-item.active > a {
    background: var(--button-background);
    color: var(--button-color);
}

.menu-wrapper .menu-item.active > a svg path,
.settings-wrapper .menu-item a svg path {
    fill: var(--button-color);
}

.menu-item svg {
    width: 14px;
}

.menu-wrapper .menu-item a,
.settings-wrapper .menu-item a {
    cursor: pointer;
    border-radius: var(--border-radius);
    text-decoration: none;
}

.child-menu {
    transition: max-height 300ms ease-in-out;
    max-height: 0px;
    overflow: hidden;
}

.child-menu.active {
    max-height: 150px;
}

.child-menu > a.active,
.child-menu.active > a.active {
    background: var(--button-background);
    color: var(--button-color);
}

.top-menu-wrapper {
    height: var(--topbar-height);
}

.open-button {
    width: 30px;
    transform: rotate(180deg);
}

.close-button {
    width: 30px;
}

.side-menu-inner {
    top: 30px;
    overflow-y: scroll;
    padding-right: 20px;
}
/* width */
.side-menu-inner::-webkit-scrollbar {
    width: 2px;
}

/* Track */
.side-menu-inner::-webkit-scrollbar-track {
    background: var(--background-main);
}

/* Handle */
.side-menu-inner::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,.1);
    border-radius: var(--border-radius)
}

/* Handle on hover */
.side-menu-inner::-webkit-scrollbar-thumb:hover {
    background: rgba(0,0,0,.05);
}

.small-menu {
    display: none;
    top: 125%;
    right: 0px;
}

.small-menu.active {
    display: flex;
}

.small-menu * {
    text-decoration: none;
}

#small-menu {
    border: 1px solid var(--color-lightgrey);
}

#small-menu::after {
    content: "";
    position: absolute;
    top: -10px;
    right: 16px;
    width: 16px;
    height: 16px;
    background: #fff;
    transform: rotate(45deg);
    border-left: 1px solid var(--color-lightgrey);
    border-top: 1px solid var(--color-lightgrey);
}

#news-bell .news-block {
    background: #fff;
    padding: 10px 15px;
}

#news-bell {
    border: 1px solid var(--color-lightgrey);
    width: 250px;
    right: -40px;
}

#news-bell::after {
    content: "";
    position: absolute;
    top: -10px;
    right: 41px;
    width: 16px;
    height: 16px;
    background: #fff;
    transform: rotate(45deg);
    border-left: 1px solid var(--color-lightgrey);
    border-top: 1px solid var(--color-lightgrey);
}

#news-bell .news-block:not(:first-child) {
    border-top: 1px solid var(--color-lightgrey);
}

#news-bell .news-block:hover {
    background: var(--color-xxlightgrey);
}

#news-bell a.news-block:hover {
    cursor: pointer;
}

#news-bell-counter {
    display: none;
}

#news-bell-counter.active {
    display: flex;
}

#profile-percentage #whats-left {
    display: none;
    max-width: 200px;
}

#profile-percentage:hover #whats-left {
    display: flex;
}