@import (reference) "../../Scripts/bootstrap/less/bootstrap.less";
@import (reference) "custom_variables.less";

.menu_container {
    margin-top: 0px;
    background: transparent;
    background-color: #ffffff;
    float: none;
    width: 100%;
    z-index: 100;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    padding: 0px;
    height: auto;

    > ul {
        background: inherit;
        list-style: none;
        margin: 0;
        padding: 0;
        float: none;
        position: relative;
        width: 100%;
        height: 0;
        transition: all 100ms linear;
        -moz-transition: all 100ms linear;
        -o-transition: all 100ms linear;
        -webkit-transition: all 100ms linear;
        overflow: hidden;

        &.collapsed {
            height: auto;
            min-height: 40px;
            max-height: 2999px;
            border-bottom: solid 1px #ccc;

            > li {
                border-bottom: solid 1px #ccc;
                width: 50%;
                float: left;
                border-right: solid 1px #cccccc;
                text-align: center;

                &:nth-child(even) {
                    border-right: solid 0px red;
                }

                &:last-child {
                    border-bottom: solid 0px red;
                }

                > a {
                    font-weight: bold;
                }
            }
        }

        > li {
            display: block;
            float: none;
            padding: 0;
            margin: 0;

            > a {
                padding: 15px 15px;
                margin: 1px 0px;
                display: block;
                color: @gray-darker;
                text-decoration: none;
                font-size: 13px;
                line-height: 18px;
                font-weight: 500;
                border-bottom: solid 0px #cccccc;
                background-color: #ffffff;
                text-transform: uppercase;
            }

            &.active > a {
                border-bottom: solid 0px #428BCA;
            }

            &:hover > a {
                border-bottom: solid 0px #428BCA;
            }

            &.right {
                > .dmui_dropdown_block {
                    right: 0;
                }
            }

            &:hover {
                > .dmui_dropdown_block {
                    height: auto;
                    min-height: 40px;
                    max-height: 3000px;
                    visibility: visible;
                    opacity: 1;
                }
            }
        }
    }

    .dmui_dropdown_block {
        visibility: visible;
        position: relative;
        background: #fff;
        top: 100%;
        color: #575757;
        opacity: 0;
        transition: opacity 100ms linear;
        -moz-transition: opacity 100ms linear;
        -o-transition: opacity 100ms linear;
        -webkit-transition: opacity 100ms linear;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        z-index: 30;
        height: 0;
        overflow: hidden;
        border: solid 1px #cccccc;

        &.full_width {
            left: 0px;
            width: 100%;
            margin-left: 0px;
        }

        &.half_width {
            width: 50%;
        }

        ul.dmui-simple-ul li a {
            color: #666;
        }

        .dmui-col {
            float: none;
            width: auto;
            box-sizing: border-box;
            -moz-box-sizing: border-box;

            .content {
                padding: 10px 0px;
            }
        }

        h2 {
            font-size: 14px;
            padding: 6px 0 16px 8px;
            margin: 0 0 18px 0;
            color: #444;
            height: 6px;
            font-weight: 300;
        }

        p {
            font-size: 13px;
        }

        img.auto_width {
            width: auto;
            width: 100%;
        }

        a {
            color: #777777;

            &:hover {
                color: #666;
            }
        }

        > ul.dmui-submenu > li > ul.dmui-submenu {
            margin-left: 4px;
        }

        ul.dmui-submenu li a {
            color: #fff;
        }

        ul.dmui-submenu li a:hover {
            color: #fff;
        }
    }
}

ul.dmui-simple-ul {
    list-style: none;
    padding: 0;
    margin: 0;
    margin-bottom: 10px;

    li {
        display: block;

        a {
            display: block;
            padding: 4px 0;
            text-decoration: none;
            margin: 2px 0;

            &:hover {
                color: #111;
            }

            &:before {
                display: inline-block;
                float: left;
                content: '\203A';
                font-size: 12px;
                margin-right: 6px;
                font-weight: bold;
                color: #aaa;
            }

            &:hover:before {
                color: inherit;
            }
        }
    }
}

.dmui-container {
    padding: 15px 20px;

    &:after {
        content: ' ';
        display: block;
        clear: both;
    }
}

