From 0e27042c8c3e564c20329a01ce1da21a781efc9a Mon Sep 17 00:00:00 2001
From: soraefir <soraefir+git@pm.me>
Date: Wed, 19 Jul 2023 12:29:44 +0200
Subject: [PATCH] Prettier

---
 .drone.yml           |    2 +-
 .gitignore           |    1 +
 README.md            |    1 -
 docker-compose.yml   |   39 +-
 package.json         |    2 +
 public/css/index.css | 1814 +++++++++++++++++++++++++++++-------------
 public/js/main.js    |  832 ++++++++++---------
 router/api.js        |  126 +--
 server.js            |   52 +-
 yarn.lock            |   12 +
 10 files changed, 1855 insertions(+), 1026 deletions(-)

diff --git a/.drone.yml b/.drone.yml
index 05f45ab..bb25c47 100644
--- a/.drone.yml
+++ b/.drone.yml
@@ -7,4 +7,4 @@ pipeline:
       - docker-compose -p otm up -d --force-recreate --build
     when:
       event: push
-      branch: [master]
\ No newline at end of file
+      branch: [master]
diff --git a/.gitignore b/.gitignore
index 38665e5..4896b63 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,4 +1,5 @@
 package-lock.json
+yarn-error.log
 node_modules/
 auth/
 db/
\ No newline at end of file
diff --git a/README.md b/README.md
index 9e69824..3091dfa 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,3 @@
 # Open Travel Map
 
 OSM based travel planning app, relies on nodeJS, powered by Fastify, Vue and Pug. A "trip" is held in a JSON with many options for additional information.
-
diff --git a/docker-compose.yml b/docker-compose.yml
index f919edb..cc6e70f 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -1,26 +1,25 @@
 version: "3.7"
 networks:
-        external:
-                external: true
+  external:
+    external: true
 
 volumes:
-        otm_db:
-
+  otm_db:
 
 services:
-        otm:
-                build: ./
-                container_name: otm
-                networks:
-                    - external
-                volumes: 
-                    - otm_db:/usr/src/app/db
-                labels:
-                    - "traefik.enable=true"
-                    - "traefik.http.routers.otm.entrypoints=web-secure"
-                    - "traefik.http.routers.otm.rule=Host(`otm.helcel.net`)"
-                    - "traefik.http.routers.otm.tls=true"
-                    - "traefik.http.services.otm.loadbalancer.server.port=8080"
-                    - "traefik.http.routers.otm.middlewares=cors@file"
-                    - "traefik.docker.network=external"
-                restart: always
\ No newline at end of file
+  otm:
+    build: ./
+    container_name: otm
+    networks:
+      - external
+    volumes:
+      - otm_db:/usr/src/app/db
+    labels:
+      - "traefik.enable=true"
+      - "traefik.http.routers.otm.entrypoints=web-secure"
+      - "traefik.http.routers.otm.rule=Host(`otm.helcel.net`)"
+      - "traefik.http.routers.otm.tls=true"
+      - "traefik.http.services.otm.loadbalancer.server.port=8080"
+      - "traefik.http.routers.otm.middlewares=cors@file"
+      - "traefik.docker.network=external"
+    restart: always
diff --git a/package.json b/package.json
index 3c20929..b5c1012 100644
--- a/package.json
+++ b/package.json
@@ -18,9 +18,11 @@
     "@fastify/leveldb": "^5.0.1",
     "@fastify/static": "^6.10.2",
     "@fastify/view": "^7.4.1",
+    "@prettier/plugin-pug": "^2.5.1",
     "axios": "^1.4.0",
     "fastify": "^4.18.0",
     "nodemon": "^2.0.22",
+    "prettier": "^3.0.0",
     "pug": "^3.0.2"
   }
 }
diff --git a/public/css/index.css b/public/css/index.css
index 08256e0..a04cbc2 100644
--- a/public/css/index.css
+++ b/public/css/index.css
@@ -8,198 +8,254 @@
  *  BACKGROUND
  */
 .bg-primary {
-  background-color: #03a9f4; }
+  background-color: #03a9f4;
+}
 
 .bg-dark {
-  background-color: #18232f; }
+  background-color: #18232f;
+}
 
 .bg-secondary {
-  background-color: #e91e63; }
+  background-color: #e91e63;
+}
 
 .bg-white {
-  background-color: #fff; }
+  background-color: #fff;
+}
 
 .bg-success {
-  background-color: #4caf50; }
+  background-color: #4caf50;
+}
 
 .bg-info {
-  background-color: #5bc0de; }
+  background-color: #5bc0de;
+}
 
 .bg-warning {
-  background-color: #f0ad4e; }
+  background-color: #f0ad4e;
+}
 
 .bg-error {
-  background-color: #e74c3c; }
+  background-color: #e74c3c;
+}
 
 .bg-gray {
-  background-color: #969da6; }
+  background-color: #969da6;
+}
 
 .bg-gray-light {
-  background-color: #eceff1; }
+  background-color: #eceff1;
+}
 
 /**
  *  BORDER
  */
 .border {
-  border: 1px solid #d5d9db; }
+  border: 1px solid #d5d9db;
+}
 
 .border-bottom {
-  border-bottom: 1px solid #d5d9db; }
+  border-bottom: 1px solid #d5d9db;
+}
 
 .border-left {
-  border-left: 1px solid #d5d9db; }
+  border-left: 1px solid #d5d9db;
+}
 
 .border-right {
-  border-right: 1px solid #d5d9db; }
+  border-right: 1px solid #d5d9db;
+}
 
 .border-top {
-  border-top: 1px solid #d5d9db; }
+  border-top: 1px solid #d5d9db;
+}
 
 /**
  *  ALIGNERS
  */
 .aligner {
-  display: flex; }
+  display: flex;
+}
 
 .aligner--spaceBetween {
   justify-content: space-between;
-  width: 100%; }
+  width: 100%;
+}
 
 .aligner--spaceAround {
   justify-content: space-around;
-  width: 100%; }
+  width: 100%;
+}
 
 .aligner--centerVertical {
-  align-items: center; }
+  align-items: center;
+}
 
 .aligner--centerHoritzontal {
-  justify-content: center; }
+  justify-content: center;
+}
 
 .aligner--contentStart {
-  justify-content: flex-start; }
+  justify-content: flex-start;
+}
 
 .aligner--contentEnd {
-  justify-content: flex-end; }
+  justify-content: flex-end;
+}
 
 .aligner--itemTop {
-  align-self: flex-start; }
+  align-self: flex-start;
+}
 
 .aligner--itemBottom {
-  align-self: flex-end; }
+  align-self: flex-end;
+}
 
 .flex-grow,
 .aligner--grow {
-  flex-grow: 1; }
+  flex-grow: 1;
+}
 
 /**
  *  FLOATS
  */
 .fleft {
-  float: left; }
+  float: left;
+}
 
 .fright {
-  float: right; }
+  float: right;
+}
 
 .clearfix ::after {
   clear: both;
-  content: '';
-  display: table; }
+  content: "";
+  display: table;
+}
 
 /**
  *  MARGINS
  */
 .m-xsmall {
-  margin: 4px; }
+  margin: 4px;
+}
 
 .mb-xsmall {
-  margin-bottom: 4px; }
+  margin-bottom: 4px;
+}
 
 .m-small {
-  margin: 8px; }
+  margin: 8px;
+}
 
 .mb-small {
-  margin-bottom: 8px; }
+  margin-bottom: 8px;
+}
 
 .m-medium {
-  margin: 16px; }
+  margin: 16px;
+}
 
 .mb-medium {
-  margin-bottom: 16px; }
+  margin-bottom: 16px;
+}
 
 .m-big {
-  margin: 36px; }
+  margin: 36px;
+}
 
 .mb-big {
-  margin-bottom: 36px; }
+  margin-bottom: 36px;
+}
 
 .m-huge {
-  margin: 48px; }
+  margin: 48px;
+}
 
 .mb-huge {
-  margin-bottom: 48px; }
+  margin-bottom: 48px;
+}
 
 .m-none {
-  margin: 0 !important; }
+  margin: 0 !important;
+}
 
 /**
  *  PADDINGS
  */
 .p-small {
-  padding: 4px; }
+  padding: 4px;
+}
 
 .pb-small {
-  padding-bottom: 4px; }
+  padding-bottom: 4px;
+}
 
 .p-medium {
-  padding: 8px; }
+  padding: 8px;
+}
 
 .pb-medium {
-  padding-bottom: 8px; }
+  padding-bottom: 8px;
+}
 
 .p-big {
-  padding: 16px; }
+  padding: 16px;
+}
 
 .pb-big {
-  padding-bottom: 16px; }
+  padding-bottom: 16px;
+}
 
 .p-huge {
-  padding: 36px; }
+  padding: 36px;
+}
 
 .pb-huge {
-  padding-bottom: 36px; }
+  padding-bottom: 36px;
+}
 
 /**
  *  OTHERS
  */
 .no-wrap {
-  white-space: nowrap; }
+  white-space: nowrap;
+}
 
 .overflow-hidden {
-  overflow: hidden; }
+  overflow: hidden;
+}
 
 .opacity-low {
-  opacity: .5; }
+  opacity: 0.5;
+}
 
 .rounded-corners {
-  border-radius: 5px; }
+  border-radius: 5px;
+}
 
 .rounded {
-  border-radius: 100%; }
+  border-radius: 100%;
+}
 
 /**
  * LAYOUT
  */
 .section {
   padding-bottom: 36px;
-  padding-top: 36px; }
+  padding-top: 36px;
+}
 
 @media (min-width: 768px) {
   .section {
     padding-bottom: 72px;
-    padding-top: 72px; } }
+    padding-top: 72px;
+  }
+}
 
 .section + .section {
-  padding-top: 0; }
+  padding-top: 0;
+}
 
 .container {
   background-color: transparent;
@@ -207,34 +263,43 @@
   max-width: 1380px;
   padding-left: 12px;
   padding-right: 12px;
-  width: 100%; }
+  width: 100%;
+}
 
 @media (min-width: 768px) {
   .container {
     padding-left: 24px;
-    padding-right: 24px; } }
+    padding-right: 24px;
+  }
+}
 
 .container-medium {
   margin: 0 auto;
   max-width: 944px;
   padding-left: 12px;
-  padding-right: 12px; }
+  padding-right: 12px;
+}
 
 @media (min-width: 768px) {
   .container-medium {
     padding-left: 24px;
-    padding-right: 24px; } }
+    padding-right: 24px;
+  }
+}
 
 .container-small {
   margin: 0 auto;
   max-width: 400px;
   padding-left: 12px;
-  padding-right: 12px; }
+  padding-right: 12px;
+}
 
 @media (min-width: 768px) {
   .container-small {
     padding-left: 24px;
-    padding-right: 24px; } }
+    padding-right: 24px;
+  }
+}
 
 /**
  *  TYPOGRAPHY
@@ -244,112 +309,146 @@ body {
   font-family: "Lato", sans-serif;
   font-size: 16px;
   font-weight: 400;
-  line-height: 1.5em; }
+  line-height: 1.5em;
+}
 
 a {
   color: #03a9f4;
-  text-decoration: none; }
+  text-decoration: none;
+}
 
 a:hover {
-  color: rgba(3, 169, 244, 0.8); }
+  color: rgba(3, 169, 244, 0.8);
+}
 
 a:focus {
-  color: #03a9f4; }
+  color: #03a9f4;
+}
 
-.text-huge, .text-big, .text-medium {
-  margin-bottom: 1em; }
+.text-huge,
+.text-big,
+.text-medium {
+  margin-bottom: 1em;
+}
 
 .text-huge {
   font-size: 36px;
-  line-height: 1.3em; }
+  line-height: 1.3em;
+}
 
 .text-big {
   font-size: 24px;
-  line-height: 1.3em; }
+  line-height: 1.3em;
+}
 
 .text-medium {
   font-size: 16px;
-  line-height: 1.5em; }
+  line-height: 1.5em;
+}
 
 .text-small {
   font-size: 12px;
-  line-height: 1.3em; }
+  line-height: 1.3em;
+}
 
 .text-body {
   font-size: 16px;
-  line-height: 1.5em; }
+  line-height: 1.5em;
+}
 
 .text-primary {
-  color: #03a9f4; }
+  color: #03a9f4;
+}
 
 .text-dark {
-  color: #18232f; }
+  color: #18232f;
+}
 
 .text-secondary {
-  color: #e91e63; }
+  color: #e91e63;
+}
 
 .text-white {
-  color: #fff; }
+  color: #fff;
+}
 
 .text-success {
-  color: #4caf50; }
+  color: #4caf50;
+}
 
 .text-info {
-  color: #5bc0de; }
+  color: #5bc0de;
+}
 
 .text-warning {
-  color: #f0ad4e; }
+  color: #f0ad4e;
+}
 
 .text-error {
-  color: #e74c3c; }
+  color: #e74c3c;
+}
 
 .text-gray {
-  color: #969da6; }
+  color: #969da6;
+}
 
 .text-gray-light {
-  color: #eceff1; }
+  color: #eceff1;
+}
 
 .text-light {
-  font-weight: 300; }
+  font-weight: 300;
+}
 
 .text-normal {
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .text-lineThrough {
-  text-decoration: line-through; }
+  text-decoration: line-through;
+}
 
 .text-italic {
-  font-style: italic; }
+  font-style: italic;
+}
 
 .text-underline {
-  text-decoration: underline; }
+  text-decoration: underline;
+}
 
 .text-uppercase {
-  text-transform: uppercase; }
+  text-transform: uppercase;
+}
 
 .text-withSubtitle {
-  margin-bottom: 0 !important; }
+  margin-bottom: 0 !important;
+}
 
 .text-withSubtitle + .text-huge,
 .text-withSubtitle + .text-big,
 .text-withSubtitle + .text-medium,
 .text-withSubtitle + .text-small {
-  margin-top: .5em; }
+  margin-top: 0.5em;
+}
 
 h1,
 h2,
 h3,
 h4 {
-  font-weight: 300; }
+  font-weight: 300;
+}
 
 .text-center {
-  text-align: center; }
+  text-align: center;
+}
 
 .text-right {
-  text-align: right; }
+  text-align: right;
+}
 
 .text-left {
-  text-align: left; }
+  text-align: left;
+}
 
 /**
  *  BADGE
@@ -369,41 +468,51 @@ h4 {
   color: #272727;
   display: inline-block;
   line-height: 1.2em;
-  padding: 8px 16px; }
+  padding: 8px 16px;
+}
 
 .badge--big {
-  font-size: 1.3em; }
+  font-size: 1.3em;
+}
 
 .badge--small {
-  font-size: 0.7em; }
+  font-size: 0.7em;
+}
 
 .badge--primary {
   background-color: #03a9f4;
-  color: #fff; }
+  color: #fff;
+}
 
 .badge--secondary {
   background-color: #e91e63;
-  color: #fff; }
+  color: #fff;
+}
 
 .badge--dark {
   background-color: #18232f;
-  color: #fff; }
+  color: #fff;
+}
 
 .badge--light {
   background-color: #969da6;
-  color: #fff; }
+  color: #fff;
+}
 
 .badge--success {
   background-color: #4caf50;
-  color: #fff; }
+  color: #fff;
+}
 
 .badge--error {
   background-color: #e74c3c;
-  color: #fff; }
+  color: #fff;
+}
 
 .badge--warning {
   background-color: #f0ad4e;
-  color: #fff; }
+  color: #fff;
+}
 
 /**
  *  BUTTON
@@ -418,7 +527,8 @@ h4 {
  */
 button {
   background-color: transparent;
-  cursor: pointer; }
+  cursor: pointer;
+}
 
 .button {
   background-color: #03a9f4;
@@ -435,91 +545,119 @@ button {
   text-align: center;
   text-decoration: none;
   text-transform: uppercase;
-  transition: opacity .2s ease-in-out;
-  white-space: nowrap; }
+  transition: opacity 0.2s ease-in-out;
+  white-space: nowrap;
+}
 
