/*
Dashboard Widget CSS
*/
#dlm_popular_downloads.postbox {

  .dlm-reports-top-downloads {

    .dlm-reports-top-downloads__header {
      font-weight: bold;
      display: table;
      width: 100%;
      margin-bottom: 17px; // it's 17px because that's the margin bottom of the h3 heading used as the "box" header

      .dlm-reports-header-left,
      .dlm-reports-header-right {
        display: table-cell;
        margin-bottom: 15px;
        font-size: 12px;
        color: #6B7280;
      }

      .dlm-reports-header-left {
        padding-left: 36px;
      }

      // we use the same padding-left as the min-width of the numbers, so we can align the label with the download names
      .dlm-reports-header-right {
        text-align: right;
      }

    }

    .dlm-reports-top-downloads__line {
      display: flex;
      flex-wrap: wrap;
      flex-direction: row;
      margin: 6px 0;
      align-items: center;


      .dlm-reports-top-downloads__overflower {
        position: absolute;
        height: 100%;
        background: #f5f5fc;
        z-index: -1;

      }

      a {
        color: #4338ca;
        padding: 8px;
        display: block;
        font-weight: 500;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }


      & > div {
        text-align: left;
        overflow:hidden;

        &:not(:first-child) {
          flex-grow: 1;
          position: relative;
          z-index: 5;
        }

        &:first-child {
          width: 40px;
        }

        &:nth-child(2) {
          max-width:calc( 100% - 120px );
        }

        &:last-of-type {
          text-align: right;
          font-weight: 500;
          max-width: 75px;
          width: 75px;
        }
      }
    }
  }
}