.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: 767.98px) {
        flex-grow: 1;
      }

      &.active {
        background: #86939e;
        color: white;
        cursor: default !important;
        &:hover {
          background: #86939e;
        }
      }
      &:hover {
        border: 1px solid #86939e;
        background: #f7f8f9;
        cursor: pointer;
      }
    }
    .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;
    }
  }
}