/*
 * Component: Main Header
 * ----------------------
 */

.main-header {
  position: relative;
  max-height: 100px;
  z-index: 1030;
  transition: all 0.5s ease-in;

  .header-navbar {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    margin-left: @sidebar-width - 4;
    max-height: @navbar-height;
    //overflow: hidden;
    .transition(margin-left @transition-speed @transition-fn);
  }

  .header-title {
    float: left;
    padding: 15px 170px 15px 15px;
    padding-right: 170px;
    // Header Text
    > h1 {
      margin: 0;
      padding: 0 0 5px;
      font-size: 25px;
      overflow: hidden; /* to hide anything that doesn't fit in the containing element. */
      white-space: nowrap; /* to make sure the line doesn't break when it is longer than the containing div. */
      text-overflow: ellipsis; /* to do what you want. */
      > small {
        font-size: 15px;
        display: inline-block;
        padding-left: 4px;
        font-weight: 300;
      }
    }

    > .breadcrumb {
      background: transparent;
      font-size: 13px;
      margin: 0;
      padding: 0 0 0 2px;
      position: relative;
      > li > a {
        color: #444;
        text-decoration: none;
        display: inline-block;
        > .fa, > .glyphicon, > .ion {
          margin-right: 5px;
        }
      }
      > li + li:before {
        content: '/\00a0';
      }
    }
  }

  //Sidebar toggle button
  .sidebar-toggle {
    position: absolute;
    left: 0;
    line-height: 1;
    display: none;
    background-color: transparent;
    background-image: none;
    padding: @navbar-padding-vertical @navbar-padding-horizontal;
    color: @sidebar-light-submenu-color;
    //Add the fontawesome bars icon
    font-family: fontAwesome;
    &:before {
      content: "\f0c9";
    }
    &:hover {
      color: @sidebar-light-submenu-hover-color;
    }
    &:focus,
    &:active {
      background: transparent;
    }
    .icon-bar {
      display: none;
    }
  }

  //Logo bar
  .logo {
    .transition(width @transition-speed @transition-fn);
    display: block;
    float: left;
    height: @navbar-height;
    font-size: 20px;
    line-height: @navbar-height;
    text-align: center;
    width: @sidebar-width;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 300;
    overflow: hidden;
    //Add support to sidebar mini by allowing the user to create
    //2 logo designs. small and large
    .logo-sm {
      display: none;
    }
    .logo-lg {
      //should be visibile when sidebar isn't collapsed
      display: block;
    }
    img {
      display: inline-block;
      vertical-align: middle;
      max-height: @navbar-height / 2;
    }
  }
  .company-logo {
    //box-shadow: @sidebar-boxshadow;
  }
  .product-logo {
    //float: right;
    position: fixed;
    right: 0;
    top: 0;
    text-align: right;
    width: 170px;
    padding: 0 20px 0 15px;
    img {
      max-height: @navbar-height / 2;
    }
  }

  &.scrolled {
    background-color: rgb(255, 255, 255);
    background-color: rgba(255, 255, 255, .90);
    box-shadow: 0 4px 2px -2px rgba(0, 0, 0, .1);
  }
}