-.button:focus, .button:hover, .button:active {
-  color: #fff; }
+.button:focus,
+.button:hover,
+.button:active {
+  color: #fff;
+}
 
 .button:hover {
   background-color: rgba(3, 169, 244, 0.8);
   color: #fff;
   cursor: pointer;
-  text-decoration: none; }
+  text-decoration: none;
+}
 
 .button:active {
-  opacity: 1; }
+  opacity: 1;
+}
 
 .button:first-child {
-  margin-left: 0; }
+  margin-left: 0;
+}
 
 .button:last-child {
-  margin-right: 0; }
+  margin-right: 0;
+}
 
 .button--big {
   font-size: 24px;
-  padding: 16px 36px; }
+  padding: 16px 36px;
+}
 
 .button--small {
   font-size: 12px;
-  padding: 4px 16px; }
+  padding: 4px 16px;
+}
 
 @media (max-width: 991px) {
   .button--mobileFull {
     margin-left: 0;
     margin-right: 0;
-    width: 100%; } }
+    width: 100%;
+  }
+}
 
 .button--secondary {
   background-color: #e91e63;
-  color: #fff; }
+  color: #fff;
+}
 
 .button--secondary:hover {
   background-color: rgba(233, 30, 99, 0.8);
-  color: #fff; }
+  color: #fff;
+}
 
 .button--white {
   background-color: #fff;
-  color: #03a9f4; }
+  color: #03a9f4;
+}
 
 .button--white:hover {
   background-color: rgba(255, 255, 255, 0.8);
-  color: rgba(3, 169, 244, 0.8); }
+  color: rgba(3, 169, 244, 0.8);
+}
 
 .button--green {
   background-color: #4caf50;
-  color: #fff; }
+  color: #fff;
+}
 
 .button--green:hover {
   background-color: rgba(76, 175, 80, 0.8);
-  color: #fff; }
+  color: #fff;
+}
 
 .button--red {
   background-color: #e74c3c;
-  color: #fff; }
+  color: #fff;
+}
 
 .button--red:hover {
   background-color: rgba(231, 76, 60, 0.8);
-  color: #fff; }
+  color: #fff;
+}
 
 .button--transparent {
   background-color: transparent;
-  color: #03a9f4; }
+  color: #03a9f4;
+}
 
-.button--transparent:active, .button--transparent:hover, .button--transparent:focus {
+.button--transparent:active,
+.button--transparent:hover,
+.button--transparent:focus {
   background-color: transparent;
   color: rgba(3, 169, 244, 0.8);
-  opacity: .8; }
+  opacity: 0.8;
+}
 
 .button--outlined {
   background-color: transparent;
   border: 1px solid #d5d9db;
-  color: #03a9f4; }
+  color: #03a9f4;
+}
 
