ctucx.git: oeffisearch

[nimlang] fast and simple tripplanner

1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12 
13 
14 
15 
16 
17 
18 
19 
20 
21 
22 
23 
24 
25 
26 
27 
28 
29 
30 
31 
32 
33 
34 
35 
36 
37 
38 
39 
40 
41 
42 
43 
44 
45 
46 
47 
48 
49 
50 
51 
52 
53 
54 
55 
56 
57 
58 
59 
60 
61 
62 
63 
64 
65 
66 
67 
68 
69 
70 
71 
72 
73 
74 
75 
76 
77 
78 
79 
80 
81 
82 
83 
84 
85 
86 
87 
88 
89 
90 
91 
92 
93 
94 
95 
96 
97 
98 
99 
100 
101 
102 
103 
104 
105 
106 
107 
108 
109 
110 
111 
112 
113 
114 
115 
116 
117 
118 
119 
120 
121 
122 
123 
124 
125 
126 
127 
128 
129 
130 
131 
132 
133 
134 
135 
136 
137 
138 
139 
140 
141 
142 
143 
144 
145 
146 
147 
148 
149 
150 
151 
152 
153 
154 
155 
156 
157 
158 
159 
160 
161 
162 
163 
164 
165 
166 
167 
168 
169 
170 
171 
172 
173 
174 
175 
176 
177 
178 
179 
180 
181 
182 
183 
184 
185 
186 
187 
188 
189 
190 
191 
192 
193 
194 
195 
196 
197 
198 
199 
200 
201 
202 
203 
204 
205 
206 
207 
208 
209 
210 
211 
212 
213 
214 
215 
216 
217 
218 
219 
220 
221 
222 
223 
224 
225 
226 
227 
228 
229 
230 
231 
232 
233 
234 
235 
236 
237 
238 
239 
240 
241 
242 
243 
244 
245 
246 
247 
248 
249 
250 
251 
252 
253 
254 
255 
256 
257 
258 
259 
260 
261 
262 
263 
264 
265 
266 
267 
268 
269 
270 
271 
272 
273 
274 
275 
276 
277 
278 
279 
280 
281 
282 
283 
284 
285 
286 
287 
288 
289 
290 
291 
292 
293 
294 
295 
296 
297 
298 
299 
300 
301 
302 
303 
304 
305 
306 
307 
308 
309 
310 
311 
312 
313 
314 
315 
316 
317 
318 
319 
320 
321 
322 
323 
324 
325 
326 
327 
328 
329 
330 
331 
332 
333 
334 
335 
336 
337 
338 
339 
340 
341 
342 
343 
344 
345 
346 
347 
348 
349 
350 
351 
352 
353 
354 
355 
356 
357 
358 
359 
360 
361 
362 
363 
364 
365 
366 
367 
368 
369 
370 
371 
372 
373 
374 
375 
376 
377 
378 
379 
380 
381 
382 
383 
384 
385 
386 
387 
388 
389 
390 
391 
392 
393 
394 
395 
396 
397 
398 
399 
400 
401 
402 
403 
404 
405 
406 
407 
408 
409 
410 
411 
412 
413 
414 
415 
416 
417 
418 
419 
420 
421 
422 
423 
424 
425 
426 
427 
428 
429 
430 
431 
432 
433 
434 
435 
436 
437 
438 
439 
440 
441 
442 
443 
444 
445 
446 
447 
448 
449 
450 
451 
452 
453 
454 
455 
456 
457 
458 
459 
460 
461 
462 
463 
464 
465 
466 
467 
468 
469 
470 
471 
472 
473 
474 
475 
476 
477 
478 
479 
480 
481 
482 
483 
484 
485 
486 
487 
488 
489 
490 
491 
492 
493 
494 
495 
496 
497 
498 
499 
500 
501 
502 
503 
504 
505 
506 
507 
508 
509 
510 
511 
512 
513 
514 
515 
516 
517 
518 
519 
520 
521 
522 
523 
524 
525 
526 
527 
528 
529 
530 
531 
532 
533 
534 
535 
536 
537 
538 
539 
540 
541 
542 
543 
544 
545 
546 
547 
548 
549 
550 
551 
552 
553 
554 
555 
556 
557 
558 
559 
560 
561 
562 
563 
564 
565 
566 
567 
568 
569 
570 
571 
572 
573 
574 
575 
576 
577 
578 
579 
580 
581 
582 
583 
584 
585 
586 
587 
588 
589 
590 
591 
592 
593 
594 
595 
596 
597 
598 
599 
600 
601 
602 
603 
604 
605 
606 
607 
608 
609 
610 
611 
612 
613 
614 
615 
616 
617 
618 
619 
620 
621 
622 
623 
624 
625 
626 
627 
628 
629 
630 
631 
632 
633 
634 
635 
636 
637 
638 
639 
640 
641 
642 
643 
644 
645 
646 
647 
648 
649 
650 
651 
652 
653 
654 
655 
656 
657 
658 
659 
660 
661 
662 
663 
664 
665 
666 
667 
668 
669 
670 
671 
672 
673 
674 
675 
676 
677 
678 
679 
680 
681 
682 
683 
684 
685 
686 
687 
688 
689 
690 
691 
692 
693 
694 
695 
696 
697 
698 
699 
700 
701 
702 
703 
704 
705 
706 
707 
708 
709 
710 
711 
712 
713 
714 
715 
716 
717 
718 
719 
720 
721 
722 
723 
724 
725 
726 
727 
728 
729 
730 
731 
732 
733 
734 
735 
736 
737 
738 
739 
740 
741 
742 
743 
744 
745 
746 
747 
748 
749 
750 
751 
752 
753 
754 
755 
756 
757 
758 
759 
760 
761 
762 
763 
764 
765 
766 
767 
768 
769 
770 
771 
772 
773 
774 
775 
776 
777 
778 
779 
780 
781 
782 
783 
784 
785 
786 
787 
788 
789 
790 
791 
792 
793 
794 
795 
796 
797 
798 
799 
800 
801 
802 
803 
804 
805 
806 
807 
808 
809 
810 
811 
812 
813 
814 
815 
816 
817 
818 
819 
820 
821 
822 
823 
824 
825 
826 
827 
828 
829 
830 
831 
832 
833 
834 
835 
836 
837 
838 
839 
840 
841 
842 
843 
844 
845 
846 
847 
848 
849 
850 
851 
852 
853 
854 
855 
856 
857 
858 
859 
860 
861 
862 
863 
864 
865 
866 
867 
868 
869 
870 
871 
872 
873 
874 
875 
876 
877 
878 
879 
880 
881 
882 
883 
884 
885 
886 
887 
888 
889 
890 
891 
892 
893 
894 
895 
896 
897 
898 
899 
900 
901 
902 
903 
904 
905 
906 
907 
908 
909 
910 
911 
912 
913 
914 
915 
916 
917 
918 
919 
920 
921 
922 
923 
924 
925 
926 
927 
928 
929 
930 
931 
932 
933 
934 
935 
936 
937 
938 
939 
940 
941 
942 
943 
944 
945 
946 
947 
948 
949 
950 
951 
952 
953 
954 
955 
956 
957 
958 
959 
960 
961 
962 
963 
964 
965 
966 
967 
968 
969 
970 
971 
972 
973 
974 
975 
976 
977 
978 
979 
980 
981 
982 
983 
984 
985 
986 
987 
font-face {
	font-family: 'varelaregular';
	src: url('./varela-regular-webfont.woff2') format('woff2'),
	     url('./varela-regular-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

* {
	box-sizing: border-box;
	border-collapse: collapse;
}

html, body {
	margin: 0;
	font-family: Varela, sans-serif;
	background-color: #2a2a2a;
	min-height: 100vh;
	overflow-x: hidden;
	overflow-y: visible;
}
 
a {
	color: inherit;
}

header {
	position: relative;
	color: white;
	background-color: #555;
	bottom-border: 1px solid rgba(255, 255, 255, .3);
	display: flex;
	flex-direction: row;
	justify-content: center;
}

.header-content {
	max-width: 1000px;
	width: 80vw;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
.header-content>div {
	display: flex;
	flex-direction: row;
	flex-grow: 1;
	flex-wrap: wrap;
}

.row {
	display: flex;
	flex-direction: row;
}

.cancelled {
	text-decoration-line: line-through;
}
.cancelled-text {
	font-weight: bold;
	color: red;
}

.pointer {
	cursor: pointer;
}

.back.invisible {
	visibility: hidden;
}
.back,
.reload {
	cursor: pointer;
	width: 32px;
	height: 32px;
	margin: 12px;
	user-select: none;
}

.spinner {
	margin: calc(50vh - 60px) auto;
	border: 5px solid rgba(255, 255, 255, .4);
	border-top: 5px solid #fff;
	border-radius: 50%;
	width: 120px;
	height: 120px;
	animation: spin 2s linear infinite;
}
.spinning {
	animation: spin 2s linear infinite;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

.loadMore {
	cursor: pointer;
	height: 72px;
	width: 72px;
	margin: 0 auto;
	transition: transform 150ms;
	user-select: none;
	filter: invert();
}

.loadMore.flipped {
	transform: rotate(180deg);
	margin-top: 45px;
}

:checked ~ label[for=btn-history] {
	transform: rotateX(180deg);
}

table {
	border-bottom: 1px solid rgba(0, 0, 0, 0.3);
	width: 100%;
	background-color: #fff;
	min-width: 390px;
	max-width: 1000px;
}
div.card {
	overflow-x: auto;
}
tbody tr {
	border-top: 1px solid #ccc;
}
tr {
	background-color: #fff;
	margin: 0 0 15px 0;
}

td, th {
	text-align: center;
	overflow: hidden;
}

th {
	padding: 5px 3px;
}


thead tr:not(:last-child) {
	background-color: #eee;
}


tbody tr:hover {
	background-color: #ddd;
}

tbody tr:hover td {
	background-color: transparent;
}

@supports (display: flex) {
	.button,
	input[type="date"],
	input[type="time"],
	input[type="text"],
	.switch {
		cursor: pointer;
		box-sizing: border-box;
		width: 100%;
		padding: .3em .5em;
		font-size: 1.5em;
		padding: 7px;
		border: none;
		outline: none;
		background-color: white;
		color: black;
		margin-top: 8px;
		border-radius: 0;
	}
	input[type="time"] {
		flex-grow: 1;
	}
	input[type="text"] {
		border: 1px solid transparent;
	}
	input[type="text"]:focus {
		border-bottom: 1px solid rgba(0, 0, 0, .2);
	}

	.btn,
	.selector label {
		cursor: pointer;
		background-color: white;
		width: 32px;
		padding: 3px;
		height: 32px;
		display: inline-block;
		user-select: none;
	}
	.selector div:not(:last-child),
	.selector label:not(:last-child) {
		border-right: 1px solid rgba(0, 0, 0, .2);
	}

	.selector {
		margin-top: 8px;
		margin-bottom: 8px;
		margin-right: auto;
		display: flex;
		overflow: hidden;
	}

	.selector > label {
		width: 32px;
		height: 32px;
		user-select: none;
	}

	.selector > input {
		display: none;
	}

	.selector input + label {
		background: #d3d3d3;
	}

	.selector input:checked + label {
		background: #fff;
	}

	.switch {
		position: relative;
		display: inline-block;
		width: 84px;
		padding: 0 !important;
		overflow: hidden;
		flex-shrink: 0;
	}

	.switch input {
		opacity: 0;
		width: 0;
		height: 0;
	}

	.slider {
		position: absolute;
		cursor: pointer;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #bbb;
		height: 100%;
	}

	.slider:before {
		position: absolute;
		font-size: 13px;
		padding-top: calc(25% - 7px);
		line-height: 100%;
		text-align: center;
		height: 100%;
		width: 42px;
		background-color: white;
		transition: .2s;
	}

	.switch input:checked + .slider:before {
		transform: translateX(42px);
	}

	.slider.de:before {
		content: "AB";
	}

	.switch input:checked + .slider.de:before {
		content: "AN";
	}

	.slider.en:before {
		content: "DEP";
	}

	.switch input:checked + .slider.en:before {
		content: "ARR";
	}
}

@media (min-width: 576px) {

}
@media (max-width: 575px) {
	.selector:nth-child(2) {
		flex-basis: 100%;
	}
}

.journey,
.journeys {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.search {
	color: white;
	display: flex;
	flex-direction: column;
	margin-bottom: 5em;
}

.search table {
	width: 100%;
	color: black;
}

.search #date {
	flex-grow: 1;
	margin-left: 8px;
}

.search>.title {
	display: flex;
	justify-content: center;
	align-items: center;
}

.search>.title>h1 {
	font-weight: normal;
	margin-left: .5em;
	margin: .7em .3em .5em .3em;
}
.search>.title>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%);
}

.search>.title>.logo {
	background-color: #7171e5;
	border-radius: 15%;
	width: 50px;
	height: 50px;
	margin: 0;
	padding: 5px 5px 2px 6px;
}

.search .btn.go {
	font-size: 1.5em;
	display: flex;
	justify-content: center;
	width: 110px;
	font-size: 20px;
}

.search .btn.go label {
	cursor: pointer;
}

.search .btn.go svg {
	margin-left: 5px;
	fill: #5050ff;
}



.journeys {
	min-height: 100vh;
}

.journeys table a,
.journey table span {
	padding: 5px 3px;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	text-decoration: none;
	color: black;
}

.journey table a {
	padding: 5px 3px;
	display: flex;
	justify-content: center;
	align-items: center;
	text-decoration: none;
	color: black;
}

.journeys a.details-button {
	height: 30px;
	padding: 0;
}

.journey tbody td:nth-child(3) {
	text-align: left;
}

.journey tbody:not(:last-child) {
	border-bottom: 1px solid rgba(0, 0, 0, .2);
}

.journey p {
	color: white;
	width: 100%;
}

.journey p::before {
	filter: drop-shadow( 0 0 5px rgba(0, 0, 0, .6) );
	margin-right: 4px;
	vertical-align: sub;
}

.journey p.change,
.journey p.walk,
.journey p.transfer {
	text-shadow: 0 0 15px rgba(0, 0, 0, .6);
	text-align: center;
}

.journey p.change::before {
	content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path style="fill: white;" d="M9 3L5 6.99h3V14h2V6.99h3L9 3zm7 14.01V10h-2v7.01h-3L15 21l4-3.99h-3z"/><path d="M0 0h24v24H0z" fill="none"/></svg>');
}

.journey p.walk::before {
	content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path style="fill: white;" d="M13.5 5.5c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zM9.8 8.9L7 23h2.1l1.8-8 2.1 2v6h2v-7.5l-2.1-2 .6-3C14.8 12 16.8 13 19 13v-2c-1.9 0-3.5-1-4.3-2.4l-1-1.6c-.4-.6-1-1-1.7-1-.3 0-.5.1-.8.1L6 8.3V13h2V9.6l1.8-.7"/></svg>');
}

.journey p.transfer::before {
	content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path style="fill: white;" d="M21.71 11.29l-9-9c-.39-.39-1.02-.39-1.41 0l-9 9c-.39.39-.39 1.02 0 1.41l9 9c.39.39 1.02.39 1.41 0l9-9c.39-.38.39-1.01 0-1.41zM14 14.5V12h-4v3H8v-4c0-.55.45-1 1-1h5V7.5l3.5 3.5-3.5 3.5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>');
}


.suggestionsbox {
	border-radius: 3px;
	width: 100%;
}

.suggestionsbox p:first-child {
	border-top: 0px;
}

.suggestionsbox 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;
}

.suggestions {
	position: relative;
	display: none;
	overflow: visible;
	z-index: 999;
	height: 0;
}

.suggestions.typing,
.suggestions.mouseover {
	display: block;
}



@media (max-width: 799px) {
	.back.invisible {
		display: none;
	}
	.header-content {
		flex-grow: 1;
	}
	.search {
		padding: 10px;
	}

	.back {
		left: 10px;
	}

	.row {
		flex-wrap: wrap;
	}

	.search #date {
		width: initial;
	}

	.search #time {
		width: 100%;
		flex-shrink: 0;
	}
	.loadMore.flipped {
		margin-top: 15px;
	}
	.loadMore {
		width: 48px;
	}
}

