Added and configured css, js in Vite.

resources/js/app.js

@@ -1 +0,0 @@
-import './bootstrap';

resources/volt/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.

resources/volt/js/app.js

@@ -0,0 +1,5 @@
+import.meta.glob([
+    '../images/**',
+]);
+import './bootstrap';
+import './volt.js';

resources/volt/js/volt.js

@@ -0,0 +1,362 @@
+/*
+
+=========================================================
+* 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 'bootstrap';
+import Swal from 'sweetalert2';
+import SmoothScroll from 'smooth-scroll';
+
+d.addEventListener("DOMContentLoaded", function(event) {
+
+    const swalWithBootstrapButtons = Swal.mixin({
+        customClass: {
+            confirmButton: 'btn btn-primary me-3',
+            cancelButton: 'btn btn-gray'
+        },
+        buttonsStyling: false
+    });
+
+    var themeSettingsEl = document.getElementById('theme-settings');
+    var themeSettingsExpandEl = document.getElementById('theme-settings-expand');
+
+    if(themeSettingsEl) {
+
+        var themeSettingsCollapse = new bootstrap.Collapse(themeSettingsEl, {
+            show: true,
+            toggle: false
+        });
+
+        if (window.localStorage.getItem('settings_expanded') === 'true') {
+            themeSettingsCollapse.show();
+            themeSettingsExpandEl.classList.remove('show');
+        } else {
+            themeSettingsCollapse.hide();
+            themeSettingsExpandEl.classList.add('show');
+        }
+
+        themeSettingsEl.addEventListener('hidden.bs.collapse', function () {
+            themeSettingsExpandEl.classList.add('show');
+            window.localStorage.setItem('settings_expanded', false);
+        });
+
+        themeSettingsExpandEl.addEventListener('click', function () {
+            themeSettingsExpandEl.classList.remove('show');
+            window.localStorage.setItem('settings_expanded', true);
+            setTimeout(function() {
+                themeSettingsCollapse.show();
+            }, 300);
+        });
+    }
+
+    // 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';
+        });
+    }
+
+    var iconNotifications = d.querySelector('.notification-bell');
+    if (iconNotifications) {
+        iconNotifications.addEventListener('shown.bs.dropdown', function () {
+            iconNotifications.classList.remove('unread');
+        });
+    }
+
+    [].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'
+          });
+    })
+
+    if(d.querySelector('.input-slider-container')) {
+        [].slice.call(d.querySelectorAll('.input-slider-container')).map(function(el) {
+            var slider = el.querySelector(':scope .input-slider');
+            var sliderId = slider.getAttribute('id');
+            var minValue = slider.getAttribute('data-range-value-min');
+            var maxValue = slider.getAttribute('data-range-value-max');
+
+            var sliderValue = el.querySelector(':scope .range-slider-value');
+            var sliderValueId = sliderValue.getAttribute('id');
+            var startValue = sliderValue.getAttribute('data-range-value-low');
+
+            var c = d.getElementById(sliderId),
+                id = d.getElementById(sliderValueId);
+
+            noUiSlider.create(c, {
+                start: [parseInt(startValue)],
+                connect: [true, false],
+                //step: 1000,
+                range: {
+                    'min': [parseInt(minValue)],
+                    'max': [parseInt(maxValue)]
+                }
+            });
+        });
+    }
+
+    if (d.getElementById('input-slider-range')) {
+        var c = d.getElementById("input-slider-range"),
+            low = d.getElementById("input-slider-range-value-low"),
+            e = d.getElementById("input-slider-range-value-high"),
+            f = [d, e];
+
+        noUiSlider.create(c, {
+            start: [parseInt(low.getAttribute('data-range-value-low')), parseInt(e.getAttribute('data-range-value-high'))],
+            connect: !0,
+            tooltips: true,
+            range: {
+                min: parseInt(c.getAttribute('data-range-value-min')),
+                max: parseInt(c.getAttribute('data-range-value-max'))
+            }
+        }), c.noUiSlider.on("update", function (a, b) {
+            f[b].textContent = a[b]
+        });
+    }
+
+    //Chartist
+
+    if(d.querySelector('.ct-chart-sales-value')) {
+        //Chart 5
+          new Chartist.Line('.ct-chart-sales-value', {
+            labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+            series: [
+                [0, 10, 30, 40, 80, 60, 100]
+            ]
+          }, {
+            low: 0,
+            showArea: true,
+            fullWidth: true,
+            plugins: [
+              Chartist.plugins.tooltip()
+            ],
+            axisX: {
+                // On the x-axis start means top and end means bottom
+                position: 'end',
+                showGrid: true
+            },
+            axisY: {
+                // On the y-axis start means left and end means right
+                showGrid: false,
+                showLabel: false,
+                labelInterpolationFnc: function(value) {
+                    return '$' + (value / 1) + 'k';
+                }
+            }
+        });
+    }
+
+    if(d.querySelector('.ct-chart-ranking')) {
+        var chart = new Chartist.Bar('.ct-chart-ranking', {
+            labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+            series: [
+              [1, 5, 2, 5, 4, 3],
+              [2, 3, 4, 8, 1, 2],
+            ]
+          }, {
+            low: 0,
+            showArea: true,
+            plugins: [
+              Chartist.plugins.tooltip()
+            ],
+            axisX: {
+                // On the x-axis start means top and end means bottom
+                position: 'end'
+            },
+            axisY: {
+                // On the y-axis start means left and end means right
+                showGrid: false,
+                showLabel: false,
+                offset: 0
+            }
+            });
+
+          chart.on('draw', function(data) {
+            if(data.type === 'line' || data.type === 'area') {
+              data.element.animate({
+                d: {
+                  begin: 2000 * data.index,
+                  dur: 2000,
+                  from: data.path.clone().scale(1, 0).translate(0, data.chartRect.height()).stringify(),
+                  to: data.path.clone().stringify(),
+                  easing: Chartist.Svg.Easing.easeOutQuint
+                }
+              });
+            }
+        });
+    }
+
+    if(d.querySelector('.ct-chart-traffic-share')) {
+        var data = {
+            series: [70, 20, 10]
+          };
+
+          var sum = function(a, b) { return a + b };
+
+          new Chartist.Pie('.ct-chart-traffic-share', data, {
+            labelInterpolationFnc: function(value) {
+              return Math.round(value / data.series.reduce(sum) * 100) + '%';
+            },
+            low: 0,
+            high: 8,
+            donut: true,
+            donutWidth: 20,
+            donutSolid: true,
+            fullWidth: false,
+            showLabel: false,
+            plugins: [
+              Chartist.plugins.tooltip()
+            ],
+        });
+    }
+
+    if (d.getElementById('loadOnClick')) {
+        d.getElementById('loadOnClick').addEventListener('click', function () {
+            var button = this;
+            var loadContent = d.getElementById('extraContent');
+            var allLoaded = d.getElementById('allLoadedText');
+
+            button.classList.add('btn-loading');
+            button.setAttribute('disabled', 'true');
+
+            setTimeout(function () {
+                loadContent.style.display = 'block';
+                button.style.display = 'none';
+                allLoaded.style.display = 'block';
+            }, 1500);
+        });
+    }
+
+    var scroll = new SmoothScroll('a[href*="#"]', {
+        speed: 500,
+        speedAsDuration: true
+    });
+
+    if(d.querySelector('.current-year')){
+        d.querySelector('.current-year').textContent = new Date().getFullYear();
+    }
+
+    // Glide JS
+
+    if (d.querySelector('.glide')) {
+        new Glide('.glide', {
+            type: 'carousel',
+            startAt: 0,
+            perView: 3
+          }).mount();
+    }
+
+    if (d.querySelector('.glide-testimonials')) {
+        new Glide('.glide-testimonials', {
+            type: 'carousel',
+            startAt: 0,
+            perView: 1,
+            autoplay: 2000
+          }).mount();
+    }
+
+    if (d.querySelector('.glide-clients')) {
+        new Glide('.glide-clients', {
+            type: 'carousel',
+            startAt: 0,
+            perView: 5,
+            autoplay: 2000
+          }).mount();
+    }
+
+    if (d.querySelector('.glide-news-widget')) {
+        new Glide('.glide-news-widget', {
+            type: 'carousel',
+            startAt: 0,
+            perView: 1,
+            autoplay: 2000
+          }).mount();
+    }
+
+    if (d.querySelector('.glide-autoplay')) {
+        new Glide('.glide-autoplay', {
+            type: 'carousel',
+            startAt: 0,
+            perView: 3,
+            autoplay: 2000
+          }).mount();
+    }
+
+    // Pricing countup
+    var billingSwitchEl = d.getElementById('billingSwitch');
+    if(billingSwitchEl) {
+        const countUpStandard = new countUp.CountUp('priceStandard', 99, { startVal: 199 });
+        const countUpPremium = new countUp.CountUp('pricePremium', 199, { startVal: 299 });
+
+        billingSwitchEl.addEventListener('change', function() {
+            if(billingSwitch.checked) {
+                countUpStandard.start();
+                countUpPremium.start();
+            } else {
+                countUpStandard.reset();
+                countUpPremium.reset();
+            }
+        });
+    }
+
+});

resources/volt/scss/_variables.scss

@@ -0,0 +1 @@
+// $primary: blue;

resources/volt/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!

resources/volt/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";

resources/volt/scss/volt/_forms.scss

@@ -0,0 +1,4 @@
+@import "forms/form-control";
+@import "forms/form-check";
+@import "forms/input-group";
+@import "forms/form-select";

resources/volt/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);
+}

resources/volt/scss/volt/_layout.scss

@@ -0,0 +1,5 @@
+@import "layout/navbar";
+@import "layout/section";
+@import "layout/footer";
+@import "layout/sidebar";
+@import "layout/sidenav";

resources/volt/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";

resources/volt/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,
+      ),
+    ),
+  )
+);

resources/volt/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";

resources/volt/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;
+    }
+}
+
+
+
+

resources/volt/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;
+    }
+}

resources/volt/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;
+}

resources/volt/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;
+    }
+}

resources/volt/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;
+}

resources/volt/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;
+}

resources/volt/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;
+    }
+  }
+}

resources/volt/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;
+			}
+		}
+    }
+}

resources/volt/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;
+    }
+}

resources/volt/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;
+    }
+}

resources/volt/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;      
+    }
+}

resources/volt/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;
+        }
+    }
+}

resources/volt/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;
+		}
+	}
+}
+

resources/volt/scss/volt/components/_datepicker.scss

@@ -0,0 +1,13 @@
+/**
+ * = Datepickers
+ */
+
+ .datepicker {
+
+    .datepicker-cell.selected,
+    .datepicker-cell.selected:hover {
+      background: $primary;
+    }
+  
+  }
+  

