From 31e3e8539a286b0b465c0d63e90791ba986744d5 Mon Sep 17 00:00:00 2001
From: ctucx <leah@antifa.jetzt>
Date: Fri, 12 Jun 2020 19:41:45 +0000
Subject: [PATCH] new icons and selector in suggestions

---
 client/img/bus.svg               |  90 +++++++------
 client/img/{d.svg => dzug.svg}   |   0
 client/img/ferry.svg             |  94 ++++++++++++++
 client/img/s.svg                 |  70 -----------
 client/img/suburban.svg          |  78 ++++++++++++
 client/img/{u.svg => subway.svg} |  67 +++++-----
 client/img/taxi.svg              |  90 +++++++++++++
 client/img/tram.svg              |  94 ++++++++------
 client/index.html                |   2 -
 client/js/api.js                 |   4 +-
 client/js/journeyView.js         |  10 +-
 client/js/journeysView.js        |   8 +-
 client/js/overlays.js            |  10 +-
 client/js/searchView.js          | 120 +++++++++++++-----
 client/style.css                 | 208 +++++++++++++++++++------------
 15 files changed, 629 insertions(+), 316 deletions(-)
 rename client/img/{d.svg => dzug.svg} (100%)
 create mode 100644 client/img/ferry.svg
 delete mode 100644 client/img/s.svg
 create mode 100644 client/img/suburban.svg
 rename client/img/{u.svg => subway.svg} (79%)
 create mode 100644 client/img/taxi.svg

diff --git a/client/img/bus.svg b/client/img/bus.svg
index 65cf832..27b34ba 100644
--- a/client/img/bus.svg
+++ b/client/img/bus.svg
@@ -7,36 +7,43 @@
    xmlns="http://www.w3.org/2000/svg"
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   inkscape:version="1.0 (4035a4f, 2020-05-01)"
-   sodipodi:docname="bus_new_path.svg"
-   id="svg8"
-   version="1.1"
-   viewBox="0 0 46.347183 46.347183"
+   width="46.347183mm"
    height="46.347183mm"
-   width="46.347183mm">
+   viewBox="0 0 46.347183 46.347183"
+   version="1.1"
+   id="svg8"
+   sodipodi:docname="bus.svg"
+   inkscape:version="1.0 (4035a4f, 2020-05-01)">
   <sodipodi:namedview
-     inkscape:current-layer="text24"
-     inkscape:window-maximized="0"
-     inkscape:window-y="23"
-     inkscape:window-x="0"
-     inkscape:cy="123.55024"
-     inkscape:cx="19.749611"
-     inkscape:zoom="2.3291599"
-     showgrid="false"
-     id="namedview197"
-     inkscape:window-height="959"
-     inkscape:window-width="1920"
-     inkscape:pageshadow="2"
-     inkscape:pageopacity="0"
-     guidetolerance="10"
-     gridtolerance="10"
-     objecttolerance="10"
-     borderopacity="1"
-     bordercolor="#666666"
+     inkscape:document-rotation="0"
      pagecolor="#ffffff"
-     inkscape:document-rotation="0" />
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="959"
+     id="namedview197"
+     showgrid="false"
+     inkscape:zoom="2.3291599"
+     inkscape:cx="19.320271"
+     inkscape:cy="122.26222"
+     inkscape:window-x="0"
+     inkscape:window-y="23"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="text24" />
   <defs
-     id="defs2" />
+     id="defs2">
+    <rect
+       id="rect333"
+       height="12.949948"
+       width="16.812213"
+       y="44.347884"
+       x="43.46184" />
+  </defs>
   <metadata
      id="metadata5">
     <rdf:RDF>
@@ -50,24 +57,29 @@
     </rdf:RDF>
   </metadata>
   <g
-     id="layer1"
-     transform="translate(-32.443024,-29.353207)">
+     transform="translate(-32.443024,-29.353207)"
+     id="layer1">
     <g
-       style="font-style:normal;font-weight:normal;font-size:24.6944px;line-height:1.25;font-family:sans-serif;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.264583"
+       aria-label="NV"
        id="text24"
-       aria-label="NV">
+       style="font-style:normal;font-weight:normal;font-size:24.6944px;line-height:1.25;font-family:sans-serif;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.264583">
       <g
-         style="font-style:normal;font-weight:normal;font-size:29.9861px;line-height:0.75;font-family:sans-serif;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.0700042"
-         id="text21"
-         aria-label="Bu">
+         style="font-style:normal;font-weight:normal;font-size:6.73823px;line-height:1.25;font-family:sans-serif;white-space:pre;shape-inside:url(#rect333);fill:#000000;fill-opacity:1;stroke:none"
+         id="text331"
+         transform="matrix(3.1412813,0,0,3.1412813,-99.37558,-98.671926)"
+         aria-label="Bus">
         <path
-           id="path343"
-           style="font-style:normal;font-variant:normal;font-weight:900;font-stretch:normal;font-size:29.9861px;font-family:Roboto;-inkscape-font-specification:'Roboto Heavy';text-align:center;text-anchor:middle;stroke-width:0.0700042"
-           d="M 38.961739,63.039505 V 41.721263 h 7.657583 q 4.114303,0 6.251984,1.50809 2.152323,1.508089 2.152323,4.377853 0,1.654506 -0.761366,2.825838 -0.761366,1.171332 -2.240172,1.727715 1.669148,0.43925 2.562288,1.639865 0.893141,1.200615 0.893141,2.92833 0,3.133313 -1.991264,4.714611 -1.976623,1.566657 -5.871302,1.59594 z m 5.139219,-9.063181 v 5.109935 h 3.367579 q 1.390957,0 2.137681,-0.62959 0.746724,-0.644233 0.746724,-1.800923 0,-2.664781 -2.650138,-2.679422 z m 0,-3.36758 h 2.679422 q 1.68379,-0.01464 2.40123,-0.614949 0.717441,-0.600308 0.717441,-1.77164 0,-1.347032 -0.776007,-1.932698 -0.776008,-0.600307 -2.503722,-0.600307 h -2.518364 z" />
+           id="path445"
+           style="font-style:normal;font-variant:normal;font-weight:900;font-stretch:normal;font-size:6.73823px;font-family:roboto;-inkscape-font-specification:'roboto Heavy'"
+           d="m 43.822854,50.495148 v -4.790461 h 1.720749 q 0.924533,0 1.404895,0.338886 0.483652,0.338886 0.483652,0.983755 0,0.371787 -0.171088,0.635 -0.171087,0.263212 -0.503393,0.388237 0.375078,0.09871 0.575777,0.368497 0.200699,0.269793 0.200699,0.658031 0,0.704092 -0.447461,1.059428 -0.44417,0.352047 -1.31935,0.358627 z m 1.154843,-2.036604 v 1.148263 h 0.756735 q 0.312565,0 0.480362,-0.141476 0.167798,-0.144767 0.167798,-0.404689 0,-0.598808 -0.595517,-0.602098 z m 0,-0.756735 h 0.602098 q 0.378367,-0.0033 0.539585,-0.138186 0.161217,-0.134896 0.161217,-0.398108 0,-0.302694 -0.174378,-0.4343 -0.174378,-0.134897 -0.562616,-0.134897 h -0.565906 z" />
         <path
