/* Основные стили для меню */
        #side-menu {    
            font-family: TildaSans, Arial, sans-serif;
            list-style-type: none;
            margin: 0;
            padding: 0 !important;
            width: 280px !important;
            background-color: #EF4136;
            position: relative;
        }
        #side-menu {
            padding: 0;
        }
        
        #side-menu ul {
            border-left: 0;
        }
        
        #side-menu .submenu {
            margin: 0;
            padding: 0 !important;
        }

        #side-menu li {
            position: relative;
            height: 48px;
            /*margin: 5px 5px 10px;*/
        }

        #side-menu li a {
            align-items: center;
            color: #fff;
            display: flex;
            font-weight: normal;
            font-size: 11px;
            height: 100%;
            margin: 0;
            padding: 0px 50px 0px 20px;
            text-decoration: none;
        
        }
        
        #side-menu li:has(> ul.submenu):after {
            content: '\21E2';
            color: white;
            position: absolute;
            padding-top: 0.1em;
            right: 20px;
            top: 15px;
            line-height: 100%;
        }
        
        #side-menu li a:hover {
            background-color: #7A7A7A;
            color: white !important;
            transition-duration: 1s;
        }

        /* Стили для выпадающего подменю */
        #side-menu .submenu {
            background-color: 7A7A7A;
            display: block;
            visibility: collapse;
            list-style-type: none;
            padding: 0;
            margin: 0;
            opacity: 0;
            position: absolute;
            left: 100%; /* Подменю появляется сбоку */
            top: 0;
            width: 280px;
            background-color: #333B4F;
            /*border-left: 2px solid #ccc;*/
        }
        #side-menu .submenu li a:hover {
            background-color: #7A7A7A;
        }

        /* Показываем подменю при наведении */
        #side-menu li:hover > .submenu {
            /*display: block;*/
            visibility: visible;
            opacity: 1;
            transition: 1s;
        }
        
        #side-menu .submenu li a {
            align-items: center;
            color: #fff;
            display: flex;
            height: 100%;
            transition-duration: color 1s;
        }

        /* Стили для подменю третьего уровня */
        #side-menu .submenu .submenu {
            left: 100%; /* Подменю третьего уровня также появляется сбоку */
            top: 0;
            background-color: #333B4F;
        }

        #side-menu .submenu .submenu li a {
            /*padding: 8px 16px;*/
        }

        #side-menu .submenu .submenu li a:hover {
            background-color: #7A7A7A;
        }
        
        
        
.arrow-2 {
    cursor: pointer;
    height: 120px;
    width: 80px;
    position: relative;
    margin: 20px;
}
.arrow-2-top, 
.arrow-2-bottom {
    background: #FFF;
    height: 10px;
    left: -30px;
    position: absolute;
    top: 60px;
    width: 100px;
}
.arrow-2-top {
    top: 64px;
}
.arrow-2-top {
    transform: rotate(45deg);
    transform-origin: bottom right;
}
.arrow-2-bottom {
    transform: rotate(-45deg);
    transform-origin: top right;
}
.arrow-2-top::after, 
.arrow-2-bottom::after {
    background: #e0e0e0;
    content: '';
    height: 100%;
    position: absolute;
    top: 0;
    transition: all 0.15s;
}
.arrow-2-top::after {
    left: 100%;
    right: 0;
    transition-delay: 0s;
}
.arrow-2-bottom::after {
    left: 0;
    right: 100%;
    transition-delay: 0.15s;
}
.arrow-2:hover .arrow-2-top::after {
    left: 0;
    transition-delay: 0.15s;
}
.arrow-2:hover .arrow-2-bottom::after {
    right: 0;
    transition-delay: 0s;
}