@media (min-width: 800px) {
	.journeys table {
		margin: 15px auto;
	}

	#content {
		justify-content: center;
	}
	.center {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.search {
		width: 80vw;
		max-width: 700px;
		color: white;
	}

	.search #date {
		margin-right: 8px;
	}

	.search #time {
		width: 40%;
	}

	td p {
		display: inline;
		margin-right: 5px;
	}

	th {
		padding: 10px 5px;
	}
	.journeys table a {
		padding: 10px 5px;
	}

	table {
		overflow: hidden;
		border: none;
		margin: 50px auto;
		width: 80vw;
	}
}

.hidden {
	display: none !important;
}

label[for=from], label[for=via], label[for=to], label[for=isarr], label[for="date"], label[for=time] {
	display: none;
}

#overlay {
	position: fixed;
	z-index: 1;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgba(0,0,0,0.4);
}


.modal {
	display: flex;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1050;
	overflow: hidden;
	-webkit-overflow-scrolling: touch;
	outline: 0;
}

.modal-alert {
	margin: auto;
	border-radius: 4px;
	background-color: white;
	width: fit-content;
	padding: 15px;
}

.dismiss {
	content: 'OK';
	border-radius: 4px;
	background-color: rgba(20, 30, 255, .7);
	color: white;
	width: fit-content;
	padding: 8px 20px;
	margin-left: auto;
	margin-top: 10px;
	transition: background-color 300ms;
}