-           id="path345"
-           style="font-style:normal;font-variant:normal;font-weight:900;font-stretch:normal;font-size:29.9861px;font-family:Roboto;-inkscape-font-specification:'Roboto Heavy';text-align:center;text-anchor:middle;stroke-width:0.0700042"
-           d="m 67.498315,61.326432 q -1.566656,2.005906 -4.231437,2.005906 -2.606213,0 -3.953245,-1.50809 -1.33239,-1.522732 -1.33239,-4.363212 V 47.19724 h 4.934236 v 10.29308 q 0,2.035189 1.976623,2.035189 1.698431,0 2.415872,-1.215257 V 47.19724 h 4.963519 v 15.842265 h -4.626761 z" />
+           id="path447"
+           style="font-style:normal;font-variant:normal;font-weight:900;font-stretch:normal;font-size:6.73823px;font-family:roboto;-inkscape-font-specification:'roboto Heavy'"
+           d="m 50.235359,50.1102 q -0.352046,0.450751 -0.950853,0.450751 -0.585647,0 -0.888341,-0.338886 Q 48.096761,49.87989 48.096761,49.2416 v -2.306396 h 1.108781 v 2.312977 q 0,0.457331 0.44417,0.457331 0.381658,0 0.542875,-0.273083 v -2.497225 h 1.115362 v 3.559944 h -1.039688 z" />
+        <path
+           id="path449"
+           style="font-style:normal;font-variant:normal;font-weight:900;font-stretch:normal;font-size:6.73823px;font-family:roboto;-inkscape-font-specification:'roboto Heavy'"
+           d="m 53.782142,49.494942 q 0,-0.141477 -0.148056,-0.227021 -0.148057,-0.08554 -0.562616,-0.177668 -0.414559,-0.09212 -0.684352,-0.240181 -0.269792,-0.151347 -0.411269,-0.365207 -0.141476,-0.213859 -0.141476,-0.490232 0,-0.490233 0.404688,-0.806087 0.404689,-0.319145 1.059429,-0.319145 0.704093,0 1.131812,0.319145 0.42772,0.319144 0.42772,0.838988 h -1.112071 q 0,-0.427719 -0.450751,-0.427719 -0.174378,0 -0.292824,0.0987 -0.118445,0.09542 -0.118445,0.240181 0,0.148057 0.144767,0.240181 0.144766,0.09213 0.460621,0.151347 0.319145,0.05922 0.559326,0.141477 0.802797,0.276373 0.802797,0.990335 0,0.486943 -0.4343,0.792927 -0.43101,0.305984 -1.118652,0.305984 -0.457331,0 -0.815957,-0.164508 -0.358627,-0.164507 -0.559326,-0.44746 -0.200699,-0.282953 -0.200699,-0.595518 h 1.036397 q 0.0066,0.246762 0.164508,0.361917 0.157927,0.111865 0.404688,0.111865 0.227021,0 0.338886,-0.09212 0.115155,-0.09212 0.115155,-0.240181 z" />
       </g>
     </g>
   </g>
diff --git a/client/img/d.svg b/client/img/dzug.svg
similarity index 100%
rename from client/img/d.svg
rename to client/img/dzug.svg
diff --git a/client/img/ferry.svg b/client/img/ferry.svg
new file mode 100644
index 0000000..374bf96
--- /dev/null
+++ b/client/img/ferry.svg
@@ -0,0 +1,94 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="46.347183mm"
+   height="46.347183mm"
+   viewBox="0 0 46.347183 46.347183"
+   version="1.1"
+   id="svg8"
+   sodipodi:docname="ferry.svg"
+   inkscape:version="1.0 (4035a4f, 2020-05-01)">
+  <sodipodi:namedview
+     inkscape:document-rotation="0"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="959"
+     id="namedview197"
+     showgrid="false"
+     inkscape:zoom="2.3291599"
+     inkscape:cx="19.320271"
+     inkscape:cy="122.26222"
+     inkscape:window-x="0"
+     inkscape:window-y="23"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="text24" />
+  <defs
+     id="defs2">
+    <rect
+       id="rect333"
+       height="12.949948"
+       width="16.812213"
+       y="44.347884"
+       x="43.46184" />
+  </defs>
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     transform="translate(-32.443024,-29.353207)"
+     id="layer1">
+    <g
+       aria-label="NV"
+       id="text24"
+       style="font-style:normal;font-weight:normal;font-size:24.6944px;line-height:1.25;font-family:sans-serif;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.264583">
+      <g
+         style="font-style:normal;font-weight:normal;font-size:5.05367px;line-height:1.25;font-family:sans-serif;white-space:pre;shape-inside:url(#rect333);fill:#000000;fill-opacity:1;stroke:none"
+         id="text331"
+         transform="matrix(3.1412813,0,0,3.1412813,-100.1533,-97.315536)"
+         aria-label="Ferry">
+        <path
+           id="path488"
+           style="font-style:normal;font-variant:normal;font-weight:900;font-stretch:normal;font-size:5.05367px;font-family:roboto;-inkscape-font-specification:'roboto Heavy'"
+           d="m 45.995175,47.527057 h -1.396668 v 1.431216 h -0.866132 v -3.592844 h 2.403454 v 0.668723 h -1.537322 v 0.82665 h 1.396668 z" />
+        <path
+           id="path490"
+           style="font-style:normal;font-variant:normal;font-weight:900;font-stretch:normal;font-size:5.05367px;font-family:roboto;-inkscape-font-specification:'roboto Heavy'"
+           d="m 47.700295,49.007625 q -0.614435,0 -0.994447,-0.365207 -0.380013,-0.367674 -0.380013,-0.954966 v -0.06909 q 0,-0.409624 0.150525,-0.72301 0.152992,-0.313387 0.44417,-0.483652 0.291178,-0.172733 0.690931,-0.172733 0.562616,0 0.888341,0.350401 0.325725,0.347933 0.325725,0.972239 v 0.323257 h -1.653301 q 0.04442,0.224553 0.194942,0.352869 0.150524,0.128316 0.389883,0.128316 0.394818,0 0.616903,-0.276373 l 0.380012,0.449105 q -0.15546,0.214683 -0.441703,0.342999 -0.283775,0.125848 -0.611968,0.125848 z m -0.09377,-2.127082 q -0.365206,0 -0.4343,0.483652 h 0.838989 v -0.06416 q 0.0049,-0.199877 -0.101172,-0.308451 -0.106108,-0.111043 -0.303517,-0.111043 z" />
+        <path
+           id="path492"
+           style="font-style:normal;font-variant:normal;font-weight:900;font-stretch:normal;font-size:5.05367px;font-family:roboto;-inkscape-font-specification:'roboto Heavy'"
+           d="m 50.777408,47.040938 -0.273905,-0.01974 q -0.39235,0 -0.503393,0.246761 v 1.690315 h -0.831585 v -2.669957 h 0.779765 l 0.02714,0.342998 q 0.209747,-0.39235 0.584824,-0.39235 0.133251,0 0.231956,0.02961 z" />
+        <path
+           id="path494"
+           style="font-style:normal;font-variant:normal;font-weight:900;font-stretch:normal;font-size:5.05367px;font-family:roboto;-inkscape-font-specification:'roboto Heavy'"
+           d="m 52.692275,47.040938 -0.273905,-0.01974 q -0.39235,0 -0.503393,0.246761 v 1.690315 h -0.831585 v -2.669957 h 0.779765 l 0.02714,0.342998 q 0.209747,-0.39235 0.584824,-0.39235 0.133251,0 0.231956,0.02961 z" />
+        <path
+           id="path496"
+           style="font-style:normal;font-variant:normal;font-weight:900;font-stretch:normal;font-size:5.05367px;font-family:roboto;-inkscape-font-specification:'roboto Heavy'"
+           d="m 54.108684,47.79356 0.44417,-1.505244 h 0.890808 l -1.088217,3.116594 -0.04688,0.113511 q -0.231956,0.518198 -0.819248,0.518198 -0.162862,0 -0.342998,-0.04935 v -0.594695 h 0.108575 q 0.175201,0 0.266502,-0.05182 0.09377,-0.04935 0.138187,-0.180135 l 0.06663,-0.177668 -0.927822,-2.694633 h 0.88834 z" />
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/client/img/s.svg b/client/img/s.svg
deleted file mode 100644
index 3f6e208..0000000
--- a/client/img/s.svg
+++ /dev/null
@@ -1,70 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   inkscape:version="1.0 (4035a4f, 2020-05-01)"
-   sodipodi:docname="s_new_path.svg"
-   id="svg8"
-   version="1.1"
-   viewBox="0 0 46.347183 46.347183"
-   height="46.347183mm"
-   width="46.347183mm">
-  <sodipodi:namedview
-     inkscape:current-layer="text24"
-     inkscape:window-maximized="0"
-     inkscape:window-y="23"
-     inkscape:window-x="0"
-     inkscape:cy="122.69156"
-     inkscape:cx="18.890932"
-     inkscape:zoom="2.3291599"
-     showgrid="false"
-     id="namedview197"
-     inkscape:window-height="959"
-     inkscape:window-width="1920"
-     inkscape:pageshadow="2"
-     inkscape:pageopacity="0"
-     guidetolerance="10"
-     gridtolerance="10"
-     objecttolerance="10"
-     borderopacity="1"
-     bordercolor="#666666"
-     pagecolor="#ffffff"
-     inkscape:document-rotation="0" />
-  <defs
-     id="defs2" />
-  <metadata
-     id="metadata5">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <g
-     id="layer1"
-     transform="translate(-32.443024,-29.353207)">
-    <g
-       style="font-style:normal;font-weight:normal;font-size:24.6944px;line-height:1.25;font-family:sans-serif;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.264583"
-       id="text24"
-       aria-label="NV">
-      <g
-         style="font-style:normal;font-weight:normal;font-size:29.9861px;line-height:0.75;font-family:sans-serif;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.0700042"
-         id="text21"
-         aria-label="S">
-        <path
-           id="path242"
-           style="font-style:italic;font-variant:normal;font-weight:900;font-stretch:normal;font-size:29.9861px;font-family:Roboto;-inkscape-font-specification:'Roboto Heavy Italic';text-align:center;text-anchor:middle;stroke-width:0.0700042"
-           d="m 57.872945,57.409779 q 0.322117,-1.654507 -1.786281,-2.562289 l -2.40123,-0.995632 q -5.05137,-2.269456 -4.802462,-6.178777 0.102492,-1.786281 1.229899,-3.177238 1.127407,-1.405598 3.118671,-2.181605 1.991265,-0.776008 4.34857,-0.746725 3.162597,0.05857 5.080653,1.844848 1.932698,1.786282 1.903414,4.78782 h -4.978161 q 0.04392,-1.229899 -0.527099,-1.961981 -0.556383,-0.746724 -1.844848,-0.776008 -1.259182,-0.02928 -2.225531,0.585666 -0.966349,0.61495 -1.142048,1.654507 -0.278192,1.464165 2.166964,2.40123 2.459797,0.937066 3.572562,1.610582 3.499355,2.093756 3.27973,5.651677 -0.117133,1.844848 -1.185974,3.235804 -1.06884,1.390957 -2.972255,2.152323 -1.888772,0.761366 -4.246078,0.732083 -1.727715,-0.02928 -3.206521,-0.541742 -1.478807,-0.512457 -2.533006,-1.493448 -2.137681,-1.976623 -2.049831,-5.197786 l 5.022086,0.01464 q -0.08785,1.639865 0.629591,2.489081 0.717441,0.834574 2.415872,0.834574 1.259182,0 2.093756,-0.571025 0.849216,-0.585666 1.039557,-1.610581 z" />
-      </g>
-    </g>
-  </g>
-</svg>
diff --git a/client/img/suburban.svg b/client/img/suburban.svg
new file mode 100644
index 0000000..9eaa8b5
--- /dev/null
+++ b/client/img/suburban.svg
@@ -0,0 +1,78 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="46.347183mm"
+   height="46.347183mm"
+   viewBox="0 0 46.347183 46.347183"
+   version="1.1"
+   id="svg8"
+   sodipodi:docname="s.svg"
+   inkscape:version="1.0 (4035a4f, 2020-05-01)">
+  <sodipodi:namedview
+     inkscape:document-rotation="0"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="959"
+     id="namedview197"
+     showgrid="false"
+     inkscape:zoom="2.3291599"
+     inkscape:cx="19.320271"
+     inkscape:cy="122.26222"
+     inkscape:window-x="0"
+     inkscape:window-y="23"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="text24" />
+  <defs
+     id="defs2">
+    <rect
+       id="rect333"
+       height="12.949948"
+       width="16.812213"
+       y="44.347884"
+       x="43.46184" />
+  </defs>
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     transform="translate(-32.443024,-29.353207)"
+     id="layer1">
+    <g
+       aria-label="NV"
+       id="text24"
+       style="font-style:normal;font-weight:normal;font-size:24.6944px;line-height:1.25;font-family:sans-serif;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.264583">
+      <g
+         style="font-style:normal;font-weight:normal;font-size:10.5833px;line-height:1.25;font-family:sans-serif;white-space:pre;shape-inside:url(#rect333);fill:#000000;fill-opacity:1;stroke:none"
+         id="text331"
+         transform="matrix(3.1412813,0,0,3.1412813,-91.263049,-105.2946)"
+         aria-label="S">
+        <path
+           id="path355"
+           style="font-style:normal;font-variant:normal;font-weight:900;font-stretch:normal;font-family:roboto;-inkscape-font-specification:'roboto Heavy'"
+           d="m 47.910264,52.00325 q 0,-0.397907 -0.284219,-0.620115 -0.279052,-0.222208 -0.987017,-0.459919 -0.707965,-0.237711 -1.157548,-0.459919 -1.462439,-0.7183 -1.462439,-1.974033 0,-0.625283 0.361734,-1.100705 0.366902,-0.480589 1.033525,-0.744138 0.666624,-0.268717 1.498612,-0.268717 0.811318,0 1.452103,0.289387 0.645954,0.289387 1.00252,0.826821 0.356566,0.532265 0.356566,1.21956 h -1.808669 q 0,-0.459919 -0.28422,-0.713133 -0.279052,-0.253214 -0.759641,-0.253214 -0.485757,0 -0.769976,0.217041 -0.279052,0.211872 -0.279052,0.5426 0,0.289388 0.310058,0.527098 0.310057,0.232544 1.090369,0.485757 0.780311,0.248046 1.281571,0.537434 1.21956,0.702797 1.21956,1.93786 0,0.987016 -0.744138,1.550288 -0.744138,0.563271 -2.041213,0.563271 -0.91467,0 -1.658808,-0.325561 -0.738971,-0.330728 -1.116207,-0.899167 -0.372069,-0.573606 -0.372069,-1.317744 h 1.819004 q 0,0.604612 0.310058,0.893999 0.315225,0.284219 1.018022,0.284219 0.449584,0 0.707965,-0.191202 0.263549,-0.19637 0.263549,-0.547768 z" />
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/client/img/u.svg b/client/img/subway.svg
similarity index 79%
rename from client/img/u.svg
rename to client/img/subway.svg
index 5943417..912967e 100644
--- a/client/img/u.svg
+++ b/client/img/subway.svg
@@ -7,34 +7,34 @@
    xmlns="http://www.w3.org/2000/svg"
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   inkscape:version="1.0 (4035a4f, 2020-05-01)"
-   sodipodi:docname="u_new_path.svg"
-   id="svg8"
-   version="1.1"
-   viewBox="0 0 46.347183 46.347183"
+   width="46.347183mm"
    height="46.347183mm"