ul.dmui-submenu {
    list-style: none;
    padding: 0;
    margin: 0;
    background: #fff;

    li {
        display: block;
        position: relative;

        a {
            display: block;
            padding: 9px 30px 9px 20px;
            text-decoration: none;
            margin: 0;
            line-height: 18px;
            white-space: nowrap;
            color: #777777 !important;

            .fa {
                font-size: 16px;
                margin-right: 6px;
            }
        }

        &:hover > a {
            background: rgba(0,0,0,0.1);
            color: #fff;
        }
    }
}

ul.dmui-submenu {
    > li {
        &.has-dropdown > a:after {
            content: "\203A";
            position: absolute;
            font-family: Arial, sans-serif;
            top: 8px;
            right: 10px;
            font-size: 20px;
            line-height: 16px;
            font-weight: bold;
            opacity: 0.7;
        }

        &.has-dropdown:hover > a:after {
            opacity: 1;
        }

        &.has-dropdown:hover > .dmui-submenu {
            visibility: visible;
            opacity: 1;
            transition: opacity 100ms linear;
            -moz-transition: opacity 100ms linear;
            -o-transition: opacity 100ms linear;
            -webkit-transition: opacity 100ms linear;
            height: auto;
        }

        > .dmui-submenu {
            visibility: hidden;
            opacity: 0;
            position: relative;
            width: auto;
            text-align: left;
            min-width: 160px;
            top: 100%;
            height: 0;

            a {
                padding-left: 30px;
            }

            li > .dmui-submenu a {
                padding-left: 40px;
            }

            li > .dmui-submenu > li > .dmui-submenu a {
                padding-left: 50px;
            }
        }
    }
}

.menu_container ul {
    > li {
        a {
            position: relative;
        }

        &.has-dropdown > a:after {
            content: "\203A";
            .rotate (90deg);
            position: absolute;
            font-family: Arial, sans-serif;
            top: 12px;
            right: 10px;
            font-size: 24px;
            line-height: 16px;
            font-weight: bold;
            opacity: 0.5;
        }

        &.has-dropdown:hover > a:after {
            opacity: 1;
        }
    }
}

.mobile_collapser {
    display: block;
    height: 51px;
    text-align: left;
    padding: 12px 25px;
    color: #fff;
    font-size: 16px;
    line-height: 22px;
    background-color: #428BCA;
    border-bottom: solid 1px #216AA5;
    margin-bottom: 0px;

    &:before {
        content: '\2261';
        display: block;
        float: left;
        margin: -1px 8px 0 2px;
        font-size: 30px;
    }
}


