@import 'https://fonts.googleapis.com/css?family=Open+Sans';

body {
	padding: 0;
	margin: 0;
	position: relative;

	font-family: 'Open Sans', sans-serif;
	font-size: 16px;
	font-weight: 400;
	color: #777;

	background-color: #FFF;
}

input {
	font-family: 'Open Sans', sans-serif;
	font-size: 16px;
	font-weight: 400;
	color: #777;
}

.topbar {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	z-index: 10;

	background-color: #F8F8F8;
	border-bottom: 2px solid #EEE;
}

.inputbar {
	position: relative;
	width: 960px;
	padding: 20px;
	margin: 0 auto;
}

.inputbar-title {
	margin-bottom: 10px;
}

.inputbar-inputs {
	position: relative;
	width: 960px;
	padding: 0;

	table-layout: fixed;
	border-spacing: 0;
	border-collapse: collapse;
}

.inputbar-inputs td {
	padding: 0;
	margin: 0;
}

.inputbar-input {
	display: inline-block;
	width: 36px;
	height: 28px;
	margin: 0;
	padding: 1px;

	text-align: center;
	font-size: 14px;
	font-weight: 600;
	color: #777;

	background-color: #FFF;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border: none;
	border-top: 2px solid #F8F8F8;
	border-left: 2px solid #F8F8F8;
	border-bottom: 2px solid #EEE;
	outline: none;
	transition: all .4s;
}

.inputbar-input:focus {
	border-bottom: 2px solid #93C2F8;
}

.filter-button {
	position: absolute;
	width: 160px;
	height: 32px;
	bottom: -32px;
	right: 16px;

	line-height: 32px;
	text-align: center;

	background-color: #EEE;
	border-radius: 16px;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	cursor: pointer;
	transition: all .4s;
}

.filter-button:hover {
	bottom: -40px;
	height: 40px;

	line-height: 40px;

	background-color: #DDD;
	background-color: #A6CBF6;
}

.content {
	position: relative;
	display: block;
	margin: 0 auto;
	padding-top: 40px;
	padding-bottom: 40px;
	width: 960px;
}

.filters-table {
	width: 100%;
	border-spacing: 0;
}

.filter-tr td {
	margin: 0;

	border-bottom: 1px solid #EEE;
}

.filter-tr {
	cursor: pointer;
	transition: all .4s;
}

.filter-tr:hover, .filter-tr.open {
	background-color: #F8F8F8;
}

.filter-name {
	padding: 20px 10px;
}

.filter-proba {
	width: 94px;
	padding: 20px;

	font-weight: 100;
	font-size: 36px;
	color: #DDD;
}

.filter-out {
	text-align: center;
}

.filter-out-name {
	font-weight: 100;
	color: #DDD;
	text-transform: capitalize;
}

.filter-out-value {
	font-size: 14px;
	font-weight: 600;
}

.filter-info-tr {

}

.filter-info-td {
	padding: 0;
	margin: 0;

	background-color: #FCFCFC;
}

.filter-info-div {
	display: none;
	padding: 20px;
}

.filter-canvas {
	display: block;
	margin: 0;
	margin-left: auto;

	border: 1px solid #EEE;
}

.filter-info-table {
	width: 100%;
	padding: 0;
	margin: 0;

	border-spacing: 0;
}

.filter-info-table td {
	vertical-align: top;
}

.filter-canvas-td {
}

.sequence-table {
	margin: 0;
	margin-right: 5px;
	padding: 0;
	display: inline-block;

	border-spacing: 0;
	border-collapse: collapse;
	table-layout: fixed;
	background-color: #FFF;
	vertical-align: top;
}

.sequence-table-legend {
	color: #D0D0D0;
}

.sequence-table td {
	margin: 0;
	padding: 5px;

	text-align: center;

	border: 1px solid #EEE;
}

.sequence-table-header td {
	font-weight: bold;
	color: #DDD;

	background-color: #F8F8F8;
}

.grey-text {
	color: #DDD;
}