
.dzsap-charts {



  .number-col {
    width: 20px;
    text-align: left;
  }

  .track-col {
    width: 70px;
    text-align: left;
  }

  .title-col {

    flex-grow: 4;
    -webkit-flex-grow: 4;

    .the-track {
      font-size: 15px;
      font-weight: bold;

      margin-bottom: 1px;
    }

    .the-artist {
      font-size: 13px;
      opacity: 0.7;
      font-style: italic;
    }
  }

  .stats-col {
    margin-left: auto;
  }

  .table-row {
    display: flex;
    display: -webkit-flex;
    flex-direction: row;
    -webkit-flex-direction: row;
    flex-wrap: nowrap;
    -webkit-flex-wrap: nowrap;
    width: 100%;
    font-size: 15px;
  }

  .wrapper {
    display: flex;
    display: -webkit-flex;
    flex-direction: row;
    -webkit-flex-direction: row;
    flex-grow: 0;
    -webkit-flex-grow: 0;
  }

  .text-4,
  .text-2,
  .text {
    flex-grow: 1;
    -webkit-flex-grow: 1;
  }

  .text-4 {

    display: flex;
    align-items: center;
    justify-content: center;
  }

  .text {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding-right: 20px;
  }

  .text {
    width: 180px;
  }

  .num {
    width: 80px;
    text-align: right;
  }

  .body-row {
    border-bottom: 1px solid rgba(0, 0, 0, .1);
    border-collapse: collapse;
    padding-top: 8px;
    padding-bottom: 8px;

    .number-col {
      font-weight: bold;
    }

    .stats-col {
      i {
        font-size: 12px;
        display: inline-block;
        margin-right: 3px;
        vertical-align: middle;
        opacity: 0.7;
      }
    }

  }

  .table-row.header {
    border-bottom: 2px solid rgba(0, 0, 0, .1);
    font-weight: bold;
    padding-top: 8px;
    padding-bottom: 8px;
    opacity: 0.7;

    font-size: 11px;
  }




}