.diagonalTabs {
  width: 100%; }
  .diagonalTabs .diagonalTabs-header {
    display: flex;
    border-left: 2px solid #afafaf;
    border-top-left-radius: 5px;
    overflow: hidden; }
    .diagonalTabs .diagonalTabs-header.leftOfActive {
      border-color: #874f96; }
    .diagonalTabs .diagonalTabs-header .diagonalTabs-link {
      border: 2px solid #afafaf;
      border-left: 0px;
      border-bottom-color: #874f96;
      display: grid;
      flex: 0 0 auto;
      transform: skew(35deg);
      transform-origin: bottom left;
      cursor: pointer;
      transition-duration: 500ms;
      transition-timing-function: ease-in-out;
      transition-property: border-top-color, border-right-color, border-left-color; }
      .diagonalTabs .diagonalTabs-header .diagonalTabs-link:after {
        display: block;
        top: 2px;
        position: relative;
        content: '';
        border-bottom: solid 2px #fafafa;
        width: 0px;
        transition: transform 75ms ease-in-out;
        transition-property: width; }
      .diagonalTabs .diagonalTabs-header .diagonalTabs-link:after {
        transform-origin: 100% 50%; }
      .diagonalTabs .diagonalTabs-header .diagonalTabs-link:hover:after {
        transition: transform 150ms ease-in-out;
        transition-property: width;
        width: 100%;
        transform-origin: 0% 50%; }
      .diagonalTabs .diagonalTabs-header .diagonalTabs-link .diagonalTabs-link-content {
        transform: skew(-35deg);
        padding: 5px 15px;
        color: #858688;
        transition-duration: 100ms;
        transition-timing-function: ease-in-out;
        transition-property: color; }
      .diagonalTabs .diagonalTabs-header .diagonalTabs-link.active {
        border: 2px solid #874f96;
        border-left: 0px;
        border-bottom: 0px;
        cursor: default; }
        .diagonalTabs .diagonalTabs-header .diagonalTabs-link.active .diagonalTabs-link-content {
          color: #874f96; }
      .diagonalTabs .diagonalTabs-header .diagonalTabs-link.leftOfActive {
        border-right-color: #874f96; }
    .diagonalTabs .diagonalTabs-header .diagonalTabs-link:nth-child(1) .diagonalTabs-link-content {
      padding-left: 25px;
      border-top-left-radius: 5px; }
    .diagonalTabs .diagonalTabs-header .diagonalTabs-spacing {
      -ms-flex-preferred-size: 0;
      flex-basis: 0;
      -ms-flex-positive: 1;
      flex-grow: 1;
      max-width: 100%;
      margin-left: -3px;
      border-bottom: 2px solid;
      border-image: linear-gradient(to right, #874f96 0%, #fafafa 100%);
      border-image-slice: 1; }
  .diagonalTabs .diagonalTabs-body .diagonalTabs-content {
    display: none; }
    .diagonalTabs .diagonalTabs-body .diagonalTabs-content.active {
      display: flex; }