inicios del FrontEnd

APP/.editorconfig

@@ -0,0 +1,13 @@
+# editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

APP/.gitignore

@@ -0,0 +1,90 @@
+# Created by .ignore support plugin (hsz.mobi)
+### Node template
+# Logs
+/logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# next.js build output
+.next
+
+# nuxt.js build output
+.nuxt
+
+# Nuxt generate
+dist
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless
+
+# IDE / Editor
+.idea
+
+# Service worker
+sw.*
+
+# macOS
+.DS_Store
+
+# Vim swap files
+*.swp

APP/README.md

@@ -0,0 +1,20 @@
+# app
+
+## Build Setup
+
+```bash
+# install dependencies
+$ npm install
+
+# serve with hot reload at localhost:3000
+$ npm run dev
+
+# build for production and launch server
+$ npm run build
+$ npm run start
+
+# generate static project
+$ npm run generate
+```
+
+For detailed explanation on how things work, check out [Nuxt.js docs](https://nuxtjs.org).

APP/assets/README.md

@@ -0,0 +1,7 @@
+# ASSETS
+
+**This directory is not required, you can delete it if you don't want to use it.**
+
+This directory contains your un-compiled assets such as LESS, SASS, or JavaScript.
+
+More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#webpacked).

APP/assets/css/demo.css

@@ -0,0 +1,56 @@
+.tim-row{
+    margin-bottom: 20px;
+}
+
+.tim-white-buttons {
+    background-color: #777777;
+}
+.typography-line{
+    padding-left: 25%;
+    margin-bottom: 35px;
+    position: relative;
+    display: block;
+    width: 100%;
+}
+.typography-line span{
+    color: #c0c1c2;
+    display: block;
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 13px;
+    left: 0;
+    position: absolute;
+    width: 260px;
+    text-transform: none;
+}
+.tim-row{
+    padding-top: 60px;
+}
+.tim-row h3{
+    margin-top: 0;
+}
+
+.offline-doc .page-header:before {
+  content: "";
+  background: rgba(0,0,0,.75);
+}
+
+.offline-doc .page-header{
+  display: flex;
+  align-items: center;
+}
+
+.offline-doc .footer{
+  position: absolute;
+  width: 100%;
+  background: transparent;
+  bottom: 0;
+  color: #fff;
+  z-index: 1;
+}
+
+#map {
+  position: relative;
+  width: 100%;
+  height: 100vh;
+}

APP/assets/css/nucleo-icons.css

@@ -0,0 +1,539 @@
+/* --------------------------------
+
+Nucleo Outline Web Font - nucleoapp.com/
+License - nucleoapp.com/license/
+Created using IcoMoon - icomoon.io
+
+-------------------------------- */
+
+@font-face {
+  font-family: 'Nucleo';
+  src: url('../fonts/nucleo.eot');
+  src: url('../fonts/nucleo.eot') format('embedded-opentype'),
+  url('../fonts/nucleo.woff2') format('woff2'),
+  url('../fonts/nucleo.woff') format('woff'),
+  url('../fonts/nucleo.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+
+/*------------------------
+	base class definition
+-------------------------*/
+
+.tim-icons {
+  display: inline-block;
+  font: normal normal normal 1em/1 'Nucleo';
+  vertical-align: middle;
+  speak: none;
+  text-transform: none;
+  /* Better Font Rendering */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.font-icon-detail{
+  text-align: center;
+  padding: 45px 0 30px;
+  border: 1px solid #e44cc4;
+  border-radius: .1875rem;
+  margin: 15px 0;
+  min-height: 168px;
+}
+.font-icon-detail i{
+    color: #FFFFFF;
+    font-size: 1.5em;
+  }
+
+.font-icon-detail p{
+    color: #e44cc4 !important;
+    margin-top: 30px;
+    padding: 0 10px;
+    font-size: .7142em;
+}
+
+/*------------------------
+  change icon size
+-------------------------*/
+
+.tim-icons-sm {
+  font-size: 0.8em;
+}
+.tim-icons-lg {
+  font-size: 1.2em;
+}
+/* absolute units */
+.tim-icons-16 {
+  font-size: 16px;
+}
+.tim-icons-32 {
+  font-size: 32px;
+}
+
+/*----------------------------------
+  add a square/circle background
+-----------------------------------*/
+
+.tim-icons-bg-square,
+.tim-icons-bg-circle {
+  padding: 0.35em;
+}
+
+.tim-icons-bg-circle {
+  border-radius: 50%;
+}
+/*------------------------
+  list icons
+-------------------------*/
+
+
+
+/*------------------------
+  spinning icons
+-------------------------*/
+
+.tim-icons-is-spinning {
+  -webkit-animation: tim-icons-spin 2s infinite linear;
+  -moz-animation: tim-icons-spin 2s infinite linear;
+  animation: tim-icons-spin 2s infinite linear;
+}
+
+@-webkit-keyframes tim-icons-spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+  }
+}
+@-moz-keyframes tim-icons-spin {
+  0% {
+    -moz-transform: rotate(0deg);
+  }
+  100% {
+    -moz-transform: rotate(360deg);
+  }
+}
+@keyframes tim-icons-spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    -moz-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    -o-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
+/*------------------------
+  rotated/flipped icons
+-------------------------*/
+/*------------------------
+	icons
+-------------------------*/
+
+.icon-alert-circle-exc::before {
+  content: "\ea02";
+}
+
+.icon-align-center::before {
+  content: "\ea03";
+}
+
+.icon-align-left-2::before {
+  content: "\ea04";
+}
+
+.icon-app::before {
+  content: "\ea05";
+}
+
+.icon-atom::before {
+  content: "\ea06";
+}
+
+.icon-attach-87::before {
+  content: "\ea07";
+}
+
+.icon-badge::before {
+  content: "\ea08";
+}
+
+.icon-bag-16::before {
+  content: "\ea09";
+}
+
+.icon-bank::before {
+  content: "\ea0a";
+}
+
+.icon-basket-simple::before {
+  content: "\ea0b";
+}
+
+.icon-bell-55::before {
+  content: "\ea0c";
+}
+
+.icon-bold::before {
+  content: "\ea0d";
+}
+
+.icon-book-bookmark::before {
+  content: "\ea0e";
+}
+
+.icon-bulb-63::before {
+  content: "\ea0f";
+}
+
+.icon-bullet-list-67::before {
+  content: "\ea10";
+}
+
+.icon-bus-front-12::before {
+  content: "\ea11";
+}
+
+.icon-button-pause::before {
+  content: "\ea12";
+}
+
+.icon-button-power::before {
+  content: "\ea13";
+}
+
+.icon-calendar-60::before {
+  content: "\ea14";
+}
+
+.icon-camera-18::before {
+  content: "\ea15";
+}
+
+.icon-caps-small::before {
+  content: "\ea16";
+}
+
+.icon-cart::before {
+  content: "\ea17";
+}
+
+.icon-chart-bar-32::before {
+  content: "\ea18";
+}
+
+.icon-chart-pie-36::before {
+  content: "\ea19";
+}
+
+.icon-chat-33::before {
+  content: "\ea1a";
+}
+
+.icon-check-2::before {
+  content: "\ea1b";
+}
+
+.icon-cloud-download-93::before {
+  content: "\ea1c";
+}
+
+.icon-cloud-upload-94::before {
+  content: "\ea1d";
+}
+
+.icon-coins::before {
+  content: "\ea1e";
+}
+
+.icon-compass-05::before {
+  content: "\ea1f";
+}
+
+.icon-controller::before {
+  content: "\ea20";
+}
+
+.icon-credit-card::before {
+  content: "\ea21";
+}
+
+.icon-delivery-fast::before {
+  content: "\ea22";
+}
+
+.icon-double-left::before {
+  content: "\ea23";
+}
+
+.icon-double-right::before {
+  content: "\ea24";
+}
+
+.icon-email-85::before {
+  content: "\ea25";
+}
+
+.icon-gift-2::before {
+  content: "\ea26";
+}
+
+.icon-globe-2::before {
+  content: "\ea27";
+}
+
+.icon-headphones::before {
+  content: "\ea28";
+}
+
+.icon-heart-2::before {
+  content: "\ea29";
+}
+
+.icon-html5::before {
+  content: "\ea2a";
+}
+
+.icon-image-02::before {
+  content: "\ea2b";
+}
+
+.icon-istanbul::before {
+  content: "\ea2c";
+}
+
+.icon-key-25::before {
+  content: "\ea2d";
+}
+
+.icon-laptop::before {
+  content: "\ea2e";
+}
+
+.icon-light-3::before {
+  content: "\ea2f";
+}
+
+.icon-link-72::before {
+  content: "\ea30";
+}
+
+.icon-lock-circle::before {
+  content: "\ea31";
+}
+
+.icon-map-big::before {
+  content: "\ea32";
+}
+
+.icon-minimal-down::before {
+  content: "\ea33";
+}
+
+.icon-minimal-left::before {
+  content: "\ea34";
+}
+
+.icon-minimal-right::before {
+  content: "\ea35";
+}
+
+.icon-minimal-up::before {
+  content: "\ea36";
+}
+
+.icon-mobile::before {
+  content: "\ea37";
+}
+
+.icon-molecule-40::before {
+  content: "\ea38";
+}
+
+.icon-money-coins::before {
+  content: "\ea39";
+}
+
+.icon-notes::before {
+  content: "\ea3a";
+}
+
+.icon-palette::before {
+  content: "\ea3b";
+}
+
+.icon-paper::before {
+  content: "\ea3c";
+}
+
+.icon-pencil::before {
+  content: "\ea3d";
+}
+
+.icon-pin::before {
+  content: "\ea3e";
+}
+
+.icon-planet::before {
+  content: "\ea3f";
+}
+
+.icon-puzzle-10::before {
+  content: "\ea40";
+}
+
+.icon-satisfied::before {
+  content: "\ea41";
+}
+
+.icon-scissors::before {
+  content: "\ea42";
+}
+
+.icon-send::before {
+  content: "\ea43";
+}
+
+.icon-settings-gear-63::before {
+  content: "\ea44";
+}
+
+.icon-settings::before {
+  content: "\ea45";
+}
+
+.icon-simple-add::before {
+  content: "\ea46";
+}
+
+.icon-simple-delete::before {
+  content: "\ea47";
+}
+
+.icon-simple-remove::before {
+  content: "\ea48";
+}
+
+.icon-single-02::before {
+  content: "\ea49";
+}
+
+.icon-single-copy-04::before {
+  content: "\ea4a";
+}
+
+.icon-sound-wave::before {
+  content: "\ea4b";
+}
+
+.icon-spaceship::before {
+  content: "\ea4c";
+}
+
+.icon-square-pin::before {
+  content: "\ea4d";
+}
+
+.icon-support-17::before {
+  content: "\ea4e";
+}
+
+.icon-tablet-2::before {
+  content: "\ea4f";
+}
+
+.icon-tag::before {
+  content: "\ea50";
+}
+
+.icon-tap-02::before {
+  content: "\ea51";
+}
+
+.icon-tie-bow::before {
+  content: "\ea52";
+}
+
+.icon-time-alarm::before {
+  content: "\ea53";
+}
+
+.icon-trash-simple::before {
+  content: "\ea54";
+}
+
+.icon-triangle-right-17::before {
+  content: "\ea55";
+}
+
+.icon-trophy::before {
+  content: "\ea56";
+}
+
+.icon-tv-2::before {
+  content: "\ea57";
+}
+
+.icon-upload::before {
+  content: "\ea58";
+}
+
+.icon-user-run::before {
+  content: "\ea59";
+}
+
+.icon-vector::before {
+  content: "\ea5a";
+}
+
+.icon-video-66::before {
+  content: "\ea5b";
+}
+
+.icon-volume-98::before {
+  content: "\ea5c";
+}
+
+.icon-wallet-43::before {
+  content: "\ea5d";
+}
+
+.icon-watch-time::before {
+  content: "\ea5e";
+}
+
+.icon-wifi::before {
+  content: "\ea5f";
+}
+
+.icon-world::before {
+  content: "\ea60";
+}
+
+.icon-zoom-split::before {
+  content: "\ea61";
+}
+
+.icon-refresh-01::before {
+  content: "\ea62";
+}
+
+.icon-refresh-02::before {
+  content: "\ea63";
+}
+
+.icon-shape-star::before {
+  content: "\ea64";
+}
+
+.icon-components::before {
+  content: "\ea65";
+}

APP/assets/sass/black-dashboard.scss

@@ -0,0 +1,114 @@
+/*!
+
+ =========================================================
+ * Nuxt Black Dashboard - v1.0.0
+ =========================================================
+
+ * Product Page: https://www.creative-tim.com/product/nuxt-black-dashboard-pro
+ * Copyright 2020 Creative Tim (https://www.creative-tim.com)
+
+ * Coded by Creative Tim
+
+ =========================================================
+
+ * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+ */
+
+ // Core
+
+@import "dashboard/custom/functions";
+@import "~bootstrap/scss/functions";
+
+@import "dashboard/custom/variables";
+@import "~bootstrap/scss/variables";
+
+@import "dashboard/custom/mixins";
+@import "~bootstrap/scss/mixins";
+
+ // Bootstrap components
+
+@import "~bootstrap/scss/root";
+@import "~bootstrap/scss/reboot";
+@import "~bootstrap/scss/type";
+@import "~bootstrap/scss/images";
+@import "~bootstrap/scss/code";
+@import "~bootstrap/scss/grid";
+@import "~bootstrap/scss/tables";
+@import "~bootstrap/scss/forms";
+@import "~bootstrap/scss/buttons";
+@import "~bootstrap/scss/transitions";
+@import "~bootstrap/scss/dropdown";
+@import "~bootstrap/scss/button-group";
+@import "~bootstrap/scss/input-group";
+@import "~bootstrap/scss/custom-forms";
+@import "~bootstrap/scss/nav";
+@import "~bootstrap/scss/navbar";
+@import "~bootstrap/scss/card";
+@import "~bootstrap/scss/breadcrumb";
+@import "~bootstrap/scss/pagination";
+@import "~bootstrap/scss/badge";
+@import "~bootstrap/scss/jumbotron";
+@import "~bootstrap/scss/alert";
+@import "~bootstrap/scss/progress";
+@import "~bootstrap/scss/media";
+@import "~bootstrap/scss/list-group";
+@import "~bootstrap/scss/close";
+@import "~bootstrap/scss/modal";
+@import "~bootstrap/scss/tooltip";
+@import "~bootstrap/scss/popover";
+@import "~bootstrap/scss/carousel";
+@import "~bootstrap/scss/utilities";
+@import "~bootstrap/scss/print";
+
+ // Custom components
+
+ @import "dashboard/custom/reboot.scss";
+ @import "dashboard/custom/utilities.scss";
+ @import "dashboard/custom/alerts.scss";
+ @import "dashboard/custom/badge.scss";
+ @import "dashboard/custom/buttons.scss";
+ @import "dashboard/custom/dropdown.scss";
+ @import "dashboard/custom/footer.scss";
+ @import "dashboard/custom/forms.scss";
+ @import "dashboard/custom/grid.scss";
+ @import "dashboard/custom/icons.scss";
+ @import "dashboard/custom/images.scss";
+ @import "dashboard/custom/input-group.scss";
+ @import "dashboard/custom/modal.scss";
+ @import "dashboard/custom/nav.scss";
+ @import "dashboard/custom/navbar.scss";
+ @import "dashboard/custom/popover.scss";
+ @import "dashboard/custom/progress.scss";
+ @import "dashboard/custom/type.scss";
+ @import "dashboard/custom/tables";
+ @import "dashboard/custom/checkboxes-radio";
+ @import "dashboard/custom/fixed-plugin";
+ @import "dashboard/custom/sidebar-and-main-panel.scss";
+ @import "dashboard/custom/misc.scss";
+ @import "dashboard/custom/rtl.scss";
+
+ // Vendor / Plugins
+
+@import "dashboard/custom/vendor/plugin-bootstrap-switch.scss";
+@import "dashboard/custom/vendor/plugin-perfect-scrollbar.scss";
+
+// Vendor Element UI plugins
+@import "dashboard/custom/vendor/element-ui/plugin-tags";
+@import "dashboard/custom/vendor/element-ui/plugin-slider";
+@import "dashboard/custom/vendor/element-ui/plugin-select";
+@import "dashboard/custom/vendor/element-ui/plugin-inputs";
+@import "dashboard/custom/vendor/element-ui/plugin-tables";
+@import "dashboard/custom/vendor/element-ui/plugin-datepicker";
+
+// light mode
+
+@import "dashboard/custom/white-content.scss";
+
+// Cards
+
+@import 'dashboard/custom/card';
+@import "dashboard/custom/cards/card-chart";
+@import "dashboard/custom/cards/card-map";
+@import "dashboard/custom/cards/card-user";
+@import "dashboard/custom/cards/card-profile";
+@import "dashboard/custom/cards/card-plain";

APP/assets/sass/dashboard/custom/_alerts.scss

@@ -0,0 +1,89 @@
+.alert{
+    border: 0;
+    color: $white;
+
+    .alert-link{
+      color: $white;
+    }
+
+    &.alert-success{
+      background-color: darken($success, 10%);
+    }
+
+    i.fa,
+    i.tim-icons{
+        font-size: $font-paragraph;
+    }
+
+    .close{
+        color: $white;
+        opacity: .9;
+        text-shadow: none;
+        line-height: 0;
+        outline: 0;
+    }
+
+    span[data-notify="icon"]{
+      font-size: 22px;
+      display: block;
+      left: 19px;
+      position: absolute;
+      top: 50%;
+      margin-top: -11px;
+    }
+
+    button.close{
+      position: absolute;
+      right: 15px;
+      top: 50%;
+      margin-top: -13px;
+      width: 25px;
+      height: 25px;
+      padding: 3px;
+    }
+
+    .close ~ span{
+        display: block;
+        max-width: 89%;
+    }
+
+    &.alert-with-icon{
+        padding-left: 65px;
+    }
+}
+
+.alert-dismissible {
+    .close {
+        top: 50%;
+        right: $alert-padding-x;
+        padding: 0;
+        transform: translateY(-50%);
+        color: rgba($white, .6);
+        opacity: 1;
+
+        &:hover,
+        &:focus {
+            color: rgba($white, .9);
+            opacity: 1 !important;
+        }
+
+        @include media-breakpoint-down(xs) {
+            top: 1rem;
+            right: .5rem;
+        }
+
+        &>span:not(.sr-only) {
+            font-size: 1.5rem;
+            background-color: transparent;
+            color: rgba($white, .6);
+        }
+
+        &:hover,
+        &:focus {
+            &>span:not(.sr-only) {
+                background-color: transparent;
+                color: rgba($white, .9);
+            }
+        }
+    }
+}

APP/assets/sass/dashboard/custom/_badge.scss

@@ -0,0 +1,25 @@
+/*           badges             */
+.badge{
+    text-transform: uppercase;
+    line-height: 12px;
+    border: none;
+    text-decoration: none;
+    margin-bottom: 5px;
+
+    &:hover,
+    &:focus{
+      text-decoration: none;
+    }
+}
+
+.badge-icon{
+  padding: 0.4em 0.55em;
+
+  i {
+     font-size: 0.8em;
+  }
+}
+
+.badge-success{
+    @include badge-variant(darken($success,10%));
+}

APP/assets/sass/dashboard/custom/_buttons.scss

@@ -0,0 +1,241 @@
+.btn,
+.navbar .navbar-nav > a.btn{
+    border-width: $border-thick;
+    border: none;
+    position: relative;
+    overflow: hidden;
+    margin:4px 1px;
+    border-radius: $border-radius-lg;
+    cursor: pointer;
+
+    @include btn-styles($default, $default-states);
+
+    &:hover,
+    &:focus{
+        @include opacity(1);
+        outline: 0 !important;
+    }
+    &:active,
+    &.active,
+    .open > &.dropdown-toggle {
+         @include box-shadow(none);
+         outline: 0 !important;
+    }
+
+    .badge{
+      margin: 0;
+    }
+
+    &.btn-icon {
+        // see above for color variations
+        height: $icon-size-regular;
+        min-width: $icon-size-regular;
+        width: $icon-size-regular;
+        padding: 0;
+        font-size: $icon-font-size-regular;
+        overflow: hidden;
+        position: relative;
+        line-height: normal;
+
+        &.btn-simple{
+            padding: 0;
+        }
+
+        &.btn-sm{
+            height: $icon-size-sm;
+            min-width: $icon-size-sm;
+            width: $icon-size-sm;
+
+            .fa,
+            .far,
+            .fas,
+            .tim-icons{
+                font-size: $icon-font-size-sm;
+            }
+        }
+
+        &.btn-lg{
+            height: $icon-size-lg;
+            min-width: $icon-size-lg;
+            width: $icon-size-lg;
+
+            .fa,
+            .far,
+            .fas,
+            .tim-icons{
+                font-size: $icon-font-size-lg;
+            }
+        }
+
+        &:not(.btn-footer) .tim-icons,
+        &:not(.btn-footer) .fa,
+        &:not(.btn-footer) .far,
+        &:not(.btn-footer) .fas{
+            position: absolute;
+            font-size: 1em;
+            top: 50%;
+            left: 50%;
+            transform: translate(-12px, -12px);
+            line-height: 1.5626rem;
+            width: 24px;
+        }
+
+    }
+
+    &:not(.btn-icon) .tim-icons{
+        position: relative;
+        top: 1px;
+    }
+
+    span{
+      position: relative;
+      display: block;
+    }
+
+  &.btn-link.dropdown-toggle {
+    color: $dark-gray;
+  }
+
+  &.dropdown-toggle:after {
+    margin-left: 30px !important;
+  }
+}
+
+// Apply the mixin to the buttons
+// .btn-default { @include btn-styles($default-color, $default-states-color); }
+.btn-primary { @include btn-styles($primary, $primary-states);
+
+              }
+.btn-success { @include btn-styles($success, $success-states);
+
+              }
+.btn-info    { @include btn-styles($info, $info-states);
+
+              }
+.btn-warning { @include btn-styles($warning, $warning-states);
+                &:not(:disabled):not(.disabled):active{
+                  color: $white;
+                }
+              }
+.btn-danger  { @include btn-styles($danger, $danger-states);
+
+              }
+.btn-neutral { @include btn-styles($white, $white); }
+
+.btn{
+     &:disabled,
+     &[disabled],
+     &.disabled{
+        @include opacity(.5);
+        pointer-events: none;
+    }
+}
+.btn-simple{
+    border: $border;
+    border-color: $default;
+    box-shadow: none;
+    padding: $padding-btn-vertical - 1 $padding-round-horizontal - 1;
+    background-color: $transparent-bg;
+}
+
+.btn-simple,
+.btn-link{
+    &.disabled,
+    &:disabled,
+    &[disabled],
+    fieldset[disabled] & {
+        &,
+        &:hover,
+        &:focus,
+        &.focus,
+        &:active,
+        &.active {
+            background: $transparent-bg;
+        }
+    }
+}
+
+.btn:not(:disabled):not(.disabled):active, .btn:not(:disabled):not(.disabled).active{
+  box-shadow: 2px 2px 6px rgba(0,0,0,.4);
+}
+.btn-link{
+    border: $none;
+    box-shadow: none;
+    padding: $padding-base-vertical $padding-base-horizontal;
+    background: $transparent-bg;
+    color: $gray-300;
+    font-weight: $font-weight-bold;
+
+  &:hover {
+    box-shadow: none !important;
+    transform: none !important;
+  }
+}
+
+.btn-lg{
+   @include btn-size($btn-padding-y-lg, $btn-padding-x-lg, $font-size-base, $border-radius-lg);
+}
+.btn-sm{
+    @include btn-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-base, $border-radius-sm);
+}
+
+.btn-wd {
+    min-width: 140px;
+}
+.btn-group.select{
+    width: 100%;
+}
+
+.btn-group {
+  .btn.active {
+    box-shadow: 2px 2px 6px rgba(0,0,0,.4);
+    transform: translateY(-1px);
+    -webkit-transform: translateY(-1px);
+  }
+
+  label.btn.active {
+    transform: translateY(0);
+    -webkit-transform: translateY(0);
+  }
+}
+
+
+.btn-group.select .btn{
+    text-align: left;
+}
+.btn-group.select .caret{
+    position: absolute;
+    top: 50%;
+    margin-top: -1px;
+    right: 8px;
+}
+
+.btn-round{
+    border-width: $border-thin;
+    border-radius: $btn-round-radius;
+
+    &.btn-simple{
+        padding: $padding-btn-vertical - 1  $padding-round-horizontal - 1;
+    }
+}
+
+.no-caret {
+  &.dropdown-toggle::after {
+    display: none;
+  }
+}
+
+.btn-secondary:not(:disabled):not(.disabled):active,
+.btn-secondary:not(:disabled):not(.disabled).active,
+.show > .btn-secondary.dropdown-toggle {
+    color: $white;
+}
+
+
+
+@include media-breakpoint-down(md) {
+  .btn-group .btn {
+    padding-left: $padding-round-horizontal;
+    padding-right: $padding-round-horizontal;
+  }
+}

APP/assets/sass/dashboard/custom/_card.scss

@@ -0,0 +1,220 @@
+.card{
+    background: $card-black-background;
+    border: 0;
+    position: relative;
+    width: 100%;
+    margin-bottom: 30px;
+    box-shadow: $box-shadow;
+
+
+    label{
+      color: rgba($white, 0.6);
+    }
+
+    .card-title {
+      margin-bottom: .75rem;
+    }
+
+    .card-body{
+      padding: 15px;
+
+      &.table-full-width{
+        padding-left: 0;
+        padding-right: 0;
+      }
+
+      .card-title{
+        color: $white;
+        text-transform: inherit;
+        font-weight: $font-weight-light;
+        margin-bottom: .75rem;
+      }
+
+      .card-description, .card-category{
+        color: rgba($white, 0.6);
+      }
+
+    }
+
+    .card-header{
+      &:not([data-background-color]){
+        background-color: transparent;
+      }
+      padding: 15px 15px 0;
+      border: 0;
+      color: rgba($white,0.8);
+
+      .card-title{
+          color: $white;
+          font-weight: 100;
+      }
+
+      .card-category{
+        color: $dark-gray;
+        margin-bottom: 5px;
+        font-weight: 300;
+      }
+    }
+
+    .map{
+        border-radius: $border-radius-sm;
+
+        &.map-big{
+          height: 420px;
+        }
+    }
+
+    &.card-white{
+      background: $white;
+
+      .card-title{
+        color: $black;
+      }
+
+      //style for inputs
+
+      @include form-control-placeholder(rgba($black,0.4), 1);
+        .has-danger{
+          .form-control, .input-group-prepend .input-group-text{
+            border-color: $danger-states;
+          }
+        }
+
+        .input-group-prepend .input-group-text{
+          border-color: rgba($black-states,0.2);
+          color: $black-states;
+        }
+
+        .form-control{
+          color: $black;
+          border-color: rgba($black-states,0.2);
+          &:focus{
+            border-color: $primary;
+          }
+        }
+        label:not(.btn):not(.error){
+          color: $default;
+        }
+
+      .form-group.no-border,
+      .input-group.no-border {
+          .form-control,
+          .form-control + .input-group-prepend .input-group-text,
+          .form-control + .input-group-append .input-group-text,
+          .input-group-prepend .input-group-text,
+          .input-group-append .input-group-text{
+            background-color: $opacity-gray-3;
+              &:focus,
+              &:active,
+              &:active{
+                background-color: $opacity-gray-5;
+              }
+          }
+
+          .form-control {
+              &:focus {
+                  & + .input-group-prepend .input-group-text,
+                  & + .input-group-append .input-group-text{
+                    background-color: $transparent-bg;
+                  }
+              }
+          }
+
+
+      }
+
+      .input-group[disabled]{
+          .input-group-prepend .input-group-text,
+          .input-group-append .input-group-text{
+              background-color: $black;
+          }
+      }
+
+      .form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control{
+        background: $light-gray;
+        border-color: rgba($black-states,0.3);
+      }
+
+      .input-group-focus{
+          .input-group-prepend .input-group-text,
+          .input-group-append .input-group-text,
+          .form-control{
+            background-color: $white;
+            border-color: $primary;
+          }
+
+          &.no-border{
+              .input-group-prepend .input-group-text,
+              .input-group-append .input-group-text{
+
+                  background-color: $opacity-gray-5;
+              }
+          }
+      }
+      .input-group-prepend .input-group-text {
+          border-right: none;
+      }
+
+      .input-group-append .input-group-text {
+          border-left: none;
+      }
+
+      .has-danger .form-control:focus, .has-success.input-group-focus .input-group-append .input-group-text, .has-success.input-group-focus .input-group-prepend .input-group-text {
+        border-color: $danger-states;
+      }
+
+      .has-success .form-control:focus, .has-success.input-group-focus .input-group-append .input-group-text, .has-success.input-group-focus .input-group-prepend .input-group-text {
+        border-color: darken($success, 10%);
+      }
+    }
+
+
+    &.card-plain {
+      background: transparent;
+      box-shadow: none;
+    }
+
+    .image{
+        overflow: hidden;
+        height: 200px;
+        position: relative;
+    }
+
+    .avatar{
+        width: 30px;
+        height: 30px;
+        overflow: hidden;
+        border-radius: 50%;
+        margin-bottom: 15px;
+    }
+
+    label{
+        font-size: $font-size-sm;
+        margin-bottom: 5px;
+
+    }
+
+    .card-footer{
+        background-color: transparent;
+        border: 0;
+        padding: 15px;
+
+
+        .stats{
+            i{
+                margin-right: 5px;
+                position: relative;
+
+            }
+        }
+
+        h6{
+          margin-bottom: 0;
+          padding: 7px 0;
+        }
+    }
+}
+
+.card-body{
+  padding: $card-spacer-y;
+}

APP/assets/sass/dashboard/custom/_checkboxes-radio.scss

@@ -0,0 +1,155 @@
+.form-check{
+ margin-top: .5rem;
+ padding-left: 0;
+}
+
+.form-check .form-check-label{
+  display: inline-block;
+  position: relative;
+  cursor: pointer;
+  padding-left: 25px;
+  line-height: 18px;
+  margin-bottom: 0;
+  -webkit-transition: color 0.3s linear;
+  -moz-transition: color 0.3s linear;
+  -o-transition: color 0.3s linear;
+  -ms-transition: color 0.3s linear;
+  transition: color 0.3s linear;
+  user-select: none;
+}
+.radio .form-check-sign{
+    padding-left: 28px;
+}
+
+.form-check-radio.form-check-inline .form-check-label {
+  padding-left: 5px;
+  margin-right: 10px;
+}
+
+.form-check .form-check-sign::before,
+.form-check .form-check-sign::after{
+  content: " ";
+  display: inline-block;
+  position: absolute;
+  width: 17px;
+  height: 17px;
+  left: 0;
+  cursor: pointer;
+  border-radius: 3px;
+  top: 0;
+  border: 1px solid darken($dark-gray,10%);
+  -webkit-transition: opacity 0.3s linear;
+  -moz-transition: opacity 0.3s linear;
+  -o-transition: opacity 0.3s linear;
+  -ms-transition: opacity 0.3s linear;
+  transition: opacity 0.3s linear;
+}
+
+.form-check input[type="checkbox"]:checked + .form-check-sign::before,
+.form-check input[type="checkbox"]:checked + .form-check-sign::before{
+  border: none;
+  background-color: $primary;
+}
+
+ .form-check .form-check-sign::after{
+  font-family: 'nucleo';
+  content: "\ea1b";
+  top: 0px;
+  text-align: center;
+  font-size: 14px;
+  opacity: 0;
+  color: $white;
+  font-weight: $font-weight-bold;
+  border: 0;
+  background-color: inherit;
+}
+
+.form-check.disabled .form-check-label,
+.form-check.disabled .form-check-label {
+    color: $dark-gray;
+    opacity: .5;
+    cursor: not-allowed;
+}
+
+.form-check input[type="checkbox"],
+.radio input[type="radio"]{
+  opacity: 0;
+  position: absolute;
+  visibility: hidden;
+}
+.form-check input[type="checkbox"]:checked + .form-check-sign::after{
+  opacity: 1;
+  font-size: 10px;
+  margin-top: 0;
+}
+
+
+.form-check input[type="checkbox"]+ .form-check-sign::after{
+  opacity: 0;
+  font-size: 10px;
+  margin-top: 0;
+}
+
+.form-control input[type="checkbox"]:disabled + .form-check-sign::before,
+.checkbox input[type="checkbox"]:disabled + .form-check-sign::after{
+    cursor: not-allowed;
+}
+
+.form-check input[type="checkbox"]:disabled + .form-check-sign,
+.form-check input[type="radio"]:disabled + .form-check-sign{
+    pointer-events: none;
+}
+
+.form-check-radio .form-check-label{
+  padding-top: 3px;
+}
+.form-check-radio .form-check-sign::before,
+.form-check-radio .form-check-sign::after{
+  content: " ";
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  border: 1px solid darken($dark-gray,10%);
+  display: inline-block;
+  position: absolute;
+  left: 0px;
+  top: 3px;
+  padding: 1px;
+  -webkit-transition: opacity 0.3s linear;
+  -moz-transition: opacity 0.3s linear;
+  -o-transition: opacity 0.3s linear;
+  -ms-transition: opacity 0.3s linear;
+  transition: opacity 0.3s linear;
+}
+
+.form-check-radio input[type="radio"] + .form-check-sign:after,
+.form-check-radio input[type="radio"] {
+    opacity: 0;
+}
+.form-check-radio input[type="radio"]:checked + .form-check-sign::after {
+    width: 6px;
+    height: 6px;
+    background-color: $primary;
+    border-color: $primary;
+    top: 9px;
+    left: 6px;
+    opacity: 1;
+}
+
+.form-check-radio input[type="radio"]:checked + .form-check-sign::before {
+  border-color: $primary;
+}
+
+
+.form-check-radio input[type="radio"]:checked + .form-check-sign::after{
+    opacity: 1;
+}
+
+.form-check-radio input[type="radio"]:disabled + .form-check-sign {
+  color: $dark-gray;
+}
+
+.form-check-radio input[type="radio"]:disabled + .form-check-sign::before,
+.form-check-radio input[type="radio"]:disabled + .form-check-sign::after {
+  color: $dark-gray;
+}

APP/assets/sass/dashboard/custom/_dropdown.scss

