.sidebar {

position: fixed;
top: 0;
bottom: 0;
left: -14rem;
width: 15rem;
visibility: hidden;
overflow-y: auto;
font-family: "PT Sans", Helvetica, Arial, sans-serif;
font-size: 0.875rem; /* 15px */
color: rgba(255, 255, 255, 0.6);
background: radial-gradient(circle, #242424 0%, #1d1f27 100%);
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
a {
  font-weight: normal;
  color: #fff;
}
.avatar {
  margin: 30px 0;
  text-align: center;
  a {
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid #96ff92;
    img {
      display: block;
      width: 100px;
      box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.2);
      margin: auto;
      transition: 0.5s;
      &:hover {
        transform: scale(1.2);
      }
    }
  }
}

}

@media (min-width: 30em) {

.sidebar {
  font-size: 0.75rem; /* 14px */
}

}

/* Sidebar nav */ .sidebar-nav {

border-bottom: 1px solid rgba(255, 255, 255, 0.1);
ul {
  list-style: none;
  padding: 0;
  margin: 0;
  .nav-item {
    height: 3rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    .nav-link {
      color: rgba(255, 255, 255, 0.9);
      padding: 0.4em 0.5em;
      display: flex;
      align-items: center;
      justify-content: center;
      text-decoration: none;
      font-size: 16px;
      letter-spacing: 1.2px;
      height: 100%;
      &:hover {
        background-color: rgba(0, 0, 0, 0.9);
        -webkit-transition: all 0s ease;
        -moz-transition: all 0s ease;
        transition: all 0s ease;
      }
    }
    &.active {
      background-color: rgba(255, 255, 255, 0.1);
      border-color: transparent;
      .nav-link {
        color: red;
      }
    }
    i {
      font-size: 1.8em;
      padding-right: 0.5em;
      width: 19em;
      display: inline;
      vertical-align: middle;
    }
  }
}

}

.sidebar-checkbox {

display: none;
position: absolute;
opacity: 0;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;

}

.sidebar-toggle {

position: absolute;
top: 0.8rem;
left: 1rem;
align-items: center;
padding: 0.25rem 0.75rem;
color: #999;
cursor: pointer;

}

.sidebar-toggle:active:before, sidebar-checkbox:focus ~ .sidebar-toggle::before, sidebar-checkbox:checked ~ .sidebar-toggle::before {

background: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M2.5 11.5A.5.5 0 013 11h10a.5.5 0 010 1H3a.5.5 0 01-.5-.5zm0-4A.5.5 0 013 7h10a.5.5 0 010 1H3a.5.5 0 01-.5-.5zm0-4A.5.5 0 013 3h10a.5.5 0 010 1H3a.5.5 0 01-.5-.5z' clip-rule='evenodd'/%3E%3C/svg%3E")
  no-repeat;

}

@media (min-width: 30.1em) {

.sidebar-toggle {
  position: fixed;
}

}

@media print {

.sidebar-toggle {
  display: none;
}

}