.early {
	color: green !important;
}

.late {
	color: red !important;
}

.rsk {
	cursor: pointer;
}

#-date {
	display: flex;
	justify-content: space-between;
}

#date {
	text-align: end;
}

#tabs-arr {
	border-bottom-color: #55ff55;
}

#tabs-dep {
	border-bottom-color: #5555ff;
}

#arrivals .train-item {
	background-color: #fafffa;
}

#arrivals .train-item:nth-of-type(even) {
	background-color: #eaffea;
}

#departures .train-item {
	background-color: #fafaff;
}

#departures .train-item:nth-of-type(even) {
	background-color: #eaeaff;
}

.train-item.cancelled {
	background-color: #ffeaea !important;
}

.train-item.cancelled + .train-item.cancelled {
	border-top: 1px solid black;
}

.train-item {
	display: grid;
	grid-template-columns: 30px 60px auto 1fr auto;
	grid-template-rows: auto;
	grid-template-areas: 
		"rank train time terminus platform"
		"rank train delay terminus platform"
		"status status status status status";
	align-items: center;
	padding: 4px 0;

	page-break-inside: avoid;
	break-inside: avoid;
}

.train-item > * {
	margin: 2px;
}

.train-item .time {
	grid-area: time;
	min-width: 60px;
	text-align: center;
}

.train-item .train {
	grid-area: train;
}

.train-item .rank {
	grid-area: rank;
	white-space: nowrap;
}

.train-item .delay {
	grid-area: delay;
	text-align: center;
}

.train-item .terminus {
	grid-area: terminus;
}

.train-item .status {
	grid-area: status;
	text-align: center;
	margin: 0;
}

.train-item .platform {
	grid-area: platform;
	border: 1px solid black;
	padding: 1px;
	margin: 1px;
	border-radius: 5px;
	aspect-ratio: 1 / 1;
	min-width: 22px;

	display: flex;
	justify-content: center;
	align-items: center;
}