@@ -0,0 +1,361 @@
+.dropdown-menu {
+    border: 0;
+    box-shadow: 0px 10px 50px 0px rgba(0, 0, 0, 0.2);
+    border-radius: $border-radius-xs;
+    @include transitions($fast-transition-time, $transition-linear);
+
+    &.dropdown-menu-right {
+      &:before, &:after {
+        left:auto;
+        right: 10px;
+      }
+    }
+
+    &.dropdown-black {
+      background: linear-gradient(to bottom, $black 0%, $black-states 100%);
+      border: 1px solid $default;
+      .dropdown-item {
+        color: rgba(255, 255, 255, 0.7);
+      }
+
+      .dropdown-divider {
+        border-color: $default;
+      }
+
+      &:before {
+        color: $black;
+        z-index: 2;
+      }
+
+      &:after {
+        display: inline-block;
+        position: absolute;
+        width: 0;
+        height: 0;
+        z-index: 1;
+        vertical-align: middle;
+        content: "";
+        top: -6px;
+        left: 10px;
+        right: auto;
+        color: $default;
+        border-bottom: .4em solid;
+        border-right: .4em solid transparent;
+        border-left: .4em solid transparent;
+      }
+
+      &.dropdown-menu-right {
+        &:after {
+          left: auto;
+          right: 10px;
+        }
+      }
+
+      .dropup & {
+        &:after {
+          color: $black-states;
+          z-index: 2;
+        }
+
+        &:before {
+          display: inline-block;
+          position: absolute;
+          width: 0;
+          height: 0;
+          vertical-align: middle;
+          content: "";
+          top: auto;
+          bottom: -6px;
+          right: auto;
+          left: 10px;
+          color: $dark-background;
+          border-top: .4em solid;
+          border-right: .4em solid transparent;
+          border-left: .4em solid transparent;
+          border-bottom: none;
+          z-index: 1;
+        }
+      }
+    }
+
+    i {
+        margin-right: 5px;
+        position: relative;
+        top: 1px;
+    }
+
+    .tim-icons {
+        margin-right: 10px;
+        position: relative;
+        top: 4px;
+        font-size: 18px;
+        margin-top: -5px;
+        opacity: .5;
+    }
+
+    .dropdown-item {
+        &.active,
+        &:active{
+            color: inherit;
+        }
+    }
+
+    .dropup & {
+        &:before {
+            display: none;
+        }
+
+        &:after {
+          display: inline-block;
+          position: absolute;
+          width: 0;
+          height: 0;
+          vertical-align: middle;
+          content: "";
+          top: auto;
+          bottom: -5px;
+          right: auto;
+          left: 10px;
+          color: $white;
+          border-top: .4em solid;
+          border-right: .4em solid transparent;
+          border-left: .4em solid transparent;
+          border-bottom: none;
+        }
+
+        &.dropdown-menu-right {
+          &:after, &:before {
+            right: 10px;
+            left: auto;
+          }
+        }
+    }
+
+
+
+    &:before {
+      display: inline-block;
+      position: absolute;
+      width: 0;
+      height: 0;
+      vertical-align: middle;
+      content: "";
+      top: -5px;
+      left: 10px;
+      right: auto;
+      color: $white;
+      border-bottom: .4em solid;
+      border-right: .4em solid transparent;
+      border-left: .4em solid transparent;
+    }
+
+
+
+    &.dropdown-menu-right {
+      right: 0 !important;
+      left: auto !important;
+    }
+
+    .dropdown-item,
+    .bootstrap-select &.inner li a {
+      font-size: $font-size-sm;
+      padding-top: .6rem;
+      padding-bottom: .6rem;
+      margin-top: 5px;
+      @include transitions($fast-transition-time, $transition-linear);
+
+      &:hover,
+      &:focus {
+        background-color: $opacity-gray-3;
+      }
+
+      &.disabled,
+      &:disabled {
+        color: $default-opacity;
+
+        &:hover,
+        &:focus {
+          background-color: transparent;
+          box-shadow: none;
+        }
+      }
+    }
+
+
+    .dropdown-divider {
+        background-color: $opacity-gray-5;
+    }
+
+    .dropdown-header:not([href]):not([tabindex]) {
+        color: $default-opacity;
+        font-size: $font-size-xs;
+        text-transform: uppercase;
+        font-weight: $font-weight-bold;
+    }
+
+    &.dropdown-primary {
+        @include dropdown-colors(darken($primary, 3%),$opacity-8,$white, $opacity-2);
+    }
+
+    &.dropdown-info {
+        @include dropdown-colors(darken($info, 3%),$opacity-8,$white, $opacity-2);
+    }
+
+    &.dropdown-danger {
+        @include dropdown-colors(darken($danger, 3%),$opacity-8,$white, $opacity-2);
+    }
+
+    &.dropdown-success {
+        @include dropdown-colors(darken($success, 3%),$opacity-8,$white, $opacity-2);
+    }
+
+    &.dropdown-warning {
+        @include dropdown-colors(darken($warning, 3%),$opacity-8,$white, $opacity-2);
+    }
+
+    .dropdown &,
+    .dropup:not(.bootstrap-select) &,
+    .bootstrap-select &:not(.inner),
+    &.bootstrap-datetimepicker-widget.bottom {
+        @include transform-translate-y-dropdown(-20px);
+        visibility: hidden;
+        display: block;
+        @include opacity(0);
+        top: 100% !important;
+    }
+
+    &.bootstrap-datetimepicker-widget.top {
+      @include transform-translate-y-dropdown(-20px);
+      visibility: hidden;
+      display: block;
+      @include opacity(0);
+    }
+
+    &.bootstrap-datetimepicker-widget.top,
+    &.bootstrap-datetimepicker-widget.bottom {
+        @include transform-translate-y-dropdown(-20px);
+    }
+
+    .bootstrap-select.dropup &:not(.inner){
+        @include transform-translate-y-dropdown(25px);
+    }
+
+    .dropup:not(.bootstrap-select) &{
+        @include transform-translate-y-dropdown(20px);
+        top: auto !important;
+        bottom: 100%;
+    }
+
+    .dropdown.show &,
+    .bootstrap-select.show &:not(.inner),
+    &.bootstrap-datetimepicker-widget.top.open,
+    &.bootstrap-datetimepicker-widget.bottom.open,
+    .dropup.show:not(.bootstrap-select) &,
+    .navbar .dropdown.show &{
+        @include opacity(1);
+        visibility: visible;
+        @include transform-translate-y-dropdown(1px);
+    }
+
+    &.bootstrap-datetimepicker-widget.top.open,
+    &.bootstrap-datetimepicker-widget.bottom.open{
+        @include transform-translate-y-dropdown(0px);
+    }
+
+    .dropup.show:not(.bootstrap-select) &{
+        @include transform-translate-y-dropdown(-2px);
+    }
+
+    &.dropdown-navbar{
+      left: -80px;
+      &:before, &:after{
+        left: auto;
+        right: 17px;
+      }
+    }
+
+
+}
+
+.btn{
+    cursor: pointer;
+
+    &.dropdown-toggle[data-toggle="dropdown"]{
+        padding:10px;
+        margin: 0;
+        margin-bottom: 5px;
+
+        &:after{
+          content: "";
+          margin-left: 5px;
+        }
+
+    }
+
+    span.bs-caret{
+      display: none;
+    }
+
+    &.btn-link{
+      &.dropdown-toggle{
+        height: 22px;
+        padding: 0;
+        margin-right: 5px;
+      }
+    }
+}
+
+.dropdown-toggle:after{
+
+  content: unset;
+
+}
+
+.btn:not(:disabled):not(.disabled).active:focus,
+ .btn:not(:disabled):not(.disabled):active:focus,
+ .show>.btn.dropdown-toggle:focus{
+   box-shadow: none;
+ }
+
+// Dropown: Sizes
+
+.dropdown-menu-sm {
+    min-width: 100px;
+    border: $border-radius-lg;
+}
+
+.dropdown-menu-lg {
+    min-width: 260px;
+    border-radius: $border-radius-lg;
+}
+
+.dropdown-menu-xl {
+    min-width: 450px;
+    border-radius: $border-radius-lg;
+}
+
+@include media-breakpoint-down(md){
+  .button-dropdown{
+      display: none;
+  }
+  .dropdown-toggle:after{
+      display: inline-block;
+      width: 0;
+      height: 0;
+      margin-left: .255em;
+      vertical-align: .255em;
+      content: "";
+      border-top: .3em solid;
+      border-right: .3em solid transparent;
+      border-bottom: 0;
+      border-left: .3em solid transparent;
+
+  }
+}
+
+
+@include media-breakpoint-up(lg){
+  .dropdown-menu .dropdown-item{
+    color: $dark-gray;
+  }
+}

APP/assets/sass/dashboard/custom/_fixed-plugin.scss

@@ -0,0 +1,335 @@
+.fixed-plugin{
+    position: fixed;
+    right: 0;
+    width: 64px;
+    background: rgba(0,0,0,.3);
+    z-index: 1031;
+    border-radius: 8px 0 0 8px;
+    text-align: center;
+    top: 130px;
+
+    li > a,
+    .badge{
+        transition: all .34s;
+        -webkit-transition: all .34s;
+        -moz-transition: all .34s;
+    }
+
+    .fa-cog{
+        color: $white;
+        padding: 10px;
+        border-radius: 0 0 6px 6px;
+        width: auto;
+    }
+
+    .dropdown-menu{
+        right: 80px;
+        left: auto !important;
+        top: -52px !important;
+        width: 290px;
+        border-radius: 0.1875rem;
+        padding: 0 10px;
+        background: linear-gradient($black, $black-states);
+    }
+
+    .dropdown .dropdown-menu .tim-icons{
+      top: 5px;
+    }
+
+    .dropdown-menu:after,
+    .dropdown-menu:before{
+        right: 10px;
+        margin-left: auto;
+        left: auto;
+    }
+
+    .fa-circle-thin{
+        color: $white;
+    }
+
+    .active .fa-circle-thin{
+        color: $active-blue;
+    }
+
+    .dropdown-menu > .active > a,
+    .dropdown-menu > .active > a:hover,
+    .dropdown-menu > .active > a:focus{
+        color: $active-gray;
+        text-align: center;
+    }
+
+    img{
+        border-radius: 0;
+        width: 100%;
+        height: 100px;
+        margin: 0 auto;
+    }
+
+    .dropdown-menu li > a:hover,
+    .dropdown-menu li > a:focus{
+        box-shadow: none;
+    }
+
+    .badge{
+        border: 2px solid $white;
+        border-radius: 50%;
+        cursor: pointer;
+        display: inline-block;
+        height: 23px;
+        margin-right: 5px;
+        position: relative;
+        width: 23px;
+    }
+
+    .badge.active,
+    .badge:hover{
+        border-color: $black-states;
+    }
+
+    .light-badge, .dark-badge{
+      margin:0;
+      border: 1px solid $info;
+      &:hover{
+        border: 1px solid $info;
+      }
+    }
+
+    .light-badge{
+      background: $white;
+      &:hover{
+        background: $white;
+      }
+    }
+
+    .dark-badge{
+      background: $black;
+      &:hover{
+        background: $black;
+      }
+    }
+
+    h5{
+      margin: 10px;
+    }
+
+    .dropdown-menu li{
+        display: block;
+        padding: 18px 2px;
+        width: 25%;
+        float: left;
+    }
+
+    li.adjustments-line,
+    li.header-title,
+    li.button-container{
+        width: 100%;
+        height: 50px;
+        min-height: inherit;
+    }
+
+    li.button-container{
+        height: auto;
+
+        div{
+            margin-bottom: 5px;
+        }
+    }
+
+    #sharrreTitle{
+        text-align: center;
+        padding: 10px 0;
+        height: 50px;
+    }
+
+    li.header-title{
+        color: $white;
+        height: 30px;
+        line-height: 25px;
+        font-size: 12px;
+        font-weight: 600;
+        text-align: center;
+        text-transform: uppercase;
+    }
+
+    .adjustments-line{
+
+        a{
+            color: transparent;
+
+            .badge-colors{
+                position: relative;
+                top: -2px;
+            }
+
+            a:hover,
+            a:focus{
+                color: transparent;
+            }
+        }
+
+        .togglebutton{
+            text-align: center;
+
+            .label-switch{
+              position: relative;
+              left: -10px;
+              font-size: $font-size-xs;
+              color: $white;
+
+              &.label-right{
+                left: 10px;
+              }
+            }
+
+            .toggle{
+                margin-right: 0;
+            }
+        }
+
+        .color-label{
+          position: relative;
+          top: -7px;
+          font-size: $font-size-xs;
+          color: $white;
+        }
+
+        .dropdown-menu > li.adjustments-line > a{
+              padding-right: 0;
+              padding-left: 0;
+              border-bottom: 1px solid #ddd;
+              border-radius: 0;
+              margin: 0;
+        }
+    }
+
+
+
+    .dropdown-menu{
+        > li{
+            & > a.img-holder{
+                  font-size: $font-paragraph;
+                  text-align: center;
+                  border-radius: 10px;
+                  background-color: $white;
+                  border: 3px solid $white;
+                  padding-left: 0;
+                  padding-right: 0;
+                  opacity: 1;
+                  cursor: pointer;
+                  display: block;
+                  max-height: 100px;
+                  overflow: hidden;
+                  padding: 0;
+
+                  img{
+                     margin-top: auto;
+                  }
+            }
+
+            a.switch-trigger:hover,
+            & > a.switch-trigger:focus{
+                background-color: transparent;
+            }
+
+            &:hover,
+            &:focus{
+                > a.img-holder{
+                    border-color: rgba(0, 187, 255, 0.53);;
+                }
+            }
+        }
+
+        > .active > a.img-holder,
+        > .active > a.img-holder{
+            border-color: $active-blue;
+            background-color: $white;
+        }
+
+    }
+
+    .btn-social{
+        width: 50%;
+        display: block;
+        width: 48%;
+        float: left;
+        font-weight: 600;
+    }
+
+    .btn-social{
+        i{
+            margin-right: 5px;
+        }
+
+        &:first-child{
+            margin-right: 2%;
+        }
+    }
+
+    .dropdown{
+        .dropdown-menu{
+             -webkit-transform: translateY(-15%);
+             -moz-transform: translateY(-15%);
+             -o-transform: translateY(-15%);
+             -ms-transform: translateY(-15%);
+             transform: translateY(-15%);
+             top: 27px;
+             opacity: 0;
+
+             transform-origin: 0 0;
+
+             &:before{
+                 border-bottom: .4em solid rgba(0, 0, 0, 0);
+                 border-left: .4em solid rgba(0,0,0,0.2);
+                 border-top: .4em solid rgba(0,0,0,0);
+                 right: -16px;
+                 top: 46px;
+             }
+
+             &:after{
+                 border-bottom: .4em solid rgba(0, 0, 0, 0);
+                 border-left: .4em solid $black;
+                 border-top: .4em solid rgba(0,0,0,0);
+                 right: -16px;
+             }
+
+             &:before,
+             &:after{
+                 content: "";
+                 display: inline-block;
+                 position: absolute;
+                 top: 74px;
+                 width: 16px;
+                 transform: translateY(-50%);
+                 -webkit-transform: translateY(-50%);
+                 -moz-transform: translateY(-50%);
+             }
+        }
+
+        &.show .dropdown-menu{
+             opacity: 1;
+
+             -webkit-transform: translateY(-13%);
+             -moz-transform: translateY(-13%);
+             -o-transform: translateY(-13%);
+             -ms-transform: translateY(-13%);
+             transform: translateY(-13%);
+
+             transform-origin: 0 0;
+        }
+    }
+
+    .bootstrap-switch{
+        margin:0;
+    }
+}
+
+@include media-breakpoint-down(xs){
+  .fixed-plugin {
+    top: 100px;
+  }
+
+  .fixed-plugin .dropdown-menu {
+    width: 225px;
+    top: -65px !important;
+  }
+}

APP/assets/sass/dashboard/custom/_footer.scss

@@ -0,0 +1,109 @@
+.footer{
+    padding: 24px 30px 24px 280px;
+
+    [class*="container-"] {
+      padding: 0;
+    }
+
+    .nav{
+        display: inline-block;
+        float: left;
+        margin-bottom: 0;
+        padding: 0;
+        list-style: none;
+    }
+
+    .nav-item{
+      display: inline-block;
+
+      &:first-child a {
+        padding-left: 0;
+      }
+    }
+
+    .nav-link {
+      color: $white;
+      padding: $padding-base-vertical;
+      font-size: $font-size-sm;
+      text-transform: uppercase;
+      text-decoration: none;
+
+      &:hover{
+          text-decoration: none;
+      }
+    }
+
+
+
+    .copyright{
+        font-size: $font-size-sm;
+        line-height: 1.8;
+        color: $white;
+    }
+
+    &:after{
+        display: table;
+        clear: both;
+        content: " ";
+    }
+}
+
+@include media-breakpoint-down(md){
+
+  .footer {
+    padding-left: 30px;
+    text-align: center;
+
+    .copyright {
+        text-align: right;
+    }
+  }
+
+}
+
+@include media-breakpoint-up(xl){
+  .footer {
+    .copyright {
+      float: right;
+      margin-top: 5px;
+    }
+  }
+}
+
+@include media-breakpoint-down(sm){
+  .footer {
+    text-align: center;
+      nav {
+        display: block;
+        margin-bottom: 5px;
+        float: none;
+      }
+
+      .copyright {
+        text-align: center;
+      }
+  }
+}
+
+@include media-breakpoint-down(sm){
+  .footer {
+    .copyright {
+      text-align: center;
+    }
+    .nav {
+      float: none;
+    }
+  }
+}
+
+@include media-breakpoint-between (md, lg){
+  .footer {
+    padding-left: 30px !important;
+    text-align: center;
+
+    .copyright {
+      float: right;
+      margin-top: 5px;
+    }
+  }
+}

APP/assets/sass/dashboard/custom/_forms.scss

