.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;
}
	  #sidebar3 {
	width: 280px;
	position: fixed;
	/* top: 0; */
	right: -280px;
	height:42vh;
	z-index: 999;
	color: #fff;
	transition: all 0.3s;
	overflow-y: scroll;
	box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
	top: 30%;
}
#sidebarCollapses {
	position: fixed;
	right: 0 !important;
	top: 30%;
	cursor: pointer;
}
#sidebar3.active {
    right: 0;
}
#sidebar3 #header{height: auto;}
#dismisss {
	width: 35px;
	height: 35px;
	line-height: 35px;
	text-align: left;
	position: absolute;
	top: 0px;
	left: 10px;
	cursor: pointer;
	-webkit-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}
#sidebar3 .sidebar-header {
    padding: 20px;
}

#sidebar3 ul.components {
    padding: 20px 0;
    border-bottom: 1px solid #47748b;
}

#sidebar3 ul p {
    color: #fff;
    padding: 10px;
}

#sidebar3 ul li a {
    padding: 10px;
    font-size: 1.1em;
    display: block;
}

#sidebar3 ul li.active>a,
a[aria-expanded="true"] {
    color: #fff;
    background: #6d7fcc;
}
#content {
    width: 100%;
    padding: 20px;
    min-height: 100vh;
    transition: all 0.3s;
    position: absolute;
    top: 0;
    right: 0;
}

@media (max-width: 767px){
    #sidebar3 #header {
	height: auto !important;
}
}