﻿
#MenuPages {
    user-select: none;
    border: 0px solid red;
}

    #MenuPages::-webkit-scrollbar {
        width: 6px; /* width of the entire scrollbar */
    }

    #MenuPages::-webkit-scrollbar-track {
        background: var(--ThemeBackground);
    }

    #MenuPages::-webkit-scrollbar-thumb {
        background-color: deepskyblue; /* color of the scroll thumb */
        border-radius: 20px; /* roundness of the scroll thumb */
        border: 0px solid orange; /* creates padding around scroll thumb */
    }

    #MenuPages ul {
        /* margin: 0;
    padding: 0;*/
        list-style-type: none;
    }

    #MenuPages li {
        line-height: 40px;
        position: relative;
        margin-left: 30px;
    }

        #MenuPages li ul {
            padding-left: 0px;
            border: 0px solid blue;
        }

    #MenuPages > ul {
        border-bottom: 0px solid lightgray;
        overflow: hidden;
        padding-left:35px;
    }

    #MenuPages li:after {
        content: "\00A0";
        position: absolute;
        width: 200%;
        left: -100%;
        top: 0;
        border-bottom: 1px solid lightgray;
        z-index: -1;
    }

.MenuItemWrapper {

}


.MenuItemName {
    width: auto;
    border: 0px solid red;
    color: var(--ThemeFontColor);
    margin-left: 0px;
    /*    padding-left: 5px;*/
}

#MenuItemName svg:hover {
    fill: var(--ThemeFontColorHover);
    cursor: pointer;
}

.MenuItemCheckbox {
    position: absolute;
    top: 8px;
    left: -25px;
}

.MenuItemHide {
    width: 30px;
    border: 0px solid red;
    margin-top: -42px;
    float: right;
    padding-left: 5px;
    padding-right: 5px;
    fill: var(--ThemeFontColor);
}

    .MenuItemHide svg:hover {
        /*fill: var(--ThemeFontColorHover);*/
        cursor: pointer;
    }

.MenuItemHide {
    margin-right: 0px;
    fill: lightgrey;
}

.MenuItemCollapse ul {
    display: none;
}

.MenuItemCollapse > .MenuItemCaretUp {
    display: none;
}

.MenuItemCaretDown {
    display: block;
}

.MenuItemCaretUp {
    display: none;
}

.MenuItemCollapse > .MenuItemCaretDown {
    display: none;
}

.MenuItemCollapse > .MenuItemCaretUp {
    display: block;
}


.MenuItemCaret {
    position: absolute;
    width: 30px;
    border: 0px solid red;
    top: 0px;
    right: -0px;
    padding-left: 9px;
    padding-right: 9px;
    z-index: 1;
    margin-left: -30px;
    fill: var(--ThemeFontColor);
}

    .MenuItemCaret svg:hover {
        /*fill: var(--ThemeFontColorHover);*/
        cursor: pointer;
    }

    .MenuItemCaret:first-of-type {
        border: 2px solid orange;
    }

.MenuItemObjectHidden {
    fill: red;
}


.MenuItemName:hover {
    cursor: pointer;
    min-width: 100%;
    color: var(--ThemeFontColorHover);
}

#MenuItemIcon {
    width: 25px;
    float: right;
    fill: var(--ThemeFontColor);
    margin-top: 5px
}

    #MenuItemIcon:hover {
        fill: var(--ThemeFontColorHover);
        cursor: pointer;
    }


.MenuItemGroup {
    color: var(--ThemeIconColor);
    
}