body {
	font-family: 'Roboto', sans-serif;
	background-image: url("train-tile.jpg");
	background-size: 100px;
	margin: 0;
}

#container {
	display: grid;
	margin: 8px;
}

#alerts {
	display: grid;
	margin: 8px;
}

.incident {
	padding: 15px;
    margin: 5px;
	border-radius: 5px;
}

.alert {
    background-color: #ff9a9abf;
}

.warning {	
	background-color: #ffe49abf;
}

.incident-summary {
	padding: 5px;
}

.incident-operators {
    padding-left: 5px;
    padding-bottom: 4px;
}

.incident-description {
    padding-left: 5px;
    padding-bottom: 4px;
    border-top: solid 1px #b7b7b7;
    margin-top: 10px
}

table { 
	border-collapse: collapse;
	width: 100%;
}

.delay-time {
    vertical-align: text-top;
    color: #e30000;
}

/* Fold folded */
@media (max-width: 500px) {
	#container {
		grid-template-columns: auto;
	}

	#alerts {
		grid-template-columns: 1fr;
	}

	table {
		font-size: small;
	}

	.delay-time {
		font-size: x-small;
	}

	.incident {
		padding: 5px;
	}
	.incident-summary {
		font-size: small;
	}
	.incident-operators {
		font-size: x-small;
	}
	.incident-description {
		font-size: x-small;
	}
}

/* Fold unfolded */
@media (min-width: 500px) {
	#container {
		grid-template-columns: auto auto;
	}

	#alerts {
		grid-template-columns: 1fr 1fr;
	}

	table {
		font-size: small;
	}

	.delay-time {
		font-size: x-small;	
	}

	.incident {
		padding: 5px;
	}
	.incident-summary {
		font-size: small;
	}
	.incident-operators {
		font-size: x-small;
	}
	.incident-description {
		font-size: x-small;
	}
}

/* Desktop */
@media (min-width: 1000px) {
	#container {
		grid-template-columns: auto auto;
	}

	#alerts {
		grid-template-columns: 1fr 1fr;
	}

	table {
		font-size: large;
	}

	.delay-time {
		font-size: medium;
	}

	.incident {
		padding: 10px;
	}
	.incident-summary {
		font-size: large;
	}
	.incident-operators {
		font-size: medium;
	}
	.incident-description {
		font-size: medium;
	}
}

.board {
	padding: 10px;
	flex-basis: 20%;
}


tr {
	border-bottom: 1px solid #ddd;
}

.top-row {
	border-bottom: 1px solid #575757;
}

th {
	text-align: left;
}

td, th {
	padding: 5px;
}

#footer {
	margin-top: 30px;
	margin-left: 8px;
	font-size: x-small;
}

.on-time {
	background-color: #ecfff6;
}

.minor-delay {
	background-color: #fffde0;
}

.major-delay {
	background-color: #ffdbdb;
}

.delayed {
	background-color: #ffdbdb;
}

.cancelled {
	background-color: #ffdbdb;
}

.train-type {
	vertical-align: super;
}

.cancel-reason {
	display: none;
	text-align: center;
}