.tabs-component {
  .tabs-nav {
    margin-bottom: 18px;
    border: none;
    padding-left: 0px;
    .tab-pill {
      border: 1px solid #86939e;
      border-radius: 22px;
      padding: 8px 20px;
      display: inline-block;
      color: #5a646d;
      font-size: 14px;
      line-height: 18px;
      font-weight: 500;

      @media screen and (max-width: 767px) {
        flex-grow: 1;
      }

      &.active {
        background: #86939e;
        color: white;
        cursor: default;
        &:hover {
          background: #86939e;
        }
      }
      &:hover {
        background: lighten(#86939e, 40%);
      }
    }
    .tab-pill:first-child {
      margin-left: 0;
    }
    .tab-pill:last-child {
      margin-right: 0;
    }
    p {
      display: none; /* renderer can inject empty p tags, hide the,*/
    }
  }

  .tab-container {
    display: none;
    &.active {
      display: block;
    }
  }
}