@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap');

:root {
	--primary-color: #c61a27;
	--background-color: #ececec;
	--text-color: #333333;
	--text-color-light: #666666;
	--white: #ffffff;
}

body {
	font-family: 'Open Sans', sans-serif;
	background-color: var(--background-color);
	color: var(--text-color);
	margin: 0;
	height: 100vh;
	width: 100vw;
}

.container {
	padding: 15px 25px;
}

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

td, th {
	padding: 1.1rem 0.8rem;
	text-align: left;
	border: none;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	line-height: 1.5;
	border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

th {
	background-color: var(--primary-color);
	color: white;
	position: sticky;
	font-weight: 800;
	font-size: clamp(0.8rem, 1.8vw, 2.3rem);
	text-transform: uppercase;
}

td {
	font-size: clamp(0.7rem, 1.6vw, 2.3rem);
}

td img.arrow,
td img.stop-sign {
	height: clamp(0.9rem, 1.8vw, 2.5rem);
	margin-bottom: -.4rem;
}

td img.line-nr {
	height: clamp(1.4rem, 3.2vw, 4rem);
	margin-bottom: -.6rem;
}

td .delay {
	font-weight: 800;
}

td .delay.yellow {
	color: #f9a347;
}

td .delay.red {
	color: var(--primary-color);
}

tbody tr:nth-child(even) {
	background-color: rgba(0, 0, 0, 0.01);
}

th:nth-child(1), td:nth-child(1) { width: 10%; }
th:nth-child(2), td:nth-child(2) { width: 10%; }
th:nth-child(3), td:nth-child(3) { width: 30%; }
th:nth-child(4), td:nth-child(4) { width: 50%; }