/* Hide element visually, keeping it focusable (with keyboard) and available for screen-readers */
.DataList {
  /* Set color on root of component. It can be overridden after the @include */
  color: var(--colorsTextDefault, #141414);
  /* Make sure font-family goes across entire component */
  font-family: "Nunito Sans", sans-serif;
  display: table;
  font-size: 16px;
  width: 100%;
}

.DataList__HeaderRow,
.DataList__Row {
  display: table-row;
}

.DataList__HeaderCell,
.DataList__Cell {
  display: table-cell;
  vertical-align: middle;
  box-sizing: border-box;
}

.DataList__Cell,
.DataList--spacing-2 .DataList__Cell {
  padding: 16px 8px;
}

.DataList--spacing-1 .DataList__Cell {
  padding: 8px;
}

.DataList__HeaderCell {
  background-color: var(--colorsSurfaceGreySubdued, #f7f7f7);
  color: var(--colorsTextDefault, #141414);
  font-size: 14px;
  font-weight: 400;
  padding: 4px 8px;
}

.DataList--Simple .DataList__HeaderCell {
  border-bottom: 1px solid var(--colorsBorderGrey, #dfe0e1);
  background: transparent;
  color: var(--colorsTextDefault, #141414);
  font-weight: normal;
}
.DataList--Simple .DataList__Cell:first-child {
  padding-left: 0;
}
.DataList--Simple .DataList__Cell:last-child {
  padding-right: 0;
}

/* Wrapping */
.DataList__Cell--wrapped {
  white-space: pre-wrap;
}

/*# sourceMappingURL=DataList.css.map */