ol.collection {
  margin: 0px;
  padding: 0px;
}

li {
  list-style: none;
}

* {
  box-sizing: border-box;
}

/* 2 Column Card Layout */
@media screen and (max-width: 736px) {
  .collection-container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-gap: 20px;
  }

  .item {
      border: 1px solid gray;
      padding: 10px;
  }

  /* Don't display the first item, since it is used to display the header for tabular layouts*/
  .collection-container>li:first-child {
      display: none;
  }

  .attribute::before {
      content: attr(data-name);
  }

  /* Attribute name for first column, and attribute value for second column. */
  .attribute {
      display: grid;
      grid-template-columns: minmax(9em, 30%) 1fr;
  }
}

/* 1 Column Card Layout */
@media screen and (max-width:580px) {
  .collection-container {
      display: grid;
      grid-template-columns: 1fr;
  }
}

/* Tabular Layout */
@media screen and (min-width: 737px) {
  /* The maximum column width, that can wrap */
  .item-container {
      display: grid;
      grid-template-columns: 5em 5em 10em repeat(6, 1fr);
  }

  .attribute-container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(var(--column-width-min), 1fr));
  }

  /* Definition of wrapping column width for attribute groups. */

  .wash-id {
    --column-width-min: 5em;
}

  .wash-side {
    --column-width-min: 5em;
}

  .wash-product {
    --column-width-min: 10em;
}

  .wash-times{
      --column-width-min: 10em;
  }

  .part-rate {
      --column-width-min: 10em;
  }

  .wash-mix {
      --column-width-min: 8em;
  }

  .wash-type {
      --column-width-min: 5em;
  }

  .wash-volume {
    --column-width-min: 5em;
}

  .wash-consumption {
      --column-width-min: 5em;
  }


  .collection {
      border-top: 1px solid rgb(200, 227, 252);
  }

  /* In order to maximize row lines, only display one line for a cell */
  .attribute {
      border-right: 1px solid rgb(200, 227, 252);
      border-bottom: 1px solid rgb(200, 227, 252);
      padding: 2px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
  }

  .collection-container>.item-container:first-child {
  }

  .item-container:hover {
      background-color: rgb(200, 227, 252);
  }

  /* Center header labels */
  .collection-container>.item-container:first-child .attribute {
      display: flex;
      align-items: center;
      justify-content: center;
      text-overflow: initial;
      overflow: auto;
      white-space: normal;
  }
}