html,body,div.app{
    height:100%;
}




div.sidebar {
    width: 230px;    
}

.close-sidebar {
    display: none;
}

@media all and (max-width: 1024px) {
    div.sidebar {
        position:absolute;
        left: -230px;
        display: none;        
        transition: 1s;
    }
    div.sidebar.show{
        left: 0;
        display:block;
        transition: 1s;
        z-index:9999;
        height: 100%;
        
    }

    .close-sidebar {
        display: block;
        cursor: pointer;
    }
}

div.main{
    position: relative;
    flex: 1;   
    overflow-y: auto; 
}

div.menu {
    display: flex;
    flex-direction: column;
}

.menu-item {
    display: flex;
    border: 1px solid #555;
    border-radius: 10px;
    margin: 10px;
    padding: 10px 0px;
    cursor: pointer;
    text-decoration: none;
    color: #fff;
}

.menu-item:hover {
    background-color: #777;
    color: white;
}

.menu-item.active {
    background-color: #555;
    color: white;
}

.menu-item-container.active > .menu-item {
    background-color: #555;
    color: white;
}

.menu-item i {
    
    display:flex;
    width: 50px;
    justify-content: center;
    align-items: center;
}

.menu-item span {
    display:block;
    flex: 1;
    text-align: left;
}

.main > div.container {
    padding-top: 70px;
}