-   width="46.347183mm">
+   viewBox="0 0 46.347183 46.347183"
+   version="1.1"
+   id="svg8"
+   sodipodi:docname="u.svg"
+   inkscape:version="1.0 (4035a4f, 2020-05-01)">
   <sodipodi:namedview
-     inkscape:current-layer="text24"
-     inkscape:window-maximized="0"
-     inkscape:window-y="23"
-     inkscape:window-x="0"
-     inkscape:cy="122.69156"
-     inkscape:cx="18.890932"
-     inkscape:zoom="2.3291599"
-     showgrid="false"
-     id="namedview197"
-     inkscape:window-height="959"
-     inkscape:window-width="1920"
-     inkscape:pageshadow="2"
-     inkscape:pageopacity="0"
-     guidetolerance="10"
-     gridtolerance="10"
-     objecttolerance="10"
-     borderopacity="1"
-     bordercolor="#666666"
+     inkscape:document-rotation="0"
      pagecolor="#ffffff"
-     inkscape:document-rotation="0" />
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="959"
+     id="namedview197"
+     showgrid="false"
+     inkscape:zoom="2.3291599"
+     inkscape:cx="19.320271"
+     inkscape:cy="122.69156"
+     inkscape:window-x="0"
+     inkscape:window-y="23"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="text24" />
   <defs
      id="defs2" />
   <metadata
@@ -50,20 +50,21 @@
     </rdf:RDF>
   </metadata>
   <g
-     id="layer1"
-     transform="translate(-32.443024,-29.353207)">
+     transform="translate(-32.443024,-29.353207)"
+     id="layer1">
     <g
-       style="font-style:normal;font-weight:normal;font-size:24.6944px;line-height:1.25;font-family:sans-serif;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.264583"
+       aria-label="NV"
        id="text24"
-       aria-label="NV">
+       style="font-style:normal;font-weight:normal;font-size:24.6944px;line-height:1.25;font-family:sans-serif;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.264583">
       <g
-         style="font-style:normal;font-weight:normal;font-size:29.9861px;line-height:0.75;font-family:sans-serif;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.0700042"
+         transform="matrix(1.3258957,0,0,1.3258957,-18.125214,-17.11826)"
+         aria-label="U"
          id="text21"
-         aria-label="U">
+         style="font-style:normal;font-weight:normal;font-size:29.9861px;line-height:0.75;font-family:sans-serif;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.0700042">
         <path
