/* Minimal css for clickable pure CSS collapsible tree menu */
/* As specific as possible to prevent interference with other code */
#menutree {
    background: #fff;
    padding: 0px;
    margin: 0px;
    width: 30%;
    display: none;
    overflow-x: auto;
    height: 100vh;
    -webkit-overflow-scrolling: touch;
    -moz-overflow-scrolling: touch;
    -ms-overflow-scrolling: touch;
    -o-overflow-scrolling: touch;
    overflow-scrolling: touch;
}

    #menutree ul {
        padding: 0px;
        margin: 0px;
    }

    #menutree li {
        position: relative;
        list-style: none; /* all list item li dots invisible */
        border-top: 1px solid rgba(210, 159, 88, 0.22);
        padding: 0px 30px; /*changed by suman on 21/03/2017*/
        text-transform: uppercase;
        line-height: 5em;
        font-size: 13px;
        color: #000;
    }

        #menutree li a {
            text-transform: uppercase;
            color: #000;
            display: block;
        }
       
        #menutree li ul li a {
            color: #000;
        }

        #menutree li:last-child {
            border-bottom: 1px solid rgba(210, 159, 88, 0.22);
        }

li .menu_label + input[type=checkbox] {
    display: none; /* Added for whocle link clickable */
    opacity: 0; /* checkboxes invisible and use no space */
}
/* display: none; is better but fails in ie8 */
li .menu_label {
    position: relative; /* Added for whocle link clickable */
    z-index: 9; /* Added for whocle link clickable */
    display: block; /* Added for whocle link clickable */
    cursor: pointer; /* cursor changes when you mouse over this class */
    font-weight: normal;
}
    /* could add the many user-select: none; commands here */
    li .menu_label + input[type=checkbox] + ul > li {
        display: none; /* prevents sublists below unchecked labels from displaying */
    }

    li .menu_label + input[type=checkbox]:checked + ul > li {
        display: block; /* display submenu on click */
    }

    li .menu_label:focus {
        outline: 0
    }

#menutree li ul {
    background: #fff;
}

    #menutree li ul li { /*changed by suman on 21/03/2017*/
        padding: 0 0 0 20px;
    }

        #menutree li ul li:last-child {
            border-bottom: none;
        }

        #menutree li ul li .menu_label {
            color: #000;
        }

        #menutree li ul li ul li { /*changed by suman on 21/03/2017*/
            padding: 0 20px;
        }

#menutree li.active-link {
    background: #fff;
    color: #d3a052;
}

#menutree li ul li.active-link .menu_label {
    color: #d3a052;
}

#menutree li:before {
    font-family: FontAwesome;
    font-weight: lighter;
    font-style: normal;
    color: #3d3d3d;
    position: absolute;
    right: 40px;
    content: "\f067";
}

#menutree li.no_icn:before {
    content: "";
}

#menutree li.active-link:before {
    font-family: FontAwesome;
    font-weight: lighter;
    font-style: normal;
    color: #d29f58;
    position: absolute;
    right: 40px;
    content: "\f068";
}

#menutree li ul li ul li:before {
    content: "";
}
/* hide "+" icon from creation & Faberge child items */
#menutree li:nth-child(3) ul li:before, #menutree li:nth-child(4) ul li:before, #menutree li:nth-child(5) ul li:before {
    content: "";
}
/* Remove arrow on mouseover from last and second last item of menu */
/*#menutree li:last-child:before, #menutree li:nth-last-child(2):before, #menutree li:nth-last-child(3):before, #menutree li:nth-last-child(4):before, #menutree li:nth-last-child(5):before {
	content: "";	
}*/
#menutree li.no-child:before {
    content: "";
}

#menutree li.nav-link {
    color: #808080;
}

    #menutree li.nav-link a {
        text-transform: inherit;
        color: #808080;
    }

        #menutree li.nav-link a:hover {
            color: #fff;
        }
/* For Menu Toggle */
#menu_toggle {
    display: none;
}
#menutree li.nav-link > a, #menutree li > a {
    color: #000;
    text-transform: capitalize;
}

    #menutree li.nav-link > a:hover, #menutree li > a:hover {
        color: #000;
    }
    #menu_toggle img {
        vertical-align: inherit;
    }

#menu_bar {
    display: none;
}

#menu_toggle img {
    vertical-align: inherit;
}

@media only screen and (max-width: 1023px) {
    #menu_toggle {
        /*position: absolute;*/
        display: block;
        /*top: 25px; 
        left: 4%;*/
        /*top: 23px;*/ /* Done header changes by suman on 17/05/2018 */
        /*left: 20px;*/
        width: 24px;
        height: 24px;
        margin-top: 5px;
    }

        #menu_toggle a {
            padding: 0;
        }

    #menu_bar {
        display: none;
        overflow-y: scroll;
        height: 85vh; /*changed on 06/03/2017 */
        position:relative;
        z-index:2;
    }

    #menutree {
        width: 100%;
        display: block;
    }

        #menutree li.nav-link:before {
            content: "";
        }
}

@media only screen and (max-width: 800px) {
    #menutree {
        max-height: 463px;
        margin-bottom: 30px
    }
}

@media only screen and (max-width: 360px) {

    #menutree li.nav-link:last-child {
        margin-bottom: 0px
    }
}

@media screen and (device-aspect-ratio: 40/71) {
    #menutree li.nav-link:last-child {
        margin-bottom: 100px
    }
}