resources/volt/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;
+    }
+}
+
+

resources/volt/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);
+	}
+}

resources/volt/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;
+}
+

resources/volt/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;
+	}
+}

resources/volt/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);
+    }
+}
+

resources/volt/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;
+    }
+}

resources/volt/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);
+    }
+}
+

resources/volt/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);
+    }
+}

resources/volt/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;
+            }
+        }
+    }
+}

resources/volt/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%);
+  }
+  

resources/volt/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;
+}

resources/volt/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;
+    }
+}

resources/volt/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;
+    }
+}

resources/volt/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;
+            }
+        }
+    }
+}

resources/volt/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;
+}
+  

resources/volt/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;
+}

resources/volt/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;
+    }
+}

resources/volt/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;
+            }
+        }
+    }
+}
+

resources/volt/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;
+}

resources/volt/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);
+}

resources/volt/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;
+    }
+}

resources/volt/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;
+    }
+}

resources/volt/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;
+
+}

resources/volt/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;
+            }
+        }
+    } 
+}  

resources/volt/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;
+	}
+
+}

resources/volt/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 );
+}

resources/volt/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;
+}
+

resources/volt/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; 
+}

resources/volt/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;
+    	}
+    }
+}

resources/volt/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;
+		}
+	}
+}

resources/volt/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));
+}

resources/volt/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;
+  }

vite.config.js

@@ -4,7 +4,10 @@ import laravel from 'laravel-vite-plugin';
 export default defineConfig({
     plugins: [
         laravel({
-            input: ['resources/css/app.css', 'resources/js/app.js'],
+            input: [
+                'resources/volt/scss/app.scss',
+                'resources/volt/js/app.js'
+            ],
             refresh: true,
         }),
     ],