@@ -0,0 +1,151 @@
+/* Form controls */
+@include form-control-placeholder(#6c757c, 1);
+
+.form-control{
+  border-color: lighten($black,5%);
+  border-radius: $border-radius-lg;
+  font-size: $font-size-sm;
+  @include transition-input-focus-color();
+
+
+  &:focus{
+    border-color: $primary;
+    background-color: $input-bg;
+    @include box-shadow(none);
+
+    & + .input-group-append .input-group-text,
+    & ~ .input-group-append .input-group-text,
+    & + .input-group-prepend .input-group-text,
+    & ~ .input-group-prepend .input-group-text{
+        border: 1px solid $primary;
+        border-left: none;
+        background-color: $transparent-bg;
+    }
+  }
+
+  .has-success &,
+  .has-error &,
+  .has-success &:focus,
+  .has-error &:focus{
+      @include box-shadow(none);
+  }
+
+  .has-danger &,
+  .has-success &{
+      &.form-control-success,
+      &.form-control-danger{
+          background-image: none;
+      }
+  }
+
+  & + .form-control-feedback{
+      border-radius: $border-radius-lg;
+      margin-top: -7px;
+      position: absolute;
+      right: 10px;
+      top: 50%;
+      vertical-align: middle;
+  }
+
+  .open &{
+      border-radius: $border-radius-lg $border-radius-lg 0 0;
+      border-bottom-color: $transparent-bg;
+  }
+
+  & + .input-group-append .input-group-text,
+  & + .input-group-prepend .input-group-text{
+      background-color: $white;
+  }
+
+}
+
+.has-success .input-group-append .input-group-text,
+.has-success .input-group-prepend .input-group-text,
+.has-success .form-control{
+    border-color: lighten($black,5%);
+}
+
+.has-success .form-control:focus,
+.has-success.input-group-focus .input-group-append .input-group-text,
+.has-success.input-group-focus .input-group-prepend .input-group-text{
+  border-color: darken($success, 10%);
+}
+
+.has-danger .form-control,
+.has-danger .input-group-append .input-group-text,
+.has-danger .input-group-prepend .input-group-text,
+.has-danger.input-group-focus .input-group-prepend .input-group-text,
+.has-danger.input-group-focus .input-group-append .input-group-text{
+    border-color: lighten($danger-states,5%);
+    color: $danger-states;
+    background-color: rgba(222,222,222, .1);
+
+    &:focus{
+        background-color: $transparent-bg;
+    }
+}
+
+.has-success,
+.has-danger{
+    &:after{
+        font-family: 'nucleo';
+        content: "\ea1b";
+        display: inline-block;
+        position: absolute;
+        right: 20px;
+        top: 13px;
+        color: $success;
+        font-size: 11px;
+    }
+
+    &.form-control-lg{
+      &:after{
+        font-size: 13px;
+        top: 24px;
+      }
+    }
+
+    &.has-label{
+      &:after{
+        top: 37px;
+      }
+    }
+
+
+    &.form-check:after{
+      display: none !important;
+    }
+
+    &.form-check .form-check-label{
+      color: $success;
+    }
+}
+
+.has-danger{
+  &:after{
+    content: "\ea48";
+    color: $danger-states;
+  }
+
+  &.form-check .form-check-label{
+    color: $danger-states;
+  }
+}
+
+.has-success.has-icon.form-group:after,
+.has-danger.has-icon.form-group:after {
+  display: none;
+}
+
+
+@include media-breakpoint-down(xs){
+  .form-horizontal .col-form-label,
+  .form-horizontal .label-on-right {
+    text-align: inherit;
+    padding-top: 0;
+    code {
+      padding: 0 10px;
+    }
+  }
+
+}

APP/assets/sass/dashboard/custom/_functions.scss

@@ -0,0 +1,23 @@
+// Retrieve color Sass maps
+
+@function section-color($key: "primary") {
+	@return map-get($section-colors, $key);
+}
+
+// Lines colors
+
+@function shapes-primary-color($key: "step-1-gradient-bg") {
+	@return map-get($shapes-primary-colors, $key);
+}
+
+@function shapes-default-color($key: "step-1-gradient-bg") {
+	@return map-get($shapes-default-colors, $key);
+}
+
+@function lines-light-color($key: "step-1-gradient-bg") {
+	@return map-get($shapes-light-colors, $key);
+}
+
+@function shapes-dark-color($key: "step-1-gradient-bg") {
+	@return map-get($shapes-dark-colors, $key);
+}

APP/assets/sass/dashboard/custom/_grid.scss

@@ -0,0 +1,5 @@
+@include media-breakpoint-up(xl) {
+	.container-lg {
+		max-width: 1160px;
+	}
+}

APP/assets/sass/dashboard/custom/_icons.scss

@@ -0,0 +1,92 @@
+.icon {
+	width: $icon-size;
+	height: $icon-size;
+
+	i, svg {
+		font-size: $icon-size - .75;
+	}
+}
+
+.icon + .icon-text {
+	padding-left: 1rem;
+	width: calc(100% - #{$icon-size-regular} - 1);
+}
+
+.icon-xl {
+	width: $icon-size-xl;
+	height: $icon-size-xl;
+
+	i, svg {
+		font-size: $icon-size-xl - .75;
+	}
+}
+
+.icon-xl + .icon-text {
+	width: calc(100% - #{$icon-size-xl} - 1);
+}
+
+.icon-lg {
+	width: $icon-size-lg;
+	height: $icon-size-lg;
+
+	i, svg {
+		font-size: $icon-size-lg - .75;
+	}
+}
+
+.icon-lg + .icon-text {
+	width: calc(100% - #{$icon-size-lg} - 1);
+}
+
+.icon-sm {
+	width: $icon-size-sm;
+	height: $icon-size-sm;
+
+	i, svg {
+		font-size: $icon-size-sm - .75;
+	}
+}
+
+.icon-sm + .icon-text {
+	width: calc(100% - #{$icon-size-sm} - 1);
+}
+
+
+// Icons included in shapes
+.icon-shape {
+	padding: 12px;
+	text-align: center;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	border-radius: 50%;
+
+
+	i, svg {
+		font-size: 1.25rem;
+	}
+
+	&.icon-lg {
+		i, svg {
+			font-size: 1.625rem;
+		}
+	}
+
+	&.icon-sm {
+		i, svg {
+			font-size: .875rem;
+		}
+	}
+
+	svg {
+		width: 30px;
+		height: 30px;
+	}
+
+}
+
+@each $color, $value in $theme-colors {
+	.icon-shape-#{$color} {
+		@include icon-shape-variant(theme-color($color));
+	}
+}

APP/assets/sass/dashboard/custom/_images.scss

@@ -0,0 +1,7 @@
+img{
+    max-width: 100%;
+    border-radius: $border-radius-sm;
+}
+.img-raised{
+    box-shadow: $box-shadow-raised;
+}

APP/assets/sass/dashboard/custom/_input-group.scss

@@ -0,0 +1,351 @@
+.form-group.has-danger .error,
+.input-group.has-danger .error {
+  color: $danger-states;
+}
+
+
+.form-group.has-success .error,
+.input-group.has-success .error {
+  color: $success;
+}
+
+@include form-control-lg-padding($padding-lg-vertical, $padding-input-horizontal);
+@include input-base-padding($padding-input-vertical, $padding-input-horizontal);
+
+.form-group.no-border,
+.input-group.no-border{
+    .form-control,
+    .form-control + .input-group-prepend .input-group-text,
+    .form-control + .input-group-append .input-group-text{
+
+        background-color: lighten($black,1%);
+        border: medium none;
+        &:focus,
+        &:active,
+        &:active{
+            border: medium none;
+            background-color: lighten($black,2%);
+        }
+    }
+
+    .form-control{
+        &:focus{
+            & + .input-group-prepend .input-group-text,
+            & + .input-group-append .input-group-text{
+                background-color: lighten($black,2%);
+            }
+        }
+    }
+
+    .input-group-prepend .input-group-text,
+    .input-group-append .input-group-text{
+        background-color: lighten($black,1%);;
+        border: none;
+    }
+}
+
+.has-error{
+    .form-control-feedback, .control-label{
+        color: $danger-states;
+    }
+}
+.has-success{
+    .form-control-feedback, .control-label{
+        color: $success;
+    }
+}
+
+.input-group-append .input-group-text,
+.input-group-prepend .input-group-text {
+    background-color: transparent;
+    border: 1px solid lighten($black,5%);
+    border-radius: $border-radius-lg;
+    color: $white;
+
+    & i{
+      opacity: .5;
+    }
+
+    @include transition-input-focus-color();
+
+    .has-danger.input-group-focus &{
+        background-color: $transparent-bg;
+    }
+
+    .has-success &{
+        background-color: $transparent-bg;
+    }
+    .has-danger .form-control:focus + &{
+        color: $danger-states;
+    }
+    .has-success .form-control:focus + &{
+        color: $success;
+    }
+
+    & + .form-control,
+    & ~ .form-control{
+        @include input-size($padding-base-vertical - 1, $padding-base-horizontal);
+        padding-left: 18px;
+    }
+
+    i{
+        width: 17px;
+    }
+}
+
+.input-group-prepend .input-group-text,
+.input-group-append .input-group-text {
+    background-color: transparent;
+    border: 1px solid lighten($black,5%);
+    border-radius: $border-radius-lg;
+    color: $white;
+    margin: 0;
+}
+
+.input-group-append .input-group-text{
+  border-left: none;
+}
+.input-group-prepend .input-group-text{
+  border-right: none;
+}
+
+.input-group-focus{
+    .input-group-prepend .input-group-text,
+    .input-group-append .input-group-text{
+        background-color: $white;
+        border-color: $primary;
+        background-color: $transparent-bg;
+        border-color: $primary;
+    }
+
+    &.no-border{
+        .input-group-prepend .input-group-text,
+        .input-group-append .input-group-text{
+            background-color: lighten($black,2%);
+        }
+    }
+}
+
+.input-group,
+.form-group{
+    margin-bottom: 10px;
+    position: relative;
+
+    .form-control-static{
+        margin-top: 9px;
+    }
+}
+
+.input-group[disabled]{
+    .input-group-prepend .input-group-text,
+    .input-group-append .input-group-text{
+        background-color: $light-gray;
+    }
+}
+
+.input-group .form-control:not(:first-child), .input-group-btn:not(:first-child){
+    border-radius: $border-radius-lg;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    border-left: 0 none;
+}
+
+.input-group .form-control:not(:last-child), .input-group-btn:not(:last-child){
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  border-right: 0;
+}
+
+.input-group .form-control:first-child,
+.input-group-btn:first-child > .dropdown-toggle,
+.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle) {
+    border-right: 0 none;
+}
+.input-group .form-control:last-child,
+.input-group-btn:last-child > .dropdown-toggle,
+.input-group-btn:first-child > .btn:not(:first-child) {
+    border-left: 0 none;
+}
+.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
+    background-color: $black-states;
+    color: $default;
+    cursor: not-allowed;
+}
+
+.input-group-btn .btn{
+    border-width: $border-thin;
+    padding: $padding-btn-vertical  $padding-base-horizontal;
+}
+.input-group-btn .btn-default:not(.btn-fill){
+    border-color: $medium-gray;
+}
+
+.input-group-btn:last-child > .btn{
+    margin-left: 0;
+}
+
+textarea.form-control{
+    max-width: 100%;
+    max-height: 80px;
+    padding: 10px 10px 0 0;
+    resize: none;
+    border: none;
+    border-bottom: 1px solid lighten($black,5%);
+    border-radius: 0;
+    line-height: 2;
+
+    &:focus,
+    &:active{
+        border-left: none;
+        border-top: none;
+        border-right: none;
+    }
+}
+
+.has-success,
+.has-danger{
+
+    &.form-group .form-control,
+    &.form-group.no-border .form-control{
+        padding-right: $input-padding-horizontal + 21;
+    }
+}
+
+.form.form-newsletter .form-group{
+    float: left;
+    width: 78%;
+    margin-right: 2%;
+    margin-top: 9px;
+}
+
+.input-group .input-group-btn{
+    padding: 0 12px;
+}
+
+// Input files - hide actual input - requires specific markup in the sample.
+.form-group input[type=file] {
+  opacity: 0;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 100;
+}
+
+.form-text{
+    font-size: $font-size-sm;
+    color: rgba($white,0.8);
+}
+
+.form-control-lg{
+    padding: 0;
+    font-size: inherit;
+    line-height: 0;
+    border-radius: 0;
+
+    .form-control {
+      height: calc(2.875rem + 2px);
+    }
+}
+
+.form-horizontal{
+    .col-form-label,
+    .label-on-right{
+        padding: 10px 5px 0 15px;
+        text-align: right;
+        max-width: 180px;
+    }
+
+    .checkbox-radios{
+        margin-bottom: 15px;
+
+        .form-check:first-child{
+           margin-top: 8px;
+       }
+    }
+
+    .label-on-right{
+        text-align: left;
+        padding: 10px 15px 0 5px;
+    }
+
+    .form-check-inline{
+        margin-top: 6px;
+        .form-check-label{
+          margin-right: 1.5rem;
+        }
+    }
+}
+
+.search-bar{
+    margin-left: $margin-lg-vertical;
+      .btn{
+        margin: 0;
+      }
+       &.input-group{
+           border-radius: 25px;
+           z-index: 4;
+           margin-bottom: 0;
+           height: 43px;
+           .input-group-addon{
+              padding: 10px;
+               background: transparent;
+               border: none;
+               color: rgba(255, 255, 255, 0.7);
+
+           }
+
+           i{
+               font-size: 20px;
+               color: white;
+               margin-top: 0 !important;
+               transition: all .3s;
+           }
+           i:hover {
+             color: $primary;
+           }
+           input{
+               background: transparent;
+               border:none !important;
+               border-radius: 0;
+               padding: 12px !important;
+               font-size: 12px;
+               opacity: 0.5;
+               &:focus{
+                   background: transparent;
+               }
+           }
+           .form-control{
+               opacity: 1;
+               color: $white;
+               &::placeholder{
+                 color: white;
+               }
+           }
+       }
+   }
+
+   .modal-search .modal-dialog{
+     max-width: 1000px;
+     margin: 20px auto;
+     .form-control{
+       border: none;
+       color: $black;
+       &::placeholder{
+         color: $black;
+       }
+     }
+   }
+
+.input-group-prepend{
+  margin-right: 0;
+}
+.input-group-prepend,
+.input-group-append {
+  .tim-icons {
+    font-size: $font-paragraph;
+  }
+}

APP/assets/sass/dashboard/custom/_misc.scss

@@ -0,0 +1,215 @@
+
+/* Animations */
+.nav-pills .nav-link,
+.navbar,
+.nav-tabs .nav-link,
+.sidebar .nav a,
+.sidebar .nav a i,
+.sidebar .nav p,
+.navbar-collapse .navbar-nav .nav-link,
+.animation-transition-general,
+.tag,
+.tag [data-role="remove"],
+.animation-transition-general{
+    @include transitions($general-transition-time, $transition-ease);
+}
+
+//transition for dropdown caret
+.bootstrap-switch-label:before,
+.caret{
+    @include transitions($fast-transition-time, $transition-ease);
+}
+
+.dropdown-toggle[aria-expanded="true"]:after,
+a[data-toggle="collapse"][aria-expanded="true"] .caret,
+.card-collapse .card a[data-toggle="collapse"][aria-expanded="true"] i,
+.card-collapse .card a[data-toggle="collapse"].expanded i{
+    @include rotate-180();
+}
+
+.caret{
+  width: 0;
+  height: 0;
+  vertical-align: middle;
+  border-top: 4px dashed;
+  border-right: 4px solid transparent;
+  border-left: 4px solid transparent;
+  margin-top: -5px;
+  position: absolute;
+  top: 30px;
+  margin-left: 5px;
+}
+
+.pull-left{
+  float: left;
+}
+.pull-right{
+  float: right;
+}
+
+
+// card user profile page
+
+.card {
+  form {
+    label + .form-control {
+      margin-bottom: 20px;
+    }
+  }
+}
+
+// offline documentation
+
+.offline-doc {
+  .page-header:before {
+    background: rgba(0,0,0,.75);
+  }
+
+  .navbar {
+    border: none;
+  }
+
+  .footer {
+    position: absolute;
+    width: 100%;
+    background: transparent;
+    bottom: 0;
+    color: $white;
+    padding: 0.9375rem 0;
+  }
+}
+
+
+.card {
+  .map-title {
+    color: $white;
+  }
+
+    .table {
+      tr td {
+        p.title {
+          padding-top: 7px;
+          margin-bottom: 0;
+        }
+      }
+    }
+
+
+  &.card-chart {
+    .gmnoprint,
+    .gm-style-cc {
+      display: none !important;
+    }
+  }
+}
+
+// documentation
+
+.bd-docs {
+
+  h1,h2,h3,h4,h5,h6,p,ul li,ol li{
+    color:#2c2c2c;
+  }
+
+
+  .bd-content>table>thead>tr>th {
+    color: $black;
+
+  }
+
+  .blockquote, .blockquote p, .card p{
+    color: rgba($white,0.8);
+  }
+  .bd-example {
+    background: linear-gradient(#1e1e2f,#1e1e24);
+
+  }
+
+  .navbar {
+    border-top: none;
+
+    .navbar-nav .nav-link {
+      color: rgba(255,255,255,.8) !important;
+    }
+  }
+
+  .bd-example {
+
+    .btn{
+      margin: 4px 0;
+    }
+    .btn .badge {
+      display: inline-block;
+    }
+
+    .tim-icons{
+      color: $white;
+    }
+
+    .popover .popover-header {
+    color: hsla(0,0%,71%,.6);
+  }
+
+
+    .popover-body {
+      p {
+        color: $gray-900;
+      }
+    }
+
+    &.tooltip-demo p{
+      color: rgba($white,.8);
+    }
+  }
+
+  .card.card-body,
+  .card .card-body {
+    color: hsla(0,0%,100%,.8);
+  }
+
+  label,
+  .form-check {
+    color: hsla(0,0%,100%,.8);
+  }
+
+  .form-check + .btn {
+    margin-top: 20px;
+  }
+
+  .bd-example,
+  table {
+    thead th {
+      color: hsla(0,0%,100%,.8);
+    }
+
+    h1, h2, h3, h4, h5, h6,
+    .h1, .h2, .h3, .h4, .h5, .h6 {
+      color: hsla(0,0%,100%,.8);
+    }
+
+    .datepicker{
+      thead th, table thead th,.tim-icons{
+        color: $primary;
+      }
+
+    }
+
+    .picker-switch .tim-icons{
+      color: $primary;
+    }
+  }
+
+  .footer {
+    .container-fluid > nav {
+      display: inline-block;
+    }
+  }
+}
+.modal.show .modal-dialog {
+  -webkit-transform: translate(0,30%);
+  transform: translate(0,30%);
+}
+
+code {
+  color: $pink;
+}

APP/assets/sass/dashboard/custom/_mixins.scss

@@ -0,0 +1,14 @@
+@import "mixins/alert.scss";
+@import "mixins/badges.scss";
+@import "mixins/background-variant.scss";
+@import "mixins/buttons.scss";
+@import "mixins/forms.scss";
+@import "mixins/icon.scss";
+@import "mixins/modals.scss";
+@import "mixins/popovers.scss";
+@import "mixins/page-header.scss";
+@import "mixins/vendor-prefixes.scss";
+@import "mixins/opacity.scss";
+@import "mixins/modals.scss";
+@import "mixins/inputs.scss";
+@import "mixins/dropdown.scss";

APP/assets/sass/dashboard/custom/_modal.scss

@@ -0,0 +1,246 @@
+// Modals
+// Design element Dialogs
+// --------------------------------------------------
+.modal-content {
+  border: 0;
+
+  // Modal header
+  // Top section of the modal w/ title and dismiss
+
+  .modal-header {
+    border-bottom: none;
+
+    & button {
+        position: absolute;
+        right: 27px;
+        top: 24px;
+        outline: 0;
+        padding: 1rem;
+        margin: -1rem -1rem -1rem auto;
+    }
+    .title{
+        color: $black;
+        margin-top: 5px;
+        margin-bottom: 0;
+    }
+
+    .modal-title{
+      color: $black;
+    }
+
+    i.tim-icons {
+      font-size: 16px;
+    }
+  }
+
+
+  // Modal body
+  // Where all modal content resides (sibling of .modal-header and .modal-footer)
+  .modal-body {
+    line-height: 1.9;
+
+    p{
+      color: $black;
+    }
+  }
+  // Footer (for actions)
+  .modal-footer {
+    border-top: 0;
+    -webkit-justify-content: space-between; /* Safari 6.1+ */
+    justify-content: space-between;
+
+    button {
+      margin: 0;
+      padding-left: 16px;
+      padding-right: 16px;
+      width: auto;
+
+      &.pull-left {
+        padding-left: 5px;
+        padding-right: 5px;
+        position: relative;
+        left: -5px;
+      }
+    }
+
+  }
+  .modal-body + .modal-footer {
+    padding-top: 0;
+  }
+}
+.modal-backdrop {
+  background: rgba(0,0,0,0.3);
+}
+
+.modal{
+
+    &.modal-mini{
+        p{
+            text-align: center;
+        }
+
+        .modal-dialog{
+            max-width: 255px;
+            margin: 0 auto;
+
+
+        }
+
+        &.show .modal-dialog{
+            -webkit-transform: translate(0,30%);
+            -o-transform: translate(0,30%);
+            transform: translate(0,30%);
+        }
+
+
+        .modal-footer{
+            button{
+                text-transform: uppercase;
+                color: $white;
+
+                &:first-child{
+                    opacity: .5;
+                }
+            }
+        }
+    }
+
+    .modal-profile{
+        width: 70px;
+        height: 70px;
+        background-color: $white;
+        border-radius: 50%;
+        text-align: center;
+        line-height: 5.7;
+        box-shadow: 0px 5px 50px 0px rgba(0, 0, 0, 0.3);
+
+        i{
+            color: $primary;
+            font-size: 21px;
+            margin-top: -10px;
+        }
+
+        &[class*="modal-profile-"]{
+            i{
+                color: $white;
+            }
+        }
+
+        &.modal-profile-primary{
+            background-color: $primary;
+        }
+
+        &.modal-profile-danger{
+            background-color: $danger;
+        }
+
+        &.modal-profile-warning{
+            background-color: $warning;
+        }
+        &.modal-profile-success{
+            background-color: $success;
+        }
+
+        &.modal-profile-info{
+            background-color: $info;
+        }
+    }
+
+    &.modal-default{
+        @include modal-colors($white, $black);
+    }
+
+    &.modal-primary{
+        @include modal-colors($primary, $white);
+    }
+
+    &.modal-danger{
+        @include modal-colors($danger, $white);
+    }
+
+    &.modal-warning{
+        @include modal-colors($warning, $white);
+    }
+
+    &.modal-success{
+        @include modal-colors($success, $white);
+    }
+
+    &.modal-info{
+        @include modal-colors($info, $white);
+    }
+
+    .modal-header .close{
+        color: $danger;
+        text-shadow: none;
+
+        &:hover,
+        &:focus{
+            opacity: 1;
+        }
+    }
+
+    &.modal-black{
+      .modal-content{
+        background: linear-gradient(to bottom, $black 0%, $black-states 100%);
+        color: rgba($white, 0.8);
+        .modal-header{
+          .modal-title, .title{
+            color: rgba($white, 0.9);
+          }
+        }
+        .modal-body{
+          p{
+            color: rgba($white, 0.8);
+          }
+        }
+      }
+      h1, h2, h3, h4, h5, h6, p{
+        color: $white;
+      }
+    }
+}
+
+.modal-search{
+  .modal-dialog{
+    margin: 20px auto;
+    max-width: 650px;
+    input{
+      border: none;
+      font-size: 17px;
+      font-weight: 100;
+    }
+    span{
+      font-size: 35px;
+      color: $search-gray;
+    }
+  }
+  .modal-content{
+    .modal-header{
+      padding: 24px;
+    }
+  }
+
+  .modal-header .close{
+    color: $dark-background;
+    top: 30px !important;
+  }
+
+  .modal-footer{
+    border-top: 2px solid #f9f9f9;
+    margin: 0px 25px 20px;
+  }
+}
+
+
+@include media-breakpoint-down(xs) {
+  .modal {
+    &.show .modal-dialog {
+      transform: translateY(10%);
+
+      &.modal-notice {
+        transform: translateY(3%);
+      }
+    }
+  }
+}

APP/assets/sass/dashboard/custom/_nav.scss

@@ -0,0 +1,85 @@
+.nav-link {
+    color: $nav-link-color;
+
+    &:hover {
+        color: theme-color("primary");
+    }
+}
+
+// Pills
+
+.nav-pills {
+
+    .nav-link {
+    	  padding: $nav-pills-padding-y $nav-pills-padding-x;
+        color: $nav-pills-link-color;
+        font-weight: 500;
+        background-color: $nav-pills-bg;
+        transition: $transition-base;
+
+        &:hover {
+        	color: $nav-pills-link-hover-color;
+        }
+    }
+
+    .nav-link.active,
+    .show > .nav-link {
+        color: $nav-pills-link-active-color;
+        background-color: $nav-pills-link-active-bg;
+    }
+
+
+}
+
+@include media-breakpoint-down(sm) {
+    .nav-pills:not(.nav-pills-circle) {
+        .nav-item {
+            padding-right: 0;
+        }
+    }
+}
+
+// Nav pills circle
+
+.nav-pills-circle {
+    .nav-link {
+        text-align: center;
+        height: 60px;
+        width: 60px;
+        padding: 0;
+        line-height: 60px;
+        border-radius: 50%;
+    }
+
+    .nav-link-icon {
+        i, svg {
+            font-size: 1rem;
+        }
+    }
+}
+
+// Nav wrapper
+.nav-wrapper {
+    padding: 1rem 0;
+    @include border-top-radius($card-border-radius);
+
+    + .card {
+        @include border-top-radius(0);
+        @include border-bottom-radius($card-border-radius);
+    }
+}
+
+
+@include media-breakpoint-down(sm) {
+  .nav-tabs {
+    display: inline-block;
+    width: 100%;
+    padding-left: 100px;
+    padding-right: 100px;
+    text-align: center;
+
+    .nav-item > .nav-link {
+        margin-bottom: 5px;
+    }
+  }
+}

APP/assets/sass/dashboard/custom/_navbar.scss

@@ -0,0 +1,464 @@
+.navbar {
+  width: 100%;
+  z-index: 1050;
+  background: $navbar-color;
+
+  .photo {
+    display: inline-block;
+    height: 30px;
+    width: 30px;
+    border-radius: 50%;
+    vertical-align: middle;
+    overflow: hidden;
+      img{
+        width: 100%;
+      }
+  }
+
+  .navbar-wrapper {
+    display: flex;
+    align-items: center;
+  }
+
+  .navbar-text {
+    color: $white;
+  }
+
+  .btn{
+    margin: 0 5px 0 10px;
+  }
+
+  &.navbar-absolute{
+    position: absolute;
+    z-index: 1050;
+  }
+
+
+  &.navbar-transparent{
+    background: transparent !important;
+  }
+
+  &.bg-white{
+    .navbar-nav{
+      .search-bar.input-group{
+        i{
+          color: $black;
+        }
+        i:hover {
+          color: $primary;
+        }
+      }
+
+      .search-bar.input-group .form-control{
+        background: rgba($black,0.1);
+        border-radius: 4px;
+      }
+
+      a.nav-link{
+        color: $black !important;
+        p{
+          color: $black;
+        }
+      }
+
+    }
+
+    .navbar-text, .navbar-brand{
+      color: $black;
+    }
+
+    .form-control {
+      color: $black !important;
+    }
+
+    .form-control::placeholder {
+      color: $dark-gray !important;
+    }
+
+  }
+
+  &.bg-dark {
+    background: $black !important;
+  }
+
+  &.bg-primary {
+    background-color: $primary !important;
+  }
+
+  &.bg-warning {
+    background-color: $warning !important;
+  }
+
+  &.bg-info {
+    background-color: $info !important;
+  }
+
+  &.bg-success {
+    background-color: darken($success, 10%) !important;
+  }
+
+  &.bg-danger {
+    background-color: $danger !important;
+  }
+
+  .navbar-brand {
+    position: fixed;
+    padding-top: .3125rem;
+    padding-bottom: .3125rem;
+    color: $white;
+    margin-left: 17px;
+    text-transform: uppercase;
+    font-size: $font-paragraph;
+  }
+
+  .navbar-toggle button:focus, .navbar-toggler{
+    outline: none;
+  }
+
+}
+
+.notification {
+  background: $danger;
+	color: $white;
+	border-radius: $border-radius-xl;
+	height: 6px;
+	width: 6px;
+	position: absolute;
+	text-align: center;
+	font-size: 12px;
+	font-weight: 800;
+  top: 10px;
+  right: 10px;
+	border: 1px solid $danger;
+}
+
+.navbar-nav li{
+  padding: 0 10px;
+  a{
+    color: $white;
+  }
+  i{
+    vertical-align: middle;
+    font-size: 20px;
+  }
+}
+
+@include media-breakpoint-down(md){
+  .navbar {
+    top: -70px;
+  }
+
+  .navbar{
+      .container-fluid{
+          padding-right: 15px;
+          padding-left: 15px;
+      }
+
+      .navbar-collapse{
+        .input-group{
+          margin: 0;
+          margin-top: 5px;
+        }
+      }
+
+      .navbar-nav{
+
+        .btn{
+          margin-left: -3px;
+          display: flex;
+
+          i {
+            margin-right: 12px;
+          }
+
+          span {
+            margin: 0;
+            text-transform: uppercase;
+            font-weight: 300;
+
+            &,
+            &:hover,
+            &:focus,
+            &:active,
+            &:active:focus {
+              color: $black !important;
+            }
+          }
+        }
+
+          a.nav-link{
+            i{
+              opacity: 1;
+              margin-left: 4px;
+              margin-right: 5px;
+            }
+            p{
+              display: inline-block;
+              text-transform: uppercase;
+              margin-left: 7px;
+            }
+          }
+
+          .modal-search .modal-dialog{
+            padding: 0 40px;
+          }
+          .dropdown{
+            margin: 5px 0;
+            .nav-link{
+              padding-bottom: 0;
+            }
+            .dropdown-menu{
+              .dropdown-item{
+                margin-top: 0;
+                padding-left: 24px;
+              }
+            }
+          }
+      }
+
+      .dropdown.show .dropdown-menu{
+          display: block;
+
+      }
+
+      .dropdown .dropdown-menu{
+          display: none;
+          li a{
+            color: $black;
+          }
+      }
+
+      .dropdown.show .dropdown-menu,
+      .dropdown .dropdown-menu{
+          background-color: transparent;
+          border: 0;
+          transition: none;
+          -webkit-box-shadow: none;
+          box-shadow: none;
+          width: auto;
+          margin: 0px 1rem;
+          padding-top: 0;
+          margin-top: 0px;
+
+          &:before{
+              display: none;
+          }
+      }
+
+      .dropdown-menu .dropdown-item:focus,
+      .dropdown-menu .dropdown-item:hover{
+          color: $white;
+      }
+
+      &.bg-white .dropdown-menu .dropdown-item:focus,
+      &.bg-white .dropdown-menu .dropdown-item:hover{
+          color: $default;
+      }
+
+      .navbar-toggler-bar{
+          display: block;
+          position: relative;
+          width: 22px;
+          height: 1px;
+          border-radius: 1px;
+          background: $white;
+
+          &.navbar-kebab{
+            height: 4px;
+            width: 4px;
+            margin-bottom: 3px;
+            border-radius: 50%;
+          }
+
+          & + .navbar-toggler-bar{
+              margin-top: 7px;
+          }
+
+          & + .navbar-toggler-bar.navbar-kebab{
+              margin-top: 0px;
+          }
+
+          &.bar2{
+              width: 17px;
+              transition: width .2s linear;
+          }
+      }
+
+      &.bg-white:not(.navbar-transparent) .navbar-toggler-bar{
+          background-color: $default;
+      }
+
+      & .toggled .navbar-toggler-bar{
+          width: 24px;
+      }
+  }
+
+  .bar1,
+  .bar2,
+  .bar3 {
+    outline: 1px solid transparent;
+  }
+  .bar1 {
+    top: 0px;
+    @include bar-animation($topbar-back);
+  }
+  .bar2 {
+    opacity: 1;
+  }
+  .bar3 {
+    bottom: 0px;
+    @include bar-animation($bottombar-back);
+  }
+  .toggled .bar1 {
+    top: 6px;
+    @include bar-animation($topbar-x);
+  }
+  .toggled .bar2 {
+    opacity: 0;
+  }
+  .toggled .bar3 {
+    bottom: 9px;
+    @include bar-animation($bottombar-x);
+  }
+
+  @include topbar-x-rotation();
+  @include topbar-back-rotation();
+  @include bottombar-x-rotation();
+  @include bottombar-back-rotation();
+
+  @-webkit-keyframes fadeIn {
+    0% {opacity: 0;}
+    100% {opacity: 1;}
+  }
+  @-moz-keyframes fadeIn {
+    0% {opacity: 0;}
+    100% {opacity: 1;}
+  }
+  @keyframes fadeIn {
+    0% {opacity: 0;}
+    100% {opacity: 1;}
+  }
+
+  .navbar-nav{
+      .nav-link{
+          i.fa,
+          i.tim-icons{
+              opacity: .5;
+          }
+      }
+  }
+
+}
+
+@include media-breakpoint-up(lg) {
+  .navbar-collapse {
+      background: none !important;
+  }
+
+  .navbar .navbar-toggle {
+      display: none;
+
+  }
+
+  .navbar-nav {
+      .nav-link {
+          &.profile-photo {
+              padding: 0;
+              margin: 7px $padding-base-horizontal;
+          }
+      }
+  }
+
+  .navbar {
+    .caret {
+      position: absolute;
+      left: 80%;
+      top: 55%;
+      margin-left: 0;
+    }
+  }
+
+  .navbar-expand-lg .navbar-nav .nav-link {
+    padding-right: $list-inline-padding;
+    padding-left: $list-inline-padding;
+  }
+
+}
+
+@include media-breakpoint-down(xs) {
+  .navbar[class*='navbar-toggleable-'] .container {
+    margin-left: 0;
+    margin-right: 0;
+  }
+
+}
+
+@include media-breakpoint-between (md, lg){
+  .bar1,
+  .bar2,
+  .bar3 {
+    outline: 1px solid transparent;
+  }
+  .bar1 {
+    top: 0px;
+    @include bar-animation($topbar-back);
+  }
+  .bar2 {
+    opacity: 1;
+  }
+  .bar3 {
+    bottom: 0px;
+    @include bar-animation($bottombar-back);
+  }
+  .toggled .bar1 {
+    top: 7px;
+    @include bar-animation($topbar-x);
+  }
+  .toggled .bar2 {
+    opacity: 0;
+  }
+  .toggled .bar3 {
+    bottom: 9px;
+    @include bar-animation($bottombar-x);
+  }
+
+  @include topbar-x-rotation();
+  @include topbar-back-rotation();
+  @include bottombar-x-rotation();
+  @include bottombar-back-rotation();
+
+  @-webkit-keyframes fadeIn {
+    0% {opacity: 0;}
+    100% {opacity: 1;}
+  }
+  @-moz-keyframes fadeIn {
+    0% {opacity: 0;}
+    100% {opacity: 1;}
+  }
+  @keyframes fadeIn {
+    0% {opacity: 0;}
+    100% {opacity: 1;}
+  }
+
+  .navbar .navbar-toggler-bar.bar2 {
+    width: 17px;
+    transition: width .2s linear;
+}
+
+  .navbar .navbar-toggler-bar {
+    display: block;
+    position: relative !important;
+    width: 22px;
+    height: 1px;
+    border-radius: 1px;
+    background: $white;
+  }
+  .navbar .navbar-toggler-bar+.navbar-toggler-bar {
+    margin-top: 7px;
+  }
+
+  .navbar .navbar-toggle .navbar-toggler{
+    display: block;
+  }
+
+}

APP/assets/sass/dashboard/custom/_popover.scss

@@ -0,0 +1,14 @@
+.popover {
+  border: 0;
+}
+
+.popover-header {
+	font-weight: $font-weight-bold;
+}
+
+// Alternative colors
+@each $color, $value in $theme-colors {
+    .popover-#{$color} {
+        @include popover-variant($value);
+    }
+}

APP/assets/sass/dashboard/custom/_progress.scss

@@ -0,0 +1,104 @@
+// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
+.progress-container{
+    position: relative;
+
+    &.progress-sm {
+      margin-top: 10px;
+
+      .progress {
+        .progress-value{
+          position: absolute;
+          top: -3px;
+          left: -27px;
+          color: $white;
+          font-size: $font-size-xs;
+        }
+      }
+    }
+
+    & + .progress-container,
+    & ~ .progress-container{
+        margin-top: $margin-base-vertical;
+    }
+    .progress-badge{
+        color: $white;
+        font-size: $font-size-sm;
+        text-transform: uppercase;
+
+        &.float-left{
+          margin-right: 20px;
+        }
+
+    }
+
+    .progress {
+      margin-bottom: 10px;
+      box-shadow: 0px 0px 0px 3px rgba(0, 0, 0, 0.3);
+
+        .progress-bar {
+          border-radius:$border-radius-xl;
+          box-shadow: none;
+          background: $default;
+
+          .progress-value{
+            position: absolute;
+            top: 2px;
+            right: 0;
+            color: $white;
+            text-align: right;
+            font-size: $font-size-xs;
+          }
+        }
+
+        &.progress-bar-sm{
+          height: 3px;
+        }
+    }
+
+    &.progress-neutral{
+        .progress{
+            background: rgba(255, 255, 255, .3);
+        }
+
+        .progress-bar{
+            background: $white;
+        }
+    }
+
+    &.progress-primary{
+      .progress-bar{
+        @include diagonal-gradient($primary-states, $primary);
+      }
+    }
+
+    &.progress-info{
+      .progress-bar{
+        @include diagonal-gradient($info-states, $info);
+      }
+    }
+
+    &.progress-success{
+      .progress-bar{
+        @include diagonal-gradient($success-states, $success);
+      }
+    }
+
+    &.progress-warning{
+      .progress-bar{
+        @include diagonal-gradient($warning-states, $warning);
+      }
+    }
+
+    &.progress-danger{
+      .progress-bar{
+        @include diagonal-gradient($danger-states, $danger);
+      }
+    }
+}
+
+.card-chart {
+  .progress-container+.progress-container,
+  .progress-container~.progress-container {
+    margin-top: 25px;
+  }
+}

APP/assets/sass/dashboard/custom/_reboot.scss

@@ -0,0 +1,18 @@
+body {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+}
+
+iframe {
+    border: 0;
+}
+
+figcaption,
+figure,
+main {
+    display: block;
+}
+
+main {
+	overflow: hidden;
+}

APP/assets/sass/dashboard/custom/_rtl.scss

@@ -0,0 +1,258 @@
+.rtl {
+  .sidebar,
+  .bootstrap-navbar {
+    right: 0;
+    left: auto;
+    margin-right: 20px;
+    margin-left: 0;
+
+    .nav{
+        i{
+          float: right;
+          margin-left: 15px;
+          margin-right: 0;
+        }
+
+        p{
+          margin-right: 45px;
+          text-align: right;
+        }
+
+        .caret{
+          left: 11px;
+          right: auto;
+        }
+    }
+
+    .logo{
+        a.logo-mini{
+          float: right;
+          margin-right: 20px;
+          margin-left: 10px;
+        }
+
+        .simple-text{
+          text-align: right;
+        }
+    }
+
+
+    .sidebar-wrapper > .nav [data-toggle="collapse"] ~ div > ul > li > a .sidebar-normal,
+    .sidebar-wrapper .user .info [data-toggle="collapse"] ~ div > ul > li > a .sidebar-normal{
+      text-align: right;
+    }
+
+    &:before{
+      right: 30px;
+      left: auto;
+    }
+  }
+
+  .navbar{
+    .navbar-brand{
+      margin-right: 0px;
+    }
+    .dropdown-menu{
+      right: auto;
+      left: 0;
+    }
+  }
+
+  .main-panel{
+    position: fixed;
+    height: 100%;
+    overflow-y: scroll;
+    overflow-x: hidden;
+  }
+
+  .main-panel .content{
+    padding: 80px 280px 30px 30px;
+  }
+
+  .dropdown-toggle:after{
+    margin-right: .255em;
+    margin-left: 0;
+  }
+
+  .dropdown-menu.dropdown-menu-right.dropdown-navbar{
+    right: -220px !important;
+    left: auto;
+
+    &:before{
+      right: auto;
+      left: 35px;
+    }
+  }
+
+  .notification{
+    left: 40px;
+    right: auto;
+  }
+
+  .dropdown-menu{
+    right: auto;
+    left: 0;
+  }
+
+  .navbar-minimize-fixed{
+    margin-right: 38px;
+    margin-left: auto;
+  }
+
+  .minimize-sidebar{
+    float: right;
+  }
+
+  .alert{
+    left: 0;
+    margin-left: 0;
+    margin-right: 0;
+      button.close{
+        left: 10px !important;
+        right: auto !important;
+      }
+
+      span[data-notify="icon"]{
+        right: 15px;
+        left: auto;
+      }
+
+
+
+      &.alert-with-icon{
+        padding-right: 65px;
+        padding-left: 15px;
+      }
+
+      &.alert-with-icon i[data-notify="icon"]{
+        right: 15px;
+        left: auto;
+      }
+  }
+
+  .search-bar{
+    margin-left: 0;
+  }
+
+  .modal-search .modal-header .close{
+    margin-right: auto;
+    left: 10px;
+  }
+
+  .rtl .footer{
+    padding: 24px 30px !important;
+  }
+
+  .ps__rail-y {
+    right: auto !important;
+    left: 0;
+  }
+
+  .fixed-plugin .dropdown-menu{
+    right: 80px;
+  }
+}
+
+
+
+@include media-breakpoint-up(xl) {
+  .rtl{
+
+    .navbar-minimize button {
+      margin-right: -5px;
+    }
+
+    .footer {
+      padding: 24px 300px 24px 30px;
+    }
+  }
+}
+
+@include media-breakpoint-down(lg) {
+
+
+  .rtl {
+    .sidebar {
+      @include transform-translate-x(260px);
+    }
+
+    .main-panel {
+      float: right;
+      right: 0;
+      left: auto;
+      @include transform-translate-x(0px);
+    }
+  }
+
+  .rtl .sidebar {
+    margin-right: 0;
+  }
+
+  .rtl .main-panel .content{
+    padding-right: 50px;
+  }
+}
+
+@include media-breakpoint-down(md) {
+    .rtl .main-panel .content {
+      padding-right: 50px;
+    }
+
+    .rtl #bodyClick {
+      right: 260px;
+      left: auto;
+    }
+
+    .rtl .navbar .navbar-toggle .navbar-toggler {
+        display: block;
+        margin-right: 20px;
+    }
+
+    .rtl .navbar {
+      .navbar-nav {
+        padding-right: 0;
+        a.nav-link {
+          text-align: right;
+          p{
+            margin-right: 7px;
+          }
+        }
+
+        .btn {
+          margin-right: 0;
+          padding: 0;
+          i{
+            margin-left: 4px;
+            margin-right: 5px;
+          }
+        }
+
+        .search-bar span{
+          margin-right: 10px;
+        }
+      }
+    }
+    .nav-open {
+      body {
+        position: fixed;
+      }
+    }
+  }
+
+
+@include media-breakpoint-down(sm) {
+  .rtl {
+    .main-panel .content {
+      padding-left: 15px;
+      padding-right: 15px;
+    }
+  }
+}
+
+
+@include media-breakpoint-down(xs) {
+
+.rtl .navbar .dropdown-menu {
+    width: 200px !important;
+  }
+}

APP/assets/sass/dashboard/custom/_sidebar-and-main-panel.scss

@@ -0,0 +1,738 @@
+.wrapper{
+    position: relative;
+    top: 0;
+    height: 100vh;
+
+    &.wrapper-full-page{
+        min-height: 100vh;
+        height: auto;
+    }
+}
+
+.sidebar-wrapper ul li div.collapse ul li div.collapse ul li a,
+.sidebar-wrapper ul li div.collapse ul li div.collapsing ul li a,
+.sidebar-wrapper ul li div.collapsing ul li div.collapse ul li a{
+
+  margin-left: 25px;
+
+}
+.sidebar,
+.off-canvas-sidebar{
+    @include linear-gradient($primary-states, $primary);
+    height: calc(100vh - 90px);
+    width: 230px;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 1;
+    background-size: cover;
+    background-position: center center;
+    display: block;
+    box-shadow: 0px 0px 45px 0px rgba(0,0,0,0.6);
+    margin-top: 82px;
+    margin-left: 20px;
+    border-radius: 5px;
+
+    .sidebar-wrapper{
+        width: $full-width;
+        min-height: 100%;
+        max-height: calc(100vh - 705px);
+        z-index: 4;
+        position: relative;
+        overflow-y: auto;
+        overflow-x: hidden;
+
+        .dropdown .dropdown-backdrop{
+          display: none !important;
+        }
+
+        .navbar-form{
+            border: none;
+        }
+
+        > .nav,
+        .user .info{
+          [data-toggle="collapse"] ~ div > ul > li > a{
+              span{
+                display: inline-block;
+                @extend .animation-transition-general;
+
+              }
+
+              .sidebar-normal{
+                margin: 0;
+                position: relative;
+                transform: translateX(0px);
+                opacity: 1;
+                white-space: nowrap;
+                display: block;
+                line-height: 23px;
+                z-index: 1;
+                color: $opacity-8;
+              }
+
+              i{
+                font-size: 17px;
+                line-height: 20px;
+                width: 26px;
+              }
+            }
+        }
+
+
+    }
+    .logo-tim{
+      border-radius: 50%;
+      border: 1px solid #333;
+      display: block;
+      height: 61px;
+      width: 61px;
+      float: left;
+      overflow: hidden;
+
+      img{
+          width: 60px;
+          height: 60px;
+      }
+    }
+
+    .nav{
+        margin-top: 20px;
+        display: block;
+
+        .caret{
+            top: 14px;
+            position: absolute;
+            right: 10px;
+        }
+
+        li{
+            > a + div .nav{
+              margin-top: 5px;
+               li > a{
+                  margin-top: 0px;
+                  padding: 8px 8px;
+              }
+            }
+
+            > a{
+                margin: 10px 15px 0;
+                border-radius: $btn-round-radius;
+                font-weight: $font-weight-normal;
+                color: $white;
+                display: block;
+                text-decoration: none;
+                position: relative;
+                text-transform: uppercase;
+                cursor: pointer;
+                font-size: $font-size-xs;
+                padding: 10px 8px;
+                line-height: $line-height-lg;
+            }
+
+            &:first-child > a{
+                margin: 0 15px;
+
+            }
+
+            &:hover:not(.active) > a,
+            &:focus:not(.active) > a{
+                p,i{
+                  color: $white;
+                }
+            }
+
+            &:hover:not(.active) > a i,
+            &:focus:not(.active) > a i{
+                color: $white;
+            }
+
+            &.active > a:not([data-toggle="collapse"]){
+                background: transparent;
+
+                i,p{
+                  color: white;
+                }
+
+                &:before{
+                  content: " ";
+                  position: absolute;
+                  height: 6px;
+                  width: 6px;
+                  top: 22px;
+                  left: -4px;
+                  background: $white;
+                  border-radius: 50%;
+                }
+            }
+
+            &.active > a[data-toggle="collapse"]{
+              background: transparent;
+              box-shadow: none;
+              color: $white;
+
+              i{
+                color: $white;
+              }
+
+              & + div .nav .active a{
+
+                box-shadow: none;
+
+                &:before{
+                  content: " ";
+                  position: absolute;
+                  height: 6px;
+                  width: 6px;
+                  top: 17px;
+                  left: -4px;
+                  background: $white;
+                  border-radius: 50%;
+                }
+              }
+              &:before{
+                content: " ";
+                position: absolute;
+                height: 6px;
+                width: 6px;
+                top: 22px;
+                left: -4px;
+                background: rgba($white,0.6);
+                border-radius: 50%;
+              }
+            }
+        }
+
+        p{
+            margin: 0;
+            line-height: 30px;
+            position: relative;
+            display: block;
+            height: auto;
+            white-space: nowrap;
+            @extend .animation-transition-general;
+        }
+
+        i{
+            font-size: 20px;
+            float: left;
+            margin-right: 12px;
+            line-height: 30px;
+            width: 34px;
+            text-align: center;
+            color: $opacity-8;
+            position: relative;
+        }
+    }
+
+    .sidebar-background{
+        position: absolute;
+        z-index: 1;
+        height: 100%;
+        width: $full-width;
+        display: block;
+        top: 0;
+        left: 0;
+        background-size: cover;
+        background-position: center center;
+
+        &:after{
+            position: absolute;
+            z-index: 3;
+            width: $full-width;
+            height: 100%;
+            content: "";
+            display: block;
+            background: #FFFFFF;
+            opacity: 1;
+        }
+    }
+
+    .logo{
+        position: relative;
+        display: flex;
+        align-items: center;
+        padding: $padding-base-vertical $padding-base-horizontal 1rem;
+        z-index: 4;
+
+        a.logo-mini,
+        a.logo-normal{
+            @extend .animation-transition-general;
+        }
+
+        a.logo-mini{
+            opacity: 1;
+            float: left;
+            width: 38px;
+            height: 38px;
+            min-width: 38px;
+            text-align: center;
+            padding: 0;
+            margin-left: 12px;
+            margin-right: 12px;
+            border-radius: 50%;
+            background-color: rgba($white,0.9);
+            img {
+              padding: 5px;
+            }
+        }
+
+        a.logo-normal{
+            display: block;
+            opacity: 1;
+            @include transform-translate-x(0px);
+        }
+
+        &:after{
+            content: '';
+            position: absolute;
+            bottom: 0;
+            right: 15px;
+            height: 1px;
+            width: calc(100% - 30px);
+            background: $opacity-5;
+
+        }
+
+        p{
+            float: left;
+            font-size: 20px;
+            margin: 10px 10px;
+            color: $white;
+            line-height: 20px;
+            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+        }
+
+        .simple-text{
+            text-transform: uppercase;
+            padding: $padding-base-vertical 0;
+            display: block;
+            white-space: nowrap;
+            font-size: $font-size-base;
+            color: $white;
+            text-decoration: none;
+            font-weight: $font-weight-normal;
+            line-height: 30px;
+            overflow: hidden;
+        }
+    }
+
+    .logo-tim{
+        border-radius: 50%;
+        border: 1px solid #333;
+        display: block;
+        height: 61px;
+        width: 61px;
+        float: left;
+        overflow: hidden;
+
+        img{
+            width: 60px;
+            height: 60px;
+        }
+    }
+
+    &[data="blue"]{
+      @include linear-gradient($info-states, $info);
+      &:before{
+        border-bottom-color: $info;
+      }
+    }
+    &[data="green"]{
+      @include linear-gradient($success-states, $success);
+      &:before{
+        border-bottom-color: $success;
+      }
+    }
+
+    &[data="vue"] {
+      @include linear-gradient($vue-states, $vue);
+      &:before{
+        border-bottom-color: $vue;
+      }
+    }
+
+
+    .user{
+        padding-bottom: 20px;
+        margin:20px auto 0;
+        position: relative;
+
+        &:after{
+            content: '';
+            position: absolute;
+            bottom: 0;
+            right: 15px;
+            height: 1px;
+            width: calc(100% - 30px);
+            background: $opacity-5;
+        }
+
+        .photo{
+            width: 34px;
+            height: 34px;
+            overflow: hidden;
+            float: left;
+            z-index: 5;
+            margin-right: 10px;
+            border-radius: 50%;
+            margin-left: 23px;
+            box-shadow: $box-shadow-raised;
+            @extend .animation-transition-general;
+
+            img{
+                width: $full-width;
+            }
+        }
+
+        a{
+            color: $white;
+            text-decoration: none;
+            padding: $padding-base-vertical 15px;
+            white-space: nowrap;
+            @extend .animation-transition-general;
+        }
+
+        .info{
+            > a{
+               display: block;
+               line-height: 18px;
+
+                > span{
+                   @extend .animation-transition-general;
+                   display: block;
+                   position: relative;
+                   opacity: 1;
+                }
+            }
+
+            .caret{
+                position: absolute;
+                top: 8px;
+                right: 18px;
+            }
+        }
+    }
+}
+
+
+.visible-on-sidebar-regular{
+    display: inline-block !important;
+}
+.off-canvas-sidebar{
+    .nav {
+        > li > a,
+        > li > a:hover{
+            color: $white;
+        }
+
+        > li > a:focus{
+            background: rgba(200, 200, 200, 0.2);
+        }
+    }
+}
+
+
+.main-panel {
+    position: relative;
+    float: right;
+    width: $full-width;
+    min-height: 100vh;
+    border-top: 2px solid $primary;
+    background: linear-gradient($background-black, $background-states-black);
+
+    @include transitions (0.50s, cubic-bezier(0.685, 0.0473, 0.346, 1));
+
+    &[data="blue"]{
+      border-top: 2px solid $info;
+    }
+
+    &[data="green"]{
+      border-top: 2px solid $success;
+    }
+    &[data="primary"]{
+      border-top: 2px solid $primary;
+    }
+    &[data="vue"]{
+      border-top: 2px solid $vue;
+    }
+
+    > .content {
+        padding: 80px 30px 30px 280px;
+        min-height: calc(100vh - 70px);
+    }
+
+    > .navbar {
+        margin-bottom: 0;
+    }
+
+
+    .header {
+        margin-bottom: 50px;
+    }
+}
+
+
+.perfect-scrollbar-on{
+  .sidebar,
+  .main-panel{
+      height: 100%;
+      max-height: 100%;
+  }
+}
+
+
+.panel-header {
+  height: $sidebar-width;
+  padding-top: 80px;
+  padding-bottom: 45px;
+  background: #141E30;  /* fallback for old browsers */
+  background: -webkit-gradient(linear, left top, right top, from(#0c2646), color-stop(60%, #204065), to(#2a5788));
+  background: linear-gradient(to right, #0c2646 0%, #204065 60%, #2a5788 100%);
+  position: relative;
+  overflow: hidden;
+
+  .header{
+    .title{
+      color: $white;
+    }
+    .category{
+      max-width: 600px;
+      color: $opacity-5;
+      margin: 0 auto;
+      font-size: 13px;
+
+      a{
+        color: $white;
+      }
+    }
+  }
+}
+
+.panel-header-sm{
+  height: 135px;
+}
+
+.panel-header-lg{
+  height: 380px
+}
+
+@include media-breakpoint-down(md){
+  .sidebar{
+      position: fixed;
+      display: block;
+      top: 0;
+      height: 100vh;
+      width: $sidebar-width;
+      right: auto;
+      left: 0;
+      margin: 0;
+      border-radius: 0;
+      z-index: 1032;
+      visibility: visible;
+      overflow-y: visible;
+      padding: 0;
+      @include transition($sidebar-transition);
+      @include transform-translate-x(-$sidebar-width);
+
+      .sidebar-wrapper{
+        height: 100vh;
+      }
+  }
+
+  .nav-open{
+      .main-panel{
+          right: 0;
+          @include transform-translate-x($sidebar-width);
+      }
+
+      .sidebar{
+
+          @include transition($sidebar-transition);
+          @include transform-translate-x(0px);
+          &:before{
+            content: unset;
+          }
+      }
+
+      body{
+          position: relative;
+          overflow-x: hidden;
+      }
+  }
+
+  .menu-on-right .nav-open{
+
+    .main-panel{
+      @include transform-translate-x(-$sidebar-width);
+    }
+
+    .navbar-collapse,
+    .sidebar{
+      @include transform-translate-x(0px);
+    }
+
+    .bodyClick{
+      right: $sidebar-width;
+      left: auto;
+    }
+  }
+
+  .menu-on-right{
+    .sidebar{
+      left: auto;
+      right: 0;
+      @include transform-translate-x($sidebar-width);
+    }
+  }
+
+  .bodyClick{
+      height: 100%;
+      width: 100%;
+      position: fixed;
+      opacity: 1;
+      top: 0;
+      right: 0;
+      left: $sidebar-width;
+      content: "";
+      z-index: 9999;
+      overflow-x: hidden;
+      background-color: transparent;
+      @include transitions (0.50s, cubic-bezier(0.685, 0.0473, 0.346, 1));
+  }
+
+  .wrapper{
+      @include transitions (0.50s, cubic-bezier(0.685, 0.0473, 0.346, 1));
+  }
+
+  .main-panel{
+      width: 100%;
+      .content{
+      padding-left: 30px;
+    }
+  }
+}
+
+@include media-breakpoint-up(lg){
+    .sidebar,
+    .main-panel,
+    .sidebar-wrapper{
+       -webkit-transition-property: top,bottom,width;
+       transition-property: top,bottom, width;
+       -webkit-transition-duration: .2s,.2s, .35s;
+       transition-duration: .2s,.2s, .35s;
+       -webkit-transition-timing-function: linear,linear,ease;
+       transition-timing-function: linear,linear,ease;
+      -webkit-overflow-scrolling: touch;
+    }
+    
+    .sidebar .nav>li.active-pro {
+      position: absolute;
+      width: 100%;
+      bottom: 10px;
+    }
+}
+
+@include media-breakpoint-down(sm){
+  .main-panel .content {
+    padding-left: 15px;
+    padding-right: 15px;
+  }
+}
+
+@include media-breakpoint-between (md, lg){
+  .wrapper{
+       @include transitions (0.50s, cubic-bezier(0.685, 0.0473, 0.346, 1));
+  }
+
+  .sidebar{
+      position: fixed;
+      display: block;
+      top: 0;
+      height: 100vh;
+      width: $sidebar-width !important;
+      right: auto;
+      left: 0;
+      margin: 0;
+      border-radius: 0;
+      z-index: 1032;
+      visibility: visible;
+      overflow-y: visible;
+      padding: 0;
+      @include transition($sidebar-transition);
+      @include transform-translate-x(-$sidebar-width);
+
+      .sidebar-wrapper{
+        height: 100vh;
+      }
+  }
+
+  .main-panel{
+        @include transition($sidebar-transition);
+  }
+
+  .nav-open{
+      .main-panel{
+          right: 0;
+          @include transform-translate-x($sidebar-width);
+      }
+
+      .sidebar{
+
+          @include transition($sidebar-transition);
+          @include transform-translate-x(0px);
+           &:before{
+             content: unset;
+           }
+      }
+
+      body{
+          position: relative;
+          overflow-x: hidden;
+      }
+
+      .menu-on-right{
+
+        .main-panel{
+          @include transform-translate-x(-$sidebar-width);
+        }
+
+        .navbar-collapse,
+        .sidebar{
+            @include transform-translate-x(0px);
+        }
+
+        .bodyClick{
+            right: $sidebar-width;
+            left: auto;
+        }
+      }
+  }
+
+  .menu-on-right{
+    .sidebar{
+      left: auto;
+      right: 0;
+      @include transform-translate-x($sidebar-width);
+    }
+  }
+
+  .bodyClick {
+      height: 100%;
+      width: 100%;
+      position: fixed;
+      opacity: 1;
+      top: 0;
+      right: 0;
+      left: $sidebar-width;
+      content: "";
+      z-index: 9999;
+      overflow-x: hidden;
+      background-color: transparent;
+      @include transitions(0.50s, cubic-bezier(0.685, 0.0473, 0.346, 1));
+  }
+
+  .main-panel .content {
+    padding-left: 30px !important;
+  }
+}

APP/assets/sass/dashboard/custom/_tables.scss

@@ -0,0 +1,193 @@
+.table{
+
+  > tbody > tr > td {
+    color: rgba(255, 255, 255, 0.7) !important;
+
+    .photo {
+      height: 30px;
+      width: 30px;
+      border-radius: 50%;
+      overflow: hidden;
+      margin: 0 auto;
+
+      img {
+        width: 100%;
+      }
+    }
+  }
+
+  > tbody > tr.table-success{
+    &,
+    > td {
+      background-color: darken($success, 10%);
+    }
+  }
+
+  > tbody > tr.table-info{
+    &,
+    > td {
+      background-color: $info;
+    }
+  }
+
+  > tbody > tr.table-primary{
+    &,
+    > td {
+      background-color: $primary;
+    }
+  }
+
+  > tbody > tr.table-warning{
+    &,
+    > td {
+      background-color: $warning;
+    }
+  }
+  > tbody > tr.table-danger{
+    &,
+    > td {
+      background-color: $danger;
+    }
+  }
+
+
+    .img-wrapper{
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      overflow: hidden;
+      margin: 0 auto;
+    }
+
+    .img-row{
+      max-width: 60px;
+      width: 60px;
+    }
+
+    .form-check{
+        margin: 0;
+        margin-top: 5px;
+
+        & label .form-check-sign::before,
+        & label .form-check-sign::after{
+            top: -17px;
+            left: 4px;
+        }
+    }
+
+    .btn{
+        margin: 0;
+    }
+
+    small,.small{
+      font-weight: 300;
+    }
+
+   > thead > tr > th{
+       border-bottom-width: 1px;
+       font-size: 12px;
+       text-transform: uppercase;
+       font-weight: $font-weight-extra-bold;
+       border: 0;
+       color: rgba($white, 0.7);
+   }
+
+   .radio,
+   .checkbox{
+       margin-top: 0;
+       margin-bottom: 0;
+       padding: 0;
+       width: 15px;
+
+       .icons{
+           position: relative;
+       }
+
+        label{
+            &:after,
+            &:before{
+                top: -17px;
+                left: -3px;
+            }
+        }
+   }
+   > thead > tr > th,
+   > tbody > tr > th,
+   > tfoot > tr > th,
+   > thead > tr > td,
+   > tbody > tr > td,
+   > tfoot > tr > td{
+       border-color: rgba(255, 255, 255, 0.1);
+       padding: 12px 7px;
+       vertical-align: middle;
+   }
+
+   .th-description{
+       max-width: 150px;
+   }
+   .td-price{
+       font-size: 26px;
+       font-weight: $font-weight-light;
+       margin-top: 5px;
+       position: relative;
+       top: 4px;
+       text-align: right;
+   }
+   .td-total{
+        font-weight: $font-weight-bold;
+        font-size: $h5-font-size;
+        padding-top: 20px;
+        text-align: right;
+    }
+
+   .td-actions .btn{
+    margin: 0px;
+    }
+
+    > tbody > tr{
+        position: relative;
+    }
+
+    > tfoot > tr {
+      color: hsla(0,0%,100%,.7);
+      text-transform: uppercase;
+    }
+
+}
+
+.table-responsive{
+  overflow: auto;
+  padding-bottom: 10px;
+}
+
+#tables .table-responsive{
+    margin-bottom: 30px;
+}
+
+table.tablesorter thead tr .header{
+	background-image: url("/img/bg.gif");
+  background-repeat: no-repeat;
+  background-position: center right;
+  cursor: pointer;
+}
+
+table.tablesorter thead tr .headerSortUp {
+	background-image: url("/img/asc.gif");
+}
+table.tablesorter thead tr .headerSortDown {
+	background-image: url("/img/desc.gif");
+}
+
+
+// datatables
+
+
+.dataTables_wrapper {
+  .table-striped tbody tr:nth-of-type(odd) {
+    background-color: rgba(0,0,0,.05);
+  }
+
+  .form-control-sm {
+    font-size: 10px;
+  }
+}

APP/assets/sass/dashboard/custom/_type.scss

@@ -0,0 +1,166 @@
+h1, h2, h3, h4, h5, h6,
+.h1, .h2, .h3, .h4, .h5, .h6 {
+  line-height: $headings-line-height;
+
+}
+
+button,
+input,
+optgroup,
+select,
+textarea{
+    font-family: $font-family-base;
+}
+.card{
+  h1,h2,h3,h4,h5,h6,p{
+    color: $opacity-8;
+  }
+}
+h1,h2,h3,h4,h5,h6{
+    font-weight: $font-weight-normal;
+    color: $opacity-8;
+}
+
+a{
+    color: $primary-states;
+    font-weight: $font-weight-light;
+    &:hover,
+    &:focus{
+        color: $primary;
+    }
+}
+h1, .h1 {
+    line-height: 1.05;
+    margin-bottom: $margin-base-vertical * 2;
+
+    small{
+        font-weight: $font-weight-bold;
+        text-transform: uppercase;
+        opacity: .8;
+    }
+
+}
+h2, .h2{
+    margin-bottom: $margin-base-vertical * 2;
+    line-height: 1.2;
+
+}
+h3, .h3{
+    margin-bottom: $margin-base-vertical * 2;
+    line-height: 1.4em;
+}
+h4, .h4{
+    line-height: 1.45em;
+    margin-bottom: $margin-base-vertical;
+
+    & + .category,
+    &.title + .category{
+        margin-top: -10px;
+    }
+}
+h5, .h5 {
+    line-height: 1.4em;
+    margin-bottom: 15px;
+}
+h6, .h6{
+    text-transform: uppercase;
+    font-weight: $font-weight-bold;
+}
+p{
+    color: $opacity-8;
+    margin-bottom: 5px;
+
+    &.description{
+        font-size: 1.14em;
+    }
+}
+
+
+.title{
+    font-weight: $font-weight-bold;
+    &.title-up{
+        text-transform: uppercase;
+
+        a{
+            color: $black;
+            text-decoration: none;
+        }
+    }
+    & + .category{
+        margin-top: -10px;
+    }
+}
+
+.description,
+.card-description,
+.footer-big p,
+.card .footer .stats{
+    color: $dark-gray;
+    font-weight: $font-weight-light;
+}
+.category,
+.card-category{
+    text-transform: capitalize;
+    font-weight: $font-weight-normal;
+    color: rgba($white, 0.6);
+    font-size: $font-size-sm;
+}
+
+.card-category{
+    font-size: $font-size-sm;
+}
+
+.blockquote{
+    border-left: none;
+    border: 1px solid $default;
+    padding: 20px;
+    font-size: $blockquote-font-size;
+    line-height: 1.8;
+
+    small{
+        color: $default;
+        font-size: $font-size-sm;
+        text-transform: uppercase;
+    }
+
+    &.blockquote-primary{
+        border-color: $primary;
+        color: $primary;
+
+        small{
+            color: $primary;
+        }
+    }
+
+    &.blockquote-danger{
+        border-color: $danger;
+        color: $danger;
+
+        small{
+            color: $danger;
+        }
+    }
+
+    &.blockquote-white{
+        border-color: $opacity-8;
+        color: $white;
+
+        small{
+            color: $opacity-8;
+        }
+    }
+}
+
+ul li, ol li{
+  color: $white;
+}
+
+pre{
+  color: $opacity-8;
+}
+
+hr{
+  border-top: 1px solid rgba(0,0,0,0.1);
+  margin-top: $spacer;
+  margin-bottom: $spacer;
+}

APP/assets/sass/dashboard/custom/_utilities.scss

@@ -0,0 +1,9 @@
+@import "utilities/backgrounds.scss";
+@import "utilities/floating.scss";
+@import "utilities/helper.scss";
+@import "utilities/position.scss";
+@import "utilities/sizing.scss";
+@import "utilities/spacing.scss";
+@import "utilities/shadows.scss";
+@import "utilities/text.scss";
+@import "utilities/transform.scss";

APP/assets/sass/dashboard/custom/_variables.scss

@@ -0,0 +1,999 @@
+@import "~bootstrap/scss/functions";
+@import "functions";
+@import "mixins";
+// Global settings
+
+$enable-caret:              true !default;
+$enable-rounded:            true !default;
+$enable-shadows:            true !default;
+$enable-gradients:          false !default;
+$enable-transitions:        true !default;
+$enable-grid-classes:       true !default;
+$enable-print-styles:       true !default;
+
+
+// Color system
+
+$white:    #ffffff !default;
+$gray-100: #f6f9fc !default;
+$gray-200: #e9ecef !default;
+$gray-300: #e3e3e3 !default;
+$gray-400: #ced4da !default;
+$gray-500: #adb5bd !default;
+$gray-600: #6c757d !default;   // Line footer color
+$gray-700: #525f7f !default;   // Line p color
+$gray-800: #32325d !default;   // Line heading color
+$gray-900: #212529 !default;
+$link-disabled:              #666666 !default;
+$transparent-bg:             transparent !default;
+$light-bg:                   #f5f6fa !default;
+$dark-background:            #555555 !default;
+
+
+$grays: () !default;
+$grays: map-merge((
+  "100": $gray-100,
+  "200": $gray-200,
+  "300": $gray-300,
+  "400": $gray-400,
+  "500": $gray-500,
+  "600": $gray-600,
+  "700": $gray-700,
+  "800": $gray-800,
+  "900": $gray-900
+), $grays);
+
+$blue:    #5e72e4 !default;
+$indigo:  #5603ad !default;
+$purple:  #8965e0 !default;
+$pink:    #f3a4b5 !default;
+$red:     #f5365c !default;
+$orange:  #fb6340 !default;
+$yellow:  #ffd600 !default;
+$green:   #2dce89 !default;
+$teal:    #11cdef !default;
+$cyan:    #2bffc6 !default;
+
+$line-height-lg:              1.625rem !default;
+$line-height-sm:              1.5 !default;
+$line-height:                 1.35em         !default;
+
+
+$opacity-gray-3:             rgba(222,222,222, .3) !default;
+$opacity-gray-5:             rgba(222,222,222, .5) !default;
+$opacity-gray-8:             rgba(222,222,222, .8) !default;
+
+
+$opacity-5:                  rgba(255,255,255, .5) !default;
+$opacity-6:                  rgba(255,255,255, .6) !default;
+$opacity-8:                  rgba(255,255,255, .8) !default;
+
+
+
+$opacity-1:                  rgba(255,255,255, .1) !default;
+$opacity-2:                  rgba(255,255,255, .2) !default;
+
+
+// end beniamin
+
+$colors: () !default;
+$colors: map-merge((
+  "blue":       $blue,
+  "indigo":     $indigo,
+  "purple":     $purple,
+  "pink":       $pink,
+  "red":        $red,
+  "orange":     $orange,
+  "yellow":     $yellow,
+  "green":      $green,
+  "teal":       $teal,
+  "cyan":       $cyan,
+  "white":      $white,
+  "gray":       $gray-600,
+  "light":      $gray-400,
+  "lighter":    $gray-200,
+  "gray-dark":  $gray-800
+), $colors);
+
+$default-color-opacity:      rgba(182, 182, 182, .6) !default;
+$orange-color:               #f96332 !default;
+
+$default:       #344675 !default;
+$primary:       #e14eca !default;
+$secondary:     #f4f5f7 !default;
+$success:       #00f2c3 !default;
+$info:          #1d8cf8 !default;
+$warning:       #ff8d72 !default;
+$danger:        #fd5d93 !default;
+$black:         #222a42 !default;
+$vue:           #42b883 !default;
+
+// gradient
+$default-states:       #263148 !default;
+$primary-states:       #ba54f5 !default;
+$success-states:       #0098f0 !default;
+$info-states:          #3358f4 !default;
+$warning-states:       #ff6491 !default;
+$danger-states:        #ec250d !default;
+$black-states:         #1d253b !default;
+$vue-states:           #389466 !default;
+
+$background-black:           #1e1e2f !default;
+$background-states-black:    #1e1e24 !default;
+
+// opacity
+$default-opacity:      rgba(182, 182, 182, .6) !default;
+$primary-opacity:      rgba(249, 99, 50, .3) !default;
+$success-opacity:      rgba(24, 206, 15, .3) !default;
+$info-opacity:         rgba(44, 168, 255, .3) !default;
+$warning-opacity:      rgba(255, 178, 54, .3) !default;
+$danger-opacity:       rgba(255, 54, 54, .3) !default;
+
+$light-gray:                 #E3E3E3 !default;
+$medium-gray:                #DDDDDD !default;
+$dark-gray:                  #9A9A9A !default;
+$active-gray:                #777777 !default;
+$nav-gray:                   #444444 !default;
+$search-gray:                #b7b7b7 !default;
+$calendar-gray:              #9499a7 !default;
+$active-blue:                #00bbff !default;
+
+
+
+$light:         $gray-500 !default;
+$dark:          $gray-900 !default;
+$darker:        darken($gray-900, 15%) !default;
+
+$facebook:              #3b5998 !default;
+$facebook-states:       darken($facebook, 5%) !default;
+$twitter:               #55acee !default;
+$twitter-states:        darken($twitter, 5%) !default;
+$google-plus:           #dd4b39 !default;
+$google-plus-states:    darken($google-plus, 5%) !default;
+$instagram:             #125688 !default;
+$instagram-states:      lighten($instagram, 6%) !default;
+$linkedin:              #0077B5 !default;
+$linkedin-states:       darken($linkedin, 5%) !default;
+$pinterest:             #cc2127 !default;
+$pinterest-states:      lighten($pinterest, 6%) !default;
+$youtube:               #e52d27 !default;
+$youtube-states:        lighten($youtube, 6%) !default;
+$dribbble:              #ea4c89 !default;
+$dribbble-states:       lighten($dribbble, 6%) !default;
+$github:                #333333 !default;
+$github-states:         #ccc !default;
+$reddit:                #ff4500 !default;
+$reddit-states:         lighten($reddit, 6%) !default;
+$tumblr:                #35465c !default;
+$tumblr-states:         lighten($tumblr, 6%) !default;
+$behance:               #1769ff !default;
+$behance-states:        lighten($behance, 6%) !default;
+
+$theme-colors: () !default;
+$theme-colors: map-merge((
+  "default":      $default,
+  "primary":      $primary,
+  "secondary":    $secondary,
+  "success":      $success,
+  "info":         $info,
+  "warning":      $warning,
+  "danger":       $danger,
+  "white":        $white,
+  "neutral":      $white,
+  "dark":         $dark,
+  "darker":       $darker
+), $theme-colors);
+
+$brand-colors: () !default;
+$brand-colors: map-merge((
+  "facebook":     $facebook,
+  "twitter":      $twitter,
+  "google-plus":  $google-plus,
+  "instagram":    $instagram,
+  "pinterest":    $pinterest,
+  "youtube":      $youtube,
+  "dribbble":     $dribbble,
+  "github":       $github,
+  "reddit":       $reddit,
+  "behance":      $behance,
+  "tumblr":       $tumblr,
+  "linkedin":     $linkedin,
+), $brand-colors);
+
+
+/*     brand Colors              */
+$brand-primary:              $primary !default;
+$brand-info:                 $info !default;
+$brand-success:              $success !default;
+$brand-warning:              $warning !default;
+$brand-danger:               $danger !default;
+$brand-inverse:              $black !default;
+
+$topbar-x:             topbar-x !default;
+$topbar-back:          topbar-back !default;
+$bottombar-x:          bottombar-x !default;
+$bottombar-back:       bottombar-back !default;
+
+// Set a specific jump point for requesting color jumps
+$theme-color-interval:      8% !default;
+
+// The yiq lightness value that determines when the lightness of color changes from "dark" to "light". Acceptable values are between 0 and 255.
+$yiq-contrasted-threshold:  200 !default;
+
+// Customize the light and dark text colors for use in our YIQ color contrast function.
+$yiq-text-dark:             $gray-900 !default;
+$yiq-text-light:            $white !default;
+
+// Action colors
+
+$star-rating-color: $gray-400 !default;
+$star-rating-color-active: $yellow !default;
+
+$favorite-color: $yellow !default;
+$like-color: $blue !default;
+$love-color: $red !default;
+
+
+// Body
+
+$body-bg: $background-black !default;
+$body-color: $gray-700 !default;
+
+
+// Sections
+
+$section-colors: () !default;
+$section-colors: map-merge((
+  "primary":      $body-bg,
+  "secondary":    $secondary,
+  "light":        $gray-400,
+  "dark":         $dark,
+  "darker":       $darker
+), $section-colors);
+
+// Links
+
+$link-color:                $primary !default;
+$link-decoration:           none !default;
+$link-hover-color:          darken($link-color, 15%);
+$link-hover-decoration:     none !default;
+
+// Grid breakpoints
+
+$grid-breakpoints: (
+  xs: 0,
+  sm: 576px,
+  md: 768px,
+  lg: 992px,
+  xl: 1200px
+);
+
+@include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
+@include _assert-starts-at-zero($grid-breakpoints);
+
+
+// Grid containers
+//
+// Define the maximum width of `.container` for different screen sizes.
+
+
+// Spacing
+
+$spacer: 1rem !default;
+$spacers: () !default;
+$spacers: map-merge((
+  0: 0,
+  1: ($spacer * .25),
+  2: ($spacer * .5),
+  3: $spacer,
+  4: ($spacer * 1.5),
+  5: ($spacer * 3),
+  'sm': ($spacer * 2),
+  'md': ($spacer * 4),
+  'lg': ($spacer * 6),
+  'xl': ($spacer * 8)
+), $spacers);
+
+$padding-base-vertical:        .5rem !default;
+$padding-base-horizontal:      .7rem !default;
+
+$padding-btn-vertical:         11px !default;
+$padding-btn-horizontal:       40px !default;
+
+$padding-round-horizontal:     23px !default;
+
+$padding-lg-vertical:       15px !default;
+
+$padding-input-vertical:        11px !default;
+$padding-input-horizontal:      19px !default;
+
+
+$margin-lg-vertical:           30px !default;
+$margin-base-vertical:         15px !default;
+
+// This variable affects the `.h-*` and `.w-*` classes.
+
+$sizes: () !default;
+$sizes: map-merge((
+  25: 25%,
+  50: 50%,
+  75: 75%,
+  100: 100%
+), $sizes);
+
+// Components
+
+$shape-height-xl:              1.5 !default;
+$shape-height-lg:              1.5 !default;
+$shape-height-sm:              1.5 !default;
+
+// border
+$none:                       0   !default;
+$border-thin:                1px !default;
+$border-thick:               2px !default;
+$border-width:                .0625rem !default;
+$border-color:                $gray-200 !default;
+
+$border-radius:               .25rem !default;
+$border-radius-xl:            0.875rem !default;
+$border-radius-lg:            0.4285rem !default;
+$border-radius-sm:            0.2857rem !default;
+$border-radius-xs:            0.1428rem !default;
+
+$margin-bottom:                 10px        !default;
+$border:                        1px solid   !default;
+
+$box-shadow-sm:               0 .125rem .25rem rgba($black, .075);
+$box-shadow:                  0 15px 35px rgba(50,50,93,.1), 0 5px 15px rgba(0,0,0,.07);
+$box-shadow-lg:               0 1rem 3rem rgba($black, .175);
+
+$dropdown-shadow:          1px 2px 3px 0px rgba(0, 0, 0, 0.125);
+$box-shadow-raised:        0px 10px 25px 0px rgba(0, 0, 0, 0.3);
+$box-shadow:               0 1px 20px 0px rgba(0, 0, 0, 0.1);
+
+$component-active-color:        $white !default;
+$component-active-bg:           theme-color("primary") !default;
+$component-active-border-color: theme-color("primary") !default;
+
+$component-hover-color:        $gray-300 !default;
+$component-hover-bg:           $gray-300 !default;
+$component-hover-border-color: $gray-300 !default;
+
+$caret-width:                 .3em !default;
+
+$transition-base:             all .15s ease !default;
+$transition-fade:             opacity .15s linear !default;
+$transition-collapse:         height .35s ease !default;
+
+$fast-transition-time:           150ms       !default;
+
+$transition-linear:         linear           !default;
+$transition-bezier:         cubic-bezier(0.34, 1.61, 0.7, 1) !default;
+$transition-ease:           ease 0s;
+
+$select-coordinates:          50% -40px       !default;
+$general-transition-time:     300ms             !default;
+
+
+// Fonts
+
+$font-family-base:            'Poppins', sans-serif !default;
+$font-family-alt:             'Poppins', sans-serif !default;
+
+$font-size-dash:              .875rem !default;
+
+$font-size-base:              $font-size-dash !default; // Assumes the browser default, typically `16px`
+$font-size-xl:                ($font-size-base * 1.428);
+$font-size-lg:                ($font-size-base * 1.142);
+$font-size-sm:                ($font-size-base * .85714286);
+$font-size-xs:                ($font-size-base * .714);
+
+$h1-font-size:                $font-size-base * 2.35714285 !default;  //2.1875rem
+$h2-font-size:                $font-size-base * 1.9285714 !default;
+$h3-font-size:                $font-size-base * 1.642857 !default;
+$h4-font-size:                $font-size-base * 1.2142857 !default;
+$h5-font-size:                $font-size-base * 0.9285714 !default;
+$h6-font-size:                $font-size-base * 0.8571428 !default;
+
+$font-weight-light:           300 !default;
+$font-weight-normal:          400 !default;
+$font-weight-bold:            600 !default;
+$font-weight-extra-bold:      700 !default;
+
+$font-paragraph:               1rem          !default;
+
+$font-weight-base:            $font-weight-normal !default;
+$shape-height-base:            1.428571 !default;
+
+$headings-margin-bottom:      ($spacer / 2);
+$headings-font-family:        inherit !default;
+$headings-font-weight:        $font-weight-normal !default;
+$headings-line-height:        1.2 !default;
+$headings-color:              $gray-800 !default;
+
+$heading-letter-spacing:      .025em !default;
+$heading-font-size:           .95rem !default;
+$heading-text-transform:      uppercase !default;
+$heading-font-weight:         $headings-font-weight !default;
+
+$heading-title-letter-spacing:      .025em !default;
+$heading-title-font-size:           1.375rem !default;
+$heading-title-font-weight:         $font-weight-bold !default;
+$heading-title-text-transform:      uppercase !default;
+
+$heading-section-letter-spacing:      .025em !default;
+$heading-section-font-size:           1.375rem !default;
+$heading-section-font-weight:         $font-weight-bold !default;
+$heading-section-text-transform:      uppercase !default;
+
+$display1-size:               3.3rem !default;
+$display2-size:               2.75rem !default;
+$display3-size:               2.1875rem !default;
+$display4-size:               1.6275rem !default;
+
+$display1-weight:             $font-weight-bold !default;
+$display2-weight:             $font-weight-bold !default;
+$display3-weight:             $font-weight-bold !default;
+$display4-weight:             $font-weight-bold !default;
+$display-line-height:         $headings-line-height !default;
+
+$paragraph-font-size:         0.625rem !default;
+$paragraph-font-weight:       300 !default;
+$paragraph-line-height:       1.7 !default;
+
+$lead-font-size:              ($paragraph-font-size * 1.25);
+$lead-font-weight:            300 !default;
+
+$small-font-size:             80% !default;
+
+$text-muted:                  $gray-600 !default;
+
+$blockquote-small-color:      $gray-600 !default;
+$blockquote-font-size:        ($font-size-base * 1.1);
+
+$hr-border-color:             rgba($black, .1);
+$hr-border-width:             $border-width !default;
+
+$mark-padding:                .2em !default;
+
+$dt-font-weight:              $font-weight-bold !default;
+
+$list-inline-padding:         .5rem !default;
+
+$mark-bg:                     #fcf8e3 !default;
+
+$hr-margin-y:                 $spacer * 2 !default;
+
+
+// Icons
+
+$icon-size:                 auto       !default;
+$icon-size-regular:         2.375rem      !default;
+$icon-font-size-regular:    0.9375rem     !default;
+$icon-font-size-sm:         0.6875rem      !default;
+$icon-size-sm:              1.875rem     !default;
+$icon-font-size-lg:         1.325rem     !default;
+$icon-size-lg:              3.6rem         !default;
+$icon-size-xl:              5rem !default;
+
+
+// Tables
+
+$table-cell-padding:          1rem !default;
+$table-cell-padding-sm:       .3rem !default;
+
+$table-bg:                    transparent !default;
+$table-accent-bg:             rgba($black, .05);
+$table-hover-bg:              rgba($black, .075);
+$table-active-bg:             $table-hover-bg !default;
+
+$table-border-width:          $border-width !default;
+$table-border-color:          $gray-300 !default;
+
+$table-head-bg:               $gray-200 !default;
+$table-head-color:            $gray-700 !default;
+
+$table-dark-bg:               $gray-900 !default;
+$table-dark-accent-bg:        rgba($white, .05);
+$table-dark-hover-bg:         rgba($white, .075);
+$table-dark-border-color:     lighten($gray-900, 7.5%);
+$table-dark-color:            $body-bg !default;
+
+
+// Buttons + Forms
+
+$input-btn-padding-y:         .5rem !default;
+$input-btn-padding-x:         .7rem !default;
+$input-btn-line-height:       $shape-height-base !default;
+
+$input-btn-focus-width:       0 !default;
+$input-btn-focus-color:       rgba($component-active-bg, 1);
+//$input-btn-focus-box-shadow:  0 4px 10px 0 rgba(0, 0, 0, 0.04);
+$input-btn-focus-box-shadow:  none !default;
+
+$input-btn-padding-y-sm:      .25rem !default;
+$input-btn-padding-x-sm:      .5rem !default;
+$input-btn-line-height-sm:    1.35 !default;
+
+$input-btn-padding-y-lg:      .875rem !default;
+$input-btn-padding-x-lg:      1rem !default;
+$input-btn-line-height-lg:    1.35 !default;
+
+$input-btn-border-width:      1px !default;
+
+$input-btn-font-size-sm:      .75rem !default;
+$input-btn-font-size:         .875rem !default;
+$input-btn-font-size-lg:         .875rem !default;
+
+$input-padding-vertical:        11px !default;
+$input-padding-horizontal:      19px !default;
+
+// Buttons
+
+$btn-padding-y:               11px !default;
+$btn-padding-x:               40px !default;
+$btn-line-height:             $line-height !default;
+
+$btn-padding-y-sm:            5px !default;
+$btn-padding-x-sm:            15px !default;
+$btn-line-height-sm:          $input-btn-line-height-sm !default;
+
+$btn-padding-y-lg:            15px !default;
+$btn-padding-x-lg:            48px !default;
+$btn-line-height-lg:          $input-btn-line-height-lg !default;
+
+$btn-border-width:            $input-btn-border-width !default;
+
+$btn-font-size-lg:            1em !default;
+$btn-font-weight:             600 !default;
+$btn-text-transform:          uppercase !default;
+$btn-letter-spacing:          .025em !default;
+$btn-box-shadow:              0 4px 6px rgba(50,50,93,.11), 0 1px 3px rgba(0,0,0,.08);
+$btn-hover-box-shadow:        0 7px 14px rgba(50,50,93,.1), 0 3px 6px rgba(0,0,0,.08);
+$btn-focus-box-shadow:        $btn-hover-box-shadow !default;
+$btn-focus-width:             $input-btn-focus-width !default;
+
+
+$btn-active-box-shadow:       none !default;
+$btn-round-radius:            30px         !default;
+
+
+
+// Forms
+
+$input-padding-y:                       $input-btn-padding-y !default;
+$input-padding-x:                       $input-btn-padding-x !default;
+$input-line-height:                     $input-btn-line-height !default;
+
+$input-padding-y-sm:                    $input-btn-padding-y-sm !default;
+$input-padding-x-sm:                    $input-btn-padding-x-sm !default;
+$input-line-height-sm:                  $input-btn-line-height-sm !default;
+
+$input-padding-y-lg:                    $input-btn-padding-y-lg !default;
+$input-padding-x-lg:                    $input-btn-padding-x-lg !default;
+$input-line-height-lg:                  $input-btn-line-height-lg !default;
+
+$input-border-radius:                   $border-radius !default;
+$input-border-radius-xl:                $border-radius-xl !default;
+$input-border-radius-lg:                $border-radius-lg !default;
+$input-border-radius-sm:                $border-radius-sm !default;
+
+$input-bg:                              $transparent-bg !default;
+$input-disabled-bg:                     $gray-200 !default;
+
+$input-muted-bg:                        #EDF0F5 !default;
+
+$input-alternative-box-shadow:          0 1px 3px rgba(50,50,93,.15), 0 1px 0 rgba(0,0,0,.02);
+$input-focus-alternative-box-shadow:    0 4px 6px rgba(50,50,93,.11),0 1px 3px rgba(0,0,0,.08);
+
+$input-color:                           $opacity-8 !default;
+$input-border-color:                    #cad1d7 !default;
+$input-border-width:                    $input-btn-border-width !default;
+$input-box-shadow:                      none !default; // 0 1px 3px 0 $gray-400 !default;
+
+$input-focus-bg:                        $white !default;
+$input-focus-border-color:              rgba(50,151,211,.25);
+$input-focus-color:                     $input-color !default;
+$input-focus-width:                     0 !default;
+$input-focus-box-shadow:                none !default; //0 1px 3px 0 $gray-500 !default;
+
+$input-placeholder-color:               $gray-500 !default;
+$input-focus-placeholder-color:         $gray-500 !default;
+
+$input-height-border:                   $input-border-width * 2 !default;
+$input-height-inner:                    ($font-size-base * $input-btn-line-height) + ($input-btn-padding-y * 2) !default;
+$input-height:                          calc(#{$input-height-inner} + #{$input-height-border}) !default;
+
+$input-transition:                      all .2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+
+
+// Input groups
+
+$input-group-addon-color:               $input-placeholder-color !default;
+$input-group-addon-bg:                  $input-bg !default;
+$input-group-addon-border-color:        $input-border-color !default;
+
+$input-group-addon-focus-color:               $input-focus-color !default;
+$input-group-addon-focus-bg:                  $input-focus-bg !default;
+$input-group-addon-focus-border-color:        $input-focus-border-color !default;
+
+
+// Custom forms
+
+$custom-control-gutter:                 1.75rem !default;
+$custom-control-spacer-x:               1rem !default;
+$custom-control-indicator-size:         1.25rem !default;
+
+$custom-control-indicator-bg:                   $input-bg !default;
+$custom-control-indicator-border-width:         1px !default;
+$custom-control-indicator-border-color:         $input-border-color !default;
+$custom-control-indicator-box-shadow:           none !default;
+
+$custom-control-indicator-focus-box-shadow:     $custom-control-indicator-box-shadow !default;
+
+$custom-control-indicator-hover-color:         $component-hover-color !default;
+$custom-control-indicator-hover-bg:            $component-hover-bg !default;
+$custom-control-indicator-hover-border-color:  $component-hover-border-color !default;
+
+$custom-control-indicator-active-color:         $component-active-color !default;
+$custom-control-indicator-active-bg:            $component-active-bg !default;
+$custom-control-indicator-active-border-color:  $component-active-border-color !default;
+$custom-control-indicator-active-box-shadow:    $custom-control-indicator-box-shadow !default;
+
+$custom-control-indicator-checked-color:        $component-active-color !default;
+$custom-control-indicator-checked-bg:           $component-active-bg !default;
+$custom-control-indicator-checked-border-color: $component-active-border-color !default;
+$custom-control-indicator-checked-box-shadow:   $custom-control-indicator-box-shadow !default;
+$custom-control-indicator-checked-disabled-bg:  rgba(theme-color("primary"), .5);
+
+$custom-control-indicator-disabled-bg:          $gray-200 !default;
+$custom-control-label-disabled-color:           $gray-600 !default;
+
+$custom-checkbox-indicator-border-radius:       $border-radius-sm !default;
+//$custom-checkbox-indicator-icon-checked:        str-replace(url("data:image/svg+xml !default;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E"), "#", "%23") !default;
+
+$custom-toggle-slider-bg:   #ddd !default;
+$custom-toggle-checked-bg:  theme-color("primary") !default;
+
+// Form validation
+
+$form-feedback-valid-bg:         lighten($success, 15%);
+$form-feedback-valid-color:      theme-color("success") !default;
+$form-feedback-invalid-bg:       lighten($warning, 15%);
+$form-feedback-invalid-color:    theme-color("warning") !default;
+
+
+// Allows for customizing button radius independently from global border radius
+
+$btn-border-radius:           $input-border-radius !default;
+$btn-border-radius-xl:        $input-border-radius-xl !default;
+$btn-border-radius-lg:        $input-border-radius-lg !default;
+$btn-border-radius-sm:        $input-border-radius !default;
+
+
+// No UI Slider
+
+$noui-target-bg:                  #eceeef !default;
+$noui-target-thickness:           5px !default;
+$noui-target-border-radius:       5px !default;
+$noui-target-border-color:        0 !default;
+$noui-target-box-shadow:          inset 0 1px 2px rgba(90,97,105,.1);
+
+$noui-slider-connect-bg:          $primary !default;
+$noui-slider-connect-disabled-bg: #b2b2b2 !default;
+
+$noui-handle-width:               15px !default;
+$noui-handle-bg:                  theme-color("primary") !default;
+$noui-handle-border:              0 !default;
+$noui-handle-border-radius:       100% !default;
+
+$noui-origin-border-radius:       2px !default;
+
+
+// Dropdown
+
+$dropdown-bg:                       $white !default;
+$dropdown-border-width:             0 !default;
+$dropdown-border-color:             rgba($black, .15);
+$dropdown-border-radius:            $border-radius-xs !default;
+$dropdown-box-shadow:               0 50px 100px rgba(50, 50, 93, .1), 0 15px 35px rgba(50, 50, 93, .15), 0 5px 15px rgba(0, 0, 0, .1);
+
+$dropdown-link-active-color:        $component-active-color !default;
+$dropdown-link-active-bg:           $component-active-bg !default;
+
+// Navs
+
+$nav-link-padding-y:                .5rem !default;
+$nav-link-padding-x:                1rem !default;
+$nav-link-color:                    $gray-700 !default;
+$nav-link-disabled-color:           $gray-600 !default;
+
+$nav-pills-padding-y:               .75rem !default;
+$nav-pills-padding-x:               1rem !default;
+
+$nav-pills-space-x:                 1rem !default;
+
+$nav-pills-bg:                      $white;
+$nav-pills-border-width:            1px !default;
+$nav-pills-border-color:            theme-color("primary") !default;
+$nav-pills-border-radius:           $border-radius !default;
+
+$nav-pills-link-color:              theme-color("primary") !default;
+$nav-pills-link-hover-color:        darken(theme-color("primary"), 5%);
+$nav-pills-link-active-color:       color-yiq(theme-color("primary"));
+$nav-pills-link-active-bg:          theme-color("primary") !default;
+$nav-pills-box-shadow:              $btn-box-shadow !default;
+
+// Navbar
+
+$navbar-transition:                 all .15s linear !default;
+$navbar-padding-y:                  .625rem !default;
+$navbar-padding-x:                  .9375rem !default;
+
+$navbar-nav-link-padding-x:         1rem !default;
+$navbar-nav-link-padding-y:         1rem !default;
+
+$navbar-nav-link-font-family:       $font-family-alt !default;
+$navbar-nav-link-font-size:         .9rem !default;
+$navbar-nav-link-font-weight:       400 !default;
+$navbar-nav-link-text-transform:    normal !default;
+$navbar-nav-link-letter-spacing:    0 !default;
+$navbar-nav-link-border-radius:     $border-radius !default;
+
+/* navbar color */
+$navbar-color:                      #1a1e34 !default;
+$navbar-dark-bg:                    transparent !default;
+$navbar-dark-hover-bg:              rgba(255, 255, 255, .1);
+$navbar-dark-active-bg:             rgba(255, 255, 255, .1);
+$navbar-dark-color:                 rgba($white, .95);
+$navbar-dark-hover-color:           rgba($white, .65);
+$navbar-dark-active-color:          rgba($white, .65);
+$navbar-dark-disabled-color:        rgba($white, .25);
+$navbar-dark-toggler-border-color:  transparent !default;
+
+$navbar-light-bg:                   transparent !default;
+$navbar-light-hover-bg:             rgba(0, 0, 0, .1);
+$navbar-light-active-bg:            rgba(0, 0, 0, .1);
+$navbar-light-color:                rgba($black, .5);
+$navbar-light-hover-color:          rgba($black, .7);
+$navbar-light-active-color:         rgba($black, .9);
+$navbar-light-disabled-color:       rgba($black, .3);
+$navbar-light-toggler-icon-bg:      str-replace(url("data:image/svg+xml !default;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default;
+$navbar-light-toggler-border-color: transparent !default;
+$full-width:                        100% !default;
+$navbar-padding:                    10px 15px !default;
+
+
+// Alerts
+
+$alert-padding-y: .9rem !default;
+$alert-padding-x: 1.25rem !default;
+$alert-border-radius: $border-radius-sm !default;
+
+$alert-bg-level: -2 !default;
+$alert-border-level: -2 !default;
+$alert-color-level: 0 !default;
+
+
+// List group
+
+$list-group-bg:                     $white !default;
+$list-group-border-color:           $border-color !default; //rgba($black, .125);
+$list-group-border-width:           $border-width !default;
+$list-group-border-radius:          $border-radius !default;
+
+$list-group-item-padding-y:         1rem !default;
+$list-group-item-padding-x:         1rem !default;
+
+$list-group-hover-bg:               $gray-100 !default;
+$list-group-active-color:           $component-active-color !default;
+$list-group-active-bg:              $component-active-bg !default;
+$list-group-active-border-color:    $list-group-active-bg !default;
+
+$list-group-disabled-color:         $gray-600 !default;
+$list-group-disabled-bg:            $list-group-bg !default;
+
+$list-group-action-color:           $gray-700 !default;
+$list-group-action-hover-color:     $list-group-action-color !default;
+
+$list-group-action-active-color:    $list-group-action-color !default;
+$list-group-action-active-bg:       $gray-200 !default;
+
+
+// Close
+
+$close-font-size:                   $font-size-base * 1.5 !default;
+$close-font-weight:                 $font-weight-bold !default;
+$close-bg:                          transparent !default;
+$close-hover-bg:                    transparent !default;
+$close-color:                       rgba(0, 0, 0, .6);
+$close-hover-color:                 rgba(0, 0, 0, .9);
+$close-text-shadow:                 none !default;
+
+
+// Popovers
+
+$popover-font-size:                 $font-size-sm !default;
+$popover-bg:                        $white !default;
+$popover-max-width:                 276px !default;
+$popover-border-width:              1px !default;
+$popover-border-color:              rgba($black, .05);
+$popover-border-radius:             $border-radius-lg !default;
+$popover-box-shadow:                0px .5rem 2rem 0px rgba($black, .2);
+
+$popover-header-bg:                 $popover-bg !default;
+$popover-header-color:              $headings-color !default;
+$popover-header-padding-y:          .75rem !default;
+$popover-header-padding-x:          .75rem !default;
+
+$popover-body-color:                $body-color !default;
+$popover-body-padding-y:            $popover-header-padding-y !default;
+$popover-body-padding-x:            $popover-header-padding-x !default;
+
+$popover-arrow-width:               1.5rem !default;
+$popover-arrow-height:              .75rem !default;
+$popover-arrow-color:               $popover-bg !default;
+
+$popover-arrow-outer-color:         transparent !default;
+
+// Breadcrumbs
+
+$breadcrumb-bg:                     $black-states !default;
+$breadcrumb-divider-color:          $white !default;
+$breadcrumb-active-color:           $white !default;
+
+
+
+
+// Badges
+
+$badge-font-size:                   $font-size-xs !default;
+$badge-font-weight:                 $font-weight-extra-bold !default;
+$badge-padding-y:                   .25rem !default;
+$badge-padding-x:                   .5rem !default;
+$badge-border-radius:               $border-radius !default;
+$badge-text-transfom:               uppercase;
+
+$badge-pill-padding-x:              .875em !default;
+$badge-pill-border-radius:          $border-radius-xl !default;
+
+$badge-circle-size:                 2rem;
+
+// Pagination
+
+$pagination-padding-y:                0 !default;
+$pagination-padding-x:                .6875rem !default;
+
+
+$pagination-color:                  $white !default;
+$pagination-bg:                     transparent  !default;
+$pagination-border-width:           $border-width !default;
+$pagination-border-color:           $gray-300 !default;
+
+//$pagination-focus-box-shadow:       $btn-hover-box-shadow !default;
+
+$pagination-hover-color:            $gray-600 !default;
+$pagination-hover-bg:               $gray-300 !default;
+$pagination-hover-border-color:     $gray-300 !default;
+
+$pagination-active-color:           $component-active-color !default;
+$pagination-active-bg:              $component-active-bg !default;
+$pagination-active-border-color:    $pagination-active-bg !default;
+$pagination-active-box-shadow:      $btn-hover-box-shadow !default;
+
+$pagination-disabled-color:         $gray-600 !default;
+$pagination-disabled-bg:            transparent !default;
+$pagination-disabled-border-color:  $gray-300 !default;
+
+
+// Cards
+
+$card-spacer-y:                     1.25rem !default;
+$card-spacer-x:                     1.5rem !default;
+$card-border-width:                 $border-width !default;
+$card-border-radius:                $border-radius-sm !default;
+$card-border-color:                 rgba($black, .05);
+$card-inner-border-radius:          calc(#{$card-border-radius} - #{$card-border-width});
+$card-cap-bg:                       $gray-100 !default;
+$card-bg:                           $white !default;
+$card-black-background:             #27293d !default;
+$card-img-overlay-padding:          1.25rem !default;
+
+//$card-group-margin:                 ($grid-gutter-width / 2);
+//$card-deck-margin:                  $card-group-margin !default;
+
+$card-columns-count:                3 !default;
+$card-columns-gap:                  1.25rem !default;
+$card-columns-margin:               $card-spacer-y !default;
+
+// Tooltips
+
+$tooltip-font-size:                 $font-size-sm !default;
+$tooltip-max-width:                 200px !default;
+$tooltip-color:                     $black !default;
+$tooltip-bg:                        $white !default;
+$tooltip-border-radius:             $border-radius !default;
+$tooltip-opacity:                   .9 !default;
+$tooltip-padding-y:                 .25rem !default;
+$tooltip-padding-x:                 .5rem !default;
+$tooltip-margin:                    0 !default;
+
+$tooltip-arrow-width:               .8rem !default;
+$tooltip-arrow-height:              .4rem !default;
+$tooltip-arrow-color:               $tooltip-bg !default;
+
+// Modals
+
+$modal-inner-padding:               24px 24px 16px 24px !default;
+
+$modal-lg:                          800px !default;
+$modal-md:                          500px !default;
+$modal-sm:                          380px !default;
+$modal-title-line-height:           1.1;
+$modal-content-bg:               $white !default;
+$modal-content-border-color:     rgba($black, .2);
+$modal-content-border-width:     1px !default;
+$modal-content-border-radius:    $border-radius-sm !default;
+$modal-content-box-shadow-xs:    0px 10px 50px 0px rgba(0, 0, 0, 0.5);
+$modal-content-box-shadow-sm-up: 0 15px 35px rgba(50,50,93,.2), 0 5px 15px rgba(0,0,0,.17);
+
+$modal-backdrop-bg:           $black !default;
+$modal-backdrop-opacity:      .16 !default;
+$modal-header-border-color:   $gray-200 !default;
+$modal-footer-border-color:   $modal-header-border-color !default;
+$modal-header-border-width:   $modal-content-border-width !default;
+$modal-footer-border-width:   $modal-header-border-width !default;
+$modal-header-padding:        24px 24px 0 24px !default;
+
+// Progress bars
+
+$progress-height:                   .5rem !default;
+$progress-bg:                       rgba(0, 0, 0, 0.3) !default;
+$progress-border-radius:            $border-radius-xl !default;
+$progress-box-shadow:               0px 0px 0px 3px rgba(0, 0, 0, 0.3) !default;
+$progress-bar-color:                $white !default;
+
+// Datepicker
+
+$datepicker-border-radius: $card-border-radius !default;
+$datepicker-dropdown-padding: 20px 22px !default;
+
+$datepicker-cell-transition: $transition-base !default;
+$datepicker-cell-hover-background: lighten($gray-400, 55%);
+$datepicker-cell-border-radius: 50% !default;
+$datepicker-cell-width: 36px !default;
+$datepicker-cell-height: 36px !default;
+
+$datepicker-disabled-cell-color: $gray-300 !default;
+$datepicker-disabled-old-new-color: $gray-500 !default;
+
+$datepicker-header-cell-border-radius: $border-radius !default;
+
+$datepicker-active-color: $white !default;
+$datepicker-active-background: theme-color("primary") !default;
+$datepicker-active-box-shadow:      none !default;
+
+$datepicker-range-background: theme-color("primary") !default;
+$datepicker-range-cell-focused-background: darken($datepicker-range-background, 5%);
+$datepicker-range-color: $white !default;
+$datepicker-range-highlighted-bg: $gray-200 !default;
+
+$datepicker-dropdown-border: lighten($gray-400, 40%);
+$datepicker-dropdown-bg: $white !default;
+$datepicker-highlighted-bg: $datepicker-active-background !default;
+
+// Sidebar
+
+$sidebar-width:            260px;
+$sidebar-transition:       .5s cubic-bezier(0.685, 0.0473, 0.346, 1);
+$sidebar-box-shadow:       0px 2px 22px 0 rgba(0, 0, 0,.20), 0px 2px 30px 0 rgba(0, 0, 0,.35);
+
+// Footer
+
+$footer-link-font-size: .85rem !default;
+$footer-bg: theme-color("secondary") !default;
+$footer-color: $gray-600 !default;
+$footer-link-color: $gray-600 !default;
+$footer-link-hover-color: $gray-700 !default;
+$footer-heading-color: $gray-600 !default;
+$footer-heading-font-size: $font-size-sm !default;

APP/assets/sass/dashboard/custom/_white-content.scss

@@ -0,0 +1,359 @@
+.white-content{
+
+  background: $light-bg;
+
+  .navbar.navbar-transparent .navbar-brand{
+    color: $black-states;
+  }
+
+  .navbar.navbar-transparent .navbar-toggler-bar{
+    background: $black-states;
+  }
+  .navbar.navbar-transparent .navbar-nav li a:not(.dropdown-item){
+      color: $black-states;
+      & i{
+        color: $black-states;
+      }
+  }
+
+  .navbar.navbar-transparent .navbar-minimize button i{
+    color: $black-states;
+  }
+
+  .navbar.navbar-transparent .search-bar.input-group i{
+    color: $black-states;
+  }
+  .navbar.navbar-transparent .search-bar.input-group .form-control{
+    color: $default;
+    &::placeholder{
+      color: $dark-gray;
+    }
+  }
+
+  .sidebar{
+    box-shadow: 0 2px 22px 0 rgba(0,0,0,.1), 0 4px 20px 0 rgba(0,0,0,.15);
+    p{
+      color: $opacity-8;
+    }
+  }
+
+  .main-panel{
+    background: $light-bg;
+  }
+
+  h1, h2, h3, h4, h5, h6, p, ol li, ul li, pre {
+    color: $black-states;
+  }
+
+  .font-icon-detail i{
+    color: $black;
+  }
+
+  .btn:not([data-action]):hover{
+    box-shadow:  0 4px 6px rgba(50,50,93,.11), 0 1px 3px rgba(0,0,0,.08);
+  }
+
+  .btn-neutral.btn-link{
+    color: rgba($black, 0.7);
+  }
+
+  //style for inputs
+
+  @include form-control-placeholder(rgba($black,0.4), 1);
+    .has-danger{
+      .form-control, .input-group-prepend .input-group-text{
+        border-color: $danger-states;
+      }
+    }
+
+    .input-group-prepend .input-group-text{
+      border-color: rgba($black-states,0.5);
+      color: $black-states;
+    }
+
+    .form-control{
+      color: $black;
+      border-color: rgba($black-states,0.5);
+      &:focus{
+        border-color: $primary;
+      }
+    }
+
+  .form-group.no-border,
+  .input-group.no-border{
+      .form-control,
+      .form-control + .input-group-prepend .input-group-text,
+      .form-control + .input-group-append .input-group-text,
+      .input-group-prepend .input-group-text,
+      .input-group-append .input-group-text{
+          background-color: $opacity-gray-3;
+          &:focus,
+          &:active,
+          &:active{
+              background-color: $opacity-gray-5;
+          }
+      }
+
+      .form-control{
+          &:focus{
+              & + .input-group-prepend .input-group-text,
+              & + .input-group-append .input-group-text{
+
+                  background-color: $transparent-bg;
+              }
+          }
+      }
+
+
+  }
+
+  .input-group[disabled]{
+      .input-group-prepend .input-group-text,
+      .input-group-append .input-group-text{
+          background-color: $black;
+      }
+  }
+
+  .form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control{
+    background: $light-gray;
+    border-color: rgba($black-states,0.3);
+  }
+
+  .input-group-focus{
+      .input-group-prepend .input-group-text,
+      .input-group-append .input-group-text,
+      .form-control{
+        border-color: $primary;
+      }
+
+      &.no-border{
+          .input-group-prepend .input-group-text,
+          .input-group-append .input-group-text{
+
+              background-color: $opacity-gray-5;
+          }
+      }
+  }
+  .input-group-prepend .input-group-text {
+      border-right: none;
+  }
+
+  .input-group-append .input-group-text {
+      border-left: none;
+  }
+
+  .has-danger .form-control:focus, .has-success.input-group-focus .input-group-append .input-group-text, .has-success.input-group-focus .input-group-prepend .input-group-text {
+    border-color: $danger-states;
+  }
+
+  .has-success .form-control:focus, .has-success.input-group-focus .input-group-append .input-group-text, .has-success.input-group-focus .input-group-prepend .input-group-text {
+    border-color: darken($success, 10%);
+  }
+
+  .btn.btn-link{
+    &:hover,&:active, &:focus{
+      color: $dark-gray !important;
+    }
+  }
+
+  .btn-group .btn.active{
+    box-shadow: 0 4px 6px rgba(50,50,93,.11), 0 1px 3px rgba(0,0,0,.08);
+  }
+
+  .bootstrap-switch.bootstrap-switch-off .bootstrap-switch-label{
+    background: darken($light-bg,10%);
+  }
+
+  .bootstrap-switch-off:before{
+    background: rgba(darken($light-bg,10%),0.5);
+
+  }
+
+  .card:not(.card-white){
+    background: $white;
+    box-shadow: 0 1px 15px 0 rgba(123, 123, 123, 0.05);
+    .card-header{
+      color: $black;
+      a[data-toggle="collapse"]{
+        color: $black;
+      }
+    }
+    .card-header .card-title, .card-body .card-title{
+      color: $black-states;
+    }
+
+    .card-body{
+      .card-category, .card-description{
+        color: $black-states;
+      }
+    }
+
+
+    label:not(.btn){
+      color: $default;
+    }
+
+     .pagination .page-item:not(.active) .page-link{
+       color: $black-states;
+        &:hover{
+          background: rgba($dark-gray,0.1);
+        }
+     }
+
+     &.nav-pills .nav-item .nav-link {
+        color: $nav-gray;
+        background-color: hsla(0,0%,87%,.3);
+        &:not(.active):hover{
+          background: hsla(0,0%,87%,.5);
+        }
+        &.active{
+          color: $white;
+
+        }
+    }
+
+    .tab-content .tab-pane {
+        color: $nav-gray;
+    }
+
+
+    .card{
+      box-shadow: none;
+    }
+
+    .card-collapse{
+      .card{
+        .card-body{
+          color: $dark-gray;
+        }
+      }
+    }
+
+    &.card-contributions{
+      span{
+        color: $dark-gray;
+      }
+      .bootstrap-switch-container{
+        span{
+          color: $white;
+        }
+      }
+    }
+    &.card-plain{
+      background: $transparent-bg;
+      box-shadow: none;
+    }
+  }
+
+  .table{
+
+      > tbody > tr > td {
+        color: rgba($black, 0.7) !important;
+
+    }
+
+    > thead > tr > th,
+    > tbody > tr > th,
+    > tfoot > tr > th,
+    > thead > tr > td,
+    > tbody > tr > td,
+    > tfoot > tr > td{
+        border-color: rgba($black, 0.2);
+        padding: 12px 7px;
+        vertical-align: middle;
+    }
+
+    > thead > tr > th, button.btn-neutral.btn-link{
+      color: rgba($black, 0.7);
+    }
+  }
+
+  .footer ul li a{
+    color: $black-states;
+  }
+
+  .footer .copyright{
+    color: $black-states;
+  }
+
+  .progress-container, .progress-container.progress.sm{
+      .progress{
+        background: rgba($black,0.1);
+        box-shadow: 0 0 0 3px rgba($black,0.1);
+        .progress-value{
+          color: $default;
+        }
+      }
+
+      .progress-badge{
+        color: $black-states;
+      }
+  }
+
+  .bootstrap-select button.dropdown-toggle{
+    border-color: rgba($black-states,0.5);
+    .filter-option{
+      color: $black-states;
+    }
+
+    &:after{
+      color: $black-states;
+    }
+
+  }
+
+  //style for calendar
+
+  .fc-basic-view .fc-day-number, .fc-basic-view .fc-week-number {
+      padding: 2px;
+      color: $default;
+  }
+
+  .fc-unthemed .fc-today{
+    background: darken($light-bg,10%);
+  }
+
+  .fc-unthemed .fc-content, .fc-unthemed .fc-divider, .fc-unthemed .fc-list-heading td, .fc-unthemed .fc-list-view, .fc-unthemed .fc-popover, .fc-unthemed .fc-row, .fc-unthemed tbody, .fc-unthemed td, .fc-unthemed th, .fc-unthemed thead {
+        border-color: $calendar-gray;
+    }
+
+   .fc-prev-button, .fc-next-button{
+     color: $default;
+     &:hover{
+       color: $default;
+     }
+   }
+
+   .fc button.btn-primary:not([data-action]):hover, .fc button:not([data-action]):hover {
+     box-shadow: 0 4px 6px rgba(50,50,93,.11), 0 1px 3px rgba(0,0,0,.08);
+   }
+
+   .full-page{
+     background: $light-bg;
+
+     h1, h2, h3, h4, h5, h6, p, ol li, ul li, pre {
+       color: $black-states;
+     }
+
+     .description{
+       color: $dark-gray;
+     }
+
+     .footer ul li a{
+       color: $black-states;
+     }
+
+     .footer .copyright{
+       color: $black-states;
+     }
+   }
+
+   .nav-pills .nav-item .nav-link:not(.active){
+     background: darken($light-bg,10%);
+     color: $black-states;
+     &:hover{
+       background: darken($white,20%);
+
+     }
+   }
+}

APP/assets/sass/dashboard/custom/cards/_card-chart.scss

@@ -0,0 +1,84 @@
+.card-chart {
+  overflow: hidden;
+  .card-header{
+    .card-title{
+      i{
+        font-size: 16px;
+        margin-right: 5px;
+        margin-bottom: 3px;
+      }
+    }
+    .card-category{
+      margin-bottom: 5px;
+    }
+  }
+    .card-body{
+      padding-left: 5px;
+      padding-right: 5px;
+      .tab-space{
+        padding: 0;
+      }
+    }
+  .table{
+    margin-bottom: 0;
+
+    td{
+      border-top: none;
+      border-bottom: 1px solid rgba($white,0.1);
+    }
+  }
+
+  .card-progress {
+    margin-top: 30px;
+    padding: 0 10px;
+  }
+
+  .chart-area {
+    height: 220px;
+    width: 100%;
+  }
+  .card-footer {
+    margin-top: 15px;
+
+    .stats{
+      color: $dark-gray;
+    }
+  }
+
+  .dropdown{
+    position: absolute;
+    right: 20px;
+    top: 20px;
+
+    .btn{
+      margin: 0;
+    }
+  }
+
+  &.card-chart-pie{
+    .chart-area{
+      padding: 10px 0 25px;
+      height: auto;
+    }
+
+    .card-title{
+      margin-bottom: 10px;
+      i{
+        font-size: 1rem;
+      }
+    }
+
+  }
+
+}
+
+@include media-breakpoint-down(sm) {
+  .card.card-chart {
+    .card-header .btn-group-toggle {
+      .tim-icons {
+        font-size: $font-size-base;
+        top: -1px;
+      }
+    }
+  }
+}

APP/assets/sass/dashboard/custom/cards/_card-map.scss

@@ -0,0 +1,3 @@
+.map{
+    height: 500px;
+}

APP/assets/sass/dashboard/custom/cards/_card-plain.scss

@@ -0,0 +1,16 @@
+.card-plain {
+  background: transparent;
+  box-shadow: none;
+
+  .card-header,
+  .card-footer {
+    margin-left: 0;
+    margin-right: 0;
+    background-color: transparent;
+  }
+
+  &:not(.card-subcategories).card-body {
+      padding-left: 0;
+      padding-right: 0;
+  }
+}

APP/assets/sass/dashboard/custom/cards/_card-profile.scss

@@ -0,0 +1,49 @@
+%card-profile{
+    margin-top: 30px;
+    text-align: center;
+
+    .card-body .card-title{
+        margin-top: 0;
+    }
+
+     [class*=col-]{
+        .card-description{
+            margin-bottom: 0;
+
+            & + .card-footer{
+                margin-top: 8px;
+            }
+        }
+
+
+     }
+
+    .card-header-avatar{
+        max-width: 130px;
+        max-height: 130px;
+        margin: -60px auto 0;
+
+        img{
+            border-radius: 50% !important;
+        }
+
+        & + .card-body{
+            margin-top: 15px;
+        }
+    }
+
+    &.card-plain{
+        .card-header-avatar{
+            margin-top: 0;
+        }
+    }
+    .card-body{
+        .card-avatar{
+            margin: 0 auto 30px;
+        }
+    }
+}
+
+.card-profile{
+  @extend %card-profile;
+}

APP/assets/sass/dashboard/custom/cards/_card-user.scss

@@ -0,0 +1,77 @@
+.card-user{
+  overflow: hidden;
+    .image{
+        height: 120px;
+    }
+
+    .author{
+        text-align: center;
+        text-transform: none;
+        margin-top: 25px;
+
+        a +  p.description{
+            margin-top: -7px;
+        }
+
+        .block{
+          position: absolute;
+          height: 100px;
+          width: 250px;
+          &.block-one{
+            @include linear-gradient-right(rgba($primary,0.6), rgba($primary,0));
+            @include nc-rotate(150deg,10);
+            margin-top: -90px;
+            margin-left: -50px;
+          }
+
+          &.block-two{
+            @include linear-gradient-right(rgba($primary,0.6), rgba($primary,0));
+            @include nc-rotate(30deg,10);
+            margin-top: -40px;
+            margin-left: -100px;
+          }
+
+          &.block-three{
+            @include linear-gradient-right(rgba($primary,0.6), rgba($primary,0));
+            @include nc-rotate(170deg,10);
+            margin-top: -70px;
+            right: -45px;
+
+          }
+
+          &.block-four{
+            @include linear-gradient-right(rgba($primary,0.6), rgba($primary,0));
+            @include nc-rotate(150deg,10);
+            margin-top: -25px;
+            right: -45px;
+
+          }
+        }
+    }
+
+    .avatar{
+      width: 124px;
+      height: 124px;
+      border: 5px solid lighten($black,5%);
+      border-bottom-color: $transparent-bg;
+      background-color: $transparent-bg;
+      position: relative;
+    }
+
+    .card-body{
+        min-height: 240px;
+    }
+
+    hr{
+        margin: 5px 15px;
+    }
+
+    .button-container{
+        margin-bottom: 6px;
+        text-align: center;
+    }
+
+    .card-description {
+      margin-top: 30px;
+    }
+}

APP/assets/sass/dashboard/custom/mixins/_alert.scss

@@ -0,0 +1,14 @@
+@mixin alert-variant($background, $border, $color) {
+    color: color-yiq($background);
+    // @include gradient-bg($background);
+    background-color: lighten($background, 5%);
+    border-color: $border;
+
+    hr {
+        border-top-color: darken($border, 5%);
+    }
+
+    .alert-link {
+        color: darken($color, 10%);
+    }
+}

APP/assets/sass/dashboard/custom/mixins/_background-variant.scss

@@ -0,0 +1,18 @@
+// Contextual backgrounds
+@mixin bg-variant($parent, $color) {
+    #{$parent} {
+        background-color: $color !important;
+    }
+    a#{$parent},
+    button#{$parent} {
+        @include hover-focus {
+            background-color: darken($color, 10%) !important;
+        }
+    }
+}
+
+@mixin bg-gradient-variant($parent, $color) {
+    #{$parent} {
+        background: linear-gradient(87deg, $color 0, adjust-hue($color, 25%) 100%) !important;
+    }
+}

APP/assets/sass/dashboard/custom/mixins/_badges.scss

@@ -0,0 +1,15 @@
+@mixin badge-variant($bg) {
+  color: color-yiq($bg);
+  background-color: $bg;
+
+  &[href] {
+    @include hover-focus {
+      color: color-yiq($bg);
+      text-decoration: none;
+      background-color: darken($bg, 3%);
+    }
+  }
+  .tagsinput-remove-link{
+      color: $white;
+  }
+}

APP/assets/sass/dashboard/custom/mixins/_buttons.scss

@@ -0,0 +1,343 @@
+@mixin btn-styles($btn-color, $btn-states-color) {
+  @include diagonal-gradient($btn-color, $btn-states-color);
+    background-color: $btn-color;
+    transition: all 0.15s ease;
+    box-shadow: none;
+    &.animation-on-hover:hover{
+      background-position: bottom left;
+      transition:0.3s ease-in-out;
+    }
+
+    &:hover,
+    &:focus,
+    &:active,
+    &.active,
+    &:active:focus,
+    &:active:hover,
+    &.active:focus,
+    &.active:hover
+     {
+        background-color: $btn-states-color !important;
+        background-image: linear-gradient(to bottom left, $btn-color, $btn-states-color, $btn-color) !important;
+        background-image: -webkit-linear-gradient(to bottom left, $btn-color, $btn-states-color, $btn-color) !important;
+        background-image: -o-linear-gradient(to bottom left, $btn-color, $btn-states-color, $btn-color) !important;
+        background-image: -moz-linear-gradient(to bottom left, $btn-color, $btn-states-color, $btn-color) !important;
+        color: $white;
+        box-shadow: none;
+    }
+
+    &:active{
+      box-shadow: none !important;
+      transform: translateY(1px) !important;
+      transition: all .15s ease;
+    }
+
+    &:not([data-action]):hover{
+
+        box-shadow:  2px 2px 6px rgba(0,0,0,0.4);
+        transform: translateY(-1px);
+        -webkit-transform: translateY(-1px);
+    }
+
+    &.disabled,
+    &:disabled,
+    &[disabled],
+    fieldset[disabled] & {
+        &,
+        &:hover,
+        &:focus,
+        &.focus,
+        &:active,
+        &.active {
+            background-color: $btn-color;
+            border-color: $btn-color;
+        }
+    }
+
+    // btn-neutral style
+    @if $btn-color == $white{
+        color: $primary;
+
+        &.btn-danger{
+            color: $danger;
+
+            &:hover,
+            &:focus,
+            &:active,
+            &:active:focus{
+                color: $danger-states;
+            }
+        }
+
+        &.btn-info{
+            color: $info;
+
+            &:hover,
+            &:focus,
+            &:active,
+            &:active:focus{
+                color: $info-states;
+            }
+        }
+
+        &.btn-warning{
+            color: $warning;
+
+            &:hover,
+            &:focus,
+            &:active,
+            &:active:focus{
+                color: $warning-states;
+            }
+        }
+
+        &.btn-success{
+            color: $success;
+
+            &:hover,
+            &:focus,
+            &:active,
+            &:active:focus{
+                color: $success-states;
+            }
+        }
+
+        &.btn-default{
+            color: $default;
+
+            &:hover,
+            &:focus,
+            &:active,
+            &:active:focus{
+                color: $default-states;
+            }
+        }
+
+        &.active,
+        &:active,
+        &:active:focus,
+        &:active:hover,
+        &.active:focus,
+        &.active:hover,
+        .show > &.dropdown-toggle,
+        .show > &.dropdown-toggle:focus,
+        .show > &.dropdown-toggle:hover {
+            background-color: $white;
+            color: $primary-states;
+            box-shadow: none;
+        }
+
+        &:hover,
+        &:focus{
+            color: $primary-states;
+
+            &:not(.nav-link){
+                box-shadow: none;
+            }
+
+        }
+
+    } @else {
+        color: $white;
+    }
+
+    &.btn-simple{
+        color: $btn-color;
+        border-color: $btn-color;
+        background: $transparent-bg;
+
+        &:hover,
+        &:focus,
+        &:active,
+        &:not(:disabled):not(.disabled):active{
+            color: $btn-color;
+            border-color: $btn-color;
+            background-color: $transparent-bg !important;
+            background-image: none !important;
+            box-shadow: none;
+        }
+
+        &.active{
+          border-color: $btn-color !important;
+          &:hover,
+          &:focus,
+          &:active,
+          &:not(:disabled):not(.disabled):active{
+              color: $white;
+              border-color: $btn-color;
+              background-image: linear-gradient(to bottom left, $btn-color, $btn-states-color, $btn-color) !important;
+              background-image: -webkit-linear-gradient(to bottom left, $btn-color, $btn-states-color, $btn-color) !important;
+              background-image: -o-linear-gradient(to bottom left, $btn-color, $btn-states-color, $btn-color) !important;
+              background-image: -moz-linear-gradient(to bottom left, $btn-color, $btn-states-color, $btn-color) !important;
+              background-color: $btn-states-color !important;
+              box-shadow: none;
+          }
+        }
+    }
+
+    &.btn-link{
+        color: $btn-color;
+        &:hover,
+        &:focus,
+        &:active{
+            background-color: $transparent-bg !important;
+            background-image: none !important;
+            color: $white !important;
+            text-decoration: none;
+            box-shadow: none;
+        }
+    }
+}
+
+@mixin button-variant($background, $border, $hover-background: darken($background, 0%), $hover-border: darken($border, 0%), $active-background: darken($background, 10%), $active-border: darken($border, 0%)) {
+    color: color-yiq($background);
+    @include gradient-bg($background);
+    border-color: $border;
+    @include box-shadow($btn-box-shadow);
+
+    @include hover {
+        color: color-yiq($hover-background);
+        @include gradient-bg($hover-background);
+        border-color: $hover-border;
+    }
+
+    &:focus,
+    &.focus {
+        // Avoid using mixin so we can pass custom focus shadow properly
+        @if $enable-shadows {
+            box-shadow: $btn-box-shadow, 0 0 0 $btn-focus-width rgba($border, .5);
+        }
+        @else {
+            box-shadow: 0 0 0 $btn-focus-width rgba($border, .5);
+        }
+    } // Disabled comes first so active can properly restyle
+    &.disabled,
+    &:disabled {
+        color: color-yiq($background);
+        background-color: $background;
+        border-color: $border;
+    }
+
+    &:not(:disabled):not(.disabled):active,
+    &:not(:disabled):not(.disabled).active,
+    .show>&.dropdown-toggle {
+        color: color-yiq($active-background);
+        background-color: $active-background;
+        @if $enable-gradients {
+            background-image: none; // Remove the gradient for the pressed/active state
+        }
+        border-color: $active-border;
+
+        &:focus {
+            // Avoid using mixin so we can pass custom focus shadow properly
+            @if $enable-shadows {
+                box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($border, .5);
+            }
+            @else {
+                box-shadow: 0 0 0 $btn-focus-width rgba($border, .5);
+            }
+        }
+    }
+}
+
+@mixin button-outline-variant($color, $color-hover: color-yiq($color), $active-background: $color, $active-border: $color) {
+    color: $color;
+    background-color: transparent;
+    background-image: none;
+    border-color: $color;
+
+    &:hover {
+        color: $color-hover;
+        background-color: $active-background;
+        border-color: $active-border;
+    }
+
+    &:focus,
+    &.focus {
+        box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
+    }
+
+    &.disabled,
+    &:disabled {
+        color: $color;
+        background-color: transparent;
+    }
+
+    &:not(:disabled):not(.disabled):active,
+    &:not(:disabled):not(.disabled).active,
+    .show>&.dropdown-toggle {
+        color: color-yiq($active-background);
+        background-color: $active-background;
+        border-color: $active-border;
+
+        &:focus {
+            // Avoid using mixin so we can pass custom focus shadow properly
+            @if $enable-shadows and $btn-active-box-shadow !=none {
+                box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5);
+            }
+            @else {
+                box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
+            }
+        }
+    }
+}
+
+// Button sizes
+@mixin btn-size($padding-vertical, $padding-horizontal, $font-size, $border){
+   font-size: $font-size;
+   border-radius: $border;
+   padding: $padding-vertical $padding-horizontal;
+
+   &.btn-simple{
+       padding: $padding-vertical - 1 $padding-horizontal - 1;
+   }
+
+}
+
+// for social buttons
+@mixin social-buttons-color ($color, $state-color){
+  @include diagonal-gradient($color, darken($color,20%));
+    //background-color: $color;
+    color: $white;
+    background-size: 210% 210%;
+    background-position: top right;
+    background-repeat: space;
+
+    &:focus,
+    &:active,
+    &:hover{
+        background-color: $state-color;
+        background-image: linear-gradient(to bottom left, $color, darken($color,20%), $color) !important;
+        background-image: -webkit-linear-gradient(to bottom left, $color, darken($color,20%), $color) !important;
+        background-image: -o-linear-gradient(to bottom left, $color, darken($color,20%), $color) !important;
+        background-image: -moz-linear-gradient(to bottom left, $color, darken($color,20%), $color) !important;
+        color: $white;
+    }
+
+    &.btn-simple{
+        color: $state-color;
+        background-color: $transparent-bg;
+        background-image: none !important;
+        box-shadow: none;
+        border-color: $state-color;
+
+        &:hover,
+        &:focus,
+        &:active{
+            color: $state-color;
+            border-color: $state-color;
+        }
+    }
+
+    &.btn-neutral{
+        color: $color;
+        background-color: $white;
+
+
+        &:hover,
+        &:focus,
+        &:active{
+            color: $state-color;
+        }
+    }
+}

APP/assets/sass/dashboard/custom/mixins/_dropdown.scss

@@ -0,0 +1,26 @@
+@mixin dropdown-colors($brand-color, $dropdown-header-color, $dropdown-color, $background-color ) {
+    background-color: $brand-color;
+
+    &:before{
+        color: $brand-color;
+    }
+
+    .dropdown-header:not([href]):not([tabindex]){
+        color: $dropdown-header-color;
+    }
+
+    .dropdown-item{
+        color: $dropdown-color;
+
+        &:hover,
+        &:focus{
+            background-color: $background-color;
+        }
+    }
+
+    .dropdown-divider{
+        background-color: $background-color;
+    }
+
+  
+}

APP/assets/sass/dashboard/custom/mixins/_forms.scss

@@ -0,0 +1,127 @@
+@mixin form-control-focus() {
+  &:focus {
+    color: $input-focus-color;
+    background-color: $input-focus-bg;
+    border-color: $input-focus-border-color;
+    outline: 0;
+    // Avoid using mixin so we can pass custom focus shadow properly
+    @if $enable-shadows {
+      box-shadow: $input-box-shadow, $input-focus-box-shadow;
+    } @else {
+      box-shadow: $input-focus-box-shadow;
+    }
+  }
+}
+
+
+@mixin form-validation-state($state, $color) {
+  .#{$state}-feedback {
+    display: none;
+    width: 100%;
+    margin-top: $form-feedback-margin-top;
+    font-size: $form-feedback-font-size;
+    color: $color;
+  }
+
+  .#{$state}-tooltip {
+    position: absolute;
+    top: 100%;
+    z-index: 5;
+    display: none;
+    max-width: 100%; // Contain to parent when possible
+    padding: .5rem;
+    margin-top: .1rem;
+    font-size: .875rem;
+    line-height: 1;
+    color: $white;
+    background-color: rgba($color, .8);
+    border-radius: .2rem;
+  }
+
+  .form-control,
+  .custom-select {
+    .was-validated &:#{$state},
+    &.is-#{$state} {
+      border-color: $color;
+
+      &:focus {
+        border-color: $color;
+        //box-shadow: 0 1px $input-focus-width 0 rgba($color, .75);
+      }
+
+      ~ .#{$state}-feedback,
+      ~ .#{$state}-tooltip {
+        display: block;
+      }
+    }
+  }
+
+  .form-check-input {
+    .was-validated &:#{$state},
+    &.is-#{$state} {
+      ~ .form-check-label {
+        color: $color;
+      }
+
+      ~ .#{$state}-feedback,
+      ~ .#{$state}-tooltip {
+        display: block;
+      }
+    }
+  }
+
+  .custom-control-input {
+    .was-validated &:#{$state},
+    &.is-#{$state} {
+      ~ .custom-control-label {
+        color: $color;
+
+        &::before {
+          background-color: lighten($color, 25%);
+          border-color: lighten($color, 25%);
+        }
+      }
+
+      ~ .#{$state}-feedback,
+      ~ .#{$state}-tooltip {
+        display: block;
+      }
+
+      &:checked {
+        ~ .custom-control-label::before {
+          @include gradient-bg(lighten($color, 10%));
+          border-color: lighten($color, 25%);
+        }
+      }
+
+      &:focus {
+        ~ .custom-control-label::before {
+          box-shadow: 0 0 0 1px $body-bg, 0 0 0 $input-focus-width rgba($color, .25);
+        }
+      }
+    }
+  }
+
+  // custom file
+  .custom-file-input {
+    .was-validated &:#{$state},
+    &.is-#{$state} {
+      ~ .custom-file-label {
+        border-color: $color;
+
+        &::before { border-color: inherit; }
+      }
+
+      ~ .#{$state}-feedback,
+      ~ .#{$state}-tooltip {
+        display: block;
+      }
+
+      &:focus {
+        ~ .custom-file-label {
+          box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
+        }
+      }
+    }
+  }
+}