.dismiss:hover {
	background-color: rgba(70, 100, 255, .8);
	cursor: pointer;
}

.modal-header {
	background-color: #43a047;
	color: white;
	border-radius: 6px 6px 0px 0px;
	min-height: 16.4;
	padding: 15px;
	border-bottom: 1px solid #e5e5e5;
}

.modal-header .close {
	margin-top: -2px;
}

.modal-header .modal-close {
	width:53px;
	float:right;
	margin:-15px;
	margin-left:0px;
	height:53px;
	border-left: 1px solid #00000040;
	background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAACXBIWXMAAAsTAAALEwEAmpwYAAABO0lEQVR42u3bURKDIAwEUNiLoyfXC3Ss4mYTh81Xv4R90wqEad+2ra1caIuXAQxgAAMYwAAGMIABDGAAA0zVGOMYYxzqibPGxdtJ/PqsCM8aF4xJKBHY40IxwcrPngbY970rJ3r1zKu5hH4DVAhR4Sk/gWiEyPC0d0AUQnR46kuQjaAIT18FWAiq8CHL4FsEZfiws8Asgjp86GHoKUJG+PDT4F2ErPCttdYVd4OzS2F0eFk/YCaIIry0IfIkkCq8FOBuMGV4OUDFkgK83Qh9GoC1Ff4kAPsw9CmAf5scdWdJCnB3h5eJgOzw2QioED4TAVXCZyGgUvgMBFQLr0ZAxfBKBFQNr0JA5fAKBFQPH40gbYtXfDb1dljRzGCPS7sdVnZymON2/2Nk8TKAAQxgAAMYwAAGMIABDLBmnWRS+u5G6HkFAAAAAElFTkSuQmCC') center no-repeat;
	background-size:30px;
	cursor:pointer;
}

