/*
 * CSS for a key-value table.
 *
 * Note:
 * Unfortunately, there are already existing styles for <table> in EUROFOUND,
 * and a lot of them are marked with "!important". The only way to beat that is
 * to do the same here.
 *
 * An alternative would have been to use html elements other than <table>, e.g.
 * a definition list with <dl>, <dt>, <dd>.
 * The current spec would allow to wrap groups of <dt> and <dd> into <div>, see
 * https://html.spec.whatwg.org/multipage/grouping-content.html#the-dl-element
 * However we are not sure how this works in IE11.
 * Thus, back to tables.
 */

.ef_components-dl_div_table {
  display: table;
  width: 100%;
}

.ef_components-dl_div_table > div {
  display: table-row;
}

.ef_components-dl_div_table > div > dt,
.ef_components-dl_div_table > div > dd {
  display: table-cell;
  border-bottom: 1px solid #ddd;
  padding: 1em 2em 1em 0;
}

.ef_components-dl_div_table > div:last-child > dt,
.ef_components-dl_div_table > div:last-child > dd {
  border-bottom: none;
}

.ef_components-dl_div_table {
  font-family: 'Source Sans Pro', sans-serif;
  line-height: 1.4;
  font-weight: 300;
  color: #000000;
  font-weight: 300;
}

.ef_components-dl_div_table > div > dt {
  color: #4c4c4c;
  font-weight: 700 !important;
  font-family: 'Source Sans Pro', sans-serif;
}

.ef_components-dl_div_table > div > dd a {
  font-weight: 400;
  font-family: 'Source Sans Pro', sans-serif;
}