.site-aside {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 260px;
    height: 100%;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
    -webkit-transform-origin: left;
    transform-origin: left;
    overflow: visible;
    z-index: 100;
    -webkit-box-shadow: 5px 0 10px 0 rgb(47 47 51/2%);
    box-shadow: 5px 0 10px 0 rgb(47 47 51/2%);
    -webkit-transform: translateX(-100%) translateY(0) translateZ(0);
    transform: translateX(-100%) translateY(0) translateZ(0);
    background-color: var(--bg-base);

    .aside-brand {
        position: relative;
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
        -ms-flex-negative: 0;
        -webkit-flex-shrink: 0;
        flex-shrink: 0;
        height: 75px;
        padding: 0 1.5rem;

        img {
            max-width: 210px;
            max-height: 45px;
        }

        .logo-sm {
            display: none;
        }
    }

    .aside-wrapper {
        pointer-events: inherit;
        display: -ms-flexbox;
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -ms-flex-direction: column;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        flex-direction: column;
        height: 100%;
    }

    .aside-scroll {
        position: relative;
        -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
        -webkit-flex: 1 1 auto;
        flex: 1 1 auto;
    }

    .aside-menu {
        padding: 0.25rem 0.75rem;

        li {
            position: relative;
        }

        >li {
            margin: 0.5rem 0;

            &.current-menu-item,
            &.in {
                background-color: var(--bg-light);
                border-radius: var(--radius-sm);
            }
        }

        li a {
            position: relative;
            display: -ms-flexbox;
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
            -ms-flex-wrap: nowrap;
            -webkit-flex-wrap: nowrap;
            flex-wrap: nowrap;
            padding: 0.375rem 0.75rem;
            -webkit-transition: all 0.3s;
            transition: all 0.3s;
            opacity: 0.6;

            &:hover {
                opacity: 1;
            }

            .menu-icon {
                position: relative;
                display: -ms-flexbox;
                display: -webkit-box;
                display: -webkit-flex;
                display: flex;
                -ms-flex-pack: center;
                -webkit-box-pack: center;
                -webkit-justify-content: center;
                justify-content: center;
                -ms-flex-align: center;
                -webkit-box-align: center;
                -webkit-align-items: center;
                align-items: center;
                -ms-flex-negative: 0;
                -webkit-flex-shrink: 0;
                flex-shrink: 0;
                top: -1px;
                width: 2.25rem;
                height: 2.25rem;
                font-size: 1.375rem;
                opacity: 0.65;
            }

            .menu-text {
                -webkit-box-flex: 1;
                -ms-flex: 1 1 auto;
                -webkit-flex: 1 1 auto;
                flex: 1 1 auto;
                display: -webkit-box;
                -webkit-line-clamp: 1;
                -webkit-box-orient: vertical;
                overflow: hidden;
                font-size: 0.9375rem;
            }
        }

        >li.current-menu-item>a {
            color: var(--color-primary);
            opacity: 1;
        }

        >li>ul {
            display: none;
            padding-left: 48px;
            padding-bottom: 10px;
        }

        >li.current-menu-parent>ul {
            display: block;
        }

        li>ul li {
            padding-top: 0;
            padding-bottom: 0;

            a {
                padding-left: 0;
                padding-right: 0;
            }

            &.current-menu-item a {
                color: var(--color-primary);
                opacity: 1;
            }
        }

        li .menu-sign {
            position: absolute;
            right: 15px;
            top: 17px;
            color: var(--color-muted);
            -webkit-transition: all 0.3s ease;
            transition: all 0.3s ease;
        }

        li.in>a>.menu-sign,
        li.current-menu-item>a>.menu-sign {
            -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
        }

        li ul li {
            .menu-sign {
                top: 8px;
            }

            &.in>a>.menu-sign,
            &.current-menu-item>a>.menu-sign {
                -webkit-transform: rotate(90deg);
                transform: rotate(90deg);
            }
        }
    }


}

@media (max-width: 1198.98px) {
    .site-aside .scrollable.hover {
        overflow-y: auto;
    }

    .menu-collasped-active .site-aside {
        -webkit-transform: translateX(0) translateY(0) translateZ(0);
        transform: translateX(0) translateY(0) translateZ(0);
    }
}

@media (min-width: 1200px) {
    .site-aside {
        -webkit-transform: translateX(0) translateY(0) translateZ(0);
        transform: translateX(0) translateY(0) translateZ(0);
    }

    .menu-collasped-active {

        .site-header,
        &.site-wrapper {
            padding-left: 100px;
        }

        .folded {
            width: 100px;

            .aside-brand {
                -webkit-box-pack: center;
                -ms-flex-pack: center;
                -webkit-justify-content: center;
                justify-content: center;

                .logo {
                    display: none;
                }

                .logo-sm {
                    display: block;
                }
            }

            .aside-menu {
                li {
                    .menu-text {
                        display: none;
                    }

                    .menu-icon {
                        margin-left: auto;
                        margin-right: auto;
                    }

                    .menu-sign {
                        display: none;
                    }

                    .sub-menu {
                        display: none;
                        height: 0;
                        padding-bottom: 0;
                    }
                }
            }
        }
    }

    .sidemenu-hover-active .folded {
        width: 240px;

        .aside-brand {
            -webkit-box-pack: start;
            -ms-flex-pack: start;
            -webkit-justify-content: start;
            justify-content: start;

            .logo {
                display: block;
            }

            .logo-sm {
                display: none;
            }
        }

        .aside-menu li {

            .menu-text,
            .menu-icon,
            .menu-sign {
                display: block;
            }

            &.current-menu-parent .sub-menu,
            &.in .sub-menu {
                display: inherit;
                height: auto;
                padding-bottom: 10px;
            }
        }
    }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
    .site-aside {
        width: 220px;

        .aside-brand img {
            max-width: 170px;
        }
    }
}