.modal-header .modal-close:hover {
	border-radius: 0px 6px 0px 0px;
}

.modal-title {
	margin: 0;
	line-height: 1.4;
}

.modal-dialog {
	position: relative;
	width: auto;
	margin: 10px;
}

.modal-content {
	position: relative;
	background-color: #fff;
	background-clip: padding-box;
	border: 1px solid #999;
	border: 1px solid rgba(0, 0, 0, .2);
	border-radius: 6px;
	outline: 0;
}

.modal-body {
	position: relative;
}

@media (min-width: 768px) {
	.modal-dialog {
		width: 600px;
		margin: 30px auto;
	}

	.modal-content {
	}
}

.row.history:first-child {
	border-top: 0px;
}

form>div.history {
	margin-top: 8px;
	overflow: hidden;
	display: none;
	margin-bottom: 1em;
	user-select: none;
}
:checked ~ .history {
	display: block;
}
.row.history {
	font-size: 1.2em;
	background-color: white;
	color: black;
	margin: 0;
	border-top: 1px solid rgba(0, 0, 0, .2);
	padding: .3em .6em .3em .3em;
	cursor: pointer;

	display: flex;
	justify-content: space-between;
}

.history.via {
	font-weight: 200;
}
.history.from,
.history.to {
	width: 40%;
}
.history.to {
	text-align: right;
}

