x-aside div.aside {
    height: 100%; /* 100% Full-height */
    position: fixed; /* Stay in place */
    z-index: 5; /* Stay on top */
    top: 0;
    width: 256px!important;
    
    left: -20em;
    right: unset;
    
    width: 20em;
    overflow-x: hidden; /* Disable horizontal scroll */
    overflow-y: hidden; /* Disable horizontal scroll */
    transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}

x-aside.left div.aside{
    left: -20em;
    right: unset;
}

x-aside.right div.aside{
    left: unset;
    right: -20em;

    /* transition: right ease-in-out 0.5s, padding ease-in-out 0.5s !important; */
}


x-aside div.aside-mask { 
    height: 100%; /* 100% Full-height */
    position: fixed; /* Stay in place */
    z-index: 1; /* Stay on top */
    top: 0;
    left: 0;
    background-color: none;
    transition: 0.5s;
    display: none;
    width: 100%; 
    
}

x-aside div.aside.open
{
    left:0;
}

x-aside.right div.aside.open
{
    right:0;
    left: auto;
}

x-aside div.aside-mask.open
{
    display: block;
    background-color: rgba(0,0,0,0.2);
    
}