diff --git a/frontend/polyfills/fetch.js b/frontend/polyfills/fetch.js
new file mode 100644
index 000000000..ac9a4fd87
--- /dev/null
+++ b/frontend/polyfills/fetch.js
@@ -0,0 +1,466 @@
+(function(self) {
+  'use strict';
+
+  if (self.fetch) {
+    return
+  }
+
+  var support = {
+    searchParams: 'URLSearchParams' in self,
+    iterable: 'Symbol' in self && 'iterator' in Symbol,
+    blob: 'FileReader' in self && 'Blob' in self && (function() {
+      try {
+        new Blob()
+        return true
+      } catch(e) {
+        return false
+      }
+    })(),
+    formData: 'FormData' in self,
+    arrayBuffer: 'ArrayBuffer' in self
+  }
+
+  if (support.arrayBuffer) {
+    var viewClasses = [
+      '[object Int8Array]',
+      '[object Uint8Array]',
+      '[object Uint8ClampedArray]',
+      '[object Int16Array]',
+      '[object Uint16Array]',
+      '[object Int32Array]',
+      '[object Uint32Array]',
+      '[object Float32Array]',
+      '[object Float64Array]'
+    ]
+
+    var isDataView = function(obj) {
+      return obj && DataView.prototype.isPrototypeOf(obj)
+    }
+
+    var isArrayBufferView = ArrayBuffer.isView || function(obj) {
+      return obj && viewClasses.indexOf(Object.prototype.toString.call(obj)) > -1
+    }
+  }
+
+  function normalizeName(name) {
+    if (typeof name !== 'string') {
+      name = String(name)
+    }
+    if (/[^a-z0-9\-#$%&'*+.\^_`|~]/i.test(name)) {
+      throw new TypeError('Invalid character in header field name')
+    }
+    return name.toLowerCase()
+  }
+
+  function normalizeValue(value) {
+    if (typeof value !== 'string') {
+      value = String(value)
+    }
+    return value
+  }
+
+  // Build a destructive iterator for the value list
+  function iteratorFor(items) {
+    var iterator = {
+      next: function() {
+        var value = items.shift()
+        return {done: value === undefined, value: value}
+      }
+    }
+
+    if (support.iterable) {
+      iterator[Symbol.iterator] = function() {
+        return iterator
+      }
+    }
+
+    return iterator
+  }
+
+  function Headers(headers) {
+    this.map = {}
+
+    if (headers instanceof Headers) {
+      headers.forEach(function(value, name) {
+        this.append(name, value)
+      }, this)
+    } else if (Array.isArray(headers)) {
+      headers.forEach(function(header) {
+        this.append(header[0], header[1])
+      }, this)
+    } else if (headers) {
+      Object.getOwnPropertyNames(headers).forEach(function(name) {
+        this.append(name, headers[name])
+      }, this)
+    }
+  }
+
+  Headers.prototype.append = function(name, value) {
+    name = normalizeName(name)
+    value = normalizeValue(value)
+    var oldValue = this.map[name]
+    this.map[name] = oldValue ? oldValue+','+value : value
+  }
+
+  Headers.prototype['delete'] = function(name) {
+    delete this.map[normalizeName(name)]
+  }
+
+  Headers.prototype.get = function(name) {
+    name = normalizeName(name)
+    return this.has(name) ? this.map[name] : null
+  }
+
+  Headers.prototype.has = function(name) {
+    return this.map.hasOwnProperty(normalizeName(name))
+  }
+
+  Headers.prototype.set = function(name, value) {
+    this.map[normalizeName(name)] = normalizeValue(value)
+  }
+
+  Headers.prototype.forEach = function(callback, thisArg) {
+    for (var name in this.map) {
+      if (this.map.hasOwnProperty(name)) {
+        callback.call(thisArg, this.map[name], name, this)
+      }
+    }
+  }
+
+  Headers.prototype.keys = function() {
+    var items = []
+    this.forEach(function(value, name) { items.push(name) })
+    return iteratorFor(items)
+  }
+
+  Headers.prototype.values = function() {
+    var items = []
+    this.forEach(function(value) { items.push(value) })
+    return iteratorFor(items)
+  }
+
+  Headers.prototype.entries = function() {
+    var items = []
+    this.forEach(function(value, name) { items.push([name, value]) })
+    return iteratorFor(items)
+  }
+
+  if (support.iterable) {
+    Headers.prototype[Symbol.iterator] = Headers.prototype.entries
+  }
+
+  function consumed(body) {
+    if (body.bodyUsed) {
+      return Promise.reject(new TypeError('Already read'))
+    }
+    body.bodyUsed = true
+  }
+
+  function fileReaderReady(reader) {
+    return new Promise(function(resolve, reject) {
+      reader.onload = function() {
+        resolve(reader.result)
+      }
+      reader.onerror = function() {
+        reject(reader.error)
+      }
+    })
+  }
+
+  function readBlobAsArrayBuffer(blob) {
+    var reader = new FileReader()
+    var promise = fileReaderReady(reader)
+    reader.readAsArrayBuffer(blob)
+    return promise
+  }
+
+  function readBlobAsText(blob) {
+    var reader = new FileReader()
+    var promise = fileReaderReady(reader)
+    reader.readAsText(blob)
+    return promise
+  }
+
+  function readArrayBufferAsText(buf) {
+    var view = new Uint8Array(buf)
+    var chars = new Array(view.length)
+
+    for (var i = 0; i < view.length; i++) {
+      chars[i] = String.fromCharCode(view[i])
+    }
+    return chars.join('')
+  }
+
+  function bufferClone(buf) {
+    if (buf.slice) {
+      return buf.slice(0)
+    } else {
+      var view = new Uint8Array(buf.byteLength)
+      view.set(new Uint8Array(buf))
+      return view.buffer
+    }
+  }
+
+  function Body() {
+    this.bodyUsed = false
+
+    this._initBody = function(body) {
+      this._bodyInit = body
+      if (!body) {
+        this._bodyText = ''
+      } else if (typeof body === 'string') {
+        this._bodyText = body
+      } else if (support.blob && Blob.prototype.isPrototypeOf(body)) {
+        this._bodyBlob = body
+      } else if (support.formData && FormData.prototype.isPrototypeOf(body)) {
+        this._bodyFormData = body
+      } else if (support.searchParams && URLSearchParams.prototype.isPrototypeOf(body)) {
+        this._bodyText = body.toString()
+      } else if (support.arrayBuffer && support.blob && isDataView(body)) {
+        this._bodyArrayBuffer = bufferClone(body.buffer)
+        // IE 10-11 can't handle a DataView body.
+        this._bodyInit = new Blob([this._bodyArrayBuffer])
+      } else if (support.arrayBuffer && (ArrayBuffer.prototype.isPrototypeOf(body) || isArrayBufferView(body))) {
+        this._bodyArrayBuffer = bufferClone(body)
+      } else {
+        throw new Error('unsupported BodyInit type')
+      }
+
+      if (!this.headers.get('content-type')) {
+        if (typeof body === 'string') {
+          this.headers.set('content-type', 'text/plain;charset=UTF-8')
+        } else if (this._bodyBlob && this._bodyBlob.type) {
+          this.headers.set('content-type', this._bodyBlob.type)
+        } else if (support.searchParams && URLSearchParams.prototype.isPrototypeOf(body)) {
+          this.headers.set('content-type', 'application/x-www-form-urlencoded;charset=UTF-8')
+        }
+      }
+    }
+
+    if (support.blob) {
+      this.blob = function() {
+        var rejected = consumed(this)
+        if (rejected) {
+          return rejected
+        }
+
+        if (this._bodyBlob) {
+          return Promise.resolve(this._bodyBlob)
+        } else if (this._bodyArrayBuffer) {
+          return Promise.resolve(new Blob([this._bodyArrayBuffer]))
+        } else if (this._bodyFormData) {
+          throw new Error('could not read FormData body as blob')
+        } else {
+          return Promise.resolve(new Blob([this._bodyText]))
+        }
+      }
+
+      this.arrayBuffer = function() {
+        if (this._bodyArrayBuffer) {
+          return consumed(this) || Promise.resolve(this._bodyArrayBuffer)
+        } else {
+          return this.blob().then(readBlobAsArrayBuffer)
+        }
+      }
+    }
+
+    this.text = function() {
+      var rejected = consumed(this)
+      if (rejected) {
+        return rejected
+      }
+
+      if (this._bodyBlob) {
+        return readBlobAsText(this._bodyBlob)
+      } else if (this._bodyArrayBuffer) {
+        return Promise.resolve(readArrayBufferAsText(this._bodyArrayBuffer))
+      } else if (this._bodyFormData) {
+        throw new Error('could not read FormData body as text')
+      } else {
+        return Promise.resolve(this._bodyText)
+      }
+    }
+
+    if (support.formData) {
+      this.formData = function() {
+        return this.text().then(decode)
+      }
+    }
+
+    this.json = function() {
+      return this.text().then(JSON.parse)
+    }
+
+    return this
+  }
+
+  // HTTP methods whose capitalization should be normalized
+  var methods = ['DELETE', 'GET', 'HEAD', 'OPTIONS', 'POST', 'PUT']
+
+  function normalizeMethod(method) {
+    var upcased = method.toUpperCase()
+    return (methods.indexOf(upcased) > -1) ? upcased : method
+  }
+
+  function Request(input, options) {
+    options = options || {}
+    var body = options.body
+
+    if (input instanceof Request) {
+      if (input.bodyUsed) {
+        throw new TypeError('Already read')
+      }
+      this.url = input.url
+      this.credentials = input.credentials
+      if (!options.headers) {
+        this.headers = new Headers(input.headers)
+      }
+      this.method = input.method
+      this.mode = input.mode
+      if (!body && input._bodyInit != null) {
+        body = input._bodyInit
+        input.bodyUsed = true
+      }
+    } else {
+      this.url = String(input)
+    }
+
+    this.credentials = options.credentials || this.credentials || 'omit'
+    if (options.headers || !this.headers) {
+      this.headers = new Headers(options.headers)
+    }
+    this.method = normalizeMethod(options.method || this.method || 'GET')
+    this.mode = options.mode || this.mode || null
+    this.referrer = null
+
+    if ((this.method === 'GET' || this.method === 'HEAD') && body) {
+      throw new TypeError('Body not allowed for GET or HEAD requests')
+    }
+    this._initBody(body)
+  }
+
+  Request.prototype.clone = function() {
+    return new Request(this, { body: this._bodyInit })
+  }
+
+  function decode(body) {
+    var form = new FormData()
+    body.trim().split('&').forEach(function(bytes) {
+      if (bytes) {
+        var split = bytes.split('=')
+        var name = split.shift().replace(/\+/g, ' ')
+        var value = split.join('=').replace(/\+/g, ' ')
+        form.append(decodeURIComponent(name), decodeURIComponent(value))
+      }
+    })
+    return form
+  }
+
+  function parseHeaders(rawHeaders) {
+    var headers = new Headers()
+    // Replace instances of \r\n and \n followed by at least one space or horizontal tab with a space
+    // https://tools.ietf.org/html/rfc7230#section-3.2
+    var preProcessedHeaders = rawHeaders.replace(/\r?\n[\t ]+/g, ' ')
+    preProcessedHeaders.split(/\r?\n/).forEach(function(line) {
+      var parts = line.split(':')
+      var key = parts.shift().trim()
+      if (key) {
+        var value = parts.join(':').trim()
+        headers.append(key, value)
+      }
+    })
+    return headers
+  }
+
+  Body.call(Request.prototype)
+
+  function Response(bodyInit, options) {
+    if (!options) {
+      options = {}
+    }
+
+    this.type = 'default'
+    this.status = options.status === undefined ? 200 : options.status
+    this.ok = this.status >= 200 && this.status < 300
+    this.statusText = 'statusText' in options ? options.statusText : 'OK'
+    this.headers = new Headers(options.headers)
+    this.url = options.url || ''
+    this._initBody(bodyInit)
+  }
+
+  Body.call(Response.prototype)
+
+  Response.prototype.clone = function() {
+    return new Response(this._bodyInit, {
+      status: this.status,
+      statusText: this.statusText,
+      headers: new Headers(this.headers),
+      url: this.url
+    })
+  }
+
+  Response.error = function() {
+    var response = new Response(null, {status: 0, statusText: ''})
+    response.type = 'error'
+    return response
+  }
+
+  var redirectStatuses = [301, 302, 303, 307, 308]
+
+  Response.redirect = function(url, status) {
+    if (redirectStatuses.indexOf(status) === -1) {
+      throw new RangeError('Invalid status code')
+    }
+
+    return new Response(null, {status: status, headers: {location: url}})
+  }
+
+  self.Headers = Headers
+  self.Request = Request
+  self.Response = Response
+
+  self.fetch = function(input, init) {
+    return new Promise(function(resolve, reject) {
+      var request = new Request(input, init)
+      var xhr = new XMLHttpRequest()
+
+      xhr.onload = function() {
+        var options = {
+          status: xhr.status,
+          statusText: xhr.statusText,
+          headers: parseHeaders(xhr.getAllResponseHeaders() || '')
+        }
+        options.url = 'responseURL' in xhr ? xhr.responseURL : options.headers.get('X-Request-URL')
+        var body = 'response' in xhr ? xhr.response : xhr.responseText
+        resolve(new Response(body, options))
+      }
+
+      xhr.onerror = function() {
+        reject(new TypeError('Network request failed'))
+      }
+
+      xhr.ontimeout = function() {
+        reject(new TypeError('Network request failed'))
+      }
+
+      xhr.open(request.method, request.url, true)
+
+      if (request.credentials === 'include') {
+        xhr.withCredentials = true
+      } else if (request.credentials === 'omit') {
+        xhr.withCredentials = false
+      }
+
+      if ('responseType' in xhr && support.blob) {
+        xhr.responseType = 'blob'
+      }
+
+      request.headers.forEach(function(value, name) {
+        xhr.setRequestHeader(name, value)
+      })
+
+      xhr.send(typeof request._bodyInit === 'undefined' ? null : request._bodyInit)
+    })
+  }
+  self.fetch.polyfill = true
+})(typeof self !== 'undefined' ? self : this);
\ No newline at end of file
diff --git a/frontend/polyfills/main.js b/frontend/polyfills/main.js
new file mode 100644
index 000000000..7e4c554ea
--- /dev/null
+++ b/frontend/polyfills/main.js
@@ -0,0 +1,2 @@
+import './fetch';
+import './url-search-params';
diff --git a/frontend/polyfills/url-search-params.js b/frontend/polyfills/url-search-params.js
new file mode 100644
index 000000000..e38c12021
--- /dev/null
+++ b/frontend/polyfills/url-search-params.js
@@ -0,0 +1,348 @@
+(function(global) {
+  /**
+   * Polyfill URLSearchParams
+   *
+   * Inspired from : https://github.com/WebReflection/url-search-params/blob/master/src/url-search-params.js
+   */
+
+  var checkIfIteratorIsSupported = function() {
+    try {
+      return !!Symbol.iterator;
+    } catch(error) {
+      return false;
+    }
+  };
+
+
+  var iteratorSupported = checkIfIteratorIsSupported();
+
+  var createIterator = function(items) {
+    var iterator = {
+      next: function() {
+        var value = items.shift();
+        return { done: value === void 0, value: value };
+      }
+    };
+
+    if(iteratorSupported) {
+      iterator[Symbol.iterator] = function() {
+        return iterator;
+      };
+    }
+
+    return iterator;
+  };
+
+  /**
+   * Search param name and values should be encoded according to https://url.spec.whatwg.org/#urlencoded-serializing
+   * encodeURIComponent() produces the same result except encoding spaces as `%20` instead of `+`.
+   */
+  var serializeParam = function(value) {
+    return encodeURIComponent(value).replace(/%20/g, '+');
+  };
+
+  var deserializeParam = function(value) {
+    return decodeURIComponent(value).replace(/\+/g, ' ');
+  };
+
+  var polyfillURLSearchParams= function() {
+
+    var URLSearchParams = function(searchString) {
+      Object.defineProperty(this, '_entries', { value: {} });
+
+      if(typeof searchString === 'string') {
+        if(searchString !== '') {
+          searchString = searchString.replace(/^\?/, '');
+          var attributes = searchString.split('&');
+          var attribute;
+          for(var i = 0; i < attributes.length; i++) {
+            attribute = attributes[i].split('=');
+            this.append(
+              deserializeParam(attribute[0]),
+              (attribute.length > 1) ? deserializeParam(attribute[1]) : ''
+            );
+          }
+        }
+      } else if(searchString instanceof URLSearchParams) {
+        var _this = this;
+        searchString.forEach(function(value, name) {
+          _this.append(value, name);
+        });
+      }
+    };
+
+    var proto = URLSearchParams.prototype;
+
+    proto.append = function(name, value) {
+      if(name in this._entries) {
+        this._entries[name].push(value.toString());
+      } else {
+        this._entries[name] = [value.toString()];
+      }
+    };
+
+    proto.delete = function(name) {
+      delete this._entries[name];
+    };
+
+    proto.get = function(name) {
+      return (name in this._entries) ? this._entries[name][0] : null;
+    };
+
+    proto.getAll = function(name) {
+      return (name in this._entries) ? this._entries[name].slice(0) : [];
+    };
+
+    proto.has = function(name) {
+      return (name in this._entries);
+    };
+
+    proto.set = function(name, value) {
+      this._entries[name] = [value.toString()];
+    };
+
+    proto.forEach = function(callback, thisArg) {
+      var entries;
+      for(var name in this._entries) {
+        if(this._entries.hasOwnProperty(name)) {
+          entries = this._entries[name];
+          for(var i = 0; i < entries.length; i++) {
+            callback.call(thisArg, entries[i], name, this);
+          }
+        }
+      }
+    };
+
+    proto.keys = function() {
+      var items = [];
+      this.forEach(function(value, name) { items.push(name); });
+      return createIterator(items);
+    };
+
+    proto.values = function() {
+      var items = [];
+      this.forEach(function(value) { items.push(value); });
+      return createIterator(items);
+    };
+
+    proto.entries = function() {
+      var items = [];
+      this.forEach(function(value, name) { items.push([name, value]); });
+      return createIterator(items);
+    };
+
+    if(iteratorSupported) {
+      proto[Symbol.iterator] = proto.entries;
+    }
+
+    proto.toString = function() {
+      var searchString = '';
+      this.forEach(function(value, name) {
+        if(searchString.length > 0) searchString+= '&';
+        searchString += serializeParam(name) + '=' + serializeParam(value);
+      });
+      return searchString;
+    };
+
+    global.URLSearchParams = URLSearchParams;
+  };
+
+  if(!('URLSearchParams' in global) || (new URLSearchParams('?a=1').toString() !== 'a=1')) {
+    polyfillURLSearchParams();
+  }
+
+  // HTMLAnchorElement
+
+})(
+  (typeof global !== 'undefined') ? global
+    : ((typeof window !== 'undefined') ? window
+    : ((typeof self !== 'undefined') ? self : this))
+);
+
+(function(global) {
+  /**
+   * Polyfill URL
+   *
+   * Inspired from : https://github.com/arv/DOM-URL-Polyfill/blob/master/src/url.js
+   */
+
+  var checkIfURLIsSupported = function() {
+    try {
+      var u = new URL('b', 'http://a');
+      u.pathname = 'c%20d';
+      return (u.href === 'http://a/c%20d') && u.searchParams;
+    } catch(e) {
+      return false;
+    }
+  };
+
+
+  var polyfillURL = function() {
+    var _URL = global.URL;
+
+    var URL = function(url, base) {
+      if(typeof url !== 'string') url = String(url);
+
+      var doc = document.implementation.createHTMLDocument('');
+      window.doc = doc;
+      if(base) {
+        var baseElement = doc.createElement('base');
+        baseElement.href = base;
+        doc.head.appendChild(baseElement);
+      }
+
+      var anchorElement = doc.createElement('a');
+      anchorElement.href = url;
+      doc.body.appendChild(anchorElement);
+      anchorElement.href = anchorElement.href; // force href to refresh
+
+      if(anchorElement.protocol === ':' || !/:/.test(anchorElement.href)) {
+        throw new TypeError('Invalid URL');
+      }
+
+      Object.defineProperty(this, '_anchorElement', {
+        value: anchorElement
+      });
+    };
+
+    var proto = URL.prototype;
+
+    var linkURLWithAnchorAttribute = function(attributeName) {
+      Object.defineProperty(proto, attributeName, {
+        get: function() {
+          return this._anchorElement[attributeName];
+        },
+        set: function(value) {
+          this._anchorElement[attributeName] = value;
+        },
+        enumerable: true
+      });
+    };
+
+    ['hash', 'host', 'hostname', 'port', 'protocol', 'search']
+    .forEach(function(attributeName) {
+      linkURLWithAnchorAttribute(attributeName);
+    });
+
+    Object.defineProperties(proto, {
+
+      'toString': {
+        get: function() {
+          var _this = this;
+          return function() {
+            return _this.href;
+          };
+        }
+      },
+
+      'href' : {
+        get: function() {
+          return this._anchorElement.href.replace(/\?$/,'');
+        },
+        set: function(value) {
+          this._anchorElement.href = value;
+        },
+        enumerable: true
+      },
+
+      'pathname' : {
+        get: function() {
+          return this._anchorElement.pathname.replace(/(^\/?)/,'/');
+        },
+        set: function(value) {
+          this._anchorElement.pathname = value;
+        },
+        enumerable: true
+      },
+
+      'origin': {
+        get: function() {
+          // get expected port from protocol
+          var expectedPort = {'http:': 80, 'https:': 443, 'ftp:': 21}[this._anchorElement.protocol];
+          // add port to origin if, expected port is different than actual port
+          // and it is not empty f.e http://foo:8080
+          // 8080 != 80 && 8080 != ''
+          var addPortToOrigin = this._anchorElement.port != expectedPort &&
+            this._anchorElement.port !== ''
+
+          return this._anchorElement.protocol +
+            '//' +
+            this._anchorElement.hostname +
+            (addPortToOrigin ? (':' + this._anchorElement.port) : '');
+        },
+        enumerable: true
+      },
+
+      'password': { // TODO
+        get: function() {
+          return '';
+        },
+        set: function(value) {
+        },
+        enumerable: true
+      },
+
+      'username': { // TODO
+        get: function() {
+          return '';
+        },
+        set: function(value) {
+        },
+        enumerable: true
+      },
+
+      'searchParams': {
+        get: function() {
+          var searchParams = new URLSearchParams(this.search);
+          var _this = this;
+          ['append', 'delete', 'set'].forEach(function(methodName) {
+            var method = searchParams[methodName];
+            searchParams[methodName] = function() {
+              method.apply(searchParams, arguments);
+              _this.search = searchParams.toString();
+            };
+          });
+          return searchParams;
+        },
+        enumerable: true
+      }
+    });
+
+    URL.createObjectURL = function(blob) {
+      return _URL.createObjectURL.apply(_URL, arguments);
+    };
+
+    URL.revokeObjectURL = function(url) {
+      return _URL.revokeObjectURL.apply(_URL, arguments);
+    };
+
+    global.URL = URL;
+
+  };
+
+  if(!checkIfURLIsSupported()) {
+    polyfillURL();
+  }
+
+  if((global.location !== void 0) && !('origin' in global.location)) {
+    var getOrigin = function() {
+      return global.location.protocol + '//' + global.location.hostname + (global.location.port ? (':' + global.location.port) : '');
+    };
+
+    try {
+      Object.defineProperty(global.location, 'origin', {
+        get: getOrigin,
+        enumerable: true
+      });
+    } catch(e) {
+      setInterval(function() {
+        global.location.origin = getOrigin();
+      }, 100);
+    }
+  }
+
+})(
+  (typeof global !== 'undefined') ? global
+    : ((typeof window !== 'undefined') ? window
+    : ((typeof self !== 'undefined') ? self : this))
+);
diff --git a/frontend/src/main.js b/frontend/src/main.js
new file mode 100644
index 000000000..91ebb8e24
--- /dev/null
+++ b/frontend/src/main.js
@@ -0,0 +1,43 @@
+import { HttpClient } from './services/http-client/http-client';
+import { HtmlHelpers } from './services/html-helpers/html-helpers';
+import { I18n } from './services/i18n/i18n';
+import { UtilRegistry } from './services/util-registry/util-registry';
+
+// import utils
+import Utils from './utils/utils';
+
+class App {
+  httpClient = new HttpClient();
+  htmlHelpers = new HtmlHelpers();
+  i18n = new I18n();
+  utilRegistry = new UtilRegistry();
+
+  constructor() {
+    this.utilRegistry.setApp(this);
+
+    Utils.forEach(util => {
+      this.utilRegistry.register(util);
+    });
+  }
+}
+
+export const app = new App();
+
+// attach the app to window to be able to get a hold of the
+// app instance from the shakespearean templates
+window.App = app;
+
+// dont know where to put this currently...
+// interceptor to throw an error if an http response does not match the expected content-type
+// function contentTypeInterceptor(response, options) {
+//   if (!options || !options.headers.get('Accept')) {
+//     return;
+//   }
+
+//   const contentType = response.headers.get("content-type");
+//   if (!contentType.match(options.accept)) {
+//     throw new Error('Server returned with "' + contentType + '" when "' + options.accept + '" was expected');
+//   }
+// }
+
+// window.HttpClient.addResponseInterceptor(contentTypeInterceptor);
diff --git a/frontend/src/services/html-helpers/html-helpers.js b/frontend/src/services/html-helpers/html-helpers.js
new file mode 100644
index 000000000..7956a569c
--- /dev/null
+++ b/frontend/src/services/html-helpers/html-helpers.js
@@ -0,0 +1,41 @@
+export class HtmlHelpers {
+
+  // `parseResponse` takes a raw HttpClient response and an options object.
+  // Returns an object with `element` being an contextual fragment of the
+  // HTML in the response and `ifPrefix` being the prefix that was used to
+  // "unique-ify" the ids of the received HTML.
+  // Original Response IDs can optionally be kept by adding `keepIds: true`
+  // to the `options` object.
+  parseResponse(response, options = {}) {
+    return response.text()
+      .then(
+        (responseText) => {
+          const docFrag = document.createRange().createContextualFragment(responseText);
+          let idPrefix;
+          if (!options.keepIds) {
+            idPrefix = this._getIdPrefix();
+            this._prefixIds(docFrag, idPrefix);
+          }
+          return Promise.resolve({ idPrefix, element: docFrag });
+        },
+        Promise.reject,
+      ).catch(console.error);
+  }
+
+  _prefixIds(element, idPrefix) {
+    const idAttrs = ['id', 'for', 'data-conditional-input', 'data-modal-trigger'];
+
+    idAttrs.forEach((attr) => {
+      Array.from(element.querySelectorAll('[' + attr + ']')).forEach((input) => {
+        const value = idPrefix + input.getAttribute(attr);
+        input.setAttribute(attr, value);
+      });
+    });
+  }
+
+  _getIdPrefix() {
+    // leading 'r'(andom) to overcome the fact that IDs
+    // starting with a numeric value are not valid in CSS
+    return 'r' + Math.floor(Math.random() * 100000) + '__';
+  }
+}
diff --git a/frontend/src/services/http-client/http-client.js b/frontend/src/services/http-client/http-client.js
new file mode 100644
index 000000000..6ba2341f0
--- /dev/null
+++ b/frontend/src/services/http-client/http-client.js
@@ -0,0 +1,41 @@
+export class HttpClient {
+
+  static ACCEPT = {
+    TEXT_HTML: 'text/html',
+    JSON: 'application/json',
+  };
+
+  _responseInterceptors = [];
+
+  addResponseInterceptor(interceptor) {
+    if (typeof interceptor === 'function') {
+      this._responseInterceptors.push(interceptor);
+    }
+  }
+
+  get(args) {
+    args.method = 'GET';
+    return this._fetch(args);
+  }
+
+  post(args) {
+    args.method = 'POST';
+    return this._fetch(args);
+  }
+
+  _fetch(options) {
+    const requestOptions = {
+      credentials: 'same-origin',
+      ...options,
+    };
+
+    return fetch(options.url, requestOptions)
+      .then(
+        (response) => {
+          this._responseInterceptors.forEach((interceptor) => interceptor(response, options));
+          return Promise.resolve(response);
+        },
+        Promise.reject,
+      ).catch(console.error);
+  }
+}
diff --git a/frontend/src/services/i18n/i18n.js b/frontend/src/services/i18n/i18n.js
new file mode 100644
index 000000000..7061f6ba6
--- /dev/null
+++ b/frontend/src/services/i18n/i18n.js
@@ -0,0 +1,32 @@
+  /**
+   * I18n
+   *
+   * This module stores and serves translated strings, according to the users language settings.
+   *
+   * Translations are stored in /messages/frontend/*.msg.
+   *
+   * To make additions to any of these files accessible to JavaScrip Utilities
+   * you need to add them to the respective *.msg file and to the list of FrontendMessages
+   * in /src/Utils/Frontend/I18n.hs.
+   *
+   */
+
+export class I18n {
+
+  translations = {};
+
+  add(id, translation) {
+    this.translations[id] = translation;
+  }
+
+  addMany(manyTranslations) {
+    Object.keys(manyTranslations).forEach((key) => this.add(key, manyTranslations[key]));
+  }
+
+  get(id) {
+    if (!this.translations[id]) {
+      throw new Error('I18N Error: Translation missing for »' + id + '«!');
+    }
+    return this.translations[id];
+  }
+}
diff --git a/frontend/src/services/util-registry/util-registry.js b/frontend/src/services/util-registry/util-registry.js
new file mode 100644
index 000000000..001bb1e6b
--- /dev/null
+++ b/frontend/src/services/util-registry/util-registry.js
@@ -0,0 +1,122 @@
+const DEBUG_MODE = /localhost/.test(window.location.href) && 0;
+
+export class UtilRegistry {
+
+  _registeredUtils = [];
+  _activeUtilInstances = [];
+  _appInstance;
+
+  constructor() {
+    document.addEventListener('DOMContentLoaded', () => this.setupAll());
+  }
+
+  /**
+   * function registerUtil
+   *
+   * utils need to have at least these properties:
+   *   name: string | utils name, e.g. 'example'
+   *   selector: string | utils selector, e.g. '[uw-example]'
+   *   setup: Function | utils setup function, see below
+   *
+   * setup function must return instance object with at least these properties:
+   *   name: string | utils name
+   *   element: HTMLElement | element the util is applied to
+   *   destroy: Function | function to destroy the util and remove any listeners
+   *
+   * @param util Object Utility that should be added to the registry
+   */
+  register(util) {
+    if (DEBUG_MODE > 2) {
+      console.log('registering util "' + util.name + '"');
+      console.log({ util });
+    }
+    this._registeredUtils.push(util);
+  }
+
+  deregister(name, destroy) {
+    const utilIndex = this._findUtilIndex(name);
+
+    if (utilIndex >= 0) {
+      if (destroy === true) {
+        this._destroyUtilInstances(name);
+      }
+
+      this._registeredUtils.splice(utilIndex, 1);
+    }
+  }
+
+  setApp(appInstance) {
+    this.appInstance = appInstance;
+  }
+
+  setupAll = (scope) => {
+    if (DEBUG_MODE > 1) {
+      console.info('registered js utilities:');
+      console.table(this._registeredUtils);
+    }
+
+    this._registeredUtils.forEach((util) => this.setup(util, scope));
+  }
+
+  setup(util, scope = document.body) {
+    if (DEBUG_MODE > 2) {
+      console.log('setting up util', { util });
+    }
+
+    if (util && typeof util.setup === 'function') {
+      const elements = this._findUtilElements(util, scope);
+
+      elements.forEach((element) => {
+        let utilInstance = null;
+
+        try {
+          utilInstance = util.setup(element, this.appInstance);
+        } catch(err) {
+          if (DEBUG_MODE > 0) {
+            console.warn('Error while trying to initialize a utility!', { util , element, err });
+          }
+        }
+
+        if (utilInstance) {
+          if (DEBUG_MODE > 2) {
+            console.info('Got utility instance for utility "' + util.name + '"', { utilInstance });
+          }
+
+          this._activeUtilInstances.push(utilInstance);
+        }
+      });
+    }
+  }
+
+  find(name) {
+    return this._registeredUtils.find((util) => util.name === name);
+  }
+
+  _findUtilElements(util, scope) {
+    if (scope && scope.matches(util.selector)) {
+      return [scope];
+    }
+    return Array.from(scope.querySelectorAll(util.selector));
+  }
+
+  _findUtilIndex(name) {
+    return this._registeredUtils.findIndex((util) => util.name === name);
+  }
+
+  _destroyUtilInstances(name) {
+    this._activeUtilInstances
+      .map((util, index) => ({
+        util: util,
+        index: index,
+      }))
+      .filter((activeUtil) => activeUtil.util.name === name)
+      .forEach((activeUtil) => {
+        // destroy util instance
+        activeUtil.util.destroy();
+        delete this._activeUtilInstances[activeUtil.index];
+      });
+
+    // get rid of now empty array slots
+    this._activeUtilInstances = this._activeUtilInstances.filter((util) => !!util);
+  }
+}
diff --git a/frontend/src/utils/alerts/alerts.js b/frontend/src/utils/alerts/alerts.js
new file mode 100644
index 000000000..3e49080bc
--- /dev/null
+++ b/frontend/src/utils/alerts/alerts.js
@@ -0,0 +1,206 @@
+import './alerts.scss';
+
+/**
+ *
+ * Alerts Utility
+ *  makes alerts interactive
+ *
+ * Attribute: uw-alerts
+ *
+ * Types of alerts:
+ *   [default]
+ *     Regular Info Alert
+ *     Disappears automatically after 30 seconds
+ *     Disappears after x seconds if explicitly specified via data-decay='x'
+ *     Can be told not to disappear with data-decay='0'
+ *
+ *   [success]
+ *     Currently no special visual appearance
+ *     Disappears automatically after 30 seconds
+ *
+ *   [warning]
+ *     Will be coloured warning-orange regardless of user's selected theme
+ *     Does not disappear
+ *
+ *   [error]
+ *     Will be coloured error-red regardless of user's selected theme
+ *     Does not disappear
+ *
+ * Example usage:
+ *  <div .alerts uw-alerts>
+ *    <div .alerts__toggler>
+ *    <div .alert.alert-info>
+ *      <div .alert__closer>
+ *      <div .alert__icon>
+ *      <div .alert__content>
+ *        This is some information
+ *
+ */
+
+var ALERTS_UTIL_NAME = 'alerts';
+var ALERTS_UTIL_SELECTOR = '[uw-alerts]';
+
+var ALERTS_INITIALIZED_CLASS = 'alerts--initialized';
+var ALERTS_ELEVATED_CLASS = 'alerts--elevated';
+var ALERTS_TOGGLER_CLASS = 'alerts__toggler';
+var ALERTS_TOGGLER_VISIBLE_CLASS = 'alerts__toggler--visible';
+var ALERTS_TOGGLER_APPEAR_DELAY = 120;
+
+var ALERT_CLASS = 'alert';
+var ALERT_INITIALIZED_CLASS = 'alert--initialized';
+var ALERT_CLOSER_CLASS = 'alert__closer';
+var ALERT_ICON_CLASS = 'alert__icon';
+var ALERT_CONTENT_CLASS = 'alert__content';
+var ALERT_INVISIBLE_CLASS = 'alert--invisible';
+var ALERT_AUTO_HIDE_DELAY = 10;
+var ALERT_AUTOCLOSING_MATCHER = '.alert-info, .alert-success';
+
+var alertsUtil = function(element, app) {
+  var togglerCheckRequested = false;
+  var togglerElement;
+  var alertElements;
+
+  function init() {
+    if (!element) {
+      throw new Error('Alerts util has to be called with an element!');
+    }
+
+    if (element.classList.contains(ALERTS_INITIALIZED_CLASS)) {
+      return false;
+    }
+
+    togglerElement = element.querySelector('.' + ALERTS_TOGGLER_CLASS);
+    alertElements = gatherAlertElements();
+
+    initToggler();
+    initAlerts();
+
+    // register http client interceptor to filter out Alerts Header
+    setupHttpInterceptor();
+
+    // mark initialized
+    element.classList.add(ALERTS_INITIALIZED_CLASS);
+
+    return {
+      name: ALERTS_UTIL_NAME,
+      element: element,
+      destroy: function() {},
+    };
+  }
+
+  function gatherAlertElements() {
+    return Array.from(element.querySelectorAll('.' + ALERT_CLASS)).filter(function(alert) {
+      return !alert.classList.contains(ALERT_INITIALIZED_CLASS);
+    });
+  }
+
+  function initToggler() {
+    togglerElement.addEventListener('click', function() {
+      alertElements.forEach(function(alertEl) {
+        toggleAlert(alertEl, true);
+      });
+      togglerElement.classList.remove(ALERTS_TOGGLER_VISIBLE_CLASS);
+    });
+  }
+
+  function initAlerts() {
+    alertElements.forEach(initAlert);
+  }
+
+  function initAlert(alertElement) {
+    var autoHideDelay = ALERT_AUTO_HIDE_DELAY;
+    if (alertElement.dataset.decay) {
+      autoHideDelay = parseInt(alertElement.dataset.decay, 10);
+    }
+
+    var closeEl = alertElement.querySelector('.' + ALERT_CLOSER_CLASS);
+    closeEl.addEventListener('click', function() {
+      toggleAlert(alertElement);
+    });
+
+    if (autoHideDelay > 0 && alertElement.matches(ALERT_AUTOCLOSING_MATCHER)) {
+      window.setTimeout(function() {
+        toggleAlert(alertElement);
+      }, autoHideDelay * 1000);
+    }
+  }
+
+  function toggleAlert(alertEl, visible) {
+    alertEl.classList.toggle(ALERT_INVISIBLE_CLASS, !visible);
+    checkToggler();
+  }
+
+  function checkToggler() {
+    if (togglerCheckRequested) {
+      return;
+    }
+
+    var alertsHidden = alertElements.reduce(function(acc, alert) {
+      return acc && alert.classList.contains(ALERT_INVISIBLE_CLASS);
+    }, true);
+
+    window.setTimeout(function() {
+      togglerElement.classList.toggle(ALERTS_TOGGLER_VISIBLE_CLASS, alertsHidden);
+      togglerCheckRequested = false;
+    }, ALERTS_TOGGLER_APPEAR_DELAY);
+  }
+
+  function setupHttpInterceptor() {
+    app.httpClient.addResponseInterceptor(responseInterceptor.bind(this));
+  }
+
+  function elevateAlerts() {
+    element.classList.add(ALERTS_ELEVATED_CLASS);
+  }
+
+  function responseInterceptor(response) {
+    var alerts;
+    for (var header of response.headers) {
+      if (header[0] === 'alerts') {
+        var decodedHeader = decodeURIComponent(header[1]);
+        alerts = JSON.parse(decodedHeader);
+        break;
+      }
+    }
+
+    if (alerts) {
+      alerts.forEach(function(alert) {
+        var alertElement = createAlertElement(alert.status, alert.content);
+        element.appendChild(alertElement);
+        alertElements.push(alertElement);
+        initAlert(alertElement);
+      });
+
+      elevateAlerts();
+    }
+  }
+
+  function createAlertElement(type, content) {
+    var alertElement = document.createElement('div');
+    alertElement.classList.add(ALERT_CLASS, 'alert-' + type);
+
+    var alertCloser = document.createElement('div');
+    alertCloser.classList.add(ALERT_CLOSER_CLASS);
+
+    var alertIcon = document.createElement('div');
+    alertIcon.classList.add(ALERT_ICON_CLASS);
+
+    var alertContent = document.createElement('div');
+    alertContent.classList.add(ALERT_CONTENT_CLASS);
+    alertContent.innerHTML = content;
+
+    alertElement.appendChild(alertCloser);
+    alertElement.appendChild(alertIcon);
+    alertElement.appendChild(alertContent);
+
+    return alertElement;
+  }
+
+  return init();
+};
+
+export default {
+  name: ALERTS_UTIL_NAME,
+  selector: ALERTS_UTIL_SELECTOR,
+  setup: alertsUtil,
+};
diff --git a/frontend/src/utils/alerts/alerts.scss b/frontend/src/utils/alerts/alerts.scss
new file mode 100644
index 000000000..cd0492f11
--- /dev/null
+++ b/frontend/src/utils/alerts/alerts.scss
@@ -0,0 +1,210 @@
+.alerts {
+  position: fixed;
+  bottom: 0;
+  right: 5%;
+  z-index: 20;
+  text-align: right;
+  display: flex;
+  flex-direction: column;
+}
+
+.alerts__toggler {
+  width: 40px;
+  height: 40px;
+  position: absolute;
+  top: 400px;
+  left: 50%;
+  transform: translateX(-50%);
+  cursor: pointer;
+
+  &::before {
+    content: '\f077';
+    position: absolute;
+    font-family: "Font Awesome 5 Free";
+    left: 50%;
+    top: 0;
+    height: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 30px;
+    color: var(--color-grey);
+    font-size: 30px;
+    transform: translateX(-50%);
+  }
+}
+
+.alerts--elevated {
+  z-index: 1000;
+}
+
+.alerts__toggler--visible {
+  top: -40px;
+  opacity: 1;
+  transition: top     .5s cubic-bezier(0.73, 1.25, 0.61, 1),
+              opacity .5s cubic-bezier(0.73, 1.25, 0.61, 1);
+}
+
+@media (max-width: 425px) {
+
+  .alerts {
+    left: 5%;
+  }
+}
+
+.alert {
+  position: relative;
+  display: block;
+  background-color: var(--color-lightblack);
+  font-size: 1rem;
+  color: var(--color-lightwhite);
+  z-index: 0;
+  padding: 0 50px;
+  padding-right: 60px;
+  animation: slide-in-alert .2s ease-out forwards;
+  margin-bottom: 10px;
+  transition: margin-bottom .2s ease-out;
+}
+
+.alert a {
+  color: var(--color-lightwhite);
+}
+
+@keyframes slide-in-alert {
+  from {
+    transform: translateY(120%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes slide-out-alert {
+  from {
+    transform: translateY(0);
+    max-height: 200px;
+  }
+  to {
+    transform: translateY(250%);
+    opacity: 0;
+    max-height: 0;
+    overflow: hidden;
+  }
+}
+
+@media (min-width: 425px) {
+
+  .alert {
+    max-width: 400px;
+  }
+}
+
+.alert--invisible {
+  animation: slide-out-alert .2s ease-out forwards;
+  margin-bottom: 0;
+}
+
+.alert__content {
+  padding: 8px 0;
+  min-height: 40px;
+  position: relative;
+  display: flex;
+  font-weight: 600;
+  align-items: center;
+  text-align: left;
+}
+
+.alert__icon {
+  text-align: right;
+  position: absolute;
+  left: 0px;
+  top: 0;
+  width: 50px;
+  height: 100%;
+  z-index: 40;
+
+  &::before {
+    content: '\f05a';
+    position: absolute;
+    font-family: "Font Awesome 5 Free";
+    font-size: 24px;
+    top: 50%;
+    left: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transform: translate(-50%, -50%);
+    border-radius: 50%;
+    width: 30px;
+    height: 30px;
+  }
+}
+
+.alert__closer {
+  cursor: pointer;
+  text-align: right;
+  position: absolute;
+  right: 0px;
+  top: 0;
+  width: 60px;
+  height: 100%;
+  transition: all .3s ease;
+  z-index: 40;
+
+  &:hover {
+    transform: scale(1.05, 1.05);
+
+    &::before {
+      box-shadow: 0 0 4px white;
+      background-color: rgba(255, 255, 255, 0.1);
+      color: white;
+    }
+  }
+
+  &::before {
+    content: '\f00d';
+    position: absolute;
+    font-family: "Font Awesome 5 Free";
+    top: 50%;
+    left: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transform: translate(-50%, -50%);
+    border-radius: 50%;
+    width: 30px;
+    height: 30px;
+    transition: all .15s ease;
+  }
+}
+
+@media (max-width: 768px) {
+
+  .alert__closer {
+    width: 40px;
+  }
+}
+
+.alert-success {
+  background-color: var(--color-success);
+
+  .alert__icon::before {
+    content: '\f058';
+  }
+}
+
+.alert-warning {
+  background-color: var(--color-warning);
+
+  .alert__icon::before {
+    content: '\f06a';
+  }
+}
+
+.alert-error {
+  background-color: var(--color-error);
+
+  .alert__icon::before {
+    content: '\f071';
+  }
+}
diff --git a/frontend/src/utils/asidenav/asidenav.js b/frontend/src/utils/asidenav/asidenav.js
new file mode 100644
index 000000000..c5ba552c9
--- /dev/null
+++ b/frontend/src/utils/asidenav/asidenav.js
@@ -0,0 +1,105 @@
+import './asidenav.scss';
+
+/**
+ *
+ * Asidenav Utility
+ *  Correctly positions hovered asidenav submenus and handles the favorites button on mobile
+ *
+ * Attribute: uw-asidenav
+ *
+ * Example usage:
+ *  <div uw-asidenav>
+ *    <div .asidenav>
+ *      <div .asidenav__box>
+ *        <ul .asidenav__list.list--iconless>
+ *          <li .asidenav__list-item>
+ *            <a .asidenav__link-wrapper href="#">
+ *              <div .asidenav__link-shorthand>EIP
+ *              <div .asidenav__link-label>Einführung in die Programmierung
+ *            <div .asidenav__nested-list-wrapper>
+ *              <ul .asidenav__nested-list.list--iconless>
+ *                Übungsblätter
+ *                ...
+ *
+ */
+
+var ASIDENAV_UTIL_NAME = 'asidenav';
+var ASIDENAV_UTIL_SELECTOR = '[uw-asidenav]';
+
+var FAVORITES_BTN_CLASS = 'navbar__list-item--favorite';
+var FAVORITES_BTN_ACTIVE_CLASS = 'navbar__list-item--active';
+var ASIDENAV_INITIALIZED_CLASS = 'asidenav--initialized';
+var ASIDENAV_EXPANDED_CLASS = 'main__aside--expanded';
+var ASIDENAV_LIST_ITEM_CLASS = 'asidenav__list-item';
+var ASIDENAV_SUBMENU_CLASS = 'asidenav__nested-list-wrapper';
+
+var asidenavUtil = function(element) {
+
+  function init() {
+    if (!element) {
+      throw new Error('Asidenav utility cannot be setup without an element!');
+    }
+
+    if (element.classList.contains(ASIDENAV_INITIALIZED_CLASS)) {
+      return false;
+    }
+
+    initFavoritesButton();
+    initAsidenavSubmenus();
+
+    // mark initialized
+    element.classList.add(ASIDENAV_INITIALIZED_CLASS);
+
+    return {
+      name: ASIDENAV_UTIL_NAME,
+      element: element,
+      destroy: function() {},
+    };
+  }
+
+  function initFavoritesButton() {
+    var favoritesBtn = document.querySelector('.' + FAVORITES_BTN_CLASS);
+    favoritesBtn.addEventListener('click', function(event) {
+      favoritesBtn.classList.toggle(FAVORITES_BTN_ACTIVE_CLASS);
+      element.classList.toggle(ASIDENAV_EXPANDED_CLASS);
+      event.preventDefault();
+    }, true);
+  }
+
+  function initAsidenavSubmenus() {
+    var asidenavLinksWithSubmenus = Array.from(element.querySelectorAll('.' + ASIDENAV_LIST_ITEM_CLASS))
+      .map(function(listItem) {
+        var submenu = listItem.querySelector('.' + ASIDENAV_SUBMENU_CLASS);
+        return { listItem, submenu };
+      }).filter(function(union) {
+        return union.submenu !== null;
+      });
+
+    asidenavLinksWithSubmenus.forEach(function(union) {
+      union.listItem.addEventListener('mouseover', createMouseoverHandler(union));
+    });
+  }
+
+  function createMouseoverHandler(union) {
+    return function mouseoverHanlder() {
+      var rectListItem = union.listItem.getBoundingClientRect();
+      var rectSubMenu = union.submenu.getBoundingClientRect();
+
+      union.submenu.style.left = (rectListItem.left + rectListItem.width) + 'px';
+      if (window.innerHeight - rectListItem.top < rectSubMenu.height) {
+        union.submenu.style.top = (rectListItem.top + rectListItem.height - rectSubMenu.height) + 'px';
+      } else {
+        union.submenu.style.top = rectListItem.top + 'px';
+      }
+
+    };
+  }
+
+  return init();
+};
+
+export default {
+  name: ASIDENAV_UTIL_NAME,
+  selector: ASIDENAV_UTIL_SELECTOR,
+  setup: asidenavUtil,
+};
diff --git a/frontend/src/utils/asidenav/asidenav.scss b/frontend/src/utils/asidenav/asidenav.scss
new file mode 100644
index 000000000..e7ab3b50d
--- /dev/null
+++ b/frontend/src/utils/asidenav/asidenav.scss
@@ -0,0 +1,364 @@
+.main__aside {
+  position: fixed;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+  z-index: 1;
+  top: 0;
+  left: 0;
+  width: var(--asidenav-width-lg, 20%);
+  height: 100%;
+  flex: 0 0 0;
+  flex-basis: var(--asidenav-width-lg, 20%);
+  transition: all .2s ease-out;
+
+  &::before {
+    position: absolute;
+    z-index: -1;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-color: var(--color-dark);
+    opacity: 0.05;
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    z-index: -2;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-color: var(--color-grey-light);
+  }
+}
+
+@media (max-width: 425px) {
+
+  .main__aside {
+    position: fixed;
+    top: var(--header-height-collapsed);
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: 100% !important;
+    width: 100%;
+    z-index: 5;
+    overflow: hidden;
+    transform: translateX(-110%);
+    transition: transform .2s ease-out;
+
+    &.main__aside--expanded {
+      transform: translateX(0%);
+    }
+
+    .asidenav__box-title {
+      font-size: 18px;
+      padding-left: 10px;
+    }
+  }
+}
+
+@media (min-width: 1200px) {
+  .main__aside {
+    width: var(--asidenav-width-xl, 250px)
+  }
+}
+
+.asidenav {
+  color: var(--color-font);
+  min-height: calc(100% - var(--header-height));
+  height: 400px;
+  overflow-y: auto;
+  overflow-x: hidden;
+
+  &::-webkit-scrollbar {
+    width: 0;
+  }
+}
+
+.asidenav__box {
+  transition: opacity .2s ease;
+
+  + .asidenav__box {
+    margin-top: 10px;
+  }
+}
+
+.asidenav__box-title {
+  padding: 7px 13px;
+  margin-top: 30px;
+  background-color: transparent;
+  transition: all .2s ease;
+  padding: 10px 13px;
+  margin: 0;
+  border-bottom: 1px solid var(--color-grey);
+}
+
+/* LOGO */
+
+.asidenav__logo {
+  height: var(--header-height);
+  display: flex;
+  align-items: center;
+}
+
+@media (max-width: 768px) {
+
+  .asidenav__logo {
+    display: none;
+  }
+}
+
+.asidenav__logo-link {
+  flex: 1;
+  top: 10px;
+  left: 20px;
+  height: 80px;
+  padding: 0 20px;
+  display: flex;
+  flex-basis: var(--asidenav-width-xl, 250px);
+  font-size: 16px;
+  align-items: center;
+  color: var(--color-dark);
+  transform-origin: left;
+
+  &:hover {
+    color: var(--color-primary);
+  }
+}
+
+.asidenav__logo-lmu {
+  width: 80px;
+  height: 100%;
+}
+
+.asidenav__logo-uni2work {
+  display: flex;
+  align-items: flex-end;
+  min-width: 70px;
+  margin-left: 12px;
+  text-transform: uppercase;
+  width: 100%;
+  height: 100%;
+  padding: 2px 4px;
+  border: 1px solid currentColor;
+  letter-spacing: 2px;
+  background-color: white;
+  transition: background-color .3s ease;
+}
+
+@media (max-width: 1199px) {
+
+  .asidenav__logo-link {
+    flex-basis: var(--asidenav-width-lg, 20%);
+    font-size: 16px;
+  }
+
+  .asidenav__logo-lmu {
+    display: none;
+  }
+
+  .asidenav__logo-uni2work {
+    margin-left: 0;
+  }
+}
+
+/* SEAL */
+
+.asidenav__sigillum {
+  position: absolute;
+  bottom: -40px;
+  right: 25px;
+  opacity: 0.2;
+
+  > img {
+    width: 350px;
+  }
+}
+
+@media (max-width: 768px) {
+  .asidenav__sigillum {
+    right: auto;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+}
+
+/* LIST-ITEM */
+
+.asidenav__list-item {
+  color: var(--color-font);
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+
+  &:not(.asidenav__list-item--active):hover {
+    background-color: var(--color-lightwhite);
+
+    > .asidenav__link-wrapper {
+      color: var(--color-font);
+    }
+  }
+
+  &:hover {
+
+    .asidenav__link-shorthand {
+      transform: scale(1.05, 1.0);
+      transform-origin: right;
+      text-shadow: none;
+    }
+
+    .asidenav__nested-list-wrapper {
+      display: block;
+    }
+  }
+}
+
+/* small list-item-padding for medium to large screens */
+@media (min-width: 769px) {
+
+  .asidenav__list-item {
+    padding-left: 10px;
+  }
+}
+
+.asidenav__list-item--active {
+  background-color: var(--color-lightwhite);
+
+  .asidenav__link-wrapper {
+    color: var(--color-link);
+  }
+
+  .asidenav__link-shorthand {
+    transform: scale(1.05, 1.0);
+    transform-origin: right;
+    text-shadow: none;
+  }
+}
+
+.asidenav__link-wrapper {
+  position: relative;
+  display: flex;
+  flex: 1;
+  align-items: center;
+  padding: 8px 3px;
+  justify-content: flex-start;
+  color: var(--color-font);
+  width: 100%;
+  z-index: 1;
+}
+
+.asidenav__link-shorthand {
+  display: none;
+}
+
+.asidenav__link-label {
+  line-height: 1;
+}
+
+/* hover sub-menus */
+.asidenav__nested-list-wrapper {
+  position: absolute;
+  z-index: 10;
+  display: none;
+  color: var(--color-font);
+  background-color: var(--color-grey-light);
+  box-shadow: 1px 1px 1px 0px var(--color-grey);
+}
+
+.asidenav__nested-list {
+  min-width: 200px;
+}
+
+@media (max-width: 425px) {
+
+  .asidenav__nested-list {
+    display: none;
+  }
+}
+
+.asidenav__nested-list-item {
+  position: relative;
+
+  &:hover {
+    background-color: var(--color-lightwhite);
+  }
+
+  .asidenav__link-wrapper {
+    padding-left: 13px;
+    padding-right: 13px;
+    transition: all .2s ease;
+    color: var(--color-font);
+  }
+}
+
+/* TABLET */
+@media (min-width: 426px) and (max-width: 768px) {
+
+  .main__aside {
+    width: var(--asidenav-width-md, 50px);
+    flex-basis: var(--asidenav-width-md, 50px);
+    overflow: hidden;
+    min-height: calc(100% - var(--header-height-collapsed));
+    top: var(--header-height-collapsed);
+
+    .asidenav__box-title {
+      width: var(--asidenav-width-md, 50px);
+      font-size: 18px;
+      text-align: center;
+      padding: 10px 1px;
+      word-break: break-all;
+      background-color: var(--color-dark);
+      color: var(--color-lightwhite);
+
+      &:hover {
+        background-color: var(--color-dark);
+      }
+    }
+
+    .asidenav__link-shorthand {
+      display: flex;
+      position: static;
+      height: 50px;
+      width: var(--asidenav-width-md, 50px);
+      text-align: center;
+      opacity: 1;
+      font-size: 15px;
+      line-height: 1em;
+      margin-right: 13px;
+      flex-shrink: 0;
+      padding: 1px;
+      outline: 1px solid white;
+      word-break: break-all;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .asidenav__list-item {
+      padding-left: 0;
+
+      + .asidenav__list-item {
+        margin: 0;
+      }
+    }
+
+    .asidenav__link-wrapper {
+      color: var(--color-font);
+      padding: 0;
+    }
+
+    .asidenav__nested-list,
+    .asidenav__link-label {
+      display: none;
+    }
+
+    .asidenav__list-item--active {
+
+      .asidenav__link-wrapper {
+        background-color: var(--color-lightwhite);
+      }
+    }
+  }
+}
diff --git a/frontend/src/utils/async-form/async-form.js b/frontend/src/utils/async-form/async-form.js
new file mode 100644
index 000000000..5af38c7e9
--- /dev/null
+++ b/frontend/src/utils/async-form/async-form.js
@@ -0,0 +1,117 @@
+import './async-form.scss';
+
+/**
+ *
+ * Async Form Utility
+ *  prevents form submissions from reloading the page but instead firing an AJAX request
+ *
+ * Attribute: uw-async-form
+ *   (works only on <form> elements)
+ *
+ * Example usage:
+ *   <form uw-async-form method='POST' action='...'>
+ *     ...
+ *
+ * Internationalization:
+ *  This utility expects the following translations to be available:
+ *    asyncFormFailure: text that gets shown if an async form request fails
+ *      example: "Oops. Something went wrong."
+ */
+
+var ASYNC_FORM_UTIL_NAME = 'asyncForm';
+var ASYNC_FORM_UTIL_SELECTOR = 'form[uw-async-form]';
+
+var ASYNC_FORM_INITIALIZED_CLASS = 'check-all--initialized';
+var ASYNC_FORM_RESPONSE_CLASS = 'async-form__response';
+var ASYNC_FORM_LOADING_CLASS = 'async-form--loading';
+var ASYNC_FORM_MIN_DELAY = 600;
+
+var MODAL_SELECTOR = '.modal';
+var MODAL_HEADER_KEY = 'Is-Modal';
+var MODAL_HEADER_VALUE = 'True';
+
+var asyncFormUtil = function(element, app) {
+
+  var lastRequestTimestamp = 0;
+
+  function init() {
+    if (!element) {
+      throw new Error('Async Form Utility cannot be setup without an element!');
+    }
+
+    if (element.classList.contains(ASYNC_FORM_INITIALIZED_CLASS)) {
+      return false;
+    }
+
+    element.addEventListener('submit', submitHandler);
+
+    element.classList.add(ASYNC_FORM_INITIALIZED_CLASS);
+
+    return {
+      name: ASYNC_FORM_UTIL_NAME,
+      element: element,
+      destroy: function() {},
+    };
+  }
+
+  function processResponse(response) {
+    var responseElement = makeResponseElement(response.content, response.status);
+    var parentElement = element.parentElement;
+
+    // make sure there is a delay between click and response
+    var delay = Math.max(0, ASYNC_FORM_MIN_DELAY + lastRequestTimestamp - Date.now());
+
+    setTimeout(function() {
+      parentElement.insertBefore(responseElement, element);
+      element.remove();
+    }, delay);
+  }
+
+  function makeResponseElement(content, status) {
+    var responseElement = document.createElement('div');
+    status = status || 'info';
+    responseElement.classList.add(ASYNC_FORM_RESPONSE_CLASS);
+    responseElement.classList.add(ASYNC_FORM_RESPONSE_CLASS + '--' + status);
+    responseElement.innerHTML = content;
+    return responseElement;
+  }
+
+  function submitHandler(event) {
+    event.preventDefault();
+
+    element.classList.add(ASYNC_FORM_LOADING_CLASS);
+    lastRequestTimestamp = Date.now();
+
+    var url = element.getAttribute('action');
+    var headers = { };
+    var body = new FormData(element);
+
+    var isModal = element.closest(MODAL_SELECTOR);
+    if (isModal) {
+      headers[MODAL_HEADER_KEY] = MODAL_HEADER_VALUE;
+    }
+
+    app.httpClient.post({
+      url: url,
+      headers: headers,
+      body: body,
+    }).then(function(response) {
+      return response.json();
+    }).then(function(response) {
+      processResponse(response[0]);
+    }).catch(function() {
+      var failureMessage = app.i18n.get('asyncFormFailure');
+      processResponse({ content: failureMessage });
+
+      element.classList.remove(ASYNC_FORM_LOADING_CLASS);
+    });
+  }
+
+  return init();
+};
+
+export default {
+  name: ASYNC_FORM_UTIL_NAME,
+  selector: ASYNC_FORM_UTIL_SELECTOR,
+  setup: asyncFormUtil,
+};
diff --git a/frontend/src/utils/async-form/async-form.scss b/frontend/src/utils/async-form/async-form.scss
new file mode 100644
index 000000000..bd5a97a41
--- /dev/null
+++ b/frontend/src/utils/async-form/async-form.scss
@@ -0,0 +1,78 @@
+.async-form__response {
+  margin: 20px 0;
+  position: relative;
+  width: 100%;
+  font-size: 18px;
+  text-align: center;
+  padding-top: 60px;
+}
+
+.async-form__response::before,
+.async-form__response::after {
+  position: absolute;
+  top: 0px;
+  left: 50%;
+  display: block;
+}
+
+.async-form__response--success::before {
+  content: '';
+  width: 17px;
+  height: 28px;
+  border: solid #069e04;
+  border-width: 0 5px 5px 0;
+  transform: translateX(-50%) rotate(45deg);
+}
+
+.async-form__response--info::before {
+  content: '';
+  width: 5px;
+  height: 30px;
+  top: 10px;
+  background-color: #777;
+  transform: translateX(-50%);
+}
+.async-form__response--info::after {
+  content: '';
+  width: 5px;
+  height: 5px;
+  background-color: #777;
+  transform: translateX(-50%);
+}
+
+.async-form__response--warning::before {
+  content: '';
+  width: 5px;
+  height: 30px;
+  background-color: rgb(255, 187, 0);
+  transform: translateX(-50%);
+}
+.async-form__response--warning::after {
+  content: '';
+  width: 5px;
+  height: 5px;
+  top: 35px;
+  background-color: rgb(255, 187, 0);
+  transform: translateX(-50%);
+}
+
+.async-form__response--error::before {
+  content: '';
+  width: 5px;
+  height: 40px;
+  background-color: #940d0d;
+  transform: translateX(-50%) rotate(-45deg);
+}
+.async-form__response--error::after {
+  content: '';
+  width: 5px;
+  height: 40px;
+  background-color: #940d0d;
+  transform: translateX(-50%) rotate(45deg);
+}
+
+.async-form--loading {
+  opacity: 0.1;
+  transition: opacity 800ms ease-out;
+  pointer-events: none;
+}
diff --git a/frontend/src/utils/async-table/async-table-filter.scss b/frontend/src/utils/async-table/async-table-filter.scss
new file mode 100644
index 000000000..794240f3f
--- /dev/null
+++ b/frontend/src/utils/async-table/async-table-filter.scss
@@ -0,0 +1,5 @@
+.async-table-filter--loading {
+  opacity: 0.7;
+  pointer-events: none;
+  transition: opacity 400ms ease-out;
+}
diff --git a/frontend/src/utils/async-table/async-table.js b/frontend/src/utils/async-table/async-table.js
new file mode 100644
index 000000000..c9508c7d6
--- /dev/null
+++ b/frontend/src/utils/async-table/async-table.js
@@ -0,0 +1,413 @@
+import { HttpClient } from '../../services/http-client/http-client';
+import './async-table.scss';
+import './async-table-filter.scss';
+
+/**
+ *
+ * Async Table Utility
+ *  makes table filters, sorting and pagination behave asynchronously via AJAX calls
+ *
+ * Attribute: uw-async-table
+ *
+ * Example usage:
+*   (regular table)
+  */
+
+var INPUT_DEBOUNCE = 600;
+var HEADER_HEIGHT = 80;
+
+var ASYNC_TABLE_UTIL_NAME = 'asyncTable';
+var ASYNC_TABLE_UTIL_SELECTOR = '[uw-async-table]';
+
+var ASYNC_TABLE_LOCAL_STORAGE_KEY = 'ASYNC_TABLE';
+var ASYNC_TABLE_SCROLLTABLE_SELECTOR = '.scrolltable';
+var ASYNC_TABLE_INITIALIZED_CLASS = 'async-table--initialized';
+var ASYNC_TABLE_LOADING_CLASS = 'async-table--loading';
+
+var ASYNC_TABLE_FILTER_FORM_SELECTOR = '.table-filter-form';
+var ASYNC_TABLE_FILTER_FORM_ID_SELECTOR = '[name="form-identifier"]';
+
+
+var asyncTableUtil = function(element, app) {
+  var asyncTableHeader;
+  var asyncTableId;
+
+  var ths = [];
+  var pageLinks = [];
+  var pagesizeForm;
+  var scrollTable;
+  var cssIdPrefix = '';
+
+  var tableFilterInputs = {
+    search: [],
+    input: [],
+    change: [],
+    select: [],
+  };
+
+  function init() {
+    if (!element) {
+      throw new Error('Async Table utility cannot be setup without an element!');
+    }
+
+    if (element.classList.contains(ASYNC_TABLE_INITIALIZED_CLASS)) {
+      return false;
+    }
+
+    // param asyncTableDbHeader
+    if (element.dataset.asyncTableDbHeader !== undefined) {
+      asyncTableHeader = element.dataset.asyncTableDbHeader;
+    }
+
+    var rawTableId = element.querySelector('table').id;
+    cssIdPrefix = findCssIdPrefix(rawTableId);
+    asyncTableId = rawTableId.replace(cssIdPrefix, '');
+
+    // find scrolltable wrapper
+    scrollTable = element.querySelector(ASYNC_TABLE_SCROLLTABLE_SELECTOR);
+    if (!scrollTable) {
+      throw new Error('Async Table cannot be set up without a scrolltable element!');
+    }
+
+    setupSortableHeaders();
+    setupPagination();
+    setupPageSizeSelect();
+    setupTableFilter();
+
+    processLocalStorage();
+
+    // clear currentTableUrl from previous requests
+    setLocalStorageParameter('currentTableUrl', null);
+
+    // mark initialized
+    element.classList.add(ASYNC_TABLE_INITIALIZED_CLASS);
+
+    return {
+      name: ASYNC_TABLE_UTIL_NAME,
+      element: element,
+      destroy: function() {},
+    };
+  }
+
+  function setupSortableHeaders() {
+    ths = Array.from(scrollTable.querySelectorAll('th.sortable')).map(function(th) {
+      return { element: th };
+    });
+
+    ths.forEach(function(th) {
+      th.clickHandler = function(event) {
+        setLocalStorageParameter('horizPos', (scrollTable || {}).scrollLeft);
+        linkClickHandler(event);
+      };
+      th.element.addEventListener('click', th.clickHandler);
+    });
+  }
+
+  function setupPagination() {
+    var pagination = element.querySelector('#' + cssIdPrefix + asyncTableId + '-pagination');
+    if (pagination) {
+      pageLinks = Array.from(pagination.querySelectorAll('.page-link')).map(function(link) {
+        return { element: link };
+      });
+
+      pageLinks.forEach(function(link) {
+        link.clickHandler = function(event) {
+          var tableBoundingRect = scrollTable.getBoundingClientRect();
+          if (tableBoundingRect.top < HEADER_HEIGHT) {
+            var scrollTo = {
+              top: (scrollTable.offsetTop || 0) - HEADER_HEIGHT,
+              left: scrollTable.offsetLeft || 0,
+              behavior: 'smooth',
+            };
+            setLocalStorageParameter('scrollTo', scrollTo);
+          }
+          linkClickHandler(event);
+        };
+        link.element.addEventListener('click', link.clickHandler);
+      });
+    }
+  }
+
+  function setupPageSizeSelect() {
+    // pagesize form
+    pagesizeForm = element.querySelector('#' + cssIdPrefix + asyncTableId + '-pagesize-form');
+
+    if (pagesizeForm) {
+      var pagesizeSelect = pagesizeForm.querySelector('[name=' + asyncTableId + '-pagesize]');
+      pagesizeSelect.addEventListener('change', changePagesizeHandler);
+    }
+  }
+
+  function setupTableFilter() {
+    var tableFilterForm = element.querySelector(ASYNC_TABLE_FILTER_FORM_SELECTOR);
+
+    if (tableFilterForm) {
+      gatherTableFilterInputs(tableFilterForm);
+      addTableFilterEventListeners(tableFilterForm);
+    }
+  }
+
+  function gatherTableFilterInputs(tableFilterForm) {
+    Array.from(tableFilterForm.querySelectorAll('input[type="search"]')).forEach(function(input) {
+      tableFilterInputs.search.push(input);
+    });
+
+    Array.from(tableFilterForm.querySelectorAll('input[type="text"]')).forEach(function(input) {
+      tableFilterInputs.input.push(input);
+    });
+
+    Array.from(tableFilterForm.querySelectorAll('input:not([type="text"]):not([type="search"])')).forEach(function(input) {
+      tableFilterInputs.change.push(input);
+    });
+
+    Array.from(tableFilterForm.querySelectorAll('select')).forEach(function(input) {
+      tableFilterInputs.select.push(input);
+    });
+  }
+
+  function addTableFilterEventListeners(tableFilterForm) {
+    tableFilterInputs.search.forEach(function(input) {
+      var debouncedInput = debounce(function() {
+        if (input.value.length === 0 || input.value.length > 2) {
+          updateFromTableFilter(tableFilterForm);
+        }
+      }, INPUT_DEBOUNCE);
+      input.addEventListener('input', debouncedInput);
+    });
+
+    tableFilterInputs.input.forEach(function(input) {
+      var debouncedInput = debounce(function() {
+        if (input.value.length === 0 || input.value.length > 2) {
+          updateFromTableFilter(tableFilterForm);
+        }
+      }, INPUT_DEBOUNCE);
+      input.addEventListener('input', debouncedInput);
+    });
+
+    tableFilterInputs.change.forEach(function(input) {
+      input.addEventListener('change', function() {
+        updateFromTableFilter(tableFilterForm);
+      });
+    });
+
+    tableFilterInputs.select.forEach(function(input) {
+      input.addEventListener('change', function() {
+        updateFromTableFilter(tableFilterForm);
+      });
+    });
+
+    tableFilterForm.addEventListener('submit', function(event) {
+      event.preventDefault();
+      updateFromTableFilter(tableFilterForm);
+    });
+  }
+
+  function updateFromTableFilter(tableFilterForm) {
+    var url = serializeTableFilterToURL();
+    var callback = null;
+
+    var focusedInput = tableFilterForm.querySelector(':focus, :active');
+    // focus previously focused input
+    if (focusedInput && focusedInput.selectionStart !== null) {
+      var selectionStart = focusedInput.selectionStart;
+      // remove the following part of the id to get rid of the random
+      // (yet somewhat structured) prefix we got from nudging.
+      var prefix = findCssIdPrefix(focusedInput.id);
+      var focusId = focusedInput.id.replace(prefix, '');
+      callback = function(wrapper) {
+        var idPrefix = getLocalStorageParameter('cssIdPrefix');
+        var toBeFocused = wrapper.querySelector('#' + idPrefix + focusId);
+        if (toBeFocused) {
+          toBeFocused.focus();
+          toBeFocused.selectionStart = selectionStart;
+        }
+      };
+    }
+    updateTableFrom(url, callback);
+  }
+
+  function serializeTableFilterToURL() {
+    var url = new URL(getLocalStorageParameter('currentTableUrl') || window.location.href);
+
+    var formIdElement = element.querySelector(ASYNC_TABLE_FILTER_FORM_ID_SELECTOR);
+    if (!formIdElement) {
+      // cannot serialize the filter form without an identifier
+      return;
+    }
+
+    url.searchParams.set('form-identifier', formIdElement.value);
+    url.searchParams.set('_hasdata', 'true');
+    url.searchParams.set(asyncTableId + '-page', '0');
+
+    tableFilterInputs.search.forEach(function(input) {
+      url.searchParams.set(input.name, input.value);
+    });
+
+    tableFilterInputs.input.forEach(function(input) {
+      url.searchParams.set(input.name, input.value);
+    });
+
+    tableFilterInputs.change.forEach(function(input) {
+      if (input.checked) {
+        url.searchParams.set(input.name, input.value);
+      }
+    });
+
+    tableFilterInputs.select.forEach(function(select) {
+      var options = Array.from(select.querySelectorAll('option'));
+      var selected = options.find(function(option) { return option.selected; });
+      if (selected) {
+        url.searchParams.set(select.name, selected.value);
+      }
+    });
+
+    return url;
+  }
+
+  function processLocalStorage() {
+    var scrollTo = getLocalStorageParameter('scrollTo');
+    if (scrollTo && scrollTable) {
+      window.scrollTo(scrollTo);
+    }
+    setLocalStorageParameter('scrollTo', null);
+
+    var horizPos = getLocalStorageParameter('horizPos');
+    if (horizPos && scrollTable) {
+      scrollTable.scrollLeft = horizPos;
+    }
+    setLocalStorageParameter('horizPos', null);
+  }
+
+  function removeListeners() {
+    ths.forEach(function(th) {
+      th.element.removeEventListener('click', th.clickHandler);
+    });
+
+    pageLinks.forEach(function(link) {
+      link.element.removeEventListener('click', link.clickHandler);
+    });
+
+    if (pagesizeForm) {
+      var pagesizeSelect = pagesizeForm.querySelector('[name=' + asyncTableId + '-pagesize]');
+      pagesizeSelect.removeEventListener('change', changePagesizeHandler);
+    }
+  }
+
+  function linkClickHandler(event) {
+    event.preventDefault();
+    var url = getClickDestination(event.target);
+    if (!url.match(/^http/)) {
+      url = window.location.origin + window.location.pathname + url;
+    }
+    updateTableFrom(url);
+  }
+
+  function getClickDestination(el) {
+    if (!el.matches('a') && !el.querySelector('a')) {
+      return '';
+    }
+    return el.getAttribute('href') || el.querySelector('a').getAttribute('href');
+  }
+
+  function changePagesizeHandler(event) {
+    var pagesizeParamKey = asyncTableId + '-pagesize';
+    var pageParamKey = asyncTableId + '-page';
+    var url = new URL(getLocalStorageParameter('currentTableUrl') || window.location.href);
+    url.searchParams.set(pagesizeParamKey, event.target.value);
+    url.searchParams.set(pageParamKey, 0);
+    updateTableFrom(url.href);
+  }
+
+  // fetches new sorted element from url with params and replaces contents of current element
+  function updateTableFrom(url, callback) {
+    element.classList.add(ASYNC_TABLE_LOADING_CLASS);
+
+    var headers = {
+      'Accept': HttpClient.ACCEPT.TEXT_HTML,
+      [asyncTableHeader]: asyncTableId,
+    };
+
+    app.httpClient.get({
+      url: url,
+      headers: headers,
+    }).then(function(response) {
+      return app.htmlHelpers.parseResponse(response);
+    }).then(function(response) {
+      setLocalStorageParameter('currentTableUrl', url.href);
+      // reset table
+      removeListeners();
+      element.classList.remove(ASYNC_TABLE_INITIALIZED_CLASS);
+      // update table with new
+      updateWrapperContents(response);
+
+      app.utilRegistry.setupAll(element);
+
+      if (callback && typeof callback === 'function') {
+        setLocalStorageParameter('cssIdPrefix', response.idPrefix);
+        callback(element);
+        setLocalStorageParameter('cssIdPrefix', '');
+      }
+    }).catch(function(err) {
+      console.error(err);
+    }).finally(function() {
+      element.classList.remove(ASYNC_TABLE_LOADING_CLASS);
+    });
+  }
+
+  function updateWrapperContents(response) {
+    var newPage = document.createElement('div');
+    newPage.appendChild(response.element);
+    var newWrapperContents = newPage.querySelector('#' + response.idPrefix + element.id);
+    element.innerHTML = newWrapperContents.innerHTML;
+  }
+
+  return init();
+};
+
+
+// returns any random nudged prefix found in the given id
+function findCssIdPrefix(id) {
+  var matcher = /r\d*?__/;
+  var maybePrefix = id.match(matcher);
+  if (maybePrefix && maybePrefix[0]) {
+    return maybePrefix[0];
+  }
+  return '';
+}
+
+function setLocalStorageParameter(key, value) {
+  var currentLSState = JSON.parse(window.localStorage.getItem(ASYNC_TABLE_LOCAL_STORAGE_KEY)) || {};
+  if (value !== null) {
+    currentLSState[key] = value;
+  } else {
+    delete currentLSState[key];
+  }
+  window.localStorage.setItem(ASYNC_TABLE_LOCAL_STORAGE_KEY, JSON.stringify(currentLSState));
+}
+
+function getLocalStorageParameter(key) {
+  var currentLSState = JSON.parse(window.localStorage.getItem(ASYNC_TABLE_LOCAL_STORAGE_KEY)) || {};
+  return currentLSState[key];
+}
+
+// debounce function, taken from Underscore.js
+function debounce(func, wait, immediate) {
+  var timeout;
+  return function() {
+    var context = this, args = arguments;
+    var later = function() {
+      timeout = null;
+      if (!immediate) func.apply(context, args);
+    };
+    var callNow = immediate && !timeout;
+    clearTimeout(timeout);
+    timeout = setTimeout(later, wait);
+    if (callNow) func.apply(context, args);
+  };
+}
+
+export default {
+  name: ASYNC_TABLE_UTIL_NAME,
+  selector: ASYNC_TABLE_UTIL_SELECTOR,
+  setup: asyncTableUtil,
+};
diff --git a/frontend/src/utils/async-table/async-table.scss b/frontend/src/utils/async-table/async-table.scss
new file mode 100644
index 000000000..9766daa84
--- /dev/null
+++ b/frontend/src/utils/async-table/async-table.scss
@@ -0,0 +1,5 @@
+.async-table--loading {
+  opacity: 0.7;
+  pointer-events: none;
+  transition: opacity 400ms ease-out;
+}
diff --git a/frontend/src/utils/check-all/check-all.js b/frontend/src/utils/check-all/check-all.js
new file mode 100644
index 000000000..bc88f8904
--- /dev/null
+++ b/frontend/src/utils/check-all/check-all.js
@@ -0,0 +1,141 @@
+/**
+ *
+ * Check All Checkbox Utility
+ *  adds a Check All Checkbox above columns with only checkboxes
+ *
+ * Attribute: [none]
+ *   (will be set up automatically on tables)
+ *
+ * Example usage:
+ *  (table with one column thats only checkboxes)
+ */
+
+var CHECK_ALL_UTIL_NAME = 'checkAll';
+var CHECK_ALL_UTIL_SELECTOR = 'table';
+
+var CHECKBOX_SELECTOR    = '[type="checkbox"]';
+
+var CHECK_ALL_INITIALIZED_CLASS = 'check-all--initialized';
+
+var checkAllUtil = function(element, app) {
+  var columns = [];
+  var checkboxColumn = [];
+  var checkAllCheckbox = null;
+
+  function init() {
+    if (!element) {
+      throw new Error('Check All utility cannot be setup without an element!');
+    }
+
+    if (element.classList.contains(CHECK_ALL_INITIALIZED_CLASS)) {
+      return false;
+    }
+
+    gatherColumns();
+    setupCheckAllCheckbox();
+
+    // mark initialized
+    element.classList.add(CHECK_ALL_INITIALIZED_CLASS);
+
+    return {
+      name: CHECK_ALL_UTIL_NAME,
+      element: element,
+      destroy: function() {},
+    };
+  }
+
+  function getCheckboxId() {
+    return 'check-all-checkbox-' + Math.floor(Math.random() * 100000);
+  }
+
+  function gatherColumns() {
+    var rows = Array.from(element.querySelectorAll('tr'));
+    var cols = [];
+    rows.forEach(function(tr) {
+      var cells = Array.from(tr.querySelectorAll('td'));
+      cells.forEach(function(cell, cellIndex) {
+        if (!cols[cellIndex]) {
+          cols[cellIndex] = [];
+        }
+        cols[cellIndex].push(cell);
+      });
+    });
+    columns = cols;
+  }
+
+  function findCheckboxColumn(columns) {
+    var checkboxColumnId = null;
+    columns.forEach(function(col, i) {
+      if (isCheckboxColumn(col)) {
+        checkboxColumnId = i;
+      }
+    });
+    return checkboxColumnId;
+  }
+
+  function isCheckboxColumn(col) {
+    var onlyCheckboxes = true;
+    col.forEach(function(cell) {
+      if (onlyCheckboxes && !cell.querySelector(CHECKBOX_SELECTOR)) {
+        onlyCheckboxes = false;
+      }
+    });
+    return onlyCheckboxes;
+  }
+
+  function setupCheckAllCheckbox() {
+    var checkboxColumnId = findCheckboxColumn(columns);
+    if (checkboxColumnId === null) {
+      return;
+    }
+
+    checkboxColumn = columns[checkboxColumnId];
+    var firstRow = element.querySelector('tr');
+    var th = Array.from(firstRow.querySelectorAll('th, td'))[checkboxColumnId];
+    checkAllCheckbox = document.createElement('input');
+    checkAllCheckbox.setAttribute('type', 'checkbox');
+    checkAllCheckbox.setAttribute('id', getCheckboxId());
+    th.insertBefore(checkAllCheckbox, th.firstChild);
+
+    // manually set up new checkbox
+    app.utilRegistry.setup(app.utilRegistry.find('checkbox'), th);
+
+    checkAllCheckbox.addEventListener('input', onCheckAllCheckboxInput);
+    setupCheckboxListeners();
+  }
+
+  function onCheckAllCheckboxInput() {
+    toggleAll(checkAllCheckbox.checked);
+  }
+
+  function setupCheckboxListeners() {
+    checkboxColumn
+      .map(function(cell) {
+        return cell.querySelector(CHECKBOX_SELECTOR);
+      })
+      .forEach(function(checkbox) {
+        checkbox.addEventListener('input', updateCheckAllCheckboxState);
+      });
+  }
+
+  function updateCheckAllCheckboxState() {
+    var allChecked = checkboxColumn.every(function(cell) {
+      return cell.querySelector(CHECKBOX_SELECTOR).checked;
+    });
+    checkAllCheckbox.checked = allChecked;
+  }
+
+  function toggleAll(checked) {
+    checkboxColumn.forEach(function(cell) {
+      cell.querySelector(CHECKBOX_SELECTOR).checked = checked;
+    });
+  }
+
+  return init();
+};
+
+export default {
+  name: CHECK_ALL_UTIL_NAME,
+  selector: CHECK_ALL_UTIL_SELECTOR,
+  setup: checkAllUtil,
+};
diff --git a/frontend/src/utils/form/form.js b/frontend/src/utils/form/form.js
new file mode 100644
index 000000000..30fa5bef3
--- /dev/null
+++ b/frontend/src/utils/form/form.js
@@ -0,0 +1,599 @@
+import './form.scss';
+
+/**
+ *
+ * Reactive Submit Button Utility
+ *  disables a forms LAST sumit button as long as the required inputs are invalid
+ *  (only checks if the value of the inputs are not empty)
+ *
+ * Attribute: [none]
+ *  (automatically setup on all form tags)
+ *
+ * Params:
+ *  data-formnorequired: string
+ *    If present the submit button will never get disabled
+ *
+ * Example usage:
+ *  <form uw-reactive-submit-button>
+ *   <input type="text" required>
+ *   <button type="submit">
+ *  </form>
+ */
+
+var REACTIVE_SUBMIT_BUTTON_UTIL_NAME = 'reactiveSubmitButton';
+// var REACTIVE_SUBMIT_BUTTON_UTIL_SELECTOR = 'form';
+
+var REACTIVE_SUBMIT_BUTTON_INITIALIZED_CLASS = 'reactive-submit-button--initialized';
+
+/* eslint-disable-next-line */
+var reactiveSubmitButtonUtil = function(element) {
+  var requiredInputs;
+  var submitButton;
+
+  function init() {
+    if (!element) {
+      throw new Error('Reactive Submit Button utility cannot be setup without an element!');
+    }
+
+    if (element.classList.contains(REACTIVE_SUBMIT_BUTTON_INITIALIZED_CLASS)) {
+      return false;
+    }
+
+    // abort if form has param data-formnorequired
+    if (element.dataset.formnorequired !== undefined) {
+      throw new Error('Form has formnorequired data attribute. Will skip setup of reactive submit button.');
+    }
+
+    requiredInputs = Array.from(element.querySelectorAll('[required]'));
+    if (!requiredInputs) {
+      // abort if form has no required inputs
+      throw new Error('Submit button has formnorequired data attribute. Will skip setup of reactive submit button.');
+    }
+
+    var submitButtons = Array.from(element.querySelectorAll('[type="submit"]'));
+    if (!submitButtons || !submitButtons.length) {
+      throw new Error('Reactive Submit Button utility couldn\'t find any submit buttons!');
+    }
+    submitButton = submitButtons.reverse()[0];
+    // abort if form has param data-formnorequired
+    if (submitButton.dataset.formnorequired !== undefined) {
+      return false;
+    }
+
+    setupInputs();
+    updateButtonState();
+
+    element.classList.add(REACTIVE_SUBMIT_BUTTON_INITIALIZED_CLASS);
+
+    return {
+      name: REACTIVE_SUBMIT_BUTTON_UTIL_NAME,
+      element: element,
+      destroy: function() {},
+    };
+  }
+
+  function setupInputs() {
+    requiredInputs.forEach(function(el) {
+      var checkbox = el.getAttribute('type') === 'checkbox';
+      var eventType = checkbox ? 'change' : 'input';
+      el.addEventListener(eventType, function() {
+        updateButtonState();
+      });
+    });
+  }
+
+  function updateButtonState() {
+    if (inputsValid()) {
+      submitButton.removeAttribute('disabled');
+    } else {
+      submitButton.setAttribute('disabled', 'true');
+    }
+  }
+
+  function inputsValid() {
+    var done = true;
+    requiredInputs.forEach(function(inp) {
+      var len = inp.value.trim().length;
+      if (done && len === 0) {
+        done = false;
+      }
+    });
+    return done;
+  }
+
+  return init();
+};
+
+// skipping reactiveButtonUtil (for now)
+// the button did not properly re-enable after filling out a form for some safari users.
+// if maybe in the future there is going to be a proper way of (asynchronously) and
+// meaningfully validating forms this can be re-activated by commenting in the next few lines
+// eport const reactiveSubmitButton = {
+//   name: REACTIVE_SUBMIT_BUTTON_UTIL_NAME,
+//   selector: REACTIVE_SUBMIT_BUTTON_UTIL_SELECTOR,
+//   setup: reactiveSubmitButtonUtil,
+// };
+
+/**
+ *
+ * Interactive Fieldset Utility
+ *  shows/hides inputs based on value of particular input
+ *
+ * Attribute: uw-interactive-fieldset
+ *
+ * Params:
+ *  data-conditional-input: string
+ *    Selector for the input that this fieldset watches for changes
+ *  data-conditional-value: string
+ *    The value the conditional input needs to be set to for this fieldset to be shown
+ *    Can be omitted if conditionalInput is a checkbox
+ *
+ * Example usage:
+ * ## example with text input
+ *  <input id="input-0" type="text">
+ *  <fieldset uw-interactive-fieldset data-conditional-input="#input-0" data-conditional-value="yes">...</fieldset>
+ *  <fieldset uw-interactive-fieldset data-conditional-input="#input-0" data-conditional-value="no">...</fieldset>
+ * ## example with <select>
+ *  <select id="select-0">
+ *    <option value="0">Zero
+ *    <option value="1">One
+ *  <fieldset uw-interactive-fieldset data-conditional-input="#select-0" data-conditional-value="0">...</fieldset>
+ *  <fieldset uw-interactive-fieldset data-conditional-input="#select-0" data-conditional-value="1">...</fieldset>
+ * ## example with checkbox
+ *  <input id="checkbox-0" type="checkbox">
+ *  <input id="checkbox-1" type="checkbox">
+ *  <fieldset uw-interactive-fieldset data-conditional-input="#checkbox-0">...</fieldset>
+ *  <fieldset uw-interactive-fieldset data-conditional-input="#checkbox-1">...</fieldset>
+ */
+
+var INTERACTIVE_FIELDSET_UTIL_NAME = 'interactiveFieldset';
+var INTERACTIVE_FIELDSET_UTIL_SELECTOR = '[uw-interactive-fieldset]';
+var INTERACTIVE_FIELDSET_UTIL_TARGET_SELECTOR = '.interactive-fieldset__target';
+
+var INTERACTIVE_FIELDSET_INITIALIZED_CLASS = 'interactive-fieldset--initialized';
+var INTERACTIVE_FIELDSET_CHILD_SELECTOR = 'input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled])';
+
+var interactiveFieldsetUtil = function(element) {
+  var conditionalInput;
+  var conditionalValue;
+  var target;
+  var childInputs;
+
+  function init() {
+    if (!element) {
+      throw new Error('Interactive Fieldset utility cannot be setup without an element!');
+    }
+
+    if (element.classList.contains(INTERACTIVE_FIELDSET_INITIALIZED_CLASS)) {
+      return false;
+    }
+
+    // param conditionalInput
+    if (!element.dataset.conditionalInput) {
+      throw new Error('Interactive Fieldset needs a selector for a conditional input!');
+    }
+    conditionalInput = document.querySelector('#' + element.dataset.conditionalInput);
+    if (!conditionalInput) {
+      // abort if form has no required inputs
+      throw new Error('Couldn\'t find the conditional input. Aborting setup for interactive fieldset.');
+    }
+
+    // param conditionalValue
+    if (!element.dataset.conditionalValue && !isCheckbox()) {
+      throw new Error('Interactive Fieldset needs a conditional value!');
+    }
+    conditionalValue = element.dataset.conditionalValue;
+
+    target = element.closest(INTERACTIVE_FIELDSET_UTIL_TARGET_SELECTOR);
+    if (!target || element.matches(INTERACTIVE_FIELDSET_UTIL_TARGET_SELECTOR)) {
+      target = element;
+    }
+
+    childInputs = Array.from(element.querySelectorAll(INTERACTIVE_FIELDSET_CHILD_SELECTOR));
+
+    // add event listener
+    var observer = new MutationObserver(() => updateVisibility());
+    observer.observe(conditionalInput, { attributes: true, attributeFilter: ['disabled'] });
+    conditionalInput.addEventListener('input', updateVisibility);
+
+    // initial visibility update
+    updateVisibility();
+
+    // mark as initialized
+    element.classList.add(INTERACTIVE_FIELDSET_INITIALIZED_CLASS);
+
+    return {
+      name: INTERACTIVE_FIELDSET_UTIL_NAME,
+      element: element,
+      destroy: function() {},
+    };
+  }
+
+  function updateVisibility() {
+    var active = matchesConditionalValue() && !conditionalInput.disabled;
+
+    target.classList.toggle('hidden', !active);
+
+    childInputs.forEach(function(el) {
+      el.disabled = !active;
+      if (el._flatpickr) {
+        el._flatpickr.altInput.disabled = !active;
+      }
+    });
+  }
+
+  function matchesConditionalValue() {
+    if (isCheckbox()) {
+      return conditionalInput.checked === true;
+    }
+
+    return conditionalInput.value === conditionalValue;
+  }
+
+  function isCheckbox() {
+    return conditionalInput.getAttribute('type') === 'checkbox';
+  }
+
+  return init();
+};
+
+export const interactiveFieldset = {
+  name: INTERACTIVE_FIELDSET_UTIL_NAME,
+  selector: INTERACTIVE_FIELDSET_UTIL_SELECTOR,
+  setup: interactiveFieldsetUtil,
+};
+
+/**
+ *
+ * Navigate Away Prompt Utility
+ *  This utility asks the user if (s)he really wants to navigate away
+ *  from a page containing a form if (s)he already touched an input.
+ *  Form-Submits will not trigger the prompt.
+ *  Utility will ignore forms that contain auto submit elements (buttons, inputs).
+ *
+ * Attribute: [none]
+ *  (automatically setup on all form tags that dont automatically submit, see AutoSubmitButtonUtil)
+ *
+ * Example usage:
+ *  (any page with a form)
+ */
+
+var NAVIGATE_AWAY_PROMPT_UTIL_NAME = 'navigateAwayPrompt';
+var NAVIGATE_AWAY_PROMPT_UTIL_SELECTOR = 'form';
+
+var NAVIGATE_AWAY_PROMPT_INITIALIZED_CLASS = 'navigate-away-prompt--initialized';
+
+var navigateAwayPromptUtil = function(element) {
+  var touched = false;
+  var unloadDueToSubmit = false;
+
+  function init() {
+    if (!element) {
+      throw new Error('Navigate Away Prompt utility needs to be passed an element!');
+    }
+
+    if (element.classList.contains(NAVIGATE_AWAY_PROMPT_INITIALIZED_CLASS)) {
+      return false;
+    }
+
+    // ignore forms that get submitted automatically
+    if (element.querySelector(AUTO_SUBMIT_BUTTON_UTIL_SELECTOR) || element.querySelector(AUTO_SUBMIT_INPUT_UTIL_SELECTOR)) {
+      return false;
+    }
+
+    window.addEventListener('beforeunload', beforeUnloadHandler);
+
+    element.addEventListener('submit', function() {
+      unloadDueToSubmit = true;
+    });
+    element.addEventListener('change', function() {
+      touched = true;
+      unloadDueToSubmit = false;
+    });
+
+    // mark initialized
+    element.classList.add(NAVIGATE_AWAY_PROMPT_INITIALIZED_CLASS);
+
+    return {
+      name: NAVIGATE_AWAY_PROMPT_UTIL_NAME,
+      element: element,
+      destroy: function() {
+        window.removeEventListener('beforeunload', beforeUnloadHandler);
+      },
+    };
+  }
+
+  function beforeUnloadHandler(event) {
+    // allow the event to happen if the form was not touched by the
+    // user or the unload event was initiated by a form submit
+    if (!touched || unloadDueToSubmit) {
+      return false;
+    }
+
+    // cancel the unload event. This is the standard to force the prompt to appear.
+    event.preventDefault();
+    // for all non standard compliant browsers we return a truthy value to activate the prompt.
+    return true;
+  }
+
+  return init();
+};
+
+export const navigateAwayPrompt = {
+  name: NAVIGATE_AWAY_PROMPT_UTIL_NAME,
+  selector: NAVIGATE_AWAY_PROMPT_UTIL_SELECTOR,
+  setup: navigateAwayPromptUtil,
+};
+
+/**
+ *
+ * Auto Submit Button Utility
+ *  Hides submit buttons in forms that are submitted programmatically
+ *  We hide the button using JavaScript so no-js users will still be able to submit the form
+ *
+ * Attribute: uw-auto-submit-button
+ *
+ * Example usage:
+ *  <button type="submit" uw-auto-submit-button>Submit
+ */
+
+var AUTO_SUBMIT_BUTTON_UTIL_NAME = 'autoSubmitButton';
+var AUTO_SUBMIT_BUTTON_UTIL_SELECTOR = '[uw-auto-submit-button]';
+
+var AUTO_SUBMIT_BUTTON_INITIALIZED_CLASS = 'auto-submit-button--initialized';
+var AUTO_SUBMIT_BUTTON_HIDDEN_CLASS = 'hidden';
+
+var autoSubmitButtonUtil = function(element) {
+  if (!element) {
+    throw new Error('Auto Submit Button utility needs to be passed an element!');
+  }
+
+  if (element.classList.contains(AUTO_SUBMIT_BUTTON_INITIALIZED_CLASS)) {
+    return false;
+  }
+
+  // hide and mark initialized
+  element.classList.add(AUTO_SUBMIT_BUTTON_HIDDEN_CLASS, AUTO_SUBMIT_BUTTON_INITIALIZED_CLASS);
+
+  return {
+    name: AUTO_SUBMIT_BUTTON_UTIL_NAME,
+    element: element,
+    destroy: function() {},
+  };
+};
+
+export const autoSubmitButton = {
+  name: AUTO_SUBMIT_BUTTON_UTIL_NAME,
+  selector: AUTO_SUBMIT_BUTTON_UTIL_SELECTOR,
+  setup: autoSubmitButtonUtil,
+};
+
+/**
+ *
+ * Auto Submit Input Utility
+ *  Programmatically submits forms when a certain input changes value
+ *
+ * Attribute: uw-auto-submit-input
+ *
+ * Example usage:
+ *  <input type="text" uw-auto-submit-input />
+ */
+
+var AUTO_SUBMIT_INPUT_UTIL_NAME = 'autoSubmitInput';
+var AUTO_SUBMIT_INPUT_UTIL_SELECTOR = '[uw-auto-submit-input]';
+
+var AUTO_SUBMIT_INPUT_INITIALIZED_CLASS = 'auto-submit-input--initialized';
+
+var autoSubmitInputUtil = function(element) {
+  var form;
+  var debouncedHandler;
+
+  function autoSubmit() {
+    form.submit();
+  }
+
+  function init() {
+    if (!element) {
+      throw new Error('Auto Submit Input utility needs to be passed an element!');
+    }
+
+    if (element.classList.contains(AUTO_SUBMIT_INPUT_INITIALIZED_CLASS)) {
+      return false;
+    }
+
+    form = element.form;
+    if (!form) {
+      throw new Error('Could not determine associated form for auto submit input');
+    }
+
+    debouncedHandler = debounce(autoSubmit, 500);
+
+    element.addEventListener('input', debouncedHandler);
+
+    element.classList.add(AUTO_SUBMIT_INPUT_INITIALIZED_CLASS);
+
+    return {
+      name: AUTO_SUBMIT_INPUT_UTIL_NAME,
+      element: element,
+      destroy: function() {
+        element.removeEventListener('input', debouncedHandler);
+      },
+    };
+  }
+
+  return init();
+};
+
+export const autoSubmitInput = {
+  name: AUTO_SUBMIT_INPUT_UTIL_NAME,
+  selector: AUTO_SUBMIT_INPUT_UTIL_SELECTOR,
+  setup: autoSubmitInputUtil,
+};
+
+/**
+ *
+ * Form Error Remover Utility
+ *  Removes errors from inputs when they are focused
+ *
+ * Attribute: [none]
+ *  (automatically setup on all form tags)
+ *
+ * Example usage:
+ *  (any regular form that can show input errors)
+ */
+
+var FORM_ERROR_REMOVER_UTIL_NAME = 'formErrorRemover';
+var FORM_ERROR_REMOVER_UTIL_SELECTOR = 'form';
+
+var FORM_ERROR_REMOVER_INITIALIZED_CLASS = 'form-error-remover--initialized';
+var FORM_ERROR_REMOVER_INPUTS_SELECTOR = 'input:not([type="hidden"]), textarea, select';
+
+var FORM_GROUP_SELECTOR = '.form-group';
+var FORM_GROUP_WITH_ERRORS_CLASS = 'form-group--has-error';
+
+
+var formErrorRemoverUtil = function(element) {
+  var formGroups;
+
+  function init() {
+    if (!element) {
+      throw new Error('Form Error Remover utility needs to be passed an element!');
+    }
+
+    if (element.classList.contains(FORM_ERROR_REMOVER_INITIALIZED_CLASS)) {
+      return false;
+    }
+
+    // find form groups
+    formGroups = Array.from(element.querySelectorAll(FORM_GROUP_SELECTOR));
+
+    formGroups.forEach(function(formGroup) {
+      if (!formGroup.classList.contains(FORM_GROUP_WITH_ERRORS_CLASS)) {
+        return;
+      }
+
+      var inputElements = Array.from(formGroup.querySelectorAll(FORM_ERROR_REMOVER_INPUTS_SELECTOR));
+      if (!inputElements) {
+        return false;
+      }
+
+      inputElements.forEach(function(inputElement) {
+        inputElement.addEventListener('input', function() {
+          formGroup.classList.remove(FORM_GROUP_WITH_ERRORS_CLASS);
+        });
+      });
+    });
+
+    // mark initialized
+    element.classList.add(FORM_ERROR_REMOVER_INITIALIZED_CLASS);
+
+    return {
+      name: FORM_ERROR_REMOVER_UTIL_NAME,
+      element: element,
+      destroy: function() {},
+    };
+  }
+
+  return init();
+};
+
+export const formErrorRemover = {
+  name: FORM_ERROR_REMOVER_UTIL_NAME,
+  selector: FORM_ERROR_REMOVER_UTIL_SELECTOR,
+  setup: formErrorRemoverUtil,
+};
+
+/**
+ *
+ * Datepicker Utility
+ *  Provides UI for entering dates and times
+ *
+ * Attribute: [none]
+ *  (automatically setup on all relevant input tags)
+ *
+ * Example usage:
+ *  (any form that uses inputs of type date, time, or datetime-local)
+ */
+
+var DATEPICKER_UTIL_NAME = 'datepicker';
+var DATEPICKER_UTIL_SELECTOR = 'input[type="date"], input[type="time"], input[type="datetime-local"]';
+
+var DATEPICKER_INITIALIZED_CLASS = 'datepicker--initialized';
+
+var DATEPICKER_CONFIG = {
+  "datetime-local": {
+    enableTime: true,
+    altInput: true,
+    altFormat: "j. F Y, H:i", // maybe interpolate these formats for locale
+    dateFormat: "Y-m-dTH:i",
+    time_24hr: true,
+  },
+  "date": {
+    altFormat: "j. F Y",
+    dateFormat: "Y-m-d",
+    altInput: true,
+  },
+  "time": {
+    enableTime: true,
+    noCalendar: true,
+    altFormat: "H:i",
+    dateFormat: "H:i",
+    altInput: true,
+    time_24hr: true,
+  },
+};
+
+var datepickerUtil = function(element) {
+  var flatpickrInstance;
+
+  function init() {
+    if (!element) {
+      throw new Error('Datepicker utility needs to be passed an element!');
+    }
+
+    if (element.classList.contains(DATEPICKER_INITIALIZED_CLASS)) {
+      return false;
+    }
+
+    var flatpickrConfig = DATEPICKER_CONFIG[element.getAttribute("type")];
+
+    if (!flatpickrConfig) {
+      throw new Error('Datepicker utility called on unsupported element!');
+    }
+
+    flatpickrInstance = flatpickr(element, flatpickrConfig);
+
+    // mark initialized
+    element.classList.add(DATEPICKER_INITIALIZED_CLASS);
+
+    return {
+      name: DATEPICKER_UTIL_NAME,
+      element: element,
+      destroy: function() { flatpickrInstance.destroy(); },
+    };
+  }
+
+  return init();
+};
+
+export const datepicker = {
+  name: DATEPICKER_UTIL_NAME,
+  selector: DATEPICKER_UTIL_SELECTOR,
+  setup: datepickerUtil,
+};
+
+// debounce function, taken from Underscore.js
+function debounce(func, wait, immediate) {
+  var timeout;
+  return function() {
+    var context = this, args = arguments;
+    var later = function() {
+      timeout = null;
+      if (!immediate) func.apply(context, args);
+    };
+    var callNow = immediate && !timeout;
+    clearTimeout(timeout);
+    timeout = setTimeout(later, wait);
+    if (callNow) func.apply(context, args);
+  };
+}
diff --git a/frontend/src/utils/form/form.scss b/frontend/src/utils/form/form.scss
new file mode 100644
index 000000000..6612beeb1
--- /dev/null
+++ b/frontend/src/utils/form/form.scss
@@ -0,0 +1,45 @@
+fieldset {
+  border: 0;
+  margin: 0;
+  padding: 0;
+
+  legend {
+    display: none;
+  }
+}
+
+@media (min-width: 769px) {
+  .form-group__input {
+    grid-column: 2;
+  }
+}
+
+[uw-auto-submit-button][type="submit"] {
+  animation: fade-in 500ms ease-in-out backwards;
+  animation-delay: 500ms;
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+}
+
+.hidden {
+  visibility: hidden !important;
+  height: 0 !important;
+  width: 0 !important;
+  opacity: 0 !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  min-width: 0 !important;
+}
+
+.select--pagesize {
+  width: 5em;
+  min-width: 75px;
+}
+
+.label-pagesize {
+  margin-right: 13px;
+}
diff --git a/frontend/src/utils/inputs/checkbox.scss b/frontend/src/utils/inputs/checkbox.scss
new file mode 100644
index 000000000..6db7f97e3
--- /dev/null
+++ b/frontend/src/utils/inputs/checkbox.scss
@@ -0,0 +1,82 @@
+
+/* CUSTOM CHECKBOXES */
+/* Completely replaces legacy checkbox */
+.checkbox {
+  position: relative;
+  display: inline-block;
+
+  [type="checkbox"] {
+    position: fixed;
+    top: -1px;
+    left: -1px;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+  }
+
+  label {
+    display: block;
+    height: 20px;
+    width: 20px;
+    background-color: #f3f3f3;
+    box-shadow: inset 0 1px 2px 1px rgba(50, 50, 50, 0.05);
+    border: 2px solid var(--color-primary);
+    border-radius: 4px;
+    color: white;
+    cursor: pointer;
+  }
+
+  label::before,
+  label::after {
+    position: absolute;
+    display: block;
+    top: 12px;
+    left: 8px;
+    height: 2px;
+    width: 8px;
+    background-color: var(--color-font);
+  }
+
+  :checked + label {
+    background-color: var(--color-primary);
+  }
+
+  [type="checkbox"]:focus + label {
+    border-color: #3273dc;
+    box-shadow: 0 0 0 0.125em rgba(50,115,220,.25);
+    outline: 0;
+  }
+
+  :checked + label::before,
+  :checked + label::after {
+    content: '';
+  }
+
+  :checked + label::before {
+    background-color: white;
+    transform: rotate(45deg);
+    left: 2px;
+    top: 11px;
+  }
+
+  :checked + label::after {
+    background-color: white;
+    transform: rotate(-45deg);
+    top: 9px;
+    width: 12px;
+    left: 7px;
+  }
+
+  [disabled] + label {
+    pointer-events: none;
+    border: none;
+    opacity: 0.6;
+    filter: grayscale(1);
+  }
+}
+
+/* special treatment for checkboxes in table headers */
+th .checkbox {
+  margin-right: 7px;
+  vertical-align: bottom;
+}
diff --git a/frontend/src/utils/inputs/inputs.js b/frontend/src/utils/inputs/inputs.js
new file mode 100644
index 000000000..53d0ebb9a
--- /dev/null
+++ b/frontend/src/utils/inputs/inputs.js
@@ -0,0 +1,194 @@
+import './checkbox.scss';
+import './radio.scss';
+import './inputs.scss';
+
+/**
+ *
+ * FileInput Utility
+ *  wraps native file input
+ *
+ * Attribute: uw-file-input
+ *  (element must be an input of type='file')
+ *
+ * Example usage:
+ * <input type='file' uw-file-input>
+ *
+ * Internationalization:
+ *  This utility expects the following translations to be available:
+ *    »filesSelected«: label of multi-input button after selection
+ *      example: "Dateien ausgewählt" (will be prepended by number of selected files)
+ *    »selectFile«: label of single-input button before selection
+ *      example: "Datei auswählen"
+ *    »selectFiles«: label of multi-input button before selection
+ *      example: "Datei(en) auswählen"
+ *
+ */
+
+var FILE_INPUT_UTIL_NAME = 'fileInput';
+var FILE_INPUT_UTIL_SELECTOR = 'input[type="file"][uw-file-input]';
+
+var FILE_INPUT_CLASS = 'file-input';
+var FILE_INPUT_INITIALIZED_CLASS = 'file-input--initialized';
+var FILE_INPUT_LIST_CLASS = 'file-input__list';
+var FILE_INPUT_UNPACK_CHECKBOX_CLASS = 'file-input__unpack';
+var FILE_INPUT_LABEL_CLASS = 'file-input__label';
+
+var fileInputUtil = function(element, app) {
+  var isMultiFileInput = false;
+  var fileList;
+  var label;
+
+  function init() {
+    if (!element) {
+      throw new Error('FileInput utility cannot be setup without an element!');
+    }
+
+    if (element.classList.contains(FILE_INPUT_INITIALIZED_CLASS)) {
+      throw new Error('FileInput utility already initialized!');
+    }
+
+    // check if is multi-file input
+    isMultiFileInput = element.hasAttribute('multiple');
+    if (isMultiFileInput) {
+      fileList = createFileList();
+    }
+
+    label = createFileLabel();
+    updateLabel();
+
+    // add change listener
+    element.addEventListener('change', function() {
+      updateLabel();
+      renderFileList();
+    });
+
+    // add util class for styling and mark as initialized
+    element.classList.add(FILE_INPUT_CLASS);
+    element.classList.add(FILE_INPUT_INITIALIZED_CLASS);
+
+    return {
+      name: FILE_INPUT_UTIL_NAME,
+      element: element,
+      destroy: function() {},
+    };
+  }
+
+  function renderFileList() {
+    if (!fileList) {
+      return;
+    }
+
+    var files = element.files;
+    fileList.innerHTML = '';
+    Array.from(files).forEach(function(file) {
+      var fileDisplayEl = document.createElement('li');
+      fileDisplayEl.innerHTML = file.name;
+      fileList.appendChild(fileDisplayEl);
+    });
+  }
+
+  function createFileList() {
+    var list = document.createElement('ol');
+    list.classList.add(FILE_INPUT_LIST_CLASS);
+    var unpackEl = element.parentElement.querySelector('.' + FILE_INPUT_UNPACK_CHECKBOX_CLASS);
+    if (unpackEl) {
+      element.parentElement.insertBefore(list, unpackEl);
+    } else {
+      element.parentElement.appendChild(list);
+    }
+    return list;
+  }
+
+  function createFileLabel() {
+    var label = document.createElement('label');
+    label.classList.add(FILE_INPUT_LABEL_CLASS);
+    label.setAttribute('for', element.id);
+    element.parentElement.insertBefore(label, element);
+    return label;
+  }
+
+  function updateLabel() {
+    var files = element.files;
+    if (files && files.length) {
+      label.innerText = isMultiFileInput ? files.length + ' ' + app.i18n.get('filesSelected') : files[0].name;
+    } else {
+      label.innerText = isMultiFileInput ? app.i18n.get('selectFiles') : app.i18n.get('selectFile');
+    }
+  }
+
+  return init();
+};
+
+export const fileInput = {
+  name: FILE_INPUT_UTIL_NAME,
+  selector: FILE_INPUT_UTIL_SELECTOR,
+  setup: fileInputUtil,
+};
+
+/**
+ *
+ * Checkbox Utility
+ *  wraps native checkbox
+ *
+ * Attribute: (none)
+ *  (element must be an input of type="checkbox")
+ *
+ * Example usage:
+ * <input type="checkbox">
+ *
+ */
+
+var CHECKBOX_UTIL_NAME = 'checkbox';
+var CHECKBOX_UTIL_SELECTOR = 'input[type="checkbox"]';
+
+var CHECKBOX_CLASS = 'checkbox';
+var CHECKBOX_INITIALIZED_CLASS = 'checkbox--initialized';
+
+var checkboxUtil = function(element) {
+
+  function init() {
+    if (!element) {
+      throw new Error('Checkbox utility cannot be setup without an element!');
+    }
+
+    if (element.classList.contains(CHECKBOX_INITIALIZED_CLASS)) {
+      // throw new Error('Checkbox utility already initialized!');
+      return false;
+    }
+
+    if (element.parentElement.classList.contains(CHECKBOX_CLASS)) {
+      // throw new Error('Checkbox element\'s wrapper already has class "' + CHECKBOX_CLASS + '"!');
+      return false;
+    }
+
+    var siblingEl = element.nextSibling;
+    var parentEl = element.parentElement;
+
+    var wrapperEl = document.createElement('div');
+    wrapperEl.classList.add(CHECKBOX_CLASS);
+
+    var labelEl = document.createElement('label');
+    labelEl.setAttribute('for', element.id);
+
+    wrapperEl.appendChild(element);
+    wrapperEl.appendChild(labelEl);
+
+    parentEl.insertBefore(wrapperEl, siblingEl);
+
+    element.classList.add(CHECKBOX_INITIALIZED_CLASS);
+
+    return {
+      name: CHECKBOX_UTIL_NAME,
+      element: element,
+      destroy: function() {},
+    };
+  }
+
+  return init();
+};
+
+export const checkbox = {
+  name: CHECKBOX_UTIL_NAME,
+  selector: CHECKBOX_UTIL_SELECTOR,
+  setup: checkboxUtil,
+};
diff --git a/frontend/src/utils/inputs/inputs.scss b/frontend/src/utils/inputs/inputs.scss
new file mode 100644
index 000000000..3290094d0
--- /dev/null
+++ b/frontend/src/utils/inputs/inputs.scss
@@ -0,0 +1,239 @@
+/* GENERAL STYLES FOR FORMS */
+
+/* FORM GROUPS */
+.form-group {
+  position: relative;
+  display: flex;
+  display: grid;
+  grid-template-columns: 1fr 3fr;
+  grid-gap: 5px;
+  justify-content: flex-start;
+  align-items: flex-start;
+  padding: 4px 0;
+  border-left: 2px solid transparent;
+
+  + .form-group {
+    margin-top: 7px;
+  }
+
+  + .form-section-title {
+    margin-top: 40px;
+  }
+}
+
+.form-section-title {
+  color: var(--color-fontsec);
+}
+
+.form-group-label {
+  font-weight: 600;
+  padding-top: 6px;
+}
+
+.form-group-label__hint {
+  margin-top: 7px;
+  color: var(--color-fontsec);
+  font-size: 0.9rem;
+}
+
+.form-group--required {
+  .form-group-label__caption::after {
+    content: ' *';
+    color: var(--color-error);
+  }
+}
+
+.form-group--optional {
+  .form-group-label__caption::after {
+    content: '';
+  }
+}
+
+.form-group--submit .form-group__input {
+  grid-column: 2;
+}
+
+@media (max-width: 768px) {
+  .form-group--submit .form-group__input {
+    grid-column: 1;
+  }
+}
+
+.form-group--has-error {
+  background-color: rgba(255, 0, 0, 0.1);
+
+  input, textarea {
+    border-color: var(--color-error) !important;
+  }
+
+  .form-error {
+    display: block;
+  }
+}
+
+.form-error {
+  display: none;
+}
+
+@media (max-width: 768px) {
+  .form-group {
+    grid-template-columns: 1fr;
+    align-items: baseline;
+    margin-top: 17px;
+    flex-direction: column;
+  }
+}
+
+/* TEXT INPUTS */
+input[type="text"],
+input[type="search"],
+input[type="password"],
+input[type="url"],
+input[type="number"],
+input[type="email"],
+input[type*="date"],
+input[type*="time"],
+select {
+  /* from bulma.css */
+  color: #363636;
+  border-color: #dbdbdb;
+  background-color: #f3f3f3;
+  box-shadow: inset 0 1px 2px 1px rgba(50,50,50,.05);
+
+  width: 100%;
+  max-width: 600px;
+  align-items: center;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  font-size: 1rem;
+  font-family: var(--font-base);
+  line-height: 1.5;
+  padding: 4px 13px;
+}
+
+input[type="number"] {
+  width: 100px;
+}
+
+input[type*="date"],
+input[type*="time"],
+.flatpickr-input[type="text"] {
+  width: 50%;
+  width: 250px;
+}
+
+/* BUTTON STYLE SEE default-layout.lucius */
+
+/* TEXTAREAS */
+textarea {
+  width: 100%;
+  height: 170px;
+  max-width: 600px;
+  line-height: 1.5;
+  color: #363636;
+  background-color: #f3f3f3;
+  padding: 4px 13px;
+  font-size: 1rem;
+  font-family: var(--font-base);
+  -webkit-appearance: none;
+  appearance: none;
+  border: 1px solid #dbdbdb;
+  border-radius: 2px;
+  box-shadow: inset 0 1px 2px 1px rgba(50,50,50,.05);
+  vertical-align: top;
+}
+
+/* SHARED STATE RELATED STYLES */
+
+input,
+select,
+textarea {
+  &:focus {
+    border-color: #3273dc;
+    box-shadow: 0 0 0 0.125em rgba(50,115,220,.25);
+    outline: 0;
+  }
+
+  &[disabled] {
+    background-color: #f3f3f3;
+    color: #7a7a7a;
+    box-shadow: none;
+    border-color: #dbdbdb;
+  }
+
+  &[readonly] {
+    background-color: #f5f5f5;
+    border-color: #dbdbdb;
+  }
+}
+
+/* OPTIONS */
+
+select {
+  -webkit-appearance: menulist;
+}
+
+select,
+option {
+  font-size: 1rem;
+  line-height: 1.5;
+  padding: 4px 13px;
+  border: 1px solid #dbdbdb;
+  border-radius: 2px;
+  outline: 0;
+  color: #363636;
+  min-width: 250px;
+  width: auto;
+  background-color: #f3f3f3;
+  box-shadow: inset 0 1px 2px 1px rgba(50,50,50,.05);
+}
+
+@media (max-width: 425px) {
+
+  select, option {
+    width: 100%;
+  }
+}
+
+/* FILE INPUT */
+.file-input {
+  display: none;
+}
+
+.file-input__label {
+  cursor: pointer;
+  display: inline-block;
+  background-color: var(--color-primary);
+  color: white;
+  padding: 10px 17px;
+  border-radius: 3px;
+}
+
+.file-input__info {
+  font-size: .9rem;
+  font-style: italic;
+  margin: 10px 0;
+  color: var(--color-fontsec);
+}
+
+.file-input__list {
+  margin-left: 40px;
+  margin-top: 10px;
+  font-weight: 600;
+}
+
+/* PREVIOUSLY UPLOADED FILES */
+
+.file-uploads-label {
+  margin-bottom: 10px;
+}
+
+.file-container {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+
+  .checkbox {
+    margin-left: 12px;
+  }
+}
diff --git a/frontend/src/utils/inputs/radio.scss b/frontend/src/utils/inputs/radio.scss
new file mode 100644
index 000000000..1b26ae1ae
--- /dev/null
+++ b/frontend/src/utils/inputs/radio.scss
@@ -0,0 +1,72 @@
+/* CUSTOM RADIO BOXES */
+/* Completely replaces native radiobox */
+
+.radio-group {
+  display: flex;
+}
+
+.radio {
+  position: relative;
+  display: inline-block;
+
+  [type="radio"] {
+    position: fixed;
+    top: -1px;
+    left: -1px;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+  }
+
+  label {
+    display: block;
+    height: 34px;
+    min-width: 42px;
+    line-height: 34px;
+    text-align: center;
+    padding: 0 13px;
+    background-color: #f3f3f3;
+    box-shadow: inset 2px 1px 2px 1px rgba(50, 50, 50, 0.05);
+    color: var(--color-font);
+    cursor: pointer;
+  }
+
+  :checked + label {
+    background-color: var(--color-primary);
+    color: var(--color-lightwhite);
+    box-shadow: inset -2px -1px 2px 1px rgba(255, 255, 255, 0.15);
+  }
+
+  :focus + label {
+    border-color: #3273dc;
+    box-shadow: 0 0 0.125em 0 rgba(50,115,220,0.8);
+    outline: 0;
+  }
+
+  [disabled] + label {
+    pointer-events: none;
+    border: none;
+    opacity: 0.6;
+    filter: grayscale(1);
+  }
+}
+
+.radio:first-child {
+  label {
+    border-top-left-radius: 4px;
+    border-bottom-left-radius: 4px;
+  }
+}
+
+.radio:last-child {
+  label {
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+  }
+}
+
+@media (max-width: 768px) {
+  .radio + .radio {
+    margin-left: 10px;
+  }
+}
diff --git a/frontend/src/utils/mass-input/mass-input.js b/frontend/src/utils/mass-input/mass-input.js
new file mode 100644
index 000000000..33e33d30f
--- /dev/null
+++ b/frontend/src/utils/mass-input/mass-input.js
@@ -0,0 +1,218 @@
+/**
+ *
+ * Mass Input Utility
+ *  allows form shapes to be manipulated asynchronously:
+ *  will asynchronously submit the containing form and replace the contents
+ *  of the mass input element with the one from the BE response
+ *  The utility will only trigger an AJAX request if the mass input element has
+ *  an active/focused element whilst the form is being submitted.
+ *
+ * Attribute:   uw-mass-input
+ *
+ * Example usage:
+ *  <form method="POST" action="...">
+ *   <input type="text">
+ *   <div uw-mass-input>
+ *     <input type="text">
+ *     <button type="submit">
+ */
+
+var MASS_INPUT_UTIL_NAME = 'massInput';
+var MASS_INPUT_UTIL_SELECTOR = '[uw-mass-input]';
+
+var MASS_INPUT_CELL_SELECTOR = '.massinput__cell';
+var MASS_INPUT_ADD_CELL_SELECTOR = '.massinput__cell--add';
+var MASS_INPUT_SUBMIT_BUTTON_CLASS = 'massinput__submit-button';
+var MASS_INPUT_INITIALIZED_CLASS = 'mass-input--initialized';
+
+var massInputUtil = function(element, app) {
+  var massInputId;
+  var massInputFormSubmitHandler;
+  var massInputForm;
+
+  function init() {
+    if (!element) {
+      throw new Error('Mass Input utility cannot be setup without an element!');
+    }
+
+    if (element.classList.contains(MASS_INPUT_INITIALIZED_CLASS)) {
+      return false;
+    }
+
+    massInputId = element.dataset.massInputIdent || '_';
+    massInputForm = element.closest('form');
+
+    if (!massInputForm) {
+      throw new Error('Mass Input utility cannot be setup without being wrapped in a <form>!');
+    }
+
+    massInputFormSubmitHandler = makeSubmitHandler();
+
+    // setup submit buttons inside this massinput so browser
+    // uses correct submit button for form submission.
+    var buttons = getMassInputSubmitButtons();
+    buttons.forEach(function(button) {
+      setupSubmitButton(button);
+    });
+
+    massInputForm.addEventListener('submit', massInputFormSubmitHandler);
+    massInputForm.addEventListener('keypress', keypressHandler);
+
+    // mark initialized
+    element.classList.add(MASS_INPUT_INITIALIZED_CLASS);
+
+    return {
+      name: MASS_INPUT_UTIL_NAME,
+      element: element,
+      destroy: function() {
+        reset();
+      },
+    };
+  }
+
+  function makeSubmitHandler() {
+    var method = massInputForm.getAttribute('method') || 'POST';
+    var url = massInputForm.getAttribute('action') || window.location.href;
+    var enctype = massInputForm.getAttribute('enctype') || 'application/json';
+
+    var requestFn;
+    if (app.httpClient[method.toLowerCase()]) {
+      requestFn = app.httpClient[method.toLowerCase()].bind(app.httpClient);
+    }
+
+    return function(event) {
+      var activeElement;
+
+      // check if event occured from either a mass input add/delete button or
+      // from inside one of massinput's inputs (i.e. a child is focused/active)
+      activeElement = element.querySelector(':focus, :active');
+
+      if (!activeElement) {
+        return false;
+      }
+
+      // find the according massinput cell thats hosts the element that triggered the submit
+      var massInputCell = activeElement.closest(MASS_INPUT_CELL_SELECTOR);
+      if (!massInputCell) {
+        return false;
+      }
+
+      var submitButton = massInputCell.querySelector('.' + MASS_INPUT_SUBMIT_BUTTON_CLASS);
+      if (!submitButton) {
+        return false;
+      }
+
+      var isAddCell = massInputCell.matches(MASS_INPUT_ADD_CELL_SELECTOR);
+      var submitButtonIsActive = submitButton.matches(':focus, :active');
+      // if the cell is not an add cell the active element must at least be the cells submit button
+      if (!isAddCell && !submitButtonIsActive) {
+        return false;
+      }
+
+      event.preventDefault();
+      var requestBody = serializeForm(submitButton, enctype);
+
+      if (requestFn && requestBody) {
+        var headers = {'Mass-Input-Shortcircuit': massInputId};
+
+        if (enctype !== 'multipart/form-data')
+          headers['Content-Type'] = enctype;
+
+        requestFn({
+          url: url,
+          headers: headers,
+          body: requestBody,
+        }).then(function(response) {
+          return app.htmlHelpers.parseResponse(response);
+        }).then(function(response) {
+            processResponse(response.element);
+            if (isAddCell) {
+              reFocusAddCell();
+            }
+          });
+      }
+    };
+  }
+
+  function keypressHandler(event) {
+    if (event.keyCode !== 13) {
+      return false;
+    }
+
+    if (massInputFormSubmitHandler) {
+      return massInputFormSubmitHandler(event);
+    }
+  }
+
+  function getMassInputSubmitButtons() {
+    return Array.from(element.querySelectorAll('button[type="submit"][name][value], .' + MASS_INPUT_SUBMIT_BUTTON_CLASS));
+  }
+
+  function setupSubmitButton(button) {
+    button.setAttribute('type', 'button');
+    button.classList.add(MASS_INPUT_SUBMIT_BUTTON_CLASS);
+    button.addEventListener('click', massInputFormSubmitHandler);
+  }
+
+  function resetSubmitButton(button) {
+    button.setAttribute('type', 'submit');
+    button.classList.remove(MASS_INPUT_SUBMIT_BUTTON_CLASS);
+    button.removeEventListener('click', massInputFormSubmitHandler);
+  }
+
+  function processResponse(responseElement) {
+    element.innerHTML = "";
+    element.appendChild(responseElement);
+
+    reset();
+
+    app.utilRegistry.setupAll(element);
+  }
+
+  function serializeForm(submitButton, enctype) {
+    var formData = new FormData(massInputForm);
+
+    // manually add name and value of submit button to formData
+    formData.append(submitButton.name, submitButton.value);
+
+    if (enctype === 'application/x-www-form-urlencoded') {
+      return new URLSearchParams(formData);
+    } else if (enctype === 'multipart/form-data') {
+      return formData;
+    } else {
+      throw new Error('Unsupported form enctype: ' + enctype);
+    }
+  }
+
+  function reFocusAddCell() {
+    var addCell = element.querySelector(MASS_INPUT_ADD_CELL_SELECTOR);
+    if (!addCell) {
+      return false;
+    }
+
+    var addCellInput = addCell.querySelector('input:not([type="hidden"])');
+    if (addCellInput) {
+      // Clearing of add-inputs is done in the backend
+      addCellInput.focus();
+    }
+  }
+
+  function reset() {
+    element.classList.remove(MASS_INPUT_INITIALIZED_CLASS);
+    massInputForm.removeEventListener('submit', massInputFormSubmitHandler);
+    massInputForm.removeEventListener('keypress', keypressHandler);
+
+    var buttons = getMassInputSubmitButtons();
+    buttons.forEach(function(button) {
+      resetSubmitButton(button);
+    });
+  }
+
+  return init();
+};
+
+export default {
+  name: MASS_INPUT_UTIL_NAME,
+  selector: MASS_INPUT_UTIL_SELECTOR,
+  setup: massInputUtil,
+};
diff --git a/frontend/src/utils/modal/modal.js b/frontend/src/utils/modal/modal.js
new file mode 100644
index 000000000..431199a8f
--- /dev/null
+++ b/frontend/src/utils/modal/modal.js
@@ -0,0 +1,203 @@
+import './modal.scss';
+
+/**
+ *
+ * Modal Utility
+ *
+ * Attribute: uw-modal
+ *
+ * Params:
+ *  data-modal-trigger: string
+ *    Selector for the element that toggles the modal.
+ *    If trigger element has "href" attribute the modal will be dynamically loaded from the referenced page
+ *  data-modal-closeable: boolean property
+ *    If the param is present the modal will have a close-icon and can also be closed by clicking anywhere on the overlay
+ *
+ * Example usage:
+ * <div uw-modal data-modal-trigger='#trigger' data-modal-closeable>This is the modal content
+ * <div id='trigger'>Click me to open the modal
+ */
+
+var MODAL_UTIL_NAME = 'modal';
+var MODAL_UTIL_SELECTOR = '[uw-modal]';
+
+var MODAL_HEADERS = {
+  'Is-Modal': 'True',
+};
+
+var MODAL_INITIALIZED_CLASS = 'modal--initialized';
+var MODAL_CLASS = 'modal';
+var MODAL_OPEN_CLASS = 'modal--open';
+var MODAL_TRIGGER_CLASS = 'modal__trigger';
+var MODAL_CONTENT_CLASS = 'modal__content';
+var MODAL_OVERLAY_CLASS = 'modal__overlay';
+var MODAL_OVERLAY_OPEN_CLASS = 'modal__overlay--open';
+var MODAL_CLOSER_CLASS = 'modal__closer';
+
+var MAIN_CONTENT_CLASS = 'main__content-body';
+
+// one singleton wrapper to keep all the modals to avoid CSS bug
+// with blurry text due to `transform: translate(-50%, -50%)`
+// will be created (and reused) for the first modal that gets initialized
+var MODALS_WRAPPER_CLASS = 'modals-wrapper';
+var MODALS_WRAPPER_SELECTOR = '.' + MODALS_WRAPPER_CLASS;
+var MODALS_WRAPPER_OPEN_CLASS = 'modals-wrapper--open';
+
+var modalUtil = function(element, app) {
+
+  var modalsWrapper;
+  var modalOverlay;
+  var modalUrl;
+
+  function _init() {
+    if (!element) {
+      throw new Error('Modal utility cannot be setup without an element!');
+    }
+
+    if (element.classList.contains(MODAL_INITIALIZED_CLASS)) {
+      return false;
+    }
+
+    ensureModalWrapper();
+
+    // param modalTrigger
+    if (!element.dataset.modalTrigger) {
+      throw new Error('Modal utility cannot be setup without a trigger element!');
+    } else {
+      setupTrigger();
+    }
+
+    // param modalCloseable
+    if (element.dataset.modalCloseable !== undefined) {
+      setupCloser();
+    }
+
+    // mark as initialized and add modal class for styling
+    element.classList.add(MODAL_INITIALIZED_CLASS, MODAL_CLASS);
+
+    return {
+      name: MODAL_UTIL_NAME,
+      element: element,
+      destroy: function() {},
+    };
+  }
+
+  function ensureModalWrapper() {
+    modalsWrapper = document.querySelector(MODALS_WRAPPER_SELECTOR);
+    if (!modalsWrapper) {
+      // create modal wrapper
+      modalsWrapper = document.createElement('div');
+      modalsWrapper.classList.add(MODALS_WRAPPER_CLASS);
+      document.body.appendChild(modalsWrapper);
+    }
+
+    modalOverlay = modalsWrapper.querySelector('.' + MODAL_OVERLAY_CLASS);
+    if (!modalOverlay) {
+      // create modal overlay
+      modalOverlay = document.createElement('div');
+      modalOverlay.classList.add(MODAL_OVERLAY_CLASS);
+      modalsWrapper.appendChild(modalOverlay);
+    }
+  }
+
+  function setupTrigger() {
+    var triggerSelector = element.dataset.modalTrigger;
+    if (!triggerSelector.startsWith('#')) {
+      triggerSelector = '#' + triggerSelector;
+    }
+    var triggerElement = document.querySelector(triggerSelector);
+
+    if (!triggerElement) {
+      throw new Error('Trigger element for Modal not found: "' + triggerSelector + '"');
+    }
+
+    triggerElement.classList.add(MODAL_TRIGGER_CLASS);
+    triggerElement.addEventListener('click', onTriggerClicked, false);
+    modalUrl = triggerElement.getAttribute('href');
+  }
+
+  function setupCloser() {
+    var closerElement = document.createElement('div');
+    element.insertBefore(closerElement, null);
+    closerElement.classList.add(MODAL_CLOSER_CLASS);
+    closerElement.addEventListener('click', onCloseClicked, false);
+    modalOverlay.addEventListener('click', onCloseClicked, false);
+  }
+
+  function onTriggerClicked(event) {
+    event.preventDefault();
+    open();
+  }
+
+  function onCloseClicked(event) {
+    event.preventDefault();
+    close();
+  }
+
+  function onKeyUp(event) {
+    if (event.key === 'Escape') {
+      close();
+    }
+  }
+
+  function open() {
+    element.classList.add(MODAL_OPEN_CLASS);
+    modalOverlay.classList.add(MODAL_OVERLAY_OPEN_CLASS);
+    modalsWrapper.classList.add(MODALS_WRAPPER_OPEN_CLASS);
+    modalsWrapper.appendChild(element);
+
+    if (modalUrl) {
+      fillModal(modalUrl);
+    }
+
+    document.addEventListener('keyup', onKeyUp);
+  }
+
+  function close() {
+    modalOverlay.classList.remove(MODAL_OVERLAY_OPEN_CLASS);
+    element.classList.remove(MODAL_OPEN_CLASS);
+    modalsWrapper.classList.remove(MODALS_WRAPPER_OPEN_CLASS);
+
+    document.removeEventListener('keyup', onKeyUp);
+  };
+
+  function fillModal(url) {
+    app.httpClient.get({
+      url: url,
+      headers: MODAL_HEADERS,
+    }).then(function(response) {
+      return app.htmlHelpers.parseResponse(response);
+    }).then(function(response) {
+      processResponse(response.element);
+    });
+  }
+
+  function processResponse(responseElement) {
+    var modalContent = document.createElement('div');
+    modalContent.classList.add(MODAL_CONTENT_CLASS);
+
+    var contentBody = responseElement.querySelector('.' + MAIN_CONTENT_CLASS);
+
+    if (contentBody) {
+      modalContent.innerHTML = contentBody.innerHTML;
+    }
+
+    var previousModalContent = element.querySelector('.' + MODAL_CONTENT_CLASS);
+    if (previousModalContent) {
+      previousModalContent.remove();
+    }
+
+    element.insertBefore(modalContent, null);
+
+    // setup any newly arrived utils
+    app.utilRegistry.setupAll(element);
+  }
+
+  return _init();
+};
+
+export default {
+  name: MODAL_UTIL_NAME,
+  selector: MODAL_UTIL_SELECTOR,
+  setup: modalUtil,
+};
diff --git a/frontend/src/utils/modal/modal.scss b/frontend/src/utils/modal/modal.scss
new file mode 100644
index 000000000..2cecac941
--- /dev/null
+++ b/frontend/src/utils/modal/modal.scss
@@ -0,0 +1,115 @@
+.modals-wrapper {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &.modals-wrapper--open {
+    z-index: 200;
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.modal {
+  position: relative;
+  display: none;
+  background-color: rgba(255, 255, 255, 1);
+  min-width: 60vw;
+  max-width: 70vw;
+  min-height: 100px;
+  max-height: calc(100vh - 30px);
+  border-radius: 2px;
+  z-index: -1;
+  color: var(--color-font);
+  padding: 0 40px;
+  overflow: auto;
+  overscroll-behavior: contain;
+  pointer-events: none;
+  opacity: 0;
+
+  &.modal--open {
+    display: flex;
+    opacity: 1;
+    pointer-events: auto;
+    z-index: 200;
+    transition:
+      opacity .2s .1s ease-in-out,
+      transform .3s ease-in-out;
+  }
+}
+
+@media (max-width: 1024px) {
+  .modal {
+    min-width: 80vw;
+  }
+}
+@media (max-width: 768px) {
+  .modal {
+    min-width: 90vw;
+  }
+}
+@media (max-width: 425px) {
+  .modal {
+    min-width: calc(100vw - 20px);
+  }
+}
+
+.modal__overlay {
+  position: fixed;
+  left: 0;
+  top: 0;
+  height: 100%;
+  width: 100%;
+  background-color: transparent;
+  z-index: -1;
+  transition: all .2s ease;
+  display: none;
+
+  &.modal__overlay--open {
+    display: block;
+    z-index: 199;
+    opacity: 1;
+    background-color: rgba(0, 0, 0, 0.4);
+  }
+}
+
+.modal__trigger {
+  cursor: pointer;
+}
+
+.modal__trigger-label {
+  font-style: italic;
+  text-decoration: underline;
+}
+
+.modal__closer {
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  background-color: var(--color-darker);
+  border-radius: 2px;
+  cursor: pointer;
+  z-index: 20;
+
+  &::before {
+    content: '\f00d';
+    font-family: 'Font Awesome 5 Free';
+    color: white;
+  }
+}
+
+.modal__content {
+  margin: 20px 0;
+  width: 100%;
+}
diff --git a/frontend/src/utils/show-hide/show-hide.js b/frontend/src/utils/show-hide/show-hide.js
new file mode 100644
index 000000000..1566aa940
--- /dev/null
+++ b/frontend/src/utils/show-hide/show-hide.js
@@ -0,0 +1,109 @@
+import './show-hide.scss';
+
+var SHOW_HIDE_UTIL_NAME = 'showHide';
+var SHOW_HIDE_UTIL_SELECTOR = '[uw-show-hide]';
+
+var SHOW_HIDE_LOCAL_STORAGE_KEY = 'SHOW_HIDE';
+var SHOW_HIDE_INITIALIZED_CLASS = 'show-hide--initialized';
+var SHOW_HIDE_COLLAPSED_CLASS = 'show-hide--collapsed';
+var SHOW_HIDE_TOGGLE_CLASS = 'show-hide__toggle';
+var SHOW_HIDE_TOGGLE_RIGHT_CLASS = 'show-hide__toggle--right';
+
+/**
+ *
+ * ShowHide Utility
+ *
+ * Attribute: uw-show-hide
+ *
+ * Params: (all optional)
+ *  data-show-hide-id: string
+ *    If this param is given the state of the utility will be persisted in the clients local storage.
+ *  data-show-hide-collapsed: boolean property
+ *    If this param is present the ShowHide utility will be collapsed. This value will be overruled by any value stored in the LocalStorage.
+ *  data-show-hide-align: 'right'
+ *    Where to put the arrow that marks the element as a ShowHide toggle. Left of toggle by default.
+ *
+ * Example usage:
+ * <div>
+ *   <div uw-show-hide>Click me
+ *   <div>This will be toggled
+ *   <div>This will be toggled as well
+ */
+var showHideUtil = function(element) {
+
+  var showHideId;
+
+  function init() {
+    if (!element) {
+      throw new Error('ShowHide utility cannot be setup without an element!');
+    }
+
+    if (element.classList.contains(SHOW_HIDE_INITIALIZED_CLASS)) {
+      return false;
+    }
+
+    // register click listener
+    addClickListener();
+
+    // param showHideId
+    if (element.dataset.showHideId) {
+      showHideId = element.dataset.showHideId;
+    }
+
+    // param showHideCollapsed
+    var collapsed = false;
+    if (element.dataset.showHideCollapsed !== undefined) {
+      collapsed = true;
+    }
+    if (showHideId) {
+      var localStorageCollapsed = getLocalStorage()[showHideId];
+      if (typeof localStorageCollapsed !== 'undefined') {
+        collapsed = localStorageCollapsed;
+      }
+    }
+    element.parentElement.classList.toggle(SHOW_HIDE_COLLAPSED_CLASS, collapsed);
+
+    // param showHideAlign
+    var alignment = element.dataset.showHideAlign;
+    if (alignment === 'right') {
+      element.classList.add(SHOW_HIDE_TOGGLE_RIGHT_CLASS);
+    }
+
+    // mark as initialized
+    element.classList.add(SHOW_HIDE_INITIALIZED_CLASS, SHOW_HIDE_TOGGLE_CLASS);
+
+    return {
+      name: SHOW_HIDE_UTIL_NAME,
+      element: element,
+      destroy: function() {},
+    };
+  }
+
+  function addClickListener() {
+    element.addEventListener('click', function clickListener() {
+      var newState = element.parentElement.classList.toggle(SHOW_HIDE_COLLAPSED_CLASS);
+
+      if (showHideId) {
+        setLocalStorage(showHideId, newState);
+      }
+    });
+  }
+
+  function setLocalStorage(id, state) {
+    var lsData = getLocalStorage();
+    lsData[id] = state;
+    window.localStorage.setItem(SHOW_HIDE_LOCAL_STORAGE_KEY, JSON.stringify(lsData));
+  }
+
+  function getLocalStorage() {
+    return JSON.parse(window.localStorage.getItem(SHOW_HIDE_LOCAL_STORAGE_KEY)) || {};
+  }
+
+  return init();
+};
+
+export default {
+  name: SHOW_HIDE_UTIL_NAME,
+  selector: SHOW_HIDE_UTIL_SELECTOR,
+  setup: showHideUtil,
+};
diff --git a/frontend/src/utils/show-hide/show-hide.scss b/frontend/src/utils/show-hide/show-hide.scss
new file mode 100644
index 000000000..04143d0ae
--- /dev/null
+++ b/frontend/src/utils/show-hide/show-hide.scss
@@ -0,0 +1,54 @@
+$show-hide-toggle-size: 6px;
+
+.show-hide__toggle {
+
+  position: relative;
+  cursor: pointer;
+
+  &:hover {
+    background-color: var(--color-grey-lighter);
+    cursor: pointer;
+  }
+}
+
+.show-hide__toggle::before {
+  content: '';
+  position: absolute;
+  width: $show-hide-toggle-size;
+  height: $show-hide-toggle-size;
+  left: -15px;
+  top: 50%;
+  color: var(--color-primary);
+  border-right: 2px solid currentColor;
+  border-top: 2px solid currentColor;
+  transition: transform .2s ease;
+  transform: translateY(-50%) rotate(-45deg);
+
+  @media (max-width: 768px) {
+    left: auto;
+    right: 20px;
+    color: var(--color-font);
+  }
+}
+
+.show-hide__toggle--right::before {
+  left: auto;
+  right: 20px;
+  color: var(--color-font);
+}
+
+.show-hide--collapsed {
+
+  .show-hide__toggle::before {
+    transform: translateY(-50%) rotate(135deg);
+  }
+
+  :not(.show-hide__toggle) {
+    display: block;
+    height: 0;
+    margin: 0;
+    padding: 0;
+    max-height: 0;
+    overflow-y: hidden;
+  }
+}
diff --git a/frontend/src/utils/tabber/tabber.js b/frontend/src/utils/tabber/tabber.js
new file mode 100644
index 000000000..c44caa44b
--- /dev/null
+++ b/frontend/src/utils/tabber/tabber.js
@@ -0,0 +1,92 @@
+import './tabber.scss';
+
+(function($) {
+
+  document.addEventListener('DOMContentLoaded', function() {
+    'use strict';
+
+    // define plugin
+    $.fn.tabgroup = function() {
+
+      var $this = $(this);
+      var $openers = $('<div class="tab-group-openers"></div>');
+      $this.prepend($openers);
+
+      var openedByDefault = $this.data('tab-open') || 0;
+      var tabs = [];
+      var currentTab = {};
+
+      $this.find('.tab').each(function(i, t) {
+        var tab = $(t);
+        tab.data('tab-index', i);
+        var tabName = tab.data('tab-name') || 'Tab '+i;
+        var tabFile = tab.data('tab-file') || false;
+        var $opener = makeOpener(tabName, i);
+        $openers.append($opener);
+        if (tab.find('.tab-title')) {
+          tab.find('.tab-title').remove();
+        }
+        tab.hide();
+        var loaded = false;
+        tabs.push({index: i, name: tabName, file: tabFile, dom: tab, opener: $opener, loaded: loaded });
+      });
+
+      $this.on('click', 'a[href^="#"]', function(event) {
+        var $target = $(event.currentTarget);
+        var tab = getTabByName($target.attr('href').replace('#', ''));
+        if ( tab ) {
+          showTab(tab.index);
+        }
+        event.preventDefault();
+      });
+
+      function getTabByName(name) {
+        var it = -1;
+        $.each(tabs, function(i, t) {
+          if ( t.name.toLowerCase() === name.toLowerCase() ) {
+            it = i;
+          }
+        });
+        if ( it >= 0 ) {
+          return tabs[it];
+        } else {
+          return false;
+        }
+      }
+
+      function makeOpener(tabName, i) {
+        return $('<span class="tab-opener">'+tabName+'</span>').
+                on('click', function() {
+                  showTab(i);
+                });
+      }
+
+      function showTab(i) {
+        tabs.forEach(function(t) {
+          t.dom.hide();
+          t.opener.removeClass('tab-visible');
+        });
+        currentTab = tabs[i];
+        if ( !currentTab.loaded && currentTab.file ){
+          $.get(currentTab.file, function(res) {
+            currentTab.dom.html(res);
+            currentTab.loaded = true;
+          });
+        }
+        currentTab.opener.addClass('tab-visible');
+        currentTab.dom.show();
+      }
+
+      showTab(openedByDefault);
+      currentTab = tabs[openedByDefault];
+
+    };
+
+    // apply plugin to all available tab-groups if on wide screen
+    if (window.innerWidth > 768) {
+      $('.tab-group').each(function(i, t) {
+        $(t).tabgroup();
+      });
+    }
+  });
+})($);
diff --git a/frontend/src/utils/tabber/tabber.scss b/frontend/src/utils/tabber/tabber.scss
new file mode 100644
index 000000000..d135a5f27
--- /dev/null
+++ b/frontend/src/utils/tabber/tabber.scss
@@ -0,0 +1,39 @@
+.tab-group {
+  border-top: 2px solid #dcdcdc;
+  padding-top: 30px;
+}
+
+.tab-group-openers {
+  display: flex;
+  justify-content: stretch;
+  line-height: 40px;
+  font-size: 14px;
+  margin-bottom: 40px;
+}
+
+.tab-opener {
+  display: inline-block;
+  flex: 1;
+  text-align: center;
+  padding: 0 13px;
+  margin: 0 2px;
+  background-color: var(--color-dark);
+  color: white;
+  font-size: 16px;
+  text-transform: uppercase;
+  font-weight: 600;
+  transition: all .1s ease;
+  border-bottom: 5px solid rgba(100, 100, 100, 0.2);
+}
+.tab-opener:not(.tab-visible):hover {
+  cursor: pointer;
+  background-color: transparent;
+  color: rgb(52, 48, 58);
+  border-bottom-color: grey;
+}
+
+.tab-opener.tab-visible {
+  background-color: transparent;
+  color: rgb(52, 48, 58);
+  border-bottom-color: var(--color-primary);
+}
diff --git a/frontend/src/utils/tooltips/tooltips.js b/frontend/src/utils/tooltips/tooltips.js
new file mode 100644
index 000000000..1bf275e43
--- /dev/null
+++ b/frontend/src/utils/tooltips/tooltips.js
@@ -0,0 +1,7 @@
+import './tooltips.scss';
+
+export default {
+  name: 'tooltips',
+  selector: '[not-something-that-would-be-found]',
+  setup: () => {},
+};
diff --git a/frontend/src/utils/tooltips/tooltips.scss b/frontend/src/utils/tooltips/tooltips.scss
new file mode 100644
index 000000000..ed6b5fd5d
--- /dev/null
+++ b/frontend/src/utils/tooltips/tooltips.scss
@@ -0,0 +1,88 @@
+.tooltip {
+  position: relative;
+  display: inline-block;
+  height: 1.5rem;
+  vertical-align: -0.375rem;
+
+  &:hover .tooltip__content {
+    display: inline-block;
+  }
+}
+
+.tooltip__handle {
+  background-color: var(--color-dark);
+  border-radius: 50%;
+  height: 1.5rem;
+  width: 1.5rem;
+  line-height: 1.5rem;
+  font-size: 1.2rem;
+  color: white;
+  display: inline-block;
+  text-align: center;
+  margin: 0 10px;
+  cursor: default;
+  position: relative;
+
+  &::before {
+    content: '\f128';
+    position: absolute;
+    top: 0;
+    left: 0;
+    font-family: "Font Awesome 5 Free";
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 15px;
+  }
+
+  &.tooltip__handle--danger::before {
+    content: '\f12a';
+  }
+
+  &.tooltip__handle--danger {
+      background-color: var(--color-warning);
+  }
+
+  &:hover {
+    background-color: var(--color-light);
+  }
+}
+
+.tooltip__content {
+  position: absolute;
+  display: none;
+  top: -10px;
+  transform: translateY(-100%);
+  right: 3px;
+  width: 275px;
+  z-index: 10;
+  background-color: #fafafa;
+  border-radius: 4px;
+  padding: 13px 17px;
+  box-shadow: 0 0 20px 4px rgba(0, 0, 0, 0.1);
+
+  &::after {
+    content: '';
+    width: 16px;
+    height: 16px;
+    background-color: #fafafa;
+    transform: rotate(45deg);
+    position: absolute;
+    right: 10px;
+    bottom: -8px;
+  }
+}
+
+@media (max-width: 768px) {
+
+  .tooltip {
+    display: block;
+    margin-top: 10px;
+
+    .tooltip__content {
+      left: 3px;
+      right: 3px;
+      width: auto;
+    }
+  }
+}
diff --git a/frontend/src/utils/utils.js b/frontend/src/utils/utils.js
new file mode 100644
index 000000000..b3f73084e
--- /dev/null
+++ b/frontend/src/utils/utils.js
@@ -0,0 +1,38 @@
+import alerts from './alerts/alerts';
+import asidenav from './asidenav/asidenav';
+import asyncForm from './async-form/async-form';
+import asyncTable from './async-table/async-table';
+import checkAll from './check-all/check-all';
+import massInput from './mass-input/mass-input';
+import { fileInput, checkbox } from './inputs/inputs';
+import modal from './modal/modal';
+import showHide from './show-hide/show-hide';
+import {
+  interactiveFieldset,
+  navigateAwayPrompt,
+  autoSubmitButton,
+  autoSubmitInput,
+  formErrorRemover,
+  datepicker,
+} from './form/form';
+import tooltips from './tooltips/tooltips';
+
+export default [
+  alerts,
+  asidenav,
+  asyncForm,
+  asyncTable,
+  checkAll,
+  massInput,
+  fileInput,
+  checkbox,
+  modal,
+  showHide,
+  interactiveFieldset,
+  navigateAwayPrompt,
+  autoSubmitButton,
+  autoSubmitInput,
+  formErrorRemover,
+  datepicker,
+  tooltips,
+];
diff --git a/frontend/vendor/flatpickr.css b/frontend/vendor/flatpickr.css
new file mode 100644
index 000000000..2e9c517e9
--- /dev/null
+++ b/frontend/vendor/flatpickr.css
@@ -0,0 +1,740 @@
+.flatpickr-calendar {
+  background: transparent;
+  opacity: 0;
+  display: none;
+  text-align: center;
+  visibility: hidden;
+  padding: 0;
+  -webkit-animation: none;
+          animation: none;
+  direction: ltr;
+  border: 0;
+  font-size: 14px;
+  line-height: 24px;
+  border-radius: 5px;
+  position: absolute;
+  width: 307.875px;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  -ms-touch-action: manipulation;
+      touch-action: manipulation;
+  background: #fff;
+  -webkit-box-shadow: 1px 0 0 #e6e6e6, -1px 0 0 #e6e6e6, 0 1px 0 #e6e6e6, 0 -1px 0 #e6e6e6, 0 3px 13px rgba(0,0,0,0.08);
+          box-shadow: 1px 0 0 #e6e6e6, -1px 0 0 #e6e6e6, 0 1px 0 #e6e6e6, 0 -1px 0 #e6e6e6, 0 3px 13px rgba(0,0,0,0.08);
+}
+.flatpickr-calendar.open,
+.flatpickr-calendar.inline {
+  opacity: 1;
+  max-height: 640px;
+  visibility: visible;
+}
+.flatpickr-calendar.open {
+  display: inline-block;
+  z-index: 99999;
+}
+.flatpickr-calendar.animate.open {
+  -webkit-animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1);
+          animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1);
+}
+.flatpickr-calendar.inline {
+  display: block;
+  position: relative;
+  top: 2px;
+}
+.flatpickr-calendar.static {
+  position: absolute;
+  top: calc(100% + 2px);
+}
+.flatpickr-calendar.static.open {
+  z-index: 999;
+  display: block;
+}
+.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7) {
+  -webkit-box-shadow: none !important;
+          box-shadow: none !important;
+}
+.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1) {
+  -webkit-box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
+          box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
+}
+.flatpickr-calendar .hasWeeks .dayContainer,
+.flatpickr-calendar .hasTime .dayContainer {
+  border-bottom: 0;
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+.flatpickr-calendar .hasWeeks .dayContainer {
+  border-left: 0;
+}
+.flatpickr-calendar.showTimeInput.hasTime .flatpickr-time {
+  height: 40px;
+  border-top: 1px solid #e6e6e6;
+}
+.flatpickr-calendar.noCalendar.hasTime .flatpickr-time {
+  height: auto;
+}
+.flatpickr-calendar:before,
+.flatpickr-calendar:after {
+  position: absolute;
+  display: block;
+  pointer-events: none;
+  border: solid transparent;
+  content: '';
+  height: 0;
+  width: 0;
+  left: 22px;
+}
+.flatpickr-calendar.rightMost:before,
+.flatpickr-calendar.rightMost:after {
+  left: auto;
+  right: 22px;
+}
+.flatpickr-calendar:before {
+  border-width: 5px;
+  margin: 0 -5px;
+}
+.flatpickr-calendar:after {
+  border-width: 4px;
+  margin: 0 -4px;
+}
+.flatpickr-calendar.arrowTop:before,
+.flatpickr-calendar.arrowTop:after {
+  bottom: 100%;
+}
+.flatpickr-calendar.arrowTop:before {
+  border-bottom-color: #e6e6e6;
+}
+.flatpickr-calendar.arrowTop:after {
+  border-bottom-color: #fff;
+}
+.flatpickr-calendar.arrowBottom:before,
+.flatpickr-calendar.arrowBottom:after {
+  top: 100%;
+}
+.flatpickr-calendar.arrowBottom:before {
+  border-top-color: #e6e6e6;
+}
+.flatpickr-calendar.arrowBottom:after {
+  border-top-color: #fff;
+}
+.flatpickr-calendar:focus {
+  outline: 0;
+}
+.flatpickr-wrapper {
+  position: relative;
+  display: inline-block;
+}
+.flatpickr-months {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+.flatpickr-months .flatpickr-month {
+  background: transparent;
+  color: rgba(0,0,0,0.9);
+  fill: rgba(0,0,0,0.9);
+  height: 28px;
+  line-height: 1;
+  text-align: center;
+  position: relative;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  overflow: hidden;
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+}
+.flatpickr-months .flatpickr-prev-month,
+.flatpickr-months .flatpickr-next-month {
+  text-decoration: none;
+  cursor: pointer;
+  position: absolute;
+  top: 0px;
+  line-height: 16px;
+  height: 28px;
+  padding: 10px;
+  z-index: 3;
+}
+.flatpickr-months .flatpickr-prev-month.disabled,
+.flatpickr-months .flatpickr-next-month.disabled {
+  display: none;
+}
+.flatpickr-months .flatpickr-prev-month i,
+.flatpickr-months .flatpickr-next-month i {
+  position: relative;
+}
+.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month,
+.flatpickr-months .flatpickr-next-month.flatpickr-prev-month {
+/*
+      /*rtl:begin:ignore*/
+/*
+      */
+  left: 0;
+/*
+      /*rtl:end:ignore*/
+/*
+      */
+}
+/*
+      /*rtl:begin:ignore*/
+/*
+      /*rtl:end:ignore*/
+.flatpickr-months .flatpickr-prev-month.flatpickr-next-month,
+.flatpickr-months .flatpickr-next-month.flatpickr-next-month {
+/*
+      /*rtl:begin:ignore*/
+/*
+      */
+  right: 0;
+/*
+      /*rtl:end:ignore*/
+/*
+      */
+}
+/*
+      /*rtl:begin:ignore*/
+/*
+      /*rtl:end:ignore*/
+.flatpickr-months .flatpickr-prev-month:hover,
+.flatpickr-months .flatpickr-next-month:hover {
+  color: #959ea9;
+}
+.flatpickr-months .flatpickr-prev-month:hover svg,
+.flatpickr-months .flatpickr-next-month:hover svg {
+  fill: #f64747;
+}
+.flatpickr-months .flatpickr-prev-month svg,
+.flatpickr-months .flatpickr-next-month svg {
+  width: 14px;
+  height: 14px;
+}
+.flatpickr-months .flatpickr-prev-month svg path,
+.flatpickr-months .flatpickr-next-month svg path {
+  -webkit-transition: fill 0.1s;
+  transition: fill 0.1s;
+  fill: inherit;
+}
+.numInputWrapper {
+  position: relative;
+  height: auto;
+}
+.numInputWrapper input,
+.numInputWrapper span {
+  display: inline-block;
+}
+.numInputWrapper input {
+  width: 100%;
+  min-width: auto !important;
+}
+.numInputWrapper input::-ms-clear {
+  display: none;
+}
+.numInputWrapper span {
+  position: absolute;
+  right: 0;
+  width: 14px;
+  padding: 0 4px 0 2px;
+  height: 50%;
+  line-height: 50%;
+  opacity: 0;
+  cursor: pointer;
+  border: 1px solid rgba(57,57,57,0.15);
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+}
+.numInputWrapper span:hover {
+  background: rgba(0,0,0,0.1);
+}
+.numInputWrapper span:active {
+  background: rgba(0,0,0,0.2);
+}
+.numInputWrapper span:after {
+  display: block;
+  content: "";
+  position: absolute;
+}
+.numInputWrapper span.arrowUp {
+  top: 0;
+  border-bottom: 0;
+}
+.numInputWrapper span.arrowUp:after {
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+  border-bottom: 4px solid rgba(57,57,57,0.6);
+  top: 26%;
+}
+.numInputWrapper span.arrowDown {
+  top: 50%;
+}
+.numInputWrapper span.arrowDown:after {
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+  border-top: 4px solid rgba(57,57,57,0.6);
+  top: 40%;
+}
+.numInputWrapper span svg {
+  width: inherit;
+  height: auto;
+}
+.numInputWrapper span svg path {
+  fill: rgba(0,0,0,0.5);
+}
+.numInputWrapper:hover {
+  background: rgba(0,0,0,0.05);
+}
+.numInputWrapper:hover span {
+  opacity: 1;
+}
+.flatpickr-current-month {
+  font-size: 135%;
+  line-height: inherit;
+  font-weight: 300;
+  color: inherit;
+  position: absolute;
+  width: 75%;
+  left: 12.5%;
+  padding: 6.16px 0 0 0;
+  line-height: 1;
+  height: 28px;
+  display: inline-block;
+  text-align: center;
+  -webkit-transform: translate3d(0px, 0px, 0px);
+          transform: translate3d(0px, 0px, 0px);
+}
+.flatpickr-current-month span.cur-month {
+  font-family: inherit;
+  font-weight: 700;
+  color: inherit;
+  display: inline-block;
+  margin-left: 0.5ch;
+  padding: 0;
+}
+.flatpickr-current-month span.cur-month:hover {
+  background: rgba(0,0,0,0.05);
+}
+.flatpickr-current-month .numInputWrapper {
+  width: 6ch;
+  width: 7ch\0;
+  display: inline-block;
+}
+.flatpickr-current-month .numInputWrapper span.arrowUp:after {
+  border-bottom-color: rgba(0,0,0,0.9);
+}
+.flatpickr-current-month .numInputWrapper span.arrowDown:after {
+  border-top-color: rgba(0,0,0,0.9);
+}
+.flatpickr-current-month input.cur-year {
+  background: transparent;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  color: inherit;
+  cursor: text;
+  padding: 0 0 0 0.5ch;
+  margin: 0;
+  display: inline-block;
+  font-size: inherit;
+  font-family: inherit;
+  font-weight: 300;
+  line-height: inherit;
+  height: auto;
+  border: 0;
+  border-radius: 0;
+  vertical-align: initial;
+}
+.flatpickr-current-month input.cur-year:focus {
+  outline: 0;
+}
+.flatpickr-current-month input.cur-year[disabled],
+.flatpickr-current-month input.cur-year[disabled]:hover {
+  font-size: 100%;
+  color: rgba(0,0,0,0.5);
+  background: transparent;
+  pointer-events: none;
+}
+.flatpickr-weekdays {
+  background: transparent;
+  text-align: center;
+  overflow: hidden;
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+      -ms-flex-align: center;
+          align-items: center;
+  height: 28px;
+}
+.flatpickr-weekdays .flatpickr-weekdaycontainer {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+}
+span.flatpickr-weekday {
+  cursor: default;
+  font-size: 90%;
+  background: transparent;
+  color: rgba(0,0,0,0.54);
+  line-height: 1;
+  margin: 0;
+  text-align: center;
+  display: block;
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+  font-weight: bolder;
+}
+.dayContainer,
+.flatpickr-weeks {
+  padding: 1px 0 0 0;
+}
+.flatpickr-days {
+  position: relative;
+  overflow: hidden;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: start;
+  -webkit-align-items: flex-start;
+      -ms-flex-align: start;
+          align-items: flex-start;
+  width: 307.875px;
+}
+.flatpickr-days:focus {
+  outline: 0;
+}
+.dayContainer {
+  padding: 0;
+  outline: 0;
+  text-align: left;
+  width: 307.875px;
+  min-width: 307.875px;
+  max-width: 307.875px;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  display: inline-block;
+  display: -ms-flexbox;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-flex-wrap: wrap;
+          flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  -ms-flex-pack: justify;
+  -webkit-justify-content: space-around;
+          justify-content: space-around;
+  -webkit-transform: translate3d(0px, 0px, 0px);
+          transform: translate3d(0px, 0px, 0px);
+  opacity: 1;
+}
+.dayContainer + .dayContainer {
+  -webkit-box-shadow: -1px 0 0 #e6e6e6;
+          box-shadow: -1px 0 0 #e6e6e6;
+}
+.flatpickr-day {
+  background: none;
+  border: 1px solid transparent;
+  border-radius: 150px;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  color: #393939;
+  cursor: pointer;
+  font-weight: 400;
+  width: 14.2857143%;
+  -webkit-flex-basis: 14.2857143%;
+      -ms-flex-preferred-size: 14.2857143%;
+          flex-basis: 14.2857143%;
+  max-width: 39px;
+  height: 39px;
+  line-height: 39px;
+  margin: 0;
+  display: inline-block;
+  position: relative;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  text-align: center;
+}
+.flatpickr-day.inRange,
+.flatpickr-day.prevMonthDay.inRange,
+.flatpickr-day.nextMonthDay.inRange,
+.flatpickr-day.today.inRange,
+.flatpickr-day.prevMonthDay.today.inRange,
+.flatpickr-day.nextMonthDay.today.inRange,
+.flatpickr-day:hover,
+.flatpickr-day.prevMonthDay:hover,
+.flatpickr-day.nextMonthDay:hover,
+.flatpickr-day:focus,
+.flatpickr-day.prevMonthDay:focus,
+.flatpickr-day.nextMonthDay:focus {
+  cursor: pointer;
+  outline: 0;
+  background: #e6e6e6;
+  border-color: #e6e6e6;
+}
+.flatpickr-day.today {
+  border-color: #959ea9;
+}
+.flatpickr-day.today:hover,
+.flatpickr-day.today:focus {
+  border-color: #959ea9;
+  background: #959ea9;
+  color: #fff;
+}
+.flatpickr-day.selected,
+.flatpickr-day.startRange,
+.flatpickr-day.endRange,
+.flatpickr-day.selected.inRange,
+.flatpickr-day.startRange.inRange,
+.flatpickr-day.endRange.inRange,
+.flatpickr-day.selected:focus,
+.flatpickr-day.startRange:focus,
+.flatpickr-day.endRange:focus,
+.flatpickr-day.selected:hover,
+.flatpickr-day.startRange:hover,
+.flatpickr-day.endRange:hover,
+.flatpickr-day.selected.prevMonthDay,
+.flatpickr-day.startRange.prevMonthDay,
+.flatpickr-day.endRange.prevMonthDay,
+.flatpickr-day.selected.nextMonthDay,
+.flatpickr-day.startRange.nextMonthDay,
+.flatpickr-day.endRange.nextMonthDay {
+  background: #569ff7;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+  color: #fff;
+  border-color: #569ff7;
+}
+.flatpickr-day.selected.startRange,
+.flatpickr-day.startRange.startRange,
+.flatpickr-day.endRange.startRange {
+  border-radius: 50px 0 0 50px;
+}
+.flatpickr-day.selected.endRange,
+.flatpickr-day.startRange.endRange,
+.flatpickr-day.endRange.endRange {
+  border-radius: 0 50px 50px 0;
+}
+.flatpickr-day.selected.startRange + .endRange,
+.flatpickr-day.startRange.startRange + .endRange,
+.flatpickr-day.endRange.startRange + .endRange {
+  -webkit-box-shadow: -10px 0 0 #569ff7;
+          box-shadow: -10px 0 0 #569ff7;
+}
+.flatpickr-day.selected.startRange.endRange,
+.flatpickr-day.startRange.startRange.endRange,
+.flatpickr-day.endRange.startRange.endRange {
+  border-radius: 50px;
+}
+.flatpickr-day.inRange {
+  border-radius: 0;
+  -webkit-box-shadow: -5px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
+          box-shadow: -5px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
+}
+.flatpickr-day.disabled,
+.flatpickr-day.disabled:hover,
+.flatpickr-day.prevMonthDay,
+.flatpickr-day.nextMonthDay,
+.flatpickr-day.notAllowed,
+.flatpickr-day.notAllowed.prevMonthDay,
+.flatpickr-day.notAllowed.nextMonthDay {
+  color: rgba(57,57,57,0.3);
+  background: transparent;
+  border-color: transparent;
+  cursor: default;
+}
+.flatpickr-day.disabled,
+.flatpickr-day.disabled:hover {
+  cursor: not-allowed;
+  color: rgba(57,57,57,0.1);
+}
+.flatpickr-day.week.selected {
+  border-radius: 0;
+  -webkit-box-shadow: -5px 0 0 #569ff7, 5px 0 0 #569ff7;
+          box-shadow: -5px 0 0 #569ff7, 5px 0 0 #569ff7;
+}
+.flatpickr-day.hidden {
+  visibility: hidden;
+}
+.rangeMode .flatpickr-day {
+  margin-top: 1px;
+}
+.flatpickr-weekwrapper {
+  display: inline-block;
+  float: left;
+}
+.flatpickr-weekwrapper .flatpickr-weeks {
+  padding: 0 12px;
+  -webkit-box-shadow: 1px 0 0 #e6e6e6;
+          box-shadow: 1px 0 0 #e6e6e6;
+}
+.flatpickr-weekwrapper .flatpickr-weekday {
+  float: none;
+  width: 100%;
+  line-height: 28px;
+}
+.flatpickr-weekwrapper span.flatpickr-day,
+.flatpickr-weekwrapper span.flatpickr-day:hover {
+  display: block;
+  width: 100%;
+  max-width: none;
+  color: rgba(57,57,57,0.3);
+  background: transparent;
+  cursor: default;
+  border: none;
+}
+.flatpickr-innerContainer {
+  display: block;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  overflow: hidden;
+}
+.flatpickr-rContainer {
+  display: inline-block;
+  padding: 0;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+}
+.flatpickr-time {
+  text-align: center;
+  outline: 0;
+  display: block;
+  height: 0;
+  line-height: 40px;
+  max-height: 40px;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  overflow: hidden;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+.flatpickr-time:after {
+  content: "";
+  display: table;
+  clear: both;
+}
+.flatpickr-time .numInputWrapper {
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+  width: 40%;
+  height: 40px;
+  float: left;
+}
+.flatpickr-time .numInputWrapper span.arrowUp:after {
+  border-bottom-color: #393939;
+}
+.flatpickr-time .numInputWrapper span.arrowDown:after {
+  border-top-color: #393939;
+}
+.flatpickr-time.hasSeconds .numInputWrapper {
+  width: 26%;
+}
+.flatpickr-time.time24hr .numInputWrapper {
+  width: 49%;
+}
+.flatpickr-time input {
+  background: transparent;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+  border: 0;
+  border-radius: 0;
+  text-align: center;
+  margin: 0;
+  padding: 0;
+  height: inherit;
+  line-height: inherit;
+  cursor: pointer;
+  color: #393939;
+  font-size: 14px;
+  position: relative;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+}
+.flatpickr-time input.flatpickr-hour {
+  font-weight: bold;
+}
+.flatpickr-time input.flatpickr-minute,
+.flatpickr-time input.flatpickr-second {
+  font-weight: 400;
+}
+.flatpickr-time input:focus {
+  outline: 0;
+  border: 0;
+}
+.flatpickr-time .flatpickr-time-separator,
+.flatpickr-time .flatpickr-am-pm {
+  height: inherit;
+  display: inline-block;
+  float: left;
+  line-height: inherit;
+  color: #393939;
+  font-weight: bold;
+  width: 2%;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  -webkit-align-self: center;
+      -ms-flex-item-align: center;
+          align-self: center;
+}
+.flatpickr-time .flatpickr-am-pm {
+  outline: 0;
+  width: 18%;
+  cursor: pointer;
+  text-align: center;
+  font-weight: 400;
+}
+.flatpickr-time .flatpickr-am-pm:hover,
+.flatpickr-time .flatpickr-am-pm:focus {
+  background: #f0f0f0;
+}
+.flatpickr-input[readonly] {
+  cursor: pointer;
+  min-width: auto;
+}
+@-webkit-keyframes fpFadeInDown {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(0, -20px, 0);
+            transform: translate3d(0, -20px, 0);
+  }
+  to {
+    opacity: 1;
+    -webkit-transform: translate3d(0, 0, 0);
+            transform: translate3d(0, 0, 0);
+  }
+}
+@keyframes fpFadeInDown {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(0, -20px, 0);
+            transform: translate3d(0, -20px, 0);
+  }
+  to {
+    opacity: 1;
+    -webkit-transform: translate3d(0, 0, 0);
+            transform: translate3d(0, 0, 0);
+  }
+}
diff --git a/frontend/vendor/flatpickr.js b/frontend/vendor/flatpickr.js
new file mode 100644
index 000000000..226f63df3
--- /dev/null
+++ b/frontend/vendor/flatpickr.js
@@ -0,0 +1,2 @@
+/* flatpickr v4.4.4,, @license MIT */
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):e.flatpickr=t()}(this,function(){"use strict";var Z=function(e){return("0"+e).slice(-2)},Q=function(e){return!0===e?1:0};function X(n,a,i){var o;return void 0===i&&(i=!1),function(){var e=this,t=arguments;null!==o&&clearTimeout(o),o=window.setTimeout(function(){o=null,i||n.apply(e,t)},a),i&&!o&&n.apply(e,t)}}var ee=function(e){return e instanceof Array?e:[e]},e=function(){},te=function(e,t,n){return n.months[t?"shorthand":"longhand"][e]},D={D:e,F:function(e,t,n){e.setMonth(n.months.longhand.indexOf(t))},G:function(e,t){e.setHours(parseFloat(t))},H:function(e,t){e.setHours(parseFloat(t))},J:function(e,t){e.setDate(parseFloat(t))},K:function(e,t,n){e.setHours(e.getHours()%12+12*Q(new RegExp(n.amPM[1],"i").test(t)))},M:function(e,t,n){e.setMonth(n.months.shorthand.indexOf(t))},S:function(e,t){e.setSeconds(parseFloat(t))},U:function(e,t){return new Date(1e3*parseFloat(t))},W:function(e,t){var n=parseInt(t);return new Date(e.getFullYear(),0,2+7*(n-1),0,0,0,0)},Y:function(e,t){e.setFullYear(parseFloat(t))},Z:function(e,t){return new Date(t)},d:function(e,t){e.setDate(parseFloat(t))},h:function(e,t){e.setHours(parseFloat(t))},i:function(e,t){e.setMinutes(parseFloat(t))},j:function(e,t){e.setDate(parseFloat(t))},l:e,m:function(e,t){e.setMonth(parseFloat(t)-1)},n:function(e,t){e.setMonth(parseFloat(t)-1)},s:function(e,t){e.setSeconds(parseFloat(t))},w:e,y:function(e,t){e.setFullYear(2e3+parseFloat(t))}},ne={D:"(\\w+)",F:"(\\w+)",G:"(\\d\\d|\\d)",H:"(\\d\\d|\\d)",J:"(\\d\\d|\\d)\\w+",K:"",M:"(\\w+)",S:"(\\d\\d|\\d)",U:"(.+)",W:"(\\d\\d|\\d)",Y:"(\\d{4})",Z:"(.+)",d:"(\\d\\d|\\d)",h:"(\\d\\d|\\d)",i:"(\\d\\d|\\d)",j:"(\\d\\d|\\d)",l:"(\\w+)",m:"(\\d\\d|\\d)",n:"(\\d\\d|\\d)",s:"(\\d\\d|\\d)",w:"(\\d\\d|\\d)",y:"(\\d{2})"},c={Z:function(e){return e.toISOString()},D:function(e,t,n){return t.weekdays.shorthand[c.w(e,t,n)]},F:function(e,t,n){return te(c.n(e,t,n)-1,!1,t)},G:function(e,t,n){return Z(c.h(e,t,n))},H:function(e){return Z(e.getHours())},J:function(e,t){return void 0!==t.ordinal?e.getDate()+t.ordinal(e.getDate()):e.getDate()},K:function(e,t){return t.amPM[Q(11<e.getHours())]},M:function(e,t){return te(e.getMonth(),!0,t)},S:function(e){return Z(e.getSeconds())},U:function(e){return e.getTime()/1e3},W:function(e,t,n){return n.getWeek(e)},Y:function(e){return e.getFullYear()},d:function(e){return Z(e.getDate())},h:function(e){return e.getHours()%12?e.getHours()%12:12},i:function(e){return Z(e.getMinutes())},j:function(e){return e.getDate()},l:function(e,t){return t.weekdays.longhand[e.getDay()]},m:function(e){return Z(e.getMonth()+1)},n:function(e){return e.getMonth()+1},s:function(e){return e.getSeconds()},w:function(e){return e.getDay()},y:function(e){return String(e.getFullYear()).substring(2)}},ae={weekdays:{shorthand:["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],longhand:["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]},months:{shorthand:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],longhand:["January","February","March","April","May","June","July","August","September","October","November","December"]},daysInMonth:[31,28,31,30,31,30,31,31,30,31,30,31],firstDayOfWeek:0,ordinal:function(e){var t=e%100;if(3<t&&t<21)return"th";switch(t%10){case 1:return"st";case 2:return"nd";case 3:return"rd";default:return"th"}},rangeSeparator:" to ",weekAbbreviation:"Wk",scrollTitle:"Scroll to increment",toggleTitle:"Click to toggle",amPM:["AM","PM"],yearAriaLabel:"Year"},ie=function(e){var t=e.config,o=void 0===t?b:t,n=e.l10n,r=void 0===n?ae:n;return function(a,e,t){if(void 0!==o.formatDate)return o.formatDate(a,e);var i=t||r;return e.split("").map(function(e,t,n){return c[e]&&"\\"!==n[t-1]?c[e](a,i,o):"\\"!==e?e:""}).join("")}},oe=function(e){var t=e.config,h=void 0===t?b:t,n=e.l10n,v=void 0===n?ae:n;return function(e,t,n){if(0===e||e){var a,i=e;if(e instanceof Date)a=new Date(e.getTime());else if("string"!=typeof e&&void 0!==e.toFixed)a=new Date(e);else if("string"==typeof e){var o=t||(h||b).dateFormat,r=String(e).trim();if("today"===r)a=new Date,n=!0;else if(/Z$/.test(r)||/GMT$/.test(r))a=new Date(e);else if(h&&h.parseDate)a=h.parseDate(e,o);else{a=h&&h.noCalendar?new Date((new Date).setHours(0,0,0,0)):new Date((new Date).getFullYear(),0,1,0,0,0,0);for(var c,l=[],d=0,s=0,u="";d<o.length;d++){var f=o[d],m="\\"===f,g="\\"===o[d-1]||m;if(ne[f]&&!g){u+=ne[f];var p=new RegExp(u).exec(e);p&&(c=!0)&&l["Y"!==f?"push":"unshift"]({fn:D[f],val:p[++s]})}else m||(u+=".");l.forEach(function(e){var t=e.fn,n=e.val;return a=t(a,n,v)||a})}a=c?a:void 0}}if(a instanceof Date)return!0===n&&a.setHours(0,0,0,0),a;h.errorHandler(new Error("Invalid date provided: "+i))}}};function re(e,t,n){return void 0===n&&(n=!0),!1!==n?new Date(e.getTime()).setHours(0,0,0,0)-new Date(t.getTime()).setHours(0,0,0,0):e.getTime()-t.getTime()}var ce=function(e,t,n){return e>Math.min(t,n)&&e<Math.max(t,n)},le={DAY:864e5},b={_disable:[],_enable:[],allowInput:!1,altFormat:"F j, Y",altInput:!1,altInputClass:"form-control input",animate:"object"==typeof window&&-1===window.navigator.userAgent.indexOf("MSIE"),ariaDateFormat:"F j, Y",clickOpens:!0,closeOnSelect:!0,conjunction:", ",dateFormat:"Y-m-d",defaultHour:12,defaultMinute:0,defaultSeconds:0,disable:[],disableMobile:!1,enable:[],enableSeconds:!1,enableTime:!1,errorHandler:function(e){return"undefined"!=typeof console&&console.warn(e)},getWeek:function(e){var t=new Date(e.getTime());t.setHours(0,0,0,0),t.setDate(t.getDate()+3-(t.getDay()+6)%7);var n=new Date(t.getFullYear(),0,4);return 1+Math.round(((t.getTime()-n.getTime())/864e5-3+(n.getDay()+6)%7)/7)},hourIncrement:1,ignoredFocusElements:[],inline:!1,locale:"default",minuteIncrement:5,mode:"single",nextArrow:"<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 17 17'><g></g><path d='M13.207 8.472l-7.854 7.854-0.707-0.707 7.146-7.146-7.146-7.148 0.707-0.707 7.854 7.854z' /></svg>",noCalendar:!1,now:new Date,onChange:[],onClose:[],onDayCreate:[],onDestroy:[],onKeyDown:[],onMonthChange:[],onOpen:[],onParseConfig:[],onReady:[],onValueUpdate:[],onYearChange:[],onPreCalendarPosition:[],plugins:[],position:"auto",positionElement:void 0,prevArrow:"<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 17 17'><g></g><path d='M5.207 8.471l7.146 7.147-0.707 0.707-7.853-7.854 7.854-7.853 0.707 0.707-7.147 7.146z' /></svg>",shorthandCurrentMonth:!1,showMonths:1,static:!1,time_24hr:!1,weekNumbers:!1,wrap:!1};function de(e,t,n){if(!0===n)return e.classList.add(t);e.classList.remove(t)}function se(e,t,n){var a=window.document.createElement(e);return t=t||"",n=n||"",a.className=t,void 0!==n&&(a.textContent=n),a}function ue(e){for(;e.firstChild;)e.removeChild(e.firstChild)}function fe(e,t){var n=se("div","numInputWrapper"),a=se("input","numInput "+e),i=se("span","arrowUp"),o=se("span","arrowDown");if(a.type="text",a.pattern="\\d*",void 0!==t)for(var r in t)a.setAttribute(r,t[r]);return n.appendChild(a),n.appendChild(i),n.appendChild(o),n}"function"!=typeof Object.assign&&(Object.assign=function(n){if(!n)throw TypeError("Cannot convert undefined or null to object");for(var e=arguments.length,t=new Array(1<e?e-1:0),a=1;a<e;a++)t[a-1]=arguments[a];for(var i=function(t){t&&Object.keys(t).forEach(function(e){return n[e]=t[e]})},o=0;o<t.length;o++){i(t[o])}return n});var me=300;function r(s,u){var D={config:Object.assign({},ge.defaultConfig),l10n:ae};function f(e){return e.bind(D)}function t(){if(void 0!==D.daysContainer){D.calendarContainer.style.visibility="hidden",D.calendarContainer.style.display="block";var e=(D.days.offsetWidth+1)*D.config.showMonths;D.daysContainer.style.width=e+"px",D.calendarContainer.style.width=e+"px",void 0!==D.weekWrapper&&(D.calendarContainer.style.width=e+D.weekWrapper.offsetWidth+"px"),D.calendarContainer.style.removeProperty("visibility"),D.calendarContainer.style.removeProperty("display")}}function d(e){0!==D.selectedDates.length&&(!function(e){e.preventDefault();var t="keydown"===e.type,n=e.target;void 0!==D.amPM&&e.target===D.amPM&&(D.amPM.textContent=D.l10n.amPM[Q(D.amPM.textContent===D.l10n.amPM[0])]);var a=parseFloat(n.getAttribute("data-min")),i=parseFloat(n.getAttribute("data-max")),o=parseFloat(n.getAttribute("data-step")),r=parseInt(n.value,10),c=e.delta||(t?38===e.which?1:-1:0),l=r+o*c;if(void 0!==n.value&&2===n.value.length){var d=n===D.hourElement,s=n===D.minuteElement;l<a?(l=i+l+Q(!d)+(Q(d)&&Q(!D.amPM)),s&&h(void 0,-1,D.hourElement)):i<l&&(l=n===D.hourElement?l-i-Q(!D.amPM):a,s&&h(void 0,1,D.hourElement)),D.amPM&&d&&(1===o?l+r===23:Math.abs(l-r)>o)&&(D.amPM.textContent=D.l10n.amPM[Q(D.amPM.textContent===D.l10n.amPM[0])]),n.value=Z(l)}}(e),"input"!==e.type?(m(),G()):setTimeout(function(){m(),G()},me))}function m(){if(void 0!==D.hourElement&&void 0!==D.minuteElement){var e,t,n=(parseInt(D.hourElement.value.slice(-2),10)||0)%24,a=(parseInt(D.minuteElement.value,10)||0)%60,i=void 0!==D.secondElement?(parseInt(D.secondElement.value,10)||0)%60:0;void 0!==D.amPM&&(e=n,t=D.amPM.textContent,n=e%12+12*Q(t===D.l10n.amPM[1]));var o=void 0!==D.config.minTime||D.config.minDate&&D.minDateHasTime&&D.latestSelectedDateObj&&0===re(D.latestSelectedDateObj,D.config.minDate,!0);if(void 0!==D.config.maxTime||D.config.maxDate&&D.maxDateHasTime&&D.latestSelectedDateObj&&0===re(D.latestSelectedDateObj,D.config.maxDate,!0)){var r=void 0!==D.config.maxTime?D.config.maxTime:D.config.maxDate;(n=Math.min(n,r.getHours()))===r.getHours()&&(a=Math.min(a,r.getMinutes())),a===r.getMinutes()&&(i=Math.min(i,r.getSeconds()))}if(o){var c=void 0!==D.config.minTime?D.config.minTime:D.config.minDate;(n=Math.max(n,c.getHours()))===c.getHours()&&(a=Math.max(a,c.getMinutes())),a===c.getMinutes()&&(i=Math.max(i,c.getSeconds()))}l(n,a,i)}}function g(e){var t=e||D.latestSelectedDateObj;t&&l(t.getHours(),t.getMinutes(),t.getSeconds())}function l(e,t,n){void 0!==D.latestSelectedDateObj&&D.latestSelectedDateObj.setHours(e%24,t,n||0,0),D.hourElement&&D.minuteElement&&!D.isMobile&&(D.hourElement.value=Z(D.config.time_24hr?e:(12+e)%12+12*Q(e%12==0)),D.minuteElement.value=Z(t),void 0!==D.amPM&&(D.amPM.textContent=D.l10n.amPM[Q(12<=e)]),void 0!==D.secondElement&&(D.secondElement.value=Z(n)))}function n(e){var t=parseInt(e.target.value)+(e.delta||0);4!==t.toString().length&&"Enter"!==e.key||(e.target.blur(),/[^\d]/.test(t.toString())||S(t))}function o(t,n,a,i){return n instanceof Array?n.forEach(function(e){return o(t,e,a,i)}):t instanceof Array?t.forEach(function(e){return o(e,n,a,i)}):(t.addEventListener(n,a,i),void D._handlers.push({element:t,event:n,handler:a}))}function a(t){return function(e){1===e.which&&t(e)}}function p(){U("onChange")}function i(e){var t=void 0!==e?D.parseDate(e):D.latestSelectedDateObj||(D.config.minDate&&D.config.minDate>D.now?D.config.minDate:D.config.maxDate&&D.config.maxDate<D.now?D.config.maxDate:D.now);try{void 0!==t&&(D.currentYear=t.getFullYear(),D.currentMonth=t.getMonth())}catch(e){e.message="Invalid date supplied: "+t,D.config.errorHandler(e)}D.redraw()}function r(e){~e.target.className.indexOf("arrow")&&h(e,e.target.classList.contains("arrowUp")?1:-1)}function h(e,t,n){var a=e&&e.target,i=n||a&&a.parentNode&&a.parentNode.firstChild,o=q("increment");o.delta=t,i&&i.dispatchEvent(o)}function v(e,t,n,a){var i,o=P(t,!0),r=se("span","flatpickr-day "+e,t.getDate().toString());return r.dateObj=t,r.$i=a,r.setAttribute("aria-label",D.formatDate(t,D.config.ariaDateFormat)),-1===e.indexOf("hidden")&&0===re(t,D.now)&&((D.todayDateElem=r).classList.add("today"),r.setAttribute("aria-current","date")),o?(r.tabIndex=-1,$(t)&&(r.classList.add("selected"),D.selectedDateElem=r,"range"===D.config.mode&&(de(r,"startRange",D.selectedDates[0]&&0===re(t,D.selectedDates[0],!0)),de(r,"endRange",D.selectedDates[1]&&0===re(t,D.selectedDates[1],!0)),"nextMonthDay"===e&&r.classList.add("inRange")))):r.classList.add("disabled"),"range"===D.config.mode&&(i=t,!("range"!==D.config.mode||D.selectedDates.length<2)&&0<=re(i,D.selectedDates[0])&&re(i,D.selectedDates[1])<=0&&!$(t)&&r.classList.add("inRange")),D.weekNumbers&&1===D.config.showMonths&&"prevMonthDay"!==e&&n%7==1&&D.weekNumbers.insertAdjacentHTML("beforeend","<span class='flatpickr-day'>"+D.config.getWeek(t)+"</span>"),U("onDayCreate",r),r}function b(e){e.focus(),"range"===D.config.mode&&A(e)}function w(e){for(var t=0<e?0:D.config.showMonths-1,n=0<e?D.config.showMonths:-1,a=t;a!=n;a+=e)for(var i=D.daysContainer.children[a],o=0<e?0:i.children.length-1,r=0<e?i.children.length:-1,c=o;c!=r;c+=e){var l=i.children[c];if(-1===l.className.indexOf("hidden")&&P(l.dateObj))return l}}function M(e,t){var n=_(document.activeElement),a=void 0!==e?e:n?document.activeElement:void 0!==D.selectedDateElem&&_(D.selectedDateElem)?D.selectedDateElem:void 0!==D.todayDateElem&&_(D.todayDateElem)?D.todayDateElem:w(0<t?1:-1);return void 0===a?D._input.focus():n?void function(e,t){for(var n=-1===e.className.indexOf("Month")?e.dateObj.getMonth():D.currentMonth,a=0<t?D.config.showMonths:-1,i=0<t?1:-1,o=n-D.currentMonth;o!=a;o+=i)for(var r=D.daysContainer.children[o],c=n-D.currentMonth===o?e.$i+t:t<0?r.children.length-1:0,l=r.children.length,d=c;0<=d&&d<l&&d!=(0<t?l:-1);d+=i){var s=r.children[d];if(-1===s.className.indexOf("hidden")&&P(s.dateObj)&&Math.abs(e.$i-d)>=Math.abs(t))return b(s)}D.changeMonth(i),M(w(i),0)}(a,t):b(a)}function c(e,t){for(var n=(new Date(e,t,1).getDay()-D.l10n.firstDayOfWeek+7)%7,a=D.utils.getDaysInMonth((t-1+12)%12),i=D.utils.getDaysInMonth(t),o=window.document.createDocumentFragment(),r=1<D.config.showMonths,c=r?"prevMonthDay hidden":"prevMonthDay",l=r?"nextMonthDay hidden":"nextMonthDay",d=a+1-n,s=0;d<=a;d++,s++)o.appendChild(v(c,new Date(e,t-1,d),d,s));for(d=1;d<=i;d++,s++)o.appendChild(v("",new Date(e,t,d),d,s));for(var u=i+1;u<=42-n&&(1===D.config.showMonths||s%7!=0);u++,s++)o.appendChild(v(l,new Date(e,t+1,u%i),u,s));var f=se("div","dayContainer");return f.appendChild(o),f}function C(){if(void 0!==D.daysContainer){ue(D.daysContainer),D.weekNumbers&&ue(D.weekNumbers);for(var e=document.createDocumentFragment(),t=0;t<D.config.showMonths;t++){var n=new Date(D.currentYear,D.currentMonth,1);n.setMonth(D.currentMonth+t),e.appendChild(c(n.getFullYear(),n.getMonth()))}D.daysContainer.appendChild(e),D.days=D.daysContainer.firstChild}}function y(){var e=se("div","flatpickr-month"),t=window.document.createDocumentFragment(),n=se("span","cur-month");n.title=D.l10n.scrollTitle;var a=fe("cur-year",{tabindex:"-1"}),i=a.childNodes[0];i.title=D.l10n.scrollTitle,i.setAttribute("aria-label",D.l10n.yearAriaLabel),D.config.minDate&&i.setAttribute("data-min",D.config.minDate.getFullYear().toString()),D.config.maxDate&&(i.setAttribute("data-max",D.config.maxDate.getFullYear().toString()),i.disabled=!!D.config.minDate&&D.config.minDate.getFullYear()===D.config.maxDate.getFullYear());var o=se("div","flatpickr-current-month");return o.appendChild(n),o.appendChild(a),t.appendChild(o),e.appendChild(t),{container:e,yearElement:i,monthElement:n}}function x(){ue(D.monthNav),D.monthNav.appendChild(D.prevMonthNav);for(var e=D.config.showMonths;e--;){var t=y();D.yearElements.push(t.yearElement),D.monthElements.push(t.monthElement),D.monthNav.appendChild(t.container)}D.monthNav.appendChild(D.nextMonthNav)}function E(){D.weekdayContainer?ue(D.weekdayContainer):D.weekdayContainer=se("div","flatpickr-weekdays");for(var e=D.config.showMonths;e--;){var t=se("div","flatpickr-weekdaycontainer");D.weekdayContainer.appendChild(t)}return T(),D.weekdayContainer}function T(){var e=D.l10n.firstDayOfWeek,t=D.l10n.weekdays.shorthand.concat();0<e&&e<t.length&&(t=t.splice(e,t.length).concat(t.splice(0,e)));for(var n=D.config.showMonths;n--;)D.weekdayContainer.children[n].innerHTML="\n      <span class=flatpickr-weekday>\n        "+t.join("</span><span class=flatpickr-weekday>")+"\n      </span>\n      "}function k(e,t){void 0===t&&(t=!0);var n=t?e:e-D.currentMonth;n<0&&!0===D._hidePrevMonthArrow||0<n&&!0===D._hideNextMonthArrow||(D.currentMonth+=n,(D.currentMonth<0||11<D.currentMonth)&&(D.currentYear+=11<D.currentMonth?1:-1,D.currentMonth=(D.currentMonth+12)%12,U("onYearChange")),C(),U("onMonthChange"),z())}function I(e){return!(!D.config.appendTo||!D.config.appendTo.contains(e))||D.calendarContainer.contains(e)}function O(t){if(D.isOpen&&!D.config.inline){var e=I(t.target),n=t.target===D.input||t.target===D.altInput||D.element.contains(t.target)||t.path&&t.path.indexOf&&(~t.path.indexOf(D.input)||~t.path.indexOf(D.altInput)),a="blur"===t.type?n&&t.relatedTarget&&!I(t.relatedTarget):!n&&!e,i=!D.config.ignoredFocusElements.some(function(e){return e.contains(t.target)});a&&i&&(D.close(),"range"===D.config.mode&&1===D.selectedDates.length&&(D.clear(!1),D.redraw()))}}function S(e){if(!(!e||D.config.minDate&&e<D.config.minDate.getFullYear()||D.config.maxDate&&e>D.config.maxDate.getFullYear())){var t=e,n=D.currentYear!==t;D.currentYear=t||D.currentYear,D.config.maxDate&&D.currentYear===D.config.maxDate.getFullYear()?D.currentMonth=Math.min(D.config.maxDate.getMonth(),D.currentMonth):D.config.minDate&&D.currentYear===D.config.minDate.getFullYear()&&(D.currentMonth=Math.max(D.config.minDate.getMonth(),D.currentMonth)),n&&(D.redraw(),U("onYearChange"))}}function P(e,t){void 0===t&&(t=!0);var n=D.parseDate(e,void 0,t);if(D.config.minDate&&n&&re(n,D.config.minDate,void 0!==t?t:!D.minDateHasTime)<0||D.config.maxDate&&n&&0<re(n,D.config.maxDate,void 0!==t?t:!D.maxDateHasTime))return!1;if(0===D.config.enable.length&&0===D.config.disable.length)return!0;if(void 0===n)return!1;for(var a,i=0<D.config.enable.length,o=i?D.config.enable:D.config.disable,r=0;r<o.length;r++){if("function"==typeof(a=o[r])&&a(n))return i;if(a instanceof Date&&void 0!==n&&a.getTime()===n.getTime())return i;if("string"==typeof a&&void 0!==n){var c=D.parseDate(a,void 0,!0);return c&&c.getTime()===n.getTime()?i:!i}if("object"==typeof a&&void 0!==n&&a.from&&a.to&&n.getTime()>=a.from.getTime()&&n.getTime()<=a.to.getTime())return i}return!i}function _(e){return void 0!==D.daysContainer&&(-1===e.className.indexOf("hidden")&&D.daysContainer.contains(e))}function F(e){e.stopPropagation();var t=e.target===D._input,n=I(e.target),a=D.config.allowInput,i=D.isOpen&&(!a||!t),o=D.config.inline&&t&&!a;if(13===e.keyCode&&t){if(a)return D.setDate(D._input.value,!0,e.target===D.altInput?D.config.altFormat:D.config.dateFormat),e.target.blur();D.open()}else if(n||i||o){var r=!!D.timeContainer&&D.timeContainer.contains(e.target);switch(e.keyCode){case 13:r?G():R(e);break;case 27:e.preventDefault(),W();break;case 8:case 46:t&&!D.config.allowInput&&(e.preventDefault(),D.clear());break;case 37:case 39:if(r)D.hourElement&&D.hourElement.focus();else if(e.preventDefault(),void 0!==D.daysContainer&&!1===D.config.allowInput){var c=39===e.keyCode?1:-1;e.ctrlKey?(k(c),M(w(1),0)):M(void 0,c)}break;case 38:case 40:e.preventDefault();var l=40===e.keyCode?1:-1;D.daysContainer?e.ctrlKey?(S(D.currentYear-l),M(w(1),0)):r||M(void 0,7*l):D.config.enableTime&&(!r&&D.hourElement&&D.hourElement.focus(),d(e),D._debouncedChange());break;case 9:e.target===D.hourElement?(e.preventDefault(),D.minuteElement.select()):e.target===D.minuteElement&&(D.secondElement||D.amPM)?(e.preventDefault(),void 0!==D.secondElement?D.secondElement.focus():void 0!==D.amPM&&D.amPM.focus()):e.target===D.secondElement&&D.amPM&&(e.preventDefault(),D.amPM.focus())}switch(e.key){case D.l10n.amPM[0].charAt(0):case D.l10n.amPM[0].charAt(0).toLowerCase():void 0!==D.amPM&&e.target===D.amPM&&(D.amPM.textContent=D.l10n.amPM[0],m(),G());break;case D.l10n.amPM[1].charAt(0):case D.l10n.amPM[1].charAt(0).toLowerCase():void 0!==D.amPM&&e.target===D.amPM&&(D.amPM.textContent=D.l10n.amPM[1],m(),G())}U("onKeyDown",e)}}function A(o){if(1===D.selectedDates.length&&o.classList.contains("flatpickr-day")&&!o.classList.contains("disabled")){for(var r=o.dateObj.getTime(),c=D.parseDate(D.selectedDates[0],void 0,!0).getTime(),e=Math.min(r,D.selectedDates[0].getTime()),t=Math.max(r,D.selectedDates[0].getTime()),n=D.daysContainer.children,a=n[0].children[0].dateObj.getTime(),i=n[n.length-1].lastChild.dateObj.getTime(),l=!1,d=0,s=0,u=a;u<i;u+=le.DAY)P(new Date(u),!0)||(l=l||e<u&&u<t,u<c&&(!d||d<u)?d=u:c<u&&(!s||u<s)&&(s=u));for(var f=0;f<D.config.showMonths;f++)for(var m=D.daysContainer.children[f],g=D.daysContainer.children[f-1],p=function(e,t){var n=m.children[e],a=n.dateObj.getTime(),i=0<d&&a<d||0<s&&s<a;return i?(n.classList.add("notAllowed"),["inRange","startRange","endRange"].forEach(function(e){n.classList.remove(e)}),"continue"):l&&!i?"continue":(["startRange","inRange","endRange","notAllowed"].forEach(function(e){n.classList.remove(e)}),o.classList.add(r<D.selectedDates[0].getTime()?"startRange":"endRange"),void(!m.contains(o)&&0<f&&g&&g.lastChild.dateObj.getTime()>=a||(c<r&&a===c?n.classList.add("startRange"):r<c&&a===c&&n.classList.add("endRange"),d<=a&&(0===s||a<=s)&&ce(a,c,r)&&n.classList.add("inRange"))))},h=0,v=m.children.length;h<v;h++)p(h)}}function N(){!D.isOpen||D.config.static||D.config.inline||H()}function j(a){return function(e){var t=D.config["_"+a+"Date"]=D.parseDate(e,D.config.dateFormat),n=D.config["_"+("min"===a?"max":"min")+"Date"];void 0!==t&&(D["min"===a?"minDateHasTime":"maxDateHasTime"]=0<t.getHours()||0<t.getMinutes()||0<t.getSeconds()),D.selectedDates&&(D.selectedDates=D.selectedDates.filter(function(e){return P(e)}),D.selectedDates.length||"min"!==a||g(t),G()),D.daysContainer&&(L(),void 0!==t?D.currentYearElement[a]=t.getFullYear().toString():D.currentYearElement.removeAttribute(a),D.currentYearElement.disabled=!!n&&void 0!==t&&n.getFullYear()===t.getFullYear())}}function Y(){"object"!=typeof D.config.locale&&void 0===ge.l10ns[D.config.locale]&&D.config.errorHandler(new Error("flatpickr: invalid locale "+D.config.locale)),D.l10n=Object.assign({},ge.l10ns.default,"object"==typeof D.config.locale?D.config.locale:"default"!==D.config.locale?ge.l10ns[D.config.locale]:void 0),ne.K="("+D.l10n.amPM[0]+"|"+D.l10n.amPM[1]+"|"+D.l10n.amPM[0].toLowerCase()+"|"+D.l10n.amPM[1].toLowerCase()+")",D.formatDate=ie(D)}function H(e){if(void 0!==D.calendarContainer){U("onPreCalendarPosition");var t=e||D._positionElement,n=Array.prototype.reduce.call(D.calendarContainer.children,function(e,t){return e+t.offsetHeight},0),a=D.calendarContainer.offsetWidth,i=D.config.position,o=t.getBoundingClientRect(),r=window.innerHeight-o.bottom,c="above"===i||"below"!==i&&r<n&&o.top>n,l=window.pageYOffset+o.top+(c?-n-2:t.offsetHeight+2);if(de(D.calendarContainer,"arrowTop",!c),de(D.calendarContainer,"arrowBottom",c),!D.config.inline){var d=window.pageXOffset+o.left,s=window.document.body.offsetWidth-o.right,u=d+a>window.document.body.offsetWidth;de(D.calendarContainer,"rightMost",u),D.config.static||(D.calendarContainer.style.top=l+"px",u?(D.calendarContainer.style.left="auto",D.calendarContainer.style.right=s+"px"):(D.calendarContainer.style.left=d+"px",D.calendarContainer.style.right="auto"))}}}function L(){D.config.noCalendar||D.isMobile||(z(),C())}function W(){D._input.focus(),-1!==window.navigator.userAgent.indexOf("MSIE")||void 0!==navigator.msMaxTouchPoints?setTimeout(D.close,0):D.close()}function R(e){e.preventDefault(),e.stopPropagation();var t=function e(t,n){return n(t)?t:t.parentNode?e(t.parentNode,n):void 0}(e.target,function(e){return e.classList&&e.classList.contains("flatpickr-day")&&!e.classList.contains("disabled")&&!e.classList.contains("notAllowed")});if(void 0!==t){var n=t,a=D.latestSelectedDateObj=new Date(n.dateObj.getTime()),i=(a.getMonth()<D.currentMonth||a.getMonth()>D.currentMonth+D.config.showMonths-1)&&"range"!==D.config.mode;if(D.selectedDateElem=n,"single"===D.config.mode)D.selectedDates=[a];else if("multiple"===D.config.mode){var o=$(a);o?D.selectedDates.splice(parseInt(o),1):D.selectedDates.push(a)}else"range"===D.config.mode&&(2===D.selectedDates.length&&D.clear(!1),D.selectedDates.push(a),0!==re(a,D.selectedDates[0],!0)&&D.selectedDates.sort(function(e,t){return e.getTime()-t.getTime()}));if(m(),i){var r=D.currentYear!==a.getFullYear();D.currentYear=a.getFullYear(),D.currentMonth=a.getMonth(),r&&U("onYearChange"),U("onMonthChange")}if(z(),C(),D.config.minDate&&D.minDateHasTime&&D.config.enableTime&&0===re(a,D.config.minDate)&&g(D.config.minDate),G(),D.config.enableTime&&setTimeout(function(){return D.showTimeInput=!0},50),"range"===D.config.mode&&(1===D.selectedDates.length?A(n):z()),i||"range"===D.config.mode||1!==D.config.showMonths?D.selectedDateElem&&D.selectedDateElem.focus():b(n),void 0!==D.hourElement&&setTimeout(function(){return void 0!==D.hourElement&&D.hourElement.select()},451),D.config.closeOnSelect){var c="single"===D.config.mode&&!D.config.enableTime,l="range"===D.config.mode&&2===D.selectedDates.length&&!D.config.enableTime;(c||l)&&W()}p()}}D.parseDate=oe({config:D.config,l10n:D.l10n}),D._handlers=[],D._bind=o,D._setHoursFromDate=g,D.changeMonth=k,D.changeYear=S,D.clear=function(e){void 0===e&&(e=!0);D.input.value="",void 0!==D.altInput&&(D.altInput.value="");void 0!==D.mobileInput&&(D.mobileInput.value="");D.selectedDates=[],D.latestSelectedDateObj=void 0,!(D.showTimeInput=!1)===D.config.enableTime&&(void 0!==D.config.minDate?g(D.config.minDate):l(D.config.defaultHour,D.config.defaultMinute,D.config.defaultSeconds));D.redraw(),e&&U("onChange")},D.close=function(){D.isOpen=!1,D.isMobile||(D.calendarContainer.classList.remove("open"),D._input.classList.remove("active"));U("onClose")},D._createElement=se,D.destroy=function(){void 0!==D.config&&U("onDestroy");for(var e=D._handlers.length;e--;){var t=D._handlers[e];t.element.removeEventListener(t.event,t.handler)}D._handlers=[],D.mobileInput?(D.mobileInput.parentNode&&D.mobileInput.parentNode.removeChild(D.mobileInput),D.mobileInput=void 0):D.calendarContainer&&D.calendarContainer.parentNode&&D.calendarContainer.parentNode.removeChild(D.calendarContainer);D.altInput&&(D.input.type="text",D.altInput.parentNode&&D.altInput.parentNode.removeChild(D.altInput),delete D.altInput);D.input&&(D.input.type=D.input._type,D.input.classList.remove("flatpickr-input"),D.input.removeAttribute("readonly"),D.input.value="");["_showTimeInput","latestSelectedDateObj","_hideNextMonthArrow","_hidePrevMonthArrow","__hideNextMonthArrow","__hidePrevMonthArrow","isMobile","isOpen","selectedDateElem","minDateHasTime","maxDateHasTime","days","daysContainer","_input","_positionElement","innerContainer","rContainer","monthNav","todayDateElem","calendarContainer","weekdayContainer","prevMonthNav","nextMonthNav","currentMonthElement","currentYearElement","navigationCurrentMonth","selectedDateElem","config"].forEach(function(e){try{delete D[e]}catch(e){}})},D.isEnabled=P,D.jumpToDate=i,D.open=function(e,t){void 0===t&&(t=D._input);if(!0===D.isMobile)return e&&(e.preventDefault(),e.target&&e.target.blur()),setTimeout(function(){void 0!==D.mobileInput&&D.mobileInput.click()},0),void U("onOpen");if(D._input.disabled||D.config.inline)return;var n=D.isOpen;D.isOpen=!0,n||(D.calendarContainer.classList.add("open"),D._input.classList.add("active"),U("onOpen"),H(t));!0===D.config.enableTime&&!0===D.config.noCalendar&&(0===D.selectedDates.length&&(D.setDate(void 0!==D.config.minDate?new Date(D.config.minDate.getTime()):(new Date).setHours(D.config.defaultHour,D.config.defaultMinute,D.config.defaultSeconds,0),!1),m(),G()),setTimeout(function(){return D.hourElement.select()},50))},D.redraw=L,D.set=function(e,t){null!==e&&"object"==typeof e?Object.assign(D.config,e):(D.config[e]=t,void 0!==J[e]&&J[e].forEach(function(e){return e()}));D.redraw(),i()},D.setDate=function(e,t,n){void 0===t&&(t=!1);void 0===n&&(n=D.config.dateFormat);if(0!==e&&!e)return D.clear(t);K(e,n),D.showTimeInput=0<D.selectedDates.length,D.latestSelectedDateObj=D.selectedDates[0],D.redraw(),i(),g(),G(t),t&&U("onChange")},D.toggle=function(){if(D.isOpen)return D.close();D.open()};var J={locale:[Y,T],showMonths:[x,t,E]};function K(e,t){var n=[];if(e instanceof Array)n=e.map(function(e){return D.parseDate(e,t)});else if(e instanceof Date||"number"==typeof e)n=[D.parseDate(e,t)];else if("string"==typeof e)switch(D.config.mode){case"single":n=[D.parseDate(e,t)];break;case"multiple":n=e.split(D.config.conjunction).map(function(e){return D.parseDate(e,t)});break;case"range":n=e.split(D.l10n.rangeSeparator).map(function(e){return D.parseDate(e,t)})}else D.config.errorHandler(new Error("Invalid date supplied: "+JSON.stringify(e)));D.selectedDates=n.filter(function(e){return e instanceof Date&&P(e,!1)}),"range"===D.config.mode&&D.selectedDates.sort(function(e,t){return e.getTime()-t.getTime()})}function B(e){return e.map(function(e){return"string"==typeof e||"number"==typeof e||e instanceof Date?D.parseDate(e,void 0,!0):e&&"object"==typeof e&&e.from&&e.to?{from:D.parseDate(e.from,void 0),to:D.parseDate(e.to,void 0)}:e}).filter(function(e){return e})}function U(e,t){var n=D.config[e];if(void 0!==n&&0<n.length)for(var a=0;n[a]&&a<n.length;a++)n[a](D.selectedDates,D.input.value,D,t);"onChange"===e&&(D.input.dispatchEvent(q("change")),D.input.dispatchEvent(q("input")))}function q(e){var t=document.createEvent("Event");return t.initEvent(e,!0,!0),t}function $(e){for(var t=0;t<D.selectedDates.length;t++)if(0===re(D.selectedDates[t],e))return""+t;return!1}function z(){D.config.noCalendar||D.isMobile||!D.monthNav||(D.yearElements.forEach(function(e,t){var n=new Date(D.currentYear,D.currentMonth,1);n.setMonth(D.currentMonth+t),D.monthElements[t].textContent=te(n.getMonth(),D.config.shorthandCurrentMonth,D.l10n)+" ",e.value=n.getFullYear().toString()}),D._hidePrevMonthArrow=void 0!==D.config.minDate&&(D.currentYear===D.config.minDate.getFullYear()?D.currentMonth<=D.config.minDate.getMonth():D.currentYear<D.config.minDate.getFullYear()),D._hideNextMonthArrow=void 0!==D.config.maxDate&&(D.currentYear===D.config.maxDate.getFullYear()?D.currentMonth+1>D.config.maxDate.getMonth():D.currentYear>D.config.maxDate.getFullYear()))}function G(e){if(void 0===e&&(e=!0),0===D.selectedDates.length)return D.clear(e);void 0!==D.mobileInput&&D.mobileFormatStr&&(D.mobileInput.value=void 0!==D.latestSelectedDateObj?D.formatDate(D.latestSelectedDateObj,D.mobileFormatStr):"");var t="range"!==D.config.mode?D.config.conjunction:D.l10n.rangeSeparator;D.input.value=D.selectedDates.map(function(e){return D.formatDate(e,D.config.dateFormat)}).join(t),void 0!==D.altInput&&(D.altInput.value=D.selectedDates.map(function(e){return D.formatDate(e,D.config.altFormat)}).join(t)),!1!==e&&U("onValueUpdate")}function V(e){var t=D.prevMonthNav.contains(e.target),n=D.nextMonthNav.contains(e.target);t||n?k(t?-1:1):0<=D.yearElements.indexOf(e.target)?(e.preventDefault(),e.target.select()):e.target.classList.contains("arrowUp")?D.changeYear(D.currentYear+1):e.target.classList.contains("arrowDown")&&D.changeYear(D.currentYear-1)}return function(){D.element=D.input=s,D.isOpen=!1,function(){var e=["wrap","weekNumbers","allowInput","clickOpens","time_24hr","enableTime","noCalendar","altInput","shorthandCurrentMonth","inline","static","enableSeconds","disableMobile"],t=["onChange","onClose","onDayCreate","onDestroy","onKeyDown","onMonthChange","onOpen","onParseConfig","onReady","onValueUpdate","onYearChange","onPreCalendarPosition"],n=Object.assign({},u,JSON.parse(JSON.stringify(s.dataset||{}))),a={};D.config.parseDate=n.parseDate,D.config.formatDate=n.formatDate,Object.defineProperty(D.config,"enable",{get:function(){return D.config._enable},set:function(e){D.config._enable=B(e)}}),Object.defineProperty(D.config,"disable",{get:function(){return D.config._disable},set:function(e){D.config._disable=B(e)}}),!n.dateFormat&&n.enableTime&&(a.dateFormat=n.noCalendar?"H:i"+(n.enableSeconds?":S":""):ge.defaultConfig.dateFormat+" H:i"+(n.enableSeconds?":S":"")),n.altInput&&n.enableTime&&!n.altFormat&&(a.altFormat=n.noCalendar?"h:i"+(n.enableSeconds?":S K":" K"):ge.defaultConfig.altFormat+" h:i"+(n.enableSeconds?":S":"")+" K"),Object.defineProperty(D.config,"minDate",{get:function(){return D.config._minDate},set:j("min")}),Object.defineProperty(D.config,"maxDate",{get:function(){return D.config._maxDate},set:j("max")});var i=function(t){return function(e){D.config["min"===t?"_minTime":"_maxTime"]=D.parseDate(e,"H:i")}};Object.defineProperty(D.config,"minTime",{get:function(){return D.config._minTime},set:i("min")}),Object.defineProperty(D.config,"maxTime",{get:function(){return D.config._maxTime},set:i("max")}),Object.assign(D.config,a,n);for(var o=0;o<e.length;o++)D.config[e[o]]=!0===D.config[e[o]]||"true"===D.config[e[o]];for(var r=t.length;r--;)void 0!==D.config[t[r]]&&(D.config[t[r]]=ee(D.config[t[r]]||[]).map(f));"time"===D.config.mode&&(D.config.noCalendar=!0,D.config.enableTime=!0);for(var c=0;c<D.config.plugins.length;c++){var l=D.config.plugins[c](D)||{};for(var d in l)~t.indexOf(d)?D.config[d]=ee(l[d]).map(f).concat(D.config[d]):void 0===n[d]&&(D.config[d]=l[d])}D.isMobile=!D.config.disableMobile&&!D.config.inline&&"single"===D.config.mode&&!D.config.disable.length&&!D.config.enable.length&&!D.config.weekNumbers&&/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent),U("onParseConfig")}(),Y(),function(){if(D.input=D.config.wrap?s.querySelector("[data-input]"):s,!D.input)return D.config.errorHandler(new Error("Invalid input element specified"));D.input._type=D.input.type,D.input.type="text",D.input.classList.add("flatpickr-input"),D._input=D.input,D.config.altInput&&(D.altInput=se(D.input.nodeName,D.input.className+" "+D.config.altInputClass),D._input=D.altInput,D.altInput.placeholder=D.input.placeholder,D.altInput.disabled=D.input.disabled,D.altInput.required=D.input.required,D.altInput.tabIndex=D.input.tabIndex,D.altInput.type="text",D.input.type="hidden",!D.config.static&&D.input.parentNode&&D.input.parentNode.insertBefore(D.altInput,D.input.nextSibling)),D.config.allowInput||D._input.setAttribute("readonly","readonly"),D._positionElement=D.config.positionElement||D._input}(),function(){D.selectedDates=[],D.now=D.parseDate(D.config.now)||new Date;var e=D.config.defaultDate||D.input.value;e&&K(e,D.config.dateFormat);var t=0<D.selectedDates.length?D.selectedDates[0]:D.config.minDate&&D.config.minDate.getTime()>D.now.getTime()?D.config.minDate:D.config.maxDate&&D.config.maxDate.getTime()<D.now.getTime()?D.config.maxDate:D.now;D.currentYear=t.getFullYear(),D.currentMonth=t.getMonth(),0<D.selectedDates.length&&(D.latestSelectedDateObj=D.selectedDates[0]),void 0!==D.config.minTime&&(D.config.minTime=D.parseDate(D.config.minTime,"H:i")),void 0!==D.config.maxTime&&(D.config.maxTime=D.parseDate(D.config.maxTime,"H:i")),D.minDateHasTime=!!D.config.minDate&&(0<D.config.minDate.getHours()||0<D.config.minDate.getMinutes()||0<D.config.minDate.getSeconds()),D.maxDateHasTime=!!D.config.maxDate&&(0<D.config.maxDate.getHours()||0<D.config.maxDate.getMinutes()||0<D.config.maxDate.getSeconds()),Object.defineProperty(D,"showTimeInput",{get:function(){return D._showTimeInput},set:function(e){D._showTimeInput=e,D.calendarContainer&&de(D.calendarContainer,"showTimeInput",e),D.isOpen&&H()}})}(),D.utils={getDaysInMonth:function(e,t){return void 0===e&&(e=D.currentMonth),void 0===t&&(t=D.currentYear),1===e&&(t%4==0&&t%100!=0||t%400==0)?29:D.l10n.daysInMonth[e]}},D.isMobile||function(){var e=window.document.createDocumentFragment();if(D.calendarContainer=se("div","flatpickr-calendar"),D.calendarContainer.tabIndex=-1,!D.config.noCalendar){if(e.appendChild((D.monthNav=se("div","flatpickr-months"),D.yearElements=[],D.monthElements=[],D.prevMonthNav=se("span","flatpickr-prev-month"),D.prevMonthNav.innerHTML=D.config.prevArrow,D.nextMonthNav=se("span","flatpickr-next-month"),D.nextMonthNav.innerHTML=D.config.nextArrow,x(),Object.defineProperty(D,"_hidePrevMonthArrow",{get:function(){return D.__hidePrevMonthArrow},set:function(e){D.__hidePrevMonthArrow!==e&&(de(D.prevMonthNav,"disabled",e),D.__hidePrevMonthArrow=e)}}),Object.defineProperty(D,"_hideNextMonthArrow",{get:function(){return D.__hideNextMonthArrow},set:function(e){D.__hideNextMonthArrow!==e&&(de(D.nextMonthNav,"disabled",e),D.__hideNextMonthArrow=e)}}),D.currentYearElement=D.yearElements[0],z(),D.monthNav)),D.innerContainer=se("div","flatpickr-innerContainer"),D.config.weekNumbers){var t=function(){D.calendarContainer.classList.add("hasWeeks");var e=se("div","flatpickr-weekwrapper");e.appendChild(se("span","flatpickr-weekday",D.l10n.weekAbbreviation));var t=se("div","flatpickr-weeks");return e.appendChild(t),{weekWrapper:e,weekNumbers:t}}(),n=t.weekWrapper,a=t.weekNumbers;D.innerContainer.appendChild(n),D.weekNumbers=a,D.weekWrapper=n}D.rContainer=se("div","flatpickr-rContainer"),D.rContainer.appendChild(E()),D.daysContainer||(D.daysContainer=se("div","flatpickr-days"),D.daysContainer.tabIndex=-1),C(),D.rContainer.appendChild(D.daysContainer),D.innerContainer.appendChild(D.rContainer),e.appendChild(D.innerContainer)}D.config.enableTime&&e.appendChild(function(){D.calendarContainer.classList.add("hasTime"),D.config.noCalendar&&D.calendarContainer.classList.add("noCalendar"),D.timeContainer=se("div","flatpickr-time"),D.timeContainer.tabIndex=-1;var e=se("span","flatpickr-time-separator",":"),t=fe("flatpickr-hour");D.hourElement=t.childNodes[0];var n=fe("flatpickr-minute");if(D.minuteElement=n.childNodes[0],D.hourElement.tabIndex=D.minuteElement.tabIndex=-1,D.hourElement.value=Z(D.latestSelectedDateObj?D.latestSelectedDateObj.getHours():D.config.time_24hr?D.config.defaultHour:function(e){switch(e%24){case 0:case 12:return 12;default:return e%12}}(D.config.defaultHour)),D.minuteElement.value=Z(D.latestSelectedDateObj?D.latestSelectedDateObj.getMinutes():D.config.defaultMinute),D.hourElement.setAttribute("data-step",D.config.hourIncrement.toString()),D.minuteElement.setAttribute("data-step",D.config.minuteIncrement.toString()),D.hourElement.setAttribute("data-min",D.config.time_24hr?"0":"1"),D.hourElement.setAttribute("data-max",D.config.time_24hr?"23":"12"),D.minuteElement.setAttribute("data-min","0"),D.minuteElement.setAttribute("data-max","59"),D.timeContainer.appendChild(t),D.timeContainer.appendChild(e),D.timeContainer.appendChild(n),D.config.time_24hr&&D.timeContainer.classList.add("time24hr"),D.config.enableSeconds){D.timeContainer.classList.add("hasSeconds");var a=fe("flatpickr-second");D.secondElement=a.childNodes[0],D.secondElement.value=Z(D.latestSelectedDateObj?D.latestSelectedDateObj.getSeconds():D.config.defaultSeconds),D.secondElement.setAttribute("data-step",D.minuteElement.getAttribute("data-step")),D.secondElement.setAttribute("data-min",D.minuteElement.getAttribute("data-min")),D.secondElement.setAttribute("data-max",D.minuteElement.getAttribute("data-max")),D.timeContainer.appendChild(se("span","flatpickr-time-separator",":")),D.timeContainer.appendChild(a)}return D.config.time_24hr||(D.amPM=se("span","flatpickr-am-pm",D.l10n.amPM[Q(11<(D.latestSelectedDateObj?D.hourElement.value:D.config.defaultHour))]),D.amPM.title=D.l10n.toggleTitle,D.amPM.tabIndex=-1,D.timeContainer.appendChild(D.amPM)),D.timeContainer}()),de(D.calendarContainer,"rangeMode","range"===D.config.mode),de(D.calendarContainer,"animate",!0===D.config.animate),de(D.calendarContainer,"multiMonth",1<D.config.showMonths),D.calendarContainer.appendChild(e);var i=void 0!==D.config.appendTo&&void 0!==D.config.appendTo.nodeType;if((D.config.inline||D.config.static)&&(D.calendarContainer.classList.add(D.config.inline?"inline":"static"),D.config.inline&&(!i&&D.element.parentNode?D.element.parentNode.insertBefore(D.calendarContainer,D._input.nextSibling):void 0!==D.config.appendTo&&D.config.appendTo.appendChild(D.calendarContainer)),D.config.static)){var o=se("div","flatpickr-wrapper");D.element.parentNode&&D.element.parentNode.insertBefore(o,D.element),o.appendChild(D.element),D.altInput&&o.appendChild(D.altInput),o.appendChild(D.calendarContainer)}D.config.static||D.config.inline||(void 0!==D.config.appendTo?D.config.appendTo:window.document.body).appendChild(D.calendarContainer)}(),function(){if(D.config.wrap&&["open","close","toggle","clear"].forEach(function(t){Array.prototype.forEach.call(D.element.querySelectorAll("[data-"+t+"]"),function(e){return o(e,"click",D[t])})}),D.isMobile)return function(){var e=D.config.enableTime?D.config.noCalendar?"time":"datetime-local":"date";D.mobileInput=se("input",D.input.className+" flatpickr-mobile"),D.mobileInput.step=D.input.getAttribute("step")||"any",D.mobileInput.tabIndex=1,D.mobileInput.type=e,D.mobileInput.disabled=D.input.disabled,D.mobileInput.required=D.input.required,D.mobileInput.placeholder=D.input.placeholder,D.mobileFormatStr="datetime-local"===e?"Y-m-d\\TH:i:S":"date"===e?"Y-m-d":"H:i:S",0<D.selectedDates.length&&(D.mobileInput.defaultValue=D.mobileInput.value=D.formatDate(D.selectedDates[0],D.mobileFormatStr)),D.config.minDate&&(D.mobileInput.min=D.formatDate(D.config.minDate,"Y-m-d")),D.config.maxDate&&(D.mobileInput.max=D.formatDate(D.config.maxDate,"Y-m-d")),D.input.type="hidden",void 0!==D.altInput&&(D.altInput.type="hidden");try{D.input.parentNode&&D.input.parentNode.insertBefore(D.mobileInput,D.input.nextSibling)}catch(e){}o(D.mobileInput,"change",function(e){D.setDate(e.target.value,!1,D.mobileFormatStr),U("onChange"),U("onClose")})}();var e=X(N,50);D._debouncedChange=X(p,me),D.daysContainer&&!/iPhone|iPad|iPod/i.test(navigator.userAgent)&&o(D.daysContainer,"mouseover",function(e){"range"===D.config.mode&&A(e.target)}),o(window.document.body,"keydown",F),D.config.static||o(D._input,"keydown",F),D.config.inline||D.config.static||o(window,"resize",e),void 0!==window.ontouchstart&&o(window.document,"touchstart",O),o(window.document,"mousedown",a(O)),o(window.document,"focus",O,{capture:!0}),!0===D.config.clickOpens&&(o(D._input,"focus",D.open),o(D._input,"mousedown",a(D.open))),void 0!==D.daysContainer&&(o(D.monthNav,"mousedown",a(V)),o(D.monthNav,["keyup","increment"],n),o(D.daysContainer,"mousedown",a(R))),void 0!==D.timeContainer&&void 0!==D.minuteElement&&void 0!==D.hourElement&&(o(D.timeContainer,["input","increment"],d),o(D.timeContainer,"mousedown",a(r)),o(D.timeContainer,["input","increment"],D._debouncedChange,{passive:!0}),o([D.hourElement,D.minuteElement],["focus","click"],function(e){return e.target.select()}),void 0!==D.secondElement&&o(D.secondElement,"focus",function(){return D.secondElement&&D.secondElement.select()}),void 0!==D.amPM&&o(D.amPM,"mousedown",a(function(e){d(e),p()})))}(),(D.selectedDates.length||D.config.noCalendar)&&(D.config.enableTime&&g(D.config.noCalendar?D.latestSelectedDateObj||D.config.minDate:void 0),G(!1)),t(),D.showTimeInput=0<D.selectedDates.length||D.config.noCalendar;var e=/^((?!chrome|android).)*safari/i.test(navigator.userAgent);!D.isMobile&&e&&H(),U("onReady")}(),D}function n(e,t){for(var n=Array.prototype.slice.call(e),a=[],i=0;i<n.length;i++){var o=n[i];try{if(null!==o.getAttribute("data-fp-omit"))continue;void 0!==o._flatpickr&&(o._flatpickr.destroy(),o._flatpickr=void 0),o._flatpickr=r(o,t||{}),a.push(o._flatpickr)}catch(e){console.error(e)}}return 1===a.length?a[0]:a}"undefined"!=typeof HTMLElement&&(HTMLCollection.prototype.flatpickr=NodeList.prototype.flatpickr=function(e){return n(this,e)},HTMLElement.prototype.flatpickr=function(e){return n([this],e)});var ge=function(e,t){return e instanceof NodeList?n(e,t):n("string"==typeof e?window.document.querySelectorAll(e):[e],t)};return ge.defaultConfig=b,ge.l10ns={en:Object.assign({},ae),default:Object.assign({},ae)},ge.localize=function(e){ge.l10ns.default=Object.assign({},ge.l10ns.default,e)},ge.setDefaults=function(e){ge.defaultConfig=Object.assign({},ge.defaultConfig,e)},ge.parseDate=oe({}),ge.formatDate=ie({}),ge.compareDates=re,"undefined"!=typeof jQuery&&(jQuery.fn.flatpickr=function(e){return n(this,e)}),Date.prototype.fp_incr=function(e){return new Date(this.getFullYear(),this.getMonth(),this.getDate()+("string"==typeof e?parseInt(e,10):e))},ge});
diff --git a/frontend/vendor/fontawesome.css b/frontend/vendor/fontawesome.css
new file mode 100644
index 000000000..68b26ef9b
--- /dev/null
+++ b/frontend/vendor/fontawesome.css
@@ -0,0 +1,5 @@
+/*!
+ * Font Awesome Free 5.1.0 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
+ */
+.fa,.fab,.fal,.far,.fas{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-style:normal;font-variant:normal;text-rendering:auto;line-height:1}.fa-lg{font-size:1.33333em;line-height:.75em;vertical-align:-.0667em}.fa-xs{font-size:.75em}.fa-sm{font-size:.875em}.fa-1x{font-size:1em}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-6x{font-size:6em}.fa-7x{font-size:7em}.fa-8x{font-size:8em}.fa-9x{font-size:9em}.fa-10x{font-size:10em}.fa-fw{text-align:center;width:1.25em}.fa-ul{list-style-type:none;margin-left:2.5em;padding-left:0}.fa-ul>li{position:relative}.fa-li{left:-2em;position:absolute;text-align:center;width:2em;line-height:inherit}.fa-border{border:.08em solid #eee;border-radius:.1em;padding:.2em .25em .15em}.fa-pull-left{float:left}.fa-pull-right{float:right}.fa.fa-pull-left,.fab.fa-pull-left,.fal.fa-pull-left,.far.fa-pull-left,.fas.fa-pull-left{margin-right:.3em}.fa.fa-pull-right,.fab.fa-pull-right,.fal.fa-pull-right,.far.fa-pull-right,.fas.fa-pull-right{margin-left:.3em}.fa-spin{animation:a 2s infinite linear}.fa-pulse{animation:a 1s infinite steps(8)}@keyframes a{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.fa-rotate-90{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";transform:rotate(90deg)}.fa-rotate-180{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";transform:rotate(180deg)}.fa-rotate-270{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";transform:rotate(270deg)}.fa-flip-horizontal{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";transform:scaleX(-1)}.fa-flip-vertical{transform:scaleY(-1)}.fa-flip-horizontal.fa-flip-vertical,.fa-flip-vertical{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)"}.fa-flip-horizontal.fa-flip-vertical{transform:scale(-1)}:root .fa-flip-horizontal,:root .fa-flip-vertical,:root .fa-rotate-90,:root .fa-rotate-180,:root .fa-rotate-270{-webkit-filter:none;filter:none}.fa-stack{display:inline-block;height:2em;line-height:2em;position:relative;vertical-align:middle;width:2em}.fa-stack-1x,.fa-stack-2x{left:0;position:absolute;text-align:center;width:100%}.fa-stack-1x{line-height:inherit}.fa-stack-2x{font-size:2em}.fa-inverse{color:#fff}.fa-500px:before{content:"\f26e"}.fa-accessible-icon:before{content:"\f368"}.fa-accusoft:before{content:"\f369"}.fa-address-book:before{content:"\f2b9"}.fa-address-card:before{content:"\f2bb"}.fa-adjust:before{content:"\f042"}.fa-adn:before{content:"\f170"}.fa-adversal:before{content:"\f36a"}.fa-affiliatetheme:before{content:"\f36b"}.fa-algolia:before{content:"\f36c"}.fa-align-center:before{content:"\f037"}.fa-align-justify:before{content:"\f039"}.fa-align-left:before{content:"\f036"}.fa-align-right:before{content:"\f038"}.fa-allergies:before{content:"\f461"}.fa-amazon:before{content:"\f270"}.fa-amazon-pay:before{content:"\f42c"}.fa-ambulance:before{content:"\f0f9"}.fa-american-sign-language-interpreting:before{content:"\f2a3"}.fa-amilia:before{content:"\f36d"}.fa-anchor:before{content:"\f13d"}.fa-android:before{content:"\f17b"}.fa-angellist:before{content:"\f209"}.fa-angle-double-down:before{content:"\f103"}.fa-angle-double-left:before{content:"\f100"}.fa-angle-double-right:before{content:"\f101"}.fa-angle-double-up:before{content:"\f102"}.fa-angle-down:before{content:"\f107"}.fa-angle-left:before{content:"\f104"}.fa-angle-right:before{content:"\f105"}.fa-angle-up:before{content:"\f106"}.fa-angry:before{content:"\f556"}.fa-angrycreative:before{content:"\f36e"}.fa-angular:before{content:"\f420"}.fa-app-store:before{content:"\f36f"}.fa-app-store-ios:before{content:"\f370"}.fa-apper:before{content:"\f371"}.fa-apple:before{content:"\f179"}.fa-apple-pay:before{content:"\f415"}.fa-archive:before{content:"\f187"}.fa-archway:before{content:"\f557"}.fa-arrow-alt-circle-down:before{content:"\f358"}.fa-arrow-alt-circle-left:before{content:"\f359"}.fa-arrow-alt-circle-right:before{content:"\f35a"}.fa-arrow-alt-circle-up:before{content:"\f35b"}.fa-arrow-circle-down:before{content:"\f0ab"}.fa-arrow-circle-left:before{content:"\f0a8"}.fa-arrow-circle-right:before{content:"\f0a9"}.fa-arrow-circle-up:before{content:"\f0aa"}.fa-arrow-down:before{content:"\f063"}.fa-arrow-left:before{content:"\f060"}.fa-arrow-right:before{content:"\f061"}.fa-arrow-up:before{content:"\f062"}.fa-arrows-alt:before{content:"\f0b2"}.fa-arrows-alt-h:before{content:"\f337"}.fa-arrows-alt-v:before{content:"\f338"}.fa-assistive-listening-systems:before{content:"\f2a2"}.fa-asterisk:before{content:"\f069"}.fa-asymmetrik:before{content:"\f372"}.fa-at:before{content:"\f1fa"}.fa-atlas:before{content:"\f558"}.fa-audible:before{content:"\f373"}.fa-audio-description:before{content:"\f29e"}.fa-autoprefixer:before{content:"\f41c"}.fa-avianex:before{content:"\f374"}.fa-aviato:before{content:"\f421"}.fa-award:before{content:"\f559"}.fa-aws:before{content:"\f375"}.fa-backspace:before{content:"\f55a"}.fa-backward:before{content:"\f04a"}.fa-balance-scale:before{content:"\f24e"}.fa-ban:before{content:"\f05e"}.fa-band-aid:before{content:"\f462"}.fa-bandcamp:before{content:"\f2d5"}.fa-barcode:before{content:"\f02a"}.fa-bars:before{content:"\f0c9"}.fa-baseball-ball:before{content:"\f433"}.fa-basketball-ball:before{content:"\f434"}.fa-bath:before{content:"\f2cd"}.fa-battery-empty:before{content:"\f244"}.fa-battery-full:before{content:"\f240"}.fa-battery-half:before{content:"\f242"}.fa-battery-quarter:before{content:"\f243"}.fa-battery-three-quarters:before{content:"\f241"}.fa-bed:before{content:"\f236"}.fa-beer:before{content:"\f0fc"}.fa-behance:before{content:"\f1b4"}.fa-behance-square:before{content:"\f1b5"}.fa-bell:before{content:"\f0f3"}.fa-bell-slash:before{content:"\f1f6"}.fa-bezier-curve:before{content:"\f55b"}.fa-bicycle:before{content:"\f206"}.fa-bimobject:before{content:"\f378"}.fa-binoculars:before{content:"\f1e5"}.fa-birthday-cake:before{content:"\f1fd"}.fa-bitbucket:before{content:"\f171"}.fa-bitcoin:before{content:"\f379"}.fa-bity:before{content:"\f37a"}.fa-black-tie:before{content:"\f27e"}.fa-blackberry:before{content:"\f37b"}.fa-blender:before{content:"\f517"}.fa-blind:before{content:"\f29d"}.fa-blogger:before{content:"\f37c"}.fa-blogger-b:before{content:"\f37d"}.fa-bluetooth:before{content:"\f293"}.fa-bluetooth-b:before{content:"\f294"}.fa-bold:before{content:"\f032"}.fa-bolt:before{content:"\f0e7"}.fa-bomb:before{content:"\f1e2"}.fa-bong:before{content:"\f55c"}.fa-book:before{content:"\f02d"}.fa-book-open:before{content:"\f518"}.fa-bookmark:before{content:"\f02e"}.fa-bowling-ball:before{content:"\f436"}.fa-box:before{content:"\f466"}.fa-box-open:before{content:"\f49e"}.fa-boxes:before{content:"\f468"}.fa-braille:before{content:"\f2a1"}.fa-briefcase:before{content:"\f0b1"}.fa-briefcase-medical:before{content:"\f469"}.fa-broadcast-tower:before{content:"\f519"}.fa-broom:before{content:"\f51a"}.fa-brush:before{content:"\f55d"}.fa-btc:before{content:"\f15a"}.fa-bug:before{content:"\f188"}.fa-building:before{content:"\f1ad"}.fa-bullhorn:before{content:"\f0a1"}.fa-bullseye:before{content:"\f140"}.fa-burn:before{content:"\f46a"}.fa-buromobelexperte:before{content:"\f37f"}.fa-bus:before{content:"\f207"}.fa-bus-alt:before{content:"\f55e"}.fa-buysellads:before{content:"\f20d"}.fa-calculator:before{content:"\f1ec"}.fa-calendar:before{content:"\f133"}.fa-calendar-alt:before{content:"\f073"}.fa-calendar-check:before{content:"\f274"}.fa-calendar-minus:before{content:"\f272"}.fa-calendar-plus:before{content:"\f271"}.fa-calendar-times:before{content:"\f273"}.fa-camera:before{content:"\f030"}.fa-camera-retro:before{content:"\f083"}.fa-cannabis:before{content:"\f55f"}.fa-capsules:before{content:"\f46b"}.fa-car:before{content:"\f1b9"}.fa-caret-down:before{content:"\f0d7"}.fa-caret-left:before{content:"\f0d9"}.fa-caret-right:before{content:"\f0da"}.fa-caret-square-down:before{content:"\f150"}.fa-caret-square-left:before{content:"\f191"}.fa-caret-square-right:before{content:"\f152"}.fa-caret-square-up:before{content:"\f151"}.fa-caret-up:before{content:"\f0d8"}.fa-cart-arrow-down:before{content:"\f218"}.fa-cart-plus:before{content:"\f217"}.fa-cc-amazon-pay:before{content:"\f42d"}.fa-cc-amex:before{content:"\f1f3"}.fa-cc-apple-pay:before{content:"\f416"}.fa-cc-diners-club:before{content:"\f24c"}.fa-cc-discover:before{content:"\f1f2"}.fa-cc-jcb:before{content:"\f24b"}.fa-cc-mastercard:before{content:"\f1f1"}.fa-cc-paypal:before{content:"\f1f4"}.fa-cc-stripe:before{content:"\f1f5"}.fa-cc-visa:before{content:"\f1f0"}.fa-centercode:before{content:"\f380"}.fa-certificate:before{content:"\f0a3"}.fa-chalkboard:before{content:"\f51b"}.fa-chalkboard-teacher:before{content:"\f51c"}.fa-chart-area:before{content:"\f1fe"}.fa-chart-bar:before{content:"\f080"}.fa-chart-line:before{content:"\f201"}.fa-chart-pie:before{content:"\f200"}.fa-check:before{content:"\f00c"}.fa-check-circle:before{content:"\f058"}.fa-check-double:before{content:"\f560"}.fa-check-square:before{content:"\f14a"}.fa-chess:before{content:"\f439"}.fa-chess-bishop:before{content:"\f43a"}.fa-chess-board:before{content:"\f43c"}.fa-chess-king:before{content:"\f43f"}.fa-chess-knight:before{content:"\f441"}.fa-chess-pawn:before{content:"\f443"}.fa-chess-queen:before{content:"\f445"}.fa-chess-rook:before{content:"\f447"}.fa-chevron-circle-down:before{content:"\f13a"}.fa-chevron-circle-left:before{content:"\f137"}.fa-chevron-circle-right:before{content:"\f138"}.fa-chevron-circle-up:before{content:"\f139"}.fa-chevron-down:before{content:"\f078"}.fa-chevron-left:before{content:"\f053"}.fa-chevron-right:before{content:"\f054"}.fa-chevron-up:before{content:"\f077"}.fa-child:before{content:"\f1ae"}.fa-chrome:before{content:"\f268"}.fa-church:before{content:"\f51d"}.fa-circle:before{content:"\f111"}.fa-circle-notch:before{content:"\f1ce"}.fa-clipboard:before{content:"\f328"}.fa-clipboard-check:before{content:"\f46c"}.fa-clipboard-list:before{content:"\f46d"}.fa-clock:before{content:"\f017"}.fa-clone:before{content:"\f24d"}.fa-closed-captioning:before{content:"\f20a"}.fa-cloud:before{content:"\f0c2"}.fa-cloud-download-alt:before{content:"\f381"}.fa-cloud-upload-alt:before{content:"\f382"}.fa-cloudscale:before{content:"\f383"}.fa-cloudsmith:before{content:"\f384"}.fa-cloudversify:before{content:"\f385"}.fa-cocktail:before{content:"\f561"}.fa-code:before{content:"\f121"}.fa-code-branch:before{content:"\f126"}.fa-codepen:before{content:"\f1cb"}.fa-codiepie:before{content:"\f284"}.fa-coffee:before{content:"\f0f4"}.fa-cog:before{content:"\f013"}.fa-cogs:before{content:"\f085"}.fa-coins:before{content:"\f51e"}.fa-columns:before{content:"\f0db"}.fa-comment:before{content:"\f075"}.fa-comment-alt:before{content:"\f27a"}.fa-comment-dots:before{content:"\f4ad"}.fa-comment-slash:before{content:"\f4b3"}.fa-comments:before{content:"\f086"}.fa-compact-disc:before{content:"\f51f"}.fa-compass:before{content:"\f14e"}.fa-compress:before{content:"\f066"}.fa-concierge-bell:before{content:"\f562"}.fa-connectdevelop:before{content:"\f20e"}.fa-contao:before{content:"\f26d"}.fa-cookie:before{content:"\f563"}.fa-cookie-bite:before{content:"\f564"}.fa-copy:before{content:"\f0c5"}.fa-copyright:before{content:"\f1f9"}.fa-couch:before{content:"\f4b8"}.fa-cpanel:before{content:"\f388"}.fa-creative-commons:before{content:"\f25e"}.fa-creative-commons-by:before{content:"\f4e7"}.fa-creative-commons-nc:before{content:"\f4e8"}.fa-creative-commons-nc-eu:before{content:"\f4e9"}.fa-creative-commons-nc-jp:before{content:"\f4ea"}.fa-creative-commons-nd:before{content:"\f4eb"}.fa-creative-commons-pd:before{content:"\f4ec"}.fa-creative-commons-pd-alt:before{content:"\f4ed"}.fa-creative-commons-remix:before{content:"\f4ee"}.fa-creative-commons-sa:before{content:"\f4ef"}.fa-creative-commons-sampling:before{content:"\f4f0"}.fa-creative-commons-sampling-plus:before{content:"\f4f1"}.fa-creative-commons-share:before{content:"\f4f2"}.fa-credit-card:before{content:"\f09d"}.fa-crop:before{content:"\f125"}.fa-crop-alt:before{content:"\f565"}.fa-crosshairs:before{content:"\f05b"}.fa-crow:before{content:"\f520"}.fa-crown:before{content:"\f521"}.fa-css3:before{content:"\f13c"}.fa-css3-alt:before{content:"\f38b"}.fa-cube:before{content:"\f1b2"}.fa-cubes:before{content:"\f1b3"}.fa-cut:before{content:"\f0c4"}.fa-cuttlefish:before{content:"\f38c"}.fa-d-and-d:before{content:"\f38d"}.fa-dashcube:before{content:"\f210"}.fa-database:before{content:"\f1c0"}.fa-deaf:before{content:"\f2a4"}.fa-delicious:before{content:"\f1a5"}.fa-deploydog:before{content:"\f38e"}.fa-deskpro:before{content:"\f38f"}.fa-desktop:before{content:"\f108"}.fa-deviantart:before{content:"\f1bd"}.fa-diagnoses:before{content:"\f470"}.fa-dice:before{content:"\f522"}.fa-dice-five:before{content:"\f523"}.fa-dice-four:before{content:"\f524"}.fa-dice-one:before{content:"\f525"}.fa-dice-six:before{content:"\f526"}.fa-dice-three:before{content:"\f527"}.fa-dice-two:before{content:"\f528"}.fa-digg:before{content:"\f1a6"}.fa-digital-ocean:before{content:"\f391"}.fa-digital-tachograph:before{content:"\f566"}.fa-discord:before{content:"\f392"}.fa-discourse:before{content:"\f393"}.fa-divide:before{content:"\f529"}.fa-dizzy:before{content:"\f567"}.fa-dna:before{content:"\f471"}.fa-dochub:before{content:"\f394"}.fa-docker:before{content:"\f395"}.fa-dollar-sign:before{content:"\f155"}.fa-dolly:before{content:"\f472"}.fa-dolly-flatbed:before{content:"\f474"}.fa-donate:before{content:"\f4b9"}.fa-door-closed:before{content:"\f52a"}.fa-door-open:before{content:"\f52b"}.fa-dot-circle:before{content:"\f192"}.fa-dove:before{content:"\f4ba"}.fa-download:before{content:"\f019"}.fa-draft2digital:before{content:"\f396"}.fa-drafting-compass:before{content:"\f568"}.fa-dribbble:before{content:"\f17d"}.fa-dribbble-square:before{content:"\f397"}.fa-dropbox:before{content:"\f16b"}.fa-drum:before{content:"\f569"}.fa-drum-steelpan:before{content:"\f56a"}.fa-drupal:before{content:"\f1a9"}.fa-dumbbell:before{content:"\f44b"}.fa-dyalog:before{content:"\f399"}.fa-earlybirds:before{content:"\f39a"}.fa-ebay:before{content:"\f4f4"}.fa-edge:before{content:"\f282"}.fa-edit:before{content:"\f044"}.fa-eject:before{content:"\f052"}.fa-elementor:before{content:"\f430"}.fa-ellipsis-h:before{content:"\f141"}.fa-ellipsis-v:before{content:"\f142"}.fa-ember:before{content:"\f423"}.fa-empire:before{content:"\f1d1"}.fa-envelope:before{content:"\f0e0"}.fa-envelope-open:before{content:"\f2b6"}.fa-envelope-square:before{content:"\f199"}.fa-envira:before{content:"\f299"}.fa-equals:before{content:"\f52c"}.fa-eraser:before{content:"\f12d"}.fa-erlang:before{content:"\f39d"}.fa-ethereum:before{content:"\f42e"}.fa-etsy:before{content:"\f2d7"}.fa-euro-sign:before{content:"\f153"}.fa-exchange-alt:before{content:"\f362"}.fa-exclamation:before{content:"\f12a"}.fa-exclamation-circle:before{content:"\f06a"}.fa-exclamation-triangle:before{content:"\f071"}.fa-expand:before{content:"\f065"}.fa-expand-arrows-alt:before{content:"\f31e"}.fa-expeditedssl:before{content:"\f23e"}.fa-external-link-alt:before{content:"\f35d"}.fa-external-link-square-alt:before{content:"\f360"}.fa-eye:before{content:"\f06e"}.fa-eye-dropper:before{content:"\f1fb"}.fa-eye-slash:before{content:"\f070"}.fa-facebook:before{content:"\f09a"}.fa-facebook-f:before{content:"\f39e"}.fa-facebook-messenger:before{content:"\f39f"}.fa-facebook-square:before{content:"\f082"}.fa-fast-backward:before{content:"\f049"}.fa-fast-forward:before{content:"\f050"}.fa-fax:before{content:"\f1ac"}.fa-feather:before{content:"\f52d"}.fa-feather-alt:before{content:"\f56b"}.fa-female:before{content:"\f182"}.fa-fighter-jet:before{content:"\f0fb"}.fa-file:before{content:"\f15b"}.fa-file-alt:before{content:"\f15c"}.fa-file-archive:before{content:"\f1c6"}.fa-file-audio:before{content:"\f1c7"}.fa-file-code:before{content:"\f1c9"}.fa-file-contract:before{content:"\f56c"}.fa-file-download:before{content:"\f56d"}.fa-file-excel:before{content:"\f1c3"}.fa-file-export:before{content:"\f56e"}.fa-file-image:before{content:"\f1c5"}.fa-file-import:before{content:"\f56f"}.fa-file-invoice:before{content:"\f570"}.fa-file-invoice-dollar:before{content:"\f571"}.fa-file-medical:before{content:"\f477"}.fa-file-medical-alt:before{content:"\f478"}.fa-file-pdf:before{content:"\f1c1"}.fa-file-powerpoint:before{content:"\f1c4"}.fa-file-prescription:before{content:"\f572"}.fa-file-signature:before{content:"\f573"}.fa-file-upload:before{content:"\f574"}.fa-file-video:before{content:"\f1c8"}.fa-file-word:before{content:"\f1c2"}.fa-fill:before{content:"\f575"}.fa-fill-drip:before{content:"\f576"}.fa-film:before{content:"\f008"}.fa-filter:before{content:"\f0b0"}.fa-fingerprint:before{content:"\f577"}.fa-fire:before{content:"\f06d"}.fa-fire-extinguisher:before{content:"\f134"}.fa-firefox:before{content:"\f269"}.fa-first-aid:before{content:"\f479"}.fa-first-order:before{content:"\f2b0"}.fa-first-order-alt:before{content:"\f50a"}.fa-firstdraft:before{content:"\f3a1"}.fa-fish:before{content:"\f578"}.fa-flag:before{content:"\f024"}.fa-flag-checkered:before{content:"\f11e"}.fa-flask:before{content:"\f0c3"}.fa-flickr:before{content:"\f16e"}.fa-flipboard:before{content:"\f44d"}.fa-flushed:before{content:"\f579"}.fa-fly:before{content:"\f417"}.fa-folder:before{content:"\f07b"}.fa-folder-open:before{content:"\f07c"}.fa-font:before{content:"\f031"}.fa-font-awesome:before{content:"\f2b4"}.fa-font-awesome-alt:before{content:"\f35c"}.fa-font-awesome-flag:before{content:"\f425"}.fa-font-awesome-logo-full:before{content:"\f4e6"}.fa-fonticons:before{content:"\f280"}.fa-fonticons-fi:before{content:"\f3a2"}.fa-football-ball:before{content:"\f44e"}.fa-fort-awesome:before{content:"\f286"}.fa-fort-awesome-alt:before{content:"\f3a3"}.fa-forumbee:before{content:"\f211"}.fa-forward:before{content:"\f04e"}.fa-foursquare:before{content:"\f180"}.fa-free-code-camp:before{content:"\f2c5"}.fa-freebsd:before{content:"\f3a4"}.fa-frog:before{content:"\f52e"}.fa-frown:before{content:"\f119"}.fa-frown-open:before{content:"\f57a"}.fa-fulcrum:before{content:"\f50b"}.fa-futbol:before{content:"\f1e3"}.fa-galactic-republic:before{content:"\f50c"}.fa-galactic-senate:before{content:"\f50d"}.fa-gamepad:before{content:"\f11b"}.fa-gas-pump:before{content:"\f52f"}.fa-gavel:before{content:"\f0e3"}.fa-gem:before{content:"\f3a5"}.fa-genderless:before{content:"\f22d"}.fa-get-pocket:before{content:"\f265"}.fa-gg:before{content:"\f260"}.fa-gg-circle:before{content:"\f261"}.fa-gift:before{content:"\f06b"}.fa-git:before{content:"\f1d3"}.fa-git-square:before{content:"\f1d2"}.fa-github:before{content:"\f09b"}.fa-github-alt:before{content:"\f113"}.fa-github-square:before{content:"\f092"}.fa-gitkraken:before{content:"\f3a6"}.fa-gitlab:before{content:"\f296"}.fa-gitter:before{content:"\f426"}.fa-glass-martini:before{content:"\f000"}.fa-glass-martini-alt:before{content:"\f57b"}.fa-glasses:before{content:"\f530"}.fa-glide:before{content:"\f2a5"}.fa-glide-g:before{content:"\f2a6"}.fa-globe:before{content:"\f0ac"}.fa-globe-africa:before{content:"\f57c"}.fa-globe-americas:before{content:"\f57d"}.fa-globe-asia:before{content:"\f57e"}.fa-gofore:before{content:"\f3a7"}.fa-golf-ball:before{content:"\f450"}.fa-goodreads:before{content:"\f3a8"}.fa-goodreads-g:before{content:"\f3a9"}.fa-google:before{content:"\f1a0"}.fa-google-drive:before{content:"\f3aa"}.fa-google-play:before{content:"\f3ab"}.fa-google-plus:before{content:"\f2b3"}.fa-google-plus-g:before{content:"\f0d5"}.fa-google-plus-square:before{content:"\f0d4"}.fa-google-wallet:before{content:"\f1ee"}.fa-graduation-cap:before{content:"\f19d"}.fa-gratipay:before{content:"\f184"}.fa-grav:before{content:"\f2d6"}.fa-greater-than:before{content:"\f531"}.fa-greater-than-equal:before{content:"\f532"}.fa-grimace:before{content:"\f57f"}.fa-grin:before{content:"\f580"}.fa-grin-alt:before{content:"\f581"}.fa-grin-beam:before{content:"\f582"}.fa-grin-beam-sweat:before{content:"\f583"}.fa-grin-hearts:before{content:"\f584"}.fa-grin-squint:before{content:"\f585"}.fa-grin-squint-tears:before{content:"\f586"}.fa-grin-stars:before{content:"\f587"}.fa-grin-tears:before{content:"\f588"}.fa-grin-tongue:before{content:"\f589"}.fa-grin-tongue-squint:before{content:"\f58a"}.fa-grin-tongue-wink:before{content:"\f58b"}.fa-grin-wink:before{content:"\f58c"}.fa-grip-horizontal:before{content:"\f58d"}.fa-grip-vertical:before{content:"\f58e"}.fa-gripfire:before{content:"\f3ac"}.fa-grunt:before{content:"\f3ad"}.fa-gulp:before{content:"\f3ae"}.fa-h-square:before{content:"\f0fd"}.fa-hacker-news:before{content:"\f1d4"}.fa-hacker-news-square:before{content:"\f3af"}.fa-hand-holding:before{content:"\f4bd"}.fa-hand-holding-heart:before{content:"\f4be"}.fa-hand-holding-usd:before{content:"\f4c0"}.fa-hand-lizard:before{content:"\f258"}.fa-hand-paper:before{content:"\f256"}.fa-hand-peace:before{content:"\f25b"}.fa-hand-point-down:before{content:"\f0a7"}.fa-hand-point-left:before{content:"\f0a5"}.fa-hand-point-right:before{content:"\f0a4"}.fa-hand-point-up:before{content:"\f0a6"}.fa-hand-pointer:before{content:"\f25a"}.fa-hand-rock:before{content:"\f255"}.fa-hand-scissors:before{content:"\f257"}.fa-hand-spock:before{content:"\f259"}.fa-hands:before{content:"\f4c2"}.fa-hands-helping:before{content:"\f4c4"}.fa-handshake:before{content:"\f2b5"}.fa-hashtag:before{content:"\f292"}.fa-hdd:before{content:"\f0a0"}.fa-heading:before{content:"\f1dc"}.fa-headphones:before{content:"\f025"}.fa-headphones-alt:before{content:"\f58f"}.fa-headset:before{content:"\f590"}.fa-heart:before{content:"\f004"}.fa-heartbeat:before{content:"\f21e"}.fa-helicopter:before{content:"\f533"}.fa-highlighter:before{content:"\f591"}.fa-hips:before{content:"\f452"}.fa-hire-a-helper:before{content:"\f3b0"}.fa-history:before{content:"\f1da"}.fa-hockey-puck:before{content:"\f453"}.fa-home:before{content:"\f015"}.fa-hooli:before{content:"\f427"}.fa-hornbill:before{content:"\f592"}.fa-hospital:before{content:"\f0f8"}.fa-hospital-alt:before{content:"\f47d"}.fa-hospital-symbol:before{content:"\f47e"}.fa-hot-tub:before{content:"\f593"}.fa-hotel:before{content:"\f594"}.fa-hotjar:before{content:"\f3b1"}.fa-hourglass:before{content:"\f254"}.fa-hourglass-end:before{content:"\f253"}.fa-hourglass-half:before{content:"\f252"}.fa-hourglass-start:before{content:"\f251"}.fa-houzz:before{content:"\f27c"}.fa-html5:before{content:"\f13b"}.fa-hubspot:before{content:"\f3b2"}.fa-i-cursor:before{content:"\f246"}.fa-id-badge:before{content:"\f2c1"}.fa-id-card:before{content:"\f2c2"}.fa-id-card-alt:before{content:"\f47f"}.fa-image:before{content:"\f03e"}.fa-images:before{content:"\f302"}.fa-imdb:before{content:"\f2d8"}.fa-inbox:before{content:"\f01c"}.fa-indent:before{content:"\f03c"}.fa-industry:before{content:"\f275"}.fa-infinity:before{content:"\f534"}.fa-info:before{content:"\f129"}.fa-info-circle:before{content:"\f05a"}.fa-instagram:before{content:"\f16d"}.fa-internet-explorer:before{content:"\f26b"}.fa-ioxhost:before{content:"\f208"}.fa-italic:before{content:"\f033"}.fa-itunes:before{content:"\f3b4"}.fa-itunes-note:before{content:"\f3b5"}.fa-java:before{content:"\f4e4"}.fa-jedi-order:before{content:"\f50e"}.fa-jenkins:before{content:"\f3b6"}.fa-joget:before{content:"\f3b7"}.fa-joint:before{content:"\f595"}.fa-joomla:before{content:"\f1aa"}.fa-js:before{content:"\f3b8"}.fa-js-square:before{content:"\f3b9"}.fa-jsfiddle:before{content:"\f1cc"}.fa-key:before{content:"\f084"}.fa-keybase:before{content:"\f4f5"}.fa-keyboard:before{content:"\f11c"}.fa-keycdn:before{content:"\f3ba"}.fa-kickstarter:before{content:"\f3bb"}.fa-kickstarter-k:before{content:"\f3bc"}.fa-kiss:before{content:"\f596"}.fa-kiss-beam:before{content:"\f597"}.fa-kiss-wink-heart:before{content:"\f598"}.fa-kiwi-bird:before{content:"\f535"}.fa-korvue:before{content:"\f42f"}.fa-language:before{content:"\f1ab"}.fa-laptop:before{content:"\f109"}.fa-laravel:before{content:"\f3bd"}.fa-lastfm:before{content:"\f202"}.fa-lastfm-square:before{content:"\f203"}.fa-laugh:before{content:"\f599"}.fa-laugh-beam:before{content:"\f59a"}.fa-laugh-squint:before{content:"\f59b"}.fa-laugh-wink:before{content:"\f59c"}.fa-leaf:before{content:"\f06c"}.fa-leanpub:before{content:"\f212"}.fa-lemon:before{content:"\f094"}.fa-less:before{content:"\f41d"}.fa-less-than:before{content:"\f536"}.fa-less-than-equal:before{content:"\f537"}.fa-level-down-alt:before{content:"\f3be"}.fa-level-up-alt:before{content:"\f3bf"}.fa-life-ring:before{content:"\f1cd"}.fa-lightbulb:before{content:"\f0eb"}.fa-line:before{content:"\f3c0"}.fa-link:before{content:"\f0c1"}.fa-linkedin:before{content:"\f08c"}.fa-linkedin-in:before{content:"\f0e1"}.fa-linode:before{content:"\f2b8"}.fa-linux:before{content:"\f17c"}.fa-lira-sign:before{content:"\f195"}.fa-list:before{content:"\f03a"}.fa-list-alt:before{content:"\f022"}.fa-list-ol:before{content:"\f0cb"}.fa-list-ul:before{content:"\f0ca"}.fa-location-arrow:before{content:"\f124"}.fa-lock:before{content:"\f023"}.fa-lock-open:before{content:"\f3c1"}.fa-long-arrow-alt-down:before{content:"\f309"}.fa-long-arrow-alt-left:before{content:"\f30a"}.fa-long-arrow-alt-right:before{content:"\f30b"}.fa-long-arrow-alt-up:before{content:"\f30c"}.fa-low-vision:before{content:"\f2a8"}.fa-luggage-cart:before{content:"\f59d"}.fa-lyft:before{content:"\f3c3"}.fa-magento:before{content:"\f3c4"}.fa-magic:before{content:"\f0d0"}.fa-magnet:before{content:"\f076"}.fa-mailchimp:before{content:"\f59e"}.fa-male:before{content:"\f183"}.fa-mandalorian:before{content:"\f50f"}.fa-map:before{content:"\f279"}.fa-map-marked:before{content:"\f59f"}.fa-map-marked-alt:before{content:"\f5a0"}.fa-map-marker:before{content:"\f041"}.fa-map-marker-alt:before{content:"\f3c5"}.fa-map-pin:before{content:"\f276"}.fa-map-signs:before{content:"\f277"}.fa-marker:before{content:"\f5a1"}.fa-mars:before{content:"\f222"}.fa-mars-double:before{content:"\f227"}.fa-mars-stroke:before{content:"\f229"}.fa-mars-stroke-h:before{content:"\f22b"}.fa-mars-stroke-v:before{content:"\f22a"}.fa-mastodon:before{content:"\f4f6"}.fa-maxcdn:before{content:"\f136"}.fa-medal:before{content:"\f5a2"}.fa-medapps:before{content:"\f3c6"}.fa-medium:before{content:"\f23a"}.fa-medium-m:before{content:"\f3c7"}.fa-medkit:before{content:"\f0fa"}.fa-medrt:before{content:"\f3c8"}.fa-meetup:before{content:"\f2e0"}.fa-megaport:before{content:"\f5a3"}.fa-meh:before{content:"\f11a"}.fa-meh-blank:before{content:"\f5a4"}.fa-meh-rolling-eyes:before{content:"\f5a5"}.fa-memory:before{content:"\f538"}.fa-mercury:before{content:"\f223"}.fa-microchip:before{content:"\f2db"}.fa-microphone:before{content:"\f130"}.fa-microphone-alt:before{content:"\f3c9"}.fa-microphone-alt-slash:before{content:"\f539"}.fa-microphone-slash:before{content:"\f131"}.fa-microsoft:before{content:"\f3ca"}.fa-minus:before{content:"\f068"}.fa-minus-circle:before{content:"\f056"}.fa-minus-square:before{content:"\f146"}.fa-mix:before{content:"\f3cb"}.fa-mixcloud:before{content:"\f289"}.fa-mizuni:before{content:"\f3cc"}.fa-mobile:before{content:"\f10b"}.fa-mobile-alt:before{content:"\f3cd"}.fa-modx:before{content:"\f285"}.fa-monero:before{content:"\f3d0"}.fa-money-bill:before{content:"\f0d6"}.fa-money-bill-alt:before{content:"\f3d1"}.fa-money-bill-wave:before{content:"\f53a"}.fa-money-bill-wave-alt:before{content:"\f53b"}.fa-money-check:before{content:"\f53c"}.fa-money-check-alt:before{content:"\f53d"}.fa-monument:before{content:"\f5a6"}.fa-moon:before{content:"\f186"}.fa-mortar-pestle:before{content:"\f5a7"}.fa-motorcycle:before{content:"\f21c"}.fa-mouse-pointer:before{content:"\f245"}.fa-music:before{content:"\f001"}.fa-napster:before{content:"\f3d2"}.fa-neuter:before{content:"\f22c"}.fa-newspaper:before{content:"\f1ea"}.fa-nimblr:before{content:"\f5a8"}.fa-nintendo-switch:before{content:"\f418"}.fa-node:before{content:"\f419"}.fa-node-js:before{content:"\f3d3"}.fa-not-equal:before{content:"\f53e"}.fa-notes-medical:before{content:"\f481"}.fa-npm:before{content:"\f3d4"}.fa-ns8:before{content:"\f3d5"}.fa-nutritionix:before{content:"\f3d6"}.fa-object-group:before{content:"\f247"}.fa-object-ungroup:before{content:"\f248"}.fa-odnoklassniki:before{content:"\f263"}.fa-odnoklassniki-square:before{content:"\f264"}.fa-old-republic:before{content:"\f510"}.fa-opencart:before{content:"\f23d"}.fa-openid:before{content:"\f19b"}.fa-opera:before{content:"\f26a"}.fa-optin-monster:before{content:"\f23c"}.fa-osi:before{content:"\f41a"}.fa-outdent:before{content:"\f03b"}.fa-page4:before{content:"\f3d7"}.fa-pagelines:before{content:"\f18c"}.fa-paint-brush:before{content:"\f1fc"}.fa-paint-roller:before{content:"\f5aa"}.fa-palette:before{content:"\f53f"}.fa-palfed:before{content:"\f3d8"}.fa-pallet:before{content:"\f482"}.fa-paper-plane:before{content:"\f1d8"}.fa-paperclip:before{content:"\f0c6"}.fa-parachute-box:before{content:"\f4cd"}.fa-paragraph:before{content:"\f1dd"}.fa-parking:before{content:"\f540"}.fa-passport:before{content:"\f5ab"}.fa-paste:before{content:"\f0ea"}.fa-patreon:before{content:"\f3d9"}.fa-pause:before{content:"\f04c"}.fa-pause-circle:before{content:"\f28b"}.fa-paw:before{content:"\f1b0"}.fa-paypal:before{content:"\f1ed"}.fa-pen:before{content:"\f304"}.fa-pen-alt:before{content:"\f305"}.fa-pen-fancy:before{content:"\f5ac"}.fa-pen-nib:before{content:"\f5ad"}.fa-pen-square:before{content:"\f14b"}.fa-pencil-alt:before{content:"\f303"}.fa-pencil-ruler:before{content:"\f5ae"}.fa-people-carry:before{content:"\f4ce"}.fa-percent:before{content:"\f295"}.fa-percentage:before{content:"\f541"}.fa-periscope:before{content:"\f3da"}.fa-phabricator:before{content:"\f3db"}.fa-phoenix-framework:before{content:"\f3dc"}.fa-phoenix-squadron:before{content:"\f511"}.fa-phone:before{content:"\f095"}.fa-phone-slash:before{content:"\f3dd"}.fa-phone-square:before{content:"\f098"}.fa-phone-volume:before{content:"\f2a0"}.fa-php:before{content:"\f457"}.fa-pied-piper:before{content:"\f2ae"}.fa-pied-piper-alt:before{content:"\f1a8"}.fa-pied-piper-hat:before{content:"\f4e5"}.fa-pied-piper-pp:before{content:"\f1a7"}.fa-piggy-bank:before{content:"\f4d3"}.fa-pills:before{content:"\f484"}.fa-pinterest:before{content:"\f0d2"}.fa-pinterest-p:before{content:"\f231"}.fa-pinterest-square:before{content:"\f0d3"}.fa-plane:before{content:"\f072"}.fa-plane-arrival:before{content:"\f5af"}.fa-plane-departure:before{content:"\f5b0"}.fa-play:before{content:"\f04b"}.fa-play-circle:before{content:"\f144"}.fa-playstation:before{content:"\f3df"}.fa-plug:before{content:"\f1e6"}.fa-plus:before{content:"\f067"}.fa-plus-circle:before{content:"\f055"}.fa-plus-square:before{content:"\f0fe"}.fa-podcast:before{content:"\f2ce"}.fa-poo:before{content:"\f2fe"}.fa-portrait:before{content:"\f3e0"}.fa-pound-sign:before{content:"\f154"}.fa-power-off:before{content:"\f011"}.fa-prescription:before{content:"\f5b1"}.fa-prescription-bottle:before{content:"\f485"}.fa-prescription-bottle-alt:before{content:"\f486"}.fa-print:before{content:"\f02f"}.fa-procedures:before{content:"\f487"}.fa-product-hunt:before{content:"\f288"}.fa-project-diagram:before{content:"\f542"}.fa-pushed:before{content:"\f3e1"}.fa-puzzle-piece:before{content:"\f12e"}.fa-python:before{content:"\f3e2"}.fa-qq:before{content:"\f1d6"}.fa-qrcode:before{content:"\f029"}.fa-question:before{content:"\f128"}.fa-question-circle:before{content:"\f059"}.fa-quidditch:before{content:"\f458"}.fa-quinscape:before{content:"\f459"}.fa-quora:before{content:"\f2c4"}.fa-quote-left:before{content:"\f10d"}.fa-quote-right:before{content:"\f10e"}.fa-r-project:before{content:"\f4f7"}.fa-random:before{content:"\f074"}.fa-ravelry:before{content:"\f2d9"}.fa-react:before{content:"\f41b"}.fa-readme:before{content:"\f4d5"}.fa-rebel:before{content:"\f1d0"}.fa-receipt:before{content:"\f543"}.fa-recycle:before{content:"\f1b8"}.fa-red-river:before{content:"\f3e3"}.fa-reddit:before{content:"\f1a1"}.fa-reddit-alien:before{content:"\f281"}.fa-reddit-square:before{content:"\f1a2"}.fa-redo:before{content:"\f01e"}.fa-redo-alt:before{content:"\f2f9"}.fa-registered:before{content:"\f25d"}.fa-rendact:before{content:"\f3e4"}.fa-renren:before{content:"\f18b"}.fa-reply:before{content:"\f3e5"}.fa-reply-all:before{content:"\f122"}.fa-replyd:before{content:"\f3e6"}.fa-researchgate:before{content:"\f4f8"}.fa-resolving:before{content:"\f3e7"}.fa-retweet:before{content:"\f079"}.fa-ribbon:before{content:"\f4d6"}.fa-road:before{content:"\f018"}.fa-robot:before{content:"\f544"}.fa-rocket:before{content:"\f135"}.fa-rocketchat:before{content:"\f3e8"}.fa-rockrms:before{content:"\f3e9"}.fa-rss:before{content:"\f09e"}.fa-rss-square:before{content:"\f143"}.fa-ruble-sign:before{content:"\f158"}.fa-ruler:before{content:"\f545"}.fa-ruler-combined:before{content:"\f546"}.fa-ruler-horizontal:before{content:"\f547"}.fa-ruler-vertical:before{content:"\f548"}.fa-rupee-sign:before{content:"\f156"}.fa-sad-cry:before{content:"\f5b3"}.fa-sad-tear:before{content:"\f5b4"}.fa-safari:before{content:"\f267"}.fa-sass:before{content:"\f41e"}.fa-save:before{content:"\f0c7"}.fa-schlix:before{content:"\f3ea"}.fa-school:before{content:"\f549"}.fa-screwdriver:before{content:"\f54a"}.fa-scribd:before{content:"\f28a"}.fa-search:before{content:"\f002"}.fa-search-minus:before{content:"\f010"}.fa-search-plus:before{content:"\f00e"}.fa-searchengin:before{content:"\f3eb"}.fa-seedling:before{content:"\f4d8"}.fa-sellcast:before{content:"\f2da"}.fa-sellsy:before{content:"\f213"}.fa-server:before{content:"\f233"}.fa-servicestack:before{content:"\f3ec"}.fa-share:before{content:"\f064"}.fa-share-alt:before{content:"\f1e0"}.fa-share-alt-square:before{content:"\f1e1"}.fa-share-square:before{content:"\f14d"}.fa-shekel-sign:before{content:"\f20b"}.fa-shield-alt:before{content:"\f3ed"}.fa-ship:before{content:"\f21a"}.fa-shipping-fast:before{content:"\f48b"}.fa-shirtsinbulk:before{content:"\f214"}.fa-shoe-prints:before{content:"\f54b"}.fa-shopping-bag:before{content:"\f290"}.fa-shopping-basket:before{content:"\f291"}.fa-shopping-cart:before{content:"\f07a"}.fa-shopware:before{content:"\f5b5"}.fa-shower:before{content:"\f2cc"}.fa-shuttle-van:before{content:"\f5b6"}.fa-sign:before{content:"\f4d9"}.fa-sign-in-alt:before{content:"\f2f6"}.fa-sign-language:before{content:"\f2a7"}.fa-sign-out-alt:before{content:"\f2f5"}.fa-signal:before{content:"\f012"}.fa-signature:before{content:"\f5b7"}.fa-simplybuilt:before{content:"\f215"}.fa-sistrix:before{content:"\f3ee"}.fa-sitemap:before{content:"\f0e8"}.fa-sith:before{content:"\f512"}.fa-skull:before{content:"\f54c"}.fa-skyatlas:before{content:"\f216"}.fa-skype:before{content:"\f17e"}.fa-slack:before{content:"\f198"}.fa-slack-hash:before{content:"\f3ef"}.fa-sliders-h:before{content:"\f1de"}.fa-slideshare:before{content:"\f1e7"}.fa-smile:before{content:"\f118"}.fa-smile-beam:before{content:"\f5b8"}.fa-smile-wink:before{content:"\f4da"}.fa-smoking:before{content:"\f48d"}.fa-smoking-ban:before{content:"\f54d"}.fa-snapchat:before{content:"\f2ab"}.fa-snapchat-ghost:before{content:"\f2ac"}.fa-snapchat-square:before{content:"\f2ad"}.fa-snowflake:before{content:"\f2dc"}.fa-solar-panel:before{content:"\f5ba"}.fa-sort:before{content:"\f0dc"}.fa-sort-alpha-down:before{content:"\f15d"}.fa-sort-alpha-up:before{content:"\f15e"}.fa-sort-amount-down:before{content:"\f160"}.fa-sort-amount-up:before{content:"\f161"}.fa-sort-down:before{content:"\f0dd"}.fa-sort-numeric-down:before{content:"\f162"}.fa-sort-numeric-up:before{content:"\f163"}.fa-sort-up:before{content:"\f0de"}.fa-soundcloud:before{content:"\f1be"}.fa-spa:before{content:"\f5bb"}.fa-space-shuttle:before{content:"\f197"}.fa-speakap:before{content:"\f3f3"}.fa-spinner:before{content:"\f110"}.fa-splotch:before{content:"\f5bc"}.fa-spotify:before{content:"\f1bc"}.fa-spray-can:before{content:"\f5bd"}.fa-square:before{content:"\f0c8"}.fa-square-full:before{content:"\f45c"}.fa-squarespace:before{content:"\f5be"}.fa-stack-exchange:before{content:"\f18d"}.fa-stack-overflow:before{content:"\f16c"}.fa-stamp:before{content:"\f5bf"}.fa-star:before{content:"\f005"}.fa-star-half:before{content:"\f089"}.fa-star-half-alt:before{content:"\f5c0"}.fa-staylinked:before{content:"\f3f5"}.fa-steam:before{content:"\f1b6"}.fa-steam-square:before{content:"\f1b7"}.fa-steam-symbol:before{content:"\f3f6"}.fa-step-backward:before{content:"\f048"}.fa-step-forward:before{content:"\f051"}.fa-stethoscope:before{content:"\f0f1"}.fa-sticker-mule:before{content:"\f3f7"}.fa-sticky-note:before{content:"\f249"}.fa-stop:before{content:"\f04d"}.fa-stop-circle:before{content:"\f28d"}.fa-stopwatch:before{content:"\f2f2"}.fa-store:before{content:"\f54e"}.fa-store-alt:before{content:"\f54f"}.fa-strava:before{content:"\f428"}.fa-stream:before{content:"\f550"}.fa-street-view:before{content:"\f21d"}.fa-strikethrough:before{content:"\f0cc"}.fa-stripe:before{content:"\f429"}.fa-stripe-s:before{content:"\f42a"}.fa-stroopwafel:before{content:"\f551"}.fa-studiovinari:before{content:"\f3f8"}.fa-stumbleupon:before{content:"\f1a4"}.fa-stumbleupon-circle:before{content:"\f1a3"}.fa-subscript:before{content:"\f12c"}.fa-subway:before{content:"\f239"}.fa-suitcase:before{content:"\f0f2"}.fa-suitcase-rolling:before{content:"\f5c1"}.fa-sun:before{content:"\f185"}.fa-superpowers:before{content:"\f2dd"}.fa-superscript:before{content:"\f12b"}.fa-supple:before{content:"\f3f9"}.fa-surprise:before{content:"\f5c2"}.fa-swatchbook:before{content:"\f5c3"}.fa-swimmer:before{content:"\f5c4"}.fa-swimming-pool:before{content:"\f5c5"}.fa-sync:before{content:"\f021"}.fa-sync-alt:before{content:"\f2f1"}.fa-syringe:before{content:"\f48e"}.fa-table:before{content:"\f0ce"}.fa-table-tennis:before{content:"\f45d"}.fa-tablet:before{content:"\f10a"}.fa-tablet-alt:before{content:"\f3fa"}.fa-tablets:before{content:"\f490"}.fa-tachometer-alt:before{content:"\f3fd"}.fa-tag:before{content:"\f02b"}.fa-tags:before{content:"\f02c"}.fa-tape:before{content:"\f4db"}.fa-tasks:before{content:"\f0ae"}.fa-taxi:before{content:"\f1ba"}.fa-teamspeak:before{content:"\f4f9"}.fa-telegram:before{content:"\f2c6"}.fa-telegram-plane:before{content:"\f3fe"}.fa-tencent-weibo:before{content:"\f1d5"}.fa-terminal:before{content:"\f120"}.fa-text-height:before{content:"\f034"}.fa-text-width:before{content:"\f035"}.fa-th:before{content:"\f00a"}.fa-th-large:before{content:"\f009"}.fa-th-list:before{content:"\f00b"}.fa-themeco:before{content:"\f5c6"}.fa-themeisle:before{content:"\f2b2"}.fa-thermometer:before{content:"\f491"}.fa-thermometer-empty:before{content:"\f2cb"}.fa-thermometer-full:before{content:"\f2c7"}.fa-thermometer-half:before{content:"\f2c9"}.fa-thermometer-quarter:before{content:"\f2ca"}.fa-thermometer-three-quarters:before{content:"\f2c8"}.fa-thumbs-down:before{content:"\f165"}.fa-thumbs-up:before{content:"\f164"}.fa-thumbtack:before{content:"\f08d"}.fa-ticket-alt:before{content:"\f3ff"}.fa-times:before{content:"\f00d"}.fa-times-circle:before{content:"\f057"}.fa-tint:before{content:"\f043"}.fa-tint-slash:before{content:"\f5c7"}.fa-tired:before{content:"\f5c8"}.fa-toggle-off:before{content:"\f204"}.fa-toggle-on:before{content:"\f205"}.fa-toolbox:before{content:"\f552"}.fa-tooth:before{content:"\f5c9"}.fa-trade-federation:before{content:"\f513"}.fa-trademark:before{content:"\f25c"}.fa-train:before{content:"\f238"}.fa-transgender:before{content:"\f224"}.fa-transgender-alt:before{content:"\f225"}.fa-trash:before{content:"\f1f8"}.fa-trash-alt:before{content:"\f2ed"}.fa-tree:before{content:"\f1bb"}.fa-trello:before{content:"\f181"}.fa-tripadvisor:before{content:"\f262"}.fa-trophy:before{content:"\f091"}.fa-truck:before{content:"\f0d1"}.fa-truck-loading:before{content:"\f4de"}.fa-truck-moving:before{content:"\f4df"}.fa-tshirt:before{content:"\f553"}.fa-tty:before{content:"\f1e4"}.fa-tumblr:before{content:"\f173"}.fa-tumblr-square:before{content:"\f174"}.fa-tv:before{content:"\f26c"}.fa-twitch:before{content:"\f1e8"}.fa-twitter:before{content:"\f099"}.fa-twitter-square:before{content:"\f081"}.fa-typo3:before{content:"\f42b"}.fa-uber:before{content:"\f402"}.fa-uikit:before{content:"\f403"}.fa-umbrella:before{content:"\f0e9"}.fa-umbrella-beach:before{content:"\f5ca"}.fa-underline:before{content:"\f0cd"}.fa-undo:before{content:"\f0e2"}.fa-undo-alt:before{content:"\f2ea"}.fa-uniregistry:before{content:"\f404"}.fa-universal-access:before{content:"\f29a"}.fa-university:before{content:"\f19c"}.fa-unlink:before{content:"\f127"}.fa-unlock:before{content:"\f09c"}.fa-unlock-alt:before{content:"\f13e"}.fa-untappd:before{content:"\f405"}.fa-upload:before{content:"\f093"}.fa-usb:before{content:"\f287"}.fa-user:before{content:"\f007"}.fa-user-alt:before{content:"\f406"}.fa-user-alt-slash:before{content:"\f4fa"}.fa-user-astronaut:before{content:"\f4fb"}.fa-user-check:before{content:"\f4fc"}.fa-user-circle:before{content:"\f2bd"}.fa-user-clock:before{content:"\f4fd"}.fa-user-cog:before{content:"\f4fe"}.fa-user-edit:before{content:"\f4ff"}.fa-user-friends:before{content:"\f500"}.fa-user-graduate:before{content:"\f501"}.fa-user-lock:before{content:"\f502"}.fa-user-md:before{content:"\f0f0"}.fa-user-minus:before{content:"\f503"}.fa-user-ninja:before{content:"\f504"}.fa-user-plus:before{content:"\f234"}.fa-user-secret:before{content:"\f21b"}.fa-user-shield:before{content:"\f505"}.fa-user-slash:before{content:"\f506"}.fa-user-tag:before{content:"\f507"}.fa-user-tie:before{content:"\f508"}.fa-user-times:before{content:"\f235"}.fa-users:before{content:"\f0c0"}.fa-users-cog:before{content:"\f509"}.fa-ussunnah:before{content:"\f407"}.fa-utensil-spoon:before{content:"\f2e5"}.fa-utensils:before{content:"\f2e7"}.fa-vaadin:before{content:"\f408"}.fa-vector-square:before{content:"\f5cb"}.fa-venus:before{content:"\f221"}.fa-venus-double:before{content:"\f226"}.fa-venus-mars:before{content:"\f228"}.fa-viacoin:before{content:"\f237"}.fa-viadeo:before{content:"\f2a9"}.fa-viadeo-square:before{content:"\f2aa"}.fa-vial:before{content:"\f492"}.fa-vials:before{content:"\f493"}.fa-viber:before{content:"\f409"}.fa-video:before{content:"\f03d"}.fa-video-slash:before{content:"\f4e2"}.fa-vimeo:before{content:"\f40a"}.fa-vimeo-square:before{content:"\f194"}.fa-vimeo-v:before{content:"\f27d"}.fa-vine:before{content:"\f1ca"}.fa-vk:before{content:"\f189"}.fa-vnv:before{content:"\f40b"}.fa-volleyball-ball:before{content:"\f45f"}.fa-volume-down:before{content:"\f027"}.fa-volume-off:before{content:"\f026"}.fa-volume-up:before{content:"\f028"}.fa-vuejs:before{content:"\f41f"}.fa-walking:before{content:"\f554"}.fa-wallet:before{content:"\f555"}.fa-warehouse:before{content:"\f494"}.fa-weebly:before{content:"\f5cc"}.fa-weibo:before{content:"\f18a"}.fa-weight:before{content:"\f496"}.fa-weight-hanging:before{content:"\f5cd"}.fa-weixin:before{content:"\f1d7"}.fa-whatsapp:before{content:"\f232"}.fa-whatsapp-square:before{content:"\f40c"}.fa-wheelchair:before{content:"\f193"}.fa-whmcs:before{content:"\f40d"}.fa-wifi:before{content:"\f1eb"}.fa-wikipedia-w:before{content:"\f266"}.fa-window-close:before{content:"\f410"}.fa-window-maximize:before{content:"\f2d0"}.fa-window-minimize:before{content:"\f2d1"}.fa-window-restore:before{content:"\f2d2"}.fa-windows:before{content:"\f17a"}.fa-wine-glass:before{content:"\f4e3"}.fa-wine-glass-alt:before{content:"\f5ce"}.fa-wix:before{content:"\f5cf"}.fa-wolf-pack-battalion:before{content:"\f514"}.fa-won-sign:before{content:"\f159"}.fa-wordpress:before{content:"\f19a"}.fa-wordpress-simple:before{content:"\f411"}.fa-wpbeginner:before{content:"\f297"}.fa-wpexplorer:before{content:"\f2de"}.fa-wpforms:before{content:"\f298"}.fa-wrench:before{content:"\f0ad"}.fa-x-ray:before{content:"\f497"}.fa-xbox:before{content:"\f412"}.fa-xing:before{content:"\f168"}.fa-xing-square:before{content:"\f169"}.fa-y-combinator:before{content:"\f23b"}.fa-yahoo:before{content:"\f19e"}.fa-yandex:before{content:"\f413"}.fa-yandex-international:before{content:"\f414"}.fa-yelp:before{content:"\f1e9"}.fa-yen-sign:before{content:"\f157"}.fa-yoast:before{content:"\f2b1"}.fa-youtube:before{content:"\f167"}.fa-youtube-square:before{content:"\f431"}.sr-only{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.sr-only-focusable:active,.sr-only-focusable:focus{clip:auto;height:auto;margin:0;overflow:visible;position:static;width:auto}
\ No newline at end of file
diff --git a/frontend/vendor/main.js b/frontend/vendor/main.js
new file mode 100644
index 000000000..263a40a71
--- /dev/null
+++ b/frontend/vendor/main.js
@@ -0,0 +1,5 @@
+import './flatpickr';
+import './zepto';
+
+import './fontawesome.css';
+import './flatpickr.css';
diff --git a/frontend/vendor/zepto.js b/frontend/vendor/zepto.js
new file mode 100644
index 000000000..ad43ef113
--- /dev/null
+++ b/frontend/vendor/zepto.js
@@ -0,0 +1,2 @@
+/* Zepto v1.2.0 - zepto event ajax form ie - zeptojs.com/license */
+!function(t,e){"function"==typeof define&&define.amd?define(function(){return e(t)}):e(t)}(this,function(t){var e=function(){function $(t){return null==t?String(t):S[C.call(t)]||"object"}function F(t){return"function"==$(t)}function k(t){return null!=t&&t==t.window}function M(t){return null!=t&&t.nodeType==t.DOCUMENT_NODE}function R(t){return"object"==$(t)}function Z(t){return R(t)&&!k(t)&&Object.getPrototypeOf(t)==Object.prototype}function z(t){var e=!!t&&"length"in t&&t.length,n=r.type(t);return"function"!=n&&!k(t)&&("array"==n||0===e||"number"==typeof e&&e>0&&e-1 in t)}function q(t){return a.call(t,function(t){return null!=t})}function H(t){return t.length>0?r.fn.concat.apply([],t):t}function I(t){return t.replace(/::/g,"/").replace(/([A-Z]+)([A-Z][a-z])/g,"$1_$2").replace(/([a-z\d])([A-Z])/g,"$1_$2").replace(/_/g,"-").toLowerCase()}function V(t){return t in l?l[t]:l[t]=new RegExp("(^|\\s)"+t+"(\\s|$)")}function _(t,e){return"number"!=typeof e||h[I(t)]?e:e+"px"}function B(t){var e,n;return c[t]||(e=f.createElement(t),f.body.appendChild(e),n=getComputedStyle(e,"").getPropertyValue("display"),e.parentNode.removeChild(e),"none"==n&&(n="block"),c[t]=n),c[t]}function U(t){return"children"in t?u.call(t.children):r.map(t.childNodes,function(t){return 1==t.nodeType?t:void 0})}function X(t,e){var n,r=t?t.length:0;for(n=0;r>n;n++)this[n]=t[n];this.length=r,this.selector=e||""}function J(t,r,i){for(n in r)i&&(Z(r[n])||L(r[n]))?(Z(r[n])&&!Z(t[n])&&(t[n]={}),L(r[n])&&!L(t[n])&&(t[n]=[]),J(t[n],r[n],i)):r[n]!==e&&(t[n]=r[n])}function W(t,e){return null==e?r(t):r(t).filter(e)}function Y(t,e,n,r){return F(e)?e.call(t,n,r):e}function G(t,e,n){null==n?t.removeAttribute(e):t.setAttribute(e,n)}function K(t,n){var r=t.className||"",i=r&&r.baseVal!==e;return n===e?i?r.baseVal:r:void(i?r.baseVal=n:t.className=n)}function Q(t){try{return t?"true"==t||("false"==t?!1:"null"==t?null:+t+""==t?+t:/^[\[\{]/.test(t)?r.parseJSON(t):t):t}catch(e){return t}}function tt(t,e){e(t);for(var n=0,r=t.childNodes.length;r>n;n++)tt(t.childNodes[n],e)}var e,n,r,i,O,P,o=[],s=o.concat,a=o.filter,u=o.slice,f=t.document,c={},l={},h={"column-count":1,columns:1,"font-weight":1,"line-height":1,opacity:1,"z-index":1,zoom:1},p=/^\s*<(\w+|!)[^>]*>/,d=/^<(\w+)\s*\/?>(?:<\/\1>|)$/,m=/<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/gi,g=/^(?:body|html)$/i,v=/([A-Z])/g,y=["val","css","html","text","data","width","height","offset"],x=["after","prepend","before","append"],b=f.createElement("table"),E=f.createElement("tr"),j={tr:f.createElement("tbody"),tbody:b,thead:b,tfoot:b,td:E,th:E,"*":f.createElement("div")},w=/complete|loaded|interactive/,T=/^[\w-]*$/,S={},C=S.toString,N={},A=f.createElement("div"),D={tabindex:"tabIndex",readonly:"readOnly","for":"htmlFor","class":"className",maxlength:"maxLength",cellspacing:"cellSpacing",cellpadding:"cellPadding",rowspan:"rowSpan",colspan:"colSpan",usemap:"useMap",frameborder:"frameBorder",contenteditable:"contentEditable"},L=Array.isArray||function(t){return t instanceof Array};return N.matches=function(t,e){if(!e||!t||1!==t.nodeType)return!1;var n=t.matches||t.webkitMatchesSelector||t.mozMatchesSelector||t.oMatchesSelector||t.matchesSelector;if(n)return n.call(t,e);var r,i=t.parentNode,o=!i;return o&&(i=A).appendChild(t),r=~N.qsa(i,e).indexOf(t),o&&A.removeChild(t),r},O=function(t){return t.replace(/-+(.)?/g,function(t,e){return e?e.toUpperCase():""})},P=function(t){return a.call(t,function(e,n){return t.indexOf(e)==n})},N.fragment=function(t,n,i){var o,s,a;return d.test(t)&&(o=r(f.createElement(RegExp.$1))),o||(t.replace&&(t=t.replace(m,"<$1></$2>")),n===e&&(n=p.test(t)&&RegExp.$1),n in j||(n="*"),a=j[n],a.innerHTML=""+t,o=r.each(u.call(a.childNodes),function(){a.removeChild(this)})),Z(i)&&(s=r(o),r.each(i,function(t,e){y.indexOf(t)>-1?s[t](e):s.attr(t,e)})),o},N.Z=function(t,e){return new X(t,e)},N.isZ=function(t){return t instanceof N.Z},N.init=function(t,n){var i;if(!t)return N.Z();if("string"==typeof t)if(t=t.trim(),"<"==t[0]&&p.test(t))i=N.fragment(t,RegExp.$1,n),t=null;else{if(n!==e)return r(n).find(t);i=N.qsa(f,t)}else{if(F(t))return r(f).ready(t);if(N.isZ(t))return t;if(L(t))i=q(t);else if(R(t))i=[t],t=null;else if(p.test(t))i=N.fragment(t.trim(),RegExp.$1,n),t=null;else{if(n!==e)return r(n).find(t);i=N.qsa(f,t)}}return N.Z(i,t)},r=function(t,e){return N.init(t,e)},r.extend=function(t){var e,n=u.call(arguments,1);return"boolean"==typeof t&&(e=t,t=n.shift()),n.forEach(function(n){J(t,n,e)}),t},N.qsa=function(t,e){var n,r="#"==e[0],i=!r&&"."==e[0],o=r||i?e.slice(1):e,s=T.test(o);return t.getElementById&&s&&r?(n=t.getElementById(o))?[n]:[]:1!==t.nodeType&&9!==t.nodeType&&11!==t.nodeType?[]:u.call(s&&!r&&t.getElementsByClassName?i?t.getElementsByClassName(o):t.getElementsByTagName(e):t.querySelectorAll(e))},r.contains=f.documentElement.contains?function(t,e){return t!==e&&t.contains(e)}:function(t,e){for(;e&&(e=e.parentNode);)if(e===t)return!0;return!1},r.type=$,r.isFunction=F,r.isWindow=k,r.isArray=L,r.isPlainObject=Z,r.isEmptyObject=function(t){var e;for(e in t)return!1;return!0},r.isNumeric=function(t){var e=Number(t),n=typeof t;return null!=t&&"boolean"!=n&&("string"!=n||t.length)&&!isNaN(e)&&isFinite(e)||!1},r.inArray=function(t,e,n){return o.indexOf.call(e,t,n)},r.camelCase=O,r.trim=function(t){return null==t?"":String.prototype.trim.call(t)},r.uuid=0,r.support={},r.expr={},r.noop=function(){},r.map=function(t,e){var n,i,o,r=[];if(z(t))for(i=0;i<t.length;i++)n=e(t[i],i),null!=n&&r.push(n);else for(o in t)n=e(t[o],o),null!=n&&r.push(n);return H(r)},r.each=function(t,e){var n,r;if(z(t)){for(n=0;n<t.length;n++)if(e.call(t[n],n,t[n])===!1)return t}else for(r in t)if(e.call(t[r],r,t[r])===!1)return t;return t},r.grep=function(t,e){return a.call(t,e)},t.JSON&&(r.parseJSON=JSON.parse),r.each("Boolean Number String Function Array Date RegExp Object Error".split(" "),function(t,e){S["[object "+e+"]"]=e.toLowerCase()}),r.fn={constructor:N.Z,length:0,forEach:o.forEach,reduce:o.reduce,push:o.push,sort:o.sort,splice:o.splice,indexOf:o.indexOf,concat:function(){var t,e,n=[];for(t=0;t<arguments.length;t++)e=arguments[t],n[t]=N.isZ(e)?e.toArray():e;return s.apply(N.isZ(this)?this.toArray():this,n)},map:function(t){return r(r.map(this,function(e,n){return t.call(e,n,e)}))},slice:function(){return r(u.apply(this,arguments))},ready:function(t){return w.test(f.readyState)&&f.body?t(r):f.addEventListener("DOMContentLoaded",function(){t(r)},!1),this},get:function(t){return t===e?u.call(this):this[t>=0?t:t+this.length]},toArray:function(){return this.get()},size:function(){return this.length},remove:function(){return this.each(function(){null!=this.parentNode&&this.parentNode.removeChild(this)})},each:function(t){return o.every.call(this,function(e,n){return t.call(e,n,e)!==!1}),this},filter:function(t){return F(t)?this.not(this.not(t)):r(a.call(this,function(e){return N.matches(e,t)}))},add:function(t,e){return r(P(this.concat(r(t,e))))},is:function(t){return this.length>0&&N.matches(this[0],t)},not:function(t){var n=[];if(F(t)&&t.call!==e)this.each(function(e){t.call(this,e)||n.push(this)});else{var i="string"==typeof t?this.filter(t):z(t)&&F(t.item)?u.call(t):r(t);this.forEach(function(t){i.indexOf(t)<0&&n.push(t)})}return r(n)},has:function(t){return this.filter(function(){return R(t)?r.contains(this,t):r(this).find(t).size()})},eq:function(t){return-1===t?this.slice(t):this.slice(t,+t+1)},first:function(){var t=this[0];return t&&!R(t)?t:r(t)},last:function(){var t=this[this.length-1];return t&&!R(t)?t:r(t)},find:function(t){var e,n=this;return e=t?"object"==typeof t?r(t).filter(function(){var t=this;return o.some.call(n,function(e){return r.contains(e,t)})}):1==this.length?r(N.qsa(this[0],t)):this.map(function(){return N.qsa(this,t)}):r()},closest:function(t,e){var n=[],i="object"==typeof t&&r(t);return this.each(function(r,o){for(;o&&!(i?i.indexOf(o)>=0:N.matches(o,t));)o=o!==e&&!M(o)&&o.parentNode;o&&n.indexOf(o)<0&&n.push(o)}),r(n)},parents:function(t){for(var e=[],n=this;n.length>0;)n=r.map(n,function(t){return(t=t.parentNode)&&!M(t)&&e.indexOf(t)<0?(e.push(t),t):void 0});return W(e,t)},parent:function(t){return W(P(this.pluck("parentNode")),t)},children:function(t){return W(this.map(function(){return U(this)}),t)},contents:function(){return this.map(function(){return this.contentDocument||u.call(this.childNodes)})},siblings:function(t){return W(this.map(function(t,e){return a.call(U(e.parentNode),function(t){return t!==e})}),t)},empty:function(){return this.each(function(){this.innerHTML=""})},pluck:function(t){return r.map(this,function(e){return e[t]})},show:function(){return this.each(function(){"none"==this.style.display&&(this.style.display=""),"none"==getComputedStyle(this,"").getPropertyValue("display")&&(this.style.display=B(this.nodeName))})},replaceWith:function(t){return this.before(t).remove()},wrap:function(t){var e=F(t);if(this[0]&&!e)var n=r(t).get(0),i=n.parentNode||this.length>1;return this.each(function(o){r(this).wrapAll(e?t.call(this,o):i?n.cloneNode(!0):n)})},wrapAll:function(t){if(this[0]){r(this[0]).before(t=r(t));for(var e;(e=t.children()).length;)t=e.first();r(t).append(this)}return this},wrapInner:function(t){var e=F(t);return this.each(function(n){var i=r(this),o=i.contents(),s=e?t.call(this,n):t;o.length?o.wrapAll(s):i.append(s)})},unwrap:function(){return this.parent().each(function(){r(this).replaceWith(r(this).children())}),this},clone:function(){return this.map(function(){return this.cloneNode(!0)})},hide:function(){return this.css("display","none")},toggle:function(t){return this.each(function(){var n=r(this);(t===e?"none"==n.css("display"):t)?n.show():n.hide()})},prev:function(t){return r(this.pluck("previousElementSibling")).filter(t||"*")},next:function(t){return r(this.pluck("nextElementSibling")).filter(t||"*")},html:function(t){return 0 in arguments?this.each(function(e){var n=this.innerHTML;r(this).empty().append(Y(this,t,e,n))}):0 in this?this[0].innerHTML:null},text:function(t){return 0 in arguments?this.each(function(e){var n=Y(this,t,e,this.textContent);this.textContent=null==n?"":""+n}):0 in this?this.pluck("textContent").join(""):null},attr:function(t,r){var i;return"string"!=typeof t||1 in arguments?this.each(function(e){if(1===this.nodeType)if(R(t))for(n in t)G(this,n,t[n]);else G(this,t,Y(this,r,e,this.getAttribute(t)))}):0 in this&&1==this[0].nodeType&&null!=(i=this[0].getAttribute(t))?i:e},removeAttr:function(t){return this.each(function(){1===this.nodeType&&t.split(" ").forEach(function(t){G(this,t)},this)})},prop:function(t,e){return t=D[t]||t,1 in arguments?this.each(function(n){this[t]=Y(this,e,n,this[t])}):this[0]&&this[0][t]},removeProp:function(t){return t=D[t]||t,this.each(function(){delete this[t]})},data:function(t,n){var r="data-"+t.replace(v,"-$1").toLowerCase(),i=1 in arguments?this.attr(r,n):this.attr(r);return null!==i?Q(i):e},val:function(t){return 0 in arguments?(null==t&&(t=""),this.each(function(e){this.value=Y(this,t,e,this.value)})):this[0]&&(this[0].multiple?r(this[0]).find("option").filter(function(){return this.selected}).pluck("value"):this[0].value)},offset:function(e){if(e)return this.each(function(t){var n=r(this),i=Y(this,e,t,n.offset()),o=n.offsetParent().offset(),s={top:i.top-o.top,left:i.left-o.left};"static"==n.css("position")&&(s.position="relative"),n.css(s)});if(!this.length)return null;if(f.documentElement!==this[0]&&!r.contains(f.documentElement,this[0]))return{top:0,left:0};var n=this[0].getBoundingClientRect();return{left:n.left+t.pageXOffset,top:n.top+t.pageYOffset,width:Math.round(n.width),height:Math.round(n.height)}},css:function(t,e){if(arguments.length<2){var i=this[0];if("string"==typeof t){if(!i)return;return i.style[O(t)]||getComputedStyle(i,"").getPropertyValue(t)}if(L(t)){if(!i)return;var o={},s=getComputedStyle(i,"");return r.each(t,function(t,e){o[e]=i.style[O(e)]||s.getPropertyValue(e)}),o}}var a="";if("string"==$(t))e||0===e?a=I(t)+":"+_(t,e):this.each(function(){this.style.removeProperty(I(t))});else for(n in t)t[n]||0===t[n]?a+=I(n)+":"+_(n,t[n])+";":this.each(function(){this.style.removeProperty(I(n))});return this.each(function(){this.style.cssText+=";"+a})},index:function(t){return t?this.indexOf(r(t)[0]):this.parent().children().indexOf(this[0])},hasClass:function(t){return t?o.some.call(this,function(t){return this.test(K(t))},V(t)):!1},addClass:function(t){return t?this.each(function(e){if("className"in this){i=[];var n=K(this),o=Y(this,t,e,n);o.split(/\s+/g).forEach(function(t){r(this).hasClass(t)||i.push(t)},this),i.length&&K(this,n+(n?" ":"")+i.join(" "))}}):this},removeClass:function(t){return this.each(function(n){if("className"in this){if(t===e)return K(this,"");i=K(this),Y(this,t,n,i).split(/\s+/g).forEach(function(t){i=i.replace(V(t)," ")}),K(this,i.trim())}})},toggleClass:function(t,n){return t?this.each(function(i){var o=r(this),s=Y(this,t,i,K(this));s.split(/\s+/g).forEach(function(t){(n===e?!o.hasClass(t):n)?o.addClass(t):o.removeClass(t)})}):this},scrollTop:function(t){if(this.length){var n="scrollTop"in this[0];return t===e?n?this[0].scrollTop:this[0].pageYOffset:this.each(n?function(){this.scrollTop=t}:function(){this.scrollTo(this.scrollX,t)})}},scrollLeft:function(t){if(this.length){var n="scrollLeft"in this[0];return t===e?n?this[0].scrollLeft:this[0].pageXOffset:this.each(n?function(){this.scrollLeft=t}:function(){this.scrollTo(t,this.scrollY)})}},position:function(){if(this.length){var t=this[0],e=this.offsetParent(),n=this.offset(),i=g.test(e[0].nodeName)?{top:0,left:0}:e.offset();return n.top-=parseFloat(r(t).css("margin-top"))||0,n.left-=parseFloat(r(t).css("margin-left"))||0,i.top+=parseFloat(r(e[0]).css("border-top-width"))||0,i.left+=parseFloat(r(e[0]).css("border-left-width"))||0,{top:n.top-i.top,left:n.left-i.left}}},offsetParent:function(){return this.map(function(){for(var t=this.offsetParent||f.body;t&&!g.test(t.nodeName)&&"static"==r(t).css("position");)t=t.offsetParent;return t})}},r.fn.detach=r.fn.remove,["width","height"].forEach(function(t){var n=t.replace(/./,function(t){return t[0].toUpperCase()});r.fn[t]=function(i){var o,s=this[0];return i===e?k(s)?s["inner"+n]:M(s)?s.documentElement["scroll"+n]:(o=this.offset())&&o[t]:this.each(function(e){s=r(this),s.css(t,Y(this,i,e,s[t]()))})}}),x.forEach(function(n,i){var o=i%2;r.fn[n]=function(){var n,a,s=r.map(arguments,function(t){var i=[];return n=$(t),"array"==n?(t.forEach(function(t){return t.nodeType!==e?i.push(t):r.zepto.isZ(t)?i=i.concat(t.get()):void(i=i.concat(N.fragment(t)))}),i):"object"==n||null==t?t:N.fragment(t)}),u=this.length>1;return s.length<1?this:this.each(function(e,n){a=o?n:n.parentNode,n=0==i?n.nextSibling:1==i?n.firstChild:2==i?n:null;var c=r.contains(f.documentElement,a);s.forEach(function(e){if(u)e=e.cloneNode(!0);else if(!a)return r(e).remove();a.insertBefore(e,n),c&&tt(e,function(e){if(!(null==e.nodeName||"SCRIPT"!==e.nodeName.toUpperCase()||e.type&&"text/javascript"!==e.type||e.src)){var n=e.ownerDocument?e.ownerDocument.defaultView:t;n.eval.call(n,e.innerHTML)}})})})},r.fn[o?n+"To":"insert"+(i?"Before":"After")]=function(t){return r(t)[n](this),this}}),N.Z.prototype=X.prototype=r.fn,N.uniq=P,N.deserializeValue=Q,r.zepto=N,r}();return t.Zepto=e,void 0===t.$&&(t.$=e),function(e){function h(t){return t._zid||(t._zid=n++)}function p(t,e,n,r){if(e=d(e),e.ns)var i=m(e.ns);return(a[h(t)]||[]).filter(function(t){return t&&(!e.e||t.e==e.e)&&(!e.ns||i.test(t.ns))&&(!n||h(t.fn)===h(n))&&(!r||t.sel==r)})}function d(t){var e=(""+t).split(".");return{e:e[0],ns:e.slice(1).sort().join(" ")}}function m(t){return new RegExp("(?:^| )"+t.replace(" "," .* ?")+"(?: |$)")}function g(t,e){return t.del&&!f&&t.e in c||!!e}function v(t){return l[t]||f&&c[t]||t}function y(t,n,i,o,s,u,f){var c=h(t),p=a[c]||(a[c]=[]);n.split(/\s/).forEach(function(n){if("ready"==n)return e(document).ready(i);var a=d(n);a.fn=i,a.sel=s,a.e in l&&(i=function(t){var n=t.relatedTarget;return!n||n!==this&&!e.contains(this,n)?a.fn.apply(this,arguments):void 0}),a.del=u;var c=u||i;a.proxy=function(e){if(e=T(e),!e.isImmediatePropagationStopped()){e.data=o;var n=c.apply(t,e._args==r?[e]:[e].concat(e._args));return n===!1&&(e.preventDefault(),e.stopPropagation()),n}},a.i=p.length,p.push(a),"addEventListener"in t&&t.addEventListener(v(a.e),a.proxy,g(a,f))})}function x(t,e,n,r,i){var o=h(t);(e||"").split(/\s/).forEach(function(e){p(t,e,n,r).forEach(function(e){delete a[o][e.i],"removeEventListener"in t&&t.removeEventListener(v(e.e),e.proxy,g(e,i))})})}function T(t,n){return(n||!t.isDefaultPrevented)&&(n||(n=t),e.each(w,function(e,r){var i=n[e];t[e]=function(){return this[r]=b,i&&i.apply(n,arguments)},t[r]=E}),t.timeStamp||(t.timeStamp=Date.now()),(n.defaultPrevented!==r?n.defaultPrevented:"returnValue"in n?n.returnValue===!1:n.getPreventDefault&&n.getPreventDefault())&&(t.isDefaultPrevented=b)),t}function S(t){var e,n={originalEvent:t};for(e in t)j.test(e)||t[e]===r||(n[e]=t[e]);return T(n,t)}var r,n=1,i=Array.prototype.slice,o=e.isFunction,s=function(t){return"string"==typeof t},a={},u={},f="onfocusin"in t,c={focus:"focusin",blur:"focusout"},l={mouseenter:"mouseover",mouseleave:"mouseout"};u.click=u.mousedown=u.mouseup=u.mousemove="MouseEvents",e.event={add:y,remove:x},e.proxy=function(t,n){var r=2 in arguments&&i.call(arguments,2);if(o(t)){var a=function(){return t.apply(n,r?r.concat(i.call(arguments)):arguments)};return a._zid=h(t),a}if(s(n))return r?(r.unshift(t[n],t),e.proxy.apply(null,r)):e.proxy(t[n],t);throw new TypeError("expected function")},e.fn.bind=function(t,e,n){return this.on(t,e,n)},e.fn.unbind=function(t,e){return this.off(t,e)},e.fn.one=function(t,e,n,r){return this.on(t,e,n,r,1)};var b=function(){return!0},E=function(){return!1},j=/^([A-Z]|returnValue$|layer[XY]$|webkitMovement[XY]$)/,w={preventDefault:"isDefaultPrevented",stopImmediatePropagation:"isImmediatePropagationStopped",stopPropagation:"isPropagationStopped"};e.fn.delegate=function(t,e,n){return this.on(e,t,n)},e.fn.undelegate=function(t,e,n){return this.off(e,t,n)},e.fn.live=function(t,n){return e(document.body).delegate(this.selector,t,n),this},e.fn.die=function(t,n){return e(document.body).undelegate(this.selector,t,n),this},e.fn.on=function(t,n,a,u,f){var c,l,h=this;return t&&!s(t)?(e.each(t,function(t,e){h.on(t,n,a,e,f)}),h):(s(n)||o(u)||u===!1||(u=a,a=n,n=r),(u===r||a===!1)&&(u=a,a=r),u===!1&&(u=E),h.each(function(r,o){f&&(c=function(t){return x(o,t.type,u),u.apply(this,arguments)}),n&&(l=function(t){var r,s=e(t.target).closest(n,o).get(0);return s&&s!==o?(r=e.extend(S(t),{currentTarget:s,liveFired:o}),(c||u).apply(s,[r].concat(i.call(arguments,1)))):void 0}),y(o,t,u,a,n,l||c)}))},e.fn.off=function(t,n,i){var a=this;return t&&!s(t)?(e.each(t,function(t,e){a.off(t,n,e)}),a):(s(n)||o(i)||i===!1||(i=n,n=r),i===!1&&(i=E),a.each(function(){x(this,t,i,n)}))},e.fn.trigger=function(t,n){return t=s(t)||e.isPlainObject(t)?e.Event(t):T(t),t._args=n,this.each(function(){t.type in c&&"function"==typeof this[t.type]?this[t.type]():"dispatchEvent"in this?this.dispatchEvent(t):e(this).triggerHandler(t,n)})},e.fn.triggerHandler=function(t,n){var r,i;return this.each(function(o,a){r=S(s(t)?e.Event(t):t),r._args=n,r.target=a,e.each(p(a,t.type||t),function(t,e){return i=e.proxy(r),r.isImmediatePropagationStopped()?!1:void 0})}),i},"focusin focusout focus blur load resize scroll unload click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select keydown keypress keyup error".split(" ").forEach(function(t){e.fn[t]=function(e){return 0 in arguments?this.bind(t,e):this.trigger(t)}}),e.Event=function(t,e){s(t)||(e=t,t=e.type);var n=document.createEvent(u[t]||"Events"),r=!0;if(e)for(var i in e)"bubbles"==i?r=!!e[i]:n[i]=e[i];return n.initEvent(t,r,!0),T(n)}}(e),function(e){function p(t,n,r){var i=e.Event(n);return e(t).trigger(i,r),!i.isDefaultPrevented()}function d(t,e,n,i){return t.global?p(e||r,n,i):void 0}function m(t){t.global&&0===e.active++&&d(t,null,"ajaxStart")}function g(t){t.global&&!--e.active&&d(t,null,"ajaxStop")}function v(t,e){var n=e.context;return e.beforeSend.call(n,t,e)===!1||d(e,n,"ajaxBeforeSend",[t,e])===!1?!1:void d(e,n,"ajaxSend",[t,e])}function y(t,e,n,r){var i=n.context,o="success";n.success.call(i,t,o,e),r&&r.resolveWith(i,[t,o,e]),d(n,i,"ajaxSuccess",[e,n,t]),b(o,e,n)}function x(t,e,n,r,i){var o=r.context;r.error.call(o,n,e,t),i&&i.rejectWith(o,[n,e,t]),d(r,o,"ajaxError",[n,r,t||e]),b(e,n,r)}function b(t,e,n){var r=n.context;n.complete.call(r,e,t),d(n,r,"ajaxComplete",[e,n]),g(n)}function E(t,e,n){if(n.dataFilter==j)return t;var r=n.context;return n.dataFilter.call(r,t,e)}function j(){}function w(t){return t&&(t=t.split(";",2)[0]),t&&(t==c?"html":t==f?"json":a.test(t)?"script":u.test(t)&&"xml")||"text"}function T(t,e){return""==e?t:(t+"&"+e).replace(/[&?]{1,2}/,"?")}function S(t){t.processData&&t.data&&"string"!=e.type(t.data)&&(t.data=e.param(t.data,t.traditional)),!t.data||t.type&&"GET"!=t.type.toUpperCase()&&"jsonp"!=t.dataType||(t.url=T(t.url,t.data),t.data=void 0)}function C(t,n,r,i){return e.isFunction(n)&&(i=r,r=n,n=void 0),e.isFunction(r)||(i=r,r=void 0),{url:t,data:n,success:r,dataType:i}}function O(t,n,r,i){var o,s=e.isArray(n),a=e.isPlainObject(n);e.each(n,function(n,u){o=e.type(u),i&&(n=r?i:i+"["+(a||"object"==o||"array"==o?n:"")+"]"),!i&&s?t.add(u.name,u.value):"array"==o||!r&&"object"==o?O(t,u,r,n):t.add(n,u)})}var i,o,n=+new Date,r=t.document,s=/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi,a=/^(?:text|application)\/javascript/i,u=/^(?:text|application)\/xml/i,f="application/json",c="text/html",l=/^\s*$/,h=r.createElement("a");h.href=t.location.href,e.active=0,e.ajaxJSONP=function(i,o){if(!("type"in i))return e.ajax(i);var c,p,s=i.jsonpCallback,a=(e.isFunction(s)?s():s)||"Zepto"+n++,u=r.createElement("script"),f=t[a],l=function(t){e(u).triggerHandler("error",t||"abort")},h={abort:l};return o&&o.promise(h),e(u).on("load error",function(n,r){clearTimeout(p),e(u).off().remove(),"error"!=n.type&&c?y(c[0],h,i,o):x(null,r||"error",h,i,o),t[a]=f,c&&e.isFunction(f)&&f(c[0]),f=c=void 0}),v(h,i)===!1?(l("abort"),h):(t[a]=function(){c=arguments},u.src=i.url.replace(/\?(.+)=\?/,"?$1="+a),r.head.appendChild(u),i.timeout>0&&(p=setTimeout(function(){l("timeout")},i.timeout)),h)},e.ajaxSettings={type:"GET",beforeSend:j,success:j,error:j,complete:j,context:null,global:!0,xhr:function(){return new t.XMLHttpRequest},accepts:{script:"text/javascript, application/javascript, application/x-javascript",json:f,xml:"application/xml, text/xml",html:c,text:"text/plain"},crossDomain:!1,timeout:0,processData:!0,cache:!0,dataFilter:j},e.ajax=function(n){var u,f,s=e.extend({},n||{}),a=e.Deferred&&e.Deferred();for(i in e.ajaxSettings)void 0===s[i]&&(s[i]=e.ajaxSettings[i]);m(s),s.crossDomain||(u=r.createElement("a"),u.href=s.url,u.href=u.href,s.crossDomain=h.protocol+"//"+h.host!=u.protocol+"//"+u.host),s.url||(s.url=t.location.toString()),(f=s.url.indexOf("#"))>-1&&(s.url=s.url.slice(0,f)),S(s);var c=s.dataType,p=/\?.+=\?/.test(s.url);if(p&&(c="jsonp"),s.cache!==!1&&(n&&n.cache===!0||"script"!=c&&"jsonp"!=c)||(s.url=T(s.url,"_="+Date.now())),"jsonp"==c)return p||(s.url=T(s.url,s.jsonp?s.jsonp+"=?":s.jsonp===!1?"":"callback=?")),e.ajaxJSONP(s,a);var P,d=s.accepts[c],g={},b=function(t,e){g[t.toLowerCase()]=[t,e]},C=/^([\w-]+:)\/\//.test(s.url)?RegExp.$1:t.location.protocol,N=s.xhr(),O=N.setRequestHeader;if(a&&a.promise(N),s.crossDomain||b("X-Requested-With","XMLHttpRequest"),b("Accept",d||"*/*"),(d=s.mimeType||d)&&(d.indexOf(",")>-1&&(d=d.split(",",2)[0]),N.overrideMimeType&&N.overrideMimeType(d)),(s.contentType||s.contentType!==!1&&s.data&&"GET"!=s.type.toUpperCase())&&b("Content-Type",s.contentType||"application/x-www-form-urlencoded"),s.headers)for(o in s.headers)b(o,s.headers[o]);if(N.setRequestHeader=b,N.onreadystatechange=function(){if(4==N.readyState){N.onreadystatechange=j,clearTimeout(P);var t,n=!1;if(N.status>=200&&N.status<300||304==N.status||0==N.status&&"file:"==C){if(c=c||w(s.mimeType||N.getResponseHeader("content-type")),"arraybuffer"==N.responseType||"blob"==N.responseType)t=N.response;else{t=N.responseText;try{t=E(t,c,s),"script"==c?(1,eval)(t):"xml"==c?t=N.responseXML:"json"==c&&(t=l.test(t)?null:e.parseJSON(t))}catch(r){n=r}if(n)return x(n,"parsererror",N,s,a)}y(t,N,s,a)}else x(N.statusText||null,N.status?"error":"abort",N,s,a)}},v(N,s)===!1)return N.abort(),x(null,"abort",N,s,a),N;var A="async"in s?s.async:!0;if(N.open(s.type,s.url,A,s.username,s.password),s.xhrFields)for(o in s.xhrFields)N[o]=s.xhrFields[o];for(o in g)O.apply(N,g[o]);return s.timeout>0&&(P=setTimeout(function(){N.onreadystatechange=j,N.abort(),x(null,"timeout",N,s,a)},s.timeout)),N.send(s.data?s.data:null),N},e.get=function(){return e.ajax(C.apply(null,arguments))},e.post=function(){var t=C.apply(null,arguments);return t.type="POST",e.ajax(t)},e.getJSON=function(){var t=C.apply(null,arguments);return t.dataType="json",e.ajax(t)},e.fn.load=function(t,n,r){if(!this.length)return this;var a,i=this,o=t.split(/\s/),u=C(t,n,r),f=u.success;return o.length>1&&(u.url=o[0],a=o[1]),u.success=function(t){i.html(a?e("<div>").html(t.replace(s,"")).find(a):t),f&&f.apply(i,arguments)},e.ajax(u),this};var N=encodeURIComponent;e.param=function(t,n){var r=[];return r.add=function(t,n){e.isFunction(n)&&(n=n()),null==n&&(n=""),this.push(N(t)+"="+N(n))},O(r,t,n),r.join("&").replace(/%20/g,"+")}}(e),function(t){t.fn.serializeArray=function(){var e,n,r=[],i=function(t){return t.forEach?t.forEach(i):void r.push({name:e,value:t})};return this[0]&&t.each(this[0].elements,function(r,o){n=o.type,e=o.name,e&&"fieldset"!=o.nodeName.toLowerCase()&&!o.disabled&&"submit"!=n&&"reset"!=n&&"button"!=n&&"file"!=n&&("radio"!=n&&"checkbox"!=n||o.checked)&&i(t(o).val())}),r},t.fn.serialize=function(){var t=[];return this.serializeArray().forEach(function(e){t.push(encodeURIComponent(e.name)+"="+encodeURIComponent(e.value))}),t.join("&")},t.fn.submit=function(e){if(0 in arguments)this.bind("submit",e);else if(this.length){var n=t.Event("submit");this.eq(0).trigger(n),n.isDefaultPrevented()||this.get(0).submit()}return this}}(e),function(){try{getComputedStyle(void 0)}catch(e){var n=getComputedStyle;t.getComputedStyle=function(t,e){try{return n(t,e)}catch(r){return null}}}}(),e});
diff --git a/static/fonts/fonts.css b/static/fonts/fonts.css
new file mode 100644
index 000000000..785fe33d3
--- /dev/null
+++ b/static/fonts/fonts.css
@@ -0,0 +1,129 @@
+/*!
+ * Font Awesome Free 5.1.0 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
+ */
+ @font-face{
+  font-family:"Font Awesome 5 Free";
+  font-style:normal;
+  font-weight:900;
+  src:url(../fonts/fontawesome/fa-solid-900.eot);
+  src:url(../fonts/fontawesome/fa-solid-900.eot?#iefix) format("embedded-opentype"),
+      url(../fonts/fontawesome/fa-solid-900.woff2) format("woff2"),
+      url(../fonts/fontawesome/fa-solid-900.woff) format("woff"),
+      url(../fonts/fontawesome/fa-solid-900.ttf) format("truetype"),
+      url(../fonts/fontawesome/fa-solid-900.svg#fontawesome) format("svg");
+}
+.fa,.fas{
+  font-family:"Font Awesome 5 Free";
+  font-weight:900;
+}
+
+@font-face {
+	font-family: 'Source Sans Pro';
+	font-style: normal;
+	font-weight: 300;
+	src:
+		local('Source Sans Pro Light'),
+		local('SourceSansPro-Light'),
+		/* from https://fonts.gstatic.com/s/sourcesanspro/v11/6xKydSBYKcSV-LCoeQqfX1RYOo3ik4zwlxdu.woff2 */
+		url('../fonts/sourcesanspro/Source_Sans_Pro_300.woff2') format('woff2'),
+		/* from https://fonts.gstatic.com/s/sourcesanspro/v11/6xKydSBYKcSV-LCoeQqfX1RYOo3ik4zwlxdo.woff */
+		url('../fonts/sourcesanspro/Source_Sans_Pro_300.woff') format('woff'),
+		/* from https://fonts.gstatic.com/s/sourcesanspro/v11/6xKydSBYKcSV-LCoeQqfX1RYOo3ik4zwlxdq.eot */
+		url('../fonts/sourcesanspro/Source_Sans_Pro_300.eot?#iefix') format('embedded-opentype'),
+		/* from https://fonts.gstatic.com/l/font?kit=6xKydSBYKcSV-LCoeQqfX1RYOo3ik4zwlxdp&skey=e2b26fc7e9e1ade8&v=v11#SourceSansPro */
+		url('../fonts/sourcesanspro/Source_Sans_Pro_300.svg#SourceSansPro') format('svg'),
+		/* from https://fonts.gstatic.com/s/sourcesanspro/v11/6xKydSBYKcSV-LCoeQqfX1RYOo3ik4zwlxdr.ttf */
+		url('../fonts/sourcesanspro/Source_Sans_Pro_300.ttf') format('truetype');
+}
+@font-face {
+	font-family: 'Source Sans Pro';
+	font-style: normal;
+	font-weight: 400;
+	src:
+		local('Source Sans Pro Regular'),
+		local('SourceSansPro-Regular'),
+		/* from https://fonts.gstatic.com/s/sourcesanspro/v11/6xK3dSBYKcSV-LCoeQqfX1RYOo3qOK7l.woff2 */
+		url('../fonts/sourcesanspro/Source_Sans_Pro_400.woff2') format('woff2'),
+		/* from https://fonts.gstatic.com/s/sourcesanspro/v11/6xK3dSBYKcSV-LCoeQqfX1RYOo3qOK7j.woff */
+		url('../fonts/sourcesanspro/Source_Sans_Pro_400.woff') format('woff'),
+		/* from https://fonts.gstatic.com/s/sourcesanspro/v11/6xK3dSBYKcSV-LCoeQqfX1RYOo3qOK7h.eot */
+		url('../fonts/sourcesanspro/Source_Sans_Pro_400.eot?#iefix') format('embedded-opentype'),
+		/* from https://fonts.gstatic.com/l/font?kit=6xK3dSBYKcSV-LCoeQqfX1RYOo3qOK7i&skey=1e026b1c27170b9b&v=v11#SourceSansPro */
+		url('../fonts/sourcesanspro/Source_Sans_Pro_400.svg#SourceSansPro') format('svg'),
+		/* from https://fonts.gstatic.com/s/sourcesanspro/v11/6xK3dSBYKcSV-LCoeQqfX1RYOo3qOK7g.ttf */
+		url('../fonts/sourcesanspro/Source_Sans_Pro_400.ttf') format('truetype');
+}
+@font-face {
+	font-family: 'Source Sans Pro';
+	font-style: normal;
+	font-weight: 600;
+	src:
+		local('Source Sans Pro SemiBold'),
+		local('SourceSansPro-SemiBold'),
+		/* from https://fonts.gstatic.com/s/sourcesanspro/v11/6xKydSBYKcSV-LCoeQqfX1RYOo3i54rwlxdu.woff2 */
+		url('../fonts/sourcesanspro/Source_Sans_Pro_600.woff2') format('woff2'),
+		/* from https://fonts.gstatic.com/s/sourcesanspro/v11/6xKydSBYKcSV-LCoeQqfX1RYOo3i54rwlxdo.woff */
+		url('../fonts/sourcesanspro/Source_Sans_Pro_600.woff') format('woff'),
+		/* from https://fonts.gstatic.com/s/sourcesanspro/v11/6xKydSBYKcSV-LCoeQqfX1RYOo3i54rwlxdq.eot */
+		url('../fonts/sourcesanspro/Source_Sans_Pro_600.eot?#iefix') format('embedded-opentype'),
+		/* from https://fonts.gstatic.com/l/font?kit=6xKydSBYKcSV-LCoeQqfX1RYOo3i54rwlxdp&skey=227a890402fab339&v=v11#SourceSansPro */
+		url('../fonts/sourcesanspro/Source_Sans_Pro_600.svg#SourceSansPro') format('svg'),
+		/* from https://fonts.gstatic.com/s/sourcesanspro/v11/6xKydSBYKcSV-LCoeQqfX1RYOo3i54rwlxdr.ttf */
+		url('../fonts/sourcesanspro/Source_Sans_Pro_600.ttf') format('truetype');
+}
+@font-face {
+	font-family: 'Source Sans Pro';
+	font-style: normal;
+	font-weight: 900;
+	src:
+		local('Source Sans Pro Black'),
+		local('SourceSansPro-Black'),
+		/* from https://fonts.gstatic.com/s/sourcesanspro/v11/6xKydSBYKcSV-LCoeQqfX1RYOo3iu4nwlxdu.woff2 */
+		url('../fonts/sourcesanspro/Source_Sans_Pro_900.woff2') format('woff2'),
+		/* from https://fonts.gstatic.com/s/sourcesanspro/v11/6xKydSBYKcSV-LCoeQqfX1RYOo3iu4nwlxdo.woff */
+		url('../fonts/sourcesanspro/Source_Sans_Pro_900.woff') format('woff'),
+		/* from https://fonts.gstatic.com/s/sourcesanspro/v11/6xKydSBYKcSV-LCoeQqfX1RYOo3iu4nwlxdq.eot */
+		url('../fonts/sourcesanspro/Source_Sans_Pro_900.eot?#iefix') format('embedded-opentype'),
+		/* from https://fonts.gstatic.com/l/font?kit=6xKydSBYKcSV-LCoeQqfX1RYOo3iu4nwlxdp&skey=cf4dfcb31d72fb0a&v=v11#SourceSansPro */
+		url('../fonts/sourcesanspro/Source_Sans_Pro_900.svg#SourceSansPro') format('svg'),
+		/* from https://fonts.gstatic.com/s/sourcesanspro/v11/6xKydSBYKcSV-LCoeQqfX1RYOo3iu4nwlxdr.ttf */
+		url('../fonts/sourcesanspro/Source_Sans_Pro_900.ttf') format('truetype');
+}
+
+@font-face {
+	font-family: 'Roboto';
+	font-style: normal;
+	font-weight: 300;
+	src:
+		local('Roboto Light'),
+		local('Roboto-Light'),
+		/* from https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmSU5fBBc4.woff2 */
+		url('../fonts/roboto/Roboto_300.woff2') format('woff2'),
+		/* from https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmSU5fBBc-.woff */
+		url('../fonts/roboto/Roboto_300.woff') format('woff'),
+		/* from https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmSU5fBBc8.eot */
+		url('../fonts/roboto/Roboto_300.eot?#iefix') format('embedded-opentype'),
+		/* from https://fonts.gstatic.com/l/font?kit=KFOlCnqEu92Fr1MmSU5fBBc_&skey=11ce8ad5f54705ca&v=v18#Roboto */
+		url('../fonts/roboto/Roboto_300.svg#Roboto') format('svg'),
+		/* from https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmSU5fBBc9.ttf */
+		url('../fonts/roboto/Roboto_300.ttf') format('truetype');
+}
+@font-face {
+	font-family: 'Roboto';
+	font-style: normal;
+	font-weight: 400;
+	src:
+		local('Roboto'),
+		local('Roboto-Regular'),
+		/* from https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu4mxK.woff2 */
+		url('../fonts/roboto/Roboto_400.woff2') format('woff2'),
+		/* from https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu4mxM.woff */
+		url('../fonts/roboto/Roboto_400.woff') format('woff'),
+		/* from https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu4mxO.eot */
+		url('../fonts/roboto/Roboto_400.eot?#iefix') format('embedded-opentype'),
+		/* from https://fonts.gstatic.com/l/font?kit=KFOmCnqEu92Fr1Mu4mxN&skey=a0a0114a1dcab3ac&v=v18#Roboto */
+		url('../fonts/roboto/Roboto_400.svg#Roboto') format('svg'),
+		/* from https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu4mxP.ttf */
+		url('../fonts/roboto/Roboto_400.ttf') format('truetype');
+}