:root {
    --icon-menu-item-spacing: 20px;
    --icon-menu-item-min-width: 150px;
    --brand-dark: #005eaf;
}

.icon-menu {


    .chevron {
        color: #b0b0b0;
        right: 12px;
        top: 10px;
    }

     ul {
        list-style: none;
        margin: 0;
        padding: 0;
        position:relative;
    }

     ul li {
        position: relative;
    }


     ul li:hover {
        background: var(--brand-dark);
        border-radius: 2px;
        /*ul li a { color: white !important;}*/
    }

     a {
        text-decoration: none;
        color: var(--text-active) !important;
        display: block;
        width: fit-content;
        min-width: 100%;
        line-height: 30px;
        text-align: center;
        padding: calc(var(--icon-menu-item-spacing)/4)
        var(--icon-menu-item-spacing)
        calc(var(--icon-menu-item-spacing)/4)
        var(--icon-menu-item-spacing);
    }

     ul li div.item ul a {
        line-height: 35px;
        padding: calc(var(--icon-menu-item-spacing)/4)
        calc(var(--icon-menu-item-spacing)*2.5)
        calc(var(--icon-menu-item-spacing)/4)
        calc(var(--icon-menu-item-spacing)*2.5);
    }

     li:hover {
         .ti {
             background-color: white !important;
         }
        a:visited, a:link {
            color: white !important;
        }
        ul li a:visited, ul li a:link { color: black !important;}
        ul li {
            a:hover {
                color: white !important;
                background: black !important;
            }
        }

        img {
            filter: var(--module-icon-filter);
        }
    }




     ul li div.item ul a:link {
        background: #fffbff;
    }
     ul li div.item ul a:hover {
        border-radius: 0;
    }

     ul li div.item ul {
        position: absolute;
        visibility:hidden;
        opacity:0;
        transition:visibility 0.15s,opacity .25s;
        border: 1px black solid;
        z-index: 61;
    }

    ul.leftTop li:hover .tool-icon:after {
        content: '\25B8';
        position: absolute;
        top: 0;
        padding-top:5%;
        right:-23px;
        color: black;
        font-size:30px;
        height: 110%;
    }

    ul.leftBottom li:hover .tool-icon:after {
        content: '\25B8';
        position: absolute;
        bottom: 0;
        padding-top:10%;
        right:-23px;
        color: black;
        font-size:30px;
        height: 110%;
    }

    ul.rightTop li:hover .tool-icon:after {
        content: '\25C2';
        position: absolute;
        top: 0;
        padding-top:5%;
        left:-23px;
        color: black;
        font-size:30px;
        height: 110%;
    }

    ul.rightBottom li:hover .tool-icon:after {
        content: '\25C2';
        position: absolute;
        bottom: 0;
        padding-top:10%;
        left:-23px;
        color: black;
        font-size:30px;
        height: 110%;
    }

    ul.leftTop li div.item ul {
        left: 57px; top: 0;
    }
    ul.leftBottom li div.item ul {
        left: 57px; bottom: 0;
    }

    ul.rightTop li div.item ul {
        right: 57px; top: 0;
    }
    ul.rightBottom li div.item ul {
        right: 57px; bottom: 0;
    }

     ul li:hover div.item >ul {
        visibility:visible;
        opacity:1;

     }


     ul li div.item ul li,  ul li div.item  ul li ul li {
        float : none;
        background: #eee;
        margin-top: 0;
        width: fit-content;
        min-width: 100%;
        text-wrap: nowrap;
    }

     ul li div.item  ul li ul,  ul li div.item ul li ul li ul {
        position: absolute;
        top: 15px;
        left: calc(100% - (var(--icon-menu-item-spacing)/2) );
        visibility:hidden;
        width: fit-content;
        min-width: 100%;
        opacity:0;
        transition:visibility 0.15s,opacity .3s;
        z-index: 62;
    }

}