APP/assets/sass/dashboard/custom/mixins/_icon.scss

@@ -0,0 +1,4 @@
+@mixin icon-shape-variant($color) {
+    color: saturate(darken($color, 10%), 10);
+    background-color: transparentize(lighten($color, 10%), .5);
+}

APP/assets/sass/dashboard/custom/mixins/_inputs.scss

@@ -0,0 +1,234 @@
+@mixin input-size($padding-vertical, $padding-horizontal){
+    padding: $padding-vertical $padding-horizontal;
+}
+
+@mixin form-control-placeholder($color, $opacity){
+   .form-control::-moz-placeholder{
+       color: $color;
+       @include opacity(1);
+   }
+   .form-control:-moz-placeholder{
+       color: $color;
+       @include opacity(1);
+   }
+   .form-control::-webkit-input-placeholder{
+       color: $color;
+       @include opacity(1);
+   }
+   .form-control:-ms-input-placeholder{
+       color: $color;
+       @include opacity(1);
+   }
+}
+
+@mixin placeholder() {
+  &::-moz-placeholder {@content; } // Firefox
+  &:-ms-input-placeholder {@content; } // Internet Explorer 10+
+  &::-webkit-input-placeholder  {@content; } // Safari and Chrome
+}
+
+@mixin light-form(){
+    border-radius: 0;
+    border:0;
+    padding: 0;
+    background-color: transparent;
+
+}
+
+
+@mixin form-control-lg-padding($padding-vertical, $padding-horizontal) {
+    .form-group.no-border.form-control-lg,
+    .input-group.no-border.form-control-lg{
+        .input-group-append .input-group-text{
+            padding: $padding-vertical 0 $padding-vertical $padding-horizontal;
+        }
+
+        .form-control{
+            padding: $padding-vertical $padding-horizontal;
+
+            & + .input-group-prepend .input-group-text,
+            & + .input-group-append .input-group-text{
+                padding: $padding-vertical $padding-horizontal $padding-vertical 0;
+            }
+
+
+        }
+    }
+
+    .form-group.form-control-lg,
+    .input-group.form-control-lg{
+        .form-control{
+            padding: $padding-vertical - 1 $padding-horizontal - 1;
+            height: 100%;
+
+            & + .input-group-prepend .input-group-text,
+            & + .input-group-append .input-group-text{
+                padding: $padding-vertical - 1 $padding-horizontal - 1 $padding-vertical - 1 0;
+            }
+        }
+
+        .input-group-prepend .input-group-text,
+        .input-group-append .input-group-text{
+            padding: $padding-vertical - 1 0 $padding-vertical $padding-horizontal - 1;
+
+            & + .form-control{
+                padding: $padding-vertical  $padding-horizontal - 1 $padding-vertical $padding-horizontal - 3;
+            }
+        }
+    }
+}
+
+
+
+@mixin input-base-padding($padding-vertical, $padding-horizontal) {
+    .form-group.no-border,
+    .input-group.no-border{
+        .form-control{
+            padding: $padding-vertical $padding-horizontal;
+
+            & + .input-group-prepend .input-group-text,
+            & + .input-group-append .input-group-text{
+                padding: $padding-vertical $padding-horizontal $padding-vertical 0;
+            }
+        }
+
+        .input-group-prepend .input-group-text,
+        .input-group-append .input-group-text{
+            padding: $padding-vertical 0 $padding-vertical $padding-horizontal;
+        }
+    }
+
+    .form-group,
+    .input-group{
+        .form-control{
+            padding: $padding-vertical - 1 $padding-horizontal - 1 $padding-vertical - 1 $padding-horizontal - 1;
+
+            & + .input-group-prepend .input-group-text,
+            & + .input-group-append .input-group-text{
+                padding: $padding-vertical - 1 $padding-horizontal - 1 $padding-vertical - 1 0;
+            }
+        }
+
+        .input-group-prepend .input-group-text,
+        .input-group-append .input-group-text{
+            padding: $padding-vertical - 1 0 $padding-vertical - 1 $padding-horizontal - 1;
+
+            & + .form-control,
+            & ~ .form-control{
+                padding:$padding-vertical - 1 $padding-horizontal $padding-vertical $padding-horizontal - 3;
+            }
+        }
+    }
+}
+
+
+//color1 = $opacity-5
+//color2 = $opacity-8
+//color3 = $white-color
+//color4 = $transparent-bg
+//color5 = $opacity-1
+//color6 = $opacity-2
+
+
+@mixin input-coloured-bg($color1, $color2, $color3, $color4, $color5, $color6) {
+    @include form-control-placeholder(rgba($white, 0.4), 1);
+
+    .form-control{
+        border-color: $color1;
+        color: $color2;
+
+        &:focus{
+            border-color: $color3;
+            background-color: $color4;
+            color: $color3;
+        }
+    }
+
+    .has-success,
+    .has-danger{
+        &:after{
+            color: $color3;
+        }
+    }
+
+    .has-danger{
+        .form-control{
+            background-color: $color4;
+        }
+    }
+
+    .input-group-prepend{
+      margin-right: 0;
+    }
+
+    .input-group-prepend .input-group-text,
+    .input-group-append .input-group-text{
+        background-color: rgba($background-black, 0.2);
+        border-color: $color1;
+        color: $color2;
+
+
+    }
+
+    .input-group-focus{
+        .input-group-prepend .input-group-text,
+        .input-group-append .input-group-text{
+            background-color: rgba($background-black, 0.3);
+            border-color: $color3;
+            color: $color3;
+        }
+    }
+
+    .form-group.no-border,
+    .input-group.no-border{
+        .form-control{
+            background-color: rgba($background-black,0.2);
+            color: $color2;
+
+            &:focus,
+            &:active,
+            &:active{
+                background-color: rgba($background-black,0.3);
+                color: $color3;
+            }
+        }
+
+        .form-control + .input-group-prepend .input-group-text,
+        .form-control + .input-group-append .input-group-text{
+            background-color: rgba($background-black,0.2);;
+
+            &:focus,
+            &:active,
+            &:active{
+                background-color: rgba($background-black,0.3);
+                color: $color3;
+            }
+        }
+
+        .form-control{
+            &:focus{
+                & + .input-group-prepend .input-group-text,
+                & + .input-group-append .input-group-text{
+                    background-color: rgba($background-black, 0.3);
+                    color: $color3;
+                }
+            }
+        }
+
+        .input-group-prepend .input-group-text,
+        .input-group-append .input-group-text{
+            background-color: rgba($background-black, 0.2);
+            border: none;
+            color: $color2;
+        }
+
+        &.input-group-focus{
+            .input-group-prepend .input-group-text,
+            .input-group-append .input-group-text{
+                background-color: rgba($background-black, 0.3);
+                color: $color3;
+            }
+        }
+    }
+
+}

