@plone-submenu-bg:              #f2f1f1;
@plone-submenu-border:          #DDDADA;
@plone-submenu-link-hover-bg:   #7099bf;
@plone-submenu-page-text-color: lighten(#000, 30%);
@plone-submenu-float-breakpoint:768px;

.icon-controlpanel-RichMenuSettings:before,
.icon-navigation_menu_properties:before { content: '\e838'; } /* '' */

#portal-globalnav {
    position:relative;
    width:100%;
    #manage_sections {
        left: 0;
        position: absolute;
        top: 0;
        z-index:3000;
    }
    ul.smenu {
        padding-left:0;
        list-style-type:none;
        min-width:200px;
        background-color:@plone-submenu-bg;
        li.sectionItem {
            border-bottom:1px solid @plone-submenu-border;
            width:100%;
            a.sectionText {
                padding:1em;
                display:block;
                &:focus,
                &:hover,
                &:hover .image {
                    color:white;
                    background-color:@plone-submenu-link-hover-bg;
                    text-decoration:none;
                }
            }
            &.menuhover > a.sectionText,
            &.menuhover > a.sectionText .image {
                color:white;
                background-color:@plone-submenu-link-hover-bg;
                text-decoration:none;
            }
        }
        &.useflexbox {
            align-items: stretch;
            li.sectionItem > a.sectionText {
                height:100%;
                box-sizing:border-box;
                &.hasChildren {
                    height:auto;
                }
            }
        }
        &.columns_2 {
            min-width:250px;
            > li {
                width:50%;
                float:left;
                -webkit-box-flex:0 1 48%;
                -moz-box-flex:0 1 48%;
                -webkit-flex:0 1 48%;
                -ms-flex:0 1 48%;
                flex:0 1 48%;
            }
        }
        &.columns_3 {
            min-width:300px;
            > li {
                width:33.3%;
                float:left;
                -webkit-box-flex:0 1 31%;
                -moz-box-flex:0 1 31%;
                -webkit-flex:0 1 31%;
                -ms-flex:0 1 31%;
                flex:0 1 31%;
            }
        }
        &.columns_4 {
            min-width:400px;
            > li {
                width:25%;
                float:left;
                -webkit-box-flex:0 1 23%;
                -moz-box-flex:0 1 23%;
                -webkit-flex:0 1 23%;
                -ms-flex:0 1 23%;
                flex:0 1 23%;
            }
        }
    }
    li.sectionItem {
        position:relative;
        &.right > .sectionTreeLevel1 {
            right:initial;
            left:unset;
        }
        &.left {
            position:static;
            > .sectionTreeLevel1 {
                right:unset;
                left:initial;
            }
        }
        &.center > .sectionTreeLevel1 {
            right:auto;
            left:50%;
        }
        &.right_site,
        &.left_site {
            position:static !important;
        }
        &.left_site > .sectionTreeLevel1 {
            left:0;
        }
        &.right_site > .sectionTreeLevel1 {
            right:0;
        }
        &.menuhover > a.sectionText {
            background-color:@plone-submenu-link-hover-bg;
            color:white;
        }
        & .menuPage > ul.smenu.useflexbox,
        & ul.smenu.useflexbox {
            justify-content:space-between;
            -webkit-flex-wrap: wrap;
            -moz-flex-wrap: wrap;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        }
        &.menuhover > ul.smenu,
        &.menuhover > ul.sectionSubmenu,
        &.menuhover > .menuPage > ul.smenu {
            display:block;
            &.useflexbox {
                display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
                display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
                display: -ms-flexbox;      /* TWEENER - IE 10 */
                display: -webkit-flex;     /* NEW - Chrome */
                display: flex;
            }
        }
    }
    &.hover li.sectionItem > .sectionTree,
    &.click li.sectionItem > .sectionTree {
        display:none;
        position:absolute;
        &.always {
            position:relative;
        }
    }
    &.hover li.sectionItem:hover > .sectionTree,
    &.hover li.sectionItem.menuhover > .sectionTree,
    &.click li.sectionItem.menuhover > .sectionTree {
        display:block;
        z-index:100;
    }
    &.hover li.sectionItem:hover > .sectionTree.useflexbox,
    &.hover li.sectionItem.menuhover > .sectionTree.useflexbox,
    &.click li.sectionItem.menuhover > .sectionTree.useflexbox {
        display:flex;
        justify-content:space-between;
    }
    .sectionTreeLevel1 {
        .sectionTreeLevel2.always {
            border-left:none;
            display: block !important;
            left: 0 !important;
            top: 0 !important;
            position: relative;
            margin-bottom:1.5em;
            padding-left: 1.5em;
            li.sectionItem.liLevel2 a.sectionText {
                padding: 0.5em;
            }
        }
        ul.smenu {
            position:abolute;
            top:0;
            left:100%;
            border-left:1px solid @plone-submenu-border;
        }
    }
    .menuPage {
        width:400px;
        float:none;
        padding:1.5em;
        background:@plone-submenu-bg;
        font-size:90%;
        zoom:1;
        &.sectionTreeLevel1 ul.smenu {
            position:relative;
            left:0px;
            top:0px;
        }
        .sectionTree.left,
        .sectionTreeLevel1.left {
            float:left;
            margin-right:1.5em;
        }
        .sectionTree.right,
        .sectionTreeLevel1.right {
            float:right;
            margin-left:1.5em;
        }
        #viewlet-above-content-title,
        #viewlet-below-content-title,
        #viewlet-below-content-body,
        .documentActions,
        .reviewHistory {
            display:none;
        }
        &.sectionTreeLevel1 {
            display:block;
            a.sectionText {
                border-bottom:none;
            }
            ul.smenu {
                border-left:none;
            }
        }
        .image-product {
            border-radius: none;
            box-shadow: none;
        }
        figcaption {
            display:none;
        }
    }
    .menuPage.hasSubMenu {
        width:500px;
    }
    .menuContent {
        overflow:auto;
        float:none;
        color:@plone-submenu-page-text-color;
    }
    .hasSubMenu {
        .menuContent{
            width:auto;
        }
        .menuContent.right {
            margin-right:200px;
        }
        .menuContent.left {
            margin-left:200px;
            clear:none;
        }
    }
    .menuDescription .title {
        display:block;
        border-bottom:1px solid @plone-submenu-border;
        font-weight:bold;
        margin-bottom:0.3em;
    }
    .menuImage .title,
    a.sectionText.always {
        display:block;
        border-bottom:1px solid @plone-submenu-border;
        font-weight:bold;
        margin-bottom:0.3em;
    }
    a.sectionText.menuImage{
        overflow:auto;
        .image {
            display:block;
            background-color:@plone-submenu-bg;
            float:left;
            padding-right:1em;
        }
    }
    @media (max-width: @plone-submenu-float-breakpoint) {
        .menuPage {
            width:auto;
            .sectionTree.right,
            .sectionTreeLevel1.right {
                float:left;
            }
        }
        .menuContent.right {
            margin-right:0;
        }
        .hasSubMenu .menuContent.left {
            margin-left:0;
        }
        ul.smenu.columns_2,
        ul.smenu.columns_3,
        ul.smenu.columns_4 {
            min-width:0;
        }
        ul.smenu.columns_2 li.sectionItem.liLevel1,
        ul.smenu.columns_3 li.sectionItem.liLevel1,
        ul.smenu.columns_4 li.sectionItem.liLevel1 {
            width:auto;
            float:none;
            -webkit-box-flex:initial;
            -moz-box-flex:initial;
            -webkit-flex:initial;
            -ms-flex:initial;
            flex:initial;
        }
        li.sectionItem.menuhover > ul.smenu.useflexbox,
        li.sectionItem.menuhover > .menuPage > ul.smenu.useflexbox {
            display:block !important;
            width:100% !important;
        }
        .sectionTreeLevel1 {
            width:100% !important;
        }
        .sectionTree {
            width:auto !important;
        }
        span.image_tile .image,
        span.image_tile .description {
            display:none !important;
        }
        span.image_tile .title {
            margin-left:0;
        }
        ul.smenu.sectionTreeLevel2.always li.sectionItem {
            padding-left:0px;
        }
        &.hover li.sectionItem .sectionTree,
        &.click li.sectionItem .sectionTree {
            position:relative;
        }
        .sectionTreeLevel1 ul.smenu {
            left:0;
        }
        &.hover li.sectionItem:hover > .sectionTree,
        &.hover li.sectionItem:hover > .sectionTree.useflexbox {
            display:none;
        }
        &.hover li.sectionItem.menuhover > .sectionTree,
        &.click li.sectionItem.menuhover > .sectionTree {
            display:block;
            position:relative;
        }
        .hasSubMenu .menuContent {
            margin:0 !important;
            clear:both;
            width:100%;
        }
    }
}
.plone-navbar-collapse.in {
    overflow-y:visible !important;    
}

