diff --git a/app/application/resources/views/private/layout/_navigation.blade.php b/app/application/resources/views/private/layout/_navigation.blade.php
index 17f9e92..ef472ee 100644
--- a/app/application/resources/views/private/layout/_navigation.blade.php
+++ b/app/application/resources/views/private/layout/_navigation.blade.php
@@ -2,7 +2,7 @@
     <li class="nav-item">
         <a href="{{ route('home') }}" class="nav-link d-flex align-items-center">
             <span class="sidebar-icon">
-                <img src="{{ Vite::asset('resources/volt/images/brand/dark.png') }}" height="20" width="20" alt="Captcha service Logo">
+                <img src="{{ Vite::asset('resources/volt-admin/images/brand/dark.png') }}" height="20" width="20" alt="Captcha service Logo">
             </span>
             <span class="mt-1 ms-1 sidebar-text">Captcha service</span>
         </a>
diff --git a/app/application/resources/views/private/layout/app.blade.php b/app/application/resources/views/private/layout/app.blade.php
index e486185..d3bb840 100644
--- a/app/application/resources/views/private/layout/app.blade.php
+++ b/app/application/resources/views/private/layout/app.blade.php
@@ -8,7 +8,7 @@
     <meta name="keywords" content="@yield('meta_keywords', '')" />
     <meta name="description" content="@yield('meta_description', '')" />
 
-    @vite('resources/volt/scss/app.scss')
+    @vite('resources/volt-admin/scss/app.scss')
 
     <meta name="msapplication-TileColor" content="#ffffff">
     <meta name="theme-color" content="#ffffff">
@@ -16,7 +16,7 @@
 <body>
     <nav class="navbar navbar-dark navbar-theme-primary px-4 col-12 d-lg-none">
         <a class="navbar-brand me-lg-5" href="{{ route('home') }}" aria-label="Captcha service">
-            <img class="navbar-brand-dark" src="{{ Vite::asset('resources/volt/images/brand/dark.png') }}" alt="Captcha service Logo" /> <img class="navbar-brand-light" src="{{ Vite::asset('resources/volt/images/brand/light.png') }}" alt="Captcha service Logo" />
+            <img class="navbar-brand-dark" src="{{ Vite::asset('resources/volt-admin/images/brand/dark.png') }}" alt="Captcha service Logo" /> <img class="navbar-brand-light" src="{{ Vite::asset('resources/volt-admin/images/brand/light.png') }}" alt="Captcha service Logo" />
         </a>
         <div class="d-flex align-items-center">
             <button class="navbar-toggler d-lg-none collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
@@ -120,7 +120,7 @@
         </footer>
     </main>
 
-    @vite('resources/volt/js/app.js')
+    @vite('resources/volt-admin/js/app.js')
     @stack('scripts')
 </body>
 </html>