.history.arrow {
	width: 25px;
}

.station-column {
	width: 60%;
}

.modal {
	display: flex;
}

.box {
	margin: auto;
	background-color: white;
	width: fit-content;
	width: -moz-fit-content;
	padding: 15px;
}

.alert.dismiss {
	content: 'OK';
	border-radius: 4px;
	background-color: rgba(20, 30, 255, .7);
	color: white;
	width: fit-content;
	width: -moz-fit-content;
	padding: 8px 20px;
	margin-left: auto;
	margin-top: 10px;
	transition: background-color 300ms;
}

.alert.dismiss:hover {
	background-color: rgba(70, 100, 255, .8);
	cursor: pointer;
}


.select a {
	display: block;
	text-decoration: none;
	background-color: rgba(20, 30, 255, .7);
	color: white;
	width: 100%;
	padding: 8px 20px;
	margin-left: auto;
	margin-top: 10px;
	text-align: center;
	transition: background-color 300ms;
}

.select a:first-child {
	margin-top: 0px;
}

.select a:hover {
	background-color: rgba(70, 100, 255, .8);
	cursor: pointer;
}

.journey .link {
	vertical-align: bottom;
	cursor: pointer;
	max-inline-size: 22px;
	margin: 0 .3em;
}

.remark {
	vertical-align: middle;
}

