#menu {
    .init {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .item-vertical {
        display: block;
        margin: 10px 0;
        padding: 0;
        vertical-align: baseline;
        //zoom: 1;
        position: relative;
        font-family: @segoeFontFamily;
    }

    .item-horizontal {
        display: inline-block;
        margin: 0 15px;
        padding: 0;
        vertical-align: baseline;
        //zoom: 1;
        position: relative;
        font-family: @segoeFontFamily;
    }
}

.vertical-menu {

    #menu > .init;

    li {
        #menu > .item-vertical;

        a {
            display: block;
            text-decoration: none;
            .menu-item;
            //line-height: 18pt;
            color: inherit;

            &:hover {
                //text-decoration: underline;
            }
        }

        &.title {
            .menu-title;
            margin-bottom: 20px;
        }
    }

    &.compact {
        a {
            //.menu-item-secondary;
            font-weight: normal;
            font-size: 10.5pt;
            line-height: 12pt;
            color: inherit;
        }
        li.title {
            margin-bottom: 10px;
            .item-title;
        }
    }

    & ul.secondary {
        #menu > .init;
        margin-left: 15px;
        li {
            a {
                .menu-item-secondary;
                color: inherit;
            }
        }
    }
}

.horizontal-menu {
    #menu > .init;
    padding: 0px;


    li {
        #menu > .item-horizontal;

        a {
            display: inline-block;
            text-decoration: none;
            .menu-item;
            color: inherit;
            padding: @subunitSize ;


            &:hover {
                background: inherit;
            }
        }
    }

    &.compact {
        li {
            margin-left: 5px;
        }
        a {
            //.menu-item-secondary;
            font-weight: normal;
            font-size: 10.5pt;
            color: inherit;
        }
        .dropdown-toggle {
            &:after {
                bottom: 2px;
            }
        }
    }

    li:first-child {
        margin-left: 0px;
    }

    li:hover > .dropdown-menu[data-show="hover"] {
        display: block;
    }
}

.side-menu {
    .vertical-menu;
    position: relative;
    background: @white;
    min-width: 200px;
    width: auto;
    border: 1px solid rgba(0, 0, 0, 0.2);

    li {
        margin: 5px 0 0;
        width: 100%;

        &:last-child {
            margin-bottom: @subunitSize;
        }
    }

    a {
        padding: 8px 20px !important;
        color: inherit;
        font-size: 15px !important;
        line-height: 14px !important;
    }

    li:hover {
        background: @cyan;
        color: @white;
    }

    .divider {
        padding: 0;
        height: 1px;
        margin: 9px 1px;
        overflow: hidden;
        background-color: #e5e5e5;
        &:hover {
            background: #e5e5e5;
        }
    }

    .dropdown-menu {
        left: 100%;
        top: -10%;
    }

    &.left {
        .dropdown-menu {
            left: -100%;
        }
    }

    > li:hover > .dropdown-menu[data-show="hover"] {
        display: block;
    }

    & > li > a.dropdown-toggle {

        &:after {
            font-family: @sysIconFontName;
            font-size: .8em;
            content: "\e156";
            left: 85%;
            top: .75em;
            .rotate(0deg);
        }
    }

    &.text-right {
        li {
            text-align: right;
        }
    }
}


