.side {
    position: fixed;
    left: 0;
    right: 0;
    width: 200px;
    z-index: 100;
    top: calc(50% - 100px);
    width: 200px;
    transition: all 0.5s linear;
}

.main-menu:hover,nav.main-menu.expanded {
    width:250px;
    overflow:visible;
}

.main-menu {
    top:0;
    bottom:0;
    height:100%;
    left:0;
    width:50px;
    overflow:hidden;
    -webkit-transition:width .05s linear;
    transition:width .05s linear;
    -webkit-transform:translateZ(0) scale(1,1);
    z-index:1000;
}

.main-menu li {
    position:relative;
    display:block;
    width:250px;
}

.main-menu li>a {
    position:relative;
    display:flex;
    align-items: center;
    line-height: 20px;
    padding: 10px 0 10px 50px;
}

.main-menu .nav-text {
    position:relative;
    display:table-cell;
    vertical-align:middle;
    width:190px;
}

a:hover,a:focus {
text-decoration:none;
}

nav {
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    -o-user-select:none;
    user-select:none;
}

nav ul,nav li {
    outline:0;
    margin:0;
    padding:0;
}

.main-menu li:hover>a,
nav.main-menu li.active>a,
.dropdown-menu>li>a:hover,
.dropdown-menu>li>a:focus,
.dropdown-menu>.active>a,
.dropdown-menu>.active>a:hover,
.dropdown-menu>.active>a:focus,
.no-touch .dashboard-page nav.dashboard-menu ul li:hover a,
.dashboard-page nav.dashboard-menu ul li.active a {
    color:#fff;
    border-left: 5px solid var(--primary-color);
    border-right: 5px solid var(--primary-color);
    opacity: 1;
    text-shadow: 1px 1px 2px #000000

}

.side-link {
    border-top: 1px solid rgba(255,255,255,0.1);
    border-bottom: 1px solid var(--primary-text-color-opacity-30);
    text-decoration: none;
    display:block;
    height:100%;
    width:100%;
    line-height:40px;
    color:#bbb;
    text-transform: uppercase;
    font-weight: bold;
    padding-left:14%;
    letter-spacing: 1px;
    transition:all 0.3s linear;
}

.icon-txt, .iconz{
    display: flex;
    height: 30px;
    width: 30px;
    align-items: center;
    justify-content: center;
}

.side:not(.side-padding) nav {
    background: var(--primary-color);
    box-shadow: 0px 3px 10px 2px rgba(0,0,0,0.75);
}

.side:not(.side-padding) nav:before, .side:not(.side-padding) nav:after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
}

.side:not(.side-padding) nav:before {
    background: var(--primary-text-color);
    opacity: .8;
}

.side:not(.side-padding) nav:after {
    background: var(--primary-color);
    opacity: .3;
    z-index: -1;
}

.side-padding{
    background: transparent;
    box-shadow: none;
}

.side-padding .main-menu{
    border-right: 2px solid var(--primary-text-color-opacity-30);
}

.icon-zmdi{
    position: absolute;
    left: 10px;
    font-size: 1.34em;
    transition: all 0.3s linear;
}

.icon-txt{
    position:absolute;
    left: 10px;
    font-size: 1.5em;
    transition: all 0.3s linear;
}

@media only screen and (max-width : 860px){
    .side{
        background: var(--primary-color);
        box-shadow: 0px 3px 8px 2px rgba(0,0,0,0.75);
    }

    .side, .side-link{
        width: 40px;
    }

    .side-link{
        color: #fff;
    }

    .main-menu{
        width: 40px;
    }

    .main-menu .nav-text{
        display: none;
    }

    .main-menu li{
        width: 0;
    }

    .main-menu li>a{
        line-height: 10px;
        padding: 14px 0 14px 0px
    }

    .icon-txt{
        font-size: 1em;
        left: 5px;
    }

    .icon-zmdi{
        left: 5px;
    }

}