#menu,
#submenu {
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}

.nano-content {
    display: flex;
    background: #40444d;
}

.nav-main {
    flex: 1;
}

#submenu {
    background-color: #262A31;
    border-top: 1px solid #3e434b;
    height: 100vh;
    padding: 20px 0;
    overflow-y: auto;
    display: none;
}

#submenu.visible {
    display: block;
}

    #submenu ul {
        padding: 0;
        list-style-type: none;
    }

    #submenu li {
        line-height: 15px;
    }

    #submenu h4 {
        color: hsl(212, 13%, 45%);
        margin: 14px 20px;
    }

    #submenu a {
        color: hsl(212, 13%, 78%);
        padding: 14px 20px;
        width: 100%;
        display: inline-block;
        text-decoration: none;
    }

    #submenu a:hover{
        background:hsl(218, 13%, 14%)
    }

    #submenu a.active {
        box-shadow: 3px 0 0 #25a8e0 inset;
        background:hsl(218, 13%, 14%)
    }

.sidebar-left-collapsed #submenu {
    display: none !important;
}

/* less padding needed for desktop */

@media only screen and (min-width: 1025px) {
    #submenu a {
        padding: 8px 20px;
    }
}

/* hacks to integrate into existing menu */
/* FYI: 430px = 180px (submenu width) + 250px (mainmenu width) */
                                     
.nav-sub {                                          
    flex-basis: 180px;
}
                          
@media only screen and (min-width: 768px) {
    .nav-sub {
        flex-basis: 45%;
    }
    html.fixed.submenu .content-body {                       
        margin-left: 430px;                   
    }                                                                                                            
    html.submenu.sidebar-left-collapsed .content-body {      
        margin-left: 73px;                                   
    }                                                        
    html.fixed.submenu.sidebar-left-collapsed .content-body {
        margin-left: 73px;                                   
    }                                                        
    html.fixed.submenu .page-header {                        
        left:  430px;                              
    }                                                        
    html.fixed.submenu.sidebar-left-collapsed .page-header { 
        left: 73px;                                          
    }                                                        
    html.submenu .sidebar-left {                             
        width: 430px;                              
    }                                                        
}                                                            
@media(max-width: 1024px) and (min-width: 1024px) {          
    html.submenu .content-body {                             
        margin-left: 0;                                      
    }                                                        
    html.submenu.sidebar-left-collapsed .content-body {      
        margin-left: 0;                                      
    }                                                        
}