beyond-page-header, *[beyond-page-header] {
  display: block;
  min-height: 80px;
  background-color: $body-background;
  margin-bottom: -30px;

  & + form {
    margin-top: 30px;
  }

  md-toolbar:not(.md-menu-toolbar) .md-button:not(.md-raised) {
    color: $font-link-color;
  }

  .line {
    border-left: $page-header-border;

    &:last-child, &.last {
      border-right: $page-header-border;
    }
  }

  .beyond-page-header {
    padding: 0 30px;
    background-color: $body-background;
    color: $font-color;
    min-height: 80px;

    h1 {
      font-size: 26px;
      font-size: 2.6rem;
      font-weight: 100;
      margin: 0;
      padding: 0;
      padding-right: 20px;
    }

    h1 + a, h1 + button  {

      &:before {
        border-left: $page-header-border;
        display: block;
        height: 50px;
        content: '';
        position: absolute;
        margin-left: -20px;
        top: -6px;
      }

    }

    a {
      color: $font-link-color;
      transition: $font-color-hover-animation;
      font-weight: 600;
      font-size: 16px;
      font-size: 1.6rem;

      &:hover,
      &:active,
      &:focus {
        color: $nav-link-color-hover;
        cursor: pointer;
      }

      &.md-button {
        padding-left: 20px;
        padding-right: 20px;
        margin: 0;
        margin-top: 10px;
      }
    }

    button {
      font-weight: 600;
      font-size: 16px;
      font-size: 1.6rem;

      padding-left: 20px;
      padding-right: 20px;
      margin: 0;
      margin-top: 2px;

      &.active {

        md-icon[class^='icon'] {
          color: $font-link-color;
        }
      }
    }

    md-icon[class^='icon'] {
      color: $font-color-disabled;
      height: auto;
    }

    .icon-x {
      font-size: 16px;
      font-size: 1.6rem;

      &:before {
        font-weight: 600 !important;
      }
    }
  }
}
