/************************************************************************************
*
* Google Nexus Menu
*
/************************************************************************************/

html.cursor {
    cursor: pointer;
}
#sideMenuScroller {
    position: absolute;
    overflow-y: scroll;
    overflow-x: hidden;
    width: 400px;
    height: 100%;
}
.gnm-nav {
    width: 100%;
    height: 40px;
    border-bottom:1px solid var(--theme-color-thirty);
    position: fixed;
    top:0;
    left:0;
    z-index:20;
    background-color:var(--theme-color);
}

.gnm-nav a #menuButton {
    padding:10px 30px;	
}
.gnm-nav #menuButton i{
    width:40px;	
    text-align: center;
}
.gnm-nav ul{
    margin:0;
    padding:0;
    list-style:none;
}
#sideMenuWrapper{
    position: fixed;
    top: 40px;
    bottom: 0;
    left: 0;
    overflow: hidden;
    width: 0;
    border-top: 1px solid #c6d0da;
    z-index:20;
    /*-webkit-transform: translateX(-60px);
    -moz-transform: translateX(-60px);
    transform: translateX(-60px);
    -webkit-transition: -webkit-transform 0.5s, width 0.5s;
    -moz-transition: -moz-transform 0.5s, width 0.5s;
    transition: transform 0.5s, width 0.5s; */
}
#sideMenuWrapper ul,
#sideMenuWrapper ul ul	{
    margin:0;
    padding:0;
    list-style:none;
}
.gnm-nav li {
    margin:0;
    float:left;
    border-right:1px solid #ddd;
    font-size:18px;
}

.gnm-nav a,
#sideMenu li a {
    color:#ffffff;
    text-decoration:none;
    display:block;
    padding:0 10px;
    height:40px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    white-space: nowrap;
}
.gnm-nav a{
    padding:5px 10px;
}
.gnm-nav a.client-logo{
    padding: 0;
}
.gnm-nav a.dropdown-item{
    background-color: var(--theme-color);
}
.gnm-nav a.dropdown-item:hover {
    color:#ffffff;
    background-color: #5b6064;
}
.gnm-nav .dropdown-menu li{
    width:100%;
}
#sideMenu li ul li a {
    text-decoration:none;
    display:block;
    padding:10px 0;
    height:40px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    white-space: nowrap;
}
#sideMenu a i {
    display: inline-block;
    position: relative;
    padding:0;
    width:50px;
}
#sideMenu li ul a i {
    width:20px;
}
.gnm-nav a:hover,
#sideMenu a:hover {
    color:#ffffff;
    background-color: #5b6064;
}	


#sideMenuWrapper,
#sideMenuWrapper.showHalfMenu,
#sideMenuWrapper.showFullMenu{
    -webkit-transition: 0.2s ease;
    -moz-transition: 0.2s ease;			
    -ms-transition: 0.2s ease;						
    transition: 0.3s ease-out 0.2s;		
}

#sideMenuWrapper ul ul li,
#sideMenuWrapper.showFullMenu ul ul li	 {
    -webkit-transition: 0.2s ease;
    -moz-transition: 0.2s ease;			
    -ms-transition: 0.2s ease;						
    transition: 0.6s ease-out 0.1s;		
}
#sideMenu {
    list-style: none;
    position: absolute;
    padding:0;
    margin:0;
    width: 400px;	
    background-color:var(--theme-color);
    font-size:1rem;
}

#sideMenuWrapper.showHalfMenu {
    left:0;
    width:60px;
}
#sideMenuWrapper.showFullMenu {
    left:0;
    width: 370px;		
}

#sideMenuWrapper .itemInFocus ul li {
    height:40px;				
}

#sideMenuWrapper > ul {
    width: 100%;		
    padding-bottom:60px;	
}
#sideMenu {
    padding-bottom: 30px;
}
#sideMenu li {
    width: 100%;
    margin:0;
}
#sideMenu .menuGroupHeading{    		
    font-weight:400;
}
#sideMenu ul.sub-menu{
    padding-left:60px;
}
#sideMenuWrapper ul li a {
    border-bottom:1px solid var(--theme-color-thirty);
    border-right:1px solid var(--theme-color-thirty);
}

#sideMenuWrapper ul li span {
    position: relative;
    display: inline-block;
    padding: 10px 0;
    width: calc( 100% - 60px);
}		

#sideMenuWrapper ul ul li {
    overflow:hidden;
    height: 0;				
}

#sideMenu input.search {
    font-family: 'Roboto', sans-serif;			
    border:0;
    outline:0;
    font-weight:300;
    background:transparent;
    color:#5b6064;			
}


input.search::-webkit-input-placeholder {
    color:#5b6064;		
}
input.search:-moz-placeholder {
    color:#5b6064;		
}
input.search::-moz-placeholder {
    color:#5b6064;		
}
input.search:-ms-input-placeholder {
    color:#5b6064;
}

#sideMenu li.searchForm:hover input.search:focus,
#sideMenu li.searchForm:hover input.search::-webkit-input-placeholder {
    color:#fff;		
}		

#sideMenu li.searchForm:hover input.search:-moz-placeholder {
    color:#fff;		
}				

#sideMenu li.searchForm:hover input.search::-moz-placeholder {
    color:#fff;		
}				

.treeview-indicator{
    padding-left:5px !important;
}
/************************************************************************************
*
* Responsive
*
/************************************************************************************/		

/*------------------------------------------------------------------*/ 
/*	2) Note: Design for a width of 480 px
/*------------------------------------------------------------------*/
@media only screen and (min-width: 200px) and (max-width: 480px) {    
    .gnm-nav a,
    #sideMenu a {
        padding:10px 15px;
    }	
    .gnm-nav a.client-logo{
        padding: 0;
    }
    .gnm-nav a #menuButton {
        padding:10px 30px;	
    }
    .gnm-nav #menuButton i{
        width:20px;	
    }
    #sideMenu.showFullMenu,
    #sideMenu.showFullMenu li,
    #sideMenu.showFullMenu a {
        width: 130%;
    }    

}