-           id="path281"
+           d="m 64.0136,41.721263 v 13.953492 q 0,2.371947 -1.010274,4.114304 -1.010273,1.727714 -2.899046,2.635497 -1.888773,0.907782 -4.465703,0.907782 -3.894679,0 -6.134852,-2.020548 -2.240172,-2.020547 -2.284097,-5.534543 V 41.721263 h 5.168502 v 14.158475 q 0.08785,3.499354 3.250447,3.499354 1.595939,0 2.415872,-0.878499 0.819932,-0.878499 0.819932,-2.855121 V 41.721263 Z"
            style="font-style:normal;font-variant:normal;font-weight:900;font-stretch:normal;font-size:29.9861px;font-family:Roboto;-inkscape-font-specification:'Roboto Heavy';text-align:center;text-anchor:middle;stroke-width:0.0700042"
-           d="m 64.0136,41.721263 v 13.953492 q 0,2.371947 -1.010274,4.114304 -1.010273,1.727714 -2.899046,2.635497 -1.888773,0.907782 -4.465703,0.907782 -3.894679,0 -6.134852,-2.020548 -2.240172,-2.020547 -2.284097,-5.534543 V 41.721263 h 5.168502 v 14.158475 q 0.08785,3.499354 3.250447,3.499354 1.595939,0 2.415872,-0.878499 0.819932,-0.878499 0.819932,-2.855121 V 41.721263 Z" />
+           id="path281" />
       </g>
     </g>
   </g>
diff --git a/client/img/taxi.svg b/client/img/taxi.svg
new file mode 100644
index 0000000..9da9f14
--- /dev/null
+++ b/client/img/taxi.svg
@@ -0,0 +1,90 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="46.347183mm"
+   height="46.347183mm"
+   viewBox="0 0 46.347183 46.347183"
+   version="1.1"
+   id="svg8"
+   sodipodi:docname="taxi.svg"
+   inkscape:version="1.0 (4035a4f, 2020-05-01)">
+  <sodipodi:namedview
+     inkscape:document-rotation="0"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="960"
+     id="namedview197"
+     showgrid="false"
+     inkscape:zoom="2.3291599"
+     inkscape:cx="19.320271"
+     inkscape:cy="122.26222"
+     inkscape:window-x="0"
+     inkscape:window-y="23"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="text24" />
+  <defs
+     id="defs2">
+    <rect
+       id="rect333"
+       height="12.949948"
+       width="16.812213"
+       y="44.347884"
+       x="43.46184" />
+  </defs>
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     transform="translate(-32.443024,-29.353207)"
+     id="layer1">
+    <g
+       aria-label="NV"
+       id="text24"
+       style="font-style:normal;font-weight:normal;font-size:24.6944px;line-height:1.25;font-family:sans-serif;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.264583">
+      <g
+         style="font-style:normal;font-weight:normal;font-size:6.17671px;line-height:1.25;font-family:sans-serif;white-space:pre;shape-inside:url(#rect333);fill:#000000;fill-opacity:1;stroke:none"
+         id="text331"
+         transform="matrix(3.1412813,0,0,3.1412813,-98.764934,-97.354216)"
+         aria-label="Taxi">
+        <path
+           id="path541"
+           style="font-style:normal;font-variant:normal;font-weight:900;font-stretch:normal;font-size:6.17671px;font-family:roboto;-inkscape-font-specification:'roboto Heavy'"
+           d="m 47.23995,46.40893 h -1.31798 v 3.573926 H 44.863364 V 46.40893 h -1.293852 v -0.817329 h 3.670438 z" />
+        <path
+           id="path543"
+           style="font-style:normal;font-variant:normal;font-weight:900;font-stretch:normal;font-size:6.17671px;font-family:roboto;-inkscape-font-specification:'roboto Heavy'"
+           d="m 48.974134,49.982856 q -0.05429,-0.09953 -0.09651,-0.292549 -0.280486,0.352869 -0.784153,0.352869 -0.461444,0 -0.784153,-0.27747 -0.322709,-0.280485 -0.322709,-0.702721 0,-0.530811 0.392077,-0.802249 0.392076,-0.271437 1.140037,-0.271437 h 0.313661 v -0.171911 q 0,-0.449379 -0.38906,-0.449379 -0.361917,0 -0.361917,0.355884 h -1.016382 q 0,-0.473507 0.401124,-0.769072 0.40414,-0.295566 1.028446,-0.295566 0.624306,0 0.986223,0.304613 0.361917,0.304614 0.370965,0.835425 v 1.44465 q 0.006,0.44938 0.138734,0.687642 v 0.05127 z m -0.63637,-0.663514 q 0.190006,0 0.313661,-0.08143 0.126671,-0.08143 0.180958,-0.183974 v -0.521763 h -0.295565 q -0.530811,0 -0.530811,0.476523 0,0.138735 0.0935,0.226198 0.09349,0.08445 0.238262,0.08445 z" />
+        <path
+           id="path545"
+           style="font-style:normal;font-variant:normal;font-weight:900;font-stretch:normal;font-size:6.17671px;font-family:roboto;-inkscape-font-specification:'roboto Heavy'"
+           d="m 51.73978,47.618334 0.473508,-0.898759 h 1.05559 l -0.859552,1.589417 0.901775,1.673864 h -1.061622 l -0.512715,-0.965111 -0.503667,0.965111 h -1.067654 l 0.904791,-1.673864 -0.856536,-1.589417 h 1.067654 z" />
+        <path
+           id="path547"
+           style="font-style:normal;font-variant:normal;font-weight:900;font-stretch:normal;font-size:6.17671px;font-family:roboto;-inkscape-font-specification:'roboto Heavy'"
+           d="m 54.67432,49.982856 h -1.019398 v -3.263281 h 1.019398 z m -1.079718,-4.104737 q 0,-0.21715 0.156831,-0.355885 0.15683,-0.138735 0.407156,-0.138735 0.250326,0 0.407156,0.138735 0.156831,0.138735 0.156831,0.355885 0,0.21715 -0.156831,0.355884 -0.15683,0.138735 -0.407156,0.138735 -0.250326,0 -0.407156,-0.138735 -0.156831,-0.138734 -0.156831,-0.355884 z" />
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/client/img/tram.svg b/client/img/tram.svg
index 6b7b770..279fc2e 100644
--- a/client/img/tram.svg
+++ b/client/img/tram.svg
@@ -7,36 +7,43 @@
    xmlns="http://www.w3.org/2000/svg"
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   inkscape:version="1.0 (4035a4f, 2020-05-01)"
-   sodipodi:docname="tram_new_path.svg"
-   id="svg8"
-   version="1.1"
-   viewBox="0 0 46.347183 46.347183"
+   width="46.347183mm"
    height="46.347183mm"
-   width="46.347183mm">
+   viewBox="0 0 46.347183 46.347183"
+   version="1.1"
+   id="svg8"
+   sodipodi:docname="tram.svg"
+   inkscape:version="1.0 (4035a4f, 2020-05-01)">
   <sodipodi:namedview
-     inkscape:current-layer="text24"
-     inkscape:window-maximized="0"
-     inkscape:window-y="23"
-     inkscape:window-x="0"
-     inkscape:cy="122.69156"
-     inkscape:cx="18.890932"
-     inkscape:zoom="2.3291599"
-     showgrid="false"
-     id="namedview197"
-     inkscape:window-height="959"
-     inkscape:window-width="1920"
-     inkscape:pageshadow="2"
-     inkscape:pageopacity="0"
-     guidetolerance="10"
-     gridtolerance="10"
-     objecttolerance="10"
-     borderopacity="1"
-     bordercolor="#666666"
+     inkscape:document-rotation="0"
      pagecolor="#ffffff"
-     inkscape:document-rotation="0" />
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="959"
+     id="namedview197"
+     showgrid="false"
+     inkscape:zoom="2.3291599"
+     inkscape:cx="19.320271"
+     inkscape:cy="122.26222"
+     inkscape:window-x="0"
+     inkscape:window-y="23"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="text24" />
   <defs
-     id="defs2" />
+     id="defs2">
+    <rect
+       id="rect333"
+       height="12.949948"
+       width="16.812213"
+       y="44.347884"
+       x="43.46184" />
+  </defs>
   <metadata
      id="metadata5">
     <rdf:RDF>
@@ -50,24 +57,33 @@
     </rdf:RDF>
   </metadata>
   <g
-     id="layer1"
-     transform="translate(-32.443024,-29.353207)">
+     transform="translate(-32.443024,-29.353207)"
+     id="layer1">
     <g
