/*
 *    Component: Sidebar
 *--------------------------

.right-side > .content-header
  background: transparent
  box-shadow: none

.left-side
  background: #333
.sidebar a
  color: #eee
  &:hover
    text-decoration: none

.sidebar
  border-bottom: 1px solid #333
  margin-bottom: 5px
  // remove shadow from form
  .sidebar-form
    input:focus
      -webkit-box-shadow: none
      -moz-box-shadow: none
      box-shadow: none
      border-color: transparent !important
    +border-radius(2px)
    border: 0px solid #555
    margin: 10px 10px
    input[type="text"], .btn
      box-shadow: none
      background-color: rgba(255, 255, 255, 0.1)
      border: 0 solid rgba(255, 255, 255, 0.1)
      height: 35px
      outline: none
    input[type="text"]
      color: #666
      border-radius: 2px 0 2px 0 !important
      &:focus, &:focus + .input-group-btn .btn
        background-color: #444
        border: 0
      &:focus + .input-group-btn .btn
        border-left: 0
    .btn
      color: #999
      border-radius: 0 2px 0 2px !important
      border-left: 0
  // Sidebar menu
  .sidebar-menu
    list-style: none
    margin: 0
    padding: 0
    > li
      margin: 0
      padding: 0
      border-top: 1px solid #333
      border-bottom: 0px solid #444
      &:first-of-type
        border-top: 1px solid #444
        > a
          border-top: 0px solid #333
      > a
        margin-right: 1px
        padding: 12px 5px 12px 15px
        display: block
        > .fa, > .glyphicon, > .ion
          width: 20px
      > a:hover, a.active
        color: #f6f6f6
        background: #444
      > .treeview-menu
        margin: 0 1px
        background: #444

    // Tree view menu
    .treeview-menu
      display: none
      list-style: none
      padding: 0
      margin: 0 1px
      background: #444

      > li
        margin: 0
        > a
          color: #ccc
          padding: 5px 5px 5px 15px
          display: block
          font-size: 14px
          margin: 0px 0px
          > .fa, > .glyphicon, > .ion
            width: 20px
        a.active, > a:hover
          color: #fff


//Sidebar user panel
.user-panel
  padding: 10px
  +clearfix
  > .image > img
    width: 45px
    height: 45px
    border: 1px solid #444
  > .info
    font-weight: 600
    padding: 5px 5px 5px 15px
    font-size: 14px
    line-height: 1
  > .info > p
    margin-bottom: 9px
  > .info > a
    text-decoration: none
    padding-right: 5px
    margin-top: 3px
    font-size: 11px
    font-weight: normal
    color: #eee
    > .fa, > .ion, > .glyphicon
      margin-right: 3px

/*
 * Off Canvas
 * --------------------------------------------------
 *  Gives us the push menu effect
@media screen and (max-width: $screen-md)
  .relative
    position: relative
  .row-offcanvas-right .sidebar-offcanvas
    right: -$left-side-width
  .row-offcanvas-left .sidebar-offcanvas
    left: -$left-side-width
  .row-offcanvas-right.active
    right: $left-side-width
  .row-offcanvas-left.active
    left: $left-side-width
  .sidebar-offcanvas
    left: 0
  body.fixed
    .sidebar-offcanvas
      margin-top: 50px
      left: -$left-side-width
    .row-offcanvas-left.active
      .navbar
        left: $left-side-width !important
        right: 0
      .sidebar-offcanvas
        left: 0px