.remarks td {
	margin: 0 10px;
	text-align: left;
	display: block;
}

.remarks {
	/*background: #000000d0;*/
	border: 1px solid #ddd;
	padding: 0;
	width: 100%;
	margin: 0;
}

.icon-back {
	content: url('data:image/svg+xml;utf8,<svg height="100%" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g color="white"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" fill="currentColor"></path></g></svg>');
}

.icon-reload {
	content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path style="fill: white;" d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/><path d="M0 0h24v24H0z" fill="none"/></svg>');
}

.icon-hint {
	content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg>');
}

.icon-status {
	content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/></svg>');
}

.icon-other {
	content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"/></svg>');
}

.icon-arrow1 {
	content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="18px" height="18px"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/><path d="M0 0h24v24 H0z" fill="none"/></svg>');
}

.icon-arrow2 {
	content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/><path d="M0 0h24v24H0z" fill="none"/></svg>');
}

.icon-arrow3 {
	content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="18px" height="18px"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/><path d="M0 0h24v24 H0z" fill="none"/></svg>');
}

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

.icon-settings {
	content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" viewBox="0 0 24 24" fill="black" width="18px" height="18px"><g><path d="M0,0h24v24H0V0z" fill="none"/><path d="M19.14,12.94c0.04-0.3,0.06-0.61,0.06-0.94c0-0.32-0.02-0.64-0.07-0.94l2.03-1.58c0.18-0.14,0.23-0.41,0.12-0.61 l-1.92-3.32c-0.12-0.22-0.37-0.29-0.59-0.22l-2.39,0.96c-0.5-0.38-1.03-0.7-1.62-0.94L14.4,2.81c-0.04-0.24-0.24-0.41-0.48-0.41 h-3.84c-0.24,0-0.43,0.17-0.47,0.41L9.25,5.35C8.66,5.59,8.12,5.92,7.63,6.29L5.24,5.33c-0.22-0.08-0.47,0-0.59,0.22L2.74,8.87 C2.62,9.08,2.66,9.34,2.86,9.48l2.03,1.58C4.84,11.36,4.8,11.69,4.8,12s0.02,0.64,0.07,0.94l-2.03,1.58 c-0.18,0.14-0.23,0.41-0.12,0.61l1.92,3.32c0.12,0.22,0.37,0.29,0.59,0.22l2.39-0.96c0.5,0.38,1.03,0.7,1.62,0.94l0.36,2.54 c0.05,0.24,0.24,0.41,0.48,0.41h3.84c0.24,0,0.44-0.17,0.47-0.41l0.36-2.54c0.59-0.24,1.13-0.56,1.62-0.94l2.39,0.96 c0.22,0.08,0.47,0,0.59-0.22l1.92-3.32c0.12-0.22,0.07-0.47-0.12-0.61L19.14,12.94z M12,15.6c-1.98,0-3.6-1.62-3.6-3.6 s1.62-3.6,3.6-3.6s3.6,1.62,3.6,3.6S13.98,15.6,12,15.6z"/></g></svg>');
}

.icon-walk-fast {
	content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="18px" height="18px"><path d="M0 0h24v24H0z" fill="none"/><path d="M13.49 5.48c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm-3.6 13.9l1-4.4 2.1 2v6h2v-7.5l-2.1-2 .6-3c1.3 1.5 3.3 2.5 5.5 2.5v-2c-1.9 0-3.5-1-4.3-2.4l-1-1.6c-.4-.6-1-1-1.7-1-.3 0-.5.1-.8.1l-5.2 2.2v4.7h2v-3.4l1.8-.7-1.6 8.1-4.9-1-.4 2 7 1.4z"/></svg>');
}

