.btn-docs {
  margin-bottom: .5rem;
}

.side-nav {
  padding: 0;
}

.side-nav li {
    display: block;
    
    a {
      width: 100%;
      color: @base-color-aaa;
      font-weight: @weight-400;
      padding: .25rem .5rem;
      display: block;
      text-decoration: none;
      .rem(font-size, 14);
      
      &:hover {
        background-color: @accent-white;
      }
      
      &.active {
        background-color: @info-color;
        color: @base-white;
      }
    }
  }

.nav-header {
  padding: .25rem .5rem;
  color: @base-color;
  margin-top: 1rem;
  text-transform: uppercase;
  .rem(font-size, 14);
}

.doc-list i:before {
  background-color: @info-color;
  color: @base-white;
  .rem(padding, 10);
  .border-radius(50%);
  .left-float;
  .rem(width, 37);
  .rem(height, 37);
  .text-center;
}

.doc-list .col4 {
  .rem(margin-bottom, 21);
}

.right-content {
  border-left: 1px solid @base-color-eee;
  .rem(padding-left, 32);
  
  @media @bp-mobile {
    border-left: 0;
    padding-left: 0;
  }
}

.btn-group {
  margin-right: 8px;
  margin-bottom: 8px;
}

.alert {
  margin-bottom: 8px;
}

.mobile-nav {
  position: fixed;
  left: 0;
  top: 0;
  background-color: @base-color-333;
  height: 100%;
  z-index: 1100;
  overflow-y: scroll;
  .box-shadow(3px 0 5px rgba(0,0,0,.4));
  .rem(width, 240);
  .translateX(-245px);
  .transition(-webkit-transform .60s 
    cubic-bezier(.58,-0.65,0,1.67));
}

.is-open {
  .translateX(0);
  animation-direction: normal;
  -webkit-animation-direction: reverse;
	animation-direction: reverse;
}

.mobile-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mobile-nav li {
  display: block;
}

li.title {
  padding: 1rem 1.5rem;
  background-color: @base-color-222;
  color: rgba(255,255,255,.3);
}

.mobile-nav a {
  padding: 1rem 1.5rem;
  display: block;
  text-decoration: none;
  border-bottom: 1px solid rgba(0,0,0,.3);
  color: rgba(255,255,255,.5);
  &:hover {
    text-decoration: none;
    background-color: rgba(0,0,0,.95);
    color: @base-white;
  }
}

.mobile-nav .active {
  background-color: @info-color;
  color: @base-white;
}

.mobile-nav .icons {
  .text-center;
}

.mobile-nav .icons > a {
  float: left;
  display: inline-block;
}

.mobile-nav .icons a:last-child {
  border-left: 1px solid rgba(0,0,0,.3);
}