diff --git a/app/application/resources/volt-admin/LICENSE.md b/app/application/resources/volt-admin/LICENSE.md
new file mode 100644
index 0000000..b852f2b
--- /dev/null
+++ b/app/application/resources/volt-admin/LICENSE.md
@@ -0,0 +1,7 @@
+Copyright 2021 Themesberg (Crafty Dwarf LLC)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
\ No newline at end of file
diff --git a/app/application/resources/volt/images/brand/dark.png b/app/application/resources/volt-admin/images/brand/dark.png
similarity index 100%
rename from app/application/resources/volt/images/brand/dark.png
rename to app/application/resources/volt-admin/images/brand/dark.png
diff --git a/app/application/resources/volt/images/brand/light.png b/app/application/resources/volt-admin/images/brand/light.png
similarity index 100%
rename from app/application/resources/volt/images/brand/light.png
rename to app/application/resources/volt-admin/images/brand/light.png
diff --git a/app/application/resources/volt-admin/js/app.js b/app/application/resources/volt-admin/js/app.js
new file mode 100644
index 0000000..d177628
--- /dev/null
+++ b/app/application/resources/volt-admin/js/app.js
@@ -0,0 +1,8 @@
+import.meta.glob([ '../images/**' ], {
+    eager: true,
+    query: '?url'
+});
+import './bootstrap';
+import './echo';
+import './volt';
+import './dashboard'
diff --git a/app/application/resources/volt/js/bootstrap.js b/app/application/resources/volt-admin/js/bootstrap.js
similarity index 100%
rename from app/application/resources/volt/js/bootstrap.js
rename to app/application/resources/volt-admin/js/bootstrap.js
diff --git a/app/application/resources/volt/js/dashboard.js b/app/application/resources/volt-admin/js/dashboard.js
similarity index 100%
rename from app/application/resources/volt/js/dashboard.js
rename to app/application/resources/volt-admin/js/dashboard.js
diff --git a/app/application/resources/volt/js/echo.js b/app/application/resources/volt-admin/js/echo.js
similarity index 100%
rename from app/application/resources/volt/js/echo.js
rename to app/application/resources/volt-admin/js/echo.js
diff --git a/app/application/resources/volt-admin/js/volt.js b/app/application/resources/volt-admin/js/volt.js
new file mode 100644
index 0000000..dc82184
--- /dev/null
+++ b/app/application/resources/volt-admin/js/volt.js
@@ -0,0 +1,91 @@
+/*
+
+=========================================================
+* Volt Pro - Premium Bootstrap 5 Dashboard
+=========================================================
+
+* Product Page: https://themesberg.com/product/admin-dashboard/volt-bootstrap-5-dashboard
+* Copyright 2021 Themesberg (https://www.themesberg.com)
+
+* Designed and coded by https://themesberg.com
+
+=========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. Please contact us to request a removal. Contact us if you want to remove it.
+
+*/
+
+"use strict";
+const d = document;
+
+import * as bootstrap from 'bootstrap';
+import SmoothScroll from 'smooth-scroll';
+
+d.addEventListener("DOMContentLoaded", function(event) {
+    // options
+    const breakpoints = {
+        sm: 540,
+        md: 720,
+        lg: 960,
+        xl: 1140
+    };
+
+    var sidebar = document.getElementById('sidebarMenu')
+    if(sidebar && d.body.clientWidth < breakpoints.lg) {
+        sidebar.addEventListener('shown.bs.collapse', function () {
+            document.querySelector('body').style.position = 'fixed';
+        });
+        sidebar.addEventListener('hidden.bs.collapse', function () {
+            document.querySelector('body').style.position = 'relative';
+        });
+    }
+
+    [].slice.call(d.querySelectorAll('[data-background]')).map(function(el) {
+        el.style.background = 'url(' + el.getAttribute('data-background') + ')';
+    });
+
+    [].slice.call(d.querySelectorAll('[data-background-lg]')).map(function(el) {
+        if(document.body.clientWidth > breakpoints.lg) {
+            el.style.background = 'url(' + el.getAttribute('data-background-lg') + ')';
+        }
+    });
+
+    [].slice.call(d.querySelectorAll('[data-background-color]')).map(function(el) {
+        el.style.background = 'url(' + el.getAttribute('data-background-color') + ')';
+    });
+
+    [].slice.call(d.querySelectorAll('[data-color]')).map(function(el) {
+        el.style.color = 'url(' + el.getAttribute('data-color') + ')';
+    });
+
+    //Tooltips
+    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
+    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
+        return new bootstrap.Tooltip(tooltipTriggerEl)
+    })
+
+
+    // Popovers
+    var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
+    var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
+      return new bootstrap.Popover(popoverTriggerEl)
+    })
+
+
+    // Datepicker
+    var datepickers = [].slice.call(d.querySelectorAll('[data-datepicker]'))
+    var datepickersList = datepickers.map(function (el) {
+        return new Datepicker(el, {
+            buttonClass: 'btn'
+          });
+    })
+
+    var scroll = new SmoothScroll('a[href*="#"]', {
+        speed: 500,
+        speedAsDuration: true
+    });
+
+    if(d.querySelector('.current-year')){
+        d.querySelector('.current-year').textContent = new Date().getFullYear();
+    }
+});
diff --git a/app/application/resources/volt-admin/scss/_variables.scss b/app/application/resources/volt-admin/scss/_variables.scss
new file mode 100644
index 0000000..e6a0b57
--- /dev/null
+++ b/app/application/resources/volt-admin/scss/_variables.scss
@@ -0,0 +1 @@
+$primary: #0d6efd;
diff --git a/app/application/resources/volt-admin/scss/app.scss b/app/application/resources/volt-admin/scss/app.scss
new file mode 100644
index 0000000..fca7402
--- /dev/null
+++ b/app/application/resources/volt-admin/scss/app.scss
@@ -0,0 +1,89 @@
+/*
+
+=========================================================
+* Volt - Free Bootstrap 5 Dashboard
+=========================================================
+
+* Product Page: https://themesberg.com/product/admin-dashboard/volt-bootstrap-5-dashboard
+* Copyright 2021 Themesberg (https://www.themesberg.com)
+
+* Designed and coded by https://themesberg.com
+
+=========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. Please contact us to request a removal. Contact us if you want to remove it.
+
+*/
+
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
+
+// update variables here
+@import "variables";
+
+@import "bootstrap/scss/functions";
+@import "volt/variables";
+
+// Third party
+@import 'vanillajs-datepicker/sass/datepicker.scss';
+@import "chartist/dist/scss/chartist.scss";
+
+// Bootstrap
+@import "bootstrap/scss/variables";
+@import "bootstrap/scss/mixins";
+@import "bootstrap/scss/utilities";
+
+// Modify utilities here
+@import "volt/utilities";
+
+// Bootstrap Layout & components
+@import "bootstrap/scss/root";
+@import "bootstrap/scss/reboot";
+@import "bootstrap/scss/type";
+@import "bootstrap/scss/images";
+@import "bootstrap/scss/containers";
+@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/nav";
+@import "bootstrap/scss/navbar";
+@import "bootstrap/scss/card";
+@import "bootstrap/scss/accordion";
+@import "bootstrap/scss/breadcrumb";
+@import "bootstrap/scss/pagination";
+@import "bootstrap/scss/badge";
+@import "bootstrap/scss/alert";
+@import "bootstrap/scss/progress";
+@import "bootstrap/scss/list-group";
+@import "bootstrap/scss/close";
+@import "bootstrap/scss/toasts";
+@import "bootstrap/scss/modal";
+@import "bootstrap/scss/tooltip";
+@import "bootstrap/scss/popover";
+@import "bootstrap/scss/carousel";
+@import "bootstrap/scss/spinners";
+
+// Helpers
+@import "bootstrap/scss/helpers";
+
+// Utilities
+@import "bootstrap/scss/utilities/api";
+// scss-docs-end import-stack
+
+// volt mixins & functions
+@import "volt/mixins";
+@import "volt/functions";
+
+// Layout
+@import "volt/layout";
+
+// Components
+@import "volt/components";
+
+// Forms
+@import "volt/forms";
+
+// write your custom styles here!
diff --git a/app/application/resources/volt-admin/scss/volt/_components.scss b/app/application/resources/volt-admin/scss/volt/_components.scss
new file mode 100644
index 0000000..d317837
--- /dev/null
+++ b/app/application/resources/volt-admin/scss/volt/_components.scss
@@ -0,0 +1,30 @@
+@import "components/body";
+@import "components/accordions";
+@import "components/animations";
+@import "components/alerts";
+@import "components/avatars";
+@import "components/badge";
+@import "components/buttons";
+@import "components/breadcrumb";
+@import "components/card";
+@import "components/carousel";
+@import "components/close";
+@import "components/custom-forms";
+@import "components/charts";
+@import "components/dropdown";
+@import "components/icons";
+@import "components/images";
+@import "components/list-group";
+@import "components/modal";
+@import "components/nav";
+@import "components/pagination";
+@import "components/popover";
+@import "components/progress";
+@import "components/shapes";
+@import "components/datepicker";
+@import "components/steps";
+@import "components/tables";
+@import "components/type";
+@import "components/timelines";
+@import "components/tooltip";
+@import "components/scrollbar";
diff --git a/app/application/resources/volt-admin/scss/volt/_forms.scss b/app/application/resources/volt-admin/scss/volt/_forms.scss
new file mode 100644
index 0000000..cecae7b
--- /dev/null
+++ b/app/application/resources/volt-admin/scss/volt/_forms.scss
@@ -0,0 +1,4 @@
+@import "forms/form-control";
+@import "forms/form-check";
+@import "forms/input-group";
+@import "forms/form-select";
\ No newline at end of file
diff --git a/app/application/resources/volt-admin/scss/volt/_functions.scss b/app/application/resources/volt-admin/scss/volt/_functions.scss
new file mode 100755
index 0000000..99ef591
--- /dev/null
+++ b/app/application/resources/volt-admin/scss/volt/_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);
+}
\ No newline at end of file
diff --git a/app/application/resources/volt-admin/scss/volt/_layout.scss b/app/application/resources/volt-admin/scss/volt/_layout.scss
new file mode 100644
index 0000000..f687e04
--- /dev/null
+++ b/app/application/resources/volt-admin/scss/volt/_layout.scss
@@ -0,0 +1,5 @@
+@import "layout/navbar";
+@import "layout/section";
+@import "layout/footer";
+@import "layout/sidebar";
+@import "layout/sidenav";
diff --git a/app/application/resources/volt-admin/scss/volt/_mixins.scss b/app/application/resources/volt-admin/scss/volt/_mixins.scss
new file mode 100755
index 0000000..45a7df7
--- /dev/null
+++ b/app/application/resources/volt-admin/scss/volt/_mixins.scss
@@ -0,0 +1,7 @@
+@import "mixins/animations"; 
+@import "mixins/background-variant";
+@import "mixins/icon"; 
+@import "mixins/modals";
+@import "mixins/popover";
+@import "mixins/transform"; 
+@import "mixins/utilities";
diff --git a/app/application/resources/volt-admin/scss/volt/_utilities.scss b/app/application/resources/volt-admin/scss/volt/_utilities.scss
new file mode 100755
index 0000000..f3c2c14
--- /dev/null
+++ b/app/application/resources/volt-admin/scss/volt/_utilities.scss
@@ -0,0 +1,95 @@
+// check docs https://v5.getbootstrap.com/docs/5.0/utilities/api/
+
+$utilities: map-merge(
+  $utilities,
+  (
+    "blur": (
+      property: backdrop-filter,
+      class: blur,
+      values: (
+        0: blur(0),
+        1: blur(1px),
+        2: blur(2px),
+        3: blur(3px),
+        4: blur(4px),
+        5: blur(5px),
+        6: blur(6px),
+        7: blur(7px),
+        8: blur(8px),
+        9: blur(91px),
+        10: blur(10px),
+        11: blur(11px),
+        12: blur(12px),
+        13: blur(13px),
+        14: blur(14px),
+      ),
+    ),
+    "opacity": (
+      property: opacity,
+      class: o,
+      values: (
+        0: 0,
+        25: 0.25,
+        50: 0.5,
+        75: 0.75,
+        100: 1,
+      ),
+    ),
+    "z-index": (
+      property: z-index,
+      class: z,
+      values: (
+        0: 0,
+        1: 1,
+        2: 2,
+        3: 3,
+        999: 999,
+      ),
+    ),
+    "viewport-height": (
+      property: height,
+      class: vh,
+      responsive: true,
+      values: (
+        100: 100vh,
+      ),
+    ),
+    "font-weight": (
+      property: font-weight,
+      class: fw,
+      values: (
+        light: $font-weight-light,
+        lighter: $font-weight-lighter,
+        normal: $font-weight-normal,
+        bold: $font-weight-bold,
+        bolder: $font-weight-bolder,
+        extrabold: $font-weight-extrabold,
+        black: $font-weight-black,
+      ),
+    ),
+    "max-width": (
+      property: max-width,
+      class: fmxw,
+      values: (
+        100: 100px,
+        200: 200px,
+        300: 300px,
+        400: 400px,
+        500: 500px,
+        999: 999px,
+      ),
+    ),
+    "min-height": (
+      property: min-height,
+      class: fmxh,
+      values: (
+        100: 100px,
+        200: 200px,
+        300: 300px,
+        400: 400px,
+        500: 500px,
+        999: 999px,
+      ),
+    ),
+  )
+);
diff --git a/app/application/resources/volt-admin/scss/volt/_variables.scss b/app/application/resources/volt-admin/scss/volt/_variables.scss
new file mode 100644
index 0000000..5c7abc0
--- /dev/null
+++ b/app/application/resources/volt-admin/scss/volt/_variables.scss
@@ -0,0 +1,1660 @@
+// Variables
+//
+// Variables should follow the `$component-state-property-size` formula for
+// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
+
+// Color system
+
+// Shades of grey
+$white   : #ffffff !default;
+$gray-50:  #F9FAFB !default;
+$gray-100: #F2F4F6 !default;
+$gray-200: #E5E7EB !default;
+$gray-300: #D1D5DB !default;
+$gray-400: #9CA3AF !default;
+$gray-500: #6B7280 !default;
+$gray-600: #4B5563 !default;
+$gray-700: #374151 !default;
+$gray-800: #1F2937 !default;
+$gray-900: #111827 !default;
+$dark    : $gray-800 !default;
+$black   : $gray-900 !default;
+
+// fusv-disable
+$grays: ("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) !default;
+// fusv-enable
+
+// Generic colors
+$blue       : #2361ce !default;
+$indigo     : #4F46E5 !default;
+$purple     : #7C3AED !default;
+$pink       : #EF4683 !default;
+$red        : #E11D48 !default;
+$orange     : #FBA918 !default;
+$brown      : #b9a084 !default;
+$yellow     : #f3c78e !default;
+$yellow-100 : #ffeed6 !default;
+$yellow-200 : #f5dbb8 !default;
+$green      : #10B981 !default;
+$teal       : #1E90FF !default;
+$cyan       : #63b1bd !default;
+$soft-indigo: #f5e8ff !default;
+$soft-green : #2CA58D !default;
+
+// scss-docs-start colors-map
+$colors: ("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,
+    "gray-dark": $gray-800) !default;
+// scss-docs-end colors-map
+
+// Color scheme
+$primary  : #1F2937 !default;
+$secondary: #f0bc74 !default;
+$tertiary : #31316A !default;
+
+// Series names and colors. This can be extended or customized as desired. Just add more series and colors.
+$ct-series-names: (a, b, c, d, e, f, g) !default !default;
+$ct-series-colors: (#262B40,
+    #F8BD7A,
+    #2CA58D,
+    #31316A,
+    #C96480,
+    #ffffff,
+    #F8BD7A,
+
+) !default;
+
+
+$success: $green !default;
+$info   : $blue !default;
+$warning: $yellow !default;
+$danger : $red !default;
+$gray   : $gray-900 !default;
+$light  : $gray-400 !default;
+$lighten: $gray-300 !default;
+$soft   : $gray-200 !default;
+$dark   : $dark !default;
+
+// Brands colors
+$facebook : #3b5999 !default;
+$twitter  : #1da1f2 !default;
+$google   : #DB4337 !default;
+$instagram: #e4405f !default;
+$pinterest: #bd081c !default;
+$youtube  : #cd201f !default;
+$slack    : #3aaf85 !default;
+$dribbble : #ea4c89 !default;
+$github   : #222222 !default;
+$dropbox  : #1E90FF !default;
+$twitch   : #4B367C !default;
+$paypal   : #ecb32c !default;
+$behance  : #0057ff !default;
+$reddit   : #E84422 !default;
+
+// Brand colors
+$brand-colors: ("facebook": $facebook,
+    "twitter": $twitter,
+    "google": $google,
+    "instagram": $instagram,
+    "pinterest": $pinterest,
+    "youtube": $youtube,
+    "slack": $slack,
+    "dribbble": $dribbble,
+    "dropbox": $dropbox,
+    "twitch": $twitch,
+    "paypal": $paypal,
+    "behance": $behance,
+    "reddit" : $reddit,
+    "github": $github) !default;
+
+// Theme colors
+$theme-colors: (
+    "primary": $primary,
+    "secondary": $secondary,
+    "tertiary": $tertiary,
+    "success": $success,
+    "info": $info,
+    "warning": $warning,
+    "danger": $danger,
+    "white": $white,
+    "indigo": $indigo,
+    "purple": $purple,
+    "yellow-100": $yellow-100,
+    "yellow-200": $yellow-200,
+    "gray-50": $gray-50,
+    "gray-100": $gray-100,
+    "gray-200": $gray-200,
+    "gray-300": $gray-300,
+    "gray-400": $gray-400,
+    "gray-500": $gray-500,
+    "gray-600": $gray-600,
+    "gray-700": $gray-700,
+    "gray-800": $gray-800,
+    "gray-900": $gray-900
+    ) !default;
+
+    // Navbar colors
+    $navbar-colors: ("primary": $primary,
+) !default;
+
+// Set a specific jump point for requesting color jumps
+$theme-color-interval: 8% !default;
+
+// The contrast ratio to reach against white, to determine if color changes from "light" to "dark". Acceptable values for WCAG 2.0 are 3, 4.5 and 7.
+// See https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast
+$min-contrast-ratio: 3 !default;
+
+// Customize the light and dark text colors for use in our color contrast function.
+$color-contrast-dark : $dark !default;
+$color-contrast-light: $white !default;
+
+// fusv-disable
+$blue-100: tint-color($blue, 8) !default;
+$blue-200: tint-color($blue, 6) !default;
+$blue-300: tint-color($blue, 4) !default;
+$blue-400: tint-color($blue, 2) !default;
+$blue-500: $blue !default;
+$blue-600: shade-color($blue, 2) !default;
+$blue-700: shade-color($blue, 4) !default;
+$blue-800: shade-color($blue, 6) !default;
+$blue-900: shade-color($blue, 8) !default;
+
+$indigo-100: tint-color($indigo, 8) !default;
+$indigo-200: tint-color($indigo, 6) !default;
+$indigo-300: tint-color($indigo, 4) !default;
+$indigo-400: tint-color($indigo, 2) !default;
+$indigo-500: $indigo !default;
+$indigo-600: shade-color($indigo, 2) !default;
+$indigo-700: shade-color($indigo, 4) !default;
+$indigo-800: shade-color($indigo, 6) !default;
+$indigo-900: shade-color($indigo, 8) !default;
+
+$purple-100: tint-color($purple, 8) !default;
+$purple-200: tint-color($purple, 6) !default;
+$purple-300: tint-color($purple, 4) !default;
+$purple-400: tint-color($purple, 2) !default;
+$purple-500: $purple !default;
+$purple-600: shade-color($purple, 2) !default;
+$purple-700: shade-color($purple, 4) !default;
+$purple-800: shade-color($purple, 6) !default;
+$purple-900: shade-color($purple, 8) !default;
+
+$pink-100: tint-color($pink, 8) !default;
+$pink-200: tint-color($pink, 6) !default;
+$pink-300: tint-color($pink, 4) !default;
+$pink-400: tint-color($pink, 2) !default;
+$pink-500: $pink !default;
+$pink-600: shade-color($pink, 2) !default;
+$pink-700: shade-color($pink, 4) !default;
+$pink-800: shade-color($pink, 6) !default;
+$pink-900: shade-color($pink, 8) !default;
+
+$red-100: tint-color($red, 8) !default;
+$red-200: tint-color($red, 6) !default;
+$red-300: tint-color($red, 4) !default;
+$red-400: tint-color($red, 2) !default;
+$red-500: $red !default;
+$red-600: shade-color($red, 2) !default;
+$red-700: shade-color($red, 4) !default;
+$red-800: shade-color($red, 6) !default;
+$red-900: shade-color($red, 8) !default;
+
+$orange-100: tint-color($orange, 8) !default;
+$orange-200: tint-color($orange, 6) !default;
+$orange-300: tint-color($orange, 4) !default;
+$orange-400: tint-color($orange, 2) !default;
+$orange-500: $orange !default;
+$orange-600: shade-color($orange, 2) !default;
+$orange-700: shade-color($orange, 4) !default;
+$orange-800: shade-color($orange, 6) !default;
+$orange-900: shade-color($orange, 8) !default;
+
+$yellow-100: tint-color($yellow, 8) !default;
+$yellow-200: tint-color($yellow, 6) !default;
+$yellow-300: tint-color($yellow, 4) !default;
+$yellow-400: tint-color($yellow, 2) !default;
+$yellow-500: $yellow !default;
+$yellow-600: shade-color($yellow, 2) !default;
+$yellow-700: shade-color($yellow, 4) !default;
+$yellow-800: shade-color($yellow, 6) !default;
+$yellow-900: shade-color($yellow, 8) !default;
+
+$green-100: tint-color($green, 8) !default;
+$green-200: tint-color($green, 6) !default;
+$green-300: tint-color($green, 4) !default;
+$green-400: tint-color($green, 2) !default;
+$green-500: $green !default;
+$green-600: shade-color($green, 2) !default;
+$green-700: shade-color($green, 4) !default;
+$green-800: shade-color($green, 6) !default;
+$green-900: shade-color($green, 8) !default;
+
+$teal-100: tint-color($teal, 8) !default;
+$teal-200: tint-color($teal, 6) !default;
+$teal-300: tint-color($teal, 4) !default;
+$teal-400: tint-color($teal, 2) !default;
+$teal-500: $teal !default;
+$teal-600: shade-color($teal, 2) !default;
+$teal-700: shade-color($teal, 4) !default;
+$teal-800: shade-color($teal, 6) !default;
+$teal-900: shade-color($teal, 8) !default;
+
+$cyan-100: tint-color($cyan, 8) !default;
+$cyan-200: tint-color($cyan, 6) !default;
+$cyan-300: tint-color($cyan, 4) !default;
+$cyan-400: tint-color($cyan, 2) !default;
+$cyan-500: $cyan !default;
+$cyan-600: shade-color($cyan, 2) !default;
+$cyan-700: shade-color($cyan, 4) !default;
+$cyan-800: shade-color($cyan, 6) !default;
+$cyan-900: shade-color($cyan, 8) !default;
+// fusv-enable
+
+// Characters which are escaped by the escape-svg function
+$escaped-characters: (("<", "%3c"),
+    (">", "%3e"),
+    ("#", "%23"),
+    ("(", "%28"),
+    (")", "%29"),
+) !default;
+
+// Options
+//
+// Quickly modify global styling by enabling or disabling optional features.
+
+$enable-caret               : true !default;
+$enable-rounded             : true !default;
+$enable-shadows             : true !default;
+$enable-gradients           : false !default;
+$enable-transitions         : true !default;
+$enable-reduced-motion      : true !default;
+$enable-grid-classes        : true !default;
+$enable-button-pointers     : true !default;
+$enable-rfs                 : true !default;
+$enable-validation-icons    : true !default;
+$enable-negative-margins    : true !default;
+$enable-deprecation-messages: true !default;
+$enable-important-utilities : true !default;
+
+// Gradient
+//
+// The gradient which is added to components if `$enable-gradients` is `true`
+// This gradient is also added to elements with `.bg-gradient`
+$gradient: linear-gradient(180deg, rgba($white, .15), rgba($white, 0)) !default;
+
+// Spacing
+//
+// Control the default styling of most Bootstrap elements by modifying these
+// variables. Mostly focused on spacing.
+// You can add more entries to the $spacers map, should you need more variation.
+
+$spacer: 1rem !default;
+$spacers: (0: 0,
+    1: $spacer * 0.25,
+    2: $spacer * 0.5,
+    3: $spacer,
+    4: $spacer * 1.5,
+    5: $spacer * 3,
+    6: ($spacer * 5),
+    7: ($spacer * 8),
+    8: ($spacer * 10),
+    9: ($spacer * 11),
+    10: ($spacer * 14),
+    11: ($spacer * 16),
+    12: ($spacer * 20),
+    'sm': ($spacer * 1),
+    'md': ($spacer * 2),
+    'lg': ($spacer * 4),
+    'xl': ($spacer * 8)) !default;
+
+$negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default;
+
+// Body
+//
+// Settings for the `<body>` element.
+
+$body-bg        : $gray-100 !default;
+$body-color     : $gray-700 !default;
+$body-text-align: null !default;
+
+
+// Links
+//
+// Style anchor elements.
+
+$link-color                             : $primary !default;
+$link-decoration                        : none !default;
+$link-hover-color                       : darken($link-color, 50%) !default;
+$link-hover-decoration                  : none !default;
+// Darken percentage for links with `.text-*` class (e.g. `.text-success`)
+$emphasized-link-hover-darken-percentage: 10% !default;
+
+$stretched-link-pseudo-element: after !default;
+$stretched-link-z-index       : 1 !default;
+
+// Paragraphs
+//
+// Style p element.
+
+$paragraph-margin-bottom: 1rem !default;
+
+
+// Grid breakpoints
+//
+// Define the minimum dimensions at which your layout will change,
+// adapting to different screen sizes, for use in media queries.
+
+// scss-docs-start grid-breakpoints
+$grid-breakpoints: (xs: 0,
+    sm: 576px,
+    md: 768px,
+    lg: 992px,
+    xl: 1200px,
+    xxl: 1400px) !default;
+// scss-docs-end grid-breakpoints
+
+// Grid containers
+//
+// Define the maximum width of `.container` for different screen sizes.
+
+// scss-docs-start container-max-widths
+$container-max-widths: (sm: 540px,
+    md: 720px,
+    lg: 960px,
+    xl: 1140px) !default;
+// scss-docs-end container-max-widths
+
+// Grid columns
+//
+// Set the number of columns and specify the width of the gutters.
+
+$grid-columns     : 12 !default;
+$grid-gutter-width: 1.5rem !default;
+$grid-row-columns : 6 !default;
+
+$gutters: $spacers !default;
+
+// Container padding
+
+$container-padding-x: 1rem !default;
+
+
+// Components
+//
+// Define common padding and border radius sizes and more.
+
+$border-width      : .0625rem !default;
+$border-width-md   : 0.125rem !default;
+$border-width-lg   : 0.25rem !default;
+$border-width-xl   : 0.375rem !default;
+$border-color-white: $white !default;
+$border-color      : $gray-200 !default;
+
+
+$border-radius     : .5rem !default;
+$border-radius-sm  : .35rem !default;
+$border-radius-lg  : 1rem !default;
+$border-radius-xl  : 3rem !default;
+$border-radius-pill: 50rem !default;
+$circle-radius     : 50% !default;
+
+$component-active-color       : $white !default;
+$component-active-bg          : $primary !default;
+$component-active-border-color: $primary !default;
+
+$component-hover-color       : $gray-300 !default;
+$component-hover-bg          : $gray-300 !default;
+$component-hover-border-color: $gray-300 !default;
+
+$rounded-pill: 50rem !default;
+
+$box-shadow      : 0 1px 3px 0 rgba(0, 0, 0, 0.1),0 1px 2px 0 rgba(0, 0, 0, 0.06) !default;
+$box-shadow-sm   : 0 2px 5px rgba(140, 152, 164, .2) !default;
+$box-shadow-lg   : 0 1rem 3rem rgba($black, .175) !default;
+$box-shadow-inset: inset 0 1px 2px rgba($black, .0125) !default;
+
+$component-active-color: $white !default;
+$component-active-bg   : $primary !default;
+
+$caret-width         : .3em !default;
+$caret-vertical-align: $caret-width * .85 !default;
+$caret-spacing       : $caret-width * .85 !default;
+
+$transition-base     : all .2s ease !default;
+$transition-transform: transform .2s ease !default;
+$transition-fade     : opacity .15s linear !default;
+$transition-collapse : height .35s ease !default;
+$transition-tabs     : all 0.2s !default;
+
+// scss-docs-start embed-responsive-aspect-ratios
+$embed-responsive-aspect-ratios: ("21by9": (x: 21,
+        y: 9),
+    "16by9": (x: 16,
+        y: 9),
+    "4by3": (x: 4,
+        y: 3),
+    "1by1": (x: 1,
+        y: 1)) !default;
+// scss-docs-end embed-responsive-aspect-ratios
+
+// Typography
+//
+// Font, line-height, and color for body text, headings, and more.
+
+// font awesome
+$fontawesome-webfonts-path: '../vendor/font-awesome/webfonts' !default;
+$font-awesome-5           : 'Font Awesome 5 Free' !default;
+
+// stylelint-disable value-keyword-case
+$font-family-sans-serif: 'Inter', sans-serif !default;
+// stylelint-enable value-keyword-case
+$font-family-base: var(--bs-font-sans-serif) !default;
+$font-family-code: var(--bs-font-monospace) !default;
+
+// $font-size-root effects the value of `rem`, which is used for as well font sizes, paddings and margins
+// $font-size-base effects the font size of the body text
+$font-size-root: null !default;
+$font-size-base: 1rem !default; // Assumes the browser default, typically `16px`
+$font-size-xs  : ($font-size-base * .75) !default;
+$font-size-sm  : ($font-size-base * .875) !default;
+$font-size-md  : ($font-size-base * 1) !default;
+$font-size-lg  : ($font-size-base * 1.25) !default;
+$font-size-xl  : ($font-size-base * 1.5) !default;
+$font-size-xxl : ($font-size-base * 2) !default;
+
+$font-weight-lighter:         lighter !default;
+$font-weight-light:           300 !default;
+$font-weight-normal:          400 !default;
+$font-weight-bold:            500 !default;
+$font-weight-bolder:          600 !default;
+$font-weight-extrabold:       700 !default;
+$font-weight-black:           800 !default;
+
+$font-weight-base: $font-weight-normal !default;
+
+$line-height-base: 1.5 !default;
+$line-height-sm  : 1.25 !default;
+$line-height-lg  : 2 !default;
+
+$h1-font-size: $font-size-base * 2.5 !default;
+$h2-font-size: $font-size-base * 2 !default;
+$h3-font-size: $font-size-base * 1.75 !default;
+$h4-font-size: $font-size-base * 1.5 !default;
+$h5-font-size: $font-size-base * 1.25 !default;
+$h6-font-size: $font-size-base !default;
+
+$headings-margin-bottom: $spacer * 0.5 !default;
+$headings-font-family  : null !default;
+$headings-font-style   : null !default;
+$headings-font-weight  : $font-weight-bold !default;
+$headings-line-height  : 1.3 !default;
+$headings-color        : $dark !default;
+
+// Display headings
+$display1-size: 5rem !default;
+$display2-size: 3.5rem !default;
+$display3-size: 2.5rem !default;
+$display4-size: 1.875rem !default;
+
+// scss-docs-start display-headings
+$display-font-sizes: (1: 5rem,
+    2: 3.5rem,
+    3: 2.5rem,
+    4: 1.875rem,
+    5: 1.2rem,
+    6: 1rem) !default;
+
+$display-font-weight: $font-weight-bold !default;
+$display-line-height: $headings-line-height !default;
+// scss-docs-end display-headings
+
+$paragraph-font-size  : 1rem !default;
+$paragraph-font-weight: 300 !default;
+$paragraph-line-height: 1.6 !default;
+
+$lead-font-size  : $font-size-base * 1.25 !default;
+$lead-font-weight: 300 !default;
+
+$small-font-size: .875em !default;
+
+$sub-sup-font-size: .75em !default;
+
+$text-muted: #58677d !default;
+
+$initialism-font-size: $small-font-size !default;
+
+$blockquote-margin-y        : $spacer !default;
+$blockquote-font-size       : $font-size-base * 1.25 !default;
+$blockquote-footer-color    : $gray-600 !default;
+$blockquote-footer-font-size: $small-font-size !default;
+
+$hr-margin-y: $spacer !default;
+$hr-color   : inherit !default;
+$hr-height  : $border-width !default;
+$hr-opacity : .25 !default;
+
+$legend-margin-bottom: .5rem !default;
+$legend-font-size    : 1.5rem !default;
+$legend-font-weight  : null !default;
+
+$mark-padding: .2em !default;
+
+$dt-font-weight: $font-weight-bold !default;
+
+$nested-kbd-font-weight: $font-weight-bold !default;
+
+$list-inline-padding: .5rem !default;
+
+$mark-bg: #fcf8e3 !default;
+
+
+// Tables
+//
+// Customizes the `.table` component with basic values, each used across all table variations.
+
+// scss-docs-start table-variables
+$table-cell-padding-y   : .75rem !default;
+$table-cell-padding-x   : .5rem !default;
+$table-cell-padding-y-sm: .25rem !default;
+$table-cell-padding-x-sm: .25rem !default;
+
+$table-cell-vertical-align: top !default;
+
+$table-color: $body-color !default;
+$table-bg   : transparent !default;
+
+$table-striped-color    : $table-color !default;
+$table-striped-bg-factor: .05 !default;
+$table-striped-bg       : rgba($black, $table-striped-bg-factor) !default;
+
+$table-active-color    : $table-color !default;
+$table-active-bg-factor: .1 !default;
+$table-active-bg       : rgba($black, $table-active-bg-factor) !default;
+
+$table-hover-color    : $table-color !default;
+$table-hover-bg-factor: .075 !default;
+$table-hover-bg       : rgba($black, $table-hover-bg-factor) !default;
+
+$table-border-factor: .1 !default;
+$table-border-width : $border-width !default;
+$table-border-color : $border-color !default;
+
+$table-striped-order: odd !default;
+
+$table-group-seperator-color: $light !default;
+
+$table-caption-color: $text-muted !default;
+
+$table-bg-scale: -80% !default;
+
+$table-head-spacer-y      : .75rem !default;
+$table-head-spacer-x      : 1rem !default;
+$table-head-font-size     : .75rem !default;
+$table-head-text-transform: uppercase !default;
+$table-body-font-size     : $font-size-sm !default;
+
+$table-variants: ("primary": shift-color($primary, $table-bg-scale),
+    "secondary": shift-color($secondary, $table-bg-scale),
+    "success": shift-color($success, $table-bg-scale),
+    "info": shift-color($info, $table-bg-scale),
+    "warning": shift-color($warning, $table-bg-scale),
+    "danger": shift-color($danger, $table-bg-scale),
+    "light": $light,
+    "dark": $dark,
+) !default;
+
+// Accordion
+$accordion-padding-y    : 1rem !default;
+$accordion-padding-x    : 1.25rem !default;
+$accordion-color        : $body-color !default;
+$accordion-bg           : transparent !default;
+$accordion-border-width : $border-width !default;
+$accordion-border-color : $gray-400 !default;
+$accordion-border-radius: $border-radius !default;
+
+$accordion-body-padding-y: $accordion-padding-y !default;
+$accordion-body-padding-x: $accordion-padding-x !default;
+
+$accordion-button-padding-y   : $accordion-padding-y !default;
+$accordion-button-padding-x   : $accordion-padding-x !default;
+$accordion-button-color       : $accordion-color !default;
+$accordion-button-bg          : $accordion-bg !default;
+$accordion-button-active-bg   : $light !default;
+$accordion-button-active-color: shade-color($primary, 10%) !default;
+
+
+$accordion-icon-width       : 1.25rem !default !default;
+$accordion-icon-color       : $accordion-color !default !default;
+$accordion-icon-active-color: $accordion-button-active-color !default !default;
+$accordion-icon-transition  : transform .2s ease-in-out !default !default;
+$accordion-icon-transform   : rotate(180deg) !default !default;
+
+$accordion-button-icon       : url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default !default;
+$accordion-button-active-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default !default;
+
+// Buttons + Forms
+//
+// Shared variables that are reassigned to `$input-` and `$btn-` specific variables.
+
+$input-btn-padding-y  : .5rem !default;
+$input-btn-padding-x  :  1rem !default;
+$input-btn-font-family: null !default;
+$input-btn-font-size  : $font-size-sm !default;
+$input-btn-line-height: $line-height-base !default;
+
+$input-btn-focus-width        : .18rem !default;
+$input-btn-focus-color-opacity: .25 !default;
+$input-btn-focus-color        : rgba($component-active-bg, $input-btn-focus-color-opacity) !default;
+$input-btn-focus-box-shadow   : 0 0 0 $input-btn-focus-width $input-btn-focus-color !default;
+
+$input-btn-padding-y-sm: .375rem !default;
+$input-btn-padding-x-sm: .625rem !default;
+$input-btn-font-size-sm: $font-size-sm !default;
+
+$input-btn-padding-y-lg: .5rem !default;
+$input-btn-padding-x-lg: 1rem !default;
+$input-btn-font-size-lg: $font-size-lg !default;
+
+$input-btn-border-width: $border-width !default;
+
+$shadow-input      : $box-shadow !default;
+$shadow-input-focus: .1rem .1rem 0 rgba($gray-200, .5) !default;
+
+
+// Buttons
+//
+// For each of Bootstrap's buttons, define text, background, and border color.
+
+$btn-padding-y  : $input-btn-padding-y !default;
+$btn-padding-x  : $input-btn-padding-x !default;
+$btn-font-family: $input-btn-font-family !default;
+$btn-font-size  : $input-btn-font-size !default;
+$btn-line-height: $input-btn-line-height !default;
+$btn-white-space: null !default; // Set to `nowrap` to prevent text wrapping
+
+$btn-padding-y-sm: $input-btn-padding-y-sm !default;
+$btn-padding-x-sm: $input-btn-padding-x-sm !default;
+$btn-font-size-sm: $input-btn-font-size-sm !default;
+
+$btn-padding-y-lg: $input-btn-padding-y-lg !default;
+$btn-padding-x-lg: $input-btn-padding-x-lg !default;
+$btn-font-size-lg: $input-btn-font-size-lg !default;
+
+$btn-border-width: $input-btn-border-width !default;
+
+$btn-font-weight: $font-weight-bold !default;
+$btn-box-shadow : inset 0 1px 0 rgba($white, .15),
+0 1px 1px rgba($black, .075) !default;
+$btn-focus-width      : $input-btn-focus-width !default;
+$btn-focus-box-shadow : $input-btn-focus-box-shadow !default;
+$btn-disabled-opacity : .65 !default;
+$btn-active-box-shadow: inset 0 3px 5px rgba($black, .125) !default;
+
+$btn-link-color         : $link-color !default;
+$btn-link-hover-color   : $link-hover-color !default;
+$btn-link-disabled-color: $gray-600 !default;
+
+$btn-block-spacing-y: .5rem !default;
+
+// Allows for customizing button radius independently from global border radius
+$btn-border-radius   : $border-radius !default;
+$btn-border-radius-sm: $border-radius !default;
+$btn-border-radius-lg: $border-radius !default;
+
+$btn-transition: color .15s ease-in-out,
+background-color .15s ease-in-out,
+border-color .15s ease-in-out,
+box-shadow .15s ease-in-out !default;
+
+
+$btn-close-width:            1em !default;
+$btn-close-height:           $btn-close-width !default;
+$btn-close-padding-x:        .25em !default;
+$btn-close-padding-y:        $btn-close-padding-x !default;
+$btn-close-color:            $black !default;
+$btn-close-bg:               url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$btn-close-color}'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>") !default;
+$btn-close-color-white:      $white !default;
+$btn-close-bg-white:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$btn-close-color-white}'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>") !default;
+$btn-close-focus-shadow:     $input-btn-focus-box-shadow !default;
+$btn-close-opacity:          .5 !default;
+$btn-close-hover-opacity:    .75 !default;
+$btn-close-focus-opacity:    1 !default;
+$btn-close-disabled-opacity: .25 !default;
+$btn-close-white-filter:     invert(1) grayscale(100%) brightness(200%) !default;
+
+// Forms
+
+$form-text-margin-top : .25rem !default;
+$form-text-font-size  : $small-font-size !default;
+$form-text-font-style : null !default;
+$form-text-font-weight: null !default;
+$form-text-color      : $text-muted !default;
+
+$form-label-margin-bottom: .5rem !default;
+$form-label-font-size    : null !default;
+$form-label-font-style   : null !default;
+$form-label-font-weight  : null !default;
+$form-label-color        : null !default;
+
+$input-padding-y  : $input-btn-padding-y !default;
+$input-padding-x  : $input-btn-padding-x !default;
+$inpu-lg-padding-y: 1rem !default;
+$input-font-family: $input-btn-font-family !default;
+$input-font-size  : $input-btn-font-size !default;
+$input-font-weight: $font-weight-base !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-font-size-sm: $input-btn-font-size-sm !default;
+
+$input-padding-y-lg: $input-btn-padding-y-lg !default;
+$input-padding-x-lg: $input-btn-padding-x-lg !default;
+$input-font-size-lg: $input-btn-font-size-lg !default;
+
+$input-bg                   : $white !default;
+$input-disabled-bg          : $gray-200 !default;
+$input-disabled-border-color: null !default;
+
+$input-color       : $gray-500 !default;
+$input-border-color: $gray-300 !default;
+$input-border-width: $input-btn-border-width !default;
+$input-box-shadow  : 0 1px 2px 0 rgba(0, 0, 0, 0.07) !default;
+
+$input-border-radius   : $border-radius !default;
+$input-border-radius-sm: $border-radius !default;
+$input-border-radius-lg: $border-radius !default;
+
+$input-focus-bg          : $input-bg !default;
+$input-focus-border-color: lighten($component-active-bg, 25%) !default;
+$input-focus-color       : $input-color !default;
+$input-focus-width       : $input-btn-focus-width !default;
+$input-focus-box-shadow  : $input-btn-focus-box-shadow !default;
+
+$input-placeholder-color: $gray-600 !default;
+$input-plaintext-color  : $body-color !default;
+
+$input-height-border: $input-border-width * 2 !default;
+
+$input-height-inner        : add($input-line-height * 1em, $input-padding-y * 2) !default;
+$input-height-inner-half   : add($input-line-height * .5em, $input-padding-y) !default;
+$input-height-inner-quarter: add($input-line-height * .25em, $input-padding-y * 0.5) !default;
+
+$input-height   : add($input-line-height * 1em, add($input-padding-y * 2, $input-height-border, false)) !default;
+$input-height-sm: add($input-line-height * 1em, add($input-padding-y-sm * 2, $input-height-border, false)) !default;
+$input-height-lg: add($input-line-height * 1em, add($input-padding-y-lg * 2, $input-height-border, false)) !default;
+$input-height-xl: calc(#{$input-line-height * 1.5em} + #{$input-btn-padding-y-lg * 2} + #{$input-height-border}) !default;
+
+$input-transition: border-color .15s ease-in-out,
+box-shadow .15s ease-in-out !default;
+
+// Custom forms
+
+$custom-control-gutter        : 1.75rem !default;
+$custom-control-spacer-x      : 1rem !default;
+$custom-control-line-height   : 1 !default;
+$custom-control-indicator-size: 1.25rem !default;
+
+$custom-control-bg          : $gray-400 !default;
+$custom-control-indicator-bg: $white !default;
+$custom-control-border-width: $border-width !default;
+$custom-control-border-color: $input-border-color !default;
+$custom-control-box-shadow  : none !default;
+
+
+
+$custom-control-indicator-hover-color       : $component-hover-color !default;
+$custom-control-indicator-hover-bg          : $primary !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-border-color: $component-active-border-color !default;
+
+
+$custom-control-indicator-checked-color       : $component-active-color !default;
+$custom-control-indicator-checked-bg          : $primary !default;
+$custom-control-indicator-checked-border-color: $primary !default;
+$custom-control-indicator-checked-disabled-bg : rgba($primary, .7) !default;
+$custom-control-indicator-border-width        : 1px !default;
+
+$custom-control-indicator-disabled-bg: $gray-200 !default;
+$custom-control-label-disabled-color : $gray-800 !default;
+
+$custom-checkbox-bg                     : $gray-400 !default;
+$custom-checkbox-checked-bg             : $primary !default;
+$custom-checkbox-disabled-checked-bg    : rgba($primary, .7) !default;
+$custom-checkbox-indicator-border-radius: $border-radius-xl !default;
+$custom-checkbox-indicator-border-width : $border-width-md !default;
+$custom-checkbox-indicator-icon-checked : $font-awesome-5 !default;
+$square-checkbox-indicator-border-radius: 3px !default;
+
+$custom-toggle-slider-bg          : $gray-400 !default;
+$custom-toggle-slider-indicator-bg: $white !default;
+$custom-toggle-checked-bg         : $primary !default;
+$custom-toggle-disabled-bg        : $gray-200 !default;
+$custom-toggle-disabled-checked-bg: rgba($primary, .7) !default;
+$custom-toggle-border-radius      : .8rem !default;
+
+$custom-switch-indicator-size: calc(#{$custom-control-indicator-size} - #{$custom-control-indicator-border-width * 4}) !default;
+
+$custom-checkbox-disabled-checked-color: $gray-800 !default;
+
+
+$form-check-input-width  : 1.125em !default;
+$form-check-min-height   : $font-size-base * $line-height-base !default;
+$form-check-padding-left : $form-check-input-width+.5em !default;
+$form-check-margin-bottom: .125rem !default;
+$form-check-label-color  : null !default;
+$form-check-label-cursor : null !default;
+$form-check-transition   : background-color .2s ease-in-out,
+background-position .2s ease-in-out,
+border-color .2s ease-in-out,
+box-shadow .2s ease-in-out !default;
+
+$form-check-input-active-filter: brightness(90%) !default;
+
+$form-check-input-bg              : $body-bg !default;
+$form-check-input-border          : 1px solid $input-border-color !default;
+$form-check-input-border-radius   : .25em !default;
+$form-check-radio-border-radius   : 50% !default;
+$form-check-input-focus-border    : $input-focus-border-color !default;
+$form-check-input-focus-box-shadow: $input-btn-focus-box-shadow !default;
+
+$form-check-input-checked-color       : $component-active-color !default;
+$form-check-input-checked-bg-color    : $component-active-bg !default;
+$form-check-input-checked-border-color: $form-check-input-checked-bg-color !default;
+$form-check-input-checked-bg-image    : url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-checked-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/></svg>") !default;
+$form-check-radio-checked-bg-image    : url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#{$form-check-input-checked-color}'/></svg>") !default;
+
+$form-check-input-indeterminate-color       : $component-active-color !default;
+$form-check-input-indeterminate-bg-color    : $component-active-bg !default;
+$form-check-input-indeterminate-border-color: $form-check-input-indeterminate-bg-color !default;
+$form-check-input-indeterminate-bg-image    : url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-indeterminate-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/></svg>") !default;
+
+$form-switch-color        : $gray-600 !default;
+$form-switch-width        : 2.25em !default;
+$form-switch-padding-left : $form-switch-width+.5em !default;
+$form-switch-bg-image     : url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color}'/></svg>") !default;
+$form-switch-border-radius: $form-switch-width !default;
+
+$form-switch-focus-color   : $input-focus-border-color !default;
+$form-switch-focus-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-focus-color}'/></svg>") !default;
+
+$form-switch-checked-color      : $component-active-color !default;
+$form-switch-checked-bg-image   : url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-checked-color}'/></svg>") !default;
+$form-switch-checked-bg-position: right center !default;
+
+$form-check-inline-margin-right: 1rem !default;
+
+$input-group-addon-color       : $input-color !default;
+$input-group-addon-border-color: $input-border-color !default;
+
+// Input groups
+
+// scss-docs-start input-group-variables
+$input-group-addon-padding-y:           .5rem !default;
+$input-group-addon-padding-x:           .625rem !default;
+$input-group-addon-font-weight:         $input-font-weight !default;
+$input-group-addon-color:               $gray-400 !default;
+$input-group-addon-bg:                  $white !default;
+$input-group-addon-border-color:        $input-border-color !default;
+// scss-docs-end input-group-variables
+
+$form-select-padding-y            : $input-padding-y !default;
+$form-select-padding-x            : $input-padding-x !default;
+$form-select-font-family          : $input-font-family !default;
+$form-select-font-size            : $input-font-size !default;
+$form-select-height               : $input-height !default;
+$form-select-indicator-padding    : 1rem !default; // Extra padding to account for the presence of the background-image based indicator
+$form-select-font-weight          : $input-font-weight !default;
+$form-select-line-height          : $input-line-height !default;
+$form-select-color                : $input-color !default;
+$form-select-disabled-color       : $gray-600 !default;
+$form-select-bg                   : $input-bg !default;
+$form-select-disabled-bg          : $gray-200 !default;
+$form-select-disabled-border-color: $input-disabled-border-color !default;
+$form-select-bg-position          : right $form-select-padding-x center !default;
+$form-select-bg-size              : 16px 12px !default; // In pixels because image dimensions
+$form-select-indicator-color      : $gray-800 !default;
+$form-select-indicator            : url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-select-indicator-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/></svg>") !default;
+
+$form-select-feedback-icon-padding-right: add(1em * .75, (2 * $form-select-padding-y * .75) + $form-select-padding-x + $form-select-indicator-padding) !default;
+$form-select-feedback-icon-position     : center right ($form-select-padding-x + $form-select-indicator-padding) !default;
+$form-select-feedback-icon-size         : $input-height-inner-half $input-height-inner-half !default;
+
+$form-select-border-width : $input-border-width !default;
+$form-select-border-color : $input-border-color !default;
+$form-select-border-radius: $border-radius !default;
+$form-select-box-shadow   : $box-shadow-inset !default;
+
+$form-select-focus-border-color: $input-focus-border-color !default;
+$form-select-focus-width       : $input-focus-width !default;
+$form-select-focus-box-shadow  : 0 0 0 $form-select-focus-width $input-btn-focus-color !default;
+
+$form-select-padding-y-sm: $input-padding-y-sm !default;
+$form-select-padding-x-sm: $input-padding-x-sm !default;
+$form-select-font-size-sm: $input-font-size-sm !default;
+$form-select-height-sm   : $input-height-sm !default;
+
+$form-select-padding-y-lg: $input-padding-y-lg !default;
+$form-select-padding-x-lg: $input-padding-x-lg !default;
+$form-select-font-size-lg: $input-font-size-lg !default;
+$form-select-height-lg   : $input-height-lg !default;
+
+$form-range-track-width        : 100% !default;
+$form-range-track-height       : .5rem !default;
+$form-range-track-cursor       : pointer !default;
+$form-range-track-bg           : $gray-300 !default;
+$form-range-track-border-radius: 1rem !default;
+$form-range-track-box-shadow   : $box-shadow-inset !default;
+
+$form-range-thumb-width        : 1rem !default;
+$form-range-thumb-height       : $form-range-thumb-width !default;
+$form-range-thumb-bg           : $component-active-bg !default;
+$form-range-thumb-border       : 0 !default;
+$form-range-thumb-border-radius: 1rem !default;
+$form-range-thumb-box-shadow   : 0 .1rem .25rem rgba($black, .1) !default;
+$form-range-thumb-focus-box-shadow: 0 0 0 1px $body-bg,
+$input-focus-box-shadow !default;
+$form-range-thumb-focus-box-shadow-width: $input-focus-width !default; // For focus box shadow issue in Edge
+$form-range-thumb-active-bg             : lighten($component-active-bg, 35%) !default;
+$form-range-thumb-disabled-bg           : $gray-500 !default;
+$form-range-thumb-transition            : background-color .15s ease-in-out,
+border-color .15s ease-in-out,
+box-shadow .15s ease-in-out !default;
+
+$form-file-height               : $input-height !default;
+$form-file-focus-border-color   : $input-focus-border-color !default;
+$form-file-focus-box-shadow     : $input-focus-box-shadow !default;
+$form-file-disabled-bg          : $input-disabled-bg !default;
+$form-file-disabled-border-color: $input-disabled-border-color !default;
+
+$form-file-padding-y    : $input-padding-y !default;
+$form-file-padding-x    : $input-padding-x !default;
+$form-file-line-height  : $input-line-height !default;
+$form-file-font-family  : $input-font-family !default;
+$form-file-font-weight  : $input-font-weight !default;
+$form-file-color        : $input-color !default;
+$form-file-bg           : $input-bg !default;
+$form-file-border-width : $input-border-width !default;
+$form-file-border-color : $input-border-color !default;
+$form-file-border-radius: $input-border-radius !default;
+$form-file-box-shadow   : $input-box-shadow !default;
+$form-file-button-color : $form-file-color !default;
+$form-file-button-bg    : $input-group-addon-bg !default;
+
+$form-file-padding-y-sm: $input-padding-y-sm !default;
+$form-file-padding-x-sm: $input-padding-x-sm !default;
+$form-file-font-size-sm: $input-font-size-sm !default;
+$form-file-height-sm   : $input-height-sm !default;
+
+$form-file-padding-y-lg: $input-padding-y-lg !default;
+$form-file-padding-x-lg: $input-padding-x-lg !default;
+$form-file-font-size-lg: $input-font-size-lg !default;
+$form-file-height-lg   : $input-height-lg !default;
+
+$input-muted-bg               : $gray-100 !default;
+$input-placeholder-color      : $gray-800 !default;
+$input-focus-placeholder-color: $gray-800 !default;
+
+// Form validation
+
+$form-feedback-margin-top   : $form-text-margin-top !default;
+$form-feedback-font-size    : $form-text-font-size !default;
+$form-feedback-font-style   : $form-text-font-style !default;
+$form-feedback-valid-color  : $success !default;
+$form-feedback-invalid-color: $danger !default;
+
+$form-feedback-icon-valid-color  : $form-feedback-valid-color !default;
+$form-feedback-icon-valid        : url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='#{$form-feedback-icon-valid-color}' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/></svg>") !default;
+$form-feedback-icon-invalid-color: $form-feedback-invalid-color !default;
+$form-feedback-icon-invalid      : url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='#{$form-feedback-icon-invalid-color}' viewBox='0 0 12 12'><circle cx='6' cy='6' r='4.5'/><path stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/><circle cx='6' cy='8.2' r='.6' fill='#{$form-feedback-icon-invalid-color}' stroke='none'/></svg>") !default;
+
+// scss-docs-start form-validation-states
+$form-validation-states: ("valid": ("color": $form-feedback-valid-color,
+        "icon": $form-feedback-icon-valid),
+    "invalid": ("color": $form-feedback-invalid-color,
+        "icon": $form-feedback-icon-invalid)) !default;
+// scss-docs-end form-validation-states
+
+// Z-index master list
+//
+// Warning: Avoid customizing these values. They're used for a bird's eye view
+// of components dependent on the z-axis and are designed to all work together.
+
+// scss-docs-start zindex-stack
+$zindex-dropdown      : 1000 !default;
+$zindex-sticky        : 1020 !default;
+$zindex-fixed         : 1030 !default;
+$zindex-modal-backdrop: 1040 !default;
+$zindex-modal         : 1050 !default;
+$zindex-popover       : 1060 !default;
+$zindex-tooltip       : 1070 !default;
+// scss-docs-end zindex-stack
+
+// No UI Slider
+
+$noui-target-bg                 : $gray-400 !default;
+$noui-target-thickness          : 5px !default;
+$noui-target-border-radius      : 5px !default;
+$noui-target-border-color       : 0 !default;
+$noui-target-box-shadow         : inset $box-shadow-sm !default;
+$noui-box-shadow                : $box-shadow-sm !default;
+$noui-slider-connect-bg         : $primary !default;
+$noui-slider-connect-disabled-bg: $gray-200 !default;
+$noui-handle-active-shadow      : 0 0 0 0.2rem rgba(69, 77, 103, 0.5) !default;
+$noui-handle-width              : 15px !default;
+$noui-handle-bg                 : $primary !default;
+$noui-handle-border             : 0 !default;
+$noui-handle-border-radius      : $border-radius !default;
+$noui-origin-border-radius      : $circle-radius !default;
+
+
+// Navs
+
+$nav-link-padding-y   : .5rem !default;
+$nav-link-padding-x   : 1rem !default;
+$nav-link-color       : $gray-800 !default;
+$nav-link-hover-color : $dark !default;
+$nav-link-active-color: $gray-800 !default;
+$nav-link-shadow      : none !default;
+$nav-link-transition  : color .15s ease-in-out,
+background-color .15s ease-in-out,
+border-color .15s ease-in-out !default;
+$nav-link-disabled-color: $gray-600 !default;
+
+$nav-tabs-border-color            : $light !default;
+$nav-tabs-border-width            : $border-width !default;
+$nav-tabs-border-radius           : $border-radius !default;
+$nav-tabs-link-hover-border-color : $gray-200 $gray-200 $nav-tabs-border-color !default;
+$nav-tabs-link-active-color       : $gray-700 !default;
+$nav-tabs-link-active-bg          : $light !default;
+$nav-tabs-link-active-border-color: $light !default;
+
+$nav-pills-padding-y: .75rem !default;
+$nav-pills-padding-x: .85rem !default;
+
+$nav-pills-space-x      : 1rem !default;
+$nav-pills-border-circle: 50% !default;
+
+$nav-pills-bg           : $white !default;
+$nav-pills-border-width : 1px !default;
+$nav-pills-border-color : $light !default;
+$nav-pills-border-radius: $border-radius !default;
+
+$nav-pills-link-hover-color   : $primary !default;
+$nav-pills-link-active-color  : $primary !default;
+$nav-pills-active-border-color: $gray-300 !default;
+$nav-pills-link-active-bg     : #f8f8f8 !default;
+
+// Owl navs
+
+$owl-nav-color           : $gray-600 !default;
+$owl-nav-color-hover     : $gray-900 !default;
+$owl-nav-font-size       : $font-size-xxl !default;
+$owl-nav-rounded         : 3px !default;
+$owl-nav-margin          : 5px !default;
+$owl-nav-padding         : 4px 7px !default;
+$owl-nav-background      : $gray-400 !default;
+$owl-nav-background-hover: $gray-800 !default;
+$owl-nav-disabled-opacity: 0.5 !default;
+
+// Owl dots
+
+$owl-dot-width            : 10px !default;
+$owl-dot-height           : 10px !default;
+$owl-dot-rounded          : $circle-radius !default;
+$owl-dot-margin           : 5px 5px !default;
+$owl-dot-border-width     : 2px !default;
+$owl-dot-background       : $gray-400 !default;
+$owl-dot-background-active: $gray-800 !default;
+
+
+// Navbar
+
+$navbar-padding-y: 1rem !default;
+$navbar-padding-x: null !default;
+
+$navbar-nav-link-padding-x: .8rem !default;
+
+$navbar-brand-font-size   : $font-size-lg !default;
+// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
+$nav-link-height          : $font-size-base * $line-height-base+$nav-link-padding-y * 4 !default;
+$navbar-brand-height      : $navbar-brand-font-size * $line-height-base !default;
+$navbar-brand-padding-y   : 0 !default;
+$navbar-brand-margin-right: 1rem !default;
+
+$navbar-toggler-padding-y    : .4rem !default;
+$navbar-toggler-padding-x    : .6rem !default;
+$navbar-toggler-font-size    : $font-size-lg !default;
+$navbar-toggler-border-radius: $btn-border-radius !default;
+$navbar-toggler-focus-width  : $btn-focus-width !default;
+$navbar-toggler-transition   : box-shadow .15s ease-in-out !default;
+
+$navbar-dark-color               : rgba($white, 0.9) !default;
+$navbar-dark-hover-color         : rgba($white, 1) !default;
+$navbar-dark-active-color        : $white !default;
+$navbar-dark-disabled-color      : rgba($white, .9) !default;
+$navbar-dark-toggler-icon-bg     : url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
+$navbar-dark-toggler-border-color: rgba($white, .1) !default;
+
+$navbar-light-color               : rgba($black, .9) !default;
+$navbar-light-hover-color         : rgba($black, 1) !default;
+$navbar-light-active-color        : rgba($black, 1) !default;
+$navbar-light-disabled-color      : rgba($black, .9) !default;
+$navbar-light-toggler-icon-bg     : url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-light-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
+$navbar-light-toggler-border-color: rgba($black, .1) !default;
+
+$navbar-light-brand-color      : $navbar-light-active-color !default;
+$navbar-light-brand-hover-color: $navbar-light-active-color !default;
+$navbar-dark-brand-color       : $navbar-dark-active-color !default;
+$navbar-dark-brand-hover-color : $navbar-dark-active-color !default;
+
+
+// Dropdowns
+//
+// Dropdown menu container and contents.
+
+$dropdown-min-width       : 12rem !default;
+$dropdown-padding-y       : .5rem !default;
+$dropdown-spacer          : .125rem !default;
+$dropdown-font-size       : .875rem !default;
+$dropdown-item-font-weight: $font-weight-normal !default;
+$dropdown-item-hover-color: $gray-900 !default;
+
+$dropdown-color              : $body-color !default;
+$dropdown-bg                 : $white !default;
+$dropdown-border-color       : $border-color !default;
+$dropdown-border-radius      : $border-radius-sm !default;
+$dropdown-border-width       : $border-width !default;
+$dropdown-inner-border-radius: subtract($dropdown-border-radius, $dropdown-border-width) !default;
+$dropdown-divider-bg         : $gray-200 !default;
+$dropdown-divider-margin-y   : $spacer * 0.5 !default;
+$dropdown-box-shadow         : 0 10px 15px -3px rgba(0, 0, 0, 0.1),0 4px 6px -2px rgba(0, 0, 0, 0.05) !default;
+
+$dropdown-link-color      : $gray-900 !default;
+$dropdown-link-hover-color: darken($gray-900, 5%) !default;
+$dropdown-link-hover-bg   : $gray-100 !default;
+
+$dropdown-link-active-color: $gray-900 !default;
+$dropdown-link-active-bg   : $gray-200 !default;
+
+$dropdown-link-disabled-color: $gray-600 !default;
+
+$dropdown-item-padding-y: $spacer * 0.25 !default;
+$dropdown-item-padding-x: $spacer !default;
+
+$dropdown-header-color      : $gray-900 !default;
+$dropdown-header-font-weight: $font-weight-bold !default;
+$dropdown-header-padding    : $dropdown-padding-y $dropdown-item-padding-x !default;
+
+
+// Pagination
+
+$pagination-padding-y   : .375rem !default;
+$pagination-padding-x   : .75rem !default;
+$pagination-padding-y-sm: .25rem !default;
+$pagination-padding-x-sm: .5rem !default;
+$pagination-padding-y-lg: .75rem !default;
+$pagination-padding-x-lg: 1.5rem !default;
+
+$pagination-color        : $link-color !default;
+$pagination-bg           : $white !default;
+$pagination-border-width : $border-width !default;
+$pagination-border-radius: $border-radius !default;
+$pagination-margin-left  : -$pagination-border-width !default;
+$pagination-border-color : $light !default;
+
+$pagination-focus-box-shadow: $input-btn-focus-box-shadow !default;
+$pagination-focus-outline   : 0 !default;
+
+$pagination-hover-color       : $link-hover-color !default;
+$pagination-hover-bg          : $gray-200 !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-disabled-color       : $gray-600 !default;
+$pagination-disabled-bg          : $white !default;
+$pagination-disabled-border-color: $gray-300 !default;
+
+
+// Cards
+
+$card-spacer-y           : 1.25rem !default;
+$card-spacer-x           : 1.5rem !default;
+$card-social-padding     : .25rem .375rem !default;
+$card-title-spacer-y     : .875rem !default;
+$card-border-width       : $border-width !default;
+$card-border-radius      : $border-radius !default;
+$card-border-color       : rgba($black, .125) !default;
+$card-inner-border-radius: subtract($card-border-radius, $card-border-width) !default;
+$card-cap-padding-y      : 1.25rem !default;
+$card-cap-padding-x      : $card-spacer-x !default;
+$card-cap-bg             : rgba($black, .03) !default;
+$card-cap-color          : null !default;
+$card-height             : null !default;
+$card-color              : null !default;
+$card-bg                 : $white !default;
+
+$card-img-overlay-padding: $spacer !default;
+
+$card-group-margin     : $grid-gutter-width * 0.5 !default;
+$transition-bezier-card: cubic-bezier(0.34, 1.45, 0.7, 1) !default;
+
+//Timelines
+$timeline-font-size        : $font-size-xxl !default;
+$timeline-font-color       : $body-color !default;
+$timeline-border-color     : $light !default;
+$timeline-border-color-dark: $gray-500 !default;
+$timeline-background-color : $white !default;
+$timeline-line-height      : 3 !default;
+$timeline-border-width     : $border-width !default;
+$timeline-circle-radius    : 50% !default;
+$timeline-spacer-y         : 1.25rem !default;
+$timeline-spacer-x         : 2.75rem !default;
+
+// Icons & Shapes sizes
+
+$icon-size-xxs:         1rem !default;
+$icon-size-xs:          1.25rem !default;
+$icon-size-sm:          1.5rem !default;
+$icon-size:             2rem !default;
+$icon-size-lg:          3.5rem !default;
+$icon-size-xl:          4.5rem !default;
+$icon-size-xxl:         6rem !default;
+
+$icon-shape-xxs:        1.5rem !default;
+$icon-shape-xs:         2.5rem !default;
+$icon-shape-sm:         3.275rem !default;
+$icon-shape:            4rem !default;
+$icon-shape-lg:         5rem !default;
+$icon-shape-xl:         6rem !default;
+$icon-shape-xxl:        7.5rem !default;
+
+
+// Steps
+$step-number-size : 12rem !default;
+$step-shape-size  : 7rem !default;
+$step-border-width: $border-width-md !default;
+$step-icon-size   : $icon-size-xl !default;
+
+// Tooltips
+
+$tooltip-font-size    : $font-size-sm !default;
+$tooltip-max-width    : 200px !default;
+$tooltip-color        : $white !default;
+$tooltip-bg           : $dark !default;
+$tooltip-border-radius: $border-radius !default;
+$tooltip-opacity      : .99 !default;
+$tooltip-padding-y    : .5rem !default;
+$tooltip-padding-x    : .55rem !default;
+$tooltip-margin       : 2rem !default;
+
+$tooltip-arrow-width : .8rem !default;
+$tooltip-arrow-height: .4rem !default;
+$tooltip-arrow-color : $tooltip-bg !default;
+
+// Form tooltips must come after regular tooltips
+$form-feedback-tooltip-padding-y    : $tooltip-padding-y !default;
+$form-feedback-tooltip-padding-x    : $tooltip-padding-x !default;
+$form-feedback-tooltip-font-size    : $tooltip-font-size !default;
+$form-feedback-tooltip-line-height  : null !default;
+$form-feedback-tooltip-opacity      : $tooltip-opacity !default;
+$form-feedback-tooltip-border-radius: $tooltip-border-radius !default;
+
+
+// Popovers
+
+$popover-font-size          : $font-size-sm !default;
+$popover-bg                 : $dark !default;
+$popover-max-width          : 276px !default;
+$popover-border-width       : $border-width !default;
+$popover-border-color       : rgba($black, .2) !default;
+$popover-border-radius      : $border-radius-lg !default;
+$popover-inner-border-radius: subtract($popover-border-radius, $popover-border-width) !default;
+$popover-box-shadow         : $box-shadow !default;
+
+$popover-header-bg       : darken($popover-bg, 3%) !default;
+$popover-header-color    : $headings-color !default;
+$popover-header-padding-y: .5rem !default;
+$popover-header-padding-x: $spacer !default;
+
+$popover-body-color    : $white !default;
+$popover-body-padding-y: $spacer !default;
+$popover-body-padding-x: $spacer !default;
+
+$popover-arrow-width : 1rem !default;
+$popover-arrow-height: .5rem !default;
+$popover-arrow-color : $popover-bg !default;
+
+$popover-arrow-outer-color: fade-in($popover-border-color, .05) !default;
+
+
+// Toasts
+
+$toast-max-width       : 350px !default;
+$toast-padding-x       : .75rem !default;
+$toast-padding-y       : .25rem !default;
+$toast-font-size       : .875rem !default;
+$toast-color           : null !default;
+$toast-background-color: rgba($white, .85) !default;
+$toast-border-width    : 1px !default;
+$toast-border-color    : rgba(0, 0, 0, .1) !default;
+$toast-border-radius   : $border-radius !default;
+$toast-box-shadow      : $box-shadow !default;
+
+$toast-header-color           : $gray-600 !default;
+$toast-header-background-color: rgba($white, .85) !default;
+$toast-header-border-color    : rgba(0, 0, 0, .05) !default;
+
+
+// Badges
+
+$badge-font-size    : .75em !default;
+$badge-font-weight  : $font-weight-bolder !default;
+$badge-padding-y    : .2rem !default;
+$badge-padding-x    : .4rem !default;
+$badge-color        : $white !default;
+$badge-border-radius: $border-radius !default;
+
+$badge-pill-padding-x    : .875em !default;
+$badge-pill-border-radius: 10rem !default;
+
+$badge-circle-size: 2rem !default;
+
+
+// Modals
+
+// Padding applied to the modal body
+$modal-inner-padding: $spacer !default;
+
+// Margin between elements in footer, must be lower than or equal to 2 * $modal-inner-padding
+$modal-footer-margin-between: .5rem !default;
+
+$modal-dialog-margin        : .5rem !default;
+$modal-dialog-margin-y-sm-up: 1.75rem !default;
+
+$modal-title-line-height: $line-height-base !default;
+
+$modal-content-color              : null !default;
+$modal-content-bg                 : $white !default;
+$modal-content-border-color       : rgba($black, .2) !default;
+$modal-content-border-width       : $border-width !default;
+$modal-content-border-radius      : $border-radius !default;
+$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width) !default;
+$modal-content-box-shadow-xs      : $box-shadow-sm !default;
+$modal-content-box-shadow-sm-up   : $box-shadow !default;
+
+$modal-backdrop-bg        : $black !default;
+$modal-backdrop-opacity   : .5 !default;
+$modal-header-border-color: $border-color !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-y   : $modal-inner-padding !default;
+$modal-header-padding-x   : $modal-inner-padding !default;
+$modal-header-padding     : $modal-header-padding-y $modal-header-padding-x !default; // Keep this for backwards compatibility
+
+$modal-sm: 300px !default;
+$modal-md: 500px !default;
+$modal-lg: 800px !default;
+$modal-xl: 1140px !default;
+
+$modal-fade-transform : translate(0, -50px) !default;
+$modal-show-transform : none !default;
+$modal-transition     : transform .3s ease-out !default;
+$modal-scale-transform: scale(1.02) !default;
+
+
+// Alerts
+//
+// Define alert colors, border radius, and padding.
+
+$alert-padding-y       : $spacer !default;
+$alert-padding-x       : $spacer !default;
+$alert-margin-bottom   : 1rem !default;
+$alert-border-radius   : $border-radius !default;
+$alert-link-font-weight: $font-weight-bold !default;
+$alert-border-width    : $border-width !default;
+$alert-icon-font-size  : 2rem !default;
+$alert-link-color      : $white !default;
+
+$alert-bg-level    : -10 !default !default;
+$alert-border-level: -9 !default !default;
+$alert-color-level : 10 !default !default;
+
+
+// Progress bars
+
+$progress-height              : 1rem !default;
+$progress-font-size           : $font-size-base * .75 !default;
+$progress-bg                  : $gray-200 !default;
+$progress-border-radius       : $border-radius !default;
+$progress-box-shadow          : $box-shadow-inset !default;
+$progress-bar-color           : $white !default;
+$progress-bar-bg              : $dark !default;
+$progress-bar-animation-timing: 1s linear infinite !default;
+$progress-bar-transition      : width .6s ease !default;
+
+$progress-xl-size: .8rem !default;
+$progress-lg-size: .6rem !default;
+$progress-sm-size: .2rem !default;
+
+
+// List group
+
+$list-group-color        : null !default;
+$list-group-bg           : $white !default;
+$list-group-border-color : rgba($black, .125) !default;
+$list-group-border-width : $border-width !default;
+$list-group-border-radius: $border-radius !default;
+
+$list-group-sm-item-padding-y: .625rem !default;
+$list-group-sm-item-padding-x: .875rem !default;
+
+$list-group-item-padding-y    : $spacer * 0.5 !default;
+$list-group-item-padding-x    : $spacer !default;
+$list-group-item-bg-level     : -9 !default;
+$list-group-item-color-level  : 6 !default;
+$list-group-item-border-radius: $border-radius !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: $body-color !default;
+$list-group-action-active-bg   : $gray-200 !default;
+
+// Image thumbnails
+
+$thumbnail-padding      : .25rem !default;
+$thumbnail-bg           : $body-bg !default;
+$thumbnail-border-width : $border-width !default;
+$thumbnail-border-color : $gray-300 !default;
+$thumbnail-border-radius: $border-radius !default;
+$thumbnail-box-shadow   : $box-shadow-sm !default;
+
+
+// Figures
+
+$figure-caption-font-size: $small-font-size !default;
+$figure-caption-color    : $gray-600 !default;
+
+
+// Breadcrumbs
+
+$breadcrumb-font-size     : null !default;
+$breadcrumb-padding-y     : $spacer * 0.5 !default;
+$breadcrumb-padding-x     : $spacer !default;
+$breadcrumb-item-padding-x: .5rem !default;
+$breadcrumb-margin-bottom : 1rem !default;
+$breadcrumb-bg            : $gray-200 !default;
+$breadcrumb-divider-color : $gray-600 !default;
+$breadcrumb-active-color  : $gray-600 !default;
+$breadcrumb-divider       : quote("/") !default;
+$breadcrumb-border-radius : $border-radius !default;
+
+$breadcrumb-active-color       : $white !default;
+$breadcrumb-divider-color      : $gray-700 !default;
+$breadcrumb-item-color         : $gray-700 !default;
+$breadcrumb-font-weight        : $font-weight-normal !default;
+$breadcrumb-active-font-weight : $font-weight-normal !default;
+$breadcrumb-item-light-color   : $white !default;
+$breadcrumb-divider-light-color: $white !default;
+
+// Carousel
+
+$carousel-control-color        : $white !default;
+$carousel-control-width        : 15% !default;
+$carousel-control-opacity      : .5 !default;
+$carousel-control-hover-opacity: .9 !default;
+$carousel-control-transition   : opacity .15s ease !default;
+
+$carousel-indicator-width          : 30px !default;
+$carousel-indicator-height         : 3px !default;
+$carousel-indicator-hit-area-height: 10px !default;
+$carousel-indicator-spacer         : 3px !default;
+$carousel-indicator-opacity        : .5 !default;
+$carousel-indicator-active-bg      : $white !default;
+$carousel-indicator-active-opacity : 1 !default;
+$carousel-indicator-transition     : opacity .6s ease !default;
+
+$carousel-caption-width    : 70% !default;
+$carousel-caption-color    : $white !default;
+$carousel-caption-padding-y: 1.25rem !default;
+$carousel-caption-spacer   : 1.25rem !default;
+
+$carousel-control-icon-width: 20px !default;
+
+$carousel-control-prev-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'><path d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/></svg>") !default;
+$carousel-control-next-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'><path d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/></svg>") !default;
+
+$carousel-transition-duration: .6s !default;
+$carousel-transition         : transform $carousel-transition-duration ease-in-out !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)
+
+
+// Spinners
+
+$spinner-width          : 2rem !default;
+$spinner-height         : $spinner-width !default;
+$spinner-border-width   : .25em !default;
+$spinner-animation-speed: .75s !default;
+
+$spinner-width-sm       : 1.2rem !default;
+$spinner-height-sm      : $spinner-width-sm !default;
+$spinner-border-width-sm: .2em !default;
+
+// Datepicker
+
+$datepicker-border-radius   : $border-radius-sm !default;
+$datepicker-dropdown-padding: 20px 22px !default;
+
+$datepicker-cell-transition      : $transition-base !default;
+$datepicker-cell-hover-background: lighten($gray-400, 55%) !default;
+$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-sm !default;
+
+$datepicker-active-color     : $white !default;
+$datepicker-active-background: $secondary !default;
+$datepicker-active-box-shadow: none !default;
+
+$datepicker-range-background             : $secondary !default;
+$datepicker-range-cell-focused-background: darken($datepicker-range-background, 5%) !default;
+$datepicker-range-color                  : $white !default;
+$datepicker-range-highlighted-bg         : $gray-200 !default;
+
+$datepicker-dropdown-border: lighten($gray-400, 40%) !default;
+$datepicker-dropdown-bg    : $white !default;
+$datepicker-highlighted-bg : $datepicker-active-background !default;
+
+
+// Close
+
+$close-bg         : transparent !default;
+$close-hover-bg   : transparent !default;
+$close-color      : rgba(0, 0, 0, .6) !default;
+$close-hover-color: rgba(0, 0, 0, .9) !default;
+$close-font-size  : $font-size-base * 1.5 !default;
+$close-font-weight: $font-weight-bold !default;
+$close-color      : $black !default;
+$close-text-shadow: 0 1px 0 $white !default;
+
+
+
+// Code
+
+$code-font-size: $small-font-size !default;
+$code-color    : $pink !default;
+
+$kbd-padding-y: .2rem !default;
+$kbd-padding-x: .4rem !default;
+$kbd-font-size: $code-font-size !default;
+$kbd-color    : $white !default;
+$kbd-bg       : $gray-900 !default;
+
+$pre-color: null !default;
+
+// Avatars
+$avatar-sm-y: 1.5rem !default;
+$avatar-sm-x: 1.5rem !default;
+
+$avatar-y: 2rem !default;
+$avatar-x: 2rem !default;
+
+$avatar-md-y: 3rem !default;
+$avatar-md-x: 3rem !default;
+
+$avatar-lg-y: 4.5rem !default;
+$avatar-lg-x: 4.5rem !default;
+
+$avatar-xl-y: 8rem !default;
+$avatar-xl-x: 8rem !default;
+
+// 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;
+$padding-footer-sm       : .125rem !default;
+$padding-footer          : .375rem !default;
+$padding-footer-md       : .625rem !default;
+$padding-footer-general  : .9375rem !default;
+$padding-footer-big      : 1.5rem !default;
diff --git a/app/application/resources/volt-admin/scss/volt/_vendor.scss b/app/application/resources/volt-admin/scss/volt/_vendor.scss
new file mode 100644
index 0000000..9d4f390
--- /dev/null
+++ b/app/application/resources/volt-admin/scss/volt/_vendor.scss
@@ -0,0 +1,6 @@
+// Vendor
+@import "vendor/headroom";
+@import "vendor/nouislider";
+@import "vendor/prism";
+@import "vendor/chartist/chartist";
+@import "vendor/datepicker";
diff --git a/app/application/resources/volt-admin/scss/volt/components/_accordions.scss b/app/application/resources/volt-admin/scss/volt/components/_accordions.scss
new file mode 100755
index 0000000..5ea18f2
--- /dev/null
+++ b/app/application/resources/volt-admin/scss/volt/components/_accordions.scss
@@ -0,0 +1,52 @@
+/**
+ * = Accordions
+*/
+
+
+.accordion-button {
+    text-align: left;
+    &:not(.collapsed) {
+        &::after {
+          background-image: none;
+          @include transform(rotateZ(45deg));
+        }
+    }
+
+    // Accordion icon
+    &::after {
+        background-image: none;
+        content: '\f067';
+        font-family: $font-awesome-5;
+        font-size: $font-size-base;
+        font-weight: 900;
+    }
+
+    &:hover{
+        background-color: $gray-200;
+    }
+}
+  
+  
+// Flush accordion items
+//
+// Remove borders and border-radius to keep accordion items edge-to-edge.
+
+.accordion-flush {
+    .accordion-button {
+        background-color: transparent;
+        &:not(.collapsed) {
+            color: $tertiary;
+        }
+        &:focus {
+            border-color: $gray-300;
+            box-shadow: none;
+        }
+    }
+    .accordion-collapse {
+        border: 0;
+    }
+}
+
+
+
+
diff --git a/app/application/resources/volt-admin/scss/volt/components/_alerts.scss b/app/application/resources/volt-admin/scss/volt/components/_alerts.scss
new file mode 100644
index 0000000..6fd954d
--- /dev/null
+++ b/app/application/resources/volt-admin/scss/volt/components/_alerts.scss
@@ -0,0 +1,10 @@
+.alert-heading{
+    font-weight: $font-weight-bold;
+}
+
+.alert-icon{
+    margin-bottom: .5rem;
+    span{
+        font-size: $alert-icon-font-size;
+    }
+}
\ No newline at end of file
diff --git a/app/application/resources/volt-admin/scss/volt/components/_animations.scss b/app/application/resources/volt-admin/scss/volt/components/_animations.scss
new file mode 100644
index 0000000..cfed042
--- /dev/null
+++ b/app/application/resources/volt-admin/scss/volt/components/_animations.scss
@@ -0,0 +1,234 @@
+
+/**
+ * = Animations
+ */
+
+ @for $size from 1 to 10 {
+    .animate-up-#{$size},
+    .animate-right-#{$size},
+    .animate-down-#{$size},
+    .animate-left-#{$size},
+    .scale-up-#{$size},
+    .scale-down-#{$size} {
+        transition: $transition-base;
+    }
+
+    .scale-up-#{$size} {
+        &:hover {
+            transform: scale($size * 0.5555555556);
+        }
+    }
+
+    .scale-up-hover-#{$size} {
+        &:hover {
+            & .scale {
+                transform: scale($size * 0.5555555556);
+            }
+        }
+    }
+
+    .scale-down-#{$size} {
+        &:hover {
+            transform: scale($size * 0.4);
+        }
+    }
+
+    .animate-up-#{$size} {
+        &:hover,
+        .animate-hover:hover & {
+            @include translate(0, -#{$size}px);
+        }
+    }
+    .animate-right-#{$size} {
+        &:hover,
+        .animate-hover:hover & {
+            @include translate(#{$size}px, 0);
+        }
+    }
+    .animate-down-#{$size} {
+        &:hover,
+        .animate-hover:hover & {
+            @include translate(0, #{$size}px);
+        }
+    }
+    .animate-left-#{$size} {
+        &:hover,
+        .animate-hover:hover & {
+            @include translate(-#{$size}px, 0);
+        }
+    }
+}
+
+// Keyframes
+@keyframes show-navbar-collapse {
+    0% {
+        opacity: 0;
+        transform: scale(.95);
+        transform-origin: 100% 0;
+    }
+
+    100% {
+        opacity: 1;
+        transform: scale(1);
+    } 
+}
+
+@keyframes hide-navbar-collapse {
+    from {
+        opacity: 1;
+        transform: scale(1);
+        transform-origin: 100% 0;
+    }
+
+    to {
+        opacity: 0;
+        transform: scale(.95);
+    } 
+}
+
+@keyframes show-navbar-dropdown {
+    0% {
+        opacity: 0;
+        transform: translate(0, 10px) perspective(200px) rotateX(-2deg);
+        transition: visibility 0.45s, opacity 0.45s, transform 0.45s;
+    }
+
+    100% {
+        transform: translate(0, 0);
+        opacity: 1;
+    } 
+}
+
+@keyframes hide-navbar-dropdown {
+    from {
+        opacity: 1;
+    }
+
+    to {
+        opacity: 0;
+        transform: translate(0, 10px);
+    } 
+}
+
+@keyframes show-dropdown {
+    0% {
+        opacity: 0;
+        transform-origin: perspective(200px) rotateX(-2deg);
+        transition: visibility 0.45s, opacity .5s;
+    }
+
+    100% {
+        opacity: 1;
+    } 
+}
+
+
+@keyframes hide-dropdown {
+    from {
+        opacity: 1;
+    }
+
+    to {
+        opacity: 0;
+        transform: translate(0, 10px);
+    } 
+}
+
+.bell-shake {
+    &.shaking {
+        animation: bellshake .5s cubic-bezier(.36,.07,.19,.97) both;
+        backface-visibility: hidden;
+        transform-origin: top right;
+    }
+}
+
+:root {
+    --animate-duration: 1s;
+    --animate-delay: 1s;
+    --animate-repeat: 1;
+  }
+
+.animate__animated {
+    -webkit-animation-duration: 1s;
+    animation-duration: 1s;
+    -webkit-animation-duration: var(--animate-duration);
+    animation-duration: var(--animate-duration);
+    -webkit-animation-fill-mode: both;
+    animation-fill-mode: both;
+  }
+
+.animate__jackInTheBox {
+    -webkit-animation-name: jackInTheBox;
+    animation-name: jackInTheBox;
+}
+
+@keyframes bellshake {
+    0% { transform: rotate(0); }
+    15% { transform: rotate(5deg); }
+    30% { transform: rotate(-5deg); }
+    45% { transform: rotate(4deg); }
+    60% { transform: rotate(-4deg); }
+    75% { transform: rotate(2deg); }
+    85% { transform: rotate(-2deg); }
+    92% { transform: rotate(1deg); }
+    100% { transform: rotate(0); }
+}
+
+@-webkit-keyframes jackInTheBox {
+    from {
+      opacity: 0;
+      -webkit-transform: scale(0.1) rotate(30deg);
+      transform: scale(0.1) rotate(30deg);
+      -webkit-transform-origin: center bottom;
+      transform-origin: center bottom;
+    }
+  
+    50% {
+      -webkit-transform: rotate(-10deg);
+      transform: rotate(-10deg);
+    }
+  
+    70% {
+      -webkit-transform: rotate(3deg);
+      transform: rotate(3deg);
+    }
+  
+    to {
+      opacity: 1;
+      -webkit-transform: scale(1);
+      transform: scale(1);
+    }
+  }
+  @keyframes jackInTheBox {
+    from {
+      opacity: 0;
+      -webkit-transform: scale(0.1) rotate(30deg);
+      transform: scale(0.1) rotate(30deg);
+      -webkit-transform-origin: center bottom;
+      transform-origin: center bottom;
+    }
+  
+    50% {
+      -webkit-transform: rotate(-10deg);
+      transform: rotate(-10deg);
+    }
+  
+    70% {
+      -webkit-transform: rotate(3deg);
+      transform: rotate(3deg);
+    }
+  
+    to {
+      opacity: 1;
+      -webkit-transform: scale(1);
+      transform: scale(1);
+    }
+  }
+  .animate__jackInTheBox {
+    -webkit-animation-name: jackInTheBox;
+    animation-name: jackInTheBox;
+  }
+
+[class*=shadow] {
+    transition: all .2s ease;
+}
\ No newline at end of file
diff --git a/app/application/resources/volt-admin/scss/volt/components/_avatars.scss b/app/application/resources/volt-admin/scss/volt/components/_avatars.scss
new file mode 100755
index 0000000..ff412b6
--- /dev/null
+++ b/app/application/resources/volt-admin/scss/volt/components/_avatars.scss
@@ -0,0 +1,102 @@
+/**
+ * = Avatars
+ */
+
+ .avatar + .avatar-content {
+    display: inline-block;
+    margin-left: 0.75rem;
+}
+
+.avatar-sm {
+    width: $avatar-sm-y;
+    height: $avatar-sm-x;
+
+    img {
+        width: $avatar-sm-y;
+        height: $avatar-sm-x;
+    }
+}
+
+.avatar {
+    width: $avatar-y;
+    height: $avatar-x;
+
+    img {
+        width: $avatar-y;
+        height: $avatar-x;
+    }
+}
+
+.avatar-md {
+    width: $avatar-md-y;
+    height: $avatar-md-x;
+
+    img {
+        width: $avatar-md-y;
+        height: $avatar-md-x;
+    }
+}
+
+.avatar-lg {
+    width: $avatar-lg-y;
+    height: $avatar-lg-x;
+
+    img {
+        width: $avatar-lg-y;
+        height: $avatar-lg-x;
+    }
+}
+
+.avatar-xl {
+    width: $avatar-xl-y;
+    height: $avatar-xl-x;
+
+    @include media-breakpoint-down(lg) {
+        width: $avatar-lg-y;
+        height: $avatar-lg-x;
+    }
+
+}
+
+
+.avatar-offline,
+.avatar-online {
+    &::before {
+        position: absolute;
+        border: 2px solid $white;
+        background-color: $success;
+        display: block;
+        top: 2px;
+        left: 39px;
+        content: "";
+        border-radius: 50%;
+        height: 10px;
+        width: 10px;
+    }
+}
+
+.avatar-offline {
+    &::before {
+        background-color: $danger;
+    }
+}
+
+// Overlapped avatars
+.avatar-group {
+    .avatar {
+        position: relative;
+        z-index: 0;
+
+        img {
+            border: 2px solid $white;
+        }
+
+        &:hover {
+            z-index: 3;
+        }
+    }
+
+    .avatar + .avatar {
+        margin-left: -1rem;
+    }
+}
diff --git a/app/application/resources/volt-admin/scss/volt/components/_badge.scss b/app/application/resources/volt-admin/scss/volt/components/_badge.scss
new file mode 100755
index 0000000..db64b82
--- /dev/null
+++ b/app/application/resources/volt-admin/scss/volt/components/_badge.scss
@@ -0,0 +1,98 @@
+/**
+ * = Badges
+ */
+
+.badge {
+    font-size:$badge-font-size;
+    font-weight: $badge-font-weight;
+
+    a {
+        color: $white;
+    }
+
+    &.super-badge{
+        vertical-align: super;
+    }
+}
+
+// Variations
+.badge-pill {
+    padding-right: $badge-pill-padding-x;
+    padding-left: $badge-pill-padding-x;
+}
+
+// Multiple inline badges
+.badge-inline {
+    margin-right: .625rem;
+
+    & + span {
+        top: 2px;
+        position: relative;
+
+        & > a {
+            text-decoration: underline;
+        }
+    }
+}
+
+// Sizes
+.badge-sm {
+    padding: .2rem .6rem;
+}
+
+.badge-lg {
+    font-size: $font-size-lg;
+    padding: .35rem .85rem;
+}
+
+//button badges
+
+.btn{
+    .badge-corner{
+        position: absolute;
+        top: -50%;
+        right: .5rem;
+        transform: translate(50%,50%);
+        margin: 0;
+        border: 3px solid;
+        padding-left: .5rem;
+        padding-right: .5rem;
+    }
+}
+//Tags 
+.wi-tags{
+    a {
+        display: inline-block;
+        padding: 0.125rem 0.875rem;
+        margin: 0.25rem;
+        line-height: 2;
+        font-size: $font-size-sm;
+        box-shadow: $box-shadow-sm;
+        background-color: $white;
+    }
+}
+
+.pixel-pro-badge{
+    position: relative;
+    font-size: $font-size-sm;
+    text-transform: uppercase;
+    font-weight: $font-weight-bold;
+    right: -11px;
+    padding: 4px 12px;
+    top: -30px;
+    background: $white;
+    @include border-radius($border-radius-sm);
+    @include box-shadow($box-shadow-sm);
+    @include media-breakpoint-down(sm){
+        font-size: $font-size-base;
+        right: -13px;
+        padding: 5px 10px;
+        top: -23px;
+    }
+}
+
+.subscription-badge {
+    top: -19px;
+    right: -12px;
+    font-size: .75rem;
+}
diff --git a/app/application/resources/volt-admin/scss/volt/components/_body.scss b/app/application/resources/volt-admin/scss/volt/components/_body.scss
new file mode 100644
index 0000000..002688a
--- /dev/null
+++ b/app/application/resources/volt-admin/scss/volt/components/_body.scss
@@ -0,0 +1,31 @@
+iframe {
+    border: 0;
+}
+
+figcaption,
+figure,
+main {
+    display: block;
+    margin: 0;
+}
+
+main {
+	overflow: hidden;
+}
+
+img {
+    max-width: 100%;
+}
+
+strong{
+    font-weight: $font-weight-bold;
+}
+
+button:focus {
+    outline: 0;
+}
+
+label {
+    font-weight: $font-weight-bold;
+    margin-bottom:.5rem;
+}
\ No newline at end of file
diff --git a/app/application/resources/volt-admin/scss/volt/components/_breadcrumb.scss b/app/application/resources/volt-admin/scss/volt/components/_breadcrumb.scss
new file mode 100755
index 0000000..38e72d6
--- /dev/null
+++ b/app/application/resources/volt-admin/scss/volt/components/_breadcrumb.scss
@@ -0,0 +1,56 @@
+/**
+ * = Breadcrumbs
+ */
+
+.breadcrumb-item {
+  font-size: $font-size-xs;
+  &, a {
+    color: $breadcrumb-item-color;
+    font-weight: $breadcrumb-font-weight;
+    font-size: $font-size-xs;
+    @include media-breakpoint-up(sm){
+      font-size: $font-size-sm;
+    }
+  }
+
+  &.active {
+    font-weight: $breadcrumb-active-font-weight;
+  }
+
+}
+
+.breadcrumb-transparent {
+  background: transparent;
+  padding: 0;
+}
+
+@each $color, $value in $theme-colors {
+  .breadcrumb-#{$color}  {
+      background: $value;
+      .breadcrumb-item{
+          &.active {
+              color: $white;
+          }
+      }
+      &.breadcrumb-transparent {
+        background: transparent;
+        .breadcrumb-item {
+          &.active {
+            color: $value;
+          }
+        }
+      }
+  }
+}
+
+.breadcrumb-text-light {
+  .breadcrumb-item {
+    &, a {
+      color: $breadcrumb-item-light-color;
+    }
+
+    &:before {
+      color: $breadcrumb-divider-light-color;
+    }
+  }
+}
diff --git a/app/application/resources/volt-admin/scss/volt/components/_buttons.scss b/app/application/resources/volt-admin/scss/volt/components/_buttons.scss
new file mode 100755
index 0000000..e45d369
--- /dev/null
+++ b/app/application/resources/volt-admin/scss/volt/components/_buttons.scss
@@ -0,0 +1,86 @@
+/*
+* = Buttons
+*/
+
+.btn {
+    &.btn-circle {
+        border-radius: $circle-radius;
+    }
+	&.btn-md{
+        padding: 0.65rem 1.25rem;
+    }
+    &.btn-xs{
+        padding: .2rem 0.35rem;
+        font-size: 0.55rem;
+        box-shadow: none;
+    }
+    &.large-form-btn{
+        padding: 1.2rem 1rem;
+    }
+    &.dashed-outline {
+        border-style: dashed;
+    }
+}
+
+
+.btn-icon-only {
+    width: 2.575rem;
+    height: 2.575rem;
+    padding: 0;
+    @include display-flex();
+    @include justify-content(center);
+    @include align-items(center);
+
+    &.btn-xs {
+        width: 1.7rem;
+        height: 1.7rem;
+    }
+    &.btn-sm {
+        width: 2rem;
+        height: 2rem;
+    }
+}
+
+.btn-upgrade-pro {
+    position: fixed;
+    bottom: 15px;
+    right: 15px;
+    width: 190px;
+
+    @include media-breakpoint-up(md) {
+        left: 35px;
+    }
+}
+
+// Fix for darken background color
+@each $color, $value in $theme-colors {
+    .btn-#{$color} {
+        &:hover{
+           background-color:  darken( $value, 5% );
+           border-color: darken( $value, 5% );
+        }
+    }   
+}
+
+// Brand (social) buttons 
+@each $color, $value in $brand-colors {
+    .btn-#{$color} {
+        @include button-variant($value, $value);
+
+		&.btn-link {
+			color: $value;
+			background: transparent;
+			box-shadow: none;
+            border:0;
+            border-style: none;
+			&:hover,
+			&:focus,
+			&.active {
+                background-color: transparent !important;
+                box-shadow: none;
+                border: 0;
+				color: $value;
+			}
+		}
+    }
+}
diff --git a/app/application/resources/volt-admin/scss/volt/components/_card.scss b/app/application/resources/volt-admin/scss/volt/components/_card.scss
new file mode 100755
index 0000000..2e56166
--- /dev/null
+++ b/app/application/resources/volt-admin/scss/volt/components/_card.scss
@@ -0,0 +1,149 @@
+/**
+ * = Cards
+ */
+
+.card {
+    position: relative;
+    .card-header{
+        background: transparent;
+    }
+
+    &.hover-state{
+        &:hover {
+            background-color: $soft;
+        }
+    }
+
+    .profile-cover{
+        @include background-image(no-repeat, cover); 
+        height: 200px;
+    }
+
+}
+
+.message-wrapper,
+.task-wrapper{
+    .card{
+        border:0;
+    }
+}
+
+.customer-testimonial {
+    .content-wrapper{
+        &:before {
+            content: "";
+            position: absolute;
+            top: 25px;
+            left: -1px;
+            margin-left: .75rem;
+            border: 8px solid $black;
+            border-color: transparent #e0e6ec #e0e6ec transparent;
+            -webkit-box-sizing: border-box;
+            box-sizing: border-box;
+            -webkit-transform-origin: 0 0;
+            transform-origin: 0 0;
+            @include transform(rotate(135deg));
+            @include box-shadow($box-shadow);
+        }
+    }
+}
+
+.card-footer{
+    background-color:transparent;
+}
+
+.card-stats{
+    padding-left:1.9rem;
+}
+
+
+// Card with blockquotes
+
+.card {
+    .card-blockquote {
+        position: relative;
+        padding: 2rem;
+
+        .svg-bg {
+            display: block;
+            position: absolute;
+            width: 100%;
+            height: 95px;
+            top: -94px;
+            left: 0;
+        }
+    }
+}
+
+// Animated cards
+
+
+.page-preview {
+
+    display: block;
+    position: relative;
+
+    .show-on-hover {
+        position: absolute;
+        bottom: -0;
+        background: rgba($dark, .85);
+        padding: 10px 0;
+        width: 100%;
+        left: 0;
+        opacity: 0;
+        @include transition(.2s);
+    }
+
+    &:hover {
+        z-index: 1;
+        
+        .show-on-hover {
+            opacity: 1;
+        }
+    }
+}
+
+.theme-settings {
+    z-index: 99;
+    position: fixed;
+    right: 15px;
+    bottom: 0;
+    
+    &, .card-body {
+        border-bottom-right-radius: 0;
+        border-bottom-left-radius: 0;
+    }
+}
+
+.theme-settings-close {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    font-size: .65rem;
+}
+
+.btn-close {
+
+    &.theme-settings-close{
+        background: transparent escape-svg($btn-close-bg-white) center / $btn-close-width auto no-repeat; // include transparent for button elements
+        border: 0; // for button elements
+        @include border-radius();
+        opacity: $btn-close-opacity;
+    }
+}
+
+.theme-settings-expand {
+    right: 15px;
+    bottom: 0;
+    height: 0;
+    @include transition(.3s height);
+
+    &.show {
+        height: 40px;
+    }
+
+    &:hover {
+        background: $gray-600;
+        cursor: pointer;
+    }
+}
\ No newline at end of file
diff --git a/app/application/resources/volt-admin/scss/volt/components/_carousel.scss b/app/application/resources/volt-admin/scss/volt/components/_carousel.scss
new file mode 100755
index 0000000..3da686b
--- /dev/null
+++ b/app/application/resources/volt-admin/scss/volt/components/_carousel.scss
@@ -0,0 +1,52 @@
+/**
+ * = Bootstrap carousels
+ */
+
+.carousel-caption {
+    &, h5 {
+        color: $white;
+    }
+}
+
+//Indicators
+
+.carousel-indicators {
+    li {
+        height: 10px;
+        width:10px;
+        border-radius:$circle-radius;
+        background:transparent;
+        border:2px solid $white;
+    }
+    .active {
+        opacity: 1;
+        background: $white;
+    }
+}
+
+//Carousel Controls 
+
+.carousel-control-prev-icon,
+.carousel-control-next-icon {
+  width: auto;
+  height: auto;
+  font-weight: 900;
+}
+
+.carousel-control-prev-icon {
+    background-image: none;
+    &::before{
+        content: '\f060';
+        font-family: $font-awesome-5;
+        font-size: $font-size-xxl;
+    }
+}
+
+.carousel-control-next-icon {
+    background-image: none;
+    &:before{
+        font-family: $font-awesome-5;
+        content: "\f061";
+        font-size: $font-size-xxl;
+    }
+}
\ No newline at end of file
diff --git a/app/application/resources/volt-admin/scss/volt/components/_charts.scss b/app/application/resources/volt-admin/scss/volt/components/_charts.scss
new file mode 100644
index 0000000..d95f812
--- /dev/null
+++ b/app/application/resources/volt-admin/scss/volt/components/_charts.scss
@@ -0,0 +1,52 @@
+.ct-bar {
+    stroke-linecap: round;
+    stroke-width: 10px;
+}
+.ct-label {
+    fill: $body-color;
+    color: $body-color;
+    font-size: 0.75rem;
+    margin-top: 6px;
+    font-weight: $font-weight-bold;
+}
+
+.ct-slice-pie {
+    stroke: $white;
+    stroke-width: 3px;
+}
+
+.ct-chart-donut .ct-series {
+    stroke: $white;
+    stroke-width: 3px;
+}
+
+.ct-chart-pie .ct-label, .ct-chart-donut .ct-label {
+    font-size: 0.75rem;
+    font-weight: $font-weight-bold;
+}
+
+.small-chart{
+    margin-left:-1rem;
+}
+
+//Label color Fix for pie chart
+
+.ct-chart-pie .ct-label, .ct-chart-donut .ct-label {
+    color: #ffffff;
+    fill: #ffffff;
+    font-size: $font-size-base;
+    font-weight: $font-weight-bold;
+}
+
+.ct-series-g{
+    .ct-grid {
+        stroke: #F8BD7A;
+        stroke-width: 2px;
+        stroke-dasharray: 2px;
+    }
+    .ct-label.ct-horizontal.ct-end {
+        margin-left:-9px;
+        margin-top:10px;
+        color: $primary;      
+    }
+}
diff --git a/app/application/resources/volt-admin/scss/volt/components/_close.scss b/app/application/resources/volt-admin/scss/volt/components/_close.scss
new file mode 100755
index 0000000..8b56b91
--- /dev/null
+++ b/app/application/resources/volt-admin/scss/volt/components/_close.scss
@@ -0,0 +1,33 @@
+/**
+ * = Close
+ */
+
+.close { 
+    @if $enable-transitions {
+        transition: $transition-base;
+    } 
+    &>span:not(.sr-only) {
+        display: block;
+        height: 1.25rem;
+        width: 1.25rem; 
+        background-color: $close-bg;
+        color: $close-color;
+        line-height: 17px;
+        border-radius: 50%;
+        font-size: 1.25rem;
+        @if $enable-transitions {
+            transition: $transition-base;
+        } 
+    } 
+
+    &:hover,
+    &:focus {
+        background-color: $close-hover-bg;
+        color: $close-hover-color;
+        outline: none;
+        
+        span:not(.sr-only) {
+            background-color: $close-hover-bg;
+        }
+    }
+}
diff --git a/app/application/resources/volt-admin/scss/volt/components/_custom-forms.scss b/app/application/resources/volt-admin/scss/volt/components/_custom-forms.scss
new file mode 100755
index 0000000..d2be88d
--- /dev/null
+++ b/app/application/resources/volt-admin/scss/volt/components/_custom-forms.scss
@@ -0,0 +1,103 @@
+/**
+ * = Custom forms
+ */
+
+ .custom-control-label {
+    // Background-color and (when enabled) gradient
+    &:before {
+        box-shadow: $custom-control-box-shadow;
+        @if $enable-transitions {
+            transition: $input-transition;
+        } 
+    }
+
+    span {
+        position: relative;
+        top: 2px;
+    }
+} 
+
+.custom-control-label {
+    margin-bottom: 0;
+}
+
+.custom-control-input {
+    &:active~.custom-control-label::before {
+        border-color: $custom-control-indicator-active-border-color;
+    }
+}
+
+// Custom File Input
+
+.custom-file-label {
+    background-color: #f3f3f5;
+  
+    &::after {
+
+      background-color: #f3f3f5;
+    }
+}
+
+
+//Select
+.custom-select{
+    font-size: $input-btn-font-size;
+    box-shadow:none;
+
+    &.custom-select-shadow {
+        box-shadow: $input-box-shadow;
+        transition: box-shadow .15s ease;
+    
+        &:focus {
+            box-shadow: $shadow-input-focus;
+        }
+    }
+
+    &:hover {
+        cursor: pointer;
+    }
+}
+
+// Inbox star
+.rating-star {
+    &.star-lg{
+        label{
+            margin-bottom: .5rem;
+            &::before{
+                font-size: $font-size-xl;
+            }
+        }
+    }
+	label {
+		position: relative;
+		margin-bottom: 0;
+		cursor: pointer;
+        color: $light;
+        &:before {
+			content: "\f005";
+			font-family: "Font Awesome 5 Free";
+			font-weight: 900;
+			transition: all .2s ease;
+			font-size: 1.0625rem;
+		}
+	}
+	input {
+		position: absolute;
+		z-index: -1;
+		opacity: 0;
+    }
+
+    >input:checked~label {
+        color: $warning;
+    }
+
+	>label {
+		&:hover {
+			color: $warning;
+		}
+		&:hover~label {
+			color: $warning;
+		}
+	}
+}
+
diff --git a/app/application/resources/volt-admin/scss/volt/components/_datepicker.scss b/app/application/resources/volt-admin/scss/volt/components/_datepicker.scss
new file mode 100755
index 0000000..02e2450
--- /dev/null
+++ b/app/application/resources/volt-admin/scss/volt/components/_datepicker.scss
@@ -0,0 +1,13 @@
+/**
+ * = Datepickers
+ */
+
+ .datepicker {
+
+    .datepicker-cell.selected,
+    .datepicker-cell.selected:hover {
+      background: $primary;
+    }
+  
+  }
+  
\ No newline at end of file
diff --git a/app/application/resources/volt-admin/scss/volt/components/_dropdown.scss b/app/application/resources/volt-admin/scss/volt/components/_dropdown.scss
new file mode 100755
index 0000000..6b87370
--- /dev/null
+++ b/app/application/resources/volt-admin/scss/volt/components/_dropdown.scss
@@ -0,0 +1,68 @@
+.dropdown-menu {
+    .dropdown-header,
+    .dropdown-item {
+        padding: .5rem 1rem;
+        font-size: $dropdown-font-size;
+        .dropdown-icon{
+            height: 1.25rem;
+            width:  1.25rem;
+        }
+    }
+
+    .dropdown-header {
+        color: $dropdown-header-color;
+        font-weight: $dropdown-header-font-weight;
+    }
+
+    .dropdown-item {
+        transition: $transition-base;
+        font-weight: $dropdown-item-font-weight;
+
+    }
+
+    .show & {
+        animation: show-dropdown .2s ease forwards;
+    }
+
+    &.dropdown-menu-xs {
+        min-width: 120px;
+        max-width: 120px;
+        @include box-shadow($box-shadow-sm);
+    }
+
+}
+
+// Dropown sizes
+.dropdown-menu-sm {
+    min-width: 100px;
+    border: $border-radius-lg;
+}
+
+.dropdown-menu-md {
+    min-width: 180px;
+    border: $border-radius-lg;
+}
+
+.dropdown-menu-lg {
+    min-width: 350px;
+    border-radius: $border-radius-lg;
+    @include media-breakpoint-down(sm) {
+        min-width: 300px;
+    }
+}
+
+
+
+// this helps when not only the button should toggle a dropdown
+[data-toggle]:hover {
+    cursor: pointer;
+}
+
+// remove the caret from Bootstrap by default
+.dropdown-toggle {
+    &:after, .dropend &:after, .dropstart &:before, .dropup &:after {
+        display: none;
+    }
+}
+
+
diff --git a/app/application/resources/volt-admin/scss/volt/components/_icons.scss b/app/application/resources/volt-admin/scss/volt/components/_icons.scss
new file mode 100755
index 0000000..30d8ea9
--- /dev/null
+++ b/app/application/resources/volt-admin/scss/volt/components/_icons.scss
@@ -0,0 +1,202 @@
+/**
+ * = Icon boxes
+ */
+
+ .icon {
+	height: $icon-size;
+
+	&.icon-xxs {
+		height: $icon-size-xxs;
+	}
+
+	&.icon-xs {
+		height: $icon-size-xs;
+	}
+	&.icon-sm {
+		height: $icon-size-sm;
+	}
+	&.icon-lg {
+		height: $icon-size-lg;
+	}
+	&.icon-xl {
+		height: $icon-size-xl;
+	}
+	&.icon-xxl {
+		height: $icon-size-xxl;
+	}
+
+	&.active-dot {
+		svg {
+			height: 0.7rem;
+		}
+	}
+}
+
+// Icons included in shapes
+.icon-shape {
+	width: $icon-shape;
+	height: $icon-shape;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+
+	svg {
+		height: $icon-size;
+	}
+
+	&.icon-xxs {
+		width: $icon-shape-xxs;
+		height: $icon-shape-xxs;
+		svg {
+			height: $icon-size-xxs;
+		}
+	}
+
+	&.icon-xs {
+		width: $icon-shape-xs;
+		height: $icon-shape-xs;
+		svg {
+			height: $icon-size-xs;
+		}
+	}
+
+	&.icon-sm {
+		width: $icon-shape-sm;
+		height: $icon-shape-sm;
+		svg {
+			height: $icon-size-sm;
+		}
+	}
+
+	&.icon-lg {
+		width: $icon-shape-lg;
+		height: $icon-shape-lg;
+		svg {
+			height: $icon-size-lg;
+		}
+	}
+
+	&.icon-xl {
+		width: $icon-shape-xl;
+		height: $icon-shape-xl;
+		svg {
+			height: $icon-size-xl;
+		}
+	}
+
+	&.icon-xxl {
+		width: $icon-shape-xxl;
+		height: $icon-shape-xxl;
+		svg {
+			height: $icon-size-xxl;
+		}
+	}
+}
+
+// Inbox star Icons
+.rating-star {
+	&:hover {
+		cursor: pointer;
+		color: $warning;
+	}
+}
+
+.toggle-icon {
+	height: 1.875rem;
+}
+
+//Icons inside table fixed width
+.w--20 {
+	width: 20px;
+}
+
+//Calendar Icon
+
+.calendar {
+	width: 3.125rem;
+	line-height: 1;
+	flex-direction: column;
+	text-align: center;
+	border-radius: $border-radius;
+	.calendar-month {
+		background-color: $danger;
+		color: $white;
+		border-radius: $border-radius $border-radius 0 0;
+		padding: 0.275rem;
+		font-weight: $font-weight-bold;
+	}
+	.calendar-day {
+		font-size: $font-size-xl;
+		padding: 0.25rem;
+		background-color: $gray-100;
+		border-top: 0;
+		border-radius: 0 0 $border-radius $border-radius;
+		color: $dark;
+		font-weight: $font-weight-bold;
+	}
+}
+
+//Legend dot
+
+.dot {
+	width: 12px;
+	height: 12px;
+}
+
+//Bell notification dot
+.bell-dot {
+	display: inline-block;
+	position: absolute;
+	top: -11px;
+	right: 6px;
+	height: 10px;
+	width: 10px;
+	border: 2px solid $gray-100;
+}
+
+.notification-bell.unread {
+	&::before {
+		position: absolute;
+		content: "";
+		background-color: $danger;
+		right: 12px;
+		top: 7px;
+		height: 0.75rem;
+		width: 0.75rem;
+		border-radius: 50%;
+		border: 2px solid $gray-100;
+	}
+}
+
+//Index Big Icon
+.bootstrap-big-icon {
+	position: absolute;
+	opacity: 0.05;
+	transform: rotate(17deg);
+	@include media-breakpoint-up(lg) {
+		right: -20%;
+		bottom: 6%;
+	}
+
+	@include media-breakpoint-up(xl) {
+		right: -10%;
+		bottom: 6%;
+	}
+}
+
+.github-big-icon {
+	position: absolute;
+	right: 80px;
+	svg {
+		color: $gray-400;
+		height:800px;
+		opacity: 0.2;
+	}
+}
+
+//Colors for icons, shapes and svg's
+@each $color, $value in $theme-colors {
+	.icon-shape-#{$color} {
+		@include icon-shape-variant($value);
+	}
+}
diff --git a/app/application/resources/volt-admin/scss/volt/components/_images.scss b/app/application/resources/volt-admin/scss/volt/components/_images.scss
new file mode 100644
index 0000000..a4cb8f7
--- /dev/null
+++ b/app/application/resources/volt-admin/scss/volt/components/_images.scss
@@ -0,0 +1,67 @@
+/**
+ * = Images
+ */
+ .image-xl {
+    height: 20rem;
+    img{
+        height: 20rem;
+    }
+}
+
+.image-lg {
+    height: 12rem;
+    img{
+        height: 12rem;
+    }
+}
+
+.image-md{
+    height: 5.5rem;
+    img{
+        height: 5.5rem;
+    }
+}
+
+.image-sm {
+    height: 3rem;
+    img{
+        height: 3rem;
+    }
+}
+
+.image-xs {
+    height: 1.5rem;
+    img{
+        height: 1.5rem;
+    }
+}
+
+.image-small {
+    height: 1rem;
+    img{
+        height: 1rem;
+    }
+}
+
+.full-image{
+    height:100%;
+}
+
+
+.language-flag{
+    width: auto;
+    height: 1rem;
+    margin-right: 0.4rem;
+    position: relative;
+    top: -2px;
+}
+
+.home-pattern{
+    fill: $gray-100;
+}
+
+.form-bg-image {
+    background-repeat: no-repeat!important;
+    background-position: top center!important;
+}
+
diff --git a/app/application/resources/volt-admin/scss/volt/components/_list-group.scss b/app/application/resources/volt-admin/scss/volt/components/_list-group.scss
new file mode 100755
index 0000000..160e468
--- /dev/null
+++ b/app/application/resources/volt-admin/scss/volt/components/_list-group.scss
@@ -0,0 +1,96 @@
+/**
+ * = List groups
+ */
+
+// Space list items
+.list-group-space {
+    .list-group-item {
+        margin-bottom: 1.5rem;
+        @include border-radius($list-group-border-radius);
+    }
+}
+
+
+// List group components
+.list-group-item{
+    border:0;
+    &.active {
+        z-index: 2; // Place active items above their siblings for proper border styling
+        color: $list-group-active-color;
+        background-color: $list-group-active-bg;
+        border-color: $list-group-active-border-color;
+    }
+
+    i{
+        width: 1rem;
+    }
+}
+
+.list-group-img {
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    vertical-align: top;
+    margin: -.1rem 1.2rem 0 -.2rem;
+}
+.list-group-content {
+    -webkit-box-flex: 1;
+    -ms-flex: 1;
+    flex: 1;
+    min-width: 0;
+
+    > p {
+        color: $gray-500;
+        line-height: 1.5;
+        margin: .2rem 0 0;
+    }
+}
+.list-group-heading {
+    font-size: $font-size-base;
+    color: $gray-800;
+
+    > small {
+        float: right;
+        color: $gray-500;
+        font-weight: 500;
+    }
+}
+
+
+.list-group{
+    &.simple-list{
+        .list-group-item{
+            background: transparent;
+            border: none;
+            padding: 0.375rem 0.125rem;
+            i{
+                vertical-align: middle;
+                width: 35px;
+                display: inline-block;
+            }
+        }
+    }
+
+}
+
+
+//News list for widgets
+
+.news-list{
+	.row{
+		> [class*='col']{
+	  		padding: 0 $spacer/4;
+		}
+	}
+
+	> li{
+		&:not(:last-child){
+		  margin-bottom: .75rem;
+		}
+	}
+
+	img{
+		min-height: 100%;
+		object-fit: cover;
+	}
+}
diff --git a/app/application/resources/volt-admin/scss/volt/components/_modal.scss b/app/application/resources/volt-admin/scss/volt/components/_modal.scss
new file mode 100755
index 0000000..5fe4bc7
--- /dev/null
+++ b/app/application/resources/volt-admin/scss/volt/components/_modal.scss
@@ -0,0 +1,36 @@
+/**
+ * = Modals
+ */
+
+.modal{
+    &.static-example{
+        position: relative;
+        display: block;
+    }
+}
+
+.modal-content {
+    border: 0;
+    @if $enable-rounded {
+        border-radius: $modal-content-border-radius;
+    } @else {
+        border-radius: 0;
+    }
+}
+
+.modal-fluid {
+    .modal-dialog {
+        margin-top: 0;
+        margin-bottom: 0;
+    }
+    .modal-content {
+        border-radius: 0;
+    }
+}
+
+@each $color, $value in $theme-colors {
+    .modal-#{$color} {
+        @include modal-variant($value);
+    }
+}
+
diff --git a/app/application/resources/volt-admin/scss/volt/components/_nav.scss b/app/application/resources/volt-admin/scss/volt/components/_nav.scss
new file mode 100755
index 0000000..ab1907c
--- /dev/null
+++ b/app/application/resources/volt-admin/scss/volt/components/_nav.scss
@@ -0,0 +1,256 @@
+/**
+ * = Navs
+ */
+
+.nav-link {
+    color: $nav-link-color;
+
+    &:hover,
+    &.active {
+        color: $nav-link-hover-color;
+
+        img {
+            opacity   : inherit;
+            transition: $transition-base;
+        }
+    }
+
+    span {
+        position: relative;
+    }
+}
+
+//Tabs 
+
+.nav-tabs {
+    .nav-item {
+        margin-bottom: 0;
+    }
+
+    .nav-link {
+        border          : 0;
+        padding         : 1rem 1rem;
+        background-color: $white;
+
+        &.active {
+            color           : $white;
+            background-color: $primary;
+        }
+    }
+
+    &.nav-dark {
+        .nav-link {
+            &.active {
+                color           : $white;
+                background-color: #12358a;
+            }
+        }
+    }
+
+    &.nav-light {
+        .nav-link {
+            &.active {
+                color           : $black;
+                background-color: $light;
+            }
+
+            &:hover {
+                color: $black;
+            }
+        }
+    }
+}
+
+// Pills 
+
+.nav-pills {
+    .nav-item:not(:last-child) {
+        padding-right: $nav-pills-space-x;
+    }
+
+    .nav-link {
+        padding   : $nav-pills-padding-y $nav-pills-padding-x;
+        transition: $transition-base;
+        box-shadow: $nav-link-shadow;
+        border    : $nav-pills-border-width solid $nav-pills-border-color;
+
+        &.avatar-link {
+            border: 0;
+        }
+
+        &: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;
+        border-color    : $nav-pills-link-active-color;
+    }
+
+    &.rounded {
+        .nav-link {
+            border-radius: 30px;
+        }
+
+        &.vertical-tab {
+            .nav-link {
+                margin-bottom: .625rem;
+                min-width    : 100px;
+            }
+
+            .nav-item:not(:last-child) {
+                padding-right: 0;
+            }
+        }
+    }
+
+    &.bordered-pill-md {
+        .nav-link {
+            border     : $border-width-md solid $gray-200;
+            font-weight: $font-weight-bold;
+        }
+    }
+
+    &.vertical-tab {
+        .nav-link {
+            margin-bottom: .625rem;
+        }
+
+        .nav-item:not(:last-child) {
+            padding-right: 0;
+        }
+    }
+
+    @include media-breakpoint-down(xs) {
+        .nav-item {
+            margin-bottom: $spacer;
+        }
+    }
+}
+
+@include media-breakpoint-down(sm) {
+    .nav-pills:not(.nav-pills-circle) {
+        .nav-item {
+            padding-right: 0;
+        }
+    }
+}
+
+
+// Navs circle
+
+.nav-pill-circle {
+    .nav-link {
+        @include display-flex();
+        text-align     : center;
+        height         : 80px;
+        width          : 80px;
+        padding        : 0;
+        box-shadow     : $nav-link-shadow;
+        border-radius  : $nav-pills-border-circle;
+        align-items    : center;
+        justify-content: center;
+
+        &.avatar-link {
+            box-shadow: none;
+        }
+    }
+
+    &.vertical-tab {
+        .nav-link-icon {
+
+            i,
+            svg {
+                font-size: 1.5rem;
+            }
+        }
+
+        .nav-item:not(:last-child) {
+            padding-right: 0;
+        }
+    }
+
+    .nav-link-icon {
+
+        i,
+        svg {
+            font-size: 1.25rem;
+            margin   : 0;
+            display  : block;
+        }
+    }
+}
+
+// Navs square
+
+.nav-pill-square {
+    .nav-link {
+        text-align: center;
+        min-width : 80px;
+        box-shadow: $nav-link-shadow;
+        @include display-flex();
+        align-items    : center;
+        justify-content: center;
+    }
+
+    &.vertical-tab {
+        .nav-link {
+            margin-bottom: .625rem;
+            min-width    : 100px;
+        }
+
+        .nav-item:not(:last-child) {
+            padding-right: 0;
+        }
+    }
+
+    .nav-link-icon {
+
+        i,
+        svg {
+            font-size  : 1.25rem;
+            margin     : 0;
+            display    : block;
+            line-height: 50px;
+        }
+    }
+}
+
+// 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);
+    }
+}
+
+// Tabbable tabs
+//
+// Hide tabbable panes to start, show them when `.active`
+
+.tab-content {
+    >.tab-pane {
+        display: none;
+
+        pre {
+            padding: 0;
+            margin : 0;
+        }
+    }
+
+    >.active {
+        display: block;
+    }
+}
+
+.nav-pills .nav-item {
+    @include media-breakpoint-up(lg) {
+        margin-bottom: 0;
+    }
+}
\ No newline at end of file
diff --git a/app/application/resources/volt-admin/scss/volt/components/_pagination.scss b/app/application/resources/volt-admin/scss/volt/components/_pagination.scss
new file mode 100755
index 0000000..106973b
--- /dev/null
+++ b/app/application/resources/volt-admin/scss/volt/components/_pagination.scss
@@ -0,0 +1,16 @@
+/**
+ * = Paginations
+ */
+ .circle-pagination{
+    .page-link,
+    span{
+        @include display-flex();
+        align-items: center;
+        justify-content: center;
+        width: 34px;
+        height: 34px;
+        padding: 0;
+        @include border-radius($circle-radius);
+    }
+}
+
diff --git a/app/application/resources/volt-admin/scss/volt/components/_popover.scss b/app/application/resources/volt-admin/scss/volt/components/_popover.scss
new file mode 100755
index 0000000..520acd8
--- /dev/null
+++ b/app/application/resources/volt-admin/scss/volt/components/_popover.scss
@@ -0,0 +1,19 @@
+/**
+ * = Popovers
+ */
+
+.popover {
+    border: 0;
+}
+
+
+.popover-header {
+	font-weight: $font-weight-bold;
+}
+
+// Alternative colors
+@each $color, $value in $theme-colors {
+    .popover-#{$color} {
+        @include popover-variant($value);
+    }
+}
\ No newline at end of file
diff --git a/app/application/resources/volt-admin/scss/volt/components/_progress.scss b/app/application/resources/volt-admin/scss/volt/components/_progress.scss
new file mode 100755
index 0000000..c974813
--- /dev/null
+++ b/app/application/resources/volt-admin/scss/volt/components/_progress.scss
@@ -0,0 +1,116 @@
+/**
+ * = Progress bars
+ */
+
+.progress-wrapper {
+    position: relative;
+}
+
+.progress-bar {
+    box-shadow: none;
+    border-radius: 0;
+    height: auto;
+}
+
+.progress {
+    height: 6px;
+    margin-bottom: $spacer;
+    overflow: hidden;
+    background-color: $progress-bg;
+    font-size: $font-size-xs;
+    font-weight: $font-weight-bold;
+    @include box-shadow(inset 0 1px 2px rgba(0, 0, 0, .1))
+}
+
+.progress-xl {
+    height: $progress-xl-size;
+}
+.progress-lg {
+    height: $progress-lg-size;
+}
+.progress-sm {
+    height: $progress-sm-size;
+}
+
+.progress-info{
+    @include display-flex();
+    @include align-items(center);
+    @include justify-content(space-between);
+    margin-bottom: .5rem;
+
+    .progress-label {
+        span {
+            display: inline-block;
+            color: $primary;
+            font-size: $font-size-sm;
+            font-weight: $font-weight-bold;
+        }
+    }
+    
+    .progress-percentage {
+        text-align: right;
+        span {
+            display: inline-block;
+            color: $gray-500;
+            font-size: $font-size-xs;
+            font-weight: $font-weight-bold;
+        }
+    }
+}
+
+.info-xl{
+    .progress-label,
+    .progress-percentage {
+        span {
+            font-size: $font-size-sm;
+        }
+    }
+
+    .progress-percentage {
+        text-align: right;
+    }
+
+}
+
+.progress-tooltip {
+    background: $primary;
+    color: $white;
+    font-weight: $font-weight-bold;
+    padding: .25rem .375rem;
+    line-height: 1;
+    font-size: $font-size-xs;
+    position: relative;
+    border-radius: $border-radius-sm;
+
+    &:after {
+        content: " ";
+        position: absolute;
+        top: 100%;
+        left: 10px;
+        border: solid transparent;
+        height: 0;
+        width: 0;
+        pointer-events: none;
+        border-top-color: $gray;
+        border-width: 6px;
+    }
+}
+
+@-webkit-keyframes animate-positive{
+    0% { width: 0%; }
+}
+@keyframes animate-positive{
+    0% { width: 0%; }
+}
+
+//Tooltip arrow color
+@each $color,
+$value in $theme-colors {
+    .progress-info{
+        .bg-#{$color} {
+            &::after{
+                border-top-color: $value;
+            }
+        }
+    }
+}
diff --git a/app/application/resources/volt-admin/scss/volt/components/_scrollbar.scss b/app/application/resources/volt-admin/scss/volt/components/_scrollbar.scss
new file mode 100644
index 0000000..e757b73
--- /dev/null
+++ b/app/application/resources/volt-admin/scss/volt/components/_scrollbar.scss
@@ -0,0 +1,228 @@
+[data-simplebar] {
+    position: fixed;
+    flex-direction: column;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    align-content: flex-start;
+    align-items: flex-start;
+  }
+  
+  .simplebar-wrapper {
+    overflow: hidden;
+    width: inherit;
+    height: inherit;
+    max-width: inherit;
+    max-height: inherit;
+  }
+  
+  .simplebar-mask {
+    direction: inherit;
+    position: absolute;
+    overflow: hidden;
+    padding: 0;
+    margin: 0;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    width: auto !important;
+    height: auto !important;
+    z-index: 0;
+  }
+  
+  .simplebar-offset {
+    direction: inherit !important;
+    box-sizing: inherit !important;
+    resize: none !important;
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    padding: 0;
+    margin: 0;
+    -webkit-overflow-scrolling: touch;
+  }
+  
+  .simplebar-content-wrapper {
+    direction: inherit;
+    box-sizing: border-box !important;
+    position: relative;
+    display: block;
+    height: 100%; /* Required for horizontal native scrollbar to not appear if parent is taller than natural height */
+    width: auto;
+    max-width: 100%; /* Not required for horizontal scroll to trigger */
+    max-height: 100%; /* Needed for vertical scroll to trigger */
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+  }
+  
+  .simplebar-content-wrapper::-webkit-scrollbar,
+  .simplebar-hide-scrollbar::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+  }
+  
+  .simplebar-content:before,
+  .simplebar-content:after {
+    content: ' ';
+    display: table;
+  }
+  
+  .simplebar-placeholder {
+    max-height: 100%;
+    max-width: 100%;
+    width: 100%;
+    pointer-events: none;
+  }
+  
+  .simplebar-height-auto-observer-wrapper {
+    box-sizing: inherit !important;
+    height: 100%;
+    width: 100%;
+    max-width: 1px;
+    position: relative;
+    float: left;
+    max-height: 1px;
+    overflow: hidden;
+    z-index: -1;
+    padding: 0;
+    margin: 0;
+    pointer-events: none;
+    flex-grow: inherit;
+    flex-shrink: 0;
+    flex-basis: 0;
+  }
+  
+  .simplebar-height-auto-observer {
+    box-sizing: inherit;
+    display: block;
+    opacity: 0;
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 1000%;
+    width: 1000%;
+    min-height: 1px;
+    min-width: 1px;
+    overflow: hidden;
+    pointer-events: none;
+    z-index: -1;
+  }
+  
+  .simplebar-track {
+    z-index: 1;
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    pointer-events: none;
+    overflow: hidden;
+  }
+  
+  [data-simplebar].simplebar-dragging .simplebar-content {
+    pointer-events: none;
+    user-select: none;
+    -webkit-user-select: none;
+  }
+  
+  [data-simplebar].simplebar-dragging .simplebar-track {
+    pointer-events: all;
+  }
+  
+  .simplebar-scrollbar {
+    position: absolute;
+    left: 0;
+    right: 0;
+    min-height: 10px;
+  }
+  
+  .simplebar-scrollbar:before {
+    position: absolute;
+    content: '';
+    background: black;
+    border-radius: 7px;
+    left: 2px;
+    right: 2px;
+    opacity: 0;
+    transition: opacity 0.2s 0.5s linear;
+  }
+  
+  .simplebar-scrolling .simplebar-scrollbar:before,
+  .simplebar-hover .simplebar-scrollbar:before,
+  .simplebar-mouse-entered .simplebar-scrollbar:before {
+    opacity: 0.5;
+    transition-delay: 0s;
+    transition-duration: 0s;
+  }
+  
+  .simplebar-scrollbar.simplebar-visible:before {
+    /* When hovered, remove all transitions from drag handle */
+    opacity: 0.5;
+    transition-delay: 0s;
+    transition-duration: 0s;
+  }
+  
+  .simplebar-track.simplebar-vertical {
+    top: 0;
+    width: 11px;
+  }
+  
+  .simplebar-scrollbar:before {
+    top: 2px;
+    bottom: 2px;
+    left: 2px;
+    right: 2px;
+  }
+  
+  .simplebar-track.simplebar-horizontal {
+    left: 0;
+    height: 11px;
+  }
+  
+  .simplebar-track.simplebar-horizontal .simplebar-scrollbar {
+    right: auto;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    min-height: 0;
+    min-width: 10px;
+    width: auto;
+  }
+  
+  /* Rtl support */
+  [data-simplebar-direction='rtl'] .simplebar-track.simplebar-vertical {
+    right: auto;
+    left: 0;
+  }
+  
+  .simplebar-dummy-scrollbar-size {
+    direction: rtl;
+    position: fixed;
+    opacity: 0;
+    visibility: hidden;
+    height: 500px;
+    width: 500px;
+    overflow-y: hidden;
+    overflow-x: scroll;
+    -ms-overflow-style: scrollbar !important;
+  }
+  
+  .simplebar-dummy-scrollbar-size > div {
+    width: 200%;
+    height: 200%;
+    margin: 10px 0;
+  }
+  
+  .simplebar-hide-scrollbar {
+    position: fixed;
+    left: 0;
+    visibility: hidden;
+    overflow-y: scroll;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+  }
+  
+  .simplebar-scrollbar::before {
+    background-color: darken($dark, 10%);
+  }
+  
\ No newline at end of file
diff --git a/app/application/resources/volt-admin/scss/volt/components/_shapes.scss b/app/application/resources/volt-admin/scss/volt/components/_shapes.scss
new file mode 100755
index 0000000..160267f
--- /dev/null
+++ b/app/application/resources/volt-admin/scss/volt/components/_shapes.scss
@@ -0,0 +1,18 @@
+/**
+ * = Shapes
+ */
+
+.avatar-sm {
+    width: $avatar-sm-y;
+    height: $avatar-sm-x;
+}
+
+.avatar-md {
+    width: $avatar-md-y;
+    height: $avatar-md-x;
+}
+
+.avatar-lg {
+    width: $avatar-lg-y;
+    height: $avatar-lg-x;
+}
diff --git a/app/application/resources/volt-admin/scss/volt/components/_steps.scss b/app/application/resources/volt-admin/scss/volt/components/_steps.scss
new file mode 100755
index 0000000..33b71cd
--- /dev/null
+++ b/app/application/resources/volt-admin/scss/volt/components/_steps.scss
@@ -0,0 +1,61 @@
+/**steps
+ * = Accordions
+ */
+
+.step{
+    position: relative;
+    margin-bottom: 4rem;
+    border-radius: 6px;
+
+    .step-shape{
+        display: inline-flex;
+        width: $step-shape-size;
+        height: $step-shape-size;
+        text-align: center;
+        @include align-items(center);
+        @include justify-content(center);
+
+        i, svg {
+            font-size: $icon-size;
+        }
+
+        .step-number{
+            position: absolute;
+            font-weight: $font-weight-bold;
+            top: -10px;
+            width: 32px;
+            height: 32px;
+            border-width: $step-border-width;
+            border-style: solid;
+            line-height: 1.7;
+        }
+
+        &.bordered {
+            border-width: $step-border-width;
+            border-style: solid;
+
+            .step-number {
+                background-color: $white;
+                top:-12px;
+            }
+        }
+
+        &.rounded-circle{
+            .step-number{
+                margin-right:1.275rem;
+            }
+        }
+    }
+
+    .icon-lg{
+        font-size: $step-icon-size;
+    }
+
+    .back-layer{
+        @include display-flex();
+        position: absolute;
+        font-size: $step-number-size;
+        z-index: 0;
+        top: 0;
+    }
+}
diff --git a/app/application/resources/volt-admin/scss/volt/components/_tables.scss b/app/application/resources/volt-admin/scss/volt/components/_tables.scss
new file mode 100644
index 0000000..2aded49
--- /dev/null
+++ b/app/application/resources/volt-admin/scss/volt/components/_tables.scss
@@ -0,0 +1,394 @@
+// General styles
+
+.table {
+
+  thead th {
+      padding-top: $table-head-spacer-y;
+      padding-bottom: $table-head-spacer-y;
+      font-size: $table-head-font-size;
+      text-transform: $table-head-text-transform;
+      font-weight: $font-weight-bolder;
+      border-top: 0;
+  }
+
+  th {
+      font-weight: $font-weight-bold;
+      padding:1rem;
+  }
+
+  td {
+      .progress {
+          height: 3px;
+          width: 120px;
+          margin: 0;
+      }
+  }
+
+  td,
+  th {
+      font-size: $table-body-font-size;
+      white-space: nowrap;
+  }
+
+  // User Table
+
+  &.user-table{
+    thead th{
+        border-top:0;
+    }
+  }
+
+  // Vetical align table content
+
+  &.align-items-center {
+      td,
+      th {
+          vertical-align: middle;
+      }
+  }
+
+
+ // Styles for dark table
+
+ .thead-dark {
+      th {
+          background-color: $gray-800;
+          color: $white;
+
+          a {
+              color: $dark;
+          }
+      }
+  }
+
+
+  // Styles for light table
+
+  .thead-light {
+      th {
+          background-color: $gray-100;
+          color: $dark;
+
+          a {
+              color: $dark;
+          }
+      }
+  }
+}
+
+
+// Add transition for hover state
+
+.table-hover {
+  tr {
+      @include transition($transition-base);
+  }
+}
+
+
+// Flush tables
+
+.table-flush {
+  td,
+  th {
+      border-left: 0;
+      border-right: 0;
+  }
+
+  tbody {
+      tr {
+          &:first-child {
+              td,
+              th {
+                  border-top: 0;
+              }
+          }
+
+          &:last-child {
+              td,
+              th {
+                  border-bottom: 0;
+              }
+          }
+      }
+  }
+}
+
+
+// Tables inside cards
+
+.card {
+  .table {
+      margin-bottom: 0;
+
+      td,
+      th {
+          padding-left: $card-spacer-x;
+          padding-right: $card-spacer-x;
+      }
+  }
+}
+  
+.table  {
+    [data-sort] {
+        cursor: pointer;
+    }
+
+    .custom-toggle {
+        display: block;
+    }
+  
+    .thead-dark {
+        [data-sort] {
+            &::after {
+                content: str-replace(url("data:image/svg+xml;utf8,<svg width='6' height='10' viewBox='0 0 6 10' fill='none' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M3 0L6 4H0L3 0ZM3 10L0 6H6L3 10Z' fill='#{$dark}'/></svg>"), "#", "%23");
+                margin-left: .25rem;
+            }
+        }
+    }
+
+    .thead-light {
+        [data-sort] {
+            &::after {
+                content: str-replace(url("data:image/svg+xml;utf8,<svg width='6' height='10' viewBox='0 0 6 10' fill='none' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M3 0L6 4H0L3 0ZM3 10L0 6H6L3 10Z' fill='#{$dark}'/></svg>"), "#", "%23");
+                margin-left: .25rem;
+            }
+        }
+    } 
+}
+
+.dataTables_wrapper {
+
+    .dataTables_info{
+        padding-left: 1.5rem;
+    }
+
+    .dataTables_paginate{
+        padding-right: 1.5rem;
+    }
+    
+    .dataTables_length {
+        label{
+            padding-left:1.5rem;
+        }
+    }
+
+    .dataTables_filter {
+        padding-right: 1.5rem;
+    }
+}
+
+.dataTable-top,
+.dataTable-bottom {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+
+    @include media-breakpoint-down(md) {
+        flex-direction: column;
+
+        .dataTable-info {
+            margin-bottom: 1rem;
+        }
+    }
+}
+
+.dataTable-top {
+    padding: 0 0 1rem 0;
+}
+
+.dataTable-bottom {
+    padding: 1.5rem 0 0 0;
+}
+
+.dataTable-pagination {
+    display: flex;
+    @include list-unstyled();
+
+    a {
+        padding: $pagination-padding-y $pagination-padding-x;
+        @include font-size(null);
+    }
+    
+    li {
+    @if $pagination-margin-left == (-$pagination-border-width) {
+        &:first-child {
+        a {
+            @include border-start-radius($pagination-border-radius);
+        }
+        }
+
+        &:last-child {
+        a {
+            @include border-end-radius($pagination-border-radius);
+        }
+        }
+    } @else {
+        //Add border-radius to all pageLinks in case they have left margin
+        a {
+        @include border-radius($pagination-border-radius);
+        }
+    }
+    }
+
+    > li {
+        &:not(:first-child) a {
+            margin-left: $pagination-margin-left;
+          }
+        
+          &.active a {
+            z-index: 3;
+            color: $pagination-active-color;
+            @include gradient-bg($pagination-active-bg);
+            border-color: $pagination-active-border-color;
+          }
+        
+          &.disabled a {
+            color: $pagination-disabled-color;
+            pointer-events: none;
+            background-color: $pagination-disabled-bg;
+            border-color: $pagination-disabled-border-color;
+          }
+
+          a {
+            position: relative;
+            display: block;
+            color: $pagination-color;
+            text-decoration: if($link-decoration == none, null, none);
+            background-color: $pagination-bg;
+            border: $pagination-border-width solid $pagination-border-color;
+          
+            &:hover {
+              z-index: 2;
+              color: $pagination-hover-color;
+              text-decoration: if($link-hover-decoration == underline, none, null);
+              background-color: $pagination-hover-bg;
+              border-color: $pagination-hover-border-color;
+            }
+          
+            &:focus {
+              z-index: 3;
+              outline: $pagination-focus-outline;
+              box-shadow: $pagination-focus-box-shadow;
+            }
+          }
+    }
+}
+
+.dataTable-selector {
+    display: inline-block;
+    width: auto;
+    height: $form-select-height;
+    padding: $form-select-padding-y ($form-select-padding-x + $form-select-indicator-padding) $form-select-padding-y $form-select-padding-x;
+    font-family: $form-select-font-family;
+    @include font-size($form-select-font-size);
+    font-weight: $form-select-font-weight;
+    line-height: $form-select-line-height;
+    color: $form-select-color;
+    vertical-align: middle;
+    background-color: $form-select-bg;
+    background-image: escape-svg($form-select-indicator);
+    background-repeat: no-repeat;
+    background-position: $form-select-bg-position;
+    background-size: $form-select-bg-size;
+    border: $form-select-border-width solid $form-select-border-color;
+    @include border-radius($form-select-border-radius, 0);
+    @include box-shadow($form-select-box-shadow);
+    appearance: none;
+
+    &:focus {
+        border-color: $form-select-focus-border-color;
+        outline: 0;
+        @if $enable-shadows {
+        @include box-shadow($form-select-box-shadow, $form-select-focus-box-shadow);
+        } @else {
+        // Avoid using mixin so we can pass custom focus shadow properly
+        box-shadow: $form-select-focus-box-shadow;
+        }
+
+        &::-ms-value {
+        // For visual consistency with other platforms/browsers,
+        // suppress the default white text on blue background highlight given to
+        // the selected option text when the (still closed) <select> receives focus
+        // in Edge.
+        // See https://github.com/twbs/bootstrap/issues/19398.
+        color: $input-color;
+        background-color: $input-bg;
+        }
+    }
+
+    &[multiple],
+    &[size]:not([size="1"]) {
+        height: auto;
+        padding-right: $form-select-padding-x;
+        background-image: none;
+    }
+
+    &:disabled {
+        color: $form-select-disabled-color;
+        background-color: $form-select-disabled-bg;
+        border-color: $form-select-disabled-border-color;
+    }
+
+    // Remove outline from select box in FF
+    &:-moz-focusring {
+        color: transparent;
+        text-shadow: 0 0 0 $form-select-color;
+    }
+}
+
+.dataTable-input {
+    display: block;
+    width: 100%;
+    min-height: $input-height;
+    padding: $input-padding-y $input-padding-x;
+    font-family: $input-font-family;
+    @include font-size($input-font-size);
+    font-weight: $input-font-weight;
+    line-height: $input-line-height;
+    color: $input-color;
+    background-color: $input-bg;
+    background-clip: padding-box;
+    border: $input-border-width solid $input-border-color;
+    appearance: none; // Fix appearance for date inputs in Safari
+
+    // Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
+    @include border-radius($input-border-radius, 0);
+
+    @include box-shadow($input-box-shadow);
+    @include transition($input-transition);
+
+    // Customize the `:focus` state to imitate native WebKit styles.
+    &:focus {
+        color: $input-focus-color;
+        background-color: $input-focus-bg;
+        border-color: $input-focus-border-color;
+        outline: 0;
+        @if $enable-shadows {
+        @include box-shadow($input-box-shadow, $input-focus-box-shadow);
+        } @else {
+        // Avoid using mixin so we can pass custom focus shadow properly
+        box-shadow: $input-focus-box-shadow;
+        }
+    }
+
+    // Placeholder
+    &::placeholder {
+        color: $input-placeholder-color;
+        // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.
+        opacity: 1;
+    }
+
+    // Disabled and read-only inputs
+    //
+    // HTML5 says that controls under a fieldset > legend:first-child won't be
+    // disabled if the fieldset is disabled. Due to implementation difficulty, we
+    // don't honor that edge case; we style them as disabled anyway.
+    &:disabled,
+    &[readonly] {
+        background-color: $input-disabled-bg;
+        border-color: $input-disabled-border-color;
+        // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
+        opacity: 1;
+    }
+}
\ No newline at end of file
diff --git a/app/application/resources/volt-admin/scss/volt/components/_timelines.scss b/app/application/resources/volt-admin/scss/volt/components/_timelines.scss
new file mode 100755
index 0000000..b6808a1
--- /dev/null
+++ b/app/application/resources/volt-admin/scss/volt/components/_timelines.scss
@@ -0,0 +1,22 @@
+/**
+ * = Timelines
+ */
+
+.list-group-timeline {
+    .list-group-item {
+        position: relative;
+        .col-auto{
+            z-index: 999;
+        }
+        &:not(:last-child){
+            &::before {
+                content: '';
+                position: absolute;
+                top: 1rem;
+                left: 2.5rem;
+                height: 100%;
+                border-left: 1px solid $light;
+            }
+        }
+    }
+}
diff --git a/app/application/resources/volt-admin/scss/volt/components/_tooltip.scss b/app/application/resources/volt-admin/scss/volt/components/_tooltip.scss
new file mode 100755
index 0000000..a7dd042
--- /dev/null
+++ b/app/application/resources/volt-admin/scss/volt/components/_tooltip.scss
@@ -0,0 +1,43 @@
+// Wrapper for the tooltip content
+
+.tooltip-inner {
+    @include box-shadow($box-shadow);
+}
+
+.chartist-tooltip {
+    position: absolute;
+    display: inline-block;
+    opacity: 0;
+    min-width: 5em;
+    padding: .5em;
+    background: $gray-100;
+    border: 1px solid $gray-100;
+    border-radius: $border-radius;
+    color: $dark;
+    font-weight: $font-weight-bold;
+    text-align: center;
+    pointer-events: none;
+    z-index: 1;
+    transition: $transition-base;
+}
+
+.chartist-tooltip:before {
+    content: "";
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    width: 0;
+    height: 0;
+    margin-left: -15px;
+    border: 15px solid transparent;
+    border-top-color: $gray-100;
+}
+
+.chartist-tooltip.tooltip-show {
+    opacity: 1;
+}
+  
+.ct-area, .ct-line {
+    pointer-events: none;
+}
+  
\ No newline at end of file
diff --git a/app/application/resources/volt-admin/scss/volt/components/_type.scss b/app/application/resources/volt-admin/scss/volt/components/_type.scss
new file mode 100755
index 0000000..4979c50
--- /dev/null
+++ b/app/application/resources/volt-admin/scss/volt/components/_type.scss
@@ -0,0 +1,170 @@
+/**
+ * = Typography
+ */
+
+h1,h2,h3,h4,h5,h6,
+.h1, .h2, .h3, .h4, .h5, .h6 {
+	font-family: $font-family-sans-serif;
+	font-weight: $headings-font-weight;
+}
+
+p, ol li, ul li, .p {
+	font-family: $font-family-base;
+	font-size: $paragraph-font-size;
+	font-weight: $font-weight-normal;
+	line-height: $paragraph-line-height;
+}
+
+a, .text-action {
+	color: $link-color;
+	transition: $transition-base;
+	&:hover{
+		color: $link-hover-color;
+		cursor: pointer;
+	}
+}
+
+.lead {
+	+ .btn-wrapper {
+		margin-top: 3rem;
+	}
+	@include media-breakpoint-down(md){
+		font-size: $font-size-base;
+	}
+}
+
+.line-through{
+	-webkit-text-decoration: line-through;
+    text-decoration: line-through;
+}
+
+.text-italic{
+	font-style: italic !important;
+}
+
+.description {
+	font-size: $font-size-sm;
+}
+
+// underline on hover
+
+.hover\:underline{
+	&:hover{
+		text-decoration: underline;
+	}
+}
+// Headings
+
+.heading {
+	font-size: $h2-font-size;
+	font-weight: $font-weight-bold;
+}
+
+
+
+@include media-breakpoint-down(md){
+	.display-2{
+	  font-size: $display4-size;
+	}
+}
+
+@include media-breakpoint-down(lg){
+	.display-3{
+	  font-size: $display4-size;
+
+	}
+}
+  
+@include media-breakpoint-down(sm){
+	.display-4{
+		font-size: $h4-font-size;
+	}
+}
+
+// Blockquotes
+.blockquote {
+	font-style: italic;
+	&.blockquote-large{
+
+		@include media-breakpoint-down(md) {
+			font-size: $font-size-lg;
+		}
+	}
+ 	.blockquote-footer{
+		font-size: $font-size-sm;
+		font-weight: $font-weight-bolder;
+
+		@include media-breakpoint-down(md) {
+			font-size: $font-size-lg;
+		}
+	}
+}
+
+// Font Sizes
+
+.font-small {
+  @include font-size($font-size-sm);
+  font-weight: $font-weight-light;
+}
+
+.font-base{
+	@include font-size($font-size-base);
+	font-weight: $font-weight-light;
+}
+
+.font-medium {
+	@include font-size($font-size-lg);
+	font-weight: $font-weight-light;
+}
+
+
+//PrismJs text	
+
+code[class*="language-"], pre[class*="language-"]{
+	text-shadow: none;
+	font-family: $font-family-base;
+	font-weight: $font-weight-bold;
+}
+
+// Set color of theme buttons
+@each $color, $value in $theme-colors {
+	.text-#{$color} {
+        &, &:hover {
+			color: $value !important;
+		}
+
+		a:not(.btn),h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6,.display-1, .display-2, .display-3, .display-4{
+			color: $value;
+		  }
+		  .text-muted{
+			color: rgba($value,.7) !important;
+		  }
+    }
+}
+
+
+article {
+	img {
+		margin: 40px 0;
+	}
+	p, ul, ol, blockquote {
+		margin-bottom: 20px;
+	}
+	p, ul li, ol li {
+		font-size: 1.2rem;
+	}
+	h1, h2, h3, h4, h5, h6,
+	.h1, .h2, .h3, .h4, .h5, .h6 {
+		margin-bottom: 30px;
+	}
+}
+
+.folder-structure li {
+	font-size: 1.2rem;
+}
+
+.truncate-text {
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
\ No newline at end of file
diff --git a/app/application/resources/volt-admin/scss/volt/forms/_form-check.scss b/app/application/resources/volt-admin/scss/volt/forms/_form-check.scss
new file mode 100644
index 0000000..31d62ad
--- /dev/null
+++ b/app/application/resources/volt-admin/scss/volt/forms/_form-check.scss
@@ -0,0 +1,15 @@
+.form-check-input {
+    &.round-check{
+        &[type="checkbox"] {
+            @include border-radius($form-check-radio-border-radius);
+          }
+    }
+}
+
+.form-switch {
+    padding-left: $form-switch-padding-left;
+  
+    .form-check-input {
+        height: 1.275em;
+    }
+}
diff --git a/app/application/resources/volt-admin/scss/volt/forms/_form-control.scss b/app/application/resources/volt-admin/scss/volt/forms/_form-control.scss
new file mode 100644
index 0000000..fd0fea2
--- /dev/null
+++ b/app/application/resources/volt-admin/scss/volt/forms/_form-control.scss
@@ -0,0 +1,25 @@
+.form-control{
+
+    @include media-breakpoint-up(lg) {
+        &.form-control-lg{
+            padding: $inpu-lg-padding-y $input-padding-x;
+        }
+    }
+
+}
+
+.search-bar {
+    .form-control {
+        width: 280px;
+        transition: width .2s ease-in-out;
+
+        @include media-breakpoint-down(sm) {
+            width: 120px;
+
+            &:focus {
+                width: 150px;
+            }
+        }
+    }
+}
+
diff --git a/app/application/resources/volt-admin/scss/volt/forms/_form-select.scss b/app/application/resources/volt-admin/scss/volt/forms/_form-select.scss
new file mode 100644
index 0000000..3f889c3
--- /dev/null
+++ b/app/application/resources/volt-admin/scss/volt/forms/_form-select.scss
@@ -0,0 +1,23 @@
+.form-select {
+    .form-select-lg{
+        padding: $form-select-padding-y ($form-select-padding-x + $form-select-indicator-padding) $form-select-padding-y $form-select-padding-x;
+    }
+}
+
+//Add File Alternative Style
+
+.file-field input[type="file"] {
+    max-width: 230px;
+    position: absolute;
+    cursor: pointer;
+    filter: alpha(opacity=0);
+    opacity: 0;
+    padding-bottom: 30px;
+}
+.file-field svg {
+    cursor: pointer;
+}
+
+.datepicker-dropdown {
+    z-index: 9999;
+}
\ No newline at end of file
diff --git a/app/application/resources/volt-admin/scss/volt/forms/_input-group.scss b/app/application/resources/volt-admin/scss/volt/forms/_input-group.scss
new file mode 100644
index 0000000..4a93b1b
--- /dev/null
+++ b/app/application/resources/volt-admin/scss/volt/forms/_input-group.scss
@@ -0,0 +1,13 @@
+.input-group {
+    .form-control:focus {
+        border-color: $input-border-color;
+
+        & + .input-group-text {
+            border-color: $input-border-color; 
+        }
+    }
+}
+
+.input-group-text{
+    @include box-shadow($input-box-shadow);
+}
\ No newline at end of file
diff --git a/app/application/resources/volt-admin/scss/volt/layout/_footer.scss b/app/application/resources/volt-admin/scss/volt/layout/_footer.scss
new file mode 100755
index 0000000..faea687
--- /dev/null
+++ b/app/application/resources/volt-admin/scss/volt/layout/_footer.scss
@@ -0,0 +1,105 @@
+/**
+ * = Footers
+ */
+
+ .footer{
+
+    ul{
+        margin-bottom: 0;
+        padding: 0;
+        list-style: none;
+
+        li{
+            display: inline-block;
+
+            a {
+                text-decoration: none;
+                position: relative;
+                display: block;
+                color: $gray-700;
+
+                &:hover {
+                    color: $primary;
+                }
+            }
+
+            .btn {
+                margin: 0;
+            }
+        }
+
+        &.links-horizontal{
+            &:first-child a{
+                padding-left: 0;
+            }
+
+            &:last-child a{
+                padding-right: 0;
+            }
+
+        }
+
+        &.links-vertical{
+            li{
+                display: block;
+                margin-left: -5px;
+                margin-right: -5px;
+
+                a{
+                    padding: 5px;
+
+                    &:hover{
+                        color: inherit !important;
+                    }
+                }
+            }
+        }
+
+        &.icon-box{
+            i{
+                line-height: 1.7
+            }
+        }
+    }
+
+    .social-buttons{
+        a,
+        .btn{
+            margin-top: 5px;
+            margin-bottom: 5px;
+            padding: $padding-footer-sm $padding-footer;
+        }
+    }
+
+    .footer-brand{
+        font-size: $font-size-lg;
+        font-weight: $font-weight-bold;
+        
+        img.common {
+            height: 40px;
+        }
+    
+        img {
+            height: 40px;
+            width: 40px;
+        }
+        &:hover,
+        &:focus{
+            color: $black;
+        }
+    }
+    .footer-language-link{
+        font-size:$font-size-sm;
+        i{
+            font-size: 0.75rem;
+        }
+    }
+    .copyright{
+        font-size: $font-size-sm;
+    }
+
+    .pull-center{
+        display: inline-block;
+        float: none;
+    }
+}
\ No newline at end of file
diff --git a/app/application/resources/volt-admin/scss/volt/layout/_navbar.scss b/app/application/resources/volt-admin/scss/volt/layout/_navbar.scss
new file mode 100755
index 0000000..4cb04cb
--- /dev/null
+++ b/app/application/resources/volt-admin/scss/volt/layout/_navbar.scss
@@ -0,0 +1,414 @@
+/**
+ * = Navigation bars
+ */
+
+ .navbar-main {
+    position: absolute;
+    top: 0;
+    width: 100%;
+    z-index: 100;
+
+    .navbar-toggler-icon {
+        background-image: $navbar-dark-toggler-icon-bg;
+    }
+}
+
+.navbar .navbar-nav {
+
+    .nav-link {
+        @include transitions(.8s, $transition-base);
+
+        @include media-breakpoint-down(md) {
+            font-size: 1.2rem;
+            @include display-flex();
+            @include justify-content(space-between);
+            @include align-items(center);
+        }
+
+    }
+
+    .nav-item {
+        .media:not(:last-child){
+            margin-bottom: 1.5rem;
+        }
+        &:focus,
+        .nav-link:focus {
+            outline: none !important;
+        }
+    }
+
+    .dropdown {
+
+        .dropdown-menu {
+            top: 100%;
+            span{
+                width: 30px;
+            }
+        }
+
+        .dropdown-item {
+            font-size: 0.875rem;
+        }
+
+    }
+
+    .dropdown-megamenu,
+    .dropdown-megamenu-sm,
+    .dropdown-megamenu-md {
+        @include media-breakpoint-up(lg) {
+            min-width: 580px;
+        }
+
+        .megamenu-link {
+            color: $gray;
+            font-weight: 400;
+            font-size: $font-size-sm;
+        }
+
+        .megamenu-item {
+            position: relative;
+
+            &:hover {
+                
+                .megamenu-link {
+                    color: $primary;
+                }
+                
+            }
+            
+        }
+    }
+
+    .dropdown-megamenu-sm {
+        @include media-breakpoint-up(lg) {
+            min-width: 320px;
+        }
+    }
+
+    .dropdown-megamenu-md {
+        @include media-breakpoint-up(lg) {
+            min-width: 960px;
+        }
+    }
+
+    @include media-breakpoint-up(lg) {
+        .dropdown-menu {
+            .dropdown-toggle .nav-link-arrow {
+                @include transform(rotate(-90deg));
+            }
+        }
+
+        .dropdown.show > .dropdown-toggle .nav-link-arrow {
+            @include transform(rotate(180deg));
+        }
+
+        .dropdown-toggle:hover .nav-link-arrow {
+            @include transform(rotate(0deg));
+        }
+
+    }
+
+    .dropdown-submenu {
+        position: relative;
+
+        .dropdown-menu {
+            top: 0;
+            left: calc(100% - 2px);
+            margin-left: .1rem;
+            margin-right: .1rem;
+            opacity: 0;
+            display: none;
+
+            &.show {
+                opacity: 1;
+                pointer-events: all;
+                display: block;
+            }
+
+        }
+
+    }
+
+    .nav-link-arrow {
+        transition: $transition-transform;
+    }
+
+}
+
+.navbar-brand {
+    font-size: $font-size-sm;
+    font-weight: $font-weight-bold;
+    text-transform: uppercase;
+
+    img {
+        height: 40px;
+    }
+}
+
+// Navbar text and logo dark & light
+.navbar-dark {
+
+    .navbar-brand-light {
+        display: none;
+    }
+
+    .navbar-brand {
+        color: $white;
+    }
+
+    & > .nav-item:hover > .nav-link {
+        color: $primary;
+    }
+}
+
+.navbar-light {
+
+    &:not(.headroom--not-top) {
+        .btn-outline-soft {
+            border-color: $dark;
+            color: $dark;
+    
+            &:hover {
+                background: $dark;
+                color: $white;
+            }
+        }
+    }
+
+    .navbar-toggler-icon {
+        background-image: $navbar-light-toggler-icon-bg;
+    }
+
+    .navbar-brand-dark {
+        display: none;
+    }
+
+    .navbar-brand {
+        color: $gray-800;
+    }
+
+}
+
+.dropdown-menu {
+    top: 100%;
+    span{
+        width: 30px;
+    }
+}
+
+.navbar-transparent {
+    background-color: transparent;
+    border: 0;
+    box-shadow: none;
+}
+
+@include media-breakpoint-up(lg) {
+    .navbar-nav {
+        .nav-item {
+            [data-toggle="dropdown"]::after {
+                transition: $transition-base;
+            }
+
+            &.show {
+                [data-toggle="dropdown"]::after {
+                    @include transform(rotate(180deg));
+                }
+            }
+        }
+        .nav-link {
+
+            i {
+                margin-right: .3rem;
+                font-size: $font-size-xs;
+            }
+        }
+
+        .nav-link-icon {
+            padding-left: .5rem;
+            padding-right: .5rem;
+            font-size: 1rem;
+
+            i {
+                margin-right: 0;
+            }
+        }
+
+        .dropdown-menu {
+            opacity: 0;
+            pointer-events: none;
+            margin: 0;
+            border-radius: $dropdown-border-radius;
+        }
+
+        .dropdown-menu-end {
+            &:before {
+                right: 20px;
+                left: auto;
+            }
+        }
+
+        .dropdown-menu-center {
+            left: 50%;
+            transform: translateX(-50%);
+        }
+
+        .dropdown-menu,
+        .dropdown-megamenu,
+        .dropdown-megamenu-md {
+            &.show {
+                opacity: 1;
+                pointer-events: auto;
+            }
+
+            &.close {
+                display: block;
+            }
+        }
+
+        .dropdown-submenu .dropdown-menu {
+            transform: none;
+        }
+
+        .dropdown-menu {
+            position: relative;
+            display: block;
+            opacity: 0; 
+            pointer-events: none;
+            transition: $transition-base;
+        }
+
+        .dropdown.show,
+        .dropdown-submenu.show {
+            & > .dropdown-menu {
+                display: block;
+                opacity: 1;
+                pointer-events: auto;
+            }
+        }
+
+        .dropdown-menu-inner {
+            position: relative;
+            padding: 1rem;
+        }
+    }
+
+    .navbar-transparent {
+        .navbar-nav {
+            .nav-link {
+                &.disabled {
+                    color: $navbar-dark-disabled-color;
+                }
+            }
+        }
+
+        .navbar-brand {
+            color: $navbar-dark-color; 
+        }
+
+    }
+
+}
+
+// Collapse
+.navbar-collapse-header {
+    display: none;
+}
+
+.navbar-collapse {
+    width: auto;
+}
+
+@include media-breakpoint-down(lg) {
+    .navbar-nav {
+        .nav-link {
+            padding: .625rem 0;
+        }
+
+        .dropdown-menu {
+            box-shadow: none;
+            width: 100%;
+
+            .media svg {
+                width: 30px;
+            }
+        }
+    }
+
+    .dropdown-menu-center {
+        right: 0;
+        left: auto;
+        transform: translate(0, 0);
+        @include media-breakpoint-down(lg) {
+            transform: translateX(-75%);
+        }
+    }
+
+    .navbar-collapse {     
+        width: calc(100% - 30px);
+        position: absolute;
+        top: 0;
+        right: 15px;
+        z-index: 1050;
+        overflow-y: auto;
+        // using !important to overwrite Bootstrap's inline styles
+        height: calc(100vh - 30px) !important;
+        opacity: 0;
+
+        .navbar-toggler {
+            position: relative;
+            display: inline-block;
+            width: 20px;
+            height: 20px;
+            padding: 0;
+
+            span {
+                display: block;
+                position: absolute;
+                width: 100%;
+                height: 2px;
+                border-radius: 2px;
+                opacity: 1;
+                background: #283448;
+            }
+        }
+
+        .navbar-collapse-header {
+            display: block;
+            padding-bottom: 1rem;
+            margin-bottom: 1rem;
+        }
+
+        .collapse-brand img {
+            height: 35px;
+        }
+
+        .collapse-close { 
+            text-align: right;
+        }
+    }
+
+    .navbar-collapse.collapsing,
+    .navbar-collapse.show {
+        padding: 1.5rem;
+        border-radius: $dropdown-border-radius;
+        background: $white;
+        animation: show-navbar-collapse .2s ease forwards;
+        @include box-shadow(0 0 20px rgba(0, 0, 0, .1));
+    }
+
+    .navbar-collapse.collapsing-out {
+        animation: hide-navbar-collapse .2s ease forwards;
+    }
+}
+
+.navbar-dashboard {
+    border-radius: $border-radius;
+}
+
+// Theme color variants
+// eg. navbar-theme-primary, navbar-theme-secondary
+@each $color, $value in $navbar-colors {
+    .navbar-theme-#{$color}:not(.headroom) {
+        background-color: $value;
+    }
+}
\ No newline at end of file
diff --git a/app/application/resources/volt-admin/scss/volt/layout/_section.scss b/app/application/resources/volt-admin/scss/volt/layout/_section.scss
new file mode 100644
index 0000000..a77a69e
--- /dev/null
+++ b/app/application/resources/volt-admin/scss/volt/layout/_section.scss
@@ -0,0 +1,164 @@
+/**
+ * = Sections
+ */
+
+.section {
+    position: relative;
+    padding-top: $spacer * 3;
+    padding-bottom: $spacer * 3;
+}
+
+.section-header {
+    position: relative;
+    padding-top: $spacer * 9;
+    padding-bottom: $spacer * 3;
+}
+
+@include media-breakpoint-up(sm) {
+    .section {
+        position: relative;
+        padding-top: $spacer * 5;
+        padding-bottom: $spacer * 5;
+    }
+    .section-header {
+        position: relative;
+        padding-top: $spacer * 8;
+        padding-bottom: $spacer * 8;
+        &.section-sm{
+            padding-top: $spacer * 4;
+            padding-bottom: $spacer * 3;
+        }
+    }
+    .section-xl {
+        padding-top: $spacer * 8;
+        padding-bottom: $spacer * 8;
+    }
+    .section-lg {
+        padding-top: $spacer * 6;
+        padding-bottom: $spacer * 6;
+    }
+    .section-sm {
+        padding-top: $spacer * 3;
+        padding-bottom: $spacer * 3;
+    }
+}
+
+@include media-breakpoint-up(lg) {
+    .section {
+        position: relative;
+        padding-top: $spacer * 6;
+        padding-bottom: $spacer * 6;
+    }
+    .section-header {
+        position: relative;
+        padding-top: $spacer * 10;
+        padding-bottom: $spacer * 10;
+        &.section-sm{
+            padding-top: $spacer * 4;
+            padding-bottom: $spacer * 3;
+        }
+    }
+    .section-xl {
+        padding-top: $spacer * 10;
+        padding-bottom: $spacer * 10;
+    }
+    .section-lg {
+        padding-top: $spacer * 8;
+        padding-bottom: $spacer * 8;
+    }
+    .section-sm {
+        padding-top: $spacer * 4;
+        padding-bottom: $spacer * 4;
+    }
+}
+
+// Hero sections
+.section-hero {
+    @include media-breakpoint-up(md) {
+        height: 100vh;
+    }
+}
+
+//Section delimiter
+.line-bottom{
+    &::after{
+        content: '';
+        display: block;
+        width: 80%;
+        position: absolute;
+        bottom: 0;
+        left: 50%;
+        margin-left: -40%;
+        height: 1px;
+        background: radial-gradient(ellipse at center,$light 0,rgba(255,255,255,0) 80%);
+    }
+}
+
+// Profile cover
+.section-profile-cover {
+    height: 580px;
+    background-size: cover;
+    background-position: center center;
+    @include media-breakpoint-down(md) {
+        height: 400px;
+    }
+}
+
+// Components section
+.components-section {
+    >.form-control {
+        +.form-control {
+            margin-top: .5rem;
+        }
+    }
+    >.nav+.nav,
+    >.alert+.alert,
+    >.navbar+.navbar,
+    >.progress+.progress,
+    >.progress+.btn,
+    .badge,
+    .btn {
+        margin-top: .5rem;
+        margin-bottom: .5rem;
+    }
+    .btn-group {
+        margin-top: .5rem;
+        margin-bottom: .5rem;
+        .btn {
+            margin: 0;
+        }
+    }
+    .alert {
+        margin: 0;
+        +.alert {
+            margin-top: 1.25rem;
+        }
+    }
+    .badge {
+        margin-right: .5rem;
+    }
+    .modal-footer {
+        .btn {
+            margin: 0;
+        }
+    }
+}
+
+.copy-docs {
+    position: absolute;
+    top: 5px;
+    right: 5px;
+    transition: $transition-base;
+    &.copied {
+        background: $success;
+    }
+    &:hover {
+        cursor: pointer;
+    }
+}
+
+.kanban-container{
+	overflow-x: scroll;
+    -webkit-overflow-scrolling: touch;
+
+}
\ No newline at end of file
diff --git a/app/application/resources/volt-admin/scss/volt/layout/_sidebar.scss b/app/application/resources/volt-admin/scss/volt/layout/_sidebar.scss
new file mode 100644
index 0000000..1781179
--- /dev/null
+++ b/app/application/resources/volt-admin/scss/volt/layout/_sidebar.scss
@@ -0,0 +1,34 @@
+/**
+ * = Sidebars
+ */
+
+ #doc-index:not(.collapse.show), .doc-sidebar {
+    display: none;
+}
+
+@include media-breakpoint-up(lg){
+    #doc-index{
+        display: block;
+    }
+    
+    .doc-sidebar {
+        display: block;
+        height: calc(100vh - 2rem);
+        overflow-y: scroll;
+        position: -webkit-sticky;
+        position: sticky;
+        top: 2rem;
+
+        .nav-link[data-toggle="collapse"] > .icon {
+            transform: rotateZ(-90deg);
+            position: relative;
+            right: .25rem;
+        }
+
+        .nav{
+            .nav-item{
+                font-size:$font-size-sm;
+            }
+        }
+    } 
+}  
diff --git a/app/application/resources/volt-admin/scss/volt/layout/_sidenav.scss b/app/application/resources/volt-admin/scss/volt/layout/_sidenav.scss
new file mode 100644
index 0000000..6e31064
--- /dev/null
+++ b/app/application/resources/volt-admin/scss/volt/layout/_sidenav.scss
@@ -0,0 +1,191 @@
+/*
+ * Sidebar
+*/
+.sidebar {
+	display: block;
+	position: fixed;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	z-index: 100;
+	max-height: 100%;
+	overflow-y: auto;
+	width: 100%;
+	@include transition(max-width .1s);
+	
+	@include media-breakpoint-up(md) {
+		width: 100%;
+		max-width: 260px;
+	}
+
+	.nav {
+		white-space: nowrap;
+	}
+
+	.nav-item {
+		&.active {
+			& > .nav-link {
+				color: $gray-100;
+				background-color: $gray-700;
+			}
+		}
+		.nav-link {
+			color: $white;
+			cursor: pointer;
+			&:hover {
+				color: $gray-100;
+				background-color: $gray-700;
+			}
+		}
+		margin-bottom: .2rem;
+	}
+
+	.nav-link + .multi-level {
+		margin-top: .2rem;
+	}
+
+	.nav-link {
+		font-size: $font-size-base;
+		vertical-align: middle;
+		padding: 0.55rem 0.75rem;
+		@include border-radius($border-radius);
+
+		.sidebar-icon {
+			margin-right: .5rem;
+			color: $gray-400;
+		}
+
+		.link-arrow{
+			font-size: $font-size-sm;
+		}
+
+		&[data-bs-toggle=collapse][aria-expanded=true] .link-arrow{
+			@include transform(rotate(90deg));
+			transition: $transition-base;
+		}
+	}
+	.nav-link.active {
+		color: $gray-100;
+	}
+
+	.multi-level{
+		.nav-link{
+			padding-left: 53px;
+		}
+	}
+
+	.sidebar-text,
+	.link-arrow,
+	.badge,
+	.notification-count {
+		opacity: 1;
+	}
+
+	.sidebar-text-contracted {
+		display: none;
+	}
+
+	&.contracted {
+		.sidebar-text,
+		.link-arrow,
+		.badge {
+			opacity: 0;
+		}
+
+		.notification-count {
+			opacity: 1;
+			position: absolute;
+			top: 0;
+			left: 40px;
+			width: 18px;
+			height: 18px;
+			border-radius: 50%;
+			font-size: .7rem;
+			padding: .2rem;
+		}
+
+		.nav-item {
+			position: relative;
+			&.active {
+				& > .nav-link {
+					background-color: #363c54;
+					width: 44px;
+				}
+			}
+			.nav-link {
+				&:hover {
+					background-color: $primary;
+				}
+			}
+		}
+
+		.sidebar-text-contracted {
+			display: inline;
+		}
+
+		.multi-level .nav-link {
+			padding-left: 17px;
+		}
+
+		.nav-item {
+			white-space: nowrap;
+		}
+
+		.sidebar-icon {
+			text-align: center;
+		}
+
+
+		@include media-breakpoint-up(md) {
+			& + .content {
+				margin-left: 95px;
+				
+			}
+		}
+
+		max-width: 95px;
+	}
+}
+
+.sidebar-inner {
+	position: relative;
+	overflow-y: hidden;
+}
+
+.sidebar-heading {
+	font-size: .75rem;
+	text-transform: uppercase;
+}
+
+.user-card{
+	border-bottom: 0.0625rem solid #2e3650;
+}
+
+@include media-breakpoint-down(sm) {
+	.sidebar {
+		width: 100%;
+	}
+}
+
+.content {
+
+	overflow: hidden;
+	padding: 0 $spacer 0 $spacer;
+	@include transition(all .3s);
+
+	@include media-breakpoint-up(lg) {
+		margin-left: 260px;
+	}
+}
+
+.sidebar-toggle {
+	font-size: 1.3rem;
+
+	&:hover,
+	&:focus {
+		outline: none;
+		box-shadow: none;
+		background: $gray-300;
+	}
+
+}
\ No newline at end of file
diff --git a/app/application/resources/volt-admin/scss/volt/mixins/_animations.scss b/app/application/resources/volt-admin/scss/volt/mixins/_animations.scss
new file mode 100755
index 0000000..a95ea23
--- /dev/null
+++ b/app/application/resources/volt-admin/scss/volt/mixins/_animations.scss
@@ -0,0 +1,45 @@
+@mixin perspective($value){
+    -webkit-perspective: $value;
+    -moz-perspective: $value;
+    -o-perspective: $value;
+    -ms-perspective: $value;
+    perspective: $value;
+}
+@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 transitions-property($property, $time, $type){
+    -webkit-transition: $property $time $type;
+    -moz-transition: $property $time $type;
+    -o-transition: $property $time $type;
+    -ms-transition: $property $time $type;
+    transition: $property $time $type;
+}
+@mixin transform-style($type){
+    -webkit-transform-style: $type;
+    -moz-transform-style: $type;
+    -o-transform-style: $type;
+    -ms-transform-style: $type;
+    transform-style: $type;
+}
+
+@mixin backface-visibility($type){
+    -webkit-backface-visibility: $type;
+    -moz-backface-visibility: $type;
+    -o-backface-visibility: $type;
+    -ms-backface-visibility: $type;
+        backface-visibility: $type;
+}
+
+@mixin rotateY-180() {
+    -webkit-transform: rotateY( 180deg );
+    -moz-transform: rotateY( 180deg );
+    -o-transform: rotateY( 180deg );
+    -ms-transform: rotateY(180deg);
+    transform: rotateY( 180deg );
+}
\ No newline at end of file
diff --git a/app/application/resources/volt-admin/scss/volt/mixins/_background-variant.scss b/app/application/resources/volt-admin/scss/volt/mixins/_background-variant.scss
new file mode 100755
index 0000000..ace434a
--- /dev/null
+++ b/app/application/resources/volt-admin/scss/volt/mixins/_background-variant.scss
@@ -0,0 +1,25 @@
+// 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, saturate($color, 10%) 100%) !important;
+    }
+}
+
+@mixin background-image($background-repeat,$background-size) {
+    background-repeat: $background-repeat;
+    background-position: top center;
+    background-size: $background-size;
+}
+
diff --git a/app/application/resources/volt-admin/scss/volt/mixins/_icon.scss b/app/application/resources/volt-admin/scss/volt/mixins/_icon.scss
new file mode 100755
index 0000000..3cd6cb1
--- /dev/null
+++ b/app/application/resources/volt-admin/scss/volt/mixins/_icon.scss
@@ -0,0 +1,17 @@
+@mixin icon-shape-variant($color) {
+    color: $color;
+    background-color: rgba( $color, .3 );
+}
+
+@mixin icon-parallax-background($background-position,$background-size,$background-attachment,$background-repeat) {
+    background-position: $background-position;
+    background-size: $background-size;
+    background-attachment: $background-attachment;
+    background-repeat: $background-repeat; 
+} 
+
+@mixin icon-image-background($background-position,$background-size,$background-repeat) {
+    background-position: $background-position;
+    background-size: $background-size;
+    background-repeat: $background-repeat; 
+}
\ No newline at end of file
diff --git a/app/application/resources/volt-admin/scss/volt/mixins/_modals.scss b/app/application/resources/volt-admin/scss/volt/mixins/_modals.scss
new file mode 100755
index 0000000..ebf58c2
--- /dev/null
+++ b/app/application/resources/volt-admin/scss/volt/mixins/_modals.scss
@@ -0,0 +1,23 @@
+@mixin modal-variant($background) {
+	.modal-title {
+		color: color-yiq($background);
+	}
+	.modal-header,
+	.modal-footer {
+		border-color: rgba($background, .075);
+	}
+	.modal-content {
+		background-color: $background;
+		color: color-yiq($background);
+
+		.heading {
+			color: color-yiq($background);
+		}
+	}
+
+	.close { 
+    	&>span:not(.sr-only) {
+    		color: $white;
+    	}
+    }
+}
\ No newline at end of file
diff --git a/app/application/resources/volt-admin/scss/volt/mixins/_popover.scss b/app/application/resources/volt-admin/scss/volt/mixins/_popover.scss
new file mode 100755
index 0000000..f6e1605
--- /dev/null
+++ b/app/application/resources/volt-admin/scss/volt/mixins/_popover.scss
@@ -0,0 +1,36 @@
+@mixin popover-variant($background) {
+
+	background-color: $background;
+
+	.popover-header {
+		background-color: $background;
+		color: color-yiq($background);
+	}
+
+	.popover-body {
+		color: color-yiq($background);
+	}
+	.popover-header{
+		border-color: rgba($background, .2);
+	}
+	&.bs-popover-top {
+		.arrow::after {
+			border-top-color: $background;
+		}
+	}
+	&.bs-popover-end {
+		.arrow::after {
+			border-right-color: $background;
+		}
+	}
+	&.bs-popover-bottom {
+		.arrow::after {
+			border-bottom-color: $background;
+		}
+	}
+	&.bs-popover-start {
+		.arrow::after {
+			border-left-color: $background;
+		}
+	}
+}
diff --git a/app/application/resources/volt-admin/scss/volt/mixins/_transform.scss b/app/application/resources/volt-admin/scss/volt/mixins/_transform.scss
new file mode 100755
index 0000000..b806d95
--- /dev/null
+++ b/app/application/resources/volt-admin/scss/volt/mixins/_transform.scss
@@ -0,0 +1,19 @@
+
+@mixin transform($transforms) {
+	-moz-transform: $transforms;
+	-o-transform: $transforms;
+	-ms-transform: $transforms;
+	-webkit-transform: $transforms;
+	transform: $transforms;
+}
+  
+
+// translate
+@mixin translate ($x, $y) {
+	@include transform(translate($x, $y));
+}
+
+// rotate
+@mixin rotate ($deg) {
+	@include transform(rotate(#{$deg}deg));
+}
\ No newline at end of file
diff --git a/app/application/resources/volt-admin/scss/volt/mixins/_utilities.scss b/app/application/resources/volt-admin/scss/volt/mixins/_utilities.scss
new file mode 100644
index 0000000..78e7cf6
--- /dev/null
+++ b/app/application/resources/volt-admin/scss/volt/mixins/_utilities.scss
@@ -0,0 +1,123 @@
+@mixin filter($filter) {
+    -webkit-filter: #{$filter};
+	-moz-filter: #{$filter};
+	-ms-filter: #{$filter};
+	-o-filter: #{$filter};
+	filter: #{$filter};
+}
+
+@mixin backface-visibility($value) {
+	-webkit-backface-visibility: $value;
+	-moz-backface-visibility: $value;
+	-o-backface-visibility: $value;
+	backface-visibility: $value;
+}
+
+@mixin transform-style($value) {
+	-webkit-transform-style: $value;
+	-moz-transform-style: $value;
+	-o-transform-style: $value;
+	transform-style: $value;
+}
+
+@mixin perspective($value) {
+	-webkit-perspective: $value;
+    -moz-perspective: $value;
+    -o-perspective: $value;
+    perspective: $value;
+}
+
+@mixin display-flex() {
+	display: -webkit-box;
+	display: -moz-box;
+	display: -ms-flexbox;
+	display: -webkit-flex;
+	display: flex;
+}
+
+@mixin flex($values) {
+	-webkit-box-flex: $values;
+	   -moz-box-flex: $values;
+		-webkit-flex: $values;
+		  -ms-flex: $values;
+			  flex: $values;
+  }
+  
+  @mixin flex-direction($direction) {
+	-webkit-flex-direction: $direction;
+	   -moz-flex-direction: $direction;
+		-ms-flex-direction: $direction;
+			flex-direction: $direction;
+  }
+  
+  @mixin flex-wrap($wrap) {
+	-webkit-flex-wrap: $wrap;
+	   -moz-flex-wrap: $wrap;
+		-ms-flex-wrap: $wrap;
+			flex-wrap: $wrap;
+  }
+  
+  @mixin flex-flow($flow) {
+	-webkit-flex-flow: $flow;
+	   -moz-flex-flow: $flow;
+		-ms-flex-flow: $flow;
+			flex-flow: $flow;
+  }
+  
+  @mixin order($val) {
+	-webkit-box-ordinal-group: $val;  
+	   -moz-box-ordinal-group: $val;     
+			 -ms-flex-order: $val;     
+			  -webkit-order: $val;  
+				  order: $val;
+  }
+  
+  @mixin flex-grow($grow) {
+	-webkit-flex-grow: $grow;
+	   -moz-flex-grow: $grow;
+		-ms-flex-grow: $grow;
+			flex-grow: $grow;
+  }
+  
+  @mixin flex-shrink($shrink) {
+	-webkit-flex-shrink: $shrink;
+	   -moz-flex-shrink: $shrink;
+		-ms-flex-shrink: $shrink;
+			flex-shrink: $shrink;
+  }
+  
+  @mixin flex-basis($width) {
+	-webkit-flex-basis: $width;
+	   -moz-flex-basis: $width;
+		-ms-flex-basis: $width;
+			flex-basis: $width;
+  }
+  
+  @mixin justify-content($justify) {
+	-webkit-justify-content: $justify;
+	   -moz-justify-content: $justify;
+		-ms-justify-content: $justify;
+			justify-content: $justify;
+			  -ms-flex-pack: $justify;
+  }
+  
+  @mixin align-content($align) {
+	-webkit-align-content: $align;
+	   -moz-align-content: $align;
+		-ms-align-content: $align;
+			align-content: $align;
+  }
+  
+  @mixin align-items($align) {
+	-webkit-align-items: $align;
+	   -moz-align-items: $align;
+		-ms-align-items: $align;
+			align-items: $align;
+  }
+  
+  @mixin align-self($align) {
+	-webkit-align-self: $align;
+	   -moz-align-self: $align;
+		-ms-align-self: $align;
+			align-self: $align;
+  }
\ No newline at end of file
diff --git a/app/application/vite.config.js b/app/application/vite.config.js
index 34ababb..1107be6 100644
--- a/app/application/vite.config.js
+++ b/app/application/vite.config.js
@@ -6,7 +6,10 @@ export default defineConfig({
         laravel({
             input: [
                 'resources/volt/scss/app.scss',
-                'resources/volt/js/app.js'
+                'resources/volt/js/app.js',
+
+                'resources/volt-admin/scss/app.scss',
+                'resources/volt-admin/js/app.js'
             ],
             refresh: true,
         }),