.icon-walk {
	content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="18px" height="18px"><path d="M0 0h24v24H0z" fill="none"/><path d="M13.5 5.5c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zM9.8 8.9L7 23h2.1l1.8-8 2.1 2v6h2v-7.5l-2.1-2 .6-3C14.8 12 16.8 13 19 13v-2c-1.9 0-3.5-1-4.3-2.4l-1-1.6c-.4-.6-1-1-1.7-1-.3 0-.5.1-.8.1L6 8.3V13h2V9.6l1.8-.7"/></svg>');
}

.icon-weelchair {
	content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="18px" height="18px"><path d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="4" r="2"/><path d="M19 13v-2c-1.54.02-3.09-.75-4.07-1.83l-1.29-1.43c-.17-.19-.38-.34-.61-.45-.01 0-.01-.01-.02-.01H13c-.35-.2-.75-.3-1.19-.26C10.76 7.11 10 8.04 10 9.09V15c0 1.1.9 2 2 2h5v5h2v-5.5c0-1.1-.9-2-2-2h-3v-3.45c1.29 1.07 3.25 1.94 5 1.95zm-6.17 5c-.41 1.16-1.52 2-2.83 2-1.66 0-3-1.34-3-3 0-1.31.84-2.41 2-2.83V12.1c-2.28.46-4 2.48-4 4.9 0 2.76 2.24 5 5 5 2.42 0 4.44-1.72 4.9-4h-2.07z"/></svg>');
}

.icon-logo {
	content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path style="fill: white;" d="M12 2c-4 0-8 .5-8 4v9.5C4 17.43 5.57 19 7.5 19L6 20.5v.5h2.23l2-2H14l2 2h2v-.5L16.5 19c1.93 0 3.5-1.57 3.5-3.5V6c0-3.5-3.58-4-8-4zM7.5 17c-.83 0-1.5-.67-1.5-1.5S6.67 14 7.5 14s1.5.67 1.5 1.5S8.33 17 7.5 17zm3.5-7H6V6h5v4zm2 0V6h5v4h-5zm3.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.5z"/><path fill="none" d="M0 0h24v24H0V0z"/></svg>')
}


.icon-travelynx {
	content: url('./img/travelynx.svg');
}

.selector label {
	font-weight: bold;
	font-size: 0;
	display: flex;
	justify-content: center;
	align-items: center;
}
.selector label:after {
	font-size: .9rem;
	color: black;
	text-align: center;
	line-height: .9rem;
}

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

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

.icon-ice:after {
	content: 'ICE';
}

.icon-ic:after {
	content: 'IC';
}

.icon-icice:after {
	content: 'IC ICE';
}

.icon-dzug:after {
	content: 'D';
}

.icon-regional:after {
	content: 'NV';
}

.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';
}

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

#content {
	display: flex;
	flex-direction: column;
	min-height: 100vh;

}

/* table */
.icon-table {
        content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M3 9h14V7H3v2zm0 4h14v-2H3v2zm0 4h14v-2H3v2zm16 0h2v-2h-2v2zm0-10v2h2V7h-2zm0 6h2v-2h-2v2z"/></svg>');
	filter: invert();
}
/* canvas */
.icon-canvas {
	transform: rotate(90deg);
	content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M5 13h14v-2H5v2zm-2 4h14v-2H3v2zM7 7v2h14V7H7z"/></svg>');
	filter: invert();
}

.mode-changers {
	display: flex;
	margin-left: auto;
}
.mode-changers a.active {
	border-bottom: 3px solid white;
}
.mode-changers a {
	border-bottom: 3px solid transparent;
	align-items: center;
	display: flex;
	padding: 0 1em;
	cursor: pointer;
}
.mode-changers a span {
	font-weight: bold;
	margin: 1em .4em;
}

header h3 {
	margin-right: 1.5em;
}

.train-details {
	display: flex;
	justify-content: center;
}

.journey thead>tr:nth-child(2) {
	border-bottom: 2px solid #ccc;
}

.train-detail {
	margin: .4em 2em;
}