APP/assets/sass/dashboard/custom/mixins/_modals.scss

@@ -0,0 +1,15 @@
+@mixin modal-colors($bg-color, $color) {
+    .modal-content{
+        background-color: $bg-color;
+        color: $color;
+    }
+
+    .modal-body p{
+      color: rgba($white, 0.8);
+    }
+
+    //inputs
+    @include input-coloured-bg($opacity-5, $white, $white, $transparent-bg, $opacity-1, $opacity-2);
+
+
+}

APP/assets/sass/dashboard/custom/mixins/_page-header.scss

@@ -0,0 +1,7 @@
+@mixin linear-gradient($color1, $color2){
+    background: $color1; /* For browsers that do not support gradients */
+    background: -webkit-linear-gradient(90deg, $color1 , $color2); /* For Safari 5.1 to 6.0 */
+    background: -o-linear-gradient(90deg, $color1, $color2); /* For Opera 11.1 to 12.0 */
+    background: -moz-linear-gradient(90deg, $color1, $color2); /* For Firefox 3.6 to 15 */
+    background: linear-gradient(0deg, $color1 , $color2); /* Standard syntax */
+}

APP/assets/sass/dashboard/custom/mixins/_popovers.scss

@@ -0,0 +1,41 @@
+@mixin popover-variant($background) {
+  background-color: $background;
+
+  .popover-header {
+    background-color: $background;
+    color: color-yiq($background);
+    opacity: .6;
+  }
+
+  .popover-body {
+    color: color-yiq($background);
+  }
+
+  .popover-header{
+    border-color: rgba(color-yiq($background), .2);
+  }
+
+  &.bs-popover-top {
+    .arrow::after {
+      border-top-color: $background;
+    }
+  }
+
+  &.bs-popover-right {
+    .arrow::after {
+      border-right-color: $background;
+    }
+  }
+
+  &.bs-popover-bottom {
+    .arrow::after {
+      border-bottom-color: $background;
+    }
+  }
+
+  &.bs-popover-left {
+    .arrow::after {
+      border-left-color: $background;
+    }
+  }
+}

