html {
	height: 100%;
}

body {
	height: 100%;
	font-family: "Roboto", sans-serif;
	color: #ccc;
	font-size: 1.2em;
	background-color: #171717;
}

#container {
	height: 100%;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
}

main {
	flex: 1;
	display: flex;
	flex-direction: row;
}

#bar-chart {
	flex: 3;
	height: 100%;
}

#persons-ranking {
	flex: 1;
}

#controls {
	display: flex;
	flex-direction: row;
	justify-content: center;
	background-color: #222;
	padding: 1em;
	margin: 0;
}

#controls > li {
	margin: 1em;
}

#time-slider-container {
	flex: 1;
	display: block;
}

#time-slider {
	width: 100%;
	margin: 0;
}

.ticks {
	width: 100%;
	display: flex;
	text-align: center;
}

/*********************************/
/* Materialize CSS customization */
/*********************************/

.select-wrapper input.select-dropdown {
	color: inherit;
}

.select-wrapper input.select-dropdown:focus {
	border-color: #fff;
}

.caret path:first-child {
	fill: #ccc;
}

a,
.dropdown-content li > span {
	color: #333;
}
/* Duplication needed here because of browser-specific pseud-elements */
input[type="range"]::-moz-range-thumb {
	background-color: #ccc;
}

input[type="range"]::-webkit-slider-thumb {
	background-color: #ccc;
	margin: -6px 0 0 0;
}

input[type="range"]::-ms-thumb {
	background-color: #ccc;
}

input[type="range"]::-moz-range-track {
	height: 1px;
	width: 100%;
}

input[type="range"]::-webkit-slider-runnable-track {
	height: 1px;
	width: 100%;
}

input[type="range"]::-ms-track {
	height: 1px;
	color: transparent;
	width: 100%;
}

input[type="range"] {
	border: none;
}

input[type="range"]:focus {
	outline: none;
}

input[type="range"]:-moz-focusring {
	outline: none;
}

.thumb {
	display: none;
}