.xsidebar{
  position: fixed;
  width: 250px;
  min-width: 200px;
  height: calc(100% - 40px);
  box-shadow: 0 3px 6px rgba(248, 106, 106, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  top:0;
  left:0;
  z-index: 1030;
  -webkit-transition: margin-left 0.5s; /* For Safari 3.1 to 6.0 */
  transition: margin-left 0.5s;
  color: white;
  overflow-y: auto;
}
.xsidebar.light-theme{
  background-color: white;
}
.xsidebar.dark-theme{
  background-color: #232323;
}

.xsidebar-content::-webkit-scrollbar-track
{
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  box-shadow:  inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
}

.xsidebar-content::-webkit-scrollbar
{
	width: 6px;
	background-color: #F5F5F5;
}

.xsidebar-content::-webkit-scrollbar-thumb
{
	background-color: #000000;
}


.xsidebar.is-closed{
 margin-left: -250px;
}

.xsidebar-header{
  font-size: 22px;
  font-family: open sans semibold;
  font-weight: bold;
  padding: 1em;
  border-bottom: 1px groove #ffffff;
  color: #424242;
}
.xsidebar-content{
  overflow: auto;
}

.toggle{
  padding:0.25em;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  border-radius: 2px;
  background-color: white;
  color: #424242;
  position: absolute;
  float: right;
  right:-20px;
  cursor: pointer;
}