#authors-performance {
  .wps-card__chart-matrix {
    border: 1px solid #DADCE0;
    padding: 10px;
    border-radius: 4px;
    overflow-x: auto;

    .chart-container {
      height: 145px;
      min-width: 869px;
    }
  }

  .wps-card__chart-guide {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;

    &--items {
      display: flex;
      gap: 4px;
      font-size: 12px;
      font-weight: 400;
      line-height: 14.52px;
      color: #000;
      align-items: center;

      ul {
        margin: 0;

        li {
          width: 15.59px;
          height: 16.1px;
          border-radius: 4px;
          display: inline-block;
          margin: 0;

          &:first-child {
            background: #E8EAEE;
          }

          &:nth-child(2) {
            background: #B28DFF;
          }

          &:nth-child(3) {
            background: #5100FD;
          }

          &:nth-child(4) {
            background: #4915B9;
          }

          &:nth-child(5) {
            background: #250766;
          }
        }
      }
    }
  }

  .wps-scatter-chart {
    margin-top: 20px;
    overflow-x: auto;

    .chart-container {
      @media(max-width: 700px) {
        min-width: 500px;
      }

      canvas {
        height: 500px;
      }
    }
  }
}

#authors-performance #wps-postbox-container-2 .o-table-wrapper {
  margin-right: -24px;
  margin-left: -24px;
}

.wps-author-analytics--header {
  display: flex;
  gap: 12px;
  margin-top: -10px;

  &__img {
    img, svg {
      width: 54px;
      height: 54px;
      box-sizing: border-box;
      border-radius: 250px;
    }

    img {
      border: 1px solid #D9DBFC;
    }
  }

  &__title {
    margin-bottom: 8px;
    display: flex;
    gap: 6px;
    align-items: center;

    h2 {
      color: #0C0C0D;
      font-size: 15px;
      font-weight: 500;
      line-height: 17.58px;
      padding: 0;
      margin: 0;
      word-break: break-word;
    }

    span {
      background: #EEEFF1;
      padding: 2px 4px;
      border-radius: 4px;
      color: #56585A;
      font-size: 13px;
      font-weight: 400;
      line-height: 15.23px;
    }
  }

  &__info {
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;

    .wps-author-analytics--header__joined {
      color: #56585A;
      font-size: 13px;
      font-weight: 400;
      line-height: 15.23px;
    }

    a {
      color: #7981F6;
      font-size: 13px;
      font-weight: 400;
      line-height: 15.23px;
      text-decoration: underline;

      &:hover {
        color: #0C0C0D;
      }

    }
  }
}

.wps-top-categories__content, .wps-author-chart {
  margin-top: 20px;
}


.wps-top-categories__content label {
  &:first-of-type {
    margin-left: 24px;

    .rtl & {
      margin-right: 24px;
      margin-left: 0;
    }
  }

  &:last-of-type {
    margin-right: 24px;
  }
}

.rtl .wps-top-categories__content label {
  &:first-of-type {
    margin-left: unset;
    margin-right: 24px;
  }

  &:last-of-type {
    margin-right: unset;
    margin-left: 24px;
  }
}

.wps-author-chart {
  .o-wrap--no-data {
    padding-top: 0 !important;
  }

  canvas {
    margin: 0 auto;
    max-width: 100%;
    height: 0 !important;
  }
}


