.title {
	padding-top: 3em;

	h1 {
		color: white;
		font-weight: normal;
		margin: .7em .3em .5em .3em;
	}

	h1:hover {
		-webkit-text-fill-color: transparent;
		-webkit-background-clip: text !important;
		background: linear-gradient(90deg, #b4dcff 20%, pink 20%, pink 40%, white 40%, white 60%, pink 60%, pink 80%, #b4dcff 80%, #b4dcff 100%);
	}
}

.title:before {
	content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28"><rect rx="4" height="28" width="28" fill="green"/><path d="M14 5.5c-4 0-8 .5-8 4V19c0 1.93 1.57 3.5 3.5 3.5L8 24v.5h2.23l2-2H16l2 2h2V24l-1.5-1.5c1.93 0 3.5-1.57 3.5-3.5V9.5c0-3.5-3.58-4-8-4m-4.5 15c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5m3.5-7H8v-4h5zm2 0v-4h5v4zm3.5 7c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5" fill="white"/></svg>');
	width: 50px;
	height: 50px;
	margin: -0.7em .3em -0.5em -0.3em;
}

form {
	button,
	.button,
	.selector,
	input {
		margin: 4px;
	}

	.button.icon-arrow,
	.button.icon-plus,
	.button.icon-minus,
	.button.icon-swap {
		padding: .3em .5em;
	}

	.button.now {
		padding: 0 10px;
	}

	button[type="submit"],
	.button.icon-settings {
		height: 32px;
	}

	.button.icon-settings {
		width: 32px;
		padding: 3px;
	}

	button[type="submit"]{
		font-size: 20px;
		padding: 8px;
	}

	button[type="submit"]:after {
		width: 24px;
		height: 24px;
		margin-left: 5px;
		content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2 4.5 20.29l.71.71L12 18l6.79 3 .71-.71z" fill="green"/></svg>');
	}

	.selector {
		.icon-ice,
		.icon-ic,
		.icon-icice,
		.icon-dzug,
		.icon-regional {
			font-style: italic;
		}

		.icon-tram:after,
		.con-bus:after,
		.icon-ferry:after,
		.icon-taxi:after {
			font-size: 0.6rem;
		}

		.icon-ice:after      { content: 'ICE'; }
		.icon-ic:after       { content: 'IC'; }
		.icon-icl:after      { content: 'ICL'; }
		.icon-icice:after    { content: 'IC ICE'; }
		.icon-dzug:after     { content: 'D'; }
		.icon-regional:after { content: 'NV'; }
		.icon-re:after       { content: 'RE'; }
		.icon-o:after        { content: 'Ø'; }
		.icon-suburban:after { content: 'S'; }
		.icon-subway:after   { content: 'U'; }
		.icon-tram:after     { content: 'Tram'; }
		.icon-bus:after      { content: 'Bus'; }
		.icon-ferry:after    { content: 'Ferry'; }
		.icon-taxi:after     { content: 'Taxi'; }
	}
}

.filler {
	flex: auto;
}

.suggestions {
	position: relative;
	overflow: visible;
	z-index: 100;
	height: 0;
	margin-left: 4px;
	margin-right: 3.23rem;

	p {
		font-size: 1.2em;
		background-color: white;
		color: black;
		margin: 0;
		border-top: 1px solid rgba(0, 0, 0, .2);
		padding: .3em .6em;
		cursor: pointer;
	}

	p:first-child {
		margin-top: -4px;
	}

	p:hover {
		background-color: #d3d3d3;
	}

	p.selected {
		background-color: #bfbfbf !important;
	}
}

.history {
	padding: 0 4px;
	overflow: hidden;
	user-select: none;

	.flex-row {
		justify-content: space-between;
		cursor: pointer;
		padding: .3em .6em .3em .3em;
		margin: 0;
		background-color: white;
		color: black;
		font-size: 1.2em;
		border-bottom: 1px solid rgba(0, 0, 0, .2);
	}

	.flex-row:last-child {
		border-bottom: unset;
	}

	.via {
		font-size: smaller;
		font-weight: 200;
	}

	.from,
	.to {
		width: 40%;
	}

	.to {
		text-align: right;
	}

	small {
		display: block;
	}

	.icon-arrow {
		width: 25px;
	}
}

.icon-plus {
	content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="24" width="24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6z"/></svg>');
}

.icon-minus {
	content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="24" width="24"><path d="M19 13H5v-2h14z"/></svg>');
}

.icon-swap {
	content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="24" width="24"><path d="M16 17.01V10h-2v7.01h-3L15 21l4-3.99zM9 3 5 6.99h3V14h2V6.99h3z"/></svg>');
}

.icon-clock {
	content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="24" width="24"><path d="M12 20a8 8 0 0 0 8-8 8 8 0 0 0-8-8 8 8 0 0 0-8 8 8 8 0 0 0 8 8m0-18a10 10 0 0 1 10 10 10 10 0 0 1-10 10C6.47 22 2 17.5 2 12A10 10 0 0 1 12 2m.5 5v5.25l4.5 2.67-.75 1.23L11 13V7z"/></svg>');
}

.icon-bike {
	content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="24" width="24"><path d="M5 20.5A3.5 3.5 0 0 1 1.5 17 3.5 3.5 0 0 1 5 13.5 3.5 3.5 0 0 1 8.5 17 3.5 3.5 0 0 1 5 20.5M5 12a5 5 0 0 0-5 5 5 5 0 0 0 5 5 5 5 0 0 0 5-5 5 5 0 0 0-5-5m9.8-2H19V8.2h-3.2l-1.94-3.27c-.29-.5-.86-.83-1.46-.83-.47 0-.9.19-1.2.5L7.5 8.29C7.19 8.6 7 9 7 9.5c0 .63.33 1.16.85 1.47L11.2 13v5H13v-6.5l-2.25-1.65 2.32-2.35m5.93 13a3.5 3.5 0 0 1-3.5-3.5 3.5 3.5 0 0 1 3.5-3.5 3.5 3.5 0 0 1 3.5 3.5 3.5 3.5 0 0 1-3.5 3.5m0-8.5a5 5 0 0 0-5 5 5 5 0 0 0 5 5 5 5 0 0 0 5-5 5 5 0 0 0-5-5m-3-7.2c1 0 1.8-.8 1.8-1.8S17 1.2 16 1.2 14.2 2 14.2 3 15 4.8 16 4.8"/></svg>');
}

.icon-seat {
	content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="24" width="24"><path d="M9 19h6v2H9c-2.76 0-5-2.24-5-5V7h2v9c0 1.66 1.34 3 3 3m1.42-13.59c.78-.78.78-2.05 0-2.83s-2.05-.78-2.83 0-.78 2.05 0 2.83c.78.79 2.04.79 2.83 0M11.5 9c0-1.1-.9-2-2-2H9c-1.1 0-2 .9-2 2v6c0 1.66 1.34 3 3 3h5.07l3.5 3.5L20 20.07 14.93 15H11.5z"/></svg>');
}

.icon-settings {
	content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="24" width="24"><path d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58a.49.49 0 0 0 .12-.61l-1.92-3.32a.49.49 0 0 0-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54a.484.484 0 0 0-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58a.49.49 0 0 0-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6"/></svg>');
}

@media (max-width: 650px) {
	.filler {
		flex: unset !important;
	}

	button[type="submit"]{
		flex-basis: 100%;
		justify-content: center;
	}
}

@media (max-width: 799px) {
	.container {
		padding: 10px;
	}
}

@media (min-width: 800px) {
	form, .history {
		width: 80vw;
		max-width: 700px;
		color: white;
	}
}