#sidebar {
width:80%;
position: fixed;
top: 0;
right:-80%;
height: 100vh;
z-index: 999;
background:#222;
color: #fff;
transition: all 0.3s;
overflow-y: scroll;
}
#sidebar.active {
right: 0;
}
#dismiss {
width: 35px;
height: 35px;
line-height: 35px;
text-align: center;
background: #27a22d;
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
color:#fff
}
#dismiss:hover {
background: #fff;
color: #000;
}
.overlay {
display: none;
position: fixed;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.7);
z-index: 998;
opacity: 0;
transition: all 0.5s ease-in-out;
}
.overlay.active {
display: block;
opacity: 1;
}
#sidebar .sidebar-header {
padding: 20px;
background: #222;
font-size:18px
}
#sidebar ul.components {
padding: 20px 0;
border-bottom: 1px solid #47748b;
}
#sidebar ul p {
color: #fff;
padding: 10px;
}
#sidebar ul li a {
padding:10px 20px;
font-size: 1.1em;
display: block;
}
#sidebar ul li a:hover {
color: #fff;
background: #27a22d;
}
#sidebar ul li.active>a, #sidebar a[aria-expanded="true"] {
color:#fff;background:#27a22d;}


#sidebar .navbar-nav .nav-item {
border-bottom:solid 1px #3c3c3c
}
#sidebar .dropdown-menu {
position:relative!important;
transform: translate3d(0px, 0px, 0px)!important;
border-radius:0!important;
border:0!important
}
#sidebar .dropdown-menu {
padding:15px
}
#sidebar li a {
color:#fff
}
#sidebar .megamenu a img {
border:solid 2px #fff;
transition: 0.3s;
}
#sidebar .megamenu a:hover img {
border:solid 2px #f3d3ac;
transition: 0.3s;
}