APP/assets/sass/dashboard/custom/mixins/_vendor-prefixes.scss

@@ -0,0 +1,202 @@
+
+@mixin transform-translate-x($value){
+     -webkit-transform:  translate3d($value, 0, 0);
+        -moz-transform: translate3d($value, 0, 0);
+        -o-transform: translate3d($value, 0, 0);
+        -ms-transform: translate3d($value, 0, 0);
+        transform: translate3d($value, 0, 0);
+}
+
+@mixin transform-translate-y($value){
+     -webkit-transform:  translate3d(0,$value,0);
+        -moz-transform: translate3d(0,$value,0);
+        -o-transform: translate3d(0,$value,0);
+        -ms-transform: translate3d(0,$value,0);
+        transform: translate3d(0,$value,0);
+}
+
+@mixin transitions($time, $type){
+    -webkit-transition: all $time $type;
+    -moz-transition: all $time $type;
+    -o-transition: all $time $type;
+    -ms-transition: all $time $type;
+    transition: all $time $type;
+}
+
+@mixin diagonal-gradient($start-color, $end-color){
+  background: $start-color;
+  background-image: -webkit-linear-gradient(to bottom left, $start-color, $end-color, $start-color);
+  background-image: -o-linear-gradient(to bottom left, $start-color, $end-color, $start-color);
+  background-image: -moz-linear-gradient(to bottom left, $start-color, $end-color, $start-color);
+  background-image: linear-gradient(to bottom left, $start-color, $end-color, $start-color);
+  background-size: 210% 210%;
+  background-position: top right;
+}
+
+@mixin bar-animation($type){
+     -webkit-animation: $type 500ms linear 0s;
+     -moz-animation: $type 500ms linear 0s;
+     animation: $type 500ms 0s;
+     -webkit-animation-fill-mode: forwards;
+     -moz-animation-fill-mode: forwards;
+     animation-fill-mode: forwards;
+}
+
+@mixin rotate-180(){
+    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
+    -webkit-transform: rotate(180deg);
+    -ms-transform: rotate(180deg);
+    transform: rotate(180deg);
+}
+
+@mixin transform-translate-y-dropdown($value) {
+    -webkit-transform:  translate3d(0,$value,0) !important;
+       -moz-transform: translate3d(0,$value,0) !important;
+       -o-transform: translate3d(0,$value,0) !important;
+       -ms-transform: translate3d(0,$value,0) !important;
+       transform: translate3d(0,$value,0) !important;
+}
+
+@mixin linear-gradient($color, $states-color){
+    background: $color;
+    background: -webkit-linear-gradient(0deg, $color 0%, $states-color 100%);
+    background: -o-linear-gradient(0deg, $color 0%, $states-color 100%);
+    background: -moz-linear-gradient(0deg, $color 0%, $states-color 100%);
+    background: linear-gradient(0deg, $color 0%, $states-color 100%);
+}
+
+@mixin linear-gradient-right($color, $states-color){
+    background: $color;
+    background: -webkit-linear-gradient(to right, $color 0%, $states-color 100%);
+    background: -o-linear-gradient(to right, $color 0%, $states-color 100%);
+    background: -moz-linear-gradient(to right, $color 0%, $states-color 100%);
+    background: linear-gradient(to right, $color 0%, $states-color 100%);
+}
+
+@mixin sidebar-color($color){
+  &:after{
+    background: $color;
+  }
+
+  .nav li.active > a{
+    color: $color;
+
+    i{
+      color: $color;
+    }
+  }
+}
+
+@mixin transition-input-focus-color() {
+    -webkit-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
+    -moz-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
+    -o-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
+    -ms-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
+    transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
+}
+
+@mixin topbar-x-rotation(){
+    @keyframes topbar-x {
+      0% {top: 0px; transform: rotate(0deg); }
+      45% {top: 6px; transform: rotate(145deg); }
+      75% {transform: rotate(130deg); }
+      100% {transform: rotate(135deg); }
+    }
+    @-webkit-keyframes topbar-x {
+      0% {top: 0px; -webkit-transform: rotate(0deg); }
+      45% {top: 6px; -webkit-transform: rotate(145deg); }
+      75% {-webkit-transform: rotate(130deg); }
+      100% { -webkit-transform: rotate(135deg); }
+    }
+    @-moz-keyframes topbar-x {
+      0% {top: 0px; -moz-transform: rotate(0deg); }
+      45% {top: 6px; -moz-transform: rotate(145deg); }
+      75% {-moz-transform: rotate(130deg); }
+      100% { -moz-transform: rotate(135deg); }
+    }
+}
+
+@mixin topbar-back-rotation(){
+    @keyframes topbar-back {
+      0% { top: 6px; transform: rotate(135deg); }
+      45% { transform: rotate(-10deg); }
+      75% { transform: rotate(5deg); }
+      100% { top: 0px; transform: rotate(0); }
+    }
+
+    @-webkit-keyframes topbar-back {
+      0% { top: 6px; -webkit-transform: rotate(135deg); }
+      45% { -webkit-transform: rotate(-10deg); }
+      75% { -webkit-transform: rotate(5deg); }
+      100% { top: 0px; -webkit-transform: rotate(0); }
+    }
+
+    @-moz-keyframes topbar-back {
+      0% { top: 6px; -moz-transform: rotate(135deg); }
+      45% { -moz-transform: rotate(-10deg); }
+      75% { -moz-transform: rotate(5deg); }
+      100% { top: 0px; -moz-transform: rotate(0); }
+    }
+}
+
+@mixin bottombar-x-rotation(){
+    @keyframes bottombar-x {
+      0% {bottom: 0px; transform: rotate(0deg);}
+      45% {bottom: 6px; transform: rotate(-145deg);}
+      75% {transform: rotate(-130deg);}
+      100% {transform: rotate(-135deg);}
+    }
+    @-webkit-keyframes bottombar-x {
+      0% {bottom: 0px; -webkit-transform: rotate(0deg);}
+      45% {bottom: 6px; -webkit-transform: rotate(-145deg);}
+      75% {-webkit-transform: rotate(-130deg);}
+      100% {-webkit-transform: rotate(-135deg);}
+    }
+    @-moz-keyframes bottombar-x {
+      0% {bottom: 0px; -moz-transform: rotate(0deg);}
+      45% {bottom: 6px; -moz-transform: rotate(-145deg);}
+      75% {-moz-transform: rotate(-130deg);}
+      100% {-moz-transform: rotate(-135deg);}
+    }
+}
+
+@mixin bottombar-back-rotation{
+    @keyframes bottombar-back {
+      0% { bottom: 6px;transform: rotate(-135deg);}
+      45% { transform: rotate(10deg);}
+      75% { transform: rotate(-5deg);}
+      100% { bottom: 0px;transform: rotate(0);}
+    }
+    @-webkit-keyframes bottombar-back {
+      0% {bottom: 6px;-webkit-transform: rotate(-135deg);}
+      45% {-webkit-transform: rotate(10deg);}
+      75% {-webkit-transform: rotate(-5deg);}
+      100% {bottom: 0px;-webkit-transform: rotate(0);}
+    }
+    @-moz-keyframes bottombar-back {
+      0% {bottom: 6px;-moz-transform: rotate(-135deg);}
+      45% {-moz-transform: rotate(10deg);}
+      75% {-moz-transform: rotate(-5deg);}
+      100% {bottom: 0px;-moz-transform: rotate(0);}
+    }
+
+}
+
+
+@mixin nc-rotate($degrees, $rotation) {
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation});
+  -webkit-transform: rotate($degrees);
+  -moz-transform: rotate($degrees);
+  -ms-transform: rotate($degrees);
+  -o-transform: rotate($degrees);
+  transform: rotate($degrees);
+}
+
+@mixin nc-flip($horiz, $vert, $rotation) {
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation});
+  -webkit-transform: scale($horiz, $vert);
+  -moz-transform: scale($horiz, $vert);
+  -ms-transform: scale($horiz, $vert);
+  -o-transform: scale($horiz, $vert);
+  transform: scale($horiz, $vert);
+}

APP/assets/sass/dashboard/custom/mixins/opacity.scss

@@ -0,0 +1,8 @@
+// Opacity
+
+@mixin opacity($opacity) {
+  opacity: $opacity;
+  // IE8 filter
+  $opacity-ie: ($opacity * 100);
+  filter: #{alpha(opacity=$opacity-ie)};
+}

APP/assets/sass/dashboard/custom/utilities/_backgrounds.scss

@@ -0,0 +1,42 @@
+@each $color, $value in $colors {
+	@include bg-variant(".bg-#{$color}", $value);
+}
+
+@each $color, $value in $theme-colors {
+	@include bg-gradient-variant(".bg-gradient-#{$color}", $value);
+}
+
+@each $color, $value in $colors { 
+	@include bg-gradient-variant(".bg-gradient-#{$color}", $value);
+}
+
+
+// Sections
+
+section {
+    //background-color: section-color("primary");
+}
+
+@each $color, $value in $section-colors {
+    @include bg-variant(".section-#{$color}", $value);
+}
+
+@each $color, $value in $theme-colors {
+    @include bg-gradient-variant(".bg-gradient-#{$color}", $value);
+}
+
+
+// Shape (svg) fill colors
+@each $color, $value in $theme-colors {
+    .fill-#{$color}  {
+        fill: $value;
+    }
+
+    .stroke-#{$color}  {
+        stroke: $value;
+    }
+}
+
+.fill-opacity-8 {
+	fill-opacity: .8;
+}

APP/assets/sass/dashboard/custom/utilities/_floating.scss

@@ -0,0 +1,54 @@
+.floating {
+	animation: floating 3s ease infinite;
+	will-change: transform;
+
+	&:hover {
+        animation-play-state: paused;
+    }
+}
+
+.floating-lg {
+	animation: floating-lg 3s ease infinite;
+}
+
+.floating-sm {
+	animation: floating-sm 3s ease infinite;
+}
+
+// Keyframes
+
+@keyframes floating-lg {
+    0% {
+        transform: translateY(0px)
+    }
+    50% {
+        transform: translateY(15px)
+    }
+    100% {
+        transform: translateY(0px)
+    }
+}
+
+@keyframes floating {
+    0% {
+        transform: translateY(0px)
+    }
+    50% {
+        transform: translateY(10px)
+    }
+    100% {
+        transform: translateY(0px)
+    }
+}
+
+@keyframes floating-sm {
+    0% {
+        transform: translateY(0px)
+    }
+    50% {
+        transform: translateY(5px)
+    }
+    100% {
+        transform: translateY(0px)
+    }
+}

APP/assets/sass/dashboard/custom/utilities/_helper.scss

@@ -0,0 +1,62 @@
+// Image
+
+.img-center {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+// Clearfix
+
+.floatfix {
+    &:before,
+    &:after {
+        content: '';
+        display: table;
+    }
+    &:after {
+        clear: both;
+    }
+}
+
+// Overflows
+
+.overflow-visible {
+    overflow: visible !important;
+}
+.overflow-hidden {
+    overflow: hidden !important;
+}
+
+// Opacity classes
+
+.opacity-1 {
+    opacity: .1 !important;
+}
+.opacity-2 {
+    opacity: .2 !important;
+}
+.opacity-3 {
+    opacity: .3 !important;
+}
+.opacity-4 {
+    opacity: .4 !important;
+}
+.opacity-5 {
+    opacity: .5 !important;
+}
+.opacity-6 {
+    opacity: .6 !important;
+}
+.opacity-7 {
+    opacity: .7 !important;
+}
+.opacity-8 {
+    opacity: .8 !important;
+}
+.opacity-8 {
+    opacity: .9 !important;
+}
+.opacity-10 {
+    opacity: 1 !important;
+}

APP/assets/sass/dashboard/custom/utilities/_position.scss

@@ -0,0 +1,19 @@
+@each $size, $value in $spacers {
+	.top-#{$size} {
+		top: $value;
+	}
+	.right-#{$size} {
+		right: $value;
+	}
+	.bottom-#{$size} {
+		bottom: $value;
+	}
+	.left-#{$size} {
+		left: $value;
+	}
+}
+
+.center {
+	left: 50%;
+	transform: translateX(-50%);
+}

APP/assets/sass/dashboard/custom/utilities/_shadows.scss

@@ -0,0 +1,10 @@
+[class*="shadow"] {
+	@if $enable-transitions {
+        transition: $transition-base;
+    }
+}
+
+.shadow-sm--hover:hover { box-shadow: $box-shadow-sm !important; }
+.shadow--hover:hover { box-shadow: $box-shadow !important; }
+.shadow-lg--hover:hover { box-shadow: $box-shadow-lg !important; }
+.shadow-none--hover:hover { box-shadow: none !important; }

APP/assets/sass/dashboard/custom/utilities/_sizing.scss

@@ -0,0 +1,5 @@
+// Height values in vh
+
+.h-100vh {
+	height: 100vh !important;
+}

APP/assets/sass/dashboard/custom/utilities/_spacing.scss

@@ -0,0 +1,105 @@
+// Spacing columns vertically
+
+.row.row-grid > [class*="col-"] + [class*="col-"] {
+    margin-top: 3rem;
+}
+
+@include media-breakpoint-up(xl) {
+    .row.row-grid > [class*="col-lg-"] + [class*="col-lg-"] {
+        margin-top: 0;
+    }
+}
+@include media-breakpoint-up(lg) {
+    .row.row-grid > [class*="col-md-"] + [class*="col-md-"] {
+        margin-top: 0;
+    }
+}
+@include media-breakpoint-up(md) {
+    .row.row-grid > [class*="col-sm-"] + [class*="col-sm-"] {
+        margin-top: 0;
+    }
+}
+
+.row-grid + .row-grid {
+    margin-top: 3rem;
+}
+
+// Negative margins and paddings
+
+@include media-breakpoint-up(lg){
+    [class*="mt--"],
+    [class*="mr--"],
+    [class*="mb--"],
+    [class*="ml--"] {
+        position: relative;
+        z-index: 5;
+    }
+
+
+    // Large negative margins in pixels
+
+    .mt--100 {
+        margin-top: -100px !important;
+    }
+    .mr--100 {
+        margin-right: -100px !important;
+    }
+    .mb--100 {
+        margin-bottom: -100px !important;
+    }
+    .ml--100 {
+        margin-left: -100px !important;
+    }
+    .mt--150 {
+        margin-top: -150px !important;
+    }
+    .mb--150 {
+        margin-bottom: -150px !important;
+    }
+    .mt--200 {
+        margin-top: -200px !important;
+    }
+    .mb--200 {
+        margin-bottom: -200px !important;
+    }
+    .mt--300 {
+        margin-top: -300px !important;
+    }
+    .mb--300 {
+        margin-bottom: -300px !important;
+    }
+
+
+    // Large margins in pixels
+
+    .pt-100 {
+        padding-top: 100px !important;
+    }
+    .pb-100 {
+        padding-bottom: 100px !important;
+    }
+    .pt-150 {
+        padding-top: 150px !important;
+    }
+    .pb-150 {
+        padding-bottom: 150px !important;
+    }
+    .pt-200 {
+        padding-top: 200px !important;
+    }
+    .pb-200 {
+        padding-bottom: 200px !important;
+    }
+    .pt-250 {
+        padding-top: 250px !important;
+    }
+    .pb-250 {
+        padding-bottom: 250px !important;
+    }
+    .pt-300 {
+        padding-top: 300px!important;
+    }
+    .pb-300 {
+        padding-bottom: 300px!important;
+    }
+}

