.custom-menu {
    list-style: none;
    padding: 1.5rem;
    background: white;
    border-radius: 8px;
    box-shadow: rgba(3, 102, 214, 0.3) 0px 0px 0px 3px;
    transition: all 0.5s ease-in;
}

    .custom-menu li {
        position: relative;
        cursor: pointer;
        transition: background 0.3s;
        border-radius: 0.6rem;
        transition: all 0.5s ease-in;
        padding-top: 0.4rem;
        padding-bottom: 0.2rem;
        font-size:1.2rem;
    }

        .custom-menu li > div {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0.5rem 0.3rem;
        }

        .custom-menu li:not(:has(ul)):hover {
            color: white;
            background: #999;
            padding-inline-start: 0.5rem;
            transition: all 0.3s ease-out;
        }


        .custom-menu li:not(:has(ul)):not(.custom-menu > li) > a span::before {
            content: "-";
            margin-inline-end: 8px;
        }

        .custom-menu li a {
            all: unset !important;
            pointer-events: none;
        }
            .custom-menu li a span {
                pointer-events: auto;
            }

    .custom-menu ul {
        list-style: none;
        padding-inline-start: 15px;
        cursor: default;
        display: block;
        opacity: 0;
        max-height: 0;
        overflow: hidden;
        transition: opacity 0.5s ease-in-out, max-height 0.3s ease-in-out;
    }

    .custom-menu .open > ul {
        opacity: 1;
        max-height: 1000px;
    }


    .custom-menu .custom-menu-toggle {
        width: 10px;
        height: 10px;
        display: inline-block;
        border-right: 2px solid black;
        border-bottom: 2px solid black;
        transition: transform 0.3s ease-out;
    }

:not([dir]) .custom-menu .custom-menu-toggle {
    transform: rotate(-45deg);
}

:not([dir]) .custom-menu .open > div .custom-menu-toggle {
    transform: rotate(45deg);
}

[dir="rtl"] .custom-menu .custom-menu-toggle {
    transform: rotate(135deg);
}

[dir="rtl"] .custom-menu .open > div .custom-menu-toggle {
    transform: rotate(45deg);
}

.custom-menu .active {
    background: #007bff;
    color: white;
    padding-inline-start: 0.5rem;
    font-weight: bold;
    border-radius: 0.6rem;
    box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px;
    transition: all 0.5s ease-out;
}
    .custom-menu .active:hover {
        background: #0050cc;
    }