-.button--outlined:active, .button--outlined:hover, .button--outlined:focus {
+.button--outlined:active,
+.button--outlined:hover,
+.button--outlined:focus {
   background-color: transparent;
   color: rgba(3, 169, 244, 0.8);
-  opacity: .8; }
+  opacity: 0.8;
+}
 
 /**
  *  FORMS
@@ -555,14 +693,17 @@ input,
 textarea {
   -webkit-appearance: none;
   -moz-appearance: none;
-  appearance: none; }
+  appearance: none;
+}
 
 label {
   display: block;
-  font-weight: normal; }
+  font-weight: normal;
+}
 
 input:-webkit-autofill {
-  box-shadow: 0 0 0 1000px #eceff1 inset; }
+  box-shadow: 0 0 0 1000px #eceff1 inset;
+}
 
 .textarea,
 .input,
@@ -573,34 +714,40 @@ input:-webkit-autofill {
   display: inline-block;
   font-weight: normal;
   margin-bottom: 20px;
-  overflow: hidden; }
+  overflow: hidden;
+}
 
 .textarea :focus,
 .input :focus,
 .select :focus {
-  outline: none; }
+  outline: none;
+}
 
 .textarea.has-error,
 .input.has-error,
 .select.has-error {
   background: #eceff1;
   border: 1px solid #e74c3c;
-  margin-bottom: 0; }
+  margin-bottom: 0;
+}
 
 .select {
   background-color: #eceff1;
   display: inline-block;
   margin-right: 16px;
-  position: relative; }
+  position: relative;
+}
 
 .select:last-child {
-  margin-right: 0; }
+  margin-right: 0;
+}
 
 .select-fullWidth {
   display: block;
   margin-left: 0;
   margin-right: 0;
-  width: 100%; }
+  width: 100%;
+}
 
 .select select {
   -webkit-appearance: none;
@@ -617,19 +764,24 @@ input:-webkit-autofill {
   padding: 8px 16px;
   padding-right: 30px;
   transition: background-color 0.2s ease-in-out;
-  width: 100%; }
+  width: 100%;
+}
 
-.select select:active, .select select:focus {
+.select select:active,
+.select select:focus {
   background-color: #fbfbfc;
   border: 0;
-  outline: none; }
+  outline: none;
+}
 
 .select select::-ms-expand {
-  display: none; }
+  display: none;
+}
 
-.select::after, .select::before {
+.select::after,
+.select::before {
   background: #03a9f4;
-  content: '';
+  content: "";
   display: block;
   height: 2px;
   margin-top: 2px;
@@ -638,25 +790,30 @@ input:-webkit-autofill {
   top: 50%;
   -webkit-transform-origin: 1px;
   transform-origin: 1px;
-  width: 10px; }
+  width: 10px;
+}
 
 .select::after {
   -webkit-transform: rotate(-135deg);
-  transform: rotate(-135deg); }
+  transform: rotate(-135deg);
+}
 
 .select::before {
   -webkit-transform: rotate(-45deg);
-  transform: rotate(-45deg); }
+  transform: rotate(-45deg);
+}
 
 .textarea {
   background-color: #eceff1;
-  padding: 0; }
+  padding: 0;
+}
 
 .textarea-fullWidth {
   display: block;
   margin-left: 0;
   margin-right: 0;
-  width: 100%; }
+  width: 100%;
+}
 
 .textarea textarea {
   background: transparent;
@@ -670,57 +827,68 @@ input:-webkit-autofill {
   min-height: 120px;
   padding: 8px 16px;
   transition: background-color 0.2s ease-in-out;
-  width: 100%; }
+  width: 100%;
+}
 
 .textarea textarea::-webkit-input-placeholder {
-  color: #969da6; }
+  color: #969da6;
+}
 
 .textarea textarea::-ms-input-placeholder {
-  color: #969da6; }
+  color: #969da6;
+}
 
 .textarea textarea::placeholder {
-  color: #969da6; }
+  color: #969da6;
+}
 
-.textarea textarea:focus, .textarea textarea:active {
+.textarea textarea:focus,
+.textarea textarea:active {
   background-color: #fbfbfc;
   border: 0;
-  outline: none; }
+  outline: none;
+}
 
 .checkbox {
   margin-bottom: 8px;
-  position: relative; }
+  position: relative;
+}
 
-.checkbox input[type='checkbox'] {
-  display: none; }
+.checkbox input[type="checkbox"] {
+  display: none;
+}
 
-.checkbox input[type='checkbox']:checked + label::after {
-  -webkit-animation: checkboxAndRadioAnimation .25s;
-  animation: checkboxAndRadioAnimation .25s;
-  content: '';
+.checkbox input[type="checkbox"]:checked + label::after {
+  -webkit-animation: checkboxAndRadioAnimation 0.25s;
+  animation: checkboxAndRadioAnimation 0.25s;
+  content: "";
   -webkit-transform: scale(1) rotate(45deg);
-  transform: scale(1) rotate(45deg); }
+  transform: scale(1) rotate(45deg);
+}
 
-.checkbox input[type='checkbox'] + label {
+.checkbox input[type="checkbox"] + label {
   display: block;
   overflow: hidden;
   padding-left: 30px;
   text-overflow: ellipsis;
-  white-space: nowrap; }
+  white-space: nowrap;
+}
 
-.checkbox input[type='checkbox'] + label::before {
+.checkbox input[type="checkbox"] + label::before {
   background-color: #eceff1;
   border: 1px solid #d5d9db;
   border-radius: 3px;
-  content: '';
+  content: "";
   display: inline-block;
   height: 20px;
   left: 0;
   margin-top: -10px;
   position: absolute;
   top: 50%;
-  width: 20px; }
+  width: 20px;
+}
 
-.checkbox input[type='checkbox'] + label::after {
+.checkbox input[type="checkbox"] + label::after {
   border-bottom: 3px solid #03a9f4;
   border-right: 3px solid #03a9f4;
   display: block;
@@ -731,43 +899,49 @@ input:-webkit-autofill {
   position: absolute;
   top: 50%;
   width: 7px;
-  z-index: 1; }
+  z-index: 1;
+}
 
 .radio {
   margin-bottom: 8px;
-  position: relative; }
+  position: relative;
+}
 
-.radio input[type='radio'] {
-  display: none; }
+.radio input[type="radio"] {
+  display: none;
+}
 
-.radio input[type='radio']:checked + label::after {
-  -webkit-animation: checkboxAndRadioAnimation .25s;
-  animation: checkboxAndRadioAnimation .25s;
-  content: '';
+.radio input[type="radio"]:checked + label::after {
+  -webkit-animation: checkboxAndRadioAnimation 0.25s;
+  animation: checkboxAndRadioAnimation 0.25s;
+  content: "";
   -webkit-transform: scale(1) rotate(45deg);
-  transform: scale(1) rotate(45deg); }
+  transform: scale(1) rotate(45deg);
+}
 
-.radio input[type='radio'] + label {
+.radio input[type="radio"] + label {
   display: block;
   overflow: hidden;
   padding-left: 30px;
   text-overflow: ellipsis;
-  white-space: nowrap; }
+  white-space: nowrap;
+}
 
-.radio input[type='radio'] + label::before {
+.radio input[type="radio"] + label::before {
   background-color: #eceff1;
   border: 1px solid #d5d9db;
   border-radius: 20px;
-  content: '';
+  content: "";
   display: inline-block;
   height: 20px;
   left: 0;
   margin-top: -10px;
   position: absolute;
   top: 50%;
-  width: 20px; }
+  width: 20px;
+}
 
-.radio input[type='radio'] + label::after {
+.radio input[type="radio"] + label::after {
   background-color: #03a9f4;
   border-radius: 20px;
   display: block;
@@ -778,47 +952,60 @@ input:-webkit-autofill {
   position: absolute;
   top: 13px;
   width: 10px;
-  z-index: 1; }
+  z-index: 1;
+}
 
 @-webkit-keyframes checkboxAndRadioAnimation {
   0% {
     -webkit-transform: scale(0) rotate(45deg);
-    transform: scale(0) rotate(45deg); }
+    transform: scale(0) rotate(45deg);
+  }
   50% {
     -webkit-transform: scale(1.5) rotate(45deg);
-    transform: scale(1.5) rotate(45deg); }
+    transform: scale(1.5) rotate(45deg);
+  }
   100% {
     -webkit-transform: scale(1) rotate(45deg);
-    transform: scale(1) rotate(45deg); } }
+    transform: scale(1) rotate(45deg);
+  }
+}
 
 @keyframes checkboxAndRadioAnimation {
   0% {
     -webkit-transform: scale(0) rotate(45deg);
-    transform: scale(0) rotate(45deg); }
+    transform: scale(0) rotate(45deg);
+  }
   50% {
     -webkit-transform: scale(1.5) rotate(45deg);
-    transform: scale(1.5) rotate(45deg); }
+    transform: scale(1.5) rotate(45deg);
+  }
   100% {
     -webkit-transform: scale(1) rotate(45deg);
-    transform: scale(1) rotate(45deg); } }
+    transform: scale(1) rotate(45deg);
+  }
+}
 
 .input-invis {
   background-color: transparent !important;
   margin: auto !important;
-  border: 0 !important; }
+  border: 0 !important;
+}
 
 .input {
   background-color: #eceff1;
   margin-right: 10px;
   padding: 0;
-  position: relative; }
+  position: relative;
+}
 
 .input :focus,
 .input :active {
   background-color: #fbfbfc;
-  border-radius: 3px; }
+  border-radius: 3px;
+}
 
-.input input, .input textarea {
+.input input,
+.input textarea {
   background: transparent;
   border: 0;
   box-shadow: none;
@@ -828,23 +1015,29 @@ input:-webkit-autofill {
   margin: 0;
   outline: none;
   padding: 8px 16px;
-  width: 100%; }
+  width: 100%;
+}
 
 .input input::-webkit-input-placeholder {
-  color: #969da6; }
+  color: #969da6;
+}
 
 .input input::-ms-input-placeholder {
-  color: #969da6; }
+  color: #969da6;
+}
 
 .input input::placeholder {
-  color: #969da6; }
+  color: #969da6;
+}
 
 .input input.small {
   line-height: 1em;
-  padding: 0; }
+  padding: 0;
+}
 
 .input-withIcon input {
-  padding-right: 32px; }
+  padding-right: 32px;
+}
 
 .input-icon {
   fill: #969da6;
@@ -853,13 +1046,15 @@ input:-webkit-autofill {
   position: absolute;
   right: 16px;
   top: 50%;
-  width: 16px; }
+  width: 16px;
+}
 
 .input-fullWidth {
   display: block;
   margin-left: 0;
   margin-right: 0;
-  width: 100%; }
+  width: 100%;
+}
 
 /**
  *  FORM COLLAPSED (items in row without gap between them)
@@ -883,25 +1078,31 @@ input:-webkit-autofill {
  **/
 .formCollapsed {
   display: flex;
-  margin-bottom: 20px; }
+  margin-bottom: 20px;
+}
 
 .formCollapsed-item {
   border-radius: 0 !important;
-  margin: 0 !important; }
+  margin: 0 !important;
+}
 
 .formCollapsed-item:first-child {
   border-bottom-left-radius: 3px !important;
-  border-top-left-radius: 3px !important; }
+  border-top-left-radius: 3px !important;
+}
 
 .formCollapsed-item:last-child {
   border-bottom-right-radius: 3px !important;
-  border-top-right-radius: 3px !important; }
+  border-top-right-radius: 3px !important;
+}
 
 .formCollapsed-item:not(:last-child) {
-  border-right: 0; }
+  border-right: 0;
+}
 
 .formCollapsed-itemPrimary {
-  flex: 1; }
+  flex: 1;
+}
 
 /**
  *  LOADING BAR
@@ -919,48 +1120,64 @@ input:-webkit-autofill {
   right: 0;
   top: 0;
   width: 100%;
-  z-index: 1000; }
+  z-index: 1000;
+}
 
 .loadingBar::before {
   -webkit-animation: loading 2s linear infinite;
   animation: loading 2s linear infinite;
   background-color: #03a9f4;
-  content: '';
+  content: "";
   display: block;
   height: 6px;
   left: -300px;
   position: absolute;
-  width: 300px; }
+  width: 300px;
+}
 
 @-webkit-keyframes loading {
   from {
     left: -300px;
-    width: 30%; }
+    width: 30%;
+  }
   50% {
-    width: 30%; }
+    width: 30%;
+  }
   70% {
-    width: 70%; }
+    width: 70%;
+  }
   80% {
-    left: 50%; }
+    left: 50%;
+  }
   95% {
-    left: 120%; }
+    left: 120%;
+  }
   to {
-    left: 100%; } }
+    left: 100%;
+  }
+}
 
 @keyframes loading {
   from {
     left: -300px;
-    width: 30%; }
+    width: 30%;
+  }
   50% {
-    width: 30%; }
+    width: 30%;
+  }
   70% {
-    width: 70%; }
+    width: 70%;
+  }
   80% {
-    left: 50%; }
+    left: 50%;
+  }
   95% {
-    left: 120%; }
+    left: 120%;
+  }
   to {
-    left: 100%; } }
+    left: 100%;
+  }
+}
 
 /**
  *  LOADING SPINNER
@@ -988,7 +1205,8 @@ input:-webkit-autofill {
   position: fixed;
   top: 50%;
   width: 30px;
-  z-index: 1000; }
+  z-index: 1000;
+}
 
 .loadingSpinner-inner {
   -webkit-animation-timing-function: ease-in-out;
@@ -998,7 +1216,8 @@ input:-webkit-autofill {
   display: block;
   height: 9px;
   position: absolute;
-  width: 9px; }
+  width: 9px;
+}
 
 .loadingSpinner-inner:nth-child(1) {
   -webkit-animation: translateBall1 1s infinite;
@@ -1006,147 +1225,195 @@ input:-webkit-autofill {
   left: 0;
   top: 0;
   -webkit-transform: translate3d(4.5px, 4.5px, 0);
-  transform: translate3d(4.5px, 4.5px, 0); }
+  transform: translate3d(4.5px, 4.5px, 0);
+}
 
 .loadingSpinner-inner:nth-child(2) {
   -webkit-animation: translateBall2 1s infinite;
   animation: translateBall2 1s infinite;
   right: 0;
-  top: 0; }
+  top: 0;
+}
 
 .loadingSpinner-inner:nth-child(3) {
   -webkit-animation: translateBall3 1s infinite;
   animation: translateBall3 1s infinite;
   bottom: 0;
-  right: 0; }
+  right: 0;
+}
 
 .loadingSpinner-inner:nth-child(4) {
   -webkit-animation: translateBall4 1s infinite;
   animation: translateBall4 1s infinite;
   bottom: 0;
-  left: 0; }
+  left: 0;
+}
 
 @-webkit-keyframes rotateLoader {
   0% {
     -webkit-transform: rotate(0);
-    transform: rotate(0); }
+    transform: rotate(0);
+  }
   25% {
     -webkit-transform: rotate(90deg);
-    transform: rotate(90deg); }
+    transform: rotate(90deg);
+  }
   50% {
     -webkit-transform: rotate(180deg);
-    transform: rotate(180deg); }
+    transform: rotate(180deg);
+  }
   75% {
     -webkit-transform: rotate(270deg);
-    transform: rotate(270deg); }
+    transform: rotate(270deg);
+  }
   100% {
     -webkit-transform: rotate(360deg);
-    transform: rotate(360deg); } }
+    transform: rotate(360deg);
+  }
+}
 
 @keyframes rotateLoader {
   0% {
     -webkit-transform: rotate(0);
-    transform: rotate(0); }
+    transform: rotate(0);
+  }
   25% {
     -webkit-transform: rotate(90deg);
-    transform: rotate(90deg); }
+    transform: rotate(90deg);
+  }
   50% {
     -webkit-transform: rotate(180deg);
-    transform: rotate(180deg); }
+    transform: rotate(180deg);
+  }
   75% {
     -webkit-transform: rotate(270deg);
-    transform: rotate(270deg); }
+    transform: rotate(270deg);
+  }
   100% {
     -webkit-transform: rotate(360deg);
-    transform: rotate(360deg); } }
+    transform: rotate(360deg);
+  }
+}
 
 @-webkit-keyframes translateBall1 {
   0% {
     -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0); }
+    transform: translate3d(0, 0, 0);
+  }
   50% {
     -webkit-transform: translate3d(4.5px, 4.5px, 0);
-    transform: translate3d(4.5px, 4.5px, 0); }
+    transform: translate3d(4.5px, 4.5px, 0);
+  }
   100% {
     -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0); } }
+    transform: translate3d(0, 0, 0);
+  }
+}
 
 @keyframes translateBall1 {
   0% {
     -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0); }
+    transform: translate3d(0, 0, 0);
+  }
   50% {
     -webkit-transform: translate3d(4.5px, 4.5px, 0);
-    transform: translate3d(4.5px, 4.5px, 0); }
+    transform: translate3d(4.5px, 4.5px, 0);
+  }
   100% {
     -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0); } }
+    transform: translate3d(0, 0, 0);
+  }
+}
 
 @-webkit-keyframes translateBall2 {
   0% {
     -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0); }
+    transform: translate3d(0, 0, 0);
+  }
   50% {
     -webkit-transform: translate3d(-4.5px, 4.5px, 0);
-    transform: translate3d(-4.5px, 4.5px, 0); }
+    transform: translate3d(-4.5px, 4.5px, 0);
+  }
   100% {
     -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0); } }
+    transform: translate3d(0, 0, 0);
+  }
+}
 
 @keyframes translateBall2 {
   0% {
     -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0); }
+    transform: translate3d(0, 0, 0);
+  }
   50% {
     -webkit-transform: translate3d(-4.5px, 4.5px, 0);
-    transform: translate3d(-4.5px, 4.5px, 0); }
+    transform: translate3d(-4.5px, 4.5px, 0);
+  }
   100% {
     -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0); } }
+    transform: translate3d(0, 0, 0);
+  }
+}
 
 @-webkit-keyframes translateBall3 {
   0% {
     -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0); }
+    transform: translate3d(0, 0, 0);
+  }
   50% {
     -webkit-transform: translate3d(-4.5px, -4.5px, 0);
-    transform: translate3d(-4.5px, -4.5px, 0); }
+    transform: translate3d(-4.5px, -4.5px, 0);
+  }
   100% {
     -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0); } }
+    transform: translate3d(0, 0, 0);
+  }
+}
 
 @keyframes translateBall3 {
   0% {
     -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0); }
+    transform: translate3d(0, 0, 0);
+  }
   50% {
     -webkit-transform: translate3d(-4.5px, -4.5px, 0);
-    transform: translate3d(-4.5px, -4.5px, 0); }
+    transform: translate3d(-4.5px, -4.5px, 0);
+  }
   100% {
     -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0); } }
+    transform: translate3d(0, 0, 0);
+  }
+}
 
 @-webkit-keyframes translateBall4 {
   0% {
     -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0); }
+    transform: translate3d(0, 0, 0);
+  }
   50% {
     -webkit-transform: translate3d(4.5px, -4.5px, 0);
-    transform: translate3d(4.5px, -4.5px, 0); }
+    transform: translate3d(4.5px, -4.5px, 0);
+  }
   100% {
     -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0); } }
+    transform: translate3d(0, 0, 0);
+  }
+}
 
 @keyframes translateBall4 {
   0% {
     -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0); }
+    transform: translate3d(0, 0, 0);
+  }
   50% {
     -webkit-transform: translate3d(4.5px, -4.5px, 0);
-    transform: translate3d(4.5px, -4.5px, 0); }
+    transform: translate3d(4.5px, -4.5px, 0);
+  }
   100% {
     -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0); } }
+    transform: translate3d(0, 0, 0);
+  }
+}
 
 /**
  *  NOTIFICATION
@@ -1164,40 +1431,52 @@ input:-webkit-autofill {
   border-radius: 3px;
   color: #fff;
   margin-bottom: 36px;
-  padding: 16px; }
+  padding: 16px;
+}
 
 .notification p:last-child {
-  margin-bottom: 0; }
+  margin-bottom: 0;
+}
 
 .notification--primary {
-  background-color: #03a9f4; }
+  background-color: #03a9f4;
+}
 
 .notification--dark {
-  background-color: #18232f; }
+  background-color: #18232f;
+}
 
 .notification--secondary {
-  background-color: #e91e63; }
+  background-color: #e91e63;
+}
 
 .notification--white {
-  background-color: #fff; }
+  background-color: #fff;
+}
 
 .notification--success {
-  background-color: #4caf50; }
+  background-color: #4caf50;
+}
 
 .notification--info {
-  background-color: #5bc0de; }
+  background-color: #5bc0de;
+}
 
 .notification--warning {
-  background-color: #f0ad4e; }
+  background-color: #f0ad4e;
+}
 
 .notification--error {
-  background-color: #e74c3c; }
+  background-color: #e74c3c;
+}
 
 .notification--gray {
-  background-color: #969da6; }
+  background-color: #969da6;
+}
 
 .notification--gray-light {
-  background-color: #eceff1; }
+  background-color: #eceff1;
+}
 
 /**
  *  PAGINATOR
@@ -1225,18 +1504,21 @@ input:-webkit-autofill {
  */
 .paginator-item {
   display: inline-block;
-  margin-right: 4px; }
+  margin-right: 4px;
+}
 
 .paginator-itemLink {
   background-color: #eceff1;
   border-radius: 3px;
   display: block;
-  padding: 8px 16px; }
+  padding: 8px 16px;
+}
 
 .paginator-itemLink.is-active {
   background-color: #03a9f4;
   color: #fff;
-  cursor: default; }
+  cursor: default;
+}
 
 /**
  *  TABLE
@@ -1264,16 +1546,19 @@ input:-webkit-autofill {
   border-collapse: collapse;
   color: #272727;
   max-width: 100%;
-  width: 100%; }
+  width: 100%;
+}
 
 .table th,
 .table td {
   border-bottom: 1px solid #d5d9db;
   padding: 8px;
-  position: relative; }
+  position: relative;
+}
 
 .table thead {
-  border-bottom: 1px solid #d5d9db; }
+  border-bottom: 1px solid #d5d9db;
+}
 
 .table th {
   background-color: #fff;
@@ -1281,7 +1566,8 @@ input:-webkit-autofill {
   font-size: 12px;
   font-weight: normal;
   padding: 8px;
-  white-space: nowrap; }
+  white-space: nowrap;
+}
 
 /**
  *  TABLE RESPONSIVE
@@ -1319,37 +1605,48 @@ input:-webkit-autofill {
  *
  */
 .table--responsive th {
-  display: none; }
+  display: none;
+}
 
 .table--responsive td {
-  display: block; }
+  display: block;
+}
 
 @media (max-width: 767px) {
   .table--responsive td {
-    border: 0; } }
+    border: 0;
+  }
+}
 
 .table--responsive td::before {
   color: #969da6;
   content: attr(data-th) ": ";
   display: block;
-  font-weight: normal; }
+  font-weight: normal;
+}
 
 @media (min-width: 576px) {
   .table--responsive td::before {
-    display: none; } }
+    display: none;
+  }
+}
 
 .table--responsive td:first-child {
-  border-top: 1px solid #d5d9db; }
+  border-top: 1px solid #d5d9db;
+}
 
 .table--responsive th,
 .table--responsive td {
-  text-align: left; }
+  text-align: left;
+}
 
 @media (min-width: 576px) {
   .table--responsive th,
   .table--responsive td {
     border-top: 1px solid #d5d9db;
-    display: table-cell; } }
+    display: table-cell;
+  }
+}
 
 /**
  *  TABS
@@ -1365,7 +1662,8 @@ input:-webkit-autofill {
  */
 .tabs {
   border-bottom: 1px solid #d5d9db;
-  text-align: center; }
+  text-align: center;
+}
 
 .tabs-item {
   border-bottom: 3px solid transparent;
@@ -1374,15 +1672,18 @@ input:-webkit-autofill {
   margin: 0 16px 0 0;
   min-width: 70px;
   padding: 16px;
-  position: relative; }
+  position: relative;
+}
 
 .tabs-item:hover {
   color: #03a9f4;
-  text-decoration: none; }
+  text-decoration: none;
+}
 
 .tabs-item.is-selected {
   border-bottom: 3px solid #03a9f4;
-  color: #03a9f4; }
+  color: #03a9f4;
+}
 
 /**
  *  TAG
@@ -1417,631 +1718,920 @@ input:-webkit-autofill {
   line-height: 16px;
   margin: 0 16px 16px 0;
   padding: 8px;
-  position: relative; }
+  position: relative;
+}
 
 .tag::before {
   border-bottom: 16px solid transparent;
   border-left: 8px solid #eceff1;
   border-top: 16px solid transparent;
-  content: '';
+  content: "";
   height: 0;
   position: absolute;
   right: -8px;
   top: 0;
-  width: 0; }
+  width: 0;
+}
 
 .tag::after {
   background: #fff;
   border-radius: 100%;
-  content: '';
+  content: "";
   height: 5px;
   margin-top: -2.5px;
   position: absolute;
   right: -2.5px;
   top: 50%;
-  width: 5px; }
+  width: 5px;
+}
 
 .container {
   width: 100%;
   padding-right: 12px;
   padding-left: 12px;
   margin-right: auto;
-  margin-left: auto; }
+  margin-left: auto;
+}
 
 @media (min-width: 576px) {
   .container {
-    max-width: 540px; } }
+    max-width: 540px;
+  }
+}
 
 @media (min-width: 768px) {
   .container {
-    max-width: 720px; } }
+    max-width: 720px;
+  }
+}
 
 @media (min-width: 992px) {
   .container {
-    max-width: 960px; } }
+    max-width: 960px;
+  }
+}
 
 @media (min-width: 1200px) {
   .container {
-    max-width: 1140px; } }
+    max-width: 1140px;
+  }
+}
 
 .container-fluid {
   width: 100%;
   padding-right: 12px;
   padding-left: 12px;
   margin-right: auto;
-  margin-left: auto; }
+  margin-left: auto;
+}
 
 .row {
   display: flex;
   flex-wrap: wrap;
   margin-right: -12px;
-  margin-left: -12px; }
+  margin-left: -12px;
+}
 
 .no-gutters {
   margin-left: 0;
-  margin-right: 0; }
+  margin-right: 0;
+}
 
 .no-gutters > .col,
-.no-gutters > [class*='col-'] {
+.no-gutters > [class*="col-"] {
   padding-left: 0;
-  padding-right: 0; }
+  padding-right: 0;
+}
 
-.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col,
-.col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm,
-.col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md,
-.col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg,
-.col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl,
+.col-1,
+.col-2,
+.col-3,
+.col-4,
+.col-5,
+.col-6,
+.col-7,
+.col-8,
+.col-9,
+.col-10,
+.col-11,
+.col-12,
+.col,
+.col-auto,
+.col-sm-1,
+.col-sm-2,
+.col-sm-3,
+.col-sm-4,
+.col-sm-5,
+.col-sm-6,
+.col-sm-7,
+.col-sm-8,
+.col-sm-9,
+.col-sm-10,
+.col-sm-11,
+.col-sm-12,
+.col-sm,
+.col-sm-auto,
+.col-md-1,
+.col-md-2,
+.col-md-3,
+.col-md-4,
+.col-md-5,
+.col-md-6,
+.col-md-7,
+.col-md-8,
+.col-md-9,
+.col-md-10,
+.col-md-11,
+.col-md-12,
+.col-md,
+.col-md-auto,
+.col-lg-1,
+.col-lg-2,
+.col-lg-3,
+.col-lg-4,
+.col-lg-5,
+.col-lg-6,
+.col-lg-7,
+.col-lg-8,
+.col-lg-9,
+.col-lg-10,
+.col-lg-11,
+.col-lg-12,
+.col-lg,
+.col-lg-auto,
+.col-xl-1,
+.col-xl-2,
+.col-xl-3,
+.col-xl-4,
+.col-xl-5,
+.col-xl-6,
+.col-xl-7,
+.col-xl-8,
+.col-xl-9,
+.col-xl-10,
+.col-xl-11,
+.col-xl-12,
+.col-xl,
 .col-xl-auto {
   position: relative;
   width: 100%;
   min-height: 1px;
   padding-right: 12px;
-  padding-left: 12px; }
+  padding-left: 12px;
+}
 
 .col {
   flex-basis: 0;
   flex-grow: 1;
-  max-width: 100%; }
+  max-width: 100%;
+}
 
 .col-auto {
   flex: 0 0 auto;
   width: auto;
-  max-width: none; }
+  max-width: none;
+}
 
 .col-1 {
   flex: 0 0 8.33333%;
-  max-width: 8.33333%; }
+  max-width: 8.33333%;
+}
 
 .col-2 {
   flex: 0 0 16.66667%;
-  max-width: 16.66667%; }
+  max-width: 16.66667%;
+}
 
 .col-3 {
   flex: 0 0 25%;
-  max-width: 25%; }
+  max-width: 25%;
+}
 
 .col-4 {
   flex: 0 0 33.33333%;
-  max-width: 33.33333%; }
+  max-width: 33.33333%;
+}
 
 .col-5 {
   flex: 0 0 41.66667%;
-  max-width: 41.66667%; }
+  max-width: 41.66667%;
+}
 
 .col-6 {
   flex: 0 0 50%;
-  max-width: 50%; }
+  max-width: 50%;
+}
 
 .col-7 {
   flex: 0 0 58.33333%;
-  max-width: 58.33333%; }
+  max-width: 58.33333%;
+}
 
 .col-8 {
   flex: 0 0 66.66667%;
-  max-width: 66.66667%; }
+  max-width: 66.66667%;
+}
 
 .col-9 {
   flex: 0 0 75%;
-  max-width: 75%; }
+  max-width: 75%;
+}
 
 .col-10 {
   flex: 0 0 83.33333%;
-  max-width: 83.33333%; }
+  max-width: 83.33333%;
+}
 
 .col-11 {
   flex: 0 0 91.66667%;
-  max-width: 91.66667%; }
+  max-width: 91.66667%;
+}
 
 .col-12 {
   flex: 0 0 100%;
-  max-width: 100%; }
+  max-width: 100%;
+}
 
 .order-first {
-  order: -1; }
+  order: -1;
+}
 
 .order-1 {
-  order: 1; }
+  order: 1;
+}
 
 .order-2 {
-  order: 2; }
+  order: 2;
+}
 
 .order-3 {
-  order: 3; }
+  order: 3;
+}
 
 .order-4 {
-  order: 4; }
+  order: 4;
+}
 
 .order-5 {
-  order: 5; }
+  order: 5;
+}
 
 .order-6 {
-  order: 6; }
+  order: 6;
+}
 
 .order-7 {
-  order: 7; }
+  order: 7;
+}
 
 .order-8 {
-  order: 8; }
+  order: 8;
+}
 
 .order-9 {
-  order: 9; }
+  order: 9;
+}
 
 .order-10 {
-  order: 10; }
+  order: 10;
+}
 
 .order-11 {
-  order: 11; }
+  order: 11;
+}
 
 .order-12 {
-  order: 12; }
+  order: 12;
+}
 
 .offset-1 {
-  margin-left: 8.33333%; }
+  margin-left: 8.33333%;
+}
 
 .offset-2 {
-  margin-left: 16.66667%; }
+  margin-left: 16.66667%;
+}
 
 .offset-3 {
-  margin-left: 25%; }
+  margin-left: 25%;
+}
 
 .offset-4 {
-  margin-left: 33.33333%; }
+  margin-left: 33.33333%;
+}
 
 .offset-5 {
-  margin-left: 41.66667%; }
+  margin-left: 41.66667%;
+}
 
 .offset-6 {
-  margin-left: 50%; }
+  margin-left: 50%;
+}
 
 .offset-7 {
-  margin-left: 58.33333%; }
+  margin-left: 58.33333%;
+}
 
 .offset-8 {
-  margin-left: 66.66667%; }
+  margin-left: 66.66667%;
+}
 
 .offset-9 {
-  margin-left: 75%; }
+  margin-left: 75%;
+}
 
 .offset-10 {
-  margin-left: 83.33333%; }
+  margin-left: 83.33333%;
+}
 
 .offset-11 {
-  margin-left: 91.66667%; }
+  margin-left: 91.66667%;
+}
 
 @media (min-width: 576px) {
   .col-sm {
     flex-basis: 0;
     flex-grow: 1;
-    max-width: 100%; }
+    max-width: 100%;
+  }
   .col-sm-auto {
     flex: 0 0 auto;
     width: auto;
-    max-width: none; }
+    max-width: none;
+  }
   .col-sm-1 {
     flex: 0 0 8.33333%;
-    max-width: 8.33333%; }
+    max-width: 8.33333%;
+  }
   .col-sm-2 {
     flex: 0 0 16.66667%;
-    max-width: 16.66667%; }
+    max-width: 16.66667%;
+  }
   .col-sm-3 {
     flex: 0 0 25%;
-    max-width: 25%; }
+    max-width: 25%;
+  }
   .col-sm-4 {
     flex: 0 0 33.33333%;
-    max-width: 33.33333%; }
+    max-width: 33.33333%;
+  }
   .col-sm-5 {
     flex: 0 0 41.66667%;
-    max-width: 41.66667%; }
+    max-width: 41.66667%;
+  }
   .col-sm-6 {
     flex: 0 0 50%;
-    max-width: 50%; }
+    max-width: 50%;
+  }
   .col-sm-7 {
     flex: 0 0 58.33333%;
-    max-width: 58.33333%; }
+    max-width: 58.33333%;
+  }
   .col-sm-8 {
     flex: 0 0 66.66667%;
-    max-width: 66.66667%; }
+    max-width: 66.66667%;
+  }
   .col-sm-9 {
     flex: 0 0 75%;
-    max-width: 75%; }
+    max-width: 75%;
+  }
   .col-sm-10 {
     flex: 0 0 83.33333%;
-    max-width: 83.33333%; }
+    max-width: 83.33333%;
+  }
   .col-sm-11 {
     flex: 0 0 91.66667%;
-    max-width: 91.66667%; }
+    max-width: 91.66667%;
+  }
   .col-sm-12 {
     flex: 0 0 100%;
-    max-width: 100%; }
+    max-width: 100%;
+  }
   .order-sm-first {
-    order: -1; }
+    order: -1;
+  }
   .order-sm-1 {
-    order: 1; }
+    order: 1;
+  }
   .order-sm-2 {
-    order: 2; }
+    order: 2;
+  }
   .order-sm-3 {
-    order: 3; }
+    order: 3;
+  }
   .order-sm-4 {
-    order: 4; }
+    order: 4;
+  }
   .order-sm-5 {
-    order: 5; }
+    order: 5;
+  }
   .order-sm-6 {
-    order: 6; }
+    order: 6;
+  }
   .order-sm-7 {
-    order: 7; }
+    order: 7;
+  }
   .order-sm-8 {
-    order: 8; }
+    order: 8;
+  }
   .order-sm-9 {
-    order: 9; }
+    order: 9;
+  }
   .order-sm-10 {
-    order: 10; }
+    order: 10;
+  }
   .order-sm-11 {
-    order: 11; }
+    order: 11;
+  }
   .order-sm-12 {
-    order: 12; }
+    order: 12;
+  }
   .offset-sm-0 {
-    margin-left: 0; }
+    margin-left: 0;
+  }
   .offset-sm-1 {
-    margin-left: 8.33333%; }
+    margin-left: 8.33333%;
+  }
   .offset-sm-2 {
-    margin-left: 16.66667%; }
+    margin-left: 16.66667%;
+  }
   .offset-sm-3 {
-    margin-left: 25%; }
+    margin-left: 25%;
+  }
   .offset-sm-4 {
-    margin-left: 33.33333%; }
+    margin-left: 33.33333%;
+  }
   .offset-sm-5 {
-    margin-left: 41.66667%; }
+    margin-left: 41.66667%;
+  }
   .offset-sm-6 {
-    margin-left: 50%; }
+    margin-left: 50%;
+  }
   .offset-sm-7 {
-    margin-left: 58.33333%; }
+    margin-left: 58.33333%;
+  }
   .offset-sm-8 {
-    margin-left: 66.66667%; }
+    margin-left: 66.66667%;
+  }
   .offset-sm-9 {
-    margin-left: 75%; }
+    margin-left: 75%;
+  }
   .offset-sm-10 {
-    margin-left: 83.33333%; }
+    margin-left: 83.33333%;
+  }
   .offset-sm-11 {
-    margin-left: 91.66667%; } }
+    margin-left: 91.66667%;
+  }
+}
 
 @media (min-width: 768px) {
   .col-md {
     flex-basis: 0;
     flex-grow: 1;
-    max-width: 100%; }
+    max-width: 100%;
+  }
   .col-md-auto {
     flex: 0 0 auto;
     width: auto;
-    max-width: none; }
+    max-width: none;
+  }
   .col-md-1 {
     flex: 0 0 8.33333%;
-    max-width: 8.33333%; }
+    max-width: 8.33333%;
+  }
   .col-md-2 {
     flex: 0 0 16.66667%;
-    max-width: 16.66667%; }
+    max-width: 16.66667%;
+  }
   .col-md-3 {
     flex: 0 0 25%;
-    max-width: 25%; }
+    max-width: 25%;
+  }
   .col-md-4 {
     flex: 0 0 33.33333%;
-    max-width: 33.33333%; }
+    max-width: 33.33333%;
+  }
   .col-md-5 {
     flex: 0 0 41.66667%;
-    max-width: 41.66667%; }
+    max-width: 41.66667%;
+  }
   .col-md-6 {
     flex: 0 0 50%;
-    max-width: 50%; }
+    max-width: 50%;
+  }
   .col-md-7 {
     flex: 0 0 58.33333%;
-    max-width: 58.33333%; }
+    max-width: 58.33333%;
+  }
   .col-md-8 {
     flex: 0 0 66.66667%;
-    max-width: 66.66667%; }
+    max-width: 66.66667%;
+  }
   .col-md-9 {
     flex: 0 0 75%;
-    max-width: 75%; }
+    max-width: 75%;
+  }
   .col-md-10 {
     flex: 0 0 83.33333%;
-    max-width: 83.33333%; }
+    max-width: 83.33333%;
+  }
   .col-md-11 {
     flex: 0 0 91.66667%;
-    max-width: 91.66667%; }
+    max-width: 91.66667%;
+  }
   .col-md-12 {
     flex: 0 0 100%;
-    max-width: 100%; }
+    max-width: 100%;
+  }
   .order-md-first {
-    order: -1; }
+    order: -1;
+  }
   .order-md-1 {
-    order: 1; }
+    order: 1;
+  }
   .order-md-2 {
-    order: 2; }
+    order: 2;
+  }
   .order-md-3 {
-    order: 3; }
+    order: 3;
+  }
   .order-md-4 {
-    order: 4; }
+    order: 4;
+  }
   .order-md-5 {
-    order: 5; }
+    order: 5;
+  }
   .order-md-6 {
-    order: 6; }
+    order: 6;
+  }
   .order-md-7 {
-    order: 7; }
+    order: 7;
+  }
   .order-md-8 {
-    order: 8; }
+    order: 8;
+  }
   .order-md-9 {
-    order: 9; }
+    order: 9;
+  }
   .order-md-10 {
-    order: 10; }
+    order: 10;
+  }
   .order-md-11 {
-    order: 11; }
+    order: 11;
+  }
   .order-md-12 {
-    order: 12; }
+    order: 12;
+  }
   .offset-md-0 {
-    margin-left: 0; }
+    margin-left: 0;
+  }
   .offset-md-1 {
-    margin-left: 8.33333%; }
+    margin-left: 8.33333%;
+  }
   .offset-md-2 {
-    margin-left: 16.66667%; }
+    margin-left: 16.66667%;
+  }
   .offset-md-3 {
-    margin-left: 25%; }
+    margin-left: 25%;
+  }
   .offset-md-4 {
-    margin-left: 33.33333%; }
+    margin-left: 33.33333%;
+  }
   .offset-md-5 {
-    margin-left: 41.66667%; }
+    margin-left: 41.66667%;
+  }
   .offset-md-6 {
-    margin-left: 50%; }
+    margin-left: 50%;
+  }
   .offset-md-7 {
-    margin-left: 58.33333%; }
+    margin-left: 58.33333%;
+  }
   .offset-md-8 {
-    margin-left: 66.66667%; }
+    margin-left: 66.66667%;
+  }
   .offset-md-9 {
-    margin-left: 75%; }
+    margin-left: 75%;
+  }
   .offset-md-10 {
-    margin-left: 83.33333%; }
+    margin-left: 83.33333%;
+  }
   .offset-md-11 {
-    margin-left: 91.66667%; } }
+    margin-left: 91.66667%;
+  }
+}
 
 @media (min-width: 992px) {
   .col-lg {
     flex-basis: 0;
     flex-grow: 1;
-    max-width: 100%; }
+    max-width: 100%;
+  }
   .col-lg-auto {
     flex: 0 0 auto;
     width: auto;
-    max-width: none; }
+    max-width: none;
+  }
   .col-lg-1 {
     flex: 0 0 8.33333%;
-    max-width: 8.33333%; }
+    max-width: 8.33333%;
+  }
   .col-lg-2 {
     flex: 0 0 16.66667%;
-    max-width: 16.66667%; }
+    max-width: 16.66667%;
+  }
   .col-lg-3 {
     flex: 0 0 25%;
-    max-width: 25%; }
+    max-width: 25%;
+  }
   .col-lg-4 {
     flex: 0 0 33.33333%;
-    max-width: 33.33333%; }
+    max-width: 33.33333%;
+  }
   .col-lg-5 {
     flex: 0 0 41.66667%;
-    max-width: 41.66667%; }
+    max-width: 41.66667%;
+  }
   .col-lg-6 {
     flex: 0 0 50%;
-    max-width: 50%; }
+    max-width: 50%;
+  }
   .col-lg-7 {
     flex: 0 0 58.33333%;
-    max-width: 58.33333%; }
+    max-width: 58.33333%;
+  }
   .col-lg-8 {
     flex: 0 0 66.66667%;
-    max-width: 66.66667%; }
+    max-width: 66.66667%;
+  }
   .col-lg-9 {
     flex: 0 0 75%;
-    max-width: 75%; }
+    max-width: 75%;
+  }
   .col-lg-10 {
     flex: 0 0 83.33333%;
-    max-width: 83.33333%; }
+    max-width: 83.33333%;
+  }
   .col-lg-11 {
     flex: 0 0 91.66667%;
-    max-width: 91.66667%; }
+    max-width: 91.66667%;
+  }
   .col-lg-12 {
     flex: 0 0 100%;
-    max-width: 100%; }
+    max-width: 100%;
+  }
   .order-lg-first {
-    order: -1; }
+    order: -1;
+  }
   .order-lg-1 {
-    order: 1; }
+    order: 1;
+  }
   .order-lg-2 {
-    order: 2; }
+    order: 2;
+  }
   .order-lg-3 {
-    order: 3; }
+    order: 3;
+  }
   .order-lg-4 {
-    order: 4; }
+    order: 4;
+  }
   .order-lg-5 {
-    order: 5; }
+    order: 5;
+  }
   .order-lg-6 {
-    order: 6; }
+    order: 6;
+  }
   .order-lg-7 {
-    order: 7; }
+    order: 7;
+  }
   .order-lg-8 {
-    order: 8; }
+    order: 8;
+  }
   .order-lg-9 {
-    order: 9; }
+    order: 9;
+  }
   .order-lg-10 {
-    order: 10; }
+    order: 10;
+  }
   .order-lg-11 {
-    order: 11; }
+    order: 11;
+  }
   .order-lg-12 {
-    order: 12; }
+    order: 12;
+  }
   .offset-lg-0 {
-    margin-left: 0; }
+    margin-left: 0;
+  }
   .offset-lg-1 {
-    margin-left: 8.33333%; }
+    margin-left: 8.33333%;
+  }
   .offset-lg-2 {
-    margin-left: 16.66667%; }
+    margin-left: 16.66667%;
+  }
   .offset-lg-3 {
-    margin-left: 25%; }
+    margin-left: 25%;
+  }
   .offset-lg-4 {
-    margin-left: 33.33333%; }
+    margin-left: 33.33333%;
+  }
   .offset-lg-5 {
-    margin-left: 41.66667%; }
+    margin-left: 41.66667%;
+  }
   .offset-lg-6 {
-    margin-left: 50%; }
+    margin-left: 50%;
+  }
   .offset-lg-7 {
-    margin-left: 58.33333%; }
+    margin-left: 58.33333%;
+  }
   .offset-lg-8 {
-    margin-left: 66.66667%; }
+    margin-left: 66.66667%;
+  }
   .offset-lg-9 {
-    margin-left: 75%; }
+    margin-left: 75%;
+  }
   .offset-lg-10 {
-    margin-left: 83.33333%; }
+    margin-left: 83.33333%;
+  }
   .offset-lg-11 {
-    margin-left: 91.66667%; } }
+    margin-left: 91.66667%;
+  }
+}
 
 @media (min-width: 1200px) {
   .col-xl {
     flex-basis: 0;
     flex-grow: 1;
-    max-width: 100%; }
+    max-width: 100%;
+  }
   .col-xl-auto {
     flex: 0 0 auto;
     width: auto;
-    max-width: none; }
+    max-width: none;
+  }
   .col-xl-1 {
     flex: 0 0 8.33333%;
-    max-width: 8.33333%; }
+    max-width: 8.33333%;
+  }
   .col-xl-2 {
     flex: 0 0 16.66667%;
-    max-width: 16.66667%; }
+    max-width: 16.66667%;
+  }
   .col-xl-3 {
     flex: 0 0 25%;
-    max-width: 25%; }
+    max-width: 25%;
+  }
   .col-xl-4 {
     flex: 0 0 33.33333%;
-    max-width: 33.33333%; }
+    max-width: 33.33333%;
+  }
   .col-xl-5 {
     flex: 0 0 41.66667%;
-    max-width: 41.66667%; }
+    max-width: 41.66667%;
+  }
   .col-xl-6 {
     flex: 0 0 50%;
-    max-width: 50%; }
+    max-width: 50%;
+  }
   .col-xl-7 {
     flex: 0 0 58.33333%;
-    max-width: 58.33333%; }
+    max-width: 58.33333%;
+  }
   .col-xl-8 {
     flex: 0 0 66.66667%;
-    max-width: 66.66667%; }
+    max-width: 66.66667%;
+  }
   .col-xl-9 {
     flex: 0 0 75%;
-    max-width: 75%; }
+    max-width: 75%;
+  }
   .col-xl-10 {
     flex: 0 0 83.33333%;
-    max-width: 83.33333%; }
+    max-width: 83.33333%;
+  }
   .col-xl-11 {
     flex: 0 0 91.66667%;
-    max-width: 91.66667%; }
+    max-width: 91.66667%;
+  }
   .col-xl-12 {
     flex: 0 0 100%;
-    max-width: 100%; }
+    max-width: 100%;
+  }
   .order-xl-first {
-    order: -1; }
+    order: -1;
+  }
   .order-xl-1 {
-    order: 1; }
+    order: 1;
+  }
   .order-xl-2 {
-    order: 2; }
+    order: 2;
+  }
   .order-xl-3 {
-    order: 3; }
+    order: 3;
+  }
   .order-xl-4 {
-    order: 4; }
+    order: 4;
+  }
   .order-xl-5 {
-    order: 5; }
+    order: 5;
+  }
   .order-xl-6 {
-    order: 6; }
+    order: 6;
+  }
   .order-xl-7 {
-    order: 7; }
+    order: 7;
+  }
   .order-xl-8 {
-    order: 8; }
+    order: 8;
+  }
   .order-xl-9 {
-    order: 9; }
+    order: 9;
+  }
   .order-xl-10 {
-    order: 10; }
+    order: 10;
+  }
   .order-xl-11 {
-    order: 11; }
+    order: 11;
+  }
   .order-xl-12 {
-    order: 12; }
+    order: 12;
+  }
   .offset-xl-0 {
-    margin-left: 0; }
+    margin-left: 0;
+  }
   .offset-xl-1 {
-    margin-left: 8.33333%; }
+    margin-left: 8.33333%;
+  }
   .offset-xl-2 {
-    margin-left: 16.66667%; }
+    margin-left: 16.66667%;
+  }
   .offset-xl-3 {
-    margin-left: 25%; }
+    margin-left: 25%;
+  }
   .offset-xl-4 {
-    margin-left: 33.33333%; }
+    margin-left: 33.33333%;
+  }
   .offset-xl-5 {
-    margin-left: 41.66667%; }
+    margin-left: 41.66667%;
+  }
   .offset-xl-6 {
-    margin-left: 50%; }
+    margin-left: 50%;
+  }
   .offset-xl-7 {
-    margin-left: 58.33333%; }
+    margin-left: 58.33333%;
+  }
   .offset-xl-8 {
-    margin-left: 66.66667%; }
+    margin-left: 66.66667%;
+  }
   .offset-xl-9 {
-    margin-left: 75%; }
+    margin-left: 75%;
+  }
   .offset-xl-10 {
-    margin-left: 83.33333%; }
+    margin-left: 83.33333%;
+  }
   .offset-xl-11 {
-    margin-left: 91.66667%; } }
+    margin-left: 91.66667%;
+  }
+}
 
 /**
  * Demo website styles
  */
 body {
-  padding-top: 60px; }
+  padding-top: 60px;
+}
 
 @media (min-width: 576px) {
   body {
-    padding-top: 80px; } }
+    padding-top: 80px;
+  }
+}
 
 .anchor {
   display: block;
   position: relative;
   top: -65px;
-  visibility: hidden; }
+  visibility: hidden;
+}
 
 .main-logo {
   width: 150px;
-  fill: #03a9f4; }
+  fill: #03a9f4;
+}
 
 @media (max-width: 767px) {
   .main-logo {
-    width: 100px; } }
+    width: 100px;
+  }
+}
 
 @media screen and (max-width: 550px) {
   .example-image {
-    width: 50px; } }
+    width: 50px;
+  }
+}
 
 .examples {
-  width: 100%; }
+  width: 100%;
+}
 
 .example1,
 .example2 {
@@ -2049,32 +2639,42 @@ body {
   display: inline-block;
   max-width: 300px;
   padding: 16px;
-  text-align: center; }
+  text-align: center;
+}
 
 @media screen and (max-width: 550px) {
   .example1,
   .example2 {
-    max-width: 100%; }
+    max-width: 100%;
+  }
   .example1 img,
   .example2 img {
-    width: 100% !important; } }
+    width: 100% !important;
+  }
+}
 
 .language-js {
-  font-size: 14px; }
+  font-size: 14px;
+}
 