APP/assets/sass/dashboard/custom/utilities/_text.scss

@@ -0,0 +1,40 @@
+// Weight and italics
+
+.font-weight-300 { font-weight: 300 !important; }
+.font-weight-400 { font-weight: 400 !important; }
+.font-weight-500 { font-weight: 500 !important; }
+.font-weight-600 { font-weight: 600 !important; }
+.font-weight-700 { font-weight: 700 !important; }
+.font-weight-800 { font-weight: 800 !important; }
+.font-weight-900 { font-weight: 900 !important; }
+
+
+// Text decorations
+
+.text-underline { text-decoration: underline; }
+.text-through { text-decoration: line-through; }
+
+
+// Line heights
+
+.lh-100 { line-height: 1; }
+.lh-110 { line-height: 1.1; }
+.lh-120 { line-height: 1.2; }
+.lh-130 { line-height: 1.3; }
+.lh-140 { line-height: 1.4; }
+.lh-150 { line-height: 1.5; }
+.lh-160 { line-height: 1.6; }
+.lh-170 { line-height: 1.7; }
+.lh-180 { line-height: 1.8; }
+
+//Contextual colors
+
+.text-muted { color: $text-muted !important; }
+
+
+
+// Letter spacings
+
+.ls-1 { letter-spacing: .0625rem; }
+.ls-15 { letter-spacing: .09375rem; }
+.ls-2 { letter-spacing: 0.125rem; }

APP/assets/sass/dashboard/custom/utilities/_transform.scss

@@ -0,0 +1,8 @@
+@include media-breakpoint-up(xl) {
+	.transform-perspective-right {
+		transform: scale(1) perspective(1040px) rotateY(-11deg) rotateX(2deg) rotate(2deg);
+	}
+	.transform-perspective-left{
+		transform: scale(1) perspective(2000px) rotateY(11deg) rotateX(2deg) rotate(-2deg)
+	}
+}

APP/assets/sass/dashboard/custom/vendor/_plugin-bootstrap-switch.scss

@@ -0,0 +1,316 @@
+/* ========================================================================
+ * bootstrap-switch - v3.3.4
+ * http://www.bootstrap-switch.org
+ * ========================================================================
+ * Copyright 2012-2013 Mattia Larentis
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+
+
+
+
+
+
+
+
+
+
+
+
+
+ //* IMPORTANT! Creative Tim Notice: this file has major changes to fit the Black Dashboard 's design. If you want to use the plugin as it was before our changes, please get the old files from http://www.bootstrap-switch.org
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+.bootstrap-switch {
+  display: inline-block;
+  direction: ltr;
+  cursor: pointer;
+  border-radius: 30px;
+  border: 0;
+  position: relative;
+  text-align: left;
+  overflow: hidden;
+  box-shadow: 0 0px 10px rgba(0, 0, 0, 0.13);
+  margin-bottom: 10px;
+  line-height: 8px;
+  width: 59px !important;
+  height: 22px;
+  outline: none;
+  z-index: 0;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  vertical-align: middle;
+  -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
+  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
+  background: url("https://d2v9y0dukr6mq2.cloudfront.net/video/thumbnail/J9H9WF0/night-sky-full-of-stars-fantasy-animation-made-of-magical-sparkly-light-particles-flickering-on-a-purple-blue-gradient-background_bajacpz7x_thumbnail-full01.png");
+  background-position: center center;
+  background-size: cover;
+}
+
+.bootstrap-switch .bootstrap-switch-container {
+  display: inline-flex;
+  top: 0;
+  height: 22px;
+  border-radius: 4px;
+  -webkit-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
+  width: 100px !important;
+}
+.bootstrap-switch .bootstrap-switch-handle-on,
+.bootstrap-switch .bootstrap-switch-handle-off,
+.bootstrap-switch .bootstrap-switch-label {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  cursor: pointer;
+  display: inline-block !important;
+  height: 100%;
+  color: #fff;
+  padding: 6px 10px;
+  font-size: 11px;
+  text-indent: -5px;
+  line-height: 15px;
+  -webkit-transition: 0.25s ease-out;
+          transition: 0.25s ease-out;
+
+}
+.bootstrap-switch .bootstrap-switch-handle-on,
+.bootstrap-switch .bootstrap-switch-handle-off {
+  text-align: center;
+  z-index: 1;
+  float: left;
+  line-height: 11px;
+  width: 50% !important;
+}
+.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-brown,
+.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-brown {
+  color: #fff;
+  background: $brand-primary;
+}
+.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-blue,
+.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-blue {
+  color: #fff;
+  background: $brand-info;
+}
+.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-green,
+.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-green {
+  color: #fff;
+  background: $brand-success;
+}
+.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-orange,
+.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-orange {
+  background: $brand-warning;
+  color: #fff;
+}
+.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-red,
+.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-red {
+  color: #fff;
+  background: $brand-danger;
+}
+.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-default,
+.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default {
+  color: #fff;
+}
+.bootstrap-switch .bootstrap-switch-label {
+  text-align: center;
+  z-index: 100;
+  color: #333333;
+  background: #ffffff;
+  width: 18px !important;
+  height: 18px !important;
+  margin: 0px -11px;
+  border-radius: 20px;
+  position: absolute;
+  float: left;
+  top: 2px;
+  left: 51%;
+  padding: 0;
+  box-shadow: 0 1px 11px rgba(0, 0, 0, 0.25);
+}
+
+.bootstrap-switch.bootstrap-switch-off .bootstrap-switch-label{
+    background-color: rgba(156, 156 ,156 , .9);
+    left: 52%;
+}
+.bootstrap-switch.bootstrap-switch-on:hover .bootstrap-switch-label{
+    width: 27px !important;
+    margin-left: -20px;
+}
+.bootstrap-switch.bootstrap-switch-off:hover .bootstrap-switch-label{
+    width: 27px !important;
+    margin-left: -11px;
+}
+.bootstrap-switch .bootstrap-switch-handle-on {
+  border-bottom-left-radius: 3px;
+  border-top-left-radius: 3px;
+}
+.bootstrap-switch .bootstrap-switch-handle-off {
+  text-indent: 6px;
+}
+.bootstrap-switch input[type='radio'],
+.bootstrap-switch input[type='checkbox'] {
+  position: absolute !important;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  filter: alpha(opacity=0);
+  z-index: -1;
+}
+.bootstrap-switch input[type='radio'].form-control,
+.bootstrap-switch input[type='checkbox'].form-control {
+  height: auto;
+}
+.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-handle-on,
+.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-handle-off,
+.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-label {
+  padding: 1px 5px;
+  font-size: 12px;
+  line-height: 1.5;
+}
+.bootstrap-switch.bootstrap-switch-small .bootstrap-switch-handle-on,
+.bootstrap-switch.bootstrap-switch-small .bootstrap-switch-handle-off,
+.bootstrap-switch.bootstrap-switch-small .bootstrap-switch-label {
+  padding: 5px 10px;
+  font-size: 12px;
+  line-height: 1.5;
+}
+.bootstrap-switch.bootstrap-switch-large .bootstrap-switch-handle-on,
+.bootstrap-switch.bootstrap-switch-large .bootstrap-switch-handle-off,
+.bootstrap-switch.bootstrap-switch-large .bootstrap-switch-label {
+  padding: 6px 16px;
+  font-size: 18px;
+  line-height: 1.33;
+}
+.bootstrap-switch.bootstrap-switch-disabled,
+.bootstrap-switch.bootstrap-switch-readonly,
+.bootstrap-switch.bootstrap-switch-indeterminate {
+  cursor: default !important;
+}
+.bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-handle-on,
+.bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-handle-on,
+.bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-handle-on,
+.bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-handle-off,
+.bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-handle-off,
+.bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-handle-off,
+.bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-label,
+.bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-label,
+.bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-label {
+  opacity: 0.5;
+  filter: alpha(opacity=50);
+  cursor: default !important;
+}
+.bootstrap-switch.bootstrap-switch-animate .bootstrap-switch-container {
+  -webkit-transition: margin-left 0.5s;
+  transition: margin-left 0.5s;
+}
+.bootstrap-switch.bootstrap-switch-inverse .bootstrap-switch-handle-on {
+  border-bottom-left-radius: 0;
+  border-top-left-radius: 0;
+  border-bottom-right-radius: 3px;
+  border-top-right-radius: 3px;
+}
+.bootstrap-switch.bootstrap-switch-inverse .bootstrap-switch-handle-off {
+  border-bottom-right-radius: 0;
+  border-top-right-radius: 0;
+  border-bottom-left-radius: 3px;
+  border-top-left-radius: 3px;
+}
+.bootstrap-switch.bootstrap-switch-focused {
+  // border-color: #66afe9;
+  // outline: 0;
+  // -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
+  // box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
+}
+// .bootstrap-switch.bootstrap-switch-on .bootstrap-switch-label,
+// .bootstrap-switch.bootstrap-switch-inverse.bootstrap-switch-off .bootstrap-switch-label {
+//   border-bottom-right-radius: 3px;
+//   border-top-right-radius: 3px;
+// }
+// .bootstrap-switch.bootstrap-switch-off .bootstrap-switch-label,
+// .bootstrap-switch.bootstrap-switch-inverse.bootstrap-switch-on .bootstrap-switch-label {
+//   border-bottom-left-radius: 3px;
+//   border-top-left-radius: 3px;
+// }
+
+.bootstrap-switch.bootstrap-switch-on .bootstrap-switch-container{
+    margin-left: -2px !important;
+}
+
+.bootstrap-switch.bootstrap-switch-off .bootstrap-switch-container{
+    margin-left: -39px !important;
+}
+
+.bootstrap-switch.bootstrap-switch-on .bootstrap-switch-label{
+    &:before{
+        background-color: #FFFFFF;
+    }
+}
+
+.bootstrap-switch.bootstrap-switch-on .bootstrap-switch-red ~ .bootstrap-switch-default{
+    background-color: $brand-danger;
+}
+
+.bootstrap-switch.bootstrap-switch-on .bootstrap-switch-orange ~ .bootstrap-switch-default{
+    background-color: $brand-warning;
+}
+
+.bootstrap-switch.bootstrap-switch-on .bootstrap-switch-green ~ .bootstrap-switch-default{
+    background-color: $brand-success;
+}
+
+.bootstrap-switch.bootstrap-switch-on .bootstrap-switch-brown ~ .bootstrap-switch-default{
+    background-color: $brand-primary;
+}
+
+.bootstrap-switch.bootstrap-switch-on .bootstrap-switch-blue ~ .bootstrap-switch-default{
+    background-color: $brand-info;
+}
+
+.bootstrap-switch.bootstrap-switch-off .bootstrap-switch-red,
+.bootstrap-switch.bootstrap-switch-off .bootstrap-switch-brown,
+.bootstrap-switch.bootstrap-switch-off .bootstrap-switch-blue,
+.bootstrap-switch.bootstrap-switch-off .bootstrap-switch-orange,
+.bootstrap-switch.bootstrap-switch-off .bootstrap-switch-green{
+    background-color: $light-gray;
+}
+
+.bootstrap-switch-on .bootstrap-switch-handle-off,
+.bootstrap-switch-off .bootstrap-switch-handle-on{
+    opacity: 0;
+    visibility: hidden;
+}
+
+.bootstrap-switch-off:before{
+  position: absolute;
+  content: "";
+  height: 100%;
+  width: 100%;
+  top: 0;
+  right: 0;
+  background: rgba(16,16,16,0.7);
+}

APP/assets/sass/dashboard/custom/vendor/_plugin-perfect-scrollbar.scss

@@ -0,0 +1,116 @@
+/*
+ * Container style
+ */
+.ps {
+  overflow: hidden !important;
+  overflow-anchor: none;
+  -ms-overflow-style: none;
+  touch-action: auto;
+  -ms-touch-action: auto;
+}
+
+/*
+ * Scrollbar rail styles
+ */
+.ps__rail-x {
+  display: none;
+  opacity: 0;
+  transition: background-color .2s linear, opacity .2s linear;
+  -webkit-transition: background-color .2s linear, opacity .2s linear;
+  height: 15px;
+  /* there must be 'bottom' or 'top' for ps__rail-x */
+  bottom: 0px;
+  /* please don't change 'position' */
+  position: absolute;
+}
+
+.ps__rail-y {
+  display: none;
+  opacity: 0;
+  transition: background-color .2s linear, opacity .2s linear;
+  -webkit-transition: background-color .2s linear, opacity .2s linear;
+  width: 15px;
+  /* there must be 'right' or 'left' for ps__rail-y */
+  right: 0;
+  /* please don't change 'position' */
+  position: absolute;
+}
+
+.ps--active-x > .ps__rail-x,
+.ps--active-y > .ps__rail-y {
+  display: block;
+  background-color: transparent;
+}
+
+.ps:hover > .ps__rail-x,
+.ps:hover > .ps__rail-y,
+.ps--focus > .ps__rail-x,
+.ps--focus > .ps__rail-y,
+.ps--scrolling-x > .ps__rail-x,
+.ps--scrolling-y > .ps__rail-y {
+  opacity: 0.6;
+}
+
+.ps .ps__rail-x:hover,
+.ps .ps__rail-y:hover,
+.ps .ps__rail-x:focus,
+.ps .ps__rail-y:focus,
+.ps .ps__rail-x.ps--clicking,
+.ps .ps__rail-y.ps--clicking {
+  background-color: #eee;
+  opacity: 0.9;
+}
+
+/*
+ * Scrollbar thumb styles
+ */
+.ps__thumb-x {
+  background-color: #aaa;
+  border-radius: 6px;
+  transition: background-color .2s linear, height .2s ease-in-out;
+  -webkit-transition: background-color .2s linear, height .2s ease-in-out;
+  height: 6px;
+  /* there must be 'bottom' for ps__thumb-x */
+  bottom: 2px;
+  /* please don't change 'position' */
+  position: absolute;
+}
+
+.ps__thumb-y {
+  background-color: #aaa;
+  border-radius: 6px;
+  transition: background-color .2s linear, width .2s ease-in-out;
+  -webkit-transition: background-color .2s linear, width .2s ease-in-out;
+  width: 6px;
+  /* there must be 'right' for ps__thumb-y */
+  right: 2px;
+  /* please don't change 'position' */
+  position: absolute;
+}
+
+.ps__rail-x:hover > .ps__thumb-x,
+.ps__rail-x:focus > .ps__thumb-x,
+.ps__rail-x.ps--clicking .ps__thumb-x {
+  background-color: #999;
+  height: 11px;
+}
+
+.ps__rail-y:hover > .ps__thumb-y,
+.ps__rail-y:focus > .ps__thumb-y,
+.ps__rail-y.ps--clicking .ps__thumb-y {
+  background-color: #999;
+  width: 11px;
+}
+
+/* MS supports */
+@supports (-ms-overflow-style: none) {
+  .ps {
+    overflow: auto !important;
+  }
+}
+
+@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+  .ps {
+    overflow: auto !important;
+  }
+}

APP/assets/sass/dashboard/custom/vendor/element-ui/_plugin-datepicker.scss

@@ -0,0 +1,166 @@
+$box-shadow-lg: 0px 10px 50px 0px rgba(0, 0, 0, 0.2);
+
+.picker-card-styles {
+  box-shadow: $box-shadow-lg;
+  border: none;
+  border-radius: $border-radius-sm;
+}
+
+.el-picker-panel.time-select.el-popper {
+  @extend .picker-card-styles;
+}
+
+.el-picker-panel.el-date-picker {
+  width: 300px;
+  border: 0;
+  @extend .picker-card-styles;
+  .el-date-picker__header,
+  .el-picker-panel__content {
+    margin: 5px;
+  }
+}
+
+.el-date-picker__header,
+.el-date-range-picker__header {
+  &.el-date-picker__header--bordered {
+    border: none;
+  }
+
+  .el-picker-panel__icon-btn {
+    margin-top: 0;
+    height: 27px;
+    width: 27px;
+    color: $primary;
+
+    &:hover {
+      border-radius: 50%;
+      background-color: #eee;
+    }
+  }
+  .el-date-picker__header-label, div {
+    font-size: $font-size-base;
+    font-weight: $font-weight-light;
+    color: $primary;
+    &:hover {
+      background-color: #eee;
+      color: $primary;
+      border-radius: $border-radius-lg;
+    }
+  }
+}
+
+.el-date-picker,
+.time-select{
+
+  .time-select-item.selected:not(.disabled) {
+    color: $primary;
+  }
+  .el-picker-panel__content {
+    .el-date-table th {
+      color: $primary;
+      font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
+      font-size: $font-size-base;
+      font-weight: $font-weight-light;
+      border: none;
+    }
+  }
+
+  .el-picker-panel__content .el-date-table td,
+  .el-picker-panel__content .el-month-table td,
+  .el-picker-panel__content .el-year-table td {
+    height: 32px;
+    width: 32px;
+    padding: 0;
+
+    div {
+      &:hover {
+        color: $default;
+      }
+      height: 100%;
+      padding: 0;
+    }
+    .cell,
+    span {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-size: $font-size-base;
+      color: $default;
+
+      &:hover {
+        border-radius: 50%;
+        background: #eee;
+        cursor: pointer;
+        color: $default;
+      }
+    }
+
+    &.current span,
+    &.current a.cell {
+      background-color: $primary;
+      color: $white;
+      box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.2);
+      border-radius: 50%;
+    }
+    span {
+      width: 32px;
+      height: 32px;
+    }
+    .cell {
+      width: 40px;
+      height: 40px;
+    }
+  }
+}
+
+.el-date-picker .el-date-picker__time-header {
+  border: none;
+}
+
+.el-date-picker .el-time-panel.el-popper {
+  @extend .picker-card-styles;
+  button {
+    @extend .btn-primary, .btn-round, .btn-sm;
+    border: 0;
+    padding: 7px !important;
+    margin: 0 5px 0 0;
+    line-height: 14px;
+    font-weight: $font-weight-normal;
+    &:first-child {
+      @extend .btn-danger;
+    }
+  }
+}
+
+.el-date-editor.el-input, .el-date-editor.el-input__inner {
+  width: 100% !important;
+}
+
+.el-date-editor.el-input .el-input__inner {
+  padding-left: 30px !important
+}
+
+.el-date-picker .el-input {
+  .el-input__inner {
+    @extend .form-control;
+    color: $default;
+    &:hover {
+      color: $default;
+    }
+  }
+}
+
+.el-date-picker .el-picker-panel__footer {
+  border: none;
+  .el-button {
+    @extend .btn-primary, .btn-round, .btn-sm;
+    border: 0;
+    &:first-child {
+      @extend .btn-info;
+    }
+  }
+}
+
+.el-picker-panel .el-time-spinner.has-seconds .el-time-spinner__wrapper:nth-child(2) {
+  margin-left: 0;
+}

APP/assets/sass/dashboard/custom/vendor/element-ui/_plugin-inputs.scss

@@ -0,0 +1,34 @@
+@import "../../variables";
+
+.form-group {
+  .el-date-editor {
+    width: 100% !important;
+  }
+  .el-input__inner {
+    @extend .form-control;
+    width: 100%;
+  }
+  .el-select{
+    width: 100%;
+    .el-input__inner{
+      cursor: pointer !important;
+    }
+  }
+  .el-input-number{
+    width: 100%;
+    .plus-button{
+      @extend .btn-round, .btn-primary;
+      padding: 0 !important;
+      border: 0;
+    }
+    .el-input-number__decrease{
+      @extend .plus-button;
+      border-radius: $btn-round-radius 0 0 $btn-round-radius !important;
+    }
+    .el-input-number__increase{
+      @extend .plus-button;
+      border-radius: 0 $btn-round-radius $btn-round-radius 0 !important;
+    }
+  }
+}
+

APP/assets/sass/dashboard/custom/vendor/element-ui/_plugin-select.scss

@@ -0,0 +1,86 @@
+@import "../../variables";
+@mixin select($type, $color) {
+  .select-#{$type}.el-select {
+  }
+  .select-#{$type}.el-select .el-input  {
+    .el-input__suffix{
+      display: flex;
+      align-items: center;
+    }
+    .el-input__icon{
+      border-radius:20px;
+      height: 40px;
+      width: 30px;
+    }
+
+    input{
+      background-color: transparent;
+      border-width: 1px;
+      border-color: lighten($black,5%);
+      color: $color;
+    }
+    &:hover{
+      input{
+        border-color: $color !important;
+      }
+    }
+
+    .el-input__icon{
+      color:$color;
+    }
+  }
+  .select-#{$type}{
+
+    .el-tag, .el-tag.el-tag--info {
+      line-height: 24px;
+      background-color: $color;
+      border: none;
+      .el-tag__close{
+        width: 20px;
+        height: 20px;
+        background-color: transparent;
+
+        &:hover {
+         background-color: white;
+         color: $color;
+        }
+
+        &:before {
+          margin-top: 2px;
+        }
+
+      }
+    }
+    &.el-select-dropdown__item.selected,
+    &.el-select-dropdown__item.selected.hover {
+      background-color: $color;
+      color: white;
+    }
+  }
+
+  &.el-select-dropdown.is-multiple
+  .el-select-dropdown__item.selected{
+    &.select-#{$type}{
+      color: $color;
+    }
+  }
+}
+
+.el-select .el-input {
+  &:hover {
+    .el-input__icon,
+    input {
+      &::placeholder {
+        color: white;
+      }
+      color: white;
+    }
+  }
+}
+
+@include select('default', $default)
+@include select('info', $info)
+@include select('primary', $primary)
+@include select('success', $success)
+@include select('warning', $warning)
+@include select('danger', $danger)

APP/assets/sass/dashboard/custom/vendor/element-ui/_plugin-slider.scss

@@ -0,0 +1,29 @@
+@import "../../variables";
+
+@mixin slider($name, $color, $height: 6px){
+  .slider-#{$name}{
+    .el-slider__bar {
+      height: $height;
+      background-color: $color;
+    }
+    .el-tooltip{
+      border: none;
+    }
+    .el-slider__button{
+      &.hover,
+      &:hover,
+      &.dragging {
+        background-color: darken($color, 10%)
+      }
+      background-color: $color;
+      height: $height * 3;
+      width: $height * 3;
+    }
+  }
+}
+
+@include slider('info', $info)
+@include slider('primary', $primary)
+@include slider('success', $success)
+@include slider('warning', $warning)
+@include slider('danger', $danger)

APP/assets/sass/dashboard/custom/vendor/element-ui/_plugin-tables.scss

@@ -0,0 +1,60 @@
+@import "../../variables";
+
+// Element UI override
+
+.el-table table {
+  @extend .table;
+}
+
+// A bit hacky but overrides some element ui defaults so it looks better
+.el-table::before {
+  height: 0 !important;
+}
+
+.el-table table td, .el-table table th.is-leaf {
+  border-bottom: none;
+}
+
+.el-table.el-table--enable-row-hover table.el-table__body tr:hover > td {
+  background: inherit;
+}
+
+.el-table table .ascending .sort-caret.ascending {
+  border-bottom-color: $primary;
+}
+
+.el-table table .descending .sort-caret.descending {
+  border-top-color: $primary;
+}
+
+.el-table {
+  .td-total {
+    font-weight: $font-weight-bold;
+    font-size: $font-size-lg;
+    padding-top: 20px;
+    text-align: right;
+  }
+  .td-price {
+    font-size: 26px;
+    font-weight: $font-weight-light;
+    margin-top: 5px;
+    position: relative;
+    top: 4px;
+    text-align: right;
+  }
+
+  .table-actions {
+    .btn {
+      margin-right: 5px;
+      &:last-child {
+        margin-right: 0px;
+      }
+    }
+  }
+}
+
+div.el-table,
+.el-table table tr,
+.el-table table thead th {
+  background-color: transparent;
+}

APP/assets/sass/dashboard/custom/vendor/element-ui/_plugin-tags.scss

@@ -0,0 +1,38 @@
+@import "../../variables";
+
+@mixin tag($type, $color){
+  .input-new-tag.input-#{$type} .el-input__inner{
+    border-color: $color !important;
+  }
+  .el-tag,
+  span.el-tag.el-tag--#{$type} {
+    .el-tag__close {
+      color: white;
+    }
+    .el-tag__close:hover{
+      background-color: white;
+      color: $color;
+    }
+    background-color: $color;
+    border-color: $color;
+    color: white;
+  }
+}
+span.el-tag{
+  border-radius: 12px;
+  margin-left:10px;
+  margin-bottom:5px;
+}
+input.input-new-tag{
+  margin-left:10px;
+  width: 150px;
+  height: 32px;
+  display: inline;
+
+}
+
+@include tag('info', $info)
+@include tag('primary', $primary)
+@include tag('success', $success)
+@include tag('warning', $warning)
+@include tag('danger', $danger)

APP/components/Badge.vue

@@ -0,0 +1,34 @@
+<template>
+  <component :is="tag" class="badge" :class="`badge-${type}`">
+    <slot></slot>
+  </component>
+</template>
+<script>
+export default {
+  name: 'badge',
+  props: {
+    tag: {
+      type: String,
+      default: 'span',
+      description: 'Badge tag'
+    },
+    type: {
+      type: String,
+      default: 'default',
+      validator: value => {
+        let acceptedValues = [
+          'primary',
+          'info',
+          'success',
+          'warning',
+          'danger',
+          'default'
+        ];
+        return acceptedValues.indexOf(value) !== -1;
+      },
+      description: 'Badge type (primary|info|success|warning|danger|default)'
+    }
+  }
+};
+</script>
+<style></style>

APP/components/BaseAlert.vue

@@ -0,0 +1,69 @@
+<template>
+  <fade-transition>
+    <div
+      v-if="visible"
+      class="alert"
+      :class="[`alert-${type}`, { 'alert-with-icon': icon }]"
+      role="alert"
+    >
+      <slot v-if="!dismissible"></slot>
+      <template v-else>
+        <slot name="dismiss-icon">
+          <button
+            type="button"
+            class="close"
+            aria-label="Close"
+            @click="dismissAlert"
+          >
+            <i class="tim-icons icon-simple-remove"></i>
+          </button>
+        </slot>
+
+        <template v-if="icon || $slots.icon">
+          <slot name="icon">
+            <span data-notify="icon" :class="icon"></span>
+          </slot>
+        </template>
+
+        <span data-notify="message"> <slot></slot> </span>
+      </template>
+    </div>
+  </fade-transition>
+</template>
+<script>
+import { FadeTransition } from 'vue2-transitions';
+
+export default {
+  name: 'base-alert',
+  components: {
+    FadeTransition
+  },
+  props: {
+    type: {
+      type: String,
+      default: 'default',
+      description: 'Alert type'
+    },
+    dismissible: {
+      type: Boolean,
+      default: false,
+      description: 'Whether alert is dismissible (closeable)'
+    },
+    icon: {
+      type: String,
+      default: '',
+      description: 'Alert icon to display'
+    }
+  },
+  data() {
+    return {
+      visible: true
+    };
+  },
+  methods: {
+    dismissAlert() {
+      this.visible = false;
+    }
+  }
+};
+</script>

APP/components/BaseButton.vue

@@ -0,0 +1,81 @@
+<template>
+  <component
+    :is="tag"
+    :type="tag === 'button' ? nativeType : ''"
+    :disabled="disabled || loading"
+    @click="handleClick"
+    class="btn"
+    :class="[
+      { 'btn-round': round },
+      { 'btn-block': block },
+      { 'btn-wd': wide },
+      { 'btn-icon btn-fab': icon },
+      { [`btn-${type}`]: type },
+      { [`btn-${size}`]: size },
+      { 'btn-simple': simple },
+      { 'btn-link': link },
+      { disabled: disabled && tag !== 'button' }
+    ]"
+  >
+    <slot name="loading">
+      <i v-if="loading" class="fas fa-spinner fa-spin"></i>
+    </slot>
+    <slot></slot>
+  </component>
+</template>
+<script>
+export default {
+  name: 'base-button',
+  props: {
+    tag: {
+      type: String,
+      default: 'button',
+      description: 'Button html tag'
+    },
+    round: Boolean,
+    icon: Boolean,
+    block: Boolean,
+    loading: Boolean,
+    wide: Boolean,
+    disabled: Boolean,
+    type: {
+      type: String,
+      default: 'default',
+      description: 'Button type (primary|secondary|danger etc)'
+    },
+    nativeType: {
+      type: String,
+      default: 'button',
+      description: 'Button native type (e.g button, input etc)'
+    },
+    size: {
+      type: String,
+      default: '',
+      description: 'Button size (sm|lg)'
+    },
+    simple: {
+      type: Boolean,
+      description: 'Whether button is simple (outlined)'
+    },
+    link: {
+      type: Boolean,
+      description: 'Whether button is a link (no borders or background)'
+    }
+  },
+  methods: {
+    handleClick(evt) {
+      this.$emit('click', evt);
+    }
+  }
+};
+</script>
+<style scoped lang="scss">
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  /deep/ i {
+    padding: 0 3px;
+  }
+}
+</style>

APP/components/BaseDropdown.vue

@@ -0,0 +1,97 @@
+<template>
+  <component
+    :is="tag"
+    class="dropdown"
+    :class="[{ show: isOpen }, `drop${direction}`]"
+    @click="toggleDropDown"
+    v-click-outside="closeDropDown"
+  >
+    <slot name="title-container" :is-open="isOpen">
+      <component
+        :is="titleTag"
+        class="dropdown-toggle no-caret"
+        :class="titleClasses"
+        :aria-label="title || 'dropdown'"
+        :aria-expanded="isOpen"
+        data-toggle="dropdown"
+      >
+        <slot name="title" :is-open="isOpen">
+          <i :class="icon"></i> {{ title }}
+        </slot>
+      </component>
+    </slot>
+    <ul
+      class="dropdown-menu"
+      :class="[
+        { show: isOpen },
+        { 'dropdown-menu-right': menuOnRight },
+        menuClasses
+      ]"
+    >
+      <slot></slot>
+    </ul>
+  </component>
+</template>
+<script>
+export default {
+  name: 'base-dropdown',
+  props: {
+    tag: {
+      type: String,
+      default: 'div',
+      description: 'Dropdown html tag (e.g div, ul etc)'
+    },
+    titleTag: {
+      type: String,
+      default: 'button',
+      description: 'Dropdown title (toggle) html tag'
+    },
+    title: {
+      type: String,
+      description: 'Dropdown title'
+    },
+    direction: {
+      type: String,
+      default: 'down', // up | down
+      description: 'Dropdown menu direction (up|down)'
+    },
+    icon: {
+      type: String,
+      description: 'Dropdown icon'
+    },
+    titleClasses: {
+      type: [String, Object, Array],
+      description: 'Title css classes'
+    },
+    menuClasses: {
+      type: [String, Object],
+      description: 'Menu css classes'
+    },
+    menuOnRight: {
+      type: Boolean,
+      description: 'Whether menu should appear on the right'
+    }
+  },
+  data() {
+    return {
+      isOpen: false
+    };
+  },
+  methods: {
+    toggleDropDown() {
+      this.isOpen = !this.isOpen;
+      this.$emit('change', this.isOpen);
+    },
+    closeDropDown() {
+      this.isOpen = false;
+      this.$emit('change', false);
+    }
+  }
+};
+</script>
+<style lang="scss" scoped>
+.dropdown {
+  cursor: pointer;
+  user-select: none;
+}
+</style>

APP/components/BasePagination.vue

@@ -0,0 +1,148 @@
+<template>
+  <ul class="pagination" :class="paginationClass">
+    <li
+      class="page-item prev-page"
+      v-if="showArrows"
+      :class="{ disabled: value === 1 }"
+    >
+      <a class="page-link" aria-label="Previous" @click="prevPage">
+        <i class="tim-icons icon-double-left" aria-hidden="true"></i>
+      </a>
+    </li>
+    <li
+      class="page-item"
+      v-for="item in range(minPage, maxPage)"
+      :key="item"
+      :class="{ active: value === item }"
+    >
+      <a class="page-link" @click="changePage(item)">{{ item }}</a>
+    </li>
+    <li
+      v-if="showArrows"
+      class="page-item page-pre next-page"
+      :class="{ disabled: value === totalPages }"
+    >
+      <a class="page-link" aria-label="Next" @click="nextPage">
+        <i class="tim-icons icon-double-right" aria-hidden="true"></i>
+      </a>
+    </li>
+  </ul>
+</template>
+<script>
+export default {
+  name: 'base-pagination',
+  props: {
+    type: {
+      type: String,
+      default: 'primary',
+      validator: value => {
+        return [
+          'default',
+          'primary',
+          'danger',
+          'success',
+          'warning',
+          'info'
+        ].includes(value);
+      }
+    },
+    pageCount: {
+      type: Number,
+      default: 0
+    },
+    perPage: {
+      type: Number,
+      default: 10
+    },
+    showArrows: {
+      type: Boolean,
+      default: true
+    },
+    total: {
+      type: Number,
+      default: 0
+    },
+    value: {
+      type: Number,
+      default: 1
+    },
+    pagesToDisplay: {
+      type: Number,
+      default: 5
+    }
+  },
+  computed: {
+    paginationClass() {
+      return `pagination-${this.type}`;
+    },
+    totalPages() {
+      if (this.pageCount > 0) return this.pageCount;
+      if (this.total > 0) {
+        return Math.ceil(this.total / this.perPage);
+      }
+      return 1;
+    },
+    defaultPagesToDisplay() {
+      if (this.totalPages > 0 && this.totalPages < this.pagesToDisplay) {
+        return this.totalPages;
+      }
+      return this.pagesToDisplay;
+    },
+    minPage() {
+      if (this.value >= this.defaultPagesToDisplay) {
+        const pagesToAdd = Math.floor(this.defaultPagesToDisplay / 2);
+        const newMaxPage = pagesToAdd + this.value;
+        if (newMaxPage > this.totalPages) {
+          return this.totalPages - this.defaultPagesToDisplay + 1;
+        }
+        return this.value - pagesToAdd;
+      } else {
+        return 1;
+      }
+    },
+    maxPage() {
+      if (this.value >= this.defaultPagesToDisplay) {
+        const pagesToAdd = Math.floor(this.defaultPagesToDisplay / 2);
+        const newMaxPage = pagesToAdd + this.value;
+        if (newMaxPage < this.totalPages) {
+          return newMaxPage;
+        } else {
+          return this.totalPages;
+        }
+      } else {
+        return this.defaultPagesToDisplay;
+      }
+    }
+  },
+  methods: {
+    range(min, max) {
+      let arr = [];
+      for (let i = min; i <= max; i++) {
+        arr.push(i);
+      }
+      return arr;
+    },
+    changePage(item) {
+      this.$emit('input', item);
+    },
+    nextPage() {
+      if (this.value < this.totalPages) {
+        this.$emit('input', this.value + 1);
+      }
+    },
+    prevPage() {
+      if (this.value > 1) {
+        this.$emit('input', this.value - 1);
+      }
+    }
+  },
+  watch: {
+    perPage() {
+      this.$emit('input', 1);
+    },
+    total() {
+      this.$emit('input', 1);
+    }
+  }
+};
+</script>

