#sidebar {
  background:#4c9ad0;
  width:260px;
  position:fixed;
  top:0;
  left:-260px;
  height:100vh;
  z-index:999;
  color:#fff;
  overflow-y:scroll;
}

#sidebar.active {
  left:0;
  box-shadow:3px 3px 3px rgba(0, 0, 0, 0.2);
}

#sidebar.sidebar-right {
  left:auto;
  right:-260px;
}

#sidebar.sidebar-right.active {
  right:0;
}

.open-sidebar {
  background:none;
  border:none !important;
  box-shadow:none;
  cursor:pointer;
  width:19px;
  height:25px;
  margin:0;
  line-height:0;
  vertical-align:middle;
  font-weight:100 !important;
  padding:0;
  text-shadow:none;
  padding-top: 10px;
}

.open-sidebar:hover {
  background:none !important;
  border:none !important;
  box-shadow:none;
  cursor:pointer;
  height:100%;
}

.open-sidebar:focus {
  background:none !important;
  border:none !important;
  box-shadow:none;
  cursor:pointer;
  height:100%;
}

#sidebar, #sidebar * {
  -webkit-transition:all 0.3s;
  transition:all 0.3s;
}

#sidebar #close-sidebar {
  width:20px;
  height:20px;
  text-align:center;
  float:right;
  font-size:medium;
  cursor:pointer;
  margin:0 0 0 7px;
}

#sidebar.sidebar-right #close-sidebar {
  -webkit-transform:rotate(180deg);
  transform:rotate(180deg);
}

#sidebar #close-sidebar:hover {
  background:rgba(255,255,255,.4);
}

.overlay {
  position:fixed;
  width:100vw;
  height:100vh;
  background:rgba(0, 0, 0, 0.7);
  z-index:998;
  display:none;
}

#sidebar .sidebar-header {
  padding:15px;
  min-height:55px;
  text-align:left;
}

.sidebar-header h1, .sidebar-header h2, .sidebar-header h3, .sidebar-header h4, .sidebar-header h5 {
  margin:0;
}

#sidebar > *:not(.sidebar-header):not(ul):not(.full-width) {
  max-width:230px;
  margin-left:15px;
}

#sidebar > ul {
  list-style:none;
  padding:0;
}

#sidebar ul li a {
  padding:10px 15px;
  color:#fff;
  display:block;
  text-decoration:none;
  background:none;
  margin-bottom:1px;
}

#sidebar ul li a:hover, #sidebar ul li.active > a, #sidebar a[aria-expanded="true"] {
  background:rgba(15,54,100,0.1);
}

#sidebar a[data-toggle="collapse"] {
  position:relative;
}

#sidebar a[aria-expanded="false"]::before, #sidebar a[aria-expanded="true"]::before {
  content:'\e259';
  display:block;
  position:absolute;
  right:20px;
  top:calc(50% - 6px);
  font-family:'Glyphicons Halflings';
  font-size:.6em;
}

#sidebar a[aria-expanded="true"]::before {
  content:'\e260';
}

#sidebar ul ul a {
  padding-left:30px;
  background:rgba(255,255,255,.1);
}

#sidebar ul ul a:hover {
  background:rgba(255,255,255,.2);
}

.title-side-bar {
  font-size:larger;
}