/* =Responsive: All above the breakpoint, default @ 768px
-------------------------------------------------------------- */
@media only screen and (min-width: 768px) {
    //------------------------------------------------------------

    .mobile_collapser {
        display: none;
    }

    .menu_container {
        //height: 42px;
        float: right;
        clear: none;
        margin: 29px 0px;
        background: transparent;
        position: relative;
        top: 0;
        left: 0;
        width: auto;

        > ul {
            background: none;
            height: inherit;
            overflow: visible;

            > li {
                float: left;
                background: inherit;
                width: auto;
                border-left: solid 0px #cccccc;
                text-align: left;

                > a {
                    padding: 12px 12px;
                    margin: 0 3px;
                    display: block;
                    color: @gray-dark;
                    text-decoration: none;
                    font-size: 13px;
                    line-height: 18px;
                    font-weight: 800;
                    background-color: transparent;
                }

                &.right {
                    float: right;
                }

                &:hover {
                    > .dmui_dropdown_block {
                        overflow: hidden;
                        visibility: hidden;
                        opacity: 0;
                    }
                }
            }
        }

        .dmui_dropdown_block {
            overflow: hidden;
            visibility: hidden;
            opacity: 0;
            position: absolute;
            height: auto;
            top: 43px;

            ul.dmui-simple-ul li a {
                color: #666;
                font-weight: 700;
            }

            ul.dmui-submenu li a {
                color: #666;
                font-weight: 700;
            }

            .dmui-col {
                float: left;

                .dmui-container {
                    padding: 10px 20px 10px 10px;
                    border-right: 1px solid #ddd;
                }

                &:last-child .dmui-container {
                    border-right: 0px solid #ddd;
                }

                &.bordered {
                    border-right: 1px solid #ddd;
                }
            }

            > ul.dmui-submenu > li > ul.dmui-submenu {
                margin-left: 0;
            }
        }
    }

    ul.dmui-submenu {
        > li {
            > .dmui-submenu {
                
                top: 0;
                height: auto;
                min-width: 160px;
                right: 100%;
                box-shadow: -2px 2px 0 rgba(0,0,0,0.1);

                a {
                    padding-left: 20px !important;
                }
            }
        }

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

            &.has-dropdown > a:after {
                content: '\2039';
                right: auto;
                left: 10px;
            }

            a .fa {
                margin-right: 0;
                margin-left: 6px;
            }
        }

        &.right-align > li .dmui-submenu {
            left: auto;
            right: 100%;
            box-shadow: 2px 2px 0 rgba(0,0,0,0.1);
        }
    }

    .menu_container .dmui_dropdown_block .dmui-col.span1 {
        width: 100%;
    }

    .menu_container .dmui_dropdown_block .dmui-col.span2 {
        width: 50%;
    }

    .menu_container .dmui_dropdown_block .dmui-col.span3 {
        width: 33%;
    }

    .menu_container .dmui_dropdown_block .dmui-col.span4 {
        width: 25%;
    }

    .menu_container .dmui_dropdown_block .dmui-col.span5 {
        width: 20%;
    }

    .menu_container .dmui_dropdown_block .dmui-col.span6 {
        width: 16%;
    }

    .menu_container .dmui_dropdown_block .dmui-col.span10per {
        width: 10%;
    }

    .menu_container .dmui_dropdown_block .dmui-col.span20per {
        width: 20%;
    }

    .menu_container .dmui_dropdown_block .dmui-col.span30per {
        width: 30%;
    }

    .menu_container .dmui_dropdown_block .dmui-col.span40per {
        width: 40%;
    }

    .menu_container .dmui_dropdown_block .dmui-col.span50per {
        width: 50%;
    }

    .menu_container .dmui_dropdown_block .dmui-col.span60per {
        width: 60%;
    }

    .menu_container .dmui_dropdown_block .dmui-col.span70per {
        width: 70%;
    }

    .menu_container .dmui_dropdown_block .dmui-col.span80per {
        width: 80%;
    }

    .menu_container .dmui_dropdown_block .dmui-col.span90per {
        width: 90%;
    }


    //--- To delay the mouse-out of the dropdown ----

    .menu_container ul li .dmui_dropdown_block .dmui-container {
        -webkit-transition: .5s all;
        -webkit-transition-delay: .5s;
        -moz-transition: .5s all;
        -moz-transition-delay: .5s;
        -ms-transition: .5s all;
        -ms-transition-delay: .5s;
        -o-transition: .5s all;
        -o-transition-delay: .5s;
        transition: 0s all;
        transition-delay: .3s;
    }

    .menu_container ul li:hover .dmui_dropdown_block .dmui-container {
        -webkit-transition-delay: 0s;
        -moz-transition-delay: 0s;
        -ms-transition-delay: 0s;
        -o-transition-delay: 0s;
        transition-delay: 0s;
    }


    .menu_container ul {
        > li {
            &.has-dropdown > a:after {
                right: 0px;
                font-size: 18px;
            }
        }
    }
}

/* =Responsive: Desktop or even Big Tablet
-------------------------------------------------------------- */
@media (min-width: 992px) and (max-width: 1199px) {
    //------------------------------------------------------------


    .menu_container {
        > ul {
            > li {
                > a {
                    padding: 15px 10px;
                    margin: 0 3px;
                }
            }
        }
    }
}

/* =Responsive: Small Tablet
-------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 991px) {
    //------------------------------------------------------------


    .menu_container {
        float: none;
        clear: both;
        margin: 0px 0px 20px 0;

        > ul {
            > li {
                > a {
                    padding: 15px 10px;
                    margin: 0 3px;
                }
            }
        }
    }
}