-       style="font-style:normal;font-weight:normal;font-size:24.6944px;line-height:1.25;font-family:sans-serif;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.264583"
+       aria-label="NV"
        id="text24"
-       aria-label="NV">
+       style="font-style:normal;font-weight:normal;font-size:24.6944px;line-height:1.25;font-family:sans-serif;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.264583">
       <g
-         style="font-style:normal;font-weight:normal;font-size:29.9861px;line-height:0.75;font-family:sans-serif;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.0700042"
-         id="text21"
-         aria-label="TR">
+         style="font-style:normal;font-weight:normal;font-size:5.61519px;line-height:1.25;font-family:sans-serif;white-space:pre;shape-inside:url(#rect333);fill:#000000;fill-opacity:1;stroke:none"
+         id="text331"
+         transform="matrix(3.1412813,0,0,3.1412813,-101.43057,-96.690213)"
+         aria-label="Tram">
         <path
-           id="path302"
-           style="font-style:normal;font-variant:normal;font-weight:900;font-stretch:normal;font-size:29.9861px;font-family:Roboto;-inkscape-font-specification:'Roboto Heavy';text-align:center;text-anchor:middle;stroke-width:0.0700042"
-           d="M 54.840609,45.835565 H 48.442208 V 63.185921 H 43.302989 V 45.835565 h -6.281268 v -3.967887 h 17.818888 z" />
+           id="path394"
+           style="font-style:normal;font-variant:normal;font-weight:900;font-stretch:normal;font-size:5.61519px;font-family:roboto;-inkscape-font-specification:'roboto Heavy'"
+           d="M 46.896403,46.221541 H 45.69824 v 3.249023 h -0.962369 v -3.249023 h -1.176229 v -0.743026 h 3.336761 z" />
         <path
-           id="path304"
-           style="font-style:normal;font-variant:normal;font-weight:900;font-stretch:normal;font-size:29.9861px;font-family:Roboto;-inkscape-font-specification:'Roboto Heavy';text-align:center;text-anchor:middle;stroke-width:0.0700042"
-           d="m 64.943347,55.660113 h -2.781914 v 7.525808 H 57.022214 V 41.867678 h 8.389665 q 3.792188,0 5.929869,1.68379 2.137681,1.68379 2.137681,4.758536 0,2.225531 -0.907783,3.689696 -0.89314,1.464165 -2.811196,2.371947 l 4.451061,8.594649 v 0.219625 h -5.50526 z m -2.781914,-3.967888 h 3.250446 q 1.464165,0 2.196248,-0.761365 0.746724,-0.776008 0.746724,-2.152323 0,-1.376315 -0.746724,-2.152322 -0.746724,-0.79065 -2.196248,-0.79065 h -3.250446 z" />
+           id="path396"
+           style="font-style:normal;font-variant:normal;font-weight:900;font-stretch:normal;font-size:5.61519px;font-family:roboto;-inkscape-font-specification:'roboto Heavy'"
+           d="m 48.88146,47.340192 -0.304339,-0.02193 q -0.435945,0 -0.559325,0.274179 v 1.878127 h -0.923984 v -2.966619 h 0.866406 l 0.03016,0.381109 q 0.233052,-0.435944 0.649804,-0.435944 0.148057,0 0.257729,0.0329 z" />
+        <path
+           id="path398"
+           style="font-style:normal;font-variant:normal;font-weight:900;font-stretch:normal;font-size:5.61519px;font-family:roboto;-inkscape-font-specification:'roboto Heavy'"
+           d="m 50.80894,49.470564 q -0.04935,-0.09048 -0.08774,-0.265953 -0.254987,0.320789 -0.712866,0.320789 -0.419494,0 -0.712866,-0.252245 -0.293372,-0.254986 -0.293372,-0.638837 0,-0.482556 0.356433,-0.729317 0.356433,-0.246761 1.036397,-0.246761 h 0.285147 v -0.156282 q 0,-0.408527 -0.353691,-0.408527 -0.329015,0 -0.329015,0.323531 h -0.923984 q 0,-0.430461 0.364658,-0.699157 0.3674,-0.268695 0.934951,-0.268695 0.567551,0 0.896566,0.276921 0.329015,0.276921 0.33724,0.759476 v 1.313318 q 0.0055,0.408527 0.126123,0.625129 v 0.04661 z M 50.230422,48.86737 q 0.172733,0 0.285146,-0.07403 0.115155,-0.07403 0.164508,-0.16725 v -0.47433 H 50.41138 q -0.482555,0 -0.482555,0.433204 0,0.126122 0.08499,0.205634 0.085,0.07677 0.216602,0.07677 z" />
+        <path
+           id="path400"
+           style="font-style:normal;font-variant:normal;font-weight:900;font-stretch:normal;font-size:5.61519px;font-family:roboto;-inkscape-font-specification:'roboto Heavy'"
+           d="m 52.994148,46.503945 0.03016,0.348208 q 0.315306,-0.403043 0.847213,-0.403043 0.562068,0 0.759477,0.446912 0.301597,-0.446912 0.87189,-0.446912 0.902049,0 0.926725,1.091233 v 1.930221 H 55.502888 V 47.59792 q 0,-0.227568 -0.07677,-0.331756 -0.07677,-0.104189 -0.279662,-0.104189 -0.27418,0 -0.408527,0.24402 l 0.0027,0.03839 v 2.026184 h -0.926725 v -1.86716 q 0,-0.233052 -0.07403,-0.33724 -0.07403,-0.104189 -0.282404,-0.104189 -0.265954,0 -0.405785,0.24402 v 2.064569 h -0.923984 v -2.966619 z" />
       </g>
     </g>
   </g>
diff --git a/client/index.html b/client/index.html
index 735dcb0..70ad1fe 100644
--- a/client/index.html
+++ b/client/index.html
@@ -27,8 +27,6 @@
 		<link rel="modulepreload" href="js/settingsView.js">
 		<link rel="modulepreload" href="js/languages.js">
 
-		<link rel="manifest" href="manifest.json">
-
 		<link rel="manifest" href="manifest.json">
 		<style>
 body {
diff --git a/client/js/api.js b/client/js/api.js
index 511a82e..b4ddccc 100644
--- a/client/js/api.js
+++ b/client/js/api.js
@@ -2,7 +2,7 @@
 
 import { showDiv, hideDiv } from './helpers.js';
 import { ConsoleLog } from './app_functions.js';
-import { showAlertModal, showLoader, hideLoader } from './overlays.js';
+import { showAlertModal, showLoader, hideOverlay } from './overlays.js';
 
 const api_base = '';
 
@@ -30,7 +30,7 @@ export const get = async (endpoint, params, noLoader) => {
 			msg: "Failed to fetch. Please check your network connection.",
 		};
 	}
-	if (!noLoader) hideLoader();
+	if (!noLoader) hideOverlay();
 
 	if (data.status !== 'success') {
 		showAlertModal(errorMessages[data.msg] || data.msg);
diff --git a/client/js/journeyView.js b/client/js/journeyView.js
index a057d2c..ce11df5 100644
--- a/client/js/journeyView.js
+++ b/client/js/journeyView.js
@@ -13,7 +13,7 @@ const remarksModalTemplate = (type, remarks) => html`
 		${remarks.map(element => html`
 			<tr>
 			<td>
-				<span class="remark ${type}"></span>
+				<span class="remark icon-${type}"></span>
 				<span>${element.text}</span>
 			</td>
 			</tr>
@@ -32,7 +32,7 @@ const travelynxTemplate = (element) => {
 		}
 
 		return html`
-			<a class="travelynx" href="https://travelynx.de/s/${element.departure.point.stop.id}?train=${trainName}"></a>
+			<a class="link icon-travelynx" href="https://travelynx.de/s/${element.departure.point.stop.id}?train=${trainName}"></a>
 		`;
 	}
 }