-:not(pre) > code[class*="language-"], pre[class*="language-"] {
-  background-color: #eceff1 !important; }
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+  background-color: #eceff1 !important;
+}
 
 pre {
   margin-bottom: 2em !important;
-  overflow-x: auto; }
+  overflow-x: auto;
+}
 
 .example-code {
-  max-width: 700px; }
+  max-width: 700px;
+}
 
 .example-code pre[class*="language-"] {
   font-size: 14px;
-  margin: 0 !important; }
+  margin: 0 !important;
+}
 
 .token.tag {
   background-color: transparent;
@@ -2082,42 +2682,55 @@ pre {
   color: #905;
   line-height: auto;
   margin: 0;
-  padding: 0; }
+  padding: 0;
+}
 
-.token.tag:before, .token.tag:after {
-  display: none; }
+.token.tag:before,
+.token.tag:after {
+  display: none;
+}
 
 .token.operator {
-  background: none !important; }
+  background: none !important;
+}
 
 .header {
   background-color: #fff;
-  z-index: 2000; }
+  z-index: 2000;
+}
 
 @media (min-width: 576px) {
   .header {
-    padding: 16px 0; } }
+    padding: 16px 0;
+  }
+}
 
 .header.is-visible {
-  top: 0; }
+  top: 0;
+}
 
 .header-inner {
   align-items: center;
   display: flex;
-  justify-content: space-between; }
+  justify-content: space-between;
+}
 
 .header-logo {
   align-items: center;
   display: flex;
   flex-shrink: 0;
-  position: relative; }
+  position: relative;
+}
 
 .header-logoImage {
-  margin-right: 8px; }
+  margin-right: 8px;
+}
 
 @media (min-width: 576px) {
   .header-logoImage {
-    margin-right: 8px; } }
+    margin-right: 8px;
+  }
+}
 
 .header-nav {
   align-items: center;
@@ -2126,38 +2739,111 @@ pre {
   margin-right: -12px;
   overflow-x: auto;
   padding: 20px 16px 20px 8px;
-  white-space: nowrap; }
+  white-space: nowrap;
+}
 
 @media (min-width: 576px) {
   .header-nav {
     margin-right: 0;
-    padding: 0; } }
+    padding: 0;
+  }
+}
 
 .header-navItem {
   margin: 0;
-  margin-right: 16px; }
+  margin-right: 16px;
+}
 
 .header-navItem:last-child {
-  margin-right: 0; }
+  margin-right: 0;
+}
 
 @media (max-width: 767px) {
   .hide-small {
-    display: none; } }
+    display: none;
+  }
+}
 
 [v-cloak] {
-  display: none; }
+  display: none;
+}
 
 /**
  * Reset
  */