.wps-author-premium {

  &-feature {
    display: flex;
    margin-bottom: 12px;
    margin-top: 12px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 32px;
    border-radius: 8px;
    border-width: 1px;
    border-style: solid;
    border-color: rgb(64, 75, 242);
    border-image: initial;
    background: rgb(255, 255, 255);

    &__head {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      margin-bottom: 32px;
      gap: 16px;

      h1 {
        font-size: 20px;
        font-weight: 700;
        line-height: 24px;
        color: rgb(12, 12, 13);
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex-wrap: wrap;
        padding: 0px;
        margin: 0px;
        gap: 4px;
        white-space: nowrap;

        span {
          color: rgb(64, 75, 242);
        }
      }

      p {
        font-size: 16px;
        font-weight: 400;
        line-height: 24px;
        color: rgb(86, 88, 90);
        margin: 0px;
      }
    }

    a.button-primary {
      margin: 0 auto;
      padding: 8px 16px 8px 41px;
      border-radius: 4px !important;
      font-size: 14px;
      font-weight: 700 !important;
      line-height: 22px !important;
      background-size: 15px;
      background-repeat: no-repeat;
      background-color: #404bf2;
      background-position: center left 16px;
      background-image: url(data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjE1IiBoZWlnaHQ9IjE2IiB2aWV3Qm94PSIwIDAgMTUgMTYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik04Ljc1IDMuMjczNDRDOS41OTEzOCAzLjI3MzQ0IDEwLjI3MzQgMi41OTEzNyAxMC4yNzM0IDEuNzVIMTAuOTc2NkMxMC45NzY2IDIuNTkxMzcgMTEuNjU4NiAzLjI3MzQ0IDEyLjUgMy4yNzM0NFYzLjk3NjU2QzExLjY1ODYgMy45NzY1NiAxMC45NzY2IDQuNjU4NjMgMTAuOTc2NiA1LjVIMTAuMjczNEMxMC4yNzM0IDQuNjU4NjMgOS41OTEzOCAzLjk3NjU2IDguNzUgMy45NzY1NlYzLjI3MzQ0Wk0wLjYyNSA3LjM3NUMyLjY5NjA3IDcuMzc1IDQuMzc1IDUuNjk2MDcgNC4zNzUgMy42MjVINS42MjVDNS42MjUgNS42OTYwNyA3LjMwMzk0IDcuMzc1IDkuMzc1IDcuMzc1VjguNjI1QzcuMzAzOTQgOC42MjUgNS42MjUgMTAuMzAzOSA1LjYyNSAxMi4zNzVINC4zNzVDNC4zNzUgMTAuMzAzOSAyLjY5NjA3IDguNjI1IDAuNjI1IDguNjI1VjcuMzc1Wk0xMC43ODEyIDkuMjVDMTAuNzgxMiAxMC4zNzE4IDkuODcxODEgMTEuMjgxMiA4Ljc1IDExLjI4MTJWMTIuMjE4N0M5Ljg3MTgxIDEyLjIxODcgMTAuNzgxMiAxMy4xMjgyIDEwLjc4MTIgMTQuMjVIMTEuNzE4OEMxMS43MTg4IDEzLjEyODIgMTIuNjI4MiAxMi4yMTg3IDEzLjc1IDEyLjIxODdWMTEuMjgxMkMxMi42MjgyIDExLjI4MTIgMTEuNzE4OCAxMC4zNzE4IDExLjcxODggOS4yNUgxMC43ODEyWiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==);

      &:hover, &:focus, &:active {
        background-size: 15px;
        background-repeat: no-repeat;
        background-position: center left 16px;
        background-color: #1e27bf;
        background-image: url(data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjE1IiBoZWlnaHQ9IjE2IiB2aWV3Qm94PSIwIDAgMTUgMTYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik04Ljc1IDMuMjczNDRDOS41OTEzOCAzLjI3MzQ0IDEwLjI3MzQgMi41OTEzNyAxMC4yNzM0IDEuNzVIMTAuOTc2NkMxMC45NzY2IDIuNTkxMzcgMTEuNjU4NiAzLjI3MzQ0IDEyLjUgMy4yNzM0NFYzLjk3NjU2QzExLjY1ODYgMy45NzY1NiAxMC45NzY2IDQuNjU4NjMgMTAuOTc2NiA1LjVIMTAuMjczNEMxMC4yNzM0IDQuNjU4NjMgOS41OTEzOCAzLjk3NjU2IDguNzUgMy45NzY1NlYzLjI3MzQ0Wk0wLjYyNSA3LjM3NUMyLjY5NjA3IDcuMzc1IDQuMzc1IDUuNjk2MDcgNC4zNzUgMy42MjVINS42MjVDNS42MjUgNS42OTYwNyA3LjMwMzk0IDcuMzc1IDkuMzc1IDcuMzc1VjguNjI1QzcuMzAzOTQgOC42MjUgNS42MjUgMTAuMzAzOSA1LjYyNSAxMi4zNzVINC4zNzVDNC4zNzUgMTAuMzAzOSAyLjY5NjA3IDguNjI1IDAuNjI1IDguNjI1VjcuMzc1Wk0xMC43ODEyIDkuMjVDMTAuNzgxMiAxMC4zNzE4IDkuODcxODEgMTEuMjgxMiA4Ljc1IDExLjI4MTJWMTIuMjE4N0M5Ljg3MTgxIDEyLjIxODcgMTAuNzgxMiAxMy4xMjgyIDEwLjc4MTIgMTQuMjVIMTEuNzE4OEMxMS43MTg4IDEzLjEyODIgMTIuNjI4MiAxMi4yMTg3IDEzLjc1IDEyLjIxODdWMTEuMjgxMkMxMi42MjgyIDExLjI4MTIgMTEuNzE4OCAxMC4zNzE4IDExLjcxODggOS4yNUgxMC43ODEyWiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==);
      }
    }
  }

  &__items {
    margin-bottom: 24px;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    width: 100%;
    gap: 8px 128px;
  }

  &__item {
    font-size: 15px;
    font-weight: 400;
    line-height: 24px;
    color: rgb(12, 12, 13);
    min-width: 150px;
    box-sizing: border-box;
    padding-left: 28px;
    position: relative;

    @media(min-width: 1270px) {
      min-width: 398px;
    }

    &::before {
      content: "";
      width: 24px;
      height: 24px;
      display: inline-flex;
      position: absolute;
      left: 0px;
      top: 0px;
      background: url(data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjE4IiBoZWlnaHQ9IjEzIiB2aWV3Qm94PSIwIDAgMTggMTMiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik02Ljk5OTcgMTAuMTcyOEwxNi4xOTIxIDAuOTgwNDY5TDE3LjYwNjMgMi4zOTQ2OEw2Ljk5OTcgMTMuMDAxMkwwLjYzNTc0MiA2LjYzNzM1TDIuMDQ5OTYgNS4yMjMxNUw2Ljk5OTcgMTAuMTcyOFoiIGZpbGw9IiMxOTYxNDAiLz4KPC9zdmc+Cg==) center center / 16.97px 12.02px no-repeat;
    }
  }

  &-image {
    text-align: center;

    img {
      width: 100%;
      margin: 0 auto;
    }
  }

  &__info {
    border-top: 1px solid #dadce0;
    margin-bottom: 16px;
    padding-top: 24px;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: #0c0c0d;
    text-align: center;
    width: 100%;
  }


}