@@ -41,7 +41,7 @@ const showRemarksModal = (type, remarks) => {
 	showModal(t('remarks'), remarksModalTemplate(type, remarks));
 };
 const remarksTemplate = ([type, remarks]) => !!remarks.length ? html`
-	<a class="showremarks ${type}" @click=${() => showRemarksModal(type, remarks)}></a>
+	<a class="link icon-${type}" @click=${() => showRemarksModal(type, remarks)}></a>
 ` : '';
 
 const legTemplate = (element) => {
@@ -133,10 +133,10 @@ const journeyTemplate = (data, requestId, journeyId) => {
 	return html`
 		<div class="journey">
 			<header>
-				<a class="back" href="#/${requestId}"></a>
+				<a class="back icon-back" href="#/${requestId}"></a>
 				<h2>${parseName(departure.point)} → ${parseName(arrival.point)}</h2>
 				<p><b>${t('duration')}: ${formatDuration(duration)} | ${t('changes')}: ${changes-1} |  ${t('date')}: ${parseDateTime(departure.plannedTime, 'date')}</b></p>
-				<a class="reload" title="{{LABEL_RELOAD}}" @click=${() => reloadJourney(requestId, journeyId)}>{{LABEL_RELOAD}}</a>
+				<a class="reload icon-reload" title="{{LABEL_RELOAD}}" @click=${() => reloadJourney(requestId, journeyId)}>{{LABEL_RELOAD}}</a>
 			</header>
 
 			${legs.map(legTemplate)}
diff --git a/client/js/journeysView.js b/client/js/journeysView.js
index af26f5f..8849a45 100644
--- a/client/js/journeysView.js
+++ b/client/js/journeysView.js
@@ -14,7 +14,7 @@ let data;
 const journeysTemplate = (data) => html`
 	<div class="journeys">
 		<header id="header">
-			<a class="back" href="#/" title="${t('back')}">${t('back')}</a>
+			<a class="back icon-back" href="#/" title="${t('back')}">${t('back')}</a>
 			<h3>${t('from')}: ${parseName(data.params.fromPoint)}</h3>
 			<h3>${t('to')}: ${parseName(data.params.toPoint)}</h3>
 		</header>
@@ -24,7 +24,7 @@ const journeysTemplate = (data) => html`
 				<canvas id="canvas"></canvas>
 			</div>
 		` : html`
-			<a class="loadMore flipped" title="{{LABEL_EARLIER}}" @click=${() => moreJourneys(data.reqId, 'earlier')}"></a>
+			<a class="loadMore icon-arrow2 flipped" title="{{LABEL_EARLIER}}" @click=${() => moreJourneys(data.reqId, 'earlier')}"></a>
 
 			<table>
 				<thead>
@@ -42,7 +42,7 @@ const journeysTemplate = (data) => html`
 				</tbody>
 			</table>
 
-			<a class="loadMore" title="{{LABEL_LATER}}" @click=${() => moreJourneys(data.reqId, "later")}></a>
+			<a class="loadMore icon-arrow2" title="{{LABEL_LATER}}" @click=${() => moreJourneys(data.reqId, "later")}></a>
 		`}
 	</div>
 `;
@@ -77,7 +77,7 @@ const journeyOverviewTemplate = (data, key) => {
 		<td title="${changesDuration > 0 ? 'Davon '+formatDuration(changesDuration)+' Umstiegsdauer' : ''}"><span>${formatDuration(duration)}</span></td>
 		<td><span>${changes-1}</span></td>
 		<td><span>${products.join(', ')}</span></td>
-		<td><a class="details-button"></a></td>
+		<td><a class="details-button icon-arrow3"></a></td>
 	</tr>`;
 }
 
diff --git a/client/js/overlays.js b/client/js/overlays.js
index 226dda7..6566158 100644
--- a/client/js/overlays.js
+++ b/client/js/overlays.js
@@ -7,9 +7,9 @@ export const showAlertModal = (text) => {
 	showDiv('overlay');
 	render(html`
 		<div class="modal">
-			<div class="alert">
+			<div class="box alert">
 				${text}
-				<div class="dismiss" @click=${() => hideDiv('overlay')}>OK</div>
+				<div class="dismiss" @click=${hideOverlay}>OK</div>
 			</div>
 		</div>
 	`, ElementById('overlay'));
@@ -19,9 +19,9 @@ export const showSelectModal = (content) => {
 	showDiv('overlay');
 	render(html`
 		<div class="modal">
-			<div class="select-box">
+			<div class="box select">
 				${content}
-				<a @click=${hideLoader}>Close</a>
+				<a @click=${hideOverlay}>Close</a>
 			</div>
 		</div>
 	`, ElementById('overlay'));
@@ -51,4 +51,4 @@ export const showLoader = () => {
 	`, document.getElementById('overlay'));
 };
 
-export const hideLoader = () => hideDiv('overlay');
+export const hideOverlay = () => hideDiv('overlay');
diff --git a/client/js/searchView.js b/client/js/searchView.js
index 324253a..2065285 100644
--- a/client/js/searchView.js
+++ b/client/js/searchView.js
@@ -6,7 +6,7 @@ import { dataStorage } from './app.js';
 import { get } from './api.js';
 import { go } from './router.js';
 import { html, render } from './lit-html.js';
-import { showAlertModal, showSelectModal, showLoader, hideLoader} from './overlays.js';
+import { showAlertModal, showSelectModal, showLoader, hideOverlay} from './overlays.js';
 import { showSettings } from './settingsView.js';
 
 
@@ -25,15 +25,15 @@ const searchTemplate = (journeysHistory) => html`
 	<div class="center">
 		<form class="search" onsubmit="return false;">
 			<div class="title">
-				<div class="logo"></div>
+				<div class="logo icon-logo"></div>
 				<h1>Öffisearch</h1>
 			</div>
 			<label for="from">${t('from')}:</label>
-			<input type="text" name="from" id="from" placeholder="${t('from')}" value="${fromValue}" autocomplete="off" @keyup=${loadSuggestions} @focus=${startTyping} @blur=${stopTyping} @keypress=${onKeypress} required>
+			<input type="text" name="from" id="from" placeholder="${t('from')}" value="${fromValue}" autocomplete="off" @focus=${startTyping} @blur=${stopTyping} @keydown=${onKeypress} required>
 			<div class="suggestions" id="fromSuggestions"></div>
 
 			<label for="to">${t('to')}:</label>
-			<input type="text" name="to" id="to" placeholder="${t('to')}" value="${toValue}" autocomplete="off" @keyup=${loadSuggestions} @focus=${startTyping} @blur=${stopTyping} @keypress=${onKeypress} required>
+			<input type="text" name="to" id="to" placeholder="${t('to')}" value="${toValue}" autocomplete="off" @focus=${startTyping} @blur=${stopTyping} @keydown=${onKeypress} required>
 			<div class="suggestions" id="toSuggestions"></div>
 
 			<div class="row">
@@ -44,10 +44,10 @@ const searchTemplate = (journeysHistory) => html`
 				</label>
 
 				<label for="date">${t('date')}:</label>
-				<input type="date" name="date" id="date" value="${dateValue}" placeholder="${t('date')}" pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}" @keypress=${onKeypressSubmit} required>
+				<input type="date" name="date" id="date" value="${dateValue}" placeholder="${t('date')}" pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}" @keydown=${onKeypressSubmit} required>
 
 				<label for="time"><br>${t('time')}:</label>
-				<input type="time" name="time" id="time" value="${timeValue}" placeholder="${t('time')}" pattern="[0-9]{2}:[0-9]{2}" @keypress=${onKeypressSubmit} required>
+				<input type="time" name="time" id="time" value="${timeValue}" placeholder="${t('time')}" pattern="[0-9]{2}:[0-9]{2}" @keydown=${onKeypressSubmit} required>
 			</div>
 
 			<div class="row">
@@ -55,60 +55,60 @@ const searchTemplate = (journeysHistory) => html`
 				<div class="selector">
 					${dataStorage.settings.advancedSelection ? html`
 					<input type="checkbox" id="nationalExp" name="nationalExp" checked>
-					<label for="nationalExp" title="${t('iceonly')}">${t('iceonly')}<br></label>
+					<label class="icon-ice" for="nationalExp" title="${t('iceonly')}">${t('iceonly')}<br></label>
 
 					<input type="checkbox" id="national" name="national" checked>
-					<label class="ic" for="national" title="${t('iconly')}">${t('iconly')}<br></label>
+					<label class="icon-ic" for="national" title="${t('iconly')}">${t('iconly')}<br></label>
 					` : html`
 					<input type="checkbox" id="national" name="national" checked>
-					<label class="ic-ice" for="national" title="${t('longdistancetrain')}">${t('longdistancetrain')}<br></label>
+					<label class="icon-icice" for="national" title="${t('longdistancetrain')}">${t('longdistancetrain')}<br></label>
 					`}
 
 					${dataStorage.settings.advancedSelection ? html`
 					<input type="checkbox" id="regionalExp" name="regionalExp" checked>
-					<label for="regionalExp" title="${t('dzug')}">${t('dzug')}<br></label>
+					<label class="icon-dzug" for="regionalExp" title="${t('dzug')}">${t('dzug')}<br></label>
 
 					<input type="checkbox" id="regional" name="regional" checked>
