.tabs-wrapper {
  border: 1px solid @border-color;
  border-radius: 4px;
  margin-bottom: 30px;
  background-color: #ffffff;
  @media (max-width: @screen-xs-max) {
    display: none;
  }
  .tabs-mark-group {
    border-bottom: 1px dashed  @border-color;
    .title {
      width: 90px;
      margin-top: 3px;
      float: left;
    }
    
    .classify {
      margin-top: 3px; 
      i {
        color: @gray;
      }
      a {
        color: @gray;
        &:hover,&:focus {
          color: @brand-primary;
        }
      }
    }

    .content {
      margin-left: 100px;
    }
  } 
  .tabs-mark {
    a {
      border: 1px solid @border-color;
      padding: 2px 5px;     
      color: @gray;
    }
    margin: 0 4px;
    &:hover,
    &:focus,
    &.active {
      a {
        color: @brand-primary;
        border: 1px solid @brand-primary;        
      }
    }

    i {
      font-size: 10px;
      margin-left: 5px;
    }
  }
  .tabs-group {
    padding: 0 60px 0 15px;
    position: relative;
    overflow-y: hidden;
    .title {
      float: left;
      padding: 15px 0;
      width: 100px;
      .text-overflow;
    }
    .content {
      list-style: none;
      padding: 0;
      margin: 0 0 0 100px;
      > li {
        float: left;
        padding: 10px 12px;
        > a {
          display: block;
          padding: 5px 10px;
          border: none;
          border-radius: 4px;
          color: @gray;
          .es-transition;
        }
        &:hover, &:focus, &.active {
          > a {
            color: @brand-primary;
          }
        }
      }
    }
    .tabs-toggle {
      position: absolute;
      right: 20px;
      top: 18px;
      font-size: 12px;
      line-height: 1;
      cursor: pointer;
    }
    + .tabs-group {
      border-top: 1px dashed  @border-color;
    }
  }
}