APP/components/BaseProgress.vue

@@ -0,0 +1,79 @@
+<template>
+  <div
+    class="progress-container"
+    :class="{
+      [`progress-${type}`]: type,
+      [`progress-${size}`]: size
+    }"
+  >
+    <span class="progress-badge" v-if="label">{{ label }}</span>
+    <div class="progress">
+      <span class="progress-value" v-if="showValue && valuePosition === 'left'"
+        >{{ value }}%</span
+      >
+      <div
+        class="progress-bar"
+        :class="computedClasses"
+        role="progressbar"
+        :aria-valuenow="value"
+        aria-valuemin="0"
+        aria-valuemax="100"
+        :style="`width: ${value}%;`"
+      >
+        <slot>
+          <span
+            v-if="showValue && valuePosition === 'right'"
+            class="progress-value"
+            >{{ value }}%</span
+          >
+        </slot>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'base-progress',
+  props: {
+    striped: Boolean,
+    showValue: {
+      type: Boolean,
+      default: true
+    },
+    animated: Boolean,
+    label: String,
+    valuePosition: {
+      type: String,
+      default: 'left' // left | right
+    },
+    height: {
+      type: Number,
+      default: 1
+    },
+    type: {
+      type: String,
+      default: 'default'
+    },
+    size: {
+      type: String,
+      default: 'sm'
+    },
+    value: {
+      type: Number,
+      default: 0,
+      validator: value => {
+        return value >= 0 && value <= 100;
+      }
+    }
+  },
+  computed: {
+    computedClasses() {
+      return [
+        { 'progress-bar-striped': this.striped },
+        { 'progress-bar-animated': this.animated }
+      ];
+    }
+  }
+};
+</script>
+<style></style>

APP/components/BaseSwitch.vue

@@ -0,0 +1,48 @@
+<template>
+  <div
+    class="bootstrap-switch bootstrap-switch-wrapper bootstrap-switch-animate"
+    :class="switchClass"
+  >
+    <div class="bootstrap-switch-container" @click="triggerToggle()">
+      <span class="bootstrap-switch-handle-on ">
+        <slot name="on"> {{ onText }} </slot>
+      </span>
+      <span class="bootstrap-switch-label"></span>
+      <span class="bootstrap-switch-handle-off bootstrap-switch-default">
+        <slot name="off"> {{ offText }} </slot>
+      </span>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'base-switch',
+  props: {
+    value: [Array, Boolean],
+    onText: String,
+    offText: String
+  },
+  computed: {
+    switchClass() {
+      let base = 'bootstrap-switch-';
+      let state = this.model ? 'on' : 'off';
+      let classes = base + state;
+      return classes;
+    },
+    model: {
+      get() {
+        return this.value;
+      },
+      set(value) {
+        this.$emit('input', value);
+      }
+    }
+  },
+  methods: {
+    triggerToggle() {
+      this.model = !this.model;
+    }
+  }
+};
+</script>
+<style></style>

APP/components/BaseTable.vue

@@ -0,0 +1,70 @@
+<template>
+  <table class="table tablesorter" :class="tableClass">
+    <thead :class="theadClasses">
+      <tr>
+        <slot name="columns" :columns="columns">
+          <th v-for="column in columns" :key="column">{{ column }}</th>
+        </slot>
+      </tr>
+    </thead>
+    <tbody :class="tbodyClasses">
+      <tr v-for="(item, index) in data" :key="index">
+        <slot :row="item" :index="index">
+          <td
+            v-for="(column, index) in columns"
+            :key="index"
+            v-if="hasValue(item, column)"
+          >
+            {{ itemValue(item, column) }}
+          </td>
+        </slot>
+      </tr>
+    </tbody>
+  </table>
+</template>
+<script>
+export default {
+  name: 'base-table',
+  props: {
+    columns: {
+      type: Array,
+      default: () => [],
+      description: 'Table columns'
+    },
+    data: {
+      type: Array,
+      default: () => [],
+      description: 'Table data'
+    },
+    type: {
+      type: String, // striped | hover
+      default: '',
+      description: 'Whether table is striped or hover type'
+    },
+    theadClasses: {
+      type: String,
+      default: '',
+      description: '<thead> css classes'
+    },
+    tbodyClasses: {
+      type: String,
+      default: '',
+      description: '<tbody> css classes'
+    }
+  },
+  computed: {
+    tableClass() {
+      return this.type && `table-${this.type}`;
+    }
+  },
+  methods: {
+    hasValue(item, column) {
+      return item[column.toLowerCase()] !== 'undefined';
+    },
+    itemValue(item, column) {
+      return item[column.toLowerCase()];
+    }
+  }
+};
+</script>
+<style></style>

APP/components/Breadcrumb/Breadcrumb.vue

@@ -0,0 +1,17 @@
+<template>
+  <ul class="breadcrumb" :class="{ 'bg-transparent': transparent }">
+    <slot></slot>
+  </ul>
+</template>
+<script>
+export default {
+  name: 'breadcrumb',
+  props: {
+    transparent: {
+      type: Boolean,
+      default: true
+    }
+  }
+};
+</script>
+<style></style>

APP/components/Breadcrumb/BreadcrumbItem.vue

@@ -0,0 +1,16 @@
+<template>
+  <li class="breadcrumb-item" :class="{ active: active }"><slot></slot></li>
+</template>
+<script>
+export default {
+  name: 'breadcrumb-item',
+  props: {
+    active: {
+      type: Boolean,
+      default: false,
+      description: 'Whether breadcrumb item is active'
+    }
+  }
+};
+</script>
+<style></style>

APP/components/Breadcrumb/RouteBreadcrumb.vue

@@ -0,0 +1,48 @@
+<template>
+  <bread-crumb>
+    <BreadCrumbItem
+      v-for="(route, index) in $route.matched.slice()"
+      :key="route.name"
+      style="display:inline-block"
+    >
+      <nuxt-link
+        :to="{ name: route.name }"
+        v-if="index < $route.matched.length - 1"
+        class="breadcrumb-link"
+      >
+        {{ routeName }}
+      </nuxt-link>
+      <span v-else class="breadcrumb-current">{{ routeName }}</span>
+    </BreadCrumbItem>
+  </bread-crumb>
+</template>
+
+<script>
+import BreadCrumb from './Breadcrumb';
+import BreadCrumbItem from './BreadcrumbItem';
+
+export default {
+  name: 'route-breadcrumb',
+  components: {
+    BreadCrumb,
+    BreadCrumbItem
+  },
+  computed: {
+    routeName() {
+      const { path } = this.$route;
+      let parts = path.split('/')
+      return parts.map(p => this.capitalizeFirstLetter(p)).join(' ');
+    }
+  },
+  methods: {
+    capitalizeFirstLetter(string) {
+      if (!string || typeof string !== 'string') {
+        return ''
+      }
+      return string.charAt(0).toUpperCase() + string.slice(1);
+    }
+  }
+};
+</script>
+
+<style scoped></style>

APP/components/Cards/Card.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="card" :class="[type && `card-${type}`]">
+    <div class="card-image" v-if="$slots.image"><slot name="image"></slot></div>
+    <div
+      class="card-header"
+      v-if="$slots.header || title"
+      :class="headerClasses"
+    >
+      <slot name="header">
+        <h4 class="card-title">{{ title }}</h4>
+        <p class="card-category" v-if="subTitle">{{ subTitle }}</p>
+      </slot>
+    </div>
+    <div class="card-body" v-if="$slots.default" :class="bodyClasses">
+      <slot></slot>
+    </div>
+    <div class="card-image" v-if="$slots['image-bottom']">
+      <slot name="image-bottom"></slot>
+    </div>
+    <slot name="raw-content"></slot>
+    <div class="card-footer" :class="footerClasses" v-if="$slots.footer">
+      <hr v-if="showFooterLine" />
+      <slot name="footer"></slot>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'card',
+  props: {
+    title: {
+      type: String,
+      description: 'Card title'
+    },
+    subTitle: {
+      type: String,
+      description: 'Card subtitle'
+    },
+    type: {
+      type: String,
+      description: 'Card type (e.g primary/danger etc)'
+    },
+    showFooterLine: {
+      type: Boolean,
+      default: false
+    },
+    headerClasses: {
+      type: [String, Object, Array],
+      description: 'Card header css classes'
+    },
+    bodyClasses: {
+      type: [String, Object, Array],
+      description: 'Card body css classes'
+    },
+    footerClasses: {
+      type: [String, Object, Array],
+      description: 'Card footer css classes'
+    }
+  }
+};
+</script>
+<style></style>

APP/components/Charts/BarChart.js

@@ -0,0 +1,63 @@
+import { Bar, mixins } from 'vue-chartjs';
+
+export default {
+  name: 'bar-chart',
+  extends: Bar,
+  mixins: [mixins.reactiveProp],
+  props: {
+    extraOptions: Object,
+    gradientColors: {
+      type: Array,
+      default: () => [
+        'rgba(72,72,176,0.2)',
+        'rgba(72,72,176,0.0)',
+        'rgba(119,52,169,0)'
+      ],
+      validator: val => {
+        return val.length > 1;
+      }
+    },
+    gradientStops: {
+      type: Array,
+      default: () => [1, 0.4, 0],
+      validator: val => {
+        return val.length > 1;
+      }
+    }
+  },
+  data() {
+    return {
+      ctx: null
+    };
+  },
+  methods: {
+    updateGradients(chartData) {
+      if (!chartData) return;
+      const ctx =
+        this.ctx || document.getElementById(this.chartId).getContext('2d');
+      const gradientStroke = ctx.createLinearGradient(0, 230, 0, 50);
+
+      this.gradientStops.forEach((stop, index) => {
+        gradientStroke.addColorStop(stop, this.gradientColors[index]);
+      });
+
+      chartData.datasets.forEach(set => {
+        if (!set.backgroundColor) {
+          set.backgroundColor = gradientStroke;
+        }
+      });
+    }
+  },
+  mounted() {
+    this.$watch(
+      'chartData',
+      (newVal, oldVal) => {
+        this.updateGradients(newVal);
+        if (!oldVal) {
+          this.renderChart(this.chartData, this.extraOptions);
+        }
+      },
+      { immediate: true }
+    );
+  }
+};

APP/components/Charts/LineChart.js

@@ -0,0 +1,62 @@
+import { Line, mixins } from 'vue-chartjs';
+
+export default {
+  name: 'line-chart',
+  extends: Line,
+  mixins: [mixins.reactiveProp],
+  props: {
+    extraOptions: Object,
+    gradientColors: {
+      type: Array,
+      default: () => [
+        'rgba(72,72,176,0.2)',
+        'rgba(72,72,176,0.0)',
+        'rgba(119,52,169,0)'
+      ],
+      validator: val => {
+        return val.length > 1;
+      }
+    },
+    gradientStops: {
+      type: Array,
+      default: () => [1, 0.4, 0],
+      validator: val => {
+        return val.length > 1;
+      }
+    }
+  },
+  data() {
+    return {
+      ctx: null
+    };
+  },
+  methods: {
+    updateGradients(chartData) {
+      if (!chartData) return;
+      const ctx =
+        this.ctx || document.getElementById(this.chartId).getContext('2d');
+      const gradientStroke = ctx.createLinearGradient(0, 230, 0, 50);
+
+      this.gradientStops.forEach((stop, index) => {
+        gradientStroke.addColorStop(stop, this.gradientColors[index]);
+      });
+      chartData.datasets.forEach(set => {
+        if (!set.backgroundColor) {
+          set.backgroundColor = gradientStroke;
+        }
+      });
+    }
+  },
+  mounted() {
+    this.$watch(
+      'chartData',
+      (newVal, oldVal) => {
+        this.updateGradients(this.chartData);
+        if (!oldVal) {
+          this.renderChart(this.chartData, this.extraOptions);
+        }
+      },
+      { immediate: true }
+    );
+  }
+};

APP/components/Charts/config.js

@@ -0,0 +1,377 @@
+export const basicOptions = {
+  maintainAspectRatio: false,
+  legend: {
+    display: false
+  },
+  responsive: true
+};
+export let blueChartOptions = {
+  ...basicOptions,
+  tooltips: {
+    backgroundColor: '#f5f5f5',
+    titleFontColor: '#333',
+    bodyFontColor: '#666',
+    bodySpacing: 4,
+    xPadding: 12,
+    mode: 'nearest',
+    intersect: 0,
+    position: 'nearest'
+  },
+  scales: {
+    yAxes: [
+      {
+        barPercentage: 1.6,
+        gridLines: {
+          drawBorder: false,
+          color: 'rgba(29,140,248,0.0)',
+          zeroLineColor: 'transparent'
+        },
+        ticks: {
+          suggestedMin: 60,
+          suggestedMax: 125,
+          padding: 20,
+          fontColor: '#2380f7'
+        }
+      }
+    ],
+
+    xAxes: [
+      {
+        barPercentage: 1.6,
+        gridLines: {
+          drawBorder: false,
+          color: 'rgba(29,140,248,0.1)',
+          zeroLineColor: 'transparent'
+        },
+        ticks: {
+          padding: 20,
+          fontColor: '#2380f7'
+        }
+      }
+    ]
+  }
+};
+
+export let lineChartOptionsBlue = {
+  ...basicOptions,
+  tooltips: {
+    backgroundColor: '#f5f5f5',
+    titleFontColor: '#333',
+    bodyFontColor: '#666',
+    bodySpacing: 4,
+    xPadding: 12,
+    mode: 'nearest',
+    intersect: 0,
+    position: 'nearest'
+  },
+  responsive: true,
+  scales: {
+    yAxes: [
+      {
+        barPercentage: 1.6,
+        gridLines: {
+          drawBorder: false,
+          color: 'rgba(29,140,248,0.0)',
+          zeroLineColor: 'transparent'
+        },
+        ticks: {
+          suggestedMin: 60,
+          suggestedMax: 125,
+          padding: 20,
+          fontColor: '#9e9e9e'
+        }
+      }
+    ],
+
+    xAxes: [
+      {
+        barPercentage: 1.6,
+        gridLines: {
+          drawBorder: false,
+          color: 'rgba(29,140,248,0.1)',
+          zeroLineColor: 'transparent'
+        },
+        ticks: {
+          padding: 20,
+          fontColor: '#9e9e9e'
+        }
+      }
+    ]
+  }
+};
+
+export let barChartOptionsGradient = {
+  ...basicOptions,
+  tooltips: {
+    backgroundColor: '#f5f5f5',
+    titleFontColor: '#333',
+    bodyFontColor: '#666',
+    bodySpacing: 4,
+    xPadding: 12,
+    mode: 'nearest',
+    intersect: 0,
+    position: 'nearest'
+  },
+  responsive: true,
+  scales: {
+    yAxes: [
+      {
+        gridLines: {
+          drawBorder: false,
+          color: 'rgba(253,93,147,0.1)',
+          zeroLineColor: 'transparent'
+        },
+        ticks: {
+          suggestedMin: 60,
+          suggestedMax: 125,
+          padding: 20,
+          fontColor: '#9e9e9e'
+        }
+      }
+    ],
+
+    xAxes: [
+      {
+        gridLines: {
+          drawBorder: false,
+          color: 'rgba(253,93,147,0.1)',
+          zeroLineColor: 'transparent'
+        },
+        ticks: {
+          padding: 20,
+          fontColor: '#9e9e9e'
+        }
+      }
+    ]
+  }
+};
+
+export let pieChartOptions = {
+  ...basicOptions,
+  cutoutPercentage: 70,
+  tooltips: {
+    backgroundColor: '#f5f5f5',
+    titleFontColor: '#333',
+    bodyFontColor: '#666',
+    bodySpacing: 4,
+    xPadding: 12,
+    mode: 'nearest',
+    intersect: 0,
+    position: 'nearest'
+  },
+
+  scales: {
+    yAxes: [
+      {
+        display: 0,
+        ticks: {
+          display: false
+        },
+        gridLines: {
+          drawBorder: false,
+          zeroLineColor: 'transparent',
+          color: 'rgba(255,255,255,0.05)'
+        }
+      }
+    ],
+
+    xAxes: [
+      {
+        display: 0,
+        barPercentage: 1.6,
+        gridLines: {
+          drawBorder: false,
+          color: 'rgba(255,255,255,0.1)',
+          zeroLineColor: 'transparent'
+        },
+        ticks: {
+          display: false
+        }
+      }
+    ]
+  }
+};
+
+export let purpleChartOptions = {
+  ...basicOptions,
+  tooltips: {
+    backgroundColor: '#f5f5f5',
+    titleFontColor: '#333',
+    bodyFontColor: '#666',
+    bodySpacing: 4,
+    xPadding: 12,
+    mode: 'nearest',
+    intersect: 0,
+    position: 'nearest'
+  },
+  scales: {
+    yAxes: [
+      {
+        barPercentage: 1.6,
+        gridLines: {
+          drawBorder: false,
+          color: 'rgba(29,140,248,0.0)',
+          zeroLineColor: 'transparent'
+        },
+        ticks: {
+          suggestedMin: 60,
+          suggestedMax: 125,
+          padding: 20,
+          fontColor: '#9a9a9a'
+        }
+      }
+    ],
+
+    xAxes: [
+      {
+        barPercentage: 1.6,
+        gridLines: {
+          drawBorder: false,
+          color: 'rgba(225,78,202,0.1)',
+          zeroLineColor: 'transparent'
+        },
+        ticks: {
+          padding: 20,
+          fontColor: '#9a9a9a'
+        }
+      }
+    ]
+  }
+};
+
+export let orangeChartOptions = {
+  ...basicOptions,
+  tooltips: {
+    backgroundColor: '#f5f5f5',
+    titleFontColor: '#333',
+    bodyFontColor: '#666',
+    bodySpacing: 4,
+    xPadding: 12,
+    mode: 'nearest',
+    intersect: 0,
+    position: 'nearest'
+  },
+  scales: {
+    yAxes: [
+      {
+        barPercentage: 1.6,
+        gridLines: {
+          drawBorder: false,
+          color: 'rgba(29,140,248,0.0)',
+          zeroLineColor: 'transparent'
+        },
+        ticks: {
+          suggestedMin: 50,
+          suggestedMax: 110,
+          padding: 20,
+          fontColor: '#ff8a76'
+        }
+      }
+    ],
+
+    xAxes: [
+      {
+        barPercentage: 1.6,
+        gridLines: {
+          drawBorder: false,
+          color: 'rgba(220,53,69,0.1)',
+          zeroLineColor: 'transparent'
+        },
+        ticks: {
+          padding: 20,
+          fontColor: '#ff8a76'
+        }
+      }
+    ]
+  }
+};
+export let greenChartOptions = {
+  ...basicOptions,
+  tooltips: {
+    backgroundColor: '#f5f5f5',
+    titleFontColor: '#333',
+    bodyFontColor: '#666',
+    bodySpacing: 4,
+    xPadding: 12,
+    mode: 'nearest',
+    intersect: 0,
+    position: 'nearest'
+  },
+  scales: {
+    yAxes: [
+      {
+        barPercentage: 1.6,
+        gridLines: {
+          drawBorder: false,
+          color: 'rgba(29,140,248,0.0)',
+          zeroLineColor: 'transparent'
+        },
+        ticks: {
+          suggestedMin: 50,
+          suggestedMax: 125,
+          padding: 20,
+          fontColor: '#9e9e9e'
+        }
+      }
+    ],
+
+    xAxes: [
+      {
+        barPercentage: 1.6,
+        gridLines: {
+          drawBorder: false,
+          color: 'rgba(0,242,195,0.1)',
+          zeroLineColor: 'transparent'
+        },
+        ticks: {
+          padding: 20,
+          fontColor: '#9e9e9e'
+        }
+      }
+    ]
+  }
+};
+
+export let barChartOptions = {
+  ...basicOptions,
+  tooltips: {
+    backgroundColor: '#f5f5f5',
+    titleFontColor: '#333',
+    bodyFontColor: '#666',
+    bodySpacing: 4,
+    xPadding: 12,
+    mode: 'nearest',
+    intersect: 0,
+    position: 'nearest'
+  },
+  scales: {
+    yAxes: [
+      {
+        gridLines: {
+          drawBorder: false,
+          color: 'rgba(29,140,248,0.1)',
+          zeroLineColor: 'transparent'
+        },
+        ticks: {
+          suggestedMin: 60,
+          suggestedMax: 120,
+          padding: 20,
+          fontColor: '#9e9e9e'
+        }
+      }
+    ],
+    xAxes: [
+      {
+        gridLines: {
+          drawBorder: false,
+          color: 'rgba(29,140,248,0.1)',
+          zeroLineColor: 'transparent'
+        },
+        ticks: {
+          padding: 20,
+          fontColor: '#9e9e9e'
+        }
+      }
+    ]
+  }
+};

APP/components/Charts/utils.js

@@ -0,0 +1,11 @@
+export function hexToRGB(hex, alpha) {
+  const r = parseInt(hex.slice(1, 3), 16),
+    g = parseInt(hex.slice(3, 5), 16),
+    b = parseInt(hex.slice(5, 7), 16);
+
+  if (alpha) {
+    return `rgba(${r},${g},${b}, ${alpha})`;
+  } else {
+    return `rgb(${r},${g},${b})`;
+  }
+}

APP/components/CloseButton.vue

@@ -0,0 +1,35 @@
+<template>
+  <button
+    type="button"
+    class="navbar-toggler"
+    data-toggle="collapse"
+    @click="handleClick"
+    :data-target="`#${target}`"
+    :aria-controls="target"
+    :aria-expanded="expanded"
+    aria-label="Toggle navigation"
+  >
+    <span></span> <span></span>
+  </button>
+</template>
+<script>
+export default {
+  name: 'close-button',
+  props: {
+    target: {
+      type: [String, Number],
+      description: 'Close button target element'
+    },
+    expanded: {
+      type: Boolean,
+      description: 'Whether button is expanded (aria-expanded attribute)'
+    }
+  },
+  methods: {
+    handleClick(evt) {
+      this.$emit('click', evt);
+    }
+  }
+};
+</script>
+<style></style>

APP/components/Dashboard/TaskList.vue

@@ -0,0 +1,72 @@
+<template>
+  <base-table :data="tableData" thead-classes="text-primary">
+    <template slot-scope="{ row }">
+      <td><base-checkbox v-model="row.done"></base-checkbox></td>
+      <td>
+        <p class="title">{{ row.title }}</p>
+        <p class="text-muted">{{ row.description }}</p>
+      </td>
+      <td class="td-actions text-right">
+        <el-tooltip
+          content="Edit task"
+          effect="light"
+          :open-delay="300"
+          placement="top"
+        >
+          <base-button type="link">
+            <i class="tim-icons icon-pencil"></i>
+          </base-button>
+        </el-tooltip>
+      </td>
+    </template>
+  </base-table>
+</template>
+<script>
+import { BaseTable } from '@/components';
+
+export default {
+  components: {
+    BaseTable
+  },
+  data() {
+    return {
+      tableData: [
+        {
+          title: 'Update the Documentation',
+          description: 'Dwuamish Head, Seattle, WA 8:47 AM',
+          done: false
+        },
+        {
+          title: 'GDPR Compliance',
+          description:
+            'The GDPR is a regulation that requires businesses to protect the personal data and privacy of Europe citizens for transactions that occur within EU member states.',
+          done: true
+        },
+        {
+          title: 'Solve the issues',
+          description:
+            'Fifty percent of all respondents said they would be more likely to shop at a company',
+          done: false
+        },
+        {
+          title: 'Release v2.0.0',
+          description: 'Ra Ave SW, Seattle, WA 98116, SUA 11:19 AM',
+          done: false
+        },
+        {
+          title: 'Export the processed files',
+          description:
+            'The report also shows that consumers will not easily forgive a company once a breach exposing their personal data occurs.',
+          done: false
+        },
+        {
+          title: 'Arival at export process',
+          description: 'Capitol Hill, Seattle, WA 12:34 AM',
+          done: false
+        }
+      ]
+    };
+  }
+};
+</script>
+<style></style>

APP/components/Dashboard/UserTable.vue

@@ -0,0 +1,119 @@
+<template>
+  <base-table :data="table" thead-classes="text-primary">
+    <template slot="columns" slot-scope="{ columns }">
+      <th>#</th>
+      <th>Name</th>
+      <th>Job Position</th>
+      <th>Salary</th>
+      <th class="text-right">Milestone</th>
+      <th class="text-right">Actions</th>
+    </template>
+
+    <template slot-scope="{ row, index }">
+      <td class="text-center">
+        <div class="photo"><img :src="row.img" alt="photo" /></div>
+      </td>
+      <td>{{ row.name }}</td>
+      <td>{{ row.job }}</td>
+      <td class="text-center"><base-progress :value="row.progress" /></td>
+      <td class="text-right">€ 99,225</td>
+      <td class="text-right">
+        <el-tooltip
+          content="Refresh"
+          effect="light"
+          :open-delay="300"
+          placement="top"
+        >
+          <base-button
+            :type="index > 2 ? 'success' : 'neutral'"
+            icon
+            size="sm"
+            class="btn-link"
+          >
+            <i class="tim-icons icon-refresh-01"></i>
+          </base-button>
+        </el-tooltip>
+        <el-tooltip
+          content="Delete"
+          effect="light"
+          :open-delay="300"
+          placement="top"
+        >
+          <base-button
+            :type="index > 2 ? 'danger' : 'neutral'"
+            icon
+            size="sm"
+            class="btn-link"
+          >
+            <i class="tim-icons icon-simple-remove"></i>
+          </base-button>
+        </el-tooltip>
+      </td>
+    </template>
+  </base-table>
+</template>
+<script>
+import { BaseTable, BaseProgress } from '@/components';
+
+export default {
+  components: {
+    BaseTable,
+    BaseProgress
+  },
+  data() {
+    return {
+      table: [
+        {
+          id: 1,
+          img: 'img/tania.jpg',
+          name: 'Tania Mike',
+          job: 'Develop',
+          progress: 25,
+          salary: '€ 99,225'
+        },
+        {
+          id: 2,
+          img: 'img/robi.jpg',
+          name: 'John Doe',
+          job: 'CEO',
+          progress: 77,
+          salary: '€ 89,241'
+        },
+        {
+          id: 3,
+          img: 'img/lora.jpg',
+          name: 'Alexa Mike',
+          job: 'Design',
+          progress: 41,
+          salary: '€ 92,144'
+        },
+        {
+          id: 4,
+          img: 'img/jana.jpg',
+          name: 'Jana Monday',
+          job: 'Marketing',
+          progress: 50,
+          salary: '€ 49,990'
+        },
+        {
+          id: 5,
+          img: 'img/mike.jpg',
+          name: 'Paul Dickens',
+          job: 'Develop',
+          progress: 100,
+          salary: '€ 69,201'
+        },
+        {
+          id: 6,
+          img: 'img/emilyz.jpg',
+          name: 'Manuela Rico',
+          job: 'Manager',
+          progress: 15,
+          salary: '€ 99,201'
+        }
+      ]
+    };
+  }
+};
+</script>
+<style></style>

APP/components/Inputs/BaseCheckbox.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="form-check" :class="[{ disabled: disabled }, inlineClass]">
+    <label :for="cbId" class="form-check-label">
+      <input
+        :id="cbId"
+        class="form-check-input"
+        type="checkbox"
+        :disabled="disabled"
+        v-model="model"
+      />
+      <span class="form-check-sign"></span>
+      <slot> <span v-if="inline">&nbsp;</span> </slot>
+    </label>
+  </div>
+</template>
+<script>
+export default {
+  name: 'base-checkbox',
+  model: {
+    prop: 'checked'
+  },
+  props: {
+    checked: [Array, Boolean],
+    disabled: Boolean,
+    inline: Boolean,
+    hasError: Boolean
+  },
+  data() {
+    return {
+      cbId: '',
+      touched: false
+    };
+  },
+  computed: {
+    model: {
+      get() {
+        return this.checked;
+      },
+      set(check) {
+        if (!this.touched) {
+          this.touched = true;
+        }
+        this.$emit('input', check);
+      }
+    },
+    inlineClass() {
+      if (this.inline) {
+        return `form-check-inline`;
+      }
+    }
+  },
+  mounted() {
+    this.cbId = Math.random()
+      .toString(16)
+      .slice(2);
+  }
+};
+</script>

APP/components/Inputs/BaseInput.vue

@@ -0,0 +1,126 @@
+<template>
+  <div
+    class="form-group"
+    :class="{
+      'input-group-focus': focused,
+      'has-danger': error,
+      'has-success': !error && touched,
+      'has-label': label,
+      'has-icon': hasIcon,
+    }"
+  >
+    <slot name="label">
+      <label v-if="label"> {{ label }} {{ required ? '*' : '' }} </label>
+    </slot>
+    <div class="mb-0" :class="{'input-group': hasIcon}">
+      <slot name="addonLeft">
+        <span v-if="addonLeftIcon" class="input-group-prepend">
+          <div class="input-group-text"><i :class="addonLeftIcon"></i></div>
+        </span>
+      </slot>
+      <slot>
+        <input
+          :value="value"
+          v-bind="$attrs"
+          v-on="listeners"
+          class="form-control"
+          aria-describedby="addon-right addon-left"
+        />
+      </slot>
+      <slot name="addonRight">
+        <span v-if="addonRightIcon" class="input-group-append">
+          <div class="input-group-text"><i :class="addonRightIcon"></i></div>
+        </span>
+      </slot>
+    </div>
+
+    <slot name="error" v-if="error || $slots.error">
+      <label class="error">{{ error }}</label>
+    </slot>
+    <slot name="helperText"></slot>
+  </div>
+</template>
+<script>
+export default {
+  inheritAttrs: false,
+  name: 'base-input',
+  props: {
+    required: Boolean,
+    label: {
+      type: String,
+      description: 'Input label'
+    },
+    error: {
+      type: String,
+      description: 'Input error',
+      default: ''
+    },
+    value: {
+      type: [String, Number],
+      description: 'Input value'
+    },
+    addonRightIcon: {
+      type: String,
+      description: 'Input icon on the right'
+    },
+    addonLeftIcon: {
+      type: String,
+      description: 'Input icon on the left'
+    }
+  },
+  model: {
+    prop: 'value',
+    event: 'input'
+  },
+  data() {
+    return {
+      focused: false,
+      touched: false
+    };
+  },
+  computed: {
+    hasIcon() {
+      return this.hasLeftAddon || this.hasRightAddon
+    },
+    hasLeftAddon() {
+      const { addonLeft } = this.$slots;
+      return (
+        addonLeft !== undefined ||
+        this.addonLeftIcon !== undefined
+      );
+    },
+    hasRightAddon() {
+      const { addonRight } = this.$slots;
+      return (
+        addonRight !== undefined ||
+        this.addonRightIcon !== undefined
+      );
+    },
+    listeners() {
+      return {
+        ...this.$listeners,
+        input: this.onInput,
+        blur: this.onBlur,
+        focus: this.onFocus
+      };
+    }
+  },
+  methods: {
+    onInput(evt) {
+      if (!this.touched) {
+        this.touched = true;
+      }
+      this.$emit('input', evt.target.value);
+    },
+    onFocus(evt) {
+      this.focused = true;
+      this.$emit('focus', evt)
+    },
+    onBlur(evt) {
+      this.focused = false;
+      this.$emit('blur', evt)
+    }
+  }
+};
+</script>
+<style></style>

APP/components/Inputs/BaseRadio.vue

@@ -0,0 +1,67 @@
+<template>
+  <div
+    class="form-check form-check-radio"
+    :class="[inlineClass, { disabled: disabled }]"
+  >
+    <label :for="cbId" class="form-check-label">
+      <input
+        :id="cbId"
+        class="form-check-input"
+        type="radio"
+        :disabled="disabled"
+        :value="name"
+        v-model="model"
+      />
+      <slot></slot> <span class="form-check-sign"></span>
+    </label>
+  </div>
+</template>
+<script>
+export default {
+  name: 'base-radio',
+  props: {
+    name: {
+      type: [String, Number],
+      description: 'Radio label'
+    },
+    disabled: {
+      type: Boolean,
+      description: 'Whether radio is disabled'
+    },
+    value: {
+      type: [String, Boolean],
+      description: 'Radio value'
+    },
+    inline: {
+      type: Boolean,
+      description: 'Whether radio is inline'
+    }
+  },
+  data() {
+    return {
+      cbId: ''
+    };
+  },
+  computed: {
+    model: {
+      get() {
+        return this.value;
+      },
+      set(value) {
+        this.$emit('input', value);
+      }
+    },
+    inlineClass() {
+      if (this.inline) {
+        return `form-check-inline`;
+      }
+      return '';
+    }
+  },
+  mounted() {
+    this.cbId = Math.random()
+      .toString(16)
+      .slice(2);
+  }
+};
+</script>

APP/components/Inputs/IconCheckbox.vue

@@ -0,0 +1,45 @@
+<template>
+  <div
+    class="choice"
+    :class="{ active: checked }"
+    data-toggle="wizard-checkbox"
+    @click="updateValue"
+  >
+    <input
+      type="checkbox"
+      :name="name"
+      :disabled="disabled"
+      :checked="checked"
+    />
+    <div class="icon">
+      <slot name="icon"> <i :class="icon"></i> </slot>
+    </div>
+    <slot name="title">
+      <h6>{{ title }}</h6>
+    </slot>
+  </div>
+</template>
+<script>
+export default {
+  name: 'icon-checkbox',
+  model: {
+    prop: 'checked'
+  },
+  props: {
+    checked: {
+      type: Boolean,
+      default: false
+    },
+    name: String,
+    title: String,
+    icon: String,
+    disabled: Boolean
+  },
+  methods: {
+    updateValue() {
+      this.$emit('input', !this.checked);
+    }
+  }
+};
+</script>
+<style></style>

APP/components/Layout/Content.vue

@@ -0,0 +1,17 @@
+<template>
+  <div class="content">
+    <FadeTransition :duration="200" mode="out-in">
+      <!-- your content here -->
+      <nuxt></nuxt>
+    </FadeTransition>
+  </div>
+</template>
+<script>
+import { FadeTransition } from 'vue2-transitions';
+export default {
+  components: {
+    FadeTransition
+  }
+};
+</script>
+<style></style>