:root {
  --color_1: #D8E1E8;
  --color_2: rgb(188, 203, 209);
  --color_3: #152D35;
  --color_4: #112031;
  --color_5: #315fad;
  --color_6: #19428a;
}

body {
  background-color: var(--color_1);
  color: var(--color_4);
  font-family: 'Roboto Medium', sans-serif;
}

.App {
  display: flex;
  flex-direction: column;
  margin: 0 15%;
}

.flex-wrap {
  flex-wrap: wrap;
}

h1 {
  color: var(--color_6);
}

h3 {
  color: var(--color_5);
}

.w100 {
  width: 100%;
}

.table {
  margin-right:auto;
	margin-left:auto;
	display:flex;
  flex-direction: column;
	justify-content: center;
	align-items:center;
  
	width:100%;
	border:1px solid #EEEEEE;
}

.table-header {
	display:flex;
	width:100%;
	background:#000;
	padding: 12px 0px;
}

.table-content {
	width:100%;
}

.table-row {
	display:flex;
	width:100%;
	padding: 12px 0px;
}

.table-content > div:nth-of-type(odd) { 
  background: var(--color_2);
}

.table-data, .header__item {
  display: flex;
	flex: 1 1 20%;
	text-align: center;
  margin: 0 1rem;
  flex-direction: row;
}

.center > .table-data {
  justify-content: space-around;
}

.left {
  justify-content: left !important;
}


.header__item {
	text-transform:uppercase;
  color:white;
  text-decoration: none;
  position:relative;
  display:inline-block;
  padding-left: 24px;
  padding-right: 24px;
}

/* END TABLE */