From 02fa603090d6e157fcdedaac8808c5ff748da3e6 Mon Sep 17 00:00:00 2001
From: Michael Weimann <mail@michael-weimann.eu>
Date: Sat, 17 Apr 2021 14:47:01 +0200
Subject: [PATCH] migrate to scss/bs5

Signed-off-by: Michael Weimann <mail@michael-weimann.eu>
---
 package.json                                  |   10 +-
 .../assets/themes/{base.less => base.scss}    |   94 +-
 ...{cyborg_styles.less => cyborg_styles.scss} |   34 +-
 resources/assets/themes/cyborg_variables.less |  873 --------------
 resources/assets/themes/cyborg_variables.scss |  872 ++++++++++++++
 .../assets/themes/{error.less => error.scss}  |    0
 resources/assets/themes/theme0.less           |    2 -
 resources/assets/themes/theme0.scss           |    2 +
 resources/assets/themes/theme1.less           |   98 --
 resources/assets/themes/theme1.scss           |   98 ++
 resources/assets/themes/theme10.less          |   57 -
 resources/assets/themes/theme10.scss          |   57 +
 resources/assets/themes/theme11.less          |  104 --
 resources/assets/themes/theme11.scss          |  104 ++
 resources/assets/themes/theme12.less          |  107 --
 resources/assets/themes/theme12.scss          |  107 ++
 resources/assets/themes/theme13.less          |  164 ---
 resources/assets/themes/theme13.scss          |  164 +++
 resources/assets/themes/theme14.less          |  165 ---
 resources/assets/themes/theme14.scss          |  165 +++
 resources/assets/themes/theme15.less          | 1045 -----------------
 resources/assets/themes/theme15.scss          | 1043 ++++++++++++++++
 resources/assets/themes/theme2.less           |   28 -
 resources/assets/themes/theme2.scss           |   28 +
 resources/assets/themes/theme3.less           |   56 -
 resources/assets/themes/theme3.scss           |   56 +
 resources/assets/themes/theme4.less           |  112 --
 resources/assets/themes/theme4.scss           |  112 ++
 resources/assets/themes/theme5.less           |   32 -
 resources/assets/themes/theme5.scss           |   32 +
 resources/assets/themes/theme6.less           |  152 ---
 resources/assets/themes/theme6.scss           |  152 +++
 resources/assets/themes/theme7.less           |  280 -----
 resources/assets/themes/theme7.scss           |  280 +++++
 resources/assets/themes/theme8.less           |   57 -
 resources/assets/themes/theme8.scss           |   57 +
 resources/assets/themes/theme9.less           |   57 -
 resources/assets/themes/theme9.scss           |   57 +
 resources/views/pages/design.twig             |    7 +-
 webpack.config.js                             |    8 +-
 yarn.lock                                     |  256 ++--
 41 files changed, 3594 insertions(+), 3590 deletions(-)
 rename resources/assets/themes/{base.less => base.scss} (72%)
 rename resources/assets/themes/{cyborg_styles.less => cyborg_styles.scss} (87%)
 delete mode 100644 resources/assets/themes/cyborg_variables.less
 create mode 100644 resources/assets/themes/cyborg_variables.scss
 rename resources/assets/themes/{error.less => error.scss} (100%)
 delete mode 100644 resources/assets/themes/theme0.less
 create mode 100644 resources/assets/themes/theme0.scss
 delete mode 100644 resources/assets/themes/theme1.less
 create mode 100644 resources/assets/themes/theme1.scss
 delete mode 100644 resources/assets/themes/theme10.less
 create mode 100644 resources/assets/themes/theme10.scss
 delete mode 100644 resources/assets/themes/theme11.less
 create mode 100644 resources/assets/themes/theme11.scss
 delete mode 100644 resources/assets/themes/theme12.less
 create mode 100644 resources/assets/themes/theme12.scss
 delete mode 100644 resources/assets/themes/theme13.less
 create mode 100644 resources/assets/themes/theme13.scss
 delete mode 100644 resources/assets/themes/theme14.less
 create mode 100644 resources/assets/themes/theme14.scss
 delete mode 100644 resources/assets/themes/theme15.less
 create mode 100644 resources/assets/themes/theme15.scss
 delete mode 100644 resources/assets/themes/theme2.less
 create mode 100644 resources/assets/themes/theme2.scss
 delete mode 100644 resources/assets/themes/theme3.less
 create mode 100644 resources/assets/themes/theme3.scss
 delete mode 100644 resources/assets/themes/theme4.less
 create mode 100644 resources/assets/themes/theme4.scss
 delete mode 100644 resources/assets/themes/theme5.less
 create mode 100644 resources/assets/themes/theme5.scss
 delete mode 100644 resources/assets/themes/theme6.less
 create mode 100644 resources/assets/themes/theme6.scss
 delete mode 100644 resources/assets/themes/theme7.less
 create mode 100644 resources/assets/themes/theme7.scss
 delete mode 100644 resources/assets/themes/theme8.less
 create mode 100644 resources/assets/themes/theme8.scss
 delete mode 100644 resources/assets/themes/theme9.less
 create mode 100644 resources/assets/themes/theme9.scss

