/*
 * Define the widths: play around with these to get a best fit.
 */
/*
 * Basic styles, good for a large display. Everything fits in
 * one row, no wrapping. All text based cells grow equally.
 */
.table-row {
  display: flex;
  display: -webkit-flex;
  flex-direction: row;
  -webkit-flex-direction: row;
  flex-wrap: no-wrap;
  -webkit-flex-wrap: no-wrap;
  width: 100%;
  padding-left: 15px;
  padding-right: 15px;
}
.table-row .wrapper {
  display: flex;
  display: -webkit-flex;
  flex-direction: row;
  -webkit-flex-direction: row;
  flex-grow: 1;
  -webkit-flex-grow: 1;
  width: 100%;
}
.text-4,
.text-2,
.text-flex {
  flex-grow: 1;
  -webkit-flex-grow: 1;
}

.num-flex,
.text-flex {
  padding: 5px;
}

.table-row .col-unite {
    flex: 1 1 0;
    text-align: left;
    font-size: 19px;
    align-content: center;
    padding: 10px 0;
}



/*
 * Media queries: optimize for different screen widths.
 */
@media all and (max-width: 1100px) {
  .text-2,
  .num-2 {
    flex-direction: column;
    -webkit-flex-direction: column;
  }
  .text-2 div,
  .num-2 div {
    flex-grow: 0;
    -webkit-flex-grow: 0;
    width: 100%;
  }
  .text-2 {
    width: 180px;
  }
  .num-2 {
    width: 80px;
  }
}
@media all and (max-width: 580px) {
  .text-4,
  .num-4 {
    flex-direction: column;
    -webkit-flex-direction: column;
  }
  .text-4 div,
  .num-4 div {
    flex-grow: 0;
    -webkit-flex-grow: 0;
    width: 100%;
  }
  .text-4 {
    width: 180px;
  }
  .num-4 {
    width: 80px;
  }
}
@media all and (max-width: 320px) {
  .table-row {
    flex-direction: column;
    -webkit-flex-direction: column;
  }
  .table-row div {
    flex-grow: 0;
    -webkit-flex-grow: 0;
    width: 100%;
  }
  .num-flex {
    text-align: left;
  }
}
/*
 * General good-look styles, not mandatory.
 */
body {
  font-size: 20px;
}
.table-row:not(:last-child) {
  border-bottom: 2px solid #e0e0e0;
  border-collapse: collapse;
  padding-top: 5px;
}
.table-row.header {
background-color: #efefef;
    font-weight: bold;
    padding: 3px 10px;
}
/* Some borders to show the behaviour. Uncomment to see it in action */
/*
.text-2, .num-2 {
  border: 1px solid green;
  padding: 2px;
  margin: 2px;
}

.text-4, .num-4 {
  border: 1px solid red;
  margin: 2px;
}
*/