-html, body, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video {
+html,
+body,
+body,
+div,
+span,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+abbr,
+address,
+cite,
+code,
+del,
+dfn,
+em,
+ins,
+kbd,
+q,
+samp,
+small,
+strong,
+sub,
+sup,
+var,
+b,
+i,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section,
+time,
+mark,
+audio,
+video {
   background: transparent;
   border: 0;
   font-size: 100%;
   margin: 0;
   outline: 0;
   padding: 0;
-  vertical-align: baseline; }
+  vertical-align: baseline;
+}
 
 article,
 aside,
@@ -2167,10 +2853,14 @@ header,
 main,
 nav,
 section {
-  display: block; }
+  display: block;
+}
 
-*, *:before, *:after {
-  box-sizing: border-box; }
+*,
+*:before,
+*:after {
+  box-sizing: border-box;
+}
 
 /**
  *  MAIN RULES
@@ -2179,31 +2869,37 @@ section {
 *::after,
 *::before {
   box-sizing: border-box;
-  outline: none; }
+  outline: none;
+}
 
 body {
   background-color: #fff;
   min-height: 100%;
   overflow-x: hidden;
-  position: relative; }
+  position: relative;
+}
 
 p {
   font-weight: normal;
-  margin-bottom: 1.5em; }
+  margin-bottom: 1.5em;
+}
 
 img {
-  max-width: 100%; }
+  max-width: 100%;
+}
 
 strong {
-  font-weight: 600; }
+  font-weight: 600;
+}
 
 ul {
-  margin-bottom: 1em; }
+  margin-bottom: 1em;
+}
 
 li {
   list-style: none;
-  margin-bottom: 0.5em; }
-
+  margin-bottom: 0.5em;
+}
 
 .leaflet-popup-close-button {
   visibility: hidden;
@@ -2229,4 +2925,4 @@ li {
 .list-group-item div {
   display: block;
   padding: 0.5rem 1.5rem;
-}
\ No newline at end of file
+}
diff --git a/public/js/main.js b/public/js/main.js
index 0310859..a6c4678 100644
--- a/public/js/main.js
+++ b/public/js/main.js
@@ -1,378 +1,494 @@
-const gen_id = (length)=>{
-    var result           = '';
-    const characters       = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
-    const len = characters.length;
-    for (let i = 0; i < length; i++ ) {
-      result += characters.charAt(Math.floor(Math.random() * len));
-   }
-   return result;
-}
+const gen_id = (length) => {
+  var result = "";
+  const characters =
+    "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+  const len = characters.length;
+  for (let i = 0; i < length; i++) {
+    result += characters.charAt(Math.floor(Math.random() * len));
+  }
+  return result;
+};
 
-Date.prototype.toJSONLocal = (function() {
-    function addZ(n) {
-        return (n<10? '0' : '') + n;
-    }
-    return function() {
-      return this.getFullYear() + '-' +
-             addZ(this.getMonth() + 1) + '-' +
-             addZ(this.getDate());
-    };
-}())
+Date.prototype.toJSONLocal = (function () {
+  function addZ(n) {
+    return (n < 10 ? "0" : "") + n;
+  }
+  return function () {
+    return (
+      this.getFullYear() +
+      "-" +
+      addZ(this.getMonth() + 1) +
+      "-" +
+      addZ(this.getDate())
+    );
+  };
+})();
 
 function toEncoded(string) {
-    const codeUnits = Uint16Array.from(
-      { length: string.length },
-      (element, index) => string.charCodeAt(index)
-    );
-    const charCodes = new Uint8Array(codeUnits.buffer);
-  
-    let result = "";
-    charCodes.forEach((char) => {
-      result += String.fromCharCode(char);
-    });
-    return window.btoa(result);
-  }
-  
-  function toDecoded(string) {
-    let binary = window.atob(string)
-    const bytes = Uint8Array.from({ length: binary.length }, (element, index) =>
-      binary.charCodeAt(index)
-    );
-    const charCodes = new Uint16Array(bytes.buffer);
-  
-    let result = "";
-    charCodes.forEach((char) => {
-      result += String.fromCharCode(char);
-    });
-    return result;
-  }
+  const codeUnits = Uint16Array.from(
+    { length: string.length },
+    (element, index) => string.charCodeAt(index),
+  );
+  const charCodes = new Uint8Array(codeUnits.buffer);
 
-
-const query_nominatim = (q,f) => axios.get('/api/place/'+q).then(res=>res.data).then(res=>res.filter(f))
-const query_flight = (q) => axios.get('/api/flight/'+q).then(res=>res.data)
-
-const is_restauration_type = e => ["restaurant", "cafe", "pub", "bar", "fast_food", "food_court"].indexOf(e.type)!=-1;
-
-const is_attraction_type = e => (["tourism", "leisure", "place", "amenity", "highway", "historic", "natural", "waterway"].indexOf(e.category)!=-1 ||
-    ["place_of_worship", "national_park", "nature_reserve", "protected_area"].indexOf(e.type!=-1));
-
-const icon_type = (item)=>{
-    let t = item.type
-    let c = item.category
-    const arr = ["restaurant", "cafe", "pub", "bar", "fast_food", "food_court"];
-    if(arr.indexOf(t)!=-1){
-        return 'utensils';
-    }else if(t=='hotel' || t=='hostel'){
-        return 'bed';
-    }else if(t=='museum' || c=='historic' || t=='place_of_worship'){
-        return 'landmark';
-    }else if(t=='peak' || t=='viewpoint'){
-        return 'mountain';
-    }else if(t=='parking'){
-        return 'parking';
-    }else if(t=='water' || t=='river' || t=='lake' || t=='torrent' || t=='aquarium'){
-        return 'water';
-    }else if(t=='community_centre' || t=='locality'){
-        return 'building';
-    }else if(t=='attraction'){
-        return 'landmark';
-    }else if(t=='information' || t=='university'){
-        return 'landmark';
-    }else if(t=='bridge'){
-        return 'archway';
-    }else if(t=='woodland'|| t=='shieling' || t=='national_park' || t=='zoo' || t=='park' || t=='garden' || 0){
-        return 'tree';
-    }else if(t=='water_park', t=='theme_park'){
-        return 'dice-five';
-    }else if(t=='?' || t=='neighbourhood' || t=='quarter' || c=='highway'){
-        return '';
-    }else{
-        console.log(item.display_name, item.category, item.type);
-        return 'question';
-    }
+  let result = "";
+  charCodes.forEach((char) => {
+    result += String.fromCharCode(char);
+  });
+  return window.btoa(result);
 }
 
-Vue.component('l-map', window.Vue2Leaflet.LMap)
-Vue.component('l-tile-layer', window.Vue2Leaflet.LTileLayer)
-Vue.component('l-marker', window.Vue2Leaflet.LMarker)
-Vue.component('l-icon', window.Vue2Leaflet.LIcon)
-Vue.component('l-popup', window.Vue2Leaflet.LPopup)
-Vue.component('l-tooltip', window.Vue2Leaflet.LTooltip)
-Vue.component('l-control-scale', window.Vue2Leaflet.LControlScale)
-Vue.component('multiselect', window.VueMultiselect.default)
+function toDecoded(string) {
+  let binary = window.atob(string);
+  const bytes = Uint8Array.from({ length: binary.length }, (element, index) =>
+    binary.charCodeAt(index),
+  );
+  const charCodes = new Uint16Array(bytes.buffer);
+
+  let result = "";
+  charCodes.forEach((char) => {
+    result += String.fromCharCode(char);
+  });
+  return result;
+}
+
+const query_nominatim = (q, f) =>
+  axios
+    .get("/api/place/" + q)
+    .then((res) => res.data)
+    .then((res) => res.filter(f));
+const query_flight = (q) =>
+  axios.get("/api/flight/" + q).then((res) => res.data);
+
+const is_restauration_type = (e) =>
+  ["restaurant", "cafe", "pub", "bar", "fast_food", "food_court"].indexOf(
+    e.type,
+  ) != -1;
+
+const is_attraction_type = (e) =>
+  [
+    "tourism",
+    "leisure",
+    "place",
+    "amenity",
+    "highway",
+    "historic",
+    "natural",
+    "waterway",
+  ].indexOf(e.category) != -1 ||
+  [
+    "place_of_worship",
+    "national_park",
+    "nature_reserve",
+    "protected_area",
+  ].indexOf(e.type != -1);
+
+const icon_type = (item) => {
+  let t = item.type;
+  let c = item.category;
+  const arr = ["restaurant", "cafe", "pub", "bar", "fast_food", "food_court"];
+  if (arr.indexOf(t) != -1) {
+    return "utensils";
+  } else if (t == "hotel" || t == "hostel") {
+    return "bed";
+  } else if (t == "museum" || c == "historic" || t == "place_of_worship") {
+    return "landmark";
+  } else if (t == "peak" || t == "viewpoint") {
+    return "mountain";
+  } else if (t == "parking") {
+    return "parking";
+  } else if (
+    t == "water" ||
+    t == "river" ||
+    t == "lake" ||
+    t == "torrent" ||
+    t == "aquarium"
+  ) {
+    return "water";
+  } else if (t == "community_centre" || t == "locality") {
+    return "building";
+  } else if (t == "attraction") {
+    return "landmark";
+  } else if (t == "information" || t == "university") {
+    return "landmark";
+  } else if (t == "bridge") {
+    return "archway";
+  } else if (
+    t == "woodland" ||
+    t == "shieling" ||
+    t == "national_park" ||
+    t == "zoo" ||
+    t == "park" ||
+    t == "garden" ||
+    0
+  ) {
+    return "tree";
+  } else if ((t == "water_park", t == "theme_park")) {
+    return "dice-five";
+  } else if (
+    t == "?" ||
+    t == "neighbourhood" ||
+    t == "quarter" ||
+    c == "highway"
+  ) {
+    return "";
+  } else {
+    console.log(item.display_name, item.category, item.type);
+    return "question";
+  }
+};
+
+Vue.component("l-map", window.Vue2Leaflet.LMap);
+Vue.component("l-tile-layer", window.Vue2Leaflet.LTileLayer);
+Vue.component("l-marker", window.Vue2Leaflet.LMarker);
+Vue.component("l-icon", window.Vue2Leaflet.LIcon);
+Vue.component("l-popup", window.Vue2Leaflet.LPopup);
+Vue.component("l-tooltip", window.Vue2Leaflet.LTooltip);
+Vue.component("l-control-scale", window.Vue2Leaflet.LControlScale);
+Vue.component("multiselect", window.VueMultiselect.default);
 Vue.use(window.VueTextareaAutosize);
 
 const app = new Vue({
-    el: '#app',
-    data: {
-        journey_edit: (['view','short'].indexOf(window.location.pathname.split('/')[1])==-1),
-        journey_id : window.location.pathname.split('/').pop() || gen_id(16),
-        
-        journey_step_data: {day:1, section:0},
-        journey_data : {
-            name: "New Journey",
-            main:[],
-        },
-        
-        query:{hotel:[],flight:[],nominatim:[]},
-        querying:{hotel:false,flight:false,place:false,food:false},
-        impexp:"",
-        lang: {
-            format: 'ddd D MMM',
-            formatLocale: {
-                firstDayOfWeek: 1,
-            },
-            monthBeforeYear: true,
-        },
+  el: "#app",
+  data: {
+    journey_edit:
+      ["view", "short"].indexOf(window.location.pathname.split("/")[1]) == -1,
+    journey_id: window.location.pathname.split("/").pop() || gen_id(16),
+
+    journey_step_data: { day: 1, section: 0 },
+    journey_data: {
+      name: "New Journey",
+      main: [],
     },
-    methods: {
-        start_journey: function(event){
-            window.location.href = '/'+this.journey_id;
-        },
-        add_section: function(event){
-            if(this.journey_data.main==undefined) this.journey_data.main=[];
-            this.journey_data.main.push({title:"?",step_title:[],map:{zoom:2}, hotel:{latlon:[0,0]},places:{restaurants:[],places:[]}});
-        },
-        step_len: function(idx){
-            return this.journey_data.main[idx].dateRange?
-                ((this.journey_data.main[idx].dateRange[1]-this.journey_data.main[idx].dateRange[0])/(1000*60*60*24))+1
-                : 1;
-        },
-        next_step: function(){
-            this.journey_step_data.day += 1;
-            let s = this.journey_step_data.section;
-            let cd = this.step_len(s);
-                    
-            if(this.journey_step_data.day>cd){
-                this.journey_step_data.section +=1;
-                if(this.journey_step_data.section>=this.journey_data.main.length){
-                    this.journey_step_data.section = this.journey_data.main.length-1;
-                    this.journey_step_data.day = cd
-                }else{
-                    this.journey_step_data.day = 1;
-                }
-            }
 
-        },
-        prev_step: function(){
-            this.journey_step_data.day -=1;
-            if(this.journey_step_data.day<=0){
-                this.journey_step_data.section -=1;
-                if(this.journey_step_data.section <0){
-                    this.first_step();
-                }else{
-                    let s = this.journey_step_data.section;
-                    
-                    let cd = this.step_len(s);
-                    this.journey_step_data.day = cd ;
-                }
-            }
-        },
-        nextnext_step: function(){
-            this.journey_step_data.section += 1;
-            this.journey_step_data.day = 1;
-            if(this.journey_step_data.section>=this.journey_data.main.length)
-                this.first_step();
-        },
-        prevprev_step: function(){
-            this.journey_step_data.section -= 1;
-            this.journey_step_data.day = 1;
-            if(this.journey_step_data.section<0)
-                this.first_step();
-        },
-        first_step: function(){
-            this.journey_step_data.section =0;
-            this.journey_step_data.day = 1;
-        },
-
-        active_date: function(){
-            if(this.journey_step_data.day < 0) return "?";
-            if(!this.journey_data.main[this.journey_step_data.section].dateRange) return "?";
-            var date = new Date(this.journey_data.main[this.journey_step_data.section].dateRange[0]);
-            date.setDate(date.getDate() + this.journey_step_data.day-1);
-            return this.format_date(date)
-        },
-        format_date: function(d){
-            return ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'][d.getDay()] + ' ' 
-                + d.getDate() + ' '
-                + ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'][d.getMonth()];
-        },
-
-        total_days: function(){
-            if(this.journey_data.main.length==0) return 0;
-            try{
-                return (this.journey_data.main[this.journey_data.main.length-1].dateRange[1]-this.journey_data.main[0].dateRange[0])/(1000*60*60*24)
-            }catch{
-                return '?'
-            }
-        },
-        total_date: function(){
-            if(this.journey_data.main.length==0) return '';
-            try{
-                return `${this.format_date(this.journey_data.main[0].dateRange[0])} - ${this.format_date(this.journey_data.main[this.journey_data.main.length-1].dateRange[1])}`;
-            }catch{
-                return '?';
-            }
-        },
-        update_date: function(idx){
-            let dateRange = this.journey_data.main[idx].dateRange;
-            let start_end = [0,0];
-            let step_len = 0;
-
-            let last_start = dateRange[0];
-            for(let i = idx-1; i >=0; --i){
-                step_len = this.step_len(i)-1;
-                if (this.journey_data.main[i].dateRange){
-                    start_end = [last_start.getDate() - step_len, last_start.getDate()];
-                }else{
-                    this.journey_data.main[i].dateRange= [new Date(), new Date()] 
-                    start_end = [last_start.getDate() - step_len, last_start.getDate()];
-                }
-                this.journey_data.main[i].dateRange[0].setTime(last_start.getTime())
-                this.journey_data.main[i].dateRange[0].setDate(start_end[0]);
-                this.journey_data.main[i].dateRange[1].setTime(last_start.getTime())
-                this.journey_data.main[i].dateRange[1].setDate(start_end[1]);
-                last_start = this.journey_data.main[i].dateRange[0];
-            }
-
-            let last_end = dateRange[1];
-            for(let i = idx+1; i<this.journey_data.main.length; ++i){
-                step_len = this.step_len(i)-1;
-                if (this.journey_data.main[i].dateRange){
-                    start_end = [last_end.getDate(), last_end.getDate() + step_len];
-                }else{
-                    this.journey_data.main[i].dateRange= [new Date(), new Date()] 
-                    start_end = [last_end.getDate(), last_end.getDate() + step_len];
-                }
-                this.journey_data.main[i].dateRange[0].setTime(last_end.getTime())
-                this.journey_data.main[i].dateRange[0].setDate(start_end[0]);
-                this.journey_data.main[i].dateRange[1].setTime(last_end.getTime())
-                this.journey_data.main[i].dateRange[1].setDate(start_end[1]);
-                last_end = this.journey_data.main[i].dateRange[1];
-            }
-        },
-
-        rm_section: function(idx){
-            this.journey_data.main.splice(idx,1);
-            if(this.journey_step_data.section==idx){
-                this.prevprev_step();
-            }
-        },
-        sel_section: function(idx){
-            this.journey_step_data.section = idx;
-            this.journey_step_data.day = 1;
-        },
-        search_nominatim: function(txt,f){
-            if(txt==""){
-                this.query.nominatim=[];
-                return Promise.resolve([]);
-            }
-            return query_nominatim(txt,f)
-            .then((results) =>{
-                results.forEach(r=>{
-                    r.latlon=[parseFloat(r.lat),parseFloat(r.lon)];
-                    r.sname=r.display_name.split(',')[0];
-                })
-                this.query.nominatim=results;
-            });
-        },
-        search_flight: function(txt){
-            if(txt=="") return;
-            this.querying.flight=true;
-            query_flight(txt.replace(" ", ""))
-            .then((results) =>{
-                if(results.results==""){
-                    this.query.flight=[];this.querying.flight=false;return;
-                }
-                this.query.flight=results.results;
-                this.querying.flight=false;
-            });
-    
-        },
-        generate_icon: function(item,fcolor){
-            return L.AwesomeMarkers.icon({
-                icon: icon_type(item) || 'star', prefix: 'fa',
-                markerColor: fcolor || item.color || 'blue'}
-            ).createIcon().outerHTML
-        },
-
-        save_data: function(){
-            this.impexp = toEncoded(JSON.stringify(this.journey_data));
-            axios.post('/api/'+this.journey_id, this.journey_data).then(response => {
-              console.log("Saved...")
-            }).catch(error => {
-              console.warn('Error! Could not reach the API.')
-            })
-        },
-        import_data:function(){
-            this.journey_data = Object.assign({}, JSON.parse(toDecoded(this.impexp)));
-            this.journey_data.main.forEach(e=>{
-                if(e.dateRange){
-                    e.dateRange[0] = new Date(e.dateRange[0]);
-                    e.dateRange[1] = new Date(e.dateRange[1]);
-                }
-            })
-        },
-        export_data:function(){
-            this.impexp = toEncoded(JSON.stringify(this.journey_data));
-        },
-        filter_selected:function(list,step){
-            return list.filter(e=>(step?(e.step==this.journey_step_data.day):(e.step>=0)))
-        },
-        filter_unselected:function(list){
-            return list.filter(e=>(e.step==undefined || e.step<0))
-        },
-        remove_item:function(list,idx){
-            list[idx].step=-1;
-            list.splice(idx, 1);
-        },
-        log:function(e){console.log(e)},
-
-        keyboardEvent (e) {
-            if (e.which === 13) {
-            }
-        },
+    query: { hotel: [], flight: [], nominatim: [] },
+    querying: { hotel: false, flight: false, place: false, food: false },
+    impexp: "",
+    lang: {
+      format: "ddd D MMM",
+      formatLocale: {
+        firstDayOfWeek: 1,
+      },
+      monthBeforeYear: true,
     },
-    created: function () {
+  },
+  methods: {
+    start_journey: function (event) {
+      window.location.href = "/" + this.journey_id;
+    },
+    add_section: function (event) {
+      if (this.journey_data.main == undefined) this.journey_data.main = [];
+      this.journey_data.main.push({
+        title: "?",
+        step_title: [],
+        map: { zoom: 2 },
+        hotel: { latlon: [0, 0] },
+        places: { restaurants: [], places: [] },
+      });
+    },
+    step_len: function (idx) {
+      return this.journey_data.main[idx].dateRange
+        ? (this.journey_data.main[idx].dateRange[1] -
+            this.journey_data.main[idx].dateRange[0]) /
+            (1000 * 60 * 60 * 24) +
+            1
+        : 1;
+    },
+    next_step: function () {
+      this.journey_step_data.day += 1;
+      let s = this.journey_step_data.section;
+      let cd = this.step_len(s);
 
-        window.addEventListener('keydown', (e) => {
-            switch(e.key){
-                case 'ArrowLeft': this.prev_step(); break;
-                case 'ArrowRight': this.next_step(); break;
-                default: console.log(e.key);
-            }
+      if (this.journey_step_data.day > cd) {
+        this.journey_step_data.section += 1;
+        if (this.journey_step_data.section >= this.journey_data.main.length) {
+          this.journey_step_data.section = this.journey_data.main.length - 1;
+          this.journey_step_data.day = cd;
+        } else {
+          this.journey_step_data.day = 1;
+        }
+      }
+    },
+    prev_step: function () {
+      this.journey_step_data.day -= 1;
+      if (this.journey_step_data.day <= 0) {
+        this.journey_step_data.section -= 1;
+        if (this.journey_step_data.section < 0) {
+          this.first_step();
+        } else {
+          let s = this.journey_step_data.section;
+
+          let cd = this.step_len(s);
+          this.journey_step_data.day = cd;
+        }
+      }
+    },
+    nextnext_step: function () {
+      this.journey_step_data.section += 1;
+      this.journey_step_data.day = 1;
+      if (this.journey_step_data.section >= this.journey_data.main.length)
+        this.first_step();
+    },
+    prevprev_step: function () {
+      this.journey_step_data.section -= 1;
+      this.journey_step_data.day = 1;
+      if (this.journey_step_data.section < 0) this.first_step();
+    },
+    first_step: function () {
+      this.journey_step_data.section = 0;
+      this.journey_step_data.day = 1;
+    },
+
+    active_date: function () {
+      if (this.journey_step_data.day < 0) return "?";
+      if (!this.journey_data.main[this.journey_step_data.section].dateRange)
+        return "?";
+      var date = new Date(
+        this.journey_data.main[this.journey_step_data.section].dateRange[0],
+      );
+      date.setDate(date.getDate() + this.journey_step_data.day - 1);
+      return this.format_date(date);
+    },
+    format_date: function (d) {
+      return (
+        ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"][d.getDay()] +
+        " " +
+        d.getDate() +
+        " " +
+        [
+          "Jan",
+          "Feb",
+          "Mar",
+          "Apr",
+          "May",
+          "Jun",
+          "Jul",
+          "Aug",
+          "Sep",
+          "Oct",
+          "Nov",
+          "Dec",
+        ][d.getMonth()]
+      );
+    },
+
+    total_days: function () {
+      if (this.journey_data.main.length == 0) return 0;
+      try {
+        return (
+          (this.journey_data.main[this.journey_data.main.length - 1]
+            .dateRange[1] -
+            this.journey_data.main[0].dateRange[0]) /
+          (1000 * 60 * 60 * 24)
+        );
+      } catch {
+        return "?";
+      }
+    },
+    total_date: function () {
+      if (this.journey_data.main.length == 0) return "";
+      try {
+        return `${this.format_date(
+          this.journey_data.main[0].dateRange[0],
+        )} - ${this.format_date(
+          this.journey_data.main[this.journey_data.main.length - 1]
+            .dateRange[1],
+        )}`;
+      } catch {
+        return "?";
+      }
+    },
+    update_date: function (idx) {
+      let dateRange = this.journey_data.main[idx].dateRange;
+      let start_end = [0, 0];
+      let step_len = 0;
+
+      let last_start = dateRange[0];
+      for (let i = idx - 1; i >= 0; --i) {
+        step_len = this.step_len(i) - 1;
+        if (this.journey_data.main[i].dateRange) {
+          start_end = [last_start.getDate() - step_len, last_start.getDate()];
+        } else {
+          this.journey_data.main[i].dateRange = [new Date(), new Date()];
+          start_end = [last_start.getDate() - step_len, last_start.getDate()];
+        }
+        this.journey_data.main[i].dateRange[0].setTime(last_start.getTime());
+        this.journey_data.main[i].dateRange[0].setDate(start_end[0]);
+        this.journey_data.main[i].dateRange[1].setTime(last_start.getTime());
+        this.journey_data.main[i].dateRange[1].setDate(start_end[1]);
+        last_start = this.journey_data.main[i].dateRange[0];
+      }
+
+      let last_end = dateRange[1];
+      for (let i = idx + 1; i < this.journey_data.main.length; ++i) {
+        step_len = this.step_len(i) - 1;
+        if (this.journey_data.main[i].dateRange) {
+          start_end = [last_end.getDate(), last_end.getDate() + step_len];
+        } else {
+          this.journey_data.main[i].dateRange = [new Date(), new Date()];
+          start_end = [last_end.getDate(), last_end.getDate() + step_len];
+        }
+        this.journey_data.main[i].dateRange[0].setTime(last_end.getTime());
+        this.journey_data.main[i].dateRange[0].setDate(start_end[0]);
+        this.journey_data.main[i].dateRange[1].setTime(last_end.getTime());
+        this.journey_data.main[i].dateRange[1].setDate(start_end[1]);
+        last_end = this.journey_data.main[i].dateRange[1];
+      }
+    },
+
+    rm_section: function (idx) {
+      this.journey_data.main.splice(idx, 1);
+      if (this.journey_step_data.section == idx) {
+        this.prevprev_step();
+      }
+    },
+    sel_section: function (idx) {
+      this.journey_step_data.section = idx;
+      this.journey_step_data.day = 1;
+    },
+    search_nominatim: function (txt, f) {
+      if (txt == "") {
+        this.query.nominatim = [];
+        return Promise.resolve([]);
+      }
+      return query_nominatim(txt, f).then((results) => {
+        results.forEach((r) => {
+          r.latlon = [parseFloat(r.lat), parseFloat(r.lon)];
+          r.sname = r.display_name.split(",")[0];
         });
+        this.query.nominatim = results;
+      });
+    },
+    search_flight: function (txt) {
+      if (txt == "") return;
+      this.querying.flight = true;
+      query_flight(txt.replace(" ", "")).then((results) => {
+        if (results.results == "") {
+          this.query.flight = [];
+          this.querying.flight = false;
+          return;
+        }
+        this.query.flight = results.results;
+        this.querying.flight = false;
+      });
+    },
+    generate_icon: function (item, fcolor) {
+      return L.AwesomeMarkers.icon({
+        icon: icon_type(item) || "star",
+        prefix: "fa",
+        markerColor: fcolor || item.color || "blue",
+      }).createIcon().outerHTML;
+    },
 
-        axios.get('/api/'+this.journey_id).then(response =>{
-            if(response.data=='') throw "Invalid Journey Data Received";
-            app.journey_data = response.data;
-            
-            for(let e of app.journey_data.main){
-                if(e.dateRange){
-                    e.dateRange[0]= new Date(e.dateRange[0]);
-                    e.dateRange[1]= new Date(e.dateRange[1]);
-                }
-                e.step_title = e.step_title || [];
-            }
+    save_data: function () {
+      this.impexp = toEncoded(JSON.stringify(this.journey_data));
+      axios
+        .post("/api/" + this.journey_id, this.journey_data)
+        .then((response) => {
+          console.log("Saved...");
+        })
+        .catch((error) => {
+          console.warn("Error! Could not reach the API.");
         });
-        
-        
-        this.debounceSave = _.debounce(this.save_data, 500)
-        this.debounceSearch = {"hotel":_.debounce((q)=>{this.querying.hotel=true;this.search_nominatim(q,(r)=>(r.type=="hotel" || r.type=="hostel")).then((r)=>{this.querying.hotel=false});}, 500),
-                               "restaurants":_.debounce((q)=>{this.querying.food=true;this.search_nominatim(q,(r)=>(is_restauration_type(r))).then((r)=>{this.querying.food=false});}, 500),
-                               "places":_.debounce((q)=>{this.querying.place=true;this.search_nominatim(q,(r)=>(is_attraction_type(r))).then((r)=>{this.querying.place=false});}, 500),
-                               "other":_.debounce((q)=>{this.querying.any=true;this.search_nominatim(q,(r)=>(true)).then((r)=>{this.querying.any=false});}, 500),
-                               "flight":_.debounce((q)=>this.search_flight(q), 500)
-                           }
     },
-    watch: {
-        journey_data: {
-            handler:function (ndata, odata){ 
-                this.debounceSave();
-            },
-            deep: true,
-        },
+    import_data: function () {
+      this.journey_data = Object.assign({}, JSON.parse(toDecoded(this.impexp)));
+      this.journey_data.main.forEach((e) => {
+        if (e.dateRange) {
+          e.dateRange[0] = new Date(e.dateRange[0]);
+          e.dateRange[1] = new Date(e.dateRange[1]);
+        }
+      });
+    },
+    export_data: function () {
+      this.impexp = toEncoded(JSON.stringify(this.journey_data));
+    },
+    filter_selected: function (list, step) {
+      return list.filter((e) =>
+        step ? e.step == this.journey_step_data.day : e.step >= 0,
+      );
+    },
+    filter_unselected: function (list) {
+      return list.filter((e) => e.step == undefined || e.step < 0);
+    },
+    remove_item: function (list, idx) {
+      list[idx].step = -1;
+      list.splice(idx, 1);
+    },
+    log: function (e) {
+      console.log(e);
     },
-})
 
+    keyboardEvent(e) {
+      if (e.which === 13) {
+      }
+    },
+  },
+  created: function () {
+    window.addEventListener("keydown", (e) => {
+      switch (e.key) {
+        case "ArrowLeft":
+          this.prev_step();
+          break;
+        case "ArrowRight":
+          this.next_step();
+          break;
+        default:
+          console.log(e.key);
+      }
+    });
 
+    axios.get("/api/" + this.journey_id).then((response) => {
+      if (response.data == "") throw "Invalid Journey Data Received";
+      app.journey_data = response.data;
+
+      for (let e of app.journey_data.main) {
+        if (e.dateRange) {
+          e.dateRange[0] = new Date(e.dateRange[0]);
+          e.dateRange[1] = new Date(e.dateRange[1]);
+        }
+        e.step_title = e.step_title || [];
+      }
+    });
+
+    this.debounceSave = _.debounce(this.save_data, 500);
+    this.debounceSearch = {
+      hotel: _.debounce((q) => {
+        this.querying.hotel = true;
+        this.search_nominatim(
+          q,
+          (r) => r.type == "hotel" || r.type == "hostel",
+        ).then((r) => {
+          this.querying.hotel = false;
+        });
+      }, 500),
+      restaurants: _.debounce((q) => {
+        this.querying.food = true;
+        this.search_nominatim(q, (r) => is_restauration_type(r)).then((r) => {
+          this.querying.food = false;
+        });
+      }, 500),
+      places: _.debounce((q) => {
+        this.querying.place = true;
+        this.search_nominatim(q, (r) => is_attraction_type(r)).then((r) => {
+          this.querying.place = false;
+        });
+      }, 500),
+      other: _.debounce((q) => {
+        this.querying.any = true;
+        this.search_nominatim(q, (r) => true).then((r) => {
+          this.querying.any = false;
+        });
+      }, 500),
+      flight: _.debounce((q) => this.search_flight(q), 500),
+    };
+  },
+  watch: {
+    journey_data: {
+      handler: function (ndata, odata) {
+        this.debounceSave();
+      },
+      deep: true,
+    },
+  },
+});
diff --git a/router/api.js b/router/api.js
index ae222c1..1bb5aec 100644
--- a/router/api.js
+++ b/router/api.js
@@ -1,68 +1,72 @@
-const axios = require('axios');
+const axios = require("axios");
 
 module.exports = (fastify, opts, done) => {
-	fastify.get('/flight/:id', async (req,reply) => {
-		const ENDPOINT = 'https://www.flightradar24.com/v1/search/web/find';
-		const FORMAT = '-';
-		if(req.params.id){
-			axios.get(ENDPOINT,{
-			    params: {
-			        format: FORMAT,
-			        query: req.params.id,
-			        limit:16,
-			        type: 'schedule'
-			    }
-			}).then(res=>reply.send(res.data));
-		}else{
-			return reply.send([]);
-		}
-		return reply
-	});
-	fastify.get('/place/:id', async (req,reply) => {
-		const ENDPOINT = 'https://nominatim.openstreetmap.org/';
-		const FORMAT = 'jsonv2';
-		if(req.params.id){
-			axios.get(ENDPOINT,{
-			    params: {
-			        format: FORMAT,
-			        q: req.params.id,
-			    }
-			}).then(res=>reply.send(res.data));
-		}else{
-			return reply.send([]);
-		}
-		return reply;
-	});	
+  fastify.get("/flight/:id", async (req, reply) => {
+    const ENDPOINT = "https://www.flightradar24.com/v1/search/web/find";
+    const FORMAT = "-";
+    if (req.params.id) {
+      axios
+        .get(ENDPOINT, {
+          params: {
+            format: FORMAT,
+            query: req.params.id,
+            limit: 16,
+            type: "schedule",
+          },
+        })
+        .then((res) => reply.send(res.data));
+    } else {
+      return reply.send([]);
+    }
+    return reply;
+  });
+  fastify.get("/place/:id", async (req, reply) => {
+    const ENDPOINT = "https://nominatim.openstreetmap.org/";
+    const FORMAT = "jsonv2";
+    if (req.params.id) {
+      axios
+        .get(ENDPOINT, {
+          params: {
+            format: FORMAT,
+            q: req.params.id,
+          },
+        })
+        .then((res) => reply.send(res.data));
+    } else {
+      return reply.send([]);
+    }
+    return reply;
+  });
 
-	fastify.get('/:id', async (req, reply) => {		
-		if(req.params.id == undefined)
-			return reply.code(400).send({error:"No ID query parameter"});
+  fastify.get("/:id", async (req, reply) => {
+    if (req.params.id == undefined)
+      return reply.code(400).send({ error: "No ID query parameter" });
 
-		fastify.level.db.get(req.params.id, (err, val) => {
-		  	if(err){
-				console.warn(err);
-		  		reply.code(500).send();
-		  	} else {
-		  		reply.send(JSON.parse(val));
-			}
-		});
-		return reply
-	});
+    fastify.level.db.get(req.params.id, (err, val) => {
+      if (err) {
+        console.warn(err);
+        reply.code(500).send();
+      } else {
+        reply.send(JSON.parse(val));
+      }
+    });
+    return reply;
+  });
 
-	fastify.post('/:id', async (req, reply) => {
-		if(req.params.id == undefined)
-			return reply.code(400).send({error:"No ID query parameter"});
+  fastify.post("/:id", async (req, reply) => {
+    if (req.params.id == undefined)
+      return reply.code(400).send({ error: "No ID query parameter" });
 
-		fastify.level.db.put(req.params.id, JSON.stringify(req.body), (err) => {
-			if(err){
-				console.warn(err);
-		  		reply.code(500).send({error:"Error with DB"});
-		  	} else {
-		  		reply.send({content:"ok"});
-			}
-		});
-		return reply
-	});
+    fastify.level.db.put(req.params.id, JSON.stringify(req.body), (err) => {
+      if (err) {
+        console.warn(err);
+        reply.code(500).send({ error: "Error with DB" });
+      } else {
+        reply.send({ content: "ok" });
+      }
+    });
+    return reply;
+  });
 
-    done();
-};
\ No newline at end of file
+  done();
+};
diff --git a/server.js b/server.js
index fe33c25..4ca1f6d 100644
--- a/server.js
+++ b/server.js
@@ -1,35 +1,35 @@
-const fastify = require('fastify')();//{ logger: true });
-const path = require('path');
+const fastify = require("fastify")(); //{ logger: true });
+const path = require("path");
 
-fastify.register(require('@fastify/static'), {
-  root: path.join(__dirname, 'public'),
-  prefix: '/public/',
+fastify.register(require("@fastify/static"), {
+  root: path.join(__dirname, "public"),
+  prefix: "/public/",
 });
 
-fastify.register(require('@fastify/leveldb'), {
-  name: 'db'
-}, err => {
-	if (err) throw err
-});
+fastify.register(
+  require("@fastify/leveldb"),
+  {
+    name: "db",
+  },
+  (err) => {
+    if (err) throw err;
+  },
+);
 
 fastify.register(require("@fastify/view"), {
-	engine: {
-		pug: require("pug"),
-	},
+  engine: {
+    pug: require("pug"),
+  },
 });
 
+fastify.register(require("./router/api"), { prefix: "/api" });
 
-fastify.register(require('./router/api'), { prefix: '/api' });
+fastify.get("/", (req, reply) => reply.view("/template/home.pug"));
+fastify.get("/:id", (req, reply) => reply.view("/template/journey.pug"));
+fastify.get("/view/:id", (req, reply) => reply.view("/template/view.pug"));
+fastify.get("/short/:id", (req, reply) => reply.view("/template/short.pug"));
 
-
-fastify.get('/', (req, reply) => reply.view("/template/home.pug", ));
-fastify.get('/:id', (req, reply) => reply.view('/template/journey.pug'));
-fastify.get('/view/:id', (req, reply) => reply.view('/template/view.pug'));
-fastify.get('/short/:id', (req, reply) => reply.view('/template/short.pug'));
-
-
-fastify.listen({port:8080,host:'0.0.0.0'} ,(err,address) => {
-	if (err) throw err;
-	console.log("Listening on", address);
-
-});
\ No newline at end of file
+fastify.listen({ port: 8080, host: "0.0.0.0" }, (err, address) => {
+  if (err) throw err;
+  console.log("Listening on", address);
+});
diff --git a/yarn.lock b/yarn.lock
index ef96c74..e9737fa 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -104,6 +104,13 @@
   resolved "https://registry.yarnpkg.com/@lukeed/ms/-/ms-2.0.1.tgz#3c2bbc258affd9cc0e0cc7828477383c73afa6ee"
   integrity sha512-Xs/4RZltsAL7pkvaNStUQt7netTkyxrS0K+RILcVr3TRMS/ToOg4I6uNfhB9SlGsnWBym4U+EaXq0f0cEMNkHA==
 
+"@prettier/plugin-pug@^2.5.1":
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/@prettier/plugin-pug/-/plugin-pug-2.5.1.tgz#ea7fc06cc6b86a5d3ad6607d8e50b2bab30fcc40"
+  integrity sha512-rauAMYyTv6tgoo4DZ+1TwpytjaoJgcg+8btp0CfAUaHwjxfNo4cuAGgsJS6WVT7vx2Sz4Pkos50xuSNZuvJAWQ==
+  dependencies:
+    pug-lexer "^5.0.1"
+
 abbrev@1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8"
@@ -908,6 +915,11 @@ pino@^8.12.0:
     sonic-boom "^3.1.0"
     thread-stream "^2.0.0"
 
+prettier@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.0.0.tgz#e7b19f691245a21d618c68bc54dc06122f6105ae"
+  integrity sha512-zBf5eHpwHOGPC47h0zrPyNn+eAEIdEzfywMoYn2XPi0P44Zp0tSq64rq0xAREh4auw2cJZHo9QUob+NqCQky4g==
+
 process-warning@^2.0.0, process-warning@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/process-warning/-/process-warning-2.2.0.tgz#008ec76b579820a8e5c35d81960525ca64feb626"