text: // Datalists (used in the DETAIL page)
  // ----------------------------------------------------------------------------
  
  dl.datalist {
    border-radius: var(--border-radius);
    margin-bottom: 0;
    overflow: hidden; // this is needed for the border-radius field
  }
  dl.datalist .data-row {
    background: var(--white);
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    padding: 15px 20px;
  }
  @media(min-width: 1024px) {
    dl.datalist .data-row {
      flex-wrap: nowrap;
    }
  }
  
  dl.datalist .data-row.with-background {
    background: var(--form-bg);
  }
  
  dl.datalist dd {
    color: var(--gray-600);
    flex: 100% 0 0;
    font-size: var(--font-size-base);
    font-weight: 400;
    margin-bottom: 0;
    padding-right: 10px;
  }
  @media(min-width: 1024px) {
    dl.datalist dd {
      flex: 20% 0 0;
    }
  }
  
  dl.datalist dt {
    font-weight: normal;
  }
  
  dl.datalist .data-help {
    color: var(--gray-600);
    font-size: var(--font-size-sm);
    margin: 15px 0 0;
  }
  dl.datalist .data-help i {
    color: var(--gray-600);
  }
  