/*
    Skin Black
    --------
*/

/* skin-black navbar */
.skin-black .navbar {
  .navbar-variant(#fff; #333; #999; #fff);
  border-bottom: 1px solid #eee;
}
/* skin-black logo */
.skin-black .logo {
  .logo-variant(#333);
}
/* skin-black content header */
.skin-black .right-side > .content-header {
  background: transparent;
  box-shadow: none;
}
/* Skin-red user panel */
.skin-black .user-panel {

  > .image > img {
    border: 1px solid #444;
  }

  > .info, > .info > a {
    color: #eee;
  }
}

/* skin-black sidebar */
.skin-black {
  .sidebar {
    border-bottom: 1px solid #333;
  }
  // the menu
  .sidebar > .sidebar-menu > li {
    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;
    }
    //Hover and active states
    > a:hover, &.active > a {
      color: #f6f6f6;
      background: #444;
    }

    > .treeview-menu {
      margin: 0 1px;
      background: #444;
    }
  }

  // Sidebar color
  .left-side {
    background: #333;
  }

  .sidebar a {
    color: #eee;
    &:hover {
      text-decoration: none;
    }
  }
  // skin blue treeview-menu
  .treeview-menu {
    > li {
      > a {color: #ccc;}
      &.active > a, > a:hover {
        color: #fff;
      }
    }
  }

  .sidebar-form {
    .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;
    }
  }
}