.action-checkin,
.action-checkout,
.action-undo,
.action-cancelled-from,
.action-cancelled-to,
.action-share {
	cursor: pointer;
}

.brand-logo span {
	transition: color 1s;
}

.brand-logo:hover .ca,
.brand-logo:hover .ce {
	color: #a8e3fa !important;
}

.brand-logo:hover .cb,
.brand-logo:hover .cd {
	color: #f5c4ce !important;
}

.wagons span {
	margin-right: 0.5ex;
	color: #808080;
}

.wagons .wagonclass {
	font-weight: bold;
	color: inherit;
}

.wagons .wagonnum {
	margin-right: 0;
	color: inherit;
}

.wagons .checksum:before {
	content: "-";
}

h1 {
	font-size: 2.92rem;
	margin: 1.9466666667rem 0 1.168rem 0;
}

h2 {
	font-size: 2.28rem;
	margin: 1.52rem 0 .912rem 0;
}

h3 {
	font-size: 1.64rem;
	margin: 1.0933333333rem 0 .656rem 0;
}

.geolocation {
	i.material-icons {
		font-size: 16px;
	}
}

ul.suggestions {
	li {
		padding-top: 0.5rem;
		padding-bottom: 0.5rem;
	}
}


.departures li {
	transition: background .3s;
	display: grid;
	grid-template-columns: 10ch 10ch 1fr;
	align-items: center;
	&:not(#now):hover, &:focus-within {
		background-color: $departures-highlight-color;
		outline: 2px solid $link-color;
	}
 	&.cancelled {
		background-color: $departures-cancelled-color;
		font-style: italic;
		.dep-line {
			background-color: transparent;
			border: 1px solid;
			color: $off-black;
		}
		.dep-time::after {
		  content: " ⊖";
		  font-style: normal;
		}
	}
	&#now {
		background-color: $departures-highlight-color;
		padding: 2rem 20px;
		grid-template-columns: 10ch 1fr;
		strong {
			font-weight: bold;
		}
	}
}


.departures .dep-time {
	color: $off-black;
	&:focus {
		outline: none;
	}
}
.departures .dep-dest {
	margin-left: 0.8rem;
	.followee-checkin {
		font-size: 0.9rem;
		display: block;
		i.material-icons {
			vertical-align: middle;
		}
	}
}
.dep-line {
	text-align: center;
	padding: .2rem;
	color: white;
	background: color('grey', 'darken-3');
	border-radius: .2rem;
	display: inline-block;
	font-weight: 600;
	line-height: 1;
	height: fit-content;
	width: fit-content;
	min-width: 6ch;
	margin: 0 auto;

	&.Bus, &.RUF, &.AST {
		background-color: #a3167e;
		border-radius: 5rem;
		padding: .2rem .5rem;
	}
	&.STR {
		background-color: #c5161c;
		border-radius: 5rem;
		padding: .2rem .5rem;
	}
	&.S, &.RS, &.RER, &.SKW {
		background-color: #008d4f;
		border-radius: 5rem;
		padding: .2rem .5rem;
	}
	&.U, &.STB, &.M  {
		background-color: #014e8d;
		border-radius: 5rem;
		padding: .2rem .5rem;
	}
	&.RE, &.IRE, &.REX {
		background-color: #ff4f00;
	}
	&.RB, &.MEX, &.TER, &.R {
		background-color: #1f4a87;
	}
	// DE
	&.IC, &.ICE, &.EC, &.ECE, &.D,
	// CH
	&.IR,
	// FR
	&.TGV, &.OGV, &.EST,
	// PL
	&.TLK, &.EIC {
		background-color: #ff0404;
		font-weight: 900;
		font-style: italic;
		padding: .2rem;
	}
	&.RJ, &.RJX {
		background-color: #c63131;
	}
	&.NJ, &.EN {
		background-color: #29255b;
	}
	&.WB {
		background-color: #2e85ce;
	}
	&.FLX {
		background-color: #71d800;
		color: black;
	}
}

.departures.connections {
	li {
		grid-template-columns: 15ch 10ch 1fr;
	}
	.connect-platform-wrapper {
		text-align: center;
		span {
			display: block;
		}
	}
}


@media screen and (max-width: 600px) {
	.departures li {
		grid-template-columns: 10ch 1fr;
		.dep-line, .dep-time, .connect-platform-wrapper {
			grid-column: 1;
			text-align: center;
		} 
		.dep-dest {
			grid-column: 2;
			grid-row: 1 / span 2;
		}
	}
	.departures.connections li {
		grid-template-columns: 15ch 1fr;
		.connect-platform-wrapper span {
			display: inline;
		}
	}
}