.dropdown-menu {
    .vertical-menu;
    position: absolute;
    display: none;
    z-index: @zindexDropdown;
    background: @white;
    min-width: 220px;
    width: auto;
    border: 1px solid @menuBorder;
    //box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);

    &.shadow {
        box-shadow: 3px 3px 0 @menuShadowA;
    }

    li {
        margin: 5px 0 0;
        width: 100%;
        border: 1px transparent solid;

        &:last-child {
            margin-bottom: @subunitSize;
        }

        &.disabled, &.disabled:hover {
            cursor: default !important;
            background: transparent !important;
            color: @grayLighter;
            a {
                color: inherit;
                cursor: inherit;
                background: inherit;
            }
        }
    }

    a {
        padding: 8px 32px !important;
        color: inherit;
        font-size: 15px !important;
        line-height: 14px !important;
        cursor: pointer;
    }

    li:hover {
        background: @menuItemHoverBackground;
        border-color: @menuItemHoverBorder;
        //color: @white;
    }

    li.checked a, li.checked-partial a, li.unchecked a {
        &:before {
            font-family: @sysIconFontName;
            position: absolute;
            left: 10px;
            content: "\e004";
        }
    }

    li.checked-partial a {
        &:before {
            content: "\e005";
        }
    }
	
	li.unchecked a {
        &:before {
            content: "\e005";
        }
    }

    &.place-right {
        right: -15px;
        left: auto;
    }

    .divider {
        padding: 0;
        height: 1px;
        margin: 9px 1px;
        overflow: hidden;
        background-color: #e5e5e5;
        border-width: 0;
        &:hover {
            background: #e5e5e5;
        }
    }

    &.open {
        display: block !important;
    }

    .dropdown-menu {
        left: 100%;
        top: -10%;
    }

    > li:hover > .dropdown-menu[data-show="hover"] {
        display: block;
    }

    & > li > a.dropdown-toggle {

        &:after {
            font-family: @sysIconFontName;
            font-size: .7em;
            content: "\e001";
            left: 90%;
            top: 50%;
            margin-top: -1.4em;
            .rotate(-90deg);
        }
    }

    &.drop-left {
        left: -100%;
        //right: auto;
    }
    &.drop-up {
        top: auto;
        bottom: 0;
    }

    .menu-title {
        background-color: @menuItemTitleBackground;
        font-size: 12px;
        //font-weight: bold;
        line-height: 14px;
        padding: 4px 8px;
        border: 0;
        border-bottom: 1px @menuBorder solid;
        border-top: 1px @menuBorder solid;
        color: #646464;
        &:first-child {
            margin: 0;
            border-top-width: 0;
            &:hover {
                border-top-width: 0;
            }
        }
        &:hover {
            background-color: @menuItemTitleBackground;
            cursor: default;
            border: 0;
            border-bottom: 1px @menuBorder solid;
            border-top: 1px @menuBorder solid;
        }
    }

    &.inverse {
        border: 2px #3b3b3b solid;

        li {
            border: 0;
            a {
                padding: 9px 32px !important;
            }
        }

        li:hover {
            border: 0;
            background-color: #e5e5e5;
        }

        .menu-title {
            &:hover {
                background-color: @menuItemTitleBackground;
            }
        }

        .divider {
            margin-left: 0;
            margin-right: 0;
        }
    }

    &.dark {
        background-color: @grayDark;
        border: 2px @grayDark solid;
        color: @white;

        &.opacity {
            background-color: rgba(61,61,61,.9);
        }

        li {
            border: 0;
            color: inherit;
            a {
                padding: 9px 32px !important;
                color: inherit;
            }
            &.disabled, &.disabled:hover {
                cursor: default !important;
                background: transparent !important;
                color: @gray;
                a {
                    color: inherit;
                    cursor: inherit;
                    background: inherit;
                }
            }
        }

        li:hover {
            border: 0;
            background-color: saturate(@dark, 10%);
            color: @white;
        }

        .menu-title {
            background-color: #3b3b3b;
            &:hover {
                background-color: #3b3b3b;
            }
        }

        .divider {
            margin-left: 0;
            margin-right: 0;
            background-color: @gray;
            &:hover {
                background: @gray;
            }
        }
    }
}

.dropdown-toggle {
    padding-right: 20px !important;
    &:after {
        position: absolute;
        margin-left: .25em;
        bottom: 0;
        font-family: @sysIconFontName;
        font-size: .7em;
        content: '\e001';
    }

    &.no-marker {
        &:after {
            content: "";
        }
    }

    &.without-icon {
        &:after {
            content: "" !important;
        }
    }
}

.contextmenu {
    z-index:1000;
    position: absolute;
    background-color:#FFFFFF;
    border: 2.5px solid rgb(42,42,42);
    padding: 2px;
    .no-user-select;

    .item:active {
        background-color:rgb(0,0,0);
        color:rgb(255,255,255);
    }
    .item:hover {
        background-color:rgb(222,222,222);
    }
    .item {
        background-color:#FFFFFF;
        width:auto;
        padding: 12px;
        margin:-2px;
    }
}