-					<label for="regional" title="${t('regionaltrain')}">${t('regionaltrain')}<br></label>
+					<label class="icon-regional" for="regional" title="${t('regionaltrain')}">${t('regionaltrain')}<br></label>
 					` : html`
 					<input type="checkbox" id="regional" name="regional" checked>
-					<label for="regional" title="${t('regionaltrain')}">${t('regionaltrain')}<br></label>
+					<label class="icon-regional" for="regional" title="${t('regionaltrain')}">${t('regionaltrain')}<br></label>
 					`}
 
 					<input type="checkbox" id="suburban" name="suburban" checked>
-					<label for="suburban" title="${t('suburbantrain')}">${t('suburbantrain')}<br></label>
+					<label class="icon-suburban" for="suburban" title="${t('suburbantrain')}">${t('suburbantrain')}<br></label>
 
 					<input type="checkbox" id="subway" name="subway" checked>
-					<label for="subway" title="${t('subway')}">${t('subway')}<br></label>
+					<label class="icon-subway" for="subway" title="${t('subway')}">${t('subway')}<br></label>
 
 					<input type="checkbox" id="tram" name="tram" checked>
-					<label for="tram" title="${t('tram')}">${t('tram')}<br></label>
+					<label class="icon-tram" for="tram" title="${t('tram')}">${t('tram')}<br></label>
 
 					<input type="checkbox" id="bus" name="bus" checked>
-					<label for="bus" title="${t('bus')}">${t('bus')}<br></label>
+					<label class="icon-bus" for="bus" title="${t('bus')}">${t('bus')}<br></label>
 
 					<input type="checkbox" id="ferry" name="ferry" checked>
-					<label for="ferry" title="${t('ferry')}">${t('ferry')}<br></label>
+					<label class="icon-ferry" for="ferry" title="${t('ferry')}">${t('ferry')}<br></label>
 
 					<input type="checkbox" id="taxi" name="taxi" checked>
-					<label for="taxi" title="${t('taxi')}">${t('taxi')}<br></label>
+					<label class="icon-taxi" for="taxi" title="${t('taxi')}">${t('taxi')}<br></label>
 				</div>
 
 				<span class="hidden">{{LABEL_ACCESSIBILITY}}:</span>
 				<div class="selector">
 					<input type="radio" id="accessibilityNone" name="accessibility" value="none" ?checked=${dataStorage.settings.accessibility === "none"}>
-					<label for="accessibilityNone" title="{{LABEL_ACCESSIBILITY_NONE}}">{{LABEL_ACCESSIBILITY_NONE}}<br></label>
+					<label class="icon-walk-fast" for="accessibilityNone" title="{{LABEL_ACCESSIBILITY_NONE}}">{{LABEL_ACCESSIBILITY_NONE}}<br></label>
 
 					<input type="radio" id="accessibilityPartial" name="accessibility" value="partial" ?checked=${dataStorage.settings.accessibility === "partial"}>
-					<label for="accessibilityPartial" title="{{LABEL_ACCESSIBILITY_PARTIAL}}">{{LABEL_ACCESSIBILITY_PARTIAL}}<br></label>
+					<label class="icon-walk" for="accessibilityPartial" title="{{LABEL_ACCESSIBILITY_PARTIAL}}">{{LABEL_ACCESSIBILITY_PARTIAL}}<br></label>
 
 					<input type="radio" id="accessibilityComplete" name="accessibility" value="complete" ?checked=${dataStorage.settings.accessibility === "complete"}>
-					<label for="accessibilityComplete" title="{{LABEL_ACCESSIBILITY_FULL}}">{{LABEL_ACCESSIBILITY_FULL}}<br></label>
+					<label class="icon-weelchair" for="accessibilityComplete" title="{{LABEL_ACCESSIBILITY_FULL}}">{{LABEL_ACCESSIBILITY_FULL}}<br></label>
 				</div>
 
 				<div class="selector"  >
-					<div class="btn swap" title="${t('swap')}" @click=${swapFromTo}></div>
-					<div class="btn settings" title="${t('settings')}" @click=${showSettings}></div>
+					<div class="btn icon-swap" title="${t('swap')}" @click=${swapFromTo}></div>
+					<div class="btn icon-settings" title="${t('settings')}" @click=${showSettings}></div>
 				</div>
 
 				<div class="button btn go" tabindex="0" id="go" @click=${search}>
@@ -120,7 +120,7 @@ const searchTemplate = (journeysHistory) => html`
 
 		${journeysHistory.length ? html`
 			<input type="checkbox" id="btn-history" class="btn history hidden">
-			<label for="btn-history"></label>
+			<label for="btn-history" class="icon-arrow2"></label>
 			${journeysHistoryTemplate(journeysHistory)}
 		` : ''}
 
@@ -136,7 +136,7 @@ const journeysHistoryTemplate = (journeysHistory) => html`
 				<small>${t('from')}:</small><br>
 				${parseName(element.fromPoint)}
 			</div>
-			<div class="history arrow"></div>
+			<div class="history arrow icon-arrow1"></div>
 			<div class="history to">
 				<small>${t('to')}:</small><br>
 				${parseName(element.toPoint)}
@@ -149,10 +149,10 @@ const journeysHistoryTemplate = (journeysHistory) => html`
 const journeysHistoryAction = (journeysHistory, element) => {
 	ConsoleLog(element);
 	showSelectModal(html`
-		<a @click=${() => {setFromHistory(journeysHistory.length - 1 - journeysHistory.indexOf(element));hideLoader()}}>${t('setfromto')}</a>
-		<a @click=${() => {go("/"+element.reqId);hideLoader();}}>${t('journeyoverview')}</a>
+		<a @click=${() => {setFromHistory(journeysHistory.length - 1 - journeysHistory.indexOf(element));hideOverlay()}}>${t('setfromto')}</a>
+		<a @click=${() => {go("/"+element.reqId);hideOverlay();}}>${t('journeyoverview')}</a>
 		${element.journeyId === '' ? '' : html`
-			<a @click=${() => {go("/"+element.reqId+"/"+element.journeyId);hideLoader();}}>${t('lastjourney')}</a>
+			<a @click=${() => {go("/"+element.reqId+"/"+element.journeyId);hideOverlay();}}>${t('lastjourney')}</a>
 		`}
 	`);
 };