// Content Header
.content-header {
  position: relative;
  padding: 0 15px 0;
  &:before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 2px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, .1), rgba(0, 0, 0, 0));
  }

  &:after {
    display: table;
    content: " ";
    clear: both;
  }

  .record-history {
    float: left;
    margin: 5px 0 0;
    overflow: hidden;
    padding-left: 0;
    padding-right: 228px;
    .rh-nav-pills {
      padding-left: 0;
      margin-bottom: 0;
      list-style: none;
      display: inline-block;
      height: 30px;
      overflow: hidden;
      li {
        position: relative;
        display: inline-block;
        &:first-child {
          padding: 2px 0;
        }
        a {
          display: inline-block;
          padding: 2px 5px 5px;
          color: #777;
          &:hover,
          &:active,
          &:focus {
            outline: none;
            text-decoration: none;
            color: @link-hover-color;
          }
        }
        & + li {
          &:before {
            padding: 0 5px;
            color: @gray;
            content: '|';
          }
        }
      }
    }
  }

  .header-actions {
    float: right;
    margin: 5px 0 0;
    position: absolute;
    right: 15px;
    z-index: 1030;
  }
  .search-box {
    > .input-group {
      width: 250px;
    }
  }
  .link-options {
    a.btn {
      margin: 0 0 5px 5px;
    }

    a.btn-more,
    a.btn-filter {
      color: #fff;
      background-color: @violet;
      border-color: darken(@violet, 5%);
      &:hover, &:active, &.hover {
        background-color: darken(@violet, 5%);
      }
    }

    a.btn-circle {
      width: 30px;
      height: 30px;
      line-height: 1.4;
    }

    .fa-option-default:before {
      content: "\f067";
    }
    .fa-option-info:before {
      content: "\f129";
    }
    .fa-option-active:before {
      content: "\f061";
    }
    .fa-option-cancel:before {
      content: "\f00d";
    }
    .fa-option-priorization-capture:before,
    .fa-option-capture:before {
      content: "\f030";
    }
    .fa-option-book:before,
    .fa-option-check:before {
      content: "\f022";
    }
    .fa-option-data-feed:before {
      content: "\f1b1";
    }
    .fa-option-delete:before {
      content: "\f014";
    }
    .fa-option-distribute:before {
      content: "\f1b2";
    }
    .fa-option-edit:before {
      content: "\f040";
    }
    .fa-option-event:before {
      content: "\f041";
    }
    .fa-option-note:before,
    .fa-option-new:before {
      content: "\f016";
    }
    .fa-option-disable:before {
      content: "\f05e";
    }
    .fa-option-off:before {
      content: "\f011";
    }
    .fa-option-opinion:before {
      content: "\f0e5";
    }
    .fa-option-plan:before {
      content: "\f073";
    }
    .fa-option-print:before {
      content: "\f02f";
    }
    .fa-option-publish:before {
      content: "\f0e6";
    }
    .fa-option-register:before {
      content: "\f15c";
    }
    .fa-option-remove:before {
      content: "\f068";
    }
    .fa-option-reset:before {
      content: "\f021";
    }
    .fa-option-show:before {
      content: "\f06e";
    }
    .fa-option-submit:before {
      content: "\f00c";
    }
    .fa-option-track:before {
      content: "\f08d";
    }
    .fa-option-view:before {
      content: "\f002";
    }
    .fa-option-assign:before {
      content: "\f007";
    }
    .fa-option-build:before,
    .fa-option-control:before,
    .fa-option-mark:before {
      content: "\f0c1";
    }
    .fa-option-relationships:before,
    .fa-option-responsible:before {
      content: "\f007";
    }
    .fa-option-document:before {
      content: "\f15c";
    }
    .fa-option-analysis:before {
      content: "\f080";
    }
    .fa-option-eval:before {
      content: "\f046";
    }
    .fa-option-prioritize-proposed-actions:before,
    .fa-option-order-asc:before {
      content: "\f161";
    }
    .fa-option-matrix-req:before {
      content: "\f0ce";
    }
    .fa-option-search:before {
      content: "\f002";
    }
    .fa-option-import:before {
      content: "\f093";
    }
    .fa-option-action:before {
      content: "\f0e7";
    }
    .fa-option-team:before {
      content: "\f0c0";
    }
    .fa-option-develop:before {
      content: "\f0eb";
    }
    .fa-option-unlocked:before {
      content: "\f13e";
    }
    .fa-option-locked:before {
      content: "\f023";
    }
    .fa-option-unsafe:before {
      content: "\f09c";
    }
    .fa-option-attend:before {
      content: "\f14a";
    }
    .fa-option-tasks:before,
    .fa-option-detail-form:before {
      content: "\f0ae";
    }
    .fa-option-chronology:before {
      content: "\f017";
    }
    .fa-option-back:before {
      content: "\f112";
    }
    .fa-option-opportunity:before {
      content: "\f0eb";
    }
    .fa-option-exchange:before {
      content: "\f0ec";
    }
    .fa-option-chevron-circle-right:before {
      content: "\f138";
    }
    .fa-option-arrow-circle-right:before {
      content: "\f0a9";
    }
    .fa-option-wrench:before {
      content: "\f0ad";
    }
    .fa-option-draw:before,
    .fa-option-pencil-square-o:before {
      content: "\f044";
    }
    .fa-option-info-circle:before,
    .fa-option-mark:before {
      content: "\f02e";
    }

    .fa-option-clone:before {
      content: "\f24d";
    }

    .fa-option-cycle:before {
      content: "\f1b8";
    }

    .fa-option-review:before {
      content: "\f046";
    }

    .fa-option-build:before {
      content: "\f0f6";
    }
  }

  @media (max-width: @screen-sm-max) {
    > .breadcrumb {
      //background: @light-gray;
      //padding-left: 10px;
      li:before {
        color: darken(@gray, 20%);
      }
    }

    .search-box {
      margin-bottom: 10px;
      > .input-group {
        width: 100%;
      }
    }
  }
}

.navbar-toggle {
  color: #fff;
  border: 0;
  margin: 0;
  padding: @navbar-padding-vertical @navbar-padding-horizontal;
}

.btn-modules-fixed,
.btn-filter-fixed {
  position: fixed;
  right: 0;
  top: 200px;
  display: block;
  width: 32px;
  z-index: 850;
}

.btn-modules-fixed {
  top: auto;
  bottom: 150px;
}

// Collapse header
@media (max-width: @screen-header-collapse) {
  .main-header {
    position: relative;
    .logo,
    .header-navbar {
      width: 100%;
      float: none;
    }
    .header-navbar {
      margin: 0;
      display: none;
    }
    .company-logo {
      .top-border {
        display: block;
      }
    }
    .sidebar-toggle {
      display: block;
    }
  }
}