.sidebarpanel
{
  width:240px;
  height:100%;
  box-shadow:1px 0px 6px 0px black;
  position:fixed;
  z-index:90000000050;
  user-select:none;
  scroll-behavior:smooth;
  overflow-y:auto;
  overflow-x:hidden;
  margin-left:-300px;
  transition:1s;
  top:0;
  bottom:0;
  opacity:94%;
}

/* width */
.sidebarpanel::-webkit-scrollbar {
  width:5px;
}

/* Track */
.sidebarpanel::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey;
  background: #f1f1f1;  
  border-radius:10px;
}
 
/* Handle */
.sidebarpanel::-webkit-scrollbar-thumb {
  background: #888;  
  border-radius:10px;	
}

/* Handle on hover */
.sidebarpanel::-webkit-scrollbar-thumb:hover {
  background: #555; 
  cursor: pointer;
}


.navSpanItem
{
	font-size:11px;
	padding-left:10px; 
	transition:1s;
	color:#6c757d;
	letter-spacing:1px;
	word-wrap:break-word;
	word-spacing:1px;
}

.navSpanItem:hover
{
	cursor:pointer;
	padding-left:30px; 
	transition:1s;
	color:orangered;
}





/* On screens that are 992px wide or less, go from four columns to two columns */
@media screen and (min-width: 992px) {
  #sidebarpanelside {
    display:none;
  }
}

/* On screens that are 992px wide or less, go from four columns to two columns */
@media screen and (min-width: 992px) {
  #sidebarbgblackdiv
  {
  	display:none;
  	width:0;
  	height:0;
  	top: 0;
   	left: 0;
   	right: 0;
   	bottom: 0;
  }
}





.sidebarSeeMoreClass
{
	position:absolute;
	/*z-index:120000099;*/
	bottom:0px;
	top: 0;
	width:240px;
	height:100%;	
	transition: .5s ease;
	background-color:#addee8;
	overflow-y:auto;
    overflow-x:hidden;
    margin-left:-300px;
    transition:1s ease;
}