@@ -411,12 +411,64 @@ const stopMouseOverSuggestions = (e) => {
 };
 
 const onKeypress = (e) => {
-  if (e.which == 13 || e.keyCode == 13) { // enter
-    document.querySelector(`#${e.target.id}Suggestions>.suggestionsbox>:first-child`).click();
-    if (e.target.id === 'to') ElementById('go').click();
-    return false;
-  }
-  return true;
+	let which = e.which || e.keyCode;
+
+	let forbiddeKeys = [13, 38, 40];
+
+	if (!forbiddeKeys.includes(which)) {
+		loadSuggestions(e, e.target.id);
+	}
+
+	if (which == 13) { // enter
+		if (!ElementById('selected')) {
+			document.querySelector(`#${e.target.id}Suggestions>.suggestionsbox>:first-child`).click();
+		} else {
+			let elem = ElementById('selected')
+			elem.id = '';
+			elem.click();
+		}
+
+		if (e.target.id === 'to') ElementById('go').click();
+		return false;
+	}
+
+	if (which == 40) { // keydown
+		if (!ElementById('selected')) {
+			document.querySelector(`#${e.target.id}Suggestions>.suggestionsbox>:first-child`).id = 'selected';
+		} else {
+			let currElem = ElementById('selected');
+			let nextElem = currElem.nextElementSibling;
+
+			if (nextElem == null) {
+				nextElem = document.querySelector(`#${e.target.id}Suggestions>.suggestionsbox>:first-child`).id = 'selected';
+			}
+
+			currElem.id = '';
+			nextElem.id = 'selected';
+		}
+
+		return false;
+	}
+
+	if (which == 38) { // keydown
+		if (!ElementById('selected')) {
+			document.querySelector(`#${e.target.id}Suggestions>.suggestionsbox>:first-child`).id = 'selected';
+		} else {
+			let currElem = ElementById('selected');
+			let prevElem = currElem.previousElementSibling;
+
+			if (prevElem == null) {
+				prevElem = document.querySelector(`#${e.target.id}Suggestions>.suggestionsbox>:last-child`).id = 'selected';
+			}
+
+			currElem.id = '';
+			prevElem.id = 'selected';
+		}
+
+		return false;
+	}
+
+	return true;
 };
 
 const onKeypressSubmit = (e) => {
diff --git a/client/style.css b/client/style.css
index 3c7c333..872c029 100755
--- a/client/style.css
+++ b/client/style.css
@@ -6,9 +6,12 @@ font-face {
 	font-style: normal;
 }
 
-a {
-	color: inherit;
+
+* {
+	box-sizing: border-box;
+	border-collapse: collapse;
 }
+
 html, body {
 	margin: 0;
 	font-family: Varela, sans-serif;
@@ -17,10 +20,9 @@ html, body {
 	overflow-x: hidden;
 	overflow-y: visible;
 }
-
-* {
-	box-sizing: border-box;
-	border-collapse: collapse;
+ 
+a {
+	color: inherit;
 }
 
 header {
@@ -55,7 +57,6 @@ header {
 	top: 17px;
 	width: 32px;
 	height: 32px;
-	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>');
 	user-select: none;
 }
 
@@ -66,7 +67,6 @@ header {
 	top: 17px;
 	width: 32px;
 	height: 32px;
-	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>');
 	user-select: none;
 }
 
@@ -87,7 +87,6 @@ header {
 
 label[for=btn-history] {
 	cursor: pointer;
-	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>');
 	border-radius: 100%;
 	height: 48px;
 	width: 48px;
@@ -104,7 +103,6 @@ label[for=btn-history] {
 
 .loadMore {
 	cursor: pointer;
-	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>');
 	border-radius: 100%;
 	height: 48px;
 	width: 48px;
@@ -224,7 +222,6 @@ tbody tr:hover td {
 
 
 	input[id=nationalExp] + label[for=nationalExp] {
-		content: url('./img/ice.svg');
 		background: #d3d3d3;
 	}
 
@@ -232,16 +229,7 @@ tbody tr:hover td {
 		background: #fff;
 	}
 
-	.ic {
-		content: url('./img/ic.svg');
-	}
-
-	.ic-ice {
-		content: url('./img/ice_ic.svg');
-	}
-
 	input[id=regional] + label[for=regional] {
-		content: url('./img/nv.svg');
 		background: #d3d3d3;
 	}
 
@@ -251,7 +239,6 @@ tbody tr:hover td {
 
 
 	input[id=regionalExp] + label[for=regionalExp] {
-		content: url('./img/d.svg');
 		background: #d3d3d3;
 	}
 
@@ -260,7 +247,6 @@ tbody tr:hover td {
 	}
 
 	input[id=suburban] + label[for=suburban] {
-		content: url('./img/s.svg');
 		background: #d3d3d3;
 	}
 
@@ -270,7 +256,6 @@ tbody tr:hover td {
 
 
 	input[id=subway] + label[for=subway] {
-		content: url('./img/u.svg');
 		background: #d3d3d3;
 	}
 
@@ -280,7 +265,6 @@ tbody tr:hover td {
 
 
 	input[id=tram] + label[for=tram] {
-		content: url('./img/tram.svg');
 		background: #d3d3d3;
 	}
 
@@ -290,7 +274,6 @@ tbody tr:hover td {
 
 
 	input[id=bus] + label[for=bus] {
-		content: url('./img/bus.svg');
 		background: #d3d3d3;
 	}
 
@@ -300,7 +283,6 @@ tbody tr:hover td {
 
 
 	input[id=ferry] + label[for=ferry] {
-		content: url('./img/ferry.svg');
 		background: #d3d3d3;
 	}
 
@@ -310,7 +292,6 @@ tbody tr:hover td {
 
 
 	input[id=taxi] + label[for=taxi] {
-		content: url('./img/taxi.svg');
 		background: #d3d3d3;
 	}
 
@@ -321,7 +302,6 @@ tbody tr:hover td {
 
 
 	input[id=accessibilityNone] + label[for=accessibilityNone] {
-		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>');
 		background: #d3d3d3;
 	}
 
@@ -331,7 +311,6 @@ tbody tr:hover td {
 
 
 	input[id=accessibilityPartial] + label[for=accessibilityPartial] {
-		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>');
 		background: #d3d3d3;
 	}
 
@@ -341,7 +320,6 @@ tbody tr:hover td {
 
 
 	input[id=accessibilityComplete] + label[for=accessibilityComplete] {
-		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>');
 		background: #d3d3d3;
 	}
 
@@ -458,18 +436,9 @@ tbody tr:hover td {
 		height: 50px;
 		margin: 0;
 		padding: 5px 5px 2px 6px;
-		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>')
 	}
 }
 
-.search .btn.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>');
-}
-
-.search .btn.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>');
-}
-
 .search .btn.go {
 	font-size: 1.5em;
 	margin-left: 5px;
@@ -510,7 +479,6 @@ tbody tr:hover td {
 }
 
 .journeys a.details-button {
-	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>');
 	height: 30px;
 	padding: 0;
 }
@@ -746,7 +714,6 @@ tbody tr:hover td {
 	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;
@@ -798,6 +765,7 @@ tbody tr:hover td {
 }
 
 form>div.history {
+	margin-top: 8px;
 	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .4);
 	border-radius: 5px;
 	overflow: hidden;
@@ -830,7 +798,6 @@ form>div.history {
 }
 
 .history.arrow {
-	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>');
 	width: 25px;
 }
 
@@ -842,7 +809,7 @@ form>div.history {
 	display: flex;
 }
 
-.alert {
+.box {
 	margin: auto;
 	border-radius: 4px;
 	background-color: white;
@@ -870,17 +837,8 @@ form>div.history {
 	cursor: pointer;
 }
 
-.select-box {
-	margin: auto;
-	border-radius: 4px;
-	background-color: white;
-	width: fit-content;
-	width: -moz-fit-content;
-	padding: 15px;
-	box-shadow: 0 1px 4px rgba(0, 0, 0, .6);
-}
 
-.select-box a {
+.select a {
 	display: block;
 	text-decoration: none;
 	border-radius: 4px;
@@ -894,52 +852,31 @@ form>div.history {
 	transition: background-color 300ms;
 }
 
-.select-box a:first-child {
+.select a:first-child {
 	margin-top: 0px;
 }
 
-.select-box a:hover {
+.select a:hover {
 	background-color: rgba(70, 100, 255, .8);
 	cursor: pointer;
 }
 
-.travelynx {
-	content: url('./img/travelynx.svg');
+.journey .link {
 	vertical-align: bottom;
-	max-inline-size: 22px;
 	cursor: pointer;
+	max-inline-size: 22px;
 }
 
-.showremarks {
-	vertical-align: bottom;
-	cursor: pointer;
-	max-inline-size: 22px;
-}
 .remark {
 	vertical-align: middle;
 }
-.showremarks.hint,
-.remark.hint {
-	content: url("../img/info-24px.svg");
-}
-.showremarks.status,
-.remark.status {
-	content: url("../img/warning-24px.svg");
-}
-.showremarks.other,
-.remark.other {
-	content: url("../img/help-24px.svg");
-}
+
 .remarks td {
 	margin: 0 10px;
 	text-align: left;
 	display: block;
 }
-/*.remarks {
-	display: none;
-	position: absolute;
-	z-index: 1;
-}*/
+
 .remarks {
 	/*background: #000000d0;*/
 	border: 1px solid #ddd;
@@ -948,7 +885,112 @@ form>div.history {
 	margin: 0;
 	box-shadow: none;
 }
-/*.showremarks:hover+.remarks {
-	display: inline-block;
-}*/
 
+.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');
+}
+
+
+.icon-ice {
+	content: url('./img/ice.svg');
+}
+
+.icon-ic {
+	content: url('./img/ic.svg');
+}
+
+.icon-icice {
+	content: url('./img/ice_ic.svg');
+}
+
+.icon-dzug {
+	content: url('./img/dzug.svg');
+}
+
+.icon-regional {
+	content: url('./img/nv.svg');
+}
+
+.icon-suburban {
+	content: url('./img/suburban.svg');
+}
+
+.icon-subway {
+	content: url('./img/subway.svg');
+}
+
+.icon-tram {
+	content: url('./img/tram.svg');
+}
+
+.icon-bus {
+	content: url('./img/bus.svg');
+}
+
+.icon-ferry {
+	content: url('./img/ferry.svg');
+}
+
+.icon-taxi {
+	content: url('./img/taxi.svg');
+}
+
+#selected {
+	background-color: #bfbfbf !important;
+}
\ No newline at end of file