diff --git a/package.json b/package.json
index c05d1af9..1340bf7d 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,8 @@
     "build:watch": "webpack --watch"
   },
   "dependencies": {
-    "bootstrap": "^3",
+    "@popperjs/core": "^2.9.2",
+    "bootstrap": "5.0.0-beta3",
     "chart.js": "^2.9.3",
     "core-js": "^3.6.5",
     "eonasdan-bootstrap-datetimepicker": "^4.17.47",
@@ -20,8 +21,7 @@
     "jquery-ui": "^1.11.2",
     "moment": "^2.27.0",
     "moment-timezone": "^0.5.31",
-    "select2": "^4.0.13",
-    "select2-bootstrap-theme": "0.1.0-beta.10"
+    "select2": "^4.0.13"
   },
   "devDependencies": {
     "@babel/core": "^7.11.5",
@@ -31,8 +31,6 @@
     "css-loader": "^5.2.2",
     "css-minimizer-webpack-plugin": "^2.0.0",
     "file-loader": "^6.1.0",
-    "less": "^4.0.0",
-    "less-loader": "^8.1.1",
     "mini-css-extract-plugin": "^1.4.1",
     "mkdirp": "^1.0.4",
     "npm-run-all": "^4.1.3",
@@ -40,6 +38,8 @@
     "postcss-loader": "^5.2.0",
     "postcss-preset-env": "^6.7.0",
     "rimraf": "^3.0.2",
+    "sass": "^1.32.8",
+    "sass-loader": "^10.1.1",
     "style-loader": "^2.0.0",
     "terser-webpack-plugin": "^5.1.1",
     "webpack": "^5.33.2",
diff --git a/resources/assets/themes/base.less b/resources/assets/themes/base.scss
similarity index 72%
rename from resources/assets/themes/base.less
rename to resources/assets/themes/base.scss
index 6df72737..bc2ea723 100644
--- a/resources/assets/themes/base.less
+++ b/resources/assets/themes/base.scss
@@ -1,7 +1,9 @@
-@import "../../../node_modules/bootstrap/less/bootstrap";
-@import "../../../node_modules/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css";
-@import "../../../node_modules/select2/dist/css/select2.min.css";
-@import "../../../node_modules/select2-bootstrap-theme/src/select2-bootstrap.less";
+// select 2 variables
+$cursor-disabled: false;
+
+@import "~bootstrap/scss/bootstrap";
+@import "~eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.css";
+@import "~select2/dist/css/select2.css";
 @import "error";
 
 body {
@@ -9,7 +11,7 @@ body {
 }
 
 .footer a {
-  color: @text-muted;
+  color: $text-muted;
 }
 
 .first {
@@ -25,7 +27,7 @@ body {
 }
 
 .icon-icon_angel {
-  background-color: @text-color;
+  background-color: $text-color;
 
   display: inline-block;
   width: 1em;
@@ -36,19 +38,19 @@ body {
 }
 
 a .icon-icon_angel {
-  background-color: @link-color;
+  background-color: $link-color;
 }
 
 .navbar .icon-icon_angel {
-  background-color: @navbar-default-link-disabled-color;
+  background-color: $navbar-default-link-disabled-color;
 }
 
 .navbar-brand .icon-icon_angel {
-  background-color: @navbar-default-brand-color;
+  background-color: $navbar-default-brand-color;
 }
 
 table a > .icon-icon_angel {
-  background-color: @text-color;
+  background-color: $text-color;
 }
 
 .table .form-group {
@@ -56,8 +58,6 @@ table a > .icon-icon_angel {
 }
 
 .stats {
-  .make-md-column(3);
-  .make-xs-column(6);
   font-size: 20px;
   height: 150px;
   text-align: center;
@@ -67,7 +67,7 @@ table a > .icon-icon_angel {
     font-weight: 200;
   }
 
-  @media (max-width: @screen-md) {
+  @media (max-width: $screen-md) {
     font-size: inherit;
     .number {
       font-size: 40px;
@@ -77,21 +77,21 @@ table a > .icon-icon_angel {
 
 
 .stats-danger {
-  color: @brand-danger;
+  color: $brand-danger;
 }
 
 .stats-warning {
-  color: @brand-warning;
+  color: $brand-warning;
 }
 
 .stats-success {
-  color: @brand-success;
+  color: $brand-success;
 }
 
 .dashboard-panel {
   position: relative;
   font-size: 20px;
-  color: @headings-color;
+  color: $headings-color;
 
   .panel-link {
     position: absolute;
@@ -101,7 +101,7 @@ table a > .icon-icon_angel {
     left: 0;
     text-decoration: none; /* No underlines on the link */
     z-index: 10; /* Places the link above everything else in the div */
-    background-color: @brand-primary; /* Fix to make div clickable in IE */
+    background-color: $brand-primary; /* Fix to make div clickable in IE */
     opacity: 0; /* Fix to make div clickable in IE */
     filter: alpha(opacity=1); /* Fix to make div clickable in IE */
   }
@@ -112,37 +112,37 @@ table a > .icon-icon_angel {
 }
 
 .panel-primary .panel-heading a {
-  color: @panel-primary-text;
-  background-color: @panel-primary-heading-bg;
+  color: $panel-primary-text;
+  background-color: $panel-primary-heading-bg;
 }
 
 .panel-default .panel-heading a {
-  color: @panel-default-text;
-  background-color: @panel-default-heading-bg;
+  color: $panel-default-text;
+  background-color: $panel-default-heading-bg;
 }
 
 .panel-info .panel-heading a {
-  color: @panel-info-text;
-  background-color: @panel-info-heading-bg;
+  color: $panel-info-text;
+  background-color: $panel-info-heading-bg;
 }
 
 .panel-success .panel-heading a {
-  color: @panel-success-text;
-  background-color: @panel-success-heading-bg;
+  color: $panel-success-text;
+  background-color: $panel-success-heading-bg;
 }
 
 .panel-warning .panel-heading a {
-  color: @panel-warning-text;
-  background-color: @panel-warning-heading-bg;
+  color: $panel-warning-text;
+  background-color: $panel-warning-heading-bg;
 }
 
 .panel-danger .panel-heading a {
-  color: @panel-danger-text;
-  background-color: @panel-danger-heading-bg;
+  color: $panel-danger-text;
+  background-color: $panel-danger-heading-bg;
 }
 
 .select2-dropdown {
-  background-color: @input-bg;
+  background-color: $input-bg;
 }
 
 .selection .checkbox {
@@ -157,39 +157,39 @@ table a > .icon-icon_angel {
   width: 100%;
 
   .lane {
-    background: @table-bg-accent;
+    background: $table-bg-accent;
     flex-grow: 1;
     min-width: 280px;
     width: 280px;
     flex-shrink: 1;
 
     .header {
-      background: @panel-bg;
-      border-bottom: 1px solid @table-border-color;
+      background: $panel-bg;
+      border-bottom: 1px solid $table-border-color;
       height: 30px;
       padding: 5px 5px 5px 16px;
     }
 
     .tick {
       height: 30px;
-      border-top: 1px solid darken(@table-bg-accent, 2%);
+      border-top: 1px solid darken($table-bg-accent, 2%);
     }
 
     .tick.hour {
-      border-top: 2px solid @table-border-color;
+      border-top: 2px solid $table-border-color;
       font-size: 0.9em;
       padding-left: 5px;
     }
 
     .tick.day {
-      border-top: 2px solid @brand-primary;
+      border-top: 2px solid $brand-primary;
       font-size: 0.9em;
       padding-left: 5px;
     }
   }
 
   .lane.time {
-    border-right: 1px solid @table-border-color;
+    border-right: 1px solid $table-border-color;
     flex-grow: 0;
     min-width: 50px;
     width: 50px;
@@ -251,11 +251,11 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
 }
 
 .inline-form-spacing {
-  margin-bottom: @form-group-margin-bottom;
+  margin-bottom: map-get($spacers, 3);
 }
 
 .user-settings .settings-menu ul {
-  margin-top: @line-height-computed;
+  margin-top: $line-height-computed;
 }
 
 span.ref-id[id] {
@@ -327,12 +327,12 @@ span.ref-id[id] {
   padding: 2px 6px;
   margin-top: 6px;
   margin-bottom: 4px;
-  max-height: @navbar-height;
+  max-height: $navbar-height;
 
   .icon {
-    border-color: @brand-primary;
+    border-color: $brand-primary;
     font-weight: bold;
-    color: @brand-primary;
+    color: $brand-primary;
     font-size: 25px;
     &-close {
       padding: 0 3px;
@@ -350,21 +350,21 @@ span.ref-id[id] {
 }
 
 
-@media screen and (max-width: @grid-float-breakpoint-max) {
+@media screen and (max-width: $grid-float-breakpoint-max) {
   #navbar-offcanvas {
     display: block;
     position: absolute;
     width: 90%;
-    height: calc( 100vh - @navbar-height);
+    height: calc(100vh - $navbar-height);
     max-height: unset;
     left: 101%;
-    top: @navbar-height + 1;
+    top: $navbar-height + 1;
     // extra padding because mobile Safari displays a bottom bar hiding parts of the menu
     padding-bottom: 75px;
 
     transition: left .3s ease-in-out;
 
-    background: @navbar-default-bg;
+    background: $navbar-default-bg;
     margin: 0 !important;   // Overridden in theme with high specifity:
     // .container > .navbar-header,
     // .container-fluid > .navbar-header,
diff --git a/resources/assets/themes/cyborg_styles.less b/resources/assets/themes/cyborg_styles.scss
similarity index 87%
rename from resources/assets/themes/cyborg_styles.less
rename to resources/assets/themes/cyborg_styles.scss
index d0e1776d..062ee71b 100644
--- a/resources/assets/themes/cyborg_styles.less
+++ b/resources/assets/themes/cyborg_styles.scss
@@ -53,27 +53,27 @@ THE SOFTWARE.
 
 .text-primary,
 .text-primary:hover {
-  color: @brand-primary;
+  color: $brand-primary;
 }
 
 .text-success,
 .text-success:hover {
-  color: @brand-success;
+  color: $brand-success;
 }
 
 .text-danger,
 .text-danger:hover {
-  color: @brand-danger;
+  color: $brand-danger;
 }
 
 .text-warning,
 .text-warning:hover {
-  color: @brand-warning;
+  color: $brand-warning;
 }
 
 .text-info,
 .text-info:hover {
-  color: @brand-info;
+  color: $brand-info;
 }
 
 // Tables =====================================================================
@@ -88,12 +88,12 @@ table,
   }
 
   .text-muted {
-    color: @text-muted;
+    color: $text-muted;
   }
 }
 
 .table-responsive > .table {
-  background-color: @table-bg;
+  background-color: $table-bg;
 }
 
 // Forms ======================================================================
@@ -102,13 +102,13 @@ table,
   .help-block,
   .control-label,
   .form-control-feedback {
-    color: @brand-warning;
+    color: $brand-warning;
   }
 
   .form-control,
   .form-control:focus,
   .input-group-addon {
-    border-color: @brand-warning;
+    border-color: $brand-warning;
   }
 }
 
@@ -116,13 +116,13 @@ table,
   .help-block,
   .control-label,
   .form-control-feedback {
-    color: @brand-danger;
+    color: $brand-danger;
   }
 
   .form-control,
   .form-control:focus,
   .input-group-addon {
-    border-color: @brand-danger;
+    border-color: $brand-danger;
   }
 }
 
@@ -130,13 +130,13 @@ table,
   .help-block,
   .control-label,
   .form-control-feedback {
-    color: @brand-success;
+    color: $brand-success;
   }
 
   .form-control,
   .form-control:focus,
   .input-group-addon {
-    border-color: @brand-success;
+    border-color: $brand-success;
   }
 }
 
@@ -158,7 +158,7 @@ table,
 
   .alert-link,
   a {
-    color: @alert-warning-text;
+    color: $alert-warning-text;
     text-decoration: underline;
   }
 
@@ -186,7 +186,7 @@ table,
 a.thumbnail:hover,
 a.thumbnail:focus,
 a.thumbnail.active {
-  border-color: @thumbnail-border;
+  border-color: $thumbnail-border;
 }
 
 .jumbotron {
@@ -198,6 +198,6 @@ a.thumbnail.active {
 
 // code tag
 code {
-  background-color: @input-bg-disabled;
-  color: @input-color;
+  background-color: $input-bg-disabled;
+  color: $input-color;
 }
diff --git a/resources/assets/themes/cyborg_variables.less b/resources/assets/themes/cyborg_variables.less
deleted file mode 100644
index 89bc1d84..00000000
--- a/resources/assets/themes/cyborg_variables.less
+++ /dev/null
@@ -1,873 +0,0 @@
-// cyborg_variables
-@import "../../../node_modules/bootstrap/less/variables";
-
-
-/*
-The MIT License (MIT)
-
-Copyright (c) 2013 Thomas Park
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in
-all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-THE SOFTWARE.
-*/
-
-// Cyborg 3.2.0
-// Variables
-// --------------------------------------------------
-
-//== Colors
-//
-//## Gray and brand colors for use across Bootstrap.
-  // needs change
-@gray-darker:            #222; // #222
-@gray-dark:              #333;   // #333
-@gray:                   #555; // #555
-@gray-light:             #999;   // #999
-@gray-lighter:           #eee; // #eee
-
-@brand-primary:         #99ba00;
-@brand-success:         #99ba00;
-@brand-info:            #0076ba;
-@brand-warning:         #ffc600;
-@brand-danger:          #d9534f;
-
-
-//== Scaffolding
-//
-//## Settings for some of the most global styles.
-
-//** Background color for `<body>`.
-@body-bg:               #060606;
-//** Global text color on `<body>`.
-@text-color:            @gray-light;
-
-//** Global textual link color.
-@link-color:            @brand-primary;
-//** Link hover color set via `darken()` function.
-@link-hover-color:      @link-color;
-
-
-//== Typography
-//
-//## Font, line-height, and color for body text, headings, and more.
-
-@font-family-serif:       Georgia, "Times New Roman", Times, serif;
-//** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
-@font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace;
-@font-family-base:        @font-family-sans-serif;
-
-@font-size-base:          14px;
-@font-size-large:         ceil((@font-size-base * 1.25)); // ~18px
-@font-size-small:         ceil((@font-size-base * 0.85)); // ~12px
-
-@font-size-h1:            34px;
-@font-size-h2:            24px;
-@font-size-h3:            20px;
-@font-size-h4:            20px;
-@font-size-h5:            20px;
-@font-size-h6:            16px;
-
-//** Unit-less `line-height` for use in components like buttons.
-@line-height-base:        1.428571429; // 20/14
-//** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
-@line-height-computed:    floor((@font-size-base * @line-height-base)); // ~20px
-
-//** By default, this inherits from the `<body>`.
-@headings-font-family:    @font-family-base;
-@headings-font-weight:    500;
-@headings-line-height:    1.1;
-@headings-color:          #fff;
-
-
-//== Iconography
-//
-//## Specify custom location and filename of the included Glyphicons icon font.
-//## Useful for those including Bootstrap via Bower.
-
-//** File name for all font files.
-@icon-font-name:          "glyphicons-halflings-regular";
-//** Element ID within SVG icon file.
-@icon-font-svg-id:        "glyphicons_halflingsregular";
-
-
-//== Components
-//
-//## Define common padding and border radius sizes and more.
-//## Values based on 14px text and 1.428 line-height (~20px to start).
-
-@padding-base-vertical:     8px;
-@padding-base-horizontal:   12px;
-
-@padding-large-vertical:    14px;
-@padding-large-horizontal:  16px;
-
-@padding-small-vertical:    5px;
-@padding-small-horizontal:  10px;
-
-@padding-xs-vertical:       1px;
-@padding-xs-horizontal:     5px;
-
-@line-height-large:         1.33;
-@line-height-small:         1.5;
-
-@border-radius-base:        4px;
-@border-radius-large:       6px;
-@border-radius-small:       3px;
-
-//** Global color for active items (e.g., navs or dropdowns).
-@component-active-color:    #fff;
-//** Global background color for active items (e.g., navs or dropdowns).
-@component-active-bg:       @brand-primary;
-
-//** Width of the `border` for generating carets that indicator dropdowns.
-@caret-width-base:          4px;
-//** Carets increase slightly in size for larger components.
-@caret-width-large:         5px;
-
-
-//== Tables
-//
-//## Customizes the `.table` component with basic values, each used across all table variations.
-
-//** Padding for `<th>`s and `<td>`s.
-@table-cell-padding:            8px;
-//** Padding for cells in `.table-condensed`.
-@table-condensed-cell-padding:  5px;
-
-//** Default background color used for all tables.
-@table-bg:                      darken(@gray-darker, 4%);
-//** Background color used for `.table-striped`.
-@table-bg-accent:               darken(@table-bg, 6%);
-//** Background color used for `.table-hover`.
-@table-bg-hover:                @gray-dark;
-@table-bg-active:               @table-bg-hover;
-
-//** Border color for table and cell borders.
-@table-border-color:            @gray-dark;
-
-
-//== Buttons
-//
-//## For each of Bootstrap's buttons, define text, background and border color.
-
-@btn-font-weight:                normal;
-
-@btn-default-color:              #000;
-@btn-default-bg:                 @gray-light;
-@btn-default-border:             darken(@btn-default-bg, 10%);
-
-@btn-primary-color:              @btn-default-color;
-@btn-primary-bg:                 @brand-primary;
-@btn-primary-border:             darken(@btn-primary-bg, 10%);
-
-@btn-success-color:              @btn-default-color;
-@btn-success-bg:                 @brand-success;
-@btn-success-border:             darken(@btn-success-bg, 10%);
-
-@btn-info-color:                 @btn-default-color;
-@btn-info-bg:                    @brand-info;
-@btn-info-border:                darken(@btn-info-bg, 10%);
-
-@btn-warning-color:              @btn-default-color;
-@btn-warning-bg:                 @brand-warning;
-@btn-warning-border:             darken(@btn-warning-bg, 10%);
-
-@btn-danger-color:               @btn-default-color;
-@btn-danger-bg:                  @brand-danger;
-@btn-danger-border:              darken(@btn-danger-bg, 10%);
-
-@btn-link-disabled-color:        @gray-light;
-
-
-//== Forms
-//
-//##
-
-//** `<input>` background color
-@input-bg:                       #000;
-//** `<input disabled>` background color
-@input-bg-disabled:              @gray-darker;
-
-//** Text color for `<input>`s
-@input-color:                    @text-color;
-//** `<input>` border color
-@input-border:                   @gray-dark;
-//** `<input>` border radius
-@input-border-radius:            @border-radius-base;
-//** Border color for inputs on focus
-@input-border-focus:             #66afe9;
-
-//** Placeholder text color
-@input-color-placeholder:        @gray-light;
-
-//** Default `.form-control` height
-@input-height-base:              (@line-height-computed + (@padding-base-vertical * 2) + 2);
-//** Large `.form-control` height
-@input-height-large:             (ceil(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2);
-//** Small `.form-control` height
-@input-height-small:             (floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2);
-
-@legend-color:                   @text-color;
-@legend-border-color:            @gray-dark;
-
-//** Background color for textual input addons
-@input-group-addon-bg:           @gray-light;
-//** Border color for textual input addons
-@input-group-addon-border-color: @input-border;
-
-
-//== Dropdowns
-//
-//## Dropdown menu container and contents.
-
-//** Background for the dropdown menu.
-@dropdown-bg:                    @gray-darker;
-//** Dropdown menu `border-color`.
-@dropdown-border:                rgba(255,255,255,0.1);
-//** Dropdown menu `border-color` **for IE8**.
-@dropdown-fallback-border:       #444;
-//** Divider color for between dropdown items.
-@dropdown-divider-bg:            rgba(255,255,255,0.1);
-
-//** Dropdown link text color.
-@dropdown-link-color:            #fff;
-//** Hover color for dropdown links.
-@dropdown-link-hover-color:      #fff;
-//** Hover background for dropdown links.
-@dropdown-link-hover-bg:         @dropdown-link-active-bg;
-
-//** Active dropdown menu item text color.
-@dropdown-link-active-color:     #fff;
-//** Active dropdown menu item background color.
-@dropdown-link-active-bg:        @component-active-bg;
-
-//** Disabled dropdown menu item background color.
-@dropdown-link-disabled-color:   @text-muted;
-
-//** Text color for headers within dropdown menus.
-@dropdown-header-color:          @text-muted;
-
-//** Deprecated `@dropdown-caret-color` as of v3.1.0
-@dropdown-caret-color:           #000;
-
-
-//-- Z-index master list
-//
-// Warning: Avoid customizing these values. They're used for a bird's eye view
-// of components dependent on the z-axis and are designed to all work together.
-//
-// Note: These variables are not generated into the Customizer.
-
-@zindex-navbar:            1000;
-@zindex-dropdown:          1000;
-@zindex-popover:           1060;
-@zindex-tooltip:           1070;
-@zindex-navbar-fixed:      1030;
-@zindex-modal-background:  1040;
-@zindex-modal:             1050;
-
-
-//== Media queries breakpoints
-//
-//## Define the breakpoints at which your layout will change, adapting to different screen sizes.
-
-// Extra small screen / phone
-//** Deprecated `@screen-xs` as of v3.0.1
-@screen-xs:                  480px;
-//** Deprecated `@screen-xs-min` as of v3.2.0
-@screen-xs-min:              @screen-xs;
-//** Deprecated `@screen-phone` as of v3.0.1
-@screen-phone:               @screen-xs-min;
-
-// Small screen / tablet
-//** Deprecated `@screen-sm` as of v3.0.1
-@screen-sm:                  768px;
-@screen-sm-min:              @screen-sm;
-//** Deprecated `@screen-tablet` as of v3.0.1
-@screen-tablet:              @screen-sm-min;
-
-// Medium screen / desktop
-//** Deprecated `@screen-md` as of v3.0.1
-@screen-md:                  992px;
-@screen-md-min:              @screen-md;
-//** Deprecated `@screen-desktop` as of v3.0.1
-@screen-desktop:             @screen-md-min;
-
-// Large screen / wide desktop
-//** Deprecated `@screen-lg` as of v3.0.1
-@screen-lg:                  1200px;
-@screen-lg-min:              @screen-lg;
-//** Deprecated `@screen-lg-desktop` as of v3.0.1
-@screen-lg-desktop:          @screen-lg-min;
-
-// So media queries don't overlap when required, provide a maximum
-@screen-xs-max:              (@screen-sm-min - 1);
-@screen-sm-max:              (@screen-md-min - 1);
-@screen-md-max:              (@screen-lg-min - 1);
-
-
-//== Grid system
-//
-//## Define your custom responsive grid.
-
-//** Number of columns in the grid.
-@grid-columns:              12;
-//** Padding between columns. Gets divided in half for the left and right.
-@grid-gutter-width:         30px;
-// Navbar collapse
-//** Point at which the navbar becomes uncollapsed.
-@grid-float-breakpoint:     @screen-sm-min;
-//** Point at which the navbar begins collapsing.
-@grid-float-breakpoint-max: (@grid-float-breakpoint - 1);
-
-
-//== Container sizes
-//
-//## Define the maximum width of `.container` for different screen sizes.
-
-// Small screen / tablet
-@container-tablet:             ((720px + @grid-gutter-width));
-//** For `@screen-sm-min` and up.
-@container-sm:                 @container-tablet;
-
-// Medium screen / desktop
-@container-desktop:            ((940px + @grid-gutter-width));
-//** For `@screen-md-min` and up.
-@container-md:                 @container-desktop;
-
-// Large screen / wide desktop
-@container-large-desktop:      ((1140px + @grid-gutter-width));
-//** For `@screen-lg-min` and up.
-@container-lg:                 @container-large-desktop;
-
-
-//== Navbar
-//
-//##
-
-// Basics of a navbar
-@navbar-height:                    50px;
-@navbar-margin-bottom:             @line-height-computed;
-@navbar-border-radius:             @border-radius-base;
-@navbar-padding-horizontal:        floor((@grid-gutter-width / 2));
-@navbar-padding-vertical:          ((@navbar-height - @line-height-computed) / 2);
-@navbar-collapse-max-height:       340px;
-
-@navbar-default-color:             @text-color;
-@navbar-default-bg:                @body-bg;
-@navbar-default-border:            @gray-dark;
-
-// Navbar links
-@navbar-default-link-color:                @text-color;
-@navbar-default-link-hover-color:          #fff;
-@navbar-default-link-hover-bg:             transparent;
-@navbar-default-link-active-color:         #fff;
-@navbar-default-link-active-bg:            transparent;
-@navbar-default-link-disabled-color:       @gray-light;
-@navbar-default-link-disabled-bg:          transparent;
-
-// Navbar brand label
-@navbar-default-brand-color:               #fff;
-@navbar-default-brand-hover-color:         #fff;
-@navbar-default-brand-hover-bg:            transparent;
-
-// Navbar toggle
-@navbar-default-toggle-hover-bg:           @gray-dark;
-@navbar-default-toggle-icon-bar-bg:        #ccc;
-@navbar-default-toggle-border-color:       @gray-dark;
-
-
-// Inverted navbar
-// Reset inverted navbar basics
-@navbar-inverse-color:                      @gray-light;
-@navbar-inverse-bg:                         @gray-darker;
-@navbar-inverse-border:                     darken(@navbar-inverse-bg, 10%);
-
-// Inverted navbar links
-@navbar-inverse-link-color:                 @gray-light;
-@navbar-inverse-link-hover-color:           #fff;
-@navbar-inverse-link-hover-bg:              transparent;
-@navbar-inverse-link-active-color:          @navbar-inverse-link-hover-color;
-@navbar-inverse-link-active-bg:             transparent;
-@navbar-inverse-link-disabled-color:        #aaa;
-@navbar-inverse-link-disabled-bg:           transparent;
-
-// Inverted navbar brand label
-@navbar-inverse-brand-color:                #fff;
-@navbar-inverse-brand-hover-color:          #fff;
-@navbar-inverse-brand-hover-bg:             transparent;
-
-// Inverted navbar toggle
-@navbar-inverse-toggle-hover-bg:            #333;
-@navbar-inverse-toggle-icon-bar-bg:         #fff;
-@navbar-inverse-toggle-border-color:        #333;
-
-
-//== Navs
-//
-//##
-
-//=== Shared nav styles
-@nav-link-padding:                          10px 15px;
-@nav-link-hover-bg:                         @gray-darker;
-
-@nav-disabled-link-color:                   @gray-light;
-@nav-disabled-link-hover-color:             @gray-light;
-
-@nav-open-link-hover-color:                 @gray-darker;
-
-//== Tabs
-@nav-tabs-border-color:                     @gray-dark;
-
-@nav-tabs-link-hover-border-color:          transparent;
-
-@nav-tabs-active-link-hover-bg:             @brand-primary;
-@nav-tabs-active-link-hover-color:          #fff;
-@nav-tabs-active-link-hover-border-color:   @gray-dark;
-
-@nav-tabs-justified-link-border-color:            #ddd;
-@nav-tabs-justified-active-link-border-color:     @body-bg;
-
-//== Pills
-@nav-pills-border-radius:                   @border-radius-base;
-@nav-pills-active-link-hover-bg:            @component-active-bg;
-@nav-pills-active-link-hover-color:         @component-active-color;
-
-
-//== Pagination
-//
-//##
-
-@pagination-color:                     #fff;
-@pagination-bg:                        @gray-darker;
-@pagination-border:                    @gray-dark;
-
-@pagination-hover-color:               #000;
-@pagination-hover-bg:                  @component-active-bg;
-@pagination-hover-border:              transparent;
-
-@pagination-active-color:              #000;
-@pagination-active-bg:                 @brand-primary;
-@pagination-active-border:             transparent;
-
-@pagination-disabled-color:            @gray-light;
-@pagination-disabled-bg:               @gray-darker;
-@pagination-disabled-border:           @gray-dark;
-
-
-//== Pager
-//
-//##
-
-@pager-bg:                             @pagination-bg;
-@pager-border:                         @pagination-border;
-@pager-border-radius:                  15px;
-
-@pager-hover-bg:                       @pagination-hover-bg;
-
-@pager-active-bg:                      @pagination-active-bg;
-@pager-active-color:                   @pagination-active-color;
-
-@pager-disabled-color:                 @gray-light;
-
-
-//== Jumbotron
-//
-//##
-
-@jumbotron-padding:              30px;
-@jumbotron-color:                inherit;
-@jumbotron-bg:                   darken(@gray-darker, 5%);
-@jumbotron-heading-color:        inherit;
-@jumbotron-font-size:            ceil((@font-size-base * 1.5));
-
-
-//== Form states and alerts
-//
-//## Define colors for form feedback states and, by default, alerts.
-
-@state-success-text:             @brand-success;
-@state-success-bg:               darken(@brand-success, 40%);
-@state-success-border:           @brand-success;
-
-@state-info-text:                @brand-info;
-@state-info-bg:                  darken(@brand-info, 40%);
-@state-info-border:              @brand-info;
-
-@state-warning-text:             @brand-warning;
-@state-warning-bg:               darken(@brand-warning, 40%);
-@state-warning-border:           @brand-warning;
-
-@state-danger-text:              @brand-danger;
-@state-danger-bg:                darken(@brand-danger, 40%);
-@state-danger-border:            @brand-danger;
-
-
-//== Tooltips
-//
-//##
-
-//** Tooltip max width
-@tooltip-max-width:           200px;
-//** Tooltip text color
-@tooltip-color:               #fff;
-//** Tooltip background color
-@tooltip-bg:                  rgba(0,0,0,.9);
-@tooltip-opacity:             .9;
-
-//** Tooltip arrow width
-@tooltip-arrow-width:         5px;
-//** Tooltip arrow color
-@tooltip-arrow-color:         @tooltip-bg;
-
-
-//== Popovers
-//
-//##
-
-//** Popover body background color
-@popover-bg:                          lighten(@body-bg, 10%);
-//** Popover maximum width
-@popover-max-width:                   276px;
-//** Popover border color
-@popover-border-color:                rgba(0,0,0,.2);
-//** Popover fallback border color
-@popover-fallback-border-color:       #999;
-
-//** Popover title background color
-@popover-title-bg:                    darken(@popover-bg, 3%);
-
-//** Popover arrow width
-@popover-arrow-width:                 10px;
-//** Popover arrow color
-@popover-arrow-color:                 @popover-bg;
-
-//** Popover outer arrow width
-@popover-arrow-outer-width:           (@popover-arrow-width + 1);
-//** Popover outer arrow color
-@popover-arrow-outer-color:           fadein(@popover-border-color, 5%);
-//** Popover outer arrow fallback color
-@popover-arrow-outer-fallback-color:  darken(@popover-fallback-border-color, 20%);
-
-
-//== Labels
-//
-//##
-
-//** Default label background color
-@label-default-bg:            @btn-default-bg;
-//** Primary label background color
-@label-primary-bg:            @brand-primary;
-//** Success label background color
-@label-success-bg:            @brand-success;
-//** Info label background color
-@label-info-bg:               @brand-info;
-//** Warning label background color
-@label-warning-bg:            @brand-warning;
-//** Danger label background color
-@label-danger-bg:             @brand-danger;
-
-//** Default label text color
-@label-color:                 #fff;
-//** Default text color of a linked label
-@label-link-hover-color:      #fff;
-
-
-//== Modals
-//
-//##
-
-//** Padding applied to the modal body
-@modal-inner-padding:         20px;
-
-//** Padding applied to the modal title
-@modal-title-padding:         15px;
-//** Modal title line-height
-@modal-title-line-height:     @line-height-base;
-
-//** Background color of modal content area
-@modal-content-bg:                             lighten(@body-bg, 10%);
-//** Modal content border color
-@modal-content-border-color:                   rgba(0,0,0,.2);
-//** Modal content border color **for IE8**
-@modal-content-fallback-border-color:          #999;
-
-//** Modal backdrop background color
-@modal-backdrop-bg:           #000;
-//** Modal backdrop opacity
-@modal-backdrop-opacity:      .5;
-//** Modal header border color
-@modal-header-border-color:   @gray-dark;
-//** Modal footer border color
-@modal-footer-border-color:   @modal-header-border-color;
-
-@modal-lg:                    900px;
-@modal-md:                    600px;
-@modal-sm:                    300px;
-
-
-//== Alerts
-//
-//## Define alert colors, border radius, and padding.
-
-@alert-padding:               15px;
-@alert-border-radius:         @border-radius-base;
-@alert-link-font-weight:      bold;
-
-@alert-success-bg:            @state-success-bg;
-@alert-success-text:          @state-success-text;
-@alert-success-border:        @state-success-border;
-
-@alert-info-bg:               @state-info-bg;
-@alert-info-text:             @state-info-text;
-@alert-info-border:           @state-info-border;
-
-@alert-warning-bg:            @state-warning-bg;
-@alert-warning-text:          @state-warning-text;
-@alert-warning-border:        @state-warning-border;
-
-@alert-danger-bg:             @state-danger-bg;
-@alert-danger-text:           @state-danger-text;
-@alert-danger-border:         @state-danger-border;
-
-
-//== Progress bars
-//
-//##
-
-//** Background color of the whole progress component
-@progress-bg:                 @gray-darker;
-//** Progress bar text color
-@progress-bar-color:          #fff;
-
-//** Default progress bar color
-@progress-bar-bg:             @brand-primary;
-//** Success progress bar color
-@progress-bar-success-bg:     @brand-success;
-//** Warning progress bar color
-@progress-bar-warning-bg:     @brand-warning;
-//** Danger progress bar color
-@progress-bar-danger-bg:      @brand-danger;
-//** Info progress bar color
-@progress-bar-info-bg:        @brand-info;
-
-
-//== List group
-//
-//##
-
-//** Background color on `.list-group-item`
-@list-group-bg:                 @gray-darker;
-//** `.list-group-item` border color
-@list-group-border:             @gray-dark;
-//** List group border radius
-@list-group-border-radius:      @border-radius-base;
-
-//** Background color of single list items on hover
-@list-group-hover-bg:           lighten(@list-group-bg, 15%);
-//** Text color of active list items
-@list-group-active-color:       @component-active-color;
-//** Background color of active list items
-@list-group-active-bg:          @component-active-bg;
-//** Border color of active list elements
-@list-group-active-border:      @list-group-active-bg;
-//** Text color for content within active list items
-@list-group-active-text-color:  lighten(@list-group-active-bg, 40%);
-
-//** Text color of disabled list items
-@list-group-disabled-color:      @gray-light;
-//** Background color of disabled list items
-@list-group-disabled-bg:         @gray-lighter;
-//** Text color for content within disabled list items
-@list-group-disabled-text-color: @list-group-disabled-color;
-
-@list-group-link-color:         @text-color;
-@list-group-link-hover-color:   @list-group-link-color;
-@list-group-link-heading-color: #fff;
-
-
-//== Panels
-//
-//##
-
-@panel-bg:                    @gray-darker;
-@panel-body-padding:          15px;
-@panel-heading-padding:       10px 15px;
-@panel-footer-padding:        @panel-heading-padding;
-@panel-border-radius:         @border-radius-base;
-
-//** Border color for elements within panels
-@panel-inner-border:          @gray-dark;
-
-@panel-default-text:          @text-color;
-@panel-default-border:        @panel-inner-border;
-@panel-default-heading-bg:    lighten(@gray-darker, 10%);
-
-@panel-footer-bg:             @panel-default-heading-bg;
-
-@panel-primary-text:          #fff;
-@panel-primary-border:        @brand-primary;
-@panel-primary-heading-bg:    @brand-primary;
-
-@panel-success-text:          @state-success-text;
-@panel-success-border:        @state-success-border;
-@panel-success-heading-bg:    @state-success-bg;
-
-@panel-info-text:             @state-info-text;
-@panel-info-border:           @state-info-border;
-@panel-info-heading-bg:       @state-info-bg;
-
-@panel-warning-text:          @state-warning-text;
-@panel-warning-border:        @state-warning-border;
-@panel-warning-heading-bg:    @state-warning-bg;
-
-@panel-danger-text:           @state-danger-text;
-@panel-danger-border:         @state-danger-border;
-@panel-danger-heading-bg:     @state-danger-bg;
-
-
-//== Thumbnails
-//
-//##
-
-//** Padding around the thumbnail image
-@thumbnail-padding:           4px;
-//** Thumbnail background color
-@thumbnail-bg:                @gray-dark;
-//** Thumbnail border color
-@thumbnail-border:            @gray-dark;
-//** Thumbnail border radius
-@thumbnail-border-radius:     @border-radius-base;
-
-//** Custom text color for thumbnail captions
-@thumbnail-caption-color:     @text-color;
-//** Padding around the thumbnail caption
-@thumbnail-caption-padding:   9px;
-
-
-//== Wells
-//
-//##
-
-@well-bg:                     darken(@gray-darker, 5%);
-@well-border:                 darken(@well-bg, 7%);
-
-
-//== Badges
-//
-//##
-
-@badge-color:                 #000;
-//** Linked badge text color on hover
-@badge-link-hover-color:      #000;
-@badge-bg:                    @brand-primary;
-
-//** Badge text color in active nav link
-@badge-active-color:          @brand-primary;
-//** Badge background color in active nav link
-@badge-active-bg:             #fff;
-
-@badge-font-weight:           bold;
-@badge-line-height:           1;
-@badge-border-radius:         10px;
-
-
-//== Breadcrumbs
-//
-//##
-
-@breadcrumb-padding-vertical:   8px;
-@breadcrumb-padding-horizontal: 15px;
-//** Breadcrumb background color
-@breadcrumb-bg:                 @gray-darker;
-//** Breadcrumb text color
-@breadcrumb-color:              #fff;
-//** Text color of current page in the breadcrumb
-@breadcrumb-active-color:       @text-color;
-//** Textual separator for between breadcrumb elements
-@breadcrumb-separator:          "/";
-
-
-//== Carousel
-//
-//##
-
-@carousel-text-shadow:                        0 1px 2px rgba(0,0,0,.6);
-
-@carousel-control-color:                      #fff;
-@carousel-control-width:                      15%;
-@carousel-control-opacity:                    .5;
-@carousel-control-font-size:                  20px;
-
-@carousel-indicator-active-bg:                #fff;
-@carousel-indicator-border-color:             #fff;
-
-@carousel-caption-color:                      #fff;
-
-
-//== Close
-//
-//##
-
-@close-font-weight:           bold;
-@close-color:                 #000;
-@close-text-shadow:           0 1px 0 #fff;
-
-
-//== Code
-//
-//##
-
-@code-color:                  #c7254e;
-@code-bg:                     #f9f2f4;
-
-@kbd-color:                   #fff;
-@kbd-bg:                      #333;
-
-@pre-bg:                      #f5f5f5;
-@pre-color:                   @gray-dark;
-@pre-border-color:            #ccc;
-@pre-scrollable-max-height:   340px;
-
-
-//== Type
-//
-//##
-
-//** Horizontal offset for forms and lists.
-@component-offset-horizontal: 180px;
-//** Text muted color
-@text-muted:                  @gray-light;
-//** Abbreviations and acronyms border color
-@abbr-border-color:           @gray-light;
-//** Headings small color
-@headings-small-color:        @brand-primary;
-//** Blockquote small color
-@blockquote-small-color:      @gray;
-//** Blockquote font size
-@blockquote-font-size:        (@font-size-base * 1.25);
-//** Blockquote border color
-@blockquote-border-color:     @gray-dark;
-//** Page header border color
-@page-header-border-color:    @gray-dark;
-//** Width of horizontal description list titles
-@dl-horizontal-offset:        @component-offset-horizontal;
-//** Horizontal line color.
-@hr-border:                   @gray-dark;
-
-@import "base";
diff --git a/resources/assets/themes/cyborg_variables.scss b/resources/assets/themes/cyborg_variables.scss
new file mode 100644
index 00000000..c8ecd15f
--- /dev/null
+++ b/resources/assets/themes/cyborg_variables.scss
@@ -0,0 +1,872 @@
+// cyborg_variables
+
+/*
+The MIT License (MIT)
+
+Copyright (c) 2013 Thomas Park
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+*/
+
+// Cyborg 3.2.0
+// Variables
+// --------------------------------------------------
+
+//== Colors
+//
+//## Gray and brand colors for use across Bootstrap.
+  // needs change
+$gray-darker:            #222; // #222
+$gray-dark:              #333;   // #333
+$gray:                   #555; // #555
+$gray-light:             #999;   // #999
+$gray-lighter:           #eee; // #eee
+
+$brand-primary:         #99ba00;
+$brand-success:         #99ba00;
+$brand-info:            #0076ba;
+$brand-warning:         #ffc600;
+$brand-danger:          #d9534f;
+
+
+//== Scaffolding
+//
+//## Settings for some of the most global styles.
+
+//** Background color for `<body>`.
+$body-bg:               #060606;
+//** Global text color on `<body>`.
+$text-color:            $gray-light;
+$text-muted: $gray-light;
+
+//** Global textual link color.
+$link-color:            $brand-primary;
+//** Link hover color set via `darken()` function.
+$link-hover-color:      $link-color;
+
+
+//== Typography
+//
+//## Font, line-height, and color for body text, headings, and more.
+
+$font-family-serif:       Georgia, "Times New Roman", Times, serif;
+$font-family-sans-serif: 'Montserrat', Helvetica Neue, Helvetica, Arial, sans-serif;
+//** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
+$font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace;
+$font-family-base:        $font-family-sans-serif;
+
+$font-size-base:          .875rem;
+$font-size-large:         ceil(($font-size-base * 1.25)); // ~18px
+$font-size-small:         ceil(($font-size-base * 0.85)); // ~12px
+
+$font-size-h1:            34px;
+$font-size-h2:            24px;
+$font-size-h3:            20px;
+$font-size-h4:            20px;
+$font-size-h5:            20px;
+$font-size-h6:            16px;
+
+//** Unit-less `line-height` for use in components like buttons.
+$line-height-base:        1.428571429; // 20/14
+//** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
+$line-height-computed:    floor(($font-size-base * $line-height-base)); // ~20px
+
+//** By default, this inherits from the `<body>`.
+$headings-font-family:    $font-family-base;
+$headings-font-weight:    500;
+$headings-line-height:    1.1;
+$headings-color:          #fff;
+
+
+//== Iconography
+//
+//## Specify custom location and filename of the included Glyphicons icon font.
+//## Useful for those including Bootstrap via Bower.
+
+//** File name for all font files.
+$icon-font-name:          "glyphicons-halflings-regular";
+//** Element ID within SVG icon file.
+$icon-font-svg-id:        "glyphicons_halflingsregular";
+
+
+//== Components
+//
+//## Define common padding and border radius sizes and more.
+//## Values based on 14px text and 1.428 line-height (~20px to start).
+
+$padding-base-vertical:     .5rem;
+$padding-base-horizontal:   12px;
+
+$padding-large-vertical:    .875rem;
+$padding-large-horizontal:  16px;
+
+$padding-small-vertical:    .3125rem;
+$padding-small-horizontal:  10px;
+
+$padding-xs-vertical:       1px;
+$padding-xs-horizontal:     5px;
+
+$line-height-large:         1.33;
+$line-height-small:         1.5;
+
+$border-radius-base:        4px;
+$border-radius-large:       6px;
+$border-radius-small:       3px;
+
+//** Global color for active items (e.g., navs or dropdowns).
+$component-active-color:    #fff;
+//** Global background color for active items (e.g., navs or dropdowns).
+$component-active-bg:       $brand-primary;
+
+//** Width of the `border` for generating carets that indicator dropdowns.
+$caret-width-base:          4px;
+//** Carets increase slightly in size for larger components.
+$caret-width-large:         5px;
+
+
+//== Tables
+//
+//## Customizes the `.table` component with basic values, each used across all table variations.
+
+//** Padding for `<th>`s and `<td>`s.
+$table-cell-padding:            8px;
+//** Padding for cells in `.table-condensed`.
+$table-condensed-cell-padding:  5px;
+
+//** Default background color used for all tables.
+$table-bg:                      darken($gray-darker, 4%);
+//** Background color used for `.table-striped`.
+$table-bg-accent:               darken($table-bg, 6%);
+//** Background color used for `.table-hover`.
+$table-bg-hover:                $gray-dark;
+$table-bg-active:               $table-bg-hover;
+
+//** Border color for table and cell borders.
+$table-border-color:            $gray-dark;
+
+
+//== Buttons
+//
+//## For each of Bootstrap's buttons, define text, background and border color.
+
+$btn-font-weight:                normal;
+
+$btn-default-color:              #000;
+$btn-default-bg:                 $gray-light;
+$btn-default-border:             darken($btn-default-bg, 10%);
+
+$btn-primary-color:              $btn-default-color;
+$btn-primary-bg:                 $brand-primary;
+$btn-primary-border:             darken($btn-primary-bg, 10%);
+
+$btn-success-color:              $btn-default-color;
+$btn-success-bg:                 $brand-success;
+$btn-success-border:             darken($btn-success-bg, 10%);
+
+$btn-info-color:                 $btn-default-color;
+$btn-info-bg:                    $brand-info;
+$btn-info-border:                darken($btn-info-bg, 10%);
+
+$btn-warning-color:              $btn-default-color;
+$btn-warning-bg:                 $brand-warning;
+$btn-warning-border:             darken($btn-warning-bg, 10%);
+
+$btn-danger-color:               $btn-default-color;
+$btn-danger-bg:                  $brand-danger;
+$btn-danger-border:              darken($btn-danger-bg, 10%);
+
+$btn-link-disabled-color:        $gray-light;
+
+
+//== Forms
+//
+//##
+
+//** `<input>` background color
+$input-bg:                       #000;
+//** `<input disabled>` background color
+$input-bg-disabled:              $gray-darker;
+
+//** Text color for `<input>`s
+$input-color:                    $text-color;
+//** `<input>` border color
+$input-border:                   $gray-dark;
+//** `<input>` border radius
+$input-border-radius:            $border-radius-base;
+//** Border color for inputs on focus
+$input-border-focus:             #66afe9;
+
+//** Placeholder text color
+$input-color-placeholder:        $gray-light;
+
+//** Default `.form-control` height
+$input-height-base:              ($line-height-computed + ($padding-base-vertical * 2) + 2);
+//** Large `.form-control` height
+$input-height-large:             (ceil($font-size-large * $line-height-large) + ($padding-large-vertical * 2) + 2);
+//** Small `.form-control` height
+$input-height-small:             (floor($font-size-small * $line-height-small) + ($padding-small-vertical * 2) + 2);
+
+$legend-color:                   $text-color;
+$legend-border-color:            $gray-dark;
+
+//** Background color for textual input addons
+$input-group-addon-bg:           $gray-light;
+//** Border color for textual input addons
+$input-group-addon-border-color: $input-border;
+
+
+//== Dropdowns
+//
+//## Dropdown menu container and contents.
+
+//** Background for the dropdown menu.
+$dropdown-bg:                    $gray-darker;
+//** Dropdown menu `border-color`.
+$dropdown-border:                rgba(255,255,255,0.1);
+//** Dropdown menu `border-color` **for IE8**.
+$dropdown-fallback-border:       #444;
+//** Divider color for between dropdown items.
+$dropdown-divider-bg:            rgba(255,255,255,0.1);
+
+//** Active dropdown menu item text color.
+$dropdown-link-active-color:     #fff;
+//** Active dropdown menu item background color.
+$dropdown-link-active-bg:        $component-active-bg;
+
+//** Dropdown link text color.
+$dropdown-link-color:            #fff;
+//** Hover color for dropdown links.
+$dropdown-link-hover-color:      #fff;
+//** Hover background for dropdown links.
+$dropdown-link-hover-bg:         $dropdown-link-active-bg;
+
+//** Disabled dropdown menu item background color.
+$dropdown-link-disabled-color:   $text-muted;
+
+//** Text color for headers within dropdown menus.
+$dropdown-header-color:          $text-muted;
+
+//** Deprecated `$dropdown-caret-color` as of v3.1.0
+$dropdown-caret-color:           #000;
+
+
+//-- Z-index master list
+//
+// Warning: Avoid customizing these values. They're used for a bird's eye view
+// of components dependent on the z-axis and are designed to all work together.
+//
+// Note: These variables are not generated into the Customizer.
+
+$zindex-navbar:            1000;
+$zindex-dropdown:          1000;
+$zindex-popover:           1060;
+$zindex-tooltip:           1070;
+$zindex-navbar-fixed:      1030;
+$zindex-modal-background:  1040;
+$zindex-modal:             1050;
+
+
+//== Media queries breakpoints
+//
+//## Define the breakpoints at which your layout will change, adapting to different screen sizes.
+
+// Extra small screen / phone
+//** Deprecated `$screen-xs` as of v3.0.1
+$screen-xs:                  480px;
+//** Deprecated `$screen-xs-min` as of v3.2.0
+$screen-xs-min:              $screen-xs;
+//** Deprecated `$screen-phone` as of v3.0.1
+$screen-phone:               $screen-xs-min;
+
+// Small screen / tablet
+//** Deprecated `$screen-sm` as of v3.0.1
+$screen-sm:                  768px;
+$screen-sm-min:              $screen-sm;
+//** Deprecated `$screen-tablet` as of v3.0.1
+$screen-tablet:              $screen-sm-min;
+
+// Medium screen / desktop
+//** Deprecated `$screen-md` as of v3.0.1
+$screen-md:                  992px;
+$screen-md-min:              $screen-md;
+//** Deprecated `$screen-desktop` as of v3.0.1
+$screen-desktop:             $screen-md-min;
+
+// Large screen / wide desktop
+//** Deprecated `$screen-lg` as of v3.0.1
+$screen-lg:                  1200px;
+$screen-lg-min:              $screen-lg;
+//** Deprecated `$screen-lg-desktop` as of v3.0.1
+$screen-lg-desktop:          $screen-lg-min;
+
+// So media queries don't overlap when required, provide a maximum
+$screen-xs-max:              ($screen-sm-min - 1);
+$screen-sm-max:              ($screen-md-min - 1);
+$screen-md-max:              ($screen-lg-min - 1);
+
+
+//== Grid system
+//
+//## Define your custom responsive grid.
+
+//** Number of columns in the grid.
+$grid-columns:              12;
+//** Padding between columns. Gets divided in half for the left and right.
+$grid-gutter-width:         30px;
+// Navbar collapse
+//** Point at which the navbar becomes uncollapsed.
+$grid-float-breakpoint:     $screen-sm-min;
+//** Point at which the navbar begins collapsing.
+$grid-float-breakpoint-max: ($grid-float-breakpoint - 1);
+
+
+//== Container sizes
+//
+//## Define the maximum width of `.container` for different screen sizes.
+
+// Small screen / tablet
+$container-tablet:             ((720px + $grid-gutter-width));
+//** For `$screen-sm-min` and up.
+$container-sm:                 $container-tablet;
+
+// Medium screen / desktop
+$container-desktop:            ((940px + $grid-gutter-width));
+//** For `$screen-md-min` and up.
+$container-md:                 $container-desktop;
+
+// Large screen / wide desktop
+$container-large-desktop:      ((1140px + $grid-gutter-width));
+//** For `$screen-lg-min` and up.
+$container-lg:                 $container-large-desktop;
+
+
+//== Navbar
+//
+//##
+
+// Basics of a navbar
+$navbar-height:                    3.125rem;
+$navbar-margin-bottom:             $line-height-computed;
+$navbar-border-radius:             $border-radius-base;
+$navbar-padding-horizontal:        floor(($grid-gutter-width / 2));
+$navbar-padding-vertical:          (($navbar-height - $line-height-computed) / 2);
+$navbar-collapse-max-height:       340px;
+
+$navbar-default-color:             $text-color;
+$navbar-default-bg:                $body-bg;
+$navbar-default-border:            $gray-dark;
+
+// Navbar links
+$navbar-default-link-color:                $text-color;
+$navbar-default-link-hover-color:          #fff;
+$navbar-default-link-hover-bg:             transparent;
+$navbar-default-link-active-color:         #fff;
+$navbar-default-link-active-bg:            transparent;
+$navbar-default-link-disabled-color:       $gray-light;
+$navbar-default-link-disabled-bg:          transparent;
+
+// Navbar brand label
+$navbar-default-brand-color:               #fff;
+$navbar-default-brand-hover-color:         #fff;
+$navbar-default-brand-hover-bg:            transparent;
+
+// Navbar toggle
+$navbar-default-toggle-hover-bg:           $gray-dark;
+$navbar-default-toggle-icon-bar-bg:        #ccc;
+$navbar-default-toggle-border-color:       $gray-dark;
+
+
+// Inverted navbar
+// Reset inverted navbar basics
+$navbar-inverse-color:                      $gray-light;
+$navbar-inverse-bg:                         $gray-darker;
+$navbar-inverse-border:                     darken($navbar-inverse-bg, 10%);
+
+// Inverted navbar links
+$navbar-inverse-link-color:                 $gray-light;
+$navbar-inverse-link-hover-color:           #fff;
+$navbar-inverse-link-hover-bg:              transparent;
+$navbar-inverse-link-active-color:          $navbar-inverse-link-hover-color;
+$navbar-inverse-link-active-bg:             transparent;
+$navbar-inverse-link-disabled-color:        #aaa;
+$navbar-inverse-link-disabled-bg:           transparent;
+
+// Inverted navbar brand label
+$navbar-inverse-brand-color:                #fff;
+$navbar-inverse-brand-hover-color:          #fff;
+$navbar-inverse-brand-hover-bg:             transparent;
+
+// Inverted navbar toggle
+$navbar-inverse-toggle-hover-bg:            #333;
+$navbar-inverse-toggle-icon-bar-bg:         #fff;
+$navbar-inverse-toggle-border-color:        #333;
+
+
+//== Navs
+//
+//##
+
+//=== Shared nav styles
+$nav-link-padding:                          10px 15px;
+$nav-link-hover-bg:                         $gray-darker;
+
+$nav-disabled-link-color:                   $gray-light;
+$nav-disabled-link-hover-color:             $gray-light;
+
+$nav-open-link-hover-color:                 $gray-darker;
+
+//== Tabs
+$nav-tabs-border-color:                     $gray-dark;
+
+$nav-tabs-link-hover-border-color:          transparent;
+
+$nav-tabs-active-link-hover-bg:             $brand-primary;
+$nav-tabs-active-link-hover-color:          #fff;
+$nav-tabs-active-link-hover-border-color:   $gray-dark;
+
+$nav-tabs-justified-link-border-color:            #ddd;
+$nav-tabs-justified-active-link-border-color:     $body-bg;
+
+//== Pills
+$nav-pills-border-radius:                   $border-radius-base;
+$nav-pills-active-link-hover-bg:            $component-active-bg;
+$nav-pills-active-link-hover-color:         $component-active-color;
+
+
+//== Pagination
+//
+//##
+
+$pagination-color:                     #fff;
+$pagination-bg:                        $gray-darker;
+$pagination-border:                    $gray-dark;
+
+$pagination-hover-color:               #000;
+$pagination-hover-bg:                  $component-active-bg;
+$pagination-hover-border:              transparent;
+
+$pagination-active-color:              #000;
+$pagination-active-bg:                 $brand-primary;
+$pagination-active-border:             transparent;
+
+$pagination-disabled-color:            $gray-light;
+$pagination-disabled-bg:               $gray-darker;
+$pagination-disabled-border:           $gray-dark;
+
+
+//== Pager
+//
+//##
+
+$pager-bg:                             $pagination-bg;
+$pager-border:                         $pagination-border;
+$pager-border-radius:                  15px;
+
+$pager-hover-bg:                       $pagination-hover-bg;
+
+$pager-active-bg:                      $pagination-active-bg;
+$pager-active-color:                   $pagination-active-color;
+
+$pager-disabled-color:                 $gray-light;
+
+
+//== Jumbotron
+//
+//##
+
+$jumbotron-padding:              30px;
+$jumbotron-color:                inherit;
+$jumbotron-bg:                   darken($gray-darker, 5%);
+$jumbotron-heading-color:        inherit;
+$jumbotron-font-size:            ceil(($font-size-base * 1.5));
+
+
+//== Form states and alerts
+//
+//## Define colors for form feedback states and, by default, alerts.
+
+$state-success-text:             $brand-success;
+$state-success-bg:               darken($brand-success, 40%);
+$state-success-border:           $brand-success;
+
+$state-info-text:                $brand-info;
+$state-info-bg:                  darken($brand-info, 40%);
+$state-info-border:              $brand-info;
+
+$state-warning-text:             $brand-warning;
+$state-warning-bg:               darken($brand-warning, 40%);
+$state-warning-border:           $brand-warning;
+
+$state-danger-text:              $brand-danger;
+$state-danger-bg:                darken($brand-danger, 40%);
+$state-danger-border:            $brand-danger;
+
+
+//== Tooltips
+//
+//##
+
+//** Tooltip max width
+$tooltip-max-width:           200px;
+//** Tooltip text color
+$tooltip-color:               #fff;
+//** Tooltip background color
+$tooltip-bg:                  rgba(0,0,0,.9);
+$tooltip-opacity:             .9;
+
+//** Tooltip arrow width
+$tooltip-arrow-width:         5px;
+//** Tooltip arrow color
+$tooltip-arrow-color:         $tooltip-bg;
+
+
+//== Popovers
+//
+//##
+
+//** Popover body background color
+$popover-bg:                          lighten($body-bg, 10%);
+//** Popover maximum width
+$popover-max-width:                   276px;
+//** Popover border color
+$popover-border-color:                rgba(0,0,0,.2);
+//** Popover fallback border color
+$popover-fallback-border-color:       #999;
+
+//** Popover title background color
+$popover-title-bg:                    darken($popover-bg, 3%);
+
+//** Popover arrow width
+$popover-arrow-width:                 10px;
+//** Popover arrow color
+$popover-arrow-color:                 $popover-bg;
+
+//** Popover outer arrow width
+$popover-arrow-outer-width:           ($popover-arrow-width + 1);
+//** Popover outer arrow color
+$popover-arrow-outer-color:           fadein($popover-border-color, 5%);
+//** Popover outer arrow fallback color
+$popover-arrow-outer-fallback-color:  darken($popover-fallback-border-color, 20%);
+
+
+//== Labels
+//
+//##
+
+//** Default label background color
+$label-default-bg:            $btn-default-bg;
+//** Primary label background color
+$label-primary-bg:            $brand-primary;
+//** Success label background color
+$label-success-bg:            $brand-success;
+//** Info label background color
+$label-info-bg:               $brand-info;
+//** Warning label background color
+$label-warning-bg:            $brand-warning;
+//** Danger label background color
+$label-danger-bg:             $brand-danger;
+
+//** Default label text color
+$label-color:                 #fff;
+//** Default text color of a linked label
+$label-link-hover-color:      #fff;
+
+
+//== Modals
+//
+//##
+
+//** Padding applied to the modal body
+$modal-inner-padding:         1.25rem;
+
+//** Padding applied to the modal title
+$modal-title-padding:         15px;
+//** Modal title line-height
+$modal-title-line-height:     $line-height-base;
+
+//** Background color of modal content area
+$modal-content-bg:                             lighten($body-bg, 10%);
+//** Modal content border color
+$modal-content-border-color:                   rgba(0,0,0,.2);
+//** Modal content border color **for IE8**
+$modal-content-fallback-border-color:          #999;
+
+//** Modal backdrop background color
+$modal-backdrop-bg:           #000;
+//** Modal backdrop opacity
+$modal-backdrop-opacity:      .5;
+//** Modal header border color
+$modal-header-border-color:   $gray-dark;
+//** Modal footer border color
+$modal-footer-border-color:   $modal-header-border-color;
+
+$modal-lg:                    900px;
+$modal-md:                    600px;
+$modal-sm:                    300px;
+
+
+//== Alerts
+//
+//## Define alert colors, border radius, and padding.
+
+$alert-padding:               15px;
+$alert-border-radius:         $border-radius-base;
+$alert-link-font-weight:      bold;
+
+$alert-success-bg:            $state-success-bg;
+$alert-success-text:          $state-success-text;
+$alert-success-border:        $state-success-border;
+
+$alert-info-bg:               $state-info-bg;
+$alert-info-text:             $state-info-text;
+$alert-info-border:           $state-info-border;
+
+$alert-warning-bg:            $state-warning-bg;
+$alert-warning-text:          $state-warning-text;
+$alert-warning-border:        $state-warning-border;
+
+$alert-danger-bg:             $state-danger-bg;
+$alert-danger-text:           $state-danger-text;
+$alert-danger-border:         $state-danger-border;
+
+
+//== Progress bars
+//
+//##
+
+//** Background color of the whole progress component
+$progress-bg:                 $gray-darker;
+//** Progress bar text color
+$progress-bar-color:          #fff;
+
+//** Default progress bar color
+$progress-bar-bg:             $brand-primary;
+//** Success progress bar color
+$progress-bar-success-bg:     $brand-success;
+//** Warning progress bar color
+$progress-bar-warning-bg:     $brand-warning;
+//** Danger progress bar color
+$progress-bar-danger-bg:      $brand-danger;
+//** Info progress bar color
+$progress-bar-info-bg:        $brand-info;
+
+
+//== List group
+//
+//##
+
+//** Background color on `.list-group-item`
+$list-group-bg:                 $gray-darker;
+//** `.list-group-item` border color
+$list-group-border:             $gray-dark;
+//** List group border radius
+$list-group-border-radius:      $border-radius-base;
+
+//** Background color of single list items on hover
+$list-group-hover-bg:           lighten($list-group-bg, 15%);
+//** Text color of active list items
+$list-group-active-color:       $component-active-color;
+//** Background color of active list items
+$list-group-active-bg:          $component-active-bg;
+//** Border color of active list elements
+$list-group-active-border:      $list-group-active-bg;
+//** Text color for content within active list items
+$list-group-active-text-color:  lighten($list-group-active-bg, 40%);
+
+//** Text color of disabled list items
+$list-group-disabled-color:      $gray-light;
+//** Background color of disabled list items
+$list-group-disabled-bg:         $gray-lighter;
+//** Text color for content within disabled list items
+$list-group-disabled-text-color: $list-group-disabled-color;
+
+$list-group-link-color:         $text-color;
+$list-group-link-hover-color:   $list-group-link-color;
+$list-group-link-heading-color: #fff;
+
+
+//== Panels
+//
+//##
+
+$panel-bg:                    $gray-darker;
+$panel-body-padding:          15px;
+$panel-heading-padding:       10px 15px;
+$panel-footer-padding:        $panel-heading-padding;
+$panel-border-radius:         $border-radius-base;
+
+//** Border color for elements within panels
+$panel-inner-border:          $gray-dark;
+
+$panel-default-text:          $text-color;
+$panel-default-border:        $panel-inner-border;
+$panel-default-heading-bg:    lighten($gray-darker, 10%);
+
+$panel-footer-bg:             $panel-default-heading-bg;
+
+$panel-primary-text:          #fff;
+$panel-primary-border:        $brand-primary;
+$panel-primary-heading-bg:    $brand-primary;
+
+$panel-success-text:          $state-success-text;
+$panel-success-border:        $state-success-border;
+$panel-success-heading-bg:    $state-success-bg;
+
+$panel-info-text:             $state-info-text;
+$panel-info-border:           $state-info-border;
+$panel-info-heading-bg:       $state-info-bg;
+
+$panel-warning-text:          $state-warning-text;
+$panel-warning-border:        $state-warning-border;
+$panel-warning-heading-bg:    $state-warning-bg;
+
+$panel-danger-text:           $state-danger-text;
+$panel-danger-border:         $state-danger-border;
+$panel-danger-heading-bg:     $state-danger-bg;
+
+
+//== Thumbnails
+//
+//##
+
+//** Padding around the thumbnail image
+$thumbnail-padding:           4px;
+//** Thumbnail background color
+$thumbnail-bg:                $gray-dark;
+//** Thumbnail border color
+$thumbnail-border:            $gray-dark;
+//** Thumbnail border radius
+$thumbnail-border-radius:     $border-radius-base;
+
+//** Custom text color for thumbnail captions
+$thumbnail-caption-color:     $text-color;
+//** Padding around the thumbnail caption
+$thumbnail-caption-padding:   9px;
+
+
+//== Wells
+//
+//##
+
+$well-bg:                     darken($gray-darker, 5%);
+$well-border:                 darken($well-bg, 7%);
+
+
+//== Badges
+//
+//##
+
+$badge-color:                 #000;
+//** Linked badge text color on hover
+$badge-link-hover-color:      #000;
+$badge-bg:                    $brand-primary;
+
+//** Badge text color in active nav link
+$badge-active-color:          $brand-primary;
+//** Badge background color in active nav link
+$badge-active-bg:             #fff;
+
+$badge-font-weight:           bold;
+$badge-line-height:           1;
+$badge-border-radius:         10px;
+
+
+//== Breadcrumbs
+//
+//##
+
+$breadcrumb-padding-vertical:   8px;
+$breadcrumb-padding-horizontal: 15px;
+//** Breadcrumb background color
+$breadcrumb-bg:                 $gray-darker;
+//** Breadcrumb text color
+$breadcrumb-color:              #fff;
+//** Text color of current page in the breadcrumb
+$breadcrumb-active-color:       $text-color;
+//** Textual separator for between breadcrumb elements
+$breadcrumb-separator:          "/";
+
+
+//== Carousel
+//
+//##
+
+$carousel-text-shadow:                        0 1px 2px rgba(0,0,0,.6);
+
+$carousel-control-color:                      #fff;
+$carousel-control-width:                      15%;
+$carousel-control-opacity:                    .5;
+$carousel-control-font-size:                  20px;
+
+$carousel-indicator-active-bg:                #fff;
+$carousel-indicator-border-color:             #fff;
+
+$carousel-caption-color:                      #fff;
+
+
+//== Close
+//
+//##
+
+$close-font-weight:           bold;
+$close-color:                 #000;
+$close-text-shadow:           0 1px 0 #fff;
+
+
+//== Code
+//
+//##
+
+$code-color:                  #c7254e;
+$code-bg:                     #f9f2f4;
+
+$kbd-color:                   #fff;
+$kbd-bg:                      #333;
+
+$pre-bg:                      #f5f5f5;
+$pre-color:                   $gray-dark;
+$pre-border-color:            #ccc;
+$pre-scrollable-max-height:   340px;
+
+
+//== Type
+//
+//##
+
+//** Horizontal offset for forms and lists.
+$component-offset-horizontal: 180px;
+
+//** Abbreviations and acronyms border color
+$abbr-border-color:           $gray-light;
+//** Headings small color
+$headings-small-color:        $brand-primary;
+//** Blockquote small color
+$blockquote-small-color:      $gray;
+//** Blockquote font size
+$blockquote-font-size:        ($font-size-base * 1.25);
+//** Blockquote border color
+$blockquote-border-color:     $gray-dark;
+//** Page header border color
+$page-header-border-color:    $gray-dark;
+//** Width of horizontal description list titles
+$dl-horizontal-offset:        $component-offset-horizontal;
+//** Horizontal line color.
+$hr-border:                   $gray-dark;
+
+@import "base.scss";
diff --git a/resources/assets/themes/error.less b/resources/assets/themes/error.scss
similarity index 100%
rename from resources/assets/themes/error.less
rename to resources/assets/themes/error.scss
diff --git a/resources/assets/themes/theme0.less b/resources/assets/themes/theme0.less
deleted file mode 100644
index 9d37f0b4..00000000
--- a/resources/assets/themes/theme0.less
+++ /dev/null
@@ -1,2 +0,0 @@
-// light
-@import "base.less";
diff --git a/resources/assets/themes/theme0.scss b/resources/assets/themes/theme0.scss
new file mode 100644
index 00000000..53d56b88
--- /dev/null
+++ b/resources/assets/themes/theme0.scss
@@ -0,0 +1,2 @@
+// light
+@import "base.scss";
diff --git a/resources/assets/themes/theme1.less b/resources/assets/themes/theme1.less
deleted file mode 100644
index a5dc8266..00000000
--- a/resources/assets/themes/theme1.less
+++ /dev/null
@@ -1,98 +0,0 @@
-// dark
-@import "cyborg_variables.less";
-
-// Variables
-// --------------------------------------------------
-
-//== changed Colors
-
-@gray-dark:              #282828;   // #333
-@gray-light:             #888;   // #999
-@gray-lighter:           #ADAFAE; // #eee
-
-@brand-primary:         #428bca;
-@brand-success:         #5cb85c;
-@brand-info:            #5bc0de;
-@brand-warning:         #f0ad4e;
-
-
-//== changed Buttons
-
-@btn-default-color:              #fff;
-@btn-default-bg:                 lighten(@gray-dark, 10%);
-
-@btn-primary-border:             darken(@btn-default-bg, 10%);
-
-@btn-success-border:             @btn-primary-border;
-
-@btn-info-border:                @btn-primary-border;
-
-@btn-warning-border:             @btn-primary-border;
-
-@btn-danger-border:              @btn-primary-border;
-
-@btn-link-disabled-color:        @gray-light;
-
-
-//== changed Forms
-
-@input-bg:                       @gray-darker;
-
-@input-bg-disabled:              lighten(@gray-lighter,15%);
-
-@input-group-addon-bg:           @gray-lighter;
-
-
-//== changed Pagination
-
-@pagination-hover-color:               #fff;
-
-@pagination-active-color:              #fff;
-
-
-//== changed Form states and alerts
-
-@state-success-text:             #fff;
-@state-success-bg:               @brand-success;
-@state-success-border:           darken(@state-success-bg, 5%);
-
-@state-info-text:                #fff;
-@state-info-bg:                  @brand-info;
-@state-info-border:              darken(@state-info-bg, 7%);
-
-@state-warning-text:             #fff;
-@state-warning-bg:               @brand-warning;
-@state-warning-border:           darken(@state-warning-bg, 3%);
-
-@state-danger-text:              #fff;
-@state-danger-bg:                @brand-danger;
-@state-danger-border:            darken(@state-danger-bg, 3%);
-
-
-//== changed Badges
-
-@badge-color:                 #fff;
-
-@badge-link-hover-color:      #fff;
-
-
-//== changed Type
-
-@headings-small-color:        @gray-light;
-
-
-// Bootswatch
-// -----------------------------------------------------
-@import "cyborg_styles.less";
-
-// added Forms ======================================================================
-
-.input-group-addon {
-  background-color: @btn-default-bg;
-}
-
-// different code tag
-code {
-  background-color: @state-info-bg;
-  color: @state-info-text;
-}
diff --git a/resources/assets/themes/theme1.scss b/resources/assets/themes/theme1.scss
new file mode 100644
index 00000000..6590a346
--- /dev/null
+++ b/resources/assets/themes/theme1.scss
@@ -0,0 +1,98 @@
+// dark
+@import "cyborg_variables";
+
+// Variables
+// --------------------------------------------------
+
+//== changed Colors
+
+$gray-dark:              #282828;   // #333
+$gray-light:             #888;   // #999
+$gray-lighter:           #ADAFAE; // #eee
+
+$brand-primary:         #428bca;
+$brand-success:         #5cb85c;
+$brand-info:            #5bc0de;
+$brand-warning:         #f0ad4e;
+
+
+//== changed Buttons
+
+$btn-default-color:              #fff;
+$btn-default-bg:                 lighten($gray-dark, 10%);
+
+$btn-primary-border:             darken($btn-default-bg, 10%);
+
+$btn-success-border:             $btn-primary-border;
+
+$btn-info-border:                $btn-primary-border;
+
+$btn-warning-border:             $btn-primary-border;
+
+$btn-danger-border:              $btn-primary-border;
+
+$btn-link-disabled-color:        $gray-light;
+
+
+//== changed Forms
+
+$input-bg:                       $gray-darker;
+
+$input-bg-disabled:              lighten($gray-lighter,15%);
+
+$input-group-addon-bg:           $gray-lighter;
+
+
+//== changed Pagination
+
+$pagination-hover-color:               #fff;
+
+$pagination-active-color:              #fff;
+
+
+//== changed Form states and alerts
+
+$state-success-text:             #fff;
+$state-success-bg:               $brand-success;
+$state-success-border:           darken($state-success-bg, 5%);
+
+$state-info-text:                #fff;
+$state-info-bg:                  $brand-info;
+$state-info-border:              darken($state-info-bg, 7%);
+
+$state-warning-text:             #fff;
+$state-warning-bg:               $brand-warning;
+$state-warning-border:           darken($state-warning-bg, 3%);
+
+$state-danger-text:              #fff;
+$state-danger-bg:                $brand-danger;
+$state-danger-border:            darken($state-danger-bg, 3%);
+
+
+//== changed Badges
+
+$badge-color:                 #fff;
+
+$badge-link-hover-color:      #fff;
+
+
+//== changed Type
+
+$headings-small-color:        $gray-light;
+
+
+// Bootswatch
+// -----------------------------------------------------
+@import "cyborg_styles";
+
+// added Forms ======================================================================
+
+.input-group-addon {
+  background-color: $btn-default-bg;
+}
+
+// different code tag
+code {
+  background-color: $state-info-bg;
+  color: $state-info-text;
+}
diff --git a/resources/assets/themes/theme10.less b/resources/assets/themes/theme10.less
deleted file mode 100644
index 5f2a841d..00000000
--- a/resources/assets/themes/theme10.less
+++ /dev/null
@@ -1,57 +0,0 @@
-// cccamp19 green (2019)
-@import "cyborg_variables.less";
-
-// Variables
-// --------------------------------------------------
-
-//== changed Colors
-
-@gray-dark:              #282828;   // #333
-@gray-light:             #888;   // #999
-@gray-lighter:           #ADAFAE; // #eee
-
-@brand-primary:         #99ba00;
-
-@import "cyborg_styles.less";
-
-// Specials for cccamp19 design
-
-.navbar-brand {
-  .icon-icon_angel {
-    background-color: @brand-primary;
-  }
-
-  strong {
-    font-weight: lighter;
-    color: @brand-primary;
-    text-shadow:
-      0 0 10px @brand-primary,
-      0 0 20px @brand-primary,
-      0 0 30px @brand-primary,
-      0 0 40px @brand-primary,
-      0 0 70px @brand-primary,
-      0 0 80px @brand-primary;
-  }
-}
-
-h1 {
-  font-weight: lighter;
-  color: @brand-primary;
-  text-shadow: 0 0 10px @brand-primary;
-
-  .icon-icon_angel {
-    background-color: @brand-primary;
-  }
-}
-
-.panel-title {
-  color: #fff;
-}
-
-.input-group-addon {
-  color: #000;
-
-  .icon-icon_angel {
-    background-color: #000;
-  }
-}
diff --git a/resources/assets/themes/theme10.scss b/resources/assets/themes/theme10.scss
new file mode 100644
index 00000000..9f7e7cdc
--- /dev/null
+++ b/resources/assets/themes/theme10.scss
@@ -0,0 +1,57 @@
+// cccamp19 green (2019)
+@import "cyborg_variables.scss";
+
+// Variables
+// --------------------------------------------------
+
+//== changed Colors
+
+$gray-dark:              #282828;   // #333
+$gray-light:             #888;   // #999
+$gray-lighter:           #ADAFAE; // #eee
+
+$brand-primary:         #99ba00;
+
+@import "cyborg_styles.scss";
+
+// Specials for cccamp19 design
+
+.navbar-brand {
+  .icon-icon_angel {
+    background-color: $brand-primary;
+  }
+
+  strong {
+    font-weight: lighter;
+    color: $brand-primary;
+    text-shadow:
+      0 0 10px $brand-primary,
+      0 0 20px $brand-primary,
+      0 0 30px $brand-primary,
+      0 0 40px $brand-primary,
+      0 0 70px $brand-primary,
+      0 0 80px $brand-primary;
+  }
+}
+
+h1 {
+  font-weight: lighter;
+  color: $brand-primary;
+  text-shadow: 0 0 10px $brand-primary;
+
+  .icon-icon_angel {
+    background-color: $brand-primary;
+  }
+}
+
+.panel-title {
+  color: #fff;
+}
+
+.input-group-addon {
+  color: #000;
+
+  .icon-icon_angel {
+    background-color: #000;
+  }
+}
diff --git a/resources/assets/themes/theme11.less b/resources/assets/themes/theme11.less
deleted file mode 100644
index cd601924..00000000
--- a/resources/assets/themes/theme11.less
+++ /dev/null
@@ -1,104 +0,0 @@
-// high contrast
-@import "cyborg_variables.less";
-// Variables
-// --------------------------------------------------
-
-//== Colors
-
-@gray-dark:              #282828;   // #333
-@gray-light:             #888;   // #999
-@gray-lighter:           #ADAFAE; // #eee
-
-@brand-primary:         #72abfa;
-@brand-success:         #5cb85c;
-@brand-info:            #5bc0de;
-@brand-warning:         #f0ad4e;
-
-//== Scaffolding
-
-@body-bg:               #000;
-@text-color:            #fff;
-
-//== Buttons
-
-@btn-default-color:              #fff;
-@btn-default-bg:                 lighten(@gray-dark, 10%);
-
-@btn-primary-color:              #000;
-@btn-primary-border:             darken(@btn-default-bg, 10%);
-
-@btn-success-color:              #000;
-@btn-success-border:             darken(@btn-default-bg, 10%);
-
-@btn-info-color:                 #000;
-@btn-info-border:                darken(@btn-default-bg, 10%);
-
-@btn-warning-color:              #000;
-@btn-warning-border:             darken(@btn-default-bg, 10%);
-
-@btn-danger-color:               #000;
-@btn-danger-border:              darken(@btn-default-bg, 10%);
-
-
-
-//== Forms
-
-@input-bg:                       @gray-darker;
-@input-bg-disabled:              @gray-lighter;
-
-@input-group-addon-bg:           @gray-lighter;
-
-
-//== Pagination
-
-@pagination-hover-color:               #fff;
-
-
-//== Labels
-
-@label-default-bg:            lighten(@btn-default-bg, 20%);
-@label-color:                 #000;
-@label-link-hover-color:      #000;
-
-//== Badges
-
-@badge-link-hover-color:      #fff;
-
-//== Type
-
-@text-muted:                  @gray-lighter;
-@abbr-border-color:           @gray-lighter;
-@headings-small-color:        @gray-lighter;
-
-// Bootswatch
-// -----------------------------------------------------
-@import "cyborg_styles.less";
-// Typography =================================================================
-
-.text-danger,
-.text-danger:hover {
-  color: lighten(@brand-danger, 10%);
-}
-
-// Forms ======================================================================
-
-.legend {
-  margin-top: 20px;
-}
-
-.input-group-addon {
-  background-color: @btn-default-bg;
-}
-
-
-// Containers =================================================================
-
-.panel-info .panel-title {
-  color: #000;
-}
-
-// code tag
-code {
-  background-color: @btn-default-bg;
-  color: @input-color;
-}
diff --git a/resources/assets/themes/theme11.scss b/resources/assets/themes/theme11.scss
new file mode 100644
index 00000000..62fb80a6
--- /dev/null
+++ b/resources/assets/themes/theme11.scss
@@ -0,0 +1,104 @@
+// high contrast
+@import "cyborg_variables.scss";
+// Variables
+// --------------------------------------------------
+
+//== Colors
+
+$gray-dark:              #282828;   // #333
+$gray-light:             #888;   // #999
+$gray-lighter:           #ADAFAE; // #eee
+
+$brand-primary:         #72abfa;
+$brand-success:         #5cb85c;
+$brand-info:            #5bc0de;
+$brand-warning:         #f0ad4e;
+
+//== Scaffolding
+
+$body-bg:               #000;
+$text-color:            #fff;
+
+//== Buttons
+
+$btn-default-color:              #fff;
+$btn-default-bg:                 lighten($gray-dark, 10%);
+
+$btn-primary-color:              #000;
+$btn-primary-border:             darken($btn-default-bg, 10%);
+
+$btn-success-color:              #000;
+$btn-success-border:             darken($btn-default-bg, 10%);
+
+$btn-info-color:                 #000;
+$btn-info-border:                darken($btn-default-bg, 10%);
+
+$btn-warning-color:              #000;
+$btn-warning-border:             darken($btn-default-bg, 10%);
+
+$btn-danger-color:               #000;
+$btn-danger-border:              darken($btn-default-bg, 10%);
+
+
+
+//== Forms
+
+$input-bg:                       $gray-darker;
+$input-bg-disabled:              $gray-lighter;
+
+$input-group-addon-bg:           $gray-lighter;
+
+
+//== Pagination
+
+$pagination-hover-color:               #fff;
+
+
+//== Labels
+
+$label-default-bg:            lighten($btn-default-bg, 20%);
+$label-color:                 #000;
+$label-link-hover-color:      #000;
+
+//== Badges
+
+$badge-link-hover-color:      #fff;
+
+//== Type
+
+$text-muted:                  $gray-lighter;
+$abbr-border-color:           $gray-lighter;
+$headings-small-color:        $gray-lighter;
+
+// Bootswatch
+// -----------------------------------------------------
+@import "cyborg_styles.scss";
+// Typography =================================================================
+
+.text-danger,
+.text-danger:hover {
+  color: lighten($brand-danger, 10%);
+}
+
+// Forms ======================================================================
+
+.legend {
+  margin-top: 20px;
+}
+
+.input-group-addon {
+  background-color: $btn-default-bg;
+}
+
+
+// Containers =================================================================
+
+.panel-info .panel-title {
+  color: #000;
+}
+
+// code tag
+code {
+  background-color: $btn-default-bg;
+  color: $input-color;
+}
diff --git a/resources/assets/themes/theme12.less b/resources/assets/themes/theme12.less
deleted file mode 100644
index a770a4b1..00000000
--- a/resources/assets/themes/theme12.less
+++ /dev/null
@@ -1,107 +0,0 @@
-// 36c3
-@import "cyborg_variables.less";
-
-//== Colors
-
-@gray-dark:              #282828;   // #333
-@gray-light:             #888;   // #999
-@gray-lighter:           #D0D0CE; // #eee
-@black:                  #000;
-
-@brand-primary:         #fe5000;
-@brand-success:         #00bb31;
-@brand-info:            #5bc0de;
-@brand-warning:         #febb00;
-@brand-danger:          #bb3100;
-
-//== Scaffolding
-
-@body-bg:               #000;
-@text-color:            @gray-lighter;
-
-//== Buttons
-
-@btn-default-color:              @gray-lighter;
-@btn-default-bg:                 lighten(@gray-dark, 10%);
-
-@btn-primary-color:              @black;
-@btn-primary-border:             darken(@btn-default-bg, 10%);
-
-@btn-success-color:              @black;
-@btn-success-border:             darken(@btn-default-bg, 10%);
-
-@btn-info-color:                 @black;
-@btn-info-border:                darken(@btn-default-bg, 10%);
-
-@btn-warning-color:              @black;
-@btn-warning-border:             darken(@btn-default-bg, 10%);
-
-@btn-danger-border:              darken(@btn-default-bg, 10%);
-
-
-//== Forms
-
-@input-bg:                       @gray-darker;
-@input-bg-disabled:              darken(@gray-dark, 10%);
-@input-group-addon-bg:           @gray-lighter;
-
-//== Pagination
-
-@pagination-color:                     @black;
-@pagination-hover-color:               @black;
-@pagination-active-color:              @black;
-
-//== Labels
-
-@label-color:                 #000;
-@label-link-hover-color:      @gray-dark;
-
-//== Panels
-
-@panel-primary-text:          #000;
-
-//== Badges
-
-@badge-color:                 @black;
-@badge-link-hover-color:      @black;
-
-//== Type
-
-@headings-small-color:        @gray-light;
-
-// Bootswatch
-// -----------------------------------------------------
-@import "cyborg_styles.less";
-// Forms ======================================================================
-
-.input-group-addon {
-  background-color: @btn-default-bg;
-}
-
-// Containers =================================================================
-
-// datetimepicker
-
-.bootstrap-datetimepicker-widget {
-
-  .timepicker-hour,
-  .timepicker-minute,
-  [data-action='selectHour'],
-  [data-action='selectMinute'],
-  [data-action='incrementHours'],
-  [data-action='decrementHours'],
-  [data-action='incrementMinutes'],
-  [data-action='decrementMinutes'] {
-
-    &:hover {
-
-      color: @gray;
-    }
-  }
-}
-
-// code tag
-code {
-  background-color: @btn-default-bg;
-  color: @input-color;
-}
diff --git a/resources/assets/themes/theme12.scss b/resources/assets/themes/theme12.scss
new file mode 100644
index 00000000..57e22e4b
--- /dev/null
+++ b/resources/assets/themes/theme12.scss
@@ -0,0 +1,107 @@
+// 36c3
+@import "cyborg_variables.scss";
+
+//== Colors
+
+$gray-dark:              #282828;   // #333
+$gray-light:             #888;   // #999
+$gray-lighter:           #D0D0CE; // #eee
+$black:                  #000;
+
+$brand-primary:         #fe5000;
+$brand-success:         #00bb31;
+$brand-info:            #5bc0de;
+$brand-warning:         #febb00;
+$brand-danger:          #bb3100;
+
+//== Scaffolding
+
+$body-bg:               #000;
+$text-color:            $gray-lighter;
+
+//== Buttons
+
+$btn-default-color:              $gray-lighter;
+$btn-default-bg:                 lighten($gray-dark, 10%);
+
+$btn-primary-color:              $black;
+$btn-primary-border:             darken($btn-default-bg, 10%);
+
+$btn-success-color:              $black;
+$btn-success-border:             darken($btn-default-bg, 10%);
+
+$btn-info-color:                 $black;
+$btn-info-border:                darken($btn-default-bg, 10%);
+
+$btn-warning-color:              $black;
+$btn-warning-border:             darken($btn-default-bg, 10%);
+
+$btn-danger-border:              darken($btn-default-bg, 10%);
+
+
+//== Forms
+
+$input-bg:                       $gray-darker;
+$input-bg-disabled:              darken($gray-dark, 10%);
+$input-group-addon-bg:           $gray-lighter;
+
+//== Pagination
+
+$pagination-color:                     $black;
+$pagination-hover-color:               $black;
+$pagination-active-color:              $black;
+
+//== Labels
+
+$label-color:                 #000;
+$label-link-hover-color:      $gray-dark;
+
+//== Panels
+
+$panel-primary-text:          #000;
+
+//== Badges
+
+$badge-color:                 $black;
+$badge-link-hover-color:      $black;
+
+//== Type
+
+$headings-small-color:        $gray-light;
+
+// Bootswatch
+// -----------------------------------------------------
+@import "cyborg_styles.scss";
+// Forms ======================================================================
+
+.input-group-addon {
+  background-color: $btn-default-bg;
+}
+
+// Containers =================================================================
+
+// datetimepicker
+
+.bootstrap-datetimepicker-widget {
+
+  .timepicker-hour,
+  .timepicker-minute,
+  [data-action='selectHour'],
+  [data-action='selectMinute'],
+  [data-action='incrementHours'],
+  [data-action='decrementHours'],
+  [data-action='incrementMinutes'],
+  [data-action='decrementMinutes'] {
+
+    &:hover {
+
+      color: $gray;
+    }
+  }
+}
+
+// code tag
+code {
+  background-color: $btn-default-bg;
+  color: $input-color;
+}
diff --git a/resources/assets/themes/theme13.less b/resources/assets/themes/theme13.less
deleted file mode 100644
index 22987f18..00000000
--- a/resources/assets/themes/theme13.less
+++ /dev/null
@@ -1,164 +0,0 @@
-// rc3
-@import "cyborg_variables.less";
-
-//== Colors
-
-@gray-darker:            #100e23;
-@gray-dark:              lighten(@gray-darker, 15%);
-@gray:                   lighten(@gray-dark, 15%);
-@gray-light:             lighten(@gray, 15%);
-@gray-lighter:           lighten(@gray-light, 15%);
-@black:                  #000;
-
-@brand-primary:         #6800e7;
-@brand-success:         #05b9ec;
-@brand-info:            #670295;
-@brand-warning:         #fff900;
-@brand-danger:          #b239ff;
-
-//== Scaffolding
-
-@body-bg:               #000;
-@text-color:            @gray-lighter;
-@link-color:            #fff;
-
-//== Typography
-
-@font-face {
-    font-family: 'Montserrat';
-    src: url('theme13/Montserrat-Regular.woff2') format('woff2'),
-        url('theme13/Montserrat-Regular.woff') format('woff');
-    font-weight: normal;
-    font-style: normal;
-    font-display: swap;
-}
-
-@font-face {
-    font-family: 'Orbitron';
-    src: url('theme13/Orbitron-Regular.woff2') format('woff2'),
-        url('theme13/Orbitron-Regular.woff') format('woff');
-    font-weight: normal;
-    font-style: normal;
-    font-display: swap;
-}
-
-@font-family-sans-serif: 'Montserrat', Helvetica Neue, Helvetica, Arial, sans-serif;
-@font-family-serif:       'Orbitron', Georgia, "Times New Roman", Times, serif;
-@headings-font-family:    @font-family-serif;
-
-//== Buttons
-
-@btn-default-color:              #fff;
-@btn-default-bg:                 lighten(@gray-dark, 10%);
-
-@btn-primary-color:              #fff;
-@btn-primary-border:             darken(@btn-default-bg, 10%);
-
-@btn-success-color:              #fff;
-@btn-success-border:             darken(@btn-default-bg, 10%);
-
-@btn-info-color:                 #fff;
-@btn-info-border:                darken(@btn-default-bg, 10%);
-
-@btn-warning-color:              #fff;
-@btn-warning-border:             darken(@btn-default-bg, 10%);
-
-@btn-danger-color:               #fff;
-@btn-danger-border:              darken(@btn-default-bg, 10%);
-
-//== Forms
-
-@input-bg:                       @gray-darker;
-@input-bg-disabled:              darken(@gray-dark, 10%);
-
-@input-group-addon-bg:           @gray-lighter;
-
-//== Pagination
-
-@pagination-color:                     @black;
-
-@pagination-hover-color:               @black;
-
-@pagination-active-color:              @black;
-
-//== Form states and alerts
-
-@state-success-text:             #fff;
-
-@state-info-text:                #fff;
-
-@state-warning-text:             #fff;
-
-@state-danger-text:              #fff;
-
-//== Labels
-
-@label-link-hover-color:      @gray-dark;
-
-//== Panels
-
-@panel-primary-text:          #000;
-
-@panel-success-text:          #fff;
-
-@panel-info-text:             #fff;
-
-@panel-warning-text:          #fff;
-
-@panel-danger-text:           #fff;
-
-//== Badges
-
-@badge-color:                 @black;
-@badge-link-hover-color:      @black;
-
-//== Type
-
-@headings-small-color:        @gray-light;
-
-// Bootswatch
-// -----------------------------------------------------
-@import "cyborg_styles.less";
-// Forms ======================================================================
-
-.input-group-addon {
-  background-color: @btn-default-bg;
-}
-
-// Containers =================================================================
-
-// datetimepicker
-
-.bootstrap-datetimepicker-widget {
-
-  .timepicker-hour,
-  .timepicker-minute,
-  [data-action='selectHour'],
-  [data-action='selectMinute'],
-  [data-action='incrementHours'],
-  [data-action='decrementHours'],
-  [data-action='incrementMinutes'],
-  [data-action='decrementMinutes'] {
-
-    &:hover {
-
-      color: @gray;
-    }
-  }
-}
-
-// code tag
-code {
-  background-color: @input-bg-disabled;
-  color: @input-color;
-}
-
-// Specials ===================================================================
-body {
-  background: #000 url('theme13/background.jpg') no-repeat top left;
-}
-
-.navbar.navbar-default {
-  background: rgba(0,0,0,0.8);
-  backdrop-filter: blur(6px);
-}
diff --git a/resources/assets/themes/theme13.scss b/resources/assets/themes/theme13.scss
new file mode 100644
index 00000000..fddb47e7
--- /dev/null
+++ b/resources/assets/themes/theme13.scss
@@ -0,0 +1,164 @@
+// rc3
+@import "cyborg_variables.scss";
+
+//== Colors
+
+$gray-darker:            #100e23;
+$gray-dark:              lighten($gray-darker, 15%);
+$gray:                   lighten($gray-dark, 15%);
+$gray-light:             lighten($gray, 15%);
+$gray-lighter:           lighten($gray-light, 15%);
+$black:                  #000;
+
+$brand-primary:         #6800e7;
+$brand-success:         #05b9ec;
+$brand-info:            #670295;
+$brand-warning:         #fff900;
+$brand-danger:          #b239ff;
+
+//== Scaffolding
+
+$body-bg:               #000;
+$text-color:            $gray-lighter;
+$link-color:            #fff;
+
+//== Typography
+
+$font-face {
+    font-family: 'Montserrat';
+    src: url('theme13/Montserrat-Regular.woff2') format('woff2'),
+        url('theme13/Montserrat-Regular.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}
+
+$font-face {
+    font-family: 'Orbitron';
+    src: url('theme13/Orbitron-Regular.woff2') format('woff2'),
+        url('theme13/Orbitron-Regular.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}
+
+$font-family-sans-serif: 'Montserrat', Helvetica Neue, Helvetica, Arial, sans-serif;
+$font-family-serif:       'Orbitron', Georgia, "Times New Roman", Times, serif;
+$headings-font-family:    $font-family-serif;
+
+//== Buttons
+
+$btn-default-color:              #fff;
+$btn-default-bg:                 lighten($gray-dark, 10%);
+
+$btn-primary-color:              #fff;
+$btn-primary-border:             darken($btn-default-bg, 10%);
+
+$btn-success-color:              #fff;
+$btn-success-border:             darken($btn-default-bg, 10%);
+
+$btn-info-color:                 #fff;
+$btn-info-border:                darken($btn-default-bg, 10%);
+
+$btn-warning-color:              #fff;
+$btn-warning-border:             darken($btn-default-bg, 10%);
+
+$btn-danger-color:               #fff;
+$btn-danger-border:              darken($btn-default-bg, 10%);
+
+//== Forms
+
+$input-bg:                       $gray-darker;
+$input-bg-disabled:              darken($gray-dark, 10%);
+
+$input-group-addon-bg:           $gray-lighter;
+
+//== Pagination
+
+$pagination-color:                     $black;
+
+$pagination-hover-color:               $black;
+
+$pagination-active-color:              $black;
+
+//== Form states and alerts
+
+$state-success-text:             #fff;
+
+$state-info-text:                #fff;
+
+$state-warning-text:             #fff;
+
+$state-danger-text:              #fff;
+
+//== Labels
+
+$label-link-hover-color:      $gray-dark;
+
+//== Panels
+
+$panel-primary-text:          #000;
+
+$panel-success-text:          #fff;
+
+$panel-info-text:             #fff;
+
+$panel-warning-text:          #fff;
+
+$panel-danger-text:           #fff;
+
+//== Badges
+
+$badge-color:                 $black;
+$badge-link-hover-color:      $black;
+
+//== Type
+
+$headings-small-color:        $gray-light;
+
+// Bootswatch
+// -----------------------------------------------------
+@import "cyborg_styles.scss";
+// Forms ======================================================================
+
+.input-group-addon {
+  background-color: $btn-default-bg;
+}
+
+// Containers =================================================================
+
+// datetimepicker
+
+.bootstrap-datetimepicker-widget {
+
+  .timepicker-hour,
+  .timepicker-minute,
+  [data-action='selectHour'],
+  [data-action='selectMinute'],
+  [data-action='incrementHours'],
+  [data-action='decrementHours'],
+  [data-action='incrementMinutes'],
+  [data-action='decrementMinutes'] {
+
+    &:hover {
+
+      color: $gray;
+    }
+  }
+}
+
+// code tag
+code {
+  background-color: $input-bg-disabled;
+  color: $input-color;
+}
+
+// Specials ===================================================================
+body {
+  background: #000 url('theme13/background.jpg') no-repeat top left;
+}
+
+.navbar.navbar-default {
+  background: rgba(0,0,0,0.8);
+  backdrop-filter: blur(6px);
+}
diff --git a/resources/assets/themes/theme14.less b/resources/assets/themes/theme14.less
deleted file mode 100644
index b68c0341..00000000
--- a/resources/assets/themes/theme14.less
+++ /dev/null
@@ -1,165 +0,0 @@
-// rc3 teal
-@import "cyborg_variables.less";
-
-//== Colors
-
-@gray-darker:            #0e1c23;
-@gray-dark:              lighten(@gray-darker, 15%);
-@gray:                   lighten(@gray-dark, 15%);
-@gray-light:             lighten(@gray, 15%);
-@gray-lighter:           lighten(@gray-light, 15%);
-@black:                  #000;
-
-@brand-primary:         #05b9ec;
-@brand-success:         #02fae0;
-@brand-info:            #025d83;
-@brand-warning:         #6800e7;
-@brand-danger:          #b239ff;
-
-
-//== Scaffolding
-
-@body-bg:               #000;
-@text-color:            @gray-lighter;
-@link-color:            #fff;
-
-//== Typography
-
-@font-face {
-    font-family: 'Montserrat';
-    src: url('theme13/Montserrat-Regular.woff2') format('woff2'),
-        url('theme13/Montserrat-Regular.woff') format('woff');
-    font-weight: normal;
-    font-style: normal;
-    font-display: swap;
-}
-
-@font-face {
-    font-family: 'Orbitron';
-    src: url('theme13/Orbitron-Regular.woff2') format('woff2'),
-        url('theme13/Orbitron-Regular.woff') format('woff');
-    font-weight: normal;
-    font-style: normal;
-    font-display: swap;
-}
-
-@font-family-sans-serif: 'Montserrat', Helvetica Neue, Helvetica, Arial, sans-serif;
-@font-family-serif:       'Orbitron', Georgia, "Times New Roman", Times, serif;
-@headings-font-family:    @font-family-serif;
-
-//== Buttons
-
-@btn-default-color:              #fff;
-@btn-default-bg:                 lighten(@gray-dark, 10%);
-
-@btn-primary-color:              #fff;
-@btn-primary-border:             darken(@btn-default-bg, 10%);
-
-@btn-success-color:              #fff;
-@btn-success-border:             darken(@btn-default-bg, 10%);
-
-@btn-info-color:                 #fff;
-@btn-info-border:                darken(@btn-default-bg, 10%);
-
-@btn-warning-color:              #fff;
-@btn-warning-border:             darken(@btn-default-bg, 10%);
-
-@btn-danger-color:               #fff;
-@btn-danger-border:              darken(@btn-default-bg, 10%);
-
-//== Forms
-
-@input-bg:                       @gray-darker;
-@input-bg-disabled:              darken(@gray-dark, 10%);
-
-@input-group-addon-bg:           @gray-lighter;
-
-//== Pagination
-
-@pagination-color:                     @black;
-
-@pagination-hover-color:               @black;
-
-@pagination-active-color:              @black;
-
-//== Form states and alerts
-
-@state-success-text:             #fff;
-
-@state-info-text:                #fff;
-
-@state-warning-text:             #fff;
-
-@state-danger-text:              #fff;
-
-//== Labels
-
-@label-link-hover-color:      @gray-dark;
-
-//== Panels
-
-@panel-primary-text:          #000;
-
-@panel-success-text:          #fff;
-
-@panel-info-text:             #fff;
-
-@panel-warning-text:          #fff;
-
-@panel-danger-text:           #fff;
-
-//== Badges
-
-@badge-color:                 @black;
-@badge-link-hover-color:      @black;
-
-//== Type
-
-@headings-small-color:        @gray-light;
-
-// Bootswatch
-// -----------------------------------------------------
-@import "cyborg_styles.less";
-// Forms ======================================================================
-
-.input-group-addon {
-  background-color: @btn-default-bg;
-}
-
-// Containers =================================================================
-
-// datetimepicker
-
-.bootstrap-datetimepicker-widget {
-
-  .timepicker-hour,
-  .timepicker-minute,
-  [data-action='selectHour'],
-  [data-action='selectMinute'],
-  [data-action='incrementHours'],
-  [data-action='decrementHours'],
-  [data-action='incrementMinutes'],
-  [data-action='decrementMinutes'] {
-
-    &:hover {
-
-      color: @gray;
-    }
-  }
-}
-
-// code tag
-code {
-  background-color: @input-bg-disabled;
-  color: @input-color;
-}
-
-// Specials ===================================================================
-body {
-  background: #000 url('theme13/background14.jpg') no-repeat top left;
-}
-
-.navbar.navbar-default {
-  background: rgba(0,0,0,0.8);
-  backdrop-filter: blur(6px);
-}
diff --git a/resources/assets/themes/theme14.scss b/resources/assets/themes/theme14.scss
new file mode 100644
index 00000000..77ea6ce1
--- /dev/null
+++ b/resources/assets/themes/theme14.scss
@@ -0,0 +1,165 @@
+// rc3 teal
+@import "cyborg_variables.scss";
+
+//== Colors
+
+$gray-darker:            #0e1c23;
+$gray-dark:              lighten($gray-darker, 15%);
+$gray:                   lighten($gray-dark, 15%);
+$gray-light:             lighten($gray, 15%);
+$gray-lighter:           lighten($gray-light, 15%);
+$black:                  #000;
+
+$brand-primary:         #05b9ec;
+$brand-success:         #02fae0;
+$brand-info:            #025d83;
+$brand-warning:         #6800e7;
+$brand-danger:          #b239ff;
+
+
+//== Scaffolding
+
+$body-bg:               #000;
+$text-color:            $gray-lighter;
+$link-color:            #fff;
+
+//== Typography
+
+$font-face {
+    font-family: 'Montserrat';
+    src: url('theme13/Montserrat-Regular.woff2') format('woff2'),
+        url('theme13/Montserrat-Regular.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}
+
+$font-face {
+    font-family: 'Orbitron';
+    src: url('theme13/Orbitron-Regular.woff2') format('woff2'),
+        url('theme13/Orbitron-Regular.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}
+
+$font-family-sans-serif: 'Montserrat', Helvetica Neue, Helvetica, Arial, sans-serif;
+$font-family-serif:       'Orbitron', Georgia, "Times New Roman", Times, serif;
+$headings-font-family:    $font-family-serif;
+
+//== Buttons
+
+$btn-default-color:              #fff;
+$btn-default-bg:                 lighten($gray-dark, 10%);
+
+$btn-primary-color:              #fff;
+$btn-primary-border:             darken($btn-default-bg, 10%);
+
+$btn-success-color:              #fff;
+$btn-success-border:             darken($btn-default-bg, 10%);
+
+$btn-info-color:                 #fff;
+$btn-info-border:                darken($btn-default-bg, 10%);
+
+$btn-warning-color:              #fff;
+$btn-warning-border:             darken($btn-default-bg, 10%);
+
+$btn-danger-color:               #fff;
+$btn-danger-border:              darken($btn-default-bg, 10%);
+
+//== Forms
+
+$input-bg:                       $gray-darker;
+$input-bg-disabled:              darken($gray-dark, 10%);
+
+$input-group-addon-bg:           $gray-lighter;
+
+//== Pagination
+
+$pagination-color:                     $black;
+
+$pagination-hover-color:               $black;
+
+$pagination-active-color:              $black;
+
+//== Form states and alerts
+
+$state-success-text:             #fff;
+
+$state-info-text:                #fff;
+
+$state-warning-text:             #fff;
+
+$state-danger-text:              #fff;
+
+//== Labels
+
+$label-link-hover-color:      $gray-dark;
+
+//== Panels
+
+$panel-primary-text:          #000;
+
+$panel-success-text:          #fff;
+
+$panel-info-text:             #fff;
+
+$panel-warning-text:          #fff;
+
+$panel-danger-text:           #fff;
+
+//== Badges
+
+$badge-color:                 $black;
+$badge-link-hover-color:      $black;
+
+//== Type
+
+$headings-small-color:        $gray-light;
+
+// Bootswatch
+// -----------------------------------------------------
+@import "cyborg_styles.scss";
+// Forms ======================================================================
+
+.input-group-addon {
+  background-color: $btn-default-bg;
+}
+
+// Containers =================================================================
+
+// datetimepicker
+
+.bootstrap-datetimepicker-widget {
+
+  .timepicker-hour,
+  .timepicker-minute,
+  [data-action='selectHour'],
+  [data-action='selectMinute'],
+  [data-action='incrementHours'],
+  [data-action='decrementHours'],
+  [data-action='incrementMinutes'],
+  [data-action='decrementMinutes'] {
+
+    &:hover {
+
+      color: $gray;
+    }
+  }
+}
+
+// code tag
+code {
+  background-color: $input-bg-disabled;
+  color: $input-color;
+}
+
+// Specials ===================================================================
+body {
+  background: #000 url('theme13/background14.jpg') no-repeat top left;
+}
+
+.navbar.navbar-default {
+  background: rgba(0,0,0,0.8);
+  backdrop-filter: blur(6px);
+}
diff --git a/resources/assets/themes/theme15.less b/resources/assets/themes/theme15.less
deleted file mode 100644
index c03b8c10..00000000
--- a/resources/assets/themes/theme15.less
+++ /dev/null
@@ -1,1045 +0,0 @@
-// DiVOC R2R
-@import "../../../node_modules/bootstrap/less/variables";
-
-/*
-The MIT License (MIT)
-
-Copyright (c) 2013 Thomas Park
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in
-all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-THE SOFTWARE.
-*/
-
-// Cyborg 3.2.0
-// Variables
-// --------------------------------------------------
-
-//== Colors
-//
-//## Gray and brand colors for use across Bootstrap.
-
-@gray-darker: #222; // #222
-@gray-dark: #282828; // #333
-@gray: #555; // #555
-@gray-light: #888; // #999
-@gray-lighter: #adafae; // #eee
-
-@brand-primary: #fe7900;
-@brand-success: #00c466;
-@brand-info: #00c466;
-@brand-warning: #d10069;
-@brand-danger: #d10069;
-
-@plum: #1f0229;
-@dark-green: #00292d;
-@blue: darken(#009951, 10%);
-
-.label.label-warning,
-.progress-bar.progress-bar-warning {
-  color:white;
-}
-
-//== Scaffolding
-//
-//## Settings for some of the most global styles.
-
-//** Background color for `<body>`.
-@body-bg: @dark-green;
-//** Global text color on `<body>`.
-@text-color: white;
-
-//** Global textual link color.
-@link-color: @brand-primary;
-//** Link hover color set via `darken()` function.
-@link-hover-color: @link-color;
-
-//== Typography
-//
-//## Font, line-height, and color for body text, headings, and more.
-
-@font-family-serif: Georgia, "Times New Roman", Times, serif;
-//** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
-@font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
-@font-family-base: Ubuntu, Roboto, sans-serif;
-
-@font-size-base: 14px;
-@font-size-large: ceil((@font-size-base * 1.25)); // ~18px
-@font-size-small: ceil((@font-size-base * 0.85)); // ~12px
-
-@font-size-h1: 34px;
-@font-size-h2: 24px;
-@font-size-h3: 20px;
-@font-size-h4: 20px;
-@font-size-h5: 20px;
-@font-size-h6: 16px;
-
-//** Unit-less `line-height` for use in components like buttons.
-@line-height-base: 1.428571429; // 20/14
-//** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
-@line-height-computed: floor((@font-size-base * @line-height-base)); // ~20px
-
-//** By default, this inherits from the `<body>`.
-@headings-font-family: @font-family-base;
-@headings-font-weight: 500;
-@headings-line-height: 1.1;
-@headings-color: @brand-info;
-
-//== Iconography
-//
-//## Specify custom location and filename of the included Glyphicons icon font.
-//## Useful for those including Bootstrap via Bower.
-
-//** File name for all font files.
-@icon-font-name: "glyphicons-halflings-regular";
-//** Element ID within SVG icon file.
-@icon-font-svg-id: "glyphicons_halflingsregular";
-
-//== Components
-//
-//## Define common padding and border radius sizes and more.
-//## Values based on 14px text and 1.428 line-height (~20px to start).
-
-@padding-base-vertical: 8px;
-@padding-base-horizontal: 12px;
-
-@padding-large-vertical: 14px;
-@padding-large-horizontal: 16px;
-
-@padding-small-vertical: 5px;
-@padding-small-horizontal: 10px;
-
-@padding-xs-vertical: 1px;
-@padding-xs-horizontal: 5px;
-
-@line-height-large: 1.33;
-@line-height-small: 1.5;
-
-@border-radius-base: 4px;
-@border-radius-large: 6px;
-@border-radius-small: 3px;
-
-//** Global color for active items (e.g., navs or dropdowns).
-@component-active-color: #fff;
-//** Global background color for active items (e.g., navs or dropdowns).
-@component-active-bg: @plum;
-
-//** Width of the `border` for generating carets that indicator dropdowns.
-@caret-width-base: 4px;
-//** Carets increase slightly in size for larger components.
-@caret-width-large: 5px;
-
-//== Tables
-//
-//## Customizes the `.table` component with basic values, each used across all table variations.
-
-//** Padding for `<th>`s and `<td>`s.
-@table-cell-padding: 8px;
-//** Padding for cells in `.table-condensed`.
-@table-condensed-cell-padding: 5px;
-
-//** Default background color used for all tables.
-@table-bg: darken(@gray-darker, 4%);
-//** Background color used for `.table-striped`.
-@table-bg-accent: darken(@table-bg, 6%);
-//** Background color used for `.table-hover`.
-@table-bg-hover: @gray-dark;
-@table-bg-active: @table-bg-hover;
-
-//** Border color for table and cell borders.
-@table-border-color: @gray-dark;
-
-//== Buttons
-//
-//## For each of Bootstrap's buttons, define text, background and border color.
-
-@btn-font-weight: normal;
-
-@btn-default-color: @dark-green;
-@btn-default-bg: @brand-primary;
-
-@btn-default-border: @brand-primary;
-
-@btn-primary-color: @btn-default-color;
-@btn-primary-bg: @btn-default-bg;
-@btn-primary-border: @btn-default-border;
-
-@btn-success-color: @dark-green;
-@btn-success-bg: @brand-success;
-@btn-success-border: darken(@btn-default-bg, 10%);
-
-@btn-info-color: @dark-green;
-@btn-info-bg: @brand-info;
-@btn-info-border: @brand-info;
-
-@btn-warning-color: @dark-green;
-@btn-warning-bg: @brand-warning;
-@btn-warning-border: darken(@btn-default-bg, 10%);
-
-@btn-danger-color: white;
-@btn-danger-bg: @brand-danger;
-@btn-danger-border: @brand-danger;
-
-@btn-link-disabled-color: @gray-light;
-
-//== Forms
-//
-//##
-
-//** `<input>` background color
-@input-bg: @gray-darker;
-//** `<input disabled>` background color
-@input-bg-disabled: @gray-darker;
-
-//** Text color for `<input>`s
-@input-color: @text-color;
-//** `<input>` border color
-@input-border: @gray-dark;
-//** `<input>` border radius
-@input-border-radius: @border-radius-base;
-//** Border color for inputs on focus
-@input-border-focus: @brand-primary;
-
-//** Placeholder text color
-@input-color-placeholder: @gray-light;
-
-//** Default `.form-control` height
-@input-height-base: (@line-height-computed + (@padding-base-vertical * 2) + 2);
-//** Large `.form-control` height
-@input-height-large: (
-  ceil(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) +
-    2
-);
-//** Small `.form-control` height
-@input-height-small: (
-  floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) +
-    2
-);
-
-@legend-color: @text-color;
-@legend-border-color: @gray-dark;
-
-//** Background color for textual input addons
-@input-group-addon-bg: @gray-lighter;
-//** Border color for textual input addons
-@input-group-addon-border-color: @input-border;
-
-//== Dropdowns
-//
-//## Dropdown menu container and contents.
-
-//** Background for the dropdown menu.
-@dropdown-bg: @gray-darker;
-//** Dropdown menu `border-color`.
-@dropdown-border: rgba(255, 255, 255, 0.1);
-//** Dropdown menu `border-color` **for IE8**.
-@dropdown-fallback-border: #444;
-//** Divider color for between dropdown items.
-@dropdown-divider-bg: rgba(255, 255, 255, 0.1);
-
-//** Dropdown link text color.
-@dropdown-link-color: #fff;
-//** Hover color for dropdown links.
-@dropdown-link-hover-color: #fff;
-//** Hover background for dropdown links.
-@dropdown-link-hover-bg: @dropdown-link-active-bg;
-
-//** Active dropdown menu item text color.
-@dropdown-link-active-color: #fff;
-//** Active dropdown menu item background color.
-@dropdown-link-active-bg: @component-active-bg;
-
-//** Disabled dropdown menu item background color.
-@dropdown-link-disabled-color: @text-muted;
-
-//** Text color for headers within dropdown menus.
-@dropdown-header-color: @text-muted;
-
-//** Deprecated `@dropdown-caret-color` as of v3.1.0
-@dropdown-caret-color: #000;
-
-//-- Z-index master list
-//
-// Warning: Avoid customizing these values. They're used for a bird's eye view
-// of components dependent on the z-axis and are designed to all work together.
-//
-// Note: These variables are not generated into the Customizer.
-
-@zindex-navbar: 1000;
-@zindex-dropdown: 1000;
-@zindex-popover: 1060;
-@zindex-tooltip: 1070;
-@zindex-navbar-fixed: 1030;
-@zindex-modal-background: 1040;
-@zindex-modal: 1050;
-
-//== Media queries breakpoints
-//
-//## Define the breakpoints at which your layout will change, adapting to different screen sizes.
-
-// Extra small screen / phone
-//** Deprecated `@screen-xs` as of v3.0.1
-@screen-xs: 480px;
-//** Deprecated `@screen-xs-min` as of v3.2.0
-@screen-xs-min: @screen-xs;
-//** Deprecated `@screen-phone` as of v3.0.1
-@screen-phone: @screen-xs-min;
-
-// Small screen / tablet
-//** Deprecated `@screen-sm` as of v3.0.1
-@screen-sm: 768px;
-@screen-sm-min: @screen-sm;
-//** Deprecated `@screen-tablet` as of v3.0.1
-@screen-tablet: @screen-sm-min;
-
-// Medium screen / desktop
-//** Deprecated `@screen-md` as of v3.0.1
-@screen-md: 992px;
-@screen-md-min: @screen-md;
-//** Deprecated `@screen-desktop` as of v3.0.1
-@screen-desktop: @screen-md-min;
-
-// Large screen / wide desktop
-//** Deprecated `@screen-lg` as of v3.0.1
-@screen-lg: 1200px;
-@screen-lg-min: @screen-lg;
-//** Deprecated `@screen-lg-desktop` as of v3.0.1
-@screen-lg-desktop: @screen-lg-min;
-
-// So media queries don't overlap when required, provide a maximum
-@screen-xs-max: (@screen-sm-min - 1);
-@screen-sm-max: (@screen-md-min - 1);
-@screen-md-max: (@screen-lg-min - 1);
-
-//== Grid system
-//
-//## Define your custom responsive grid.
-
-//** Number of columns in the grid.
-@grid-columns: 12;
-//** Padding between columns. Gets divided in half for the left and right.
-@grid-gutter-width: 30px;
-// Navbar collapse
-//** Point at which the navbar becomes uncollapsed.
-@grid-float-breakpoint: @screen-sm-min;
-//** Point at which the navbar begins collapsing.
-@grid-float-breakpoint-max: (@grid-float-breakpoint - 1);
-
-//== Container sizes
-//
-//## Define the maximum width of `.container` for different screen sizes.
-
-// Small screen / tablet
-@container-tablet: ((720px + @grid-gutter-width));
-//** For `@screen-sm-min` and up.
-@container-sm: @container-tablet;
-
-// Medium screen / desktop
-@container-desktop: ((940px + @grid-gutter-width));
-//** For `@screen-md-min` and up.
-@container-md: @container-desktop;
-
-// Large screen / wide desktop
-@container-large-desktop: ((1140px + @grid-gutter-width));
-//** For `@screen-lg-min` and up.
-@container-lg: @container-large-desktop;
-
-//== Navbar
-//
-//##
-
-// Basics of a navbar
-@navbar-height: 50px;
-@navbar-margin-bottom: @line-height-computed;
-@navbar-border-radius: @border-radius-base;
-@navbar-padding-horizontal: floor((@grid-gutter-width / 2));
-@navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2);
-@navbar-collapse-max-height: 340px;
-
-@navbar-default-color: @text-color;
-@navbar-default-bg: @plum;
-@navbar-default-border: @gray-dark;
-
-// Navbar links
-@navbar-default-link-color: @text-color;
-@navbar-default-link-hover-color: #fff;
-@navbar-default-link-hover-bg: transparent;
-@navbar-default-link-active-color: #fff;
-@navbar-default-link-active-bg: transparent;
-@navbar-default-link-disabled-color: @gray-light;
-@navbar-default-link-disabled-bg: transparent;
-
-// Navbar brand label
-@navbar-default-brand-color: #fff;
-@navbar-default-brand-hover-color: #fff;
-@navbar-default-brand-hover-bg: transparent;
-
-// Navbar toggle
-@navbar-default-toggle-hover-bg: @gray-dark;
-@navbar-default-toggle-icon-bar-bg: #ccc;
-@navbar-default-toggle-border-color: @gray-dark;
-
-// Inverted navbar
-// Reset inverted navbar basics
-@navbar-inverse-color: @gray-light;
-@navbar-inverse-bg: @gray-darker;
-@navbar-inverse-border: darken(@navbar-inverse-bg, 10%);
-
-// Inverted navbar links
-@navbar-inverse-link-color: @gray-light;
-@navbar-inverse-link-hover-color: #fff;
-@navbar-inverse-link-hover-bg: transparent;
-@navbar-inverse-link-active-color: @navbar-inverse-link-hover-color;
-@navbar-inverse-link-active-bg: transparent;
-@navbar-inverse-link-disabled-color: #aaa;
-@navbar-inverse-link-disabled-bg: transparent;
-
-// Inverted navbar brand label
-@navbar-inverse-brand-color: #fff;
-@navbar-inverse-brand-hover-color: #fff;
-@navbar-inverse-brand-hover-bg: transparent;
-
-// Inverted navbar toggle
-@navbar-inverse-toggle-hover-bg: #333;
-@navbar-inverse-toggle-icon-bar-bg: #fff;
-@navbar-inverse-toggle-border-color: #333;
-
-//== Navs
-//
-//##
-
-//=== Shared nav styles
-@nav-link-padding: 10px 15px;
-@nav-link-hover-bg: @gray-darker;
-
-@nav-disabled-link-color: @gray-light;
-@nav-disabled-link-hover-color: @gray-light;
-
-@nav-open-link-hover-color: @gray-darker;
-
-//== Tabs
-@nav-tabs-border-color: @gray-dark;
-
-@nav-tabs-link-hover-border-color: transparent;
-
-@nav-tabs-active-link-hover-bg: @plum;
-@nav-tabs-active-link-hover-color: #fff;
-@nav-tabs-active-link-hover-border-color: @gray-dark;
-
-@nav-tabs-justified-link-border-color: #ddd;
-@nav-tabs-justified-active-link-border-color: @body-bg;
-
-//== Pills
-@nav-pills-border-radius: @border-radius-base;
-@nav-pills-active-link-hover-bg: @component-active-bg;
-@nav-pills-active-link-hover-color: @component-active-color;
-
-//== Pagination
-//
-//##
-
-@pagination-color: #fff;
-@pagination-bg: @gray-darker;
-@pagination-border: @gray-dark;
-
-@pagination-hover-color: #fff;
-@pagination-hover-bg: @component-active-bg;
-@pagination-hover-border: transparent;
-
-@pagination-active-color: #fff;
-@pagination-active-bg: @brand-primary;
-@pagination-active-border: transparent;
-
-@pagination-disabled-color: @gray-light;
-@pagination-disabled-bg: @gray-darker;
-@pagination-disabled-border: @gray-dark;
-
-//== Pager
-//
-//##
-
-@pager-bg: @pagination-bg;
-@pager-border: @pagination-border;
-@pager-border-radius: 15px;
-
-@pager-hover-bg: @pagination-hover-bg;
-
-@pager-active-bg: @pagination-active-bg;
-@pager-active-color: @pagination-active-color;
-
-@pager-disabled-color: @gray-light;
-
-//== Jumbotron
-//
-//##
-
-@jumbotron-padding: 30px;
-@jumbotron-color: inherit;
-@jumbotron-bg: darken(@gray-darker, 5%);
-@jumbotron-heading-color: inherit;
-@jumbotron-font-size: ceil((@font-size-base * 1.5));
-
-//== Form states and alerts
-//
-//## Define colors for form feedback states and, by default, alerts.
-
-@state-success-text: #fff;
-@state-success-bg: @brand-success;
-@state-success-border: darken(@state-success-bg, 5%);
-
-@state-info-text: #fff;
-@state-info-bg: @brand-info;
-@state-info-border: darken(@state-info-bg, 7%);
-
-@state-warning-text: #000;
-@state-warning-bg: @brand-warning;
-@state-warning-border: darken(@state-warning-bg, 3%);
-
-@state-danger-text: #fff;
-@state-danger-bg: @brand-danger;
-@state-danger-border: darken(@state-danger-bg, 3%);
-
-//== Tooltips
-//
-//##
-
-//** Tooltip max width
-@tooltip-max-width: 200px;
-//** Tooltip text color
-@tooltip-color: #fff;
-//** Tooltip background color
-@tooltip-bg: rgba(0, 0, 0, 0.9);
-@tooltip-opacity: 0.9;
-
-//** Tooltip arrow width
-@tooltip-arrow-width: 5px;
-//** Tooltip arrow color
-@tooltip-arrow-color: @tooltip-bg;
-
-//== Popovers
-//
-//##
-
-//** Popover body background color
-@popover-bg: lighten(@body-bg, 10%);
-//** Popover maximum width
-@popover-max-width: 276px;
-//** Popover border color
-@popover-border-color: rgba(0, 0, 0, 0.2);
-//** Popover fallback border color
-@popover-fallback-border-color: #999;
-
-//** Popover title background color
-@popover-title-bg: darken(@popover-bg, 3%);
-
-//** Popover arrow width
-@popover-arrow-width: 10px;
-//** Popover arrow color
-@popover-arrow-color: @popover-bg;
-
-//** Popover outer arrow width
-@popover-arrow-outer-width: (@popover-arrow-width + 1);
-//** Popover outer arrow color
-@popover-arrow-outer-color: fadein(@popover-border-color, 5%);
-//** Popover outer arrow fallback color
-@popover-arrow-outer-fallback-color: darken(
-  @popover-fallback-border-color,
-  20%
-);
-
-//== Labels
-//
-//##
-
-//** Default label background color
-@label-default-bg: @plum;
-//** Primary label background color
-@label-primary-bg: @brand-primary;
-//** Success label background color
-@label-success-bg: @brand-success;
-//** Info label background color
-@label-info-bg: @brand-info;
-//** Warning label background color
-@label-warning-bg: @blue;
-//** Danger label background color
-@label-danger-bg: @brand-danger;
-
-//** Default label text color
-@label-color: #fff;
-//** Default text color of a linked label
-@label-link-hover-color: #fff;
-
-//== Modals
-//
-//##
-
-//** Padding applied to the modal body
-@modal-inner-padding: 20px;
-
-//** Padding applied to the modal title
-@modal-title-padding: 15px;
-//** Modal title line-height
-@modal-title-line-height: @line-height-base;
-
-//** Background color of modal content area
-@modal-content-bg: lighten(@body-bg, 10%);
-//** Modal content border color
-@modal-content-border-color: rgba(0, 0, 0, 0.2);
-//** Modal content border color **for IE8**
-@modal-content-fallback-border-color: #999;
-
-//** Modal backdrop background color
-@modal-backdrop-bg: #000;
-//** Modal backdrop opacity
-@modal-backdrop-opacity: 0.5;
-//** Modal header border color
-@modal-header-border-color: @gray-dark;
-//** Modal footer border color
-@modal-footer-border-color: @modal-header-border-color;
-
-@modal-lg: 900px;
-@modal-md: 600px;
-@modal-sm: 300px;
-
-//== Alerts
-//
-//## Define alert colors, border radius, and padding.
-
-@alert-padding: 15px;
-@alert-border-radius: @border-radius-base;
-@alert-link-font-weight: bold;
-
-@alert-success-bg: @state-success-bg;
-@alert-success-text: @dark-green;
-@alert-success-border: @state-success-border;
-
-@alert-info-bg: @state-info-bg;
-@alert-info-text: @dark-green;
-@alert-info-border: @state-info-border;
-
-@alert-warning-bg: @state-warning-bg;
-@alert-warning-text: @state-warning-text;
-@alert-warning-border: @state-warning-border;
-
-@alert-danger-bg: @state-danger-bg;
-@alert-danger-text: white;
-@alert-danger-border: @state-danger-border;
-
-//== Progress bars
-//
-//##
-
-//** Background color of the whole progress component
-@progress-bg: @gray-darker;
-//** Progress bar text color
-@progress-bar-color: #fff;
-
-//** Default progress bar color
-@progress-bar-bg: @brand-primary;
-//** Success progress bar color
-@progress-bar-success-bg: @brand-success;
-//** Warning progress bar color
-@progress-bar-warning-bg: @brand-warning;
-//** Danger progress bar color
-@progress-bar-danger-bg: @brand-danger;
-//** Info progress bar color
-@progress-bar-info-bg: @brand-info;
-
-//== List group
-//
-//##
-
-//** Background color on `.list-group-item`
-@list-group-bg: @plum;
-//** `.list-group-item` border color
-@list-group-border: @gray-dark;
-//** List group border radius
-@list-group-border-radius: @border-radius-base;
-
-//** Background color of single list items on hover
-@list-group-hover-bg: lighten(@list-group-bg, 15%);
-//** Text color of active list items
-@list-group-active-color: @component-active-color;
-//** Background color of active list items
-@list-group-active-bg: @component-active-bg;
-//** Border color of active list elements
-@list-group-active-border: @list-group-active-bg;
-//** Text color for content within active list items
-@list-group-active-text-color: lighten(@list-group-active-bg, 40%);
-
-//** Text color of disabled list items
-@list-group-disabled-color: @gray-light;
-//** Background color of disabled list items
-@list-group-disabled-bg: @gray-lighter;
-//** Text color for content within disabled list items
-@list-group-disabled-text-color: @list-group-disabled-color;
-
-@list-group-link-color: @text-color;
-@list-group-link-hover-color: @list-group-link-color;
-@list-group-link-heading-color: #fff;
-
-//== Panels
-//
-//##
-
-@panel-bg: @plum;
-@panel-body-padding: 15px;
-@panel-heading-padding: 10px 15px;
-@panel-footer-padding: @panel-heading-padding;
-@panel-border-radius: @border-radius-base;
-
-//** Border color for elements within panels
-@panel-inner-border: lighten(@plum, 3%);
-
-@panel-default-text: @text-color;
-@panel-default-border: @panel-inner-border;
-@panel-default-heading-bg: lighten(@plum, 3%);
-
-@panel-footer-bg: @panel-default-heading-bg;
-
-@panel-primary-text: #fff;
-@panel-primary-border: @brand-primary;
-@panel-primary-heading-bg: @brand-primary;
-
-@panel-success-text: @state-success-text;
-@panel-success-border: @state-success-border;
-@panel-success-heading-bg: @state-success-bg;
-
-@panel-info-text: @state-info-text;
-@panel-info-border: @panel-inner-border;
-@panel-info-heading-bg: lighten(@plum, 3%);
-
-@panel-warning-text: white;
-@panel-warning-border: @blue;
-@panel-warning-heading-bg: @blue;
-
-@panel-danger-text: @state-danger-text;
-@panel-danger-border: @state-danger-border;
-@panel-danger-heading-bg: @state-danger-bg;
-
-//== Thumbnails
-//
-//##
-
-//** Padding around the thumbnail image
-@thumbnail-padding: 4px;
-//** Thumbnail background color
-@thumbnail-bg: @gray-dark;
-//** Thumbnail border color
-@thumbnail-border: @gray-dark;
-//** Thumbnail border radius
-@thumbnail-border-radius: @border-radius-base;
-
-//** Custom text color for thumbnail captions
-@thumbnail-caption-color: @text-color;
-//** Padding around the thumbnail caption
-@thumbnail-caption-padding: 9px;
-
-//== Wells
-//
-//##
-
-@well-bg: darken(@gray-darker, 5%);
-@well-border: darken(@well-bg, 7%);
-
-//== Badges
-//
-//##
-
-@badge-color: @dark-green;
-//** Linked badge text color on hover
-@badge-link-hover-color: @dark-green;
-@badge-bg: @brand-primary;
-
-//** Badge text color in active nav link
-@badge-active-color: @brand-primary;
-//** Badge background color in active nav link
-@badge-active-bg: #fff;
-
-@badge-font-weight: bold;
-@badge-line-height: 1;
-@badge-border-radius: 10px;
-
-//== Breadcrumbs
-//
-//##
-
-@breadcrumb-padding-vertical: 8px;
-@breadcrumb-padding-horizontal: 15px;
-//** Breadcrumb background color
-@breadcrumb-bg: @gray-darker;
-//** Breadcrumb text color
-@breadcrumb-color: #fff;
-//** Text color of current page in the breadcrumb
-@breadcrumb-active-color: @text-color;
-//** Textual separator for between breadcrumb elements
-@breadcrumb-separator: "/";
-
-//== Carousel
-//
-//##
-
-@carousel-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
-
-@carousel-control-color: #fff;
-@carousel-control-width: 15%;
-@carousel-control-opacity: 0.5;
-@carousel-control-font-size: 20px;
-
-@carousel-indicator-active-bg: #fff;
-@carousel-indicator-border-color: #fff;
-
-@carousel-caption-color: #fff;
-
-//== Close
-//
-//##
-
-@close-font-weight: bold;
-@close-color: #000;
-@close-text-shadow: 0 1px 0 #fff;
-
-//== Code
-//
-//##
-
-@code-color: #c7254e;
-@code-bg: #f9f2f4;
-
-@kbd-color: #fff;
-@kbd-bg: #333;
-
-@pre-bg: #f5f5f5;
-@pre-color: @gray-dark;
-@pre-border-color: #ccc;
-@pre-scrollable-max-height: 340px;
-
-//== Type
-//
-//##
-
-//** Horizontal offset for forms and lists.
-@component-offset-horizontal: 180px;
-//** Text muted color
-@text-muted: @gray-light;
-//** Abbreviations and acronyms border color
-@abbr-border-color: @gray-light;
-//** Headings small color
-@headings-small-color: @gray-light;
-//** Blockquote small color
-@blockquote-small-color: @gray;
-//** Blockquote font size
-@blockquote-font-size: (@font-size-base * 1.25);
-//** Blockquote border color
-@blockquote-border-color: @gray-dark;
-//** Page header border color
-@page-header-border-color: @gray-dark;
-//** Width of horizontal description list titles
-@dl-horizontal-offset: @component-offset-horizontal;
-//** Horizontal line color.
-@hr-border: @gray-dark;
-
-@import "base";
-
-.messages .text-danger {
-  color: @brand-danger;
-}
-
-.messages .text-info {
-  color: #fff;
-}
-
-.messages .caret {
-  color: #fff;
-}
-
-// Cyborg 3.2.0
-// Bootswatch
-// -----------------------------------------------------
-
-// Navbar =====================================================================
-
-// Buttons ====================================================================
-
-// Typography =================================================================
-
-.text-primary,
-.text-primary:hover,
-a.text-primary,
-a.text-primary:hover {
-  color: @brand-primary;
-}
-
-.text-success,
-.text-success:hover,
-a.text-success,
-a.text-success:hover {
-  color: @brand-success;
-}
-
-.text-danger,
-.text-danger:hover,
-a.text-danger,
-a.text-danger:hover {
-  color: @brand-danger;
-}
-
-.text-warning,
-.text-warning:hover,
-a.text-warning,
-a.text-warning:hover {
-  color: @brand-warning;
-}
-
-.text-info,
-.text-info:hover,
-a.text-info,
-a.text-info:hover {
-  color: @brand-info;
-}
-
-// Tables =====================================================================
-
-table,
-.table {
-  color: #fff;
-
-  a:not(.btn) {
-    color: #fff;
-    text-decoration: underline;
-  }
-
-  .text-muted {
-    color: @text-muted;
-  }
-}
-
-.table-responsive > .table {
-  background-color: @table-bg;
-}
-
-// Forms ======================================================================
-
-.has-warning {
-  .help-block,
-  .control-label,
-  .form-control-feedback {
-    color: @brand-warning;
-  }
-
-  .form-control,
-  .form-control:focus,
-  .input-group-addon {
-    border-color: @brand-warning;
-  }
-}
-
-.has-error {
-  .help-block,
-  .control-label,
-  .form-control-feedback {
-    color: @brand-danger;
-  }
-
-  .form-control,
-  .form-control:focus,
-  .input-group-addon {
-    border-color: @brand-danger;
-  }
-}
-
-.has-success {
-  .help-block,
-  .control-label,
-  .form-control-feedback {
-    color: @brand-success;
-  }
-
-  .form-control,
-  .form-control:focus,
-  .input-group-addon {
-    border-color: @brand-success;
-  }
-}
-
-.input-group-addon {
-  background-color: @btn-default-bg;
-}
-
-// Navs =======================================================================
-
-.nav-tabs,
-.nav-pills,
-.breadcrumb,
-.pager {
-  a {
-    color: #fff;
-  }
-}
-
-// Indicators =================================================================
-
-.alert {
-  .alert-link,
-  a {
-    color: white;
-    text-decoration: underline;
-  }
-
-  .close {
-    text-decoration: none;
-  }
-}
-
-.close {
-  color: #fff;
-  text-decoration: none;
-  opacity: 0.4;
-
-  &:hover,
-  &:focus {
-    color: #fff;
-    opacity: 1;
-  }
-}
-
-// Progress bars ==============================================================
-
-// Containers =================================================================
-
-a.thumbnail:hover,
-a.thumbnail:focus,
-a.thumbnail.active {
-  border-color: @thumbnail-border;
-}
-
-.jumbotron {
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    color: @brand-info;
-  }
-}
-
-// code tag
-code {
-  background-color: @input-bg;
-  color: @input-color;
-}
diff --git a/resources/assets/themes/theme15.scss b/resources/assets/themes/theme15.scss
new file mode 100644
index 00000000..f16b8252
--- /dev/null
+++ b/resources/assets/themes/theme15.scss
@@ -0,0 +1,1043 @@
+// DiVOC R2R
+
+/*
+The MIT License (MIT)
+
+Copyright (c) 2013 Thomas Park
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+*/
+
+// Cyborg 3.2.0
+// Variables
+// --------------------------------------------------
+
+//== Colors
+//
+//## Gray and brand colors for use across Bootstrap.
+
+$gray-darker: #222; // #222
+$gray-dark: #282828; // #333
+$gray: #555; // #555
+$gray-light: #888; // #999
+$gray-lighter: #adafae; // #eee
+
+$brand-primary: #fe7900;
+$brand-success: #00c466;
+$brand-info: #00c466;
+$brand-warning: #d10069;
+$brand-danger: #d10069;
+
+$plum: #1f0229;
+$dark-green: #00292d;
+$blue: darken(#009951, 10%);
+
+.label.label-warning,
+.progress-bar.progress-bar-warning {
+  color:white;
+}
+
+//== Scaffolding
+//
+//## Settings for some of the most global styles.
+
+//** Background color for `<body>`.
+$body-bg: $dark-green;
+//** Global text color on `<body>`.
+$text-color: white;
+//** Text muted color
+$text-muted: $gray-light;
+
+//** Global textual link color.
+$link-color: $brand-primary;
+//** Link hover color set via `darken()` function.
+$link-hover-color: $link-color;
+
+//== Typography
+//
+//## Font, line-height, and color for body text, headings, and more.
+
+$font-family-serif: Georgia, "Times New Roman", Times, serif;
+//** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
+$font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
+$font-family-base: Ubuntu, Roboto, sans-serif;
+
+$font-size-base: .875rem; // typically 14px
+$font-size-large: 1.125rem; // ~18px
+$font-size-small: ceil(($font-size-base * 0.85)); // ~12px
+
+$font-size-h1: 34px;
+$font-size-h2: 24px;
+$font-size-h3: 20px;
+$font-size-h4: 20px;
+$font-size-h5: 20px;
+$font-size-h6: 16px;
+
+//** Unit-less `line-height` for use in components like buttons.
+$line-height-base: 1.428571429; // 20/14
+//** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
+$line-height-computed: floor(($font-size-base * $line-height-base)); // ~20px
+
+//** By default, this inherits from the `<body>`.
+$headings-font-family: $font-family-base;
+$headings-font-weight: 500;
+$headings-line-height: 1.1;
+$headings-color: $brand-info;
+
+//== Iconography
+//
+//## Specify custom location and filename of the included Glyphicons icon font.
+//## Useful for those including Bootstrap via Bower.
+
+//** File name for all font files.
+$icon-font-name: "glyphicons-halflings-regular";
+//** Element ID within SVG icon file.
+$icon-font-svg-id: "glyphicons_halflingsregular";
+
+//== Components
+//
+//## Define common padding and border radius sizes and more.
+//## Values based on 14px text and 1.428 line-height (~20px to start).
+
+$padding-base-vertical: .5rem;
+$padding-base-horizontal: 12px;
+
+$padding-large-vertical: .875rem;
+$padding-large-horizontal: 16px;
+
+$padding-small-vertical: .3125rem;
+$padding-small-horizontal: 10px;
+
+$padding-xs-vertical: 1px;
+$padding-xs-horizontal: 5px;
+
+$line-height-large: 1.33;
+$line-height-small: 1.5;
+
+$border-radius-base: 4px;
+$border-radius-large: 6px;
+$border-radius-small: 3px;
+
+//** Global color for active items (e.g., navs or dropdowns).
+$component-active-color: #fff;
+//** Global background color for active items (e.g., navs or dropdowns).
+$component-active-bg: $plum;
+
+//** Width of the `border` for generating carets that indicator dropdowns.
+$caret-width-base: 4px;
+//** Carets increase slightly in size for larger components.
+$caret-width-large: 5px;
+
+//== Tables
+//
+//## Customizes the `.table` component with basic values, each used across all table variations.
+
+//** Padding for `<th>`s and `<td>`s.
+$table-cell-padding: 8px;
+//** Padding for cells in `.table-condensed`.
+$table-condensed-cell-padding: 5px;
+
+//** Default background color used for all tables.
+$table-bg: darken($gray-darker, 4%);
+//** Background color used for `.table-striped`.
+$table-bg-accent: darken($table-bg, 6%);
+//** Background color used for `.table-hover`.
+$table-bg-hover: $gray-dark;
+$table-bg-active: $table-bg-hover;
+
+//** Border color for table and cell borders.
+$table-border-color: $gray-dark;
+
+//== Buttons
+//
+//## For each of Bootstrap's buttons, define text, background and border color.
+
+$btn-font-weight: normal;
+
+$btn-default-color: $dark-green;
+$btn-default-bg: $brand-primary;
+
+$btn-default-border: $brand-primary;
+
+$btn-primary-color: $btn-default-color;
+$btn-primary-bg: $btn-default-bg;
+$btn-primary-border: $btn-default-border;
+
+$btn-success-color: $dark-green;
+$btn-success-bg: $brand-success;
+$btn-success-border: darken($btn-default-bg, 10%);
+
+$btn-info-color: $dark-green;
+$btn-info-bg: $brand-info;
+$btn-info-border: $brand-info;
+
+$btn-warning-color: $dark-green;
+$btn-warning-bg: $brand-warning;
+$btn-warning-border: darken($btn-default-bg, 10%);
+
+$btn-danger-color: white;
+$btn-danger-bg: $brand-danger;
+$btn-danger-border: $brand-danger;
+
+$btn-link-disabled-color: $gray-light;
+
+//== Forms
+//
+//##
+
+//** `<input>` background color
+$input-bg: $gray-darker;
+//** `<input disabled>` background color
+$input-bg-disabled: $gray-darker;
+
+//** Text color for `<input>`s
+$input-color: $text-color;
+//** `<input>` border color
+$input-border: $gray-dark;
+//** `<input>` border radius
+$input-border-radius: $border-radius-base;
+//** Border color for inputs on focus
+$input-border-focus: $brand-primary;
+
+//** Placeholder text color
+$input-color-placeholder: $gray-light;
+
+//** Default `.form-control` height
+$input-height-base: ($line-height-computed + ($padding-base-vertical * 2) + 2);
+//** Large `.form-control` height
+$input-height-large: (
+  ceil($font-size-large * $line-height-large) + ($padding-large-vertical * 2) + 2
+);
+//** Small `.form-control` height
+$input-height-small: (
+  floor($font-size-small * $line-height-small) + ($padding-small-vertical * 2) +
+    2
+);
+
+$legend-color: $text-color;
+$legend-border-color: $gray-dark;
+
+//** Background color for textual input addons
+$input-group-addon-bg: $gray-lighter;
+//** Border color for textual input addons
+$input-group-addon-border-color: $input-border;
+
+//== Dropdowns
+//
+//## Dropdown menu container and contents.
+
+//** Background for the dropdown menu.
+$dropdown-bg: $gray-darker;
+//** Dropdown menu `border-color`.
+$dropdown-border: rgba(255, 255, 255, 0.1);
+//** Dropdown menu `border-color` **for IE8**.
+$dropdown-fallback-border: #444;
+//** Divider color for between dropdown items.
+$dropdown-divider-bg: rgba(255, 255, 255, 0.1);
+
+//** Active dropdown menu item text color.
+$dropdown-link-active-color: #fff;
+//** Active dropdown menu item background color.
+$dropdown-link-active-bg: $component-active-bg;
+
+//** Dropdown link text color.
+$dropdown-link-color: #fff;
+//** Hover color for dropdown links.
+$dropdown-link-hover-color: #fff;
+//** Hover background for dropdown links.
+$dropdown-link-hover-bg: $dropdown-link-active-bg;
+
+//** Disabled dropdown menu item background color.
+$dropdown-link-disabled-color: $text-muted;
+
+//** Text color for headers within dropdown menus.
+$dropdown-header-color: $text-muted;
+
+//** Deprecated `$dropdown-caret-color` as of v3.1.0
+$dropdown-caret-color: #000;
+
+//-- Z-index master list
+//
+// Warning: Avoid customizing these values. They're used for a bird's eye view
+// of components dependent on the z-axis and are designed to all work together.
+//
+// Note: These variables are not generated into the Customizer.
+
+$zindex-navbar: 1000;
+$zindex-dropdown: 1000;
+$zindex-popover: 1060;
+$zindex-tooltip: 1070;
+$zindex-navbar-fixed: 1030;
+$zindex-modal-background: 1040;
+$zindex-modal: 1050;
+
+//== Media queries breakpoints
+//
+//## Define the breakpoints at which your layout will change, adapting to different screen sizes.
+
+// Extra small screen / phone
+//** Deprecated `$screen-xs` as of v3.0.1
+$screen-xs: 480px;
+//** Deprecated `$screen-xs-min` as of v3.2.0
+$screen-xs-min: $screen-xs;
+//** Deprecated `$screen-phone` as of v3.0.1
+$screen-phone: $screen-xs-min;
+
+// Small screen / tablet
+//** Deprecated `$screen-sm` as of v3.0.1
+$screen-sm: 768px;
+$screen-sm-min: $screen-sm;
+//** Deprecated `$screen-tablet` as of v3.0.1
+$screen-tablet: $screen-sm-min;
+
+// Medium screen / desktop
+//** Deprecated `$screen-md` as of v3.0.1
+$screen-md: 992px;
+$screen-md-min: $screen-md;
+//** Deprecated `$screen-desktop` as of v3.0.1
+$screen-desktop: $screen-md-min;
+
+// Large screen / wide desktop
+//** Deprecated `$screen-lg` as of v3.0.1
+$screen-lg: 1200px;
+$screen-lg-min: $screen-lg;
+//** Deprecated `$screen-lg-desktop` as of v3.0.1
+$screen-lg-desktop: $screen-lg-min;
+
+// So media queries don't overlap when required, provide a maximum
+$screen-xs-max: ($screen-sm-min - 1);
+$screen-sm-max: ($screen-md-min - 1);
+$screen-md-max: ($screen-lg-min - 1);
+
+//== Grid system
+//
+//## Define your custom responsive grid.
+
+//** Number of columns in the grid.
+$grid-columns: 12;
+//** Padding between columns. Gets divided in half for the left and right.
+$grid-gutter-width: 30px;
+// Navbar collapse
+//** Point at which the navbar becomes uncollapsed.
+$grid-float-breakpoint: $screen-sm-min;
+//** Point at which the navbar begins collapsing.
+$grid-float-breakpoint-max: ($grid-float-breakpoint - 1);
+
+//== Container sizes
+//
+//## Define the maximum width of `.container` for different screen sizes.
+
+// Small screen / tablet
+$container-tablet: ((720px + $grid-gutter-width));
+//** For `$screen-sm-min` and up.
+$container-sm: $container-tablet;
+
+// Medium screen / desktop
+$container-desktop: ((940px + $grid-gutter-width));
+//** For `$screen-md-min` and up.
+$container-md: $container-desktop;
+
+// Large screen / wide desktop
+$container-large-desktop: ((1140px + $grid-gutter-width));
+//** For `$screen-lg-min` and up.
+$container-lg: $container-large-desktop;
+
+//== Navbar
+//
+//##
+
+// Basics of a navbar
+$navbar-height: 3.125rem;
+$navbar-margin-bottom: $line-height-computed;
+$navbar-border-radius: $border-radius-base;
+$navbar-padding-horizontal: floor(($grid-gutter-width / 2));
+$navbar-padding-vertical: (($navbar-height - $line-height-computed) / 2);
+$navbar-collapse-max-height: 340px;
+
+$navbar-default-color: $text-color;
+$navbar-default-bg: $plum;
+$navbar-default-border: $gray-dark;
+
+// Navbar links
+$navbar-default-link-color: $text-color;
+$navbar-default-link-hover-color: #fff;
+$navbar-default-link-hover-bg: transparent;
+$navbar-default-link-active-color: #fff;
+$navbar-default-link-active-bg: transparent;
+$navbar-default-link-disabled-color: $gray-light;
+$navbar-default-link-disabled-bg: transparent;
+
+// Navbar brand label
+$navbar-default-brand-color: #fff;
+$navbar-default-brand-hover-color: #fff;
+$navbar-default-brand-hover-bg: transparent;
+
+// Navbar toggle
+$navbar-default-toggle-hover-bg: $gray-dark;
+$navbar-default-toggle-icon-bar-bg: #ccc;
+$navbar-default-toggle-border-color: $gray-dark;
+
+// Inverted navbar
+// Reset inverted navbar basics
+$navbar-inverse-color: $gray-light;
+$navbar-inverse-bg: $gray-darker;
+$navbar-inverse-border: darken($navbar-inverse-bg, 10%);
+
+// Inverted navbar links
+$navbar-inverse-link-color: $gray-light;
+$navbar-inverse-link-hover-color: #fff;
+$navbar-inverse-link-hover-bg: transparent;
+$navbar-inverse-link-active-color: $navbar-inverse-link-hover-color;
+$navbar-inverse-link-active-bg: transparent;
+$navbar-inverse-link-disabled-color: #aaa;
+$navbar-inverse-link-disabled-bg: transparent;
+
+// Inverted navbar brand label
+$navbar-inverse-brand-color: #fff;
+$navbar-inverse-brand-hover-color: #fff;
+$navbar-inverse-brand-hover-bg: transparent;
+
+// Inverted navbar toggle
+$navbar-inverse-toggle-hover-bg: #333;
+$navbar-inverse-toggle-icon-bar-bg: #fff;
+$navbar-inverse-toggle-border-color: #333;
+
+//== Navs
+//
+//##
+
+//=== Shared nav styles
+$nav-link-padding: 10px 15px;
+$nav-link-hover-bg: $gray-darker;
+
+$nav-disabled-link-color: $gray-light;
+$nav-disabled-link-hover-color: $gray-light;
+
+$nav-open-link-hover-color: $gray-darker;
+
+//== Tabs
+$nav-tabs-border-color: $gray-dark;
+
+$nav-tabs-link-hover-border-color: transparent;
+
+$nav-tabs-active-link-hover-bg: $plum;
+$nav-tabs-active-link-hover-color: #fff;
+$nav-tabs-active-link-hover-border-color: $gray-dark;
+
+$nav-tabs-justified-link-border-color: #ddd;
+$nav-tabs-justified-active-link-border-color: $body-bg;
+
+//== Pills
+$nav-pills-border-radius: $border-radius-base;
+$nav-pills-active-link-hover-bg: $component-active-bg;
+$nav-pills-active-link-hover-color: $component-active-color;
+
+//== Pagination
+//
+//##
+
+$pagination-color: #fff;
+$pagination-bg: $gray-darker;
+$pagination-border: $gray-dark;
+
+$pagination-hover-color: #fff;
+$pagination-hover-bg: $component-active-bg;
+$pagination-hover-border: transparent;
+
+$pagination-active-color: #fff;
+$pagination-active-bg: $brand-primary;
+$pagination-active-border: transparent;
+
+$pagination-disabled-color: $gray-light;
+$pagination-disabled-bg: $gray-darker;
+$pagination-disabled-border: $gray-dark;
+
+//== Pager
+//
+//##
+
+$pager-bg: $pagination-bg;
+$pager-border: $pagination-border;
+$pager-border-radius: 15px;
+
+$pager-hover-bg: $pagination-hover-bg;
+
+$pager-active-bg: $pagination-active-bg;
+$pager-active-color: $pagination-active-color;
+
+$pager-disabled-color: $gray-light;
+
+//== Jumbotron
+//
+//##
+
+$jumbotron-padding: 30px;
+$jumbotron-color: inherit;
+$jumbotron-bg: darken($gray-darker, 5%);
+$jumbotron-heading-color: inherit;
+$jumbotron-font-size: ceil(($font-size-base * 1.5));
+
+//== Form states and alerts
+//
+//## Define colors for form feedback states and, by default, alerts.
+
+$state-success-text: #fff;
+$state-success-bg: $brand-success;
+$state-success-border: darken($state-success-bg, 5%);
+
+$state-info-text: #fff;
+$state-info-bg: $brand-info;
+$state-info-border: darken($state-info-bg, 7%);
+
+$state-warning-text: #000;
+$state-warning-bg: $brand-warning;
+$state-warning-border: darken($state-warning-bg, 3%);
+
+$state-danger-text: #fff;
+$state-danger-bg: $brand-danger;
+$state-danger-border: darken($state-danger-bg, 3%);
+
+//== Tooltips
+//
+//##
+
+//** Tooltip max width
+$tooltip-max-width: 200px;
+//** Tooltip text color
+$tooltip-color: #fff;
+//** Tooltip background color
+$tooltip-bg: rgba(0, 0, 0, 0.9);
+$tooltip-opacity: 0.9;
+
+//** Tooltip arrow width
+$tooltip-arrow-width: 5px;
+//** Tooltip arrow color
+$tooltip-arrow-color: $tooltip-bg;
+
+//== Popovers
+//
+//##
+
+//** Popover body background color
+$popover-bg: lighten($body-bg, 10%);
+//** Popover maximum width
+$popover-max-width: 276px;
+//** Popover border color
+$popover-border-color: rgba(0, 0, 0, 0.2);
+//** Popover fallback border color
+$popover-fallback-border-color: #999;
+
+//** Popover title background color
+$popover-title-bg: darken($popover-bg, 3%);
+
+//** Popover arrow width
+$popover-arrow-width: 10px;
+//** Popover arrow color
+$popover-arrow-color: $popover-bg;
+
+//** Popover outer arrow width
+$popover-arrow-outer-width: ($popover-arrow-width + 1);
+//** Popover outer arrow color
+$popover-arrow-outer-color: fadein($popover-border-color, 5%);
+//** Popover outer arrow fallback color
+$popover-arrow-outer-fallback-color: darken(
+  $popover-fallback-border-color,
+  20%
+);
+
+//== Labels
+//
+//##
+
+//** Default label background color
+$label-default-bg: $plum;
+//** Primary label background color
+$label-primary-bg: $brand-primary;
+//** Success label background color
+$label-success-bg: $brand-success;
+//** Info label background color
+$label-info-bg: $brand-info;
+//** Warning label background color
+$label-warning-bg: $blue;
+//** Danger label background color
+$label-danger-bg: $brand-danger;
+
+//** Default label text color
+$label-color: #fff;
+//** Default text color of a linked label
+$label-link-hover-color: #fff;
+
+//== Modals
+//
+//##
+
+//** Padding applied to the modal body
+$modal-inner-padding: 1.25rem;
+
+//** Padding applied to the modal title
+$modal-title-padding: 15px;
+//** Modal title line-height
+$modal-title-line-height: $line-height-base;
+
+//** Background color of modal content area
+$modal-content-bg: lighten($body-bg, 10%);
+//** Modal content border color
+$modal-content-border-color: rgba(0, 0, 0, 0.2);
+//** Modal content border color **for IE8**
+$modal-content-fallback-border-color: #999;
+
+//** Modal backdrop background color
+$modal-backdrop-bg: #000;
+//** Modal backdrop opacity
+$modal-backdrop-opacity: 0.5;
+//** Modal header border color
+$modal-header-border-color: $gray-dark;
+//** Modal footer border color
+$modal-footer-border-color: $modal-header-border-color;
+
+$modal-lg: 900px;
+$modal-md: 600px;
+$modal-sm: 300px;
+
+//== Alerts
+//
+//## Define alert colors, border radius, and padding.
+
+$alert-padding: 15px;
+$alert-border-radius: $border-radius-base;
+$alert-link-font-weight: bold;
+
+$alert-success-bg: $state-success-bg;
+$alert-success-text: $dark-green;
+$alert-success-border: $state-success-border;
+
+$alert-info-bg: $state-info-bg;
+$alert-info-text: $dark-green;
+$alert-info-border: $state-info-border;
+
+$alert-warning-bg: $state-warning-bg;
+$alert-warning-text: $state-warning-text;
+$alert-warning-border: $state-warning-border;
+
+$alert-danger-bg: $state-danger-bg;
+$alert-danger-text: white;
+$alert-danger-border: $state-danger-border;
+
+//== Progress bars
+//
+//##
+
+//** Background color of the whole progress component
+$progress-bg: $gray-darker;
+//** Progress bar text color
+$progress-bar-color: #fff;
+
+//** Default progress bar color
+$progress-bar-bg: $brand-primary;
+//** Success progress bar color
+$progress-bar-success-bg: $brand-success;
+//** Warning progress bar color
+$progress-bar-warning-bg: $brand-warning;
+//** Danger progress bar color
+$progress-bar-danger-bg: $brand-danger;
+//** Info progress bar color
+$progress-bar-info-bg: $brand-info;
+
+//== List group
+//
+//##
+
+//** Background color on `.list-group-item`
+$list-group-bg: $plum;
+//** `.list-group-item` border color
+$list-group-border: $gray-dark;
+//** List group border radius
+$list-group-border-radius: $border-radius-base;
+
+//** Background color of single list items on hover
+$list-group-hover-bg: lighten($list-group-bg, 15%);
+//** Text color of active list items
+$list-group-active-color: $component-active-color;
+//** Background color of active list items
+$list-group-active-bg: $component-active-bg;
+//** Border color of active list elements
+$list-group-active-border: $list-group-active-bg;
+//** Text color for content within active list items
+$list-group-active-text-color: lighten($list-group-active-bg, 40%);
+
+//** Text color of disabled list items
+$list-group-disabled-color: $gray-light;
+//** Background color of disabled list items
+$list-group-disabled-bg: $gray-lighter;
+//** Text color for content within disabled list items
+$list-group-disabled-text-color: $list-group-disabled-color;
+
+$list-group-link-color: $text-color;
+$list-group-link-hover-color: $list-group-link-color;
+$list-group-link-heading-color: #fff;
+
+//== Panels
+//
+//##
+
+$panel-bg: $plum;
+$panel-body-padding: 15px;
+$panel-heading-padding: 10px 15px;
+$panel-footer-padding: $panel-heading-padding;
+$panel-border-radius: $border-radius-base;
+
+//** Border color for elements within panels
+$panel-inner-border: lighten($plum, 3%);
+
+$panel-default-text: $text-color;
+$panel-default-border: $panel-inner-border;
+$panel-default-heading-bg: lighten($plum, 3%);
+
+$panel-footer-bg: $panel-default-heading-bg;
+
+$panel-primary-text: #fff;
+$panel-primary-border: $brand-primary;
+$panel-primary-heading-bg: $brand-primary;
+
+$panel-success-text: $state-success-text;
+$panel-success-border: $state-success-border;
+$panel-success-heading-bg: $state-success-bg;
+
+$panel-info-text: $state-info-text;
+$panel-info-border: $panel-inner-border;
+$panel-info-heading-bg: lighten($plum, 3%);
+
+$panel-warning-text: white;
+$panel-warning-border: $blue;
+$panel-warning-heading-bg: $blue;
+
+$panel-danger-text: $state-danger-text;
+$panel-danger-border: $state-danger-border;
+$panel-danger-heading-bg: $state-danger-bg;
+
+//== Thumbnails
+//
+//##
+
+//** Padding around the thumbnail image
+$thumbnail-padding: 4px;
+//** Thumbnail background color
+$thumbnail-bg: $gray-dark;
+//** Thumbnail border color
+$thumbnail-border: $gray-dark;
+//** Thumbnail border radius
+$thumbnail-border-radius: $border-radius-base;
+
+//** Custom text color for thumbnail captions
+$thumbnail-caption-color: $text-color;
+//** Padding around the thumbnail caption
+$thumbnail-caption-padding: 9px;
+
+//== Wells
+//
+//##
+
+$well-bg: darken($gray-darker, 5%);
+$well-border: darken($well-bg, 7%);
+
+//== Badges
+//
+//##
+
+$badge-color: $dark-green;
+//** Linked badge text color on hover
+$badge-link-hover-color: $dark-green;
+$badge-bg: $brand-primary;
+
+//** Badge text color in active nav link
+$badge-active-color: $brand-primary;
+//** Badge background color in active nav link
+$badge-active-bg: #fff;
+
+$badge-font-weight: bold;
+$badge-line-height: 1;
+$badge-border-radius: 10px;
+
+//== Breadcrumbs
+//
+//##
+
+$breadcrumb-padding-vertical: 8px;
+$breadcrumb-padding-horizontal: 15px;
+//** Breadcrumb background color
+$breadcrumb-bg: $gray-darker;
+//** Breadcrumb text color
+$breadcrumb-color: #fff;
+//** Text color of current page in the breadcrumb
+$breadcrumb-active-color: $text-color;
+//** Textual separator for between breadcrumb elements
+$breadcrumb-separator: "/";
+
+//== Carousel
+//
+//##
+
+$carousel-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
+
+$carousel-control-color: #fff;
+$carousel-control-width: 15%;
+$carousel-control-opacity: 0.5;
+$carousel-control-font-size: 20px;
+
+$carousel-indicator-active-bg: #fff;
+$carousel-indicator-border-color: #fff;
+
+$carousel-caption-color: #fff;
+
+//== Close
+//
+//##
+
+$close-font-weight: bold;
+$close-color: #000;
+$close-text-shadow: 0 1px 0 #fff;
+
+//== Code
+//
+//##
+
+$code-color: #c7254e;
+$code-bg: #f9f2f4;
+
+$kbd-color: #fff;
+$kbd-bg: #333;
+
+$pre-bg: #f5f5f5;
+$pre-color: $gray-dark;
+$pre-border-color: #ccc;
+$pre-scrollable-max-height: 340px;
+
+//== Type
+//
+//##
+
+//** Horizontal offset for forms and lists.
+$component-offset-horizontal: 180px;
+//** Abbreviations and acronyms border color
+$abbr-border-color: $gray-light;
+//** Headings small color
+$headings-small-color: $gray-light;
+//** Blockquote small color
+$blockquote-small-color: $gray;
+//** Blockquote font size
+$blockquote-font-size: ($font-size-base * 1.25);
+//** Blockquote border color
+$blockquote-border-color: $gray-dark;
+//** Page header border color
+$page-header-border-color: $gray-dark;
+//** Width of horizontal description list titles
+$dl-horizontal-offset: $component-offset-horizontal;
+//** Horizontal line color.
+$hr-border: $gray-dark;
+
+.messages .text-danger {
+  color: $brand-danger;
+}
+
+.messages .text-info {
+  color: #fff;
+}
+
+.messages .caret {
+  color: #fff;
+}
+
+// Cyborg 3.2.0
+// Bootswatch
+// -----------------------------------------------------
+
+// Navbar =====================================================================
+
+// Buttons ====================================================================
+
+// Typography =================================================================
+
+.text-primary,
+.text-primary:hover,
+a.text-primary,
+a.text-primary:hover {
+  color: $brand-primary;
+}
+
+.text-success,
+.text-success:hover,
+a.text-success,
+a.text-success:hover {
+  color: $brand-success;
+}
+
+.text-danger,
+.text-danger:hover,
+a.text-danger,
+a.text-danger:hover {
+  color: $brand-danger;
+}
+
+.text-warning,
+.text-warning:hover,
+a.text-warning,
+a.text-warning:hover {
+  color: $brand-warning;
+}
+
+.text-info,
+.text-info:hover,
+a.text-info,
+a.text-info:hover {
+  color: $brand-info;
+}
+
+// Tables =====================================================================
+
+table,
+.table {
+  color: #fff;
+
+  a:not(.btn) {
+    color: #fff;
+    text-decoration: underline;
+  }
+
+  .text-muted {
+    color: $text-muted;
+  }
+}
+
+.table-responsive > .table {
+  background-color: $table-bg;
+}
+
+// Forms ======================================================================
+
+.has-warning {
+  .help-block,
+  .control-label,
+  .form-control-feedback {
+    color: $brand-warning;
+  }
+
+  .form-control,
+  .form-control:focus,
+  .input-group-addon {
+    border-color: $brand-warning;
+  }
+}
+
+.has-error {
+  .help-block,
+  .control-label,
+  .form-control-feedback {
+    color: $brand-danger;
+  }
+
+  .form-control,
+  .form-control:focus,
+  .input-group-addon {
+    border-color: $brand-danger;
+  }
+}
+
+.has-success {
+  .help-block,
+  .control-label,
+  .form-control-feedback {
+    color: $brand-success;
+  }
+
+  .form-control,
+  .form-control:focus,
+  .input-group-addon {
+    border-color: $brand-success;
+  }
+}
+
+.input-group-addon {
+  background-color: $btn-default-bg;
+}
+
+// Navs =======================================================================
+
+.nav-tabs,
+.nav-pills,
+.breadcrumb,
+.pager {
+  a {
+    color: #fff;
+  }
+}
+
+// Indicators =================================================================
+
+.alert {
+  .alert-link,
+  a {
+    color: white;
+    text-decoration: underline;
+  }
+
+  .close {
+    text-decoration: none;
+  }
+}
+
+.close {
+  color: #fff;
+  text-decoration: none;
+  opacity: 0.4;
+
+  &:hover,
+  &:focus {
+    color: #fff;
+    opacity: 1;
+  }
+}
+
+// Progress bars ==============================================================
+
+// Containers =================================================================
+
+a.thumbnail:hover,
+a.thumbnail:focus,
+a.thumbnail.active {
+  border-color: $thumbnail-border;
+}
+
+.jumbotron {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    color: $brand-info;
+  }
+}
+
+// code tag
+code {
+  background-color: $input-bg;
+  color: $input-color;
+}
+
+@import "base";
diff --git a/resources/assets/themes/theme2.less b/resources/assets/themes/theme2.less
deleted file mode 100644
index 26acc1bb..00000000
--- a/resources/assets/themes/theme2.less
+++ /dev/null
@@ -1,28 +0,0 @@
-// cccamp15
-@import "../../../node_modules/bootstrap/less/variables";
-
-@brand-primary:         #758499;
-@brand-success:         #7b9c41;
-@brand-info:            #9c7357;
-@brand-warning:         #e3a14d;
-@brand-danger:          #7f528b;
-
-@link-color:            #58585a;
-
-@state-success-text:             #638232;
-@state-success-bg:               lighten(@brand-success,50%);
-@state-success-border:           @brand-success;
-
-@state-info-text:                #826045;
-@state-info-bg:                  lighten(@brand-info,50%);
-@state-info-border:              @brand-info;
-
-@state-warning-text:             #bc8640;
-@state-warning-bg:               lighten(@brand-warning,50%);
-@state-warning-border:           @brand-warning;
-
-@state-danger-text:              #694374;
-@state-danger-bg:                lighten(@brand-danger,50%);
-@state-danger-border:            @brand-danger;
-
-@import "base.less";
diff --git a/resources/assets/themes/theme2.scss b/resources/assets/themes/theme2.scss
new file mode 100644
index 00000000..3511807a
--- /dev/null
+++ b/resources/assets/themes/theme2.scss
@@ -0,0 +1,28 @@
+// cccamp15
+@import "~bootstrap/scss/variables";
+
+$brand-primary:         #758499;
+$brand-success:         #7b9c41;
+$brand-info:            #9c7357;
+$brand-warning:         #e3a14d;
+$brand-danger:          #7f528b;
+
+$link-color:            #58585a;
+
+$state-success-text:             #638232;
+$state-success-bg:               lighten($brand-success,50%);
+$state-success-border:           $brand-success;
+
+$state-info-text:                #826045;
+$state-info-bg:                  lighten($brand-info,50%);
+$state-info-border:              $brand-info;
+
+$state-warning-text:             #bc8640;
+$state-warning-bg:               lighten($brand-warning,50%);
+$state-warning-border:           $brand-warning;
+
+$state-danger-text:              #694374;
+$state-danger-bg:                lighten($brand-danger,50%);
+$state-danger-border:            $brand-danger;
+
+@import "base.scss";
diff --git a/resources/assets/themes/theme3.less b/resources/assets/themes/theme3.less
deleted file mode 100644
index 0bb53e09..00000000
--- a/resources/assets/themes/theme3.less
+++ /dev/null
@@ -1,56 +0,0 @@
-// 32c3 (2015)
-@import "../../../node_modules/bootstrap/less/variables";
-
-@brand-primary:         #f19224;
-@brand-success:         #39AB50;
-@brand-info:            #6618F9;
-@brand-warning:         #DAD216;
-@brand-danger:          #DA1639;
-
-@state-success-text:             @brand-success;
-@state-success-bg:               lighten(@brand-success,40%);
-@state-success-border:           @brand-success;
-
-@state-info-text:                @brand-info;
-@state-info-bg:                  lighten(@brand-info,40%);
-@state-info-border:              @brand-info;
-
-@state-warning-text:             @brand-warning;
-@state-warning-bg:               lighten(@brand-warning,40%);
-@state-warning-border:           @brand-warning;
-
-@state-danger-text:              @brand-danger;
-@state-danger-bg:                lighten(@brand-danger,40%);
-@state-danger-border:            @brand-danger;
-
-@navbar-default-color:  #fff;
-@navbar-default-bg:     #000;
-@navbar-default-border: #000;
-
-@navbar-default-link-color:         #fff;
-@navbar-default-link-hover-color:   #ddd;
-@navbar-default-link-hover-bg:      #222;
-
-@navbar-default-link-active-color:  @brand-primary;
-@navbar-default-link-active-bg:     #000;
-@navbar-default-link-disabled-color:#777;
-@navbar-default-link-disabled-bg:   #000;
-
-@navbar-default-brand-color:        #fff;
-@navbar-default-brand-hover-color:  @brand-primary;
-@navbar-default-brand-hover-bg:     #000;
-
-.navbar {
-  .bg-info {
-    background-color: darken(@brand-info, 30%);
-  }
-  .bg-danger {
-    background-color: darken(@brand-danger, 30%);
-  }
-}
-
-#shifts td a {
-  color: #000;
-}
-
-@import "base.less";
diff --git a/resources/assets/themes/theme3.scss b/resources/assets/themes/theme3.scss
new file mode 100644
index 00000000..81cca40c
--- /dev/null
+++ b/resources/assets/themes/theme3.scss
@@ -0,0 +1,56 @@
+// 32c3 (2015)
+@import "~bootstrap/scss/variables";
+
+$brand-primary:         #f19224;
+$brand-success:         #39AB50;
+$brand-info:            #6618F9;
+$brand-warning:         #DAD216;
+$brand-danger:          #DA1639;
+
+$state-success-text:             $brand-success;
+$state-success-bg:               lighten($brand-success,40%);
+$state-success-border:           $brand-success;
+
+$state-info-text:                $brand-info;
+$state-info-bg:                  lighten($brand-info,40%);
+$state-info-border:              $brand-info;
+
+$state-warning-text:             $brand-warning;
+$state-warning-bg:               lighten($brand-warning,40%);
+$state-warning-border:           $brand-warning;
+
+$state-danger-text:              $brand-danger;
+$state-danger-bg:                lighten($brand-danger,40%);
+$state-danger-border:            $brand-danger;
+
+$navbar-default-color:  #fff;
+$navbar-default-bg:     #000;
+$navbar-default-border: #000;
+
+$navbar-default-link-color:         #fff;
+$navbar-default-link-hover-color:   #ddd;
+$navbar-default-link-hover-bg:      #222;
+
+$navbar-default-link-active-color:  $brand-primary;
+$navbar-default-link-active-bg:     #000;
+$navbar-default-link-disabled-color:#777;
+$navbar-default-link-disabled-bg:   #000;
+
+$navbar-default-brand-color:        #fff;
+$navbar-default-brand-hover-color:  $brand-primary;
+$navbar-default-brand-hover-bg:     #000;
+
+.navbar {
+  .bg-info {
+    background-color: darken($brand-info, 30%);
+  }
+  .bg-danger {
+    background-color: darken($brand-danger, 30%);
+  }
+}
+
+#shifts td a {
+  color: #000;
+}
+
+@import "base.scss";
diff --git a/resources/assets/themes/theme4.less b/resources/assets/themes/theme4.less
deleted file mode 100644
index 36b20c4f..00000000
--- a/resources/assets/themes/theme4.less
+++ /dev/null
@@ -1,112 +0,0 @@
-// 33c3 (2016)
-@import "cyborg_variables.less";
-
-// Variables
-// --------------------------------------------------
-
-//== changed Colors
-
-@gray-dark:              #282828;   // #333
-@gray-light:             #888;   // #999
-@gray-lighter:           #ADAFAE; // #eee
-
-@brand-primary:         rgb(0, 156, 139);
-@brand-success:         rgb(141, 193, 35);
-@brand-info:            rgb(70, 71, 73);
-@brand-warning:         rgb(255, 244, 95);
-@brand-danger:          rgb(277, 38, 60);
-
-
-//== changed Scaffolding
-
-@body-bg:               #1d1d1b;
-
-
-//== changed Buttons
-
-@btn-default-color:              #fff;
-@btn-default-bg:                 lighten(@gray-dark, 10%);
-
-@btn-primary-border:             darken(@btn-default-bg, 10%);
-
-@btn-success-border:             darken(@btn-default-bg, 10%);
-
-@btn-info-border:                darken(@btn-default-bg, 10%);
-
-@btn-warning-border:             darken(@btn-default-bg, 10%);
-
-@btn-danger-border:              darken(@btn-default-bg, 10%);
-
-
-//== changed Forms
-
-@input-bg:                       @gray-darker;
-
-@input-bg-disabled:              @gray-lighter;
-
-@input-group-addon-bg:           @gray-lighter;
-
-
-//== Pagination
-
-@pagination-hover-color:               #fff;
-
-@pagination-active-color:              #fff;
-
-
-//== changed Form states and alerts
-
-@state-success-text:             #fff;
-@state-success-bg:               @brand-success;
-@state-success-border:           darken(@state-success-bg, 5%);
-
-@state-info-text:                #fff;
-@state-info-bg:                  @brand-info;
-@state-info-border:              darken(@state-info-bg, 7%);
-
-@state-warning-text:             darken(@brand-warning, 40%);
-@state-warning-bg:               @brand-warning;
-@state-warning-border:           darken(@state-warning-bg, 3%);
-
-@state-danger-text:              #fff;
-@state-danger-bg:                @brand-danger;
-@state-danger-border:            darken(@state-danger-bg, 3%);
-
-
-//== changed Badges
-
-@badge-color:                 #fff;
-
-@badge-link-hover-color:      #fff;
-
-
-//== changed Type
-
-@headings-small-color:        @gray-light;
-
-
-// Bootswatch
-// -----------------------------------------------------
-@import "cyborg_styles.less";
-
-// added Forms ======================================================================
-
-.input-group-addon {
-  background-color: @btn-default-bg;
-}
-
-
-// added Containers =================================================================
-
-.label-warning, .label-success, .progress-bar-warning, .progress-bar-success,
-.panel-warning .panel-heading, .panel-warning .panel-heading a,
-.panel-success .panel-heading, .panel-success .panel-heading a {
-  color: @gray-darker;
-}
-
-
-// different code tag
-code {
-  background-color: @state-info-bg;
-  color: @state-info-text;
-}
diff --git a/resources/assets/themes/theme4.scss b/resources/assets/themes/theme4.scss
new file mode 100644
index 00000000..0090b2ee
--- /dev/null
+++ b/resources/assets/themes/theme4.scss
@@ -0,0 +1,112 @@
+// 33c3 (2016)
+@import "cyborg_variables.scss";
+
+// Variables
+// --------------------------------------------------
+
+//== changed Colors
+
+$gray-dark:              #282828;   // #333
+$gray-light:             #888;   // #999
+$gray-lighter:           #ADAFAE; // #eee
+
+$brand-primary:         rgb(0, 156, 139);
+$brand-success:         rgb(141, 193, 35);
+$brand-info:            rgb(70, 71, 73);
+$brand-warning:         rgb(255, 244, 95);
+$brand-danger:          rgb(277, 38, 60);
+
+
+//== changed Scaffolding
+
+$body-bg:               #1d1d1b;
+
+
+//== changed Buttons
+
+$btn-default-color:              #fff;
+$btn-default-bg:                 lighten($gray-dark, 10%);
+
+$btn-primary-border:             darken($btn-default-bg, 10%);
+
+$btn-success-border:             darken($btn-default-bg, 10%);
+
+$btn-info-border:                darken($btn-default-bg, 10%);
+
+$btn-warning-border:             darken($btn-default-bg, 10%);
+
+$btn-danger-border:              darken($btn-default-bg, 10%);
+
+
+//== changed Forms
+
+$input-bg:                       $gray-darker;
+
+$input-bg-disabled:              $gray-lighter;
+
+$input-group-addon-bg:           $gray-lighter;
+
+
+//== Pagination
+
+$pagination-hover-color:               #fff;
+
+$pagination-active-color:              #fff;
+
+
+//== changed Form states and alerts
+
+$state-success-text:             #fff;
+$state-success-bg:               $brand-success;
+$state-success-border:           darken($state-success-bg, 5%);
+
+$state-info-text:                #fff;
+$state-info-bg:                  $brand-info;
+$state-info-border:              darken($state-info-bg, 7%);
+
+$state-warning-text:             darken($brand-warning, 40%);
+$state-warning-bg:               $brand-warning;
+$state-warning-border:           darken($state-warning-bg, 3%);
+
+$state-danger-text:              #fff;
+$state-danger-bg:                $brand-danger;
+$state-danger-border:            darken($state-danger-bg, 3%);
+
+
+//== changed Badges
+
+$badge-color:                 #fff;
+
+$badge-link-hover-color:      #fff;
+
+
+//== changed Type
+
+$headings-small-color:        $gray-light;
+
+
+// Bootswatch
+// -----------------------------------------------------
+@import "cyborg_styles.scss";
+
+// added Forms ======================================================================
+
+.input-group-addon {
+  background-color: $btn-default-bg;
+}
+
+
+// added Containers =================================================================
+
+.label-warning, .label-success, .progress-bar-warning, .progress-bar-success,
+.panel-warning .panel-heading, .panel-warning .panel-heading a,
+.panel-success .panel-heading, .panel-success .panel-heading a {
+  color: $gray-darker;
+}
+
+
+// different code tag
+code {
+  background-color: $state-info-bg;
+  color: $state-info-text;
+}
diff --git a/resources/assets/themes/theme5.less b/resources/assets/themes/theme5.less
deleted file mode 100644
index a5a4d739..00000000
--- a/resources/assets/themes/theme5.less
+++ /dev/null
@@ -1,32 +0,0 @@
-// 34c3 light (2017)
-@import "../../../node_modules/bootstrap/less/variables";
-
-@brand-primary:         rgb(164, 28, 49);
-@brand-success:         rgb(153, 204, 0);
-@brand-info:            rgb(0, 204, 255);
-@brand-warning:         rgb(255, 255, 51);
-@brand-danger:          rgb(255, 102, 0);
-
-@link-color:            @brand-primary;
-
-@state-success-text:             darken(@brand-success,40%);
-@state-success-bg:               lighten(@brand-success,40%);
-@state-success-border:           @brand-success;
-
-@state-info-text:                darken(@brand-info,40%);
-@state-info-bg:                  lighten(@brand-info,40%);
-@state-info-border:              @brand-info;
-
-@state-warning-text:             darken(@brand-warning,40%);
-@state-warning-bg:               @brand-warning;
-@state-warning-border:           darken(@brand-warning,40%);
-
-@state-danger-text:              darken(@brand-danger,40%);
-@state-danger-bg:                lighten(@brand-danger,40%);
-@state-danger-border:            @brand-danger;
-
-.label.label-warning {
-  color: #000;
-}
-
-@import "base.less";
diff --git a/resources/assets/themes/theme5.scss b/resources/assets/themes/theme5.scss
new file mode 100644
index 00000000..10e856b7
--- /dev/null
+++ b/resources/assets/themes/theme5.scss
@@ -0,0 +1,32 @@
+// 34c3 light (2017)
+@import "~bootstrap/scss/variables";
+
+$brand-primary:         rgb(164, 28, 49);
+$brand-success:         rgb(153, 204, 0);
+$brand-info:            rgb(0, 204, 255);
+$brand-warning:         rgb(255, 255, 51);
+$brand-danger:          rgb(255, 102, 0);
+
+$link-color:            $brand-primary;
+
+$state-success-text:             darken($brand-success,40%);
+$state-success-bg:               lighten($brand-success,40%);
+$state-success-border:           $brand-success;
+
+$state-info-text:                darken($brand-info,40%);
+$state-info-bg:                  lighten($brand-info,40%);
+$state-info-border:              $brand-info;
+
+$state-warning-text:             darken($brand-warning,40%);
+$state-warning-bg:               $brand-warning;
+$state-warning-border:           darken($brand-warning,40%);
+
+$state-danger-text:              darken($brand-danger,40%);
+$state-danger-bg:                lighten($brand-danger,40%);
+$state-danger-border:            $brand-danger;
+
+.label.label-warning {
+  color: #000;
+}
+
+@import "base.scss";
diff --git a/resources/assets/themes/theme6.less b/resources/assets/themes/theme6.less
deleted file mode 100644
index 28840926..00000000
--- a/resources/assets/themes/theme6.less
+++ /dev/null
@@ -1,152 +0,0 @@
-// 34c3 dark (2017)
-@import "cyborg_variables.less";
-// Variables
-// --------------------------------------------------
-
-//== changed Colors
-
-@gray-dark:              #282828;   // #333
-@gray-light:             #888;   // #999
-@gray-lighter:           #ADAFAE; // #eee
-
-@brand-primary:         rgb(164, 28, 49);
-@brand-success:         rgb(153, 204, 0);
-@brand-info:            rgb(0, 204, 255);
-@brand-warning:         rgb(255, 255, 51);
-@brand-danger:          rgb(255, 102, 0);
-
-.label.label-warning, .progress-bar.progress-bar-warning {
-  color: #000;
-}
-
-
-//== changed Buttons
-
-@btn-default-color:              #fff;
-@btn-default-bg:                 lighten(@gray-dark, 10%);
-
-@btn-primary-border:             darken(@btn-default-bg, 10%);
-
-@btn-success-border:             @btn-primary-border;
-
-@btn-info-border:                @btn-primary-border;
-
-@btn-warning-border:             @btn-primary-border;
-
-@btn-danger-border:              @btn-primary-border;
-
-@btn-link-disabled-color:        @gray-light;
-
-
-//== changed Forms
-
-@input-bg:                       @gray-darker;
-
-@input-bg-disabled:              @gray-lighter;
-
-@input-group-addon-bg:           @gray-lighter;
-
-
-//== changed Pagination
-
-@pagination-hover-color:               #fff;
-
-@pagination-active-color:              #fff;
-
-
-//== changed Form states and alerts
-
-@state-success-text:             #fff;
-@state-success-bg:               @brand-success;
-@state-success-border:           darken(@state-success-bg, 5%);
-
-@state-info-text:                #fff;
-@state-info-bg:                  @brand-info;
-@state-info-border:              darken(@state-info-bg, 7%);
-
-@state-warning-text:             #000;
-@state-warning-bg:               @brand-warning;
-@state-warning-border:           darken(@state-warning-bg, 3%);
-
-@state-danger-text:              #fff;
-@state-danger-bg:                @brand-danger;
-@state-danger-border:            darken(@state-danger-bg, 3%);
-
-
-//== changed List group
-
-@list-group-bg:                 darken(@gray-darker, 10%);
-
-
-//== changed Panels
-
-@panel-bg:                    darken(@gray-darker, 10%);
-
-@panel-default-heading-bg:    darken(@gray-darker, 5%);
-
-
-//== changed Badges
-
-@badge-color:                 #fff;
-
-@badge-link-hover-color:      #fff;
-
-
-//== changed Type
-
-@headings-small-color:        @gray-light;
-
-
-// Bootswatch
-// -----------------------------------------------------
-
-@import "cyborg_styles.less";
-
-// Typography =================================================================
-
-.text-primary,
-.text-primary:hover,
-a.text-primary,
-a.text-primary:hover {
-  color: @brand-primary;
-}
-
-.text-success,
-.text-success:hover,
-a.text-success,
-a.text-success:hover {
-  color: @brand-success;
-}
-
-.text-danger,
-.text-danger:hover,
-a.text-danger,
-a.text-danger:hover {
-  color: @brand-danger;
-}
-
-.text-warning,
-.text-warning:hover,
-a.text-warning,
-a.text-warning:hover {
-  color: @brand-warning;
-}
-
-.text-info,
-.text-info:hover,
-a.text-info,
-a.text-info:hover {
-  color: @brand-info;
-}
-
-// added Forms ======================================================================
-
-.input-group-addon {
-  background-color: @btn-default-bg;
-}
-
-// different code tag
-code {
-  background-color: @input-bg;
-  color: @input-color;
-}
diff --git a/resources/assets/themes/theme6.scss b/resources/assets/themes/theme6.scss
new file mode 100644
index 00000000..3fab76c2
--- /dev/null
+++ b/resources/assets/themes/theme6.scss
@@ -0,0 +1,152 @@
+// 34c3 dark (2017)
+@import "cyborg_variables.scss";
+// Variables
+// --------------------------------------------------
+
+//== changed Colors
+
+$gray-dark:              #282828;   // #333
+$gray-light:             #888;   // #999
+$gray-lighter:           #ADAFAE; // #eee
+
+$brand-primary:         rgb(164, 28, 49);
+$brand-success:         rgb(153, 204, 0);
+$brand-info:            rgb(0, 204, 255);
+$brand-warning:         rgb(255, 255, 51);
+$brand-danger:          rgb(255, 102, 0);
+
+.label.label-warning, .progress-bar.progress-bar-warning {
+  color: #000;
+}
+
+
+//== changed Buttons
+
+$btn-default-color:              #fff;
+$btn-default-bg:                 lighten($gray-dark, 10%);
+
+$btn-primary-border:             darken($btn-default-bg, 10%);
+
+$btn-success-border:             $btn-primary-border;
+
+$btn-info-border:                $btn-primary-border;
+
+$btn-warning-border:             $btn-primary-border;
+
+$btn-danger-border:              $btn-primary-border;
+
+$btn-link-disabled-color:        $gray-light;
+
+
+//== changed Forms
+
+$input-bg:                       $gray-darker;
+
+$input-bg-disabled:              $gray-lighter;
+
+$input-group-addon-bg:           $gray-lighter;
+
+
+//== changed Pagination
+
+$pagination-hover-color:               #fff;
+
+$pagination-active-color:              #fff;
+
+
+//== changed Form states and alerts
+
+$state-success-text:             #fff;
+$state-success-bg:               $brand-success;
+$state-success-border:           darken($state-success-bg, 5%);
+
+$state-info-text:                #fff;
+$state-info-bg:                  $brand-info;
+$state-info-border:              darken($state-info-bg, 7%);
+
+$state-warning-text:             #000;
+$state-warning-bg:               $brand-warning;
+$state-warning-border:           darken($state-warning-bg, 3%);
+
+$state-danger-text:              #fff;
+$state-danger-bg:                $brand-danger;
+$state-danger-border:            darken($state-danger-bg, 3%);
+
+
+//== changed List group
+
+$list-group-bg:                 darken($gray-darker, 10%);
+
+
+//== changed Panels
+
+$panel-bg:                    darken($gray-darker, 10%);
+
+$panel-default-heading-bg:    darken($gray-darker, 5%);
+
+
+//== changed Badges
+
+$badge-color:                 #fff;
+
+$badge-link-hover-color:      #fff;
+
+
+//== changed Type
+
+$headings-small-color:        $gray-light;
+
+
+// Bootswatch
+// -----------------------------------------------------
+
+@import "cyborg_styles.scss";
+
+// Typography =================================================================
+
+.text-primary,
+.text-primary:hover,
+a.text-primary,
+a.text-primary:hover {
+  color: $brand-primary;
+}
+
+.text-success,
+.text-success:hover,
+a.text-success,
+a.text-success:hover {
+  color: $brand-success;
+}
+
+.text-danger,
+.text-danger:hover,
+a.text-danger,
+a.text-danger:hover {
+  color: $brand-danger;
+}
+
+.text-warning,
+.text-warning:hover,
+a.text-warning,
+a.text-warning:hover {
+  color: $brand-warning;
+}
+
+.text-info,
+.text-info:hover,
+a.text-info,
+a.text-info:hover {
+  color: $brand-info;
+}
+
+// added Forms ======================================================================
+
+.input-group-addon {
+  background-color: $btn-default-bg;
+}
+
+// different code tag
+code {
+  background-color: $input-bg;
+  color: $input-color;
+}
diff --git a/resources/assets/themes/theme7.less b/resources/assets/themes/theme7.less
deleted file mode 100644
index a5d1529f..00000000
--- a/resources/assets/themes/theme7.less
+++ /dev/null
@@ -1,280 +0,0 @@
-// 35c3 dark (2018)
-@import "cyborg_variables.less";
-
-// Variables
-// --------------------------------------------------
-
-//== changed Colors
-
-// gray BEBOOT: #4d4d4c
-// blue FRESH: #0084b0
-// green HOPE: #00a356
-// dark blue BASE: #18386b
-// orange GLINT: #f9b000
-// rot BEAT: #e40429
-// violet TENACY: #44357e
-
-@gray-darker:            #000;
-@gray-dark:              #000;
-@gray:                   #4d4d4c; // BEBOOT
-@gray-light:             @gray;
-@gray-lighter:           lighten(@gray, 15%);
-
-@brand-primary:         #0084b0; // FRESH
-@brand-success:         #00a356; // HOPE
-@brand-info:            @brand-primary;
-@brand-warning:         #f9b000; // GLINT
-@brand-danger:          #e40429; // BEAT
-
-
-//== changed Scaffolding
-
-@body-bg:               #000;
-
-@text-color:            @gray-lighter;
-
-@link-hover-color:      lighten(@link-color, 10%);
-
-
-//== changed Typography
-
-@headings-color:          @brand-primary;
-
-
-//== changed Tables
-
-@table-bg:                      @gray-darker;
-
-@table-bg-accent:               #111;
-
-@table-border-color:            @gray;
-
-
-//== changed Buttons
-
-@btn-default-color:              @link-color;
-@btn-default-bg:                 @gray-darker;
-
-@btn-default-border:             @brand-primary;
-
-@btn-primary-color:              @gray-darker;
-@btn-primary-border:             @brand-primary;
-
-@btn-success-border:             darken(@btn-default-bg, 10%);
-
-@btn-info-color:                 @gray-darker;
-@btn-info-border:                darken(@btn-default-bg, 10%);
-
-@btn-warning-color:              @gray-darker;
-@btn-warning-border:             darken(@btn-default-bg, 10%);
-
-@btn-danger-color:               @gray-darker;
-@btn-danger-border:              darken(@btn-default-bg, 10%);
-
-
-//== changed Forms
-
-@input-bg:                       @gray-darker;
-
-@input-color:                    @link-color;
-
-@input-border:                   @brand-primary;
-
-@input-group-addon-bg:           @gray-lighter;
-
-
-//== changed Dropdowns
-
-@dropdown-border:                @brand-primary;
-
-@dropdown-fallback-border:       @brand-primary;
-
-@dropdown-divider-bg:            @dropdown-border;
-
-@dropdown-link-color:            @link-color;
-
-@dropdown-link-hover-color:      @link-hover-color;
-
-@dropdown-link-hover-bg:         @dropdown-bg;
-
-
-//== changed Navbar
-
-@navbar-default-border:            @brand-primary;
-
-@navbar-default-link-hover-color:          @link-hover-color;
-
-@navbar-default-link-active-color:         @brand-primary;
-
-@navbar-default-brand-color:               @brand-primary;
-@navbar-default-brand-hover-color:         lighten(@brand-primary, 10%);
-
-
-//== changed Pagination
-
-@pagination-color:                     @brand-primary;
-@pagination-border:                    @brand-primary;
-
-@pagination-hover-color:               @gray-darker;
-@pagination-hover-border:              @pagination-border;
-
-@pagination-active-color:              @pagination-hover-color;
-@pagination-active-bg:                 @pagination-hover-bg;
-@pagination-active-border:             @pagination-hover-border;
-
-
-//== changed Form states and alerts
-
-@state-success-text:             @gray-darker;
-@state-success-bg:               @brand-success;
-@state-success-border:           darken(@state-success-bg, 5%);
-
-@state-info-text:                @gray-darker;
-@state-info-bg:                  @brand-info;
-@state-info-border:              darken(@state-info-bg, 7%);
-
-@state-warning-text:             @gray-darker;
-@state-warning-bg:               @brand-warning;
-@state-warning-border:           darken(@state-warning-bg, 3%);
-
-@state-danger-text:              @gray-darker;
-@state-danger-bg:                @brand-danger;
-@state-danger-border:            darken(@state-danger-bg, 3%);
-
-
-//== changed Labels
-
-@label-color:                 @gray-darker;
-
-@label-link-hover-color:      @brand-primary;
-
-//== changed Panels
-
-@panel-default-border:        @brand-primary;
-@panel-default-heading-bg:    @gray-darker;
-
-@panel-primary-text:          @gray-darker;
-
-
-//== changed Badges
-
-@badge-color:                 #fff;
-
-@badge-link-hover-color:      #fff;
-
-
-//== changed Type
-
-@headings-small-color:        @gray-light;
-
-@import "cyborg_styles.less";
-
-.messages .text-danger {
-  color: @gray-darker;
-}
-
-.messages .text-info {
-  color: @gray-darker;
-}
-
-.messages .caret {
-  color: @gray-darker;
-}
-
-
-// Bootswatch
-// -----------------------------------------------------
-// changed Typography =================================================================
-
-.text-primary,
-.text-primary:hover,
-a.text-primary:hover {
-  color: @brand-primary;
-}
-
-.text-success,
-.text-success:hover,
-a.text-success:hover {
-  color: @brand-success;
-}
-
-.text-danger,
-.text-danger:hover,
-a.text-danger:hover {
-  color: @brand-danger;
-}
-
-.text-warning,
-.text-warning:hover,
-a.text-warning:hover {
-  color: @brand-warning;
-}
-
-.text-info,
-.text-info:hover,
-a.text-info:hover {
-  color: @brand-info;
-}
-
-// changed Tables =====================================================================
-
-table,
-.table {
-  color: @text-color;
-
-  a:not(.btn) {
-    color: @brand-primary;
-    text-decoration: underline;
-  }
-
-  .text-muted {
-    color: @text-muted;
-  }
-}
-
-// changed Forms ======================================================================
-
-.input-group-addon {
-  background-color: @btn-default-bg;
-}
-
-// changed Indicators =================================================================
-
-.alert {
-
-  .h1, .h2, .h3, .h4, .h5, .h6,
-  h1, h2, h3, h4, h5, h6 {
-    color: #fff;
-  }
-
-  .alert-link,
-  a {
-    color: @alert-warning-text;
-    text-decoration: underline;
-  }
-
-  .close {
-    text-decoration: none;
-  }
-}
-
-// changed Containers =================================================================
-
-.btn-primary, .panel-info .panel-heading {
-  background-image: linear-gradient(to right, rgb(0, 132, 176) , rgb(0, 163, 86));
-}
-
-.label-warning {
-  color: #000;
-}
-
-// changed code tag
-code {
-  background-color: @state-info-bg;
-  color: @state-info-text;
-}
-h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
-  code {
-    color: @headings-color;
-  }
-}
diff --git a/resources/assets/themes/theme7.scss b/resources/assets/themes/theme7.scss
new file mode 100644
index 00000000..8dcac2aa
--- /dev/null
+++ b/resources/assets/themes/theme7.scss
@@ -0,0 +1,280 @@
+// 35c3 dark (2018)
+@import "cyborg_variables.scss";
+
+// Variables
+// --------------------------------------------------
+
+//== changed Colors
+
+// gray BEBOOT: #4d4d4c
+// blue FRESH: #0084b0
+// green HOPE: #00a356
+// dark blue BASE: #18386b
+// orange GLINT: #f9b000
+// rot BEAT: #e40429
+// violet TENACY: #44357e
+
+$gray-darker:            #000;
+$gray-dark:              #000;
+$gray:                   #4d4d4c; // BEBOOT
+$gray-light:             $gray;
+$gray-lighter:           lighten($gray, 15%);
+
+$brand-primary:         #0084b0; // FRESH
+$brand-success:         #00a356; // HOPE
+$brand-info:            $brand-primary;
+$brand-warning:         #f9b000; // GLINT
+$brand-danger:          #e40429; // BEAT
+
+
+//== changed Scaffolding
+
+$body-bg:               #000;
+
+$text-color:            $gray-lighter;
+
+$link-hover-color:      lighten($link-color, 10%);
+
+
+//== changed Typography
+
+$headings-color:          $brand-primary;
+
+
+//== changed Tables
+
+$table-bg:                      $gray-darker;
+
+$table-bg-accent:               #111;
+
+$table-border-color:            $gray;
+
+
+//== changed Buttons
+
+$btn-default-color:              $link-color;
+$btn-default-bg:                 $gray-darker;
+
+$btn-default-border:             $brand-primary;
+
+$btn-primary-color:              $gray-darker;
+$btn-primary-border:             $brand-primary;
+
+$btn-success-border:             darken($btn-default-bg, 10%);
+
+$btn-info-color:                 $gray-darker;
+$btn-info-border:                darken($btn-default-bg, 10%);
+
+$btn-warning-color:              $gray-darker;
+$btn-warning-border:             darken($btn-default-bg, 10%);
+
+$btn-danger-color:               $gray-darker;
+$btn-danger-border:              darken($btn-default-bg, 10%);
+
+
+//== changed Forms
+
+$input-bg:                       $gray-darker;
+
+$input-color:                    $link-color;
+
+$input-border:                   $brand-primary;
+
+$input-group-addon-bg:           $gray-lighter;
+
+
+//== changed Dropdowns
+
+$dropdown-border:                $brand-primary;
+
+$dropdown-fallback-border:       $brand-primary;
+
+$dropdown-divider-bg:            $dropdown-border;
+
+$dropdown-link-color:            $link-color;
+
+$dropdown-link-hover-color:      $link-hover-color;
+
+$dropdown-link-hover-bg:         $dropdown-bg;
+
+
+//== changed Navbar
+
+$navbar-default-border:            $brand-primary;
+
+$navbar-default-link-hover-color:          $link-hover-color;
+
+$navbar-default-link-active-color:         $brand-primary;
+
+$navbar-default-brand-color:               $brand-primary;
+$navbar-default-brand-hover-color:         lighten($brand-primary, 10%);
+
+
+//== changed Pagination
+
+$pagination-color:                     $brand-primary;
+$pagination-border:                    $brand-primary;
+
+$pagination-hover-color:               $gray-darker;
+$pagination-hover-border:              $pagination-border;
+
+$pagination-active-color:              $pagination-hover-color;
+$pagination-active-bg:                 $pagination-hover-bg;
+$pagination-active-border:             $pagination-hover-border;
+
+
+//== changed Form states and alerts
+
+$state-success-text:             $gray-darker;
+$state-success-bg:               $brand-success;
+$state-success-border:           darken($state-success-bg, 5%);
+
+$state-info-text:                $gray-darker;
+$state-info-bg:                  $brand-info;
+$state-info-border:              darken($state-info-bg, 7%);
+
+$state-warning-text:             $gray-darker;
+$state-warning-bg:               $brand-warning;
+$state-warning-border:           darken($state-warning-bg, 3%);
+
+$state-danger-text:              $gray-darker;
+$state-danger-bg:                $brand-danger;
+$state-danger-border:            darken($state-danger-bg, 3%);
+
+
+//== changed Labels
+
+$label-color:                 $gray-darker;
+
+$label-link-hover-color:      $brand-primary;
+
+//== changed Panels
+
+$panel-default-border:        $brand-primary;
+$panel-default-heading-bg:    $gray-darker;
+
+$panel-primary-text:          $gray-darker;
+
+
+//== changed Badges
+
+$badge-color:                 #fff;
+
+$badge-link-hover-color:      #fff;
+
+
+//== changed Type
+
+$headings-small-color:        $gray-light;
+
+@import "cyborg_styles.scss";
+
+.messages .text-danger {
+  color: $gray-darker;
+}
+
+.messages .text-info {
+  color: $gray-darker;
+}
+
+.messages .caret {
+  color: $gray-darker;
+}
+
+
+// Bootswatch
+// -----------------------------------------------------
+// changed Typography =================================================================
+
+.text-primary,
+.text-primary:hover,
+a.text-primary:hover {
+  color: $brand-primary;
+}
+
+.text-success,
+.text-success:hover,
+a.text-success:hover {
+  color: $brand-success;
+}
+
+.text-danger,
+.text-danger:hover,
+a.text-danger:hover {
+  color: $brand-danger;
+}
+
+.text-warning,
+.text-warning:hover,
+a.text-warning:hover {
+  color: $brand-warning;
+}
+
+.text-info,
+.text-info:hover,
+a.text-info:hover {
+  color: $brand-info;
+}
+
+// changed Tables =====================================================================
+
+table,
+.table {
+  color: $text-color;
+
+  a:not(.btn) {
+    color: $brand-primary;
+    text-decoration: underline;
+  }
+
+  .text-muted {
+    color: $text-muted;
+  }
+}
+
+// changed Forms ======================================================================
+
+.input-group-addon {
+  background-color: $btn-default-bg;
+}
+
+// changed Indicators =================================================================
+
+.alert {
+
+  .h1, .h2, .h3, .h4, .h5, .h6,
+  h1, h2, h3, h4, h5, h6 {
+    color: #fff;
+  }
+
+  .alert-link,
+  a {
+    color: $alert-warning-text;
+    text-decoration: underline;
+  }
+
+  .close {
+    text-decoration: none;
+  }
+}
+
+// changed Containers =================================================================
+
+.btn-primary, .panel-info .panel-heading {
+  background-image: linear-gradient(to right, rgb(0, 132, 176) , rgb(0, 163, 86));
+}
+
+.label-warning {
+  color: #000;
+}
+
+// changed code tag
+code {
+  background-color: $state-info-bg;
+  color: $state-info-text;
+}
+h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
+  code {
+    color: $headings-color;
+  }
+}
diff --git a/resources/assets/themes/theme8.less b/resources/assets/themes/theme8.less
deleted file mode 100644
index b07e1f36..00000000
--- a/resources/assets/themes/theme8.less
+++ /dev/null
@@ -1,57 +0,0 @@
-// cccamp19 blue (2019)
-@import "cyborg_variables.less";
-
-// Variables
-// --------------------------------------------------
-
-//== changed Colors
-
-@gray-dark:              #282828;   // #333
-@gray-light:             #888;   // #999
-@gray-lighter:           #ADAFAE; // #eee
-
-@brand-primary:         #0076ba;
-
-@import "cyborg_styles.less";
-
-// Specials for cccamp19 design
-
-.navbar-brand {
-  .icon-icon_angel {
-    background-color: @brand-primary;
-  }
-
-  strong {
-    font-weight: lighter;
-    color: @brand-primary;
-    text-shadow:
-      0 0 10px @brand-primary,
-      0 0 20px @brand-primary,
-      0 0 30px @brand-primary,
-      0 0 40px @brand-primary,
-      0 0 70px @brand-primary,
-      0 0 80px @brand-primary;
-  }
-}
-
-h1 {
-  font-weight: lighter;
-  color: @brand-primary;
-  text-shadow: 0 0 10px @brand-primary;
-
-  .icon-icon_angel {
-    background-color: @brand-primary;
-  }
-}
-
-.panel-title {
-  color: #fff;
-}
-
-.input-group-addon {
-  color: #000;
-
-  .icon-icon_angel {
-    background-color: #000;
-  }
-}
diff --git a/resources/assets/themes/theme8.scss b/resources/assets/themes/theme8.scss
new file mode 100644
index 00000000..247774ab
--- /dev/null
+++ b/resources/assets/themes/theme8.scss
@@ -0,0 +1,57 @@
+// cccamp19 blue (2019)
+@import "cyborg_variables.scss";
+
+// Variables
+// --------------------------------------------------
+
+//== changed Colors
+
+$gray-dark:              #282828;   // #333
+$gray-light:             #888;   // #999
+$gray-lighter:           #ADAFAE; // #eee
+
+$brand-primary:         #0076ba;
+
+@import "cyborg_styles.scss";
+
+// Specials for cccamp19 design
+
+.navbar-brand {
+  .icon-icon_angel {
+    background-color: $brand-primary;
+  }
+
+  strong {
+    font-weight: lighter;
+    color: $brand-primary;
+    text-shadow:
+      0 0 10px $brand-primary,
+      0 0 20px $brand-primary,
+      0 0 30px $brand-primary,
+      0 0 40px $brand-primary,
+      0 0 70px $brand-primary,
+      0 0 80px $brand-primary;
+  }
+}
+
+h1 {
+  font-weight: lighter;
+  color: $brand-primary;
+  text-shadow: 0 0 10px $brand-primary;
+
+  .icon-icon_angel {
+    background-color: $brand-primary;
+  }
+}
+
+.panel-title {
+  color: #fff;
+}
+
+.input-group-addon {
+  color: #000;
+
+  .icon-icon_angel {
+    background-color: #000;
+  }
+}
diff --git a/resources/assets/themes/theme9.less b/resources/assets/themes/theme9.less
deleted file mode 100644
index e3826066..00000000
--- a/resources/assets/themes/theme9.less
+++ /dev/null
@@ -1,57 +0,0 @@
-// cccamp19 yellow (2019)
-@import "cyborg_variables.less";
-
-// Variables
-// --------------------------------------------------
-
-//== changed Colors
-
-@gray-dark:              #282828;   // #333
-@gray-light:             #888;   // #999
-@gray-lighter:           #ADAFAE; // #eee
-
-@brand-primary:         #ffc600;
-
-@import "cyborg_styles.less";
-
-// Specials for cccamp19 design
-
-.navbar-brand {
-  .icon-icon_angel {
-    background-color: @brand-primary;
-  }
-
-  strong {
-    font-weight: lighter;
-    color: @brand-primary;
-    text-shadow:
-      0 0 10px @brand-primary,
-      0 0 20px @brand-primary,
-      0 0 30px @brand-primary,
-      0 0 40px @brand-primary,
-      0 0 70px @brand-primary,
-      0 0 80px @brand-primary;
-  }
-}
-
-h1 {
-  font-weight: lighter;
-  color: @brand-primary;
-  text-shadow: 0 0 10px @brand-primary;
-
-  .icon-icon_angel {
-    background-color: @brand-primary;
-  }
-}
-
-.panel-title {
-  color: #fff;
-}
-
-.input-group-addon {
-  color: #000;
-
-  .icon-icon_angel {
-    background-color: #000;
-  }
-}
diff --git a/resources/assets/themes/theme9.scss b/resources/assets/themes/theme9.scss
new file mode 100644
index 00000000..77b77358
--- /dev/null
+++ b/resources/assets/themes/theme9.scss
@@ -0,0 +1,57 @@
+// cccamp19 yellow (2019)
+@import "cyborg_variables.scss";
+
+// Variables
+// --------------------------------------------------
+
+//== changed Colors
+
+$gray-dark:              #282828;   // #333
+$gray-light:             #888;   // #999
+$gray-lighter:           #ADAFAE; // #eee
+
+$brand-primary:         #ffc600;
+
+@import "cyborg_styles.scss";
+
+// Specials for cccamp19 design
+
+.navbar-brand {
+  .icon-icon_angel {
+    background-color: $brand-primary;
+  }
+
+  strong {
+    font-weight: lighter;
+    color: $brand-primary;
+    text-shadow:
+      0 0 10px $brand-primary,
+      0 0 20px $brand-primary,
+      0 0 30px $brand-primary,
+      0 0 40px $brand-primary,
+      0 0 70px $brand-primary,
+      0 0 80px $brand-primary;
+  }
+}
+
+h1 {
+  font-weight: lighter;
+  color: $brand-primary;
+  text-shadow: 0 0 10px $brand-primary;
+
+  .icon-icon_angel {
+    background-color: $brand-primary;
+  }
+}
+
+.panel-title {
+  color: #fff;
+}
+
+.input-group-addon {
+  color: #000;
+
+  .icon-icon_angel {
+    background-color: #000;
+  }
+}
diff --git a/resources/views/pages/design.twig b/resources/views/pages/design.twig
index f9ec6b5a..132afad0 100644
--- a/resources/views/pages/design.twig
+++ b/resources/views/pages/design.twig
@@ -11,11 +11,11 @@
 {% set linksum='Lorem ipsum! Dolor <a href="#">link</a> amet, consectetur adipisici elit!' %}
 
 {% block content %}
-    <div class="container">
+    <div class="col-12">
+        <div class="container">
         <h1>{{ block('title') }} <small>{{ themes[theme] }}</small></h1>
 
-
-        <h2>Elements <small>small</small></h2>
+        <h2>Elements <small class="text-muted">small</small></h2>
         <div class="row">
             <div class="col-md-2">
                 <h3>Headings <small>small</small></h3>
@@ -288,4 +288,5 @@
             </div>
         </div>
     </div>
+    </div>
 {% endblock %}
diff --git a/webpack.config.js b/webpack.config.js
index 1088fefa..91f226e9 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -24,8 +24,8 @@ const plugins = [
 
 
 const themeEntries = {};
-for (let i = 0; i < 16; i++) {
-  themeEntries[`theme${i}`] = `./resources/assets/themes/theme${i}.less`;
+for (let i = 1; i < 2; i++) {
+  themeEntries[`theme${i}`] = `./resources/assets/themes/theme${i}.scss`;
 }
 
 module.exports = {
@@ -56,7 +56,7 @@ module.exports = {
       { test: /\.(jpg|eot|ttf|otf|svg|woff2?)(\?.*)?$/, loader: 'file-loader' },
       { test: /\.json$/, loader: 'json-loader' },
       {
-        test: /\.(less|css)$/,
+        test: /\.(scss|css)$/,
         use: [
           { loader: MiniCssExtractPlugin.loader },
           { loader: 'css-loader', options: { importLoaders: 1 } },
@@ -68,7 +68,7 @@ module.exports = {
               },
             },
           },
-          { loader: 'less-loader' },
+          { loader: 'sass-loader' },
         ]
       }
     ],
diff --git a/yarn.lock b/yarn.lock
index bb9a71e8..5d47a3ca 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -841,6 +841,11 @@
   resolved "https://registry.yarnpkg.com/@discoveryjs/json-ext/-/json-ext-0.5.2.tgz#8f03a22a04de437254e8ce8cc84ba39689288752"
   integrity sha512-HyYEUDeIj5rRQU2Hk5HTB2uHsbRQpF70nvMhVzi+VJR0X+xNEhjPui4/kBf3VeH/wqD28PT4sVOm8qqLjBrSZg==
 
+"@popperjs/core@^2.9.2":
+  version "2.9.2"
+  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.9.2.tgz#adea7b6953cbb34651766b0548468e743c6a2353"
+  integrity sha512-VZMYa7+fXHdwIq1TDhSXoVmSPEGM/aa+6Aiq3nVVJ9bXr24zScr+NlKFKC3iPljA7ho/GAZr+d2jOf5GIRC30Q==
+
 "@trysound/sax@0.1.1":
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/@trysound/sax/-/sax-0.1.1.tgz#3348564048e7a2d7398c935d466c0414ebb6a669"
@@ -1079,6 +1084,14 @@ ansi-styles@^4.1.0:
   dependencies:
     color-convert "^2.0.1"
 
+anymatch@~3.1.1:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.2.tgz#c0557c096af32f106198f4f4e2a383537e378716"
+  integrity sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==
+  dependencies:
+    normalize-path "^3.0.0"
+    picomatch "^2.0.4"
+
 autoprefixer@^10.2.5:
   version "10.2.5"
   resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.2.5.tgz#096a0337dbc96c0873526d7fef5de4428d05382d"
@@ -1155,12 +1168,22 @@ big.js@^5.2.2:
   resolved "https://registry.yarnpkg.com/big.js/-/big.js-5.2.2.tgz#65f0af382f578bcdc742bd9c281e9cb2d7768328"
   integrity sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==
 
+binary-extensions@^2.0.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.2.0.tgz#75f502eeaf9ffde42fc98829645be4ea76bd9e2d"
+  integrity sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==
+
 boolbase@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
   integrity sha1-aN/1++YMUes3cl6p4+0xDcwed24=
 
-bootstrap@^3, bootstrap@^3.3:
+bootstrap@5.0.0-beta3:
+  version "5.0.0-beta3"
+  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-5.0.0-beta3.tgz#c959f61fbd03667a1b158f763856994859d7a465"
+  integrity sha512-0urccjfIOzhrb9qJysN8XW/DRw6rg3zH7qLeKIp4Zyl8+Ens4JWB0NC0cB5AhnSFPd2tftRggjwCMxablo6Tpg==
+
+bootstrap@^3.3:
   version "3.4.1"
   resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-3.4.1.tgz#c3a347d419e289ad11f4033e3c4132b87c081d72"
   integrity sha512-yN5oZVmRCwe5aKwzRj6736nSmKDX7pLYwsXiCj/EYmo16hODaBiT4En5btW/jhBF/seV+XMx3aYwukYC3A49DA==
@@ -1173,6 +1196,13 @@ brace-expansion@^1.1.7:
     balanced-match "^1.0.0"
     concat-map "0.0.1"
 
+braces@~3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
+  integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==
+  dependencies:
+    fill-range "^7.0.1"
+
 browserslist@^4.0.0, browserslist@^4.12.0, browserslist@^4.14.5, browserslist@^4.16.0, browserslist@^4.16.3, browserslist@^4.6.4:
   version "4.16.4"
   resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.16.4.tgz#7ebf913487f40caf4637b892b268069951c35d58"
@@ -1262,6 +1292,21 @@ chartjs-color@^2.1.0:
     chartjs-color-string "^0.6.0"
     color-convert "^1.9.3"
 
+"chokidar@>=3.0.0 <4.0.0":
+  version "3.5.1"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.1.tgz#ee9ce7bbebd2b79f49f304799d5468e31e14e68a"
+  integrity sha512-9+s+Od+W0VJJzawDma/gvBNQqkTiqYTWLuZoyAsivsI4AaWTCzHG06/TMjsf1cYe9Cb97UCEhjz7HvnPk2p/tw==
+  dependencies:
+    anymatch "~3.1.1"
+    braces "~3.0.2"
+    glob-parent "~5.1.0"
+    is-binary-path "~2.1.0"
+    is-glob "~4.0.1"
+    normalize-path "~3.0.0"
+    readdirp "~3.5.0"
+  optionalDependencies:
+    fsevents "~2.3.1"
+
 chrome-trace-event@^1.0.2:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz#1015eced4741e15d06664a957dbbf50d041e26ac"
@@ -1348,13 +1393,6 @@ convert-source-map@^1.7.0:
   dependencies:
     safe-buffer "~5.1.1"
 
-copy-anything@^2.0.1:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/copy-anything/-/copy-anything-2.0.3.tgz#842407ba02466b0df844819bbe3baebbe5d45d87"
-  integrity sha512-GK6QUtisv4fNS+XcI7shX0Gx9ORg7QqIznyfho79JTnX1XhLiyZHfftvGiziqzRiEi/Bjhgpi+D2o7HxJFPnDQ==
-  dependencies:
-    is-what "^3.12.0"
-
 core-js-compat@^3.9.0, core-js-compat@^3.9.1:
   version "3.10.1"
   resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.10.1.tgz#62183a3a77ceeffcc420d907a3e6fc67d9b27f1c"
@@ -1563,13 +1601,6 @@ csso@^4.2.0:
   dependencies:
     css-tree "^1.1.2"
 
-debug@^3.2.6:
-  version "3.2.7"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.7.tgz#72580b7e9145fb39b6676f9c5e5fb100b934179a"
-  integrity sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==
-  dependencies:
-    ms "^2.1.1"
-
 debug@^4.1.0, debug@^4.1.1:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.1.tgz#f0d229c505e0c6d8c49ac553d1b13dc183f6b2ee"
@@ -1666,13 +1697,6 @@ eonasdan-bootstrap-datetimepicker@^4.17.47:
     moment "^2.10"
     moment-timezone "^0.4.0"
 
-errno@^0.1.1:
-  version "0.1.8"
-  resolved "https://registry.yarnpkg.com/errno/-/errno-0.1.8.tgz#8bb3e9c7d463be4976ff888f76b4809ebc2e811f"
-  integrity sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==
-  dependencies:
-    prr "~1.0.1"
-
 error-ex@^1.3.1:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.2.tgz#b4ac40648107fdcdcfae242f428bea8a14d4f1bf"
@@ -1799,6 +1823,13 @@ file-loader@^6.1.0:
     loader-utils "^2.0.0"
     schema-utils "^3.0.0"
 
+fill-range@^7.0.1:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.0.1.tgz#1919a6a7c75fe38b2c7c77e5198535da9acdda40"
+  integrity sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==
+  dependencies:
+    to-regex-range "^5.0.1"
+
 find-cache-dir@^3.3.1:
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-3.3.1.tgz#89b33fad4a4670daa94f855f7fbe31d6d84fe880"
@@ -1831,6 +1862,11 @@ fs.realpath@^1.0.0:
   resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
   integrity sha1-FQStJSMVjKpA20onh8sBQRmU6k8=
 
+fsevents@~2.3.1:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
+  integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
+
 function-bind@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
@@ -1855,6 +1891,13 @@ get-stream@^6.0.0:
   resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-6.0.1.tgz#a262d8eef67aced57c2852ad6167526a43cbf7b7"
   integrity sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==
 
+glob-parent@~5.1.0:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4"
+  integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
+  dependencies:
+    is-glob "^4.0.1"
+
 glob-to-regexp@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz#c75297087c851b9a578bd217dd59a92f59fe546e"
@@ -1934,23 +1977,11 @@ human-signals@^2.1.0:
   resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-2.1.0.tgz#dc91fcba42e4d06e4abaed33b3e7a3c02f514ea0"
   integrity sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==
 
-iconv-lite@^0.4.4:
-  version "0.4.24"
-  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
-  integrity sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==
-  dependencies:
-    safer-buffer ">= 2.1.2 < 3"
-
 icss-utils@^5.0.0, icss-utils@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/icss-utils/-/icss-utils-5.1.0.tgz#c6be6858abd013d768e98366ae47e25d5887b1ae"
   integrity sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==
 
-image-size@~0.5.0:
-  version "0.5.5"
-  resolved "https://registry.yarnpkg.com/image-size/-/image-size-0.5.5.tgz#09dfd4ab9d20e29eb1c3e80b8990378df9e3cb9c"
-  integrity sha1-Cd/Uq50g4p6xw+gLiZA3jfnjy5w=
-
 import-fresh@^3.2.1:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b"
@@ -2010,6 +2041,13 @@ is-bigint@^1.0.1:
   resolved "https://registry.yarnpkg.com/is-bigint/-/is-bigint-1.0.1.tgz#6923051dfcbc764278540b9ce0e6b3213aa5ebc2"
   integrity sha512-J0ELF4yHFxHy0cmSxZuheDOz2luOdVvqjwmEcj8H/L1JHeuEDSDbeRP+Dk9kFVk5RTFzbucJ2Kb9F7ixY2QaCg==
 
+is-binary-path@~2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09"
+  integrity sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==
+  dependencies:
+    binary-extensions "^2.0.0"
+
 is-boolean-object@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-boolean-object/-/is-boolean-object-1.1.0.tgz#e2aaad3a3a8fca34c28f6eee135b156ed2587ff0"
@@ -2046,6 +2084,18 @@ is-date-object@^1.0.1:
   resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.2.tgz#bda736f2cd8fd06d32844e7743bfa7494c3bfd7e"
   integrity sha512-USlDT524woQ08aoZFzh3/Z6ch9Y/EWXEHQ/AaRN0SkKq4t2Jw2R2339tSXmwuVoY7LLlBCbOIlx2myP/L5zk0g==
 
+is-extglob@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
+  integrity sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=
+
+is-glob@^4.0.1, is-glob@~4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.1.tgz#7567dbe9f2f5e2467bc77ab83c4a29482407a5dc"
+  integrity sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==
+  dependencies:
+    is-extglob "^2.1.1"
+
 is-negative-zero@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/is-negative-zero/-/is-negative-zero-2.0.1.tgz#3de746c18dda2319241a53675908d8f766f11c24"
@@ -2056,6 +2106,11 @@ is-number-object@^1.0.4:
   resolved "https://registry.yarnpkg.com/is-number-object/-/is-number-object-1.0.4.tgz#36ac95e741cf18b283fc1ddf5e83da798e3ec197"
   integrity sha512-zohwelOAur+5uXtk8O3GPQ1eAcu4ZX3UwxQhUlfFFMNpUd83gXgjbhJh6HmB6LUNV/ieOLQuDwJO3dWJosUeMw==
 
+is-number@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/is-number/-/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b"
+  integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==
+
 is-obj@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/is-obj/-/is-obj-2.0.0.tgz#473fb05d973705e3fd9620545018ca8e22ef4982"
@@ -2098,11 +2153,6 @@ is-symbol@^1.0.2, is-symbol@^1.0.3:
   dependencies:
     has-symbols "^1.0.1"
 
-is-what@^3.12.0:
-  version "3.14.1"
-  resolved "https://registry.yarnpkg.com/is-what/-/is-what-3.14.1.tgz#e1222f46ddda85dead0fd1c9df131760e77755c1"
-  integrity sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==
-
 isexe@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
@@ -2186,30 +2236,6 @@ klona@^2.0.4:
   resolved "https://registry.yarnpkg.com/klona/-/klona-2.0.4.tgz#7bb1e3affb0cb8624547ef7e8f6708ea2e39dfc0"
   integrity sha512-ZRbnvdg/NxqzC7L9Uyqzf4psi1OM4Cuc+sJAkQPjO6XkQIJTNbfK2Rsmbw8fx1p2mkZdp2FZYo2+LwXYY/uwIA==
 
-less-loader@^8.1.1:
-  version "8.1.1"
-  resolved "https://registry.yarnpkg.com/less-loader/-/less-loader-8.1.1.tgz#ababe912580457ad00a4318146aac5b53e023f42"
-  integrity sha512-K93jJU7fi3n6rxVvzp8Cb88Uy9tcQKfHlkoezHwKILXhlNYiRQl4yowLIkQqmBXOH/5I8yoKiYeIf781HGkW9g==
-  dependencies:
-    klona "^2.0.4"
-
-less@^4.0.0:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/less/-/less-4.1.1.tgz#15bf253a9939791dc690888c3ff424f3e6c7edba"
-  integrity sha512-w09o8tZFPThBscl5d0Ggp3RcrKIouBoQscnOMgFH3n5V3kN/CXGHNfCkRPtxJk6nKryDXaV9aHLK55RXuH4sAw==
-  dependencies:
-    copy-anything "^2.0.1"
-    parse-node-version "^1.0.1"
-    tslib "^1.10.0"
-  optionalDependencies:
-    errno "^0.1.1"
-    graceful-fs "^4.1.2"
-    image-size "~0.5.0"
-    make-dir "^2.1.0"
-    mime "^1.4.1"
-    needle "^2.5.2"
-    source-map "~0.6.0"
-
 lines-and-columns@^1.1.6:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.1.6.tgz#1c00c743b433cd0a4e80758f7b64a57440d9ff00"
@@ -2302,14 +2328,6 @@ lru-cache@^6.0.0:
   dependencies:
     yallist "^4.0.0"
 
-make-dir@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-2.1.0.tgz#5f0310e18b8be898cc07009295a30ae41e91e6f5"
-  integrity sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==
-  dependencies:
-    pify "^4.0.1"
-    semver "^5.6.0"
-
 make-dir@^3.0.2, make-dir@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-3.1.0.tgz#415e967046b3a7f1d185277d84aa58203726a13f"
@@ -2344,11 +2362,6 @@ mime-types@^2.1.27:
   dependencies:
     mime-db "1.47.0"
 
-mime@^1.4.1:
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/mime/-/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1"
-  integrity sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==
-
 mimic-fn@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-2.1.0.tgz#7ed2c2ccccaf84d3ffcb7a69b57711fc2083401b"
@@ -2404,25 +2417,11 @@ ms@2.1.2:
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
   integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
 
-ms@^2.1.1:
-  version "2.1.3"
-  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
-  integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
-
 nanoid@^3.1.22:
   version "3.1.22"
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.22.tgz#b35f8fb7d151990a8aebd5aa5015c03cf726f844"
   integrity sha512-/2ZUaJX2ANuLtTvqTlgqBQNJoQO398KyJgZloL0PZkC0dpysjncRUPsFe3DUPzz/y3h+u7C46np8RMuvF3jsSQ==
 
-needle@^2.5.2:
-  version "2.6.0"
-  resolved "https://registry.yarnpkg.com/needle/-/needle-2.6.0.tgz#24dbb55f2509e2324b4a99d61f413982013ccdbe"
-  integrity sha512-KKYdza4heMsEfSWD7VPUIz3zX2XDwOyX2d+geb4vrERZMT5RMU6ujjaD+I5Yr54uZxQ2w6XRTAhHBbSCyovZBg==
-  dependencies:
-    debug "^3.2.6"
-    iconv-lite "^0.4.4"
-    sax "^1.2.4"
-
 neo-async@^2.6.2:
   version "2.6.2"
   resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.2.tgz#b4aafb93e3aeb2d8174ca53cf163ab7d7308305f"
@@ -2448,6 +2447,11 @@ normalize-package-data@^2.3.2:
     semver "2 || 3 || 4 || 5"
     validate-npm-package-license "^3.0.1"
 
+normalize-path@^3.0.0, normalize-path@~3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
+  integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==
+
 normalize-range@^0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/normalize-range/-/normalize-range-0.1.2.tgz#2d10c06bdfd312ea9777695a4d28439456b75942"
@@ -2577,11 +2581,6 @@ parse-json@^5.0.0:
     json-parse-even-better-errors "^2.3.0"
     lines-and-columns "^1.1.6"
 
-parse-node-version@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/parse-node-version/-/parse-node-version-1.0.1.tgz#e2b5dbede00e7fa9bc363607f53327e8b073189b"
-  integrity sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==
-
 path-exists@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-4.0.0.tgz#513bdbe2d3b95d7762e8c1137efa195c6c61b5b3"
@@ -2619,6 +2618,11 @@ path-type@^4.0.0:
   resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"
   integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==
 
+picomatch@^2.0.4, picomatch@^2.2.1:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.2.3.tgz#465547f359ccc206d3c48e46a1bcb89bf7ee619d"
+  integrity sha512-KpELjfwcCDUb9PeigTs2mBJzXUPzAuP2oPcA989He8Rte0+YUAjw1JVedDhuTKPkHjSYzMN3npC9luThGYEKdg==
+
 pidtree@^0.3.0:
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/pidtree/-/pidtree-0.3.1.tgz#ef09ac2cc0533df1f3250ccf2c4d366b0d12114a"
@@ -2629,11 +2633,6 @@ pify@^3.0.0:
   resolved "https://registry.yarnpkg.com/pify/-/pify-3.0.0.tgz#e5a4acd2c101fdf3d9a4d07f0dbc4db49dd28176"
   integrity sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=
 
-pify@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/pify/-/pify-4.0.1.tgz#4b2cd25c50d598735c50292224fd8c6df41e3231"
-  integrity sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==
-
 pkg-dir@^4.1.0, pkg-dir@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-4.2.0.tgz#f099133df7ede422e81d1d8448270eeb3e4261f3"
@@ -3212,11 +3211,6 @@ postcss@^8.2.10, postcss@^8.2.8, postcss@^8.2.9:
     nanoid "^3.1.22"
     source-map "^0.6.1"
 
-prr@~1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/prr/-/prr-1.0.1.tgz#d3fc114ba06995a45ec6893f484ceb1d78f5f476"
-  integrity sha1-0/wRS6BplaRexok/SEzrHXj19HY=
-
 punycode@^2.1.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
@@ -3238,6 +3232,13 @@ read-pkg@^3.0.0:
     normalize-package-data "^2.3.2"
     path-type "^3.0.0"
 
+readdirp@~3.5.0:
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.5.0.tgz#9ba74c019b15d365278d2e91bb8c48d7b4d42c9e"
+  integrity sha512-cMhu7c/8rdhkHXWsY+osBhfSy0JikwpHK/5+imo+LpeasTF8ouErHrlYkwT0++njiyuDvc7OFY5T3ukvZ8qmFQ==
+  dependencies:
+    picomatch "^2.2.1"
+
 rechoir@^0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/rechoir/-/rechoir-0.7.0.tgz#32650fd52c21ab252aa5d65b19310441c7e03aca"
@@ -3345,15 +3346,23 @@ safe-buffer@~5.1.1:
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
   integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
 
-"safer-buffer@>= 2.1.2 < 3":
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
-  integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
+sass-loader@^10.1.1:
+  version "10.1.1"
+  resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-10.1.1.tgz#4ddd5a3d7638e7949065dd6e9c7c04037f7e663d"
+  integrity sha512-W6gVDXAd5hR/WHsPicvZdjAWHBcEJ44UahgxcIE196fW2ong0ZHMPO1kZuI5q0VlvMQZh32gpv69PLWQm70qrw==
+  dependencies:
+    klona "^2.0.4"
+    loader-utils "^2.0.0"
+    neo-async "^2.6.2"
+    schema-utils "^3.0.0"
+    semver "^7.3.2"
 
-sax@^1.2.4:
-  version "1.2.4"
-  resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
-  integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
+sass@^1.32.8:
+  version "1.32.10"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.32.10.tgz#d40da4e20031b450359ee1c7e69bc8cc89569241"
+  integrity sha512-Nx0pcWoonAkn7CRp0aE/hket1UP97GiR1IFw3kcjV3pnenhWgZEWUf0ZcfPOV2fK52fnOcK3JdC/YYZ9E47DTQ==
+  dependencies:
+    chokidar ">=3.0.0 <4.0.0"
 
 schema-utils@^2.6.5:
   version "2.7.1"
@@ -3373,17 +3382,12 @@ schema-utils@^3.0.0:
     ajv "^6.12.5"
     ajv-keywords "^3.5.2"
 
-select2-bootstrap-theme@0.1.0-beta.10:
-  version "0.1.0-beta.10"
-  resolved "https://registry.yarnpkg.com/select2-bootstrap-theme/-/select2-bootstrap-theme-0.1.0-beta.10.tgz#b9426ecfc03bf4a235e76a132377574310469ac0"
-  integrity sha1-uUJuz8A79KI152oTI3dXQxBGmsA=
-
 select2@^4.0.13:
   version "4.0.13"
   resolved "https://registry.yarnpkg.com/select2/-/select2-4.0.13.tgz#0dbe377df3f96167c4c1626033e924372d8ef44d"
   integrity sha512-1JeB87s6oN/TDxQQYCvS5EFoQyvV6eYMZZ0AeA4tdFDYWN3BAGZ8npr17UBFddU0lgAt3H0yjX3X6/ekOj1yjw==
 
-"semver@2 || 3 || 4 || 5", semver@^5.5.0, semver@^5.6.0:
+"semver@2 || 3 || 4 || 5", semver@^5.5.0:
   version "5.7.1"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
   integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==
@@ -3398,7 +3402,7 @@ semver@^6.0.0, semver@^6.1.1, semver@^6.1.2, semver@^6.3.0:
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
   integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
 
-semver@^7.3.4, semver@^7.3.5:
+semver@^7.3.2, semver@^7.3.4, semver@^7.3.5:
   version "7.3.5"
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.5.tgz#0b621c879348d8998e4b0e4be94b3f12e6018ef7"
   integrity sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==
@@ -3478,7 +3482,7 @@ source-map@^0.5.0:
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
   integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=
 
-source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.0, source-map@~0.6.1:
+source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
   integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
@@ -3640,10 +3644,12 @@ to-fast-properties@^2.0.0:
   resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e"
   integrity sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=
 
-tslib@^1.10.0:
-  version "1.14.1"
-  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
-  integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
+to-regex-range@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-5.0.1.tgz#1648c44aae7c8d988a326018ed72f5b4dd0392e4"
+  integrity sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==
+  dependencies:
+    is-number "^7.0.0"
 
 unbox-primitive@^1.0.0:
   version "1.0.1"