@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700');

$base-spacing-unit: 24px;
$half-spacing-unit: $base-spacing-unit / 2;

$color-alpha: #1772FF;
$color-form-highlight: #ffffff;

*, *:before, *:after {
	box-sizing:border-box;
}

body {
	padding:10;
	#font-family:'Source Sans Pro', sans-serif;
	font-family:'Open Sans', Arial, sans-serif;font-size:0.88rem;
	margin:5;
}

h1,h2,h3,h4,h5,h6 {
	font-family:'Open Sans', Arial, sans-serif;
}

table {
	#font-family:'Source Sans Pro', sans-serif;
	font-family:'Open Sans', Arial, sans-serif;font-size:0.88rem;
	width:100%;
	border:0px solid $color-form-highlight;
	border-collapse:collapse;
	padding:0px;
}
tr{
	padding:0px;
}
td{
font-family:'Open Sans', Arial, sans-serif;font-size:0.88rem;
	padding:7px;
}

table-header {
	display:flex;
	width:100%;
	background:#000;
	padding:($half-spacing-unit * 1.5) 0;
}


.table-data, .header__item {
	flex: 1 1 20%;
	text-align:left;
}


.header__item {
	text-transform:uppercase;
}

#myInput {
  background-image: url('filter.png'); /* Add a search icon to input */
  background-position:3px 3px; /* Position the search icon */
  background-repeat: no-repeat; /* Do not repeat the icon image */
  width:40%; /* Full-width */
  font-size: 16px; /* Increase font-size */
  padding: 12px 20px 12px 40px; /* Add some padding */
  border: 1px solid #ddd; /* Add a grey border */
  margin-bottom: 12px; /* Add some space below the input */
}

#myTable {
font-family:'Open Sans', Arial, sans-serif;font-size:0.8rem;
  border-collapse: collapse; /* Collapse borders */
  width: 100%; /* Full-width */
  border: 1px solid #ddd; /* Add a grey border */
  font-size: 18px; /* Increase font-size */
}

#myTable th, #myTable td {
font-family:'Open Sans', Arial, sans-serif;font-size:0.8rem;
  text-align: left; /* Left-align text */
  padding: 12px; /* Add padding */
}

#myTable tr {
font-family:'Open Sans', Arial, sans-serif;font-size:0.8rem;
  /* Add a bottom border to all table rows */
  border-bottom: 1px solid #ddd;
}

#myTable tr.header, #myTable tr:hover {
  /* Add a grey background color to the table header and on hover */
  background-color: #ffffff;
}