From f9d157844efd98953c28060319539d0363a56b60 Mon Sep 17 00:00:00 2001
From: Maisam Afshar <maisam.afshar@gmail.com>
Date: Fri, 28 Apr 2023 08:26:30 +0430
Subject: [PATCH 1/4] Refactor: non-unique id on inputs

---
 src/views/SignIn.vue |  41 +++++++++++-----
 src/views/SignUp.vue | 114 +++++++++++++++++++++++++++++++++----------
 2 files changed, 117 insertions(+), 38 deletions(-)

diff --git a/src/views/SignIn.vue b/src/views/SignIn.vue
index e04be18..0f1fd6d 100644
--- a/src/views/SignIn.vue
+++ b/src/views/SignIn.vue
@@ -18,23 +18,38 @@
             <div class="mx-auto col-xl-4 col-lg-5 col-md-6 d-flex flex-column">
               <div class="mt-8 card card-plain">
                 <div class="pb-0 card-header text-start">
-                  <h3 class="font-weight-bolder text-info text-gradient">Welcome back</h3>
+                  <h3 class="font-weight-bolder text-info text-gradient">
+                    Welcome back
+                  </h3>
                   <p class="mb-0">Enter your email and password to sign in</p>
                 </div>
                 <div class="card-body">
                   <form role="form" class="text-start">
                     <label>Email</label>
-                    <vsud-input type="email" placeholder="Email" name="email" />
+                    <vsud-input
+                      id="email"
+                      type="email"
+                      placeholder="Email"
+                      name="email"
+                    />
                     <label>Password</label>
-                    <vsud-input type="password" placeholder="Password" name="password" />
-                    <vsud-switch id="rememberMe" checked>Remember me</vsud-switch>
+                    <vsud-input
+                      id="password"
+                      type="password"
+                      placeholder="Password"
+                      name="password"
+                    />
+                    <vsud-switch id="rememberMe" checked
+                      >Remember me</vsud-switch
+                    >
                     <div class="text-center">
                       <vsud-button
                         class="my-4 mb-2"
                         variant="gradient"
                         color="info"
                         full-width
-                      >Sign in</vsud-button>
+                        >Sign in</vsud-button
+                      >
                     </div>
                   </form>
                 </div>
@@ -44,18 +59,20 @@
                     <a
                       href="javascript:;"
                       class="text-info text-gradient font-weight-bold"
-                    >Sign up</a>
+                      >Sign up</a
+                    >
                   </p>
                 </div>
               </div>
             </div>
             <div class="col-md-6">
-              <div class="top-0 oblique position-absolute h-100 d-md-block d-none me-n8">
+              <div
+                class="top-0 oblique position-absolute h-100 d-md-block d-none me-n8"
+              >
                 <div
                   class="bg-cover oblique-image position-absolute fixed-top ms-auto h-100 z-index-0 ms-n6"
                   :style="{
-                    backgroundImage:
-                      `url(${bgImg})`,
+                    backgroundImage: `url(${bgImg})`,
                   }"
                 ></div>
               </div>
@@ -74,7 +91,7 @@ import AppFooter from "@/examples/PageLayout/Footer.vue";
 import VsudInput from "@/components/VsudInput.vue";
 import VsudSwitch from "@/components/VsudSwitch.vue";
 import VsudButton from "@/components/VsudButton.vue";
-import bgImg from "@/assets/img/curved-images/curved9.jpg"
+import bgImg from "@/assets/img/curved-images/curved9.jpg";
 const body = document.getElementsByTagName("body")[0];
 
 export default {
@@ -88,8 +105,8 @@ export default {
   },
   data() {
     return {
-      bgImg
-    }
+      bgImg,
+    };
   },
   beforeMount() {
     this.$store.state.hideConfigButton = true;
diff --git a/src/views/SignUp.vue b/src/views/SignUp.vue
index 0e466e9..23642f9 100644
--- a/src/views/SignUp.vue
+++ b/src/views/SignUp.vue
@@ -3,7 +3,7 @@
   <div
     class="pt-5 m-3 page-header align-items-start min-vh-50 pb-11 border-radius-lg"
     :style="{
-      backgroundImage:   `url(${bgImg})`,
+      backgroundImage: `url(${bgImg})`,
     }"
   >
     <span class="mask bg-gradient-dark opacity-6"></span>
@@ -29,10 +29,28 @@
           <div class="px-3 row px-xl-5 px-sm-4">
             <div class="px-1 col-3 ms-auto">
               <a class="btn btn-outline-light w-100" href="javascript:;">
-                <svg width="24px" height="32px" viewBox="0 0 64 64" version="1.1">
-                  <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-                    <g transform="translate(3.000000, 3.000000)" fill-rule="nonzero">
-                      <circle fill="#3C5A9A" cx="29.5091719" cy="29.4927506" r="29.4882047" />
+                <svg
+                  width="24px"
+                  height="32px"
+                  viewBox="0 0 64 64"
+                  version="1.1"
+                >
+                  <g
+                    stroke="none"
+                    stroke-width="1"
+                    fill="none"
+                    fill-rule="evenodd"
+                  >
+                    <g
+                      transform="translate(3.000000, 3.000000)"
+                      fill-rule="nonzero"
+                    >
+                      <circle
+                        fill="#3C5A9A"
+                        cx="29.5091719"
+                        cy="29.4927506"
+                        r="29.4882047"
+                      />
                       <path
                         d="M39.0974944,9.05587273 L32.5651312,9.05587273 C28.6886088,9.05587273 24.3768224,10.6862851 24.3768224,16.3054653 C24.395747,18.2634019 24.3768224,20.1385313 24.3768224,22.2488655 L19.8922122,22.2488655 L19.8922122,29.3852113 L24.5156022,29.3852113 L24.5156022,49.9295284 L33.0113092,49.9295284 L33.0113092,29.2496356 L38.6187742,29.2496356 L39.1261316,22.2288395 L32.8649196,22.2288395 C32.8649196,22.2288395 32.8789377,19.1056932 32.8649196,18.1987181 C32.8649196,15.9781412 35.1755132,16.1053059 35.3144932,16.1053059 C36.4140178,16.1053059 38.5518876,16.1085101 39.1006986,16.1053059 L39.1006986,9.05587273 L39.0974944,9.05587273 L39.0974944,9.05587273 Z"
                         fill="#FFFFFF"
@@ -44,8 +62,18 @@
             </div>
             <div class="px-1 col-3">
               <a class="btn btn-outline-light w-100" href="javascript:;">
-                <svg width="24px" height="32px" viewBox="0 0 64 64" version="1.1">
-                  <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                <svg
+                  width="24px"
+                  height="32px"
+                  viewBox="0 0 64 64"
+                  version="1.1"
+                >
+                  <g
+                    stroke="none"
+                    stroke-width="1"
+                    fill="none"
+                    fill-rule="evenodd"
+                  >
                     <g
                       transform="translate(7.000000, 0.564551)"
                       fill="#000000"
@@ -61,9 +89,22 @@
             </div>
             <div class="px-1 col-3 me-auto">
               <a class="btn btn-outline-light w-100" href="javascript:;">
-                <svg width="24px" height="32px" viewBox="0 0 64 64" version="1.1">
-                  <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-                    <g transform="translate(3.000000, 2.000000)" fill-rule="nonzero">
+                <svg
+                  width="24px"
+                  height="32px"
+                  viewBox="0 0 64 64"
+                  version="1.1"
+                >
+                  <g
+                    stroke="none"
+                    stroke-width="1"
+                    fill="none"
+                    fill-rule="evenodd"
+                  >
+                    <g
+                      transform="translate(3.000000, 2.000000)"
+                      fill-rule="nonzero"
+                    >
                       <path
                         d="M57.8123233,30.1515267 C57.8123233,27.7263183 57.6155321,25.9565533 57.1896408,24.1212666 L29.4960833,24.1212666 L29.4960833,35.0674653 L45.7515771,35.0674653 C45.4239683,37.7877475 43.6542033,41.8844383 39.7213169,44.6372555 L39.6661883,45.0037254 L48.4223791,51.7870338 L49.0290201,51.8475849 C54.6004021,46.7020943 57.8123233,39.1313952 57.8123233,30.1515267"
                         fill="#4285F4"
@@ -88,37 +129,58 @@
             <div class="mt-2 position-relative text-center">
               <p
                 class="text-sm font-weight-bold mb-2 text-secondary text-border d-inline z-index-2 bg-white px-3"
-              >or</p>
+              >
+                or
+              </p>
             </div>
           </div>
           <div class="card-body">
             <form role="form">
               <div class="mb-3">
-                <vsud-input type="text" placeholder="Name" aria-label="Name" />
+                <vsud-input
+                  id="name"
+                  type="text"
+                  placeholder="Name"
+                  aria-label="Name"
+                />
               </div>
               <div class="mb-3">
-                <vsud-input type="email" placeholder="Email" aria-label="Email" />
+                <vsud-input
+                  id="email"
+                  type="email"
+                  placeholder="Email"
+                  aria-label="Email"
+                />
               </div>
               <div class="mb-3">
-                <vsud-input type="password" placeholder="Password" aria-label="Password" />
+                <vsud-input
+                  id="password"
+                  type="password"
+                  placeholder="Password"
+                  aria-label="Password"
+                />
               </div>
               <vsud-checkbox id="flexCheckDefault" checked>
                 I agree the
-                <a
-                  href="javascript:;"
-                  class="text-dark font-weight-bolder"
-                >Terms and Conditions</a>
+                <a href="javascript:;" class="text-dark font-weight-bolder"
+                  >Terms and Conditions</a
+                >
               </vsud-checkbox>
 
               <div class="text-center">
-                <vsud-button color="dark" full-width variant="gradient" class="my-4 mb-2">Sign up</vsud-button>
+                <vsud-button
+                  color="dark"
+                  full-width
+                  variant="gradient"
+                  class="my-4 mb-2"
+                  >Sign up</vsud-button
+                >
               </div>
               <p class="text-sm mt-3 mb-0">
                 Already have an account?
-                <a
-                  href="javascript:;"
-                  class="text-dark font-weight-bolder"
-                >Sign in</a>
+                <a href="javascript:;" class="text-dark font-weight-bolder"
+                  >Sign in</a
+                >
               </p>
             </form>
           </div>
@@ -135,7 +197,7 @@ import AppFooter from "@/examples/PageLayout/Footer.vue";
 import VsudInput from "@/components/VsudInput.vue";
 import VsudCheckbox from "@/components/VsudCheckbox.vue";
 import VsudButton from "@/components/VsudButton.vue";
-import bgImg from "@/assets/img/curved-images/curved6.jpg"
+import bgImg from "@/assets/img/curved-images/curved6.jpg";
 export default {
   name: "SignUp",
   components: {
@@ -147,8 +209,8 @@ export default {
   },
   data() {
     return {
-      bgImg
-    }
+      bgImg,
+    };
   },
   created() {
     this.$store.state.hideConfigButton = true;

From 9482d18a8ee4b955c048c144b31b0b672707ed28 Mon Sep 17 00:00:00 2001
From: Maisam Afshar <maisam.afshar@gmail.com>
Date: Fri, 28 Apr 2023 08:38:48 +0430
Subject: [PATCH 2/4] update dependencies

---
 CHANGELOG.md |  5 +++++
 package.json | 28 ++++++++++++++--------------
 2 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 05d8993..6e59cc6 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,4 +1,9 @@
 # Change Log
 
+## [1.0.1] 2023-04-28
+
+- Update dependencies & devDependencies
+
 ## [1.0.0] 2022-03-25
+
 ### Original Release
diff --git a/package.json b/package.json
index 137f955..96a4fa4 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "vite-soft-ui-dashboard",
   "private": true,
-  "version": "1.0.0",
+  "version": "1.0.1",
   "author": "Creative Tim (https://www.creative-tim.com/)",
   "scripts": {
     "dev": "vite",
@@ -11,21 +11,21 @@
     "format": "prettier .  --write"
   },
   "dependencies": {
-    "@popperjs/core": "2.10.2",
-    "bootstrap": "5.1.3",
-    "chart.js": "3.6.0",
+    "@popperjs/core": "2.11.7",
+    "bootstrap": "5.2.3",
+    "chart.js": "4.2.1",
     "jkanban": "^1.3.1",
-    "vue": "^3.2.25",
-    "vue-router": "^4.0.14",
-    "vuex": "^4.0.2"
+    "vue": "^3.2.47",
+    "vue-router": "^4.1.6",
+    "vuex": "^4.1.0"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^2.2.0",
-    "eslint": "^8.11.0",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-vue": "^8.5.0",
-    "prettier": "2.6.0",
-    "sass": "^1.49.9",
-    "vite": "^2.8.0"
+    "@vitejs/plugin-vue": "^4.2.1",
+    "eslint": "^8.39.0",
+    "eslint-config-prettier": "^8.8.0",
+    "eslint-plugin-vue": "^9.11.0",
+    "prettier": "2.8.8",
+    "sass": "^1.62.1",
+    "vite": "^4.3.3"
   }
 }

From cadb9a6324481bac8bceab64378f46f8452dc17b Mon Sep 17 00:00:00 2001
From: Maisam Afshar <maisam.afshar@gmail.com>
Date: Fri, 28 Apr 2023 08:39:21 +0430
Subject: [PATCH 3/4] format code

---
 .eslintrc.js                                  |   22 +-
 .github/workflows/main.yml                    |   12 +-
 LICENSE.md                                    |    2 +-
 README.md                                     |   12 +-
 index.html                                    |   59 +-
 src/assets/css/nucleo-icons.css               | 1197 ++++-----
 src/assets/css/nucleo-svg.css                 |  270 +--
 src/assets/js/nav-pills.js                    |  319 +--
 src/assets/js/tooltip.js                      |   24 +-
 src/assets/scss/soft-ui-dashboard.scss        |    4 +-
 src/assets/scss/soft-ui-dashboard/_alert.scss |   14 +-
 .../scss/soft-ui-dashboard/_avatars.scss      |   92 +-
 .../scss/soft-ui-dashboard/_breadcrumbs.scss  |   52 +-
 .../scss/soft-ui-dashboard/_buttons.scss      |   36 +-
 src/assets/scss/soft-ui-dashboard/_cards.scss |    2 +-
 .../scss/soft-ui-dashboard/_dark-version.scss |   70 +-
 .../scss/soft-ui-dashboard/_dropdown.scss     |   55 +-
 .../scss/soft-ui-dashboard/_dropup.scss       |    6 +-
 .../scss/soft-ui-dashboard/_fixed-plugin.scss |   24 +-
 src/assets/scss/soft-ui-dashboard/_forms.scss |   25 +-
 .../scss/soft-ui-dashboard/_gradients.scss    |   21 +-
 .../scss/soft-ui-dashboard/_info-areas.scss   |    6 +-
 src/assets/scss/soft-ui-dashboard/_misc.scss  |   19 +-
 src/assets/scss/soft-ui-dashboard/_nav.scss   |   28 +-
 .../soft-ui-dashboard/_navbar-vertical.scss   |   32 +-
 .../scss/soft-ui-dashboard/_navbar.scss       |   34 +-
 .../scss/soft-ui-dashboard/_pagination.scss   |    7 +-
 src/assets/scss/soft-ui-dashboard/_rtl.scss   |    8 +-
 .../scss/soft-ui-dashboard/_tables.scss       |   10 +-
 .../scss/soft-ui-dashboard/_timeline.scss     |  168 +-
 .../scss/soft-ui-dashboard/_tooltips.scss     |    4 +-
 .../scss/soft-ui-dashboard/_typography.scss   |   65 +-
 .../soft-ui-dashboard/_utilities-extend.scss  |    4 +-
 .../scss/soft-ui-dashboard/_utilities.scss    |  802 +++---
 .../scss/soft-ui-dashboard/_variables.scss    | 2144 +++++++++--------
 .../bootstrap/_accordion.scss                 |    9 +-
 .../soft-ui-dashboard/bootstrap/_alert.scss   |    8 +-
 .../bootstrap/_breadcrumb.scss                |    9 +-
 .../bootstrap/_button-group.scss              |   23 +-
 .../soft-ui-dashboard/bootstrap/_buttons.scss |   24 +-
 .../soft-ui-dashboard/bootstrap/_card.scss    |   22 +-
 .../bootstrap/_carousel.scss                  |   19 +-
 .../soft-ui-dashboard/bootstrap/_close.scss   |    3 +-
 .../bootstrap/_dropdown.scss                  |    1 -
 .../bootstrap/_functions.scss                 |  148 +-
 .../soft-ui-dashboard/bootstrap/_grid.scss    |    6 +-
 .../soft-ui-dashboard/bootstrap/_images.scss  |    3 +-
 .../bootstrap/_list-group.scss                |   22 +-
 .../soft-ui-dashboard/bootstrap/_modal.scss   |   24 +-
 .../soft-ui-dashboard/bootstrap/_nav.scss     |    3 -
 .../soft-ui-dashboard/bootstrap/_navbar.scss  |    7 +-
 .../bootstrap/_offcanvas.scss                 |   14 +-
 .../bootstrap/_pagination.scss                |   22 +-
 .../bootstrap/_placeholders.scss              |   11 +-
 .../soft-ui-dashboard/bootstrap/_popover.scss |   24 +-
 .../bootstrap/_progress.scss                  |    4 +-
 .../soft-ui-dashboard/bootstrap/_reboot.scss  |   37 +-
 .../bootstrap/_spinners.scss                  |    4 +-
 .../soft-ui-dashboard/bootstrap/_tables.scss  |   16 +-
 .../soft-ui-dashboard/bootstrap/_toasts.scss  |    6 +-
 .../soft-ui-dashboard/bootstrap/_tooltip.scss |   14 +-
 .../soft-ui-dashboard/bootstrap/_type.scss    |    2 -
 .../bootstrap/_utilities.scss                 |  553 +++--
 .../bootstrap/_variables.scss                 | 1837 +++++++-------
 .../bootstrap/bootstrap-grid.scss             |    2 +-
 .../bootstrap/forms/_form-check.scss          |   14 +-
 .../bootstrap/forms/_form-control.scss        |   18 +-
 .../bootstrap/forms/_form-range.scss          |   15 +-
 .../bootstrap/forms/_form-select.scss         |   13 +-
 .../bootstrap/forms/_input-group.scss         |   11 +-
 .../bootstrap/helpers/_colored-links.scss     |    6 +-
 .../bootstrap/mixins/_backdrop.scss           |    8 +-
 .../bootstrap/mixins/_border-radius.scss      |    3 +-
 .../bootstrap/mixins/_breakpoints.scss        |   24 +-
 .../bootstrap/mixins/_buttons.scss            |   51 +-
 .../bootstrap/mixins/_deprecate.scss          |    7 +-
 .../bootstrap/mixins/_forms.scss              |   18 +-
 .../bootstrap/mixins/_gradients.scss          |   72 +-
 .../bootstrap/mixins/_grid.scss               |   36 +-
 .../bootstrap/mixins/_image.scss              |    1 -
 .../bootstrap/mixins/_transition.scss         |    7 +-
 .../bootstrap/mixins/_utilities.scss          |   35 +-
 .../bootstrap/utilities/_api.scss             |   13 +-
 .../bootstrap/vendor/_rfs.scss                |  160 +-
 .../cards/card-background.scss                |    8 +-
 .../soft-ui-dashboard/forms/_form-check.scss  |    8 +-
 .../soft-ui-dashboard/forms/_form-switch.scss |   15 +-
 .../scss/soft-ui-dashboard/forms/_forms.scss  |   12 +-
 .../soft-ui-dashboard/forms/_input-group.scss |   24 +-
 .../scss/soft-ui-dashboard/forms/_inputs.scss |   14 +-
 .../scss/soft-ui-dashboard/mixins/_badge.scss |    4 +-
 .../mixins/_colored-shadows.scss              |    6 +-
 .../scss/soft-ui-dashboard/mixins/_hover.scss |    5 +-
 .../mixins/_social-buttons.scss               |    3 +-
 .../plugins/free/_flatpickr.scss              |  200 +-
 .../plugins/free/_nouislider.scss             |   36 +-
 .../plugins/free/_perfect-scrollbar.scss      |   16 +-
 .../plugins/free/_prism.scss                  |  118 +-
 src/assets/scss/soft-ui-dashboard/theme.scss  |    4 +-
 .../variables/_animations.scss                |   75 +-
 .../soft-ui-dashboard/variables/_avatars.scss |   37 +-
 .../soft-ui-dashboard/variables/_badge.scss   |   54 +-
 .../variables/_breadcrumb.scss                |   10 +-
 .../variables/_cards-extend.scss              |   60 +-
 .../soft-ui-dashboard/variables/_cards.scss   |  107 +-
 .../soft-ui-dashboard/variables/_choices.scss |   12 +-
 .../variables/_dark-version.scss              |   26 +-
 .../variables/_dropdowns.scss                 |   99 +-
 .../variables/_full-calendar.scss             |    8 +-
 .../soft-ui-dashboard/variables/_header.scss  |   42 +-
 .../variables/_info-areas.scss                |   56 +-
 .../variables/_misc-extend.scss               |   74 +-
 .../soft-ui-dashboard/variables/_misc.scss    |  104 +-
 .../variables/_navbar-vertical.scss           |  113 +-
 .../soft-ui-dashboard/variables/_navbar.scss  |   28 +-
 .../variables/_pagination.scss                |   28 +-
 .../variables/_social-buttons.scss            |   52 +-
 .../soft-ui-dashboard/variables/_table.scss   |   32 +-
 .../variables/_timeline.scss                  |    2 +-
 .../variables/_utilities-extend.scss          |   28 +-
 .../variables/_utilities.scss                 |  224 +-
 .../variables/_virtual-reality.scss           |   10 +-
 src/components/Icon.vue                       |  184 +-
 src/components/VsudAlert.vue                  |  112 +-
 src/components/VsudAvatar.vue                 |  108 +-
 src/components/VsudBadge.vue                  |  107 +-
 src/components/VsudButton.vue                 |  115 +-
 src/components/VsudCheckbox.vue               |   62 +-
 src/components/VsudInput.vue                  |  160 +-
 src/components/VsudPagination.vue             |   62 +-
 src/components/VsudPaginationItem.vue         |   94 +-
 src/components/VsudProgress.vue               |   84 +-
 src/components/VsudRadio.vue                  |   62 +-
 src/components/VsudSwitch.vue                 |   86 +-
 src/components/VsudTextarea.vue               |   58 +-
 src/examples/Breadcrumbs.vue                  |   88 +-
 src/examples/Cards/Card.vue                   |  163 +-
 src/examples/Cards/DefaultInfoCard.vue        |   92 +-
 src/examples/Cards/MasterCard.vue             |  151 +-
 src/examples/Charts/ActiveUsersChart.vue      |  608 ++---
 src/examples/Charts/GradientLineChart.vue     |  256 +-
 src/examples/Configurator.vue                 |   41 +-
 src/examples/Footer.vue                       |  138 +-
 src/examples/Navbars/Navbar.vue               |   35 +-
 src/examples/PageLayout/Footer.vue            |  206 +-
 src/examples/PageLayout/Navbar.vue            |   10 +-
 src/examples/Sidenav/SidenavCard.vue          |  135 +-
 src/examples/Sidenav/SidenavList.vue          |   14 +-
 src/examples/Sidenav/index.vue                |    4 +-
 src/main.js                                   |   16 +-
 src/soft-ui-dashboard.js                      |   12 +-
 src/views/Billing.vue                         |  190 +-
 src/views/Profile.vue                         |    6 +-
 src/views/SignUp.vue                          |  456 ++--
 src/views/Tables.vue                          |   54 +-
 src/views/VirtualReality.vue                  |   23 +-
 src/views/components/AuthorsTable.vue         |  578 +++--
 src/views/components/BillingCard.vue          |  214 +-
 src/views/components/CardCalendar.vue         |   88 +-
 src/views/components/CardEmail.vue            |   48 +-
 src/views/components/CardMessage.vue          |  110 +-
 src/views/components/CardPlayer.vue           |  118 +-
 src/views/components/CardToDo.vue             |   60 +-
 src/views/components/InvoiceCard.vue          |  213 +-
 src/views/components/NavPill.vue              |  114 +-
 src/views/components/OrdersCard.vue           |  290 +--
 src/views/components/PaymentCard.vue          |  164 +-
 src/views/components/ProfileCard.vue          |  140 +-
 src/views/components/ProjectOverviewCard.vue  |  232 +-
 src/views/components/ProjectsTable.vue        |  610 ++---
 src/views/components/TransactionCard.vue      |  334 +--
 171 files changed, 9668 insertions(+), 8429 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 3cd8c40..afc0597 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,14 +1,10 @@
 module.exports = {
-    env: {
-      node: true,
-    },
-    extends: [
-      'eslint:recommended',
-      'plugin:vue/vue3-recommended',
-      'prettier'
-    ],
-    rules: {
-      // override/add rules settings here, such as:
-      // 'vue/no-unused-vars': 'error'
-    }
-  }
\ No newline at end of file
+  env: {
+    node: true,
+  },
+  extends: ["eslint:recommended", "plugin:vue/vue3-recommended", "prettier"],
+  rules: {
+    // override/add rules settings here, such as:
+    // 'vue/no-unused-vars': 'error'
+  },
+};
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index 8042ba3..590c5dd 100644
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -4,9 +4,9 @@ jobs:
   autoclose:
     runs-on: ubuntu-latest
     steps:
-    - name: Issue auto-closer
-      uses: roots/issue-closer-action@v1.1
-      with:
-        repo-token: ${{ secrets.GITHUB_TOKEN }}
-        issue-close-message: "@${issue.user.login} this issue was automatically closed because it did not follow the bellow rules:\n\n<pre>\n\n\n\nIMPORTANT: Please use the following link to create a new issue:\n\nhttps://www.creative-tim.com/new-issue/vite-soft-ui-dashboard\n\n**If your issue was not created using the app above, it will be closed immediately.**\n\n\n\nLove Creative Tim? Do you need Angular, React, Vuejs or HTML? You can visit:\n👉  https://www.creative-tim.com/bundles\n👉  https://www.creative-tim.com\n\n\n</pre>\n\n"
-        issue-pattern: (\#\#\# Version([\S\s.*]*?)\#\#\# Reproduction link([\S\s.*]*?)\#\#\# Operating System([\S\s.*]*?)\#\#\# Device([\S\s.*]*?)\#\#\# Browser & Version([\S\s.*]*?)\#\#\# Steps to reproduce([\S\s.*]*?)\#\#\# What is expected([\S\s.*]*?)\#\#\# What is actually happening([\S\s.*]*?)---([\S\s.*]*?)\#\#\# Solution([\S\s.*]*?)\#\#\# Additional comments([\S\s.*]*?)\<\!-- generated by creative-tim-issues\. DO NOT REMOVE --\>)|(\#\#\# What is your enhancement([\S\s.*]*?)\<\!-- generated by creative-tim-issues\. DO NOT REMOVE --\>)
+      - name: Issue auto-closer
+        uses: roots/issue-closer-action@v1.1
+        with:
+          repo-token: ${{ secrets.GITHUB_TOKEN }}
+          issue-close-message: "@${issue.user.login} this issue was automatically closed because it did not follow the bellow rules:\n\n<pre>\n\n\n\nIMPORTANT: Please use the following link to create a new issue:\n\nhttps://www.creative-tim.com/new-issue/vite-soft-ui-dashboard\n\n**If your issue was not created using the app above, it will be closed immediately.**\n\n\n\nLove Creative Tim? Do you need Angular, React, Vuejs or HTML? You can visit:\n👉  https://www.creative-tim.com/bundles\n👉  https://www.creative-tim.com\n\n\n</pre>\n\n"
+          issue-pattern: (\#\#\# Version([\S\s.*]*?)\#\#\# Reproduction link([\S\s.*]*?)\#\#\# Operating System([\S\s.*]*?)\#\#\# Device([\S\s.*]*?)\#\#\# Browser & Version([\S\s.*]*?)\#\#\# Steps to reproduce([\S\s.*]*?)\#\#\# What is expected([\S\s.*]*?)\#\#\# What is actually happening([\S\s.*]*?)---([\S\s.*]*?)\#\#\# Solution([\S\s.*]*?)\#\#\# Additional comments([\S\s.*]*?)\<\!-- generated by creative-tim-issues\. DO NOT REMOVE --\>)|(\#\#\# What is your enhancement([\S\s.*]*?)\<\!-- generated by creative-tim-issues\. DO NOT REMOVE --\>)
diff --git a/LICENSE.md b/LICENSE.md
index 620f880..7e2a938 100644
--- a/LICENSE.md
+++ b/LICENSE.md
@@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
\ No newline at end of file
+SOFTWARE.
diff --git a/README.md b/README.md
index 92192b1..3d046d6 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
 # [Vite Soft UI Dashboard](http://demos.creative-tim.com/vite-soft-ui-dashboard/?ref=readme-vitesud) [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social&logo=twitter)](https://twitter.com/intent/tweet?url=https://www.creative-tim.com/product/vue-soft-ui-dashboard&text=Check%20Vite%20Soft%20UI%20Dashboard%20made%20by%20@CreativeTim%20#webdesign%20#dashboard%20#softdesign%20#vue%20https://www.creative-tim.com/product/vite-soft-ui-dashboard)
 
-![version](https://img.shields.io/badge/version-1.0.0-blue.svg) [![GitHub issues open](https://img.shields.io/github/issues/creativetimofficial/vue-soft-ui-dashboard.svg)](https://github.com/creativetimofficial/vite-soft-ui-dashboard/issues?q=is%3Aopen+is%3Aissue) [![GitHub issues closed](https://img.shields.io/github/issues-closed-raw/creativetimofficial/vite-soft-ui-dashboard.svg)](https://github.com/creativetimofficial/vite-soft-ui-dashboard/issues?q=is%3Aissue+is%3Aclosed)
+![version](https://img.shields.io/badge/version-1.0.1-blue.svg) [![GitHub issues open](https://img.shields.io/github/issues/creativetimofficial/vue-soft-ui-dashboard.svg)](https://github.com/creativetimofficial/vite-soft-ui-dashboard/issues?q=is%3Aopen+is%3Aissue) [![GitHub issues closed](https://img.shields.io/github/issues-closed-raw/creativetimofficial/vite-soft-ui-dashboard.svg)](https://github.com/creativetimofficial/vite-soft-ui-dashboard/issues?q=is%3Aissue+is%3Aclosed)
 
 ![Image](https://s3.amazonaws.com/creativetim_bucket/products/635/original/vite-soft-ui-dashboard.jpg)
 
@@ -55,14 +55,14 @@ Let us know your thoughts below. And good luck with development!
 - [Licensing](#licensing)
 - [Useful Links](#useful-links)
 
-## Versions 
+## Versions
 
-[<img src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/logos/vue-logo.jpg?raw=true" width="60" height="60" />](https://www.creative-tim.com/product/vue-soft-ui-dashboard?ref=readme-vitesud) 
+[<img src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/logos/vue-logo.jpg?raw=true" width="60" height="60" />](https://www.creative-tim.com/product/vue-soft-ui-dashboard?ref=readme-vitesud)
 [<img src="https://www.creative-tim.com/assets/icon-vite-f0eb8f14d3ba1b47beeb44734ff11f3c4bf84b9a731892f2fbc34fc0442a8421.jpg" width="60" height="60" />](https://www.creative-tim.com/product/vite-soft-ui-dashboard?ref=readme-vitesud)
 
-| VueJS | Vite |
-| ----- | ----- |
-| [![Vue Soft UI Dashboard](https://s3.amazonaws.com/creativetim_bucket/products/591/thumb/vue-soft-ui-dashboard.jpg)](http://demos.creative-tim.com/vue-soft-ui-dashboard/?ref=readme-vitesud)| [![Vite Soft UI Dashboard](https://s3.amazonaws.com/creativetim_bucket/products/635/thumb/vite-soft-ui-dashboard.jpg)](http://demos.creative-tim.com/vite-soft-ui-dashboard/?ref=readme-vitesud)|
+| VueJS                                                                                                                                                                                         | Vite                                                                                                                                                                                             |
+| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| [![Vue Soft UI Dashboard](https://s3.amazonaws.com/creativetim_bucket/products/591/thumb/vue-soft-ui-dashboard.jpg)](http://demos.creative-tim.com/vue-soft-ui-dashboard/?ref=readme-vitesud) | [![Vite Soft UI Dashboard](https://s3.amazonaws.com/creativetim_bucket/products/635/thumb/vite-soft-ui-dashboard.jpg)](http://demos.creative-tim.com/vite-soft-ui-dashboard/?ref=readme-vitesud) |
 
 ## Demo
 
diff --git a/index.html b/index.html
index abdee5b..536e9e8 100644
--- a/index.html
+++ b/index.html
@@ -1,9 +1,9 @@
 <!--
   =========================================================
-  * Vite Soft UI Dashboard - v1.0.0
+  * Vite Soft UI Dashboard - v1.0.1
   =========================================================
   * Product Page: https://creative-tim.com/product/vite-soft-ui-dashboard
-  * Copyright 2022 Creative Tim (https://www.creative-tim.com)
+  * Copyright 2023 Creative Tim (https://www.creative-tim.com)
   Coded by www.creative-tim.com
   * Licensed under MIT (https://github.com/creativetimofficial/vite-soft-ui-dashboard/blob/556f77210e261adc3ec12197dab1471a1295afd8/LICENSE.md)
   =========================================================
@@ -12,29 +12,38 @@
 -->
 <!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="utf-8" />
-  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
-  <link rel="icon" href="/favicon.ico" />
-  <title>Vite Soft UI Dashboard by Creative Tim</title>
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <link rel="icon" href="/favicon.ico" />
+    <title>Vite Soft UI Dashboard by Creative Tim</title>
 
-  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet" />
+    <link
+      href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700"
+      rel="stylesheet"
+    />
 
-  <!-- Font Awesome Icons -->
-  <script src="https://kit.fontawesome.com/42d5adcbca.js" crossorigin="anonymous"></script>
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" />
-  <script async defer src="https://buttons.github.io/buttons.js"></script>
-</head>
+    <!-- Font Awesome Icons -->
+    <script
+      src="https://kit.fontawesome.com/42d5adcbca.js"
+      crossorigin="anonymous"
+    ></script>
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
+    />
+    <script async defer src="https://buttons.github.io/buttons.js"></script>
+  </head>
 
-<body class="bg-gray-100">
-  <noscript>
-    <strong>We're sorry but this site doesn't work
-      properly without JavaScript enabled. Please enable it to
-      continue.</strong>
-  </noscript>
-  <div id="app" class="g-sidenav-show"></div>
-  <script type="module" src="/src/main.js"></script>
-</body>
-
-</html>
\ No newline at end of file
+  <body class="bg-gray-100">
+    <noscript>
+      <strong
+        >We're sorry but this site doesn't work properly without JavaScript
+        enabled. Please enable it to continue.</strong
+      >
+    </noscript>
+    <div id="app" class="g-sidenav-show"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
diff --git a/src/assets/css/nucleo-icons.css b/src/assets/css/nucleo-icons.css
index ac634be..ccc2afe 100644
--- a/src/assets/css/nucleo-icons.css
+++ b/src/assets/css/nucleo-icons.css
@@ -1,597 +1,600 @@
-/*--------------------------------
-
-hermes-dashboard-icons Web Font - built using nucleoapp.com
-License - nucleoapp.com/license/
-
--------------------------------- */
-@font-face {
-  font-family: 'NucleoIcons';
-  src: url('../fonts/nucleo-icons.eot');
-  src: url('../fonts/nucleo-icons.eot') format('embedded-opentype'), url('../fonts/nucleo-icons.woff2') format('woff2'), url('../fonts/nucleo-icons.woff') format('woff'), url('../fonts/nucleo-icons.ttf') format('truetype'), url('../fonts/nucleo-icons.svg') format('svg');
-  font-weight: normal;
-  font-style: normal;
-}
-
-/*------------------------
-    base class definition
--------------------------*/
-.ni {
-  display: inline-block;
-  font: normal normal normal 14px/1 NucleoIcons;
-  font-size: inherit;
-  text-rendering: auto;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-/*------------------------
-  change icon size
--------------------------*/
-.ni-lg {
-  font-size: 1.33333333em;
-  line-height: 0.75em;
-  vertical-align: -15%;
-}
-
-.ni-2x {
-  font-size: 2em;
-}
-
-.ni-3x {
-  font-size: 3em;
-}
-
-.ni-4x {
-  font-size: 4em;
-}
-
-.ni-5x {
-  font-size: 5em;
-}
-
-/*----------------------------------
-  add a square/circle background
------------------------------------*/
-.ni.square,
-.ni.circle {
-  padding: 0.33333333em;
-  vertical-align: -16%;
-  background-color: #eee;
-}
-
-.ni.circle {
-  border-radius: 50%;
-}
-
-/*------------------------
-  list icons
--------------------------*/
-.ni-ul {
-  padding-left: 0;
-  margin-left: 2.14285714em;
-  list-style-type: none;
-}
-
-.ni-ul>li {
-  position: relative;
-}
-
-.ni-ul>li>.ni {
-  position: absolute;
-  left: -1.57142857em;
-  top: 0.14285714em;
-  text-align: center;
-}
-
-.ni-ul>li>.ni.lg {
-  top: 0;
-  left: -1.35714286em;
-}
-
-.ni-ul>li>.ni.circle,
-.ni-ul>li>.ni.square {
-  top: -0.19047619em;
-  left: -1.9047619em;
-}
-
-/*------------------------
-  spinning icons
--------------------------*/
-.ni.spin {
-  -webkit-animation: nc-spin 2s infinite linear;
-  -moz-animation: nc-spin 2s infinite linear;
-  animation: nc-spin 2s infinite linear;
-}
-
-@-webkit-keyframes nc-spin {
-  0% {
-    -webkit-transform: rotate(0deg);
-  }
-
-  100% {
-    -webkit-transform: rotate(360deg);
-  }
-}
-
-@-moz-keyframes nc-spin {
-  0% {
-    -moz-transform: rotate(0deg);
-  }
-
-  100% {
-    -moz-transform: rotate(360deg);
-  }
-}
-
-@keyframes nc-spin {
-  0% {
-    -webkit-transform: rotate(0deg);
-    -moz-transform: rotate(0deg);
-    -ms-transform: rotate(0deg);
-    -o-transform: rotate(0deg);
-    transform: rotate(0deg);
-  }
-
-  100% {
-    -webkit-transform: rotate(360deg);
-    -moz-transform: rotate(360deg);
-    -ms-transform: rotate(360deg);
-    -o-transform: rotate(360deg);
-    transform: rotate(360deg);
-  }
-}
-
-/*------------------------
-  rotated/flipped icons
--------------------------*/
-.ni.rotate-90 {
-  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
-  -webkit-transform: rotate(90deg);
-  -moz-transform: rotate(90deg);
-  -ms-transform: rotate(90deg);
-  -o-transform: rotate(90deg);
-  transform: rotate(90deg);
-}
-
-.ni.rotate-180 {
-  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
-  -webkit-transform: rotate(180deg);
-  -moz-transform: rotate(180deg);
-  -ms-transform: rotate(180deg);
-  -o-transform: rotate(180deg);
-  transform: rotate(180deg);
-}
-
-.ni.rotate-270 {
-  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
-  -webkit-transform: rotate(270deg);
-  -moz-transform: rotate(270deg);
-  -ms-transform: rotate(270deg);
-  -o-transform: rotate(270deg);
-  transform: rotate(270deg);
-}
-
-.ni.flip-y {
-  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0);
-  -webkit-transform: scale(-1, 1);
-  -moz-transform: scale(-1, 1);
-  -ms-transform: scale(-1, 1);
-  -o-transform: scale(-1, 1);
-  transform: scale(-1, 1);
-}
-
-.ni.flip-x {
-  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
-  -webkit-transform: scale(1, -1);
-  -moz-transform: scale(1, -1);
-  -ms-transform: scale(1, -1);
-  -o-transform: scale(1, -1);
-  transform: scale(1, -1);
-}
-
-/*------------------------
-    font icons
--------------------------*/
-
-.ni-active-40::before {
-  content: "\ea02";
-}
-
-.ni-air-baloon::before {
-  content: "\ea03";
-}
-
-.ni-album-2::before {
-  content: "\ea04";
-}
-
-.ni-align-center::before {
-  content: "\ea05";
-}
-
-.ni-align-left-2::before {
-  content: "\ea06";
-}
-
-.ni-ambulance::before {
-  content: "\ea07";
-}
-
-.ni-app::before {
-  content: "\ea08";
-}
-
-.ni-archive-2::before {
-  content: "\ea09";
-}
-
-.ni-atom::before {
-  content: "\ea0a";
-}
-
-.ni-badge::before {
-  content: "\ea0b";
-}
-
-.ni-bag-17::before {
-  content: "\ea0c";
-}
-
-.ni-basket::before {
-  content: "\ea0d";
-}
-
-.ni-bell-55::before {
-  content: "\ea0e";
-}
-
-.ni-bold-down::before {
-  content: "\ea0f";
-}
-
-.ni-bold-left::before {
-  content: "\ea10";
-}
-
-.ni-bold-right::before {
-  content: "\ea11";
-}
-
-.ni-bold-up::before {
-  content: "\ea12";
-}
-
-.ni-bold::before {
-  content: "\ea13";
-}
-
-.ni-book-bookmark::before {
-  content: "\ea14";
-}
-
-.ni-books::before {
-  content: "\ea15";
-}
-
-.ni-box-2::before {
-  content: "\ea16";
-}
-
-.ni-briefcase-24::before {
-  content: "\ea17";
-}
-
-.ni-building::before {
-  content: "\ea18";
-}
-
-.ni-bulb-61::before {
-  content: "\ea19";
-}
-
-.ni-bullet-list-67::before {
-  content: "\ea1a";
-}
-
-.ni-bus-front-12::before {
-  content: "\ea1b";
-}
-
-.ni-button-pause::before {
-  content: "\ea1c";
-}
-
-.ni-button-play::before {
-  content: "\ea1d";
-}
-
-.ni-button-power::before {
-  content: "\ea1e";
-}
-
-.ni-calendar-grid-58::before {
-  content: "\ea1f";
-}
-
-.ni-camera-compact::before {
-  content: "\ea20";
-}
-
-.ni-caps-small::before {
-  content: "\ea21";
-}
-
-.ni-cart::before {
-  content: "\ea22";
-}
-
-.ni-chart-bar-32::before {
-  content: "\ea23";
-}
-
-.ni-chart-pie-35::before {
-  content: "\ea24";
-}
-
-.ni-chat-round::before {
-  content: "\ea25";
-}
-
-.ni-check-bold::before {
-  content: "\ea26";
-}
-
-.ni-circle-08::before {
-  content: "\ea27";
-}
-
-.ni-cloud-download-95::before {
-  content: "\ea28";
-}
-
-.ni-cloud-upload-96::before {
-  content: "\ea29";
-}
-
-.ni-compass-04::before {
-  content: "\ea2a";
-}
-
-.ni-controller::before {
-  content: "\ea2b";
-}
-
-.ni-credit-card::before {
-  content: "\ea2c";
-}
-
-.ni-curved-next::before {
-  content: "\ea2d";
-}
-
-.ni-delivery-fast::before {
-  content: "\ea2e";
-}
-
-.ni-diamond::before {
-  content: "\ea2f";
-}
-
-.ni-email-83::before {
-  content: "\ea30";
-}
-
-.ni-fat-add::before {
-  content: "\ea31";
-}
-
-.ni-fat-delete::before {
-  content: "\ea32";
-}
-
-.ni-fat-remove::before {
-  content: "\ea33";
-}
-
-.ni-favourite-28::before {
-  content: "\ea34";
-}
-
-.ni-folder-17::before {
-  content: "\ea35";
-}
-
-.ni-glasses-2::before {
-  content: "\ea36";
-}
-
-.ni-hat-3::before {
-  content: "\ea37";
-}
-
-.ni-headphones::before {
-  content: "\ea38";
-}
-
-.ni-html5::before {
-  content: "\ea39";
-}
-
-.ni-istanbul::before {
-  content: "\ea3a";
-}
-
-.ni-key-25::before {
-  content: "\ea3b";
-}
-
-.ni-laptop::before {
-  content: "\ea3c";
-}
-
-.ni-like-2::before {
-  content: "\ea3d";
-}
-
-.ni-lock-circle-open::before {
-  content: "\ea3e";
-}
-
-.ni-map-big::before {
-  content: "\ea3f";
-}
-
-.ni-mobile-button::before {
-  content: "\ea40";
-}
-
-.ni-money-coins::before {
-  content: "\ea41";
-}
-
-.ni-note-03::before {
-  content: "\ea42";
-}
-
-.ni-notification-70::before {
-  content: "\ea43";
-}
-
-.ni-palette::before {
-  content: "\ea44";
-}
-
-.ni-paper-diploma::before {
-  content: "\ea45";
-}
-
-.ni-pin-3::before {
-  content: "\ea46";
-}
-
-.ni-planet::before {
-  content: "\ea47";
-}
-
-.ni-ruler-pencil::before {
-  content: "\ea48";
-}
-
-.ni-satisfied::before {
-  content: "\ea49";
-}
-
-.ni-scissors::before {
-  content: "\ea4a";
-}
-
-.ni-send::before {
-  content: "\ea4b";
-}
-
-.ni-settings-gear-65::before {
-  content: "\ea4c";
-}
-
-.ni-settings::before {
-  content: "\ea4d";
-}
-
-.ni-single-02::before {
-  content: "\ea4e";
-}
-
-.ni-single-copy-04::before {
-  content: "\ea4f";
-}
-
-.ni-sound-wave::before {
-  content: "\ea50";
-}
-
-.ni-spaceship::before {
-  content: "\ea51";
-}
-
-.ni-square-pin::before {
-  content: "\ea52";
-}
-
-.ni-support-16::before {
-  content: "\ea53";
-}
-
-.ni-tablet-button::before {
-  content: "\ea54";
-}
-
-.ni-tag::before {
-  content: "\ea55";
-}
-
-.ni-tie-bow::before {
-  content: "\ea56";
-}
-
-.ni-time-alarm::before {
-  content: "\ea57";
-}
-
-.ni-trophy::before {
-  content: "\ea58";
-}
-
-.ni-tv-2::before {
-  content: "\ea59";
-}
-
-.ni-umbrella-13::before {
-  content: "\ea5a";
-}
-
-.ni-user-run::before {
-  content: "\ea5b";
-}
-
-.ni-vector::before {
-  content: "\ea5c";
-}
-
-.ni-watch-time::before {
-  content: "\ea5d";
-}
-
-.ni-world::before {
-  content: "\ea5e";
-}
-
-.ni-zoom-split-in::before {
-  content: "\ea5f";
-}
-
-.ni-collection::before {
-  content: "\ea60";
-}
-
-.ni-image::before {
-  content: "\ea61";
-}
-
-.ni-shop::before {
-  content: "\ea62";
-}
-
-.ni-ungroup::before {
-  content: "\ea63";
-}
-
-.ni-world-2::before {
-  content: "\ea64";
-}
-
-.ni-ui-04::before {
-  content: "\ea65";
-}
-
-
-/* all icon font classes list here */
\ No newline at end of file
+/*--------------------------------
+
+hermes-dashboard-icons Web Font - built using nucleoapp.com
+License - nucleoapp.com/license/
+
+-------------------------------- */
+@font-face {
+  font-family: "NucleoIcons";
+  src: url("../fonts/nucleo-icons.eot");
+  src: url("../fonts/nucleo-icons.eot") format("embedded-opentype"),
+    url("../fonts/nucleo-icons.woff2") format("woff2"),
+    url("../fonts/nucleo-icons.woff") format("woff"),
+    url("../fonts/nucleo-icons.ttf") format("truetype"),
+    url("../fonts/nucleo-icons.svg") format("svg");
+  font-weight: normal;
+  font-style: normal;
+}
+
+/*------------------------
+    base class definition
+-------------------------*/
+.ni {
+  display: inline-block;
+  font: normal normal normal 14px/1 NucleoIcons;
+  font-size: inherit;
+  text-rendering: auto;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/*------------------------
+  change icon size
+-------------------------*/
+.ni-lg {
+  font-size: 1.33333333em;
+  line-height: 0.75em;
+  vertical-align: -15%;
+}
+
+.ni-2x {
+  font-size: 2em;
+}
+
+.ni-3x {
+  font-size: 3em;
+}
+
+.ni-4x {
+  font-size: 4em;
+}
+
+.ni-5x {
+  font-size: 5em;
+}
+
+/*----------------------------------
+  add a square/circle background
+-----------------------------------*/
+.ni.square,
+.ni.circle {
+  padding: 0.33333333em;
+  vertical-align: -16%;
+  background-color: #eee;
+}
+
+.ni.circle {
+  border-radius: 50%;
+}
+
+/*------------------------
+  list icons
+-------------------------*/
+.ni-ul {
+  padding-left: 0;
+  margin-left: 2.14285714em;
+  list-style-type: none;
+}
+
+.ni-ul > li {
+  position: relative;
+}
+
+.ni-ul > li > .ni {
+  position: absolute;
+  left: -1.57142857em;
+  top: 0.14285714em;
+  text-align: center;
+}
+
+.ni-ul > li > .ni.lg {
+  top: 0;
+  left: -1.35714286em;
+}
+
+.ni-ul > li > .ni.circle,
+.ni-ul > li > .ni.square {
+  top: -0.19047619em;
+  left: -1.9047619em;
+}
+
+/*------------------------
+  spinning icons
+-------------------------*/
+.ni.spin {
+  -webkit-animation: nc-spin 2s infinite linear;
+  -moz-animation: nc-spin 2s infinite linear;
+  animation: nc-spin 2s infinite linear;
+}
+
+@-webkit-keyframes nc-spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+  }
+
+  100% {
+    -webkit-transform: rotate(360deg);
+  }
+}
+
+@-moz-keyframes nc-spin {
+  0% {
+    -moz-transform: rotate(0deg);
+  }
+
+  100% {
+    -moz-transform: rotate(360deg);
+  }
+}
+
+@keyframes nc-spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+
+  100% {
+    -webkit-transform: rotate(360deg);
+    -moz-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    -o-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
+/*------------------------
+  rotated/flipped icons
+-------------------------*/
+.ni.rotate-90 {
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
+  -webkit-transform: rotate(90deg);
+  -moz-transform: rotate(90deg);
+  -ms-transform: rotate(90deg);
+  -o-transform: rotate(90deg);
+  transform: rotate(90deg);
+}
+
+.ni.rotate-180 {
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
+  -webkit-transform: rotate(180deg);
+  -moz-transform: rotate(180deg);
+  -ms-transform: rotate(180deg);
+  -o-transform: rotate(180deg);
+  transform: rotate(180deg);
+}
+
+.ni.rotate-270 {
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
+  -webkit-transform: rotate(270deg);
+  -moz-transform: rotate(270deg);
+  -ms-transform: rotate(270deg);
+  -o-transform: rotate(270deg);
+  transform: rotate(270deg);
+}
+
+.ni.flip-y {
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0);
+  -webkit-transform: scale(-1, 1);
+  -moz-transform: scale(-1, 1);
+  -ms-transform: scale(-1, 1);
+  -o-transform: scale(-1, 1);
+  transform: scale(-1, 1);
+}
+
+.ni.flip-x {
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
+  -webkit-transform: scale(1, -1);
+  -moz-transform: scale(1, -1);
+  -ms-transform: scale(1, -1);
+  -o-transform: scale(1, -1);
+  transform: scale(1, -1);
+}
+
+/*------------------------
+    font icons
+-------------------------*/
+
+.ni-active-40::before {
+  content: "\ea02";
+}
+
+.ni-air-baloon::before {
+  content: "\ea03";
+}
+
+.ni-album-2::before {
+  content: "\ea04";
+}
+
+.ni-align-center::before {
+  content: "\ea05";
+}
+
+.ni-align-left-2::before {
+  content: "\ea06";
+}
+
+.ni-ambulance::before {
+  content: "\ea07";
+}
+
+.ni-app::before {
+  content: "\ea08";
+}
+
+.ni-archive-2::before {
+  content: "\ea09";
+}
+
+.ni-atom::before {
+  content: "\ea0a";
+}
+
+.ni-badge::before {
+  content: "\ea0b";
+}
+
+.ni-bag-17::before {
+  content: "\ea0c";
+}
+
+.ni-basket::before {
+  content: "\ea0d";
+}
+
+.ni-bell-55::before {
+  content: "\ea0e";
+}
+
+.ni-bold-down::before {
+  content: "\ea0f";
+}
+
+.ni-bold-left::before {
+  content: "\ea10";
+}
+
+.ni-bold-right::before {
+  content: "\ea11";
+}
+
+.ni-bold-up::before {
+  content: "\ea12";
+}
+
+.ni-bold::before {
+  content: "\ea13";
+}
+
+.ni-book-bookmark::before {
+  content: "\ea14";
+}
+
+.ni-books::before {
+  content: "\ea15";
+}
+
+.ni-box-2::before {
+  content: "\ea16";
+}
+
+.ni-briefcase-24::before {
+  content: "\ea17";
+}
+
+.ni-building::before {
+  content: "\ea18";
+}
+
+.ni-bulb-61::before {
+  content: "\ea19";
+}
+
+.ni-bullet-list-67::before {
+  content: "\ea1a";
+}
+
+.ni-bus-front-12::before {
+  content: "\ea1b";
+}
+
+.ni-button-pause::before {
+  content: "\ea1c";
+}
+
+.ni-button-play::before {
+  content: "\ea1d";
+}
+
+.ni-button-power::before {
+  content: "\ea1e";
+}
+
+.ni-calendar-grid-58::before {
+  content: "\ea1f";
+}
+
+.ni-camera-compact::before {
+  content: "\ea20";
+}
+
+.ni-caps-small::before {
+  content: "\ea21";
+}
+
+.ni-cart::before {
+  content: "\ea22";
+}
+
+.ni-chart-bar-32::before {
+  content: "\ea23";
+}
+
+.ni-chart-pie-35::before {
+  content: "\ea24";
+}
+
+.ni-chat-round::before {
+  content: "\ea25";
+}
+
+.ni-check-bold::before {
+  content: "\ea26";
+}
+
+.ni-circle-08::before {
+  content: "\ea27";
+}
+
+.ni-cloud-download-95::before {
+  content: "\ea28";
+}
+
+.ni-cloud-upload-96::before {
+  content: "\ea29";
+}
+
+.ni-compass-04::before {
+  content: "\ea2a";
+}
+
+.ni-controller::before {
+  content: "\ea2b";
+}
+
+.ni-credit-card::before {
+  content: "\ea2c";
+}
+
+.ni-curved-next::before {
+  content: "\ea2d";
+}
+
+.ni-delivery-fast::before {
+  content: "\ea2e";
+}
+
+.ni-diamond::before {
+  content: "\ea2f";
+}
+
+.ni-email-83::before {
+  content: "\ea30";
+}
+
+.ni-fat-add::before {
+  content: "\ea31";
+}
+
+.ni-fat-delete::before {
+  content: "\ea32";
+}
+
+.ni-fat-remove::before {
+  content: "\ea33";
+}
+
+.ni-favourite-28::before {
+  content: "\ea34";
+}
+
+.ni-folder-17::before {
+  content: "\ea35";
+}
+
+.ni-glasses-2::before {
+  content: "\ea36";
+}
+
+.ni-hat-3::before {
+  content: "\ea37";
+}
+
+.ni-headphones::before {
+  content: "\ea38";
+}
+
+.ni-html5::before {
+  content: "\ea39";
+}
+
+.ni-istanbul::before {
+  content: "\ea3a";
+}
+
+.ni-key-25::before {
+  content: "\ea3b";
+}
+
+.ni-laptop::before {
+  content: "\ea3c";
+}
+
+.ni-like-2::before {
+  content: "\ea3d";
+}
+
+.ni-lock-circle-open::before {
+  content: "\ea3e";
+}
+
+.ni-map-big::before {
+  content: "\ea3f";
+}
+
+.ni-mobile-button::before {
+  content: "\ea40";
+}
+
+.ni-money-coins::before {
+  content: "\ea41";
+}
+
+.ni-note-03::before {
+  content: "\ea42";
+}
+
+.ni-notification-70::before {
+  content: "\ea43";
+}
+
+.ni-palette::before {
+  content: "\ea44";
+}
+
+.ni-paper-diploma::before {
+  content: "\ea45";
+}
+
+.ni-pin-3::before {
+  content: "\ea46";
+}
+
+.ni-planet::before {
+  content: "\ea47";
+}
+
+.ni-ruler-pencil::before {
+  content: "\ea48";
+}
+
+.ni-satisfied::before {
+  content: "\ea49";
+}
+
+.ni-scissors::before {
+  content: "\ea4a";
+}
+
+.ni-send::before {
+  content: "\ea4b";
+}
+
+.ni-settings-gear-65::before {
+  content: "\ea4c";
+}
+
+.ni-settings::before {
+  content: "\ea4d";
+}
+
+.ni-single-02::before {
+  content: "\ea4e";
+}
+
+.ni-single-copy-04::before {
+  content: "\ea4f";
+}
+
+.ni-sound-wave::before {
+  content: "\ea50";
+}
+
+.ni-spaceship::before {
+  content: "\ea51";
+}
+
+.ni-square-pin::before {
+  content: "\ea52";
+}
+
+.ni-support-16::before {
+  content: "\ea53";
+}
+
+.ni-tablet-button::before {
+  content: "\ea54";
+}
+
+.ni-tag::before {
+  content: "\ea55";
+}
+
+.ni-tie-bow::before {
+  content: "\ea56";
+}
+
+.ni-time-alarm::before {
+  content: "\ea57";
+}
+
+.ni-trophy::before {
+  content: "\ea58";
+}
+
+.ni-tv-2::before {
+  content: "\ea59";
+}
+
+.ni-umbrella-13::before {
+  content: "\ea5a";
+}
+
+.ni-user-run::before {
+  content: "\ea5b";
+}
+
+.ni-vector::before {
+  content: "\ea5c";
+}
+
+.ni-watch-time::before {
+  content: "\ea5d";
+}
+
+.ni-world::before {
+  content: "\ea5e";
+}
+
+.ni-zoom-split-in::before {
+  content: "\ea5f";
+}
+
+.ni-collection::before {
+  content: "\ea60";
+}
+
+.ni-image::before {
+  content: "\ea61";
+}
+
+.ni-shop::before {
+  content: "\ea62";
+}
+
+.ni-ungroup::before {
+  content: "\ea63";
+}
+
+.ni-world-2::before {
+  content: "\ea64";
+}
+
+.ni-ui-04::before {
+  content: "\ea65";
+}
+
+/* all icon font classes list here */
diff --git a/src/assets/css/nucleo-svg.css b/src/assets/css/nucleo-svg.css
index 9b99b36..2ee0e1d 100644
--- a/src/assets/css/nucleo-svg.css
+++ b/src/assets/css/nucleo-svg.css
@@ -1,135 +1,135 @@
-/* Generated using nucleoapp.com */
-/* --------------------------------
-
-Icon colors
-
--------------------------------- */
-
-.icon {
-  display: inline-block;
-  /* icon primary color */
-  color: #111111;
-  height: 1em;
-  width: 1em;
-}
-
-.icon use {
-  /* icon secondary color - fill */
-  fill: #7ea6f6;
-}
-
-.icon.icon-outline use {
-  /* icon secondary color - stroke */
-  stroke: #7ea6f6;
-}
-
-/* --------------------------------
-
-Change icon size
-
--------------------------------- */
-
-.icon-xs {
-  height: 0.5em;
-  width: 0.5em;
-}
-
-.icon-sm {
-  height: 0.8em;
-  width: 0.8em;
-}
-
-.icon-lg {
-  height: 1.6em;
-  width: 1.6em;
-}
-
-.icon-xl {
-  height: 2em;
-  width: 2em;
-}
-
-/* -------------------------------- 
-
-Align icon and text 
-
--------------------------------- */
-
-.icon-text-aligner {
-  /* add this class to parent element that contains icon + text */
-  display: flex;
-  align-items: center;
-}
-
-.icon-text-aligner .icon {
-  color: inherit;
-  margin-right: 0.4em;
-}
-
-.icon-text-aligner .icon use {
-  color: inherit;
-  fill: currentColor;
-}
-
-.icon-text-aligner .icon.icon-outline use {
-  stroke: currentColor;
-}
-
-/* -------------------------------- 
-
-Icon reset values - used to enable color customizations
-
--------------------------------- */
-
-.icon {
-  fill: currentColor;
-  stroke: none;
-}
-
-.icon.icon-outline {
-  fill: none;
-  stroke: currentColor;
-}
-
-.icon use {
-  stroke: none;
-}
-
-.icon.icon-outline use {
-  fill: none;
-}
-
-/* -------------------------------- 
-
-Stroke effects - Nucleo outline icons
-
-- 16px icons -> up to 1px stroke (16px outline icons do not support stroke changes)
-- 24px, 32px icons -> up to 2px stroke
-- 48px, 64px icons -> up to 4px stroke
-
--------------------------------- */
-
-.icon-outline.icon-stroke-1 {
-  stroke-width: 1px;
-}
-
-.icon-outline.icon-stroke-2 {
-  stroke-width: 2px;
-}
-
-.icon-outline.icon-stroke-3 {
-  stroke-width: 3px;
-}
-
-.icon-outline.icon-stroke-4 {
-  stroke-width: 4px;
-}
-
-.icon-outline.icon-stroke-1 use,
-.icon-outline.icon-stroke-3 use {
-  -webkit-transform: translateX(0.5px) translateY(0.5px);
-  -moz-transform: translateX(0.5px) translateY(0.5px);
-  -ms-transform: translateX(0.5px) translateY(0.5px);
-  -o-transform: translateX(0.5px) translateY(0.5px);
-  transform: translateX(0.5px) translateY(0.5px);
-}
\ No newline at end of file
+/* Generated using nucleoapp.com */
+/* --------------------------------
+
+Icon colors
+
+-------------------------------- */
+
+.icon {
+  display: inline-block;
+  /* icon primary color */
+  color: #111111;
+  height: 1em;
+  width: 1em;
+}
+
+.icon use {
+  /* icon secondary color - fill */
+  fill: #7ea6f6;
+}
+
+.icon.icon-outline use {
+  /* icon secondary color - stroke */
+  stroke: #7ea6f6;
+}
+
+/* --------------------------------
+
+Change icon size
+
+-------------------------------- */
+
+.icon-xs {
+  height: 0.5em;
+  width: 0.5em;
+}
+
+.icon-sm {
+  height: 0.8em;
+  width: 0.8em;
+}
+
+.icon-lg {
+  height: 1.6em;
+  width: 1.6em;
+}
+
+.icon-xl {
+  height: 2em;
+  width: 2em;
+}
+
+/* -------------------------------- 
+
+Align icon and text 
+
+-------------------------------- */
+
+.icon-text-aligner {
+  /* add this class to parent element that contains icon + text */
+  display: flex;
+  align-items: center;
+}
+
+.icon-text-aligner .icon {
+  color: inherit;
+  margin-right: 0.4em;
+}
+
+.icon-text-aligner .icon use {
+  color: inherit;
+  fill: currentColor;
+}
+
+.icon-text-aligner .icon.icon-outline use {
+  stroke: currentColor;
+}
+
+/* -------------------------------- 
+
+Icon reset values - used to enable color customizations
+
+-------------------------------- */
+
+.icon {
+  fill: currentColor;
+  stroke: none;
+}
+
+.icon.icon-outline {
+  fill: none;
+  stroke: currentColor;
+}
+
+.icon use {
+  stroke: none;
+}
+
+.icon.icon-outline use {
+  fill: none;
+}
+
+/* -------------------------------- 
+
+Stroke effects - Nucleo outline icons
+
+- 16px icons -> up to 1px stroke (16px outline icons do not support stroke changes)
+- 24px, 32px icons -> up to 2px stroke
+- 48px, 64px icons -> up to 4px stroke
+
+-------------------------------- */
+
+.icon-outline.icon-stroke-1 {
+  stroke-width: 1px;
+}
+
+.icon-outline.icon-stroke-2 {
+  stroke-width: 2px;
+}
+
+.icon-outline.icon-stroke-3 {
+  stroke-width: 3px;
+}
+
+.icon-outline.icon-stroke-4 {
+  stroke-width: 4px;
+}
+
+.icon-outline.icon-stroke-1 use,
+.icon-outline.icon-stroke-3 use {
+  -webkit-transform: translateX(0.5px) translateY(0.5px);
+  -moz-transform: translateX(0.5px) translateY(0.5px);
+  -ms-transform: translateX(0.5px) translateY(0.5px);
+  -o-transform: translateX(0.5px) translateY(0.5px);
+  transform: translateX(0.5px) translateY(0.5px);
+}
diff --git a/src/assets/js/nav-pills.js b/src/assets/js/nav-pills.js
index 9fefc79..817fd5f 100644
--- a/src/assets/js/nav-pills.js
+++ b/src/assets/js/nav-pills.js
@@ -1,150 +1,169 @@
-/* eslint-disable */
-
-export default function setNavPills() {
-  var total = document.querySelectorAll('.nav-pills');
-
-  function initNavs() {
-    total.forEach(function (item, i) {
-      var moving_div = document.createElement('div');
-      var first_li = item.querySelector('li:first-child .nav-link');
-      var tab = first_li.cloneNode();
-      tab.innerHTML = "-";
-
-      moving_div.classList.add('moving-tab', 'position-absolute', 'nav-link');
-      moving_div.appendChild(tab);
-      item.appendChild(moving_div);
-
-      var list_length = item.getElementsByTagName("li").length;
-
-      moving_div.style.padding = '0px';
-      moving_div.style.width = item.querySelector('li:nth-child(1)').offsetWidth + 'px';
-      moving_div.style.transform = 'translate3d(0px, 0px, 0px)';
-      moving_div.style.transition = '.5s ease';
-
-      item.onmouseover = function (event) {
-        let target = getEventTarget(event);
-        let li = target.closest('li'); // get reference
-        if (li) {
-          let nodes = Array.from(li.closest('ul').children); // get array
-          let index = nodes.indexOf(li) + 1;
-          item.querySelector('li:nth-child(' + index + ') .nav-link').onclick = function () {
-            moving_div = item.querySelector('.moving-tab');
-            let sum = 0;
-            if (item.classList.contains('flex-column')) {
-              for (var j = 1; j <= nodes.indexOf(li); j++) {
-                sum += item.querySelector('li:nth-child(' + j + ')').offsetHeight;
-              }
-              moving_div.style.transform = 'translate3d(0px,' + sum + 'px, 0px)';
-              moving_div.style.height = item.querySelector('li:nth-child(' + j + ')').offsetHeight;
-            } else {
-              for (var j = 1; j <= nodes.indexOf(li); j++) {
-                sum += item.querySelector('li:nth-child(' + j + ')').offsetWidth;
-              }
-              moving_div.style.transform = 'translate3d(' + sum + 'px, 0px, 0px)';
-              moving_div.style.width = item.querySelector('li:nth-child(' + index + ')').offsetWidth + 'px';
-            }
-          }
-        }
-      }
-    });
-  }
-
-  setTimeout(function () {
-    initNavs();
-  }, 100);
-
-  // Tabs navigation resize
-
-  window.addEventListener('resize', function (event) {
-    total.forEach(function (item, i) {
-      item.querySelector('.moving-tab').remove();
-      var moving_div = document.createElement('div');
-      var tab = item.querySelector(".nav-link.active").cloneNode();
-      tab.innerHTML = "-";
-
-      moving_div.classList.add('moving-tab', 'position-absolute', 'nav-link');
-      moving_div.appendChild(tab);
-
-      item.appendChild(moving_div);
-
-      moving_div.style.padding = '0px';
-      moving_div.style.transition = '.5s ease';
-
-      let li = item.querySelector(".nav-link.active").parentElement;
-
-      if (li) {
-        let nodes = Array.from(li.closest('ul').children); // get array
-        let index = nodes.indexOf(li) + 1;
-
-        let sum = 0;
-        if (item.classList.contains('flex-column')) {
-          for (var j = 1; j <= nodes.indexOf(li); j++) {
-            sum += item.querySelector('li:nth-child(' + j + ')').offsetHeight;
-          }
-          moving_div.style.transform = 'translate3d(0px,' + sum + 'px, 0px)';
-          moving_div.style.width = item.querySelector('li:nth-child(' + index + ')').offsetWidth + 'px';
-          moving_div.style.height = item.querySelector('li:nth-child(' + j + ')').offsetHeight;
-        } else {
-          for (var j = 1; j <= nodes.indexOf(li); j++) {
-            sum += item.querySelector('li:nth-child(' + j + ')').offsetWidth;
-          }
-          moving_div.style.transform = 'translate3d(' + sum + 'px, 0px, 0px)';
-          moving_div.style.width = item.querySelector('li:nth-child(' + index + ')').offsetWidth + 'px';
-
-        }
-      }
-    });
-
-    if (window.innerWidth < 991) {
-      total.forEach(function (item, i) {
-        if (!item.classList.contains('flex-column')) {
-          item.classList.remove('flex-row');
-          item.classList.add('flex-column', 'on-resize');
-          let li = item.querySelector(".nav-link.active").parentElement;
-          let nodes = Array.from(li.closest('ul').children); // get array
-          let index = nodes.indexOf(li) + 1;
-          let sum = 0;
-          for (var j = 1; j <= nodes.indexOf(li); j++) {
-            sum += item.querySelector('li:nth-child(' + j + ')').offsetHeight;
-          }
-          var moving_div = document.querySelector('.moving-tab');
-          moving_div.style.width = item.querySelector('li:nth-child(1)').offsetWidth + 'px';
-          moving_div.style.transform = 'translate3d(0px,' + sum + 'px, 0px)';
-
-        }
-      });
-    } else {
-      total.forEach(function (item, i) {
-        if (item.classList.contains('on-resize')) {
-          item.classList.remove('flex-column', 'on-resize');
-          item.classList.add('flex-row');
-          let li = item.querySelector(".nav-link.active").parentElement;
-          let nodes = Array.from(li.closest('ul').children); // get array
-          let index = nodes.indexOf(li) + 1;
-          let sum = 0;
-          for (var j = 1; j <= nodes.indexOf(li); j++) {
-            sum += item.querySelector('li:nth-child(' + j + ')').offsetWidth;
-          }
-          var moving_div = document.querySelector('.moving-tab');
-          moving_div.style.transform = 'translate3d(' + sum + 'px, 0px, 0px)';
-          moving_div.style.width = item.querySelector('li:nth-child(' + index + ')').offsetWidth + 'px';
-        }
-      })
-    }
-  });
-
-  // Function to remove flex row on mobile devices
-  if (window.innerWidth < 991) {
-    total.forEach(function (item, i) {
-      if (item.classList.contains('flex-row')) {
-        item.classList.remove('flex-row');
-        item.classList.add('flex-column', 'on-resize');
-      }
-    });
-  }
-
-  function getEventTarget(e) {
-    e = e || window.event;
-    return e.target || e.srcElement;
-  }
-}
\ No newline at end of file
+/* eslint-disable */
+
+export default function setNavPills() {
+  var total = document.querySelectorAll(".nav-pills");
+
+  function initNavs() {
+    total.forEach(function (item, i) {
+      var moving_div = document.createElement("div");
+      var first_li = item.querySelector("li:first-child .nav-link");
+      var tab = first_li.cloneNode();
+      tab.innerHTML = "-";
+
+      moving_div.classList.add("moving-tab", "position-absolute", "nav-link");
+      moving_div.appendChild(tab);
+      item.appendChild(moving_div);
+
+      var list_length = item.getElementsByTagName("li").length;
+
+      moving_div.style.padding = "0px";
+      moving_div.style.width =
+        item.querySelector("li:nth-child(1)").offsetWidth + "px";
+      moving_div.style.transform = "translate3d(0px, 0px, 0px)";
+      moving_div.style.transition = ".5s ease";
+
+      item.onmouseover = function (event) {
+        let target = getEventTarget(event);
+        let li = target.closest("li"); // get reference
+        if (li) {
+          let nodes = Array.from(li.closest("ul").children); // get array
+          let index = nodes.indexOf(li) + 1;
+          item.querySelector("li:nth-child(" + index + ") .nav-link").onclick =
+            function () {
+              moving_div = item.querySelector(".moving-tab");
+              let sum = 0;
+              if (item.classList.contains("flex-column")) {
+                for (var j = 1; j <= nodes.indexOf(li); j++) {
+                  sum += item.querySelector(
+                    "li:nth-child(" + j + ")"
+                  ).offsetHeight;
+                }
+                moving_div.style.transform =
+                  "translate3d(0px," + sum + "px, 0px)";
+                moving_div.style.height = item.querySelector(
+                  "li:nth-child(" + j + ")"
+                ).offsetHeight;
+              } else {
+                for (var j = 1; j <= nodes.indexOf(li); j++) {
+                  sum += item.querySelector(
+                    "li:nth-child(" + j + ")"
+                  ).offsetWidth;
+                }
+                moving_div.style.transform =
+                  "translate3d(" + sum + "px, 0px, 0px)";
+                moving_div.style.width =
+                  item.querySelector("li:nth-child(" + index + ")")
+                    .offsetWidth + "px";
+              }
+            };
+        }
+      };
+    });
+  }
+
+  setTimeout(function () {
+    initNavs();
+  }, 100);
+
+  // Tabs navigation resize
+
+  window.addEventListener("resize", function (event) {
+    total.forEach(function (item, i) {
+      item.querySelector(".moving-tab").remove();
+      var moving_div = document.createElement("div");
+      var tab = item.querySelector(".nav-link.active").cloneNode();
+      tab.innerHTML = "-";
+
+      moving_div.classList.add("moving-tab", "position-absolute", "nav-link");
+      moving_div.appendChild(tab);
+
+      item.appendChild(moving_div);
+
+      moving_div.style.padding = "0px";
+      moving_div.style.transition = ".5s ease";
+
+      let li = item.querySelector(".nav-link.active").parentElement;
+
+      if (li) {
+        let nodes = Array.from(li.closest("ul").children); // get array
+        let index = nodes.indexOf(li) + 1;
+
+        let sum = 0;
+        if (item.classList.contains("flex-column")) {
+          for (var j = 1; j <= nodes.indexOf(li); j++) {
+            sum += item.querySelector("li:nth-child(" + j + ")").offsetHeight;
+          }
+          moving_div.style.transform = "translate3d(0px," + sum + "px, 0px)";
+          moving_div.style.width =
+            item.querySelector("li:nth-child(" + index + ")").offsetWidth +
+            "px";
+          moving_div.style.height = item.querySelector(
+            "li:nth-child(" + j + ")"
+          ).offsetHeight;
+        } else {
+          for (var j = 1; j <= nodes.indexOf(li); j++) {
+            sum += item.querySelector("li:nth-child(" + j + ")").offsetWidth;
+          }
+          moving_div.style.transform = "translate3d(" + sum + "px, 0px, 0px)";
+          moving_div.style.width =
+            item.querySelector("li:nth-child(" + index + ")").offsetWidth +
+            "px";
+        }
+      }
+    });
+
+    if (window.innerWidth < 991) {
+      total.forEach(function (item, i) {
+        if (!item.classList.contains("flex-column")) {
+          item.classList.remove("flex-row");
+          item.classList.add("flex-column", "on-resize");
+          let li = item.querySelector(".nav-link.active").parentElement;
+          let nodes = Array.from(li.closest("ul").children); // get array
+          let index = nodes.indexOf(li) + 1;
+          let sum = 0;
+          for (var j = 1; j <= nodes.indexOf(li); j++) {
+            sum += item.querySelector("li:nth-child(" + j + ")").offsetHeight;
+          }
+          var moving_div = document.querySelector(".moving-tab");
+          moving_div.style.width =
+            item.querySelector("li:nth-child(1)").offsetWidth + "px";
+          moving_div.style.transform = "translate3d(0px," + sum + "px, 0px)";
+        }
+      });
+    } else {
+      total.forEach(function (item, i) {
+        if (item.classList.contains("on-resize")) {
+          item.classList.remove("flex-column", "on-resize");
+          item.classList.add("flex-row");
+          let li = item.querySelector(".nav-link.active").parentElement;
+          let nodes = Array.from(li.closest("ul").children); // get array
+          let index = nodes.indexOf(li) + 1;
+          let sum = 0;
+          for (var j = 1; j <= nodes.indexOf(li); j++) {
+            sum += item.querySelector("li:nth-child(" + j + ")").offsetWidth;
+          }
+          var moving_div = document.querySelector(".moving-tab");
+          moving_div.style.transform = "translate3d(" + sum + "px, 0px, 0px)";
+          moving_div.style.width =
+            item.querySelector("li:nth-child(" + index + ")").offsetWidth +
+            "px";
+        }
+      });
+    }
+  });
+
+  // Function to remove flex row on mobile devices
+  if (window.innerWidth < 991) {
+    total.forEach(function (item, i) {
+      if (item.classList.contains("flex-row")) {
+        item.classList.remove("flex-row");
+        item.classList.add("flex-column", "on-resize");
+      }
+    });
+  }
+
+  function getEventTarget(e) {
+    e = e || window.event;
+    return e.target || e.srcElement;
+  }
+}
diff --git a/src/assets/js/tooltip.js b/src/assets/js/tooltip.js
index 20c6972..5d30a23 100644
--- a/src/assets/js/tooltip.js
+++ b/src/assets/js/tooltip.js
@@ -1,12 +1,12 @@
-import bootstrap from "bootstrap/dist/js/bootstrap";
-
-// initialization of Tooltips
-export default function setTooltip() {
-  var tooltipTriggerList = [].slice.call(
-    document.querySelectorAll('[data-bs-toggle="tooltip"]')
-  );
-  // eslint-disable-next-line no-unused-vars
-  var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
-    return new bootstrap.Tooltip(tooltipTriggerEl);
-  });
-}
+import bootstrap from "bootstrap/dist/js/bootstrap";
+
+// initialization of Tooltips
+export default function setTooltip() {
+  var tooltipTriggerList = [].slice.call(
+    document.querySelectorAll('[data-bs-toggle="tooltip"]')
+  );
+  // eslint-disable-next-line no-unused-vars
+  var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
+    return new bootstrap.Tooltip(tooltipTriggerEl);
+  });
+}
diff --git a/src/assets/scss/soft-ui-dashboard.scss b/src/assets/scss/soft-ui-dashboard.scss
index 902bcee..a54d692 100644
--- a/src/assets/scss/soft-ui-dashboard.scss
+++ b/src/assets/scss/soft-ui-dashboard.scss
@@ -1,9 +1,9 @@
 // =========================================================
-// * Soft UI Dashboard - v1.0.4
+// * Vite Soft UI Dashboard - v1.0.1
 // =========================================================
 //
 // * Product Page: https://www.creative-tim.com/product/soft-ui-dashboard
-// * Copyright 2022 Creative Tim (https://www.creative-tim.com)
+// * Copyright 2023 Creative Tim (https://www.creative-tim.com)
 //
 // Coded by www.creative-tim.com
 //
diff --git a/src/assets/scss/soft-ui-dashboard/_alert.scss b/src/assets/scss/soft-ui-dashboard/_alert.scss
index 4f149c2..9bf70fa 100644
--- a/src/assets/scss/soft-ui-dashboard/_alert.scss
+++ b/src/assets/scss/soft-ui-dashboard/_alert.scss
@@ -1,17 +1,21 @@
 @each $state, $value in $theme-gradient-colors {
   .alert-#{$state} {
-    @include gradient-directional(nth($value, 1) 0%, darken(nth($value, -1), 8%) 100%, $deg: 310deg);
+    @include gradient-directional(
+      nth($value, 1) 0%,
+      darken(nth($value, -1), 8%) 100%,
+      $deg: 310deg
+    );
   }
 }
 
-.btn-close{
-  &:focus{
+.btn-close {
+  &:focus {
     box-shadow: none;
   }
 }
 
-.alert-dismissible{
-  .btn-close{
+.alert-dismissible {
+  .btn-close {
     background-image: none;
   }
 }
diff --git a/src/assets/scss/soft-ui-dashboard/_avatars.scss b/src/assets/scss/soft-ui-dashboard/_avatars.scss
index 8e6e070..f7c3175 100644
--- a/src/assets/scss/soft-ui-dashboard/_avatars.scss
+++ b/src/assets/scss/soft-ui-dashboard/_avatars.scss
@@ -5,31 +5,30 @@
 // General styles
 
 .avatar {
-	color: $white;
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	font-size: $avatar-font-size;
-	border-radius: $border-radius-lg;
-	height: $avatar-height;
-	width: $avatar-width;
-  transition: all .2s ease-in-out;
+  color: $white;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: $avatar-font-size;
+  border-radius: $border-radius-lg;
+  height: $avatar-height;
+  width: $avatar-width;
+  transition: all 0.2s ease-in-out;
+
+  img {
+    width: 100%;
+  }
 
+  &.rounded-circle {
     img {
-    	width: 100%;
-    }
-
-	&.rounded-circle {
-		img {
-			@extend .rounded-circle;
-		}
-	}
-
-    + .avatar-content {
-    	display: inline-block;
-    	margin-left: $avatar-content-margin;
+      @extend .rounded-circle;
     }
+  }
 
+  + .avatar-content {
+    display: inline-block;
+    margin-left: $avatar-content-margin;
+  }
 
   &.avatar-raised {
     margin-top: -($avatar-height * 0.5);
@@ -37,7 +36,6 @@
 
   &.avatar-scale-up:hover {
     transform: scale(1.2);
-
   }
 }
 
@@ -48,12 +46,11 @@
   }
 }
 
-
 // Avatar size variations
 
 .avatar-xxl {
-	width: $avatar-xxl-width !important;
-	height: $avatar-xxl-height !important;
+  width: $avatar-xxl-width !important;
+  height: $avatar-xxl-height !important;
 
   &.avatar-raised {
     margin-top: -($avatar-xxl-height * 0.5);
@@ -61,8 +58,8 @@
 }
 
 .avatar-xl {
-	width: $avatar-xl-width !important;
-	height: $avatar-xl-height !important;
+  width: $avatar-xl-width !important;
+  height: $avatar-xl-height !important;
 
   &.avatar-raised {
     margin-top: -($avatar-xl-height * 0.5);
@@ -70,9 +67,9 @@
 }
 
 .avatar-lg {
-	width: $avatar-lg-width !important;
-	height: $avatar-lg-height !important;
-	font-size: $font-size-sm;
+  width: $avatar-lg-width !important;
+  height: $avatar-lg-height !important;
+  font-size: $font-size-sm;
 
   &.avatar-raised {
     margin-top: -($avatar-lg-height * 0.5);
@@ -80,9 +77,9 @@
 }
 
 .avatar-sm {
-	width: $avatar-sm-width !important;
-	height: $avatar-sm-height !important;
-	font-size: $font-size-sm;
+  width: $avatar-sm-width !important;
+  height: $avatar-sm-height !important;
+  font-size: $font-size-sm;
 
   &.avatar-raised {
     margin-top: -($avatar-sm-height * 0.5);
@@ -90,9 +87,9 @@
 }
 
 .avatar-xs {
-	width: $avatar-xs-width !important;
-	height: $avatar-xs-height !important;
-	font-size: $font-size-xs;
+  width: $avatar-xs-width !important;
+  height: $avatar-xs-height !important;
+  font-size: $font-size-xs;
 
   &.avatar-raised {
     margin-top: -($avatar-xs-height * 0.5);
@@ -106,18 +103,17 @@
 // General styles
 
 .avatar-group {
-	.avatar {
-		position: relative;
-		z-index: $avatar-group-zindex;
-		border: $avatar-group-border solid $card-bg;
-
-		&:hover {
-			z-index: $avatar-group-zindex-hover;
-		}
-	}
+  .avatar {
+    position: relative;
+    z-index: $avatar-group-zindex;
+    border: $avatar-group-border solid $card-bg;
 
-	.avatar + .avatar {
-		margin-left: $avatar-group-double;
+    &:hover {
+      z-index: $avatar-group-zindex-hover;
+    }
+  }
 
-	}
+  .avatar + .avatar {
+    margin-left: $avatar-group-double;
+  }
 }
diff --git a/src/assets/scss/soft-ui-dashboard/_breadcrumbs.scss b/src/assets/scss/soft-ui-dashboard/_breadcrumbs.scss
index f6bf348..d1c4440 100644
--- a/src/assets/scss/soft-ui-dashboard/_breadcrumbs.scss
+++ b/src/assets/scss/soft-ui-dashboard/_breadcrumbs.scss
@@ -3,46 +3,44 @@
 //
 
 .breadcrumb-item {
-    font-size: $font-size-sm;
-    &.text-white{
-      &::before {
-          color: $white;
-      }
+  font-size: $font-size-sm;
+  &.text-white {
+    &::before {
+      color: $white;
     }
-
+  }
 }
 
 .breadcrumb-dark {
-    background-color: $breadcrumb-dark-bg;
+  background-color: $breadcrumb-dark-bg;
 
-    .breadcrumb-item {
-        font-weight: 600;
+  .breadcrumb-item {
+    font-weight: 600;
 
-        a {
-            color: $breadcrumb-dark-color;
+    a {
+      color: $breadcrumb-dark-color;
 
-            &:hover {
-                color: $breadcrumb-dark-hover-color;
-            }
-        }
+      &:hover {
+        color: $breadcrumb-dark-hover-color;
+      }
+    }
 
-        + .breadcrumb-item {
-            &::before {
-                color: $breadcrumb-dark-divider-color;
-            }
-        }
+    + .breadcrumb-item {
+      &::before {
+        color: $breadcrumb-dark-divider-color;
+      }
+    }
 
-        &.active {
-            color: $breadcrumb-dark-active-color;
-        }
+    &.active {
+      color: $breadcrumb-dark-active-color;
     }
+  }
 }
 
-
 // Links
 
 .breadcrumb-links {
-    padding: 0;
-    margin: 0;
-    background: transparent;
+  padding: 0;
+  margin: 0;
+  background: transparent;
 }
diff --git a/src/assets/scss/soft-ui-dashboard/_buttons.scss b/src/assets/scss/soft-ui-dashboard/_buttons.scss
index b700950..de7c0f0 100644
--- a/src/assets/scss/soft-ui-dashboard/_buttons.scss
+++ b/src/assets/scss/soft-ui-dashboard/_buttons.scss
@@ -19,7 +19,7 @@
   }
 
   @include hover {
-    &:not(.btn-icon-only){
+    &:not(.btn-icon-only) {
       box-shadow: $btn-hover-box-shadow;
       transform: $btn-hover-transform;
     }
@@ -31,12 +31,12 @@
     }
   }
 
-  &.btn-link{
+  &.btn-link {
     box-shadow: none;
     font-weight: $btn-font-weight;
 
     &:hover,
-    &:focus{
+    &:focus {
       box-shadow: none;
     }
   }
@@ -90,17 +90,17 @@
   }
 }
 
-.btn-check{
-  &:checked{
-    +.btn{
-      svg{
-        .color-background{
+.btn-check {
+  &:checked {
+    + .btn {
+      svg {
+        .color-background {
           fill: $white;
         }
       }
-      &:hover{
-        svg{
-          .color-background{
+      &:hover {
+        svg {
+          .color-background {
             fill: $dark;
           }
         }
@@ -121,7 +121,7 @@
   }
 }
 
-.icon-move-left{
+.icon-move-left {
   i {
     transition: $btn-icon-transition;
   }
@@ -169,9 +169,9 @@
   .btn-outline-#{$color} {
     box-shadow: none;
     @include hover {
-      &:not(.active){
+      &:not(.active) {
         background-color: transparent;
-        opacity: .75;
+        opacity: 0.75;
         box-shadow: none;
         color: $value;
       }
@@ -179,9 +179,9 @@
   }
 }
 
-.btn-outline-white{
-  border-color: rgba($white, .75);
-  background: rgba($white, .1);
+.btn-outline-white {
+  border-color: rgba($white, 0.75);
+  background: rgba($white, 0.1);
 }
 
 @each $color, $value in $btn-font-colors {
@@ -198,7 +198,7 @@
 
 @each $color, $value in $theme-colors {
   .btn-#{$color},
-  .btn.bg-gradient-#{$color}{
+  .btn.bg-gradient-#{$color} {
     //box-shadow: $btn-box-shadow-values rgba($value, .2);
 
     @include hover {
diff --git a/src/assets/scss/soft-ui-dashboard/_cards.scss b/src/assets/scss/soft-ui-dashboard/_cards.scss
index bd71e7c..a4fe0e0 100644
--- a/src/assets/scss/soft-ui-dashboard/_cards.scss
+++ b/src/assets/scss/soft-ui-dashboard/_cards.scss
@@ -36,4 +36,4 @@
   }
 }
 
-@import 'cards/card-background';
+@import "cards/card-background";
diff --git a/src/assets/scss/soft-ui-dashboard/_dark-version.scss b/src/assets/scss/soft-ui-dashboard/_dark-version.scss
index c60004a..da01876 100644
--- a/src/assets/scss/soft-ui-dashboard/_dark-version.scss
+++ b/src/assets/scss/soft-ui-dashboard/_dark-version.scss
@@ -1,7 +1,7 @@
 .dark-version {
   background-color: $dark-version-bg-color !important;
 
-  > div[class*='bg-']{
+  > div[class*="bg-"] {
     background-color: $dark-version-bg-color !important;
   }
 
@@ -54,7 +54,7 @@
           .nav-item {
             .nav-link:before {
               background: $white !important;
-              opacity: .8;
+              opacity: 0.8;
             }
 
             &.active {
@@ -83,7 +83,11 @@
   }
 
   .bg-gradient-dark {
-    background-image: linear-gradient(195deg, $dark-gradient-dark, $dark-gradient-state-dark);
+    background-image: linear-gradient(
+      195deg,
+      $dark-gradient-dark,
+      $dark-gradient-state-dark
+    );
   }
 
   .card,
@@ -99,7 +103,7 @@
 
     p {
       color: $white !important;
-      opacity: .6;
+      opacity: 0.6;
     }
   }
 
@@ -110,10 +114,9 @@
 
   .swal2-html-container {
     color: $white !important;
-    opacity: .6;
+    opacity: 0.6;
   }
 
-
   // navbar on scroll - dark mode
 
   .navbar {
@@ -122,7 +125,7 @@
         .breadcrumb-item,
         h6 {
           & a {
-            color: $dark !important; 
+            color: $dark !important;
           }
           color: $dark !important;
         }
@@ -135,21 +138,26 @@
       color: $white !important;
     }
   }
-  
-
-
-    h1, .h1,
-    h2, .h2,
-    h3, .h3,
-    h4, .h4,
-    h5, .h5,
-    h6:not(.font-weight-bolder), .h6,
-    a:not(.dropdown-item):not(.choices__item):not(.leaflet-control-zoom-in):not(.leaflet-control-zoom-out):not(.btn):not(.nav-link):not(.fixed-plugin-button):not(.opacity-5),
-    .table thead tr th,
-    .kanban-title-board {
-      color: $white !important;
-    }
 
+  h1,
+  .h1,
+  h2,
+  .h2,
+  h3,
+  .h3,
+  h4,
+  .h4,
+  h5,
+  .h5,
+  h6:not(.font-weight-bolder),
+  .h6,
+  a:not(.dropdown-item):not(.choices__item):not(.leaflet-control-zoom-in):not(
+      .leaflet-control-zoom-out
+    ):not(.btn):not(.nav-link):not(.fixed-plugin-button):not(.opacity-5),
+  .table thead tr th,
+  .kanban-title-board {
+    color: $white !important;
+  }
 
   .input-group {
     &.input-group-dynamic,
@@ -179,7 +187,7 @@
     .accordion-button {
       border-color: $dark-version-border-color !important;
       color: $white;
-      opacity: .8;
+      opacity: 0.8;
     }
   }
 
@@ -195,7 +203,7 @@
   .list-group-item,
   .multisteps-form__panel {
     background-color: transparent !important;
-    border-color: rgba(255, 255, 255, .15) !important;
+    border-color: rgba(255, 255, 255, 0.15) !important;
   }
 
   .nav {
@@ -223,7 +231,7 @@
 
     p {
       color: $white !important;
-      opacity: .6;
+      opacity: 0.6;
     }
   }
 
@@ -245,13 +253,12 @@
     border-color: $fc-theme-standard-dark-border-color;
   }
 
-
   // Datatable changes
-  .dataTable-sorter::after{
+  .dataTable-sorter::after {
     border-bottom-color: $white;
   }
 
-  .dataTable-sorter::before{
+  .dataTable-sorter::before {
     border-top-color: $white;
   }
 
@@ -260,11 +267,12 @@
     stroke: $light;
   }
 
-  .ql-snow .ql-fill, .ql-snow .ql-stroke.ql-fill{
+  .ql-snow .ql-fill,
+  .ql-snow .ql-stroke.ql-fill {
     fill: $light;
   }
 
-  .ql-toolbar.ql-snow .ql-picker-label{
+  .ql-toolbar.ql-snow .ql-picker-label {
     color: $light;
   }
 
@@ -273,7 +281,7 @@
       .nav-item {
         .nav-link {
           color: $white;
-          opacity: .8;
+          opacity: 0.8;
 
           &[data-bs-toggle="collapse"]:after {
             color: $white;
@@ -290,7 +298,7 @@
             .nav-item {
               .nav-link {
                 color: $white;
-                opacity: .6;
+                opacity: 0.6;
 
                 &.active {
                   opacity: 1;
diff --git a/src/assets/scss/soft-ui-dashboard/_dropdown.scss b/src/assets/scss/soft-ui-dashboard/_dropdown.scss
index 1258f95..4db1d7b 100644
--- a/src/assets/scss/soft-ui-dashboard/_dropdown.scss
+++ b/src/assets/scss/soft-ui-dashboard/_dropdown.scss
@@ -10,49 +10,49 @@
 
     .dropdown-toggle {
       &:after,
-      &:before{
+      &:before {
         font: normal normal normal 14px/1 FontAwesome;
         border: none;
         vertical-align: middle;
         font-weight: $font-weight-bold;
       }
-      &.show{
+      &.show {
         &:after,
-        &:before{
+        &:before {
           transform: $dropdown-toggle-arrow-transform;
         }
       }
       &:after,
-      &:before{
-         transition: $dropdown-toggle-arrow-transition;
+      &:before {
+        transition: $dropdown-toggle-arrow-transition;
       }
     }
   }
 
   .dropdown,
-  .dropup{
-    .dropdown-menu{
+  .dropup {
+    .dropdown-menu {
       transition: $dropdown-transition;
     }
 
     .dropdown-toggle {
-      &:after{
+      &:after {
         content: "\f107";
       }
     }
   }
 
-  .dropstart{
+  .dropstart {
     .dropdown-toggle {
-      &:before{
+      &:before {
         content: "\f104";
       }
     }
   }
 
-  .dropend{
+  .dropend {
     .dropdown-toggle {
-      &:after{
+      &:after {
         content: "\f105";
       }
     }
@@ -69,7 +69,7 @@
       transform: $dropdown-transform;
       -webkit-backface-visibility: hidden;
       backface-visibility: hidden;
-      will-change: transform,box-shadow;
+      will-change: transform, box-shadow;
     }
 
     &.dropdown-hover:hover > .dropdown-menu,
@@ -87,7 +87,7 @@
 
     &.dropdown-hover {
       &:after {
-        content: '';
+        content: "";
         position: absolute;
         left: 0;
         bottom: $dropdown-hover-after-bottom-pos;
@@ -120,7 +120,8 @@
   }
 
   .dropdown-item {
-    transition: background-color $dropdown-transition-time, color $dropdown-transition-time;
+    transition: background-color $dropdown-transition-time,
+      color $dropdown-transition-time;
   }
 }
 
@@ -137,7 +138,7 @@
         transition: $dropdown-transition;
         -webkit-backface-visibility: hidden;
         backface-visibility: hidden;
-        will-change: transform,box-shadow;
+        will-change: transform, box-shadow;
         box-shadow: $dropdown-box-shadow;
 
         &:before {
@@ -187,7 +188,7 @@
       transition: $dropdown-transition;
       -webkit-backface-visibility: hidden;
       backface-visibility: hidden;
-      will-change: transform,box-shadow;
+      will-change: transform, box-shadow;
       box-shadow: $dropdown-box-shadow;
 
       &:before {
@@ -223,12 +224,10 @@
     }
   }
 
-
-
   .dropdown.nav-item .dropdown-menu-animation {
     display: block;
     height: 0;
-    transition: all .35s ease;
+    transition: all 0.35s ease;
     padding-top: 0 !important;
     padding-bottom: 0 !important;
     opacity: 0;
@@ -244,7 +243,7 @@
       .dropdown-menu.show {
         transform: $dropdown-transform-responsive-show;
         box-shadow: none;
-        margin-bottom: 1rem;  
+        margin-bottom: 1rem;
       }
     }
   }
@@ -269,12 +268,12 @@
       left: 0;
       top: 0;
       z-index: -1;
-      transition: left .35s ease;
+      transition: left 0.35s ease;
     }
-    &.dropdown-menu-end{
+    &.dropdown-menu-end {
       right: 0 !important;
       left: auto !important;
-      &:before{
+      &:before {
         right: $dropdown-animation-arrow-left-position;
         left: auto;
       }
@@ -292,7 +291,7 @@
   }
 }
 
-.dropdown .dropdown-menu .dropdown-item+.dropdown-menu {
+.dropdown .dropdown-menu .dropdown-item + .dropdown-menu {
   right: $dropdown-subitem-position-right;
   left: auto;
   top: 0;
@@ -318,7 +317,7 @@
 }
 
 @include media-breakpoint-down(xl) {
- .dropdown-lg-responsive {
-   min-width: $dropdown-lg-width-responsive;
- }
+  .dropdown-lg-responsive {
+    min-width: $dropdown-lg-width-responsive;
+  }
 }
diff --git a/src/assets/scss/soft-ui-dashboard/_dropup.scss b/src/assets/scss/soft-ui-dashboard/_dropup.scss
index f18048c..b40723a 100644
--- a/src/assets/scss/soft-ui-dashboard/_dropup.scss
+++ b/src/assets/scss/soft-ui-dashboard/_dropup.scss
@@ -13,9 +13,9 @@
     transform: $dropup-transform;
     -webkit-backface-visibility: hidden;
     backface-visibility: hidden;
-    will-change: transform,box-shadow;
+    will-change: transform, box-shadow;
 
-    &.show{
+    &.show {
       pointer-events: auto;
       transform: $dropup-transform-show;
       opacity: 1;
@@ -38,4 +38,4 @@
       transition: $dropup-animation-arrow-transition;
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/assets/scss/soft-ui-dashboard/_fixed-plugin.scss b/src/assets/scss/soft-ui-dashboard/_fixed-plugin.scss
index 1bf218a..bac37ab 100644
--- a/src/assets/scss/soft-ui-dashboard/_fixed-plugin.scss
+++ b/src/assets/scss/soft-ui-dashboard/_fixed-plugin.scss
@@ -1,5 +1,5 @@
-.fixed-plugin{
-  .fixed-plugin-button{
+.fixed-plugin {
+  .fixed-plugin-button {
     background: $white;
     border-radius: $fixed-plugin-radius;
     bottom: $fixed-plugin-bottom;
@@ -8,25 +8,25 @@
     z-index: $fixed-plugin-button-z-index;
     box-shadow: $fixed-plugin-box-shadow;
     cursor: pointer;
-    i{
+    i {
       pointer-events: none;
     }
   }
-  .card{
+  .card {
     position: fixed !important;
     right: -$fixed-plugin-card-width;
     top: 0;
     height: 100%;
-    left: auto!important;
+    left: auto !important;
     transform: unset !important;
     width: $fixed-plugin-card-width;
     border-radius: 0;
     padding: 0 10px;
-    transition: .2s ease;
+    transition: 0.2s ease;
     z-index: $fixed-plugin-card-z-index;
   }
 
-  .badge{
+  .badge {
     border: 1px solid $white;
     border-radius: 50%;
     cursor: pointer;
@@ -37,14 +37,14 @@
     width: 23px;
     transition: $transition-base;
     &:hover,
-    &.active{
+    &.active {
       border-color: $dark;
     }
   }
 
-  .btn.bg-gradient-primary:not(:disabled):not(.disabled){
+  .btn.bg-gradient-primary:not(:disabled):not(.disabled) {
     border: 1px solid transparent;
-    &:not(.active){
+    &:not(.active) {
       background-color: transparent;
       background-image: none;
       border: 1px solid $primary;
@@ -52,8 +52,8 @@
     }
   }
 
-  &.show{
-    .card{
+  &.show {
+    .card {
       right: 0;
     }
   }
diff --git a/src/assets/scss/soft-ui-dashboard/_forms.scss b/src/assets/scss/soft-ui-dashboard/_forms.scss
index ecb3d4e..29a0957 100644
--- a/src/assets/scss/soft-ui-dashboard/_forms.scss
+++ b/src/assets/scss/soft-ui-dashboard/_forms.scss
@@ -10,31 +10,29 @@
     margin-left: 0;
   }
 
-	.form-control {
-		box-shadow: none;
+  .form-control {
+    box-shadow: none;
     background-image: none;
 
-		&:not(:first-child) {
-	    border-left: 0;
-	    padding-left: 0;
-		}
-		&:not(:last-child) {
-			border-right: 0;
-			padding-right: 0;
-		}
+    &:not(:first-child) {
+      border-left: 0;
+      padding-left: 0;
+    }
+    &:not(:last-child) {
+      border-right: 0;
+      padding-right: 0;
+    }
 
     & + .input-group-text {
       border-left: 0;
       border-right: $input-border-width solid $input-border-color;
     }
-	}
+  }
 
   .input-group-text {
     border-right: 0;
   }
 
-
-
   &.focused {
     box-shadow: $input-focus-box-shadow;
   }
@@ -44,7 +42,6 @@
   }
 }
 
-
 .form-group {
   margin-bottom: 1rem;
 }
diff --git a/src/assets/scss/soft-ui-dashboard/_gradients.scss b/src/assets/scss/soft-ui-dashboard/_gradients.scss
index 7d9ca97..22425a7 100644
--- a/src/assets/scss/soft-ui-dashboard/_gradients.scss
+++ b/src/assets/scss/soft-ui-dashboard/_gradients.scss
@@ -1,18 +1,29 @@
 @each $prop, $value in $theme-gradient-colors {
   .bg-gradient-#{$prop} {
-    @include gradient-directional(nth($value, 1) 0%, nth($value, -1) 100%, $deg: 310deg);
+    @include gradient-directional(
+      nth($value, 1) 0%,
+      nth($value, -1) 100%,
+      $deg: 310deg
+    );
   }
 }
 
 @each $prop, $value in $theme-colors {
   .bg-gradient-faded-#{$prop} {
-    background-image: radial-gradient(370px circle at 80% 50%,rgba($value, .6) 0,darken($value, 10%) 100%)
+    background-image: radial-gradient(
+      370px circle at 80% 50%,
+      rgba($value, 0.6) 0,
+      darken($value, 10%) 100%
+    );
   }
 }
 
-
 @each $prop, $value in $theme-colors {
-  .bg-gradient-faded-#{$prop}-vertical{
-    background-image: radial-gradient(200px circle at 50% 70%, rgba($value, .3) 0, $value 100%);
+  .bg-gradient-faded-#{$prop}-vertical {
+    background-image: radial-gradient(
+      200px circle at 50% 70%,
+      rgba($value, 0.3) 0,
+      $value 100%
+    );
   }
 }
diff --git a/src/assets/scss/soft-ui-dashboard/_info-areas.scss b/src/assets/scss/soft-ui-dashboard/_info-areas.scss
index fb0f312..4deb0f2 100644
--- a/src/assets/scss/soft-ui-dashboard/_info-areas.scss
+++ b/src/assets/scss/soft-ui-dashboard/_info-areas.scss
@@ -22,7 +22,7 @@
 
   i {
     top: $info-icon-top-xxs;
-    font-size: .5rem;
+    font-size: 0.5rem;
   }
 }
 
@@ -32,7 +32,7 @@
 
   i {
     top: $info-icon-top-xs;
-    font-size: .5rem;
+    font-size: 0.5rem;
   }
 }
 
@@ -42,7 +42,7 @@
 
   i {
     top: $info-icon-top-sm;
-    font-size: .65rem;
+    font-size: 0.65rem;
   }
 }
 
diff --git a/src/assets/scss/soft-ui-dashboard/_misc.scss b/src/assets/scss/soft-ui-dashboard/_misc.scss
index 0539600..58850eb 100644
--- a/src/assets/scss/soft-ui-dashboard/_misc.scss
+++ b/src/assets/scss/soft-ui-dashboard/_misc.scss
@@ -34,7 +34,7 @@
 .navbar-blur {
   -webkit-backdrop-filter: $blur-backdrop-filter;
   backdrop-filter: $blur-backdrop-filter;
-  background-color: rgba($white, .58) !important;
+  background-color: rgba($white, 0.58) !important;
 }
 
 .blur-section {
@@ -42,7 +42,11 @@
   backdrop-filter: $blur-backdrop-filter;
 
   &.blur-gradient-primary {
-    @include gradient-directional(rgba($primary-gradient, .95) 0%, rgba($primary-gradient-state, .95) 100%, $deg: 310deg);
+    @include gradient-directional(
+      rgba($primary-gradient, 0.95) 0%,
+      rgba($primary-gradient-state, 0.95) 100%,
+      $deg: 310deg
+    );
   }
 }
 
@@ -162,7 +166,7 @@ hr.horizontal {
   border-top-left-radius: 0;
 }
 
-.border-dashed{
+.border-dashed {
   border-style: dashed;
 }
 
@@ -170,7 +174,6 @@ hr.horizontal {
   z-index: $zindex-sticky;
 }
 
-
 // moving waves animation
 .waves {
   position: $waves-position;
@@ -274,9 +277,8 @@ hr.horizontal {
   }
 }
 
-
 // Background Sizes
-.bg-cover{
+.bg-cover {
   background-size: cover;
 }
 
@@ -292,15 +294,14 @@ hr.horizontal {
   opacity: $mask-opacity;
 }
 
-
 // Cursor Pointer Class
 .cursor-pointer {
   cursor: pointer;
 }
 
 // Translate 50% Class
-.transform-translate-50{
-  transform: translate(0,-50%)
+.transform-translate-50 {
+  transform: translate(0, -50%);
 }
 
 // VR Pages
diff --git a/src/assets/scss/soft-ui-dashboard/_nav.scss b/src/assets/scss/soft-ui-dashboard/_nav.scss
index b55745d..56620cd 100644
--- a/src/assets/scss/soft-ui-dashboard/_nav.scss
+++ b/src/assets/scss/soft-ui-dashboard/_nav.scss
@@ -26,8 +26,8 @@
     &.nav-pills-primary {
       background: $white;
       color: $white;
-      .nav-link{
-        &.active{
+      .nav-link {
+        &.active {
           color: $white;
         }
       }
@@ -41,8 +41,8 @@
     &.nav-pills-info {
       background: $white;
       color: $white;
-      .nav-link{
-        &.active{
+      .nav-link {
+        &.active {
           color: $white;
         }
       }
@@ -56,8 +56,8 @@
     &.nav-pills-success {
       background: $white;
       color: $white;
-      .nav-link{
-        &.active{
+      .nav-link {
+        &.active {
           color: $white;
         }
       }
@@ -71,8 +71,8 @@
     &.nav-pills-warning {
       background: $white;
       color: $white;
-      .nav-link{
-        &.active{
+      .nav-link {
+        &.active {
           color: $white;
         }
       }
@@ -86,8 +86,8 @@
     &.nav-pills-danger {
       background: $white;
       color: $white;
-      .nav-link{
-        &.active{
+      .nav-link {
+        &.active {
           color: $white;
         }
       }
@@ -101,8 +101,8 @@
     &.nav-pills-dark {
       background: $white;
       color: $white;
-      .nav-link{
-        &.active{
+      .nav-link {
+        &.active {
           color: $white;
         }
       }
@@ -113,7 +113,7 @@
         }
       }
     }
-    .nav-item{
+    .nav-item {
       z-index: 3;
     }
   }
@@ -122,7 +122,7 @@
   z-index: 1 !important;
   .nav-link {
     color: $white;
-    transition: .2s ease;
+    transition: 0.2s ease;
     border-radius: $nav-pills-link-border-radius;
     &.active {
       color: $white;
diff --git a/src/assets/scss/soft-ui-dashboard/_navbar-vertical.scss b/src/assets/scss/soft-ui-dashboard/_navbar-vertical.scss
index d6e6000..de5f331 100644
--- a/src/assets/scss/soft-ui-dashboard/_navbar-vertical.scss
+++ b/src/assets/scss/soft-ui-dashboard/_navbar-vertical.scss
@@ -85,7 +85,8 @@
             min-height: 100%;
             padding-left: 0;
             padding-right: 0; // Target IE 10 & 11
-            @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+            @media all and (-ms-high-contrast: none),
+              (-ms-high-contrast: active) {
               min-height: none;
               height: 100%;
             }
@@ -171,7 +172,11 @@
   @each $color, $value in $theme-colors {
     &[data-color="#{$color}"] {
       .navbar-nav > .nav-item > .nav-link.active .icon {
-        @include gradient-directional(nth(#{$value}, 1) 0%, nth(#{$value}, -1) 100%, $deg: 310deg);
+        @include gradient-directional(
+          nth(#{$value}, 1) 0%,
+          nth(#{$value}, -1) 100%,
+          $deg: 310deg
+        );
       }
     }
   }
@@ -268,7 +273,7 @@
     }
 
     .sidenav {
-      &.fixed-start~.main-content {
+      &.fixed-start ~ .main-content {
         margin-left: 0 !important;
       }
     }
@@ -292,7 +297,11 @@
         }
 
         .icon {
-          @include gradient-directional(nth($light, 1) 0%, nth($light, -1) 100%, $deg: 310deg);
+          @include gradient-directional(
+            nth($light, 1) 0%,
+            nth($light, -1) 100%,
+            $deg: 310deg
+          );
         }
       }
     }
@@ -309,7 +318,11 @@
     background-color: $white;
 
     .icon {
-      @include gradient-directional(nth($primary, 1) 0%, nth($primary, -1) 100%, $deg: 310deg);
+      @include gradient-directional(
+        nth($primary, 1) 0%,
+        nth($primary, -1) 100%,
+        $deg: 310deg
+      );
 
       svg {
         .color-background,
@@ -322,7 +335,8 @@
 }
 
 .navbar-main {
-  transition: box-shadow $transition-base-time ease-in, background-color $transition-base-time ease-in;
+  transition: box-shadow $transition-base-time ease-in,
+    background-color $transition-base-time ease-in;
 
   &.fixed-top {
     width: calc(100% - (#{$navbar-vertical-open-width} + #{$spacer * 1.5} * 3));
@@ -341,11 +355,11 @@
       font-variant: normal;
       text-rendering: auto;
       -webkit-font-smoothing: antialiased;
-      font-family: 'Font Awesome 5 Free';
+      font-family: "Font Awesome 5 Free";
       font-weight: 700;
       content: "\f107";
       margin-left: auto;
-      color: rgba($dark-gradient-state,0.5);
+      color: rgba($dark-gradient-state, 0.5);
       @include transition($transition-base);
     }
     // Expanded
@@ -369,7 +383,7 @@
               position: relative;
               background-color: transparent;
               box-shadow: none;
-              color: rgba($dark-gradient-state,0.5);
+              color: rgba($dark-gradient-state, 0.5);
               margin-left: $navbar-vertical-collapse-margin-left;
 
               &:before {
diff --git a/src/assets/scss/soft-ui-dashboard/_navbar.scss b/src/assets/scss/soft-ui-dashboard/_navbar.scss
index a273ede..b677ff0 100644
--- a/src/assets/scss/soft-ui-dashboard/_navbar.scss
+++ b/src/assets/scss/soft-ui-dashboard/_navbar.scss
@@ -19,14 +19,14 @@
 
   &.navbar-transparent {
     .nav-link {
-      &, i {
+      &,
+      i {
         color: $white;
       }
 
-
       &:hover,
       &:focus {
-        color: rgba($white, .75);
+        color: rgba($white, 0.75);
       }
     }
 
@@ -38,40 +38,39 @@
       }
     }
 
-    .navbar-collapse{
+    .navbar-collapse {
       border-radius: $border-radius-xl;
     }
   }
 
   &.navbar-dark {
     .navbar-collapse.show,
-    .navbar-collapse.collapsing
-    {
-      .dropdown-header.text-dark{
+    .navbar-collapse.collapsing {
+      .dropdown-header.text-dark {
         color: $white !important;
       }
     }
   }
-  .sidenav-toggler-inner{
+  .sidenav-toggler-inner {
     width: $sidenav-toggler-width;
-    .sidenav-toggler-line{
+    .sidenav-toggler-line {
       transition: $sidenav-toggler-line-transition;
       background: $body-color;
       border-radius: $border-radius-xs;
       position: relative;
       display: block;
       height: $sidenav-toggler-line-height;
-      &:not(:last-child){
+      &:not(:last-child) {
         margin-bottom: $sidenav-toggler-line-margin-bottom;
       }
     }
   }
-  .g-sidenav-show.g-sidenav-pinned &{
-    .sidenav-toggler-inner{
+  .g-sidenav-show.g-sidenav-pinned & {
+    .sidenav-toggler-inner {
       .sidenav-toggler-line:first-child,
       .sidenav-toggler-line:last-child {
-          width: $sidenav-toggler-line-active-width;
-          transform: $sidenav-toggler-line-transform;
+        width: $sidenav-toggler-line-active-width;
+        transform: $sidenav-toggler-line-transform;
       }
     }
   }
@@ -79,9 +78,9 @@
 
 .navbar-light {
   background-color: $white !important;
-  .navbar-toggler{
+  .navbar-toggler {
     border: none;
-    &:focus{
+    &:focus {
       box-shadow: none;
     }
   }
@@ -149,7 +148,7 @@
         }
       }
     }
-  
+
     .g-sidenav-show & {
       &:not(.sidenav).navbar-main,
       &:not(.mixed-navbar) {
@@ -162,7 +161,6 @@
           flex-direction: row;
         }
       }
-
     }
   }
 
diff --git a/src/assets/scss/soft-ui-dashboard/_pagination.scss b/src/assets/scss/soft-ui-dashboard/_pagination.scss
index b11ef6e..dc17f12 100644
--- a/src/assets/scss/soft-ui-dashboard/_pagination.scss
+++ b/src/assets/scss/soft-ui-dashboard/_pagination.scss
@@ -40,7 +40,6 @@
   }
 }
 
-
 // Colors
 .pagination {
   @each $name, $value in $theme-gradient-colors {
@@ -49,7 +48,11 @@
         &,
         &:focus,
         &:hover {
-          @include gradient-directional(nth($value, 1) 0%, nth($value, -1) 100%, $deg: 310deg);
+          @include gradient-directional(
+            nth($value, 1) 0%,
+            nth($value, -1) 100%,
+            $deg: 310deg
+          );
           border: none;
         }
       }
diff --git a/src/assets/scss/soft-ui-dashboard/_rtl.scss b/src/assets/scss/soft-ui-dashboard/_rtl.scss
index 05bd3ff..8968289 100644
--- a/src/assets/scss/soft-ui-dashboard/_rtl.scss
+++ b/src/assets/scss/soft-ui-dashboard/_rtl.scss
@@ -91,7 +91,10 @@
       border-right: $input-border-width solid $input-border-color;
     }
 
-    & > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
+    &
+      > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(
+        .valid-feedback
+      ):not(.invalid-tooltip):not(.invalid-feedback) {
       margin-right: -1px;
       border-top-right-radius: 0;
       border-bottom-right-radius: 0;
@@ -102,7 +105,8 @@
     }
 
     &:not(.has-validation) > .dropdown-toggle:nth-last-child(n + 3),
-    &:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu) {
+    &:not(.has-validation)
+      > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu) {
       border-top-right-radius: $input-border-radius;
       border-bottom-right-radius: $input-border-radius;
     }
diff --git a/src/assets/scss/soft-ui-dashboard/_tables.scss b/src/assets/scss/soft-ui-dashboard/_tables.scss
index ffe3add..f3163d6 100644
--- a/src/assets/scss/soft-ui-dashboard/_tables.scss
+++ b/src/assets/scss/soft-ui-dashboard/_tables.scss
@@ -2,7 +2,7 @@
 
 .table {
   border-collapse: inherit;
-  
+
   thead th {
     padding: $table-head-spacer-y $table-head-spacer-x;
     text-transform: $table-head-text-transform;
@@ -18,7 +18,7 @@
     .progress {
       height: $table-progress-height;
       width: $table-progress-width;
-      margin: $table-progress-margin; 
+      margin: $table-progress-margin;
     }
   }
 
@@ -33,9 +33,9 @@
       vertical-align: middle;
     }
   }
-  tbody{
-    tr:last-child{
-      td{
+  tbody {
+    tr:last-child {
+      td {
         border-width: 0;
       }
     }
diff --git a/src/assets/scss/soft-ui-dashboard/_timeline.scss b/src/assets/scss/soft-ui-dashboard/_timeline.scss
index f204158..6eb658b 100644
--- a/src/assets/scss/soft-ui-dashboard/_timeline.scss
+++ b/src/assets/scss/soft-ui-dashboard/_timeline.scss
@@ -2,130 +2,124 @@
 // Timeline
 //
 
-
 .timeline {
-    position: relative;
+  position: relative;
 
-    // Axis
+  // Axis
 
-    &:before {
-        content: '';
-        position: absolute;
-        top: 0;
-        left: $timeline-left;
-        height: 100%;
-        border-right: $timeline-axis-width solid $timeline-axis-color;
-    }
+  &:before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: $timeline-left;
+    height: 100%;
+    border-right: $timeline-axis-width solid $timeline-axis-color;
+  }
 }
 
-
-
 // Timeline blocks
 
 .timeline-block {
-    position: relative;
+  position: relative;
 
-    &:after {
-        content: "";
-        display: table;
-        clear: both;
-    }
+  &:after {
+    content: "";
+    display: table;
+    clear: both;
+  }
 
-    &:first-child {
-        margin-top: 0;
-    }
+  &:first-child {
+    margin-top: 0;
+  }
 
-    &:last-child {
-        margin-bottom: 0;
-    }
+  &:last-child {
+    margin-bottom: 0;
+  }
 }
 
 // Timeline steps
 
 .timeline-step {
-    position: absolute;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    left: 0;
-    width: $timeline-step-width;
-    height: $timeline-step-height;
-    border-radius: $timeline-step-radius;
-    background: $timeline-step-bg;
-    // border: $timeline-step-border-width solid $timeline-step-border-color;
-    text-align: center;
-    transform: $timeline-step-transform;
-    font-size: $font-size-base;
-    font-weight: $font-weight-bold;
-    z-index: 1;
-
-    svg, i {
-        line-height: $timeline-step-line-height;
-    }
+  position: absolute;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  left: 0;
+  width: $timeline-step-width;
+  height: $timeline-step-height;
+  border-radius: $timeline-step-radius;
+  background: $timeline-step-bg;
+  // border: $timeline-step-border-width solid $timeline-step-border-color;
+  text-align: center;
+  transform: $timeline-step-transform;
+  font-size: $font-size-base;
+  font-weight: $font-weight-bold;
+  z-index: 1;
+
+  svg,
+  i {
+    line-height: $timeline-step-line-height;
+  }
 }
 
-
-
 // Timeline content and body
 .timeline-content {
-    position: relative;
-    margin-left: $timeline-content-margin-left;
-    padding-top: $timeline-content-padding-top;
-    position: relative;
-    top: $timeline-content-top;
-
-    &:after {
-        content: "";
-        display: table;
-        clear: both;
-    }
+  position: relative;
+  margin-left: $timeline-content-margin-left;
+  padding-top: $timeline-content-padding-top;
+  position: relative;
+  top: $timeline-content-top;
+
+  &:after {
+    content: "";
+    display: table;
+    clear: both;
+  }
 }
 
-
 @include media-breakpoint-up(lg) {
-    .timeline {
-        &:before {
-            left: 50%;
-            margin-left: -1px;
-        }
+  .timeline {
+    &:before {
+      left: 50%;
+      margin-left: -1px;
     }
+  }
 
-    .timeline-step {
-        left: 50%;
-    }
+  .timeline-step {
+    left: 50%;
+  }
 
-    .timeline-content {
+  .timeline-content {
+    width: 38%;
+  }
 
-        width: 38%;
-    }
-
-    .timeline-block:nth-child(even) .timeline-content {
-        float: right;
-    }
+  .timeline-block:nth-child(even) .timeline-content {
+    float: right;
+  }
 }
 
 // One side timeline
 
 .timeline-one-side {
-    &:before {
-        left: $timeline-left;
-    }
+  &:before {
+    left: $timeline-left;
+  }
 
-    .timeline-step {
-        left: $timeline-left;
-    }
+  .timeline-step {
+    left: $timeline-left;
+  }
 
-    .timeline-content {
-        width: auto;
-    }
+  .timeline-content {
+    width: auto;
+  }
 
-    @include media-breakpoint-up(lg) {
-        .timeline-content {
-            max-width: 30rem;
-        }
+  @include media-breakpoint-up(lg) {
+    .timeline-content {
+      max-width: 30rem;
     }
+  }
 }
 
 .timeline-one-side .timeline-block:nth-child(even) .timeline-content {
-    float: none;
+  float: none;
 }
diff --git a/src/assets/scss/soft-ui-dashboard/_tooltips.scss b/src/assets/scss/soft-ui-dashboard/_tooltips.scss
index 11231ae..ce4d94e 100644
--- a/src/assets/scss/soft-ui-dashboard/_tooltips.scss
+++ b/src/assets/scss/soft-ui-dashboard/_tooltips.scss
@@ -1,9 +1,9 @@
-.bs-tooltip-auto[x-placement^=right] .tooltip-arrow,
+.bs-tooltip-auto[x-placement^="right"] .tooltip-arrow,
 .bs-tooltip-right .tooltip-arrow {
   left: $tooltip-arrow-left;
 }
 
-.bs-tooltip-auto[x-placement^=left] .tooltip-arrow,
+.bs-tooltip-auto[x-placement^="left"] .tooltip-arrow,
 .bs-tooltip-left .tooltip-arrow {
   right: $tooltip-arrow-right;
 }
diff --git a/src/assets/scss/soft-ui-dashboard/_typography.scss b/src/assets/scss/soft-ui-dashboard/_typography.scss
index 75d425e..d2c4f1b 100644
--- a/src/assets/scss/soft-ui-dashboard/_typography.scss
+++ b/src/assets/scss/soft-ui-dashboard/_typography.scss
@@ -1,13 +1,14 @@
-html *{
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
+html * {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 body {
   font-weight: $font-weight-normal;
   line-height: $p-line-height;
 }
 
-h1, .h1 {
+h1,
+.h1 {
   font-size: $h1-font-size;
   line-height: $h1-line-height;
   letter-spacing: $btn-letter-spacing;
@@ -17,7 +18,8 @@ h1, .h1 {
   }
 }
 
-h2, .h2 {
+h2,
+.h2 {
   font-size: $h2-font-size;
   line-height: $h2-line-height;
   letter-spacing: $letter-wider;
@@ -27,7 +29,8 @@ h2, .h2 {
   }
 }
 
-h3, .h3 {
+h3,
+.h3 {
   font-size: $h3-font-size;
   line-height: $h3-line-height;
 
@@ -36,7 +39,8 @@ h3, .h3 {
   }
 }
 
-h4, .h4 {
+h4,
+.h4 {
   font-size: $h4-font-size;
   line-height: $h4-line-height;
 
@@ -45,7 +49,8 @@ h4, .h4 {
   }
 }
 
-h5, .h5 {
+h5,
+.h5 {
   font-size: $h5-font-size;
   line-height: $h5-line-height;
 
@@ -54,12 +59,14 @@ h5, .h5 {
   }
 }
 
-h6, .h6 {
+h6,
+.h6 {
   font-size: $h6-font-size;
   line-height: $h6-line-height;
 }
 
-p, .p {
+p,
+.p {
   font-size: $font-size-base;
   font-weight: $p-font-weight;
   line-height: $p-line-height;
@@ -71,22 +78,32 @@ p, .p {
   line-height: $lead-line-height;
 }
 
-h1, .h1,
-h2, .h2,
-h3, .h3 {
+h1,
+.h1,
+h2,
+.h2,
+h3,
+.h3 {
   font-weight: $font-weight-bolder;
 }
 
-h4, .h4,
-h5, .h5,
-h6, .h6 {
+h4,
+.h4,
+h5,
+.h5,
+h6,
+.h6 {
   font-weight: $font-weight-bold;
 }
 
-h1, .h1,
-h2, .h2,
-h3, .h3,
-h4, .h4 {
+h1,
+.h1,
+h2,
+.h2,
+h3,
+.h3,
+h4,
+.h4 {
   letter-spacing: $letter-tighter;
 }
 
@@ -102,7 +119,8 @@ a {
   line-height: $text-xs-line-height;
 }
 
-p, .p {
+p,
+.p {
   @include font-size($p-font-size);
 }
 .lead {
@@ -219,11 +237,11 @@ p {
 }
 
 .text-black-50 {
-  color: rgba($black, .5) !important;
+  color: rgba($black, 0.5) !important;
 }
 
 .text-white-50 {
-  color: rgba($white, .5) !important;
+  color: rgba($white, 0.5) !important;
 }
 
 .text-decoration-none {
@@ -268,7 +286,6 @@ p {
   font-weight: $font-weight-bolder;
 }
 
-
 // Font Size
 
 .text-2xl {
diff --git a/src/assets/scss/soft-ui-dashboard/_utilities-extend.scss b/src/assets/scss/soft-ui-dashboard/_utilities-extend.scss
index 5fd8da9..6b960b6 100644
--- a/src/assets/scss/soft-ui-dashboard/_utilities-extend.scss
+++ b/src/assets/scss/soft-ui-dashboard/_utilities-extend.scss
@@ -1,10 +1,10 @@
-@each $name, $value in $max-width-dim{
+@each $name, $value in $max-width-dim {
   .max-width-#{$name} {
     max-width: $value !important;
   }
 }
 
-@each $name, $value in $width-dim{
+@each $name, $value in $width-dim {
   .width-#{$name} {
     width: $value !important;
   }
diff --git a/src/assets/scss/soft-ui-dashboard/_utilities.scss b/src/assets/scss/soft-ui-dashboard/_utilities.scss
index ee2935c..aef0e99 100644
--- a/src/assets/scss/soft-ui-dashboard/_utilities.scss
+++ b/src/assets/scss/soft-ui-dashboard/_utilities.scss
@@ -4,75 +4,82 @@
 
 $utilities: (
   // scss-docs-start utils-vertical-align
-  "align": (
-    property: vertical-align,
-    class: align,
-    values: baseline top middle bottom text-bottom text-top
-  ),
+  "align":
+    (
+      property: vertical-align,
+      class: align,
+      values: baseline top middle bottom text-bottom text-top,
+    ),
   // scss-docs-end utils-vertical-align
   // scss-docs-start utils-float
-  "float": (
-    responsive: true,
-    property: float,
-    values: (
-      start: left,
-      end: right,
-      none: none,
-    )
-  ),
+  "float":
+    (
+      responsive: true,
+      property: float,
+      values: (
+        start: left,
+        end: right,
+        none: none,
+      ),
+    ),
   // scss-docs-end utils-float
   // scss-docs-start utils-overflow
-  "overflow": (
-    property: overflow,
-    values: auto hidden visible scroll,
-  ),
+  "overflow":
+    (
+      property: overflow,
+      values: auto hidden visible scroll,
+    ),
   // scss-docs-end utils-overflow
   // scss-docs-start utils-display
-  "display": (
-    responsive: true,
-    print: true,
-    property: display,
-    class: d,
-    values: inline inline-block block grid table table-row table-cell flex inline-flex none
-  ),
+  "display":
+    (
+      responsive: true,
+      print: true,
+      property: display,
+      class: d,
+      values: inline inline-block block grid table table-row table-cell flex
+        inline-flex none,
+    ),
   // scss-docs-end utils-display
   // scss-docs-start utils-shadow
-  "shadow": (
-    property: box-shadow,
-    class: shadow,
-    values: (
-      null: $box-shadow,
-      xs: $box-shadow-xs,
-      sm: $box-shadow-sm,
-      md: $box-shadow,
-      lg: $box-shadow-lg,
-      xl: $box-shadow-xl,
-      none: none,
-    )
-  ),
+  "shadow":
+    (
+      property: box-shadow,
+      class: shadow,
+      values: (
+        null: $box-shadow,
+        xs: $box-shadow-xs,
+        sm: $box-shadow-sm,
+        md: $box-shadow,
+        lg: $box-shadow-lg,
+        xl: $box-shadow-xl,
+        none: none,
+      ),
+    ),
   // scss-docs-end utils-shadow
   // scss-docs-start utils-position
-  "position": (
-    property: position,
-    values: static relative absolute fixed sticky
-  ),
+  "position":
+    (
+      property: position,
+      values: static relative absolute fixed sticky,
+    ),
   "top": (
     property: top,
-    values: $position-values
+    values: $position-values,
   ),
   "bottom": (
     property: bottom,
-    values: $position-values
+    values: $position-values,
   ),
   "start": (
     property: left,
     class: start,
-    values: $position-values
+    values: $position-values,
   ),
   "end": (
     property: right,
     class: end,
-    values: $position-values
+    values: $position-values,
   ),
   "translate-middle": (
     property: transform,
@@ -81,38 +88,40 @@ $utilities: (
       null: translate(-50%, -50%),
       x: translateX(-50%),
       y: translateY(-50%),
-    )
+    ),
   ),
   //Scale
-  "transform": (
-    property: transform,
-    class: transform-scale,
-    responsive: true,
-    values: (
-      5: scale(.5),
-      6: scale(.6),
-      7: scale(.7),
-      8: scale(.8),
-      9: scale(.9),
-      10: scale(1),
-    )
-  ),
+  "transform":
+    (
+      property: transform,
+      class: transform-scale,
+      responsive: true,
+      values: (
+        5: scale(0.5),
+        6: scale(0.6),
+        7: scale(0.7),
+        8: scale(0.8),
+        9: scale(0.9),
+        10: scale(1),
+      ),
+    ),
   // scss-docs-end utils-position
   // scss-docs-start utils-borders
-  "border": (
-    property: border,
-    values: (
-      null: $border-width solid $border-color,
-      0: 0,
-    )
-  ),
+  "border":
+    (
+      property: border,
+      values: (
+        null: $border-width solid $border-color,
+        0: 0,
+      ),
+    ),
   "border-top": (
     property: border-top,
     responsive: true,
     values: (
       null: $border-width solid $border-color,
       0: 0,
-    )
+    ),
   ),
   "border-end": (
     property: border-right,
@@ -121,7 +130,7 @@ $utilities: (
     values: (
       null: $border-width solid $border-color,
       0: 0,
-    )
+    ),
   ),
   "border-bottom": (
     property: border-bottom,
@@ -129,7 +138,7 @@ $utilities: (
     values: (
       null: $border-width solid $border-color,
       0: 0,
-    )
+    ),
   ),
   "border-start": (
     property: border-left,
@@ -138,41 +147,54 @@ $utilities: (
     values: (
       null: $border-width solid $border-color,
       0: 0,
-    )
+    ),
   ),
   "border-color": (
     property: border-color,
     class: border,
-    values: map-merge($theme-colors, ("white": $white))
+    values:
+      map-merge(
+        $theme-colors,
+        (
+          "white": $white,
+        )
+      ),
   ),
   "border-width": (
     property: border-width,
     class: border,
-    values: $border-widths
+    values: $border-widths,
   ),
   // scss-docs-end utils-borders
   // Sizing utilities
   // scss-docs-start utils-sizing
-  "width": (
-    property: width,
-    responsive: true,
-    class: w,
-    values: $width
-  ),
+  "width":
+    (
+      property: width,
+      responsive: true,
+      class: w,
+      values: $width,
+    ),
   "max-width": (
     property: max-width,
     class: mw,
-    values: (100: 100%)
+    values: (
+      100: 100%,
+    ),
   ),
   "viewport-width": (
     property: width,
     class: vw,
-    values: (100: 100vw)
+    values: (
+      100: 100vw,
+    ),
   ),
   "min-viewport-width": (
     property: min-width,
     class: min-vw,
-    values: (100: 100vw)
+    values: (
+      100: 100vw,
+    ),
   ),
   "height": (
     property: height,
@@ -182,18 +204,22 @@ $utilities: (
       50: 50%,
       75: 75%,
       100: 100%,
-      auto: auto
-    )
+      auto: auto,
+    ),
   ),
   "max-height": (
     property: max-height,
     class: mh,
-    values: (100: 100%)
+    values: (
+      100: 100%,
+    ),
   ),
   "viewport-height": (
     property: height,
     class: vh,
-    values: (100: 100vh)
+    values: (
+      100: 100vh,
+    ),
   ),
   "min-viewport-height": (
     property: min-height,
@@ -211,22 +237,25 @@ $utilities: (
       85: $section-height-85-min-height,
       90: $section-height-90-min-height,
       95: $section-height-95-min-height,
-      100: 100vh
-    )
+      100: 100vh,
+    ),
   ),
   // scss-docs-end utils-sizing
   // Flex utilities
   // scss-docs-start utils-flex
-  "flex": (
-    responsive: true,
-    property: flex,
-    values: (fill: 1 1 auto)
-  ),
+  "flex":
+    (
+      responsive: true,
+      property: flex,
+      values: (
+        fill: 1 1 auto,
+      ),
+    ),
   "flex-direction": (
     responsive: true,
     property: flex-direction,
     class: flex,
-    values: row column row-reverse column-reverse
+    values: row column row-reverse column-reverse,
   ),
   "flex-grow": (
     responsive: true,
@@ -235,7 +264,7 @@ $utilities: (
     values: (
       grow-0: 0,
       grow-1: 1,
-    )
+    ),
   ),
   "flex-shrink": (
     responsive: true,
@@ -244,19 +273,19 @@ $utilities: (
     values: (
       shrink-0: 0,
       shrink-1: 1,
-    )
+    ),
   ),
   "flex-wrap": (
     responsive: true,
     property: flex-wrap,
     class: flex,
-    values: wrap nowrap wrap-reverse
+    values: wrap nowrap wrap-reverse,
   ),
   "gap": (
     responsive: true,
     property: gap,
     class: gap,
-    values: $spacers
+    values: $spacers,
   ),
   "justify-content": (
     responsive: true,
@@ -268,7 +297,7 @@ $utilities: (
       between: space-between,
       around: space-around,
       evenly: space-evenly,
-    )
+    ),
   ),
   "align-items": (
     responsive: true,
@@ -279,7 +308,7 @@ $utilities: (
       center: center,
       baseline: baseline,
       stretch: stretch,
-    )
+    ),
   ),
   "align-content": (
     responsive: true,
@@ -291,7 +320,7 @@ $utilities: (
       between: space-between,
       around: space-around,
       stretch: stretch,
-    )
+    ),
   ),
   "align-self": (
     responsive: true,
@@ -303,7 +332,7 @@ $utilities: (
       center: center,
       baseline: baseline,
       stretch: stretch,
-    )
+    ),
   ),
   "order": (
     responsive: true,
@@ -322,152 +351,200 @@ $utilities: (
   // scss-docs-end utils-flex
   // Margin utilities
   // scss-docs-start utils-spacing
-  "margin": (
-    responsive: true,
-    property: margin,
-    class: m,
-    values: map-merge($spacers, (auto: auto))
-  ),
+  "margin":
+    (
+      responsive: true,
+      property: margin,
+      class: m,
+      values:
+        map-merge(
+          $spacers,
+          (
+            auto: auto,
+          )
+        ),
+    ),
   "margin-x": (
     responsive: true,
     property: margin-right margin-left,
     class: mx,
-    values: map-merge($spacers, (auto: auto))
+    values:
+      map-merge(
+        $spacers,
+        (
+          auto: auto,
+        )
+      ),
   ),
   "margin-y": (
     responsive: true,
     property: margin-top margin-bottom,
     class: my,
-    values: map-merge($spacers, (auto: auto))
+    values:
+      map-merge(
+        $spacers,
+        (
+          auto: auto,
+        )
+      ),
   ),
   "margin-top": (
     responsive: true,
     property: margin-top,
     class: mt,
-    values: map-merge($spacers, (auto: auto))
+    values:
+      map-merge(
+        $spacers,
+        (
+          auto: auto,
+        )
+      ),
   ),
   "margin-end": (
     responsive: true,
     property: margin-right,
     class: me,
-    values: map-merge($spacers, (auto: auto))
+    values:
+      map-merge(
+        $spacers,
+        (
+          auto: auto,
+        )
+      ),
   ),
   "margin-bottom": (
     responsive: true,
     property: margin-bottom,
     class: mb,
-    values: map-merge($spacers, (auto: auto))
+    values:
+      map-merge(
+        $spacers,
+        (
+          auto: auto,
+        )
+      ),
   ),
   "margin-start": (
     responsive: true,
     property: margin-left,
     class: ms,
-    values: map-merge($spacers, (auto: auto))
+    values:
+      map-merge(
+        $spacers,
+        (
+          auto: auto,
+        )
+      ),
   ),
   // Negative margin utilities
-  "negative-margin": (
-    responsive: true,
-    property: margin,
-    class: m,
-    values: $negative-spacers
-  ),
+  "negative-margin":
+    (
+      responsive: true,
+      property: margin,
+      class: m,
+      values: $negative-spacers,
+    ),
   "negative-margin-x": (
     responsive: true,
     property: margin-right margin-left,
     class: mx,
-    values: $negative-spacers
+    values: $negative-spacers,
   ),
   "negative-margin-y": (
     responsive: true,
     property: margin-top margin-bottom,
     class: my,
-    values: $negative-spacers
+    values: $negative-spacers,
   ),
   "negative-margin-top": (
     responsive: true,
     property: margin-top,
     class: mt,
-    values: $negative-spacers
+    values: $negative-spacers,
   ),
   "negative-margin-end": (
     responsive: true,
     property: margin-right,
     class: me,
-    values: $negative-spacers
+    values: $negative-spacers,
   ),
   "negative-margin-bottom": (
     responsive: true,
     property: margin-bottom,
     class: mb,
-    values: $negative-spacers
+    values: $negative-spacers,
   ),
   "negative-margin-start": (
     responsive: true,
     property: margin-left,
     class: ms,
-    values: $negative-spacers
+    values: $negative-spacers,
   ),
   // Padding utilities
-  "padding": (
-    responsive: true,
-    property: padding,
-    class: p,
-    values: $spacers
-  ),
+  "padding":
+    (
+      responsive: true,
+      property: padding,
+      class: p,
+      values: $spacers,
+    ),
   "padding-x": (
     responsive: true,
     property: padding-right padding-left,
     class: px,
-    values: $spacers
+    values: $spacers,
   ),
   "padding-y": (
     responsive: true,
     property: padding-top padding-bottom,
     class: py,
-    values: $spacers
+    values: $spacers,
   ),
   "padding-top": (
     responsive: true,
     property: padding-top,
     class: pt,
-    values: $spacers
+    values: $spacers,
   ),
   "padding-end": (
     responsive: true,
     property: padding-right,
     class: pe,
-    values: $spacers
+    values: $spacers,
   ),
   "padding-bottom": (
     responsive: true,
     property: padding-bottom,
     class: pb,
-    values: $spacers
+    values: $spacers,
   ),
   "padding-start": (
     responsive: true,
     property: padding-left,
     class: ps,
-    values: $spacers
+    values: $spacers,
   ),
   // scss-docs-end utils-spacing
   // Text
   // scss-docs-start utils-text
-  "font-family": (
-    property: font-family,
-    class: font,
-    values: (monospace: var(--#{$variable-prefix}font-monospace))
-  ),
+  "font-family":
+    (
+      property: font-family,
+      class: font,
+      values: (
+        monospace: var(--#{$variable-prefix}font-monospace),
+      ),
+    ),
   "font-size": (
     rfs: true,
     property: font-size,
     class: fs,
-    values: $font-sizes
+    values: $font-sizes,
   ),
   "font-style": (
     property: font-style,
     class: fst,
-    values: italic normal
+    values: italic normal,
   ),
   "font-weight": (
     property: font-weight,
@@ -477,8 +554,8 @@ $utilities: (
       lighter: $font-weight-lighter,
       normal: $font-weight-normal,
       bold: $font-weight-bold,
-      bolder: $font-weight-bolder
-    )
+      bolder: $font-weight-bolder,
+    ),
   ),
   "line-height": (
     property: line-height,
@@ -488,7 +565,7 @@ $utilities: (
       sm: $line-height-sm,
       base: $line-height-base,
       lg: $line-height-lg,
-    )
+    ),
   ),
   "text-align": (
     responsive: true,
@@ -498,16 +575,16 @@ $utilities: (
       start: left,
       end: right,
       center: center,
-    )
+    ),
   ),
   "text-decoration": (
     property: text-decoration,
-    values: none underline line-through
+    values: none underline line-through,
   ),
   "text-transform": (
     property: text-transform,
     class: text,
-    values: lowercase uppercase capitalize
+    values: lowercase uppercase capitalize,
   ),
   "white-space": (
     property: white-space,
@@ -515,65 +592,75 @@ $utilities: (
     values: (
       wrap: normal,
       nowrap: nowrap,
-    )
+    ),
   ),
   "word-wrap": (
     property: word-wrap word-break,
     class: text,
-    values: (break: break-word),
-    rtl: false
+    values: (
+      break: break-word,
+    ),
+    rtl: false,
   ),
   // scss-docs-end utils-text
   // scss-docs-start utils-color
-  "color": (
-    property: color,
-    class: text,
-    values: map-merge(
-      $theme-colors,
-      (
-        "white": $white,
-        "body": $body-color,
-        "muted": $text-muted,
-        "black-50": rgba($black, .5),
-        "white-50": rgba($white, .5),
-        "reset": inherit,
-      )
-    )
-  ),
+  "color":
+    (
+      property: color,
+      class: text,
+      values:
+        map-merge(
+          $theme-colors,
+          (
+            "white": $white,
+            "body": $body-color,
+            "muted": $text-muted,
+            "black-50": rgba($black, 0.5),
+            "white-50": rgba($white, 0.5),
+            "reset": inherit,
+          )
+        ),
+    ),
   // scss-docs-end utils-color
   // scss-docs-start utils-bg-color
-  "background-color": (
-    property: background-color,
-    class: bg,
-    values: map-merge(
-      $theme-colors,
-      (
-        "body": $body-bg,
-        "white": $white,
-        "transparent": transparent,
-        "gray-100": $gray-100,
-        "gray-200": $gray-200,
-        "gray-300": $gray-300,
-        "gray-400": $gray-400,
-        "gray-500": $gray-500,
-        "gray-600": $gray-600,
-        "gray-700": $gray-700,
-        "gray-800": $gray-800,
-        "gray-900": $gray-900,
-      )
-    )
-  ),
+  "background-color":
+    (
+      property: background-color,
+      class: bg,
+      values:
+        map-merge(
+          $theme-colors,
+          (
+            "body": $body-bg,
+            "white": $white,
+            "transparent": transparent,
+            "gray-100": $gray-100,
+            "gray-200": $gray-200,
+            "gray-300": $gray-300,
+            "gray-400": $gray-400,
+            "gray-500": $gray-500,
+            "gray-600": $gray-600,
+            "gray-700": $gray-700,
+            "gray-800": $gray-800,
+            "gray-900": $gray-900,
+          )
+        ),
+    ),
   // scss-docs-end utils-bg-color
-  "gradient": (
-    property: background-image,
-    class: bg,
-    values: (gradient: var(--#{$variable-prefix}gradient))
-  ),
+  "gradient":
+    (
+      property: background-image,
+      class: bg,
+      values: (
+        gradient: var(--#{$variable-prefix}gradient),
+      ),
+    ),
   // scss-docs-start utils-interaction
-  "user-select": (
-    property: user-select,
-    values: all auto none
-  ),
+  "user-select":
+    (
+      property: user-select,
+      values: all auto none,
+    ),
   "pointer-events": (
     property: pointer-events,
     class: pe,
@@ -581,103 +668,117 @@ $utilities: (
   ),
   // scss-docs-end utils-interaction
   // scss-docs-start utils-border-radius
-  "rounded": (
-    property: border-radius,
-    class: rounded,
-    values: (
-      null: $border-radius,
-      0: 0,
-      1: $border-radius-sm,
-      2: $border-radius,
-      3: $border-radius-lg,
-      circle: 50%,
-      pill: $border-radius-pill
-    )
-  ),
+  "rounded":
+    (
+      property: border-radius,
+      class: rounded,
+      values: (
+        null: $border-radius,
+        0: 0,
+        1: $border-radius-sm,
+        2: $border-radius,
+        3: $border-radius-lg,
+        circle: 50%,
+        pill: $border-radius-pill,
+      ),
+    ),
   "rounded-top": (
     property: border-top-left-radius border-top-right-radius,
     class: rounded-top,
-    values: (null: $border-radius)
+    values: (
+      null: $border-radius,
+    ),
   ),
   "rounded-end": (
     property: border-top-right-radius border-bottom-right-radius,
     class: rounded-end,
-    values: (null: $border-radius)
+    values: (
+      null: $border-radius,
+    ),
   ),
   "rounded-bottom": (
     property: border-bottom-right-radius border-bottom-left-radius,
     class: rounded-bottom,
-    values: (null: $border-radius)
+    values: (
+      null: $border-radius,
+    ),
   ),
   "rounded-start": (
     property: border-bottom-left-radius border-top-left-radius,
     class: rounded-start,
-    values: (null: $border-radius)
+    values: (
+      null: $border-radius,
+    ),
   ),
   // scss-docs-end utils-border-radius
   // scss-docs-start utils-visibility
-  "visibility": (
-    property: visibility,
-    class: null,
-    values: (
-      visible: visible,
-      invisible: hidden,
-    )
-  ),
+  "visibility":
+    (
+      property: visibility,
+      class: null,
+      values: (
+        visible: visible,
+        invisible: hidden,
+      ),
+    ),
   // Opacity utilities
-  "opacity": (
-    property: opacity,
-    values: (
-      0: 0,
-      1: .1,
-      2: .2,
-      3: .3,
-      4: .4,
-      5: .5,
-      6: .6,
-      7: .7,
-      8: .8,
-      9: .9,
-      10: 1
+  "opacity":
+    (
+      property: opacity,
+      values: (
+        0: 0,
+        1: 0.1,
+        2: 0.2,
+        3: 0.3,
+        4: 0.4,
+        5: 0.5,
+        6: 0.6,
+        7: 0.7,
+        8: 0.8,
+        9: 0.9,
+        10: 1,
+      ),
     ),
-  ),
   // Z-index utilities
-  "z-index": (
-    property: z-index,
-    values: (
-      0: 0,
-      1: 1,
-      2: 2,
-      3: 3
+  "z-index":
+    (
+      property: z-index,
+      values: (
+        0: 0,
+        1: 1,
+        2: 2,
+        3: 3,
+      ),
     ),
-  ),
   // Letter spacing utilities
-  "letter-spacing": (
-    property: letter-spacing,
-    values: (
-      1: 1px,
-      2: 2px,
-      3: 3px,
-      4: 4px,
-      5: 5px
+  "letter-spacing":
+    (
+      property: letter-spacing,
+      values: (
+        1: 1px,
+        2: 2px,
+        3: 3px,
+        4: 4px,
+        5: 5px,
+      ),
     ),
-  ),
   // Border radius utilities
-  "border-top-left-radius": (
-    property: border-top-left-radius,
-    class: border-radius-top-start,
-    responsive: true,
-    values: (
-      null: $border-radius,
-      0: 0,
-      sm: $border-radius-sm,
-      md: $border-radius,
-      lg: $border-radius-lg,
-      xl: $border-radius-xl,
-      2xl: $border-radius-2xl,
-      circle: 50%,
-      pill: $border-radius-pill
-     )
+  "border-top-left-radius":
+    (
+      property: border-top-left-radius,
+      class: border-radius-top-start,
+      responsive: true,
+      values: (
+        null: $border-radius,
+        0: 0,
+        sm: $border-radius-sm,
+        md: $border-radius,
+        lg: $border-radius-lg,
+        xl: $border-radius-xl,
+        2xl: $border-radius-2xl,
+        circle: 50%,
+        pill: $border-radius-pill,
+      ),
     ),
   "border-top-right-radius": (
     property: border-top-right-radius,
@@ -692,8 +793,8 @@ $utilities: (
       xl: $border-radius-xl,
       2xl: $border-radius-2xl,
       circle: 50%,
-      pill: $border-radius-pill
-    )
+      pill: $border-radius-pill,
+    ),
   ),
   "border-bottom-left-radius": (
     property: border-bottom-left-radius,
@@ -708,8 +809,8 @@ $utilities: (
       xl: $border-radius-xl,
       2xl: $border-radius-2xl,
       circle: 50%,
-      pill: $border-radius-pill
-    )
+      pill: $border-radius-pill,
+    ),
   ),
   "border-bottom-right-radius": (
     property: border-bottom-right-radius,
@@ -724,82 +825,87 @@ $utilities: (
       xl: $border-radius-xl,
       2xl: $border-radius-2xl,
       circle: 50%,
-      pill: $border-radius-pill
-    )
+      pill: $border-radius-pill,
+    ),
   ),
   // Max Height Values
- "max-height-px": (
-   property: max-height,
-   class: max-height,
-   values: (
-    100: $max-height-100,
-    150: $max-height-150,
-    160: $max-height-160,
-    200: $max-height-200,
-    250: $max-height-250,
-    300: $max-height-300,
-    400: $max-height-400,
-    500: $max-height-500,
-    600: $max-height-600
-   )
- ),
+  "max-height-px":
+    (
+      property: max-height,
+      class: max-height,
+      values: (
+        100: $max-height-100,
+        150: $max-height-150,
+        160: $max-height-160,
+        200: $max-height-200,
+        250: $max-height-250,
+        300: $max-height-300,
+        400: $max-height-400,
+        500: $max-height-500,
+        600: $max-height-600,
+      ),
+    ),
   // Max Height Values vh
- "max-height-vh": (
-   property: max-height,
-   class: max-height-vh,
-   values: (
-    10: $max-height-vh-10,
-    20: $max-height-vh-20,
-    30: $max-height-vh-30,
-    40: $max-height-vh-40,
-    50: $max-height-vh-50,
-    60: $max-height-vh-60,
-    70: $max-height-vh-70,
-    80: $max-height-vh-80,
-    90: $max-height-vh-90,
-    100: $max-height-vh-100,
-   )
- ),
- // Min Height Values
-  "min-height-px": (
-    property: min-height,
-    class: min-height,
-    values: (
-     100: $min-height-100,
-     150: $min-height-150,
-     160: $min-height-160,
-     200: $min-height-200,
-     250: $min-height-250,
-     300: $min-height-300,
-     400: $min-height-400,
-     500: $min-height-500,
-     600: $min-height-600
-    )
-  ),
+  "max-height-vh":
+    (
+      property: max-height,
+      class: max-height-vh,
+      values: (
+        10: $max-height-vh-10,
+        20: $max-height-vh-20,
+        30: $max-height-vh-30,
+        40: $max-height-vh-40,
+        50: $max-height-vh-50,
+        60: $max-height-vh-60,
+        70: $max-height-vh-70,
+        80: $max-height-vh-80,
+        90: $max-height-vh-90,
+        100: $max-height-vh-100,
+      ),
+    ),
+  // Min Height Values
+  "min-height-px":
+    (
+      property: min-height,
+      class: min-height,
+      values: (
+        100: $min-height-100,
+        150: $min-height-150,
+        160: $min-height-160,
+        200: $min-height-200,
+        250: $min-height-250,
+        300: $min-height-300,
+        400: $min-height-400,
+        500: $min-height-500,
+        600: $min-height-600,
+      ),
+    ),
   // Height Values
-  "height-px": (
-    property: height,
-    class: height,
-    values: (
-     100: $height-100,
-     150: $height-150,
-     200: $height-200,
-     300: $height-300,
-     400: $height-400,
-     500: $height-500,
-     600: $height-600
-    )
-  ),
+  "height-px":
+    (
+      property: height,
+      class: height,
+      values: (
+        100: $height-100,
+        150: $height-150,
+        200: $height-200,
+        300: $height-300,
+        400: $height-400,
+        500: $height-500,
+        600: $height-600,
+      ),
+    ),
   // Max Width Values
-   "max-width-px": (
-     property: max-width,
-     class: max-width,
-     values: (
-      100: $max-width-100,
-      200: $max-width-200,
-      300: $max-width-300,
-      400: $max-width-400,
-      500: $max-width-500
-     )
-   ),
+  "max-width-px":
+    (
+      property: max-width,
+      class: max-width,
+      values: (
+        100: $max-width-100,
+        200: $max-width-200,
+        300: $max-width-300,
+        400: $max-width-400,
+        500: $max-width-500,
+      ),
+    )
 );
diff --git a/src/assets/scss/soft-ui-dashboard/_variables.scss b/src/assets/scss/soft-ui-dashboard/_variables.scss
index db18dfa..bd186bb 100644
--- a/src/assets/scss/soft-ui-dashboard/_variables.scss
+++ b/src/assets/scss/soft-ui-dashboard/_variables.scss
@@ -5,12 +5,12 @@
 
 // $soft-background-color: #fbfbfb !default;
 $soft-background-color: #ffffff !default; // Testing
-$font-color:            #67748e !default;
-$h-color:               #344767 !default;
+$font-color: #67748e !default;
+$h-color: #344767 !default;
 
 // Color system
 
-$white:    #fff !default;
+$white: #fff !default;
 $gray-100: #f8f9fa !default;
 $gray-200: #e9ecef !default;
 $gray-300: #dee2e6 !default;
@@ -20,113 +20,136 @@ $gray-600: #6c757d !default;
 $gray-700: #495057 !default;
 $gray-800: #343a40 !default;
 $gray-900: #212529 !default;
-$black:    #000 !default;
+$black: #000 !default;
 
 // fusv-enable
 
-$blue:    #63B3ED !default;
-$indigo:  #596CFF !default;
-$purple:  #6f42c1 !default;
-$pink:    #d63384 !default;
-$red:     #F56565 !default;
-$orange:  #fd7e14 !default;
-$yellow:  #FBD38D !default;
-$green:   #81E6D9 !default;
-$teal:    #20c997 !default;
-$cyan:    #0dcaf0 !default;
+$blue: #63b3ed !default;
+$indigo: #596cff !default;
+$purple: #6f42c1 !default;
+$pink: #d63384 !default;
+$red: #f56565 !default;
+$orange: #fd7e14 !default;
+$yellow: #fbd38d !default;
+$green: #81e6d9 !default;
+$teal: #20c997 !default;
+$cyan: #0dcaf0 !default;
 
 // scss-docs-start colors-map
 $colors: (
-  "blue":       $blue,
-  "indigo":     $indigo,
-  "purple":     $purple,
-  "pink":       $pink,
-  "red":        $red,
-  "orange":     $orange,
-  "yellow":     $yellow,
-  "green":      $green,
-  "teal":       $teal,
-  "cyan":       $cyan,
-  "white":      $white,
-  "gray":       $gray-600,
-  "gray-dark":  $gray-800,
+  "blue": $blue,
+  "indigo": $indigo,
+  "purple": $purple,
+  "pink": $pink,
+  "red": $red,
+  "orange": $orange,
+  "yellow": $yellow,
+  "green": $green,
+  "teal": $teal,
+  "cyan": $cyan,
+  "white": $white,
+  "gray": $gray-600,
+  "gray-dark": $gray-800,
 ) !default;
 // scss-docs-end colors-map
 
-$primary:       #cb0c9f !default;
-$secondary:     #8392AB !default;
-$info:          #17c1e8 !default;
-$success:       #82d616 !default;
-$warning:       #fbcf33 !default;
-$danger:        #ea0606 !default;
-$light:         $gray-200 !default;
-$dark:          $h-color !default;
+$primary: #cb0c9f !default;
+$secondary: #8392ab !default;
+$info: #17c1e8 !default;
+$success: #82d616 !default;
+$warning: #fbcf33 !default;
+$danger: #ea0606 !default;
+$light: $gray-200 !default;
+$dark: $h-color !default;
 
 // scss-docs-start theme-colors-map
 $theme-colors: (
-  "primary":    $primary,
-  "secondary":  $secondary,
-  "success":    $success,
-  "info":       $info,
-  "warning":    $warning,
-  "danger":     $danger,
-  "light":      $light,
-  "dark":       $dark,
-  "white":      $white
+  "primary": $primary,
+  "secondary": $secondary,
+  "success": $success,
+  "info": $info,
+  "warning": $warning,
+  "danger": $danger,
+  "light": $light,
+  "dark": $dark,
+  "white": $white,
 ) !default;
 // scss-docs-end theme-colors-map
 
-
 // Gradient colors
-$primary-gradient:            #7928CA !default;
-$primary-gradient-state:      #FF0080 !default;
+$primary-gradient: #7928ca !default;
+$primary-gradient-state: #ff0080 !default;
 
-$secondary-gradient:          #627594 !default;
-$secondary-gradient-state:    #A8B8D8 !default;
+$secondary-gradient: #627594 !default;
+$secondary-gradient-state: #a8b8d8 !default;
 
-$info-gradient:               #2152ff !default;
-$info-gradient-state:         #21d4fd !default;
+$info-gradient: #2152ff !default;
+$info-gradient-state: #21d4fd !default;
 
-$success-gradient:            #17ad37 !default;
-$success-gradient-state:      #98ec2d !default;
+$success-gradient: #17ad37 !default;
+$success-gradient-state: #98ec2d !default;
 
-$danger-gradient:             #ea0606 !default;
-$danger-gradient-state:       #ff667c !default;
+$danger-gradient: #ea0606 !default;
+$danger-gradient-state: #ff667c !default;
 
-$warning-gradient:            #f53939 !default;
-$warning-gradient-state:      #fbcf33 !default;
+$warning-gradient: #f53939 !default;
+$warning-gradient-state: #fbcf33 !default;
 
-$dark-gradient:               #141727 !default;
-$dark-gradient-state:         #3A416F !default;
+$dark-gradient: #141727 !default;
+$dark-gradient-state: #3a416f !default;
 
-$light-gradient:              #CED4DA !default;
-$light-gradient-state:        #EBEFF4 !default;
+$light-gradient: #ced4da !default;
+$light-gradient-state: #ebeff4 !default;
 
-$dark-gradient-dark:          #323a54 !default;
-$dark-gradient-state-dark:    #1a2035 !default;
+$dark-gradient-dark: #323a54 !default;
+$dark-gradient-state-dark: #1a2035 !default;
 
 // Gradient Colors map
 $theme-gradient-colors: (
-  "primary":    ($primary-gradient, $primary-gradient-state),
-  "secondary":  ($secondary-gradient, $secondary-gradient-state),
-  "success":    ($success-gradient, $success-gradient-state),
-  "info":       ($info-gradient, $info-gradient-state),
-  "warning":    ($warning-gradient, $warning-gradient-state),
-  "danger":     ($danger-gradient, $danger-gradient-state),
-  "light":      ($light-gradient, $light-gradient-state),
-  "dark":       ($dark-gradient, $dark-gradient-state)
+  "primary": (
+    $primary-gradient,
+    $primary-gradient-state,
+  ),
+  "secondary": (
+    $secondary-gradient,
+    $secondary-gradient-state,
+  ),
+  "success": (
+    $success-gradient,
+    $success-gradient-state,
+  ),
+  "info": (
+    $info-gradient,
+    $info-gradient-state,
+  ),
+  "warning": (
+    $warning-gradient,
+    $warning-gradient-state,
+  ),
+  "danger": (
+    $danger-gradient,
+    $danger-gradient-state,
+  ),
+  "light": (
+    $light-gradient,
+    $light-gradient-state,
+  ),
+  "dark": (
+    $dark-gradient,
+    $dark-gradient-state,
+  ),
 ) !default;
 
 // Set a specific jump point for requesting color jumps
-$theme-color-interval:        8% !default;
+$theme-color-interval: 8% !default;
 
 // The contrast ratio to reach against white, to determine if color changes from "light" to "dark". Acceptable values for WCAG 2.0 are 3, 4.5 and 7.
 // See https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast
-$min-contrast-ratio:          4.5 !default;
+$min-contrast-ratio: 4.5 !default;
 
 // Customize the light and dark text colors for use in our color contrast function.
-$color-contrast-dark:         $black !default;
-$color-contrast-light:        $white !default;
+$color-contrast-dark: $black !default;
+$color-contrast-light: $white !default;
 
 // fusv-disable
 $blue-100: tint-color($blue, 8) !default;
@@ -236,32 +259,36 @@ $escaped-characters: (
   (">", "%3e"),
   ("#", "%23"),
   ("(", "%28"),
-  (")", "%29"),
+  (")", "%29")
 ) !default;
 
 // Options
 //
 // Quickly modify global styling by enabling or disabling optional features.
 
-$enable-caret:                true !default;
-$enable-rounded:              true !default;
-$enable-shadows:              false !default;
-$enable-gradients:            false !default;
-$enable-transitions:          true !default;
-$enable-reduced-motion:       true !default;
-$enable-grid-classes:         true !default;
-$enable-button-pointers:      true !default;
-$enable-rfs:                  true !default;
-$enable-validation-icons:     true !default;
-$enable-negative-margins:     true !default;
+$enable-caret: true !default;
+$enable-rounded: true !default;
+$enable-shadows: false !default;
+$enable-gradients: false !default;
+$enable-transitions: true !default;
+$enable-reduced-motion: true !default;
+$enable-grid-classes: true !default;
+$enable-button-pointers: true !default;
+$enable-rfs: true !default;
+$enable-validation-icons: true !default;
+$enable-negative-margins: true !default;
 $enable-deprecation-messages: true !default;
-$enable-important-utilities:  true !default;
+$enable-important-utilities: true !default;
 
 // Gradient
 //
 // The gradient which is added to components if `$enable-gradients` is `true`
 // This gradient is also added to elements with `.bg-gradient`
-$gradient: linear-gradient(180deg, rgba($white, .15), rgba($white, 0)) !default;
+$gradient: linear-gradient(
+  180deg,
+  rgba($white, 0.15),
+  rgba($white, 0)
+) !default;
 
 // Spacing
 //
@@ -286,7 +313,11 @@ $spacers: (
   12: $spacer * 16,
 ) !default;
 
-$negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default;
+$negative-spacers: if(
+  $enable-negative-margins,
+  negativify-map($spacers),
+  null
+) !default;
 
 // Position
 //
@@ -305,39 +336,36 @@ $position-values: (
   9: 9%,
   10: 10%,
   50: 50%,
-  100: 100%
+  100: 100%,
 ) !default;
 
-
 // Body
 //
 // Settings for the `<body>` element.
 
-$body-bg:                   $white !default;
-$body-color:                $font-color !default;
-$body-text-align:           null !default;
-
+$body-bg: $white !default;
+$body-color: $font-color !default;
+$body-text-align: null !default;
 
 // Links
 //
 // Style anchor elements.
 
-$link-color:                              $primary !default;
-$link-decoration:                         none !default;
-$link-hover-color:                        darken($link-color, 15%) !default;
-$link-hover-decoration:                   none !default;
+$link-color: $primary !default;
+$link-decoration: none !default;
+$link-hover-color: darken($link-color, 15%) !default;
+$link-hover-decoration: none !default;
 // Darken percentage for links with `.text-*` class (e.g. `.text-success`)
 $emphasized-link-hover-darken-percentage: 15% !default;
 
-$stretched-link-pseudo-element:           after !default;
-$stretched-link-z-index:                  1 !default;
+$stretched-link-pseudo-element: after !default;
+$stretched-link-z-index: 1 !default;
 
 // Paragraphs
 //
 // Style p element.
 
-$paragraph-margin-bottom:   1rem !default;
-
+$paragraph-margin-bottom: 1rem !default;
 
 // Grid breakpoints
 //
@@ -351,14 +379,13 @@ $grid-breakpoints: (
   md: 768px,
   lg: 992px,
   xl: 1200px,
-  xxl: 1400px
+  xxl: 1400px,
 ) !default;
 // scss-docs-end grid-breakpoints
 
 @include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
 @include _assert-starts-at-zero($grid-breakpoints, "$grid-breakpoints");
 
-
 // Grid containers
 //
 // Define the maximum width of `.container` for different screen sizes.
@@ -369,20 +396,19 @@ $container-max-widths: (
   md: 720px,
   lg: 960px,
   xl: 1140px,
-  xxl: 1320px
+  xxl: 1320px,
 ) !default;
 // scss-docs-end container-max-widths
 
 @include _assert-ascending($container-max-widths, "$container-max-widths");
 
-
 // Grid columns
 //
 // Set the number of columns and specify the width of the gutters.
 
-$grid-columns:                12 !default;
-$grid-gutter-width:           1.5rem !default;
-$grid-row-columns:            6 !default;
+$grid-columns: 12 !default;
+$grid-gutter-width: 1.5rem !default;
+$grid-row-columns: 6 !default;
 
 $gutters: $spacers !default;
 
@@ -390,21 +416,20 @@ $gutters: $spacers !default;
 
 $container-padding-x: $grid-gutter-width !default;
 
-
 // Components
 //
 // Define common padding and border radius sizes and more.
 
-$border-width:                1px !default;
-$border-color:                $gray-300 !default;
+$border-width: 1px !default;
+$border-color: $gray-300 !default;
 
-$border-radius-xs:            .125rem !default;
-$border-radius-sm:            .25rem !default;
-$border-radius-md:            .5rem !default;
-$border-radius-lg:            .75rem !default;
-$border-radius-xl:            1rem !default;
-$border-radius-2xl:           1.5rem !default;
-$border-radius-section:       10rem !default;
+$border-radius-xs: 0.125rem !default;
+$border-radius-sm: 0.25rem !default;
+$border-radius-md: 0.5rem !default;
+$border-radius-lg: 0.75rem !default;
+$border-radius-xl: 1rem !default;
+$border-radius-2xl: 1.5rem !default;
+$border-radius-section: 10rem !default;
 
 $border-widths: (
   0: 0,
@@ -412,28 +437,30 @@ $border-widths: (
   2: 2px,
   3: 3px,
   4: 4px,
-  5: 5px
+  5: 5px,
 ) !default;
 
-$rounded-pill:                50rem !default;
+$rounded-pill: 50rem !default;
 
-$box-shadow-xs:               0 2px 9px -5px rgba($black, 0.15) !default;
-$box-shadow-sm:               0 .25rem .375rem -.0625rem rgba(20, 20, 20, .12), 0 .125rem .25rem -.0625rem rgba(20, 20, 20, .07) !default;
-$box-shadow:                  0 .3125rem .625rem 0 rgba(0, 0, 0, 0.12) !default;
-$box-shadow-lg:               0 8px 26px -4px rgba(20, 20, 20, 0.15), 0 8px 9px -5px rgba(20, 20, 20, 0.06) !default;
-$box-shadow-xl:                0 23px 45px -11px rgba(20, 20, 20, .25) !default;
-$box-shadow-inset:            inset 0 1px 2px rgba($black, .075) !default;
+$box-shadow-xs: 0 2px 9px -5px rgba($black, 0.15) !default;
+$box-shadow-sm: 0 0.25rem 0.375rem -0.0625rem rgba(20, 20, 20, 0.12),
+  0 0.125rem 0.25rem -0.0625rem rgba(20, 20, 20, 0.07) !default;
+$box-shadow: 0 0.3125rem 0.625rem 0 rgba(0, 0, 0, 0.12) !default;
+$box-shadow-lg: 0 8px 26px -4px rgba(20, 20, 20, 0.15),
+  0 8px 9px -5px rgba(20, 20, 20, 0.06) !default;
+$box-shadow-xl: 0 23px 45px -11px rgba(20, 20, 20, 0.25) !default;
+$box-shadow-inset: inset 0 1px 2px rgba($black, 0.075) !default;
 
-$component-active-color:      $white !default;
-$component-active-bg:         $primary !default;
+$component-active-color: $white !default;
+$component-active-bg: $primary !default;
 
-$caret-width:                 .3em !default;
-$caret-vertical-align:        $caret-width * .85 !default;
-$caret-spacing:               $caret-width * .85 !default;
+$caret-width: 0.3em !default;
+$caret-vertical-align: $caret-width * 0.85 !default;
+$caret-spacing: $caret-width * 0.85 !default;
 
-$transition-base:             all .2s ease-in-out !default;
-$transition-fade:             opacity .15s linear !default;
-$transition-collapse:         height .35s ease !default;
+$transition-base: all 0.2s ease-in-out !default;
+$transition-fade: opacity 0.15s linear !default;
+$transition-collapse: height 0.35s ease !default;
 
 // stylelint-disable function-disallowed-list
 // scss-docs-start aspect-ratios
@@ -441,7 +468,7 @@ $aspect-ratios: (
   "1x1": 100%,
   "4x3": calc(3 / 4 * 100%),
   "16x9": calc(9 / 16 * 100%),
-  "21x9": calc(9 / 21 * 100%)
+  "21x9": calc(9 / 21 * 100%),
 ) !default;
 // scss-docs-end aspect-ratios
 // stylelint-enable function-disallowed-list
@@ -451,85 +478,85 @@ $aspect-ratios: (
 // Font, line-height, and color for body text, headings, and more.
 
 // stylelint-disable value-keyword-case
-$font-family-sans-serif:      'Open Sans' !default;
-$font-family-monospace:       SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
+$font-family-sans-serif: "Open Sans" !default;
+$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas,
+  "Liberation Mono", "Courier New", monospace !default;
 // stylelint-enable value-keyword-case
-$font-family-base:            var(--bs-font-sans-serif) !default;
-$font-family-code:            var(--bs-font-monospace) !default;
+$font-family-base: var(--bs-font-sans-serif) !default;
+$font-family-code: var(--bs-font-monospace) !default;
 
 // $font-size-root effects the value of `rem`, which is used for as well font sizes, paddings and margins
 // $font-size-base effects the font size of the body text
-$font-size-root:              null !default;
-$font-size-base:              1rem !default; // Assumes the browser default, typically `16px`
-$font-size-xxs:               $font-size-base * .65 !default;
-$font-size-xs:                $font-size-base * .75 !default;
-$font-size-sm:                $font-size-base * .875 !default;
-$font-size-lg:                $font-size-base * 1.125 !default;
-$font-size-xl:                $font-size-base * 1.25 !default;
-$font-size-2xl:               $font-size-base * 1.5 !default;
-$font-size-3xl:               $font-size-base * 1.875 !default;
-$font-size-4xl:               $font-size-base * 2 !default;
-$font-size-5xl:               $font-size-base * 2.25 !default;
-$font-size-6xl:               $font-size-base * 3 !default;
-$font-size-7xl:               $font-size-base * 3.75 !default;
-$font-size-8xl:               $font-size-base * 4 !default;
-$font-size-9xl:               $font-size-base * 5 !default;
-
-$font-weight-lighter:         lighter !default;
-$font-weight-light:           300 !default;
-$font-weight-normal:          400 !default;
-$font-weight-bold:            600 !default;
-$font-weight-bolder:          700 !default;
-
-$font-weight-base:            $font-weight-normal !default;
-
-$h1-font-weight:              $font-weight-bold !default;
-$h2-font-weight:              $font-weight-bold !default;
-$h3-font-weight:              $font-weight-bold !default;
-$h4-font-weight:              $font-weight-bold !default;
-$h5-font-weight:              $font-weight-bold !default;
-$h6-font-weight:              $font-weight-bold !default;
-$p-font-weight:               $font-weight-normal !default;
-$lead-font-weight:            $font-weight-normal !default;
-$text-sm-font-weight:         $font-weight-normal !default;
-$text-xs-font-weight:         $font-weight-normal !default;
-
-$line-height:                 1.75rem !default;
-$line-height-base:            1.5 !default;
-$line-height-sm:              1.25 !default;
-$line-height-lg:              2 !default;
-
-$h1-line-height:              1.25 !default;
-$h2-line-height:              1.3 !default;
-$h3-line-height:              1.375 !default;
-$h4-line-height:              1.375 !default;
-$h5-line-height:              1.375 !default;
-$h6-line-height:              1.625 !default;
-$p-line-height:               1.6 !default;
-$lead-line-height:            1.625 !default;
-$text-sm-line-height:         1.5 !default;
-$text-xs-line-height:         1.25 !default;
-
-$font-size-base:              1rem !default; // Assumes the browser default, typically `16px`
-$h1-font-size:                $font-size-base * 3 !default;
-$h2-font-size:                $font-size-base * 2.25 !default;
-$h3-font-size:                $font-size-base * 1.875 !default;
-$h4-font-size:                $font-size-base * 1.5 !default;
-$h5-font-size:                $font-size-base * 1.25 !default;
-$h6-font-size:                $font-size-base !default;
-$lead-font-size:              $font-size-base * 1.25 !default;
-
-
-$text-sm-font-size:           .875rem !default;
-$text-xs-font-size:           .75rem !default;
-$p-font-size:                 1rem !default;
-
-$headings-margin-bottom:      $spacer * 0.5 !default;
-$headings-font-family:        null !default;
-$headings-font-style:         null !default;
-$headings-font-weight:        400 !default;
-$headings-line-height:        1.2 !default;
-$headings-color:              #344767 !default;
+$font-size-root: null !default;
+$font-size-base: 1rem !default; // Assumes the browser default, typically `16px`
+$font-size-xxs: $font-size-base * 0.65 !default;
+$font-size-xs: $font-size-base * 0.75 !default;
+$font-size-sm: $font-size-base * 0.875 !default;
+$font-size-lg: $font-size-base * 1.125 !default;
+$font-size-xl: $font-size-base * 1.25 !default;
+$font-size-2xl: $font-size-base * 1.5 !default;
+$font-size-3xl: $font-size-base * 1.875 !default;
+$font-size-4xl: $font-size-base * 2 !default;
+$font-size-5xl: $font-size-base * 2.25 !default;
+$font-size-6xl: $font-size-base * 3 !default;
+$font-size-7xl: $font-size-base * 3.75 !default;
+$font-size-8xl: $font-size-base * 4 !default;
+$font-size-9xl: $font-size-base * 5 !default;
+
+$font-weight-lighter: lighter !default;
+$font-weight-light: 300 !default;
+$font-weight-normal: 400 !default;
+$font-weight-bold: 600 !default;
+$font-weight-bolder: 700 !default;
+
+$font-weight-base: $font-weight-normal !default;
+
+$h1-font-weight: $font-weight-bold !default;
+$h2-font-weight: $font-weight-bold !default;
+$h3-font-weight: $font-weight-bold !default;
+$h4-font-weight: $font-weight-bold !default;
+$h5-font-weight: $font-weight-bold !default;
+$h6-font-weight: $font-weight-bold !default;
+$p-font-weight: $font-weight-normal !default;
+$lead-font-weight: $font-weight-normal !default;
+$text-sm-font-weight: $font-weight-normal !default;
+$text-xs-font-weight: $font-weight-normal !default;
+
+$line-height: 1.75rem !default;
+$line-height-base: 1.5 !default;
+$line-height-sm: 1.25 !default;
+$line-height-lg: 2 !default;
+
+$h1-line-height: 1.25 !default;
+$h2-line-height: 1.3 !default;
+$h3-line-height: 1.375 !default;
+$h4-line-height: 1.375 !default;
+$h5-line-height: 1.375 !default;
+$h6-line-height: 1.625 !default;
+$p-line-height: 1.6 !default;
+$lead-line-height: 1.625 !default;
+$text-sm-line-height: 1.5 !default;
+$text-xs-line-height: 1.25 !default;
+
+$font-size-base: 1rem !default; // Assumes the browser default, typically `16px`
+$h1-font-size: $font-size-base * 3 !default;
+$h2-font-size: $font-size-base * 2.25 !default;
+$h3-font-size: $font-size-base * 1.875 !default;
+$h4-font-size: $font-size-base * 1.5 !default;
+$h5-font-size: $font-size-base * 1.25 !default;
+$h6-font-size: $font-size-base !default;
+$lead-font-size: $font-size-base * 1.25 !default;
+
+$text-sm-font-size: 0.875rem !default;
+$text-xs-font-size: 0.75rem !default;
+$p-font-size: 1rem !default;
+
+$headings-margin-bottom: $spacer * 0.5 !default;
+$headings-font-family: null !default;
+$headings-font-style: null !default;
+$headings-font-weight: 400 !default;
+$headings-line-height: 1.2 !default;
+$headings-color: #344767 !default;
 
 // scss-docs-start display-headings
 $display-font-sizes: (
@@ -538,506 +565,518 @@ $display-font-sizes: (
   3: 4rem,
   4: 3.5rem,
   5: 3rem,
-  6: 2.5rem
+  6: 2.5rem,
 ) !default;
 
 $display-font-weight: 300 !default;
 $display-line-height: $headings-line-height !default;
 // scss-docs-end display-headings
 
-$lead-font-size:              $font-size-base * 1.25 !default;
-$lead-font-weight:            300 !default;
+$lead-font-size: $font-size-base * 1.25 !default;
+$lead-font-weight: 300 !default;
 
-$small-font-size:             .875em !default;
+$small-font-size: 0.875em !default;
 
-$sub-sup-font-size:           .75em !default;
+$sub-sup-font-size: 0.75em !default;
 
-$text-secondary:              $font-color !default;
-$text-muted:                  $gray-600 !default;
+$text-secondary: $font-color !default;
+$text-muted: $gray-600 !default;
 
 // text gradient
-$text-gradient-bg-clip:       text !default;
-$text-gradient-text-fill:     transparent !default;
-$text-gradient-position:      relative !default;
-$text-gradient-zindex:        1 !default;
-$text-gradient-bg-primary:    linear-gradient(310deg, #7928CA, #FF0080) !default;
-$text-gradient-bg-info:       linear-gradient(310deg, #2152FF, #21D4FD) !default;
-$text-gradient-bg-success:    linear-gradient(310deg, #17AD37, #C1E823) !default;
-$text-gradient-bg-warning:    linear-gradient(310deg, #F53939, #FBCF33) !default;
-$text-gradient-bg-danger:     linear-gradient(310deg, #D60808, #FF6690) !default;
-$text-gradient-bg-dark:     linear-gradient(310deg, #141727, #3A416F) !default;
-
-$initialism-font-size:        $small-font-size !default;
-
-$blockquote-margin-y:         $spacer !default;
-$blockquote-font-size:        $font-size-base * 1.25 !default;
-$blockquote-footer-color:     $gray-600 !default;
+$text-gradient-bg-clip: text !default;
+$text-gradient-text-fill: transparent !default;
+$text-gradient-position: relative !default;
+$text-gradient-zindex: 1 !default;
+$text-gradient-bg-primary: linear-gradient(310deg, #7928ca, #ff0080) !default;
+$text-gradient-bg-info: linear-gradient(310deg, #2152ff, #21d4fd) !default;
+$text-gradient-bg-success: linear-gradient(310deg, #17ad37, #c1e823) !default;
+$text-gradient-bg-warning: linear-gradient(310deg, #f53939, #fbcf33) !default;
+$text-gradient-bg-danger: linear-gradient(310deg, #d60808, #ff6690) !default;
+$text-gradient-bg-dark: linear-gradient(310deg, #141727, #3a416f) !default;
+
+$initialism-font-size: $small-font-size !default;
+
+$blockquote-margin-y: $spacer !default;
+$blockquote-font-size: $font-size-base * 1.25 !default;
+$blockquote-footer-color: $gray-600 !default;
 $blockquote-footer-font-size: $small-font-size !default;
 
-$hr-margin-y:                 $spacer !default;
-$hr-color:                    inherit !default;
-$hr-height:                   $border-width !default;
-$hr-opacity:                  .25 !default;
+$hr-margin-y: $spacer !default;
+$hr-color: inherit !default;
+$hr-height: $border-width !default;
+$hr-opacity: 0.25 !default;
 
-$legend-margin-bottom:        .5rem !default;
-$legend-font-size:            1.5rem !default;
-$legend-font-weight:          null !default;
+$legend-margin-bottom: 0.5rem !default;
+$legend-font-size: 1.5rem !default;
+$legend-font-weight: null !default;
 
-$mark-padding:                .2em !default;
+$mark-padding: 0.2em !default;
 
-$dt-font-weight:              $font-weight-bold !default;
+$dt-font-weight: $font-weight-bold !default;
 
-$nested-kbd-font-weight:      $font-weight-bold !default;
+$nested-kbd-font-weight: $font-weight-bold !default;
 
-$list-inline-padding:         .5rem !default;
+$list-inline-padding: 0.5rem !default;
 
-$mark-bg:                     #fcf8e3 !default;
+$mark-bg: #fcf8e3 !default;
 
 // Letter Spacing
-$letter-wider:                .05rem !default;
-$letter-normal:               0rem !default;
-$letter-tighter:              -0.05rem !default;
-$h1-letter-spacing:           0.1rem !default;
-$a-letter-spacing:            -0.025rem !default;
+$letter-wider: 0.05rem !default;
+$letter-normal: 0rem !default;
+$letter-tighter: -0.05rem !default;
+$h1-letter-spacing: 0.1rem !default;
+$a-letter-spacing: -0.025rem !default;
 
 // Tables
 //
 // Customizes the `.table` component with basic values, each used across all table variations.
-$table-head-spacer-y:         .75rem !default;
-$table-head-spacer-x:         1.5rem !default;
-$table-head-font-size:        .65rem !default;
-$table-head-font-weight:      $font-weight-bold !default;
-$table-head-text-transform:   capitalize !default;
-$table-head-letter-spacing:   0px !default;
-$table-head-bg:               $gray-100 !default;
-$table-head-color:            $gray-600 !default;
+$table-head-spacer-y: 0.75rem !default;
+$table-head-spacer-x: 1.5rem !default;
+$table-head-font-size: 0.65rem !default;
+$table-head-font-weight: $font-weight-bold !default;
+$table-head-text-transform: capitalize !default;
+$table-head-letter-spacing: 0px !default;
+$table-head-bg: $gray-100 !default;
+$table-head-color: $gray-600 !default;
 
-$table-body-font-size:        .8125rem !default;
+$table-body-font-size: 0.8125rem !default;
 
-$table-border-width:          $border-width !default;
-$table-border-color:          $gray-200 !default;
+$table-border-width: $border-width !default;
+$table-border-color: $gray-200 !default;
 
 // scss-docs-start table-variables
-$table-cell-padding-y:        .5rem !default;
-$table-cell-padding-x:        .5rem !default;
-$table-cell-padding-y-sm:     .25rem !default;
-$table-cell-padding-x-sm:     .25rem !default;
+$table-cell-padding-y: 0.5rem !default;
+$table-cell-padding-x: 0.5rem !default;
+$table-cell-padding-y-sm: 0.25rem !default;
+$table-cell-padding-x-sm: 0.25rem !default;
 
-$table-cell-vertical-align:   top !default;
+$table-cell-vertical-align: top !default;
 
-$table-color:                 $body-color !default;
-$table-bg:                    transparent !default;
+$table-color: $body-color !default;
+$table-bg: transparent !default;
 
-$table-th-font-weight:        null !default;
+$table-th-font-weight: null !default;
 
-$table-striped-color:         $table-color !default;
-$table-striped-bg-factor:     .05 !default;
-$table-striped-bg:            rgba($black, $table-striped-bg-factor) !default;
+$table-striped-color: $table-color !default;
+$table-striped-bg-factor: 0.05 !default;
+$table-striped-bg: rgba($black, $table-striped-bg-factor) !default;
 
-$table-active-color:          $table-color !default;
-$table-active-bg-factor:      .1 !default;
-$table-active-bg:             rgba($black, $table-active-bg-factor) !default;
+$table-active-color: $table-color !default;
+$table-active-bg-factor: 0.1 !default;
+$table-active-bg: rgba($black, $table-active-bg-factor) !default;
 
-$table-hover-color:           $table-color !default;
-$table-hover-bg-factor:       .075 !default;
-$table-hover-bg:              rgba($black, $table-hover-bg-factor) !default;
+$table-hover-color: $table-color !default;
+$table-hover-bg-factor: 0.075 !default;
+$table-hover-bg: rgba($black, $table-hover-bg-factor) !default;
 
-$table-border-factor:         .1 !default;
-$table-border-width:          $border-width !default;
-$table-border-color:          $border-color !default;
+$table-border-factor: 0.1 !default;
+$table-border-width: $border-width !default;
+$table-border-color: $border-color !default;
 
-$table-striped-order:         odd !default;
+$table-striped-order: odd !default;
 
 $table-group-separator-color: currentColor !default;
 
-$table-caption-color:         $text-muted !default;
-
-$table-bg-level:              -9 !default;
-$table-bg-scale:              -80% !default;
+$table-caption-color: $text-muted !default;
 
+$table-bg-level: -9 !default;
+$table-bg-scale: -80% !default;
 
 $table-variants: (
-  "primary":    shift-color($primary, $table-bg-scale),
-  "secondary":  shift-color($secondary, $table-bg-scale),
-  "success":    shift-color($success, $table-bg-scale),
-  "info":       shift-color($info, $table-bg-scale),
-  "warning":    shift-color($warning, $table-bg-scale),
-  "danger":     shift-color($danger, $table-bg-scale),
-  "light":      $light,
-  "dark":       $dark,
+  "primary": shift-color($primary, $table-bg-scale),
+  "secondary": shift-color($secondary, $table-bg-scale),
+  "success": shift-color($success, $table-bg-scale),
+  "info": shift-color($info, $table-bg-scale),
+  "warning": shift-color($warning, $table-bg-scale),
+  "danger": shift-color($danger, $table-bg-scale),
+  "light": $light,
+  "dark": $dark,
 ) !default;
 // scss-docs-end table-variables
 
-
 // Buttons + Forms
 //
 // Shared variables that are reassigned to `$input-` and `$btn-` specific variables.
 
-$input-btn-padding-y:         .5rem !default;
-$input-btn-padding-x:         .75rem !default;
-$input-btn-font-family:       null !default;
-$input-btn-font-size:         1rem !default;
-$input-btn-line-height:       1.4 !default;
-
-$input-btn-focus-width:         .2rem !default;
-$input-btn-focus-color-opacity: .25 !default;
-$input-btn-focus-color:         rgba($component-active-bg, $input-btn-focus-color-opacity) !default;
-$input-btn-focus-box-shadow:    0 0 0 $input-btn-focus-width $input-btn-focus-color !default;
-
-$input-btn-padding-y-sm:      .25rem !default;
-$input-btn-padding-x-sm:      .75rem !default;
-$input-btn-font-size-sm:      .75rem !default;
+$input-btn-padding-y: 0.5rem !default;
+$input-btn-padding-x: 0.75rem !default;
+$input-btn-font-family: null !default;
+$input-btn-font-size: 1rem !default;
+$input-btn-line-height: 1.4 !default;
+
+$input-btn-focus-width: 0.2rem !default;
+$input-btn-focus-color-opacity: 0.25 !default;
+$input-btn-focus-color: rgba(
+  $component-active-bg,
+  $input-btn-focus-color-opacity
+) !default;
+$input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color !default;
 
-$input-btn-padding-y-lg:      .75rem !default;
-$input-btn-padding-x-lg:      .75rem !default;
-$input-btn-font-size-lg:      .875rem !default;
+$input-btn-padding-y-sm: 0.25rem !default;
+$input-btn-padding-x-sm: 0.75rem !default;
+$input-btn-font-size-sm: 0.75rem !default;
 
-$input-btn-border-width:      $border-width !default;
+$input-btn-padding-y-lg: 0.75rem !default;
+$input-btn-padding-x-lg: 0.75rem !default;
+$input-btn-font-size-lg: 0.875rem !default;
 
+$input-btn-border-width: $border-width !default;
 
 // Buttons
 //
 // For each of Bootstrap's buttons, define text, background, and border color.
 
-$btn-padding-y:               .75rem !default;
-$btn-padding-x:               1.5rem !default;
-$btn-font-family:             $input-btn-font-family !default;
-$btn-font-size:               $text-xs-font-size !default;
-$btn-line-height:             $input-btn-line-height !default;
-$btn-white-space:             null !default; // Set to `nowrap` to prevent text wrapping
-$btn-letter-spacing:          -0.025rem !default; // Set to `nowrap` to prevent text wrapping
-
-$btn-margin-bottom:           1rem !default;
-$btn-padding-y-sm:            .5rem !default;
-$btn-padding-x-sm:            2rem !default;
-$btn-font-size-sm:            $input-btn-font-size-sm !default;
-
-$btn-padding-y-lg:            .875rem !default;
-$btn-padding-x-lg:            4rem !default;
-$btn-font-size-lg:            .875rem !default;
-
-$btn-border-width:            $input-btn-border-width !default;
-
-$btn-font-weight:             $font-weight-bolder !default;
-$btn-box-shadow:              0 4px 7px -1px rgba(0,0,0,.11), 0 2px 4px -1px rgba(0,0,0,.07) !default;
-$btn-box-shadow-values:       0 5px 8px 0 !default;
+$btn-padding-y: 0.75rem !default;
+$btn-padding-x: 1.5rem !default;
+$btn-font-family: $input-btn-font-family !default;
+$btn-font-size: $text-xs-font-size !default;
+$btn-line-height: $input-btn-line-height !default;
+$btn-white-space: null !default; // Set to `nowrap` to prevent text wrapping
+$btn-letter-spacing: -0.025rem !default; // Set to `nowrap` to prevent text wrapping
+
+$btn-margin-bottom: 1rem !default;
+$btn-padding-y-sm: 0.5rem !default;
+$btn-padding-x-sm: 2rem !default;
+$btn-font-size-sm: $input-btn-font-size-sm !default;
+
+$btn-padding-y-lg: 0.875rem !default;
+$btn-padding-x-lg: 4rem !default;
+$btn-font-size-lg: 0.875rem !default;
+
+$btn-border-width: $input-btn-border-width !default;
+
+$btn-font-weight: $font-weight-bolder !default;
+$btn-box-shadow: 0 4px 7px -1px rgba(0, 0, 0, 0.11),
+  0 2px 4px -1px rgba(0, 0, 0, 0.07) !default;
+$btn-box-shadow-values: 0 5px 8px 0 !default;
 $btn-box-shadow-hover-values: 0 8px 10px 0 !default;
-$btn-hover-box-shadow:        0 3px 5px -1px rgba(0,0,0,.09), 0 2px 3px -1px rgba(0,0,0,.07) !default;
-$btn-focus-box-shadow:        $btn-hover-box-shadow !default;
-$btn-focus-width:             $input-btn-focus-width !default;
-$btn-hover-opacity:           .85 !default;
-$btn-disabled-opacity:        .65 !default;
-$btn-active-box-shadow:       none !default;
-$btn-background-size:         150% !default;
-$btn-hover-transform:         scale(1.02) !default;
-$btn-active-hover-transform:  scale(1) !default;
-$btn-background-position-x:   25% !default;
-
-$btn-link-color:              $link-color !default;
-$btn-link-hover-color:        $link-hover-color !default;
-$btn-link-disabled-color:     $gray-600 !default;
-
-$btn-block-spacing-y:         .5rem !default;
+$btn-hover-box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.09),
+  0 2px 3px -1px rgba(0, 0, 0, 0.07) !default;
+$btn-focus-box-shadow: $btn-hover-box-shadow !default;
+$btn-focus-width: $input-btn-focus-width !default;
+$btn-hover-opacity: 0.85 !default;
+$btn-disabled-opacity: 0.65 !default;
+$btn-active-box-shadow: none !default;
+$btn-background-size: 150% !default;
+$btn-hover-transform: scale(1.02) !default;
+$btn-active-hover-transform: scale(1) !default;
+$btn-background-position-x: 25% !default;
+
+$btn-link-color: $link-color !default;
+$btn-link-hover-color: $link-hover-color !default;
+$btn-link-disabled-color: $gray-600 !default;
+
+$btn-block-spacing-y: 0.5rem !default;
 
 // Allows for customizing button radius independently from global border radius
-$btn-border-radius:           .5rem !default;
-$btn-border-radius-lg:        .5rem !default;
-$btn-border-radius-sm:        .5rem !default;
-$btn-border-rounded:          1.875rem !default;
+$btn-border-radius: 0.5rem !default;
+$btn-border-radius-lg: 0.5rem !default;
+$btn-border-radius-sm: 0.5rem !default;
+$btn-border-rounded: 1.875rem !default;
 
-$btn-icon-transition:         all .2s cubic-bezier(.34,1.61,.7,1.3) !default;
-$btn-icon-transform-right:          translateX(5px) !default;
-$btn-icon-transform-left:          translateX(-5px) !default;
+$btn-icon-transition: all 0.2s cubic-bezier(0.34, 1.61, 0.7, 1.3) !default;
+$btn-icon-transform-right: translateX(5px) !default;
+$btn-icon-transform-left: translateX(-5px) !default;
 
 // Allows for customizing button radius independently from global border radius
-$btn-border-radius:           $border-radius-md !default;
-$btn-border-radius-sm:        $border-radius-sm !default;
-$btn-border-radius-lg:        $border-radius-lg !default;
-
-$btn-transition:              all .15s ease-in !default;
-
-$btn-just-icon-padding-x-sm:     .3rem !default;
-$btn-just-icon-padding-y-sm:     .3rem !default;
-$btn-just-icon-padding-x:         .7rem !default;
-$btn-just-icon-padding-y:         .7rem !default;
-$btn-just-icon-padding-x-lg:         1rem !default;
-$btn-just-icon-padding-y-lg:         1rem !default;
-$btn-just-icon-width:         2.375rem !default;
-$btn-just-icon-height:        $btn-just-icon-width !default;
-$btn-just-icon-width-sm:      1.5875rem !default;
-$btn-just-icon-height-sm:     $btn-just-icon-width-sm !default;
-$btn-just-icon-sm-font-size:  .5rem !default;
-$btn-just-icon-width-lg:      3.25rem !default;
-$btn-just-icon-height-lg:     $btn-just-icon-width-lg !default;
-$btn-just-icon-lg-font-size:  1.2rem !default;
-$btn-just-icon-lg-position:   relative !default;
-$btn-just-icon-lg-top:        2px !default;
+$btn-border-radius: $border-radius-md !default;
+$btn-border-radius-sm: $border-radius-sm !default;
+$btn-border-radius-lg: $border-radius-lg !default;
+
+$btn-transition: all 0.15s ease-in !default;
+
+$btn-just-icon-padding-x-sm: 0.3rem !default;
+$btn-just-icon-padding-y-sm: 0.3rem !default;
+$btn-just-icon-padding-x: 0.7rem !default;
+$btn-just-icon-padding-y: 0.7rem !default;
+$btn-just-icon-padding-x-lg: 1rem !default;
+$btn-just-icon-padding-y-lg: 1rem !default;
+$btn-just-icon-width: 2.375rem !default;
+$btn-just-icon-height: $btn-just-icon-width !default;
+$btn-just-icon-width-sm: 1.5875rem !default;
+$btn-just-icon-height-sm: $btn-just-icon-width-sm !default;
+$btn-just-icon-sm-font-size: 0.5rem !default;
+$btn-just-icon-width-lg: 3.25rem !default;
+$btn-just-icon-height-lg: $btn-just-icon-width-lg !default;
+$btn-just-icon-lg-font-size: 1.2rem !default;
+$btn-just-icon-lg-position: relative !default;
+$btn-just-icon-lg-top: 2px !default;
 
 // we've overwritten the default Bootstrap function
 // for dynamically adding font color since the colors
 // added by that function were not correctly set
-$btn-primary-font-color:      #fff !default;
-$btn-secondary-font-color:    #fff !default;
-$btn-danger-font-color:       #fff !default;
-$btn-info-font-color:         #fff !default;
-$btn-success-font-color:      #fff !default;
-$btn-warning-font-color:      #fff !default;
-$btn-dark-font-color:         #fff !default;
-$btn-light-font-color:        #3A416F !default;
+$btn-primary-font-color: #fff !default;
+$btn-secondary-font-color: #fff !default;
+$btn-danger-font-color: #fff !default;
+$btn-info-font-color: #fff !default;
+$btn-success-font-color: #fff !default;
+$btn-warning-font-color: #fff !default;
+$btn-dark-font-color: #fff !default;
+$btn-light-font-color: #3a416f !default;
 
 $btn-font-colors: () !default;
 
 $btn-font-colors: map-merge(
   (
-    "primary":       $btn-primary-font-color,
-    "secondary":     $btn-secondary-font-color,
-    "danger":        $btn-danger-font-color,
-    "info":          $btn-info-font-color,
-    "success":       $btn-success-font-color,
-    "warning":       $btn-warning-font-color,
-    "dark":          $btn-dark-font-color,
-    "light":         $btn-light-font-color
+    "primary": $btn-primary-font-color,
+    "secondary": $btn-secondary-font-color,
+    "danger": $btn-danger-font-color,
+    "info": $btn-info-font-color,
+    "success": $btn-success-font-color,
+    "warning": $btn-warning-font-color,
+    "dark": $btn-dark-font-color,
+    "light": $btn-light-font-color,
   ),
   $btn-font-colors
 );
 
 // Forms
 
-$form-text-margin-top:                  .25rem !default;
-$form-text-font-size:                   $small-font-size !default;
-$form-text-font-style:                  null !default;
-$form-text-font-weight:                 null !default;
-$form-text-color:                       $text-muted !default;
-
-$form-label-margin-bottom:              .5rem !default;
-$form-label-margin-left:                .25rem !default;
-$form-label-font-size:                  .75rem !default;
-$form-label-font-style:                 null !default;
-$form-label-font-weight:                700 !default;
-$form-label-color:                      $dark !default;
-
-$input-padding-y:                       .5rem !default;
-$input-padding-x:                       .75rem !default;
-$input-font-family:                     $input-btn-font-family !default;
-$input-font-size:                       $font-size-sm !default;
-$input-font-weight:                     $font-weight-base !default;
-$input-line-height:                     1.4rem !default;
-
-$input-padding-y-sm:                    $input-btn-padding-y-sm !default;
-$input-padding-x-sm:                    $input-btn-padding-x-sm !default;
-$input-font-size-sm:                    .75rem !default;
-
-$input-padding-y-lg:                    $input-btn-padding-y-lg !default;
-$input-padding-x-lg:                    $input-btn-padding-x-lg !default;
-$input-font-size-lg:                    .875rem !default;
-
-$input-bg:                              $white !default;
-$input-disabled-bg:                     $gray-200 !default;
-$input-disabled-border-color:           null !default;
-
-$input-color:                           $gray-700 !default;
-$input-border-color:                    #d2d6da !default;
-$input-border-width:                    $input-btn-border-width !default;
-$input-box-shadow:                      0 1px 2px 0 rgba(0, 0, 0, 0.05) !default;
-
-$input-border-radius:                   $border-radius-md !default;
-$input-border-radius-sm:                $border-radius-md !default;
-$input-border-radius-lg:                $border-radius-md !default;
-
-$input-focus-bg:                        $white !default;
-$input-focus-border-color:              #e293d3 !default;
-$input-focus-color:                     $input-color !default;
-$input-focus-width:                     2px !default;
-$input-focus-box-shadow:                0 0 0 $input-focus-width #e9aede !default;
-
-$input-placeholder-color:               $gray-500 !default;
-$input-plaintext-color:                 $dark !default;
-
-$input-height-border:                   $input-border-width * 2 !default;
-
-$input-height-inner:                    unset !default;
-$input-height-inner-half:               1rem !default;
-$input-height-inner-quarter:            .75rem !default;
-
-$input-height:                          unset !default;
-$input-height-sm:                       unset !default;
-$input-height-lg:                       unset !default;
-
-$input-transition:                      box-shadow .15s ease, border-color .15s ease !default;
-
-
-$form-check-input-width:                  1.23em !default;
-$form-check-min-height:                   $font-size-base * $line-height-base !default;
-$form-check-padding-left:                 $form-check-input-width + .45em !default;
-$form-check-margin-bottom:                .125rem !default;
-$form-check-label-color:                  null !default;
-$form-check-label-cursor:                 null !default;
-$form-check-transition:                   background-color .25s ease, border-color .25s ease, background-position .15s ease-in-out, opacity .15s ease-out, box-shadow .15s ease-in-out !default;
-$form-check-transition-time:              .25s !default;
-
-$form-check-input-active-filter:          brightness(99%) !default;
-
-$form-check-input-bg:                     $white !default;
-$form-check-input-border:                 none !default;
-$form-check-input-border-radius:          .35rem !default;
-$form-check-radio-border-radius:          50% !default;
-$form-check-input-focus-border:           none !default;
-$form-check-input-focus-box-shadow:       none !default;
-
-$form-check-input-checked-color:          $white !default;
-$form-check-input-checked-bg-color:       transparent !default;
-$form-check-input-checked-border-color:   $form-check-input-checked-bg-color !default;
-$form-check-input-checked-bg-image:       linear-gradient(310deg, $dark-gradient 0%, $dark-gradient-state 100%) !default;
-$form-check-radio-checked-bg-image:       $form-check-input-checked-bg-image !default;
-$form-check-radio-after-width:                  .5rem !default;
-
-$form-check-input-indeterminate-color:          $component-active-color !default;
-$form-check-input-indeterminate-bg-color:       $component-active-bg !default;
-$form-check-input-indeterminate-border-color:   $form-check-input-indeterminate-bg-color !default;
-$form-check-input-indeterminate-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-indeterminate-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/></svg>") !default;
-
-$form-switch-color:               rgba(0, 0, 0, 1) !default;
-$form-switch-height:              1.2em !default;
-$form-switch-width:               2.5rem !default;
-$form-switch-check-after-width:   1rem !default;
-$form-switch-padding-start:       $form-switch-width + .5rem !default;
-$form-switch-bg-image:            none !default;
-$form-switch-border-radius:       $form-switch-width !default;
-$form-switch-translate-x-start:   1px !default;
-$form-switch-translate-x-end:     21px !default;
-$form-switch-round-box-shadow:    $box-shadow !default;
-$form-switch-transition:          $form-check-transition !default;
-
-$form-switch-focus-color:         $form-switch-color !default;
-$form-switch-focus-bg-image:      $form-switch-bg-image !default;
-$form-switch-checked-color:       $white !default;
-$form-switch-checked-bg-image:    $form-switch-bg-image !default;
+$form-text-margin-top: 0.25rem !default;
+$form-text-font-size: $small-font-size !default;
+$form-text-font-style: null !default;
+$form-text-font-weight: null !default;
+$form-text-color: $text-muted !default;
+
+$form-label-margin-bottom: 0.5rem !default;
+$form-label-margin-left: 0.25rem !default;
+$form-label-font-size: 0.75rem !default;
+$form-label-font-style: null !default;
+$form-label-font-weight: 700 !default;
+$form-label-color: $dark !default;
+
+$input-padding-y: 0.5rem !default;
+$input-padding-x: 0.75rem !default;
+$input-font-family: $input-btn-font-family !default;
+$input-font-size: $font-size-sm !default;
+$input-font-weight: $font-weight-base !default;
+$input-line-height: 1.4rem !default;
+
+$input-padding-y-sm: $input-btn-padding-y-sm !default;
+$input-padding-x-sm: $input-btn-padding-x-sm !default;
+$input-font-size-sm: 0.75rem !default;
+
+$input-padding-y-lg: $input-btn-padding-y-lg !default;
+$input-padding-x-lg: $input-btn-padding-x-lg !default;
+$input-font-size-lg: 0.875rem !default;
+
+$input-bg: $white !default;
+$input-disabled-bg: $gray-200 !default;
+$input-disabled-border-color: null !default;
+
+$input-color: $gray-700 !default;
+$input-border-color: #d2d6da !default;
+$input-border-width: $input-btn-border-width !default;
+$input-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !default;
+
+$input-border-radius: $border-radius-md !default;
+$input-border-radius-sm: $border-radius-md !default;
+$input-border-radius-lg: $border-radius-md !default;
+
+$input-focus-bg: $white !default;
+$input-focus-border-color: #e293d3 !default;
+$input-focus-color: $input-color !default;
+$input-focus-width: 2px !default;
+$input-focus-box-shadow: 0 0 0 $input-focus-width #e9aede !default;
+
+$input-placeholder-color: $gray-500 !default;
+$input-plaintext-color: $dark !default;
+
+$input-height-border: $input-border-width * 2 !default;
+
+$input-height-inner: unset !default;
+$input-height-inner-half: 1rem !default;
+$input-height-inner-quarter: 0.75rem !default;
+
+$input-height: unset !default;
+$input-height-sm: unset !default;
+$input-height-lg: unset !default;
+
+$input-transition: box-shadow 0.15s ease, border-color 0.15s ease !default;
+
+$form-check-input-width: 1.23em !default;
+$form-check-min-height: $font-size-base * $line-height-base !default;
+$form-check-padding-left: $form-check-input-width + 0.45em !default;
+$form-check-margin-bottom: 0.125rem !default;
+$form-check-label-color: null !default;
+$form-check-label-cursor: null !default;
+$form-check-transition: background-color 0.25s ease, border-color 0.25s ease,
+  background-position 0.15s ease-in-out, opacity 0.15s ease-out,
+  box-shadow 0.15s ease-in-out !default;
+$form-check-transition-time: 0.25s !default;
+
+$form-check-input-active-filter: brightness(99%) !default;
+
+$form-check-input-bg: $white !default;
+$form-check-input-border: none !default;
+$form-check-input-border-radius: 0.35rem !default;
+$form-check-radio-border-radius: 50% !default;
+$form-check-input-focus-border: none !default;
+$form-check-input-focus-box-shadow: none !default;
+
+$form-check-input-checked-color: $white !default;
+$form-check-input-checked-bg-color: transparent !default;
+$form-check-input-checked-border-color: $form-check-input-checked-bg-color !default;
+$form-check-input-checked-bg-image: linear-gradient(
+  310deg,
+  $dark-gradient 0%,
+  $dark-gradient-state 100%
+) !default;
+$form-check-radio-checked-bg-image: $form-check-input-checked-bg-image !default;
+$form-check-radio-after-width: 0.5rem !default;
+
+$form-check-input-indeterminate-color: $component-active-color !default;
+$form-check-input-indeterminate-bg-color: $component-active-bg !default;
+$form-check-input-indeterminate-border-color: $form-check-input-indeterminate-bg-color !default;
+$form-check-input-indeterminate-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-indeterminate-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/></svg>") !default;
+
+$form-switch-color: rgba(0, 0, 0, 1) !default;
+$form-switch-height: 1.2em !default;
+$form-switch-width: 2.5rem !default;
+$form-switch-check-after-width: 1rem !default;
+$form-switch-padding-start: $form-switch-width + 0.5rem !default;
+$form-switch-bg-image: none !default;
+$form-switch-border-radius: $form-switch-width !default;
+$form-switch-translate-x-start: 1px !default;
+$form-switch-translate-x-end: 21px !default;
+$form-switch-round-box-shadow: $box-shadow !default;
+$form-switch-transition: $form-check-transition !default;
+
+$form-switch-focus-color: $form-switch-color !default;
+$form-switch-focus-bg-image: $form-switch-bg-image !default;
+$form-switch-checked-color: $white !default;
+$form-switch-checked-bg-image: $form-switch-bg-image !default;
 $form-switch-checked-bg-position: right center !default;
 
-$form-check-inline-margin-right:        1rem !default;
-
-$input-group-addon-padding-y:           $input-padding-y !default;
-$input-group-addon-padding-x:           $input-padding-x !default;
-$input-group-addon-font-weight:         $input-font-weight !default;
-$input-group-addon-color:               $dark !default;
-$input-group-addon-bg:                  $white !default;
-$input-group-addon-border-color:        $input-border-color !default;
-
-
-$form-select-padding-y:             $input-padding-y !default;
-$form-select-padding-x:             $input-padding-x !default;
-$form-select-font-family:           $input-font-family !default;
-$form-select-font-size:             $input-font-size !default;
-$form-select-height:                $input-height !default;
-$form-select-indicator-padding:     1rem !default; // Extra padding to account for the presence of the background-image based indicator
-$form-select-font-weight:           $input-font-weight !default;
-$form-select-line-height:           $input-line-height !default;
-$form-select-color:                 $input-color !default;
-$form-select-disabled-color:        $gray-600 !default;
-$form-select-bg:                    $input-bg !default;
-$form-select-disabled-bg:           $gray-200 !default;
+$form-check-inline-margin-right: 1rem !default;
+
+$input-group-addon-padding-y: $input-padding-y !default;
+$input-group-addon-padding-x: $input-padding-x !default;
+$input-group-addon-font-weight: $input-font-weight !default;
+$input-group-addon-color: $dark !default;
+$input-group-addon-bg: $white !default;
+$input-group-addon-border-color: $input-border-color !default;
+
+$form-select-padding-y: $input-padding-y !default;
+$form-select-padding-x: $input-padding-x !default;
+$form-select-font-family: $input-font-family !default;
+$form-select-font-size: $input-font-size !default;
+$form-select-height: $input-height !default;
+$form-select-indicator-padding: 1rem !default; // Extra padding to account for the presence of the background-image based indicator
+$form-select-font-weight: $input-font-weight !default;
+$form-select-line-height: $input-line-height !default;
+$form-select-color: $input-color !default;
+$form-select-disabled-color: $gray-600 !default;
+$form-select-bg: $input-bg !default;
+$form-select-disabled-bg: $gray-200 !default;
 $form-select-disabled-border-color: $input-disabled-border-color !default;
-$form-select-bg-position:           right $form-select-padding-x center !default;
-$form-select-bg-size:               16px 12px !default; // In pixels because image dimensions
-$form-select-indicator-color:       $gray-800 !default;
-$form-select-indicator:             url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-select-indicator-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/></svg>") !default;
-
-$form-select-feedback-icon-padding-right: add(1em * .75, (2 * $form-select-padding-y * .75) + $form-select-padding-x + $form-select-indicator-padding) !default;
-$form-select-feedback-icon-position:      center right ($form-select-padding-x + $form-select-indicator-padding) !default;
-$form-select-feedback-icon-size:          $input-height-inner-half $input-height-inner-half !default;
-
-$form-select-border-width:        $input-border-width !default;
-$form-select-border-color:        $input-border-color !default;
-$form-select-border-radius:       $border-radius-md !default;
-$form-select-box-shadow:          $box-shadow-inset !default;
-
-$form-select-focus-border-color:  $input-focus-border-color !default;
-$form-select-focus-width:         $input-focus-width !default;
-$form-select-focus-box-shadow:    $input-focus-box-shadow !default;
-
-$form-select-padding-y-sm:        $input-padding-y-sm !default;
-$form-select-padding-x-sm:        $input-padding-x-sm !default;
-$form-select-font-size-sm:        $input-font-size-sm !default;
-$form-select-height-sm:           $input-height-sm !default;
-
-$form-select-padding-y-lg:        $input-padding-y-lg !default;
-$form-select-padding-x-lg:        $input-padding-x-lg !default;
-$form-select-font-size-lg:        $input-font-size-lg !default;
-$form-select-height-lg:           $input-height-lg !default;
-
-$form-range-track-width:          100% !default;
-$form-range-track-height:         .5rem !default;
-$form-range-track-cursor:         pointer !default;
-$form-range-track-bg:             $gray-300 !default;
-$form-range-track-border-radius:  1rem !default;
-$form-range-track-box-shadow:     $box-shadow-inset !default;
-
-$form-range-thumb-width:                   1rem !default;
-$form-range-thumb-height:                  $form-range-thumb-width !default;
-$form-range-thumb-bg:                      $component-active-bg !default;
-$form-range-thumb-border:                  0 !default;
-$form-range-thumb-border-radius:           1rem !default;
-$form-range-thumb-box-shadow:              0 .1rem .25rem rgba($black, .1) !default;
-$form-range-thumb-focus-box-shadow:        0 0 0 1px $body-bg, $input-focus-box-shadow !default;
-$form-range-thumb-focus-box-shadow-width:  $input-focus-width !default; // For focus box shadow issue in Edge
-$form-range-thumb-active-bg:               lighten($component-active-bg, 35%) !default;
-$form-range-thumb-disabled-bg:             $gray-500 !default;
-$form-range-thumb-transition:              background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
-
-$form-file-height:                $input-height !default;
-$form-file-focus-border-color:    $input-focus-border-color !default;
-$form-file-focus-box-shadow:      $input-focus-box-shadow !default;
-$form-file-disabled-bg:           $input-disabled-bg !default;
+$form-select-bg-position: right $form-select-padding-x center !default;
+$form-select-bg-size: 16px 12px !default; // In pixels because image dimensions
+$form-select-indicator-color: $gray-800 !default;
+$form-select-indicator: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-select-indicator-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/></svg>") !default;
+
+$form-select-feedback-icon-padding-right: add(
+  1em * 0.75,
+  (2 * $form-select-padding-y * 0.75) + $form-select-padding-x +
+    $form-select-indicator-padding
+) !default;
+$form-select-feedback-icon-position: center right
+  ($form-select-padding-x + $form-select-indicator-padding) !default;
+$form-select-feedback-icon-size: $input-height-inner-half
+  $input-height-inner-half !default;
+
+$form-select-border-width: $input-border-width !default;
+$form-select-border-color: $input-border-color !default;
+$form-select-border-radius: $border-radius-md !default;
+$form-select-box-shadow: $box-shadow-inset !default;
+
+$form-select-focus-border-color: $input-focus-border-color !default;
+$form-select-focus-width: $input-focus-width !default;
+$form-select-focus-box-shadow: $input-focus-box-shadow !default;
+
+$form-select-padding-y-sm: $input-padding-y-sm !default;
+$form-select-padding-x-sm: $input-padding-x-sm !default;
+$form-select-font-size-sm: $input-font-size-sm !default;
+$form-select-height-sm: $input-height-sm !default;
+
+$form-select-padding-y-lg: $input-padding-y-lg !default;
+$form-select-padding-x-lg: $input-padding-x-lg !default;
+$form-select-font-size-lg: $input-font-size-lg !default;
+$form-select-height-lg: $input-height-lg !default;
+
+$form-range-track-width: 100% !default;
+$form-range-track-height: 0.5rem !default;
+$form-range-track-cursor: pointer !default;
+$form-range-track-bg: $gray-300 !default;
+$form-range-track-border-radius: 1rem !default;
+$form-range-track-box-shadow: $box-shadow-inset !default;
+
+$form-range-thumb-width: 1rem !default;
+$form-range-thumb-height: $form-range-thumb-width !default;
+$form-range-thumb-bg: $component-active-bg !default;
+$form-range-thumb-border: 0 !default;
+$form-range-thumb-border-radius: 1rem !default;
+$form-range-thumb-box-shadow: 0 0.1rem 0.25rem rgba($black, 0.1) !default;
+$form-range-thumb-focus-box-shadow: 0 0 0 1px $body-bg, $input-focus-box-shadow !default;
+$form-range-thumb-focus-box-shadow-width: $input-focus-width !default; // For focus box shadow issue in Edge
+$form-range-thumb-active-bg: lighten($component-active-bg, 35%) !default;
+$form-range-thumb-disabled-bg: $gray-500 !default;
+$form-range-thumb-transition: background-color 0.15s ease-in-out,
+  border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !default;
+
+$form-file-height: $input-height !default;
+$form-file-focus-border-color: $input-focus-border-color !default;
+$form-file-focus-box-shadow: $input-focus-box-shadow !default;
+$form-file-disabled-bg: $input-disabled-bg !default;
 $form-file-disabled-border-color: $input-disabled-border-color !default;
 
-$form-file-padding-y:             $input-padding-y !default;
-$form-file-padding-x:             $input-padding-x !default;
-$form-file-line-height:           $input-line-height !default;
-$form-file-font-family:           $input-font-family !default;
-$form-file-font-weight:           $input-font-weight !default;
-$form-file-color:                 $input-color !default;
-$form-file-bg:                    $input-bg !default;
-$form-file-border-width:          $input-border-width !default;
-$form-file-border-color:          $input-border-color !default;
-$form-file-border-radius:         $input-border-radius !default;
-$form-file-box-shadow:            $input-box-shadow !default;
-$form-file-button-color:          $form-file-color !default;
-$form-file-button-bg:             $input-group-addon-bg !default;
-
-$form-file-padding-y-sm:          $input-padding-y-sm !default;
-$form-file-padding-x-sm:          $input-padding-x-sm !default;
-$form-file-font-size-sm:          $input-font-size-sm !default;
-$form-file-height-sm:             $input-height-sm !default;
-
-$form-file-padding-y-lg:          $input-padding-y-lg !default;
-$form-file-padding-x-lg:          $input-padding-x-lg !default;
-$form-file-font-size-lg:          $input-font-size-lg !default;
-$form-file-height-lg:             $input-height-lg !default;
-
+$form-file-padding-y: $input-padding-y !default;
+$form-file-padding-x: $input-padding-x !default;
+$form-file-line-height: $input-line-height !default;
+$form-file-font-family: $input-font-family !default;
+$form-file-font-weight: $input-font-weight !default;
+$form-file-color: $input-color !default;
+$form-file-bg: $input-bg !default;
+$form-file-border-width: $input-border-width !default;
+$form-file-border-color: $input-border-color !default;
+$form-file-border-radius: $input-border-radius !default;
+$form-file-box-shadow: $input-box-shadow !default;
+$form-file-button-color: $form-file-color !default;
+$form-file-button-bg: $input-group-addon-bg !default;
+
+$form-file-padding-y-sm: $input-padding-y-sm !default;
+$form-file-padding-x-sm: $input-padding-x-sm !default;
+$form-file-font-size-sm: $input-font-size-sm !default;
+$form-file-height-sm: $input-height-sm !default;
+
+$form-file-padding-y-lg: $input-padding-y-lg !default;
+$form-file-padding-x-lg: $input-padding-x-lg !default;
+$form-file-font-size-lg: $input-font-size-lg !default;
+$form-file-height-lg: $input-height-lg !default;
 
 // Form validation
 
-$form-feedback-margin-top:          $form-text-margin-top !default;
-$form-feedback-font-size:           $form-text-font-size !default;
-$form-feedback-font-style:          $form-text-font-style !default;
-$form-feedback-valid-color:         #66d432 !default;
-$form-feedback-invalid-color:       #fd5c70 !default;
+$form-feedback-margin-top: $form-text-margin-top !default;
+$form-feedback-font-size: $form-text-font-size !default;
+$form-feedback-font-style: $form-text-font-style !default;
+$form-feedback-valid-color: #66d432 !default;
+$form-feedback-invalid-color: #fd5c70 !default;
 
-$form-feedback-icon-valid-color:    $form-feedback-valid-color !default;
-$form-feedback-icon-valid:          url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8'><path fill='#{$form-feedback-icon-valid-color}' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/></svg>") !default;
-$form-feedback-icon-invalid-color:  $form-feedback-invalid-color !default;
-$form-feedback-icon-invalid:        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='#{$form-feedback-icon-invalid-color}' viewBox='0 0 12 12'><circle cx='6' cy='6' r='4.5'/><path stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/><circle cx='6' cy='8.2' r='.6' fill='#{$form-feedback-icon-invalid-color}' stroke='none'/></svg>") !default;
+$form-feedback-icon-valid-color: $form-feedback-valid-color !default;
+$form-feedback-icon-valid: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8'><path fill='#{$form-feedback-icon-valid-color}' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/></svg>") !default;
+$form-feedback-icon-invalid-color: $form-feedback-invalid-color !default;
+$form-feedback-icon-invalid: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='#{$form-feedback-icon-invalid-color}' viewBox='0 0 12 12'><circle cx='6' cy='6' r='4.5'/><path stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/><circle cx='6' cy='8.2' r='.6' fill='#{$form-feedback-icon-invalid-color}' stroke='none'/></svg>") !default;
 
 // scss-docs-start form-validation-states
 $form-validation-states: (
   "valid": (
     "color": $form-feedback-valid-color,
-    "icon": $form-feedback-icon-valid
+    "icon": $form-feedback-icon-valid,
   ),
   "invalid": (
     "color": $form-feedback-invalid-color,
-    "icon": $form-feedback-icon-invalid
-  )
+    "icon": $form-feedback-icon-invalid,
+  ),
 ) !default;
 // scss-docs-end form-validation-states
 
@@ -1047,532 +1086,530 @@ $form-validation-states: (
 // of components dependent on the z-axis and are designed to all work together.
 
 // scss-docs-start zindex-stack
-$zindex-dropdown:                   1000 !default;
-$zindex-sticky:                     1020 !default;
-$zindex-fixed:                      1030 !default;
-$zindex-modal-backdrop:             1040 !default;
-$zindex-modal:                      1050 !default;
-$zindex-popover:                    1060 !default;
-$zindex-tooltip:                    1070 !default;
+$zindex-dropdown: 1000 !default;
+$zindex-sticky: 1020 !default;
+$zindex-fixed: 1030 !default;
+$zindex-modal-backdrop: 1040 !default;
+$zindex-modal: 1050 !default;
+$zindex-popover: 1060 !default;
+$zindex-tooltip: 1070 !default;
 // scss-docs-end zindex-stack
 
-
 // Navs
 
-$nav-link-padding-y:                .5rem !default;
-$nav-link-padding-x:                1rem !default;
-$nav-link-font-size:                null !default;
-$nav-link-font-weight:              null !default;
-$nav-link-color:                    null !default;
-$nav-link-hover-color:              null !default;
-$nav-link-transition:               color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out !default;
-$nav-link-disabled-color:           $gray-600 !default;
-$nav-link-footer-padding:           .25rem !default;
-
-$nav-tabs-border-color:             $gray-300 !default;
-$nav-tabs-border-width:             $border-width !default;
-$nav-tabs-border-radius:            $border-radius-md !default;
-$nav-tabs-link-hover-border-color:  $gray-200 $gray-200 $nav-tabs-border-color !default;
-$nav-tabs-link-active-color:        $gray-700 !default;
-$nav-tabs-link-active-bg:           $body-bg !default;
+$nav-link-padding-y: 0.5rem !default;
+$nav-link-padding-x: 1rem !default;
+$nav-link-font-size: null !default;
+$nav-link-font-weight: null !default;
+$nav-link-color: null !default;
+$nav-link-hover-color: null !default;
+$nav-link-transition: color 0.15s ease-in-out,
+  background-color 0.15s ease-in-out, border-color 0.15s ease-in-out !default;
+$nav-link-disabled-color: $gray-600 !default;
+$nav-link-footer-padding: 0.25rem !default;
+
+$nav-tabs-border-color: $gray-300 !default;
+$nav-tabs-border-width: $border-width !default;
+$nav-tabs-border-radius: $border-radius-md !default;
+$nav-tabs-link-hover-border-color: $gray-200 $gray-200 $nav-tabs-border-color !default;
+$nav-tabs-link-active-color: $gray-700 !default;
+$nav-tabs-link-active-bg: $body-bg !default;
 $nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg !default;
 
-$nav-pills-border-radius:           0.75rem !default;
-$nav-pills-link-active-color:       $dark !default;
-$nav-pills-link-active-bg:          $white !default;
-$nav-pills-link-transition:         background-color .3s ease !default;
-$nav-pills-background:              $gray-100 !default;
-$nav-pills-vertical-background:     transparent !default;
-$nav-pills-vertical-radius:         1.1875rem !default;
-$nav-pills-vertical-link-radius:    .875rem !default;
-
+$nav-pills-border-radius: 0.75rem !default;
+$nav-pills-link-active-color: $dark !default;
+$nav-pills-link-active-bg: $white !default;
+$nav-pills-link-transition: background-color 0.3s ease !default;
+$nav-pills-background: $gray-100 !default;
+$nav-pills-vertical-background: transparent !default;
+$nav-pills-vertical-radius: 1.1875rem !default;
+$nav-pills-vertical-link-radius: 0.875rem !default;
 
 // Navbar
 
-$navbar-padding-y:                  $spacer * 0.5 !default;
-$navbar-padding-x:                  null !default;
-$navbar-box-shadow:                 0 2px 12px 0 rgba(0, 0, 0, .16) !default;
+$navbar-padding-y: $spacer * 0.5 !default;
+$navbar-padding-x: null !default;
+$navbar-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.16) !default;
 
-$navbar-nav-link-padding-x:         .5rem !default;
-$navbar-nav-link-padding:           $navbar-nav-link-padding-x 1rem !default;
+$navbar-nav-link-padding-x: 0.5rem !default;
+$navbar-nav-link-padding: $navbar-nav-link-padding-x 1rem !default;
 
-$navbar-brand-font-size:            $font-size-sm !default;
+$navbar-brand-font-size: $font-size-sm !default;
 // Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
-$nav-link-height:                   $font-size-base * $line-height-base + $nav-link-padding-y * 2 !default;
-$navbar-brand-height:               $navbar-brand-font-size * $line-height-base !default;
-$navbar-brand-padding-y:            ($nav-link-height - $navbar-brand-height) * 0.5 !default;
-$navbar-brand-margin-right:         1rem !default;
-
-$navbar-toggler-padding-y:          .25rem !default;
-$navbar-toggler-padding-x:          .75rem !default;
-$navbar-toggler-font-size:          $font-size-lg !default;
-$navbar-toggler-border-radius:      $btn-border-radius !default;
-$navbar-toggler-focus-width:        $btn-focus-width !default;
-$navbar-toggler-transition:         box-shadow .15s ease-in-out !default;
-
-$navbar-blur-bg-color:              rgba(255, 255, 255, .8) !default;
-$navbar-blur-dark-bg-color:         rgba(2, 5, 22, .8) !default;
-
-$navbar-dark-color:                 rgba($white, .85) !default;
-$navbar-dark-hover-color:           rgba($white, .75) !default;
-$navbar-dark-active-color:          $white !default;
-$navbar-dark-disabled-color:        rgba($white, .25) !default;
-$navbar-dark-toggler-icon-bg:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
-$navbar-dark-toggler-border-color:  rgba($white, .1) !default;
-
-$navbar-light-color:                $dark !default;
-$navbar-light-hover-color:          rgba($dark, .7) !default;
-$navbar-light-active-color:         rgba($dark, .9) !default;
-$navbar-light-disabled-color:       rgba($dark, .3) !default;
-$navbar-light-toggler-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-light-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
-$navbar-light-toggler-border-color: rgba($dark, .1) !default;
-
-$navbar-light-brand-color:          $navbar-light-active-color !default;
-$navbar-light-brand-hover-color:    $navbar-light-active-color !default;
-$navbar-dark-brand-color:           $navbar-dark-active-color !default;
-$navbar-dark-brand-hover-color:     $navbar-dark-active-color !default;
+$nav-link-height: $font-size-base * $line-height-base + $nav-link-padding-y * 2 !default;
+$navbar-brand-height: $navbar-brand-font-size * $line-height-base !default;
+$navbar-brand-padding-y: ($nav-link-height - $navbar-brand-height) * 0.5 !default;
+$navbar-brand-margin-right: 1rem !default;
+
+$navbar-toggler-padding-y: 0.25rem !default;
+$navbar-toggler-padding-x: 0.75rem !default;
+$navbar-toggler-font-size: $font-size-lg !default;
+$navbar-toggler-border-radius: $btn-border-radius !default;
+$navbar-toggler-focus-width: $btn-focus-width !default;
+$navbar-toggler-transition: box-shadow 0.15s ease-in-out !default;
+
+$navbar-blur-bg-color: rgba(255, 255, 255, 0.8) !default;
+$navbar-blur-dark-bg-color: rgba(2, 5, 22, 0.8) !default;
+
+$navbar-dark-color: rgba($white, 0.85) !default;
+$navbar-dark-hover-color: rgba($white, 0.75) !default;
+$navbar-dark-active-color: $white !default;
+$navbar-dark-disabled-color: rgba($white, 0.25) !default;
+$navbar-dark-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
+$navbar-dark-toggler-border-color: rgba($white, 0.1) !default;
+
+$navbar-light-color: $dark !default;
+$navbar-light-hover-color: rgba($dark, 0.7) !default;
+$navbar-light-active-color: rgba($dark, 0.9) !default;
+$navbar-light-disabled-color: rgba($dark, 0.3) !default;
+$navbar-light-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-light-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
+$navbar-light-toggler-border-color: rgba($dark, 0.1) !default;
+
+$navbar-light-brand-color: $navbar-light-active-color !default;
+$navbar-light-brand-hover-color: $navbar-light-active-color !default;
+$navbar-dark-brand-color: $navbar-dark-active-color !default;
+$navbar-dark-brand-hover-color: $navbar-dark-active-color !default;
 
 // Sidenav toggler
-$sidenav-toggler-width:              18px !default;
-$sidenav-toggler-line-transition:    all .15s ease !default;
-$sidenav-toggler-line-height:        2px !default;
+$sidenav-toggler-width: 18px !default;
+$sidenav-toggler-line-transition: all 0.15s ease !default;
+$sidenav-toggler-line-height: 2px !default;
 $sidenav-toggler-line-margin-bottom: 3px !default;
-$sidenav-toggler-line-active-width:  13px !default;
-$sidenav-toggler-line-transform:     translateX(5px) !default;
+$sidenav-toggler-line-active-width: 13px !default;
+$sidenav-toggler-line-transform: translateX(5px) !default;
 
 // Dropdowns
 //
 // Dropdown menu container and contents.
 
-$dropdown-min-width:                11rem !default;
-$dropdown-padding-x:                0 !default;
-$dropdown-padding-y:                .5rem !default;
-$dropdown-spacer:                   1.625rem !default;
-$dropdown-font-size:                $font-size-sm !default;
-$dropdown-color:                    $body-color !default;
-$dropdown-bg:                       $white !default;
-$dropdown-border-color:             transparent !default;
-$dropdown-border-radius:            $border-radius-md !default;
-$dropdown-border-width:             0 !default;
-$dropdown-inner-border-radius:      subtract($dropdown-border-radius, $dropdown-border-width) !default;
-$dropdown-transition-time:          .3s ease !default;
-$dropdown-divider-bg:               $dropdown-border-color !default;
-$dropdown-divider-margin-y:         $spacer * 0.5 !default;
-$dropdown-box-shadow:               $box-shadow-lg !default;
-
-$dropdown-link-color:               $font-color !default;
-$dropdown-link-hover-color:         $h-color !default;
-$dropdown-link-hover-bg:            $gray-200 !default;
-
-$dropdown-link-active-color:        $font-color !default;
-$dropdown-link-active-bg:           transparent !default;
-
-$dropdown-link-disabled-color:      $gray-600 !default;
-
-$dropdown-item-padding-y:           .3rem !default;
-$dropdown-item-padding-x:           $spacer !default;
-
-$dropdown-header-color:             $gray-600 !default;
-$dropdown-header-padding:           $dropdown-padding-y $dropdown-item-padding-x !default;
-
-$dropdown-dark-color:               $gray-300 !default;
-$dropdown-dark-bg:                  $gray-800 !default;
-$dropdown-dark-border-color:        $dropdown-border-color !default;
-$dropdown-dark-divider-bg:          $dropdown-divider-bg !default;
-$dropdown-dark-box-shadow:          null !default;
-$dropdown-dark-link-color:          $dropdown-dark-color !default;
-$dropdown-dark-link-hover-color:    $white !default;
-$dropdown-dark-link-hover-bg:       rgba($white, .15) !default;
-$dropdown-dark-link-active-color:   $dropdown-link-active-color !default;
-$dropdown-dark-link-active-bg:      $dropdown-link-active-bg !default;
+$dropdown-min-width: 11rem !default;
+$dropdown-padding-x: 0 !default;
+$dropdown-padding-y: 0.5rem !default;
+$dropdown-spacer: 1.625rem !default;
+$dropdown-font-size: $font-size-sm !default;
+$dropdown-color: $body-color !default;
+$dropdown-bg: $white !default;
+$dropdown-border-color: transparent !default;
+$dropdown-border-radius: $border-radius-md !default;
+$dropdown-border-width: 0 !default;
+$dropdown-inner-border-radius: subtract(
+  $dropdown-border-radius,
+  $dropdown-border-width
+) !default;
+$dropdown-transition-time: 0.3s ease !default;
+$dropdown-divider-bg: $dropdown-border-color !default;
+$dropdown-divider-margin-y: $spacer * 0.5 !default;
+$dropdown-box-shadow: $box-shadow-lg !default;
+
+$dropdown-link-color: $font-color !default;
+$dropdown-link-hover-color: $h-color !default;
+$dropdown-link-hover-bg: $gray-200 !default;
+
+$dropdown-link-active-color: $font-color !default;
+$dropdown-link-active-bg: transparent !default;
+
+$dropdown-link-disabled-color: $gray-600 !default;
+
+$dropdown-item-padding-y: 0.3rem !default;
+$dropdown-item-padding-x: $spacer !default;
+
+$dropdown-header-color: $gray-600 !default;
+$dropdown-header-padding: $dropdown-padding-y $dropdown-item-padding-x !default;
+
+$dropdown-dark-color: $gray-300 !default;
+$dropdown-dark-bg: $gray-800 !default;
+$dropdown-dark-border-color: $dropdown-border-color !default;
+$dropdown-dark-divider-bg: $dropdown-divider-bg !default;
+$dropdown-dark-box-shadow: null !default;
+$dropdown-dark-link-color: $dropdown-dark-color !default;
+$dropdown-dark-link-hover-color: $white !default;
+$dropdown-dark-link-hover-bg: rgba($white, 0.15) !default;
+$dropdown-dark-link-active-color: $dropdown-link-active-color !default;
+$dropdown-dark-link-active-bg: $dropdown-link-active-bg !default;
 $dropdown-dark-link-disabled-color: $gray-500 !default;
-$dropdown-dark-header-color:        $gray-500 !default;
-
+$dropdown-dark-header-color: $gray-500 !default;
 
 // Pagination
 
-$pagination-padding-y:              .375rem !default;
-$pagination-padding-x:              .75rem !default;
-$pagination-padding-y-sm:           .25rem !default;
-$pagination-padding-x-sm:           .5rem !default;
-$pagination-padding-y-lg:           .75rem !default;
-$pagination-padding-x-lg:           1.5rem !default;
-
-$pagination-color:                  $link-color !default;
-$pagination-bg:                     $white !default;
-$pagination-border-width:           $border-width !default;
-$pagination-border-radius:          $border-radius-md !default;
-$pagination-margin-left:            -$pagination-border-width !default;
-$pagination-border-color:           $gray-300 !default;
-
-$pagination-focus-color:            $link-hover-color !default;
-$pagination-focus-bg:               $gray-200 !default;
-$pagination-focus-box-shadow:       $input-btn-focus-box-shadow !default;
-$pagination-focus-outline:          0 !default;
-
-$pagination-hover-color:            $link-hover-color !default;
-$pagination-hover-bg:               $gray-200 !default;
-$pagination-hover-border-color:     $gray-300 !default;
-
-$pagination-active-color:           $component-active-color !default;
-$pagination-active-bg:              $component-active-bg !default;
-$pagination-active-border-color:    $pagination-active-bg !default;
-
-$pagination-disabled-color:         $gray-600 !default;
-$pagination-disabled-bg:            $white !default;
-$pagination-disabled-border-color:  $gray-300 !default;
-
-$pagination-transition:              color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
+$pagination-padding-y: 0.375rem !default;
+$pagination-padding-x: 0.75rem !default;
+$pagination-padding-y-sm: 0.25rem !default;
+$pagination-padding-x-sm: 0.5rem !default;
+$pagination-padding-y-lg: 0.75rem !default;
+$pagination-padding-x-lg: 1.5rem !default;
+
+$pagination-color: $link-color !default;
+$pagination-bg: $white !default;
+$pagination-border-width: $border-width !default;
+$pagination-border-radius: $border-radius-md !default;
+$pagination-margin-left: -$pagination-border-width !default;
+$pagination-border-color: $gray-300 !default;
+
+$pagination-focus-color: $link-hover-color !default;
+$pagination-focus-bg: $gray-200 !default;
+$pagination-focus-box-shadow: $input-btn-focus-box-shadow !default;
+$pagination-focus-outline: 0 !default;
+
+$pagination-hover-color: $link-hover-color !default;
+$pagination-hover-bg: $gray-200 !default;
+$pagination-hover-border-color: $gray-300 !default;
+
+$pagination-active-color: $component-active-color !default;
+$pagination-active-bg: $component-active-bg !default;
+$pagination-active-border-color: $pagination-active-bg !default;
+
+$pagination-disabled-color: $gray-600 !default;
+$pagination-disabled-bg: $white !default;
+$pagination-disabled-border-color: $gray-300 !default;
+
+$pagination-transition: color 0.15s ease-in-out,
+  background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,
+  box-shadow 0.15s ease-in-out !default;
 
 // Cards
 
-$card-spacer-y:                     $spacer !default;
-$card-spacer-x:                     $spacer !default;
-$card-title-spacer-y:               $spacer * 0.5 !default;
-$card-border-width:                 0 !default;
-$card-border-radius:                1rem !default;
-$card-border-color:                 rgba($black, .125) !default;
-$card-inner-border-radius:          subtract($card-border-radius, $card-border-width) !default;
-$card-cap-padding-y:                $card-spacer-y * 0.5 !default;
-$card-cap-padding-x:                $card-spacer-x !default;
-$card-cap-bg:                       $white !default;
-$card-cap-color:                    null !default;
-$card-height:                       null !default;
-$card-color:                        null !default;
-$card-bg:                           $white !default;
-
-$card-img-overlay-padding:          $spacer !default;
+$card-spacer-y: $spacer !default;
+$card-spacer-x: $spacer !default;
+$card-title-spacer-y: $spacer * 0.5 !default;
+$card-border-width: 0 !default;
+$card-border-radius: 1rem !default;
+$card-border-color: rgba($black, 0.125) !default;
+$card-inner-border-radius: subtract(
+  $card-border-radius,
+  $card-border-width
+) !default;
+$card-cap-padding-y: $card-spacer-y * 0.5 !default;
+$card-cap-padding-x: $card-spacer-x !default;
+$card-cap-bg: $white !default;
+$card-cap-color: null !default;
+$card-height: null !default;
+$card-color: null !default;
+$card-bg: $white !default;
 
-$card-group-margin:                 $grid-gutter-width * 0.5 !default;
+$card-img-overlay-padding: $spacer !default;
 
+$card-group-margin: $grid-gutter-width * 0.5 !default;
 
 // Accordion
-$accordion-padding-y:                     1rem !default;
-$accordion-padding-x:                     1rem !default;
-$accordion-color:                         $body-color !default;
-$accordion-bg:                            transparent !default;
-$accordion-border-width:                  0 !default;
-$accordion-border-color:                  rgba($black, .125) !default;
-$accordion-border-radius:                 $border-radius-sm !default;
-
-$accordion-body-padding-y:                $accordion-padding-y !default;
-$accordion-body-padding-x:                $accordion-padding-x !default;
-
-$accordion-button-padding-y:              $accordion-padding-y !default;
-$accordion-button-padding-x:              $accordion-padding-x !default;
-$accordion-button-color:                  $accordion-color !default;
-$accordion-button-bg:                     $accordion-bg !default;
-$accordion-transition:                    $btn-transition, border-radius .15s ease !default;
-$accordion-button-active-bg:              $accordion-bg !default;
-$accordion-button-active-color:           $dark !default;
-
-$accordion-button-focus-border-color:     $input-focus-border-color !default;
-$accordion-button-focus-box-shadow:       none !default;
-
-$accordion-icon-width:                    1rem !default;
-$accordion-icon-color:                    $accordion-color !default;
-$accordion-icon-active-color:             $accordion-button-active-color !default;
-$accordion-icon-transition:               transform .2s ease-in-out !default;
-$accordion-icon-transform:                rotate(180deg) !default;
-
-$accordion-button-icon:                   none !default;
-$accordion-button-active-icon:            none !default;
-
+$accordion-padding-y: 1rem !default;
+$accordion-padding-x: 1rem !default;
+$accordion-color: $body-color !default;
+$accordion-bg: transparent !default;
+$accordion-border-width: 0 !default;
+$accordion-border-color: rgba($black, 0.125) !default;
+$accordion-border-radius: $border-radius-sm !default;
+
+$accordion-body-padding-y: $accordion-padding-y !default;
+$accordion-body-padding-x: $accordion-padding-x !default;
+
+$accordion-button-padding-y: $accordion-padding-y !default;
+$accordion-button-padding-x: $accordion-padding-x !default;
+$accordion-button-color: $accordion-color !default;
+$accordion-button-bg: $accordion-bg !default;
+$accordion-transition: $btn-transition, border-radius 0.15s ease !default;
+$accordion-button-active-bg: $accordion-bg !default;
+$accordion-button-active-color: $dark !default;
+
+$accordion-button-focus-border-color: $input-focus-border-color !default;
+$accordion-button-focus-box-shadow: none !default;
+
+$accordion-icon-width: 1rem !default;
+$accordion-icon-color: $accordion-color !default;
+$accordion-icon-active-color: $accordion-button-active-color !default;
+$accordion-icon-transition: transform 0.2s ease-in-out !default;
+$accordion-icon-transform: rotate(180deg) !default;
+
+$accordion-button-icon: none !default;
+$accordion-button-active-icon: none !default;
 
 // Tooltips
 
-$tooltip-font-size:                 $font-size-sm !default;
-$tooltip-max-width:                 200px !default;
-$tooltip-color:                     $white !default;
-$tooltip-bg:                        $black !default;
-$tooltip-border-radius:             $border-radius-md !default;
-$tooltip-opacity:                   .9 !default;
-$tooltip-padding-y:                 $spacer * 0.25 !default;
-$tooltip-padding-x:                 $spacer * 0.5 !default;
-$tooltip-margin:                    0 !default;
+$tooltip-font-size: $font-size-sm !default;
+$tooltip-max-width: 200px !default;
+$tooltip-color: $white !default;
+$tooltip-bg: $black !default;
+$tooltip-border-radius: $border-radius-md !default;
+$tooltip-opacity: 0.9 !default;
+$tooltip-padding-y: $spacer * 0.25 !default;
+$tooltip-padding-x: $spacer * 0.5 !default;
+$tooltip-margin: 0 !default;
 
-$tooltip-arrow-width:               .8rem !default;
-$tooltip-arrow-height:              .4rem !default;
-$tooltip-arrow-color:               $tooltip-bg !default;
+$tooltip-arrow-width: 0.8rem !default;
+$tooltip-arrow-height: 0.4rem !default;
+$tooltip-arrow-color: $tooltip-bg !default;
 
 // Form tooltips must come after regular tooltips
-$form-feedback-tooltip-padding-y:     $tooltip-padding-y !default;
-$form-feedback-tooltip-padding-x:     $tooltip-padding-x !default;
-$form-feedback-tooltip-font-size:     $tooltip-font-size !default;
-$form-feedback-tooltip-line-height:   null !default;
-$form-feedback-tooltip-opacity:       $tooltip-opacity !default;
+$form-feedback-tooltip-padding-y: $tooltip-padding-y !default;
+$form-feedback-tooltip-padding-x: $tooltip-padding-x !default;
+$form-feedback-tooltip-font-size: $tooltip-font-size !default;
+$form-feedback-tooltip-line-height: null !default;
+$form-feedback-tooltip-opacity: $tooltip-opacity !default;
 $form-feedback-tooltip-border-radius: $tooltip-border-radius !default;
 
-
 // Popovers
 
-$popover-font-size:                 $font-size-xs !default;
-$popover-bg:                        $white !default;
-$popover-max-width:                 276px !default;
-$popover-border-width:              0px !default;
-$popover-border-color:              rgba($black, .2) !default;
-$popover-border-radius:             $border-radius-lg !default;
-$popover-inner-border-radius:       subtract($popover-border-radius, $popover-border-width) !default;
-$popover-box-shadow:                $box-shadow-sm !default;
-
-$popover-header-bg:                 $gray-200 !default;
-$popover-header-color:              $headings-color !default;
-$popover-header-padding-y:          .5rem !default;
-$popover-header-padding-x:          $spacer !default;
+$popover-font-size: $font-size-xs !default;
+$popover-bg: $white !default;
+$popover-max-width: 276px !default;
+$popover-border-width: 0px !default;
+$popover-border-color: rgba($black, 0.2) !default;
+$popover-border-radius: $border-radius-lg !default;
+$popover-inner-border-radius: subtract(
+  $popover-border-radius,
+  $popover-border-width
+) !default;
+$popover-box-shadow: $box-shadow-sm !default;
 
-$popover-body-color:                $font-color !default;
-$popover-body-padding-y:            $spacer !default;
-$popover-body-padding-x:            $spacer !default;
+$popover-header-bg: $gray-200 !default;
+$popover-header-color: $headings-color !default;
+$popover-header-padding-y: 0.5rem !default;
+$popover-header-padding-x: $spacer !default;
 
-$popover-arrow-width:               1rem !default;
-$popover-arrow-height:              .5rem !default;
-$popover-arrow-color:               $popover-bg !default;
+$popover-body-color: $font-color !default;
+$popover-body-padding-y: $spacer !default;
+$popover-body-padding-x: $spacer !default;
 
-$popover-arrow-outer-color:         fade-in($popover-border-color, .05) !default;
+$popover-arrow-width: 1rem !default;
+$popover-arrow-height: 0.5rem !default;
+$popover-arrow-color: $popover-bg !default;
 
+$popover-arrow-outer-color: fade-in($popover-border-color, 0.05) !default;
 
 // Toasts
 
-$toast-max-width:                   350px !default;
-$toast-padding-x:                   .75rem !default;
-$toast-padding-y:                   .75rem !default;
-$toast-font-size:                   .875rem !default;
-$toast-color:                       null !default;
-$toast-background-color:            rgba($white, .85) !default;
-$toast-border-width:                0 !default;
-$toast-border-color:                transparent !default;
-$toast-border-radius:               $border-radius-md !default;
-$toast-box-shadow:                  $box-shadow !default;
-
-$toast-header-color:                $h-color !default;
-$toast-header-background-color:     rgba($white, .85) !default;
-$toast-header-border-color:         rgba(0, 0, 0, .05) !default;
-
+$toast-max-width: 350px !default;
+$toast-padding-x: 0.75rem !default;
+$toast-padding-y: 0.75rem !default;
+$toast-font-size: 0.875rem !default;
+$toast-color: null !default;
+$toast-background-color: rgba($white, 0.85) !default;
+$toast-border-width: 0 !default;
+$toast-border-color: transparent !default;
+$toast-border-radius: $border-radius-md !default;
+$toast-box-shadow: $box-shadow !default;
+
+$toast-header-color: $h-color !default;
+$toast-header-background-color: rgba($white, 0.85) !default;
+$toast-header-border-color: rgba(0, 0, 0, 0.05) !default;
 
 // Badges
 
-$badge-font-size:                   .75em !default;
-$badge-font-weight:                 $font-weight-bolder !default;
-$badge-color:                       $white !default;
-$badge-padding-y:                   .55em !default;
-$badge-padding-x:                   .9em !default;
-$badge-border-radius-custom:        .45rem !default;
-$badge-border-radius:               $badge-border-radius-custom !default;
-
+$badge-font-size: 0.75em !default;
+$badge-font-weight: $font-weight-bolder !default;
+$badge-color: $white !default;
+$badge-padding-y: 0.55em !default;
+$badge-padding-x: 0.9em !default;
+$badge-border-radius-custom: 0.45rem !default;
+$badge-border-radius: $badge-border-radius-custom !default;
 
 // Modals
 
 // Padding applied to the modal body
-$modal-inner-padding:               $spacer !default;
+$modal-inner-padding: $spacer !default;
 
 // Margin between elements in footer, must be lower than or equal to 2 * $modal-inner-padding
-$modal-footer-margin-between:       .5rem !default;
-
-$modal-dialog-margin:               .5rem !default;
-$modal-dialog-margin-y-sm-up:       1.75rem !default;
-
-$modal-title-line-height:           $line-height-base !default;
-
-$modal-content-color:               null !default;
-$modal-content-bg:                  $white !default;
-$modal-content-border-color:        rgba($black, .2) !default;
-$modal-content-border-width:        $border-width !default;
-$modal-content-border-radius:       $border-radius-lg !default;
-$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width) !default;
-$modal-content-box-shadow-xs:       $box-shadow-sm !default;
-$modal-content-box-shadow-sm-up:    $box-shadow !default;
-
-$modal-backdrop-bg:                 $black !default;
-$modal-backdrop-opacity:            .5 !default;
-$modal-header-border-color:         $border-color !default;
-$modal-footer-border-color:         $modal-header-border-color !default;
-$modal-header-border-width:         $modal-content-border-width !default;
-$modal-footer-border-width:         $modal-header-border-width !default;
-$modal-header-padding-y:            $modal-inner-padding !default;
-$modal-header-padding-x:            $modal-inner-padding !default;
-$modal-header-padding:              $modal-header-padding-y $modal-header-padding-x !default; // Keep this for backwards compatibility
-
-$modal-sm:                          300px !default;
-$modal-md:                          500px !default;
-$modal-lg:                          800px !default;
-$modal-xl:                          1140px !default;
-
-$modal-fade-transform:              translate(0, -50px) !default;
-$modal-show-transform:              none !default;
-$modal-transition:                  transform .3s ease-out !default;
-$modal-scale-transform:             scale(1.02) !default;
+$modal-footer-margin-between: 0.5rem !default;
 
+$modal-dialog-margin: 0.5rem !default;
+$modal-dialog-margin-y-sm-up: 1.75rem !default;
+
+$modal-title-line-height: $line-height-base !default;
+
+$modal-content-color: null !default;
+$modal-content-bg: $white !default;
+$modal-content-border-color: rgba($black, 0.2) !default;
+$modal-content-border-width: $border-width !default;
+$modal-content-border-radius: $border-radius-lg !default;
+$modal-content-inner-border-radius: subtract(
+  $modal-content-border-radius,
+  $modal-content-border-width
+) !default;
+$modal-content-box-shadow-xs: $box-shadow-sm !default;
+$modal-content-box-shadow-sm-up: $box-shadow !default;
+
+$modal-backdrop-bg: $black !default;
+$modal-backdrop-opacity: 0.5 !default;
+$modal-header-border-color: $border-color !default;
+$modal-footer-border-color: $modal-header-border-color !default;
+$modal-header-border-width: $modal-content-border-width !default;
+$modal-footer-border-width: $modal-header-border-width !default;
+$modal-header-padding-y: $modal-inner-padding !default;
+$modal-header-padding-x: $modal-inner-padding !default;
+$modal-header-padding: $modal-header-padding-y $modal-header-padding-x !default; // Keep this for backwards compatibility
+
+$modal-sm: 300px !default;
+$modal-md: 500px !default;
+$modal-lg: 800px !default;
+$modal-xl: 1140px !default;
+
+$modal-fade-transform: translate(0, -50px) !default;
+$modal-show-transform: none !default;
+$modal-transition: transform 0.3s ease-out !default;
+$modal-scale-transform: scale(1.02) !default;
 
 // Alerts
 //
 // Define alert colors, border radius, and padding.
 
-$alert-padding-y:                   $spacer !default;
-$alert-padding-x:                   $spacer !default;
-$alert-margin-bottom:               1rem !default;
-$alert-border-radius:               $border-radius-md !default;
-$alert-link-font-weight:            $font-weight-bold !default;
-$alert-border-width:                $border-width !default;
-
-$alert-bg-level:                    -10 !default;
-$alert-border-level:                -9 !default;
-$alert-color-level:                 6 !default;
+$alert-padding-y: $spacer !default;
+$alert-padding-x: $spacer !default;
+$alert-margin-bottom: 1rem !default;
+$alert-border-radius: $border-radius-md !default;
+$alert-link-font-weight: $font-weight-bold !default;
+$alert-border-width: $border-width !default;
 
-$alert-dismissible-padding-r:       $alert-padding-x * 3 !default; // 3x covers width of x plus default padding on either side
+$alert-bg-level: -10 !default;
+$alert-border-level: -9 !default;
+$alert-color-level: 6 !default;
 
+$alert-dismissible-padding-r: $alert-padding-x * 3 !default; // 3x covers width of x plus default padding on either side
 
 // Progress bars
 
-$progress-height:                   3px !default;
-$progress-bar-height:               6px !default;
-$progress-height-sm:                4px !default;
-$progress-height-lg:                20px !default;
-$progress-font-size:                $font-size-base * .75 !default;
-$progress-bg:                       $gray-200 !default;
-$progress-border-radius:            $border-radius-md !default;
-$progress-box-shadow:               $box-shadow-inset !default;
-$progress-bar-color:                $white !default;
-$progress-bar-bg:                   $primary !default;
-$progress-bar-animation-timing:     1s linear infinite !default;
-$progress-bar-transition:           width .6s ease !default;
-
+$progress-height: 3px !default;
+$progress-bar-height: 6px !default;
+$progress-height-sm: 4px !default;
+$progress-height-lg: 20px !default;
+$progress-font-size: $font-size-base * 0.75 !default;
+$progress-bg: $gray-200 !default;
+$progress-border-radius: $border-radius-md !default;
+$progress-box-shadow: $box-shadow-inset !default;
+$progress-bar-color: $white !default;
+$progress-bar-bg: $primary !default;
+$progress-bar-animation-timing: 1s linear infinite !default;
+$progress-bar-transition: width 0.6s ease !default;
 
 // List group
 
-$list-group-color:                  inherit !default;
-$list-group-bg:                     $white !default;
-$list-group-border-color:           rgba($black, .125) !default;
-$list-group-border-width:           $border-width !default;
-$list-group-border-radius:          $border-radius-md !default;
-
-$list-group-item-padding-y:         $spacer * 0.5 !default;
-$list-group-item-padding-x:         $spacer !default;
-$list-group-item-bg-level:          -9 !default;
-$list-group-item-color-level:       6 !default;
+$list-group-color: inherit !default;
+$list-group-bg: $white !default;
+$list-group-border-color: rgba($black, 0.125) !default;
+$list-group-border-width: $border-width !default;
+$list-group-border-radius: $border-radius-md !default;
 
-$list-group-hover-bg:               $gray-100 !default;
-$list-group-active-color:           $component-active-color !default;
-$list-group-active-bg:              $component-active-bg !default;
-$list-group-active-border-color:    $list-group-active-bg !default;
+$list-group-item-padding-y: $spacer * 0.5 !default;
+$list-group-item-padding-x: $spacer !default;
+$list-group-item-bg-level: -9 !default;
+$list-group-item-color-level: 6 !default;
 
-$list-group-disabled-color:         $gray-600 !default;
-$list-group-disabled-bg:            $list-group-bg !default;
+$list-group-hover-bg: $gray-100 !default;
+$list-group-active-color: $component-active-color !default;
+$list-group-active-bg: $component-active-bg !default;
+$list-group-active-border-color: $list-group-active-bg !default;
 
-$list-group-action-color:           $gray-700 !default;
-$list-group-action-hover-color:     $list-group-action-color !default;
+$list-group-disabled-color: $gray-600 !default;
+$list-group-disabled-bg: $list-group-bg !default;
 
-$list-group-action-active-color:    $body-color !default;
-$list-group-action-active-bg:       $gray-200 !default;
+$list-group-action-color: $gray-700 !default;
+$list-group-action-hover-color: $list-group-action-color !default;
 
+$list-group-action-active-color: $body-color !default;
+$list-group-action-active-bg: $gray-200 !default;
 
 // Image thumbnails
 
-$thumbnail-padding:                 .25rem !default;
-$thumbnail-bg:                      $body-bg !default;
-$thumbnail-border-width:            $border-width !default;
-$thumbnail-border-color:            $gray-300 !default;
-$thumbnail-border-radius:           $border-radius-md !default;
-$thumbnail-box-shadow:              $box-shadow-sm !default;
-
+$thumbnail-padding: 0.25rem !default;
+$thumbnail-bg: $body-bg !default;
+$thumbnail-border-width: $border-width !default;
+$thumbnail-border-color: $gray-300 !default;
+$thumbnail-border-radius: $border-radius-md !default;
+$thumbnail-box-shadow: $box-shadow-sm !default;
 
 // Figures
 
-$figure-caption-font-size:          $small-font-size !default;
-$figure-caption-color:              $gray-600 !default;
-
+$figure-caption-font-size: $small-font-size !default;
+$figure-caption-color: $gray-600 !default;
 
 // Breadcrumbs
 
-$breadcrumb-font-size:              null !default;
-$breadcrumb-padding-y:              $spacer * 0.5 !default;
-$breadcrumb-padding-x:              $spacer !default;
-$breadcrumb-item-padding-x:         .5rem !default;
-$breadcrumb-margin-bottom:          1rem !default;
-$breadcrumb-bg:                     $gray-200 !default;
-$breadcrumb-divider-color:          $gray-600 !default;
-$breadcrumb-active-color:           $gray-600 !default;
-$breadcrumb-divider:                quote("/") !default;
-$breadcrumb-border-radius:          $border-radius-md !default;
+$breadcrumb-font-size: null !default;
+$breadcrumb-padding-y: $spacer * 0.5 !default;
+$breadcrumb-padding-x: $spacer !default;
+$breadcrumb-item-padding-x: 0.5rem !default;
+$breadcrumb-margin-bottom: 1rem !default;
+$breadcrumb-bg: $gray-200 !default;
+$breadcrumb-divider-color: $gray-600 !default;
+$breadcrumb-active-color: $gray-600 !default;
+$breadcrumb-divider: quote("/") !default;
+$breadcrumb-border-radius: $border-radius-md !default;
 
 // Carousel
 
-$carousel-control-color:             $white !default;
-$carousel-control-width:             15% !default;
-$carousel-control-opacity:           .5 !default;
-$carousel-control-hover-opacity:     .9 !default;
-$carousel-control-transition:        opacity .15s ease !default;
+$carousel-control-color: $white !default;
+$carousel-control-width: 15% !default;
+$carousel-control-opacity: 0.5 !default;
+$carousel-control-hover-opacity: 0.9 !default;
+$carousel-control-transition: opacity 0.15s ease !default;
 
-$carousel-indicator-width:           30px !default;
-$carousel-indicator-height:          3px !default;
+$carousel-indicator-width: 30px !default;
+$carousel-indicator-height: 3px !default;
 $carousel-indicator-hit-area-height: 10px !default;
-$carousel-indicator-spacer:          3px !default;
-$carousel-indicator-opacity:         .5 !default;
-$carousel-indicator-active-bg:       $white !default;
-$carousel-indicator-active-opacity:  1 !default;
-$carousel-indicator-transition:      opacity .6s ease !default;
+$carousel-indicator-spacer: 3px !default;
+$carousel-indicator-opacity: 0.5 !default;
+$carousel-indicator-active-bg: $white !default;
+$carousel-indicator-active-opacity: 1 !default;
+$carousel-indicator-transition: opacity 0.6s ease !default;
 
-$carousel-caption-width:             70% !default;
-$carousel-caption-color:             $white !default;
-$carousel-caption-padding-y:         1.25rem !default;
-$carousel-caption-spacer:            1.25rem !default;
+$carousel-caption-width: 70% !default;
+$carousel-caption-color: $white !default;
+$carousel-caption-padding-y: 1.25rem !default;
+$carousel-caption-spacer: 1.25rem !default;
 
-$carousel-control-icon-width:        2rem !default;
+$carousel-control-icon-width: 2rem !default;
 
-$carousel-control-prev-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 16 16'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/></svg>") !default;
-$carousel-control-next-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 16 16'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/></svg>") !default;
+$carousel-control-prev-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 16 16'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/></svg>") !default;
+$carousel-control-next-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 16 16'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/></svg>") !default;
 
-$carousel-transition-duration:       .6s !default;
-$carousel-transition:                transform $carousel-transition-duration ease-in-out !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)
-
-$carousel-dark-indicator-active-bg:  $black !default;
-$carousel-dark-caption-color:        $black !default;
-$carousel-dark-control-icon-filter:  invert(1) grayscale(100) !default;
+$carousel-transition-duration: 0.6s !default;
+$carousel-transition: transform $carousel-transition-duration ease-in-out !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)
 
+$carousel-dark-indicator-active-bg: $black !default;
+$carousel-dark-caption-color: $black !default;
+$carousel-dark-control-icon-filter: invert(1) grayscale(100) !default;
 
 // Spinners
 
-$spinner-width:           2rem !default;
-$spinner-height:          $spinner-width !default;
-$spinner-border-width:    .25em !default;
-$spinner-animation-speed: .75s !default;
-
-$spinner-width-sm:        1rem !default;
-$spinner-height-sm:       $spinner-width-sm !default;
-$spinner-border-width-sm: .2em !default;
+$spinner-width: 2rem !default;
+$spinner-height: $spinner-width !default;
+$spinner-border-width: 0.25em !default;
+$spinner-animation-speed: 0.75s !default;
 
+$spinner-width-sm: 1rem !default;
+$spinner-height-sm: $spinner-width-sm !default;
+$spinner-border-width-sm: 0.2em !default;
 
 // Close
 
-$btn-close-width:            1em !default;
-$btn-close-height:           $btn-close-width !default;
-$btn-close-padding-x:        .25em !default;
-$btn-close-padding-y:        $btn-close-padding-x !default;
-$btn-close-color:            $white !default;
-$btn-close-bg:               url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='#{$btn-close-color}' viewBox='0 0 16 16'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>") !default;
-$btn-close-focus-shadow:     $input-btn-focus-box-shadow !default;
-$btn-close-opacity:          .5 !default;
-$btn-close-hover-opacity:    .75 !default;
-$btn-close-focus-opacity:    1 !default;
-$btn-close-disabled-opacity: .25 !default;
-$btn-close-white-filter:     invert(1) grayscale(100%) brightness(200%) !default;
+$btn-close-width: 1em !default;
+$btn-close-height: $btn-close-width !default;
+$btn-close-padding-x: 0.25em !default;
+$btn-close-padding-y: $btn-close-padding-x !default;
+$btn-close-color: $white !default;
+$btn-close-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='#{$btn-close-color}' viewBox='0 0 16 16'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>") !default;
+$btn-close-focus-shadow: $input-btn-focus-box-shadow !default;
+$btn-close-opacity: 0.5 !default;
+$btn-close-hover-opacity: 0.75 !default;
+$btn-close-focus-opacity: 1 !default;
+$btn-close-disabled-opacity: 0.25 !default;
+$btn-close-white-filter: invert(1) grayscale(100%) brightness(200%) !default;
 
 // Code
 
-$code-font-size:                    $small-font-size !default;
-$code-color:                        $pink !default;
+$code-font-size: $small-font-size !default;
+$code-color: $pink !default;
 
-$kbd-padding-y:                     .2rem !default;
-$kbd-padding-x:                     .4rem !default;
-$kbd-font-size:                     $code-font-size !default;
-$kbd-color:                         $white !default;
-$kbd-bg:                            $gray-900 !default;
-$pre-color:                         null !default;
+$kbd-padding-y: 0.2rem !default;
+$kbd-padding-x: 0.4rem !default;
+$kbd-font-size: $code-font-size !default;
+$kbd-color: $white !default;
+$kbd-bg: $gray-900 !default;
+$pre-color: null !default;
 
 // Tilt Animation
 
-$tilt-transform-style:              preserve-3d !default;
-$tilt-transform-up-transform:       translateZ(50px) scale(0.7) !default;
-$tilt-transform-up-transition:      all 0.5s !default;
+$tilt-transform-style: preserve-3d !default;
+$tilt-transform-up-transform: translateZ(50px) scale(0.7) !default;
+$tilt-transform-up-transition: all 0.5s !default;
 
 // Variables for Core
 
@@ -1581,26 +1618,25 @@ $tilt-transform-up-transition:      all 0.5s !default;
 @import "variables/cards";
 @import "variables/dark-version";
 @import "variables/dropdowns";
-@import 'variables/header';
-@import 'variables/info-areas';
-@import 'variables/navbar';
-@import 'variables/navbar-vertical';
-@import 'variables/utilities';
-@import 'variables/utilities-extend';
-@import 'variables/misc';
-@import 'variables/misc-extend';
-@import 'variables/form-switch';
-@import 'variables/fixed-plugin';
-@import 'variables/pagination';
-@import 'variables/badge';
-@import 'variables/rtl';
-@import 'variables/cards-extend';
-@import 'variables/choices';
-@import 'variables/timeline';
-@import 'variables/full-calendar';
-@import 'variables/social-buttons';
-@import 'variables/virtual-reality';
-
+@import "variables/header";
+@import "variables/info-areas";
+@import "variables/navbar";
+@import "variables/navbar-vertical";
+@import "variables/utilities";
+@import "variables/utilities-extend";
+@import "variables/misc";
+@import "variables/misc-extend";
+@import "variables/form-switch";
+@import "variables/fixed-plugin";
+@import "variables/pagination";
+@import "variables/badge";
+@import "variables/rtl";
+@import "variables/cards-extend";
+@import "variables/choices";
+@import "variables/timeline";
+@import "variables/full-calendar";
+@import "variables/social-buttons";
+@import "variables/virtual-reality";
 
 // Import Utilities
 @import "utilities";
diff --git a/src/assets/scss/soft-ui-dashboard/bootstrap/_accordion.scss b/src/assets/scss/soft-ui-dashboard/bootstrap/_accordion.scss
index fc62ceb..2d6ab38 100644
--- a/src/assets/scss/soft-ui-dashboard/bootstrap/_accordion.scss
+++ b/src/assets/scss/soft-ui-dashboard/bootstrap/_accordion.scss
@@ -93,7 +93,6 @@
   padding: $accordion-body-padding-y $accordion-body-padding-x;
 }
 
-
 // Flush accordion items
 //
 // Remove borders and border-radius to keep accordion items edge-to-edge.
@@ -108,8 +107,12 @@
     border-left: 0;
     @include border-radius(0);
 
-    &:first-child { border-top: 0; }
-    &:last-child { border-bottom: 0; }
+    &:first-child {
+      border-top: 0;
+    }
+    &:last-child {
+      border-bottom: 0;
+    }
 
     .accordion-button {
       @include border-radius(0);
diff --git a/src/assets/scss/soft-ui-dashboard/bootstrap/_alert.scss b/src/assets/scss/soft-ui-dashboard/bootstrap/_alert.scss
index 34f1e84..31bd411 100644
--- a/src/assets/scss/soft-ui-dashboard/bootstrap/_alert.scss
+++ b/src/assets/scss/soft-ui-dashboard/bootstrap/_alert.scss
@@ -21,7 +21,6 @@
   font-weight: $alert-link-font-weight;
 }
 
-
 // Dismissible alerts
 //
 // Expand the right padding and account for the close button's positioning.
@@ -39,7 +38,6 @@
   }
 }
 
-
 // scss-docs-start alert-modifiers
 // Generate contextual modifier classes for colorizing the alert.
 
@@ -48,7 +46,11 @@
   $alert-border: shift-color($value, $alert-border-scale);
   $alert-color: shift-color($value, $alert-color-scale);
   @if (contrast-ratio($alert-background, $alert-color) < $min-contrast-ratio) {
-    $alert-color: mix($value, color-contrast($alert-background), abs($alert-color-scale));
+    $alert-color: mix(
+      $value,
+      color-contrast($alert-background),
+      abs($alert-color-scale)
+    );
   }
   .alert-#{$state} {
     @include alert-variant($alert-background, $alert-border, $alert-color);
diff --git a/src/assets/scss/soft-ui-dashboard/bootstrap/_breadcrumb.scss b/src/assets/scss/soft-ui-dashboard/bootstrap/_breadcrumb.scss
index f7fafe7..bbd5552 100644
--- a/src/assets/scss/soft-ui-dashboard/bootstrap/_breadcrumb.scss
+++ b/src/assets/scss/soft-ui-dashboard/bootstrap/_breadcrumb.scss
@@ -18,7 +18,14 @@
       float: left; // Suppress inline spacings and underlining of the separator
       padding-right: $breadcrumb-item-padding-x;
       color: $breadcrumb-divider-color;
-      content: var(--#{$variable-prefix}breadcrumb-divider, escape-svg($breadcrumb-divider)) #{"/* rtl:"} var(--#{$variable-prefix}breadcrumb-divider, escape-svg($breadcrumb-divider-flipped)) #{"*/"};
+      content: var(
+          --#{$variable-prefix}breadcrumb-divider,
+          escape-svg($breadcrumb-divider)
+        )
+        #{"/* rtl:"} var(
+          --#{$variable-prefix}breadcrumb-divider,
+          escape-svg($breadcrumb-divider-flipped)
+        ) #{"*/"};
     }
   }
 
diff --git a/src/assets/scss/soft-ui-dashboard/bootstrap/_button-group.scss b/src/assets/scss/soft-ui-dashboard/bootstrap/_button-group.scss
index 13aa056..e7b961c 100644
--- a/src/assets/scss/soft-ui-dashboard/bootstrap/_button-group.scss
+++ b/src/assets/scss/soft-ui-dashboard/bootstrap/_button-group.scss
@@ -61,17 +61,20 @@
 //
 // Remix the default button sizing classes into new ones for easier manipulation.
 
-.btn-group-sm > .btn { @extend .btn-sm; }
-.btn-group-lg > .btn { @extend .btn-lg; }
-
+.btn-group-sm > .btn {
+  @extend .btn-sm;
+}
+.btn-group-lg > .btn {
+  @extend .btn-lg;
+}
 
 //
 // Split button dropdowns
 //
 
 .dropdown-toggle-split {
-  padding-right: $btn-padding-x * .75;
-  padding-left: $btn-padding-x * .75;
+  padding-right: $btn-padding-x * 0.75;
+  padding-left: $btn-padding-x * 0.75;
 
   &::after,
   .dropup &::after,
@@ -85,16 +88,15 @@
 }
 
 .btn-sm + .dropdown-toggle-split {
-  padding-right: $btn-padding-x-sm * .75;
-  padding-left: $btn-padding-x-sm * .75;
+  padding-right: $btn-padding-x-sm * 0.75;
+  padding-left: $btn-padding-x-sm * 0.75;
 }
 
 .btn-lg + .dropdown-toggle-split {
-  padding-right: $btn-padding-x-lg * .75;
-  padding-left: $btn-padding-x-lg * .75;
+  padding-right: $btn-padding-x-lg * 0.75;
+  padding-left: $btn-padding-x-lg * 0.75;
 }
 
-
 // The clickable button for toggling the menu
 // Set the same inset shadow as the :active state
 .btn-group.show .dropdown-toggle {
@@ -106,7 +108,6 @@
   }
 }
 
-
 //
 // Vertical button groups
 //
diff --git a/src/assets/scss/soft-ui-dashboard/bootstrap/_buttons.scss b/src/assets/scss/soft-ui-dashboard/bootstrap/_buttons.scss
index ee4287c..a1f96d9 100644
--- a/src/assets/scss/soft-ui-dashboard/bootstrap/_buttons.scss
+++ b/src/assets/scss/soft-ui-dashboard/bootstrap/_buttons.scss
@@ -16,7 +16,12 @@
   user-select: none;
   background-color: transparent;
   border: $btn-border-width solid transparent;
-  @include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-border-radius);
+  @include button-size(
+    $btn-padding-y,
+    $btn-padding-x,
+    $btn-font-size,
+    $btn-border-radius
+  );
   @include transition($btn-transition);
 
   &:hover {
@@ -50,7 +55,6 @@
   }
 }
 
-
 //
 // Alternate buttons
 //
@@ -69,7 +73,6 @@
 }
 // scss-docs-end btn-variant-loops
 
-
 //
 // Link buttons
 //
@@ -97,15 +100,24 @@
   // No need for an active state here
 }
 
-
 //
 // Button Sizes
 //
 
 .btn-lg {
-  @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-border-radius-lg);
+  @include button-size(
+    $btn-padding-y-lg,
+    $btn-padding-x-lg,
+    $btn-font-size-lg,
+    $btn-border-radius-lg
+  );
 }
 
 .btn-sm {
-  @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-border-radius-sm);
+  @include button-size(
+    $btn-padding-y-sm,
+    $btn-padding-x-sm,
+    $btn-font-size-sm,
+    $btn-border-radius-sm
+  );
 }
diff --git a/src/assets/scss/soft-ui-dashboard/bootstrap/_card.scss b/src/assets/scss/soft-ui-dashboard/bootstrap/_card.scss
index 22890f5..94f1b4c 100644
--- a/src/assets/scss/soft-ui-dashboard/bootstrap/_card.scss
+++ b/src/assets/scss/soft-ui-dashboard/bootstrap/_card.scss
@@ -29,7 +29,7 @@
       @include border-top-radius($card-inner-border-radius);
     }
 
-    &:last-child  {
+    &:last-child {
       border-bottom-width: 0;
       @include border-bottom-radius($card-inner-border-radius);
     }
@@ -56,7 +56,7 @@
 }
 
 .card-subtitle {
-  margin-top: -$card-title-spacer-y * .5;
+  margin-top: -$card-title-spacer-y * 0.5;
   margin-bottom: 0;
 }
 
@@ -86,7 +86,9 @@
   border-bottom: $card-border-width solid $card-border-color;
 
   &:first-child {
-    @include border-radius($card-inner-border-radius $card-inner-border-radius 0 0);
+    @include border-radius(
+      $card-inner-border-radius $card-inner-border-radius 0 0
+    );
   }
 }
 
@@ -97,19 +99,20 @@
   border-top: $card-border-width solid $card-border-color;
 
   &:last-child {
-    @include border-radius(0 0 $card-inner-border-radius $card-inner-border-radius);
+    @include border-radius(
+      0 0 $card-inner-border-radius $card-inner-border-radius
+    );
   }
 }
 
-
 //
 // Header navs
 //
 
 .card-header-tabs {
-  margin-right: -$card-cap-padding-x * .5;
+  margin-right: -$card-cap-padding-x * 0.5;
   margin-bottom: -$card-cap-padding-y;
-  margin-left: -$card-cap-padding-x * .5;
+  margin-left: -$card-cap-padding-x * 0.5;
   border-bottom: 0;
 
   @if $nav-tabs-link-active-bg != $card-bg {
@@ -121,8 +124,8 @@
 }
 
 .card-header-pills {
-  margin-right: -$card-cap-padding-x * .5;
-  margin-left: -$card-cap-padding-x * .5;
+  margin-right: -$card-cap-padding-x * 0.5;
+  margin-left: -$card-cap-padding-x * 0.5;
 }
 
 // Card image
@@ -152,7 +155,6 @@
   @include border-bottom-radius($card-inner-border-radius);
 }
 
-
 //
 // Card groups
 //
diff --git a/src/assets/scss/soft-ui-dashboard/bootstrap/_carousel.scss b/src/assets/scss/soft-ui-dashboard/bootstrap/_carousel.scss
index 3d8fb15..6ea3d65 100644
--- a/src/assets/scss/soft-ui-dashboard/bootstrap/_carousel.scss
+++ b/src/assets/scss/soft-ui-dashboard/bootstrap/_carousel.scss
@@ -55,7 +55,6 @@
 
 /* rtl:end:ignore */
 
-
 //
 // Alternate transitions
 //
@@ -82,7 +81,6 @@
   }
 }
 
-
 //
 // Left/right controls for nav
 //
@@ -117,11 +115,19 @@
 }
 .carousel-control-prev {
   left: 0;
-  background-image: if($enable-gradients, linear-gradient(90deg, rgba($black, .25), rgba($black, .001)), null);
+  background-image: if(
+    $enable-gradients,
+    linear-gradient(90deg, rgba($black, 0.25), rgba($black, 0.001)),
+    null
+  );
 }
 .carousel-control-next {
   right: 0;
-  background-image: if($enable-gradients, linear-gradient(270deg, rgba($black, .25), rgba($black, .001)), null);
+  background-image: if(
+    $enable-gradients,
+    linear-gradient(270deg, rgba($black, 0.25), rgba($black, 0.001)),
+    null
+  );
 }
 
 // Icons for within
@@ -195,16 +201,15 @@
   }
 }
 
-
 // Optional captions
 //
 //
 
 .carousel-caption {
   position: absolute;
-  right: (100% - $carousel-caption-width) * .5;
+  right: (100% - $carousel-caption-width) * 0.5;
   bottom: $carousel-caption-spacer;
-  left: (100% - $carousel-caption-width) * .5;
+  left: (100% - $carousel-caption-width) * 0.5;
   padding-top: $carousel-caption-padding-y;
   padding-bottom: $carousel-caption-padding-y;
   color: $carousel-caption-color;
diff --git a/src/assets/scss/soft-ui-dashboard/bootstrap/_close.scss b/src/assets/scss/soft-ui-dashboard/bootstrap/_close.scss
index 32a0f68..27fc146 100644
--- a/src/assets/scss/soft-ui-dashboard/bootstrap/_close.scss
+++ b/src/assets/scss/soft-ui-dashboard/bootstrap/_close.scss
@@ -9,7 +9,8 @@
   height: $btn-close-height;
   padding: $btn-close-padding-y $btn-close-padding-x;
   color: $btn-close-color;
-  background: transparent escape-svg($btn-close-bg) center / $btn-close-width auto no-repeat; // include transparent for button elements
+  background: transparent escape-svg($btn-close-bg) center / $btn-close-width
+    auto no-repeat; // include transparent for button elements
   border: 0; // for button elements
   @include border-radius();
   opacity: $btn-close-opacity;
diff --git a/src/assets/scss/soft-ui-dashboard/bootstrap/_dropdown.scss b/src/assets/scss/soft-ui-dashboard/bootstrap/_dropdown.scss
index adc1143..d3fbf68 100644
--- a/src/assets/scss/soft-ui-dashboard/bootstrap/_dropdown.scss
+++ b/src/assets/scss/soft-ui-dashboard/bootstrap/_dropdown.scss
@@ -116,7 +116,6 @@
   }
 }
 
-
 // Dividers (basically an `<hr>`) within the dropdown
 .dropdown-divider {
   height: 0;
diff --git a/src/assets/scss/soft-ui-dashboard/bootstrap/_functions.scss b/src/assets/scss/soft-ui-dashboard/bootstrap/_functions.scss
index 30539b3..27bacda 100644
--- a/src/assets/scss/soft-ui-dashboard/bootstrap/_functions.scss
+++ b/src/assets/scss/soft-ui-dashboard/bootstrap/_functions.scss
@@ -40,11 +40,21 @@
 // stylelint-disable scss/dollar-variable-pattern
 @function rgba-css-var($identifier, $target) {
   @if $identifier == "body" and $target == "bg" {
-    @return rgba(var(--#{$variable-prefix}#{$identifier}-bg-rgb), var(--#{$variable-prefix}#{$target}-opacity));
-  } @if $identifier == "body" and $target == "text" {
-    @return rgba(var(--#{$variable-prefix}#{$identifier}-color-rgb), var(--#{$variable-prefix}#{$target}-opacity));
+    @return rgba(
+      var(--#{$variable-prefix}#{$identifier}-bg-rgb),
+      var(--#{$variable-prefix}#{$target}-opacity)
+    );
+  }
+  @if $identifier == "body" and $target == "text" {
+    @return rgba(
+      var(--#{$variable-prefix}#{$identifier}-color-rgb),
+      var(--#{$variable-prefix}#{$target}-opacity)
+    );
   } @else {
-    @return rgba(var(--#{$variable-prefix}#{$identifier}-rgb), var(--#{$variable-prefix}#{$target}-opacity));
+    @return rgba(
+      var(--#{$variable-prefix}#{$identifier}-rgb),
+      var(--#{$variable-prefix}#{$target}-opacity)
+    );
   }
 }
 
@@ -55,10 +65,18 @@
     // allow to pass the $key and $value of the map as an function argument
     $_args: ();
     @each $arg in $args {
-      $_args: append($_args, if($arg == "$key", $key, if($arg == "$value", $value, $arg)));
+      $_args: append(
+        $_args,
+        if($arg == "$key", $key, if($arg == "$value", $value, $arg))
+      );
     }
 
-    $_map: map-merge($_map, ($key: call(get-function($func), $_args...)));
+    $_map: map-merge(
+      $_map,
+      (
+        $key: call(get-function($func), $_args...),
+      )
+    );
   }
 
   @return $_map;
@@ -90,7 +108,12 @@
   $result: ();
   @each $key, $value in $map {
     @if (index($values, $key) != null) {
-      $result: map-merge($result, ($key: $value));
+      $result: map-merge(
+        $result,
+        (
+          $key: $value,
+        )
+      );
     }
   }
   @return $result;
@@ -118,7 +141,12 @@
   $index: str-index($string, $search);
 
   @if $index {
-    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+    @return str-slice($string, 1, $index - 1) + $replace +
+      str-replace(
+        str-slice($string, $index + str-length($search)),
+        $search,
+        $replace
+      );
   }
 
   @return $string;
@@ -148,9 +176,37 @@
 
 // A list of pre-calculated numbers of pow(divide((divide($value, 255) + .055), 1.055), 2.4). (from 0 to 255)
 // stylelint-disable-next-line scss/dollar-variable-default, scss/dollar-variable-pattern
-$_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003 .0033 .0037 .004 .0044 .0048 .0052 .0056 .006 .0065 .007 .0075 .008 .0086 .0091 .0097 .0103 .011 .0116 .0123 .013 .0137 .0144 .0152 .016 .0168 .0176 .0185 .0194 .0203 .0212 .0222 .0232 .0242 .0252 .0262 .0273 .0284 .0296 .0307 .0319 .0331 .0343 .0356 .0369 .0382 .0395 .0409 .0423 .0437 .0452 .0467 .0482 .0497 .0513 .0529 .0545 .0561 .0578 .0595 .0612 .063 .0648 .0666 .0685 .0704 .0723 .0742 .0762 .0782 .0802 .0823 .0844 .0865 .0887 .0908 .0931 .0953 .0976 .0999 .1022 .1046 .107 .1095 .1119 .1144 .117 .1195 .1221 .1248 .1274 .1301 .1329 .1356 .1384 .1413 .1441 .147 .15 .1529 .1559 .159 .162 .1651 .1683 .1714 .1746 .1779 .1812 .1845 .1878 .1912 .1946 .1981 .2016 .2051 .2086 .2122 .2159 .2195 .2232 .227 .2307 .2346 .2384 .2423 .2462 .2502 .2542 .2582 .2623 .2664 .2705 .2747 .2789 .2831 .2874 .2918 .2961 .3005 .305 .3095 .314 .3185 .3231 .3278 .3325 .3372 .3419 .3467 .3515 .3564 .3613 .3663 .3712 .3763 .3813 .3864 .3916 .3968 .402 .4072 .4125 .4179 .4233 .4287 .4342 .4397 .4452 .4508 .4564 .4621 .4678 .4735 .4793 .4851 .491 .4969 .5029 .5089 .5149 .521 .5271 .5333 .5395 .5457 .552 .5583 .5647 .5711 .5776 .5841 .5906 .5972 .6038 .6105 .6172 .624 .6308 .6376 .6445 .6514 .6584 .6654 .6724 .6795 .6867 .6939 .7011 .7084 .7157 .7231 .7305 .7379 .7454 .7529 .7605 .7682 .7758 .7835 .7913 .7991 .807 .8148 .8228 .8308 .8388 .8469 .855 .8632 .8714 .8796 .8879 .8963 .9047 .9131 .9216 .9301 .9387 .9473 .956 .9647 .9734 .9823 .9911 1;
-
-@function color-contrast($background, $color-contrast-dark: $color-contrast-dark, $color-contrast-light: $color-contrast-light, $min-contrast-ratio: $min-contrast-ratio) {
+$_luminance-list: 0.0008 0.001 0.0011 0.0013 0.0015 0.0017 0.002 0.0022 0.0025
+  0.0027 0.003 0.0033 0.0037 0.004 0.0044 0.0048 0.0052 0.0056 0.006 0.0065
+  0.007 0.0075 0.008 0.0086 0.0091 0.0097 0.0103 0.011 0.0116 0.0123 0.013
+  0.0137 0.0144 0.0152 0.016 0.0168 0.0176 0.0185 0.0194 0.0203 0.0212 0.0222
+  0.0232 0.0242 0.0252 0.0262 0.0273 0.0284 0.0296 0.0307 0.0319 0.0331 0.0343
+  0.0356 0.0369 0.0382 0.0395 0.0409 0.0423 0.0437 0.0452 0.0467 0.0482 0.0497
+  0.0513 0.0529 0.0545 0.0561 0.0578 0.0595 0.0612 0.063 0.0648 0.0666 0.0685
+  0.0704 0.0723 0.0742 0.0762 0.0782 0.0802 0.0823 0.0844 0.0865 0.0887 0.0908
+  0.0931 0.0953 0.0976 0.0999 0.1022 0.1046 0.107 0.1095 0.1119 0.1144 0.117
+  0.1195 0.1221 0.1248 0.1274 0.1301 0.1329 0.1356 0.1384 0.1413 0.1441 0.147
+  0.15 0.1529 0.1559 0.159 0.162 0.1651 0.1683 0.1714 0.1746 0.1779 0.1812
+  0.1845 0.1878 0.1912 0.1946 0.1981 0.2016 0.2051 0.2086 0.2122 0.2159 0.2195
+  0.2232 0.227 0.2307 0.2346 0.2384 0.2423 0.2462 0.2502 0.2542 0.2582 0.2623
+  0.2664 0.2705 0.2747 0.2789 0.2831 0.2874 0.2918 0.2961 0.3005 0.305 0.3095
+  0.314 0.3185 0.3231 0.3278 0.3325 0.3372 0.3419 0.3467 0.3515 0.3564 0.3613
+  0.3663 0.3712 0.3763 0.3813 0.3864 0.3916 0.3968 0.402 0.4072 0.4125 0.4179
+  0.4233 0.4287 0.4342 0.4397 0.4452 0.4508 0.4564 0.4621 0.4678 0.4735 0.4793
+  0.4851 0.491 0.4969 0.5029 0.5089 0.5149 0.521 0.5271 0.5333 0.5395 0.5457
+  0.552 0.5583 0.5647 0.5711 0.5776 0.5841 0.5906 0.5972 0.6038 0.6105 0.6172
+  0.624 0.6308 0.6376 0.6445 0.6514 0.6584 0.6654 0.6724 0.6795 0.6867 0.6939
+  0.7011 0.7084 0.7157 0.7231 0.7305 0.7379 0.7454 0.7529 0.7605 0.7682 0.7758
+  0.7835 0.7913 0.7991 0.807 0.8148 0.8228 0.8308 0.8388 0.8469 0.855 0.8632
+  0.8714 0.8796 0.8879 0.8963 0.9047 0.9131 0.9216 0.9301 0.9387 0.9473 0.956
+  0.9647 0.9734 0.9823 0.9911 1;
+
+@function color-contrast(
+  $background,
+  $color-contrast-dark: $color-contrast-dark,
+  $color-contrast-light: $color-contrast-light,
+  $min-contrast-ratio: $min-contrast-ratio
+) {
   $foregrounds: $color-contrast-light, $color-contrast-dark, $white, $black;
   $max-ratio: 0;
   $max-ratio-color: null;
@@ -174,7 +230,11 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
   $l1: luminance($background);
   $l2: luminance(opaque($background, $foreground));
 
-  @return if($l1 > $l2, divide($l1 + .05, $l2 + .05), divide($l2 + .05, $l1 + .05));
+  @return if(
+    $l1 > $l2,
+    divide($l1 + 0.05, $l2 + 0.05),
+    divide($l2 + 0.05, $l1 + 0.05)
+  );
 }
 
 // Return WCAG2.0 relative luminance
@@ -184,15 +244,25 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
   $rgb: (
     "r": red($color),
     "g": green($color),
-    "b": blue($color)
+    "b": blue($color),
   );
 
   @each $name, $value in $rgb {
-    $value: if(divide($value, 255) < .03928, divide(divide($value, 255), 12.92), nth($_luminance-list, $value + 1));
-    $rgb: map-merge($rgb, ($name: $value));
+    $value: if(
+      divide($value, 255) < 0.03928,
+      divide(divide($value, 255), 12.92),
+      nth($_luminance-list, $value + 1)
+    );
+    $rgb: map-merge(
+      $rgb,
+      (
+        $name: $value,
+      )
+    );
   }
 
-  @return (map-get($rgb, "r") * .2126) + (map-get($rgb, "g") * .7152) + (map-get($rgb, "b") * .0722);
+  @return (map-get($rgb, "r") * 0.2126) + (map-get($rgb, "g") * 0.7152) +
+    (map-get($rgb, "b") * 0.0722);
 }
 
 // Return opaque color
@@ -214,7 +284,11 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
 
 // Shade the color if the weight is positive, else tint it
 @function shift-color($color, $weight) {
-  @return if($weight > 0, shade-color($color, $weight), tint-color($color, -$weight));
+  @return if(
+    $weight > 0,
+    shade-color($color, $weight),
+    tint-color($color, -$weight)
+  );
 }
 // scss-docs-end color-functions
 
@@ -228,11 +302,20 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
     @return $value1;
   }
 
-  @if type-of($value1) == number and type-of($value2) == number and comparable($value1, $value2) {
+  @if type-of($value1) ==
+    number and
+    type-of($value2) ==
+    number and
+    comparable($value1, $value2)
+  {
     @return $value1 + $value2;
   }
 
-  @return if($return-calc == true, calc(#{$value1} + #{$value2}), $value1 + unquote(" + ") + $value2);
+  @return if(
+    $return-calc == true,
+    calc(#{$value1} + #{$value2}),
+    $value1 + unquote(" + ") + $value2
+  );
 }
 
 @function subtract($value1, $value2, $return-calc: true) {
@@ -248,7 +331,12 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
     @return $value1;
   }
 
-  @if type-of($value1) == number and type-of($value2) == number and comparable($value1, $value2) {
+  @if type-of($value1) ==
+    number and
+    type-of($value2) ==
+    number and
+    comparable($value1, $value2)
+  {
     @return $value1 - $value2;
   }
 
@@ -256,11 +344,19 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
     $value2: unquote("(") + $value2 + unquote(")");
   }
 
-  @return if($return-calc == true, calc(#{$value1} - #{$value2}), $value1 + unquote(" - ") + $value2);
+  @return if(
+    $return-calc == true,
+    calc(#{$value1} - #{$value2}),
+    $value1 + unquote(" - ") + $value2
+  );
 }
 
 @function divide($dividend, $divisor, $precision: 10) {
-  $sign: if($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0, 1, -1);
+  $sign: if(
+    $dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0,
+    1,
+    -1
+  );
   $dividend: abs($dividend);
   $divisor: abs($divisor);
   @if $dividend == 0 {
@@ -279,7 +375,7 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
       $quotient: $quotient + 1;
     }
     $result: $result * 10 + $quotient;
-    $factor: $factor * .1;
+    $factor: $factor * 0.1;
     $remainder: $remainder * 10;
     $precision: $precision - 1;
     @if ($precision < 0 and $remainder >= $divisor * 5) {
@@ -293,9 +389,11 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
     "px": 1px,
     "rem": 1rem,
     "em": 1em,
-    "%": 1%
+    "%": 1%,
   );
-  @if ($dividend-unit != $divisor-unit and map-has-key($unit-map, $dividend-unit)) {
+  @if (
+    $dividend-unit != $divisor-unit and map-has-key($unit-map, $dividend-unit)
+  ) {
     $result: $result * map-get($unit-map, $dividend-unit);
   }
   @return $result;
diff --git a/src/assets/scss/soft-ui-dashboard/bootstrap/_grid.scss b/src/assets/scss/soft-ui-dashboard/bootstrap/_grid.scss
index 27fd558..b1af5b5 100644
--- a/src/assets/scss/soft-ui-dashboard/bootstrap/_grid.scss
+++ b/src/assets/scss/soft-ui-dashboard/bootstrap/_grid.scss
@@ -16,14 +16,16 @@
   .grid {
     display: grid;
     grid-template-rows: repeat(var(--#{$variable-prefix}rows, 1), 1fr);
-    grid-template-columns: repeat(var(--#{$variable-prefix}columns, #{$grid-columns}), 1fr);
+    grid-template-columns: repeat(
+      var(--#{$variable-prefix}columns, #{$grid-columns}),
+      1fr
+    );
     gap: var(--#{$variable-prefix}gap, #{$grid-gutter-width});
 
     @include make-cssgrid();
   }
 }
 
-
 // Columns
 //
 // Common styles for small and large grid columns
diff --git a/src/assets/scss/soft-ui-dashboard/bootstrap/_images.scss b/src/assets/scss/soft-ui-dashboard/bootstrap/_images.scss
index 3d6a101..61677ac 100644
--- a/src/assets/scss/soft-ui-dashboard/bootstrap/_images.scss
+++ b/src/assets/scss/soft-ui-dashboard/bootstrap/_images.scss
@@ -9,7 +9,6 @@
   @include img-fluid();
 }
 
-
 // Image thumbnails
 .img-thumbnail {
   padding: $thumbnail-padding;
@@ -32,7 +31,7 @@
 }
 
 .figure-img {
-  margin-bottom: $spacer * .5;
+  margin-bottom: $spacer * 0.5;
   line-height: 1;
 }
 
diff --git a/src/assets/scss/soft-ui-dashboard/bootstrap/_list-group.scss b/src/assets/scss/soft-ui-dashboard/bootstrap/_list-group.scss
index dcd61d2..3e586eb 100644
--- a/src/assets/scss/soft-ui-dashboard/bootstrap/_list-group.scss
+++ b/src/assets/scss/soft-ui-dashboard/bootstrap/_list-group.scss
@@ -23,7 +23,6 @@
   }
 }
 
-
 // Interactive list items
 //
 // Use anchor or button elements instead of `li`s or `div`s to create interactive
@@ -49,7 +48,6 @@
   }
 }
 
-
 // Individual list items
 //
 // Use on `li`s or `div`s within the `.list-group` parent.
@@ -96,7 +94,6 @@
   }
 }
 
-
 // Horizontal
 //
 // Change the layout of list group items from vertical (default) to horizontal.
@@ -137,7 +134,6 @@
   }
 }
 
-
 // Flush list items
 //
 // Remove borders and border-radius to keep list group items edge-to-edge. Most
@@ -155,7 +151,6 @@
   }
 }
 
-
 // scss-docs-start list-group-modifiers
 // List group contextual variants
 //
@@ -165,10 +160,21 @@
 @each $state, $value in $theme-colors {
   $list-group-variant-bg: shift-color($value, $list-group-item-bg-scale);
   $list-group-variant-color: shift-color($value, $list-group-item-color-scale);
-  @if (contrast-ratio($list-group-variant-bg, $list-group-variant-color) < $min-contrast-ratio) {
-    $list-group-variant-color: mix($value, color-contrast($list-group-variant-bg), abs($list-group-item-color-scale));
+  @if (
+    contrast-ratio($list-group-variant-bg, $list-group-variant-color) <
+      $min-contrast-ratio
+  ) {
+    $list-group-variant-color: mix(
+      $value,
+      color-contrast($list-group-variant-bg),
+      abs($list-group-item-color-scale)
+    );
   }
 
-  @include list-group-item-variant($state, $list-group-variant-bg, $list-group-variant-color);
+  @include list-group-item-variant(
+    $state,
+    $list-group-variant-bg,
+    $list-group-variant-color
+  );
 }
 // scss-docs-end list-group-modifiers
diff --git a/src/assets/scss/soft-ui-dashboard/bootstrap/_modal.scss b/src/assets/scss/soft-ui-dashboard/bootstrap/_modal.scss
index 21e1258..da87f9c 100644
--- a/src/assets/scss/soft-ui-dashboard/bootstrap/_modal.scss
+++ b/src/assets/scss/soft-ui-dashboard/bootstrap/_modal.scss
@@ -3,7 +3,6 @@
 // .modal-dialog    - positioning shell for the actual modal
 // .modal-content   - actual modal w/ bg and corners and stuff
 
-
 // Container that the modal scrolls within
 .modal {
   position: fixed;
@@ -85,7 +84,11 @@
 
 // Modal background
 .modal-backdrop {
-  @include overlay-backdrop($zindex-modal-backdrop, $modal-backdrop-bg, $modal-backdrop-opacity);
+  @include overlay-backdrop(
+    $zindex-modal-backdrop,
+    $modal-backdrop-bg,
+    $modal-backdrop-opacity
+  );
 }
 
 // Modal header
@@ -100,8 +103,9 @@
   @include border-top-radius($modal-content-inner-border-radius);
 
   .btn-close {
-    padding: ($modal-header-padding-y * .5) ($modal-header-padding-x * .5);
-    margin: ($modal-header-padding-y * -.5) ($modal-header-padding-x * -.5) ($modal-header-padding-y * -.5) auto;
+    padding: ($modal-header-padding-y * 0.5) ($modal-header-padding-x * 0.5);
+    margin: ($modal-header-padding-y * -0.5) ($modal-header-padding-x * -0.5)
+      ($modal-header-padding-y * -0.5) auto;
   }
 }
 
@@ -128,7 +132,7 @@
   flex-shrink: 0;
   align-items: center; // vertically center
   justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items
-  padding: $modal-inner-padding - $modal-footer-margin-between * .5;
+  padding: $modal-inner-padding - $modal-footer-margin-between * 0.5;
   border-top: $modal-footer-border-width solid $modal-footer-border-color;
   @include border-bottom-radius($modal-content-inner-border-radius);
 
@@ -136,7 +140,7 @@
   // This solution is far from ideal because of the universal selector usage,
   // but is needed to fix https://github.com/twbs/bootstrap/issues/24800
   > * {
-    margin: $modal-footer-margin-between * .5;
+    margin: $modal-footer-margin-between * 0.5;
   }
 }
 
@@ -160,7 +164,9 @@
     @include box-shadow($modal-content-box-shadow-sm-up);
   }
 
-  .modal-sm { max-width: $modal-sm; }
+  .modal-sm {
+    max-width: $modal-sm;
+  }
 }
 
 @include media-breakpoint-up(lg) {
@@ -171,7 +177,9 @@
 }
 
 @include media-breakpoint-up(xl) {
-  .modal-xl { max-width: $modal-xl; }
+  .modal-xl {
+    max-width: $modal-xl;
+  }
 }
 
 // scss-docs-start modal-fullscreen-loop
diff --git a/src/assets/scss/soft-ui-dashboard/bootstrap/_nav.scss b/src/assets/scss/soft-ui-dashboard/bootstrap/_nav.scss
index ffb27d8..588aa36 100644
--- a/src/assets/scss/soft-ui-dashboard/bootstrap/_nav.scss
+++ b/src/assets/scss/soft-ui-dashboard/bootstrap/_nav.scss
@@ -76,7 +76,6 @@
   }
 }
 
-
 //
 // Pills
 //
@@ -95,7 +94,6 @@
   }
 }
 
-
 //
 // Justified variants
 //
@@ -124,7 +122,6 @@
   }
 }
 
-
 // Tabbable tabs
 //
 // Hide tabbable panes to start, show them when `.active`
diff --git a/src/assets/scss/soft-ui-dashboard/bootstrap/_navbar.scss b/src/assets/scss/soft-ui-dashboard/bootstrap/_navbar.scss
index 001dfc9..103995d 100644
--- a/src/assets/scss/soft-ui-dashboard/bootstrap/_navbar.scss
+++ b/src/assets/scss/soft-ui-dashboard/bootstrap/_navbar.scss
@@ -8,7 +8,6 @@
 // Navbar position
 // Navbar themes
 
-
 // Navbar
 //
 // Provide a static navbar from which we expand to create full-width, fixed, and
@@ -48,7 +47,6 @@
   }
 }
 
-
 // Navbar brand
 //
 // Used for brand, project, or site names.
@@ -67,7 +65,6 @@
   }
 }
 
-
 // Navbar nav
 //
 // Custom navbar navigation (doesn't require `.nav`, but does make use of `.nav-link`).
@@ -89,7 +86,6 @@
   }
 }
 
-
 // Navbar text
 //
 //
@@ -99,7 +95,6 @@
   padding-bottom: $nav-link-padding-y;
 }
 
-
 // Responsive navbar
 //
 // Custom styles for responsive collapsing and toggling of navbar contents.
@@ -278,7 +273,7 @@
 
     a,
     a:hover,
-    a:focus  {
+    a:focus {
       color: $navbar-light-active-color;
     }
   }
diff --git a/src/assets/scss/soft-ui-dashboard/bootstrap/_offcanvas.scss b/src/assets/scss/soft-ui-dashboard/bootstrap/_offcanvas.scss
index a089c2a..5ee101b 100644
--- a/src/assets/scss/soft-ui-dashboard/bootstrap/_offcanvas.scss
+++ b/src/assets/scss/soft-ui-dashboard/bootstrap/_offcanvas.scss
@@ -15,7 +15,11 @@
 }
 
 .offcanvas-backdrop {
-  @include overlay-backdrop($zindex-offcanvas-backdrop, $offcanvas-backdrop-bg, $offcanvas-backdrop-opacity);
+  @include overlay-backdrop(
+    $zindex-offcanvas-backdrop,
+    $offcanvas-backdrop-bg,
+    $offcanvas-backdrop-opacity
+  );
 }
 
 .offcanvas-header {
@@ -25,10 +29,10 @@
   padding: $offcanvas-padding-y $offcanvas-padding-x;
 
   .btn-close {
-    padding: ($offcanvas-padding-y * .5) ($offcanvas-padding-x * .5);
-    margin-top: $offcanvas-padding-y * -.5;
-    margin-right: $offcanvas-padding-x * -.5;
-    margin-bottom: $offcanvas-padding-y * -.5;
+    padding: ($offcanvas-padding-y * 0.5) ($offcanvas-padding-x * 0.5);
+    margin-top: $offcanvas-padding-y * -0.5;
+    margin-right: $offcanvas-padding-x * -0.5;
+    margin-bottom: $offcanvas-padding-y * -0.5;
   }
 }
 
diff --git a/src/assets/scss/soft-ui-dashboard/bootstrap/_pagination.scss b/src/assets/scss/soft-ui-dashboard/bootstrap/_pagination.scss
index 9c46666..02a66d4 100644
--- a/src/assets/scss/soft-ui-dashboard/bootstrap/_pagination.scss
+++ b/src/assets/scss/soft-ui-dashboard/bootstrap/_pagination.scss
@@ -49,16 +49,30 @@
   }
 }
 
-
 //
 // Sizing
 //
-@include pagination-size($pagination-padding-y, $pagination-padding-x, null, $pagination-border-radius);
+@include pagination-size(
+  $pagination-padding-y,
+  $pagination-padding-x,
+  null,
+  $pagination-border-radius
+);
 
 .pagination-lg {
-  @include pagination-size($pagination-padding-y-lg, $pagination-padding-x-lg, $font-size-lg, $pagination-border-radius-lg);
+  @include pagination-size(
+    $pagination-padding-y-lg,
+    $pagination-padding-x-lg,
+    $font-size-lg,
+    $pagination-border-radius-lg
+  );
 }
 
 .pagination-sm {
-  @include pagination-size($pagination-padding-y-sm, $pagination-padding-x-sm, $font-size-sm, $pagination-border-radius-sm);
+  @include pagination-size(
+    $pagination-padding-y-sm,
+    $pagination-padding-x-sm,
+    $font-size-sm,
+    $pagination-border-radius-sm
+  );
 }
diff --git a/src/assets/scss/soft-ui-dashboard/bootstrap/_placeholders.scss b/src/assets/scss/soft-ui-dashboard/bootstrap/_placeholders.scss
index 2f647cc..f0d29e1 100644
--- a/src/assets/scss/soft-ui-dashboard/bootstrap/_placeholders.scss
+++ b/src/assets/scss/soft-ui-dashboard/bootstrap/_placeholders.scss
@@ -14,11 +14,11 @@
 
 // Sizing
 .placeholder-xs {
-  min-height: .6em;
+  min-height: 0.6em;
 }
 
 .placeholder-sm {
-  min-height: .8em;
+  min-height: 0.8em;
 }
 
 .placeholder-lg {
@@ -39,7 +39,12 @@
 }
 
 .placeholder-wave {
-  mask-image: linear-gradient(130deg, $black 55%, rgba(0, 0, 0, (1 - $placeholder-opacity-min)) 75%, $black 95%);
+  mask-image: linear-gradient(
+    130deg,
+    $black 55%,
+    rgba(0, 0, 0, (1 - $placeholder-opacity-min)) 75%,
+    $black 95%
+  );
   mask-size: 200% 100%;
   animation: placeholder-wave 2s linear infinite;
 }
diff --git a/src/assets/scss/soft-ui-dashboard/bootstrap/_popover.scss b/src/assets/scss/soft-ui-dashboard/bootstrap/_popover.scss
index 3b8208e..8d8a507 100644
--- a/src/assets/scss/soft-ui-dashboard/bootstrap/_popover.scss
+++ b/src/assets/scss/soft-ui-dashboard/bootstrap/_popover.scss
@@ -40,13 +40,13 @@
 
     &::before {
       bottom: 0;
-      border-width: $popover-arrow-height ($popover-arrow-width * .5) 0;
+      border-width: $popover-arrow-height ($popover-arrow-width * 0.5) 0;
       border-top-color: $popover-arrow-outer-color;
     }
 
     &::after {
       bottom: $popover-border-width;
-      border-width: $popover-arrow-height ($popover-arrow-width * .5) 0;
+      border-width: $popover-arrow-height ($popover-arrow-width * 0.5) 0;
       border-top-color: $popover-arrow-color;
     }
   }
@@ -60,13 +60,15 @@
 
     &::before {
       left: 0;
-      border-width: ($popover-arrow-width * .5) $popover-arrow-height ($popover-arrow-width * .5) 0;
+      border-width: ($popover-arrow-width * 0.5) $popover-arrow-height
+        ($popover-arrow-width * 0.5) 0;
       border-right-color: $popover-arrow-outer-color;
     }
 
     &::after {
       left: $popover-border-width;
-      border-width: ($popover-arrow-width * .5) $popover-arrow-height ($popover-arrow-width * .5) 0;
+      border-width: ($popover-arrow-width * 0.5) $popover-arrow-height
+        ($popover-arrow-width * 0.5) 0;
       border-right-color: $popover-arrow-color;
     }
   }
@@ -78,13 +80,15 @@
 
     &::before {
       top: 0;
-      border-width: 0 ($popover-arrow-width * .5) $popover-arrow-height ($popover-arrow-width * .5);
+      border-width: 0 ($popover-arrow-width * 0.5) $popover-arrow-height
+        ($popover-arrow-width * 0.5);
       border-bottom-color: $popover-arrow-outer-color;
     }
 
     &::after {
       top: $popover-border-width;
-      border-width: 0 ($popover-arrow-width * .5) $popover-arrow-height ($popover-arrow-width * .5);
+      border-width: 0 ($popover-arrow-width * 0.5) $popover-arrow-height
+        ($popover-arrow-width * 0.5);
       border-bottom-color: $popover-arrow-color;
     }
   }
@@ -96,7 +100,7 @@
     left: 50%;
     display: block;
     width: $popover-arrow-width;
-    margin-left: -$popover-arrow-width * .5;
+    margin-left: -$popover-arrow-width * 0.5;
     content: "";
     border-bottom: $popover-border-width solid $popover-header-bg;
   }
@@ -110,13 +114,15 @@
 
     &::before {
       right: 0;
-      border-width: ($popover-arrow-width * .5) 0 ($popover-arrow-width * .5) $popover-arrow-height;
+      border-width: ($popover-arrow-width * 0.5) 0 ($popover-arrow-width * 0.5)
+        $popover-arrow-height;
       border-left-color: $popover-arrow-outer-color;
     }
 
     &::after {
       right: $popover-border-width;
-      border-width: ($popover-arrow-width * .5) 0 ($popover-arrow-width * .5) $popover-arrow-height;
+      border-width: ($popover-arrow-width * 0.5) 0 ($popover-arrow-width * 0.5)
+        $popover-arrow-height;
       border-left-color: $popover-arrow-color;
     }
   }
diff --git a/src/assets/scss/soft-ui-dashboard/bootstrap/_progress.scss b/src/assets/scss/soft-ui-dashboard/bootstrap/_progress.scss
index 5715ab0..287ba89 100644
--- a/src/assets/scss/soft-ui-dashboard/bootstrap/_progress.scss
+++ b/src/assets/scss/soft-ui-dashboard/bootstrap/_progress.scss
@@ -3,7 +3,9 @@
 // scss-docs-start progress-keyframes
 @if $enable-transitions {
   @keyframes progress-bar-stripes {
-    0% { background-position-x: $progress-height; }
+    0% {
+      background-position-x: $progress-height;
+    }
   }
 }
 // scss-docs-end progress-keyframes
diff --git a/src/assets/scss/soft-ui-dashboard/bootstrap/_reboot.scss b/src/assets/scss/soft-ui-dashboard/bootstrap/_reboot.scss
index 79fedc6..23e19a3 100644
--- a/src/assets/scss/soft-ui-dashboard/bootstrap/_reboot.scss
+++ b/src/assets/scss/soft-ui-dashboard/bootstrap/_reboot.scss
@@ -1,6 +1,5 @@
 // stylelint-disable declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix
 
-
 // Reboot
 //
 // Normalization of HTML elements, manually forked from Normalize.css to remove
@@ -8,7 +7,6 @@
 //
 // Normalize is licensed MIT. https://github.com/necolas/normalize.css
 
-
 // Document
 //
 // Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`.
@@ -19,7 +17,6 @@
   box-sizing: border-box;
 }
 
-
 // Root
 //
 // Ability to the value of the root font sizes, affecting the value of `rem`.
@@ -37,7 +34,6 @@
   }
 }
 
-
 // Body
 //
 // 1. Remove the margin in all browsers.
@@ -60,7 +56,6 @@ body {
 }
 // scss-docs-end reboot-body-rules
 
-
 // Content grouping
 //
 // 1. Reset Firefox's gray color
@@ -78,7 +73,6 @@ hr:not([size]) {
   height: $hr-height; // 2
 }
 
-
 // Typography
 //
 // 1. Remove top margins from headings
@@ -125,7 +119,6 @@ h6 {
   @include font-size($h6-font-size);
 }
 
-
 // Reset margins on paragraphs
 //
 // Similarly, the top margin on `<p>`s get reset. However, we also reset the
@@ -136,7 +129,6 @@ p {
   margin-bottom: $paragraph-margin-bottom;
 }
 
-
 // Abbreviations
 //
 // 1. Duplicate behavior to the data-bs-* attribute for our tooltip plugin
@@ -145,13 +137,13 @@ p {
 // 4. Prevent the text-decoration to be skipped.
 
 abbr[title],
-abbr[data-bs-original-title] { // 1
+abbr[data-bs-original-title] {
+  // 1
   text-decoration: underline dotted; // 2
   cursor: help; // 3
   text-decoration-skip-ink: none; // 4
 }
 
-
 // Address
 
 address {
@@ -160,7 +152,6 @@ address {
   line-height: inherit;
 }
 
-
 // Lists
 
 ol,
@@ -189,18 +180,16 @@ dt {
 // 1. Undo browser default
 
 dd {
-  margin-bottom: .5rem;
+  margin-bottom: 0.5rem;
   margin-left: 0; // 1
 }
 
-
 // Blockquote
 
 blockquote {
   margin: 0 0 1rem;
 }
 
-
 // Strong
 //
 // Add the correct font weight in Chrome, Edge, and Safari
@@ -210,7 +199,6 @@ strong {
   font-weight: $font-weight-bolder;
 }
 
-
 // Small
 //
 // Add the correct font size in all browsers
@@ -219,7 +207,6 @@ small {
   @include font-size($small-font-size);
 }
 
-
 // Mark
 
 mark {
@@ -227,7 +214,6 @@ mark {
   background-color: $mark-bg;
 }
 
-
 // Sub and Sup
 //
 // Prevent `sub` and `sup` elements from affecting the line height in
@@ -241,9 +227,12 @@ sup {
   vertical-align: baseline;
 }
 
-sub { bottom: -.25em; }
-sup { top: -.5em; }
-
+sub {
+  bottom: -0.25em;
+}
+sup {
+  top: -0.5em;
+}
 
 // Links
 
@@ -270,7 +259,6 @@ a:not([href]):not([class]) {
   }
 }
 
-
 // Code
 
 pre,
@@ -328,7 +316,6 @@ kbd {
   }
 }
 
-
 // Figures
 //
 // Apply a consistent margin strategy (matches our type styles).
@@ -337,7 +324,6 @@ figure {
   margin: 0 0 1rem;
 }
 
-
 // Images and content
 
 img,
@@ -345,7 +331,6 @@ svg {
   vertical-align: middle;
 }
 
-
 // Tables
 //
 // Prevent double borders
@@ -383,7 +368,6 @@ th {
   border-width: 0;
 }
 
-
 // Forms
 //
 // 1. Allow labels to use `margin` for spacing.
@@ -570,7 +554,6 @@ legend {
   padding: 0;
 }
 
-
 // Inherit font family and line height for file input buttons
 
 ::file-selector-button {
@@ -606,7 +589,6 @@ summary {
   cursor: pointer;
 }
 
-
 // Progress
 //
 // Add the correct vertical alignment in Chrome, Firefox, and Opera.
@@ -615,7 +597,6 @@ progress {
   vertical-align: baseline;
 }
 
-
 // Hidden attribute
 //
 // Always hide an element with the `hidden` HTML attribute.
diff --git a/src/assets/scss/soft-ui-dashboard/bootstrap/_spinners.scss b/src/assets/scss/soft-ui-dashboard/bootstrap/_spinners.scss
index a4a2c77..ba0a165 100644
--- a/src/assets/scss/soft-ui-dashboard/bootstrap/_spinners.scss
+++ b/src/assets/scss/soft-ui-dashboard/bootstrap/_spinners.scss
@@ -4,7 +4,9 @@
 
 // scss-docs-start spinner-border-keyframes
 @keyframes spinner-border {
-  to { transform: rotate(360deg) #{"/* rtl:ignore */"}; }
+  to {
+    transform: rotate(360deg) #{"/* rtl:ignore */"};
+  }
 }
 // scss-docs-end spinner-border-keyframes
 
diff --git a/src/assets/scss/soft-ui-dashboard/bootstrap/_tables.scss b/src/assets/scss/soft-ui-dashboard/bootstrap/_tables.scss
index e10e4c4..b83b6ea 100644
--- a/src/assets/scss/soft-ui-dashboard/bootstrap/_tables.scss
+++ b/src/assets/scss/soft-ui-dashboard/bootstrap/_tables.scss
@@ -44,7 +44,6 @@
   }
 }
 
-
 //
 // Change placement of captions with a class
 //
@@ -53,7 +52,6 @@
   caption-side: top;
 }
 
-
 //
 // Condensed table w/ half padding
 //
@@ -65,7 +63,6 @@
   }
 }
 
-
 // Border versions
 //
 // Add or remove borders all around the table and between all the columns.
@@ -103,7 +100,9 @@
 
 .table-striped {
   > tbody > tr:nth-of-type(#{$table-striped-order}) > * {
-    --#{$variable-prefix}table-accent-bg: var(--#{$variable-prefix}table-striped-bg);
+    --#{$variable-prefix}table-accent-bg: var(
+      --#{$variable-prefix}table-striped-bg
+    );
     color: var(--#{$variable-prefix}table-striped-color);
   }
 }
@@ -113,7 +112,9 @@
 // The `.table-active` class can be added to highlight rows or cells
 
 .table-active {
-  --#{$variable-prefix}table-accent-bg: var(--#{$variable-prefix}table-active-bg);
+  --#{$variable-prefix}table-accent-bg: var(
+    --#{$variable-prefix}table-active-bg
+  );
   color: var(--#{$variable-prefix}table-active-color);
 }
 
@@ -123,12 +124,13 @@
 
 .table-hover {
   > tbody > tr:hover > * {
-    --#{$variable-prefix}table-accent-bg: var(--#{$variable-prefix}table-hover-bg);
+    --#{$variable-prefix}table-accent-bg: var(
+      --#{$variable-prefix}table-hover-bg
+    );
     color: var(--#{$variable-prefix}table-hover-color);
   }
 }
 
-
 // Table variants
 //
 // Table variants set the table cell backgrounds, border colors
diff --git a/src/assets/scss/soft-ui-dashboard/bootstrap/_toasts.scss b/src/assets/scss/soft-ui-dashboard/bootstrap/_toasts.scss
index 0a2d6ec..22006dc 100644
--- a/src/assets/scss/soft-ui-dashboard/bootstrap/_toasts.scss
+++ b/src/assets/scss/soft-ui-dashboard/bootstrap/_toasts.scss
@@ -37,10 +37,12 @@
   background-color: $toast-header-background-color;
   background-clip: padding-box;
   border-bottom: $toast-border-width solid $toast-header-border-color;
-  @include border-top-radius(subtract($toast-border-radius, $toast-border-width));
+  @include border-top-radius(
+    subtract($toast-border-radius, $toast-border-width)
+  );
 
   .btn-close {
-    margin-right: $toast-padding-x * -.5;
+    margin-right: $toast-padding-x * -0.5;
     margin-left: $toast-padding-x;
   }
 }
diff --git a/src/assets/scss/soft-ui-dashboard/bootstrap/_tooltip.scss b/src/assets/scss/soft-ui-dashboard/bootstrap/_tooltip.scss
index 75ff078..fc81664 100644
--- a/src/assets/scss/soft-ui-dashboard/bootstrap/_tooltip.scss
+++ b/src/assets/scss/soft-ui-dashboard/bootstrap/_tooltip.scss
@@ -12,7 +12,9 @@
   word-wrap: break-word;
   opacity: 0;
 
-  &.show { opacity: $tooltip-opacity; }
+  &.show {
+    opacity: $tooltip-opacity;
+  }
 
   .tooltip-arrow {
     position: absolute;
@@ -37,7 +39,7 @@
 
     &::before {
       top: -1px;
-      border-width: $tooltip-arrow-height ($tooltip-arrow-width * .5) 0;
+      border-width: $tooltip-arrow-height ($tooltip-arrow-width * 0.5) 0;
       border-top-color: $tooltip-arrow-color;
     }
   }
@@ -53,7 +55,8 @@
 
     &::before {
       right: -1px;
-      border-width: ($tooltip-arrow-width * .5) $tooltip-arrow-height ($tooltip-arrow-width * .5) 0;
+      border-width: ($tooltip-arrow-width * 0.5) $tooltip-arrow-height
+        ($tooltip-arrow-width * 0.5) 0;
       border-right-color: $tooltip-arrow-color;
     }
   }
@@ -67,7 +70,7 @@
 
     &::before {
       bottom: -1px;
-      border-width: 0 ($tooltip-arrow-width * .5) $tooltip-arrow-height;
+      border-width: 0 ($tooltip-arrow-width * 0.5) $tooltip-arrow-height;
       border-bottom-color: $tooltip-arrow-color;
     }
   }
@@ -83,7 +86,8 @@
 
     &::before {
       left: -1px;
-      border-width: ($tooltip-arrow-width * .5) 0 ($tooltip-arrow-width * .5) $tooltip-arrow-height;
+      border-width: ($tooltip-arrow-width * 0.5) 0 ($tooltip-arrow-width * 0.5)
+        $tooltip-arrow-height;
       border-left-color: $tooltip-arrow-color;
     }
   }
diff --git a/src/assets/scss/soft-ui-dashboard/bootstrap/_type.scss b/src/assets/scss/soft-ui-dashboard/bootstrap/_type.scss
index b2d524c..5224f34 100644
--- a/src/assets/scss/soft-ui-dashboard/bootstrap/_type.scss
+++ b/src/assets/scss/soft-ui-dashboard/bootstrap/_type.scss
@@ -25,7 +25,6 @@
   @extend h6;
 }
 
-
 .lead {
   @include font-size($lead-font-size);
   font-weight: $lead-font-weight;
@@ -71,7 +70,6 @@
   }
 }
 
-
 //
 // Misc
 //
diff --git a/src/assets/scss/soft-ui-dashboard/bootstrap/_utilities.scss b/src/assets/scss/soft-ui-dashboard/bootstrap/_utilities.scss
index 960d6f1..1b1d4e3 100644
--- a/src/assets/scss/soft-ui-dashboard/bootstrap/_utilities.scss
+++ b/src/assets/scss/soft-ui-dashboard/bootstrap/_utilities.scss
@@ -7,85 +7,93 @@ $utilities: () !default;
 $utilities: map-merge(
   (
     // scss-docs-start utils-vertical-align
-    "align": (
-      property: vertical-align,
-      class: align,
-      values: baseline top middle bottom text-bottom text-top
-    ),
+    "align":
+      (
+        property: vertical-align,
+        class: align,
+        values: baseline top middle bottom text-bottom text-top,
+      ),
     // scss-docs-end utils-vertical-align
     // scss-docs-start utils-float
-    "float": (
-      responsive: true,
-      property: float,
-      values: (
-        start: left,
-        end: right,
-        none: none,
-      )
-    ),
+    "float":
+      (
+        responsive: true,
+        property: float,
+        values: (
+          start: left,
+          end: right,
+          none: none,
+        ),
+      ),
     // scss-docs-end utils-float
     // Opacity utilities
     // scss-docs-start utils-opacity
-    "opacity": (
-      property: opacity,
-      values: (
-        0: 0,
-        25: .25,
-        50: .5,
-        75: .75,
-        100: 1,
-      )
-    ),
+    "opacity":
+      (
+        property: opacity,
+        values: (
+          0: 0,
+          25: 0.25,
+          50: 0.5,
+          75: 0.75,
+          100: 1,
+        ),
+      ),
     // scss-docs-end utils-opacity
     // scss-docs-start utils-overflow
-    "overflow": (
-      property: overflow,
-      values: auto hidden visible scroll,
-    ),
+    "overflow":
+      (
+        property: overflow,
+        values: auto hidden visible scroll,
+      ),
     // scss-docs-end utils-overflow
     // scss-docs-start utils-display
-    "display": (
-      responsive: true,
-      print: true,
-      property: display,
-      class: d,
-      values: inline inline-block block grid table table-row table-cell flex inline-flex none
-    ),
+    "display":
+      (
+        responsive: true,
+        print: true,
+        property: display,
+        class: d,
+        values: inline inline-block block grid table table-row table-cell flex
+          inline-flex none,
+      ),
     // scss-docs-end utils-display
     // scss-docs-start utils-shadow
-    "shadow": (
-      property: box-shadow,
-      class: shadow,
-      values: (
-        null: $box-shadow,
-        sm: $box-shadow-sm,
-        lg: $box-shadow-lg,
-        none: none,
-      )
-    ),
+    "shadow":
+      (
+        property: box-shadow,
+        class: shadow,
+        values: (
+          null: $box-shadow,
+          sm: $box-shadow-sm,
+          lg: $box-shadow-lg,
+          none: none,
+        ),
+      ),
     // scss-docs-end utils-shadow
     // scss-docs-start utils-position
-    "position": (
-      property: position,
-      values: static relative absolute fixed sticky
-    ),
+    "position":
+      (
+        property: position,
+        values: static relative absolute fixed sticky,
+      ),
     "top": (
       property: top,
-      values: $position-values
+      values: $position-values,
     ),
     "bottom": (
       property: bottom,
-      values: $position-values
+      values: $position-values,
     ),
     "start": (
       property: left,
       class: start,
-      values: $position-values
+      values: $position-values,
     ),
     "end": (
       property: right,
       class: end,
-      values: $position-values
+      values: $position-values,
     ),
     "translate-middle": (
       property: transform,
@@ -94,23 +102,24 @@ $utilities: map-merge(
         null: translate(-50%, -50%),
         x: translateX(-50%),
         y: translateY(-50%),
-      )
+      ),
     ),
     // scss-docs-end utils-position
     // scss-docs-start utils-borders
-    "border": (
-      property: border,
-      values: (
-        null: $border-width solid $border-color,
-        0: 0,
-      )
-    ),
+    "border":
+      (
+        property: border,
+        values: (
+          null: $border-width solid $border-color,
+          0: 0,
+        ),
+      ),
     "border-top": (
       property: border-top,
       values: (
         null: $border-width solid $border-color,
         0: 0,
-      )
+      ),
     ),
     "border-end": (
       property: border-right,
@@ -118,14 +127,14 @@ $utilities: map-merge(
       values: (
         null: $border-width solid $border-color,
         0: 0,
-      )
+      ),
     ),
     "border-bottom": (
       property: border-bottom,
       values: (
         null: $border-width solid $border-color,
         0: 0,
-      )
+      ),
     ),
     "border-start": (
       property: border-left,
@@ -133,46 +142,59 @@ $utilities: map-merge(
       values: (
         null: $border-width solid $border-color,
         0: 0,
-      )
+      ),
     ),
     "border-color": (
       property: border-color,
       class: border,
-      values: map-merge($theme-colors, ("white": $white))
+      values:
+        map-merge(
+          $theme-colors,
+          (
+            "white": $white,
+          )
+        ),
     ),
     "border-width": (
       property: border-width,
       class: border,
-      values: $border-widths
+      values: $border-widths,
     ),
     // scss-docs-end utils-borders
     // Sizing utilities
     // scss-docs-start utils-sizing
-    "width": (
-      property: width,
-      class: w,
-      values: (
-        25: 25%,
-        50: 50%,
-        75: 75%,
-        100: 100%,
-        auto: auto
-      )
-    ),
+    "width":
+      (
+        property: width,
+        class: w,
+        values: (
+          25: 25%,
+          50: 50%,
+          75: 75%,
+          100: 100%,
+          auto: auto,
+        ),
+      ),
     "max-width": (
       property: max-width,
       class: mw,
-      values: (100: 100%)
+      values: (
+        100: 100%,
+      ),
     ),
     "viewport-width": (
       property: width,
       class: vw,
-      values: (100: 100vw)
+      values: (
+        100: 100vw,
+      ),
     ),
     "min-viewport-width": (
       property: min-width,
       class: min-vw,
-      values: (100: 100vw)
+      values: (
+        100: 100vw,
+      ),
     ),
     "height": (
       property: height,
@@ -182,37 +204,46 @@ $utilities: map-merge(
         50: 50%,
         75: 75%,
         100: 100%,
-        auto: auto
-      )
+        auto: auto,
+      ),
     ),
     "max-height": (
       property: max-height,
       class: mh,
-      values: (100: 100%)
+      values: (
+        100: 100%,
+      ),
     ),
     "viewport-height": (
       property: height,
       class: vh,
-      values: (100: 100vh)
+      values: (
+        100: 100vh,
+      ),
     ),
     "min-viewport-height": (
       property: min-height,
       class: min-vh,
-      values: (100: 100vh)
+      values: (
+        100: 100vh,
+      ),
     ),
     // scss-docs-end utils-sizing
     // Flex utilities
     // scss-docs-start utils-flex
-    "flex": (
-      responsive: true,
-      property: flex,
-      values: (fill: 1 1 auto)
-    ),
+    "flex":
+      (
+        responsive: true,
+        property: flex,
+        values: (
+          fill: 1 1 auto,
+        ),
+      ),
     "flex-direction": (
       responsive: true,
       property: flex-direction,
       class: flex,
-      values: row column row-reverse column-reverse
+      values: row column row-reverse column-reverse,
     ),
     "flex-grow": (
       responsive: true,
@@ -221,7 +252,7 @@ $utilities: map-merge(
       values: (
         grow-0: 0,
         grow-1: 1,
-      )
+      ),
     ),
     "flex-shrink": (
       responsive: true,
@@ -230,19 +261,19 @@ $utilities: map-merge(
       values: (
         shrink-0: 0,
         shrink-1: 1,
-      )
+      ),
     ),
     "flex-wrap": (
       responsive: true,
       property: flex-wrap,
       class: flex,
-      values: wrap nowrap wrap-reverse
+      values: wrap nowrap wrap-reverse,
     ),
     "gap": (
       responsive: true,
       property: gap,
       class: gap,
-      values: $spacers
+      values: $spacers,
     ),
     "justify-content": (
       responsive: true,
@@ -254,7 +285,7 @@ $utilities: map-merge(
         between: space-between,
         around: space-around,
         evenly: space-evenly,
-      )
+      ),
     ),
     "align-items": (
       responsive: true,
@@ -265,7 +296,7 @@ $utilities: map-merge(
         center: center,
         baseline: baseline,
         stretch: stretch,
-      )
+      ),
     ),
     "align-content": (
       responsive: true,
@@ -277,7 +308,7 @@ $utilities: map-merge(
         between: space-between,
         around: space-around,
         stretch: stretch,
-      )
+      ),
     ),
     "align-self": (
       responsive: true,
@@ -289,7 +320,7 @@ $utilities: map-merge(
         center: center,
         baseline: baseline,
         stretch: stretch,
-      )
+      ),
     ),
     "order": (
       responsive: true,
@@ -308,152 +339,200 @@ $utilities: map-merge(
     // scss-docs-end utils-flex
     // Margin utilities
     // scss-docs-start utils-spacing
-    "margin": (
-      responsive: true,
-      property: margin,
-      class: m,
-      values: map-merge($spacers, (auto: auto))
-    ),
+    "margin":
+      (
+        responsive: true,
+        property: margin,
+        class: m,
+        values:
+          map-merge(
+            $spacers,
+            (
+              auto: auto,
+            )
+          ),
+      ),
     "margin-x": (
       responsive: true,
       property: margin-right margin-left,
       class: mx,
-      values: map-merge($spacers, (auto: auto))
+      values:
+        map-merge(
+          $spacers,
+          (
+            auto: auto,
+          )
+        ),
     ),
     "margin-y": (
       responsive: true,
       property: margin-top margin-bottom,
       class: my,
-      values: map-merge($spacers, (auto: auto))
+      values:
+        map-merge(
+          $spacers,
+          (
+            auto: auto,
+          )
+        ),
     ),
     "margin-top": (
       responsive: true,
       property: margin-top,
       class: mt,
-      values: map-merge($spacers, (auto: auto))
+      values:
+        map-merge(
+          $spacers,
+          (
+            auto: auto,
+          )
+        ),
     ),
     "margin-end": (
       responsive: true,
       property: margin-right,
       class: me,
-      values: map-merge($spacers, (auto: auto))
+      values:
+        map-merge(
+          $spacers,
+          (
+            auto: auto,
+          )
+        ),
     ),
     "margin-bottom": (
       responsive: true,
       property: margin-bottom,
       class: mb,
-      values: map-merge($spacers, (auto: auto))
+      values:
+        map-merge(
+          $spacers,
+          (
+            auto: auto,
+          )
+        ),
     ),
     "margin-start": (
       responsive: true,
       property: margin-left,
       class: ms,
-      values: map-merge($spacers, (auto: auto))
+      values:
+        map-merge(
+          $spacers,
+          (
+            auto: auto,
+          )
+        ),
     ),
     // Negative margin utilities
-    "negative-margin": (
-      responsive: true,
-      property: margin,
-      class: m,
-      values: $negative-spacers
-    ),
+    "negative-margin":
+      (
+        responsive: true,
+        property: margin,
+        class: m,
+        values: $negative-spacers,
+      ),
     "negative-margin-x": (
       responsive: true,
       property: margin-right margin-left,
       class: mx,
-      values: $negative-spacers
+      values: $negative-spacers,
     ),
     "negative-margin-y": (
       responsive: true,
       property: margin-top margin-bottom,
       class: my,
-      values: $negative-spacers
+      values: $negative-spacers,
     ),
     "negative-margin-top": (
       responsive: true,
       property: margin-top,
       class: mt,
-      values: $negative-spacers
+      values: $negative-spacers,
     ),
     "negative-margin-end": (
       responsive: true,
       property: margin-right,
       class: me,
-      values: $negative-spacers
+      values: $negative-spacers,
     ),
     "negative-margin-bottom": (
       responsive: true,
       property: margin-bottom,
       class: mb,
-      values: $negative-spacers
+      values: $negative-spacers,
     ),
     "negative-margin-start": (
       responsive: true,
       property: margin-left,
       class: ms,
-      values: $negative-spacers
+      values: $negative-spacers,
     ),
     // Padding utilities
-    "padding": (
-      responsive: true,
-      property: padding,
-      class: p,
-      values: $spacers
-    ),
+    "padding":
+      (
+        responsive: true,
+        property: padding,
+        class: p,
+        values: $spacers,
+      ),
     "padding-x": (
       responsive: true,
       property: padding-right padding-left,
       class: px,
-      values: $spacers
+      values: $spacers,
     ),
     "padding-y": (
       responsive: true,
       property: padding-top padding-bottom,
       class: py,
-      values: $spacers
+      values: $spacers,
     ),
     "padding-top": (
       responsive: true,
       property: padding-top,
       class: pt,
-      values: $spacers
+      values: $spacers,
     ),
     "padding-end": (
       responsive: true,
       property: padding-right,
       class: pe,
-      values: $spacers
+      values: $spacers,
     ),
     "padding-bottom": (
       responsive: true,
       property: padding-bottom,
       class: pb,
-      values: $spacers
+      values: $spacers,
     ),
     "padding-start": (
       responsive: true,
       property: padding-left,
       class: ps,
-      values: $spacers
+      values: $spacers,
     ),
     // scss-docs-end utils-spacing
     // Text
     // scss-docs-start utils-text
-    "font-family": (
-      property: font-family,
-      class: font,
-      values: (monospace: var(--#{$variable-prefix}font-monospace))
-    ),
+    "font-family":
+      (
+        property: font-family,
+        class: font,
+        values: (
+          monospace: var(--#{$variable-prefix}font-monospace),
+        ),
+      ),
     "font-size": (
       rfs: true,
       property: font-size,
       class: fs,
-      values: $font-sizes
+      values: $font-sizes,
     ),
     "font-style": (
       property: font-style,
       class: fst,
-      values: italic normal
+      values: italic normal,
     ),
     "font-weight": (
       property: font-weight,
@@ -463,8 +542,8 @@ $utilities: map-merge(
         lighter: $font-weight-lighter,
         normal: $font-weight-normal,
         bold: $font-weight-bold,
-        bolder: $font-weight-bolder
-      )
+        bolder: $font-weight-bolder,
+      ),
     ),
     "line-height": (
       property: line-height,
@@ -474,7 +553,7 @@ $utilities: map-merge(
         sm: $line-height-sm,
         base: $line-height-base,
         lg: $line-height-lg,
-      )
+      ),
     ),
     "text-align": (
       responsive: true,
@@ -484,16 +563,16 @@ $utilities: map-merge(
         start: left,
         end: right,
         center: center,
-      )
+      ),
     ),
     "text-decoration": (
       property: text-decoration,
-      values: none underline line-through
+      values: none underline line-through,
     ),
     "text-transform": (
       property: text-transform,
       class: text,
-      values: lowercase uppercase capitalize
+      values: lowercase uppercase capitalize,
     ),
     "white-space": (
       property: white-space,
@@ -501,79 +580,91 @@ $utilities: map-merge(
       values: (
         wrap: normal,
         nowrap: nowrap,
-      )
+      ),
     ),
     "word-wrap": (
       property: word-wrap word-break,
       class: text,
-      values: (break: break-word),
-      rtl: false
+      values: (
+        break: break-word,
+      ),
+      rtl: false,
     ),
     // scss-docs-end utils-text
     // scss-docs-start utils-color
-    "color": (
-      property: color,
-      class: text,
-      local-vars: (
-        "text-opacity": 1
-      ),
-      values: map-merge(
-        $utilities-text-colors,
-        (
-          "muted": $text-muted,
-          "black-50": rgba($black, .5), // deprecated
-          "white-50": rgba($white, .5), // deprecated
-          "reset": inherit,
-        )
-      )
-    ),
+    "color":
+      (
+        property: color,
+        class: text,
+        local-vars: (
+          "text-opacity": 1,
+        ),
+        values:
+          map-merge(
+            $utilities-text-colors,
+            (
+              "muted": $text-muted,
+              "black-50": rgba($black, 0.5),
+              // deprecated
+              "white-50": rgba($white, 0.5),
+              // deprecated
+              "reset": inherit,
+            )
+          ),
+      ),
     "text-opacity": (
       css-var: true,
       class: text-opacity,
       values: (
-        25: .25,
-        50: .5,
-        75: .75,
-        100: 1
-      )
+        25: 0.25,
+        50: 0.5,
+        75: 0.75,
+        100: 1,
+      ),
     ),
     // scss-docs-end utils-color
     // scss-docs-start utils-bg-color
-    "background-color": (
-      property: background-color,
-      class: bg,
-      local-vars: (
-        "bg-opacity": 1
-      ),
-      values: map-merge(
-        $utilities-bg-colors,
-        (
-          "transparent": transparent
-        )
-      )
-    ),
+    "background-color":
+      (
+        property: background-color,
+        class: bg,
+        local-vars: (
+          "bg-opacity": 1,
+        ),
+        values:
+          map-merge(
+            $utilities-bg-colors,
+            (
+              "transparent": transparent,
+            )
+          ),
+      ),
     "bg-opacity": (
       css-var: true,
       class: bg-opacity,
       values: (
-        10: .1,
-        25: .25,
-        50: .5,
-        75: .75,
-        100: 1
-      )
+        10: 0.1,
+        25: 0.25,
+        50: 0.5,
+        75: 0.75,
+        100: 1,
+      ),
     ),
     // scss-docs-end utils-bg-color
-    "gradient": (
-      property: background-image,
-      class: bg,
-      values: (gradient: var(--#{$variable-prefix}gradient))
-    ),
+    "gradient":
+      (
+        property: background-image,
+        class: bg,
+        values: (
+          gradient: var(--#{$variable-prefix}gradient),
+        ),
+      ),
     // scss-docs-start utils-interaction
-    "user-select": (
-      property: user-select,
-      values: all auto none
-    ),
+    "user-select":
+      (
+        property: user-select,
+        values: all auto none,
+      ),
     "pointer-events": (
       property: pointer-events,
       class: pe,
@@ -581,50 +672,60 @@ $utilities: map-merge(
     ),
     // scss-docs-end utils-interaction
     // scss-docs-start utils-border-radius
-    "rounded": (
-      property: border-radius,
-      class: rounded,
-      values: (
-        null: $border-radius,
-        0: 0,
-        1: $border-radius-sm,
-        2: $border-radius,
-        3: $border-radius-lg,
-        circle: 50%,
-        pill: $border-radius-pill
-      )
-    ),
+    "rounded":
+      (
+        property: border-radius,
+        class: rounded,
+        values: (
+          null: $border-radius,
+          0: 0,
+          1: $border-radius-sm,
+          2: $border-radius,
+          3: $border-radius-lg,
+          circle: 50%,
+          pill: $border-radius-pill,
+        ),
+      ),
     "rounded-top": (
       property: border-top-left-radius border-top-right-radius,
       class: rounded-top,
-      values: (null: $border-radius)
+      values: (
+        null: $border-radius,
+      ),
     ),
     "rounded-end": (
       property: border-top-right-radius border-bottom-right-radius,
       class: rounded-end,
-      values: (null: $border-radius)
+      values: (
+        null: $border-radius,
+      ),
     ),
     "rounded-bottom": (
       property: border-bottom-right-radius border-bottom-left-radius,
       class: rounded-bottom,
-      values: (null: $border-radius)
+      values: (
+        null: $border-radius,
+      ),
     ),
     "rounded-start": (
       property: border-bottom-left-radius border-top-left-radius,
       class: rounded-start,
-      values: (null: $border-radius)
+      values: (
+        null: $border-radius,
+      ),
     ),
     // scss-docs-end utils-border-radius
     // scss-docs-start utils-visibility
-    "visibility": (
-      property: visibility,
-      class: null,
-      values: (
-        visible: visible,
-        invisible: hidden,
+    "visibility":
+      (
+        property: visibility,
+        class: null,
+        values: (
+          visible: visible,
+          invisible: hidden,
+        ),
       )
-    )
-    // scss-docs-end utils-visibility
+      // scss-docs-end utils-visibility
   ),
   $utilities
 );
diff --git a/src/assets/scss/soft-ui-dashboard/bootstrap/_variables.scss b/src/assets/scss/soft-ui-dashboard/bootstrap/_variables.scss
index f33b804..13398cd 100644
--- a/src/assets/scss/soft-ui-dashboard/bootstrap/_variables.scss
+++ b/src/assets/scss/soft-ui-dashboard/bootstrap/_variables.scss
@@ -6,7 +6,7 @@
 // Color system
 
 // scss-docs-start gray-color-variables
-$white:    #fff !default;
+$white: #fff !default;
 $gray-100: #f8f9fa !default;
 $gray-200: #e9ecef !default;
 $gray-300: #dee2e6 !default;
@@ -16,7 +16,7 @@ $gray-600: #6c757d !default;
 $gray-700: #495057 !default;
 $gray-800: #343a40 !default;
 $gray-900: #212529 !default;
-$black:    #000 !default;
+$black: #000 !default;
 // scss-docs-end gray-color-variables
 
 // fusv-disable
@@ -30,63 +30,63 @@ $grays: (
   "600": $gray-600,
   "700": $gray-700,
   "800": $gray-800,
-  "900": $gray-900
+  "900": $gray-900,
 ) !default;
 // scss-docs-end gray-colors-map
 // fusv-enable
 
 // scss-docs-start color-variables
-$blue:    #0d6efd !default;
-$indigo:  #6610f2 !default;
-$purple:  #6f42c1 !default;
-$pink:    #d63384 !default;
-$red:     #dc3545 !default;
-$orange:  #fd7e14 !default;
-$yellow:  #ffc107 !default;
-$green:   #198754 !default;
-$teal:    #20c997 !default;
-$cyan:    #0dcaf0 !default;
+$blue: #0d6efd !default;
+$indigo: #6610f2 !default;
+$purple: #6f42c1 !default;
+$pink: #d63384 !default;
+$red: #dc3545 !default;
+$orange: #fd7e14 !default;
+$yellow: #ffc107 !default;
+$green: #198754 !default;
+$teal: #20c997 !default;
+$cyan: #0dcaf0 !default;
 // scss-docs-end color-variables
 
 // scss-docs-start colors-map
 $colors: (
-  "blue":       $blue,
-  "indigo":     $indigo,
-  "purple":     $purple,
-  "pink":       $pink,
-  "red":        $red,
-  "orange":     $orange,
-  "yellow":     $yellow,
-  "green":      $green,
-  "teal":       $teal,
-  "cyan":       $cyan,
-  "white":      $white,
-  "gray":       $gray-600,
-  "gray-dark":  $gray-800
+  "blue": $blue,
+  "indigo": $indigo,
+  "purple": $purple,
+  "pink": $pink,
+  "red": $red,
+  "orange": $orange,
+  "yellow": $yellow,
+  "green": $green,
+  "teal": $teal,
+  "cyan": $cyan,
+  "white": $white,
+  "gray": $gray-600,
+  "gray-dark": $gray-800,
 ) !default;
 // scss-docs-end colors-map
 
 // scss-docs-start theme-color-variables
-$primary:       $blue !default;
-$secondary:     $gray-600 !default;
-$success:       $green !default;
-$info:          $cyan !default;
-$warning:       $yellow !default;
-$danger:        $red !default;
-$light:         $gray-100 !default;
-$dark:          $gray-900 !default;
+$primary: $blue !default;
+$secondary: $gray-600 !default;
+$success: $green !default;
+$info: $cyan !default;
+$warning: $yellow !default;
+$danger: $red !default;
+$light: $gray-100 !default;
+$dark: $gray-900 !default;
 // scss-docs-end theme-color-variables
 
 // scss-docs-start theme-colors-map
 $theme-colors: (
-  "primary":    $primary,
-  "secondary":  $secondary,
-  "success":    $success,
-  "info":       $info,
-  "warning":    $warning,
-  "danger":     $danger,
-  "light":      $light,
-  "dark":       $dark
+  "primary": $primary,
+  "secondary": $secondary,
+  "success": $success,
+  "info": $info,
+  "warning": $warning,
+  "danger": $danger,
+  "light": $light,
+  "dark": $dark,
 ) !default;
 // scss-docs-end theme-colors-map
 
@@ -96,11 +96,11 @@ $theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value") !default;
 
 // The contrast ratio to reach against white, to determine if color changes from "light" to "dark". Acceptable values for WCAG 2.0 are 3, 4.5 and 7.
 // See https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast
-$min-contrast-ratio:   4.5 !default;
+$min-contrast-ratio: 4.5 !default;
 
 // Customize the light and dark text colors for use in our color contrast function.
-$color-contrast-dark:      $black !default;
-$color-contrast-light:     $white !default;
+$color-contrast-dark: $black !default;
+$color-contrast-light: $white !default;
 
 // fusv-disable
 $blue-100: tint-color($blue, 80%) !default;
@@ -212,7 +212,7 @@ $blues: (
   "blue-600": $blue-600,
   "blue-700": $blue-700,
   "blue-800": $blue-800,
-  "blue-900": $blue-900
+  "blue-900": $blue-900,
 ) !default;
 
 $indigos: (
@@ -224,7 +224,7 @@ $indigos: (
   "indigo-600": $indigo-600,
   "indigo-700": $indigo-700,
   "indigo-800": $indigo-800,
-  "indigo-900": $indigo-900
+  "indigo-900": $indigo-900,
 ) !default;
 
 $purples: (
@@ -236,7 +236,7 @@ $purples: (
   "purple-600": $purple-600,
   "purple-700": $purple-700,
   "purple-800": $purple-800,
-  "purple-900": $purple-900
+  "purple-900": $purple-900,
 ) !default;
 
 $pinks: (
@@ -248,7 +248,7 @@ $pinks: (
   "pink-600": $pink-600,
   "pink-700": $pink-700,
   "pink-800": $pink-800,
-  "pink-900": $pink-900
+  "pink-900": $pink-900,
 ) !default;
 
 $reds: (
@@ -260,7 +260,7 @@ $reds: (
   "red-600": $red-600,
   "red-700": $red-700,
   "red-800": $red-800,
-  "red-900": $red-900
+  "red-900": $red-900,
 ) !default;
 
 $oranges: (
@@ -272,7 +272,7 @@ $oranges: (
   "orange-600": $orange-600,
   "orange-700": $orange-700,
   "orange-800": $orange-800,
-  "orange-900": $orange-900
+  "orange-900": $orange-900,
 ) !default;
 
 $yellows: (
@@ -284,7 +284,7 @@ $yellows: (
   "yellow-600": $yellow-600,
   "yellow-700": $yellow-700,
   "yellow-800": $yellow-800,
-  "yellow-900": $yellow-900
+  "yellow-900": $yellow-900,
 ) !default;
 
 $greens: (
@@ -296,7 +296,7 @@ $greens: (
   "green-600": $green-600,
   "green-700": $green-700,
   "green-800": $green-800,
-  "green-900": $green-900
+  "green-900": $green-900,
 ) !default;
 
 $teals: (
@@ -308,7 +308,7 @@ $teals: (
   "teal-600": $teal-600,
   "teal-700": $teal-700,
   "teal-800": $teal-800,
-  "teal-900": $teal-900
+  "teal-900": $teal-900,
 ) !default;
 
 $cyans: (
@@ -320,7 +320,7 @@ $cyans: (
   "cyan-600": $cyan-600,
   "cyan-700": $cyan-700,
   "cyan-800": $cyan-800,
-  "cyan-900": $cyan-900
+  "cyan-900": $cyan-900,
 ) !default;
 // fusv-enable
 
@@ -330,39 +330,43 @@ $escaped-characters: (
   (">", "%3e"),
   ("#", "%23"),
   ("(", "%28"),
-  (")", "%29"),
+  (")", "%29")
 ) !default;
 
 // Options
 //
 // Quickly modify global styling by enabling or disabling optional features.
 
-$enable-caret:                true !default;
-$enable-rounded:              true !default;
-$enable-shadows:              false !default;
-$enable-gradients:            false !default;
-$enable-transitions:          true !default;
-$enable-reduced-motion:       true !default;
-$enable-smooth-scroll:        true !default;
-$enable-grid-classes:         true !default;
-$enable-cssgrid:              false !default;
-$enable-button-pointers:      true !default;
-$enable-rfs:                  true !default;
-$enable-validation-icons:     true !default;
-$enable-negative-margins:     false !default;
+$enable-caret: true !default;
+$enable-rounded: true !default;
+$enable-shadows: false !default;
+$enable-gradients: false !default;
+$enable-transitions: true !default;
+$enable-reduced-motion: true !default;
+$enable-smooth-scroll: true !default;
+$enable-grid-classes: true !default;
+$enable-cssgrid: false !default;
+$enable-button-pointers: true !default;
+$enable-rfs: true !default;
+$enable-validation-icons: true !default;
+$enable-negative-margins: false !default;
 $enable-deprecation-messages: true !default;
-$enable-important-utilities:  true !default;
+$enable-important-utilities: true !default;
 
 // Prefix for :root CSS variables
 
-$variable-prefix:             bs- !default;
+$variable-prefix: bs- !default;
 
 // Gradient
 //
 // The gradient which is added to components if `$enable-gradients` is `true`
 // This gradient is also added to elements with `.bg-gradient`
 // scss-docs-start variable-gradient
-$gradient: linear-gradient(180deg, rgba($white, .15), rgba($white, 0)) !default;
+$gradient: linear-gradient(
+  180deg,
+  rgba($white, 0.15),
+  rgba($white, 0)
+) !default;
 // scss-docs-end variable-gradient
 
 // Spacing
@@ -375,14 +379,18 @@ $gradient: linear-gradient(180deg, rgba($white, .15), rgba($white, 0)) !default;
 $spacer: 1rem !default;
 $spacers: (
   0: 0,
-  1: $spacer * .25,
-  2: $spacer * .5,
+  1: $spacer * 0.25,
+  2: $spacer * 0.5,
   3: $spacer,
   4: $spacer * 1.5,
   5: $spacer * 3,
 ) !default;
 
-$negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default;
+$negative-spacers: if(
+  $enable-negative-margins,
+  negativify-map($spacers),
+  null
+) !default;
 // scss-docs-end spacer-variables-maps
 
 // Position
@@ -393,7 +401,7 @@ $negative-spacers: if($enable-negative-margins, negativify-map($spacers), null)
 $position-values: (
   0: 0,
   50: 50%,
-  100: 100%
+  100: 100%,
 ) !default;
 // scss-docs-end position-map
 
@@ -401,9 +409,9 @@ $position-values: (
 //
 // Settings for the `<body>` element.
 
-$body-bg:                   $white !default;
-$body-color:                $gray-900 !default;
-$body-text-align:           null !default;
+$body-bg: $white !default;
+$body-color: $gray-900 !default;
+$body-text-align: null !default;
 
 // Utilities maps
 //
@@ -420,10 +428,15 @@ $utilities-text: map-merge(
   (
     "black": to-rgb($black),
     "white": to-rgb($white),
-    "body": to-rgb($body-color)
+    "body": to-rgb($body-color),
   )
 ) !default;
-$utilities-text-colors: map-loop($utilities-text, rgba-css-var, "$key", "text") !default;
+$utilities-text-colors: map-loop(
+  $utilities-text,
+  rgba-css-var,
+  "$key",
+  "text"
+) !default;
 // scss-docs-end utilities-text-colors
 
 // scss-docs-start utilities-bg-colors
@@ -432,31 +445,35 @@ $utilities-bg: map-merge(
   (
     "black": to-rgb($black),
     "white": to-rgb($white),
-    "body": to-rgb($body-bg)
+    "body": to-rgb($body-bg),
   )
 ) !default;
-$utilities-bg-colors: map-loop($utilities-bg, rgba-css-var, "$key", "bg") !default;
+$utilities-bg-colors: map-loop(
+  $utilities-bg,
+  rgba-css-var,
+  "$key",
+  "bg"
+) !default;
 // scss-docs-end utilities-bg-colors
 
 // Links
 //
 // Style anchor elements.
 
-$link-color:                              $primary !default;
-$link-decoration:                         underline !default;
-$link-shade-percentage:                   20% !default;
-$link-hover-color:                        shift-color($link-color, $link-shade-percentage) !default;
-$link-hover-decoration:                   null !default;
+$link-color: $primary !default;
+$link-decoration: underline !default;
+$link-shade-percentage: 20% !default;
+$link-hover-color: shift-color($link-color, $link-shade-percentage) !default;
+$link-hover-decoration: null !default;
 
-$stretched-link-pseudo-element:           after !default;
-$stretched-link-z-index:                  1 !default;
+$stretched-link-pseudo-element: after !default;
+$stretched-link-z-index: 1 !default;
 
 // Paragraphs
 //
 // Style p element.
 
-$paragraph-margin-bottom:   1rem !default;
-
+$paragraph-margin-bottom: 1rem !default;
 
 // Grid breakpoints
 //
@@ -470,14 +487,13 @@ $grid-breakpoints: (
   md: 768px,
   lg: 992px,
   xl: 1200px,
-  xxl: 1400px
+  xxl: 1400px,
 ) !default;
 // scss-docs-end grid-breakpoints
 
 @include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
 @include _assert-starts-at-zero($grid-breakpoints, "$grid-breakpoints");
 
-
 // Grid containers
 //
 // Define the maximum width of `.container` for different screen sizes.
@@ -488,73 +504,71 @@ $container-max-widths: (
   md: 720px,
   lg: 960px,
   xl: 1140px,
-  xxl: 1320px
+  xxl: 1320px,
 ) !default;
 // scss-docs-end container-max-widths
 
 @include _assert-ascending($container-max-widths, "$container-max-widths");
 
-
 // Grid columns
 //
 // Set the number of columns and specify the width of the gutters.
 
-$grid-columns:                12 !default;
-$grid-gutter-width:           1.5rem !default;
-$grid-row-columns:            6 !default;
+$grid-columns: 12 !default;
+$grid-gutter-width: 1.5rem !default;
+$grid-row-columns: 6 !default;
 
 $gutters: $spacers !default;
 
 // Container padding
 
-$container-padding-x: $grid-gutter-width * .5 !default;
-
+$container-padding-x: $grid-gutter-width * 0.5 !default;
 
 // Components
 //
 // Define common padding and border radius sizes and more.
 
 // scss-docs-start border-variables
-$border-width:                1px !default;
+$border-width: 1px !default;
 $border-widths: (
   1: 1px,
   2: 2px,
   3: 3px,
   4: 4px,
-  5: 5px
+  5: 5px,
 ) !default;
 
-$border-color:                $gray-300 !default;
+$border-color: $gray-300 !default;
 // scss-docs-end border-variables
 
 // scss-docs-start border-radius-variables
-$border-radius:               .25rem !default;
-$border-radius-sm:            .2rem !default;
-$border-radius-lg:            .3rem !default;
-$border-radius-pill:          50rem !default;
+$border-radius: 0.25rem !default;
+$border-radius-sm: 0.2rem !default;
+$border-radius-lg: 0.3rem !default;
+$border-radius-pill: 50rem !default;
 // scss-docs-end border-radius-variables
 
 // scss-docs-start box-shadow-variables
-$box-shadow:                  0 .5rem 1rem rgba($black, .15) !default;
-$box-shadow-sm:               0 .125rem .25rem rgba($black, .075) !default;
-$box-shadow-lg:               0 1rem 3rem rgba($black, .175) !default;
-$box-shadow-inset:            inset 0 1px 2px rgba($black, .075) !default;
+$box-shadow: 0 0.5rem 1rem rgba($black, 0.15) !default;
+$box-shadow-sm: 0 0.125rem 0.25rem rgba($black, 0.075) !default;
+$box-shadow-lg: 0 1rem 3rem rgba($black, 0.175) !default;
+$box-shadow-inset: inset 0 1px 2px rgba($black, 0.075) !default;
 // scss-docs-end box-shadow-variables
 
-$component-active-color:      $white !default;
-$component-active-bg:         $primary !default;
+$component-active-color: $white !default;
+$component-active-bg: $primary !default;
 
 // scss-docs-start caret-variables
-$caret-width:                 .3em !default;
-$caret-vertical-align:        $caret-width * .85 !default;
-$caret-spacing:               $caret-width * .85 !default;
+$caret-width: 0.3em !default;
+$caret-vertical-align: $caret-width * 0.85 !default;
+$caret-spacing: $caret-width * 0.85 !default;
 // scss-docs-end caret-variables
 
-$transition-base:             all .2s ease-in-out !default;
-$transition-fade:             opacity .15s linear !default;
+$transition-base: all 0.2s ease-in-out !default;
+$transition-fade: opacity 0.15s linear !default;
 // scss-docs-start collapse-transition
-$transition-collapse:         height .35s ease !default;
-$transition-collapse-width:   width .35s ease !default;
+$transition-collapse: height 0.35s ease !default;
+$transition-collapse-width: width 0.35s ease !default;
 // scss-docs-end collapse-transition
 
 // stylelint-disable function-disallowed-list
@@ -563,7 +577,7 @@ $aspect-ratios: (
   "1x1": 100%,
   "4x3": calc(3 / 4 * 100%),
   "16x9": calc(9 / 16 * 100%),
-  "21x9": calc(9 / 21 * 100%)
+  "21x9": calc(9 / 21 * 100%),
 ) !default;
 // scss-docs-end aspect-ratios
 // stylelint-enable function-disallowed-list
@@ -574,37 +588,40 @@ $aspect-ratios: (
 
 // scss-docs-start font-variables
 // stylelint-disable value-keyword-case
-$font-family-sans-serif:      system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
-$font-family-monospace:       SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
+$font-family-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto,
+  "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif,
+  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
+$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas,
+  "Liberation Mono", "Courier New", monospace !default;
 // stylelint-enable value-keyword-case
-$font-family-base:            var(--#{$variable-prefix}font-sans-serif) !default;
-$font-family-code:            var(--#{$variable-prefix}font-monospace) !default;
+$font-family-base: var(--#{$variable-prefix}font-sans-serif) !default;
+$font-family-code: var(--#{$variable-prefix}font-monospace) !default;
 
 // $font-size-root affects the value of `rem`, which is used for as well font sizes, paddings, and margins
 // $font-size-base affects the font size of the body text
-$font-size-root:              null !default;
-$font-size-base:              1rem !default; // Assumes the browser default, typically `16px`
-$font-size-sm:                $font-size-base * .875 !default;
-$font-size-lg:                $font-size-base * 1.25 !default;
-
-$font-weight-lighter:         lighter !default;
-$font-weight-light:           300 !default;
-$font-weight-normal:          400 !default;
-$font-weight-bold:            700 !default;
-$font-weight-bolder:          bolder !default;
-
-$font-weight-base:            $font-weight-normal !default;
-
-$line-height-base:            1.5 !default;
-$line-height-sm:              1.25 !default;
-$line-height-lg:              2 !default;
-
-$h1-font-size:                $font-size-base * 2.5 !default;
-$h2-font-size:                $font-size-base * 2 !default;
-$h3-font-size:                $font-size-base * 1.75 !default;
-$h4-font-size:                $font-size-base * 1.5 !default;
-$h5-font-size:                $font-size-base * 1.25 !default;
-$h6-font-size:                $font-size-base !default;
+$font-size-root: null !default;
+$font-size-base: 1rem !default; // Assumes the browser default, typically `16px`
+$font-size-sm: $font-size-base * 0.875 !default;
+$font-size-lg: $font-size-base * 1.25 !default;
+
+$font-weight-lighter: lighter !default;
+$font-weight-light: 300 !default;
+$font-weight-normal: 400 !default;
+$font-weight-bold: 700 !default;
+$font-weight-bolder: bolder !default;
+
+$font-weight-base: $font-weight-normal !default;
+
+$line-height-base: 1.5 !default;
+$line-height-sm: 1.25 !default;
+$line-height-lg: 2 !default;
+
+$h1-font-size: $font-size-base * 2.5 !default;
+$h2-font-size: $font-size-base * 2 !default;
+$h3-font-size: $font-size-base * 1.75 !default;
+$h4-font-size: $font-size-base * 1.5 !default;
+$h5-font-size: $font-size-base * 1.25 !default;
+$h6-font-size: $font-size-base !default;
 // scss-docs-end font-variables
 
 // scss-docs-start font-sizes
@@ -614,17 +631,17 @@ $font-sizes: (
   3: $h3-font-size,
   4: $h4-font-size,
   5: $h5-font-size,
-  6: $h6-font-size
+  6: $h6-font-size,
 ) !default;
 // scss-docs-end font-sizes
 
 // scss-docs-start headings-variables
-$headings-margin-bottom:      $spacer * .5 !default;
-$headings-font-family:        null !default;
-$headings-font-style:         null !default;
-$headings-font-weight:        500 !default;
-$headings-line-height:        1.2 !default;
-$headings-color:              null !default;
+$headings-margin-bottom: $spacer * 0.5 !default;
+$headings-font-family: null !default;
+$headings-font-style: null !default;
+$headings-font-weight: 500 !default;
+$headings-line-height: 1.2 !default;
+$headings-color: null !default;
 // scss-docs-end headings-variables
 
 // scss-docs-start display-headings
@@ -634,7 +651,7 @@ $display-font-sizes: (
   3: 4rem,
   4: 3.5rem,
   5: 3rem,
-  6: 2.5rem
+  6: 2.5rem,
 ) !default;
 
 $display-font-weight: 300 !default;
@@ -642,420 +659,444 @@ $display-line-height: $headings-line-height !default;
 // scss-docs-end display-headings
 
 // scss-docs-start type-variables
-$lead-font-size:              $font-size-base * 1.25 !default;
-$lead-font-weight:            300 !default;
+$lead-font-size: $font-size-base * 1.25 !default;
+$lead-font-weight: 300 !default;
 
-$small-font-size:             .875em !default;
+$small-font-size: 0.875em !default;
 
-$sub-sup-font-size:           .75em !default;
+$sub-sup-font-size: 0.75em !default;
 
-$text-muted:                  $gray-600 !default;
+$text-muted: $gray-600 !default;
 
-$initialism-font-size:        $small-font-size !default;
+$initialism-font-size: $small-font-size !default;
 
-$blockquote-margin-y:         $spacer !default;
-$blockquote-font-size:        $font-size-base * 1.25 !default;
-$blockquote-footer-color:     $gray-600 !default;
+$blockquote-margin-y: $spacer !default;
+$blockquote-font-size: $font-size-base * 1.25 !default;
+$blockquote-footer-color: $gray-600 !default;
 $blockquote-footer-font-size: $small-font-size !default;
 
-$hr-margin-y:                 $spacer !default;
-$hr-color:                    inherit !default;
-$hr-height:                   $border-width !default;
-$hr-opacity:                  .25 !default;
+$hr-margin-y: $spacer !default;
+$hr-color: inherit !default;
+$hr-height: $border-width !default;
+$hr-opacity: 0.25 !default;
 
-$legend-margin-bottom:        .5rem !default;
-$legend-font-size:            1.5rem !default;
-$legend-font-weight:          null !default;
+$legend-margin-bottom: 0.5rem !default;
+$legend-font-size: 1.5rem !default;
+$legend-font-weight: null !default;
 
-$mark-padding:                .2em !default;
+$mark-padding: 0.2em !default;
 
-$dt-font-weight:              $font-weight-bold !default;
+$dt-font-weight: $font-weight-bold !default;
 
-$nested-kbd-font-weight:      $font-weight-bold !default;
+$nested-kbd-font-weight: $font-weight-bold !default;
 
-$list-inline-padding:         .5rem !default;
+$list-inline-padding: 0.5rem !default;
 
-$mark-bg:                     #fcf8e3 !default;
+$mark-bg: #fcf8e3 !default;
 // scss-docs-end type-variables
 
-
 // Tables
 //
 // Customizes the `.table` component with basic values, each used across all table variations.
 
 // scss-docs-start table-variables
-$table-cell-padding-y:        .5rem !default;
-$table-cell-padding-x:        .5rem !default;
-$table-cell-padding-y-sm:     .25rem !default;
-$table-cell-padding-x-sm:     .25rem !default;
+$table-cell-padding-y: 0.5rem !default;
+$table-cell-padding-x: 0.5rem !default;
+$table-cell-padding-y-sm: 0.25rem !default;
+$table-cell-padding-x-sm: 0.25rem !default;
 
-$table-cell-vertical-align:   top !default;
+$table-cell-vertical-align: top !default;
 
-$table-color:                 $body-color !default;
-$table-bg:                    transparent !default;
-$table-accent-bg:             transparent !default;
+$table-color: $body-color !default;
+$table-bg: transparent !default;
+$table-accent-bg: transparent !default;
 
-$table-th-font-weight:        null !default;
+$table-th-font-weight: null !default;
 
-$table-striped-color:         $table-color !default;
-$table-striped-bg-factor:     .05 !default;
-$table-striped-bg:            rgba($black, $table-striped-bg-factor) !default;
+$table-striped-color: $table-color !default;
+$table-striped-bg-factor: 0.05 !default;
+$table-striped-bg: rgba($black, $table-striped-bg-factor) !default;
 
-$table-active-color:          $table-color !default;
-$table-active-bg-factor:      .1 !default;
-$table-active-bg:             rgba($black, $table-active-bg-factor) !default;
+$table-active-color: $table-color !default;
+$table-active-bg-factor: 0.1 !default;
+$table-active-bg: rgba($black, $table-active-bg-factor) !default;
 
-$table-hover-color:           $table-color !default;
-$table-hover-bg-factor:       .075 !default;
-$table-hover-bg:              rgba($black, $table-hover-bg-factor) !default;
+$table-hover-color: $table-color !default;
+$table-hover-bg-factor: 0.075 !default;
+$table-hover-bg: rgba($black, $table-hover-bg-factor) !default;
 
-$table-border-factor:         .1 !default;
-$table-border-width:          $border-width !default;
-$table-border-color:          $border-color !default;
+$table-border-factor: 0.1 !default;
+$table-border-width: $border-width !default;
+$table-border-color: $border-color !default;
 
-$table-striped-order:         odd !default;
+$table-striped-order: odd !default;
 
 $table-group-separator-color: currentColor !default;
 
-$table-caption-color:         $text-muted !default;
+$table-caption-color: $text-muted !default;
 
-$table-bg-scale:              -80% !default;
+$table-bg-scale: -80% !default;
 // scss-docs-end table-variables
 
 // scss-docs-start table-loop
 $table-variants: (
-  "primary":    shift-color($primary, $table-bg-scale),
-  "secondary":  shift-color($secondary, $table-bg-scale),
-  "success":    shift-color($success, $table-bg-scale),
-  "info":       shift-color($info, $table-bg-scale),
-  "warning":    shift-color($warning, $table-bg-scale),
-  "danger":     shift-color($danger, $table-bg-scale),
-  "light":      $light,
-  "dark":       $dark,
+  "primary": shift-color($primary, $table-bg-scale),
+  "secondary": shift-color($secondary, $table-bg-scale),
+  "success": shift-color($success, $table-bg-scale),
+  "info": shift-color($info, $table-bg-scale),
+  "warning": shift-color($warning, $table-bg-scale),
+  "danger": shift-color($danger, $table-bg-scale),
+  "light": $light,
+  "dark": $dark,
 ) !default;
 // scss-docs-end table-loop
 
-
 // Buttons + Forms
 //
 // Shared variables that are reassigned to `$input-` and `$btn-` specific variables.
 
 // scss-docs-start input-btn-variables
-$input-btn-padding-y:         .375rem !default;
-$input-btn-padding-x:         .75rem !default;
-$input-btn-font-family:       null !default;
-$input-btn-font-size:         $font-size-base !default;
-$input-btn-line-height:       $line-height-base !default;
-
-$input-btn-focus-width:         .25rem !default;
-$input-btn-focus-color-opacity: .25 !default;
-$input-btn-focus-color:         rgba($component-active-bg, $input-btn-focus-color-opacity) !default;
-$input-btn-focus-blur:          0 !default;
-$input-btn-focus-box-shadow:    0 0 $input-btn-focus-blur $input-btn-focus-width $input-btn-focus-color !default;
-
-$input-btn-padding-y-sm:      .25rem !default;
-$input-btn-padding-x-sm:      .5rem !default;
-$input-btn-font-size-sm:      $font-size-sm !default;
-
-$input-btn-padding-y-lg:      .5rem !default;
-$input-btn-padding-x-lg:      1rem !default;
-$input-btn-font-size-lg:      $font-size-lg !default;
-
-$input-btn-border-width:      $border-width !default;
-// scss-docs-end input-btn-variables
+$input-btn-padding-y: 0.375rem !default;
+$input-btn-padding-x: 0.75rem !default;
+$input-btn-font-family: null !default;
+$input-btn-font-size: $font-size-base !default;
+$input-btn-line-height: $line-height-base !default;
+
+$input-btn-focus-width: 0.25rem !default;
+$input-btn-focus-color-opacity: 0.25 !default;
+$input-btn-focus-color: rgba(
+  $component-active-bg,
+  $input-btn-focus-color-opacity
+) !default;
+$input-btn-focus-blur: 0 !default;
+$input-btn-focus-box-shadow: 0 0 $input-btn-focus-blur $input-btn-focus-width
+  $input-btn-focus-color !default;
+
+$input-btn-padding-y-sm: 0.25rem !default;
+$input-btn-padding-x-sm: 0.5rem !default;
+$input-btn-font-size-sm: $font-size-sm !default;
 
+$input-btn-padding-y-lg: 0.5rem !default;
+$input-btn-padding-x-lg: 1rem !default;
+$input-btn-font-size-lg: $font-size-lg !default;
+
+$input-btn-border-width: $border-width !default;
+// scss-docs-end input-btn-variables
 
 // Buttons
 //
 // For each of Bootstrap's buttons, define text, background, and border color.
 
 // scss-docs-start btn-variables
-$btn-padding-y:               $input-btn-padding-y !default;
-$btn-padding-x:               $input-btn-padding-x !default;
-$btn-font-family:             $input-btn-font-family !default;
-$btn-font-size:               $input-btn-font-size !default;
-$btn-line-height:             $input-btn-line-height !default;
-$btn-white-space:             null !default; // Set to `nowrap` to prevent text wrapping
-
-$btn-padding-y-sm:            $input-btn-padding-y-sm !default;
-$btn-padding-x-sm:            $input-btn-padding-x-sm !default;
-$btn-font-size-sm:            $input-btn-font-size-sm !default;
-
-$btn-padding-y-lg:            $input-btn-padding-y-lg !default;
-$btn-padding-x-lg:            $input-btn-padding-x-lg !default;
-$btn-font-size-lg:            $input-btn-font-size-lg !default;
-
-$btn-border-width:            $input-btn-border-width !default;
-
-$btn-font-weight:             $font-weight-normal !default;
-$btn-box-shadow:              inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075) !default;
-$btn-focus-width:             $input-btn-focus-width !default;
-$btn-focus-box-shadow:        $input-btn-focus-box-shadow !default;
-$btn-disabled-opacity:        .65 !default;
-$btn-active-box-shadow:       inset 0 3px 5px rgba($black, .125) !default;
-
-$btn-link-color:              $link-color !default;
-$btn-link-hover-color:        $link-hover-color !default;
-$btn-link-disabled-color:     $gray-600 !default;
+$btn-padding-y: $input-btn-padding-y !default;
+$btn-padding-x: $input-btn-padding-x !default;
+$btn-font-family: $input-btn-font-family !default;
+$btn-font-size: $input-btn-font-size !default;
+$btn-line-height: $input-btn-line-height !default;
+$btn-white-space: null !default; // Set to `nowrap` to prevent text wrapping
+
+$btn-padding-y-sm: $input-btn-padding-y-sm !default;
+$btn-padding-x-sm: $input-btn-padding-x-sm !default;
+$btn-font-size-sm: $input-btn-font-size-sm !default;
+
+$btn-padding-y-lg: $input-btn-padding-y-lg !default;
+$btn-padding-x-lg: $input-btn-padding-x-lg !default;
+$btn-font-size-lg: $input-btn-font-size-lg !default;
+
+$btn-border-width: $input-btn-border-width !default;
+
+$btn-font-weight: $font-weight-normal !default;
+$btn-box-shadow: inset 0 1px 0 rgba($white, 0.15), 0 1px 1px rgba($black, 0.075) !default;
+$btn-focus-width: $input-btn-focus-width !default;
+$btn-focus-box-shadow: $input-btn-focus-box-shadow !default;
+$btn-disabled-opacity: 0.65 !default;
+$btn-active-box-shadow: inset 0 3px 5px rgba($black, 0.125) !default;
+
+$btn-link-color: $link-color !default;
+$btn-link-hover-color: $link-hover-color !default;
+$btn-link-disabled-color: $gray-600 !default;
 
 // Allows for customizing button radius independently from global border radius
-$btn-border-radius:           $border-radius !default;
-$btn-border-radius-sm:        $border-radius-sm !default;
-$btn-border-radius-lg:        $border-radius-lg !default;
-
-$btn-transition:              color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
-
-$btn-hover-bg-shade-amount:       15% !default;
-$btn-hover-bg-tint-amount:        15% !default;
-$btn-hover-border-shade-amount:   20% !default;
-$btn-hover-border-tint-amount:    10% !default;
-$btn-active-bg-shade-amount:      20% !default;
-$btn-active-bg-tint-amount:       20% !default;
-$btn-active-border-shade-amount:  25% !default;
-$btn-active-border-tint-amount:   10% !default;
+$btn-border-radius: $border-radius !default;
+$btn-border-radius-sm: $border-radius-sm !default;
+$btn-border-radius-lg: $border-radius-lg !default;
+
+$btn-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
+  border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !default;
+
+$btn-hover-bg-shade-amount: 15% !default;
+$btn-hover-bg-tint-amount: 15% !default;
+$btn-hover-border-shade-amount: 20% !default;
+$btn-hover-border-tint-amount: 10% !default;
+$btn-active-bg-shade-amount: 20% !default;
+$btn-active-bg-tint-amount: 20% !default;
+$btn-active-border-shade-amount: 25% !default;
+$btn-active-border-tint-amount: 10% !default;
 // scss-docs-end btn-variables
 
-
 // Forms
 
 // scss-docs-start form-text-variables
-$form-text-margin-top:                  .25rem !default;
-$form-text-font-size:                   $small-font-size !default;
-$form-text-font-style:                  null !default;
-$form-text-font-weight:                 null !default;
-$form-text-color:                       $text-muted !default;
+$form-text-margin-top: 0.25rem !default;
+$form-text-font-size: $small-font-size !default;
+$form-text-font-style: null !default;
+$form-text-font-weight: null !default;
+$form-text-color: $text-muted !default;
 // scss-docs-end form-text-variables
 
 // scss-docs-start form-label-variables
-$form-label-margin-bottom:              .5rem !default;
-$form-label-font-size:                  null !default;
-$form-label-font-style:                 null !default;
-$form-label-font-weight:                null !default;
-$form-label-color:                      null !default;
+$form-label-margin-bottom: 0.5rem !default;
+$form-label-font-size: null !default;
+$form-label-font-style: null !default;
+$form-label-font-weight: null !default;
+$form-label-color: null !default;
 // scss-docs-end form-label-variables
 
 // scss-docs-start form-input-variables
-$input-padding-y:                       $input-btn-padding-y !default;
-$input-padding-x:                       $input-btn-padding-x !default;
-$input-font-family:                     $input-btn-font-family !default;
-$input-font-size:                       $input-btn-font-size !default;
-$input-font-weight:                     $font-weight-base !default;
-$input-line-height:                     $input-btn-line-height !default;
-
-$input-padding-y-sm:                    $input-btn-padding-y-sm !default;
-$input-padding-x-sm:                    $input-btn-padding-x-sm !default;
-$input-font-size-sm:                    $input-btn-font-size-sm !default;
-
-$input-padding-y-lg:                    $input-btn-padding-y-lg !default;
-$input-padding-x-lg:                    $input-btn-padding-x-lg !default;
-$input-font-size-lg:                    $input-btn-font-size-lg !default;
-
-$input-bg:                              $body-bg !default;
-$input-disabled-bg:                     $gray-200 !default;
-$input-disabled-border-color:           null !default;
-
-$input-color:                           $body-color !default;
-$input-border-color:                    $gray-400 !default;
-$input-border-width:                    $input-btn-border-width !default;
-$input-box-shadow:                      $box-shadow-inset !default;
-
-$input-border-radius:                   $border-radius !default;
-$input-border-radius-sm:                $border-radius-sm !default;
-$input-border-radius-lg:                $border-radius-lg !default;
-
-$input-focus-bg:                        $input-bg !default;
-$input-focus-border-color:              tint-color($component-active-bg, 50%) !default;
-$input-focus-color:                     $input-color !default;
-$input-focus-width:                     $input-btn-focus-width !default;
-$input-focus-box-shadow:                $input-btn-focus-box-shadow !default;
-
-$input-placeholder-color:               $gray-600 !default;
-$input-plaintext-color:                 $body-color !default;
-
-$input-height-border:                   $input-border-width * 2 !default;
-
-$input-height-inner:                    add($input-line-height * 1em, $input-padding-y * 2) !default;
-$input-height-inner-half:               add($input-line-height * .5em, $input-padding-y) !default;
-$input-height-inner-quarter:            add($input-line-height * .25em, $input-padding-y * .5) !default;
+$input-padding-y: $input-btn-padding-y !default;
+$input-padding-x: $input-btn-padding-x !default;
+$input-font-family: $input-btn-font-family !default;
+$input-font-size: $input-btn-font-size !default;
+$input-font-weight: $font-weight-base !default;
+$input-line-height: $input-btn-line-height !default;
+
+$input-padding-y-sm: $input-btn-padding-y-sm !default;
+$input-padding-x-sm: $input-btn-padding-x-sm !default;
+$input-font-size-sm: $input-btn-font-size-sm !default;
+
+$input-padding-y-lg: $input-btn-padding-y-lg !default;
+$input-padding-x-lg: $input-btn-padding-x-lg !default;
+$input-font-size-lg: $input-btn-font-size-lg !default;
+
+$input-bg: $body-bg !default;
+$input-disabled-bg: $gray-200 !default;
+$input-disabled-border-color: null !default;
+
+$input-color: $body-color !default;
+$input-border-color: $gray-400 !default;
+$input-border-width: $input-btn-border-width !default;
+$input-box-shadow: $box-shadow-inset !default;
+
+$input-border-radius: $border-radius !default;
+$input-border-radius-sm: $border-radius-sm !default;
+$input-border-radius-lg: $border-radius-lg !default;
+
+$input-focus-bg: $input-bg !default;
+$input-focus-border-color: tint-color($component-active-bg, 50%) !default;
+$input-focus-color: $input-color !default;
+$input-focus-width: $input-btn-focus-width !default;
+$input-focus-box-shadow: $input-btn-focus-box-shadow !default;
+
+$input-placeholder-color: $gray-600 !default;
+$input-plaintext-color: $body-color !default;
+
+$input-height-border: $input-border-width * 2 !default;
+
+$input-height-inner: add(
+  $input-line-height * 1em,
+  $input-padding-y * 2
+) !default;
+$input-height-inner-half: add(
+  $input-line-height * 0.5em,
+  $input-padding-y
+) !default;
+$input-height-inner-quarter: add(
+  $input-line-height * 0.25em,
+  $input-padding-y * 0.5
+) !default;
 
-$input-height:                          add($input-line-height * 1em, add($input-padding-y * 2, $input-height-border, false)) !default;
-$input-height-sm:                       add($input-line-height * 1em, add($input-padding-y-sm * 2, $input-height-border, false)) !default;
-$input-height-lg:                       add($input-line-height * 1em, add($input-padding-y-lg * 2, $input-height-border, false)) !default;
+$input-height: add(
+  $input-line-height * 1em,
+  add($input-padding-y * 2, $input-height-border, false)
+) !default;
+$input-height-sm: add(
+  $input-line-height * 1em,
+  add($input-padding-y-sm * 2, $input-height-border, false)
+) !default;
+$input-height-lg: add(
+  $input-line-height * 1em,
+  add($input-padding-y-lg * 2, $input-height-border, false)
+) !default;
 
-$input-transition:                      border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
+$input-transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !default;
 
-$form-color-width:                      3rem !default;
+$form-color-width: 3rem !default;
 // scss-docs-end form-input-variables
 
 // scss-docs-start form-check-variables
-$form-check-input-width:                  1em !default;
-$form-check-min-height:                   $font-size-base * $line-height-base !default;
-$form-check-padding-start:                $form-check-input-width + .5em !default;
-$form-check-margin-bottom:                .125rem !default;
-$form-check-label-color:                  null !default;
-$form-check-label-cursor:                 null !default;
-$form-check-transition:                   null !default;
-
-$form-check-input-active-filter:          brightness(90%) !default;
-
-$form-check-input-bg:                     $input-bg !default;
-$form-check-input-border:                 1px solid rgba($black, .25) !default;
-$form-check-input-border-radius:          .25em !default;
-$form-check-radio-border-radius:          50% !default;
-$form-check-input-focus-border:           $input-focus-border-color !default;
-$form-check-input-focus-box-shadow:       $input-btn-focus-box-shadow !default;
-
-$form-check-input-checked-color:          $component-active-color !default;
-$form-check-input-checked-bg-color:       $component-active-bg !default;
-$form-check-input-checked-border-color:   $form-check-input-checked-bg-color !default;
-$form-check-input-checked-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-checked-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/></svg>") !default;
-$form-check-radio-checked-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#{$form-check-input-checked-color}'/></svg>") !default;
-
-$form-check-input-indeterminate-color:          $component-active-color !default;
-$form-check-input-indeterminate-bg-color:       $component-active-bg !default;
-$form-check-input-indeterminate-border-color:   $form-check-input-indeterminate-bg-color !default;
-$form-check-input-indeterminate-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-indeterminate-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/></svg>") !default;
-
-$form-check-input-disabled-opacity:        .5 !default;
-$form-check-label-disabled-opacity:        $form-check-input-disabled-opacity !default;
-$form-check-btn-check-disabled-opacity:    $btn-disabled-opacity !default;
-
-$form-check-inline-margin-end:    1rem !default;
+$form-check-input-width: 1em !default;
+$form-check-min-height: $font-size-base * $line-height-base !default;
+$form-check-padding-start: $form-check-input-width + 0.5em !default;
+$form-check-margin-bottom: 0.125rem !default;
+$form-check-label-color: null !default;
+$form-check-label-cursor: null !default;
+$form-check-transition: null !default;
+
+$form-check-input-active-filter: brightness(90%) !default;
+
+$form-check-input-bg: $input-bg !default;
+$form-check-input-border: 1px solid rgba($black, 0.25) !default;
+$form-check-input-border-radius: 0.25em !default;
+$form-check-radio-border-radius: 50% !default;
+$form-check-input-focus-border: $input-focus-border-color !default;
+$form-check-input-focus-box-shadow: $input-btn-focus-box-shadow !default;
+
+$form-check-input-checked-color: $component-active-color !default;
+$form-check-input-checked-bg-color: $component-active-bg !default;
+$form-check-input-checked-border-color: $form-check-input-checked-bg-color !default;
+$form-check-input-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-checked-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/></svg>") !default;
+$form-check-radio-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#{$form-check-input-checked-color}'/></svg>") !default;
+
+$form-check-input-indeterminate-color: $component-active-color !default;
+$form-check-input-indeterminate-bg-color: $component-active-bg !default;
+$form-check-input-indeterminate-border-color: $form-check-input-indeterminate-bg-color !default;
+$form-check-input-indeterminate-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-indeterminate-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/></svg>") !default;
+
+$form-check-input-disabled-opacity: 0.5 !default;
+$form-check-label-disabled-opacity: $form-check-input-disabled-opacity !default;
+$form-check-btn-check-disabled-opacity: $btn-disabled-opacity !default;
+
+$form-check-inline-margin-end: 1rem !default;
 // scss-docs-end form-check-variables
 
 // scss-docs-start form-switch-variables
-$form-switch-color:               rgba($black, .25) !default;
-$form-switch-width:               2em !default;
-$form-switch-padding-start:       $form-switch-width + .5em !default;
-$form-switch-bg-image:            url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color}'/></svg>") !default;
-$form-switch-border-radius:       $form-switch-width !default;
-$form-switch-transition:          background-position .15s ease-in-out !default;
-
-$form-switch-focus-color:         $input-focus-border-color !default;
-$form-switch-focus-bg-image:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-focus-color}'/></svg>") !default;
-
-$form-switch-checked-color:       $component-active-color !default;
-$form-switch-checked-bg-image:    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-checked-color}'/></svg>") !default;
+$form-switch-color: rgba($black, 0.25) !default;
+$form-switch-width: 2em !default;
+$form-switch-padding-start: $form-switch-width + 0.5em !default;
+$form-switch-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color}'/></svg>") !default;
+$form-switch-border-radius: $form-switch-width !default;
+$form-switch-transition: background-position 0.15s ease-in-out !default;
+
+$form-switch-focus-color: $input-focus-border-color !default;
+$form-switch-focus-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-focus-color}'/></svg>") !default;
+
+$form-switch-checked-color: $component-active-color !default;
+$form-switch-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-checked-color}'/></svg>") !default;
 $form-switch-checked-bg-position: right center !default;
 // scss-docs-end form-switch-variables
 
 // scss-docs-start input-group-variables
-$input-group-addon-padding-y:           $input-padding-y !default;
-$input-group-addon-padding-x:           $input-padding-x !default;
-$input-group-addon-font-weight:         $input-font-weight !default;
-$input-group-addon-color:               $input-color !default;
-$input-group-addon-bg:                  $gray-200 !default;
-$input-group-addon-border-color:        $input-border-color !default;
+$input-group-addon-padding-y: $input-padding-y !default;
+$input-group-addon-padding-x: $input-padding-x !default;
+$input-group-addon-font-weight: $input-font-weight !default;
+$input-group-addon-color: $input-color !default;
+$input-group-addon-bg: $gray-200 !default;
+$input-group-addon-border-color: $input-border-color !default;
 // scss-docs-end input-group-variables
 
 // scss-docs-start form-select-variables
-$form-select-padding-y:             $input-padding-y !default;
-$form-select-padding-x:             $input-padding-x !default;
-$form-select-font-family:           $input-font-family !default;
-$form-select-font-size:             $input-font-size !default;
-$form-select-indicator-padding:     $form-select-padding-x * 3 !default; // Extra padding for background-image
-$form-select-font-weight:           $input-font-weight !default;
-$form-select-line-height:           $input-line-height !default;
-$form-select-color:                 $input-color !default;
-$form-select-bg:                    $input-bg !default;
-$form-select-disabled-color:        null !default;
-$form-select-disabled-bg:           $gray-200 !default;
+$form-select-padding-y: $input-padding-y !default;
+$form-select-padding-x: $input-padding-x !default;
+$form-select-font-family: $input-font-family !default;
+$form-select-font-size: $input-font-size !default;
+$form-select-indicator-padding: $form-select-padding-x * 3 !default; // Extra padding for background-image
+$form-select-font-weight: $input-font-weight !default;
+$form-select-line-height: $input-line-height !default;
+$form-select-color: $input-color !default;
+$form-select-bg: $input-bg !default;
+$form-select-disabled-color: null !default;
+$form-select-disabled-bg: $gray-200 !default;
 $form-select-disabled-border-color: $input-disabled-border-color !default;
-$form-select-bg-position:           right $form-select-padding-x center !default;
-$form-select-bg-size:               16px 12px !default; // In pixels because image dimensions
-$form-select-indicator-color:       $gray-800 !default;
-$form-select-indicator:             url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-select-indicator-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/></svg>") !default;
-
-$form-select-feedback-icon-padding-end: $form-select-padding-x * 2.5 + $form-select-indicator-padding !default;
-$form-select-feedback-icon-position:    center right $form-select-indicator-padding !default;
-$form-select-feedback-icon-size:        $input-height-inner-half $input-height-inner-half !default;
-
-$form-select-border-width:        $input-border-width !default;
-$form-select-border-color:        $input-border-color !default;
-$form-select-border-radius:       $input-border-radius !default;
-$form-select-box-shadow:          $box-shadow-inset !default;
-
-$form-select-focus-border-color:  $input-focus-border-color !default;
-$form-select-focus-width:         $input-focus-width !default;
-$form-select-focus-box-shadow:    0 0 0 $form-select-focus-width $input-btn-focus-color !default;
-
-$form-select-padding-y-sm:        $input-padding-y-sm !default;
-$form-select-padding-x-sm:        $input-padding-x-sm !default;
-$form-select-font-size-sm:        $input-font-size-sm !default;
-$form-select-border-radius-sm:    $input-border-radius-sm !default;
-
-$form-select-padding-y-lg:        $input-padding-y-lg !default;
-$form-select-padding-x-lg:        $input-padding-x-lg !default;
-$form-select-font-size-lg:        $input-font-size-lg !default;
-$form-select-border-radius-lg:    $input-border-radius-lg !default;
-
-$form-select-transition:          $input-transition !default;
+$form-select-bg-position: right $form-select-padding-x center !default;
+$form-select-bg-size: 16px 12px !default; // In pixels because image dimensions
+$form-select-indicator-color: $gray-800 !default;
+$form-select-indicator: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-select-indicator-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/></svg>") !default;
+
+$form-select-feedback-icon-padding-end: $form-select-padding-x * 2.5 +
+  $form-select-indicator-padding !default;
+$form-select-feedback-icon-position: center right $form-select-indicator-padding !default;
+$form-select-feedback-icon-size: $input-height-inner-half
+  $input-height-inner-half !default;
+
+$form-select-border-width: $input-border-width !default;
+$form-select-border-color: $input-border-color !default;
+$form-select-border-radius: $input-border-radius !default;
+$form-select-box-shadow: $box-shadow-inset !default;
+
+$form-select-focus-border-color: $input-focus-border-color !default;
+$form-select-focus-width: $input-focus-width !default;
+$form-select-focus-box-shadow: 0 0 0 $form-select-focus-width
+  $input-btn-focus-color !default;
+
+$form-select-padding-y-sm: $input-padding-y-sm !default;
+$form-select-padding-x-sm: $input-padding-x-sm !default;
+$form-select-font-size-sm: $input-font-size-sm !default;
+$form-select-border-radius-sm: $input-border-radius-sm !default;
+
+$form-select-padding-y-lg: $input-padding-y-lg !default;
+$form-select-padding-x-lg: $input-padding-x-lg !default;
+$form-select-font-size-lg: $input-font-size-lg !default;
+$form-select-border-radius-lg: $input-border-radius-lg !default;
+
+$form-select-transition: $input-transition !default;
 // scss-docs-end form-select-variables
 
 // scss-docs-start form-range-variables
-$form-range-track-width:          100% !default;
-$form-range-track-height:         .5rem !default;
-$form-range-track-cursor:         pointer !default;
-$form-range-track-bg:             $gray-300 !default;
-$form-range-track-border-radius:  1rem !default;
-$form-range-track-box-shadow:     $box-shadow-inset !default;
-
-$form-range-thumb-width:                   1rem !default;
-$form-range-thumb-height:                  $form-range-thumb-width !default;
-$form-range-thumb-bg:                      $component-active-bg !default;
-$form-range-thumb-border:                  0 !default;
-$form-range-thumb-border-radius:           1rem !default;
-$form-range-thumb-box-shadow:              0 .1rem .25rem rgba($black, .1) !default;
-$form-range-thumb-focus-box-shadow:        0 0 0 1px $body-bg, $input-focus-box-shadow !default;
-$form-range-thumb-focus-box-shadow-width:  $input-focus-width !default; // For focus box shadow issue in Edge
-$form-range-thumb-active-bg:               tint-color($component-active-bg, 70%) !default;
-$form-range-thumb-disabled-bg:             $gray-500 !default;
-$form-range-thumb-transition:              background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
+$form-range-track-width: 100% !default;
+$form-range-track-height: 0.5rem !default;
+$form-range-track-cursor: pointer !default;
+$form-range-track-bg: $gray-300 !default;
+$form-range-track-border-radius: 1rem !default;
+$form-range-track-box-shadow: $box-shadow-inset !default;
+
+$form-range-thumb-width: 1rem !default;
+$form-range-thumb-height: $form-range-thumb-width !default;
+$form-range-thumb-bg: $component-active-bg !default;
+$form-range-thumb-border: 0 !default;
+$form-range-thumb-border-radius: 1rem !default;
+$form-range-thumb-box-shadow: 0 0.1rem 0.25rem rgba($black, 0.1) !default;
+$form-range-thumb-focus-box-shadow: 0 0 0 1px $body-bg, $input-focus-box-shadow !default;
+$form-range-thumb-focus-box-shadow-width: $input-focus-width !default; // For focus box shadow issue in Edge
+$form-range-thumb-active-bg: tint-color($component-active-bg, 70%) !default;
+$form-range-thumb-disabled-bg: $gray-500 !default;
+$form-range-thumb-transition: background-color 0.15s ease-in-out,
+  border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !default;
 // scss-docs-end form-range-variables
 
 // scss-docs-start form-file-variables
-$form-file-button-color:          $input-color !default;
-$form-file-button-bg:             $input-group-addon-bg !default;
-$form-file-button-hover-bg:       shade-color($form-file-button-bg, 5%) !default;
+$form-file-button-color: $input-color !default;
+$form-file-button-bg: $input-group-addon-bg !default;
+$form-file-button-hover-bg: shade-color($form-file-button-bg, 5%) !default;
 // scss-docs-end form-file-variables
 
 // scss-docs-start form-floating-variables
-$form-floating-height:            add(3.5rem, $input-height-border) !default;
-$form-floating-line-height:       1.25 !default;
-$form-floating-padding-x:         $input-padding-x !default;
-$form-floating-padding-y:         1rem !default;
-$form-floating-input-padding-t:   1.625rem !default;
-$form-floating-input-padding-b:   .625rem !default;
-$form-floating-label-opacity:     .65 !default;
-$form-floating-label-transform:   scale(.85) translateY(-.5rem) translateX(.15rem) !default;
-$form-floating-transition:        opacity .1s ease-in-out, transform .1s ease-in-out !default;
+$form-floating-height: add(3.5rem, $input-height-border) !default;
+$form-floating-line-height: 1.25 !default;
+$form-floating-padding-x: $input-padding-x !default;
+$form-floating-padding-y: 1rem !default;
+$form-floating-input-padding-t: 1.625rem !default;
+$form-floating-input-padding-b: 0.625rem !default;
+$form-floating-label-opacity: 0.65 !default;
+$form-floating-label-transform: scale(0.85) translateY(-0.5rem)
+  translateX(0.15rem) !default;
+$form-floating-transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out !default;
 // scss-docs-end form-floating-variables
 
 // Form validation
 
 // scss-docs-start form-feedback-variables
-$form-feedback-margin-top:          $form-text-margin-top !default;
-$form-feedback-font-size:           $form-text-font-size !default;
-$form-feedback-font-style:          $form-text-font-style !default;
-$form-feedback-valid-color:         $success !default;
-$form-feedback-invalid-color:       $danger !default;
-
-$form-feedback-icon-valid-color:    $form-feedback-valid-color !default;
-$form-feedback-icon-valid:          url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='#{$form-feedback-icon-valid-color}' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/></svg>") !default;
-$form-feedback-icon-invalid-color:  $form-feedback-invalid-color !default;
-$form-feedback-icon-invalid:        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='#{$form-feedback-icon-invalid-color}'><circle cx='6' cy='6' r='4.5'/><path stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/><circle cx='6' cy='8.2' r='.6' fill='#{$form-feedback-icon-invalid-color}' stroke='none'/></svg>") !default;
+$form-feedback-margin-top: $form-text-margin-top !default;
+$form-feedback-font-size: $form-text-font-size !default;
+$form-feedback-font-style: $form-text-font-style !default;
+$form-feedback-valid-color: $success !default;
+$form-feedback-invalid-color: $danger !default;
+
+$form-feedback-icon-valid-color: $form-feedback-valid-color !default;
+$form-feedback-icon-valid: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='#{$form-feedback-icon-valid-color}' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/></svg>") !default;
+$form-feedback-icon-invalid-color: $form-feedback-invalid-color !default;
+$form-feedback-icon-invalid: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='#{$form-feedback-icon-invalid-color}'><circle cx='6' cy='6' r='4.5'/><path stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/><circle cx='6' cy='8.2' r='.6' fill='#{$form-feedback-icon-invalid-color}' stroke='none'/></svg>") !default;
 // scss-docs-end form-feedback-variables
 
 // scss-docs-start form-validation-states
 $form-validation-states: (
   "valid": (
     "color": $form-feedback-valid-color,
-    "icon": $form-feedback-icon-valid
+    "icon": $form-feedback-icon-valid,
   ),
   "invalid": (
     "color": $form-feedback-invalid-color,
-    "icon": $form-feedback-icon-invalid
-  )
+    "icon": $form-feedback-icon-invalid,
+  ),
 ) !default;
 // scss-docs-end form-validation-states
 
@@ -1065,577 +1106,577 @@ $form-validation-states: (
 // of components dependent on the z-axis and are designed to all work together.
 
 // scss-docs-start zindex-stack
-$zindex-dropdown:                   1000 !default;
-$zindex-sticky:                     1020 !default;
-$zindex-fixed:                      1030 !default;
-$zindex-offcanvas-backdrop:         1040 !default;
-$zindex-offcanvas:                  1045 !default;
-$zindex-modal-backdrop:             1050 !default;
-$zindex-modal:                      1055 !default;
-$zindex-popover:                    1070 !default;
-$zindex-tooltip:                    1080 !default;
+$zindex-dropdown: 1000 !default;
+$zindex-sticky: 1020 !default;
+$zindex-fixed: 1030 !default;
+$zindex-offcanvas-backdrop: 1040 !default;
+$zindex-offcanvas: 1045 !default;
+$zindex-modal-backdrop: 1050 !default;
+$zindex-modal: 1055 !default;
+$zindex-popover: 1070 !default;
+$zindex-tooltip: 1080 !default;
 // scss-docs-end zindex-stack
 
-
 // Navs
 
 // scss-docs-start nav-variables
-$nav-link-padding-y:                .5rem !default;
-$nav-link-padding-x:                1rem !default;
-$nav-link-font-size:                null !default;
-$nav-link-font-weight:              null !default;
-$nav-link-color:                    $link-color !default;
-$nav-link-hover-color:              $link-hover-color !default;
-$nav-link-transition:               color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out !default;
-$nav-link-disabled-color:           $gray-600 !default;
-
-$nav-tabs-border-color:             $gray-300 !default;
-$nav-tabs-border-width:             $border-width !default;
-$nav-tabs-border-radius:            $border-radius !default;
-$nav-tabs-link-hover-border-color:  $gray-200 $gray-200 $nav-tabs-border-color !default;
-$nav-tabs-link-active-color:        $gray-700 !default;
-$nav-tabs-link-active-bg:           $body-bg !default;
+$nav-link-padding-y: 0.5rem !default;
+$nav-link-padding-x: 1rem !default;
+$nav-link-font-size: null !default;
+$nav-link-font-weight: null !default;
+$nav-link-color: $link-color !default;
+$nav-link-hover-color: $link-hover-color !default;
+$nav-link-transition: color 0.15s ease-in-out,
+  background-color 0.15s ease-in-out, border-color 0.15s ease-in-out !default;
+$nav-link-disabled-color: $gray-600 !default;
+
+$nav-tabs-border-color: $gray-300 !default;
+$nav-tabs-border-width: $border-width !default;
+$nav-tabs-border-radius: $border-radius !default;
+$nav-tabs-link-hover-border-color: $gray-200 $gray-200 $nav-tabs-border-color !default;
+$nav-tabs-link-active-color: $gray-700 !default;
+$nav-tabs-link-active-bg: $body-bg !default;
 $nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg !default;
 
-$nav-pills-border-radius:           $border-radius !default;
-$nav-pills-link-active-color:       $component-active-color !default;
-$nav-pills-link-active-bg:          $component-active-bg !default;
+$nav-pills-border-radius: $border-radius !default;
+$nav-pills-link-active-color: $component-active-color !default;
+$nav-pills-link-active-bg: $component-active-bg !default;
 // scss-docs-end nav-variables
 
-
 // Navbar
 
 // scss-docs-start navbar-variables
-$navbar-padding-y:                  $spacer * .5 !default;
-$navbar-padding-x:                  null !default;
+$navbar-padding-y: $spacer * 0.5 !default;
+$navbar-padding-x: null !default;
 
-$navbar-nav-link-padding-x:         .5rem !default;
+$navbar-nav-link-padding-x: 0.5rem !default;
 
-$navbar-brand-font-size:            $font-size-lg !default;
+$navbar-brand-font-size: $font-size-lg !default;
 // Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
-$nav-link-height:                   $font-size-base * $line-height-base + $nav-link-padding-y * 2 !default;
-$navbar-brand-height:               $navbar-brand-font-size * $line-height-base !default;
-$navbar-brand-padding-y:            ($nav-link-height - $navbar-brand-height) * .5 !default;
-$navbar-brand-margin-end:           1rem !default;
-
-$navbar-toggler-padding-y:          .25rem !default;
-$navbar-toggler-padding-x:          .75rem !default;
-$navbar-toggler-font-size:          $font-size-lg !default;
-$navbar-toggler-border-radius:      $btn-border-radius !default;
-$navbar-toggler-focus-width:        $btn-focus-width !default;
-$navbar-toggler-transition:         box-shadow .15s ease-in-out !default;
+$nav-link-height: $font-size-base * $line-height-base + $nav-link-padding-y * 2 !default;
+$navbar-brand-height: $navbar-brand-font-size * $line-height-base !default;
+$navbar-brand-padding-y: ($nav-link-height - $navbar-brand-height) * 0.5 !default;
+$navbar-brand-margin-end: 1rem !default;
+
+$navbar-toggler-padding-y: 0.25rem !default;
+$navbar-toggler-padding-x: 0.75rem !default;
+$navbar-toggler-font-size: $font-size-lg !default;
+$navbar-toggler-border-radius: $btn-border-radius !default;
+$navbar-toggler-focus-width: $btn-focus-width !default;
+$navbar-toggler-transition: box-shadow 0.15s ease-in-out !default;
 // scss-docs-end navbar-variables
 
 // scss-docs-start navbar-theme-variables
-$navbar-dark-color:                 rgba($white, .55) !default;
-$navbar-dark-hover-color:           rgba($white, .75) !default;
-$navbar-dark-active-color:          $white !default;
-$navbar-dark-disabled-color:        rgba($white, .25) !default;
-$navbar-dark-toggler-icon-bg:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
-$navbar-dark-toggler-border-color:  rgba($white, .1) !default;
-
-$navbar-light-color:                rgba($black, .55) !default;
-$navbar-light-hover-color:          rgba($black, .7) !default;
-$navbar-light-active-color:         rgba($black, .9) !default;
-$navbar-light-disabled-color:       rgba($black, .3) !default;
-$navbar-light-toggler-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-light-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
-$navbar-light-toggler-border-color: rgba($black, .1) !default;
-
-$navbar-light-brand-color:                $navbar-light-active-color !default;
-$navbar-light-brand-hover-color:          $navbar-light-active-color !default;
-$navbar-dark-brand-color:                 $navbar-dark-active-color !default;
-$navbar-dark-brand-hover-color:           $navbar-dark-active-color !default;
+$navbar-dark-color: rgba($white, 0.55) !default;
+$navbar-dark-hover-color: rgba($white, 0.75) !default;
+$navbar-dark-active-color: $white !default;
+$navbar-dark-disabled-color: rgba($white, 0.25) !default;
+$navbar-dark-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
+$navbar-dark-toggler-border-color: rgba($white, 0.1) !default;
+
+$navbar-light-color: rgba($black, 0.55) !default;
+$navbar-light-hover-color: rgba($black, 0.7) !default;
+$navbar-light-active-color: rgba($black, 0.9) !default;
+$navbar-light-disabled-color: rgba($black, 0.3) !default;
+$navbar-light-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-light-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
+$navbar-light-toggler-border-color: rgba($black, 0.1) !default;
+
+$navbar-light-brand-color: $navbar-light-active-color !default;
+$navbar-light-brand-hover-color: $navbar-light-active-color !default;
+$navbar-dark-brand-color: $navbar-dark-active-color !default;
+$navbar-dark-brand-hover-color: $navbar-dark-active-color !default;
 // scss-docs-end navbar-theme-variables
 
-
 // Dropdowns
 //
 // Dropdown menu container and contents.
 
 // scss-docs-start dropdown-variables
-$dropdown-min-width:                10rem !default;
-$dropdown-padding-x:                0 !default;
-$dropdown-padding-y:                .5rem !default;
-$dropdown-spacer:                   .125rem !default;
-$dropdown-font-size:                $font-size-base !default;
-$dropdown-color:                    $body-color !default;
-$dropdown-bg:                       $white !default;
-$dropdown-border-color:             rgba($black, .15) !default;
-$dropdown-border-radius:            $border-radius !default;
-$dropdown-border-width:             $border-width !default;
-$dropdown-inner-border-radius:      subtract($dropdown-border-radius, $dropdown-border-width) !default;
-$dropdown-divider-bg:               $dropdown-border-color !default;
-$dropdown-divider-margin-y:         $spacer * .5 !default;
-$dropdown-box-shadow:               $box-shadow !default;
-
-$dropdown-link-color:               $gray-900 !default;
-$dropdown-link-hover-color:         shade-color($dropdown-link-color, 10%) !default;
-$dropdown-link-hover-bg:            $gray-200 !default;
-
-$dropdown-link-active-color:        $component-active-color !default;
-$dropdown-link-active-bg:           $component-active-bg !default;
-
-$dropdown-link-disabled-color:      $gray-500 !default;
-
-$dropdown-item-padding-y:           $spacer * .25 !default;
-$dropdown-item-padding-x:           $spacer !default;
-
-$dropdown-header-color:             $gray-600 !default;
-$dropdown-header-padding:           $dropdown-padding-y $dropdown-item-padding-x !default;
+$dropdown-min-width: 10rem !default;
+$dropdown-padding-x: 0 !default;
+$dropdown-padding-y: 0.5rem !default;
+$dropdown-spacer: 0.125rem !default;
+$dropdown-font-size: $font-size-base !default;
+$dropdown-color: $body-color !default;
+$dropdown-bg: $white !default;
+$dropdown-border-color: rgba($black, 0.15) !default;
+$dropdown-border-radius: $border-radius !default;
+$dropdown-border-width: $border-width !default;
+$dropdown-inner-border-radius: subtract(
+  $dropdown-border-radius,
+  $dropdown-border-width
+) !default;
+$dropdown-divider-bg: $dropdown-border-color !default;
+$dropdown-divider-margin-y: $spacer * 0.5 !default;
+$dropdown-box-shadow: $box-shadow !default;
+
+$dropdown-link-color: $gray-900 !default;
+$dropdown-link-hover-color: shade-color($dropdown-link-color, 10%) !default;
+$dropdown-link-hover-bg: $gray-200 !default;
+
+$dropdown-link-active-color: $component-active-color !default;
+$dropdown-link-active-bg: $component-active-bg !default;
+
+$dropdown-link-disabled-color: $gray-500 !default;
+
+$dropdown-item-padding-y: $spacer * 0.25 !default;
+$dropdown-item-padding-x: $spacer !default;
+
+$dropdown-header-color: $gray-600 !default;
+$dropdown-header-padding: $dropdown-padding-y $dropdown-item-padding-x !default;
 // scss-docs-end dropdown-variables
 
 // scss-docs-start dropdown-dark-variables
-$dropdown-dark-color:               $gray-300 !default;
-$dropdown-dark-bg:                  $gray-800 !default;
-$dropdown-dark-border-color:        $dropdown-border-color !default;
-$dropdown-dark-divider-bg:          $dropdown-divider-bg !default;
-$dropdown-dark-box-shadow:          null !default;
-$dropdown-dark-link-color:          $dropdown-dark-color !default;
-$dropdown-dark-link-hover-color:    $white !default;
-$dropdown-dark-link-hover-bg:       rgba($white, .15) !default;
-$dropdown-dark-link-active-color:   $dropdown-link-active-color !default;
-$dropdown-dark-link-active-bg:      $dropdown-link-active-bg !default;
+$dropdown-dark-color: $gray-300 !default;
+$dropdown-dark-bg: $gray-800 !default;
+$dropdown-dark-border-color: $dropdown-border-color !default;
+$dropdown-dark-divider-bg: $dropdown-divider-bg !default;
+$dropdown-dark-box-shadow: null !default;
+$dropdown-dark-link-color: $dropdown-dark-color !default;
+$dropdown-dark-link-hover-color: $white !default;
+$dropdown-dark-link-hover-bg: rgba($white, 0.15) !default;
+$dropdown-dark-link-active-color: $dropdown-link-active-color !default;
+$dropdown-dark-link-active-bg: $dropdown-link-active-bg !default;
 $dropdown-dark-link-disabled-color: $gray-500 !default;
-$dropdown-dark-header-color:        $gray-500 !default;
+$dropdown-dark-header-color: $gray-500 !default;
 // scss-docs-end dropdown-dark-variables
 
-
 // Pagination
 
 // scss-docs-start pagination-variables
-$pagination-padding-y:              .375rem !default;
-$pagination-padding-x:              .75rem !default;
-$pagination-padding-y-sm:           .25rem !default;
-$pagination-padding-x-sm:           .5rem !default;
-$pagination-padding-y-lg:           .75rem !default;
-$pagination-padding-x-lg:           1.5rem !default;
-
-$pagination-color:                  $link-color !default;
-$pagination-bg:                     $white !default;
-$pagination-border-width:           $border-width !default;
-$pagination-border-radius:          $border-radius !default;
-$pagination-margin-start:           -$pagination-border-width !default;
-$pagination-border-color:           $gray-300 !default;
-
-$pagination-focus-color:            $link-hover-color !default;
-$pagination-focus-bg:               $gray-200 !default;
-$pagination-focus-box-shadow:       $input-btn-focus-box-shadow !default;
-$pagination-focus-outline:          0 !default;
-
-$pagination-hover-color:            $link-hover-color !default;
-$pagination-hover-bg:               $gray-200 !default;
-$pagination-hover-border-color:     $gray-300 !default;
-
-$pagination-active-color:           $component-active-color !default;
-$pagination-active-bg:              $component-active-bg !default;
-$pagination-active-border-color:    $pagination-active-bg !default;
-
-$pagination-disabled-color:         $gray-600 !default;
-$pagination-disabled-bg:            $white !default;
-$pagination-disabled-border-color:  $gray-300 !default;
-
-$pagination-transition:              color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
-
-$pagination-border-radius-sm:       $border-radius-sm !default;
-$pagination-border-radius-lg:       $border-radius-lg !default;
+$pagination-padding-y: 0.375rem !default;
+$pagination-padding-x: 0.75rem !default;
+$pagination-padding-y-sm: 0.25rem !default;
+$pagination-padding-x-sm: 0.5rem !default;
+$pagination-padding-y-lg: 0.75rem !default;
+$pagination-padding-x-lg: 1.5rem !default;
+
+$pagination-color: $link-color !default;
+$pagination-bg: $white !default;
+$pagination-border-width: $border-width !default;
+$pagination-border-radius: $border-radius !default;
+$pagination-margin-start: -$pagination-border-width !default;
+$pagination-border-color: $gray-300 !default;
+
+$pagination-focus-color: $link-hover-color !default;
+$pagination-focus-bg: $gray-200 !default;
+$pagination-focus-box-shadow: $input-btn-focus-box-shadow !default;
+$pagination-focus-outline: 0 !default;
+
+$pagination-hover-color: $link-hover-color !default;
+$pagination-hover-bg: $gray-200 !default;
+$pagination-hover-border-color: $gray-300 !default;
+
+$pagination-active-color: $component-active-color !default;
+$pagination-active-bg: $component-active-bg !default;
+$pagination-active-border-color: $pagination-active-bg !default;
+
+$pagination-disabled-color: $gray-600 !default;
+$pagination-disabled-bg: $white !default;
+$pagination-disabled-border-color: $gray-300 !default;
+
+$pagination-transition: color 0.15s ease-in-out,
+  background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,
+  box-shadow 0.15s ease-in-out !default;
+
+$pagination-border-radius-sm: $border-radius-sm !default;
+$pagination-border-radius-lg: $border-radius-lg !default;
 // scss-docs-end pagination-variables
 
-
 // Placeholders
 
 // scss-docs-start placeholders
-$placeholder-opacity-max:           .5 !default;
-$placeholder-opacity-min:           .2 !default;
+$placeholder-opacity-max: 0.5 !default;
+$placeholder-opacity-min: 0.2 !default;
 // scss-docs-end placeholders
 
 // Cards
 
 // scss-docs-start card-variables
-$card-spacer-y:                     $spacer !default;
-$card-spacer-x:                     $spacer !default;
-$card-title-spacer-y:               $spacer * .5 !default;
-$card-border-width:                 $border-width !default;
-$card-border-color:                 rgba($black, .125) !default;
-$card-border-radius:                $border-radius !default;
-$card-box-shadow:                   null !default;
-$card-inner-border-radius:          subtract($card-border-radius, $card-border-width) !default;
-$card-cap-padding-y:                $card-spacer-y * .5 !default;
-$card-cap-padding-x:                $card-spacer-x !default;
-$card-cap-bg:                       rgba($black, .03) !default;
-$card-cap-color:                    null !default;
-$card-height:                       null !default;
-$card-color:                        null !default;
-$card-bg:                           $white !default;
-$card-img-overlay-padding:          $spacer !default;
-$card-group-margin:                 $grid-gutter-width * .5 !default;
+$card-spacer-y: $spacer !default;
+$card-spacer-x: $spacer !default;
+$card-title-spacer-y: $spacer * 0.5 !default;
+$card-border-width: $border-width !default;
+$card-border-color: rgba($black, 0.125) !default;
+$card-border-radius: $border-radius !default;
+$card-box-shadow: null !default;
+$card-inner-border-radius: subtract(
+  $card-border-radius,
+  $card-border-width
+) !default;
+$card-cap-padding-y: $card-spacer-y * 0.5 !default;
+$card-cap-padding-x: $card-spacer-x !default;
+$card-cap-bg: rgba($black, 0.03) !default;
+$card-cap-color: null !default;
+$card-height: null !default;
+$card-color: null !default;
+$card-bg: $white !default;
+$card-img-overlay-padding: $spacer !default;
+$card-group-margin: $grid-gutter-width * 0.5 !default;
 // scss-docs-end card-variables
 
 // Accordion
 
 // scss-docs-start accordion-variables
-$accordion-padding-y:                     1rem !default;
-$accordion-padding-x:                     1.25rem !default;
-$accordion-color:                         $body-color !default;
-$accordion-bg:                            $body-bg !default;
-$accordion-border-width:                  $border-width !default;
-$accordion-border-color:                  rgba($black, .125) !default;
-$accordion-border-radius:                 $border-radius !default;
-$accordion-inner-border-radius:           subtract($accordion-border-radius, $accordion-border-width) !default;
-
-$accordion-body-padding-y:                $accordion-padding-y !default;
-$accordion-body-padding-x:                $accordion-padding-x !default;
-
-$accordion-button-padding-y:              $accordion-padding-y !default;
-$accordion-button-padding-x:              $accordion-padding-x !default;
-$accordion-button-color:                  $accordion-color !default;
-$accordion-button-bg:                     $accordion-bg !default;
-$accordion-transition:                    $btn-transition, border-radius .15s ease !default;
-$accordion-button-active-bg:              tint-color($component-active-bg, 90%) !default;
-$accordion-button-active-color:           shade-color($primary, 10%) !default;
-
-$accordion-button-focus-border-color:     $input-focus-border-color !default;
-$accordion-button-focus-box-shadow:       $btn-focus-box-shadow !default;
-
-$accordion-icon-width:                    1.25rem !default;
-$accordion-icon-color:                    $accordion-button-color !default;
-$accordion-icon-active-color:             $accordion-button-active-color !default;
-$accordion-icon-transition:               transform .2s ease-in-out !default;
-$accordion-icon-transform:                rotate(-180deg) !default;
-
-$accordion-button-icon:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
-$accordion-button-active-icon:  url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
+$accordion-padding-y: 1rem !default;
+$accordion-padding-x: 1.25rem !default;
+$accordion-color: $body-color !default;
+$accordion-bg: $body-bg !default;
+$accordion-border-width: $border-width !default;
+$accordion-border-color: rgba($black, 0.125) !default;
+$accordion-border-radius: $border-radius !default;
+$accordion-inner-border-radius: subtract(
+  $accordion-border-radius,
+  $accordion-border-width
+) !default;
+
+$accordion-body-padding-y: $accordion-padding-y !default;
+$accordion-body-padding-x: $accordion-padding-x !default;
+
+$accordion-button-padding-y: $accordion-padding-y !default;
+$accordion-button-padding-x: $accordion-padding-x !default;
+$accordion-button-color: $accordion-color !default;
+$accordion-button-bg: $accordion-bg !default;
+$accordion-transition: $btn-transition, border-radius 0.15s ease !default;
+$accordion-button-active-bg: tint-color($component-active-bg, 90%) !default;
+$accordion-button-active-color: shade-color($primary, 10%) !default;
+
+$accordion-button-focus-border-color: $input-focus-border-color !default;
+$accordion-button-focus-box-shadow: $btn-focus-box-shadow !default;
+
+$accordion-icon-width: 1.25rem !default;
+$accordion-icon-color: $accordion-button-color !default;
+$accordion-icon-active-color: $accordion-button-active-color !default;
+$accordion-icon-transition: transform 0.2s ease-in-out !default;
+$accordion-icon-transform: rotate(-180deg) !default;
+
+$accordion-button-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
+$accordion-button-active-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
 // scss-docs-end accordion-variables
 
 // Tooltips
 
 // scss-docs-start tooltip-variables
-$tooltip-font-size:                 $font-size-sm !default;
-$tooltip-max-width:                 200px !default;
-$tooltip-color:                     $white !default;
-$tooltip-bg:                        $black !default;
-$tooltip-border-radius:             $border-radius !default;
-$tooltip-opacity:                   .9 !default;
-$tooltip-padding-y:                 $spacer * .25 !default;
-$tooltip-padding-x:                 $spacer * .5 !default;
-$tooltip-margin:                    0 !default;
-
-$tooltip-arrow-width:               .8rem !default;
-$tooltip-arrow-height:              .4rem !default;
-$tooltip-arrow-color:               $tooltip-bg !default;
+$tooltip-font-size: $font-size-sm !default;
+$tooltip-max-width: 200px !default;
+$tooltip-color: $white !default;
+$tooltip-bg: $black !default;
+$tooltip-border-radius: $border-radius !default;
+$tooltip-opacity: 0.9 !default;
+$tooltip-padding-y: $spacer * 0.25 !default;
+$tooltip-padding-x: $spacer * 0.5 !default;
+$tooltip-margin: 0 !default;
+
+$tooltip-arrow-width: 0.8rem !default;
+$tooltip-arrow-height: 0.4rem !default;
+$tooltip-arrow-color: $tooltip-bg !default;
 // scss-docs-end tooltip-variables
 
 // Form tooltips must come after regular tooltips
 // scss-docs-start tooltip-feedback-variables
-$form-feedback-tooltip-padding-y:     $tooltip-padding-y !default;
-$form-feedback-tooltip-padding-x:     $tooltip-padding-x !default;
-$form-feedback-tooltip-font-size:     $tooltip-font-size !default;
-$form-feedback-tooltip-line-height:   null !default;
-$form-feedback-tooltip-opacity:       $tooltip-opacity !default;
+$form-feedback-tooltip-padding-y: $tooltip-padding-y !default;
+$form-feedback-tooltip-padding-x: $tooltip-padding-x !default;
+$form-feedback-tooltip-font-size: $tooltip-font-size !default;
+$form-feedback-tooltip-line-height: null !default;
+$form-feedback-tooltip-opacity: $tooltip-opacity !default;
 $form-feedback-tooltip-border-radius: $tooltip-border-radius !default;
 // scss-docs-end tooltip-feedback-variables
 
-
 // Popovers
 
 // scss-docs-start popover-variables
-$popover-font-size:                 $font-size-sm !default;
-$popover-bg:                        $white !default;
-$popover-max-width:                 276px !default;
-$popover-border-width:              $border-width !default;
-$popover-border-color:              rgba($black, .2) !default;
-$popover-border-radius:             $border-radius-lg !default;
-$popover-inner-border-radius:       subtract($popover-border-radius, $popover-border-width) !default;
-$popover-box-shadow:                $box-shadow !default;
-
-$popover-header-bg:                 shade-color($popover-bg, 6%) !default;
-$popover-header-color:              $headings-color !default;
-$popover-header-padding-y:          .5rem !default;
-$popover-header-padding-x:          $spacer !default;
-
-$popover-body-color:                $body-color !default;
-$popover-body-padding-y:            $spacer !default;
-$popover-body-padding-x:            $spacer !default;
-
-$popover-arrow-width:               1rem !default;
-$popover-arrow-height:              .5rem !default;
-$popover-arrow-color:               $popover-bg !default;
-
-$popover-arrow-outer-color:         fade-in($popover-border-color, .05) !default;
-// scss-docs-end popover-variables
+$popover-font-size: $font-size-sm !default;
+$popover-bg: $white !default;
+$popover-max-width: 276px !default;
+$popover-border-width: $border-width !default;
+$popover-border-color: rgba($black, 0.2) !default;
+$popover-border-radius: $border-radius-lg !default;
+$popover-inner-border-radius: subtract(
+  $popover-border-radius,
+  $popover-border-width
+) !default;
+$popover-box-shadow: $box-shadow !default;
+
+$popover-header-bg: shade-color($popover-bg, 6%) !default;
+$popover-header-color: $headings-color !default;
+$popover-header-padding-y: 0.5rem !default;
+$popover-header-padding-x: $spacer !default;
+
+$popover-body-color: $body-color !default;
+$popover-body-padding-y: $spacer !default;
+$popover-body-padding-x: $spacer !default;
 
+$popover-arrow-width: 1rem !default;
+$popover-arrow-height: 0.5rem !default;
+$popover-arrow-color: $popover-bg !default;
+
+$popover-arrow-outer-color: fade-in($popover-border-color, 0.05) !default;
+// scss-docs-end popover-variables
 
 // Toasts
 
 // scss-docs-start toast-variables
-$toast-max-width:                   350px !default;
-$toast-padding-x:                   .75rem !default;
-$toast-padding-y:                   .5rem !default;
-$toast-font-size:                   .875rem !default;
-$toast-color:                       null !default;
-$toast-background-color:            rgba($white, .85) !default;
-$toast-border-width:                1px !default;
-$toast-border-color:                rgba($black, .1) !default;
-$toast-border-radius:               $border-radius !default;
-$toast-box-shadow:                  $box-shadow !default;
-$toast-spacing:                     $container-padding-x !default;
-
-$toast-header-color:                $gray-600 !default;
-$toast-header-background-color:     rgba($white, .85) !default;
-$toast-header-border-color:         rgba($black, .05) !default;
+$toast-max-width: 350px !default;
+$toast-padding-x: 0.75rem !default;
+$toast-padding-y: 0.5rem !default;
+$toast-font-size: 0.875rem !default;
+$toast-color: null !default;
+$toast-background-color: rgba($white, 0.85) !default;
+$toast-border-width: 1px !default;
+$toast-border-color: rgba($black, 0.1) !default;
+$toast-border-radius: $border-radius !default;
+$toast-box-shadow: $box-shadow !default;
+$toast-spacing: $container-padding-x !default;
+
+$toast-header-color: $gray-600 !default;
+$toast-header-background-color: rgba($white, 0.85) !default;
+$toast-header-border-color: rgba($black, 0.05) !default;
 // scss-docs-end toast-variables
 
-
 // Badges
 
 // scss-docs-start badge-variables
-$badge-font-size:                   .75em !default;
-$badge-font-weight:                 $font-weight-bold !default;
-$badge-color:                       $white !default;
-$badge-padding-y:                   .35em !default;
-$badge-padding-x:                   .65em !default;
-$badge-border-radius:               $border-radius !default;
+$badge-font-size: 0.75em !default;
+$badge-font-weight: $font-weight-bold !default;
+$badge-color: $white !default;
+$badge-padding-y: 0.35em !default;
+$badge-padding-x: 0.65em !default;
+$badge-border-radius: $border-radius !default;
 // scss-docs-end badge-variables
 
-
 // Modals
 
 // scss-docs-start modal-variables
-$modal-inner-padding:               $spacer !default;
-
-$modal-footer-margin-between:       .5rem !default;
-
-$modal-dialog-margin:               .5rem !default;
-$modal-dialog-margin-y-sm-up:       1.75rem !default;
-
-$modal-title-line-height:           $line-height-base !default;
-
-$modal-content-color:               null !default;
-$modal-content-bg:                  $white !default;
-$modal-content-border-color:        rgba($black, .2) !default;
-$modal-content-border-width:        $border-width !default;
-$modal-content-border-radius:       $border-radius-lg !default;
-$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width) !default;
-$modal-content-box-shadow-xs:       $box-shadow-sm !default;
-$modal-content-box-shadow-sm-up:    $box-shadow !default;
-
-$modal-backdrop-bg:                 $black !default;
-$modal-backdrop-opacity:            .5 !default;
-$modal-header-border-color:         $border-color !default;
-$modal-footer-border-color:         $modal-header-border-color !default;
-$modal-header-border-width:         $modal-content-border-width !default;
-$modal-footer-border-width:         $modal-header-border-width !default;
-$modal-header-padding-y:            $modal-inner-padding !default;
-$modal-header-padding-x:            $modal-inner-padding !default;
-$modal-header-padding:              $modal-header-padding-y $modal-header-padding-x !default; // Keep this for backwards compatibility
-
-$modal-sm:                          300px !default;
-$modal-md:                          500px !default;
-$modal-lg:                          800px !default;
-$modal-xl:                          1140px !default;
-
-$modal-fade-transform:              translate(0, -50px) !default;
-$modal-show-transform:              none !default;
-$modal-transition:                  transform .3s ease-out !default;
-$modal-scale-transform:             scale(1.02) !default;
-// scss-docs-end modal-variables
+$modal-inner-padding: $spacer !default;
 
+$modal-footer-margin-between: 0.5rem !default;
+
+$modal-dialog-margin: 0.5rem !default;
+$modal-dialog-margin-y-sm-up: 1.75rem !default;
+
+$modal-title-line-height: $line-height-base !default;
+
+$modal-content-color: null !default;
+$modal-content-bg: $white !default;
+$modal-content-border-color: rgba($black, 0.2) !default;
+$modal-content-border-width: $border-width !default;
+$modal-content-border-radius: $border-radius-lg !default;
+$modal-content-inner-border-radius: subtract(
+  $modal-content-border-radius,
+  $modal-content-border-width
+) !default;
+$modal-content-box-shadow-xs: $box-shadow-sm !default;
+$modal-content-box-shadow-sm-up: $box-shadow !default;
+
+$modal-backdrop-bg: $black !default;
+$modal-backdrop-opacity: 0.5 !default;
+$modal-header-border-color: $border-color !default;
+$modal-footer-border-color: $modal-header-border-color !default;
+$modal-header-border-width: $modal-content-border-width !default;
+$modal-footer-border-width: $modal-header-border-width !default;
+$modal-header-padding-y: $modal-inner-padding !default;
+$modal-header-padding-x: $modal-inner-padding !default;
+$modal-header-padding: $modal-header-padding-y $modal-header-padding-x !default; // Keep this for backwards compatibility
+
+$modal-sm: 300px !default;
+$modal-md: 500px !default;
+$modal-lg: 800px !default;
+$modal-xl: 1140px !default;
+
+$modal-fade-transform: translate(0, -50px) !default;
+$modal-show-transform: none !default;
+$modal-transition: transform 0.3s ease-out !default;
+$modal-scale-transform: scale(1.02) !default;
+// scss-docs-end modal-variables
 
 // Alerts
 //
 // Define alert colors, border radius, and padding.
 
 // scss-docs-start alert-variables
-$alert-padding-y:               $spacer !default;
-$alert-padding-x:               $spacer !default;
-$alert-margin-bottom:           1rem !default;
-$alert-border-radius:           $border-radius !default;
-$alert-link-font-weight:        $font-weight-bold !default;
-$alert-border-width:            $border-width !default;
-$alert-bg-scale:                -80% !default;
-$alert-border-scale:            -70% !default;
-$alert-color-scale:             40% !default;
-$alert-dismissible-padding-r:   $alert-padding-x * 3 !default; // 3x covers width of x plus default padding on either side
+$alert-padding-y: $spacer !default;
+$alert-padding-x: $spacer !default;
+$alert-margin-bottom: 1rem !default;
+$alert-border-radius: $border-radius !default;
+$alert-link-font-weight: $font-weight-bold !default;
+$alert-border-width: $border-width !default;
+$alert-bg-scale: -80% !default;
+$alert-border-scale: -70% !default;
+$alert-color-scale: 40% !default;
+$alert-dismissible-padding-r: $alert-padding-x * 3 !default; // 3x covers width of x plus default padding on either side
 // scss-docs-end alert-variables
 
-
 // Progress bars
 
 // scss-docs-start progress-variables
-$progress-height:                   1rem !default;
-$progress-font-size:                $font-size-base * .75 !default;
-$progress-bg:                       $gray-200 !default;
-$progress-border-radius:            $border-radius !default;
-$progress-box-shadow:               $box-shadow-inset !default;
-$progress-bar-color:                $white !default;
-$progress-bar-bg:                   $primary !default;
-$progress-bar-animation-timing:     1s linear infinite !default;
-$progress-bar-transition:           width .6s ease !default;
+$progress-height: 1rem !default;
+$progress-font-size: $font-size-base * 0.75 !default;
+$progress-bg: $gray-200 !default;
+$progress-border-radius: $border-radius !default;
+$progress-box-shadow: $box-shadow-inset !default;
+$progress-bar-color: $white !default;
+$progress-bar-bg: $primary !default;
+$progress-bar-animation-timing: 1s linear infinite !default;
+$progress-bar-transition: width 0.6s ease !default;
 // scss-docs-end progress-variables
 
-
 // List group
 
 // scss-docs-start list-group-variables
-$list-group-color:                  $gray-900 !default;
-$list-group-bg:                     $white !default;
-$list-group-border-color:           rgba($black, .125) !default;
-$list-group-border-width:           $border-width !default;
-$list-group-border-radius:          $border-radius !default;
-
-$list-group-item-padding-y:         $spacer * .5 !default;
-$list-group-item-padding-x:         $spacer !default;
-$list-group-item-bg-scale:          -80% !default;
-$list-group-item-color-scale:       40% !default;
-
-$list-group-hover-bg:               $gray-100 !default;
-$list-group-active-color:           $component-active-color !default;
-$list-group-active-bg:              $component-active-bg !default;
-$list-group-active-border-color:    $list-group-active-bg !default;
-
-$list-group-disabled-color:         $gray-600 !default;
-$list-group-disabled-bg:            $list-group-bg !default;
-
-$list-group-action-color:           $gray-700 !default;
-$list-group-action-hover-color:     $list-group-action-color !default;
-
-$list-group-action-active-color:    $body-color !default;
-$list-group-action-active-bg:       $gray-200 !default;
+$list-group-color: $gray-900 !default;
+$list-group-bg: $white !default;
+$list-group-border-color: rgba($black, 0.125) !default;
+$list-group-border-width: $border-width !default;
+$list-group-border-radius: $border-radius !default;
+
+$list-group-item-padding-y: $spacer * 0.5 !default;
+$list-group-item-padding-x: $spacer !default;
+$list-group-item-bg-scale: -80% !default;
+$list-group-item-color-scale: 40% !default;
+
+$list-group-hover-bg: $gray-100 !default;
+$list-group-active-color: $component-active-color !default;
+$list-group-active-bg: $component-active-bg !default;
+$list-group-active-border-color: $list-group-active-bg !default;
+
+$list-group-disabled-color: $gray-600 !default;
+$list-group-disabled-bg: $list-group-bg !default;
+
+$list-group-action-color: $gray-700 !default;
+$list-group-action-hover-color: $list-group-action-color !default;
+
+$list-group-action-active-color: $body-color !default;
+$list-group-action-active-bg: $gray-200 !default;
 // scss-docs-end list-group-variables
 
-
 // Image thumbnails
 
 // scss-docs-start thumbnail-variables
-$thumbnail-padding:                 .25rem !default;
-$thumbnail-bg:                      $body-bg !default;
-$thumbnail-border-width:            $border-width !default;
-$thumbnail-border-color:            $gray-300 !default;
-$thumbnail-border-radius:           $border-radius !default;
-$thumbnail-box-shadow:              $box-shadow-sm !default;
+$thumbnail-padding: 0.25rem !default;
+$thumbnail-bg: $body-bg !default;
+$thumbnail-border-width: $border-width !default;
+$thumbnail-border-color: $gray-300 !default;
+$thumbnail-border-radius: $border-radius !default;
+$thumbnail-box-shadow: $box-shadow-sm !default;
 // scss-docs-end thumbnail-variables
 
-
 // Figures
 
 // scss-docs-start figure-variables
-$figure-caption-font-size:          $small-font-size !default;
-$figure-caption-color:              $gray-600 !default;
+$figure-caption-font-size: $small-font-size !default;
+$figure-caption-color: $gray-600 !default;
 // scss-docs-end figure-variables
 
-
 // Breadcrumbs
 
 // scss-docs-start breadcrumb-variables
-$breadcrumb-font-size:              null !default;
-$breadcrumb-padding-y:              0 !default;
-$breadcrumb-padding-x:              0 !default;
-$breadcrumb-item-padding-x:         .5rem !default;
-$breadcrumb-margin-bottom:          1rem !default;
-$breadcrumb-bg:                     null !default;
-$breadcrumb-divider-color:          $gray-600 !default;
-$breadcrumb-active-color:           $gray-600 !default;
-$breadcrumb-divider:                quote("/") !default;
-$breadcrumb-divider-flipped:        $breadcrumb-divider !default;
-$breadcrumb-border-radius:          null !default;
+$breadcrumb-font-size: null !default;
+$breadcrumb-padding-y: 0 !default;
+$breadcrumb-padding-x: 0 !default;
+$breadcrumb-item-padding-x: 0.5rem !default;
+$breadcrumb-margin-bottom: 1rem !default;
+$breadcrumb-bg: null !default;
+$breadcrumb-divider-color: $gray-600 !default;
+$breadcrumb-active-color: $gray-600 !default;
+$breadcrumb-divider: quote("/") !default;
+$breadcrumb-divider-flipped: $breadcrumb-divider !default;
+$breadcrumb-border-radius: null !default;
 // scss-docs-end breadcrumb-variables
 
 // Carousel
 
 // scss-docs-start carousel-variables
-$carousel-control-color:             $white !default;
-$carousel-control-width:             15% !default;
-$carousel-control-opacity:           .5 !default;
-$carousel-control-hover-opacity:     .9 !default;
-$carousel-control-transition:        opacity .15s ease !default;
-
-$carousel-indicator-width:           30px !default;
-$carousel-indicator-height:          3px !default;
+$carousel-control-color: $white !default;
+$carousel-control-width: 15% !default;
+$carousel-control-opacity: 0.5 !default;
+$carousel-control-hover-opacity: 0.9 !default;
+$carousel-control-transition: opacity 0.15s ease !default;
+
+$carousel-indicator-width: 30px !default;
+$carousel-indicator-height: 3px !default;
 $carousel-indicator-hit-area-height: 10px !default;
-$carousel-indicator-spacer:          3px !default;
-$carousel-indicator-opacity:         .5 !default;
-$carousel-indicator-active-bg:       $white !default;
-$carousel-indicator-active-opacity:  1 !default;
-$carousel-indicator-transition:      opacity .6s ease !default;
+$carousel-indicator-spacer: 3px !default;
+$carousel-indicator-opacity: 0.5 !default;
+$carousel-indicator-active-bg: $white !default;
+$carousel-indicator-active-opacity: 1 !default;
+$carousel-indicator-transition: opacity 0.6s ease !default;
 
-$carousel-caption-width:             70% !default;
-$carousel-caption-color:             $white !default;
-$carousel-caption-padding-y:         1.25rem !default;
-$carousel-caption-spacer:            1.25rem !default;
+$carousel-caption-width: 70% !default;
+$carousel-caption-color: $white !default;
+$carousel-caption-padding-y: 1.25rem !default;
+$carousel-caption-spacer: 1.25rem !default;
 
-$carousel-control-icon-width:        2rem !default;
+$carousel-control-icon-width: 2rem !default;
 
-$carousel-control-prev-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/></svg>") !default;
-$carousel-control-next-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/></svg>") !default;
+$carousel-control-prev-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/></svg>") !default;
+$carousel-control-next-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/></svg>") !default;
 
-$carousel-transition-duration:       .6s !default;
-$carousel-transition:                transform $carousel-transition-duration ease-in-out !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)
+$carousel-transition-duration: 0.6s !default;
+$carousel-transition: transform $carousel-transition-duration ease-in-out !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)
 
-$carousel-dark-indicator-active-bg:  $black !default;
-$carousel-dark-caption-color:        $black !default;
-$carousel-dark-control-icon-filter:  invert(1) grayscale(100) !default;
+$carousel-dark-indicator-active-bg: $black !default;
+$carousel-dark-caption-color: $black !default;
+$carousel-dark-control-icon-filter: invert(1) grayscale(100) !default;
 // scss-docs-end carousel-variables
 
-
 // Spinners
 
 // scss-docs-start spinner-variables
-$spinner-width:           2rem !default;
-$spinner-height:          $spinner-width !default;
-$spinner-vertical-align:  -.125em !default;
-$spinner-border-width:    .25em !default;
-$spinner-animation-speed: .75s !default;
-
-$spinner-width-sm:        1rem !default;
-$spinner-height-sm:       $spinner-width-sm !default;
-$spinner-border-width-sm: .2em !default;
+$spinner-width: 2rem !default;
+$spinner-height: $spinner-width !default;
+$spinner-vertical-align: -0.125em !default;
+$spinner-border-width: 0.25em !default;
+$spinner-animation-speed: 0.75s !default;
+
+$spinner-width-sm: 1rem !default;
+$spinner-height-sm: $spinner-width-sm !default;
+$spinner-border-width-sm: 0.2em !default;
 // scss-docs-end spinner-variables
 
-
 // Close
 
 // scss-docs-start close-variables
-$btn-close-width:            1em !default;
-$btn-close-height:           $btn-close-width !default;
-$btn-close-padding-x:        .25em !default;
-$btn-close-padding-y:        $btn-close-padding-x !default;
-$btn-close-color:            $black !default;
-$btn-close-bg:               url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$btn-close-color}'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>") !default;
-$btn-close-focus-shadow:     $input-btn-focus-box-shadow !default;
-$btn-close-opacity:          .5 !default;
-$btn-close-hover-opacity:    .75 !default;
-$btn-close-focus-opacity:    1 !default;
-$btn-close-disabled-opacity: .25 !default;
-$btn-close-white-filter:     invert(1) grayscale(100%) brightness(200%) !default;
+$btn-close-width: 1em !default;
+$btn-close-height: $btn-close-width !default;
+$btn-close-padding-x: 0.25em !default;
+$btn-close-padding-y: $btn-close-padding-x !default;
+$btn-close-color: $black !default;
+$btn-close-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$btn-close-color}'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>") !default;
+$btn-close-focus-shadow: $input-btn-focus-box-shadow !default;
+$btn-close-opacity: 0.5 !default;
+$btn-close-hover-opacity: 0.75 !default;
+$btn-close-focus-opacity: 1 !default;
+$btn-close-disabled-opacity: 0.25 !default;
+$btn-close-white-filter: invert(1) grayscale(100%) brightness(200%) !default;
 // scss-docs-end close-variables
 
-
 // Offcanvas
 
 // scss-docs-start offcanvas-variables
-$offcanvas-padding-y:               $modal-inner-padding !default;
-$offcanvas-padding-x:               $modal-inner-padding !default;
-$offcanvas-horizontal-width:        400px !default;
-$offcanvas-vertical-height:         30vh !default;
-$offcanvas-transition-duration:     .3s !default;
-$offcanvas-border-color:            $modal-content-border-color !default;
-$offcanvas-border-width:            $modal-content-border-width !default;
-$offcanvas-title-line-height:       $modal-title-line-height !default;
-$offcanvas-bg-color:                $modal-content-bg !default;
-$offcanvas-color:                   $modal-content-color !default;
-$offcanvas-box-shadow:              $modal-content-box-shadow-xs !default;
-$offcanvas-backdrop-bg:             $modal-backdrop-bg !default;
-$offcanvas-backdrop-opacity:        $modal-backdrop-opacity !default;
+$offcanvas-padding-y: $modal-inner-padding !default;
+$offcanvas-padding-x: $modal-inner-padding !default;
+$offcanvas-horizontal-width: 400px !default;
+$offcanvas-vertical-height: 30vh !default;
+$offcanvas-transition-duration: 0.3s !default;
+$offcanvas-border-color: $modal-content-border-color !default;
+$offcanvas-border-width: $modal-content-border-width !default;
+$offcanvas-title-line-height: $modal-title-line-height !default;
+$offcanvas-bg-color: $modal-content-bg !default;
+$offcanvas-color: $modal-content-color !default;
+$offcanvas-box-shadow: $modal-content-box-shadow-xs !default;
+$offcanvas-backdrop-bg: $modal-backdrop-bg !default;
+$offcanvas-backdrop-opacity: $modal-backdrop-opacity !default;
 // scss-docs-end offcanvas-variables
 
 // Code
 
-$code-font-size:                    $small-font-size !default;
-$code-color:                        $pink !default;
+$code-font-size: $small-font-size !default;
+$code-color: $pink !default;
 
-$kbd-padding-y:                     .2rem !default;
-$kbd-padding-x:                     .4rem !default;
-$kbd-font-size:                     $code-font-size !default;
-$kbd-color:                         $white !default;
-$kbd-bg:                            $gray-900 !default;
+$kbd-padding-y: 0.2rem !default;
+$kbd-padding-x: 0.4rem !default;
+$kbd-font-size: $code-font-size !default;
+$kbd-color: $white !default;
+$kbd-bg: $gray-900 !default;
 
-$pre-color:                         null !default;
+$pre-color: null !default;
diff --git a/src/assets/scss/soft-ui-dashboard/bootstrap/bootstrap-grid.scss b/src/assets/scss/soft-ui-dashboard/bootstrap/bootstrap-grid.scss
index d4a37a0..eae654d 100644
--- a/src/assets/scss/soft-ui-dashboard/bootstrap/bootstrap-grid.scss
+++ b/src/assets/scss/soft-ui-dashboard/bootstrap/bootstrap-grid.scss
@@ -60,7 +60,7 @@ $utilities: map-get-multiple(
     "padding-top",
     "padding-end",
     "padding-bottom",
-    "padding-start",
+    "padding-start"
   )
 );
 
diff --git a/src/assets/scss/soft-ui-dashboard/bootstrap/forms/_form-check.scss b/src/assets/scss/soft-ui-dashboard/bootstrap/forms/_form-check.scss
index 6321b41..6619358 100644
--- a/src/assets/scss/soft-ui-dashboard/bootstrap/forms/_form-check.scss
+++ b/src/assets/scss/soft-ui-dashboard/bootstrap/forms/_form-check.scss
@@ -17,7 +17,7 @@
 .form-check-input {
   width: $form-check-input-width;
   height: $form-check-input-width;
-  margin-top: ($line-height-base - $form-check-input-width) * .5; // line-height minus check height
+  margin-top: ($line-height-base - $form-check-input-width) * 0.5; // line-height minus check height
   vertical-align: top;
   background-color: $form-check-input-bg;
   background-repeat: no-repeat;
@@ -53,7 +53,8 @@
 
     &[type="checkbox"] {
       @if $enable-gradients {
-        background-image: escape-svg($form-check-input-checked-bg-image), var(--#{$variable-prefix}gradient);
+        background-image: escape-svg($form-check-input-checked-bg-image),
+          var(--#{$variable-prefix}gradient);
       } @else {
         background-image: escape-svg($form-check-input-checked-bg-image);
       }
@@ -61,7 +62,8 @@
 
     &[type="radio"] {
       @if $enable-gradients {
-        background-image: escape-svg($form-check-radio-checked-bg-image), var(--#{$variable-prefix}gradient);
+        background-image: escape-svg($form-check-radio-checked-bg-image),
+          var(--#{$variable-prefix}gradient);
       } @else {
         background-image: escape-svg($form-check-radio-checked-bg-image);
       }
@@ -73,7 +75,8 @@
     border-color: $form-check-input-indeterminate-border-color;
 
     @if $enable-gradients {
-      background-image: escape-svg($form-check-input-indeterminate-bg-image), var(--#{$variable-prefix}gradient);
+      background-image: escape-svg($form-check-input-indeterminate-bg-image),
+        var(--#{$variable-prefix}gradient);
     } @else {
       background-image: escape-svg($form-check-input-indeterminate-bg-image);
     }
@@ -123,7 +126,8 @@
       background-position: $form-switch-checked-bg-position;
 
       @if $enable-gradients {
-        background-image: escape-svg($form-switch-checked-bg-image), var(--#{$variable-prefix}gradient);
+        background-image: escape-svg($form-switch-checked-bg-image),
+          var(--#{$variable-prefix}gradient);
       } @else {
         background-image: escape-svg($form-switch-checked-bg-image);
       }
diff --git a/src/assets/scss/soft-ui-dashboard/bootstrap/forms/_form-control.scss b/src/assets/scss/soft-ui-dashboard/bootstrap/forms/_form-control.scss
index 96423c5..36d6471 100644
--- a/src/assets/scss/soft-ui-dashboard/bootstrap/forms/_form-control.scss
+++ b/src/assets/scss/soft-ui-dashboard/bootstrap/forms/_form-control.scss
@@ -49,7 +49,11 @@
   // TODO: we can remove this workaround once https://bugs.webkit.org/show_bug.cgi?id=198959 is resolved
   &::-webkit-date-and-time-value {
     // Multiply line-height by 1em if it has no unit
-    height: if(unit($input-line-height) == "", $input-line-height * 1em, $input-line-height);
+    height: if(
+      unit($input-line-height) == "",
+      $input-line-height * 1em,
+      $input-line-height
+    );
   }
 
   // Placeholder
@@ -208,12 +212,20 @@ textarea {
   }
 
   &::-moz-color-swatch {
-    height: if(unit($input-line-height) == "", $input-line-height * 1em, $input-line-height);
+    height: if(
+      unit($input-line-height) == "",
+      $input-line-height * 1em,
+      $input-line-height
+    );
     @include border-radius($input-border-radius);
   }
 
   &::-webkit-color-swatch {
-    height: if(unit($input-line-height) == "", $input-line-height * 1em, $input-line-height);
+    height: if(
+      unit($input-line-height) == "",
+      $input-line-height * 1em,
+      $input-line-height
+    );
     @include border-radius($input-border-radius);
   }
 }
diff --git a/src/assets/scss/soft-ui-dashboard/bootstrap/forms/_form-range.scss b/src/assets/scss/soft-ui-dashboard/bootstrap/forms/_form-range.scss
index 6de4213..8fed070 100644
--- a/src/assets/scss/soft-ui-dashboard/bootstrap/forms/_form-range.scss
+++ b/src/assets/scss/soft-ui-dashboard/bootstrap/forms/_form-range.scss
@@ -6,7 +6,10 @@
 
 .form-range {
   width: 100%;
-  height: add($form-range-thumb-height, $form-range-thumb-focus-box-shadow-width * 2);
+  height: add(
+    $form-range-thumb-height,
+    $form-range-thumb-focus-box-shadow-width * 2
+  );
   padding: 0; // Need to reset padding
   background-color: transparent;
   appearance: none;
@@ -16,8 +19,12 @@
 
     // Pseudo-elements must be split across multiple rulesets to have an effect.
     // No box-shadow() mixin for focus accessibility.
-    &::-webkit-slider-thumb { box-shadow: $form-range-thumb-focus-box-shadow; }
-    &::-moz-range-thumb     { box-shadow: $form-range-thumb-focus-box-shadow; }
+    &::-webkit-slider-thumb {
+      box-shadow: $form-range-thumb-focus-box-shadow;
+    }
+    &::-moz-range-thumb {
+      box-shadow: $form-range-thumb-focus-box-shadow;
+    }
   }
 
   &::-moz-focus-outer {
@@ -27,7 +34,7 @@
   &::-webkit-slider-thumb {
     width: $form-range-thumb-width;
     height: $form-range-thumb-height;
-    margin-top: ($form-range-track-height - $form-range-thumb-height) * .5; // Webkit specific
+    margin-top: ($form-range-track-height - $form-range-thumb-height) * 0.5; // Webkit specific
     @include gradient-bg($form-range-thumb-bg);
     border: $form-range-thumb-border;
     @include border-radius($form-range-thumb-border-radius);
diff --git a/src/assets/scss/soft-ui-dashboard/bootstrap/forms/_form-select.scss b/src/assets/scss/soft-ui-dashboard/bootstrap/forms/_form-select.scss
index 153ff6c..facf7df 100644
--- a/src/assets/scss/soft-ui-dashboard/bootstrap/forms/_form-select.scss
+++ b/src/assets/scss/soft-ui-dashboard/bootstrap/forms/_form-select.scss
@@ -6,9 +6,13 @@
 .form-select {
   display: block;
   width: 100%;
-  padding: $form-select-padding-y $form-select-indicator-padding $form-select-padding-y $form-select-padding-x;
+  padding: $form-select-padding-y $form-select-indicator-padding
+    $form-select-padding-y $form-select-padding-x;
   // stylelint-disable-next-line property-no-vendor-prefix
-  -moz-padding-start: subtract($form-select-padding-x, 3px); // See https://github.com/twbs/bootstrap/issues/32636
+  -moz-padding-start: subtract(
+    $form-select-padding-x,
+    3px
+  ); // See https://github.com/twbs/bootstrap/issues/32636
   font-family: $form-select-font-family;
   @include font-size($form-select-font-size);
   font-weight: $form-select-font-weight;
@@ -29,7 +33,10 @@
     border-color: $form-select-focus-border-color;
     outline: 0;
     @if $enable-shadows {
-      @include box-shadow($form-select-box-shadow, $form-select-focus-box-shadow);
+      @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;
diff --git a/src/assets/scss/soft-ui-dashboard/bootstrap/forms/_input-group.scss b/src/assets/scss/soft-ui-dashboard/bootstrap/forms/_input-group.scss
index 1400529..40fc201 100644
--- a/src/assets/scss/soft-ui-dashboard/bootstrap/forms/_input-group.scss
+++ b/src/assets/scss/soft-ui-dashboard/bootstrap/forms/_input-group.scss
@@ -36,7 +36,6 @@
   }
 }
 
-
 // Textual addons
 //
 // Serves as a catch-all element for any text or radio/checkbox input you wish
@@ -57,7 +56,6 @@
   @include border-radius($input-border-radius);
 }
 
-
 // Sizing
 //
 // Remix the default form control sizing classes into new ones for easier
@@ -86,7 +84,6 @@
   padding-right: $form-select-padding-x + $form-select-indicator-padding;
 }
 
-
 // Rounded corners
 //
 // These rulesets must come after the sizing ones to properly override sm and lg
@@ -111,7 +108,13 @@
 
   $validation-messages: "";
   @each $state in map-keys($form-validation-states) {
-    $validation-messages: $validation-messages + ":not(." + unquote($state) + "-tooltip)" + ":not(." + unquote($state) + "-feedback)";
+    $validation-messages: $validation-messages +
+      ":not(." +
+      unquote($state) +
+      "-tooltip)" +
+      ":not(." +
+      unquote($state) +
+      "-feedback)";
   }
 
   > :not(:first-child):not(.dropdown-menu)#{$validation-messages} {
diff --git a/src/assets/scss/soft-ui-dashboard/bootstrap/helpers/_colored-links.scss b/src/assets/scss/soft-ui-dashboard/bootstrap/helpers/_colored-links.scss
index 8c167de..d655615 100644
--- a/src/assets/scss/soft-ui-dashboard/bootstrap/helpers/_colored-links.scss
+++ b/src/assets/scss/soft-ui-dashboard/bootstrap/helpers/_colored-links.scss
@@ -5,7 +5,11 @@
     @if $link-shade-percentage != 0 {
       &:hover,
       &:focus {
-        color: if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage));
+        color: if(
+          color-contrast($value) == $color-contrast-light,
+          shade-color($value, $link-shade-percentage),
+          tint-color($value, $link-shade-percentage)
+        );
       }
     }
   }
diff --git a/src/assets/scss/soft-ui-dashboard/bootstrap/mixins/_backdrop.scss b/src/assets/scss/soft-ui-dashboard/bootstrap/mixins/_backdrop.scss
index 9705ae9..a29b087 100644
--- a/src/assets/scss/soft-ui-dashboard/bootstrap/mixins/_backdrop.scss
+++ b/src/assets/scss/soft-ui-dashboard/bootstrap/mixins/_backdrop.scss
@@ -9,6 +9,10 @@
   background-color: $backdrop-bg;
 
   // Fade for backdrop
-  &.fade { opacity: 0; }
-  &.show { opacity: $backdrop-opacity; }
+  &.fade {
+    opacity: 0;
+  }
+  &.show {
+    opacity: $backdrop-opacity;
+  }
 }
diff --git a/src/assets/scss/soft-ui-dashboard/bootstrap/mixins/_border-radius.scss b/src/assets/scss/soft-ui-dashboard/bootstrap/mixins/_border-radius.scss
index 616decb..d2bbf0b 100644
--- a/src/assets/scss/soft-ui-dashboard/bootstrap/mixins/_border-radius.scss
+++ b/src/assets/scss/soft-ui-dashboard/bootstrap/mixins/_border-radius.scss
@@ -18,8 +18,7 @@
 @mixin border-radius($radius: $border-radius, $fallback-border-radius: false) {
   @if $enable-rounded {
     border-radius: valid-radius($radius);
-  }
-  @else if $fallback-border-radius != false {
+  } @else if $fallback-border-radius != false {
     border-radius: $fallback-border-radius;
   }
 }
diff --git a/src/assets/scss/soft-ui-dashboard/bootstrap/mixins/_breakpoints.scss b/src/assets/scss/soft-ui-dashboard/bootstrap/mixins/_breakpoints.scss
index cdc8034..c109039 100644
--- a/src/assets/scss/soft-ui-dashboard/bootstrap/mixins/_breakpoints.scss
+++ b/src/assets/scss/soft-ui-dashboard/bootstrap/mixins/_breakpoints.scss
@@ -14,12 +14,20 @@
 //    md
 //    >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))
 //    md
-@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
+@function breakpoint-next(
+  $name,
+  $breakpoints: $grid-breakpoints,
+  $breakpoint-names: map-keys($breakpoints)
+) {
   $n: index($breakpoint-names, $name);
   @if not $n {
     @error "breakpoint `#{$name}` not found in `#{$breakpoints}`";
   }
-  @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
+  @return if(
+    $n < length($breakpoint-names),
+    nth($breakpoint-names, $n + 1),
+    null
+  );
 }
 
 // Minimum breakpoint width. Null for the smallest (first) breakpoint.
@@ -42,7 +50,7 @@
 //    767.98px
 @function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
   $max: map-get($breakpoints, $name);
-  @return if($max and $max > 0, $max - .02, null);
+  @return if($max and $max > 0, $max - 0.02, null);
 }
 
 // Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front.
@@ -84,7 +92,11 @@
 
 // Media that spans multiple breakpoint widths.
 // Makes the @content apply between the min and max breakpoints
-@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {
+@mixin media-breakpoint-between(
+  $lower,
+  $upper,
+  $breakpoints: $grid-breakpoints
+) {
   $min: breakpoint-min($lower, $breakpoints);
   $max: breakpoint-max($upper, $breakpoints);
 
@@ -107,9 +119,9 @@
 // No minimum for the smallest breakpoint, and no maximum for the largest one.
 // Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
 @mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {
-  $min:  breakpoint-min($name, $breakpoints);
+  $min: breakpoint-min($name, $breakpoints);
   $next: breakpoint-next($name, $breakpoints);
-  $max:  breakpoint-max($next);
+  $max: breakpoint-max($next);
 
   @if $min != null and $max != null {
     @media (min-width: $min) and (max-width: $max) {
diff --git a/src/assets/scss/soft-ui-dashboard/bootstrap/mixins/_buttons.scss b/src/assets/scss/soft-ui-dashboard/bootstrap/mixins/_buttons.scss
index b674996..316554e 100644
--- a/src/assets/scss/soft-ui-dashboard/bootstrap/mixins/_buttons.scss
+++ b/src/assets/scss/soft-ui-dashboard/bootstrap/mixins/_buttons.scss
@@ -8,11 +8,31 @@
   $background,
   $border,
   $color: color-contrast($background),
-  $hover-background: if($color == $color-contrast-light, shade-color($background, $btn-hover-bg-shade-amount), tint-color($background, $btn-hover-bg-tint-amount)),
-  $hover-border: if($color == $color-contrast-light, shade-color($border, $btn-hover-border-shade-amount), tint-color($border, $btn-hover-border-tint-amount)),
+  $hover-background:
+    if(
+      $color == $color-contrast-light,
+      shade-color($background, $btn-hover-bg-shade-amount),
+      tint-color($background, $btn-hover-bg-tint-amount)
+    ),
+  $hover-border:
+    if(
+      $color == $color-contrast-light,
+      shade-color($border, $btn-hover-border-shade-amount),
+      tint-color($border, $btn-hover-border-tint-amount)
+    ),
   $hover-color: color-contrast($hover-background),
-  $active-background: if($color == $color-contrast-light, shade-color($background, $btn-active-bg-shade-amount), tint-color($background, $btn-active-bg-tint-amount)),
-  $active-border: if($color == $color-contrast-light, shade-color($border, $btn-active-border-shade-amount), tint-color($border, $btn-active-border-tint-amount)),
+  $active-background:
+    if(
+      $color == $color-contrast-light,
+      shade-color($background, $btn-active-bg-shade-amount),
+      tint-color($background, $btn-active-bg-tint-amount)
+    ),
+  $active-border:
+    if(
+      $color == $color-contrast-light,
+      shade-color($border, $btn-active-border-shade-amount),
+      tint-color($border, $btn-active-border-tint-amount)
+    ),
   $active-color: color-contrast($active-background),
   $disabled-background: $background,
   $disabled-border: $border,
@@ -35,10 +55,13 @@
     @include gradient-bg($hover-background);
     border-color: $hover-border;
     @if $enable-shadows {
-      @include box-shadow($btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5));
+      @include box-shadow(
+        $btn-box-shadow,
+        0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), 0.5)
+      );
     } @else {
       // Avoid using mixin so we can pass custom focus shadow properly
-      box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5);
+      box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), 0.5);
     }
   }
 
@@ -55,10 +78,13 @@
 
     &:focus {
       @if $enable-shadows {
-        @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5));
+        @include box-shadow(
+          $btn-active-box-shadow,
+          0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), 0.5)
+        );
       } @else {
         // Avoid using mixin so we can pass custom focus shadow properly
-        box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5);
+        box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), 0.5);
       }
     }
   }
@@ -93,7 +119,7 @@
 
   .btn-check:focus + &,
   &:focus {
-    box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
+    box-shadow: 0 0 0 $btn-focus-width rgba($color, 0.5);
   }
 
   .btn-check:checked + &,
@@ -107,10 +133,13 @@
 
     &:focus {
       @if $enable-shadows {
-        @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5));
+        @include box-shadow(
+          $btn-active-box-shadow,
+          0 0 0 $btn-focus-width rgba($color, 0.5)
+        );
       } @else {
         // Avoid using mixin so we can pass custom focus shadow properly
-        box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
+        box-shadow: 0 0 0 $btn-focus-width rgba($color, 0.5);
       }
     }
   }
diff --git a/src/assets/scss/soft-ui-dashboard/bootstrap/mixins/_deprecate.scss b/src/assets/scss/soft-ui-dashboard/bootstrap/mixins/_deprecate.scss
index df070bc..119f593 100644
--- a/src/assets/scss/soft-ui-dashboard/bootstrap/mixins/_deprecate.scss
+++ b/src/assets/scss/soft-ui-dashboard/bootstrap/mixins/_deprecate.scss
@@ -3,7 +3,12 @@
 // This mixin can be used to deprecate mixins or functions.
 // `$enable-deprecation-messages` is a global variable, `$ignore-warning` is a variable that can be passed to
 // some deprecated mixins to suppress the warning (for example if the mixin is still be used in the current version of Bootstrap)
-@mixin deprecate($name, $deprecate-version, $remove-version, $ignore-warning: false) {
+@mixin deprecate(
+  $name,
+  $deprecate-version,
+  $remove-version,
+  $ignore-warning: false
+) {
   @if ($enable-deprecation-messages != false and $ignore-warning != true) {
     @warn "#{$name} has been deprecated as of #{$deprecate-version}. It will be removed entirely in #{$remove-version}.";
   }
diff --git a/src/assets/scss/soft-ui-dashboard/bootstrap/mixins/_forms.scss b/src/assets/scss/soft-ui-dashboard/bootstrap/mixins/_forms.scss
index dc5bdb0..17ea778 100644
--- a/src/assets/scss/soft-ui-dashboard/bootstrap/mixins/_forms.scss
+++ b/src/assets/scss/soft-ui-dashboard/bootstrap/mixins/_forms.scss
@@ -21,7 +21,8 @@
   $icon,
   $tooltip-color: color-contrast($color),
   $tooltip-bg-color: rgba($color, $form-feedback-tooltip-opacity),
-  $focus-box-shadow: 0 0 $input-btn-focus-blur $input-focus-width rgba($color, $input-btn-focus-color-opacity)
+  $focus-box-shadow: 0 0 $input-btn-focus-blur $input-focus-width
+    rgba($color, $input-btn-focus-color-opacity)
 ) {
   .#{$state}-feedback {
     display: none;
@@ -39,7 +40,7 @@
     display: none;
     max-width: 100%; // Contain to parent when possible
     padding: $form-feedback-tooltip-padding-y $form-feedback-tooltip-padding-x;
-    margin-top: .1rem;
+    margin-top: 0.1rem;
     @include font-size($form-feedback-tooltip-font-size);
     line-height: $form-feedback-tooltip-line-height;
     color: $tooltip-color;
@@ -78,7 +79,10 @@
     @include form-validation-state-selector($state) {
       @if $enable-validation-icons {
         padding-right: $input-height-inner;
-        background-position: top $input-height-inner-quarter right $input-height-inner-quarter;
+        background-position: top
+          $input-height-inner-quarter
+          right
+          $input-height-inner-quarter;
       }
     }
   }
@@ -91,8 +95,10 @@
         &:not([multiple]):not([size]),
         &:not([multiple])[size="1"] {
           padding-right: $form-select-feedback-icon-padding-end;
-          background-image: escape-svg($form-select-indicator), escape-svg($icon);
-          background-position: $form-select-bg-position, $form-select-feedback-icon-position;
+          background-image: escape-svg($form-select-indicator),
+            escape-svg($icon);
+          background-position: $form-select-bg-position,
+            $form-select-feedback-icon-position;
           background-size: $form-select-bg-size, $form-select-feedback-icon-size;
         }
       }
@@ -123,7 +129,7 @@
   }
   .form-check-inline .form-check-input {
     ~ .#{$state}-feedback {
-      margin-left: .5em;
+      margin-left: 0.5em;
     }
   }
 
diff --git a/src/assets/scss/soft-ui-dashboard/bootstrap/mixins/_gradients.scss b/src/assets/scss/soft-ui-dashboard/bootstrap/mixins/_gradients.scss
index 44167d1..6e8d453 100644
--- a/src/assets/scss/soft-ui-dashboard/bootstrap/mixins/_gradients.scss
+++ b/src/assets/scss/soft-ui-dashboard/bootstrap/mixins/_gradients.scss
@@ -14,34 +14,84 @@
 // Horizontal gradient, from left to right
 //
 // Creates two color stops, start and end, by specifying a color and position for each color stop.
-@mixin gradient-x($start-color: $gray-700, $end-color: $gray-800, $start-percent: 0%, $end-percent: 100%) {
-  background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent);
+@mixin gradient-x(
+  $start-color: $gray-700,
+  $end-color: $gray-800,
+  $start-percent: 0%,
+  $end-percent: 100%
+) {
+  background-image: linear-gradient(
+    to right,
+    $start-color $start-percent,
+    $end-color $end-percent
+  );
 }
 
 // Vertical gradient, from top to bottom
 //
 // Creates two color stops, start and end, by specifying a color and position for each color stop.
-@mixin gradient-y($start-color: $gray-700, $end-color: $gray-800, $start-percent: null, $end-percent: null) {
-  background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent);
+@mixin gradient-y(
+  $start-color: $gray-700,
+  $end-color: $gray-800,
+  $start-percent: null,
+  $end-percent: null
+) {
+  background-image: linear-gradient(
+    to bottom,
+    $start-color $start-percent,
+    $end-color $end-percent
+  );
 }
 
-@mixin gradient-directional($start-color: $gray-700, $end-color: $gray-800, $deg: 45deg) {
+@mixin gradient-directional(
+  $start-color: $gray-700,
+  $end-color: $gray-800,
+  $deg: 45deg
+) {
   background-image: linear-gradient($deg, $start-color, $end-color);
 }
 
-@mixin gradient-x-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) {
-  background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color);
+@mixin gradient-x-three-colors(
+  $start-color: $blue,
+  $mid-color: $purple,
+  $color-stop: 50%,
+  $end-color: $red
+) {
+  background-image: linear-gradient(
+    to right,
+    $start-color,
+    $mid-color $color-stop,
+    $end-color
+  );
 }
 
-@mixin gradient-y-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) {
-  background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color);
+@mixin gradient-y-three-colors(
+  $start-color: $blue,
+  $mid-color: $purple,
+  $color-stop: 50%,
+  $end-color: $red
+) {
+  background-image: linear-gradient(
+    $start-color,
+    $mid-color $color-stop,
+    $end-color
+  );
 }
 
 @mixin gradient-radial($inner-color: $gray-700, $outer-color: $gray-800) {
   background-image: radial-gradient(circle, $inner-color, $outer-color);
 }
 
-@mixin gradient-striped($color: rgba($white, .15), $angle: 45deg) {
-  background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
+@mixin gradient-striped($color: rgba($white, 0.15), $angle: 45deg) {
+  background-image: linear-gradient(
+    $angle,
+    $color 25%,
+    transparent 25%,
+    transparent 50%,
+    $color 50%,
+    $color 75%,
+    transparent 75%,
+    transparent
+  );
 }
 // scss-docs-end gradient-mixins
diff --git a/src/assets/scss/soft-ui-dashboard/bootstrap/mixins/_grid.scss b/src/assets/scss/soft-ui-dashboard/bootstrap/mixins/_grid.scss
index aea51ab..48044d2 100644
--- a/src/assets/scss/soft-ui-dashboard/bootstrap/mixins/_grid.scss
+++ b/src/assets/scss/soft-ui-dashboard/bootstrap/mixins/_grid.scss
@@ -8,22 +8,36 @@
   display: flex;
   flex-wrap: wrap;
   // TODO: Revisit calc order after https://github.com/react-bootstrap/react-bootstrap/issues/6039 is fixed
-  margin-top: calc(-1 * var(--#{$variable-prefix}gutter-y)); // stylelint-disable-line function-disallowed-list
-  margin-right: calc(-.5 * var(--#{$variable-prefix}gutter-x)); // stylelint-disable-line function-disallowed-list
-  margin-left: calc(-.5 * var(--#{$variable-prefix}gutter-x)); // stylelint-disable-line function-disallowed-list
+  margin-top: calc(
+    -1 * var(--#{$variable-prefix}gutter-y)
+  ); // stylelint-disable-line function-disallowed-list
+  margin-right: calc(
+    -0.5 * var(--#{$variable-prefix}gutter-x)
+  ); // stylelint-disable-line function-disallowed-list
+  margin-left: calc(
+    -0.5 * var(--#{$variable-prefix}gutter-x)
+  ); // stylelint-disable-line function-disallowed-list
 }
 
 @mixin make-col-ready($gutter: $grid-gutter-width) {
   // Add box sizing if only the grid is loaded
-  box-sizing: if(variable-exists(include-column-box-sizing) and $include-column-box-sizing, border-box, null);
+  box-sizing: if(
+    variable-exists(include-column-box-sizing) and $include-column-box-sizing,
+    border-box,
+    null
+  );
   // Prevent columns from becoming too narrow when at smaller grid tiers by
   // always setting `width: 100%;`. This works because we set the width
   // later on to override this initial width.
   flex-shrink: 0;
   width: 100%;
   max-width: 100%; // Prevent `.col-auto`, `.col` (& responsive variants) from breaking out the grid
-  padding-right: calc(var(--#{$variable-prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
-  padding-left: calc(var(--#{$variable-prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
+  padding-right: calc(
+    var(--#{$variable-prefix}gutter-x) * 0.5
+  ); // stylelint-disable-line function-disallowed-list
+  padding-left: calc(
+    var(--#{$variable-prefix}gutter-x) * 0.5
+  ); // stylelint-disable-line function-disallowed-list
   margin-top: var(--#{$variable-prefix}gutter-y);
 }
 
@@ -31,7 +45,6 @@
   @if $size {
     flex: 0 0 auto;
     width: percentage(divide($size, $columns));
-
   } @else {
     flex: 1 1 0;
     max-width: 100%;
@@ -65,7 +78,11 @@
 // Used only by Bootstrap to generate the correct number of grid classes given
 // any value of `$grid-columns`.
 
-@mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
+@mixin make-grid-columns(
+  $columns: $grid-columns,
+  $gutter: $grid-gutter-width,
+  $breakpoints: $grid-breakpoints
+) {
   @each $breakpoint in map-keys($breakpoints) {
     $infix: breakpoint-infix($breakpoint, $breakpoints);
 
@@ -100,7 +117,8 @@
 
         // `$columns - 1` because offsetting by the width of an entire row isn't possible
         @for $i from 0 through ($columns - 1) {
-          @if not ($infix == "" and $i == 0) { // Avoid emitting useless .offset-0
+          @if not($infix == "" and $i == 0) {
+            // Avoid emitting useless .offset-0
             .offset#{$infix}-#{$i} {
               @include make-col-offset($i, $columns);
             }
diff --git a/src/assets/scss/soft-ui-dashboard/bootstrap/mixins/_image.scss b/src/assets/scss/soft-ui-dashboard/bootstrap/mixins/_image.scss
index e1df779..95206cf 100644
--- a/src/assets/scss/soft-ui-dashboard/bootstrap/mixins/_image.scss
+++ b/src/assets/scss/soft-ui-dashboard/bootstrap/mixins/_image.scss
@@ -2,7 +2,6 @@
 // - Responsive image
 // - Retina image
 
-
 // Responsive image
 //
 // Keep images from scaling beyond the width of their parents.
diff --git a/src/assets/scss/soft-ui-dashboard/bootstrap/mixins/_transition.scss b/src/assets/scss/soft-ui-dashboard/bootstrap/mixins/_transition.scss
index d437f6d..36ce54f 100644
--- a/src/assets/scss/soft-ui-dashboard/bootstrap/mixins/_transition.scss
+++ b/src/assets/scss/soft-ui-dashboard/bootstrap/mixins/_transition.scss
@@ -17,7 +17,12 @@
       transition: $transition;
     }
 
-    @if $enable-reduced-motion and nth($transition, 1) != null and nth($transition, 1) != none {
+    @if $enable-reduced-motion and
+      nth($transition, 1) !=
+      null and
+      nth($transition, 1) !=
+      none
+    {
       @media (prefers-reduced-motion: reduce) {
         transition: none;
       }
diff --git a/src/assets/scss/soft-ui-dashboard/bootstrap/mixins/_utilities.scss b/src/assets/scss/soft-ui-dashboard/bootstrap/mixins/_utilities.scss
index e871b42..9a0d92c 100644
--- a/src/assets/scss/soft-ui-dashboard/bootstrap/mixins/_utilities.scss
+++ b/src/assets/scss/soft-ui-dashboard/bootstrap/mixins/_utilities.scss
@@ -17,16 +17,28 @@
     }
 
     // Use custom class if present
-    $property-class: if(map-has-key($utility, class), map-get($utility, class), nth($properties, 1));
+    $property-class: if(
+      map-has-key($utility, class),
+      map-get($utility, class),
+      nth($properties, 1)
+    );
     $property-class: if($property-class == null, "", $property-class);
 
     // State params to generate pseudo-classes
     $state: if(map-has-key($utility, state), map-get($utility, state), ());
 
-    $infix: if($property-class == "" and str-slice($infix, 1, 1) == "-", str-slice($infix, 2), $infix);
+    $infix: if(
+      $property-class == "" and str-slice($infix, 1, 1) == "-",
+      str-slice($infix, 2),
+      $infix
+    );
 
     // Don't prefix if value key is null (eg. with shadow class)
-    $property-class-modifier: if($key, if($property-class == "" and $infix == "", "", "-") + $key, "");
+    $property-class-modifier: if(
+      $key,
+      if($property-class == "" and $infix == "", "", "-") + $key,
+      ""
+    );
 
     @if map-get($utility, rfs) {
       // Inside the media query
@@ -35,8 +47,7 @@
 
         // Do not render anything if fluid and non fluid values are the same
         $value: if($val == rfs-fluid-value($value), null, $val);
-      }
-      @else {
+      } @else {
         $value: rfs-fluid-value($value);
       }
     }
@@ -56,7 +67,9 @@
         }
 
         @each $pseudo in $state {
-          .#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} {
+          .#{$property-class
+            + $infix
+            + $property-class-modifier}-#{$pseudo}:#{$pseudo} {
             --#{$variable-prefix}#{$property-class}: #{$value};
           }
         }
@@ -68,14 +81,18 @@
                 --#{$variable-prefix}#{$local-var}: #{$value};
               }
             }
-            #{$property}: $value if($enable-important-utilities, !important, null);
+            #{$property}: $value
+              if($enable-important-utilities, !important, null);
           }
         }
 
         @each $pseudo in $state {
-          .#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} {
+          .#{$property-class
+            + $infix
+            + $property-class-modifier}-#{$pseudo}:#{$pseudo} {
             @each $property in $properties {
-              #{$property}: $value if($enable-important-utilities, !important, null);
+              #{$property}: $value
+                if($enable-important-utilities, !important, null);
             }
           }
         }
diff --git a/src/assets/scss/soft-ui-dashboard/bootstrap/utilities/_api.scss b/src/assets/scss/soft-ui-dashboard/bootstrap/utilities/_api.scss
index 62e1d39..21956b2 100644
--- a/src/assets/scss/soft-ui-dashboard/bootstrap/utilities/_api.scss
+++ b/src/assets/scss/soft-ui-dashboard/bootstrap/utilities/_api.scss
@@ -1,6 +1,5 @@
 // Loop over each breakpoint
 @each $breakpoint in map-keys($grid-breakpoints) {
-
   // Generate media query if needed
   @include media-breakpoint-up($breakpoint) {
     $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
@@ -9,7 +8,10 @@
     @each $key, $utility in $utilities {
       // The utility can be disabled with `false`, thus check if the utility is a map first
       // Only proceed if responsive media queries are enabled or if it's the base media query
-      @if type-of($utility) == "map" and (map-get($utility, responsive) or $infix == "") {
+      @if type-of($utility) ==
+        "map" and
+        (map-get($utility, responsive) or $infix == "")
+      {
         @include generate-utility($utility, $infix);
       }
     }
@@ -26,7 +28,11 @@
       @each $key, $utility in $utilities {
         // The utility can be disabled with `false`, thus check if the utility is a map first
         // Only proceed if responsive media queries are enabled or if it's the base media query
-        @if type-of($utility) == "map" and map-get($utility, rfs) and (map-get($utility, responsive) or $infix == "") {
+        @if type-of($utility) ==
+          "map" and
+          map-get($utility, rfs) and
+          (map-get($utility, responsive) or $infix == "")
+        {
           @include generate-utility($utility, $infix, true);
         }
       }
@@ -34,7 +40,6 @@
   }
 }
 
-
 // Print utilities
 @media print {
   @each $key, $utility in $utilities {
diff --git a/src/assets/scss/soft-ui-dashboard/bootstrap/vendor/_rfs.scss b/src/assets/scss/soft-ui-dashboard/bootstrap/vendor/_rfs.scss
index 7e9a6c7..7d4229f 100644
--- a/src/assets/scss/soft-ui-dashboard/bootstrap/vendor/_rfs.scss
+++ b/src/assets/scss/soft-ui-dashboard/bootstrap/vendor/_rfs.scss
@@ -20,7 +20,13 @@ $rfs-unit: rem !default;
 $rfs-breakpoint: 1200px !default;
 $rfs-breakpoint-unit: px !default;
 
-@if $rfs-breakpoint-unit != px and $rfs-breakpoint-unit != em and $rfs-breakpoint-unit != rem {
+@if $rfs-breakpoint-unit !=
+  px and
+  $rfs-breakpoint-unit !=
+  em and
+  $rfs-breakpoint-unit !=
+  rem
+{
   @error "`#{$rfs-breakpoint-unit}` is not a valid unit for $rfs-breakpoint-unit. Use `px`, `em` or `rem`.";
 }
 
@@ -53,7 +59,11 @@ $enable-rfs: true !default;
 $rfs-base-value-unit: unit($rfs-base-value);
 
 @function divide($dividend, $divisor, $precision: 10) {
-  $sign: if($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0, 1, -1);
+  $sign: if(
+    $dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0,
+    1,
+    -1
+  );
   $dividend: abs($dividend);
   $divisor: abs($divisor);
   @if $dividend == 0 {
@@ -72,7 +82,7 @@ $rfs-base-value-unit: unit($rfs-base-value);
       $quotient: $quotient + 1;
     }
     $result: $result * 10 + $quotient;
-    $factor: $factor * .1;
+    $factor: $factor * 0.1;
     $remainder: $remainder * 10;
     $precision: $precision - 1;
     @if ($precision < 0 and $remainder >= $divisor * 5) {
@@ -86,9 +96,11 @@ $rfs-base-value-unit: unit($rfs-base-value);
     "px": 1px,
     "rem": 1rem,
     "em": 1em,
-    "%": 1%
+    "%": 1%,
   );
-  @if ($dividend-unit != $divisor-unit and map-has-key($unit-map, $dividend-unit)) {
+  @if (
+    $dividend-unit != $divisor-unit and map-has-key($unit-map, $dividend-unit)
+  ) {
     $result: $result * map-get($unit-map, $dividend-unit);
   }
   @return $result;
@@ -97,9 +109,11 @@ $rfs-base-value-unit: unit($rfs-base-value);
 // Remove px-unit from $rfs-base-value for calculations
 @if $rfs-base-value-unit == px {
   $rfs-base-value: divide($rfs-base-value, $rfs-base-value * 0 + 1);
-}
-@else if $rfs-base-value-unit == rem {
-  $rfs-base-value: divide($rfs-base-value, divide($rfs-base-value * 0 + 1, $rfs-rem-value));
+} @else if $rfs-base-value-unit == rem {
+  $rfs-base-value: divide(
+    $rfs-base-value,
+    divide($rfs-base-value * 0 + 1, $rfs-rem-value)
+  );
 }
 
 // Cache $rfs-breakpoint unit to prevent multiple calls
@@ -108,15 +122,30 @@ $rfs-breakpoint-unit-cache: unit($rfs-breakpoint);
 // Remove unit from $rfs-breakpoint for calculations
 @if $rfs-breakpoint-unit-cache == px {
   $rfs-breakpoint: divide($rfs-breakpoint, $rfs-breakpoint * 0 + 1);
-}
-@else if $rfs-breakpoint-unit-cache == rem or $rfs-breakpoint-unit-cache == "em" {
-  $rfs-breakpoint: divide($rfs-breakpoint, divide($rfs-breakpoint * 0 + 1, $rfs-rem-value));
+} @else if
+  $rfs-breakpoint-unit-cache ==
+  rem or
+  $rfs-breakpoint-unit-cache ==
+  "em"
+{
+  $rfs-breakpoint: divide(
+    $rfs-breakpoint,
+    divide($rfs-breakpoint * 0 + 1, $rfs-rem-value)
+  );
 }
 
 // Calculate the media query value
-$rfs-mq-value: if($rfs-breakpoint-unit == px, #{$rfs-breakpoint}px, #{divide($rfs-breakpoint, $rfs-rem-value)}#{$rfs-breakpoint-unit});
+$rfs-mq-value: if(
+  $rfs-breakpoint-unit == px,
+  #{$rfs-breakpoint}px,
+  #{divide($rfs-breakpoint, $rfs-rem-value)}#{$rfs-breakpoint-unit}
+);
 $rfs-mq-property-width: if($rfs-mode == max-media-query, max-width, min-width);
-$rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height);
+$rfs-mq-property-height: if(
+  $rfs-mode == max-media-query,
+  max-height,
+  min-height
+);
 
 // Internal mixin used to determine which media query needs to be used
 @mixin _rfs-media-query {
@@ -125,14 +154,12 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
       @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}), (#{$rfs-mq-property-height}: #{$rfs-mq-value}) {
         @content;
       }
-    }
-    @else {
+    } @else {
       @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}) and (#{$rfs-mq-property-height}: #{$rfs-mq-value}) {
         @content;
       }
     }
-  }
-  @else {
+  } @else {
     @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}) {
       @content;
     }
@@ -148,21 +175,18 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
     &.disable-rfs {
       @content;
     }
-  }
-  @else if $rfs-class == enable and $rfs-mode == min-media-query {
+  } @else if $rfs-class == enable and $rfs-mode == min-media-query {
     .enable-rfs &,
     &.enable-rfs {
       @content;
     }
-  }
-  @else {
+  } @else {
     @content;
   }
 }
 
 // Internal mixin that adds enable classes to the selector if needed.
 @mixin _rfs-media-query-rule {
-
   @if $rfs-class == enable {
     @if $rfs-mode == min-media-query {
       @content;
@@ -174,8 +198,7 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
         @content;
       }
     }
-  }
-  @else {
+  } @else {
     @if $rfs-class == disable and $rfs-mode == min-media-query {
       .disable-rfs &,
       &.disable-rfs {
@@ -191,30 +214,39 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
 // Helper function to get the formatted non-responsive value
 @function rfs-value($values) {
   // Convert to list
-  $values: if(type-of($values) != list, ($values,), $values);
+  $values: if(type-of($values) != list, ($values), $values);
 
-  $val: '';
+  $val: "";
 
   // Loop over each value and calculate value
   @each $value in $values {
     @if $value == 0 {
-      $val: $val + ' 0';
-    }
-    @else {
+      $val: $val + " 0";
+    } @else {
       // Cache $value unit
       $unit: if(type-of($value) == "number", unit($value), false);
 
       @if $unit == px {
         // Convert to rem if needed
-        $val: $val + ' ' + if($rfs-unit == rem, #{divide($value, $value * 0 + $rfs-rem-value)}rem, $value);
-      }
-      @else if $unit == rem {
+        $val: $val +
+          " " +
+          if(
+            $rfs-unit == rem,
+            #{divide($value, $value * 0 + $rfs-rem-value)}rem,
+            $value
+          );
+      } @else if $unit == rem {
         // Convert to px if needed
-        $val: $val + ' ' + if($rfs-unit == px, #{divide($value, $value * 0 + 1) * $rfs-rem-value}px, $value);
-      }
-      @else {
+        $val: $val +
+          " " +
+          if(
+            $rfs-unit == px,
+            #{divide($value, $value * 0 + 1) * $rfs-rem-value}px,
+            $value
+          );
+      } @else {
         // If $value isn't a number (like inherit) or $value has a unit (not px or rem, like 1.5em) or $ is 0, just print the value
-        $val: $val + ' ' + $value;
+        $val: $val + " " + $value;
       }
     }
   }
@@ -226,42 +258,51 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
 // Helper function to get the responsive value calculated by RFS
 @function rfs-fluid-value($values) {
   // Convert to list
-  $values: if(type-of($values) != list, ($values,), $values);
+  $values: if(type-of($values) != list, ($values), $values);
 
-  $val: '';
+  $val: "";
 
   // Loop over each value and calculate value
   @each $value in $values {
     @if $value == 0 {
-      $val: $val + ' 0';
-    }
-
-    @else {
+      $val: $val + " 0";
+    } @else {
       // Cache $value unit
       $unit: if(type-of($value) == "number", unit($value), false);
 
       // If $value isn't a number (like inherit) or $value has a unit (not px or rem, like 1.5em) or $ is 0, just print the value
       @if not $unit or $unit != px and $unit != rem {
-        $val: $val + ' ' + $value;
-      }
-
-      @else {
+        $val: $val + " " + $value;
+      } @else {
         // Remove unit from $value for calculations
-        $value: divide($value, $value * 0 + if($unit == px, 1, divide(1, $rfs-rem-value)));
+        $value: divide(
+          $value,
+          $value * 0 + if($unit == px, 1, divide(1, $rfs-rem-value))
+        );
 
         // Only add the media query if the value is greater than the minimum value
         @if abs($value) <= $rfs-base-value or not $enable-rfs {
-          $val: $val + ' ' +  if($rfs-unit == rem, #{divide($value, $rfs-rem-value)}rem, #{$value}px);
-        }
-        @else {
+          $val: $val +
+            " " +
+            if(
+              $rfs-unit == rem,
+              #{divide($value, $rfs-rem-value)}rem,
+              #{$value}px
+            );
+        } @else {
           // Calculate the minimum value
-          $value-min: $rfs-base-value + divide(abs($value) - $rfs-base-value, $rfs-factor);
+          $value-min: $rfs-base-value +
+            divide(abs($value) - $rfs-base-value, $rfs-factor);
 
           // Calculate difference between $value and the minimum value
           $value-diff: abs($value) - $value-min;
 
           // Base value formatting
-          $min-width: if($rfs-unit == rem, #{divide($value-min, $rfs-rem-value)}rem, #{$value-min}px);
+          $min-width: if(
+            $rfs-unit == rem,
+            #{divide($value-min, $rfs-rem-value)}rem,
+            #{$value-min}px
+          );
 
           // Use negative value if needed
           $min-width: if($value < 0, -$min-width, $min-width);
@@ -270,10 +311,18 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
           $variable-unit: if($rfs-two-dimensional, vmin, vw);
 
           // Calculate the variable width between 0 and $rfs-breakpoint
-          $variable-width: #{divide($value-diff * 100, $rfs-breakpoint)}#{$variable-unit};
+          $variable-width: #{divide(
+              $value-diff * 100,
+              $rfs-breakpoint
+            )}#{$variable-unit};
 
           // Return the calculated value
-          $val: $val + ' calc(' + $min-width + if($value < 0, ' - ', ' + ') + $variable-width + ')';
+          $val: $val +
+            " calc(" +
+            $min-width +
+            if($value < 0, " - ", " + ") +
+            $variable-width +
+            ")";
         }
       }
     }
@@ -292,8 +341,7 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
     // Do not print the media query if responsive & non-responsive values are the same
     @if $val == $fluidVal {
       #{$property}: $val;
-    }
-    @else {
+    } @else {
       @include _rfs-rule {
         #{$property}: if($rfs-mode == max-media-query, $val, $fluidVal);
 
diff --git a/src/assets/scss/soft-ui-dashboard/cards/card-background.scss b/src/assets/scss/soft-ui-dashboard/cards/card-background.scss
index 7ee6fee..fae7b3d 100644
--- a/src/assets/scss/soft-ui-dashboard/cards/card-background.scss
+++ b/src/assets/scss/soft-ui-dashboard/cards/card-background.scss
@@ -62,8 +62,12 @@
         }
 
         &:after {
-          @include gradient-directional(nth($val, 1) 0%, nth($val, -1) 100%, $deg: 310deg);
-          opacity: .85;
+          @include gradient-directional(
+            nth($val, 1) 0%,
+            nth($val, -1) 100%,
+            $deg: 310deg
+          );
+          opacity: 0.85;
         }
       }
     }
diff --git a/src/assets/scss/soft-ui-dashboard/forms/_form-check.scss b/src/assets/scss/soft-ui-dashboard/forms/_form-check.scss
index 3fcd414..81f3df4 100644
--- a/src/assets/scss/soft-ui-dashboard/forms/_form-check.scss
+++ b/src/assets/scss/soft-ui-dashboard/forms/_form-check.scss
@@ -22,7 +22,7 @@
       display: flex;
       justify-content: center;
       align-items: center;
-      font-size: $font-size-sm - .205;
+      font-size: $font-size-sm - 0.205;
       opacity: 0;
     }
 
@@ -60,12 +60,12 @@
   cursor: pointer;
 }
 
-.form-check-label{
-  font-size:$font-size-sm;
+.form-check-label {
+  font-size: $font-size-sm;
   font-weight: $font-weight-normal;
 }
 
-.form-check-input{
+.form-check-input {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
diff --git a/src/assets/scss/soft-ui-dashboard/forms/_form-switch.scss b/src/assets/scss/soft-ui-dashboard/forms/_form-switch.scss
index d0446c0..871744f 100644
--- a/src/assets/scss/soft-ui-dashboard/forms/_form-switch.scss
+++ b/src/assets/scss/soft-ui-dashboard/forms/_form-switch.scss
@@ -1,12 +1,13 @@
-.form-switch{
-  .form-check-input{
+.form-switch {
+  .form-check-input {
     border: 1px solid $gray-200;
     position: relative;
-    background-color: rgba($dark-gradient-state, .1);
-    height: $form-check-input-width + .02;
+    background-color: rgba($dark-gradient-state, 0.1);
+    height: $form-check-input-width + 0.02;
 
     &:after {
-      transition: transform $form-check-transition-time ease-in-out, background-color $form-check-transition-time ease-in-out;
+      transition: transform $form-check-transition-time ease-in-out,
+        background-color $form-check-transition-time ease-in-out;
       content: "";
       width: $form-switch-check-after-width;
       height: $form-switch-check-after-width;
@@ -23,8 +24,8 @@
     }
 
     &:checked {
-      border-color: rgba($dark-gradient-state, .95);
-      background-color: rgba($dark-gradient-state, .95);
+      border-color: rgba($dark-gradient-state, 0.95);
+      background-color: rgba($dark-gradient-state, 0.95);
     }
   }
 }
diff --git a/src/assets/scss/soft-ui-dashboard/forms/_forms.scss b/src/assets/scss/soft-ui-dashboard/forms/_forms.scss
index 096263b..59b8800 100644
--- a/src/assets/scss/soft-ui-dashboard/forms/_forms.scss
+++ b/src/assets/scss/soft-ui-dashboard/forms/_forms.scss
@@ -1,6 +1,6 @@
-@import 'input-group';
-@import 'form-check';
-@import 'form-switch';
-@import 'form-select';
-@import 'labels';
-@import 'inputs';
+@import "input-group";
+@import "form-check";
+@import "form-switch";
+@import "form-select";
+@import "labels";
+@import "inputs";
diff --git a/src/assets/scss/soft-ui-dashboard/forms/_input-group.scss b/src/assets/scss/soft-ui-dashboard/forms/_input-group.scss
index e3fb8db..3ac8a0e 100644
--- a/src/assets/scss/soft-ui-dashboard/forms/_input-group.scss
+++ b/src/assets/scss/soft-ui-dashboard/forms/_input-group.scss
@@ -10,26 +10,26 @@
     margin-left: 0;
   }
 
-	.form-control {
+  .form-control {
     &:focus {
       border-left: $input-border-width solid $input-focus-border-color !important;
       border-right: $input-border-width solid $input-focus-border-color !important;
     }
 
-		&:not(:first-child) {
-	    border-left: 0;
-	    padding-left: 0;
-		}
-		&:not(:last-child) {
-			border-right: 0;
-			padding-right: 0;
-		}
+    &:not(:first-child) {
+      border-left: 0;
+      padding-left: 0;
+    }
+    &:not(:last-child) {
+      border-right: 0;
+      padding-right: 0;
+    }
 
     & + .input-group-text {
       border-left: 0;
       border-right: $input-border-width solid $input-border-color;
     }
-	}
+  }
 
   .input-group-text {
     border-right: 0;
@@ -67,7 +67,7 @@
       box-shadow: none;
     }
   }
-  .input-group-text{
+  .input-group-text {
     border-color: $input-focus-border-color;
   }
-}
\ No newline at end of file
+}
diff --git a/src/assets/scss/soft-ui-dashboard/forms/_inputs.scss b/src/assets/scss/soft-ui-dashboard/forms/_inputs.scss
index f343dfa..e6d0a7a 100644
--- a/src/assets/scss/soft-ui-dashboard/forms/_inputs.scss
+++ b/src/assets/scss/soft-ui-dashboard/forms/_inputs.scss
@@ -1,13 +1,13 @@
-.form-control{
-  &.is-invalid{
-    &:focus{
-      box-shadow: 0 0 0 2px rgba($form-feedback-invalid-color, .6);
+.form-control {
+  &.is-invalid {
+    &:focus {
+      box-shadow: 0 0 0 2px rgba($form-feedback-invalid-color, 0.6);
     }
   }
 
-  &.is-valid{
-    &:focus{
-      box-shadow: 0 0 0 2px rgba($form-feedback-valid-color, .65);
+  &.is-valid {
+    &:focus {
+      box-shadow: 0 0 0 2px rgba($form-feedback-valid-color, 0.65);
     }
   }
 }
diff --git a/src/assets/scss/soft-ui-dashboard/mixins/_badge.scss b/src/assets/scss/soft-ui-dashboard/mixins/_badge.scss
index e5388a6..abef190 100644
--- a/src/assets/scss/soft-ui-dashboard/mixins/_badge.scss
+++ b/src/assets/scss/soft-ui-dashboard/mixins/_badge.scss
@@ -1,5 +1,5 @@
 @mixin badge-variant($bg) {
-	color: saturate(darken($bg, 10%), 10);
+  color: saturate(darken($bg, 10%), 10);
   background-color: lighten($bg, 32%);
 
   &[href] {
@@ -8,5 +8,5 @@
       text-decoration: none;
       background-color: darken($bg, 12%);
     }
-	}
+  }
 }
diff --git a/src/assets/scss/soft-ui-dashboard/mixins/_colored-shadows.scss b/src/assets/scss/soft-ui-dashboard/mixins/_colored-shadows.scss
index f8175e8..4af4d6b 100644
--- a/src/assets/scss/soft-ui-dashboard/mixins/_colored-shadows.scss
+++ b/src/assets/scss/soft-ui-dashboard/mixins/_colored-shadows.scss
@@ -1,5 +1,5 @@
-@mixin shadow-big-color($color){
+@mixin shadow-big-color($color) {
   // new box shadow optimized for Tablets and Phones
-  box-shadow: 0 4px 20px 0px rgba(0, 0, 0, .14),
-              0 7px 10px -5px rgba($color, 0.4)
+  box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14),
+    0 7px 10px -5px rgba($color, 0.4);
 }
diff --git a/src/assets/scss/soft-ui-dashboard/mixins/_hover.scss b/src/assets/scss/soft-ui-dashboard/mixins/_hover.scss
index 19872ff..24fe938 100644
--- a/src/assets/scss/soft-ui-dashboard/mixins/_hover.scss
+++ b/src/assets/scss/soft-ui-dashboard/mixins/_hover.scss
@@ -1,6 +1,7 @@
-
 @mixin hover() {
-  &:hover { @content; }
+  &:hover {
+    @content;
+  }
 }
 
 @mixin hover-focus() {
diff --git a/src/assets/scss/soft-ui-dashboard/mixins/_social-buttons.scss b/src/assets/scss/soft-ui-dashboard/mixins/_social-buttons.scss
index 56b95e2..01055cb 100644
--- a/src/assets/scss/soft-ui-dashboard/mixins/_social-buttons.scss
+++ b/src/assets/scss/soft-ui-dashboard/mixins/_social-buttons.scss
@@ -1,5 +1,5 @@
 // for social buttons
-@mixin social-buttons-color ($color, $state-color) {
+@mixin social-buttons-color($color, $state-color) {
   background-color: $color;
   color: $white;
 
@@ -32,7 +32,6 @@
     }
   }
 
-
   &.btn-neutral {
     color: $color;
     background-color: $white;
diff --git a/src/assets/scss/soft-ui-dashboard/plugins/free/_flatpickr.scss b/src/assets/scss/soft-ui-dashboard/plugins/free/_flatpickr.scss
index c094292..02bb9bd 100644
--- a/src/assets/scss/soft-ui-dashboard/plugins/free/_flatpickr.scss
+++ b/src/assets/scss/soft-ui-dashboard/plugins/free/_flatpickr.scss
@@ -6,7 +6,7 @@
   visibility: hidden;
   padding: 0;
   -webkit-animation: none;
-          animation: none;
+  animation: none;
   direction: ltr;
   border: 0;
   font-size: 14px;
@@ -15,9 +15,9 @@
   position: absolute;
   width: 307.875px;
   -webkit-box-sizing: border-box;
-          box-sizing: border-box;
+  box-sizing: border-box;
   -ms-touch-action: manipulation;
-      touch-action: manipulation;
+  touch-action: manipulation;
   background: #fff;
   -webkit-box-shadow: $box-shadow-lg;
 }
@@ -33,7 +33,7 @@
 }
 .flatpickr-calendar.animate.open {
   -webkit-animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1);
-          animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1);
+  animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1);
 }
 .flatpickr-calendar.inline {
   display: block;
@@ -48,13 +48,19 @@
   z-index: 999;
   display: block;
 }
-.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7) {
+.flatpickr-calendar.multiMonth
+  .flatpickr-days
+  .dayContainer:nth-child(n + 1)
+  .flatpickr-day.inRange:nth-child(7n + 7) {
   -webkit-box-shadow: none !important;
-          box-shadow: none !important;
+  box-shadow: none !important;
 }
-.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1) {
+.flatpickr-calendar.multiMonth
+  .flatpickr-days
+  .dayContainer:nth-child(n + 2)
+  .flatpickr-day.inRange:nth-child(7n + 1) {
   -webkit-box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
-          box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
+  box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
 }
 .flatpickr-calendar .hasWeeks .dayContainer,
 .flatpickr-calendar .hasTime .dayContainer {
@@ -78,7 +84,7 @@
   display: block;
   pointer-events: none;
   border: solid transparent;
-  content: '';
+  content: "";
   height: 0;
   width: 0;
   left: 22px;
@@ -138,21 +144,21 @@
 }
 .flatpickr-months .flatpickr-month {
   background: transparent;
-  color: rgba(0,0,0,0.9);
-  fill: rgba(0,0,0,0.9);
+  color: rgba(0, 0, 0, 0.9);
+  fill: rgba(0, 0, 0, 0.9);
   height: 34px;
   line-height: 1;
   text-align: center;
   position: relative;
   -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
-          user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
   overflow: hidden;
   -webkit-box-flex: 1;
   -webkit-flex: 1;
-      -ms-flex: 1;
-          flex: 1;
+  -ms-flex: 1;
+  flex: 1;
 }
 .flatpickr-months .flatpickr-prev-month,
 .flatpickr-months .flatpickr-next-month {
@@ -163,8 +169,8 @@
   height: 34px;
   padding: 10px;
   z-index: 3;
-  color: rgba(0,0,0,0.9);
-  fill: rgba(0,0,0,0.9);
+  color: rgba(0, 0, 0, 0.9);
+  fill: rgba(0, 0, 0, 0.9);
 }
 .flatpickr-months .flatpickr-prev-month.flatpickr-disabled,
 .flatpickr-months .flatpickr-next-month.flatpickr-disabled {
@@ -176,14 +182,14 @@
 }
 .flatpickr-months .flatpickr-prev-month.flatpickr-prev-month,
 .flatpickr-months .flatpickr-next-month.flatpickr-prev-month {
-/*
+  /*
       /*rtl:begin:ignore*/
-/*
+  /*
       */
   left: 0;
-/*
+  /*
       /*rtl:end:ignore*/
-/*
+  /*
       */
 }
 /*
@@ -192,14 +198,14 @@
       /*rtl:end:ignore*/
 .flatpickr-months .flatpickr-prev-month.flatpickr-next-month,
 .flatpickr-months .flatpickr-next-month.flatpickr-next-month {
-/*
+  /*
       /*rtl:begin:ignore*/
-/*
+  /*
       */
   right: 0;
-/*
+  /*
       /*rtl:end:ignore*/
-/*
+  /*
       */
 }
 /*
@@ -253,15 +259,15 @@
   line-height: 50%;
   opacity: 0;
   cursor: pointer;
-  border: 1px solid rgba(57,57,57,0.15);
+  border: 1px solid rgba(57, 57, 57, 0.15);
   -webkit-box-sizing: border-box;
-          box-sizing: border-box;
+  box-sizing: border-box;
 }
 .numInputWrapper span:hover {
-  background: rgba(0,0,0,0.1);
+  background: rgba(0, 0, 0, 0.1);
 }
 .numInputWrapper span:active {
-  background: rgba(0,0,0,0.2);
+  background: rgba(0, 0, 0, 0.2);
 }
 .numInputWrapper span:after {
   display: block;
@@ -275,7 +281,7 @@
 .numInputWrapper span.arrowUp:after {
   border-left: 4px solid transparent;
   border-right: 4px solid transparent;
-  border-bottom: 4px solid rgba(57,57,57,0.6);
+  border-bottom: 4px solid rgba(57, 57, 57, 0.6);
   top: 26%;
 }
 .numInputWrapper span.arrowDown {
@@ -284,7 +290,7 @@
 .numInputWrapper span.arrowDown:after {
   border-left: 4px solid transparent;
   border-right: 4px solid transparent;
-  border-top: 4px solid rgba(57,57,57,0.6);
+  border-top: 4px solid rgba(57, 57, 57, 0.6);
   top: 40%;
 }
 .numInputWrapper span svg {
@@ -292,10 +298,10 @@
   height: auto;
 }
 .numInputWrapper span svg path {
-  fill: rgba(0,0,0,0.5);
+  fill: rgba(0, 0, 0, 0.5);
 }
 .numInputWrapper:hover {
-  background: rgba(0,0,0,0.05);
+  background: rgba(0, 0, 0, 0.05);
 }
 .numInputWrapper:hover span {
   opacity: 1;
@@ -314,7 +320,7 @@
   display: inline-block;
   text-align: center;
   -webkit-transform: translate3d(0px, 0px, 0px);
-          transform: translate3d(0px, 0px, 0px);
+  transform: translate3d(0px, 0px, 0px);
 }
 .flatpickr-current-month span.cur-month {
   font-family: inherit;
@@ -325,7 +331,7 @@
   padding: 0;
 }
 .flatpickr-current-month span.cur-month:hover {
-  background: rgba(0,0,0,0.05);
+  background: rgba(0, 0, 0, 0.05);
 }
 .flatpickr-current-month .numInputWrapper {
   width: 6ch;
@@ -333,15 +339,15 @@
   display: inline-block;
 }
 .flatpickr-current-month .numInputWrapper span.arrowUp:after {
-  border-bottom-color: rgba(0,0,0,0.9);
+  border-bottom-color: rgba(0, 0, 0, 0.9);
 }
 .flatpickr-current-month .numInputWrapper span.arrowDown:after {
-  border-top-color: rgba(0,0,0,0.9);
+  border-top-color: rgba(0, 0, 0, 0.9);
 }
 .flatpickr-current-month input.cur-year {
   background: transparent;
   -webkit-box-sizing: border-box;
-          box-sizing: border-box;
+  box-sizing: border-box;
   color: inherit;
   cursor: text;
   padding: 0 0 0 0.5ch;
@@ -365,7 +371,7 @@
 .flatpickr-current-month input.cur-year[disabled],
 .flatpickr-current-month input.cur-year[disabled]:hover {
   font-size: 100%;
-  color: rgba(0,0,0,0.5);
+  color: rgba(0, 0, 0, 0.5);
   background: transparent;
   pointer-events: none;
 }
@@ -397,9 +403,11 @@
   outline: none;
 }
 .flatpickr-current-month .flatpickr-monthDropdown-months:hover {
-  background: rgba(0,0,0,0.05);
+  background: rgba(0, 0, 0, 0.05);
 }
-.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
+.flatpickr-current-month
+  .flatpickr-monthDropdown-months
+  .flatpickr-monthDropdown-month {
   background-color: transparent;
   outline: none;
   padding: 0;
@@ -415,8 +423,8 @@
   display: flex;
   -webkit-box-align: center;
   -webkit-align-items: center;
-      -ms-flex-align: center;
-          align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
   height: 28px;
 }
 .flatpickr-weekdays .flatpickr-weekdaycontainer {
@@ -426,22 +434,22 @@
   display: flex;
   -webkit-box-flex: 1;
   -webkit-flex: 1;
-      -ms-flex: 1;
-          flex: 1;
+  -ms-flex: 1;
+  flex: 1;
 }
 span.flatpickr-weekday {
   cursor: default;
   font-size: 90%;
   background: transparent;
-  color: rgba(0,0,0,0.54);
+  color: rgba(0, 0, 0, 0.54);
   line-height: 1;
   margin: 0;
   text-align: center;
   display: block;
   -webkit-box-flex: 1;
   -webkit-flex: 1;
-      -ms-flex: 1;
-          flex: 1;
+  -ms-flex: 1;
+  flex: 1;
   font-weight: bolder;
 }
 .dayContainer,
@@ -457,8 +465,8 @@ span.flatpickr-weekday {
   display: flex;
   -webkit-box-align: start;
   -webkit-align-items: flex-start;
-      -ms-flex-align: start;
-          align-items: flex-start;
+  -ms-flex-align: start;
+  align-items: flex-start;
   width: 307.875px;
 }
 .flatpickr-days:focus {
@@ -472,39 +480,39 @@ span.flatpickr-weekday {
   min-width: 307.875px;
   max-width: 307.875px;
   -webkit-box-sizing: border-box;
-          box-sizing: border-box;
+  box-sizing: border-box;
   display: inline-block;
   display: -ms-flexbox;
   display: -webkit-box;
   display: -webkit-flex;
   display: flex;
   -webkit-flex-wrap: wrap;
-          flex-wrap: wrap;
+  flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   -ms-flex-pack: justify;
   -webkit-justify-content: space-around;
-          justify-content: space-around;
+  justify-content: space-around;
   -webkit-transform: translate3d(0px, 0px, 0px);
-          transform: translate3d(0px, 0px, 0px);
+  transform: translate3d(0px, 0px, 0px);
   opacity: 1;
 }
 .dayContainer + .dayContainer {
   -webkit-box-shadow: -1px 0 0 #e6e6e6;
-          box-shadow: -1px 0 0 #e6e6e6;
+  box-shadow: -1px 0 0 #e6e6e6;
 }
 .flatpickr-day {
   background: none;
   border: 1px solid transparent;
   border-radius: 150px;
   -webkit-box-sizing: border-box;
-          box-sizing: border-box;
+  box-sizing: border-box;
   color: #393939;
   cursor: pointer;
   font-weight: 400;
   width: 14.2857143%;
   -webkit-flex-basis: 14.2857143%;
-      -ms-flex-preferred-size: 14.2857143%;
-          flex-basis: 14.2857143%;
+  -ms-flex-preferred-size: 14.2857143%;
+  flex-basis: 14.2857143%;
   max-width: 39px;
   height: 39px;
   line-height: 39px;
@@ -513,8 +521,8 @@ span.flatpickr-weekday {
   position: relative;
   -webkit-box-pack: center;
   -webkit-justify-content: center;
-      -ms-flex-pack: center;
-          justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
   text-align: center;
 }
 .flatpickr-day.inRange,
@@ -563,7 +571,7 @@ span.flatpickr-weekday {
 .flatpickr-day.endRange.nextMonthDay {
   background: #569ff7;
   -webkit-box-shadow: none;
-          box-shadow: none;
+  box-shadow: none;
   color: #fff;
   border-color: #569ff7;
 }
@@ -577,11 +585,11 @@ span.flatpickr-weekday {
 .flatpickr-day.endRange.endRange {
   border-radius: 0 50px 50px 0;
 }
-.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),
-.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),
-.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
+.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n + 1)),
+.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n + 1)),
+.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n + 1)) {
   -webkit-box-shadow: -10px 0 0 #569ff7;
-          box-shadow: -10px 0 0 #569ff7;
+  box-shadow: -10px 0 0 #569ff7;
 }
 .flatpickr-day.selected.startRange.endRange,
 .flatpickr-day.startRange.startRange.endRange,
@@ -591,7 +599,7 @@ span.flatpickr-weekday {
 .flatpickr-day.inRange {
   border-radius: 0;
   -webkit-box-shadow: -5px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
-          box-shadow: -5px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
+  box-shadow: -5px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
 }
 .flatpickr-day.flatpickr-disabled,
 .flatpickr-day.flatpickr-disabled:hover,
@@ -600,7 +608,7 @@ span.flatpickr-weekday {
 .flatpickr-day.notAllowed,
 .flatpickr-day.notAllowed.prevMonthDay,
 .flatpickr-day.notAllowed.nextMonthDay {
-  color: rgba(57,57,57,0.3);
+  color: rgba(57, 57, 57, 0.3);
   background: transparent;
   border-color: transparent;
   cursor: default;
@@ -608,12 +616,12 @@ span.flatpickr-weekday {
 .flatpickr-day.flatpickr-disabled,
 .flatpickr-day.flatpickr-disabled:hover {
   cursor: not-allowed;
-  color: rgba(57,57,57,0.1);
+  color: rgba(57, 57, 57, 0.1);
 }
 .flatpickr-day.week.selected {
   border-radius: 0;
   -webkit-box-shadow: -5px 0 0 #569ff7, 5px 0 0 #569ff7;
-          box-shadow: -5px 0 0 #569ff7, 5px 0 0 #569ff7;
+  box-shadow: -5px 0 0 #569ff7, 5px 0 0 #569ff7;
 }
 .flatpickr-day.hidden {
   visibility: hidden;
@@ -627,7 +635,7 @@ span.flatpickr-weekday {
 .flatpickr-weekwrapper .flatpickr-weeks {
   padding: 0 12px;
   -webkit-box-shadow: 1px 0 0 #e6e6e6;
-          box-shadow: 1px 0 0 #e6e6e6;
+  box-shadow: 1px 0 0 #e6e6e6;
 }
 .flatpickr-weekwrapper .flatpickr-weekday {
   float: none;
@@ -639,7 +647,7 @@ span.flatpickr-weekday {
   display: block;
   width: 100%;
   max-width: none;
-  color: rgba(57,57,57,0.3);
+  color: rgba(57, 57, 57, 0.3);
   background: transparent;
   cursor: default;
   border: none;
@@ -651,14 +659,14 @@ span.flatpickr-weekday {
   display: -ms-flexbox;
   display: flex;
   -webkit-box-sizing: border-box;
-          box-sizing: border-box;
+  box-sizing: border-box;
   overflow: hidden;
 }
 .flatpickr-rContainer {
   display: inline-block;
   padding: 0;
   -webkit-box-sizing: border-box;
-          box-sizing: border-box;
+  box-sizing: border-box;
 }
 .flatpickr-time {
   text-align: center;
@@ -668,7 +676,7 @@ span.flatpickr-weekday {
   line-height: 40px;
   max-height: 40px;
   -webkit-box-sizing: border-box;
-          box-sizing: border-box;
+  box-sizing: border-box;
   overflow: hidden;
   display: -webkit-box;
   display: -webkit-flex;
@@ -683,8 +691,8 @@ span.flatpickr-weekday {
 .flatpickr-time .numInputWrapper {
   -webkit-box-flex: 1;
   -webkit-flex: 1;
-      -ms-flex: 1;
-          flex: 1;
+  -ms-flex: 1;
+  flex: 1;
   width: 40%;
   height: 40px;
   float: left;
@@ -704,7 +712,7 @@ span.flatpickr-weekday {
 .flatpickr-time input {
   background: transparent;
   -webkit-box-shadow: none;
-          box-shadow: none;
+  box-shadow: none;
   border: 0;
   border-radius: 0;
   text-align: center;
@@ -716,7 +724,7 @@ span.flatpickr-weekday {
   font-size: 14px;
   position: relative;
   -webkit-box-sizing: border-box;
-          box-sizing: border-box;
+  box-sizing: border-box;
   -webkit-appearance: textfield;
   -moz-appearance: textfield;
   appearance: textfield;
@@ -741,12 +749,12 @@ span.flatpickr-weekday {
   font-weight: bold;
   width: 2%;
   -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
-          user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
   -webkit-align-self: center;
-      -ms-flex-item-align: center;
-          align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
 }
 .flatpickr-time .flatpickr-am-pm {
   outline: 0;
@@ -768,38 +776,34 @@ span.flatpickr-weekday {
   from {
     opacity: 0;
     -webkit-transform: translate3d(0, -20px, 0);
-            transform: translate3d(0, -20px, 0);
+    transform: translate3d(0, -20px, 0);
   }
   to {
     opacity: 1;
     -webkit-transform: translate3d(0, 0, 0);
-            transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
   }
 }
 @keyframes fpFadeInDown {
   from {
     opacity: 0;
     -webkit-transform: translate3d(0, -20px, 0);
-            transform: translate3d(0, -20px, 0);
+    transform: translate3d(0, -20px, 0);
   }
   to {
     opacity: 1;
     -webkit-transform: translate3d(0, 0, 0);
-            transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
   }
 }
 
-
-
-
 //////////// Creative Tim Changes
 
-.datepicker.flatpickr-input{
+.datepicker.flatpickr-input {
   background-color: $white;
 }
 
 .flatpickr-calendar {
-
   &.open {
     margin-left: -38px;
     margin-top: 4px;
@@ -840,8 +844,8 @@ span.flatpickr-weekday {
     &.inRange {
       background: rgba(94, 114, 228, 0.28);
       border: none;
-      -webkit-box-shadow: -5px 0 0 #D7DCF8, 5px 0 0 #D7DCF8;
-      box-shadow: -5px 0 0 #D7DCF8, 5px 0 0 #D7DCF8;
+      -webkit-box-shadow: -5px 0 0 #d7dcf8, 5px 0 0 #d7dcf8;
+      box-shadow: -5px 0 0 #d7dcf8, 5px 0 0 #d7dcf8;
     }
 
     &:not(.selected) {
@@ -867,9 +871,9 @@ span.flatpickr-weekday {
   }
 }
 
-.flatpickr-day.endRange.startRange+.endRange:not(:nth-child(7n+1)),
-.flatpickr-day.selected.startRange+.endRange:not(:nth-child(7n+1)),
-.flatpickr-day.startRange.startRange+.endRange:not(:nth-child(7n+1)){
+.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n + 1)),
+.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n + 1)),
+.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n + 1)) {
   box-shadow: -10px 0 0 $primary;
 }
 
diff --git a/src/assets/scss/soft-ui-dashboard/plugins/free/_nouislider.scss b/src/assets/scss/soft-ui-dashboard/plugins/free/_nouislider.scss
index 4c317c1..cf61364 100644
--- a/src/assets/scss/soft-ui-dashboard/plugins/free/_nouislider.scss
+++ b/src/assets/scss/soft-ui-dashboard/plugins/free/_nouislider.scss
@@ -95,7 +95,7 @@
 .noUi-horizontal .noUi-handle {
   border-radius: 50%;
   background-color: $white;
-  box-shadow: 0 1px 13px 0 rgba(0,0,0,.2);
+  box-shadow: 0 1px 13px 0 rgba(0, 0, 0, 0.2);
   height: 15px;
   width: 15px;
   cursor: pointer;
@@ -121,14 +121,13 @@
  */
 .noUi-target {
   background: $light;
-  border-radius: .25rem;
+  border-radius: 0.25rem;
 }
 .noUi-connects {
   border-radius: 3px;
 }
 .noUi-connect {
-  background-image: linear-gradient(310deg, #7928CA 0%, #FF0080 100%);
-
+  background-image: linear-gradient(310deg, #7928ca 0%, #ff0080 100%);
 }
 /* Handles and cursors;
  */
@@ -139,27 +138,26 @@
   cursor: ns-resize;
 }
 .noUi-handle {
-  border: 1px solid #D9D9D9;
+  border: 1px solid #d9d9d9;
   border-radius: 3px;
   background: $white;
   cursor: default;
-  box-shadow: inset 0 0 1px $white, inset 0 1px 7px #EBEBEB, 0 3px 6px -3px #BBB;
-  webkit-transition: .3s ease 0s;
-  -moz-transition: .3s ease 0s;
-  -ms-transition: .3s ease 0s;
-  -o-transform: .3s ease 0s;
-  transition: .3s ease 0s;
+  box-shadow: inset 0 0 1px $white, inset 0 1px 7px #ebebeb, 0 3px 6px -3px #bbb;
+  webkit-transition: 0.3s ease 0s;
+  -moz-transition: 0.3s ease 0s;
+  -ms-transition: 0.3s ease 0s;
+  -o-transform: 0.3s ease 0s;
+  transition: 0.3s ease 0s;
 }
 .noUi-active {
-  box-shadow: inset 0 0 1px $white, inset 0 1px 7px #DDD, 0 3px 6px -3px #BBB;
-  transform: scale3d(1.5,1.5,1);
+  box-shadow: inset 0 0 1px $white, inset 0 1px 7px #ddd, 0 3px 6px -3px #bbb;
+  transform: scale3d(1.5, 1.5, 1);
 }
 
-
 /* Disabled state;
  */
 [disabled] .noUi-connect {
-  background: #B8B8B8;
+  background: #b8b8b8;
 }
 [disabled].noUi-target,
 [disabled].noUi-handle,
@@ -195,13 +193,13 @@
  */
 .noUi-marker {
   position: absolute;
-  background: #CCC;
+  background: #ccc;
 }
 .noUi-marker-sub {
-  background: #AAA;
+  background: #aaa;
 }
 .noUi-marker-large {
-  background: #AAA;
+  background: #aaa;
 }
 /* Horizontal layout;
  *
@@ -264,7 +262,7 @@
 .noUi-tooltip {
   display: block;
   position: absolute;
-  border: 1px solid #D9D9D9;
+  border: 1px solid #d9d9d9;
   border-radius: 3px;
   background: $white;
   color: #000;
diff --git a/src/assets/scss/soft-ui-dashboard/plugins/free/_perfect-scrollbar.scss b/src/assets/scss/soft-ui-dashboard/plugins/free/_perfect-scrollbar.scss
index b486392..57af3e0 100644
--- a/src/assets/scss/soft-ui-dashboard/plugins/free/_perfect-scrollbar.scss
+++ b/src/assets/scss/soft-ui-dashboard/plugins/free/_perfect-scrollbar.scss
@@ -15,8 +15,8 @@
 .ps__rail-x {
   display: none;
   opacity: 0;
-  transition: background-color .2s linear, opacity .2s linear;
-  -webkit-transition: background-color .2s linear, opacity .2s linear;
+  transition: background-color 0.2s linear, opacity 0.2s linear;
+  -webkit-transition: background-color 0.2s linear, opacity 0.2s linear;
   height: 15px;
   /* there must be 'bottom' or 'top' for ps__rail-x */
   bottom: 0px;
@@ -27,8 +27,8 @@
 .ps__rail-y {
   display: none;
   opacity: 0;
-  transition: background-color .2s linear, opacity .2s linear;
-  -webkit-transition: background-color .2s linear, opacity .2s linear;
+  transition: background-color 0.2s linear, opacity 0.2s linear;
+  -webkit-transition: background-color 0.2s linear, opacity 0.2s linear;
   width: 15px;
   /* there must be 'right' or 'left' for ps__rail-y */
   right: 0;
@@ -67,8 +67,8 @@
 .ps__thumb-x {
   background-color: #aaa;
   border-radius: 6px;
-  transition: background-color .2s linear, height .2s ease-in-out;
-  -webkit-transition: background-color .2s linear, height .2s ease-in-out;
+  transition: background-color 0.2s linear, height 0.2s ease-in-out;
+  -webkit-transition: background-color 0.2s linear, height 0.2s ease-in-out;
   height: 6px;
   /* there must be 'bottom' for ps__thumb-x */
   bottom: 2px;
@@ -79,8 +79,8 @@
 .ps__thumb-y {
   background-color: #aaa;
   border-radius: 6px;
-  transition: background-color .2s linear, width .2s ease-in-out;
-  -webkit-transition: background-color .2s linear, width .2s ease-in-out;
+  transition: background-color 0.2s linear, width 0.2s ease-in-out;
+  -webkit-transition: background-color 0.2s linear, width 0.2s ease-in-out;
   width: 6px;
   /* there must be 'right' for ps__thumb-y */
   right: 2px;
diff --git a/src/assets/scss/soft-ui-dashboard/plugins/free/_prism.scss b/src/assets/scss/soft-ui-dashboard/plugins/free/_prism.scss
index dc74168..aec2519 100644
--- a/src/assets/scss/soft-ui-dashboard/plugins/free/_prism.scss
+++ b/src/assets/scss/soft-ui-dashboard/plugins/free/_prism.scss
@@ -8,79 +8,83 @@ https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javasc
 
 code[class*="language-"],
 pre[class*="language-"] {
-	color: black;
-	background: none;
-	text-shadow: 0 1px white;
-	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
-	font-size: 1em;
-	text-align: left;
-	white-space: pre;
-	word-spacing: normal;
-	word-break: normal;
-	word-wrap: normal;
-	line-height: 1.5;
-
-	-moz-tab-size: 4;
-	-o-tab-size: 4;
-	tab-size: 4;
-
-	-webkit-hyphens: none;
-	-moz-hyphens: none;
-	-ms-hyphens: none;
-	hyphens: none;
-}
-
-pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
-code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
-	text-shadow: none;
-	background: #b3d4fc;
-}
-
-pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
-code[class*="language-"]::selection, code[class*="language-"] ::selection {
-	text-shadow: none;
-	background: #b3d4fc;
+  color: black;
+  background: none;
+  text-shadow: 0 1px white;
+  font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
+  font-size: 1em;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+pre[class*="language-"]::-moz-selection,
+pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection,
+code[class*="language-"] ::-moz-selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+pre[class*="language-"]::selection,
+pre[class*="language-"] ::selection,
+code[class*="language-"]::selection,
+code[class*="language-"] ::selection {
+  text-shadow: none;
+  background: #b3d4fc;
 }
 
 @media print {
-	code[class*="language-"],
-	pre[class*="language-"] {
-		text-shadow: none;
-	}
+  code[class*="language-"],
+  pre[class*="language-"] {
+    text-shadow: none;
+  }
 }
 
 /* Code blocks */
 pre[class*="language-"] {
-	padding: 1em;
-	overflow: auto;
-  border-radius: .75rem;
+  padding: 1em;
+  overflow: auto;
+  border-radius: 0.75rem;
 }
 
 :not(pre) > code[class*="language-"],
 pre[class*="language-"] {
-	background: $gray-100;
+  background: $gray-100;
 }
 
 /* Inline code */
 :not(pre) > code[class*="language-"] {
-	padding: .1em;
-	border-radius: .3em;
-	white-space: normal;
+  padding: 0.1em;
+  border-radius: 0.3em;
+  white-space: normal;
 }
 
 .token.comment,
 .token.prolog,
 .token.doctype,
 .token.cdata {
-	color: slategray;
+  color: slategray;
 }
 
 .token.punctuation {
-	color: #999;
+  color: #999;
 }
 
 .token.namespace {
-	opacity: .7;
+  opacity: 0.7;
 }
 
 .token.property,
@@ -90,7 +94,7 @@ pre[class*="language-"] {
 .token.constant,
 .token.symbol,
 .token.deleted {
-	color: #905;
+  color: #905;
 }
 
 .token.selector,
@@ -99,7 +103,7 @@ pre[class*="language-"] {
 .token.char,
 .token.builtin,
 .token.inserted {
-	color: #690;
+  color: #690;
 }
 
 .token.operator,
@@ -107,36 +111,36 @@ pre[class*="language-"] {
 .token.url,
 .language-css .token.string,
 .style .token.string {
-	color: #9a6e3a;
-	/* This background color was intended by the author of this theme. */
-	background: hsla(0, 0%, 100%, .5);
+  color: #9a6e3a;
+  /* This background color was intended by the author of this theme. */
+  background: hsla(0, 0%, 100%, 0.5);
 }
 
 .token.atrule,
 .token.attr-value,
 .token.keyword {
-	color: #07a;
+  color: #07a;
 }
 
 .token.function,
 .token.class-name {
-	color: #DD4A68;
+  color: #dd4a68;
 }
 
 .token.regex,
 .token.important,
 .token.variable {
-	color: #e90;
+  color: #e90;
 }
 
 .token.important,
 .token.bold {
-	font-weight: bold;
+  font-weight: bold;
 }
 .token.italic {
-	font-style: italic;
+  font-style: italic;
 }
 
 .token.entity {
-	cursor: help;
+  cursor: help;
 }
diff --git a/src/assets/scss/soft-ui-dashboard/theme.scss b/src/assets/scss/soft-ui-dashboard/theme.scss
index f53f374..94e5360 100644
--- a/src/assets/scss/soft-ui-dashboard/theme.scss
+++ b/src/assets/scss/soft-ui-dashboard/theme.scss
@@ -1,11 +1,11 @@
 /*!
 
 =========================================================
-* Soft UI Dashboard - v1.0.4
+* Vite Soft UI Dashboard - v1.0.1
 =========================================================
 
 * Product Page: https://www.creative-tim.com/product/soft-ui-dashboard
-* Copyright 2022 Creative Tim (https://www.creative-tim.com)
+* Copyright 2023 Creative Tim (https://www.creative-tim.com)
 * Licensed under MIT (site.license)
 
 * Coded by www.creative-tim.com
diff --git a/src/assets/scss/soft-ui-dashboard/variables/_animations.scss b/src/assets/scss/soft-ui-dashboard/variables/_animations.scss
index 329eedd..ece8d0b 100644
--- a/src/assets/scss/soft-ui-dashboard/variables/_animations.scss
+++ b/src/assets/scss/soft-ui-dashboard/variables/_animations.scss
@@ -1,45 +1,44 @@
 // Waves Animation & Styling
 
-$waves-position:                        relative !default;
-$waves-width:                           100% !default;
-$waves-height:                          16vh !default;
-$waves-min-height:                      100px !default;
-$waves-max-height:                      150px !default;
-$waves-margin-bottom:                   -7px !default;
-$waves-height-sm:                       50px !default;
-$waves-min-height-sm:                   $waves-height-sm !default;
-$waves-rotate:                          rotate(180deg) !default;
-$waves-mobile-height:                   40px !default;
-
-$moving-waves-keyframe-0:               translate3d(-90px,0,0) !default;
-$moving-waves-keyframe-100:             translate3d(85px,0,0) !default;
-$moving-waves-animation:                move-forever 40s cubic-bezier(.55,.5,.45,.5) infinite !default;
-$moving-waves-child-1-delay:            -2s !default;
-$moving-waves-child-1-duration:         11s !default;
-$moving-waves-child-2-delay:            -4s !default;
-$moving-waves-child-2-duration:         13s !default;
-$moving-waves-child-3-delay:            -3s !default;
-$moving-waves-child-3-duration:         15s !default;
-$moving-waves-child-4-delay:            -4s !default;
-$moving-waves-child-4-duration:         20s !default;
-$moving-waves-child-5-delay:            -4s !default;
-$moving-waves-child-5-duration:         25s !default;
-$moving-waves-child-6-delay:            -3s !default;
-$moving-waves-child-6-duration:         30s !default;
+$waves-position: relative !default;
+$waves-width: 100% !default;
+$waves-height: 16vh !default;
+$waves-min-height: 100px !default;
+$waves-max-height: 150px !default;
+$waves-margin-bottom: -7px !default;
+$waves-height-sm: 50px !default;
+$waves-min-height-sm: $waves-height-sm !default;
+$waves-rotate: rotate(180deg) !default;
+$waves-mobile-height: 40px !default;
+
+$moving-waves-keyframe-0: translate3d(-90px, 0, 0) !default;
+$moving-waves-keyframe-100: translate3d(85px, 0, 0) !default;
+$moving-waves-animation: move-forever 40s cubic-bezier(0.55, 0.5, 0.45, 0.5)
+  infinite !default;
+$moving-waves-child-1-delay: -2s !default;
+$moving-waves-child-1-duration: 11s !default;
+$moving-waves-child-2-delay: -4s !default;
+$moving-waves-child-2-duration: 13s !default;
+$moving-waves-child-3-delay: -3s !default;
+$moving-waves-child-3-duration: 15s !default;
+$moving-waves-child-4-delay: -4s !default;
+$moving-waves-child-4-duration: 20s !default;
+$moving-waves-child-5-delay: -4s !default;
+$moving-waves-child-5-duration: 25s !default;
+$moving-waves-child-6-delay: -3s !default;
+$moving-waves-child-6-duration: 30s !default;
 
 // Fade In
 
-$fade-in-animation-name:                fadeInBottom !default;
-$fade-in-animation-top-name:            fadeInTop !default;
-$fade-in-bottom-transform:              translateY(100%) !default;
-$fade-in-top-transform:                 translateY(-100%) !default;
-
-
-$fade-in-1-animation-duration:          1.5s !default;
-$fade-in-2-animation-duration:          1.75s !default;
-$fade-in-3-animation-duration:          2s !default;
-$fade-in-4-animation-duration:          2.25s !default;
-$fade-in-5-animation-duration:          2.5s !default;
+$fade-in-animation-name: fadeInBottom !default;
+$fade-in-animation-top-name: fadeInTop !default;
+$fade-in-bottom-transform: translateY(100%) !default;
+$fade-in-top-transform: translateY(-100%) !default;
 
+$fade-in-1-animation-duration: 1.5s !default;
+$fade-in-2-animation-duration: 1.75s !default;
+$fade-in-3-animation-duration: 2s !default;
+$fade-in-4-animation-duration: 2.25s !default;
+$fade-in-5-animation-duration: 2.5s !default;
 
-$floating-man-width:                    350px !default;
+$floating-man-width: 350px !default;
diff --git a/src/assets/scss/soft-ui-dashboard/variables/_avatars.scss b/src/assets/scss/soft-ui-dashboard/variables/_avatars.scss
index 5e2fc68..4594ed8 100644
--- a/src/assets/scss/soft-ui-dashboard/variables/_avatars.scss
+++ b/src/assets/scss/soft-ui-dashboard/variables/_avatars.scss
@@ -1,28 +1,27 @@
 // Avatar
-$avatar-height:               48px !default;
-$avatar-width:                48px !default;
+$avatar-height: 48px !default;
+$avatar-width: 48px !default;
 
-$avatar-xs-height:            24px !default;
-$avatar-xs-width:             24px !default;
+$avatar-xs-height: 24px !default;
+$avatar-xs-width: 24px !default;
 
-$avatar-sm-height:            36px !default;
-$avatar-sm-width:             36px !default;
+$avatar-sm-height: 36px !default;
+$avatar-sm-width: 36px !default;
 
-$avatar-lg-height:            58px !default;
-$avatar-lg-width:             58px !default;
+$avatar-lg-height: 58px !default;
+$avatar-lg-width: 58px !default;
 
-$avatar-xl-height:            74px !default;
-$avatar-xl-width:             74px !default;
+$avatar-xl-height: 74px !default;
+$avatar-xl-width: 74px !default;
 
-$avatar-xxl-height:           110px !default;
-$avatar-xxl-width:            110px !default;
-
-$avatar-font-size:            1rem !default;
-$avatar-content-margin:       .75rem !default;
+$avatar-xxl-height: 110px !default;
+$avatar-xxl-width: 110px !default;
 
+$avatar-font-size: 1rem !default;
+$avatar-content-margin: 0.75rem !default;
 
 // Avatar Group
-$avatar-group-border:         2px !default;
-$avatar-group-zindex:         2 !default;
-$avatar-group-zindex-hover:   3 !default;
-$avatar-group-double:         -1rem !default;
+$avatar-group-border: 2px !default;
+$avatar-group-zindex: 2 !default;
+$avatar-group-zindex-hover: 3 !default;
+$avatar-group-double: -1rem !default;
diff --git a/src/assets/scss/soft-ui-dashboard/variables/_badge.scss b/src/assets/scss/soft-ui-dashboard/variables/_badge.scss
index 08e7dcc..32237b3 100644
--- a/src/assets/scss/soft-ui-dashboard/variables/_badge.scss
+++ b/src/assets/scss/soft-ui-dashboard/variables/_badge.scss
@@ -1,38 +1,38 @@
 // Badge
-$badge-sm-padding:                  .45em .775em !default;
-$badge-sm-font-size:                .65em !default;
-$badge-md-padding:                  .65em 1em !default;
-$badge-lg-padding:                  .85em 1.375em !default;
-$badge-inline-margin-right:         .625rem !default;
-$badge-inline-span-top:             2px !default;
-$badge-btn-margin:                  .5rem !default;
+$badge-sm-padding: 0.45em 0.775em !default;
+$badge-sm-font-size: 0.65em !default;
+$badge-md-padding: 0.65em 1em !default;
+$badge-lg-padding: 0.85em 1.375em !default;
+$badge-inline-margin-right: 0.625rem !default;
+$badge-inline-span-top: 2px !default;
+$badge-btn-margin: 0.5rem !default;
 
 // Badge Circle
-$badge-circle-border-radius:        50% !default;
-$badge-circle-width:                1.25rem !default;
-$badge-circle-height:               1.25rem !default;
-$badge-circle-font-size:            .75rem !default;
-$badge-circle-font-weight:          600 !default;
+$badge-circle-border-radius: 50% !default;
+$badge-circle-width: 1.25rem !default;
+$badge-circle-height: 1.25rem !default;
+$badge-circle-font-size: 0.75rem !default;
+$badge-circle-font-weight: 600 !default;
 
-$badge-circle-md-width:             1.5rem !default;
-$badge-circle-md-height:            1.5rem !default;
+$badge-circle-md-width: 1.5rem !default;
+$badge-circle-md-height: 1.5rem !default;
 
-$badge-circle-lg-width:             2rem !default;
-$badge-circle-lg-height:            2rem !default;
+$badge-circle-lg-width: 2rem !default;
+$badge-circle-lg-height: 2rem !default;
 
 //Badge Dot
-$badge-dot-icon-width:              .375rem !default;
-$badge-dot-icon-height:             .375rem !default;
-$badge-dot-icon-radius:             50% !default;
-$badge-dot-icon-margin-right:       .375rem !default;
+$badge-dot-icon-width: 0.375rem !default;
+$badge-dot-icon-height: 0.375rem !default;
+$badge-dot-icon-radius: 50% !default;
+$badge-dot-icon-margin-right: 0.375rem !default;
 
-$badge-dot-md-icon-width:           .5rem !default;
-$badge-dot-md-icon-height:          .5rem !default;
+$badge-dot-md-icon-width: 0.5rem !default;
+$badge-dot-md-icon-height: 0.5rem !default;
 
-$badge-dot-lg-icon-width:           .625rem !default;
-$badge-dot-lg-icon-height:          .625rem !default;
+$badge-dot-lg-icon-width: 0.625rem !default;
+$badge-dot-lg-icon-height: 0.625rem !default;
 
 //Badge Floating
-$badge-floating-top:                 -50% !default;
-$badge-floating-border:              3px !default;
-$badge-floating-transform:           translate(147%, 50%) !default;
+$badge-floating-top: -50% !default;
+$badge-floating-border: 3px !default;
+$badge-floating-transform: translate(147%, 50%) !default;
diff --git a/src/assets/scss/soft-ui-dashboard/variables/_breadcrumb.scss b/src/assets/scss/soft-ui-dashboard/variables/_breadcrumb.scss
index 5c93323..18e8a72 100644
--- a/src/assets/scss/soft-ui-dashboard/variables/_breadcrumb.scss
+++ b/src/assets/scss/soft-ui-dashboard/variables/_breadcrumb.scss
@@ -1,5 +1,5 @@
-$breadcrumb-dark-bg:                $dark !default;
-$breadcrumb-dark-color:             $gray-100 !default;
-$breadcrumb-dark-hover-color:       $white !default;
-$breadcrumb-dark-active-color:      $gray-300 !default;
-$breadcrumb-dark-divider-color:     $gray-500 !default;
+$breadcrumb-dark-bg: $dark !default;
+$breadcrumb-dark-color: $gray-100 !default;
+$breadcrumb-dark-hover-color: $white !default;
+$breadcrumb-dark-active-color: $gray-300 !default;
+$breadcrumb-dark-divider-color: $gray-500 !default;
diff --git a/src/assets/scss/soft-ui-dashboard/variables/_cards-extend.scss b/src/assets/scss/soft-ui-dashboard/variables/_cards-extend.scss
index 007a749..38fc6ac 100644
--- a/src/assets/scss/soft-ui-dashboard/variables/_cards-extend.scss
+++ b/src/assets/scss/soft-ui-dashboard/variables/_cards-extend.scss
@@ -1,28 +1,38 @@
 // Card Profile
-$card-profile-body-text-align:      center !default;
-$card-profile-body-padding:         1.25rem 2rem !default;
-$card-profile-avatar-margin:        0 auto !default;
-$card-profile-img-mt:               32px !default;
-$card-profile-img-radius:           50% !default;
-$card-profile-img-width:            130px !default;
-$card-profile-btn-mt:               24px !default;
-$card-profile-p-line-height:        1.778 !default;
+$card-profile-body-text-align: center !default;
+$card-profile-body-padding: 1.25rem 2rem !default;
+$card-profile-avatar-margin: 0 auto !default;
+$card-profile-img-mt: 32px !default;
+$card-profile-img-radius: 50% !default;
+$card-profile-img-width: 130px !default;
+$card-profile-btn-mt: 24px !default;
+$card-profile-p-line-height: 1.778 !default;
 
 // Card Pricing
-$card-pricing-body-padding:         2.25rem !default;
-$card-pricing-line-height:          1.111 !default;
-$card-pricing-title-mb:             $card-bg-description-margin !default;
-$card-pricing-td-line-height:       1.429 !default;
-$card-pricing-icon-height:          4rem !default;
-$card-pricing-icon-width:           $card-pricing-icon-height !default;
-$card-pricing-icon-position:        absolute !default;
-$card-pricing-icon-top:             -22px !default;
-$card-pricing-icon-font-size:       1.25rem !default;
-$card-pricing-icon-lg-font-size:    1.75rem !default;
-$card-pricing-i-padding:            18px !default;
-$card-pricing-badge-padding:        5px !default;
-$card-pricing-badge-font-size:      6px !default;
-$card-pricing-badge-position:       relative !default;
-$card-pricing-badge-top:            -2px !default;
-$card-pricing-border-color:         linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
-$card-pricing-border-color-dark:    linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, .4), rgba(0, 0, 0, 0));
+$card-pricing-body-padding: 2.25rem !default;
+$card-pricing-line-height: 1.111 !default;
+$card-pricing-title-mb: $card-bg-description-margin !default;
+$card-pricing-td-line-height: 1.429 !default;
+$card-pricing-icon-height: 4rem !default;
+$card-pricing-icon-width: $card-pricing-icon-height !default;
+$card-pricing-icon-position: absolute !default;
+$card-pricing-icon-top: -22px !default;
+$card-pricing-icon-font-size: 1.25rem !default;
+$card-pricing-icon-lg-font-size: 1.75rem !default;
+$card-pricing-i-padding: 18px !default;
+$card-pricing-badge-padding: 5px !default;
+$card-pricing-badge-font-size: 6px !default;
+$card-pricing-badge-position: relative !default;
+$card-pricing-badge-top: -2px !default;
+$card-pricing-border-color: linear-gradient(
+  to right,
+  rgba(255, 255, 255, 0),
+  rgba(255, 255, 255, 1),
+  rgba(255, 255, 255, 0)
+);
+$card-pricing-border-color-dark: linear-gradient(
+  to right,
+  rgba(0, 0, 0, 0),
+  rgba(0, 0, 0, 0.4),
+  rgba(0, 0, 0, 0)
+);
diff --git a/src/assets/scss/soft-ui-dashboard/variables/_cards.scss b/src/assets/scss/soft-ui-dashboard/variables/_cards.scss
index 0b8e791..9b161b1 100644
--- a/src/assets/scss/soft-ui-dashboard/variables/_cards.scss
+++ b/src/assets/scss/soft-ui-dashboard/variables/_cards.scss
@@ -1,62 +1,61 @@
-$card-box-shadow:                   0 20px 27px 0 rgba(0,0,0,0.05)  !default;
-$card-background-blur:              rgba(255, 255, 255, 0.8) !default;
+$card-box-shadow: 0 20px 27px 0 rgba(0, 0, 0, 0.05) !default;
+$card-background-blur: rgba(255, 255, 255, 0.8) !default;
 
-$card-header-padding:               1.5rem !default;
+$card-header-padding: 1.5rem !default;
 
-$card-body-padding:                 $card-header-padding !default;
-$card-plain-bg-color:               transparent !default;
-$card-plain-box-shadow:             none !default;
+$card-body-padding: $card-header-padding !default;
+$card-plain-bg-color: transparent !default;
+$card-plain-box-shadow: none !default;
 
-$card-footer-padding:               $card-body-padding !default;
+$card-footer-padding: $card-body-padding !default;
 
-$card-title-font-weight:            $font-weight-bold !default;
-$card-title-line-height:            1.2 !default;
+$card-title-font-weight: $font-weight-bold !default;
+$card-title-line-height: 1.2 !default;
 
-$card-author-display:               flex !default;
-$card-author-name-line-height:      1.571 !default;
-$card-author-name-color:            #3A416F !default;
-$card-author-stats-color:           #5D6494 !default;
-$card-avatar-width:                 30px !default;
-$card-avatar-height:                $card-avatar-width !default;
-$card-avatar-overflow:              hidden !default;
-$card-avatar-radius:                50% !default;
-$card-avatar-mr:                    5px !default;
-$card-stats-name-mt:                -4px !default;
-$card-name-ml:                      .25rem !default;
-
-$card-badge-text-transform:         uppercase !default;
-$card-badge-bg-color:               #FAFAFF !default;
+$card-author-display: flex !default;
+$card-author-name-line-height: 1.571 !default;
+$card-author-name-color: #3a416f !default;
+$card-author-stats-color: #5d6494 !default;
+$card-avatar-width: 30px !default;
+$card-avatar-height: $card-avatar-width !default;
+$card-avatar-overflow: hidden !default;
+$card-avatar-radius: 50% !default;
+$card-avatar-mr: 5px !default;
+$card-stats-name-mt: -4px !default;
+$card-name-ml: 0.25rem !default;
 
+$card-badge-text-transform: uppercase !default;
+$card-badge-bg-color: #fafaff !default;
 
 // Card Background
-$card-bg-align-items:               center !default;
-$card-bg-body-position:             relative !default;
-$card-bg-body-z-index:              2 !default;
-$card-bg-content-min-height:        330px !default;
-$card-bg-content-max-width:         450px !default;
-$card-bg-content-pt:                60px !default;
-$card-bg-content-pb:                $card-bg-content-pt !default;
-$card-bg-body-left-width:           90% !default;
-
-$card-bg-description-margin:        24px !default;
-
-$card-bg-filter-position:           absolute !default;
-$card-bg-filter-top:                0 !default;
-$card-bg-filter-bottom:             $card-bg-filter-top !default;
-$card-bg-filter-left:               $card-bg-filter-top !default;
-$card-bg-filter-height:             100% !default;
-$card-bg-filter-width:              $card-bg-filter-height !default;
-$card-bg-filter-z-index:            1 !default;
-$card-bg-filter-display:            block !default;
-$card-bg-filter-content:            "" !default;
-$card-bg-filter-bg:                 rgba(0,0,0,.4) !default;
-$card-bg-filter-mask-bg:            rgba(0,0,0,.2) !default;
-$card-bg-filter-radius:             1rem !default;
-
-$card-full-bg-bg-position:          50% !default;
-$card-full-bg-bg-size:              cover !default;
-$card-full-bg-mb:                   30px !default;
-$card-full-bg-width:                100% !default;
-$card-full-bg-height:               $card-full-bg-width !default;
-$card-full-bg-position:             absolute !default;
-$card-full-bg-radius:               $card-bg-filter-radius !default;
+$card-bg-align-items: center !default;
+$card-bg-body-position: relative !default;
+$card-bg-body-z-index: 2 !default;
+$card-bg-content-min-height: 330px !default;
+$card-bg-content-max-width: 450px !default;
+$card-bg-content-pt: 60px !default;
+$card-bg-content-pb: $card-bg-content-pt !default;
+$card-bg-body-left-width: 90% !default;
+
+$card-bg-description-margin: 24px !default;
+
+$card-bg-filter-position: absolute !default;
+$card-bg-filter-top: 0 !default;
+$card-bg-filter-bottom: $card-bg-filter-top !default;
+$card-bg-filter-left: $card-bg-filter-top !default;
+$card-bg-filter-height: 100% !default;
+$card-bg-filter-width: $card-bg-filter-height !default;
+$card-bg-filter-z-index: 1 !default;
+$card-bg-filter-display: block !default;
+$card-bg-filter-content: "" !default;
+$card-bg-filter-bg: rgba(0, 0, 0, 0.4) !default;
+$card-bg-filter-mask-bg: rgba(0, 0, 0, 0.2) !default;
+$card-bg-filter-radius: 1rem !default;
+
+$card-full-bg-bg-position: 50% !default;
+$card-full-bg-bg-size: cover !default;
+$card-full-bg-mb: 30px !default;
+$card-full-bg-width: 100% !default;
+$card-full-bg-height: $card-full-bg-width !default;
+$card-full-bg-position: absolute !default;
+$card-full-bg-radius: $card-bg-filter-radius !default;
diff --git a/src/assets/scss/soft-ui-dashboard/variables/_choices.scss b/src/assets/scss/soft-ui-dashboard/variables/_choices.scss
index 07f6780..b9e16c8 100644
--- a/src/assets/scss/soft-ui-dashboard/variables/_choices.scss
+++ b/src/assets/scss/soft-ui-dashboard/variables/_choices.scss
@@ -1,8 +1,10 @@
 $choices-box-shadow: $dropdown-box-shadow !default;
-$choices-border-radius: .5rem !default;
-$choices-animation: .3s cubic-bezier(.23,1,.32,1) !default;
+$choices-border-radius: 0.5rem !default;
+$choices-animation: 0.3s cubic-bezier(0.23, 1, 0.32, 1) !default;
 $choices-transition: $dropdown-transition !default;
-$choices-transform: perspective(999px) rotateX(-10deg) translateZ(0) translate3d(0px, 37px, 0px) !important !default;
-$choices-transform-show: perspective(999px) rotateX(0deg) translateZ(0) translate3d(0,37px,5px) !important !default;
+$choices-transform: perspective(999px) rotateX(-10deg) translateZ(0)
+  translate3d(0px, 37px, 0px) !important !default;
+$choices-transform-show: perspective(999px) rotateX(0deg) translateZ(0)
+  translate3d(0, 37px, 5px) !important !default;
 $choices-padding-y: 1rem !default;
-$choices-padding-x: .5rem !default;
+$choices-padding-x: 0.5rem !default;
diff --git a/src/assets/scss/soft-ui-dashboard/variables/_dark-version.scss b/src/assets/scss/soft-ui-dashboard/variables/_dark-version.scss
index eb34e55..d1c0260 100644
--- a/src/assets/scss/soft-ui-dashboard/variables/_dark-version.scss
+++ b/src/assets/scss/soft-ui-dashboard/variables/_dark-version.scss
@@ -1,10 +1,16 @@
-$dark-version-body-color:                 rgba(255, 255, 255, .8) !default;
-$dark-version-bg-color:                   #141728 !default;
-$dark-version-sidenav-bg-color:           #111322 !default;
-$dark-version-card-bg-color:              #111322 !default;
-$dark-version-card-box-shadow:            0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .20), 0 1px 5px 0 rgba(0, 0, 0,  .12) !default;
-$dark-version-input-bg-image:             linear-gradient(0deg, #e91e63 2px, rgba(156, 39, 176, 0) 0), linear-gradient(0deg, rgba(210, 210, 210, .6)  1px, rgba(209, 209, 209, 0) 0) !default;
-$dark-version-border-color:               rgba(255, 255, 255, .4) !default;
-$dark-version-table-color:                rgba(255, 255, 255, .6) !default;
-$dark-version-caret-sidebar-color:        rgba(206, 212, 218, .7) !default;
-$dark-nav-link-active-shadow:             0 0 2rem 0 rgba(0, 0, 0, .15) !default;
+$dark-version-body-color: rgba(255, 255, 255, 0.8) !default;
+$dark-version-bg-color: #141728 !default;
+$dark-version-sidenav-bg-color: #111322 !default;
+$dark-version-card-bg-color: #111322 !default;
+$dark-version-card-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
+  0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12) !default;
+$dark-version-input-bg-image: linear-gradient(
+    0deg,
+    #e91e63 2px,
+    rgba(156, 39, 176, 0) 0
+  ),
+  linear-gradient(0deg, rgba(210, 210, 210, 0.6) 1px, rgba(209, 209, 209, 0) 0) !default;
+$dark-version-border-color: rgba(255, 255, 255, 0.4) !default;
+$dark-version-table-color: rgba(255, 255, 255, 0.6) !default;
+$dark-version-caret-sidebar-color: rgba(206, 212, 218, 0.7) !default;
+$dark-nav-link-active-shadow: 0 0 2rem 0 rgba(0, 0, 0, 0.15) !default;
diff --git a/src/assets/scss/soft-ui-dashboard/variables/_dropdowns.scss b/src/assets/scss/soft-ui-dashboard/variables/_dropdowns.scss
index ffbf6e4..3c1973b 100644
--- a/src/assets/scss/soft-ui-dashboard/variables/_dropdowns.scss
+++ b/src/assets/scss/soft-ui-dashboard/variables/_dropdowns.scss
@@ -1,54 +1,59 @@
-$dropdown-subitem-position:                101% !default;
-$dropdown-transition:                      visibility .25s,opacity .25s,transform .25s !default;
-$dropdown-transform-origin:                50% 0 !default;
-$dropdown-transform:                       perspective(999px) rotateX(-10deg) translateZ(0) translate3d(0px, 37px, 0px) !important !default;
-$dropdown-transform-show:                  perspective(999px) rotateX(0deg) translateZ(0) translate3d(0, 37px,5px) !important !default;
+$dropdown-subitem-position: 101% !default;
+$dropdown-transition: visibility 0.25s, opacity 0.25s, transform 0.25s !default;
+$dropdown-transform-origin: 50% 0 !default;
+$dropdown-transform: perspective(999px) rotateX(-10deg) translateZ(0)
+  translate3d(0px, 37px, 0px) !important !default;
+$dropdown-transform-show: perspective(999px) rotateX(0deg) translateZ(0)
+  translate3d(0, 37px, 5px) !important !default;
+
+$dropdown-multilevel-transform: perspective(999px) rotateX(-10deg) translateZ(0)
+  translate3d(0px, 0px, 0px) !important !default;
+$dropdown-multilevel-transform-show: perspective(999px) rotateX(0deg)
+  translateZ(0) translate3d(0, 0px, 5px) !important !default;
+
+$dropup-transform-origin: bottom !default;
+$dropup-transform: perspective(999px) rotateX(12deg) translateZ(0)
+  translate3d(0px, 0px, 0px) !important !default;
+$dropup-transform-show: perspective(999px) rotateX(0deg) translateZ(0)
+  translate3d(1px, 0px, 5px) !important !default;
+
+$dropdown-transform-responsive-show: $dropdown-multilevel-transform-show !default;
+$dropdown-icon-margin-right: 0.75rem !default;
+
+$dropdown-toggle-arrow-transform: rotate(180deg) !default;
+$dropdown-toggle-arrow-transition: 0.3s ease !default;
+
+$dropdown-button-after-margin-top: 3px !default;
+
+$dropdown-animation-arrow-left-position: 28px !default;
+$dropup-animation-arrow-bottom-position: 22px !default;
+$dropdown-animation-arrow-font-size: 22px !default;
+$dropup-animation-arrow-transition: bottom 0.35s ease !default;
+$dropdown-animation-arrow-transition: top 0.35s ease !default;
+$dropup-mb: 0.5rem !default;
+
+$dropdown-mt: 8px !default;
+$dropdown-hover-after-bottom-pos: -24px !default;
+$dropdown-hover-after-bottom-pos: -24px !default;
+$dropdown-hover-arrow-active-top: -20px !default;
 
-$dropdown-multilevel-transform:            perspective(999px) rotateX(-10deg) translateZ(0) translate3d(0px, 0px, 0px) !important !default;
-$dropdown-multilevel-transform-show:       perspective(999px) rotateX(0deg) translateZ(0) translate3d(0, 0px,5px) !important !default;
-
-$dropup-transform-origin:                  bottom !default;
-$dropup-transform:                         perspective(999px) rotateX(12deg) translateZ(0) translate3d(0px, 0px, 0px) !important !default;
-$dropup-transform-show:                    perspective(999px) rotateX(0deg) translateZ(0) translate3d(1px,0px,5px) !important !default;
-
-$dropdown-transform-responsive-show:       $dropdown-multilevel-transform-show !default;
-$dropdown-icon-margin-right:               .75rem !default;
-
-$dropdown-toggle-arrow-transform:          rotate(180deg) !default;
-$dropdown-toggle-arrow-transition:         .3s ease !default;
-
-$dropdown-button-after-margin-top:         3px !default;
-
-$dropdown-animation-arrow-left-position:   28px !default;
-$dropup-animation-arrow-bottom-position:   22px !default;
-$dropdown-animation-arrow-font-size:       22px !default;
-$dropup-animation-arrow-transition:        bottom .35s ease !default;
-$dropdown-animation-arrow-transition:      top .35s ease !default;
-$dropup-mb:                                .5rem !default;
-
-$dropdown-mt:                              8px !default;
-$dropdown-hover-after-bottom-pos:          -24px !default;
-$dropdown-hover-after-bottom-pos:          -24px !default;
-$dropdown-hover-arrow-active-top:          -20px !default;
-
-$dropdown-subitem-position-right:          -197px !default;
-$dropdown-subitem-left-hover:              -8px !default;
-$dropdown-subitem-arrow-rotate:            rotate(-90deg) !default;
-
-$dropdown-md-min-width:                    15rem !default;
-$dropdown-lg-min-width:                    23rem !default;
-$dropdown-lg-width-responsive:             19rem !default;
-$dropdown-xl-min-width:                    40rem !default;
+$dropdown-subitem-position-right: -197px !default;
+$dropdown-subitem-left-hover: -8px !default;
+$dropdown-subitem-arrow-rotate: rotate(-90deg) !default;
 
-$dropdown-subitem-position:                101% !default;
+$dropdown-md-min-width: 15rem !default;
+$dropdown-lg-min-width: 23rem !default;
+$dropdown-lg-width-responsive: 19rem !default;
+$dropdown-xl-min-width: 40rem !default;
 
+$dropdown-subitem-position: 101% !default;
 
 // Extend
 $dropdown-subitem-position-right: -197px !default;
-$dropdown-subitem-left-hover:   -8px !default;
-$dropdown-subitem-arrow-rotate:   rotate(-90deg) !default;
+$dropdown-subitem-left-hover: -8px !default;
+$dropdown-subitem-arrow-rotate: rotate(-90deg) !default;
 
-$dropdown-md-min-width:         15rem !default;
-$dropdown-lg-min-width:         23rem !default;
-$dropdown-lg-width-responsive:  19rem !default;
-$dropdown-xl-min-width:         40rem !default;
+$dropdown-md-min-width: 15rem !default;
+$dropdown-lg-min-width: 23rem !default;
+$dropdown-lg-width-responsive: 19rem !default;
+$dropdown-xl-min-width: 40rem !default;
diff --git a/src/assets/scss/soft-ui-dashboard/variables/_full-calendar.scss b/src/assets/scss/soft-ui-dashboard/variables/_full-calendar.scss
index bf87d32..c2ee17d 100644
--- a/src/assets/scss/soft-ui-dashboard/variables/_full-calendar.scss
+++ b/src/assets/scss/soft-ui-dashboard/variables/_full-calendar.scss
@@ -1,5 +1,5 @@
-$fc-event-title-padding-y:      .2rem !default;
-$fc-event-title-padding-x:      .3rem !default;
+$fc-event-title-padding-y: 0.2rem !default;
+$fc-event-title-padding-x: 0.3rem !default;
 
-$fc-daygrid-event-border-radius: .35rem !default;
-$fc-theme-standard-dark-border-color: rgba($secondary, .3) !default;
+$fc-daygrid-event-border-radius: 0.35rem !default;
+$fc-theme-standard-dark-border-color: rgba($secondary, 0.3) !default;
diff --git a/src/assets/scss/soft-ui-dashboard/variables/_header.scss b/src/assets/scss/soft-ui-dashboard/variables/_header.scss
index 41864e6..2702e5c 100644
--- a/src/assets/scss/soft-ui-dashboard/variables/_header.scss
+++ b/src/assets/scss/soft-ui-dashboard/variables/_header.scss
@@ -1,24 +1,24 @@
-$page-header-padding:             0 !default;
-$page-header-position:            relative !default;
-$page-header-overflow:            hidden !default;
-$page-header-display:             flex !default;
-$page-header-align-items:         center !default;
-$page-header-bg-size:             cover !default;
-$page-header-bg-position:         50% !default;
+$page-header-padding: 0 !default;
+$page-header-position: relative !default;
+$page-header-overflow: hidden !default;
+$page-header-display: flex !default;
+$page-header-align-items: center !default;
+$page-header-bg-size: cover !default;
+$page-header-bg-position: 50% !default;
 
-$mask-position:                   absolute !default;
-$mask-bg-size:                    cover !default;
-$mask-bg-position:                center center !default;
-$mask-top:                        0 !default;
-$mask-left:                       $mask-top !default;
-$mask-width:                      100% !default;
-$mask-height:                     $mask-width !default;
-$mask-opacity:                    .8 !default;
+$mask-position: absolute !default;
+$mask-bg-size: cover !default;
+$mask-bg-position: center center !default;
+$mask-top: 0 !default;
+$mask-left: $mask-top !default;
+$mask-width: 100% !default;
+$mask-height: $mask-width !default;
+$mask-opacity: 0.8 !default;
 
-$page-header-conteiner-index:     1 !default;
+$page-header-conteiner-index: 1 !default;
 
-$header-oblique-img-width:        60% !default;
-$header-oblique-img-right:        -10rem !default;
-$header-oblique-transform:        skewX(-10deg) !default;
-$header-oblique-overflow:         hidden !default;
-$header-oblique-img-transform:    skewX(10deg) !default;
+$header-oblique-img-width: 60% !default;
+$header-oblique-img-right: -10rem !default;
+$header-oblique-transform: skewX(-10deg) !default;
+$header-oblique-overflow: hidden !default;
+$header-oblique-img-transform: skewX(10deg) !default;
diff --git a/src/assets/scss/soft-ui-dashboard/variables/_info-areas.scss b/src/assets/scss/soft-ui-dashboard/variables/_info-areas.scss
index c8946aa..b006535 100644
--- a/src/assets/scss/soft-ui-dashboard/variables/_info-areas.scss
+++ b/src/assets/scss/soft-ui-dashboard/variables/_info-areas.scss
@@ -1,32 +1,32 @@
-$icon-shape-bg-image:               linear-gradient(310deg,#7928CA,#FF0080) !default;
-$icon-shape-bg-position:            center !default;
+$icon-shape-bg-image: linear-gradient(310deg, #7928ca, #ff0080) !default;
+$icon-shape-bg-position: center !default;
 
-$icon-striped-bg-md:                85px !default;
-$icon-striped-bg-lg:                111px !default;
-$icon-striped-bg-xl:                80px !default;
+$icon-striped-bg-md: 85px !default;
+$icon-striped-bg-lg: 111px !default;
+$icon-striped-bg-xl: 80px !default;
 
-$icon-striped-icon-mt:              25% !default;
-$icon-striped-icon-ml:              -24% !default;
+$icon-striped-icon-mt: 25% !default;
+$icon-striped-icon-ml: -24% !default;
 
-$icon-shape-icon-opacity:           .8 !default;
-$info-icon-top:                     11px !default;
-$info-icon-top-xxs:                 -4px !default;
-$info-icon-top-xs:                  -4px !default;
-$info-icon-top-sm:                  2px !default;
-$info-icon-top-md:                  22% !default;
-$info-icon-top-lg:                  31% !default;
-$info-icon-top-xl:                  37% !default;
-$info-icon-position:                relative !default;
+$icon-shape-icon-opacity: 0.8 !default;
+$info-icon-top: 11px !default;
+$info-icon-top-xxs: -4px !default;
+$info-icon-top-xs: -4px !default;
+$info-icon-top-sm: 2px !default;
+$info-icon-top-md: 22% !default;
+$info-icon-top-lg: 31% !default;
+$info-icon-top-xl: 37% !default;
+$info-icon-position: relative !default;
 
-$icon-xxs-width:                    20px !default;
-$icon-xxs-height:                   $icon-xxs-width !default;
-$icon-xs-width:                     24px !default;
-$icon-xs-height:                    $icon-xs-width !default;
-$icon-sm-width:                     32px !default;
-$icon-sm-height:                    $icon-sm-width !default;
-$icon-md-width:                     48px !default;
-$icon-md-height:                    $icon-md-width !default;
-$icon-lg-width:                     64px !default;
-$icon-lg-height:                    $icon-lg-width !default;
-$icon-xl-width:                     100px !default;
-$icon-xl-height:                    $icon-xl-width !default;
+$icon-xxs-width: 20px !default;
+$icon-xxs-height: $icon-xxs-width !default;
+$icon-xs-width: 24px !default;
+$icon-xs-height: $icon-xs-width !default;
+$icon-sm-width: 32px !default;
+$icon-sm-height: $icon-sm-width !default;
+$icon-md-width: 48px !default;
+$icon-md-height: $icon-md-width !default;
+$icon-lg-width: 64px !default;
+$icon-lg-height: $icon-lg-width !default;
+$icon-xl-width: 100px !default;
+$icon-xl-height: $icon-xl-width !default;
diff --git a/src/assets/scss/soft-ui-dashboard/variables/_misc-extend.scss b/src/assets/scss/soft-ui-dashboard/variables/_misc-extend.scss
index 94b9a71..d5ae553 100644
--- a/src/assets/scss/soft-ui-dashboard/variables/_misc-extend.scss
+++ b/src/assets/scss/soft-ui-dashboard/variables/_misc-extend.scss
@@ -1,48 +1,56 @@
 // Text Border
-$text-border-bg-color:                rgba($secondary,.5) !default;
-$text-border-bg-color-before:         linear-gradient(90deg,transparent,rgba(117,117,117,.4),rgba(117,117,117,.4)) !default;
-$text-border-bg-color-after:          linear-gradient(90deg,rgba(117,117,117,.4),rgba(117,117,117,.4),transparent) !default;
-$text-border-display:                 inline-block !default;
-$text-border-width:                   30% !default;
-$text-border-height:                  1px !default;
-$text-border-position:                relative !default;
-$text-border-vertical-align:          middle !default;
-$text-border-before-right:            .5em !default;
-$text-border-before-ml:               -50% !default;
-$text-border-after-left:              $text-border-before-right !default;
-$text-border-after-mr:                $text-border-before-ml !default;
-
+$text-border-bg-color: rgba($secondary, 0.5) !default;
+$text-border-bg-color-before: linear-gradient(
+  90deg,
+  transparent,
+  rgba(117, 117, 117, 0.4),
+  rgba(117, 117, 117, 0.4)
+) !default;
+$text-border-bg-color-after: linear-gradient(
+  90deg,
+  rgba(117, 117, 117, 0.4),
+  rgba(117, 117, 117, 0.4),
+  transparent
+) !default;
+$text-border-display: inline-block !default;
+$text-border-width: 30% !default;
+$text-border-height: 1px !default;
+$text-border-position: relative !default;
+$text-border-vertical-align: middle !default;
+$text-border-before-right: 0.5em !default;
+$text-border-before-ml: -50% !default;
+$text-border-after-left: $text-border-before-right !default;
+$text-border-after-mr: $text-border-before-ml !default;
 
 // Header Shapes
 
-$shape-1-width:                       55% !default;
-$shape-1-left:                        15% !default;
-$shape-2-width:                       35% !default;
-$shape-2-left:                        20% !default;
-$shape-3-width:                       50% !default;
-$shape-3-left:                        -28rem !default;
+$shape-1-width: 55% !default;
+$shape-1-left: 15% !default;
+$shape-2-width: 35% !default;
+$shape-2-left: 20% !default;
+$shape-3-width: 50% !default;
+$shape-3-left: -28rem !default;
 
-$shape-img-1-right:                   7% !default;
-$shape-img-1-width:                   36% !default;
-$shape-img-1-margin-top:              12% !default;
+$shape-img-1-right: 7% !default;
+$shape-img-1-width: 36% !default;
+$shape-img-1-margin-top: 12% !default;
 
-$shape-img-2-left:                    24% !default;
-$shape-img-2-width:                   27% !default;
-$shape-img-2-margin-top:              10% !default;
+$shape-img-2-left: 24% !default;
+$shape-img-2-width: 27% !default;
+$shape-img-2-margin-top: 10% !default;
 
 // Comming Soon page
 
-$coming-rotate-transform:             rotate(20deg) !default;
-
+$coming-rotate-transform: rotate(20deg) !default;
 
 // Tilt Animation
 
-$tilt-transform-style:                preserve-3d !default;
-$tilt-transform-up-transform:         translateZ(50px) scale(0.7) !default;
-$tilt-transform-up-transition:        all 0.5s !default;
+$tilt-transform-style: preserve-3d !default;
+$tilt-transform-up-transform: translateZ(50px) scale(0.7) !default;
+$tilt-transform-up-transition: all 0.5s !default;
 
 // Round Slider
 
-$round-slider-m-width:                200px !default;
-$round-slider-scale-m-width:          300px !default;
-$round-slider-transition:             all .5s ease-out 0s !default;
+$round-slider-m-width: 200px !default;
+$round-slider-scale-m-width: 300px !default;
+$round-slider-transition: all 0.5s ease-out 0s !default;
diff --git a/src/assets/scss/soft-ui-dashboard/variables/_misc.scss b/src/assets/scss/soft-ui-dashboard/variables/_misc.scss
index e2ae87f..a10c002 100644
--- a/src/assets/scss/soft-ui-dashboard/variables/_misc.scss
+++ b/src/assets/scss/soft-ui-dashboard/variables/_misc.scss
@@ -1,54 +1,94 @@
 // Horizontal Faded Line
-$hr-bg:                               transparent !default;
-$hr-transform:                        rotate(90deg) !default;
-$hr-bg-image:                         linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) !default;
-$hr-bg-dark-image:                    linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, .4), rgba(0, 0, 0, 0)) !default;
-
+$hr-bg: transparent !default;
+$hr-transform: rotate(90deg) !default;
+$hr-bg-image: linear-gradient(
+  to right,
+  rgba(255, 255, 255, 0),
+  rgba(255, 255, 255, 1),
+  rgba(255, 255, 255, 0)
+) !default;
+$hr-bg-dark-image: linear-gradient(
+  to right,
+  rgba(0, 0, 0, 0),
+  rgba(0, 0, 0, 0.4),
+  rgba(0, 0, 0, 0)
+) !default;
 
 // Gradient Animation
-$gradient-animation-background:       linear-gradient(-45deg, $info-gradient, $danger, $warning, $primary-gradient, $dark) !default;
-$gradient-animation-bg-size:          400% 400% !default;
+$gradient-animation-background: linear-gradient(
+  -45deg,
+  $info-gradient,
+  $danger,
+  $warning,
+  $primary-gradient,
+  $dark
+) !default;
+$gradient-animation-bg-size: 400% 400% !default;
 
 // Device Wrapper
-$device-wrapper-radius:               3.5rem !default;
-$device-wrapper-box-shadow:           0 12px 15px rgba(140, 152, 164, 0.1) !default;
-$device-wrapper-animation:            gradient 10s ease infinite !default;
-
+$device-wrapper-radius: 3.5rem !default;
+$device-wrapper-box-shadow: 0 12px 15px rgba(140, 152, 164, 0.1) !default;
+$device-wrapper-animation: gradient 10s ease infinite !default;
 
 // Nav pills
-$nav-pills-link-border-radius:        0.5rem !default;
-$nav-pills-link-box-shadow:           0px 1px 5px 1px #ddd !default;
-$nav-pills-link-active-padding:       7px 15px !default;
-$nav-pills-link-active-margin:        1px !default;
-$nav-pills-link-active-animation:     .2s ease !default;
+$nav-pills-link-border-radius: 0.5rem !default;
+$nav-pills-link-box-shadow: 0px 1px 5px 1px #ddd !default;
+$nav-pills-link-active-padding: 7px 15px !default;
+$nav-pills-link-active-margin: 1px !default;
+$nav-pills-link-active-animation: 0.2s ease !default;
 
 // Table Progress
 
-$table-progress-width:                120px !default;
-$table-progress-height:               3px !default;
-$table-progress-margin:               0 !default;
+$table-progress-width: 120px !default;
+$table-progress-height: 3px !default;
+$table-progress-margin: 0 !default;
 
 // Tooltip Arrow
 
-$tooltip-arrow-left:                  1px !default;
-$tooltip-arrow-right:                 $tooltip-arrow-left !default;
+$tooltip-arrow-left: 1px !default;
+$tooltip-arrow-right: $tooltip-arrow-left !default;
 
 // Footer Link hover animation
 
-$footer-link-animation:               opacity .3 ease !default;
+$footer-link-animation: opacity 0.3 ease !default;
 
 // Blur background
 
-$blur-light-background:               rgba(255, 255, 255, 0.4) !default;
-$blur-dark-background:                rgba(0, 0, 0, 0.3) !default;
+$blur-light-background: rgba(255, 255, 255, 0.4) !default;
+$blur-dark-background: rgba(0, 0, 0, 0.3) !default;
 
 // HR w/ opacity
 
-$hr-bg-color:                         transparent !default;
-$hr-width:                            1px !default;
-$hr-margin:                           .75rem 0 !default;
-$hr-horizontal-bg-image-light:        linear-gradient(to right, rgba(255, 255, 255, 0), white, rgba(255, 255, 255, 0)) !default;
-$hr-horizontal-bg-image-gray-light:           linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, .1), rgba(0, 0, 0, 0)) !default;
-$hr-horizontal-bg-image-dark:         linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, .4), rgba(0, 0, 0, 0)) !default;
-$hr-vertical-bg-image-light:          linear-gradient(to bottom, rgba(255, 255, 255, 0), white, rgba(255, 255, 255, 0)) !default;
-$hr-vertical-bg-image-dark:           linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .4), rgba(0, 0, 0, 0)) !default;
+$hr-bg-color: transparent !default;
+$hr-width: 1px !default;
+$hr-margin: 0.75rem 0 !default;
+$hr-horizontal-bg-image-light: linear-gradient(
+  to right,
+  rgba(255, 255, 255, 0),
+  white,
+  rgba(255, 255, 255, 0)
+) !default;
+$hr-horizontal-bg-image-gray-light: linear-gradient(
+  to right,
+  rgba(0, 0, 0, 0),
+  rgba(0, 0, 0, 0.1),
+  rgba(0, 0, 0, 0)
+) !default;
+$hr-horizontal-bg-image-dark: linear-gradient(
+  to right,
+  rgba(0, 0, 0, 0),
+  rgba(0, 0, 0, 0.4),
+  rgba(0, 0, 0, 0)
+) !default;
+$hr-vertical-bg-image-light: linear-gradient(
+  to bottom,
+  rgba(255, 255, 255, 0),
+  white,
+  rgba(255, 255, 255, 0)
+) !default;
+$hr-vertical-bg-image-dark: linear-gradient(
+  to bottom,
+  rgba(0, 0, 0, 0),
+  rgba(0, 0, 0, 0.4),
+  rgba(0, 0, 0, 0)
+) !default;
diff --git a/src/assets/scss/soft-ui-dashboard/variables/_navbar-vertical.scss b/src/assets/scss/soft-ui-dashboard/variables/_navbar-vertical.scss
index 5a43f08..a86ab9c 100644
--- a/src/assets/scss/soft-ui-dashboard/variables/_navbar-vertical.scss
+++ b/src/assets/scss/soft-ui-dashboard/variables/_navbar-vertical.scss
@@ -1,64 +1,65 @@
-$navbar-light-bg:                          #FBFBFB !default;
-$navbar-light-hover-bg:                    darken($gray-100, 5%) !default;
-$navbar-light-active-bg:                   darken($gray-100, 5%) !default;
-$navbar-light-border-color:                rgba($black, .05) !default;
-$navbar-light-color:                       rgba($black, .6) !default;
-$navbar-light-hover-color:                 rgba($black, .7) !default;
-$navbar-light-active-color:                rgba($black, .9) !default;
-$navbar-light-disabled-color:              rgba($black, .3) !default;
-$navbar-light-toggler-border-color:        transparent !default;
+$navbar-light-bg: #fbfbfb !default;
+$navbar-light-hover-bg: darken($gray-100, 5%) !default;
+$navbar-light-active-bg: darken($gray-100, 5%) !default;
+$navbar-light-border-color: rgba($black, 0.05) !default;
+$navbar-light-color: rgba($black, 0.6) !default;
+$navbar-light-hover-color: rgba($black, 0.7) !default;
+$navbar-light-active-color: rgba($black, 0.9) !default;
+$navbar-light-disabled-color: rgba($black, 0.3) !default;
+$navbar-light-toggler-border-color: transparent !default;
 // Vertical navbar
-$sidenav-header-width:                      4.875rem !default;
-$sidenav-card-opacity:                       .65 !default;
-$navbar-vertical-box-shadow:                0 0 2rem 0 rgba(136, 152, 170, .15) !default;
-$navbar-vertical-border-color:              rgba($black, .05) !default;
-$navbar-vertical-width:                     3.875rem !default;
-$navbar-vertical-open-width:                15.625rem !default;
-$navbar-vertical-padding-x:                 1rem !default;
-$navbar-vertical-nav-link-padding-x:        1rem !default;
-$navbar-vertical-nav-link-padding-y:        .675rem !default;
-$navbar-vertical-sidenav-normal-ml:         4.01rem !default;
-$navbar-vertical-m:                         1rem !default;
-$navbar-vertical-inner:                     calc(100vh - 360px) !default;
-$navbar-icon-min-width:                     1.8rem !default;
-$navbar-icon-margin-left:                   0.15rem !default;
-$navbar-breadcrumb-padding-y:               $nav-link-padding-y !default;
-$navbar-breadcrumb-padding-x:               0 !default;
-$navbar-light-border-color:                 $border-color !default;
-$navbar-dark-bg:                           transparent !default;
-$navbar-dark-hover-bg:                     rgba(255, 255, 255, .1) !default;
-$navbar-dark-active-bg:                    rgba(255, 255, 255, .1) !default;
-$navbar-dark-border-color:                 rgba(255, 255, 255, .1) !default;
-$navbar-dark-color:                        rgba($white, .95) !default;
-$navbar-dark-hover-color:                  rgba($white, .65) !default;
-$navbar-dark-active-color:                 rgba($white, .65) !default;
-$navbar-dark-disabled-color:               rgba($white, .25) !default;
-$navbar-dark-toggler-border-color:         transparent !default;
-$navbar-padding-y:                         1rem !default;
-$navbar-padding-x:                         1rem !default;
-$navbar-nav-link-padding-x:                1rem !default;
-$navbar-nav-link-padding-y:                1rem !default;
-$navbar-nav-link-font-size:                .875rem !default;
-$navbar-nav-link-font-weight:              500 !default;
-$navbar-nav-link-text-transform:           normal !default;
-$navbar-nav-link-letter-spacing:           0 !default;
-$navbar-nav-link-border-radius:            $border-radius-sm !default;
-$font-size-xs:                ($font-size-base * .75);
-$transition-base-time:          .25s;
-$transition-cubic-bezier:       all $transition-base-time cubic-bezier(.68, -0.55, .265, 1.55) !default;
+$sidenav-header-width: 4.875rem !default;
+$sidenav-card-opacity: 0.65 !default;
+$navbar-vertical-box-shadow: 0 0 2rem 0 rgba(136, 152, 170, 0.15) !default;
+$navbar-vertical-border-color: rgba($black, 0.05) !default;
+$navbar-vertical-width: 3.875rem !default;
+$navbar-vertical-open-width: 15.625rem !default;
+$navbar-vertical-padding-x: 1rem !default;
+$navbar-vertical-nav-link-padding-x: 1rem !default;
+$navbar-vertical-nav-link-padding-y: 0.675rem !default;
+$navbar-vertical-sidenav-normal-ml: 4.01rem !default;
+$navbar-vertical-m: 1rem !default;
+$navbar-vertical-inner: calc(100vh - 360px) !default;
+$navbar-icon-min-width: 1.8rem !default;
+$navbar-icon-margin-left: 0.15rem !default;
+$navbar-breadcrumb-padding-y: $nav-link-padding-y !default;
+$navbar-breadcrumb-padding-x: 0 !default;
+$navbar-light-border-color: $border-color !default;
+$navbar-dark-bg: transparent !default;
+$navbar-dark-hover-bg: rgba(255, 255, 255, 0.1) !default;
+$navbar-dark-active-bg: rgba(255, 255, 255, 0.1) !default;
+$navbar-dark-border-color: rgba(255, 255, 255, 0.1) !default;
+$navbar-dark-color: rgba($white, 0.95) !default;
+$navbar-dark-hover-color: rgba($white, 0.65) !default;
+$navbar-dark-active-color: rgba($white, 0.65) !default;
+$navbar-dark-disabled-color: rgba($white, 0.25) !default;
+$navbar-dark-toggler-border-color: transparent !default;
+$navbar-padding-y: 1rem !default;
+$navbar-padding-x: 1rem !default;
+$navbar-nav-link-padding-x: 1rem !default;
+$navbar-nav-link-padding-y: 1rem !default;
+$navbar-nav-link-font-size: 0.875rem !default;
+$navbar-nav-link-font-weight: 500 !default;
+$navbar-nav-link-text-transform: normal !default;
+$navbar-nav-link-letter-spacing: 0 !default;
+$navbar-nav-link-border-radius: $border-radius-sm !default;
+$font-size-xs: ($font-size-base * 0.75);
+$transition-base-time: 0.25s;
+$transition-cubic-bezier: all $transition-base-time
+  cubic-bezier(0.68, -0.55, 0.265, 1.55) !default;
 
 // Navbar collapse
 
-$navbar-vertical-collapse-dot-size:              5px !default;
-$navbar-vertical-collapse-dot-size-active:       8px !default;
-$navbar-vertical-collapse-margin-left:           1.35rem !default;
-$navbar-vertical-collapse-left:                  -18px !default;
-$navbar-vertical-collapse-top:                   50% !default;
-$navbar-vertical-collapse-translate:             translate(0,-50%) !default;
+$navbar-vertical-collapse-dot-size: 5px !default;
+$navbar-vertical-collapse-dot-size-active: 8px !default;
+$navbar-vertical-collapse-margin-left: 1.35rem !default;
+$navbar-vertical-collapse-left: -18px !default;
+$navbar-vertical-collapse-top: 50% !default;
+$navbar-vertical-collapse-translate: translate(0, -50%) !default;
 
-$navbar-vertical-hidden-width:                   6rem !default;
+$navbar-vertical-hidden-width: 6rem !default;
 
 // RTL Page
 
-$rtl-sidebar-bullet-right:                       -1.125rem !default;
-$rtl-sidebar-hover-padding-right:                2.5rem !default;
+$rtl-sidebar-bullet-right: -1.125rem !default;
+$rtl-sidebar-hover-padding-right: 2.5rem !default;
diff --git a/src/assets/scss/soft-ui-dashboard/variables/_navbar.scss b/src/assets/scss/soft-ui-dashboard/variables/_navbar.scss
index 013bfa9..8cfda64 100644
--- a/src/assets/scss/soft-ui-dashboard/variables/_navbar.scss
+++ b/src/assets/scss/soft-ui-dashboard/variables/_navbar.scss
@@ -1,17 +1,17 @@
 // Navbar toggler icon on responsive styling
 
-$navbar-toggler-bar-display:                      block !default;
-$navbar-toggler-bar-position:                     relative !default;
-$navbar-toggler-bar-width:                        22px !default;
-$navbar-toggler-bar-height:                       1px !default;
-$navbar-toggler-bar-radius:                       1px !default;
-$navbar-toggler-bar-transition:                   all 0.2s !default;
-$navbar-toggler-bar-margin-top:                   7px !default;
+$navbar-toggler-bar-display: block !default;
+$navbar-toggler-bar-position: relative !default;
+$navbar-toggler-bar-width: 22px !default;
+$navbar-toggler-bar-height: 1px !default;
+$navbar-toggler-bar-radius: 1px !default;
+$navbar-toggler-bar-transition: all 0.2s !default;
+$navbar-toggler-bar-margin-top: 7px !default;
 
-$navbar-toggler-bar-1-transform:                  rotate(45deg) !default;
-$navbar-toggler-bar-1-transform-origin:           10% 10% !default;
-$navbar-toggler-bar-1-margin-top:                 4px !default;
-$navbar-toggler-bar-2-opacity:                    0 !default;
-$navbar-toggler-bar-3-transform:                  rotate(-45deg) !default;
-$navbar-toggler-bar-3-transform-origin:           10% 90% !default;
-$navbar-toggler-bar-3-margin-top:                 3px !default;
+$navbar-toggler-bar-1-transform: rotate(45deg) !default;
+$navbar-toggler-bar-1-transform-origin: 10% 10% !default;
+$navbar-toggler-bar-1-margin-top: 4px !default;
+$navbar-toggler-bar-2-opacity: 0 !default;
+$navbar-toggler-bar-3-transform: rotate(-45deg) !default;
+$navbar-toggler-bar-3-transform-origin: 10% 90% !default;
+$navbar-toggler-bar-3-margin-top: 3px !default;
diff --git a/src/assets/scss/soft-ui-dashboard/variables/_pagination.scss b/src/assets/scss/soft-ui-dashboard/variables/_pagination.scss
index 46a54a0..4c923c6 100644
--- a/src/assets/scss/soft-ui-dashboard/variables/_pagination.scss
+++ b/src/assets/scss/soft-ui-dashboard/variables/_pagination.scss
@@ -1,19 +1,19 @@
 // Pagination
 
-$pagination-active-box-shadow:      $btn-hover-box-shadow !default;
+$pagination-active-box-shadow: $btn-hover-box-shadow !default;
 
-$page-link-display:                 flex !default;
-$page-link-align-items:             center !default;
-$page-link-justify-content:         $page-link-align-items !default;
-$page-link-margin:                  0 3px !default;
-$page-link-radius:                  50% !default;
-$page-link-width:                   36px !default;
-$page-link-height:                  $page-link-width !default;
+$page-link-display: flex !default;
+$page-link-align-items: center !default;
+$page-link-justify-content: $page-link-align-items !default;
+$page-link-margin: 0 3px !default;
+$page-link-radius: 50% !default;
+$page-link-width: 36px !default;
+$page-link-height: $page-link-width !default;
 
-$page-link-width-lg:                46px !default;
-$page-link-height-lg:               $page-link-width-lg !default;
-$page-link-line-height-lg:          $page-link-width-lg !default;
+$page-link-width-lg: 46px !default;
+$page-link-height-lg: $page-link-width-lg !default;
+$page-link-line-height-lg: $page-link-width-lg !default;
 
-$page-link-width-sm:                30px !default;
-$page-link-height-sm:               $page-link-width-sm !default;
-$page-link-line-height-sm:          $page-link-width-sm !default;
+$page-link-width-sm: 30px !default;
+$page-link-height-sm: $page-link-width-sm !default;
+$page-link-line-height-sm: $page-link-width-sm !default;
diff --git a/src/assets/scss/soft-ui-dashboard/variables/_social-buttons.scss b/src/assets/scss/soft-ui-dashboard/variables/_social-buttons.scss
index d5db6d0..443fdf2 100644
--- a/src/assets/scss/soft-ui-dashboard/variables/_social-buttons.scss
+++ b/src/assets/scss/soft-ui-dashboard/variables/_social-buttons.scss
@@ -1,28 +1,28 @@
 // Social Buttons
 
-$facebook:              #3b5998 !default;
-$facebook-states:       darken($facebook, 5%) !default;
-$twitter:               #55acee !default;
-$twitter-states:        darken($twitter, 5%) !default;
-$instagram:             #125688 !default;
-$instagram-states:      darken($instagram, 6%) !default;
-$linkedin:              #0077B5 !default;
-$linkedin-states:       darken($linkedin, 5%) !default;
-$pinterest:             #cc2127 !default;
-$pinterest-states:      darken($pinterest, 6%) !default;
-$youtube:               #e52d27 !default;
-$youtube-states:        darken($youtube, 6%) !default;
-$dribbble:              #ea4c89 !default;
-$dribbble-states:       darken($dribbble, 6%) !default;
-$github:                #24292E !default;
-$github-states:         darken($github, 6%) !default;
-$reddit:                #ff4500 !default;
-$reddit-states:         darken($reddit, 6%) !default;
-$tumblr:                #35465c !default;
-$tumblr-states:         darken($tumblr, 6%) !default;
-$behance:               #1769ff !default;
-$behance-states:        darken($behance, 6%) !default;
-$vimeo:                 #1AB7EA !default;
-$vimeo-states:          darken($vimeo, 6%) !default;
-$slack:                 #3aaf85 !default;
-$slack-states:          darken($slack, 6%) !default;
+$facebook: #3b5998 !default;
+$facebook-states: darken($facebook, 5%) !default;
+$twitter: #55acee !default;
+$twitter-states: darken($twitter, 5%) !default;
+$instagram: #125688 !default;
+$instagram-states: darken($instagram, 6%) !default;
+$linkedin: #0077b5 !default;
+$linkedin-states: darken($linkedin, 5%) !default;
+$pinterest: #cc2127 !default;
+$pinterest-states: darken($pinterest, 6%) !default;
+$youtube: #e52d27 !default;
+$youtube-states: darken($youtube, 6%) !default;
+$dribbble: #ea4c89 !default;
+$dribbble-states: darken($dribbble, 6%) !default;
+$github: #24292e !default;
+$github-states: darken($github, 6%) !default;
+$reddit: #ff4500 !default;
+$reddit-states: darken($reddit, 6%) !default;
+$tumblr: #35465c !default;
+$tumblr-states: darken($tumblr, 6%) !default;
+$behance: #1769ff !default;
+$behance-states: darken($behance, 6%) !default;
+$vimeo: #1ab7ea !default;
+$vimeo-states: darken($vimeo, 6%) !default;
+$slack: #3aaf85 !default;
+$slack-states: darken($slack, 6%) !default;
diff --git a/src/assets/scss/soft-ui-dashboard/variables/_table.scss b/src/assets/scss/soft-ui-dashboard/variables/_table.scss
index a881eb9..ace9b38 100644
--- a/src/assets/scss/soft-ui-dashboard/variables/_table.scss
+++ b/src/assets/scss/soft-ui-dashboard/variables/_table.scss
@@ -1,19 +1,19 @@
-$table-head-spacer-y:         .75rem !default;
-$table-head-spacer-x:         1rem !default;
-$table-head-font-size:        .65rem !default;
-$table-head-font-weight:      $font-weight-bold !default;
-$table-head-text-transform:   uppercase !default;
-$table-head-letter-spacing:   1px !default;
-$table-head-bg:               $gray-100 !default;
-$table-head-color:            $gray-600 !default;
-$table-action-color:          $gray-500 !default;
+$table-head-spacer-y: 0.75rem !default;
+$table-head-spacer-x: 1rem !default;
+$table-head-font-size: 0.65rem !default;
+$table-head-font-weight: $font-weight-bold !default;
+$table-head-text-transform: uppercase !default;
+$table-head-letter-spacing: 1px !default;
+$table-head-bg: $gray-100 !default;
+$table-head-color: $gray-600 !default;
+$table-action-color: $gray-500 !default;
 
-$table-body-font-size:        .8125rem !default;
+$table-body-font-size: 0.8125rem !default;
 
-$table-dark-bg:               theme-color("default") !default;
-$table-dark-accent-bg:        rgba($white, .05) !default;
-$table-dark-hover-bg:         rgba($white, .075) !default;
+$table-dark-bg: theme-color("default") !default;
+$table-dark-accent-bg: rgba($white, 0.05) !default;
+$table-dark-hover-bg: rgba($white, 0.075) !default;
 
-$table-dark-head-bg:          lighten($dark, 4%) !default;
-$table-dark-head-color:       lighten($dark, 35%) !default;
-$table-dark-action-color:     lighten($dark, 35%) !default;
+$table-dark-head-bg: lighten($dark, 4%) !default;
+$table-dark-head-color: lighten($dark, 35%) !default;
+$table-dark-action-color: lighten($dark, 35%) !default;
diff --git a/src/assets/scss/soft-ui-dashboard/variables/_timeline.scss b/src/assets/scss/soft-ui-dashboard/variables/_timeline.scss
index 0d64a93..5bdaca5 100644
--- a/src/assets/scss/soft-ui-dashboard/variables/_timeline.scss
+++ b/src/assets/scss/soft-ui-dashboard/variables/_timeline.scss
@@ -15,5 +15,5 @@ $timeline-step-border-width: 2px !default;
 $timeline-step-border-color: $timeline-axis-color !default;
 
 $timeline-content-margin-left: 45px !default;
-$timeline-content-padding-top: .35rem !default;
+$timeline-content-padding-top: 0.35rem !default;
 $timeline-content-top: -6px !default;
diff --git a/src/assets/scss/soft-ui-dashboard/variables/_utilities-extend.scss b/src/assets/scss/soft-ui-dashboard/variables/_utilities-extend.scss
index 5cad866..7e4ec11 100644
--- a/src/assets/scss/soft-ui-dashboard/variables/_utilities-extend.scss
+++ b/src/assets/scss/soft-ui-dashboard/variables/_utilities-extend.scss
@@ -1,22 +1,24 @@
 // Colores Shadow on cards
-$colored-shadow-top:            3.5% !default;
-$colored-shadow-blur:           12px !default;
-$colored-shadow-scale:          .94 !default;
-$colored-shadow-scale-avatar:   .87 !default;
+$colored-shadow-top: 3.5% !default;
+$colored-shadow-blur: 12px !default;
+$colored-shadow-scale: 0.94 !default;
+$colored-shadow-scale-avatar: 0.87 !default;
 
 // Card Projects
-$card-project-transition:       .4s cubic-bezier(.215,.61,.355,1) !default;
-$card-project-avatar-transform: scale(.8) translateY(-45px) !default;
-$card-project-hover-transform:  translateY(-2px) !default;
+$card-project-transition: 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) !default;
+$card-project-avatar-transform: scale(0.8) translateY(-45px) !default;
+$card-project-hover-transform: translateY(-2px) !default;
 
 // Transform Perspective effect
-$transform-perspective:         scale(1) perspective(1040px) rotateY(-11deg) rotateX(2deg) rotate(2deg) !default;
-$transform-perspective-inverse: scale(1) perspective(1040px) rotateY(11deg) rotateX(-2deg) rotate(-2deg) !default;
+$transform-perspective: scale(1) perspective(1040px) rotateY(-11deg)
+  rotateX(2deg) rotate(2deg) !default;
+$transform-perspective-inverse: scale(1) perspective(1040px) rotateY(11deg)
+  rotateX(-2deg) rotate(-2deg) !default;
 
 // Z index
-$z-index2:                       2 !default;
+$z-index2: 2 !default;
 
 // Width in PX
-$width-32-px:                     32px !default;
-$width-48-px:                     48px !default;
-$width-64-px:                     64px !default;
+$width-32-px: 32px !default;
+$width-48-px: 48px !default;
+$width-64-px: 64px !default;
diff --git a/src/assets/scss/soft-ui-dashboard/variables/_utilities.scss b/src/assets/scss/soft-ui-dashboard/variables/_utilities.scss
index 486d4c5..d8977bb 100644
--- a/src/assets/scss/soft-ui-dashboard/variables/_utilities.scss
+++ b/src/assets/scss/soft-ui-dashboard/variables/_utilities.scss
@@ -1,126 +1,126 @@
 // on hover transition variables
-$move-transition:               .2s ease-out !default;
-$move-overflow:                 hidden !default;
-$move-transform:                perspective(999px) rotateX(0deg) translate3d(0,0,0) !default;
-$move-transform-origin:         50% 0 !default;
-$move-backface-visibility:      hidden !default;
-$move-will-change:              transform,box-shadow !default;
-$move-hover-transform:          perspective(999px) rotateX(7deg) translate3d(0px,-4px,5px) !default;
+$move-transition: 0.2s ease-out !default;
+$move-overflow: hidden !default;
+$move-transform: perspective(999px) rotateX(0deg) translate3d(0, 0, 0) !default;
+$move-transform-origin: 50% 0 !default;
+$move-backface-visibility: hidden !default;
+$move-will-change: transform, box-shadow !default;
+$move-hover-transform: perspective(999px) rotateX(7deg)
+  translate3d(0px, -4px, 5px) !default;
 
 // Sections Height Utilities
-$section-height-25-min-height:  25vh !default;
-$section-height-35-min-height:  35vh !default;
-$section-height-45-min-height:  45vh !default;
-$section-height-50-min-height:  50vh !default;
-$section-height-55-min-height:  55vh !default;
-$section-height-65-min-height:  65vh !default;
-$section-height-70-min-height:  70vh !default;
-$section-height-75-min-height:  75vh !default;
-$section-height-80-min-height:  80vh !default;
-$section-height-85-min-height:  85vh !default;
-$section-height-90-min-height:  90vh !default;
-$section-height-95-min-height:  95vh !default;
+$section-height-25-min-height: 25vh !default;
+$section-height-35-min-height: 35vh !default;
+$section-height-45-min-height: 45vh !default;
+$section-height-50-min-height: 50vh !default;
+$section-height-55-min-height: 55vh !default;
+$section-height-65-min-height: 65vh !default;
+$section-height-70-min-height: 70vh !default;
+$section-height-75-min-height: 75vh !default;
+$section-height-80-min-height: 80vh !default;
+$section-height-85-min-height: 85vh !default;
+$section-height-90-min-height: 90vh !default;
+$section-height-95-min-height: 95vh !default;
 $section-height-100-min-height: 100vh !default;
 
 // extra padding utilities variables - CT
-$padding-6:                     4rem !default;
-$padding-7:                     6rem !default;
-$padding-8:                     8rem !default;
-$padding-9:                     10rem !default;
-$padding-10:                    12rem !default;
-$padding-11:                    14rem !default;
-$padding-12:                    16rem !default;
+$padding-6: 4rem !default;
+$padding-7: 6rem !default;
+$padding-8: 8rem !default;
+$padding-9: 10rem !default;
+$padding-10: 12rem !default;
+$padding-11: 14rem !default;
+$padding-12: 16rem !default;
 
 // extra margins utilities variables - CT
-$margin-6:                      4rem !default;
-$margin-7:                      6rem !default;
-$margin-8:                      8rem !default;
-$margin-9:                      10rem !default;
-$margin-10:                     12rem !default;
-$margin-11:                     14rem !default;
-$margin-12:                     16rem !default;
+$margin-6: 4rem !default;
+$margin-7: 6rem !default;
+$margin-8: 8rem !default;
+$margin-9: 10rem !default;
+$margin-10: 12rem !default;
+$margin-11: 14rem !default;
+$margin-12: 16rem !default;
 
 // extra width values variables - CT
-$width-0:                     0% !default;
-$width-1:                     1% !default;
-$width-2:                     2% !default;
-$width-3:                     3% !default;
-$width-4:                     4% !default;
-$width-5:                     5% !default;
-$width-6:                     6% !default;
-$width-7:                     7% !default;
-$width-8:                     8% !default;
-$width-9:                     9% !default;
-$width-10:                    10% !default;
-$width-15:                    15% !default;
-$width-20:                    20% !default;
-$width-25:                    25% !default;
-$width-30:                    30% !default;
-$width-35:                    35% !default;
-$width-40:                    40% !default;
-$width-45:                    45% !default;
-$width-50:                    50% !default;
-$width-55:                    55% !default;
-$width-60:                    60% !default;
-$width-65:                    65% !default;
-$width-70:                    70% !default;
-$width-75:                    75% !default;
-$width-80:                    80% !default;
-$width-85:                    85% !default;
-$width-90:                    90% !default;
-$width-95:                    95% !default;
-$width-100:                   100% !default;
+$width-0: 0% !default;
+$width-1: 1% !default;
+$width-2: 2% !default;
+$width-3: 3% !default;
+$width-4: 4% !default;
+$width-5: 5% !default;
+$width-6: 6% !default;
+$width-7: 7% !default;
+$width-8: 8% !default;
+$width-9: 9% !default;
+$width-10: 10% !default;
+$width-15: 15% !default;
+$width-20: 20% !default;
+$width-25: 25% !default;
+$width-30: 30% !default;
+$width-35: 35% !default;
+$width-40: 40% !default;
+$width-45: 45% !default;
+$width-50: 50% !default;
+$width-55: 55% !default;
+$width-60: 60% !default;
+$width-65: 65% !default;
+$width-70: 70% !default;
+$width-75: 75% !default;
+$width-80: 80% !default;
+$width-85: 85% !default;
+$width-90: 90% !default;
+$width-95: 95% !default;
+$width-100: 100% !default;
 
 // extra max width values variables - CT
-$max-width-100:                     100px !default;
-$max-width-200:                     200px !default;
-$max-width-300:                     300px !default;
-$max-width-400:                     400px !default;
-$max-width-500:                     500px !default;
+$max-width-100: 100px !default;
+$max-width-200: 200px !default;
+$max-width-300: 300px !default;
+$max-width-400: 400px !default;
+$max-width-500: 500px !default;
 
 // extra height values variables - CT
-$height-100:                        100px !default;
-$height-150:                        150px !default;
-$height-200:                        200px !default;
-$height-300:                        300px !default;
-$height-400:                        400px !default;
-$height-500:                        500px !default;
-$height-600:                        600px !default;
-
+$height-100: 100px !default;
+$height-150: 150px !default;
+$height-200: 200px !default;
+$height-300: 300px !default;
+$height-400: 400px !default;
+$height-500: 500px !default;
+$height-600: 600px !default;
 
 // extra min height values variables - CT
-$min-height-100:                    100px !default;
-$min-height-150:                    150px !default;
-$min-height-160:                    160px !default;
-$min-height-200:                    200px !default;
-$min-height-250:                    250px !default;
-$min-height-300:                    300px !default;
-$min-height-400:                    400px !default;
-$min-height-500:                    500px !default;
-$min-height-600:                    600px !default;
+$min-height-100: 100px !default;
+$min-height-150: 150px !default;
+$min-height-160: 160px !default;
+$min-height-200: 200px !default;
+$min-height-250: 250px !default;
+$min-height-300: 300px !default;
+$min-height-400: 400px !default;
+$min-height-500: 500px !default;
+$min-height-600: 600px !default;
 
 // extra min height values variables - CT
-$max-height-100:                    100px !default;
-$max-height-150:                    150px !default;
-$max-height-160:                    160px !default;
-$max-height-200:                    200px !default;
-$max-height-250:                    250px !default;
-$max-height-300:                    300px !default;
-$max-height-400:                    400px !default;
-$max-height-500:                    500px !default;
-$max-height-600:                    600px !default;
+$max-height-100: 100px !default;
+$max-height-150: 150px !default;
+$max-height-160: 160px !default;
+$max-height-200: 200px !default;
+$max-height-250: 250px !default;
+$max-height-300: 300px !default;
+$max-height-400: 400px !default;
+$max-height-500: 500px !default;
+$max-height-600: 600px !default;
 
 // extra min height vh values variables - CT
-$max-height-vh-10:                    10vh !default;
-$max-height-vh-20:                    20vh !default;
-$max-height-vh-30:                    30vh !default;
-$max-height-vh-40:                    40vh !default;
-$max-height-vh-50:                    50vh !default;
-$max-height-vh-60:                    60vh !default;
-$max-height-vh-70:                    70vh !default;
-$max-height-vh-80:                    80vh !default;
-$max-height-vh-90:                    90vh !default;
-$max-height-vh-100:                   100vh !default;
+$max-height-vh-10: 10vh !default;
+$max-height-vh-20: 20vh !default;
+$max-height-vh-30: 30vh !default;
+$max-height-vh-40: 40vh !default;
+$max-height-vh-50: 50vh !default;
+$max-height-vh-60: 60vh !default;
+$max-height-vh-70: 70vh !default;
+$max-height-vh-80: 80vh !default;
+$max-height-vh-90: 90vh !default;
+$max-height-vh-100: 100vh !default;
 
 // Extra Padding values Map
 $paddings: (
@@ -130,7 +130,7 @@ $paddings: (
   "9": $padding-9,
   "10": $padding-10,
   "11": $padding-11,
-  "12": $padding-12
+  "12": $padding-12,
 ) !default;
 
 // Extra Margins values Map
@@ -141,7 +141,7 @@ $margins: (
   "9": $margin-9,
   "10": $margin-10,
   "11": $margin-11,
-  "12": $margin-12
+  "12": $margin-12,
 ) !default;
 
 $width: (
@@ -174,17 +174,17 @@ $width: (
   "90": $width-90,
   "95": $width-95,
   "100": $width-100,
-  "auto": auto
+  "auto": auto,
 ) !default;
 
-
 // blur effect variables
-$blur-border-radius-rounded:    40px !default;
-$blur-box-shadow:               inset 0px 0px 2px #fefefed1 !default;
-$blur-backdrop-filter:          saturate(200%) blur(30px) !default;
-$blur-backdrop-filter-less:     saturate(20%) blur(30px) !default;
+$blur-border-radius-rounded: 40px !default;
+$blur-box-shadow: inset 0px 0px 2px #fefefed1 !default;
+$blur-backdrop-filter: saturate(200%) blur(30px) !default;
+$blur-backdrop-filter-less: saturate(20%) blur(30px) !default;
 
-$shadow-blur-box-shadow:        inset 0 0px 1px 1px rgba(254, 254, 254, .9), 0 20px 27px 0 rgba(0, 0, 0, .05) !default;
+$shadow-blur-box-shadow: inset 0 0px 1px 1px rgba(254, 254, 254, 0.9),
+  0 20px 27px 0 rgba(0, 0, 0, 0.05) !default;
 
 // sidebar variables
 
diff --git a/src/assets/scss/soft-ui-dashboard/variables/_virtual-reality.scss b/src/assets/scss/soft-ui-dashboard/variables/_virtual-reality.scss
index 969a784..ae98ea7 100644
--- a/src/assets/scss/soft-ui-dashboard/variables/_virtual-reality.scss
+++ b/src/assets/scss/soft-ui-dashboard/variables/_virtual-reality.scss
@@ -1,5 +1,5 @@
-$animation-name:        fadeInBottom !default;
-$animation-mode:        both !default;
-$animation-duration:    1.5s !default;
-$transform-scale:       scale(0.6) !default;
-$position-left:         18% !default;  
+$animation-name: fadeInBottom !default;
+$animation-mode: both !default;
+$animation-duration: 1.5s !default;
+$transform-scale: scale(0.6) !default;
+$position-left: 18% !default;
diff --git a/src/components/Icon.vue b/src/components/Icon.vue
index 7f6ecd2..785a2fd 100644
--- a/src/components/Icon.vue
+++ b/src/components/Icon.vue
@@ -12,7 +12,11 @@
   >
     <title>shop</title>
     <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-      <g transform="translate(-1716.000000, -439.000000)" :fill="iconColor" fill-rule="nonzero">
+      <g
+        transform="translate(-1716.000000, -439.000000)"
+        :fill="iconColor"
+        fill-rule="nonzero"
+      >
         <g transform="translate(1716.000000, 291.000000)">
           <g transform="translate(0.000000, 148.000000)">
             <path
@@ -41,7 +45,11 @@
   >
     <title>box-3d-50</title>
     <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-      <g transform="translate(-2319.000000, -291.000000)" fill="currentColor" fill-rule="nonzero">
+      <g
+        transform="translate(-2319.000000, -291.000000)"
+        fill="currentColor"
+        fill-rule="nonzero"
+      >
         <g transform="translate(1716.000000, 291.000000)">
           <g transform="translate(603.000000, 0.000000)">
             <path
@@ -73,7 +81,11 @@
   >
     <title>office</title>
     <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-      <g transform="translate(-1869.000000, -293.000000)" fill="currentColor" fill-rule="nonzero">
+      <g
+        transform="translate(-1869.000000, -293.000000)"
+        fill="currentColor"
+        fill-rule="nonzero"
+      >
         <g transform="translate(1716.000000, 291.000000)">
           <g id="office" transform="translate(153.000000, 2.000000)">
             <path
@@ -102,7 +114,11 @@
   >
     <title>settings</title>
     <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-      <g transform="translate(-2020.000000, -442.000000)" fill="currentColor" fill-rule="nonzero">
+      <g
+        transform="translate(-2020.000000, -442.000000)"
+        fill="currentColor"
+        fill-rule="nonzero"
+      >
         <g transform="translate(1716.000000, 291.000000)">
           <g transform="translate(304.000000, 151.000000)">
             <polygon
@@ -137,7 +153,11 @@
   >
     <title>document</title>
     <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-      <g transform="translate(-1870.000000, -591.000000)" fill="currentColor" fill-rule="nonzero">
+      <g
+        transform="translate(-1870.000000, -591.000000)"
+        fill="currentColor"
+        fill-rule="nonzero"
+      >
         <g transform="translate(1716.000000, 291.000000)">
           <g transform="translate(154.000000, 300.000000)">
             <path
@@ -167,7 +187,11 @@
   >
     <title>spaceship</title>
     <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-      <g transform="translate(-1720.000000, -592.000000)" fill="currentColor" fill-rule="nonzero">
+      <g
+        transform="translate(-1720.000000, -592.000000)"
+        fill="currentColor"
+        fill-rule="nonzero"
+      >
         <g transform="translate(1716.000000, 291.000000)">
           <g transform="translate(4.000000, 301.000000)">
             <path
@@ -206,7 +230,11 @@
   >
     <title>credit-card</title>
     <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-      <g transform="translate(-2169.000000, -745.000000)" fill="currentColor" fill-rule="nonzero">
+      <g
+        transform="translate(-2169.000000, -745.000000)"
+        fill="currentColor"
+        fill-rule="nonzero"
+      >
         <g transform="translate(1716.000000, 291.000000)">
           <g transform="translate(453.000000, 454.000000)">
             <path
@@ -279,7 +307,12 @@
         color-interpolation-filters="sRGB"
       >
         <feFlood flood-opacity="0" result="BackgroundImageFix" />
-        <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+        <feBlend
+          mode="normal"
+          in="SourceGraphic"
+          in2="BackgroundImageFix"
+          result="shape"
+        />
         <feGaussianBlur stdDeviation="0.5" result="effect1_foregroundBlur" />
       </filter>
     </defs>
@@ -338,7 +371,12 @@
         color-interpolation-filters="sRGB"
       >
         <feFlood flood-opacity="0" result="BackgroundImageFix" />
-        <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+        <feBlend
+          mode="normal"
+          in="SourceGraphic"
+          in2="BackgroundImageFix"
+          result="shape"
+        />
         <feGaussianBlur stdDeviation="1" result="effect1_foregroundBlur" />
       </filter>
       <filter
@@ -351,7 +389,12 @@
         color-interpolation-filters="sRGB"
       >
         <feFlood flood-opacity="0" result="BackgroundImageFix" />
-        <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+        <feBlend
+          mode="normal"
+          in="SourceGraphic"
+          in2="BackgroundImageFix"
+          result="shape"
+        />
         <feGaussianBlur stdDeviation="10" result="effect1_foregroundBlur" />
       </filter>
       <filter
@@ -375,8 +418,17 @@
           type="matrix"
           values="0 0 0 0 0.501961 0 0 0 0 0.501961 0 0 0 0 0.501961 0 0 0 0.302 0"
         />
-        <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow" />
-        <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape" />
+        <feBlend
+          mode="normal"
+          in2="BackgroundImageFix"
+          result="effect1_dropShadow"
+        />
+        <feBlend
+          mode="normal"
+          in="SourceGraphic"
+          in2="effect1_dropShadow"
+          result="shape"
+        />
       </filter>
       <linearGradient
         id="paint0_linear"
@@ -522,7 +574,12 @@
         color-interpolation-filters="sRGB"
       >
         <feFlood flood-opacity="0" result="BackgroundImageFix" />
-        <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+        <feBlend
+          mode="normal"
+          in="SourceGraphic"
+          in2="BackgroundImageFix"
+          result="shape"
+        />
         <feGaussianBlur stdDeviation="0.5" result="effect1_foregroundBlur" />
       </filter>
     </defs>
@@ -537,7 +594,14 @@
     xmlns="http://www.w3.org/2000/svg"
   >
     <g filter="url(#filter0_f)">
-      <mask mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="301" height="156">
+      <mask
+        mask-type="alpha"
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="301"
+        height="156"
+      >
         <rect width="301" height="156" fill="#C4C4C4" />
       </mask>
       <g mask="url(#mask0)">
@@ -578,7 +642,12 @@
         color-interpolation-filters="sRGB"
       >
         <feFlood flood-opacity="0" result="BackgroundImageFix" />
-        <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+        <feBlend
+          mode="normal"
+          in="SourceGraphic"
+          in2="BackgroundImageFix"
+          result="shape"
+        />
         <feGaussianBlur stdDeviation="0.5" result="effect1_foregroundBlur" />
       </filter>
       <filter
@@ -591,7 +660,12 @@
         color-interpolation-filters="sRGB"
       >
         <feFlood flood-opacity="0" result="BackgroundImageFix" />
-        <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+        <feBlend
+          mode="normal"
+          in="SourceGraphic"
+          in2="BackgroundImageFix"
+          result="shape"
+        />
         <feGaussianBlur stdDeviation="10" result="effect1_foregroundBlur" />
       </filter>
     </defs>
@@ -607,7 +681,13 @@
     xmlns:xlink="http://www.w3.org/1999/xlink"
   >
     <title>wifi</title>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g
+      id="Page-1"
+      stroke="none"
+      stroke-width="1"
+      fill="none"
+      fill-rule="evenodd"
+    >
       <g id="wifi" transform="translate(3.000000, 3.000000)">
         <path
           d="M7.37102658,14.6156105 C12.9664408,9.02476091 22.0335592,9.02476091 27.6289734,14.6156105"
@@ -616,7 +696,13 @@
           stroke-linecap="round"
           stroke-linejoin="round"
         />
-        <circle id="Oval" fill="currentColor" cx="17.5039082" cy="22.7484921" r="4.9082855" />
+        <circle
+          id="Oval"
+          fill="currentColor"
+          cx="17.5039082"
+          cy="22.7484921"
+          r="4.9082855"
+        />
         <path
           d="M0,7.24718945 C9.66583791,-2.41572982 25.3341621,-2.41572982 35,7.24718945"
           stroke="#FFFFFF"
@@ -643,7 +729,11 @@
   >
     <title>spaceship</title>
     <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-      <g transform="translate(-1720.000000, -592.000000)" fill="currentColor" fill-rule="nonzero">
+      <g
+        transform="translate(-1720.000000, -592.000000)"
+        fill="currentColor"
+        fill-rule="nonzero"
+      >
         <g transform="translate(1716.000000, 291.000000)">
           <g transform="translate(4.000000, 301.000000)">
             <path
@@ -681,7 +771,11 @@
   >
     <title>box-3d-50</title>
     <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-      <g transform="translate(-2319.000000, -291.000000)" fill="currentColor" fill-rule="nonzero">
+      <g
+        transform="translate(-2319.000000, -291.000000)"
+        fill="currentColor"
+        fill-rule="nonzero"
+      >
         <g transform="translate(1716.000000, 291.000000)">
           <g transform="translate(603.000000, 0.000000)">
             <path
@@ -712,7 +806,11 @@
   >
     <title>customer-support</title>
     <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-      <g transform="translate(-1717.000000, -291.000000)" fill="currentColor" fill-rule="nonzero">
+      <g
+        transform="translate(-1717.000000, -291.000000)"
+        fill="currentColor"
+        fill-rule="nonzero"
+      >
         <g transform="translate(1716.000000, 291.000000)">
           <g transform="translate(1.000000, 0.000000)">
             <path
@@ -745,7 +843,11 @@
   >
     <title>document</title>
     <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-      <g transform="translate(-1870.000000, -591.000000)" fill="currentColor" fill-rule="nonzero">
+      <g
+        transform="translate(-1870.000000, -591.000000)"
+        fill="currentColor"
+        fill-rule="nonzero"
+      >
         <g transform="translate(1716.000000, 291.000000)">
           <g transform="translate(154.000000, 300.000000)">
             <path
@@ -773,7 +875,11 @@
   >
     <title>switches</title>
     <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-      <g transform="translate(-1870.000000, -440.000000)" fill="currentColor" fill-rule="nonzero">
+      <g
+        transform="translate(-1870.000000, -440.000000)"
+        fill="currentColor"
+        fill-rule="nonzero"
+      >
         <g transform="translate(1716.000000, 291.000000)">
           <g transform="translate(154.000000, 149.000000)">
             <path
@@ -803,7 +909,11 @@
   >
     <title>settings</title>
     <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-      <g transform="translate(-2020.000000, -442.000000)" fill="currentColor" fill-rule="nonzero">
+      <g
+        transform="translate(-2020.000000, -442.000000)"
+        fill="currentColor"
+        fill-rule="nonzero"
+      >
         <g transform="translate(1716.000000, 291.000000)">
           <g transform="translate(304.000000, 151.000000)">
             <polygon
@@ -837,7 +947,11 @@
   >
     <title>office</title>
     <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-      <g transform="translate(-1869.000000, -293.000000)" fill="currentColor" fill-rule="nonzero">
+      <g
+        transform="translate(-1869.000000, -293.000000)"
+        fill="currentColor"
+        fill-rule="nonzero"
+      >
         <g transform="translate(1716.000000, 291.000000)">
           <g transform="translate(153.000000, 2.000000)">
             <path
@@ -865,7 +979,11 @@
   >
     <title>spaceship</title>
     <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-      <g transform="translate(-1720.000000, -592.000000)" fill="currentColor" fill-rule="nonzero">
+      <g
+        transform="translate(-1720.000000, -592.000000)"
+        fill="currentColor"
+        fill-rule="nonzero"
+      >
         <g transform="translate(1716.000000, 291.000000)">
           <g transform="translate(4.000000, 301.000000)">
             <path
@@ -904,7 +1022,11 @@
   >
     <title>document</title>
     <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-      <g transform="translate(-1870.000000, -591.000000)" fill="currentColor" fill-rule="nonzero">
+      <g
+        transform="translate(-1870.000000, -591.000000)"
+        fill="currentColor"
+        fill-rule="nonzero"
+      >
         <g transform="translate(1716.000000, 291.000000)">
           <g transform="translate(154.000000, 300.000000)">
             <path
@@ -935,7 +1057,11 @@
   >
     <title>box-3d-50</title>
     <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-      <g transform="translate(-2319.000000, -291.000000)" fill="currentColor" fill-rule="nonzero">
+      <g
+        transform="translate(-2319.000000, -291.000000)"
+        fill="currentColor"
+        fill-rule="nonzero"
+      >
         <g transform="translate(1716.000000, 291.000000)">
           <g transform="translate(603.000000, 0.000000)">
             <path
@@ -972,7 +1098,7 @@ export default {
     },
     iconClass: {
       type: String,
-      default: ""
+      default: "",
     },
   },
 };
diff --git a/src/components/VsudAlert.vue b/src/components/VsudAlert.vue
index b537a0f..a5f5a2e 100644
--- a/src/components/VsudAlert.vue
+++ b/src/components/VsudAlert.vue
@@ -1,56 +1,56 @@
-<template>
-  <div
-    class="alert text-white font-weight-bold"
-    role="alert"
-    :class="getClasses(color, dismissible)"
-  >
-    <span class="alert-icon">
-      <i :class="getIcon(icon)" />
-    </span>
-    <span class="alert-text">
-      &nbsp;
-      <slot />
-    </span>
-    <button
-      v-if="dismissible"
-      type="button"
-      class="btn-close d-flex justify-content-center align-items-center"
-      data-bs-dismiss="alert"
-      aria-label="Close"
-    >
-      <span aria-hidden="true" class="text-lg font-weight-bold">&times;</span>
-    </button>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "VsudAlert",
-  props: {
-    color: {
-      type: String,
-      default: "success",
-    },
-    icon: {
-      type: String,
-      default: ""
-    },
-    dismissible: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  methods: {
-    getClasses: (color, dismissible) => {
-      let colorValue, dismissibleValue;
-
-      colorValue = color ? `alert-${color}` : null;
-
-      dismissibleValue = dismissible ? "alert-dismissible fade show" : null;
-
-      return `${colorValue} ${dismissibleValue}`;
-    },
-    getIcon: (icon) => (icon ? icon : null),
-  },
-};
-</script>
+<template>
+  <div
+    class="alert text-white font-weight-bold"
+    role="alert"
+    :class="getClasses(color, dismissible)"
+  >
+    <span class="alert-icon">
+      <i :class="getIcon(icon)" />
+    </span>
+    <span class="alert-text">
+      &nbsp;
+      <slot />
+    </span>
+    <button
+      v-if="dismissible"
+      type="button"
+      class="btn-close d-flex justify-content-center align-items-center"
+      data-bs-dismiss="alert"
+      aria-label="Close"
+    >
+      <span aria-hidden="true" class="text-lg font-weight-bold">&times;</span>
+    </button>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "VsudAlert",
+  props: {
+    color: {
+      type: String,
+      default: "success",
+    },
+    icon: {
+      type: String,
+      default: "",
+    },
+    dismissible: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  methods: {
+    getClasses: (color, dismissible) => {
+      let colorValue, dismissibleValue;
+
+      colorValue = color ? `alert-${color}` : null;
+
+      dismissibleValue = dismissible ? "alert-dismissible fade show" : null;
+
+      return `${colorValue} ${dismissibleValue}`;
+    },
+    getIcon: (icon) => (icon ? icon : null),
+  },
+};
+</script>
diff --git a/src/components/VsudAvatar.vue b/src/components/VsudAvatar.vue
index c2d9853..1bc672b 100644
--- a/src/components/VsudAvatar.vue
+++ b/src/components/VsudAvatar.vue
@@ -1,52 +1,56 @@
-<template>
-  <div class="avatar" :class="getSize(size)">
-    <img :src="img" :alt="alt" :class="[getClasses(shadow, circular, borderRadius)]" />
-  </div>
-</template>
-
-<script>
-export default {
-  name: "VsudAvatar",
-  props: {
-    img: {
-      type: String,
-      default: ""
-    },
-    alt: {
-      type: String,
-      default: ""
-    },
-    size: {
-      type: String,
-      default: ""
-    },
-    shadow: {
-      type: String,
-      default: ""
-    },
-    borderRadius: {
-      type: String,
-      default: ""
-    },
-    circular: Boolean,
-  },
-  methods: {
-    getSize: (size) => (size ? `avatar-${size}` : null),
-    getClasses: (shadow, circular, borderRadius) => {
-      let shadowValue, circularValue, borderRadiusValue;
-
-      if (shadow) {
-        shadowValue = shadow === "regular" ? "shadow" : `shadow-${shadow}`;
-      } else {
-        shadowValue = null;
-      }
-
-      circularValue = circular ? "rounded-circle" : null;
-
-      borderRadiusValue = borderRadius ? `border-radius-${borderRadius}` : null;
-
-      return `${shadowValue} ${circularValue} ${borderRadiusValue}`;
-    },
-  },
-};
-</script>
+<template>
+  <div class="avatar" :class="getSize(size)">
+    <img
+      :src="img"
+      :alt="alt"
+      :class="[getClasses(shadow, circular, borderRadius)]"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  name: "VsudAvatar",
+  props: {
+    img: {
+      type: String,
+      default: "",
+    },
+    alt: {
+      type: String,
+      default: "",
+    },
+    size: {
+      type: String,
+      default: "",
+    },
+    shadow: {
+      type: String,
+      default: "",
+    },
+    borderRadius: {
+      type: String,
+      default: "",
+    },
+    circular: Boolean,
+  },
+  methods: {
+    getSize: (size) => (size ? `avatar-${size}` : null),
+    getClasses: (shadow, circular, borderRadius) => {
+      let shadowValue, circularValue, borderRadiusValue;
+
+      if (shadow) {
+        shadowValue = shadow === "regular" ? "shadow" : `shadow-${shadow}`;
+      } else {
+        shadowValue = null;
+      }
+
+      circularValue = circular ? "rounded-circle" : null;
+
+      borderRadiusValue = borderRadius ? `border-radius-${borderRadius}` : null;
+
+      return `${shadowValue} ${circularValue} ${borderRadiusValue}`;
+    },
+  },
+};
+</script>
diff --git a/src/components/VsudBadge.vue b/src/components/VsudBadge.vue
index 3bac3b0..c4aae3a 100644
--- a/src/components/VsudBadge.vue
+++ b/src/components/VsudBadge.vue
@@ -1,52 +1,55 @@
-<template>
-  <span class="badge" :class="getClasses(variant, color, size, circle, floating)">
-    <slot />
-  </span>
-</template>
-
-<script>
-export default {
-  name: "VsudBadge",
-  props: {
-    size: {
-      type: String,
-      default: "md",
-    },
-    color: {
-      type: String,
-      default: "success",
-    },
-    variant: {
-      type: String,
-      default: "fill",
-    },
-    circle: {
-      type: Boolean,
-      default: false,
-    },
-    floating: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  methods: {
-    getClasses: (variant, color, size, circle, floating) => {
-      let colorValue, sizeValue, circleValue, floatingValue;
-
-      if (variant === "gradient") {
-        colorValue = `bg-gradient-${color}`;
-      } else {
-        colorValue = `badge-${color}`;
-      }
-
-      sizeValue = size ? `badge-${size}` : null;
-
-      circleValue = circle ? "badge-circle" : null;
-
-      floatingValue = floating ? "badge-floating" : null;
-
-      return `${colorValue} ${sizeValue} ${circleValue} ${floatingValue}`;
-    },
-  },
-};
-</script>
+<template>
+  <span
+    class="badge"
+    :class="getClasses(variant, color, size, circle, floating)"
+  >
+    <slot />
+  </span>
+</template>
+
+<script>
+export default {
+  name: "VsudBadge",
+  props: {
+    size: {
+      type: String,
+      default: "md",
+    },
+    color: {
+      type: String,
+      default: "success",
+    },
+    variant: {
+      type: String,
+      default: "fill",
+    },
+    circle: {
+      type: Boolean,
+      default: false,
+    },
+    floating: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  methods: {
+    getClasses: (variant, color, size, circle, floating) => {
+      let colorValue, sizeValue, circleValue, floatingValue;
+
+      if (variant === "gradient") {
+        colorValue = `bg-gradient-${color}`;
+      } else {
+        colorValue = `badge-${color}`;
+      }
+
+      sizeValue = size ? `badge-${size}` : null;
+
+      circleValue = circle ? "badge-circle" : null;
+
+      floatingValue = floating ? "badge-floating" : null;
+
+      return `${colorValue} ${sizeValue} ${circleValue} ${floatingValue}`;
+    },
+  },
+};
+</script>
diff --git a/src/components/VsudButton.vue b/src/components/VsudButton.vue
index a295891..183e6f2 100644
--- a/src/components/VsudButton.vue
+++ b/src/components/VsudButton.vue
@@ -1,56 +1,59 @@
-/* eslint-disable prettier/prettier */
-<template>
-  <button class="btn mb-0" :class="getClasses(variant, color, size, fullWidth, active)">
-    <slot />
-  </button>
-</template>
-
-<script>
-export default {
-  name: "VsudButton",
-  props: {
-    color: {
-      type: String,
-      default: "info",
-    },
-    size: {
-      type: String,
-      default: "md",
-    },
-    variant: {
-      type: String,
-      default: "fill",
-    },
-    fullWidth: {
-      type: Boolean,
-      default: false,
-    },
-    active: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  methods: {
-    getClasses: (variant, color, size, fullWidth, active) => {
-      let colorValue, sizeValue, fullWidthValue, activeValue;
-
-      // Setting the button variant and color
-      if (variant === "gradient") {
-        colorValue = `bg-gradient-${color}`;
-      } else if (variant === "outline") {
-        colorValue = `btn-outline-${color}`;
-      } else {
-        colorValue = `btn-${color}`;
-      }
-
-      sizeValue = size ? `btn-${size}` : null;
-
-      fullWidthValue = fullWidth ? `w-100` : null;
-
-      activeValue = active ? `active` : null;
-
-      return `${colorValue} ${sizeValue} ${fullWidthValue} ${activeValue}`;
-    },
-  },
-};
-</script>
+/* eslint-disable prettier/prettier */
+<template>
+  <button
+    class="btn mb-0"
+    :class="getClasses(variant, color, size, fullWidth, active)"
+  >
+    <slot />
+  </button>
+</template>
+
+<script>
+export default {
+  name: "VsudButton",
+  props: {
+    color: {
+      type: String,
+      default: "info",
+    },
+    size: {
+      type: String,
+      default: "md",
+    },
+    variant: {
+      type: String,
+      default: "fill",
+    },
+    fullWidth: {
+      type: Boolean,
+      default: false,
+    },
+    active: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  methods: {
+    getClasses: (variant, color, size, fullWidth, active) => {
+      let colorValue, sizeValue, fullWidthValue, activeValue;
+
+      // Setting the button variant and color
+      if (variant === "gradient") {
+        colorValue = `bg-gradient-${color}`;
+      } else if (variant === "outline") {
+        colorValue = `btn-outline-${color}`;
+      } else {
+        colorValue = `btn-${color}`;
+      }
+
+      sizeValue = size ? `btn-${size}` : null;
+
+      fullWidthValue = fullWidth ? `w-100` : null;
+
+      activeValue = active ? `active` : null;
+
+      return `${colorValue} ${sizeValue} ${fullWidthValue} ${activeValue}`;
+    },
+  },
+};
+</script>
diff --git a/src/components/VsudCheckbox.vue b/src/components/VsudCheckbox.vue
index 33fb197..5a5036e 100644
--- a/src/components/VsudCheckbox.vue
+++ b/src/components/VsudCheckbox.vue
@@ -1,28 +1,34 @@
-<template>
-  <div class="form-check">
-    <input :id="id" class="form-check-input" type="checkbox" :name="name" :checked="checked" />
-    <label :for="id" class="custom-control-label">
-      <slot />
-    </label>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "VsudCheckbox",
-  props: {
-    name: {
-      type: String,
-      default: ""
-    },
-    id: {
-      type: String,
-      default: ""
-    },
-    checked: {
-      type: String,
-      default: ""
-    },
-  },
-};
-</script>
+<template>
+  <div class="form-check">
+    <input
+      :id="id"
+      class="form-check-input"
+      type="checkbox"
+      :name="name"
+      :checked="checked"
+    />
+    <label :for="id" class="custom-control-label">
+      <slot />
+    </label>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "VsudCheckbox",
+  props: {
+    name: {
+      type: String,
+      default: "",
+    },
+    id: {
+      type: String,
+      default: "",
+    },
+    checked: {
+      type: String,
+      default: "",
+    },
+  },
+};
+</script>
diff --git a/src/components/VsudInput.vue b/src/components/VsudInput.vue
index e77522e..8b479d6 100644
--- a/src/components/VsudInput.vue
+++ b/src/components/VsudInput.vue
@@ -1,80 +1,80 @@
-<template>
-  <div class="form-group">
-    <div :class="hasIcon(icon)">
-      <span v-if="iconDir === 'left'" class="input-group-text">
-        <i :class="getIcon(icon)"></i>
-      </span>
-      <input
-        :id="id"
-        :type="type"
-        class="form-control"
-        :class="getClasses(size, valid)"
-        :name="name"
-        :value="value"
-        :placeholder="placeholder"
-        :isRequired="isRequired"
-      />
-      <span v-if="iconDir === 'right'" class="input-group-text">
-        <i :class="getIcon(icon)"></i>
-      </span>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "VsudInput",
-  props: {
-    size: {
-      type: String,
-      default: "default",
-    },
-    valid: {
-      type: Boolean,
-      default: false,
-    },
-    icon: {
-      type: String,
-      default: ""
-    },
-    iconDir: {
-      type: String,
-      default: ""
-    },
-    name: {
-      type: String,
-      default: ""
-    },
-    id: {
-      type: String,
-      default: ""
-    },
-    value: {
-      type: String,
-      default: ""
-    },
-    placeholder: {
-      type: String,
-      default: ""
-    },
-    type: {
-      type: String,
-      default: ""
-    },
-    isRequired: Boolean,
-  },
-  methods: {
-    getClasses: (size, valid) => {
-      let sizeValue, isValidValue;
-
-      sizeValue = size ? `form-control-${size}` : null;
-
-      isValidValue = valid ? `${valid}` : "invalid";
-
-      return `${sizeValue} ${isValidValue}`;
-    },
-    getIcon: (icon) => (icon ? icon : null),
-    hasIcon: (icon) => (icon ? "input-group" : null),
-  },
-};
-</script>
+<template>
+  <div class="form-group">
+    <div :class="hasIcon(icon)">
+      <span v-if="iconDir === 'left'" class="input-group-text">
+        <i :class="getIcon(icon)"></i>
+      </span>
+      <input
+        :id="id"
+        :type="type"
+        class="form-control"
+        :class="getClasses(size, valid)"
+        :name="name"
+        :value="value"
+        :placeholder="placeholder"
+        :isRequired="isRequired"
+      />
+      <span v-if="iconDir === 'right'" class="input-group-text">
+        <i :class="getIcon(icon)"></i>
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "VsudInput",
+  props: {
+    size: {
+      type: String,
+      default: "default",
+    },
+    valid: {
+      type: Boolean,
+      default: false,
+    },
+    icon: {
+      type: String,
+      default: "",
+    },
+    iconDir: {
+      type: String,
+      default: "",
+    },
+    name: {
+      type: String,
+      default: "",
+    },
+    id: {
+      type: String,
+      default: "",
+    },
+    value: {
+      type: String,
+      default: "",
+    },
+    placeholder: {
+      type: String,
+      default: "",
+    },
+    type: {
+      type: String,
+      default: "",
+    },
+    isRequired: Boolean,
+  },
+  methods: {
+    getClasses: (size, valid) => {
+      let sizeValue, isValidValue;
+
+      sizeValue = size ? `form-control-${size}` : null;
+
+      isValidValue = valid ? `${valid}` : "invalid";
+
+      return `${sizeValue} ${isValidValue}`;
+    },
+    getIcon: (icon) => (icon ? icon : null),
+    hasIcon: (icon) => (icon ? "input-group" : null),
+  },
+};
+</script>
diff --git a/src/components/VsudPagination.vue b/src/components/VsudPagination.vue
index a46c465..72bbc4c 100644
--- a/src/components/VsudPagination.vue
+++ b/src/components/VsudPagination.vue
@@ -1,31 +1,31 @@
-<template>
-  <ul class="pagination" :class="getClasses(color, size)">
-    <slot />
-  </ul>
-</template>
-
-<script>
-export default {
-  name: "VsudPagination",
-  props: {
-    color: {
-      type: String,
-      default: ""
-    },
-    size: {
-      type: String,
-      default: ""
-    },
-  },
-  methods: {
-    getClasses: (color, size) => {
-      let colorValue, sizeValue;
-
-      colorValue = color ? `pagination-${color}` : null;
-      sizeValue = size ? `pagination-${size}` : null;
-
-      return `${colorValue} ${sizeValue}`;
-    },
-  },
-};
-</script>
+<template>
+  <ul class="pagination" :class="getClasses(color, size)">
+    <slot />
+  </ul>
+</template>
+
+<script>
+export default {
+  name: "VsudPagination",
+  props: {
+    color: {
+      type: String,
+      default: "",
+    },
+    size: {
+      type: String,
+      default: "",
+    },
+  },
+  methods: {
+    getClasses: (color, size) => {
+      let colorValue, sizeValue;
+
+      colorValue = color ? `pagination-${color}` : null;
+      sizeValue = size ? `pagination-${size}` : null;
+
+      return `${colorValue} ${sizeValue}`;
+    },
+  },
+};
+</script>
diff --git a/src/components/VsudPaginationItem.vue b/src/components/VsudPaginationItem.vue
index 94cd16d..b88f3ee 100644
--- a/src/components/VsudPaginationItem.vue
+++ b/src/components/VsudPaginationItem.vue
@@ -1,47 +1,47 @@
-<template>
-  <li class="page-item" :class="getClasses(active, disabled)">
-    <a class="page-link" href="javascript:;">
-      {{ prev || next ? null : label }}
-      <i v-if="prev" class="fa fa-angle-left"></i>
-      <i v-if="next" class="fa fa-angle-right"></i>
-    </a>
-  </li>
-</template>
-
-<script>
-export default {
-  name: "VsudPaginationItem",
-  props: {
-    label: {
-      type: String,
-      default: ""
-    },
-    active: {
-      type: Boolean,
-      default: false,
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    prev: {
-      type: Boolean,
-      default: false,
-    },
-    next: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  methods: {
-    getClasses: (active, disabled) => {
-      let activeValue, disabledValue;
-
-      activeValue = active ? "active" : null;
-      disabledValue = disabled ? "disabled" : null;
-
-      return `${activeValue} ${disabledValue}`;
-    },
-  },
-};
-</script>
+<template>
+  <li class="page-item" :class="getClasses(active, disabled)">
+    <a class="page-link" href="javascript:;">
+      {{ prev || next ? null : label }}
+      <i v-if="prev" class="fa fa-angle-left"></i>
+      <i v-if="next" class="fa fa-angle-right"></i>
+    </a>
+  </li>
+</template>
+
+<script>
+export default {
+  name: "VsudPaginationItem",
+  props: {
+    label: {
+      type: String,
+      default: "",
+    },
+    active: {
+      type: Boolean,
+      default: false,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    prev: {
+      type: Boolean,
+      default: false,
+    },
+    next: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  methods: {
+    getClasses: (active, disabled) => {
+      let activeValue, disabledValue;
+
+      activeValue = active ? "active" : null;
+      disabledValue = disabled ? "disabled" : null;
+
+      return `${activeValue} ${disabledValue}`;
+    },
+  },
+};
+</script>
diff --git a/src/components/VsudProgress.vue b/src/components/VsudProgress.vue
index 821045f..871f9e8 100644
--- a/src/components/VsudProgress.vue
+++ b/src/components/VsudProgress.vue
@@ -1,42 +1,42 @@
-<template>
-  <div class="progress">
-    <div
-      class="progress-bar"
-      :class="getClasses(color, variant)"
-      :style="{ width: percentage + '%' }"
-    ></div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "VsudProgress",
-  props: {
-    color: {
-      type: String,
-      default: "primary",
-    },
-    variant: {
-      type: String,
-      default: "fill",
-    },
-    percentage: {
-      type: String,
-      default: ""
-    },
-  },
-  methods: {
-    getClasses: (color, variant) => {
-      let colorValue;
-
-      if (variant === "gradient") {
-        colorValue = `bg-gradient-${color}`;
-      } else {
-        colorValue = `bg-${color}`;
-      }
-
-      return `${colorValue}`;
-    },
-  },
-};
-</script>
\ No newline at end of file
+<template>
+  <div class="progress">
+    <div
+      class="progress-bar"
+      :class="getClasses(color, variant)"
+      :style="{ width: percentage + '%' }"
+    ></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "VsudProgress",
+  props: {
+    color: {
+      type: String,
+      default: "primary",
+    },
+    variant: {
+      type: String,
+      default: "fill",
+    },
+    percentage: {
+      type: String,
+      default: "",
+    },
+  },
+  methods: {
+    getClasses: (color, variant) => {
+      let colorValue;
+
+      if (variant === "gradient") {
+        colorValue = `bg-gradient-${color}`;
+      } else {
+        colorValue = `bg-${color}`;
+      }
+
+      return `${colorValue}`;
+    },
+  },
+};
+</script>
diff --git a/src/components/VsudRadio.vue b/src/components/VsudRadio.vue
index 7b0a80e..4d355c8 100644
--- a/src/components/VsudRadio.vue
+++ b/src/components/VsudRadio.vue
@@ -1,28 +1,34 @@
-<template>
-  <div class="form-check">
-    <input :id="id" class="form-check-input" type="radio" :name="name" :checked="checked" />
-    <label class="custom-control-label" :for="id">
-      <slot />
-    </label>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "VsudRadio",
-  props: {
-    name: {
-      type: String,
-      default: ""
-    },
-    id: {
-      type: String,
-      default: ""
-    },
-    checked: {
-      type: String,
-      default: ""
-    },
-  },
-};
-</script>
+<template>
+  <div class="form-check">
+    <input
+      :id="id"
+      class="form-check-input"
+      type="radio"
+      :name="name"
+      :checked="checked"
+    />
+    <label class="custom-control-label" :for="id">
+      <slot />
+    </label>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "VsudRadio",
+  props: {
+    name: {
+      type: String,
+      default: "",
+    },
+    id: {
+      type: String,
+      default: "",
+    },
+    checked: {
+      type: String,
+      default: "",
+    },
+  },
+};
+</script>
diff --git a/src/components/VsudSwitch.vue b/src/components/VsudSwitch.vue
index 27edd0e..5663969 100644
--- a/src/components/VsudSwitch.vue
+++ b/src/components/VsudSwitch.vue
@@ -1,43 +1,43 @@
-<template>
-  <div class="form-check form-switch">
-    <input
-      :id="id"
-      class="form-check-input"
-      :class="inputClass"
-      type="checkbox"
-      :name="name"
-      :checked="checked"
-    />
-    <label class="form-check-label" :class="labelClass" :for="id">
-      <slot />
-    </label>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "VsudSwitch",
-  props: {
-    name: {
-      type: String,
-      default: ""
-    },
-    id: {
-      type: String,
-      default: ""
-    },
-    checked: {
-      type: String,
-      default: ""
-    },
-    labelClass: {
-      type: String,
-      default: ""
-    },
-    inputClass: {
-      type: String,
-      default: ""
-    },
-  },
-};
-</script>
+<template>
+  <div class="form-check form-switch">
+    <input
+      :id="id"
+      class="form-check-input"
+      :class="inputClass"
+      type="checkbox"
+      :name="name"
+      :checked="checked"
+    />
+    <label class="form-check-label" :class="labelClass" :for="id">
+      <slot />
+    </label>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "VsudSwitch",
+  props: {
+    name: {
+      type: String,
+      default: "",
+    },
+    id: {
+      type: String,
+      default: "",
+    },
+    checked: {
+      type: String,
+      default: "",
+    },
+    labelClass: {
+      type: String,
+      default: "",
+    },
+    inputClass: {
+      type: String,
+      default: "",
+    },
+  },
+};
+</script>
diff --git a/src/components/VsudTextarea.vue b/src/components/VsudTextarea.vue
index c22d7a0..52f52f2 100644
--- a/src/components/VsudTextarea.vue
+++ b/src/components/VsudTextarea.vue
@@ -1,29 +1,29 @@
-<template>
-  <div class="form-group">
-    <label :for="exampleFormControlTextarea1">
-      <slot />
-    </label>
-    <textarea
-      :id="exampleFormControlTextarea1"
-      class="form-control"
-      rows="5"
-      :placeholder="placeholder"
-    ></textarea>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "VsudTextarea",
-  props: {
-    id: {
-      type: String,
-      default: ""
-    },
-    placeholder: {
-      type: String,
-      default: ""
-    },
-  },
-};
-</script>
\ No newline at end of file
+<template>
+  <div class="form-group">
+    <label :for="exampleFormControlTextarea1">
+      <slot />
+    </label>
+    <textarea
+      :id="exampleFormControlTextarea1"
+      class="form-control"
+      rows="5"
+      :placeholder="placeholder"
+    ></textarea>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "VsudTextarea",
+  props: {
+    id: {
+      type: String,
+      default: "",
+    },
+    placeholder: {
+      type: String,
+      default: "",
+    },
+  },
+};
+</script>
diff --git a/src/examples/Breadcrumbs.vue b/src/examples/Breadcrumbs.vue
index 5a4db27..681ad30 100644
--- a/src/examples/Breadcrumbs.vue
+++ b/src/examples/Breadcrumbs.vue
@@ -1,42 +1,46 @@
-<template>
-  <nav aria-label="breadcrumb">
-    <ol
-      class="px-0 pt-1 pb-0 mb-0 bg-transparent breadcrumb"
-      :class="$store.state.isRTL ? '' : ' me-sm-6'"
-    >
-      <li class="text-sm breadcrumb-item" :class="textWhite">
-        <a
-          v-if="$store.state.isRTL"
-          :class="textWhite"
-          class="opacity-5 ps-2"
-          href="#"
-        >لوحات القيادة</a>
-        <a v-else :class="textWhite" class="opacity-8" href="#">Pages</a>
-      </li>
-      <li
-        class="text-sm breadcrumb-item active"
-        :class="textWhite ? 'text-white' : 'text-dark'"
-        aria-current="page"
-      >{{ currentPage }}</li>
-    </ol>
-    <h6 class="mb-0 font-weight-bolder" :class="textWhite ? 'text-white' : ''">{{ currentPage }}</h6>
-  </nav>
-</template>
-
-<script>
-export default {
-  name: "BreadcrumbsComponent",
-  props: {
-    currentPage: {
-      required: true,
-      type: String,
-      default: ""
-    },
-    textWhite: {
-      type: String,
-      default: ""
-    },
-  },
-
-};
-</script>
+<template>
+  <nav aria-label="breadcrumb">
+    <ol
+      class="px-0 pt-1 pb-0 mb-0 bg-transparent breadcrumb"
+      :class="$store.state.isRTL ? '' : ' me-sm-6'"
+    >
+      <li class="text-sm breadcrumb-item" :class="textWhite">
+        <a
+          v-if="$store.state.isRTL"
+          :class="textWhite"
+          class="opacity-5 ps-2"
+          href="#"
+          >لوحات القيادة</a
+        >
+        <a v-else :class="textWhite" class="opacity-8" href="#">Pages</a>
+      </li>
+      <li
+        class="text-sm breadcrumb-item active"
+        :class="textWhite ? 'text-white' : 'text-dark'"
+        aria-current="page"
+      >
+        {{ currentPage }}
+      </li>
+    </ol>
+    <h6 class="mb-0 font-weight-bolder" :class="textWhite ? 'text-white' : ''">
+      {{ currentPage }}
+    </h6>
+  </nav>
+</template>
+
+<script>
+export default {
+  name: "BreadcrumbsComponent",
+  props: {
+    currentPage: {
+      required: true,
+      type: String,
+      default: "",
+    },
+    textWhite: {
+      type: String,
+      default: "",
+    },
+  },
+};
+</script>
diff --git a/src/examples/Cards/Card.vue b/src/examples/Cards/Card.vue
index 27e1e06..6356072 100644
--- a/src/examples/Cards/Card.vue
+++ b/src/examples/Cards/Card.vue
@@ -1,75 +1,88 @@
-<template>
-  <div class="mb-4 card">
-    <div class="p-3 card-body">
-      <div class="d-flex" :class="directionReverse ? reverseDirection : ''">
-        <div>
-          <div class="text-center shadow icon icon-shape border-radius-md" :class="iconBackground">
-            <i class="text-lg opacity-10" :class="iconClass" aria-hidden="true"></i>
-          </div>
-        </div>
-        <div :class="contentClass">
-          <div class="numbers">
-            <p class="mb-0 text-sm text-capitalize font-weight-bold" :class="titleColor">{{ title }}</p>
-            <h5 class="mb-0 font-weight-bolder" :class="valueColor">
-              {{ value }}
-              <span
-                class="text-sm font-weight-bolder"
-                :class="percentageColor"
-              >{{ percentage }}</span>
-            </h5>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "CardComponent",
-  props: {
-    directionReverse: Boolean,
-    title: {
-      type: String,
-      required: true,
-    },
-    titleColor: {
-      type: String,
-      default: ""
-    },
-    value: {
-      type: String,
-      default: ""
-    },
-    valueColor: {
-      type: String,
-      default: ""
-    },
-    percentage: {
-      type: String,
-      default: ""
-    },
-    iconClass: {
-      type: String,
-      required: true,
-    },
-    percentageColor: {
-      type: String,
-      default: "text-success",
-    },
-    iconBackground: {
-      type: String,
-      default: "bg-white",
-    },
-    contentClass: {
-      type: String,
-      default: ""
-    },
-  },
-  data() {
-    return {
-      reverseDirection: "flex-row-reverse justify-content-between",
-    };
-  },
-};
-</script>
+<template>
+  <div class="mb-4 card">
+    <div class="p-3 card-body">
+      <div class="d-flex" :class="directionReverse ? reverseDirection : ''">
+        <div>
+          <div
+            class="text-center shadow icon icon-shape border-radius-md"
+            :class="iconBackground"
+          >
+            <i
+              class="text-lg opacity-10"
+              :class="iconClass"
+              aria-hidden="true"
+            ></i>
+          </div>
+        </div>
+        <div :class="contentClass">
+          <div class="numbers">
+            <p
+              class="mb-0 text-sm text-capitalize font-weight-bold"
+              :class="titleColor"
+            >
+              {{ title }}
+            </p>
+            <h5 class="mb-0 font-weight-bolder" :class="valueColor">
+              {{ value }}
+              <span
+                class="text-sm font-weight-bolder"
+                :class="percentageColor"
+                >{{ percentage }}</span
+              >
+            </h5>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "CardComponent",
+  props: {
+    directionReverse: Boolean,
+    title: {
+      type: String,
+      required: true,
+    },
+    titleColor: {
+      type: String,
+      default: "",
+    },
+    value: {
+      type: String,
+      default: "",
+    },
+    valueColor: {
+      type: String,
+      default: "",
+    },
+    percentage: {
+      type: String,
+      default: "",
+    },
+    iconClass: {
+      type: String,
+      required: true,
+    },
+    percentageColor: {
+      type: String,
+      default: "text-success",
+    },
+    iconBackground: {
+      type: String,
+      default: "bg-white",
+    },
+    contentClass: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {
+      reverseDirection: "flex-row-reverse justify-content-between",
+    };
+  },
+};
+</script>
diff --git a/src/examples/Cards/DefaultInfoCard.vue b/src/examples/Cards/DefaultInfoCard.vue
index c202b42..219680b 100644
--- a/src/examples/Cards/DefaultInfoCard.vue
+++ b/src/examples/Cards/DefaultInfoCard.vue
@@ -1,46 +1,46 @@
-<template>
-  <div class="card">
-    <div class="p-3 mx-4 text-center card-header">
-      <div
-        :class="iconBg"
-        class="icon icon-shape icon-lg bg-gradient-success shadow text-center border-radius-lg"
-      >
-        <i class="opacity-10" :class="classIcon" aria-hidden="true"></i>
-      </div>
-    </div>
-    <div class="p-3 pt-0 text-center card-body">
-      <h6 class="mb-0 text-center">{{ title }}</h6>
-      <span class="text-xs">{{ desc }}</span>
-      <hr class="my-3 horizontal dark" />
-      <h5 class="mb-0">{{ price }}</h5>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "DefaultInfoCard",
-  props: {
-    iconBg: {
-      type: String,
-      default: "bg-white",
-    },
-    classIcon: {
-      type: String,
-      required: true,
-    },
-    title: {
-      type: String,
-      default: ""
-    },
-    desc: {
-      type: String,
-      default: ""
-    },
-    price: {
-      type: String,
-      default: ""
-    },
-  },
-};
-</script>
\ No newline at end of file
+<template>
+  <div class="card">
+    <div class="p-3 mx-4 text-center card-header">
+      <div
+        :class="iconBg"
+        class="icon icon-shape icon-lg bg-gradient-success shadow text-center border-radius-lg"
+      >
+        <i class="opacity-10" :class="classIcon" aria-hidden="true"></i>
+      </div>
+    </div>
+    <div class="p-3 pt-0 text-center card-body">
+      <h6 class="mb-0 text-center">{{ title }}</h6>
+      <span class="text-xs">{{ desc }}</span>
+      <hr class="my-3 horizontal dark" />
+      <h5 class="mb-0">{{ price }}</h5>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "DefaultInfoCard",
+  props: {
+    iconBg: {
+      type: String,
+      default: "bg-white",
+    },
+    classIcon: {
+      type: String,
+      required: true,
+    },
+    title: {
+      type: String,
+      default: "",
+    },
+    desc: {
+      type: String,
+      default: "",
+    },
+    price: {
+      type: String,
+      default: "",
+    },
+  },
+};
+</script>
diff --git a/src/examples/Cards/MasterCard.vue b/src/examples/Cards/MasterCard.vue
index 6e1fd4a..2a72529 100644
--- a/src/examples/Cards/MasterCard.vue
+++ b/src/examples/Cards/MasterCard.vue
@@ -1,76 +1,75 @@
-<template>
-  <div class="card bg-transparent shadow-xl">
-    <div
-      class="overflow-hidden position-relative border-radius-xl"
-      :style="{
-        backgroundImage:
-          `url(${bgImg})`,
-      }"
-    >
-      <span class="mask bg-gradient-dark"></span>
-      <div class="card-body position-relative z-index-1 p-3">
-        <i class="fas fa-wifi text-white p-2" aria-hidden="true"></i>
-        <h5 class="text-white mt-4 mb-5 pb-2">
-          4562&nbsp;&nbsp;&nbsp;1122&nbsp;&nbsp;&nbsp;4594&nbsp;&nbsp;&nbsp;7852
-        </h5>
-        <div class="d-flex">
-          <div class="d-flex">
-            <div :class="$store.state.isRTL ? 'ms-4' : 'me-4'">
-              <p class="text-white text-sm opacity-8 mb-0">
-                {{ cardHolderText }}
-              </p>
-              <h6 class="text-white mb-0">{{ name }}</h6>
-            </div>
-            <div>
-              <p class="text-white text-sm opacity-8 mb-0">
-                {{ cardExpirationText }}
-              </p>
-              <h6 class="text-white mb-0">11/22</h6>
-            </div>
-          </div>
-          <div
-            class="w-20 d-flex align-items-end justify-content-end"
-            :class="$store.state.isRTL ? 'me-auto' : 'ms-auto'"
-          >
-            <vsud-avatar class="w-60 mt-2" :img="img1" alt="logo" />
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import VsudAvatar from "@/components/VsudAvatar.vue";
-import img from "../../assets/img/curved-images/curved14.jpg";
-import img1 from "../../assets/img/logos/mastercard.png";
-import bgImg from '@/assets/img/curved-images/curved14.jpg';
-
-export default {
-  name: "MasterCard",
-  components: {
-    VsudAvatar,
-  },
-  props: {
-    cardHolderText: {
-      type: String,
-      default: "Card Holder",
-    },
-    name: {
-      type: String,
-      default: "Jack Peterson",
-    },
-    cardExpirationText: {
-      type: String,
-      default: "Expires",
-    },
-  },
-  data() {
-    return {
-      img,
-      img1,
-      bgImg
-    };
-  },
-};
-</script>
+<template>
+  <div class="card bg-transparent shadow-xl">
+    <div
+      class="overflow-hidden position-relative border-radius-xl"
+      :style="{
+        backgroundImage: `url(${bgImg})`,
+      }"
+    >
+      <span class="mask bg-gradient-dark"></span>
+      <div class="card-body position-relative z-index-1 p-3">
+        <i class="fas fa-wifi text-white p-2" aria-hidden="true"></i>
+        <h5 class="text-white mt-4 mb-5 pb-2">
+          4562&nbsp;&nbsp;&nbsp;1122&nbsp;&nbsp;&nbsp;4594&nbsp;&nbsp;&nbsp;7852
+        </h5>
+        <div class="d-flex">
+          <div class="d-flex">
+            <div :class="$store.state.isRTL ? 'ms-4' : 'me-4'">
+              <p class="text-white text-sm opacity-8 mb-0">
+                {{ cardHolderText }}
+              </p>
+              <h6 class="text-white mb-0">{{ name }}</h6>
+            </div>
+            <div>
+              <p class="text-white text-sm opacity-8 mb-0">
+                {{ cardExpirationText }}
+              </p>
+              <h6 class="text-white mb-0">11/22</h6>
+            </div>
+          </div>
+          <div
+            class="w-20 d-flex align-items-end justify-content-end"
+            :class="$store.state.isRTL ? 'me-auto' : 'ms-auto'"
+          >
+            <vsud-avatar class="w-60 mt-2" :img="img1" alt="logo" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import VsudAvatar from "@/components/VsudAvatar.vue";
+import img from "../../assets/img/curved-images/curved14.jpg";
+import img1 from "../../assets/img/logos/mastercard.png";
+import bgImg from "@/assets/img/curved-images/curved14.jpg";
+
+export default {
+  name: "MasterCard",
+  components: {
+    VsudAvatar,
+  },
+  props: {
+    cardHolderText: {
+      type: String,
+      default: "Card Holder",
+    },
+    name: {
+      type: String,
+      default: "Jack Peterson",
+    },
+    cardExpirationText: {
+      type: String,
+      default: "Expires",
+    },
+  },
+  data() {
+    return {
+      img,
+      img1,
+      bgImg,
+    };
+  },
+};
+</script>
diff --git a/src/examples/Charts/ActiveUsersChart.vue b/src/examples/Charts/ActiveUsersChart.vue
index 0994ec4..b4e267d 100644
--- a/src/examples/Charts/ActiveUsersChart.vue
+++ b/src/examples/Charts/ActiveUsersChart.vue
@@ -1,304 +1,304 @@
-<template>
-  <div class="py-3 mb-3 bg-gradient-dark border-radius-lg pe-1">
-    <div class="chart">
-      <canvas id="chart-bars" class="chart-canvas" height="170"></canvas>
-    </div>
-  </div>
-  <h6 class="mt-4 mb-0 ms-2">Active Users</h6>
-  <p class="text-sm ms-2">
-    (<span class="font-weight-bolder">+23%</span>) than last week
-  </p>
-  <div class="container border-radius-lg">
-    <div class="row">
-      <div class="py-3 col-3 ps-0">
-        <div class="mb-2 d-flex">
-          <div
-            class="text-center shadow icon icon-shape icon-xxs border-radius-sm bg-gradient-primary me-2 d-flex align-items-center justify-content-center"
-          >
-            <svg
-              width="10px"
-              height="10px"
-              viewBox="0 0 40 44"
-              version="1.1"
-              xmlns="http://www.w3.org/2000/svg"
-              xmlns:xlink="http://www.w3.org/1999/xlink"
-            >
-              <title>document</title>
-              <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-                <g
-                  transform="translate(-1870.000000, -591.000000)"
-                  fill="#FFFFFF"
-                  fill-rule="nonzero"
-                >
-                  <g transform="translate(1716.000000, 291.000000)">
-                    <g transform="translate(154.000000, 300.000000)">
-                      <path
-                        class="color-background"
-                        d="M40,40 L36.3636364,40 L36.3636364,3.63636364 L5.45454545,3.63636364 L5.45454545,0 L38.1818182,0 C39.1854545,0 40,0.814545455 40,1.81818182 L40,40 Z"
-                        opacity="0.603585379"
-                      ></path>
-                      <path
-                        class="color-background"
-                        d="M30.9090909,7.27272727 L1.81818182,7.27272727 C0.814545455,7.27272727 0,8.08727273 0,9.09090909 L0,41.8181818 C0,42.8218182 0.814545455,43.6363636 1.81818182,43.6363636 L30.9090909,43.6363636 C31.9127273,43.6363636 32.7272727,42.8218182 32.7272727,41.8181818 L32.7272727,9.09090909 C32.7272727,8.08727273 31.9127273,7.27272727 30.9090909,7.27272727 Z M18.1818182,34.5454545 L7.27272727,34.5454545 L7.27272727,30.9090909 L18.1818182,30.9090909 L18.1818182,34.5454545 Z M25.4545455,27.2727273 L7.27272727,27.2727273 L7.27272727,23.6363636 L25.4545455,23.6363636 L25.4545455,27.2727273 Z M25.4545455,20 L7.27272727,20 L7.27272727,16.3636364 L25.4545455,16.3636364 L25.4545455,20 Z"
-                      ></path>
-                    </g>
-                  </g>
-                </g>
-              </g>
-            </svg>
-          </div>
-          <p class="mt-1 mb-0 text-xs font-weight-bold">Users</p>
-        </div>
-        <h4 class="font-weight-bolder">36K</h4>
-        <div class="progress w-75">
-          <div
-            class="progress-bar bg-dark w-60"
-            role="progressbar"
-            aria-valuenow="60"
-            aria-valuemin="0"
-            aria-valuemax="100"
-          ></div>
-        </div>
-      </div>
-      <div class="py-3 col-3 ps-0">
-        <div class="mb-2 d-flex">
-          <div
-            class="text-center shadow icon icon-shape icon-xxs border-radius-sm bg-gradient-info me-2 d-flex align-items-center justify-content-center"
-          >
-            <svg
-              width="10px"
-              height="10px"
-              viewBox="0 0 40 40"
-              version="1.1"
-              xmlns="http://www.w3.org/2000/svg"
-              xmlns:xlink="http://www.w3.org/1999/xlink"
-            >
-              <title>spaceship</title>
-              <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-                <g
-                  transform="translate(-1720.000000, -592.000000)"
-                  fill="#FFFFFF"
-                  fill-rule="nonzero"
-                >
-                  <g transform="translate(1716.000000, 291.000000)">
-                    <g transform="translate(4.000000, 301.000000)">
-                      <path
-                        class="color-background"
-                        d="M39.3,0.706666667 C38.9660984,0.370464027 38.5048767,0.192278529 38.0316667,0.216666667 C14.6516667,1.43666667 6.015,22.2633333 5.93166667,22.4733333 C5.68236407,23.0926189 5.82664679,23.8009159 6.29833333,24.2733333 L15.7266667,33.7016667 C16.2013871,34.1756798 16.9140329,34.3188658 17.535,34.065 C17.7433333,33.98 38.4583333,25.2466667 39.7816667,1.97666667 C39.8087196,1.50414529 39.6335979,1.04240574 39.3,0.706666667 Z M25.69,19.0233333 C24.7367525,19.9768687 23.3029475,20.2622391 22.0572426,19.7463614 C20.8115377,19.2304837 19.9992882,18.0149658 19.9992882,16.6666667 C19.9992882,15.3183676 20.8115377,14.1028496 22.0572426,13.5869719 C23.3029475,13.0710943 24.7367525,13.3564646 25.69,14.31 C26.9912731,15.6116662 26.9912731,17.7216672 25.69,19.0233333 L25.69,19.0233333 Z"
-                      ></path>
-                      <path
-                        class="color-background"
-                        d="M1.855,31.4066667 C3.05106558,30.2024182 4.79973884,29.7296005 6.43969145,30.1670277 C8.07964407,30.6044549 9.36054508,31.8853559 9.7979723,33.5253085 C10.2353995,35.1652612 9.76258177,36.9139344 8.55833333,38.11 C6.70666667,39.9616667 0,40 0,40 C0,40 0,33.2566667 1.855,31.4066667 Z"
-                      ></path>
-                      <path
-                        class="color-background"
-                        d="M17.2616667,3.90166667 C12.4943643,3.07192755 7.62174065,4.61673894 4.20333333,8.04166667 C3.31200265,8.94126033 2.53706177,9.94913142 1.89666667,11.0416667 C1.5109569,11.6966059 1.61721591,12.5295394 2.155,13.0666667 L5.47,16.3833333 C8.55036617,11.4946947 12.5559074,7.25476565 17.2616667,3.90166667 L17.2616667,3.90166667 Z"
-                        opacity="0.598539807"
-                      ></path>
-                      <path
-                        class="color-background"
-                        d="M36.0983333,22.7383333 C36.9280725,27.5056357 35.3832611,32.3782594 31.9583333,35.7966667 C31.0587397,36.6879974 30.0508686,37.4629382 28.9583333,38.1033333 C28.3033941,38.4890431 27.4704606,38.3827841 26.9333333,37.845 L23.6166667,34.53 C28.5053053,31.4496338 32.7452344,27.4440926 36.0983333,22.7383333 L36.0983333,22.7383333 Z"
-                        opacity="0.598539807"
-                      ></path>
-                    </g>
-                  </g>
-                </g>
-              </g>
-            </svg>
-          </div>
-          <p class="mt-1 mb-0 text-xs font-weight-bold">Clicks</p>
-        </div>
-        <h4 class="font-weight-bolder">2m</h4>
-        <div class="progress w-75">
-          <div
-            class="progress-bar bg-dark w-90"
-            role="progressbar"
-            aria-valuenow="90"
-            aria-valuemin="0"
-            aria-valuemax="100"
-          ></div>
-        </div>
-      </div>
-      <div class="py-3 col-3 ps-0">
-        <div class="mb-2 d-flex">
-          <div
-            class="text-center shadow icon icon-shape icon-xxs border-radius-sm bg-gradient-warning me-2 d-flex align-items-center justify-content-center"
-          >
-            <svg
-              width="10px"
-              height="10px"
-              viewBox="0 0 43 36"
-              version="1.1"
-              xmlns="http://www.w3.org/2000/svg"
-              xmlns:xlink="http://www.w3.org/1999/xlink"
-            >
-              <title>credit-card</title>
-              <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-                <g
-                  transform="translate(-2169.000000, -745.000000)"
-                  fill="#FFFFFF"
-                  fill-rule="nonzero"
-                >
-                  <g transform="translate(1716.000000, 291.000000)">
-                    <g transform="translate(453.000000, 454.000000)">
-                      <path
-                        class="color-background"
-                        d="M43,10.7482083 L43,3.58333333 C43,1.60354167 41.3964583,0 39.4166667,0 L3.58333333,0 C1.60354167,0 0,1.60354167 0,3.58333333 L0,10.7482083 L43,10.7482083 Z"
-                        opacity="0.593633743"
-                      ></path>
-                      <path
-                        class="color-background"
-                        d="M0,16.125 L0,32.25 C0,34.2297917 1.60354167,35.8333333 3.58333333,35.8333333 L39.4166667,35.8333333 C41.3964583,35.8333333 43,34.2297917 43,32.25 L43,16.125 L0,16.125 Z M19.7083333,26.875 L7.16666667,26.875 L7.16666667,23.2916667 L19.7083333,23.2916667 L19.7083333,26.875 Z M35.8333333,26.875 L28.6666667,26.875 L28.6666667,23.2916667 L35.8333333,23.2916667 L35.8333333,26.875 Z"
-                      ></path>
-                    </g>
-                  </g>
-                </g>
-              </g>
-            </svg>
-          </div>
-          <p class="mt-1 mb-0 text-xs font-weight-bold">Sales</p>
-        </div>
-        <h4 class="font-weight-bolder">435$</h4>
-        <div class="progress w-75">
-          <div
-            class="progress-bar bg-dark w-30"
-            role="progressbar"
-            aria-valuenow="30"
-            aria-valuemin="0"
-            aria-valuemax="100"
-          ></div>
-        </div>
-      </div>
-      <div class="py-3 col-3 ps-0">
-        <div class="mb-2 d-flex">
-          <div
-            class="text-center shadow icon icon-shape icon-xxs border-radius-sm bg-gradient-danger me-2 d-flex align-items-center justify-content-center"
-          >
-            <svg
-              width="10px"
-              height="10px"
-              viewBox="0 0 40 40"
-              version="1.1"
-              xmlns="http://www.w3.org/2000/svg"
-              xmlns:xlink="http://www.w3.org/1999/xlink"
-            >
-              <title>settings</title>
-              <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-                <g
-                  transform="translate(-2020.000000, -442.000000)"
-                  fill="#FFFFFF"
-                  fill-rule="nonzero"
-                >
-                  <g transform="translate(1716.000000, 291.000000)">
-                    <g transform="translate(304.000000, 151.000000)">
-                      <polygon
-                        class="color-background"
-                        opacity="0.596981957"
-                        points="18.0883333 15.7316667 11.1783333 8.82166667 13.3333333 6.66666667 6.66666667 0 0 6.66666667 6.66666667 13.3333333 8.82166667 11.1783333 15.315 17.6716667"
-                      ></polygon>
-                      <path
-                        class="color-background"
-                        d="M31.5666667,23.2333333 C31.0516667,23.2933333 30.53,23.3333333 30,23.3333333 C29.4916667,23.3333333 28.9866667,23.3033333 28.48,23.245 L22.4116667,30.7433333 L29.9416667,38.2733333 C32.2433333,40.575 35.9733333,40.575 38.275,38.2733333 L38.275,38.2733333 C40.5766667,35.9716667 40.5766667,32.2416667 38.275,29.94 L31.5666667,23.2333333 Z"
-                        opacity="0.596981957"
-                      ></path>
-                      <path
-                        class="color-background"
-                        d="M33.785,11.285 L28.715,6.215 L34.0616667,0.868333333 C32.82,0.315 31.4483333,0 30,0 C24.4766667,0 20,4.47666667 20,10 C20,10.99 20.1483333,11.9433333 20.4166667,12.8466667 L2.435,27.3966667 C0.95,28.7083333 0.0633333333,30.595 0.00333333333,32.5733333 C-0.0583333333,34.5533333 0.71,36.4916667 2.11,37.89 C3.47,39.2516667 5.27833333,40 7.20166667,40 C9.26666667,40 11.2366667,39.1133333 12.6033333,37.565 L27.1533333,19.5833333 C28.0566667,19.8516667 29.01,20 30,20 C35.5233333,20 40,15.5233333 40,10 C40,8.55166667 39.685,7.18 39.1316667,5.93666667 L33.785,11.285 Z"
-                      ></path>
-                    </g>
-                  </g>
-                </g>
-              </g>
-            </svg>
-          </div>
-          <p class="mt-1 mb-0 text-xs font-weight-bold">Items</p>
-        </div>
-        <h4 class="font-weight-bolder">43</h4>
-        <div class="progress w-75">
-          <div
-            class="progress-bar bg-dark w-50"
-            role="progressbar"
-            aria-valuenow="50"
-            aria-valuemin="0"
-            aria-valuemax="100"
-          ></div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-import Chart from "chart.js/auto";
-
-export default {
-  name: "ActiveUsersChart",
-  mounted() {
-    var ctx = document.getElementById("chart-bars").getContext("2d");
-    new Chart(ctx, {
-      type: "bar",
-      data: {
-        labels: ["Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
-        datasets: [
-          {
-            label: "Sales",
-            tension: 0.4,
-            borderWidth: 0,
-            borderRadius: 4,
-            borderSkipped: false,
-            backgroundColor: "#fff",
-            data: [450, 200, 100, 220, 500, 100, 400, 230, 500],
-            maxBarThickness: 6,
-          },
-        ],
-      },
-      options: {
-        responsive: true,
-        maintainAspectRatio: false,
-        plugins: {
-          legend: {
-            display: false,
-          },
-        },
-        interaction: {
-          intersect: false,
-          mode: "index",
-        },
-        scales: {
-          y: {
-            grid: {
-              drawBorder: false,
-              display: false,
-              drawOnChartArea: false,
-              drawTicks: false,
-            },
-            ticks: {
-              suggestedMin: 0,
-              suggestedMax: 500,
-              beginAtZero: true,
-              padding: 15,
-              font: {
-                size: 14,
-                family: "Open Sans",
-                style: "normal",
-                lineHeight: 2,
-              },
-              color: "#fff",
-            },
-          },
-          x: {
-            grid: {
-              drawBorder: false,
-              display: false,
-              drawOnChartArea: false,
-              drawTicks: false,
-            },
-            ticks: {
-              display: false,
-            },
-          },
-        },
-      },
-    });
-  },
-};
-</script>
+<template>
+  <div class="py-3 mb-3 bg-gradient-dark border-radius-lg pe-1">
+    <div class="chart">
+      <canvas id="chart-bars" class="chart-canvas" height="170"></canvas>
+    </div>
+  </div>
+  <h6 class="mt-4 mb-0 ms-2">Active Users</h6>
+  <p class="text-sm ms-2">
+    (<span class="font-weight-bolder">+23%</span>) than last week
+  </p>
+  <div class="container border-radius-lg">
+    <div class="row">
+      <div class="py-3 col-3 ps-0">
+        <div class="mb-2 d-flex">
+          <div
+            class="text-center shadow icon icon-shape icon-xxs border-radius-sm bg-gradient-primary me-2 d-flex align-items-center justify-content-center"
+          >
+            <svg
+              width="10px"
+              height="10px"
+              viewBox="0 0 40 44"
+              version="1.1"
+              xmlns="http://www.w3.org/2000/svg"
+              xmlns:xlink="http://www.w3.org/1999/xlink"
+            >
+              <title>document</title>
+              <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                <g
+                  transform="translate(-1870.000000, -591.000000)"
+                  fill="#FFFFFF"
+                  fill-rule="nonzero"
+                >
+                  <g transform="translate(1716.000000, 291.000000)">
+                    <g transform="translate(154.000000, 300.000000)">
+                      <path
+                        class="color-background"
+                        d="M40,40 L36.3636364,40 L36.3636364,3.63636364 L5.45454545,3.63636364 L5.45454545,0 L38.1818182,0 C39.1854545,0 40,0.814545455 40,1.81818182 L40,40 Z"
+                        opacity="0.603585379"
+                      ></path>
+                      <path
+                        class="color-background"
+                        d="M30.9090909,7.27272727 L1.81818182,7.27272727 C0.814545455,7.27272727 0,8.08727273 0,9.09090909 L0,41.8181818 C0,42.8218182 0.814545455,43.6363636 1.81818182,43.6363636 L30.9090909,43.6363636 C31.9127273,43.6363636 32.7272727,42.8218182 32.7272727,41.8181818 L32.7272727,9.09090909 C32.7272727,8.08727273 31.9127273,7.27272727 30.9090909,7.27272727 Z M18.1818182,34.5454545 L7.27272727,34.5454545 L7.27272727,30.9090909 L18.1818182,30.9090909 L18.1818182,34.5454545 Z M25.4545455,27.2727273 L7.27272727,27.2727273 L7.27272727,23.6363636 L25.4545455,23.6363636 L25.4545455,27.2727273 Z M25.4545455,20 L7.27272727,20 L7.27272727,16.3636364 L25.4545455,16.3636364 L25.4545455,20 Z"
+                      ></path>
+                    </g>
+                  </g>
+                </g>
+              </g>
+            </svg>
+          </div>
+          <p class="mt-1 mb-0 text-xs font-weight-bold">Users</p>
+        </div>
+        <h4 class="font-weight-bolder">36K</h4>
+        <div class="progress w-75">
+          <div
+            class="progress-bar bg-dark w-60"
+            role="progressbar"
+            aria-valuenow="60"
+            aria-valuemin="0"
+            aria-valuemax="100"
+          ></div>
+        </div>
+      </div>
+      <div class="py-3 col-3 ps-0">
+        <div class="mb-2 d-flex">
+          <div
+            class="text-center shadow icon icon-shape icon-xxs border-radius-sm bg-gradient-info me-2 d-flex align-items-center justify-content-center"
+          >
+            <svg
+              width="10px"
+              height="10px"
+              viewBox="0 0 40 40"
+              version="1.1"
+              xmlns="http://www.w3.org/2000/svg"
+              xmlns:xlink="http://www.w3.org/1999/xlink"
+            >
+              <title>spaceship</title>
+              <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                <g
+                  transform="translate(-1720.000000, -592.000000)"
+                  fill="#FFFFFF"
+                  fill-rule="nonzero"
+                >
+                  <g transform="translate(1716.000000, 291.000000)">
+                    <g transform="translate(4.000000, 301.000000)">
+                      <path
+                        class="color-background"
+                        d="M39.3,0.706666667 C38.9660984,0.370464027 38.5048767,0.192278529 38.0316667,0.216666667 C14.6516667,1.43666667 6.015,22.2633333 5.93166667,22.4733333 C5.68236407,23.0926189 5.82664679,23.8009159 6.29833333,24.2733333 L15.7266667,33.7016667 C16.2013871,34.1756798 16.9140329,34.3188658 17.535,34.065 C17.7433333,33.98 38.4583333,25.2466667 39.7816667,1.97666667 C39.8087196,1.50414529 39.6335979,1.04240574 39.3,0.706666667 Z M25.69,19.0233333 C24.7367525,19.9768687 23.3029475,20.2622391 22.0572426,19.7463614 C20.8115377,19.2304837 19.9992882,18.0149658 19.9992882,16.6666667 C19.9992882,15.3183676 20.8115377,14.1028496 22.0572426,13.5869719 C23.3029475,13.0710943 24.7367525,13.3564646 25.69,14.31 C26.9912731,15.6116662 26.9912731,17.7216672 25.69,19.0233333 L25.69,19.0233333 Z"
+                      ></path>
+                      <path
+                        class="color-background"
+                        d="M1.855,31.4066667 C3.05106558,30.2024182 4.79973884,29.7296005 6.43969145,30.1670277 C8.07964407,30.6044549 9.36054508,31.8853559 9.7979723,33.5253085 C10.2353995,35.1652612 9.76258177,36.9139344 8.55833333,38.11 C6.70666667,39.9616667 0,40 0,40 C0,40 0,33.2566667 1.855,31.4066667 Z"
+                      ></path>
+                      <path
+                        class="color-background"
+                        d="M17.2616667,3.90166667 C12.4943643,3.07192755 7.62174065,4.61673894 4.20333333,8.04166667 C3.31200265,8.94126033 2.53706177,9.94913142 1.89666667,11.0416667 C1.5109569,11.6966059 1.61721591,12.5295394 2.155,13.0666667 L5.47,16.3833333 C8.55036617,11.4946947 12.5559074,7.25476565 17.2616667,3.90166667 L17.2616667,3.90166667 Z"
+                        opacity="0.598539807"
+                      ></path>
+                      <path
+                        class="color-background"
+                        d="M36.0983333,22.7383333 C36.9280725,27.5056357 35.3832611,32.3782594 31.9583333,35.7966667 C31.0587397,36.6879974 30.0508686,37.4629382 28.9583333,38.1033333 C28.3033941,38.4890431 27.4704606,38.3827841 26.9333333,37.845 L23.6166667,34.53 C28.5053053,31.4496338 32.7452344,27.4440926 36.0983333,22.7383333 L36.0983333,22.7383333 Z"
+                        opacity="0.598539807"
+                      ></path>
+                    </g>
+                  </g>
+                </g>
+              </g>
+            </svg>
+          </div>
+          <p class="mt-1 mb-0 text-xs font-weight-bold">Clicks</p>
+        </div>
+        <h4 class="font-weight-bolder">2m</h4>
+        <div class="progress w-75">
+          <div
+            class="progress-bar bg-dark w-90"
+            role="progressbar"
+            aria-valuenow="90"
+            aria-valuemin="0"
+            aria-valuemax="100"
+          ></div>
+        </div>
+      </div>
+      <div class="py-3 col-3 ps-0">
+        <div class="mb-2 d-flex">
+          <div
+            class="text-center shadow icon icon-shape icon-xxs border-radius-sm bg-gradient-warning me-2 d-flex align-items-center justify-content-center"
+          >
+            <svg
+              width="10px"
+              height="10px"
+              viewBox="0 0 43 36"
+              version="1.1"
+              xmlns="http://www.w3.org/2000/svg"
+              xmlns:xlink="http://www.w3.org/1999/xlink"
+            >
+              <title>credit-card</title>
+              <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                <g
+                  transform="translate(-2169.000000, -745.000000)"
+                  fill="#FFFFFF"
+                  fill-rule="nonzero"
+                >
+                  <g transform="translate(1716.000000, 291.000000)">
+                    <g transform="translate(453.000000, 454.000000)">
+                      <path
+                        class="color-background"
+                        d="M43,10.7482083 L43,3.58333333 C43,1.60354167 41.3964583,0 39.4166667,0 L3.58333333,0 C1.60354167,0 0,1.60354167 0,3.58333333 L0,10.7482083 L43,10.7482083 Z"
+                        opacity="0.593633743"
+                      ></path>
+                      <path
+                        class="color-background"
+                        d="M0,16.125 L0,32.25 C0,34.2297917 1.60354167,35.8333333 3.58333333,35.8333333 L39.4166667,35.8333333 C41.3964583,35.8333333 43,34.2297917 43,32.25 L43,16.125 L0,16.125 Z M19.7083333,26.875 L7.16666667,26.875 L7.16666667,23.2916667 L19.7083333,23.2916667 L19.7083333,26.875 Z M35.8333333,26.875 L28.6666667,26.875 L28.6666667,23.2916667 L35.8333333,23.2916667 L35.8333333,26.875 Z"
+                      ></path>
+                    </g>
+                  </g>
+                </g>
+              </g>
+            </svg>
+          </div>
+          <p class="mt-1 mb-0 text-xs font-weight-bold">Sales</p>
+        </div>
+        <h4 class="font-weight-bolder">435$</h4>
+        <div class="progress w-75">
+          <div
+            class="progress-bar bg-dark w-30"
+            role="progressbar"
+            aria-valuenow="30"
+            aria-valuemin="0"
+            aria-valuemax="100"
+          ></div>
+        </div>
+      </div>
+      <div class="py-3 col-3 ps-0">
+        <div class="mb-2 d-flex">
+          <div
+            class="text-center shadow icon icon-shape icon-xxs border-radius-sm bg-gradient-danger me-2 d-flex align-items-center justify-content-center"
+          >
+            <svg
+              width="10px"
+              height="10px"
+              viewBox="0 0 40 40"
+              version="1.1"
+              xmlns="http://www.w3.org/2000/svg"
+              xmlns:xlink="http://www.w3.org/1999/xlink"
+            >
+              <title>settings</title>
+              <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                <g
+                  transform="translate(-2020.000000, -442.000000)"
+                  fill="#FFFFFF"
+                  fill-rule="nonzero"
+                >
+                  <g transform="translate(1716.000000, 291.000000)">
+                    <g transform="translate(304.000000, 151.000000)">
+                      <polygon
+                        class="color-background"
+                        opacity="0.596981957"
+                        points="18.0883333 15.7316667 11.1783333 8.82166667 13.3333333 6.66666667 6.66666667 0 0 6.66666667 6.66666667 13.3333333 8.82166667 11.1783333 15.315 17.6716667"
+                      ></polygon>
+                      <path
+                        class="color-background"
+                        d="M31.5666667,23.2333333 C31.0516667,23.2933333 30.53,23.3333333 30,23.3333333 C29.4916667,23.3333333 28.9866667,23.3033333 28.48,23.245 L22.4116667,30.7433333 L29.9416667,38.2733333 C32.2433333,40.575 35.9733333,40.575 38.275,38.2733333 L38.275,38.2733333 C40.5766667,35.9716667 40.5766667,32.2416667 38.275,29.94 L31.5666667,23.2333333 Z"
+                        opacity="0.596981957"
+                      ></path>
+                      <path
+                        class="color-background"
+                        d="M33.785,11.285 L28.715,6.215 L34.0616667,0.868333333 C32.82,0.315 31.4483333,0 30,0 C24.4766667,0 20,4.47666667 20,10 C20,10.99 20.1483333,11.9433333 20.4166667,12.8466667 L2.435,27.3966667 C0.95,28.7083333 0.0633333333,30.595 0.00333333333,32.5733333 C-0.0583333333,34.5533333 0.71,36.4916667 2.11,37.89 C3.47,39.2516667 5.27833333,40 7.20166667,40 C9.26666667,40 11.2366667,39.1133333 12.6033333,37.565 L27.1533333,19.5833333 C28.0566667,19.8516667 29.01,20 30,20 C35.5233333,20 40,15.5233333 40,10 C40,8.55166667 39.685,7.18 39.1316667,5.93666667 L33.785,11.285 Z"
+                      ></path>
+                    </g>
+                  </g>
+                </g>
+              </g>
+            </svg>
+          </div>
+          <p class="mt-1 mb-0 text-xs font-weight-bold">Items</p>
+        </div>
+        <h4 class="font-weight-bolder">43</h4>
+        <div class="progress w-75">
+          <div
+            class="progress-bar bg-dark w-50"
+            role="progressbar"
+            aria-valuenow="50"
+            aria-valuemin="0"
+            aria-valuemax="100"
+          ></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import Chart from "chart.js/auto";
+
+export default {
+  name: "ActiveUsersChart",
+  mounted() {
+    var ctx = document.getElementById("chart-bars").getContext("2d");
+    new Chart(ctx, {
+      type: "bar",
+      data: {
+        labels: ["Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
+        datasets: [
+          {
+            label: "Sales",
+            tension: 0.4,
+            borderWidth: 0,
+            borderRadius: 4,
+            borderSkipped: false,
+            backgroundColor: "#fff",
+            data: [450, 200, 100, 220, 500, 100, 400, 230, 500],
+            maxBarThickness: 6,
+          },
+        ],
+      },
+      options: {
+        responsive: true,
+        maintainAspectRatio: false,
+        plugins: {
+          legend: {
+            display: false,
+          },
+        },
+        interaction: {
+          intersect: false,
+          mode: "index",
+        },
+        scales: {
+          y: {
+            grid: {
+              drawBorder: false,
+              display: false,
+              drawOnChartArea: false,
+              drawTicks: false,
+            },
+            ticks: {
+              suggestedMin: 0,
+              suggestedMax: 500,
+              beginAtZero: true,
+              padding: 15,
+              font: {
+                size: 14,
+                family: "Open Sans",
+                style: "normal",
+                lineHeight: 2,
+              },
+              color: "#fff",
+            },
+          },
+          x: {
+            grid: {
+              drawBorder: false,
+              display: false,
+              drawOnChartArea: false,
+              drawTicks: false,
+            },
+            ticks: {
+              display: false,
+            },
+          },
+        },
+      },
+    });
+  },
+};
+</script>
diff --git a/src/examples/Charts/GradientLineChart.vue b/src/examples/Charts/GradientLineChart.vue
index 5332fb0..321f003 100644
--- a/src/examples/Charts/GradientLineChart.vue
+++ b/src/examples/Charts/GradientLineChart.vue
@@ -1,128 +1,128 @@
-<template>
-  <div class="pb-0 card-header">
-    <h6>Sales overview</h6>
-    <p class="text-sm">
-      <i class="fa fa-arrow-up text-success"></i>
-      <span class="font-weight-bold">4% more</span> in 2021
-    </p>
-  </div>
-  <div class="p-3 card-body">
-    <div class="chart">
-      <canvas id="chart-line" class="chart-canvas" height="300"></canvas>
-    </div>
-  </div>
-</template>
-
-<script>
-import Chart from "chart.js/auto";
-
-export default {
-  name: "GradientLineChart",
-
-  mounted() {
-    var ctx2 = document.getElementById("chart-line").getContext("2d");
-
-    var gradientStroke1 = ctx2.createLinearGradient(0, 230, 0, 50);
-
-    gradientStroke1.addColorStop(1, "rgba(203,12,159,0.2)");
-    gradientStroke1.addColorStop(0.2, "rgba(72,72,176,0.0)");
-    gradientStroke1.addColorStop(0, "rgba(203,12,159,0)"); //purple colors
-
-    var gradientStroke2 = ctx2.createLinearGradient(0, 230, 0, 50);
-
-    gradientStroke2.addColorStop(1, "rgba(20,23,39,0.2)");
-    gradientStroke2.addColorStop(0.2, "rgba(72,72,176,0.0)");
-    gradientStroke2.addColorStop(0, "rgba(20,23,39,0)"); //purple colors
-
-    new Chart(ctx2, {
-      type: "line",
-      data: {
-        labels: ["Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
-        datasets: [
-          {
-            label: "Mobile apps",
-            tension: 0.4,
-            borderWidth: 0,
-            pointRadius: 0,
-            borderColor: "#cb0c9f",
-            // eslint-disable-next-line no-dupe-keys
-            borderWidth: 3,
-            backgroundColor: gradientStroke1,
-            fill: true,
-            data: [50, 40, 300, 220, 500, 250, 400, 230, 500],
-            maxBarThickness: 6,
-          },
-          {
-            label: "Websites",
-            tension: 0.4,
-            borderWidth: 0,
-            pointRadius: 0,
-            borderColor: "#3A416F",
-            // eslint-disable-next-line no-dupe-keys
-            borderWidth: 3,
-            backgroundColor: gradientStroke2,
-            fill: true,
-            data: [30, 90, 40, 140, 290, 290, 340, 230, 400],
-            maxBarThickness: 6,
-          },
-        ],
-      },
-      options: {
-        responsive: true,
-        maintainAspectRatio: false,
-        plugins: {
-          legend: {
-            display: false,
-          },
-        },
-        interaction: {
-          intersect: false,
-          mode: "index",
-        },
-        scales: {
-          y: {
-            grid: {
-              drawBorder: false,
-              display: true,
-              drawOnChartArea: true,
-              drawTicks: false,
-              borderDash: [5, 5],
-            },
-            ticks: {
-              display: true,
-              padding: 10,
-              color: "#b2b9bf",
-              font: {
-                size: 11,
-                family: "Open Sans",
-                style: "normal",
-                lineHeight: 2,
-              },
-            },
-          },
-          x: {
-            grid: {
-              drawBorder: false,
-              display: false,
-              drawOnChartArea: false,
-              drawTicks: false,
-              borderDash: [5, 5],
-            },
-            ticks: {
-              display: true,
-              color: "#b2b9bf",
-              padding: 20,
-              font: {
-                size: 11,
-                family: "Open Sans",
-                style: "normal",
-                lineHeight: 2,
-              },
-            },
-          },
-        },
-      },
-    });
-  },
-};
-</script>
+<template>
+  <div class="pb-0 card-header">
+    <h6>Sales overview</h6>
+    <p class="text-sm">
+      <i class="fa fa-arrow-up text-success"></i>
+      <span class="font-weight-bold">4% more</span> in 2021
+    </p>
+  </div>
+  <div class="p-3 card-body">
+    <div class="chart">
+      <canvas id="chart-line" class="chart-canvas" height="300"></canvas>
+    </div>
+  </div>
+</template>
+
+<script>
+import Chart from "chart.js/auto";
+
+export default {
+  name: "GradientLineChart",
+
+  mounted() {
+    var ctx2 = document.getElementById("chart-line").getContext("2d");
+
+    var gradientStroke1 = ctx2.createLinearGradient(0, 230, 0, 50);
+
+    gradientStroke1.addColorStop(1, "rgba(203,12,159,0.2)");
+    gradientStroke1.addColorStop(0.2, "rgba(72,72,176,0.0)");
+    gradientStroke1.addColorStop(0, "rgba(203,12,159,0)"); //purple colors
+
+    var gradientStroke2 = ctx2.createLinearGradient(0, 230, 0, 50);
+
+    gradientStroke2.addColorStop(1, "rgba(20,23,39,0.2)");
+    gradientStroke2.addColorStop(0.2, "rgba(72,72,176,0.0)");
+    gradientStroke2.addColorStop(0, "rgba(20,23,39,0)"); //purple colors
+
+    new Chart(ctx2, {
+      type: "line",
+      data: {
+        labels: ["Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
+        datasets: [
+          {
+            label: "Mobile apps",
+            tension: 0.4,
+            borderWidth: 0,
+            pointRadius: 0,
+            borderColor: "#cb0c9f",
+            // eslint-disable-next-line no-dupe-keys
+            borderWidth: 3,
+            backgroundColor: gradientStroke1,
+            fill: true,
+            data: [50, 40, 300, 220, 500, 250, 400, 230, 500],
+            maxBarThickness: 6,
+          },
+          {
+            label: "Websites",
+            tension: 0.4,
+            borderWidth: 0,
+            pointRadius: 0,
+            borderColor: "#3A416F",
+            // eslint-disable-next-line no-dupe-keys
+            borderWidth: 3,
+            backgroundColor: gradientStroke2,
+            fill: true,
+            data: [30, 90, 40, 140, 290, 290, 340, 230, 400],
+            maxBarThickness: 6,
+          },
+        ],
+      },
+      options: {
+        responsive: true,
+        maintainAspectRatio: false,
+        plugins: {
+          legend: {
+            display: false,
+          },
+        },
+        interaction: {
+          intersect: false,
+          mode: "index",
+        },
+        scales: {
+          y: {
+            grid: {
+              drawBorder: false,
+              display: true,
+              drawOnChartArea: true,
+              drawTicks: false,
+              borderDash: [5, 5],
+            },
+            ticks: {
+              display: true,
+              padding: 10,
+              color: "#b2b9bf",
+              font: {
+                size: 11,
+                family: "Open Sans",
+                style: "normal",
+                lineHeight: 2,
+              },
+            },
+          },
+          x: {
+            grid: {
+              drawBorder: false,
+              display: false,
+              drawOnChartArea: false,
+              drawTicks: false,
+              borderDash: [5, 5],
+            },
+            ticks: {
+              display: true,
+              color: "#b2b9bf",
+              padding: 20,
+              font: {
+                size: 11,
+                family: "Open Sans",
+                style: "normal",
+                lineHeight: 2,
+              },
+            },
+          },
+        },
+      },
+    });
+  },
+};
+</script>
diff --git a/src/examples/Configurator.vue b/src/examples/Configurator.vue
index 5646c66..cddb4c9 100644
--- a/src/examples/Configurator.vue
+++ b/src/examples/Configurator.vue
@@ -1,6 +1,9 @@
 <template>
   <div class="fixed-plugin">
-    <a class="px-3 py-2 fixed-plugin-button text-dark position-fixed" @click="toggle">
+    <a
+      class="px-3 py-2 fixed-plugin-button text-dark position-fixed"
+      @click="toggle"
+    >
       <i class="py-2 fa fa-cog"></i>
     </a>
     <div class="shadow-lg card blur">
@@ -23,7 +26,10 @@
           <h6 class="mb-0">Sidebar Colors</h6>
         </div>
         <a href="#" class="switch-trigger background-color">
-          <div class="my-2 badge-colors" :class="$store.state.isRTL ? 'text-end' : ' text-start'">
+          <div
+            class="my-2 badge-colors"
+            :class="$store.state.isRTL ? 'text-end' : ' text-start'"
+          >
             <span
               class="badge filter bg-gradient-primary active"
               data-color="primary"
@@ -67,17 +73,21 @@
             class="px-3 mb-2 btn bg-gradient-success w-100"
             :class="ifTransparent === 'bg-transparent' ? 'active' : ''"
             @click="sidebarType('bg-transparent')"
-          >Transparent</button>
+          >
+            Transparent
+          </button>
           <button
             id="btn-white"
             class="px-3 mb-2 btn bg-gradient-success w-100 ms-2"
             :class="ifTransparent === 'bg-white' ? 'active' : ''"
             @click="sidebarType('bg-white')"
-          >White</button>
+          >
+            White
+          </button>
         </div>
-        <p
-          class="mt-2 text-sm d-xl-none d-block"
-        >You can change the sidenav type just on desktop view.</p>
+        <p class="mt-2 text-sm d-xl-none d-block">
+          You can change the sidenav type just on desktop view.
+        </p>
         <!-- Navbar Fixed -->
         <div class="mt-3">
           <h6 class="mb-0">Navbar Fixed</h6>
@@ -97,15 +107,18 @@
         <a
           class="btn bg-gradient-info w-100"
           href="https://www.creative-tim.com/product/vue-soft-ui-dashboard-pro"
-        >Buy now</a>
+          >Buy now</a
+        >
         <a
           class="btn bg-gradient-dark w-100"
           href="https://www.creative-tim.com/product/vue-soft-ui-dashboard"
-        >Free demo</a>
+          >Free demo</a
+        >
         <a
           class="btn btn-outline-dark w-100"
           href="https://www.creative-tim.com/learning-lab/vue/overview/soft-ui-dashboard/"
-        >View documentation</a>
+          >View documentation</a
+        >
         <div class="text-center w-100">
           <a
             class="github-button"
@@ -114,7 +127,8 @@
             data-size="large"
             data-show-count="true"
             aria-label="Star creativetimofficial/soft-ui-dashboard on GitHub"
-          >Star</a>
+            >Star</a
+          >
           <h6 class="mt-3">Thank you for sharing!</h6>
           <a
             href="https://twitter.com/intent/tweet?text=Check%20Vue%20Soft%20UI%20Dashboard%20made%20by%20%40CreativeTim%20%23webdesign%20%23dashboard%20%23bootstrap5&amp;url=https%3A%2F%2Fwww.creative-tim.com%2Fproduct%2Fvue-soft-ui-dashboard"
@@ -143,7 +157,7 @@ export default {
   props: {
     toggle: {
       type: Function,
-      default: () => { }
+      default: () => {},
     },
   },
   data() {
@@ -165,7 +179,8 @@ export default {
     // Deactivate sidenav type buttons on resize and small screens
     window.addEventListener("resize", this.sidenavTypeOnResize);
     window.addEventListener("load", this.sidenavTypeOnResize);
-  }, methods: {
+  },
+  methods: {
     ...mapMutations(["navbarMinimize", "sidebarType", "navbarFixed"]),
     ...mapActions(["toggleSidebarColor"]),
 
diff --git a/src/examples/Footer.vue b/src/examples/Footer.vue
index 26b43ac..d97f3bd 100644
--- a/src/examples/Footer.vue
+++ b/src/examples/Footer.vue
@@ -1,69 +1,69 @@
-<template>
-  <footer class="py-3 footer">
-    <div class="container-fluid">
-      <div class="row align-items-center justify-content-lg-between">
-        <div class="mb-4 col-lg-6 mb-lg-0">
-          <div
-            class="text-sm text-center copyright text-muted"
-            :class="$store.state.isRTL ? 'text-lg-end' : 'text-lg-start'"
-          >
-            ©
-            {{ new Date().getFullYear() }}, made with
-            <i class="fa fa-heart"></i> by
-            <a
-              href="https://www.creative-tim.com"
-              class="font-weight-bold"
-              target="_blank"
-              >Creative Tim</a
-            >
-            for a better web.
-          </div>
-        </div>
-        <div class="col-lg-6">
-          <ul
-            class="nav nav-footer justify-content-center justify-content-lg-end"
-          >
-            <li class="nav-item">
-              <a
-                href="https://www.creative-tim.com"
-                class="nav-link text-muted"
-                target="_blank"
-                >Creative Tim</a
-              >
-            </li>
-            <li class="nav-item">
-              <a
-                href="https://www.creative-tim.com/presentation"
-                class="nav-link text-muted"
-                target="_blank"
-                >About Us</a
-              >
-            </li>
-            <li class="nav-item">
-              <a
-                href="https://www.creative-tim.com/blog"
-                class="nav-link text-muted"
-                target="_blank"
-                >Blog</a
-              >
-            </li>
-            <li class="nav-item">
-              <a
-                href="https://www.creative-tim.com/license"
-                class="nav-link pe-0 text-muted"
-                target="_blank"
-                >License</a
-              >
-            </li>
-          </ul>
-        </div>
-      </div>
-    </div>
-  </footer>
-</template>
-
-<script>
-export default {
-  name: "AppFooter",
-};
-</script>
+<template>
+  <footer class="py-3 footer">
+    <div class="container-fluid">
+      <div class="row align-items-center justify-content-lg-between">
+        <div class="mb-4 col-lg-6 mb-lg-0">
+          <div
+            class="text-sm text-center copyright text-muted"
+            :class="$store.state.isRTL ? 'text-lg-end' : 'text-lg-start'"
+          >
+            ©
+            {{ new Date().getFullYear() }}, made with
+            <i class="fa fa-heart"></i> by
+            <a
+              href="https://www.creative-tim.com"
+              class="font-weight-bold"
+              target="_blank"
+              >Creative Tim</a
+            >
+            for a better web.
+          </div>
+        </div>
+        <div class="col-lg-6">
+          <ul
+            class="nav nav-footer justify-content-center justify-content-lg-end"
+          >
+            <li class="nav-item">
+              <a
+                href="https://www.creative-tim.com"
+                class="nav-link text-muted"
+                target="_blank"
+                >Creative Tim</a
+              >
+            </li>
+            <li class="nav-item">
+              <a
+                href="https://www.creative-tim.com/presentation"
+                class="nav-link text-muted"
+                target="_blank"
+                >About Us</a
+              >
+            </li>
+            <li class="nav-item">
+              <a
+                href="https://www.creative-tim.com/blog"
+                class="nav-link text-muted"
+                target="_blank"
+                >Blog</a
+              >
+            </li>
+            <li class="nav-item">
+              <a
+                href="https://www.creative-tim.com/license"
+                class="nav-link pe-0 text-muted"
+                target="_blank"
+                >License</a
+              >
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </footer>
+</template>
+
+<script>
+export default {
+  name: "AppFooter",
+};
+</script>
diff --git a/src/examples/Navbars/Navbar.vue b/src/examples/Navbars/Navbar.vue
index 2f83d36..52a85f9 100644
--- a/src/examples/Navbars/Navbar.vue
+++ b/src/examples/Navbars/Navbar.vue
@@ -23,9 +23,7 @@
             <input
               type="text"
               class="form-control"
-              :placeholder="
-                $store.state.isRTL ? 'أكتب هنا...' : 'Type here...'
-              "
+              :placeholder="$store.state.isRTL ? 'أكتب هنا...' : 'Type here...'"
             />
           </div>
         </div>
@@ -36,8 +34,13 @@
               class="px-0 nav-link font-weight-bold"
               :class="textWhite ? textWhite : 'text-body'"
             >
-              <i class="fa fa-user" :class="$store.state.isRTL ? 'ms-sm-2' : 'me-sm-1'"></i>
-              <span v-if="$store.state.isRTL" class="d-sm-inline d-none">يسجل دخول</span>
+              <i
+                class="fa fa-user"
+                :class="$store.state.isRTL ? 'ms-sm-2' : 'me-sm-1'"
+              ></i>
+              <span v-if="$store.state.isRTL" class="d-sm-inline d-none"
+                >يسجل دخول</span
+              >
               <span v-else class="d-sm-inline d-none">Sign In</span>
             </router-link>
           </li>
@@ -136,7 +139,9 @@
               <li>
                 <a class="dropdown-item border-radius-md" href="javascript:;">
                   <div class="py-1 d-flex">
-                    <div class="my-auto avatar avatar-sm bg-gradient-secondary me-3">
+                    <div
+                      class="my-auto avatar avatar-sm bg-gradient-secondary me-3"
+                    >
                       <svg
                         width="12px"
                         height="12px"
@@ -146,7 +151,12 @@
                         xmlns:xlink="http://www.w3.org/1999/xlink"
                       >
                         <title>credit-card</title>
-                        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                        <g
+                          stroke="none"
+                          stroke-width="1"
+                          fill="none"
+                          fill-rule="evenodd"
+                        >
                           <g
                             transform="translate(-2169.000000, -745.000000)"
                             fill="#FFFFFF"
@@ -170,7 +180,9 @@
                       </svg>
                     </div>
                     <div class="d-flex flex-column justify-content-center">
-                      <h6 class="mb-1 text-sm font-weight-normal">Payment successfully completed</h6>
+                      <h6 class="mb-1 text-sm font-weight-normal">
+                        Payment successfully completed
+                      </h6>
                       <p class="mb-0 text-xs text-secondary">
                         <i class="fa fa-clock me-1"></i>
                         2 days
@@ -199,11 +211,11 @@ export default {
   props: {
     minNav: {
       type: Function,
-      default: () => { }
+      default: () => {},
     },
     textWhite: {
       type: String,
-      default: ""
+      default: "",
     },
   },
   data() {
@@ -232,7 +244,8 @@ export default {
         navbar.classList.remove("shadow-blur");
       }
     });
-  }, methods: {
+  },
+  methods: {
     ...mapMutations(["navbarMinimize", "toggleConfigurator"]),
     ...mapActions(["toggleSidebarColor"]),
 
diff --git a/src/examples/PageLayout/Footer.vue b/src/examples/PageLayout/Footer.vue
index 3c0c9f8..e27ed27 100644
--- a/src/examples/PageLayout/Footer.vue
+++ b/src/examples/PageLayout/Footer.vue
@@ -1,103 +1,103 @@
-<template>
-    <!-- -------- START FOOTER 3 w/ COMPANY DESCRIPTION WITH LINKS & SOCIAL ICONS & COPYRIGHT ------- -->
-  <footer class="py-5 footer">
-    <div class="container">
-      <div class="row">
-        <div class="mx-auto mb-4 text-center col-lg-8">
-          <a
-            href="javascript:;"
-            target="_blank"
-            class="mb-2 text-secondary me-xl-5 me-3 mb-sm-0"
-          >
-            Company
-          </a>
-          <a
-            href="javascript:;"
-            target="_blank"
-            class="mb-2 text-secondary me-xl-5 me-3 mb-sm-0"
-          >
-            About Us
-          </a>
-          <a
-            href="javascript:;"
-            target="_blank"
-            class="mb-2 text-secondary me-xl-5 me-3 mb-sm-0"
-          >
-            Team
-          </a>
-          <a
-            href="javascript:;"
-            target="_blank"
-            class="mb-2 text-secondary me-xl-5 me-3 mb-sm-0"
-          >
-            Products
-          </a>
-          <a
-            href="javascript:;"
-            target="_blank"
-            class="mb-2 text-secondary me-xl-5 me-3 mb-sm-0"
-          >
-            Blog
-          </a>
-          <a
-            href="javascript:;"
-            target="_blank"
-            class="mb-2 text-secondary me-xl-5 me-3 mb-sm-0"
-          >
-            Pricing
-          </a>
-        </div>
-        <div class="mx-auto mt-2 mb-4 text-center col-lg-8">
-          <a
-            href="javascript:;"
-            target="_blank"
-            class="text-secondary me-xl-4 me-4"
-          >
-            <span class="text-lg fab fa-dribbble"></span>
-          </a>
-          <a
-            href="javascript:;"
-            target="_blank"
-            class="text-secondary me-xl-4 me-4"
-          >
-            <span class="text-lg fab fa-twitter"></span>
-          </a>
-          <a
-            href="javascript:;"
-            target="_blank"
-            class="text-secondary me-xl-4 me-4"
-          >
-            <span class="text-lg fab fa-instagram"></span>
-          </a>
-          <a
-            href="javascript:;"
-            target="_blank"
-            class="text-secondary me-xl-4 me-4"
-          >
-            <span class="text-lg fab fa-pinterest"></span>
-          </a>
-          <a
-            href="javascript:;"
-            target="_blank"
-            class="text-secondary me-xl-4 me-4"
-          >
-            <span class="text-lg fab fa-github"></span>
-          </a>
-        </div>
-      </div>
-      <div class="row">
-        <div class="mx-auto mt-1 text-center col-8">
-          <p class="mb-0 text-secondary">
-            Copyright © {{ new Date().getFullYear() }} Soft by Creative Tim.
-          </p>
-        </div>
-      </div>
-    </div>
-  </footer>
-</template>
-
-<script>
-export default {
-  name: "AppFooter",
-};
-</script>
+<template>
+  <!-- -------- START FOOTER 3 w/ COMPANY DESCRIPTION WITH LINKS & SOCIAL ICONS & COPYRIGHT ------- -->
+  <footer class="py-5 footer">
+    <div class="container">
+      <div class="row">
+        <div class="mx-auto mb-4 text-center col-lg-8">
+          <a
+            href="javascript:;"
+            target="_blank"
+            class="mb-2 text-secondary me-xl-5 me-3 mb-sm-0"
+          >
+            Company
+          </a>
+          <a
+            href="javascript:;"
+            target="_blank"
+            class="mb-2 text-secondary me-xl-5 me-3 mb-sm-0"
+          >
+            About Us
+          </a>
+          <a
+            href="javascript:;"
+            target="_blank"
+            class="mb-2 text-secondary me-xl-5 me-3 mb-sm-0"
+          >
+            Team
+          </a>
+          <a
+            href="javascript:;"
+            target="_blank"
+            class="mb-2 text-secondary me-xl-5 me-3 mb-sm-0"
+          >
+            Products
+          </a>
+          <a
+            href="javascript:;"
+            target="_blank"
+            class="mb-2 text-secondary me-xl-5 me-3 mb-sm-0"
+          >
+            Blog
+          </a>
+          <a
+            href="javascript:;"
+            target="_blank"
+            class="mb-2 text-secondary me-xl-5 me-3 mb-sm-0"
+          >
+            Pricing
+          </a>
+        </div>
+        <div class="mx-auto mt-2 mb-4 text-center col-lg-8">
+          <a
+            href="javascript:;"
+            target="_blank"
+            class="text-secondary me-xl-4 me-4"
+          >
+            <span class="text-lg fab fa-dribbble"></span>
+          </a>
+          <a
+            href="javascript:;"
+            target="_blank"
+            class="text-secondary me-xl-4 me-4"
+          >
+            <span class="text-lg fab fa-twitter"></span>
+          </a>
+          <a
+            href="javascript:;"
+            target="_blank"
+            class="text-secondary me-xl-4 me-4"
+          >
+            <span class="text-lg fab fa-instagram"></span>
+          </a>
+          <a
+            href="javascript:;"
+            target="_blank"
+            class="text-secondary me-xl-4 me-4"
+          >
+            <span class="text-lg fab fa-pinterest"></span>
+          </a>
+          <a
+            href="javascript:;"
+            target="_blank"
+            class="text-secondary me-xl-4 me-4"
+          >
+            <span class="text-lg fab fa-github"></span>
+          </a>
+        </div>
+      </div>
+      <div class="row">
+        <div class="mx-auto mt-1 text-center col-8">
+          <p class="mb-0 text-secondary">
+            Copyright © {{ new Date().getFullYear() }} Soft by Creative Tim.
+          </p>
+        </div>
+      </div>
+    </div>
+  </footer>
+</template>
+
+<script>
+export default {
+  name: "AppFooter",
+};
+</script>
diff --git a/src/examples/PageLayout/Navbar.vue b/src/examples/PageLayout/Navbar.vue
index 6e2a4e3..681df3f 100644
--- a/src/examples/PageLayout/Navbar.vue
+++ b/src/examples/PageLayout/Navbar.vue
@@ -10,7 +10,8 @@
         to="/dashboard"
         v-bind="$attrs"
         :class="isBlur ? 'text-dark' : 'text-white'"
-      >Vite Soft UI Dashboard</router-link>
+        >Vite Soft UI Dashboard</router-link
+      >
       <button
         class="navbar-toggler shadow-none ms-2"
         type="button"
@@ -79,7 +80,8 @@
               href="https://www.creative-tim.com/product/vue-soft-ui-dashboard"
               class="btn btn-sm btn-round mb-0 me-1"
               :class="isBlur ? 'bg-gradient-dark' : 'bg-gradient-success'"
-            >Free download</a>
+              >Free download</a
+            >
           </li>
         </ul>
       </div>
@@ -97,11 +99,11 @@ export default {
   props: {
     btnBackground: {
       type: String,
-      default: ""
+      default: "",
     },
     isBlur: {
       type: String,
-      default: ""
+      default: "",
     },
     darkMode: {
       type: Boolean,
diff --git a/src/examples/Sidenav/SidenavCard.vue b/src/examples/Sidenav/SidenavCard.vue
index 1d5dd5c..c3cb15b 100644
--- a/src/examples/Sidenav/SidenavCard.vue
+++ b/src/examples/Sidenav/SidenavCard.vue
@@ -1,60 +1,75 @@
-<template>
-  <div id="sidenavCard" class="shadow-none card card-background card-background-mask-secondary">
-    <div class="full-background" :style="{ 'background-image': 'url(' + imgWhiteCurved + ')' }"></div>
-    <div class="p-3 card-body text-start w-100">
-      <div
-        class="mb-3 text-center bg-white shadow icon icon-shape icon-sm d-flex align-items-center justify-content-center border-radius-md"
-      >
-        <i
-          id="sidenavCardIcon"
-          class="top-0 text-lg text-dark text-gradient"
-          aria-hidden="true"
-          :class="iconClass"
-        ></i>
-      </div>
-      <div v-if="$store.state.isRTL" class="docs-info">
-        <h6 class="mb-0 text-white up text-end">تحتاج مساعدة ؟</h6>
-        <p class="text-xs font-weight-bold text-end">يرجى التحقق من مستنداتنا</p>
-        <a :href="href" target="_blank" class="mb-0 btn btn-white btn-sm w-100">توثيق</a>
-      </div>
-      <div v-else class="docs-info">
-        <h6 class="mb-0 text-white up">{{ textPrimary }}</h6>
-        <p class="text-xs font-weight-bold">{{ textSecondary }}</p>
-        <a :href="href" target="_blank" class="mb-0 btn btn-white btn-sm w-100">{{ linkText }}</a>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-import imgWhiteCurved from "../../assets/img/curved-images/white-curved.jpeg";
-export default {
-  name: "SidenavCard",
-  props: {
-    textPrimary: {
-      type: String,
-      default: ""
-    },
-    textSecondary: {
-      type: String,
-      default: ""
-    },
-    href: {
-      type: String,
-      default: ""
-    },
-    linkText: {
-      type: String,
-      default: ""
-    },
-    iconClass: {
-      type: String,
-      default: ""
-    },
-  },
-  data() {
-    return {
-      imgWhiteCurved,
-    };
-  },
-};
-</script>
+<template>
+  <div
+    id="sidenavCard"
+    class="shadow-none card card-background card-background-mask-secondary"
+  >
+    <div
+      class="full-background"
+      :style="{ 'background-image': 'url(' + imgWhiteCurved + ')' }"
+    ></div>
+    <div class="p-3 card-body text-start w-100">
+      <div
+        class="mb-3 text-center bg-white shadow icon icon-shape icon-sm d-flex align-items-center justify-content-center border-radius-md"
+      >
+        <i
+          id="sidenavCardIcon"
+          class="top-0 text-lg text-dark text-gradient"
+          aria-hidden="true"
+          :class="iconClass"
+        ></i>
+      </div>
+      <div v-if="$store.state.isRTL" class="docs-info">
+        <h6 class="mb-0 text-white up text-end">تحتاج مساعدة ؟</h6>
+        <p class="text-xs font-weight-bold text-end">
+          يرجى التحقق من مستنداتنا
+        </p>
+        <a :href="href" target="_blank" class="mb-0 btn btn-white btn-sm w-100"
+          >توثيق</a
+        >
+      </div>
+      <div v-else class="docs-info">
+        <h6 class="mb-0 text-white up">{{ textPrimary }}</h6>
+        <p class="text-xs font-weight-bold">{{ textSecondary }}</p>
+        <a
+          :href="href"
+          target="_blank"
+          class="mb-0 btn btn-white btn-sm w-100"
+          >{{ linkText }}</a
+        >
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import imgWhiteCurved from "../../assets/img/curved-images/white-curved.jpeg";
+export default {
+  name: "SidenavCard",
+  props: {
+    textPrimary: {
+      type: String,
+      default: "",
+    },
+    textSecondary: {
+      type: String,
+      default: "",
+    },
+    href: {
+      type: String,
+      default: "",
+    },
+    linkText: {
+      type: String,
+      default: "",
+    },
+    iconClass: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {
+      imgWhiteCurved,
+    };
+  },
+};
+</script>
diff --git a/src/examples/Sidenav/SidenavList.vue b/src/examples/Sidenav/SidenavList.vue
index 2e1e674..809c0b9 100644
--- a/src/examples/Sidenav/SidenavList.vue
+++ b/src/examples/Sidenav/SidenavList.vue
@@ -27,7 +27,10 @@
       </li>
 
       <li class="nav-item">
-        <sidenav-collapse nav-text="Virtual Reality" :to="{ name: 'Virtual Reality' }">
+        <sidenav-collapse
+          nav-text="Virtual Reality"
+          :to="{ name: 'Virtual Reality' }"
+        >
           <template #icon>
             <icon name="virtual-reality" />
           </template>
@@ -44,7 +47,9 @@
         <h6
           class="text-xs ps-4 text-uppercase font-weight-bolder opacity-6"
           :class="$store.state.isRTL ? 'me-4' : 'ms-2'"
-        >PAGES</h6>
+        >
+          PAGES
+        </h6>
       </li>
       <li class="nav-item">
         <sidenav-collapse nav-text="Profile" :to="{ name: 'Profile' }">
@@ -82,7 +87,8 @@
       class="btn bg-gradient-success mt-4 w-100"
       href="https://www.creative-tim.com/product/vue-soft-ui-dashboard-pro?ref=vsud"
       type="button"
-    >Upgrade to pro</a>
+      >Upgrade to pro</a
+    >
   </div>
 </template>
 <script>
@@ -100,7 +106,7 @@ export default {
   props: {
     cardBg: {
       type: String,
-      default: ""
+      default: "",
     },
   },
   data() {
diff --git a/src/examples/Sidenav/index.vue b/src/examples/Sidenav/index.vue
index 4243bee..c2a7066 100644
--- a/src/examples/Sidenav/index.vue
+++ b/src/examples/Sidenav/index.vue
@@ -32,13 +32,13 @@ export default {
   props: {
     customClass: {
       type: String,
-      default: ""
+      default: "",
     },
   },
   data() {
     return {
       logo,
-      sidenavActiveBgColors: 'success'
+      sidenavActiveBgColors: "success",
     };
   },
 };
diff --git a/src/main.js b/src/main.js
index 5b80d02..dca0502 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,26 +1,22 @@
 /*
 =========================================================
-* Vite Soft UI Dashboard - v1.0.0
+* Vite Soft UI Dashboard - v1.0.1
 =========================================================
 * Product Page: https://creative-tim.com/product/vite-soft-ui-dashboard
-* Copyright 2022 Creative Tim (https://www.creative-tim.com)
+* Copyright 2023 Creative Tim (https://www.creative-tim.com)
 Coded by www.creative-tim.com
 * Licensed under MIT (https://github.com/creativetimofficial/vite-soft-ui-dashboard/blob/556f77210e261adc3ec12197dab1471a1295afd8/LICENSE.md)
 =========================================================
 
 * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-*/ 
+*/
 
-import { createApp } from 'vue'
-import App from './App.vue'
+import { createApp } from "vue";
+import App from "./App.vue";
 import store from "./store";
 import router from "./router";
 import "./assets/css/nucleo-icons.css";
 import "./assets/css/nucleo-svg.css";
 import SoftUIDashboard from "./soft-ui-dashboard";
 
-createApp(App)
-    .use(store)
-    .use(router)
-    .use(SoftUIDashboard)
-    .mount('#app')
+createApp(App).use(store).use(router).use(SoftUIDashboard).mount("#app");
diff --git a/src/soft-ui-dashboard.js b/src/soft-ui-dashboard.js
index a8fee6e..5d41fbd 100644
--- a/src/soft-ui-dashboard.js
+++ b/src/soft-ui-dashboard.js
@@ -1,6 +1,6 @@
-import "./assets/js/nav-pills.js";
-import "./assets/scss/soft-ui-dashboard.scss";
-
-export default {
-  install() {},
-};
+import "./assets/js/nav-pills.js";
+import "./assets/scss/soft-ui-dashboard.scss";
+
+export default {
+  install() {},
+};
diff --git a/src/views/Billing.vue b/src/views/Billing.vue
index e512509..ece3785 100644
--- a/src/views/Billing.vue
+++ b/src/views/Billing.vue
@@ -1,95 +1,95 @@
-<template>
-  <div class="container-fluid mt-4">
-    <div class="row align-items-center">
-      <div class="col-lg-4 col-sm-8">
-        <nav-pill />
-      </div>
-    </div>
-    <div class="row">
-      <div class="col-lg-8">
-        <div class="row mt-4">
-          <div class="col-xl-6 mb-xl-0 mb-4">
-            <master-card />
-          </div>
-          <div class="col-xl-6">
-            <div class="row">
-              <div class="col-md-6">
-                <default-info-card
-                  :class-icon="salary.classIcon"
-                  :title="salary.title"
-                  :desc="salary.desc"
-                  :price="salary.price"
-                />
-              </div>
-              <div class="col-md-6">
-                <default-info-card
-                  :class-icon="paypal.classIcon"
-                  :title="paypal.title"
-                  :desc="paypal.desc"
-                  :price="paypal.price"
-                />
-              </div>
-            </div>
-          </div>
-          <div class="col-md-12 mb-4">
-            <payment-card />
-          </div>
-        </div>
-      </div>
-      <div class="col-lg-4">
-        <invoice-card />
-      </div>
-    </div>
-    <div class="row mt-4">
-      <div class="col-md-7">
-        <billing-card />
-      </div>
-      <div class="col-md-5 mt-4">
-        <transaction-card />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import setTooltip from "@/assets/js/tooltip.js";
-import NavPill from "./components/NavPill.vue";
-import MasterCard from "@/examples/Cards/MasterCard.vue";
-import DefaultInfoCard from "@/examples/Cards/DefaultInfoCard.vue";
-import PaymentCard from "./components/PaymentCard.vue";
-import InvoiceCard from "./components/InvoiceCard.vue";
-import BillingCard from "./components/BillingCard.vue";
-import TransactionCard from "./components/TransactionCard.vue";
-
-export default {
-  name: "BillingPage",
-  components: {
-    NavPill,
-    MasterCard,
-    DefaultInfoCard,
-    PaymentCard,
-    InvoiceCard,
-    BillingCard,
-    TransactionCard,
-  },
-  data() {
-    return {
-      salary: {
-        classIcon: "text-white fas fa-landmark",
-        title: "Salary",
-        desc: "Belong Interactive",
-        price: "+$2000",
-      },
-      paypal: {
-        classIcon: "text-white fab fa-paypal",
-        title: "Paypal",
-        desc: "Freelance Payment",
-        price: "$455.00",
-      },
-    };
-  },
-  mounted() {
-    setTooltip();
-  },
-};
-</script>
+<template>
+  <div class="container-fluid mt-4">
+    <div class="row align-items-center">
+      <div class="col-lg-4 col-sm-8">
+        <nav-pill />
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-lg-8">
+        <div class="row mt-4">
+          <div class="col-xl-6 mb-xl-0 mb-4">
+            <master-card />
+          </div>
+          <div class="col-xl-6">
+            <div class="row">
+              <div class="col-md-6">
+                <default-info-card
+                  :class-icon="salary.classIcon"
+                  :title="salary.title"
+                  :desc="salary.desc"
+                  :price="salary.price"
+                />
+              </div>
+              <div class="col-md-6">
+                <default-info-card
+                  :class-icon="paypal.classIcon"
+                  :title="paypal.title"
+                  :desc="paypal.desc"
+                  :price="paypal.price"
+                />
+              </div>
+            </div>
+          </div>
+          <div class="col-md-12 mb-4">
+            <payment-card />
+          </div>
+        </div>
+      </div>
+      <div class="col-lg-4">
+        <invoice-card />
+      </div>
+    </div>
+    <div class="row mt-4">
+      <div class="col-md-7">
+        <billing-card />
+      </div>
+      <div class="col-md-5 mt-4">
+        <transaction-card />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import setTooltip from "@/assets/js/tooltip.js";
+import NavPill from "./components/NavPill.vue";
+import MasterCard from "@/examples/Cards/MasterCard.vue";
+import DefaultInfoCard from "@/examples/Cards/DefaultInfoCard.vue";
+import PaymentCard from "./components/PaymentCard.vue";
+import InvoiceCard from "./components/InvoiceCard.vue";
+import BillingCard from "./components/BillingCard.vue";
+import TransactionCard from "./components/TransactionCard.vue";
+
+export default {
+  name: "BillingPage",
+  components: {
+    NavPill,
+    MasterCard,
+    DefaultInfoCard,
+    PaymentCard,
+    InvoiceCard,
+    BillingCard,
+    TransactionCard,
+  },
+  data() {
+    return {
+      salary: {
+        classIcon: "text-white fas fa-landmark",
+        title: "Salary",
+        desc: "Belong Interactive",
+        price: "+$2000",
+      },
+      paypal: {
+        classIcon: "text-white fab fa-paypal",
+        title: "Paypal",
+        desc: "Freelance Payment",
+        price: "$455.00",
+      },
+    };
+  },
+  mounted() {
+    setTooltip();
+  },
+};
+</script>
diff --git a/src/views/Profile.vue b/src/views/Profile.vue
index f2ebac6..7e33ecc 100644
--- a/src/views/Profile.vue
+++ b/src/views/Profile.vue
@@ -3,7 +3,7 @@
     <div
       class="mt-4 page-header min-height-300 border-radius-xl"
       :style="{
-        backgroundImage:`url(${bgImg})`,
+        backgroundImage: `url(${bgImg})`,
 
         backgroundPositionY: '50%',
       }"
@@ -496,7 +496,7 @@ import team1 from "@/assets/img/team-1.jpg";
 import team2 from "@/assets/img/team-2.jpg";
 import team3 from "@/assets/img/team-3.jpg";
 import team4 from "@/assets/img/team-4.jpg";
-import bgImg from "@/assets/img/curved-images/curved14.jpg"
+import bgImg from "@/assets/img/curved-images/curved14.jpg";
 import ProjectsCard from "./components/ProjectOverviewCard.vue";
 
 import setNavPills from "@/assets/js/nav-pills.js";
@@ -525,7 +525,7 @@ export default {
       team4,
       img2,
       img3,
-      bgImg
+      bgImg,
     };
   },
 
diff --git a/src/views/SignUp.vue b/src/views/SignUp.vue
index 23642f9..5a892cc 100644
--- a/src/views/SignUp.vue
+++ b/src/views/SignUp.vue
@@ -1,228 +1,228 @@
-<template>
-  <navbar btn-background="bg-gradient-primary" />
-  <div
-    class="pt-5 m-3 page-header align-items-start min-vh-50 pb-11 border-radius-lg"
-    :style="{
-      backgroundImage: `url(${bgImg})`,
-    }"
-  >
-    <span class="mask bg-gradient-dark opacity-6"></span>
-    <div class="container">
-      <div class="row justify-content-center">
-        <div class="mx-auto text-center col-lg-5">
-          <h1 class="mt-5 mb-2 text-white">Welcome!</h1>
-          <p class="text-white text-lead">
-            Use these awesome forms to login or create new account in your
-            project for free.
-          </p>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="container">
-    <div class="row mt-lg-n10 mt-md-n11 mt-n10 justify-content-center">
-      <div class="mx-auto col-xl-4 col-lg-5 col-md-7">
-        <div class="card z-index-0">
-          <div class="pt-4 text-center card-header">
-            <h5>Register with</h5>
-          </div>
-          <div class="px-3 row px-xl-5 px-sm-4">
-            <div class="px-1 col-3 ms-auto">
-              <a class="btn btn-outline-light w-100" href="javascript:;">
-                <svg
-                  width="24px"
-                  height="32px"
-                  viewBox="0 0 64 64"
-                  version="1.1"
-                >
-                  <g
-                    stroke="none"
-                    stroke-width="1"
-                    fill="none"
-                    fill-rule="evenodd"
-                  >
-                    <g
-                      transform="translate(3.000000, 3.000000)"
-                      fill-rule="nonzero"
-                    >
-                      <circle
-                        fill="#3C5A9A"
-                        cx="29.5091719"
-                        cy="29.4927506"
-                        r="29.4882047"
-                      />
-                      <path
-                        d="M39.0974944,9.05587273 L32.5651312,9.05587273 C28.6886088,9.05587273 24.3768224,10.6862851 24.3768224,16.3054653 C24.395747,18.2634019 24.3768224,20.1385313 24.3768224,22.2488655 L19.8922122,22.2488655 L19.8922122,29.3852113 L24.5156022,29.3852113 L24.5156022,49.9295284 L33.0113092,49.9295284 L33.0113092,29.2496356 L38.6187742,29.2496356 L39.1261316,22.2288395 L32.8649196,22.2288395 C32.8649196,22.2288395 32.8789377,19.1056932 32.8649196,18.1987181 C32.8649196,15.9781412 35.1755132,16.1053059 35.3144932,16.1053059 C36.4140178,16.1053059 38.5518876,16.1085101 39.1006986,16.1053059 L39.1006986,9.05587273 L39.0974944,9.05587273 L39.0974944,9.05587273 Z"
-                        fill="#FFFFFF"
-                      />
-                    </g>
-                  </g>
-                </svg>
-              </a>
-            </div>
-            <div class="px-1 col-3">
-              <a class="btn btn-outline-light w-100" href="javascript:;">
-                <svg
-                  width="24px"
-                  height="32px"
-                  viewBox="0 0 64 64"
-                  version="1.1"
-                >
-                  <g
-                    stroke="none"
-                    stroke-width="1"
-                    fill="none"
-                    fill-rule="evenodd"
-                  >
-                    <g
-                      transform="translate(7.000000, 0.564551)"
-                      fill="#000000"
-                      fill-rule="nonzero"
-                    >
-                      <path
-                        d="M40.9233048,32.8428307 C41.0078713,42.0741676 48.9124247,45.146088 49,45.1851909 C48.9331634,45.4017274 47.7369821,49.5628653 44.835501,53.8610269 C42.3271952,57.5771105 39.7241148,61.2793611 35.6233362,61.356042 C31.5939073,61.431307 30.2982233,58.9340578 25.6914424,58.9340578 C21.0860585,58.9340578 19.6464932,61.27947 15.8321878,61.4314159 C11.8738936,61.5833617 8.85958554,57.4131833 6.33064852,53.7107148 C1.16284874,46.1373849 -2.78641926,32.3103122 2.51645059,22.9768066 C5.15080028,18.3417501 9.85858819,15.4066355 14.9684701,15.3313705 C18.8554146,15.2562145 22.5241194,17.9820905 24.9003639,17.9820905 C27.275104,17.9820905 31.733383,14.7039812 36.4203248,15.1854154 C38.3824403,15.2681959 43.8902255,15.9888223 47.4267616,21.2362369 C47.1417927,21.4153043 40.8549638,25.1251794 40.9233048,32.8428307 M33.3504628,10.1750144 C35.4519466,7.59650964 36.8663676,4.00699306 36.4804992,0.435448578 C33.4513624,0.558856931 29.7884601,2.48154382 27.6157341,5.05863265 C25.6685547,7.34076135 23.9632549,10.9934525 24.4233742,14.4943068 C27.7996959,14.7590956 31.2488715,12.7551531 33.3504628,10.1750144"
-                      />
-                    </g>
-                  </g>
-                </svg>
-              </a>
-            </div>
-            <div class="px-1 col-3 me-auto">
-              <a class="btn btn-outline-light w-100" href="javascript:;">
-                <svg
-                  width="24px"
-                  height="32px"
-                  viewBox="0 0 64 64"
-                  version="1.1"
-                >
-                  <g
-                    stroke="none"
-                    stroke-width="1"
-                    fill="none"
-                    fill-rule="evenodd"
-                  >
-                    <g
-                      transform="translate(3.000000, 2.000000)"
-                      fill-rule="nonzero"
-                    >
-                      <path
-                        d="M57.8123233,30.1515267 C57.8123233,27.7263183 57.6155321,25.9565533 57.1896408,24.1212666 L29.4960833,24.1212666 L29.4960833,35.0674653 L45.7515771,35.0674653 C45.4239683,37.7877475 43.6542033,41.8844383 39.7213169,44.6372555 L39.6661883,45.0037254 L48.4223791,51.7870338 L49.0290201,51.8475849 C54.6004021,46.7020943 57.8123233,39.1313952 57.8123233,30.1515267"
-                        fill="#4285F4"
-                      />
-                      <path
-                        d="M29.4960833,58.9921667 C37.4599129,58.9921667 44.1456164,56.3701671 49.0290201,51.8475849 L39.7213169,44.6372555 C37.2305867,46.3742596 33.887622,47.5868638 29.4960833,47.5868638 C21.6960582,47.5868638 15.0758763,42.4415991 12.7159637,35.3297782 L12.3700541,35.3591501 L3.26524241,42.4054492 L3.14617358,42.736447 C7.9965904,52.3717589 17.959737,58.9921667 29.4960833,58.9921667"
-                        fill="#34A853"
-                      />
-                      <path
-                        d="M12.7159637,35.3297782 C12.0932812,33.4944915 11.7329116,31.5279353 11.7329116,29.4960833 C11.7329116,27.4640054 12.0932812,25.4976752 12.6832029,23.6623884 L12.6667095,23.2715173 L3.44779955,16.1120237 L3.14617358,16.2554937 C1.14708246,20.2539019 0,24.7439491 0,29.4960833 C0,34.2482175 1.14708246,38.7380388 3.14617358,42.736447 L12.7159637,35.3297782"
-                        fill="#FBBC05"
-                      />
-                      <path
-                        d="M29.4960833,11.4050769 C35.0347044,11.4050769 38.7707997,13.7975244 40.9011602,15.7968415 L49.2255853,7.66898166 C44.1130815,2.91684746 37.4599129,0 29.4960833,0 C17.959737,0 7.9965904,6.62018183 3.14617358,16.2554937 L12.6832029,23.6623884 C15.0758763,16.5505675 21.6960582,11.4050769 29.4960833,11.4050769"
-                        fill="#EB4335"
-                      />
-                    </g>
-                  </g>
-                </svg>
-              </a>
-            </div>
-            <div class="mt-2 position-relative text-center">
-              <p
-                class="text-sm font-weight-bold mb-2 text-secondary text-border d-inline z-index-2 bg-white px-3"
-              >
-                or
-              </p>
-            </div>
-          </div>
-          <div class="card-body">
-            <form role="form">
-              <div class="mb-3">
-                <vsud-input
-                  id="name"
-                  type="text"
-                  placeholder="Name"
-                  aria-label="Name"
-                />
-              </div>
-              <div class="mb-3">
-                <vsud-input
-                  id="email"
-                  type="email"
-                  placeholder="Email"
-                  aria-label="Email"
-                />
-              </div>
-              <div class="mb-3">
-                <vsud-input
-                  id="password"
-                  type="password"
-                  placeholder="Password"
-                  aria-label="Password"
-                />
-              </div>
-              <vsud-checkbox id="flexCheckDefault" checked>
-                I agree the
-                <a href="javascript:;" class="text-dark font-weight-bolder"
-                  >Terms and Conditions</a
-                >
-              </vsud-checkbox>
-
-              <div class="text-center">
-                <vsud-button
-                  color="dark"
-                  full-width
-                  variant="gradient"
-                  class="my-4 mb-2"
-                  >Sign up</vsud-button
-                >
-              </div>
-              <p class="text-sm mt-3 mb-0">
-                Already have an account?
-                <a href="javascript:;" class="text-dark font-weight-bolder"
-                  >Sign in</a
-                >
-              </p>
-            </form>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <app-footer />
-</template>
-
-<script>
-import Navbar from "@/examples/PageLayout/Navbar.vue";
-import AppFooter from "@/examples/PageLayout/Footer.vue";
-import VsudInput from "@/components/VsudInput.vue";
-import VsudCheckbox from "@/components/VsudCheckbox.vue";
-import VsudButton from "@/components/VsudButton.vue";
-import bgImg from "@/assets/img/curved-images/curved6.jpg";
-export default {
-  name: "SignUp",
-  components: {
-    Navbar,
-    AppFooter,
-    VsudInput,
-    VsudCheckbox,
-    VsudButton,
-  },
-  data() {
-    return {
-      bgImg,
-    };
-  },
-  created() {
-    this.$store.state.hideConfigButton = true;
-    this.$store.state.showNavbar = false;
-    this.$store.state.showSidenav = false;
-    this.$store.state.showFooter = false;
-  },
-  beforeUnmount() {
-    this.$store.state.hideConfigButton = false;
-    this.$store.state.showNavbar = true;
-    this.$store.state.showSidenav = true;
-    this.$store.state.showFooter = true;
-  },
-};
-</script>
+<template>
+  <navbar btn-background="bg-gradient-primary" />
+  <div
+    class="pt-5 m-3 page-header align-items-start min-vh-50 pb-11 border-radius-lg"
+    :style="{
+      backgroundImage: `url(${bgImg})`,
+    }"
+  >
+    <span class="mask bg-gradient-dark opacity-6"></span>
+    <div class="container">
+      <div class="row justify-content-center">
+        <div class="mx-auto text-center col-lg-5">
+          <h1 class="mt-5 mb-2 text-white">Welcome!</h1>
+          <p class="text-white text-lead">
+            Use these awesome forms to login or create new account in your
+            project for free.
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="container">
+    <div class="row mt-lg-n10 mt-md-n11 mt-n10 justify-content-center">
+      <div class="mx-auto col-xl-4 col-lg-5 col-md-7">
+        <div class="card z-index-0">
+          <div class="pt-4 text-center card-header">
+            <h5>Register with</h5>
+          </div>
+          <div class="px-3 row px-xl-5 px-sm-4">
+            <div class="px-1 col-3 ms-auto">
+              <a class="btn btn-outline-light w-100" href="javascript:;">
+                <svg
+                  width="24px"
+                  height="32px"
+                  viewBox="0 0 64 64"
+                  version="1.1"
+                >
+                  <g
+                    stroke="none"
+                    stroke-width="1"
+                    fill="none"
+                    fill-rule="evenodd"
+                  >
+                    <g
+                      transform="translate(3.000000, 3.000000)"
+                      fill-rule="nonzero"
+                    >
+                      <circle
+                        fill="#3C5A9A"
+                        cx="29.5091719"
+                        cy="29.4927506"
+                        r="29.4882047"
+                      />
+                      <path
+                        d="M39.0974944,9.05587273 L32.5651312,9.05587273 C28.6886088,9.05587273 24.3768224,10.6862851 24.3768224,16.3054653 C24.395747,18.2634019 24.3768224,20.1385313 24.3768224,22.2488655 L19.8922122,22.2488655 L19.8922122,29.3852113 L24.5156022,29.3852113 L24.5156022,49.9295284 L33.0113092,49.9295284 L33.0113092,29.2496356 L38.6187742,29.2496356 L39.1261316,22.2288395 L32.8649196,22.2288395 C32.8649196,22.2288395 32.8789377,19.1056932 32.8649196,18.1987181 C32.8649196,15.9781412 35.1755132,16.1053059 35.3144932,16.1053059 C36.4140178,16.1053059 38.5518876,16.1085101 39.1006986,16.1053059 L39.1006986,9.05587273 L39.0974944,9.05587273 L39.0974944,9.05587273 Z"
+                        fill="#FFFFFF"
+                      />
+                    </g>
+                  </g>
+                </svg>
+              </a>
+            </div>
+            <div class="px-1 col-3">
+              <a class="btn btn-outline-light w-100" href="javascript:;">
+                <svg
+                  width="24px"
+                  height="32px"
+                  viewBox="0 0 64 64"
+                  version="1.1"
+                >
+                  <g
+                    stroke="none"
+                    stroke-width="1"
+                    fill="none"
+                    fill-rule="evenodd"
+                  >
+                    <g
+                      transform="translate(7.000000, 0.564551)"
+                      fill="#000000"
+                      fill-rule="nonzero"
+                    >
+                      <path
+                        d="M40.9233048,32.8428307 C41.0078713,42.0741676 48.9124247,45.146088 49,45.1851909 C48.9331634,45.4017274 47.7369821,49.5628653 44.835501,53.8610269 C42.3271952,57.5771105 39.7241148,61.2793611 35.6233362,61.356042 C31.5939073,61.431307 30.2982233,58.9340578 25.6914424,58.9340578 C21.0860585,58.9340578 19.6464932,61.27947 15.8321878,61.4314159 C11.8738936,61.5833617 8.85958554,57.4131833 6.33064852,53.7107148 C1.16284874,46.1373849 -2.78641926,32.3103122 2.51645059,22.9768066 C5.15080028,18.3417501 9.85858819,15.4066355 14.9684701,15.3313705 C18.8554146,15.2562145 22.5241194,17.9820905 24.9003639,17.9820905 C27.275104,17.9820905 31.733383,14.7039812 36.4203248,15.1854154 C38.3824403,15.2681959 43.8902255,15.9888223 47.4267616,21.2362369 C47.1417927,21.4153043 40.8549638,25.1251794 40.9233048,32.8428307 M33.3504628,10.1750144 C35.4519466,7.59650964 36.8663676,4.00699306 36.4804992,0.435448578 C33.4513624,0.558856931 29.7884601,2.48154382 27.6157341,5.05863265 C25.6685547,7.34076135 23.9632549,10.9934525 24.4233742,14.4943068 C27.7996959,14.7590956 31.2488715,12.7551531 33.3504628,10.1750144"
+                      />
+                    </g>
+                  </g>
+                </svg>
+              </a>
+            </div>
+            <div class="px-1 col-3 me-auto">
+              <a class="btn btn-outline-light w-100" href="javascript:;">
+                <svg
+                  width="24px"
+                  height="32px"
+                  viewBox="0 0 64 64"
+                  version="1.1"
+                >
+                  <g
+                    stroke="none"
+                    stroke-width="1"
+                    fill="none"
+                    fill-rule="evenodd"
+                  >
+                    <g
+                      transform="translate(3.000000, 2.000000)"
+                      fill-rule="nonzero"
+                    >
+                      <path
+                        d="M57.8123233,30.1515267 C57.8123233,27.7263183 57.6155321,25.9565533 57.1896408,24.1212666 L29.4960833,24.1212666 L29.4960833,35.0674653 L45.7515771,35.0674653 C45.4239683,37.7877475 43.6542033,41.8844383 39.7213169,44.6372555 L39.6661883,45.0037254 L48.4223791,51.7870338 L49.0290201,51.8475849 C54.6004021,46.7020943 57.8123233,39.1313952 57.8123233,30.1515267"
+                        fill="#4285F4"
+                      />
+                      <path
+                        d="M29.4960833,58.9921667 C37.4599129,58.9921667 44.1456164,56.3701671 49.0290201,51.8475849 L39.7213169,44.6372555 C37.2305867,46.3742596 33.887622,47.5868638 29.4960833,47.5868638 C21.6960582,47.5868638 15.0758763,42.4415991 12.7159637,35.3297782 L12.3700541,35.3591501 L3.26524241,42.4054492 L3.14617358,42.736447 C7.9965904,52.3717589 17.959737,58.9921667 29.4960833,58.9921667"
+                        fill="#34A853"
+                      />
+                      <path
+                        d="M12.7159637,35.3297782 C12.0932812,33.4944915 11.7329116,31.5279353 11.7329116,29.4960833 C11.7329116,27.4640054 12.0932812,25.4976752 12.6832029,23.6623884 L12.6667095,23.2715173 L3.44779955,16.1120237 L3.14617358,16.2554937 C1.14708246,20.2539019 0,24.7439491 0,29.4960833 C0,34.2482175 1.14708246,38.7380388 3.14617358,42.736447 L12.7159637,35.3297782"
+                        fill="#FBBC05"
+                      />
+                      <path
+                        d="M29.4960833,11.4050769 C35.0347044,11.4050769 38.7707997,13.7975244 40.9011602,15.7968415 L49.2255853,7.66898166 C44.1130815,2.91684746 37.4599129,0 29.4960833,0 C17.959737,0 7.9965904,6.62018183 3.14617358,16.2554937 L12.6832029,23.6623884 C15.0758763,16.5505675 21.6960582,11.4050769 29.4960833,11.4050769"
+                        fill="#EB4335"
+                      />
+                    </g>
+                  </g>
+                </svg>
+              </a>
+            </div>
+            <div class="mt-2 position-relative text-center">
+              <p
+                class="text-sm font-weight-bold mb-2 text-secondary text-border d-inline z-index-2 bg-white px-3"
+              >
+                or
+              </p>
+            </div>
+          </div>
+          <div class="card-body">
+            <form role="form">
+              <div class="mb-3">
+                <vsud-input
+                  id="name"
+                  type="text"
+                  placeholder="Name"
+                  aria-label="Name"
+                />
+              </div>
+              <div class="mb-3">
+                <vsud-input
+                  id="email"
+                  type="email"
+                  placeholder="Email"
+                  aria-label="Email"
+                />
+              </div>
+              <div class="mb-3">
+                <vsud-input
+                  id="password"
+                  type="password"
+                  placeholder="Password"
+                  aria-label="Password"
+                />
+              </div>
+              <vsud-checkbox id="flexCheckDefault" checked>
+                I agree the
+                <a href="javascript:;" class="text-dark font-weight-bolder"
+                  >Terms and Conditions</a
+                >
+              </vsud-checkbox>
+
+              <div class="text-center">
+                <vsud-button
+                  color="dark"
+                  full-width
+                  variant="gradient"
+                  class="my-4 mb-2"
+                  >Sign up</vsud-button
+                >
+              </div>
+              <p class="text-sm mt-3 mb-0">
+                Already have an account?
+                <a href="javascript:;" class="text-dark font-weight-bolder"
+                  >Sign in</a
+                >
+              </p>
+            </form>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <app-footer />
+</template>
+
+<script>
+import Navbar from "@/examples/PageLayout/Navbar.vue";
+import AppFooter from "@/examples/PageLayout/Footer.vue";
+import VsudInput from "@/components/VsudInput.vue";
+import VsudCheckbox from "@/components/VsudCheckbox.vue";
+import VsudButton from "@/components/VsudButton.vue";
+import bgImg from "@/assets/img/curved-images/curved6.jpg";
+export default {
+  name: "SignUp",
+  components: {
+    Navbar,
+    AppFooter,
+    VsudInput,
+    VsudCheckbox,
+    VsudButton,
+  },
+  data() {
+    return {
+      bgImg,
+    };
+  },
+  created() {
+    this.$store.state.hideConfigButton = true;
+    this.$store.state.showNavbar = false;
+    this.$store.state.showSidenav = false;
+    this.$store.state.showFooter = false;
+  },
+  beforeUnmount() {
+    this.$store.state.hideConfigButton = false;
+    this.$store.state.showNavbar = true;
+    this.$store.state.showSidenav = true;
+    this.$store.state.showFooter = true;
+  },
+};
+</script>
diff --git a/src/views/Tables.vue b/src/views/Tables.vue
index 0f3fcf8..275ca33 100644
--- a/src/views/Tables.vue
+++ b/src/views/Tables.vue
@@ -1,27 +1,27 @@
-<template>
-  <div class="py-4 container-fluid">
-    <div class="row">
-      <div class="col-12">
-        <authors-table />
-      </div>
-    </div>
-    <div class="row">
-      <div class="col-12">
-        <projects-table />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import AuthorsTable from "./components/AuthorsTable.vue";
-import ProjectsTable from "./components/ProjectsTable.vue";
-
-export default {
-  name: "TablesPage",
-  components: {
-    AuthorsTable,
-    ProjectsTable,
-  },
-};
-</script>
+<template>
+  <div class="py-4 container-fluid">
+    <div class="row">
+      <div class="col-12">
+        <authors-table />
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-12">
+        <projects-table />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import AuthorsTable from "./components/AuthorsTable.vue";
+import ProjectsTable from "./components/ProjectsTable.vue";
+
+export default {
+  name: "TablesPage",
+  components: {
+    AuthorsTable,
+    ProjectsTable,
+  },
+};
+</script>
diff --git a/src/views/VirtualReality.vue b/src/views/VirtualReality.vue
index 97fac35..7e6ac15 100644
--- a/src/views/VirtualReality.vue
+++ b/src/views/VirtualReality.vue
@@ -3,9 +3,7 @@
     <navbar
       :min-nav="navbarMinimize"
       :toggle="toggleConfigurator"
-      :class="
-        $store.state.isNavFixed ? $store.state.navbarFixed_class : ''
-      "
+      :class="$store.state.isNavFixed ? $store.state.navbarFixed_class : ''"
     />
   </div>
   <div
@@ -15,9 +13,15 @@
       backgroundSize: 'cover',
     }"
   >
-    <sidenav :custom_class="$store.state.mcolor" :class="isTransparent" class="fixed-start" />
+    <sidenav
+      :custom_class="$store.state.mcolor"
+      :class="isTransparent"
+      class="fixed-start"
+    />
     <main class="mt-1 main-content border-radius-lg">
-      <div class="section min-vh-85 position-relative transform-scale-0 transform-scale-md-7">
+      <div
+        class="section min-vh-85 position-relative transform-scale-0 transform-scale-md-7"
+      >
         <div class="container-fluid">
           <div class="pt-10 row">
             <div class="pt-5 text-center col-lg-1 col-md-1 pt-lg-0 ms-lg-5">
@@ -108,7 +112,7 @@ import CardToDo from "./components/CardToDo.vue";
 import CardPlayer from "./components/CardPlayer.vue";
 import CardMessage from "./components/CardMessage.vue";
 import setTooltip from "@/assets/js/tooltip.js";
-import bgImg from '@/assets/img/vr-bg.jpg';
+import bgImg from "@/assets/img/vr-bg.jpg";
 const body = document.getElementsByTagName("body")[0];
 
 import { mapMutations } from "vuex";
@@ -127,8 +131,8 @@ export default {
   },
   data() {
     return {
-      bgImg
-    }
+      bgImg,
+    };
   },
 
   computed: {
@@ -159,7 +163,8 @@ export default {
       this.$store.state.isPinned = true;
     }
     this.$store.state.isTransparent = "bg-transparent";
-  }, methods: {
+  },
+  methods: {
     ...mapMutations(["navbarMinimize", "toggleConfigurator"]),
   },
 };
diff --git a/src/views/components/AuthorsTable.vue b/src/views/components/AuthorsTable.vue
index 9588b61..198985c 100644
--- a/src/views/components/AuthorsTable.vue
+++ b/src/views/components/AuthorsTable.vue
@@ -1,245 +1,333 @@
-<template>
-  <div class="card mb-4">
-    <div class="card-header pb-0">
-      <h6>Authors table</h6>
-    </div>
-    <div class="card-body px-0 pt-0 pb-2">
-      <div class="table-responsive p-0">
-        <table class="table align-items-center mb-0">
-          <thead>
-            <tr>
-              <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Author</th>
-              <th
-                class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2"
-              >Function</th>
-              <th
-                class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7"
-              >Status</th>
-              <th
-                class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7"
-              >Employed</th>
-              <th class="text-secondary opacity-7"></th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td>
-                <div class="d-flex px-2 py-1">
-                  <div>
-                    <vsud-avatar :img="img1" size="sm" border-radius="lg" class="me-3" alt="user1" />
-                  </div>
-                  <div class="d-flex flex-column justify-content-center">
-                    <h6 class="mb-0 text-sm">John Michael</h6>
-                    <p class="text-xs text-secondary mb-0">john@creative-tim.com</p>
-                  </div>
-                </div>
-              </td>
-              <td>
-                <p class="text-xs font-weight-bold mb-0">Manager</p>
-                <p class="text-xs text-secondary mb-0">Organization</p>
-              </td>
-              <td class="align-middle text-center text-sm">
-                <vsud-badge color="success" variant="gradient" size="sm">Online</vsud-badge>
-              </td>
-              <td class="align-middle text-center">
-                <span class="text-secondary text-xs font-weight-bold">23/04/18</span>
-              </td>
-              <td class="align-middle">
-                <a
-                  href="javascript:;"
-                  class="text-secondary font-weight-bold text-xs"
-                  data-toggle="tooltip"
-                  data-original-title="Edit user"
-                >Edit</a>
-              </td>
-            </tr>
-            <tr>
-              <td>
-                <div class="d-flex px-2 py-1">
-                  <div>
-                    <vsud-avatar :img="img2" class="me-3" size="sm" border-radius="lg" alt="user2" />
-                  </div>
-                  <div class="d-flex flex-column justify-content-center">
-                    <h6 class="mb-0 text-sm">Alexa Liras</h6>
-                    <p class="text-xs text-secondary mb-0">alexa@creative-tim.com</p>
-                  </div>
-                </div>
-              </td>
-              <td>
-                <p class="text-xs font-weight-bold mb-0">Programator</p>
-                <p class="text-xs text-secondary mb-0">Developer</p>
-              </td>
-              <td class="align-middle text-center text-sm">
-                <vsud-badge color="secondary" variant="gradient" size="sm">Offline</vsud-badge>
-              </td>
-              <td class="align-middle text-center">
-                <span class="text-secondary text-xs font-weight-bold">11/01/19</span>
-              </td>
-              <td class="align-middle">
-                <a
-                  href="javascript:;"
-                  class="text-secondary font-weight-bold text-xs"
-                  data-toggle="tooltip"
-                  data-original-title="Edit user"
-                >Edit</a>
-              </td>
-            </tr>
-            <tr>
-              <td>
-                <div class="d-flex px-2 py-1">
-                  <div>
-                    <vsud-avatar :img="img3" size="sm" border-radius="lg" class="me-3" alt="user3" />
-                  </div>
-                  <div class="d-flex flex-column justify-content-center">
-                    <h6 class="mb-0 text-sm">Laurent Perrier</h6>
-                    <p class="text-xs text-secondary mb-0">laurent@creative-tim.com</p>
-                  </div>
-                </div>
-              </td>
-              <td>
-                <p class="text-xs font-weight-bold mb-0">Executive</p>
-                <p class="text-xs text-secondary mb-0">Projects</p>
-              </td>
-              <td class="align-middle text-center text-sm">
-                <vsud-badge color="success" variant="gradient" size="sm">Online</vsud-badge>
-              </td>
-              <td class="align-middle text-center">
-                <span class="text-secondary text-xs font-weight-bold">19/09/17</span>
-              </td>
-              <td class="align-middle">
-                <a
-                  href="javascript:;"
-                  class="text-secondary font-weight-bold text-xs"
-                  data-toggle="tooltip"
-                  data-original-title="Edit user"
-                >Edit</a>
-              </td>
-            </tr>
-            <tr>
-              <td>
-                <div class="d-flex px-2 py-1">
-                  <div>
-                    <vsud-avatar :img="img4" class="me-3" size="sm" border-radius="lg" alt="user4" />
-                  </div>
-                  <div class="d-flex flex-column justify-content-center">
-                    <h6 class="mb-0 text-sm">Michael Levi</h6>
-                    <p class="text-xs text-secondary mb-0">michael@creative-tim.com</p>
-                  </div>
-                </div>
-              </td>
-              <td>
-                <p class="text-xs font-weight-bold mb-0">Programator</p>
-                <p class="text-xs text-secondary mb-0">Developer</p>
-              </td>
-              <td class="align-middle text-center text-sm">
-                <vsud-badge color="success" variant="gradient" size="sm">Online</vsud-badge>
-              </td>
-              <td class="align-middle text-center">
-                <span class="text-secondary text-xs font-weight-bold">24/12/08</span>
-              </td>
-              <td class="align-middle">
-                <a
-                  href="javascript:;"
-                  class="text-secondary font-weight-bold text-xs"
-                  data-toggle="tooltip"
-                  data-original-title="Edit user"
-                >Edit</a>
-              </td>
-            </tr>
-            <tr>
-              <td>
-                <div class="d-flex px-2 py-1">
-                  <div>
-                    <vsud-avatar :img="img5" class="me-3" size="sm" border-radius="lg" alt="user5" />
-                  </div>
-                  <div class="d-flex flex-column justify-content-center">
-                    <h6 class="mb-0 text-sm">Richard Gran</h6>
-                    <p class="text-xs text-secondary mb-0">richard@creative-tim.com</p>
-                  </div>
-                </div>
-              </td>
-              <td>
-                <p class="text-xs font-weight-bold mb-0">Manager</p>
-                <p class="text-xs text-secondary mb-0">Executive</p>
-              </td>
-              <td class="align-middle text-center text-sm">
-                <vsud-badge color="secondary" variant="gradient" size="sm">Offline</vsud-badge>
-              </td>
-              <td class="align-middle text-center">
-                <span class="text-secondary text-xs font-weight-bold">04/10/21</span>
-              </td>
-              <td class="align-middle">
-                <a
-                  href="javascript:;"
-                  class="text-secondary font-weight-bold text-xs"
-                  data-toggle="tooltip"
-                  data-original-title="Edit user"
-                >Edit</a>
-              </td>
-            </tr>
-            <tr>
-              <td>
-                <div class="d-flex px-2 py-1">
-                  <div>
-                    <vsud-avatar :img="img6" class="me-3" size="sm" border-radius="lg" alt="user6" />
-                  </div>
-                  <div class="d-flex flex-column justify-content-center">
-                    <h6 class="mb-0 text-sm">Miriam Eric</h6>
-                    <p class="text-xs text-secondary mb-0">miriam@creative-tim.com</p>
-                  </div>
-                </div>
-              </td>
-              <td>
-                <p class="text-xs font-weight-bold mb-0">Programtor</p>
-                <p class="text-xs text-secondary mb-0">Developer</p>
-              </td>
-              <td class="align-middle text-center text-sm">
-                <vsud-badge color="secondary" variant="gradient" size="sm">Offline</vsud-badge>
-              </td>
-              <td class="align-middle text-center">
-                <span class="text-secondary text-xs font-weight-bold">14/09/20</span>
-              </td>
-              <td class="align-middle">
-                <a
-                  href="javascript:;"
-                  class="text-secondary font-weight-bold text-xs"
-                  data-toggle="tooltip"
-                  data-original-title="Edit user"
-                >Edit</a>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import VsudAvatar from "@/components/VsudAvatar.vue";
-import VsudBadge from "@/components/VsudBadge.vue";
-import img1 from "../../assets/img/team-2.jpg";
-import img2 from "../../assets/img/team-3.jpg";
-import img3 from "../../assets/img/team-4.jpg";
-import img4 from "../../assets/img/team-3.jpg";
-import img5 from "../../assets/img/team-2.jpg";
-import img6 from "../../assets/img/team-4.jpg";
-
-export default {
-  name: "AuthorsTable",
-  components: {
-    VsudAvatar,
-    VsudBadge,
-  },
-  data() {
-    return {
-      img1,
-      img2,
-      img3,
-      img4,
-      img5,
-      img6,
-    };
-  },
-};
-</script>
\ No newline at end of file
+<template>
+  <div class="card mb-4">
+    <div class="card-header pb-0">
+      <h6>Authors table</h6>
+    </div>
+    <div class="card-body px-0 pt-0 pb-2">
+      <div class="table-responsive p-0">
+        <table class="table align-items-center mb-0">
+          <thead>
+            <tr>
+              <th
+                class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7"
+              >
+                Author
+              </th>
+              <th
+                class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2"
+              >
+                Function
+              </th>
+              <th
+                class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7"
+              >
+                Status
+              </th>
+              <th
+                class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7"
+              >
+                Employed
+              </th>
+              <th class="text-secondary opacity-7"></th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>
+                <div class="d-flex px-2 py-1">
+                  <div>
+                    <vsud-avatar
+                      :img="img1"
+                      size="sm"
+                      border-radius="lg"
+                      class="me-3"
+                      alt="user1"
+                    />
+                  </div>
+                  <div class="d-flex flex-column justify-content-center">
+                    <h6 class="mb-0 text-sm">John Michael</h6>
+                    <p class="text-xs text-secondary mb-0">
+                      john@creative-tim.com
+                    </p>
+                  </div>
+                </div>
+              </td>
+              <td>
+                <p class="text-xs font-weight-bold mb-0">Manager</p>
+                <p class="text-xs text-secondary mb-0">Organization</p>
+              </td>
+              <td class="align-middle text-center text-sm">
+                <vsud-badge color="success" variant="gradient" size="sm"
+                  >Online</vsud-badge
+                >
+              </td>
+              <td class="align-middle text-center">
+                <span class="text-secondary text-xs font-weight-bold"
+                  >23/04/18</span
+                >
+              </td>
+              <td class="align-middle">
+                <a
+                  href="javascript:;"
+                  class="text-secondary font-weight-bold text-xs"
+                  data-toggle="tooltip"
+                  data-original-title="Edit user"
+                  >Edit</a
+                >
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <div class="d-flex px-2 py-1">
+                  <div>
+                    <vsud-avatar
+                      :img="img2"
+                      class="me-3"
+                      size="sm"
+                      border-radius="lg"
+                      alt="user2"
+                    />
+                  </div>
+                  <div class="d-flex flex-column justify-content-center">
+                    <h6 class="mb-0 text-sm">Alexa Liras</h6>
+                    <p class="text-xs text-secondary mb-0">
+                      alexa@creative-tim.com
+                    </p>
+                  </div>
+                </div>
+              </td>
+              <td>
+                <p class="text-xs font-weight-bold mb-0">Programator</p>
+                <p class="text-xs text-secondary mb-0">Developer</p>
+              </td>
+              <td class="align-middle text-center text-sm">
+                <vsud-badge color="secondary" variant="gradient" size="sm"
+                  >Offline</vsud-badge
+                >
+              </td>
+              <td class="align-middle text-center">
+                <span class="text-secondary text-xs font-weight-bold"
+                  >11/01/19</span
+                >
+              </td>
+              <td class="align-middle">
+                <a
+                  href="javascript:;"
+                  class="text-secondary font-weight-bold text-xs"
+                  data-toggle="tooltip"
+                  data-original-title="Edit user"
+                  >Edit</a
+                >
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <div class="d-flex px-2 py-1">
+                  <div>
+                    <vsud-avatar
+                      :img="img3"
+                      size="sm"
+                      border-radius="lg"
+                      class="me-3"
+                      alt="user3"
+                    />
+                  </div>
+                  <div class="d-flex flex-column justify-content-center">
+                    <h6 class="mb-0 text-sm">Laurent Perrier</h6>
+                    <p class="text-xs text-secondary mb-0">
+                      laurent@creative-tim.com
+                    </p>
+                  </div>
+                </div>
+              </td>
+              <td>
+                <p class="text-xs font-weight-bold mb-0">Executive</p>
+                <p class="text-xs text-secondary mb-0">Projects</p>
+              </td>
+              <td class="align-middle text-center text-sm">
+                <vsud-badge color="success" variant="gradient" size="sm"
+                  >Online</vsud-badge
+                >
+              </td>
+              <td class="align-middle text-center">
+                <span class="text-secondary text-xs font-weight-bold"
+                  >19/09/17</span
+                >
+              </td>
+              <td class="align-middle">
+                <a
+                  href="javascript:;"
+                  class="text-secondary font-weight-bold text-xs"
+                  data-toggle="tooltip"
+                  data-original-title="Edit user"
+                  >Edit</a
+                >
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <div class="d-flex px-2 py-1">
+                  <div>
+                    <vsud-avatar
+                      :img="img4"
+                      class="me-3"
+                      size="sm"
+                      border-radius="lg"
+                      alt="user4"
+                    />
+                  </div>
+                  <div class="d-flex flex-column justify-content-center">
+                    <h6 class="mb-0 text-sm">Michael Levi</h6>
+                    <p class="text-xs text-secondary mb-0">
+                      michael@creative-tim.com
+                    </p>
+                  </div>
+                </div>
+              </td>
+              <td>
+                <p class="text-xs font-weight-bold mb-0">Programator</p>
+                <p class="text-xs text-secondary mb-0">Developer</p>
+              </td>
+              <td class="align-middle text-center text-sm">
+                <vsud-badge color="success" variant="gradient" size="sm"
+                  >Online</vsud-badge
+                >
+              </td>
+              <td class="align-middle text-center">
+                <span class="text-secondary text-xs font-weight-bold"
+                  >24/12/08</span
+                >
+              </td>
+              <td class="align-middle">
+                <a
+                  href="javascript:;"
+                  class="text-secondary font-weight-bold text-xs"
+                  data-toggle="tooltip"
+                  data-original-title="Edit user"
+                  >Edit</a
+                >
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <div class="d-flex px-2 py-1">
+                  <div>
+                    <vsud-avatar
+                      :img="img5"
+                      class="me-3"
+                      size="sm"
+                      border-radius="lg"
+                      alt="user5"
+                    />
+                  </div>
+                  <div class="d-flex flex-column justify-content-center">
+                    <h6 class="mb-0 text-sm">Richard Gran</h6>
+                    <p class="text-xs text-secondary mb-0">
+                      richard@creative-tim.com
+                    </p>
+                  </div>
+                </div>
+              </td>
+              <td>
+                <p class="text-xs font-weight-bold mb-0">Manager</p>
+                <p class="text-xs text-secondary mb-0">Executive</p>
+              </td>
+              <td class="align-middle text-center text-sm">
+                <vsud-badge color="secondary" variant="gradient" size="sm"
+                  >Offline</vsud-badge
+                >
+              </td>
+              <td class="align-middle text-center">
+                <span class="text-secondary text-xs font-weight-bold"
+                  >04/10/21</span
+                >
+              </td>
+              <td class="align-middle">
+                <a
+                  href="javascript:;"
+                  class="text-secondary font-weight-bold text-xs"
+                  data-toggle="tooltip"
+                  data-original-title="Edit user"
+                  >Edit</a
+                >
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <div class="d-flex px-2 py-1">
+                  <div>
+                    <vsud-avatar
+                      :img="img6"
+                      class="me-3"
+                      size="sm"
+                      border-radius="lg"
+                      alt="user6"
+                    />
+                  </div>
+                  <div class="d-flex flex-column justify-content-center">
+                    <h6 class="mb-0 text-sm">Miriam Eric</h6>
+                    <p class="text-xs text-secondary mb-0">
+                      miriam@creative-tim.com
+                    </p>
+                  </div>
+                </div>
+              </td>
+              <td>
+                <p class="text-xs font-weight-bold mb-0">Programtor</p>
+                <p class="text-xs text-secondary mb-0">Developer</p>
+              </td>
+              <td class="align-middle text-center text-sm">
+                <vsud-badge color="secondary" variant="gradient" size="sm"
+                  >Offline</vsud-badge
+                >
+              </td>
+              <td class="align-middle text-center">
+                <span class="text-secondary text-xs font-weight-bold"
+                  >14/09/20</span
+                >
+              </td>
+              <td class="align-middle">
+                <a
+                  href="javascript:;"
+                  class="text-secondary font-weight-bold text-xs"
+                  data-toggle="tooltip"
+                  data-original-title="Edit user"
+                  >Edit</a
+                >
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import VsudAvatar from "@/components/VsudAvatar.vue";
+import VsudBadge from "@/components/VsudBadge.vue";
+import img1 from "../../assets/img/team-2.jpg";
+import img2 from "../../assets/img/team-3.jpg";
+import img3 from "../../assets/img/team-4.jpg";
+import img4 from "../../assets/img/team-3.jpg";
+import img5 from "../../assets/img/team-2.jpg";
+import img6 from "../../assets/img/team-4.jpg";
+
+export default {
+  name: "AuthorsTable",
+  components: {
+    VsudAvatar,
+    VsudBadge,
+  },
+  data() {
+    return {
+      img1,
+      img2,
+      img3,
+      img4,
+      img5,
+      img6,
+    };
+  },
+};
+</script>
diff --git a/src/views/components/BillingCard.vue b/src/views/components/BillingCard.vue
index 703fc58..51f93c3 100644
--- a/src/views/components/BillingCard.vue
+++ b/src/views/components/BillingCard.vue
@@ -1,92 +1,122 @@
-<template>
-  <div class="card">
-    <div class="card-header pb-0 px-3">
-      <h6 class="mb-0">Billing Information</h6>
-    </div>
-    <div class="card-body pt-4 p-3">
-      <ul class="list-group">
-        <li class="list-group-item border-0 d-flex p-4 mb-2 bg-gray-100 border-radius-lg">
-          <div class="d-flex flex-column">
-            <h6 class="mb-3 text-sm">Oliver Liam</h6>
-            <span class="mb-2 text-xs">
-              Company Name:
-              <span class="text-dark font-weight-bold ms-sm-2">Viking Burrito</span>
-            </span>
-            <span class="mb-2 text-xs">
-              Email Address:
-              <span class="text-dark ms-sm-2 font-weight-bold">oliver@burrito.com</span>
-            </span>
-            <span class="text-xs">
-              VAT Number:
-              <span class="text-dark ms-sm-2 font-weight-bold">FRB1235476</span>
-            </span>
-          </div>
-          <div class="ms-auto text-end">
-            <a class="btn btn-link text-danger text-gradient px-3 mb-0" href="javascript:;">
-              <i class="far fa-trash-alt me-2" aria-hidden="true"></i>Delete
-            </a>
-            <a class="btn btn-link text-dark px-3 mb-0" href="javascript:;">
-              <i class="fas fa-pencil-alt text-dark me-2" aria-hidden="true"></i>Edit
-            </a>
-          </div>
-        </li>
-        <li class="list-group-item border-0 d-flex p-4 mb-2 mt-3 bg-gray-100 border-radius-lg">
-          <div class="d-flex flex-column">
-            <h6 class="mb-3 text-sm">Lucas Harper</h6>
-            <span class="mb-2 text-xs">
-              Company Name:
-              <span class="text-dark font-weight-bold ms-sm-2">Stone Tech Zone</span>
-            </span>
-            <span class="mb-2 text-xs">
-              Email Address:
-              <span class="text-dark ms-sm-2 font-weight-bold">lucas@stone-tech.com</span>
-            </span>
-            <span class="text-xs">
-              VAT Number:
-              <span class="text-dark ms-sm-2 font-weight-bold">FRB1235476</span>
-            </span>
-          </div>
-          <div class="ms-auto text-end">
-            <a class="btn btn-link text-danger text-gradient px-3 mb-0" href="javascript:;">
-              <i class="far fa-trash-alt me-2" aria-hidden="true"></i>Delete
-            </a>
-            <a class="btn btn-link text-dark px-3 mb-0" href="javascript:;">
-              <i class="fas fa-pencil-alt text-dark me-2" aria-hidden="true"></i>Edit
-            </a>
-          </div>
-        </li>
-        <li class="list-group-item border-0 d-flex p-4 mb-2 mt-3 bg-gray-100 border-radius-lg">
-          <div class="d-flex flex-column">
-            <h6 class="mb-3 text-sm">Ethan James</h6>
-            <span class="mb-2 text-xs">
-              Company Name:
-              <span class="text-dark font-weight-bold ms-sm-2">Fiber Notion</span>
-            </span>
-            <span class="mb-2 text-xs">
-              Email Address:
-              <span class="text-dark ms-sm-2 font-weight-bold">ethan@fiber.com</span>
-            </span>
-            <span class="text-xs">
-              VAT Number:
-              <span class="text-dark ms-sm-2 font-weight-bold">FRB1235476</span>
-            </span>
-          </div>
-          <div class="ms-auto text-end">
-            <a class="btn btn-link text-danger text-gradient px-3 mb-0" href="javascript:;">
-              <i class="far fa-trash-alt me-2" aria-hidden="true"></i>Delete
-            </a>
-            <a class="btn btn-link text-dark px-3 mb-0" href="javascript:;">
-              <i class="fas fa-pencil-alt text-dark me-2" aria-hidden="true"></i>Edit
-            </a>
-          </div>
-        </li>
-      </ul>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "BillingCard",
-};
-</script>
+<template>
+  <div class="card">
+    <div class="card-header pb-0 px-3">
+      <h6 class="mb-0">Billing Information</h6>
+    </div>
+    <div class="card-body pt-4 p-3">
+      <ul class="list-group">
+        <li
+          class="list-group-item border-0 d-flex p-4 mb-2 bg-gray-100 border-radius-lg"
+        >
+          <div class="d-flex flex-column">
+            <h6 class="mb-3 text-sm">Oliver Liam</h6>
+            <span class="mb-2 text-xs">
+              Company Name:
+              <span class="text-dark font-weight-bold ms-sm-2"
+                >Viking Burrito</span
+              >
+            </span>
+            <span class="mb-2 text-xs">
+              Email Address:
+              <span class="text-dark ms-sm-2 font-weight-bold"
+                >oliver@burrito.com</span
+              >
+            </span>
+            <span class="text-xs">
+              VAT Number:
+              <span class="text-dark ms-sm-2 font-weight-bold">FRB1235476</span>
+            </span>
+          </div>
+          <div class="ms-auto text-end">
+            <a
+              class="btn btn-link text-danger text-gradient px-3 mb-0"
+              href="javascript:;"
+            >
+              <i class="far fa-trash-alt me-2" aria-hidden="true"></i>Delete
+            </a>
+            <a class="btn btn-link text-dark px-3 mb-0" href="javascript:;">
+              <i class="fas fa-pencil-alt text-dark me-2" aria-hidden="true"></i
+              >Edit
+            </a>
+          </div>
+        </li>
+        <li
+          class="list-group-item border-0 d-flex p-4 mb-2 mt-3 bg-gray-100 border-radius-lg"
+        >
+          <div class="d-flex flex-column">
+            <h6 class="mb-3 text-sm">Lucas Harper</h6>
+            <span class="mb-2 text-xs">
+              Company Name:
+              <span class="text-dark font-weight-bold ms-sm-2"
+                >Stone Tech Zone</span
+              >
+            </span>
+            <span class="mb-2 text-xs">
+              Email Address:
+              <span class="text-dark ms-sm-2 font-weight-bold"
+                >lucas@stone-tech.com</span
+              >
+            </span>
+            <span class="text-xs">
+              VAT Number:
+              <span class="text-dark ms-sm-2 font-weight-bold">FRB1235476</span>
+            </span>
+          </div>
+          <div class="ms-auto text-end">
+            <a
+              class="btn btn-link text-danger text-gradient px-3 mb-0"
+              href="javascript:;"
+            >
+              <i class="far fa-trash-alt me-2" aria-hidden="true"></i>Delete
+            </a>
+            <a class="btn btn-link text-dark px-3 mb-0" href="javascript:;">
+              <i class="fas fa-pencil-alt text-dark me-2" aria-hidden="true"></i
+              >Edit
+            </a>
+          </div>
+        </li>
+        <li
+          class="list-group-item border-0 d-flex p-4 mb-2 mt-3 bg-gray-100 border-radius-lg"
+        >
+          <div class="d-flex flex-column">
+            <h6 class="mb-3 text-sm">Ethan James</h6>
+            <span class="mb-2 text-xs">
+              Company Name:
+              <span class="text-dark font-weight-bold ms-sm-2"
+                >Fiber Notion</span
+              >
+            </span>
+            <span class="mb-2 text-xs">
+              Email Address:
+              <span class="text-dark ms-sm-2 font-weight-bold"
+                >ethan@fiber.com</span
+              >
+            </span>
+            <span class="text-xs">
+              VAT Number:
+              <span class="text-dark ms-sm-2 font-weight-bold">FRB1235476</span>
+            </span>
+          </div>
+          <div class="ms-auto text-end">
+            <a
+              class="btn btn-link text-danger text-gradient px-3 mb-0"
+              href="javascript:;"
+            >
+              <i class="far fa-trash-alt me-2" aria-hidden="true"></i>Delete
+            </a>
+            <a class="btn btn-link text-dark px-3 mb-0" href="javascript:;">
+              <i class="fas fa-pencil-alt text-dark me-2" aria-hidden="true"></i
+              >Edit
+            </a>
+          </div>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "BillingCard",
+};
+</script>
diff --git a/src/views/components/CardCalendar.vue b/src/views/components/CardCalendar.vue
index ac125f4..fdb2f06 100644
--- a/src/views/components/CardCalendar.vue
+++ b/src/views/components/CardCalendar.vue
@@ -1,44 +1,44 @@
-<template>
-  <div class="overflow-hidden card move-on-hover">
-    <div class="card-body">
-      <div class="d-flex">
-        <h6 class="mb-0 me-3">08:00</h6>
-        <h6 class="mb-0">
-          Synk up with Mark
-          <small class="text-secondary font-weight-normal">Hangouts</small>
-        </h6>
-      </div>
-      <hr class="horizontal dark" />
-      <div class="d-flex">
-        <h6 class="mb-0 me-3">09:30</h6>
-        <h6 class="mb-0">
-          Gym <br />
-          <small class="text-secondary font-weight-normal">World Class</small>
-        </h6>
-      </div>
-      <hr class="horizontal dark" />
-      <div class="d-flex">
-        <h6 class="mb-0 me-3">11:00</h6>
-        <h6 class="mb-0">
-          Design Review<br />
-          <small class="text-secondary font-weight-normal">Zoom</small>
-        </h6>
-      </div>
-    </div>
-    <a
-      href="javascript:;"
-      class="py-1 text-center bg-gray-100 w-100"
-      data-bs-toggle="tooltip"
-      data-bs-placement="top"
-      title="Show More"
-    >
-      <i class="fas fa-chevron-down text-primary"></i>
-    </a>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "CardCalendar",
-};
-</script>
+<template>
+  <div class="overflow-hidden card move-on-hover">
+    <div class="card-body">
+      <div class="d-flex">
+        <h6 class="mb-0 me-3">08:00</h6>
+        <h6 class="mb-0">
+          Synk up with Mark
+          <small class="text-secondary font-weight-normal">Hangouts</small>
+        </h6>
+      </div>
+      <hr class="horizontal dark" />
+      <div class="d-flex">
+        <h6 class="mb-0 me-3">09:30</h6>
+        <h6 class="mb-0">
+          Gym <br />
+          <small class="text-secondary font-weight-normal">World Class</small>
+        </h6>
+      </div>
+      <hr class="horizontal dark" />
+      <div class="d-flex">
+        <h6 class="mb-0 me-3">11:00</h6>
+        <h6 class="mb-0">
+          Design Review<br />
+          <small class="text-secondary font-weight-normal">Zoom</small>
+        </h6>
+      </div>
+    </div>
+    <a
+      href="javascript:;"
+      class="py-1 text-center bg-gray-100 w-100"
+      data-bs-toggle="tooltip"
+      data-bs-placement="top"
+      title="Show More"
+    >
+      <i class="fas fa-chevron-down text-primary"></i>
+    </a>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "CardCalendar",
+};
+</script>
diff --git a/src/views/components/CardEmail.vue b/src/views/components/CardEmail.vue
index 2471e59..ce20512 100644
--- a/src/views/components/CardEmail.vue
+++ b/src/views/components/CardEmail.vue
@@ -1,24 +1,24 @@
-<template>
-  <div class="mt-4 card move-on-hover">
-    <div class="card-body">
-      <div class="d-flex">
-        <p class="mb-0">Emails (21)</p>
-        <a
-          href="javascript:;"
-          class="ms-auto"
-          data-bs-toggle="tooltip"
-          data-bs-placement="top"
-          title="Check your emails"
-        >
-          Check
-        </a>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "CardEmail",
-};
-</script>
+<template>
+  <div class="mt-4 card move-on-hover">
+    <div class="card-body">
+      <div class="d-flex">
+        <p class="mb-0">Emails (21)</p>
+        <a
+          href="javascript:;"
+          class="ms-auto"
+          data-bs-toggle="tooltip"
+          data-bs-placement="top"
+          title="Check your emails"
+        >
+          Check
+        </a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "CardEmail",
+};
+</script>
diff --git a/src/views/components/CardMessage.vue b/src/views/components/CardMessage.vue
index b4aa4b1..b6d803b 100644
--- a/src/views/components/CardMessage.vue
+++ b/src/views/components/CardMessage.vue
@@ -1,55 +1,55 @@
-<template>
-  <div class="mt-4 card move-on-hover">
-    <div class="card-body">
-      <div class="d-flex">
-        <p class="my-auto">Messages</p>
-        <div class="ms-auto">
-          <div class="avatar-group">
-            <a
-              href="javascript:;"
-              class="border-0 avatar avatar-sm rounded-circle"
-              data-bs-toggle="tooltip"
-              data-bs-placement="top"
-              title="2 New Messages"
-            >
-              <img alt="Image placeholder" src="@/assets/img/team-1.jpg" />
-            </a>
-            <a
-              href="javascript:;"
-              class="border-0 avatar avatar-sm rounded-circle"
-              data-bs-toggle="tooltip"
-              data-bs-placement="top"
-              title="1 New Message"
-            >
-              <img alt="Image placeholder" src="@/assets/img/team-2.jpg" />
-            </a>
-            <a
-              href="javascript:;"
-              class="border-0 avatar avatar-sm rounded-circle"
-              data-bs-toggle="tooltip"
-              data-bs-placement="top"
-              title="13 New Messages"
-            >
-              <img alt="Image placeholder" src="@/assets/img/team-3.jpg" />
-            </a>
-            <a
-              href="javascript:;"
-              class="border-0 avatar avatar-sm rounded-circle"
-              data-bs-toggle="tooltip"
-              data-bs-placement="top"
-              title="7 New Messages"
-            >
-              <img alt="Image placeholder" src="@/assets/img/team-4.jpg" />
-            </a>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "CardMessage",
-};
-</script>
+<template>
+  <div class="mt-4 card move-on-hover">
+    <div class="card-body">
+      <div class="d-flex">
+        <p class="my-auto">Messages</p>
+        <div class="ms-auto">
+          <div class="avatar-group">
+            <a
+              href="javascript:;"
+              class="border-0 avatar avatar-sm rounded-circle"
+              data-bs-toggle="tooltip"
+              data-bs-placement="top"
+              title="2 New Messages"
+            >
+              <img alt="Image placeholder" src="@/assets/img/team-1.jpg" />
+            </a>
+            <a
+              href="javascript:;"
+              class="border-0 avatar avatar-sm rounded-circle"
+              data-bs-toggle="tooltip"
+              data-bs-placement="top"
+              title="1 New Message"
+            >
+              <img alt="Image placeholder" src="@/assets/img/team-2.jpg" />
+            </a>
+            <a
+              href="javascript:;"
+              class="border-0 avatar avatar-sm rounded-circle"
+              data-bs-toggle="tooltip"
+              data-bs-placement="top"
+              title="13 New Messages"
+            >
+              <img alt="Image placeholder" src="@/assets/img/team-3.jpg" />
+            </a>
+            <a
+              href="javascript:;"
+              class="border-0 avatar avatar-sm rounded-circle"
+              data-bs-toggle="tooltip"
+              data-bs-placement="top"
+              title="7 New Messages"
+            >
+              <img alt="Image placeholder" src="@/assets/img/team-4.jpg" />
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "CardMessage",
+};
+</script>
diff --git a/src/views/components/CardPlayer.vue b/src/views/components/CardPlayer.vue
index a967423..73e855e 100644
--- a/src/views/components/CardPlayer.vue
+++ b/src/views/components/CardPlayer.vue
@@ -1,59 +1,59 @@
-<template>
-  <div
-    class="card card-background card-background-mask-success move-on-hover align-items-start"
-  >
-    <div class="cursor-pointer">
-      <div
-        class="full-background"
-         :style="{
-      backgroundImage:`url(${bgImg})`,
-    }"
-      ></div>
-      <div class="card-body">
-        <h5 class="mb-0 text-white">Some Kind Of Blues</h5>
-        <p class="text-sm text-white">Deftones</p>
-        <div class="mt-5 d-flex">
-          <button
-            class="p-2 mb-0 btn btn-outline-white rounded-circle"
-            type="button"
-            data-bs-toggle="tooltip"
-            data-bs-placement="top"
-            title="Prev"
-          >
-            <i class="p-2 fas fa-backward"></i>
-          </button>
-          <button
-            class="p-2 mx-2 mb-0 btn btn-outline-white rounded-circle"
-            type="button"
-            data-bs-toggle="tooltip"
-            data-bs-placement="top"
-            title="Pause"
-          >
-            <i class="p-2 fas fa-play"></i>
-          </button>
-          <button
-            class="p-2 mb-0 btn btn-outline-white rounded-circle"
-            type="button"
-            data-bs-toggle="tooltip"
-            data-bs-placement="top"
-            title="Next"
-          >
-            <i class="p-2 fas fa-forward"></i>
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import bgImg from '@/assets/img/curved-images/curved1.jpg'
-export default {
-  name: "CardPlayer",
-  data() {
-    return {
-      bgImg
-    }
-  },
-};
-</script>
+<template>
+  <div
+    class="card card-background card-background-mask-success move-on-hover align-items-start"
+  >
+    <div class="cursor-pointer">
+      <div
+        class="full-background"
+        :style="{
+          backgroundImage: `url(${bgImg})`,
+        }"
+      ></div>
+      <div class="card-body">
+        <h5 class="mb-0 text-white">Some Kind Of Blues</h5>
+        <p class="text-sm text-white">Deftones</p>
+        <div class="mt-5 d-flex">
+          <button
+            class="p-2 mb-0 btn btn-outline-white rounded-circle"
+            type="button"
+            data-bs-toggle="tooltip"
+            data-bs-placement="top"
+            title="Prev"
+          >
+            <i class="p-2 fas fa-backward"></i>
+          </button>
+          <button
+            class="p-2 mx-2 mb-0 btn btn-outline-white rounded-circle"
+            type="button"
+            data-bs-toggle="tooltip"
+            data-bs-placement="top"
+            title="Pause"
+          >
+            <i class="p-2 fas fa-play"></i>
+          </button>
+          <button
+            class="p-2 mb-0 btn btn-outline-white rounded-circle"
+            type="button"
+            data-bs-toggle="tooltip"
+            data-bs-placement="top"
+            title="Next"
+          >
+            <i class="p-2 fas fa-forward"></i>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import bgImg from "@/assets/img/curved-images/curved1.jpg";
+export default {
+  name: "CardPlayer",
+  data() {
+    return {
+      bgImg,
+    };
+  },
+};
+</script>
diff --git a/src/views/components/CardToDo.vue b/src/views/components/CardToDo.vue
index 016eb10..1032936 100644
--- a/src/views/components/CardToDo.vue
+++ b/src/views/components/CardToDo.vue
@@ -1,30 +1,30 @@
-<template>
-  <div class="card bg-gradient-dark move-on-hover">
-    <div class="card-body">
-      <div class="d-flex">
-        <h5 class="mb-0 text-white">To Do</h5>
-        <div class="ms-auto">
-          <h1 class="mb-0 text-white text-end mt-n2">7</h1>
-          <p class="mb-0 text-sm text-white">items</p>
-        </div>
-      </div>
-      <p class="mb-0 text-white">Shopping</p>
-      <p class="mb-0 text-white">Meeting</p>
-    </div>
-    <a
-      href="javascript:;"
-      class="py-1 text-center w-100"
-      data-bs-toggle="tooltip"
-      data-bs-placement="top"
-      title="Show More"
-    >
-      <i class="text-white fas fa-chevron-down"></i>
-    </a>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "CardTodo",
-};
-</script>
+<template>
+  <div class="card bg-gradient-dark move-on-hover">
+    <div class="card-body">
+      <div class="d-flex">
+        <h5 class="mb-0 text-white">To Do</h5>
+        <div class="ms-auto">
+          <h1 class="mb-0 text-white text-end mt-n2">7</h1>
+          <p class="mb-0 text-sm text-white">items</p>
+        </div>
+      </div>
+      <p class="mb-0 text-white">Shopping</p>
+      <p class="mb-0 text-white">Meeting</p>
+    </div>
+    <a
+      href="javascript:;"
+      class="py-1 text-center w-100"
+      data-bs-toggle="tooltip"
+      data-bs-placement="top"
+      title="Show More"
+    >
+      <i class="text-white fas fa-chevron-down"></i>
+    </a>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "CardTodo",
+};
+</script>
diff --git a/src/views/components/InvoiceCard.vue b/src/views/components/InvoiceCard.vue
index 3982a98..9d292ae 100644
--- a/src/views/components/InvoiceCard.vue
+++ b/src/views/components/InvoiceCard.vue
@@ -1,97 +1,116 @@
-<template>
-  <div class="card h-100 mt-4">
-    <div class="card-header pb-0 p-3">
-      <div class="row">
-        <div class="col-6 d-flex align-items-center">
-          <h6 class="mb-0">Invoices</h6>
-        </div>
-        <div class="col-6 text-end">
-          <vsud-button color="success" size="sm" variant="outline">View All</vsud-button>
-        </div>
-      </div>
-    </div>
-    <div class="card-body p-3 pb-0 mb-0">
-      <ul class="list-group">
-        <li
-          class="list-group-item border-0 d-flex justify-content-between ps-0 mb-2 border-radius-lg"
-        >
-          <div class="d-flex flex-column">
-            <h6 class="mb-1 text-dark font-weight-bold text-sm">March, 01, 2020</h6>
-            <span class="text-xs">#MS-415646</span>
-          </div>
-          <div class="d-flex align-items-center text-sm">
-            $180
-            <button class="btn btn-link text-dark text-sm mb-0 px-0 ms-4">
-              <i class="fas fa-file-pdf text-lg me-1" aria-hidden="true"></i> PDF
-            </button>
-          </div>
-        </li>
-        <li
-          class="list-group-item border-0 d-flex justify-content-between ps-0 mb-2 border-radius-lg"
-        >
-          <div class="d-flex flex-column">
-            <h6 class="text-dark mb-1 font-weight-bold text-sm">February, 10, 2021</h6>
-            <span class="text-xs">#RV-126749</span>
-          </div>
-          <div class="d-flex align-items-center text-sm">
-            $250
-            <button class="btn btn-link text-dark text-sm mb-0 px-0 ms-4">
-              <i class="fas fa-file-pdf text-lg me-1" aria-hidden="true"></i> PDF
-            </button>
-          </div>
-        </li>
-        <li
-          class="list-group-item border-0 d-flex justify-content-between ps-0 mb-2 border-radius-lg"
-        >
-          <div class="d-flex flex-column">
-            <h6 class="text-dark mb-1 font-weight-bold text-sm">April, 05, 2020</h6>
-            <span class="text-xs">#FB-212562</span>
-          </div>
-          <div class="d-flex align-items-center text-sm">
-            $560
-            <button class="btn btn-link text-dark text-sm mb-0 px-0 ms-4">
-              <i class="fas fa-file-pdf text-lg me-1" aria-hidden="true"></i> PDF
-            </button>
-          </div>
-        </li>
-        <li
-          class="list-group-item border-0 d-flex justify-content-between ps-0 mb-2 border-radius-lg"
-        >
-          <div class="d-flex flex-column">
-            <h6 class="text-dark mb-1 font-weight-bold text-sm">June, 25, 2019</h6>
-            <span class="text-xs">#QW-103578</span>
-          </div>
-          <div class="d-flex align-items-center text-sm">
-            $120
-            <button class="btn btn-link text-dark text-sm mb-0 px-0 ms-4">
-              <i class="fas fa-file-pdf text-lg me-1" aria-hidden="true"></i> PDF
-            </button>
-          </div>
-        </li>
-        <li class="list-group-item border-0 d-flex justify-content-between ps-0 border-radius-lg">
-          <div class="d-flex flex-column">
-            <h6 class="text-dark mb-1 font-weight-bold text-sm">March, 01, 2019</h6>
-            <span class="text-xs">#AR-803481</span>
-          </div>
-          <div class="d-flex align-items-center text-sm">
-            $300
-            <button class="btn btn-link text-dark text-sm mb-0 px-0 ms-4">
-              <i class="fas fa-file-pdf text-lg me-1" aria-hidden="true"></i> PDF
-            </button>
-          </div>
-        </li>
-      </ul>
-    </div>
-  </div>
-</template>
-
-<script>
-import VsudButton from "@/components/VsudButton.vue";
-
-export default {
-  name: "InvoiceCard",
-  components: {
-    VsudButton,
-  },
-};
-</script>
+<template>
+  <div class="card h-100 mt-4">
+    <div class="card-header pb-0 p-3">
+      <div class="row">
+        <div class="col-6 d-flex align-items-center">
+          <h6 class="mb-0">Invoices</h6>
+        </div>
+        <div class="col-6 text-end">
+          <vsud-button color="success" size="sm" variant="outline"
+            >View All</vsud-button
+          >
+        </div>
+      </div>
+    </div>
+    <div class="card-body p-3 pb-0 mb-0">
+      <ul class="list-group">
+        <li
+          class="list-group-item border-0 d-flex justify-content-between ps-0 mb-2 border-radius-lg"
+        >
+          <div class="d-flex flex-column">
+            <h6 class="mb-1 text-dark font-weight-bold text-sm">
+              March, 01, 2020
+            </h6>
+            <span class="text-xs">#MS-415646</span>
+          </div>
+          <div class="d-flex align-items-center text-sm">
+            $180
+            <button class="btn btn-link text-dark text-sm mb-0 px-0 ms-4">
+              <i class="fas fa-file-pdf text-lg me-1" aria-hidden="true"></i>
+              PDF
+            </button>
+          </div>
+        </li>
+        <li
+          class="list-group-item border-0 d-flex justify-content-between ps-0 mb-2 border-radius-lg"
+        >
+          <div class="d-flex flex-column">
+            <h6 class="text-dark mb-1 font-weight-bold text-sm">
+              February, 10, 2021
+            </h6>
+            <span class="text-xs">#RV-126749</span>
+          </div>
+          <div class="d-flex align-items-center text-sm">
+            $250
+            <button class="btn btn-link text-dark text-sm mb-0 px-0 ms-4">
+              <i class="fas fa-file-pdf text-lg me-1" aria-hidden="true"></i>
+              PDF
+            </button>
+          </div>
+        </li>
+        <li
+          class="list-group-item border-0 d-flex justify-content-between ps-0 mb-2 border-radius-lg"
+        >
+          <div class="d-flex flex-column">
+            <h6 class="text-dark mb-1 font-weight-bold text-sm">
+              April, 05, 2020
+            </h6>
+            <span class="text-xs">#FB-212562</span>
+          </div>
+          <div class="d-flex align-items-center text-sm">
+            $560
+            <button class="btn btn-link text-dark text-sm mb-0 px-0 ms-4">
+              <i class="fas fa-file-pdf text-lg me-1" aria-hidden="true"></i>
+              PDF
+            </button>
+          </div>
+        </li>
+        <li
+          class="list-group-item border-0 d-flex justify-content-between ps-0 mb-2 border-radius-lg"
+        >
+          <div class="d-flex flex-column">
+            <h6 class="text-dark mb-1 font-weight-bold text-sm">
+              June, 25, 2019
+            </h6>
+            <span class="text-xs">#QW-103578</span>
+          </div>
+          <div class="d-flex align-items-center text-sm">
+            $120
+            <button class="btn btn-link text-dark text-sm mb-0 px-0 ms-4">
+              <i class="fas fa-file-pdf text-lg me-1" aria-hidden="true"></i>
+              PDF
+            </button>
+          </div>
+        </li>
+        <li
+          class="list-group-item border-0 d-flex justify-content-between ps-0 border-radius-lg"
+        >
+          <div class="d-flex flex-column">
+            <h6 class="text-dark mb-1 font-weight-bold text-sm">
+              March, 01, 2019
+            </h6>
+            <span class="text-xs">#AR-803481</span>
+          </div>
+          <div class="d-flex align-items-center text-sm">
+            $300
+            <button class="btn btn-link text-dark text-sm mb-0 px-0 ms-4">
+              <i class="fas fa-file-pdf text-lg me-1" aria-hidden="true"></i>
+              PDF
+            </button>
+          </div>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+import VsudButton from "@/components/VsudButton.vue";
+
+export default {
+  name: "InvoiceCard",
+  components: {
+    VsudButton,
+  },
+};
+</script>
diff --git a/src/views/components/NavPill.vue b/src/views/components/NavPill.vue
index cced081..d059558 100644
--- a/src/views/components/NavPill.vue
+++ b/src/views/components/NavPill.vue
@@ -1,57 +1,57 @@
-<template>
-  <div class="nav-wrapper position-relative end-0">
-    <ul class="nav nav-pills nav-fill p-1" role="tablist">
-      <li class="nav-item">
-        <a
-          class="nav-link mb-0 px-0 py-1 active active"
-          data-bs-toggle="tab"
-          href="../../../examples/pages/account/settings.html"
-          role="tab"
-          aria-selected="true"
-          >Messages</a
-        >
-      </li>
-      <li class="nav-item">
-        <a
-          class="nav-link mb-0 px-0 py-1"
-          data-bs-toggle="tab"
-          href="../../../examples/pages/account/billing.html"
-          role="tab"
-          aria-selected="false"
-          >Social</a
-        >
-      </li>
-      <li class="nav-item">
-        <a
-          class="nav-link mb-0 px-0 py-1"
-          data-bs-toggle="tab"
-          href="../../../examples/pages/account/invoice.html"
-          role="tab"
-          aria-selected="false"
-          >Notifications</a
-        >
-      </li>
-      <li class="nav-item">
-        <a
-          class="nav-link mb-0 px-0 py-1"
-          data-bs-toggle="tab"
-          href="../../../examples/pages/account/security.html"
-          role="tab"
-          aria-selected="false"
-          >Backup</a
-        >
-      </li>
-    </ul>
-  </div>
-</template>
-
-<script>
-import setNavPills from "@/assets/js/nav-pills.js";
-
-export default {
-  name: "NavPill",
-  mounted() {
-    setNavPills();
-  },
-};
-</script>
+<template>
+  <div class="nav-wrapper position-relative end-0">
+    <ul class="nav nav-pills nav-fill p-1" role="tablist">
+      <li class="nav-item">
+        <a
+          class="nav-link mb-0 px-0 py-1 active active"
+          data-bs-toggle="tab"
+          href="../../../examples/pages/account/settings.html"
+          role="tab"
+          aria-selected="true"
+          >Messages</a
+        >
+      </li>
+      <li class="nav-item">
+        <a
+          class="nav-link mb-0 px-0 py-1"
+          data-bs-toggle="tab"
+          href="../../../examples/pages/account/billing.html"
+          role="tab"
+          aria-selected="false"
+          >Social</a
+        >
+      </li>
+      <li class="nav-item">
+        <a
+          class="nav-link mb-0 px-0 py-1"
+          data-bs-toggle="tab"
+          href="../../../examples/pages/account/invoice.html"
+          role="tab"
+          aria-selected="false"
+          >Notifications</a
+        >
+      </li>
+      <li class="nav-item">
+        <a
+          class="nav-link mb-0 px-0 py-1"
+          data-bs-toggle="tab"
+          href="../../../examples/pages/account/security.html"
+          role="tab"
+          aria-selected="false"
+          >Backup</a
+        >
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import setNavPills from "@/assets/js/nav-pills.js";
+
+export default {
+  name: "NavPill",
+  mounted() {
+    setNavPills();
+  },
+};
+</script>
diff --git a/src/views/components/OrdersCard.vue b/src/views/components/OrdersCard.vue
index 916f87b..a889726 100644
--- a/src/views/components/OrdersCard.vue
+++ b/src/views/components/OrdersCard.vue
@@ -1,134 +1,156 @@
-<template>
-  <div class="card h-100">
-    <div class="card-header pb-0">
-      <h6>{{ title }}</h6>
-      <p class="text-sm">
-        <i class="fa fa-arrow-up text-success" aria-hidden="true"></i>
-        <span class="font-weight-bold">24%</span>
-        {{ text }}
-      </p>
-    </div>
-    <div class="card-body p-3">
-      <div class="timeline timeline-one-side">
-        <div class="timeline-block mb-3">
-          <span class="timeline-step">
-            <i class="ni ni-bell-55 text-success text-gradient"></i>
-          </span>
-          <div class="timeline-content">
-            <h6 class="text-dark text-sm font-weight-bold mb-0">{{ order }}</h6>
-            <p class="text-secondary font-weight-bold text-xs mt-1 mb-0">{{ date }}</p>
-          </div>
-        </div>
-        <div class="timeline-block mb-3">
-          <span class="timeline-step">
-            <i class="ni ni-html5 text-danger text-gradient"></i>
-          </span>
-          <div class="timeline-content">
-            <h6 class="text-dark text-sm font-weight-bold mb-0">{{ newOrder }}</h6>
-            <p class="text-secondary font-weight-bold text-xs mt-1 mb-0">{{ orderDate }}</p>
-          </div>
-        </div>
-        <div class="timeline-block mb-3">
-          <span class="timeline-step">
-            <i class="ni ni-cart text-info text-gradient"></i>
-          </span>
-          <div class="timeline-content">
-            <h6 class="text-dark text-sm font-weight-bold mb-0">{{ payment }}</h6>
-            <p class="text-secondary font-weight-bold text-xs mt-1 mb-0">{{ paymentDate }}</p>
-          </div>
-        </div>
-        <div class="timeline-block mb-3">
-          <span class="timeline-step">
-            <i class="ni ni-credit-card text-warning text-gradient"></i>
-          </span>
-          <div class="timeline-content">
-            <h6 class="text-dark text-sm font-weight-bold mb-0">{{ newCard }}</h6>
-            <p class="text-secondary font-weight-bold text-xs mt-1 mb-0">{{ newCardDate }}</p>
-          </div>
-        </div>
-        <div class="timeline-block mb-3">
-          <span class="timeline-step">
-            <i class="ni ni-key-25 text-primary text-gradient"></i>
-          </span>
-          <div class="timeline-content">
-            <h6 class="text-dark text-sm font-weight-bold mb-0">{{ unlockPackages }}</h6>
-            <p class="text-secondary font-weight-bold text-xs mt-1 mb-0">{{ unlockPackagesDate }}</p>
-          </div>
-        </div>
-        <div v-if="newOrder2" class="timeline-block">
-          <span class="timeline-step">
-            <i class="ni ni-money-coins text-dark text-gradient"></i>
-          </span>
-          <div class="timeline-content">
-            <h6 class="text-dark text-sm font-weight-bold mb-0">{{ newOrder2 }}</h6>
-            <p class="text-secondary font-weight-bold text-xs mt-1 mb-0">{{ newOrder2Date }}</p>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "OrdersCard",
-  props: {
-    title: {
-      type: String,
-      default: "Orders overview",
-    },
-    text: {
-      type: String,
-      default: "this month",
-    },
-    order: {
-      type: String,
-      default: "$2400, Design changes",
-    },
-    date: {
-      type: String,
-      default: "22 DEC 7:20 PM",
-    },
-    newOrder: {
-      type: String,
-      default: "New order #1832412",
-    },
-    orderDate: {
-      type: String,
-      default: "21 DEC 11 PM",
-    },
-    payment: {
-      type: String,
-      default: "Server payments for April",
-    },
-    paymentDate: {
-      type: String,
-      default: "21 DEC 9:34 PM",
-    },
-    newCard: {
-      type: String,
-      default: "New card added for order #4395133",
-    },
-    newCardDate: {
-      type: String,
-      default: "20 DEC 2:20 AM",
-    },
-    unlockPackages: {
-      type: String,
-      default: "Unlock packages for development",
-    },
-    unlockPackagesDate: {
-      type: String,
-      default: "18 DEC 4:54 AM",
-    },
-    newOrder2: {
-      type: String,
-      default: ""
-    },
-    newOrder2Date: {
-      type: String,
-      default: ""
-    },
-  },
-};
-</script>
+<template>
+  <div class="card h-100">
+    <div class="card-header pb-0">
+      <h6>{{ title }}</h6>
+      <p class="text-sm">
+        <i class="fa fa-arrow-up text-success" aria-hidden="true"></i>
+        <span class="font-weight-bold">24%</span>
+        {{ text }}
+      </p>
+    </div>
+    <div class="card-body p-3">
+      <div class="timeline timeline-one-side">
+        <div class="timeline-block mb-3">
+          <span class="timeline-step">
+            <i class="ni ni-bell-55 text-success text-gradient"></i>
+          </span>
+          <div class="timeline-content">
+            <h6 class="text-dark text-sm font-weight-bold mb-0">{{ order }}</h6>
+            <p class="text-secondary font-weight-bold text-xs mt-1 mb-0">
+              {{ date }}
+            </p>
+          </div>
+        </div>
+        <div class="timeline-block mb-3">
+          <span class="timeline-step">
+            <i class="ni ni-html5 text-danger text-gradient"></i>
+          </span>
+          <div class="timeline-content">
+            <h6 class="text-dark text-sm font-weight-bold mb-0">
+              {{ newOrder }}
+            </h6>
+            <p class="text-secondary font-weight-bold text-xs mt-1 mb-0">
+              {{ orderDate }}
+            </p>
+          </div>
+        </div>
+        <div class="timeline-block mb-3">
+          <span class="timeline-step">
+            <i class="ni ni-cart text-info text-gradient"></i>
+          </span>
+          <div class="timeline-content">
+            <h6 class="text-dark text-sm font-weight-bold mb-0">
+              {{ payment }}
+            </h6>
+            <p class="text-secondary font-weight-bold text-xs mt-1 mb-0">
+              {{ paymentDate }}
+            </p>
+          </div>
+        </div>
+        <div class="timeline-block mb-3">
+          <span class="timeline-step">
+            <i class="ni ni-credit-card text-warning text-gradient"></i>
+          </span>
+          <div class="timeline-content">
+            <h6 class="text-dark text-sm font-weight-bold mb-0">
+              {{ newCard }}
+            </h6>
+            <p class="text-secondary font-weight-bold text-xs mt-1 mb-0">
+              {{ newCardDate }}
+            </p>
+          </div>
+        </div>
+        <div class="timeline-block mb-3">
+          <span class="timeline-step">
+            <i class="ni ni-key-25 text-primary text-gradient"></i>
+          </span>
+          <div class="timeline-content">
+            <h6 class="text-dark text-sm font-weight-bold mb-0">
+              {{ unlockPackages }}
+            </h6>
+            <p class="text-secondary font-weight-bold text-xs mt-1 mb-0">
+              {{ unlockPackagesDate }}
+            </p>
+          </div>
+        </div>
+        <div v-if="newOrder2" class="timeline-block">
+          <span class="timeline-step">
+            <i class="ni ni-money-coins text-dark text-gradient"></i>
+          </span>
+          <div class="timeline-content">
+            <h6 class="text-dark text-sm font-weight-bold mb-0">
+              {{ newOrder2 }}
+            </h6>
+            <p class="text-secondary font-weight-bold text-xs mt-1 mb-0">
+              {{ newOrder2Date }}
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "OrdersCard",
+  props: {
+    title: {
+      type: String,
+      default: "Orders overview",
+    },
+    text: {
+      type: String,
+      default: "this month",
+    },
+    order: {
+      type: String,
+      default: "$2400, Design changes",
+    },
+    date: {
+      type: String,
+      default: "22 DEC 7:20 PM",
+    },
+    newOrder: {
+      type: String,
+      default: "New order #1832412",
+    },
+    orderDate: {
+      type: String,
+      default: "21 DEC 11 PM",
+    },
+    payment: {
+      type: String,
+      default: "Server payments for April",
+    },
+    paymentDate: {
+      type: String,
+      default: "21 DEC 9:34 PM",
+    },
+    newCard: {
+      type: String,
+      default: "New card added for order #4395133",
+    },
+    newCardDate: {
+      type: String,
+      default: "20 DEC 2:20 AM",
+    },
+    unlockPackages: {
+      type: String,
+      default: "Unlock packages for development",
+    },
+    unlockPackagesDate: {
+      type: String,
+      default: "18 DEC 4:54 AM",
+    },
+    newOrder2: {
+      type: String,
+      default: "",
+    },
+    newOrder2Date: {
+      type: String,
+      default: "",
+    },
+  },
+};
+</script>
diff --git a/src/views/components/PaymentCard.vue b/src/views/components/PaymentCard.vue
index b9310e9..8dddd3c 100644
--- a/src/views/components/PaymentCard.vue
+++ b/src/views/components/PaymentCard.vue
@@ -1,76 +1,88 @@
-<template>
-  <div class="card mt-4">
-    <div class="card-header pb-0 p-3">
-      <div class="row">
-        <div class="col-6 d-flex align-items-center">
-          <h6 class="mb-0">Payment Method</h6>
-        </div>
-        <div class="col-6 text-end">
-          <vsud-button color="dark" variant="gradient">
-            <i class="fas fa-plus me-2"></i>
-            Add New Card
-          </vsud-button>
-        </div>
-      </div>
-    </div>
-    <div class="card-body p-3">
-      <div class="row">
-        <div class="col-md-6 mb-md-0 mb-4">
-          <div
-            class="card card-body border card-plain border-radius-lg d-flex align-items-center flex-row"
-          >
-            <img class="w-10 me-3 mb-0" src="../../assets/img/logos/mastercard.png" alt="logo" />
-            <h6 class="mb-0">****&nbsp;&nbsp;&nbsp;****&nbsp;&nbsp;&nbsp;****&nbsp;&nbsp;&nbsp;7852</h6>
-            <i
-              class="fas fa-pencil-alt ms-auto text-dark cursor-pointer"
-              data-bs-toggle="tooltip"
-              data-bs-placement="top"
-              title
-              aria-hidden="true"
-              data-bs-original-title="Edit Card"
-              aria-label="Edit Card"
-            ></i>
-            <span class="sr-only">Edit Card</span>
-          </div>
-        </div>
-        <div class="col-md-6">
-          <div
-            class="card card-body border card-plain border-radius-lg d-flex align-items-center flex-row"
-          >
-            <img class="w-10 me-3 mb-0" src="../../assets/img/logos/visa.png" alt="logo" />
-            <h6 class="mb-0">****&nbsp;&nbsp;&nbsp;****&nbsp;&nbsp;&nbsp;****&nbsp;&nbsp;&nbsp;5248</h6>
-            <i
-              class="fas fa-pencil-alt ms-auto text-dark cursor-pointer"
-              data-bs-toggle="tooltip"
-              data-bs-placement="top"
-              title
-              aria-hidden="true"
-              data-bs-original-title="Edit Card"
-              aria-label="Edit Card"
-            ></i>
-            <span class="sr-only">Edit Card</span>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import VsudButton from "@/components/VsudButton.vue";
-import img1 from "../../assets/img/logos/mastercard.png";
-import img2 from "../../assets/img/logos/visa.png";
-
-export default {
-  name: "PaymentCard",
-  components: {
-    VsudButton,
-  },
-  data() {
-    return {
-      img1,
-      img2,
-    };
-  },
-};
-</script>
+<template>
+  <div class="card mt-4">
+    <div class="card-header pb-0 p-3">
+      <div class="row">
+        <div class="col-6 d-flex align-items-center">
+          <h6 class="mb-0">Payment Method</h6>
+        </div>
+        <div class="col-6 text-end">
+          <vsud-button color="dark" variant="gradient">
+            <i class="fas fa-plus me-2"></i>
+            Add New Card
+          </vsud-button>
+        </div>
+      </div>
+    </div>
+    <div class="card-body p-3">
+      <div class="row">
+        <div class="col-md-6 mb-md-0 mb-4">
+          <div
+            class="card card-body border card-plain border-radius-lg d-flex align-items-center flex-row"
+          >
+            <img
+              class="w-10 me-3 mb-0"
+              src="../../assets/img/logos/mastercard.png"
+              alt="logo"
+            />
+            <h6 class="mb-0">
+              ****&nbsp;&nbsp;&nbsp;****&nbsp;&nbsp;&nbsp;****&nbsp;&nbsp;&nbsp;7852
+            </h6>
+            <i
+              class="fas fa-pencil-alt ms-auto text-dark cursor-pointer"
+              data-bs-toggle="tooltip"
+              data-bs-placement="top"
+              title
+              aria-hidden="true"
+              data-bs-original-title="Edit Card"
+              aria-label="Edit Card"
+            ></i>
+            <span class="sr-only">Edit Card</span>
+          </div>
+        </div>
+        <div class="col-md-6">
+          <div
+            class="card card-body border card-plain border-radius-lg d-flex align-items-center flex-row"
+          >
+            <img
+              class="w-10 me-3 mb-0"
+              src="../../assets/img/logos/visa.png"
+              alt="logo"
+            />
+            <h6 class="mb-0">
+              ****&nbsp;&nbsp;&nbsp;****&nbsp;&nbsp;&nbsp;****&nbsp;&nbsp;&nbsp;5248
+            </h6>
+            <i
+              class="fas fa-pencil-alt ms-auto text-dark cursor-pointer"
+              data-bs-toggle="tooltip"
+              data-bs-placement="top"
+              title
+              aria-hidden="true"
+              data-bs-original-title="Edit Card"
+              aria-label="Edit Card"
+            ></i>
+            <span class="sr-only">Edit Card</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import VsudButton from "@/components/VsudButton.vue";
+import img1 from "../../assets/img/logos/mastercard.png";
+import img2 from "../../assets/img/logos/visa.png";
+
+export default {
+  name: "PaymentCard",
+  components: {
+    VsudButton,
+  },
+  data() {
+    return {
+      img1,
+      img2,
+    };
+  },
+};
+</script>
diff --git a/src/views/components/ProfileCard.vue b/src/views/components/ProfileCard.vue
index aeeed4f..1fefed6 100644
--- a/src/views/components/ProfileCard.vue
+++ b/src/views/components/ProfileCard.vue
@@ -1,70 +1,70 @@
-<template>
-  <div class="card h-100">
-    <div class="p-3 pb-0 card-header">
-      <div class="row">
-        <div class="col-md-8 d-flex align-items-center">
-          <h6 class="mb-0">Profile Information</h6>
-        </div>
-        <div class="col-md-4 text-end">
-          <a href="javascript:;">
-            <i
-              class="text-sm fas fa-user-edit text-secondary"
-              data-bs-toggle="tooltip"
-              data-bs-placement="top"
-              title="Edit Profile"
-            ></i>
-          </a>
-        </div>
-      </div>
-    </div>
-    <div class="p-3 card-body">
-      <p class="text-sm">
-        Hi, I’m Alec Thompson, Decisions: If you can’t decide, the answer is no.
-        If two equally difficult paths, choose the one more painful in the short
-        term (pain avoidance is creating an illusion of equality).
-      </p>
-      <hr class="my-4 horizontal gray-light" />
-      <ul class="list-group">
-        <li class="pt-0 text-sm border-0 list-group-item ps-0">
-          <strong class="text-dark">Full Name:</strong> &nbsp; Alec M. Thompson
-        </li>
-        <li class="text-sm border-0 list-group-item ps-0">
-          <strong class="text-dark">Mobile:</strong> &nbsp; (44) 123 1234 123
-        </li>
-        <li class="text-sm border-0 list-group-item ps-0">
-          <strong class="text-dark">Email:</strong> &nbsp; alecthompson@mail.com
-        </li>
-        <li class="text-sm border-0 list-group-item ps-0">
-          <strong class="text-dark">Location:</strong> &nbsp; USA
-        </li>
-        <li class="pb-0 border-0 list-group-item ps-0">
-          <strong class="text-sm text-dark">Social:</strong> &nbsp;
-          <a
-            class="py-0 mb-0 btn btn-facebook btn-simple ps-1 pe-2"
-            href="javascript:;"
-          >
-            <i class="fab fa-facebook fa-lg"></i>
-          </a>
-          <a
-            class="py-0 mb-0 btn btn-twitter btn-simple ps-1 pe-2"
-            href="javascript:;"
-          >
-            <i class="fab fa-twitter fa-lg"></i>
-          </a>
-          <a
-            class="py-0 mb-0 btn btn-instagram btn-simple ps-1 pe-2"
-            href="javascript:;"
-          >
-            <i class="fab fa-instagram fa-lg"></i>
-          </a>
-        </li>
-      </ul>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "ProfileCard",
-};
-</script>
+<template>
+  <div class="card h-100">
+    <div class="p-3 pb-0 card-header">
+      <div class="row">
+        <div class="col-md-8 d-flex align-items-center">
+          <h6 class="mb-0">Profile Information</h6>
+        </div>
+        <div class="col-md-4 text-end">
+          <a href="javascript:;">
+            <i
+              class="text-sm fas fa-user-edit text-secondary"
+              data-bs-toggle="tooltip"
+              data-bs-placement="top"
+              title="Edit Profile"
+            ></i>
+          </a>
+        </div>
+      </div>
+    </div>
+    <div class="p-3 card-body">
+      <p class="text-sm">
+        Hi, I’m Alec Thompson, Decisions: If you can’t decide, the answer is no.
+        If two equally difficult paths, choose the one more painful in the short
+        term (pain avoidance is creating an illusion of equality).
+      </p>
+      <hr class="my-4 horizontal gray-light" />
+      <ul class="list-group">
+        <li class="pt-0 text-sm border-0 list-group-item ps-0">
+          <strong class="text-dark">Full Name:</strong> &nbsp; Alec M. Thompson
+        </li>
+        <li class="text-sm border-0 list-group-item ps-0">
+          <strong class="text-dark">Mobile:</strong> &nbsp; (44) 123 1234 123
+        </li>
+        <li class="text-sm border-0 list-group-item ps-0">
+          <strong class="text-dark">Email:</strong> &nbsp; alecthompson@mail.com
+        </li>
+        <li class="text-sm border-0 list-group-item ps-0">
+          <strong class="text-dark">Location:</strong> &nbsp; USA
+        </li>
+        <li class="pb-0 border-0 list-group-item ps-0">
+          <strong class="text-sm text-dark">Social:</strong> &nbsp;
+          <a
+            class="py-0 mb-0 btn btn-facebook btn-simple ps-1 pe-2"
+            href="javascript:;"
+          >
+            <i class="fab fa-facebook fa-lg"></i>
+          </a>
+          <a
+            class="py-0 mb-0 btn btn-twitter btn-simple ps-1 pe-2"
+            href="javascript:;"
+          >
+            <i class="fab fa-twitter fa-lg"></i>
+          </a>
+          <a
+            class="py-0 mb-0 btn btn-instagram btn-simple ps-1 pe-2"
+            href="javascript:;"
+          >
+            <i class="fab fa-instagram fa-lg"></i>
+          </a>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ProfileCard",
+};
+</script>
diff --git a/src/views/components/ProjectOverviewCard.vue b/src/views/components/ProjectOverviewCard.vue
index a9bc843..1e8ec96 100644
--- a/src/views/components/ProjectOverviewCard.vue
+++ b/src/views/components/ProjectOverviewCard.vue
@@ -1,113 +1,119 @@
-<template>
-  <div class="card card-blog card-plain">
-    <div class="position-relative">
-      <a class="shadow-xl d-block border-radius-xl">
-        <img :src="img" alt="img-blur-shadow" class="shadow img-fluid border-radius-xl" />
-      </a>
-    </div>
-    <div class="px-1 pb-0 card-body">
-      <p class="mb-2 text-sm text-gradient text-dark">Project #{{ number }}</p>
-      <a href="javascript:;">
-        <h5>{{ title }}</h5>
-      </a>
-      <p class="mb-4 text-sm">{{ description }}</p>
-      <div class="d-flex align-items-center justify-content-between">
-        <button type="button" class="mb-0 btn btn-outline-success btn-sm">View Project</button>
-        <div class="mt-2 avatar-group">
-          <a
-            href="javascript:;"
-            class="avatar avatar-xs rounded-circle"
-            data-bs-toggle="tooltip"
-            data-bs-placement="bottom"
-            :title="titleTeam1"
-          >
-            <img alt="Image placeholder" :src="imgTeam1" />
-          </a>
-          <a
-            href="javascript:;"
-            class="avatar avatar-xs rounded-circle"
-            data-bs-toggle="tooltip"
-            data-bs-placement="bottom"
-            :title="titleTeam2"
-          >
-            <img alt="Image placeholder" :src="imgTeam2" />
-          </a>
-          <a
-            href="javascript:;"
-            class="avatar avatar-xs rounded-circle"
-            data-bs-toggle="tooltip"
-            data-bs-placement="bottom"
-            :title="titleTeam3"
-          >
-            <img alt="Image placeholder" :src="imgTeam3" />
-          </a>
-          <a
-            href="javascript:;"
-            class="avatar avatar-xs rounded-circle"
-            data-bs-toggle="tooltip"
-            data-bs-placement="bottom"
-            :title="titleTeam4"
-          >
-            <img alt="Image placeholder" :src="imgTeam4" />
-          </a>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "ProjectsCard",
-  props: {
-    img: {
-      type: String,
-      default: ""
-    },
-    number: {
-      type: Number,
-      default: 0
-    },
-    title: {
-      type: String,
-      default: ""
-    },
-    description: {
-      type: String,
-      default: ""
-    },
-    imgTeam1: {
-      type: String,
-      default: ""
-    },
-    imgTeam2: {
-      type: String,
-      default: ""
-    },
-    imgTeam3: {
-      type: String,
-      default: ""
-    },
-    imgTeam4: {
-      type: String,
-      default: ""
-    },
-    titleTeam1: {
-      type: String,
-      default: ""
-    },
-    titleTeam2: {
-      type: String,
-      default: ""
-    },
-    titleTeam3: {
-      type: String,
-      default: ""
-    },
-    titleTeam4: {
-      type: String,
-      default: ""
-    },
-  },
-};
-</script>
+<template>
+  <div class="card card-blog card-plain">
+    <div class="position-relative">
+      <a class="shadow-xl d-block border-radius-xl">
+        <img
+          :src="img"
+          alt="img-blur-shadow"
+          class="shadow img-fluid border-radius-xl"
+        />
+      </a>
+    </div>
+    <div class="px-1 pb-0 card-body">
+      <p class="mb-2 text-sm text-gradient text-dark">Project #{{ number }}</p>
+      <a href="javascript:;">
+        <h5>{{ title }}</h5>
+      </a>
+      <p class="mb-4 text-sm">{{ description }}</p>
+      <div class="d-flex align-items-center justify-content-between">
+        <button type="button" class="mb-0 btn btn-outline-success btn-sm">
+          View Project
+        </button>
+        <div class="mt-2 avatar-group">
+          <a
+            href="javascript:;"
+            class="avatar avatar-xs rounded-circle"
+            data-bs-toggle="tooltip"
+            data-bs-placement="bottom"
+            :title="titleTeam1"
+          >
+            <img alt="Image placeholder" :src="imgTeam1" />
+          </a>
+          <a
+            href="javascript:;"
+            class="avatar avatar-xs rounded-circle"
+            data-bs-toggle="tooltip"
+            data-bs-placement="bottom"
+            :title="titleTeam2"
+          >
+            <img alt="Image placeholder" :src="imgTeam2" />
+          </a>
+          <a
+            href="javascript:;"
+            class="avatar avatar-xs rounded-circle"
+            data-bs-toggle="tooltip"
+            data-bs-placement="bottom"
+            :title="titleTeam3"
+          >
+            <img alt="Image placeholder" :src="imgTeam3" />
+          </a>
+          <a
+            href="javascript:;"
+            class="avatar avatar-xs rounded-circle"
+            data-bs-toggle="tooltip"
+            data-bs-placement="bottom"
+            :title="titleTeam4"
+          >
+            <img alt="Image placeholder" :src="imgTeam4" />
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ProjectsCard",
+  props: {
+    img: {
+      type: String,
+      default: "",
+    },
+    number: {
+      type: Number,
+      default: 0,
+    },
+    title: {
+      type: String,
+      default: "",
+    },
+    description: {
+      type: String,
+      default: "",
+    },
+    imgTeam1: {
+      type: String,
+      default: "",
+    },
+    imgTeam2: {
+      type: String,
+      default: "",
+    },
+    imgTeam3: {
+      type: String,
+      default: "",
+    },
+    imgTeam4: {
+      type: String,
+      default: "",
+    },
+    titleTeam1: {
+      type: String,
+      default: "",
+    },
+    titleTeam2: {
+      type: String,
+      default: "",
+    },
+    titleTeam3: {
+      type: String,
+      default: "",
+    },
+    titleTeam4: {
+      type: String,
+      default: "",
+    },
+  },
+};
+</script>
diff --git a/src/views/components/ProjectsTable.vue b/src/views/components/ProjectsTable.vue
index 409d496..3e65f01 100644
--- a/src/views/components/ProjectsTable.vue
+++ b/src/views/components/ProjectsTable.vue
@@ -1,305 +1,305 @@
-<template>
-  <div class="card mb-4">
-    <div class="card-header pb-0">
-      <h6>Projects table</h6>
-    </div>
-    <div class="card-body px-0 pt-0 pb-2">
-      <div class="table-responsive p-0">
-        <table class="table align-items-center justify-content-center mb-0">
-          <thead>
-            <tr>
-              <th
-                class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7"
-              >
-                Project
-              </th>
-              <th
-                class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2"
-              >
-                Budget
-              </th>
-              <th
-                class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2"
-              >
-                Status
-              </th>
-              <th
-                class="text-uppercase text-secondary text-xxs font-weight-bolder text-center opacity-7 ps-2"
-              >
-                Completion
-              </th>
-              <th></th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td>
-                <div class="d-flex px-2">
-                  <div>
-                    <img
-                      src="../../assets/img/small-logos/logo-invision.svg"
-                      class="avatar avatar-sm rounded-circle me-2"
-                      alt="spotify"
-                    />
-                  </div>
-                  <div class="my-auto">
-                    <h6 class="mb-0 text-sm">Spotify</h6>
-                  </div>
-                </div>
-              </td>
-              <td>
-                <p class="text-sm font-weight-bold mb-0">$2,500</p>
-              </td>
-              <td>
-                <span class="text-xs font-weight-bold">working</span>
-              </td>
-              <td class="align-middle text-center">
-                <div class="d-flex align-items-center justify-content-center">
-                  <span class="me-2 text-xs font-weight-bold">60%</span>
-                  <div>
-                    <vsud-progress
-                      color="info"
-                      variant="gradient"
-                      percentage="60"
-                    />
-                  </div>
-                </div>
-              </td>
-              <td class="align-middle">
-                <button class="btn btn-link text-secondary mb-0">
-                  <i class="fa fa-ellipsis-v text-xs" aria-hidden="true"></i>
-                </button>
-              </td>
-            </tr>
-            <tr>
-              <td>
-                <div class="d-flex px-2">
-                  <div>
-                    <img
-                      src="../../assets/img/small-logos/logo-invision.svg"
-                      class="avatar avatar-sm rounded-circle me-2"
-                      alt="invision"
-                    />
-                  </div>
-                  <div class="my-auto">
-                    <h6 class="mb-0 text-sm">Invision</h6>
-                  </div>
-                </div>
-              </td>
-              <td>
-                <p class="text-sm font-weight-bold mb-0">$5,000</p>
-              </td>
-              <td>
-                <span class="text-xs font-weight-bold">done</span>
-              </td>
-              <td class="align-middle text-center">
-                <div class="d-flex align-items-center justify-content-center">
-                  <span class="me-2 text-xs font-weight-bold">100%</span>
-                  <div>
-                    <vsud-progress
-                      color="success"
-                      variant="gradient"
-                      percentage="100"
-                    />
-                  </div>
-                </div>
-              </td>
-              <td class="align-middle">
-                <button
-                  class="btn btn-link text-secondary mb-0"
-                  aria-haspopup="true"
-                  aria-expanded="false"
-                >
-                  <i class="fa fa-ellipsis-v text-xs" aria-hidden="true"></i>
-                </button>
-              </td>
-            </tr>
-            <tr>
-              <td>
-                <div class="d-flex px-2">
-                  <div>
-                    <img
-                      src="../../assets/img/small-logos/logo-jira.svg"
-                      class="avatar avatar-sm rounded-circle me-2"
-                      alt="jira"
-                    />
-                  </div>
-                  <div class="my-auto">
-                    <h6 class="mb-0 text-sm">Jira</h6>
-                  </div>
-                </div>
-              </td>
-              <td>
-                <p class="text-sm font-weight-bold mb-0">$3,400</p>
-              </td>
-              <td>
-                <span class="text-xs font-weight-bold">canceled</span>
-              </td>
-              <td class="align-middle text-center">
-                <div class="d-flex align-items-center justify-content-center">
-                  <span class="me-2 text-xs font-weight-bold">30%</span>
-                  <div>
-                    <vsud-progress
-                      color="danger"
-                      variant="gradient"
-                      percentage="30"
-                    />
-                  </div>
-                </div>
-              </td>
-              <td class="align-middle">
-                <button
-                  class="btn btn-link text-secondary mb-0"
-                  aria-haspopup="true"
-                  aria-expanded="false"
-                >
-                  <i class="fa fa-ellipsis-v text-xs" aria-hidden="true"></i>
-                </button>
-              </td>
-            </tr>
-            <tr>
-              <td>
-                <div class="d-flex px-2">
-                  <div>
-                    <img
-                      src="../../assets/img/small-logos/logo-slack.svg"
-                      class="avatar avatar-sm rounded-circle me-2"
-                      alt="slack"
-                    />
-                  </div>
-                  <div class="my-auto">
-                    <h6 class="mb-0 text-sm">Slack</h6>
-                  </div>
-                </div>
-              </td>
-              <td>
-                <p class="text-sm font-weight-bold mb-0">$1,000</p>
-              </td>
-              <td>
-                <span class="text-xs font-weight-bold">canceled</span>
-              </td>
-              <td class="align-middle text-center">
-                <div class="d-flex align-items-center justify-content-center">
-                  <span class="me-2 text-xs font-weight-bold">0%</span>
-                  <div>
-                    <vsud-progress
-                      color="success"
-                      variant="gradient"
-                      percentage="0"
-                    />
-                  </div>
-                </div>
-              </td>
-              <td class="align-middle">
-                <button
-                  class="btn btn-link text-secondary mb-0"
-                  aria-haspopup="true"
-                  aria-expanded="false"
-                >
-                  <i class="fa fa-ellipsis-v text-xs" aria-hidden="true"></i>
-                </button>
-              </td>
-            </tr>
-            <tr>
-              <td>
-                <div class="d-flex px-2">
-                  <div>
-                    <img
-                      src="../../assets/img/small-logos/logo-invision.svg"
-                      class="avatar avatar-sm rounded-circle me-2"
-                      alt="webdev"
-                    />
-                  </div>
-                  <div class="my-auto">
-                    <h6 class="mb-0 text-sm">Webdev</h6>
-                  </div>
-                </div>
-              </td>
-              <td>
-                <p class="text-sm font-weight-bold mb-0">$14,000</p>
-              </td>
-              <td>
-                <span class="text-xs font-weight-bold">working</span>
-              </td>
-              <td class="align-middle text-center">
-                <div class="d-flex align-items-center justify-content-center">
-                  <span class="me-2 text-xs font-weight-bold">80%</span>
-                  <div>
-                    <vsud-progress
-                      color="info"
-                      variant="gradient"
-                      percentage="80"
-                    />
-                  </div>
-                </div>
-              </td>
-              <td class="align-middle">
-                <button
-                  class="btn btn-link text-secondary mb-0"
-                  aria-haspopup="true"
-                  aria-expanded="false"
-                >
-                  <i class="fa fa-ellipsis-v text-xs" aria-hidden="true"></i>
-                </button>
-              </td>
-            </tr>
-            <tr>
-              <td>
-                <div class="d-flex px-2">
-                  <div>
-                    <img
-                      src="../../assets/img/small-logos/logo-xd.svg"
-                      class="avatar avatar-sm rounded-circle me-2"
-                      alt="xd"
-                    />
-                  </div>
-                  <div class="my-auto">
-                    <h6 class="mb-0 text-sm">Adobe XD</h6>
-                  </div>
-                </div>
-              </td>
-              <td>
-                <p class="text-sm font-weight-bold mb-0">$2,300</p>
-              </td>
-              <td>
-                <span class="text-xs font-weight-bold">done</span>
-              </td>
-              <td class="align-middle text-center">
-                <div class="d-flex align-items-center justify-content-center">
-                  <span class="me-2 text-xs font-weight-bold">100%</span>
-                  <div>
-                    <vsud-progress
-                      color="success"
-                      variant="gradient"
-                      percentage="100"
-                    />
-                  </div>
-                </div>
-              </td>
-              <td class="align-middle">
-                <button
-                  class="btn btn-link text-secondary mb-0"
-                  aria-haspopup="true"
-                  aria-expanded="false"
-                >
-                  <i class="fa fa-ellipsis-v text-xs" aria-hidden="true"></i>
-                </button>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import VsudProgress from "@/components/VsudProgress.vue";
-
-export default {
-  name: "ProjectsTable",
-  components: {
-    VsudProgress,
-  },
-};
-</script>
+<template>
+  <div class="card mb-4">
+    <div class="card-header pb-0">
+      <h6>Projects table</h6>
+    </div>
+    <div class="card-body px-0 pt-0 pb-2">
+      <div class="table-responsive p-0">
+        <table class="table align-items-center justify-content-center mb-0">
+          <thead>
+            <tr>
+              <th
+                class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7"
+              >
+                Project
+              </th>
+              <th
+                class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2"
+              >
+                Budget
+              </th>
+              <th
+                class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2"
+              >
+                Status
+              </th>
+              <th
+                class="text-uppercase text-secondary text-xxs font-weight-bolder text-center opacity-7 ps-2"
+              >
+                Completion
+              </th>
+              <th></th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>
+                <div class="d-flex px-2">
+                  <div>
+                    <img
+                      src="../../assets/img/small-logos/logo-invision.svg"
+                      class="avatar avatar-sm rounded-circle me-2"
+                      alt="spotify"
+                    />
+                  </div>
+                  <div class="my-auto">
+                    <h6 class="mb-0 text-sm">Spotify</h6>
+                  </div>
+                </div>
+              </td>
+              <td>
+                <p class="text-sm font-weight-bold mb-0">$2,500</p>
+              </td>
+              <td>
+                <span class="text-xs font-weight-bold">working</span>
+              </td>
+              <td class="align-middle text-center">
+                <div class="d-flex align-items-center justify-content-center">
+                  <span class="me-2 text-xs font-weight-bold">60%</span>
+                  <div>
+                    <vsud-progress
+                      color="info"
+                      variant="gradient"
+                      percentage="60"
+                    />
+                  </div>
+                </div>
+              </td>
+              <td class="align-middle">
+                <button class="btn btn-link text-secondary mb-0">
+                  <i class="fa fa-ellipsis-v text-xs" aria-hidden="true"></i>
+                </button>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <div class="d-flex px-2">
+                  <div>
+                    <img
+                      src="../../assets/img/small-logos/logo-invision.svg"
+                      class="avatar avatar-sm rounded-circle me-2"
+                      alt="invision"
+                    />
+                  </div>
+                  <div class="my-auto">
+                    <h6 class="mb-0 text-sm">Invision</h6>
+                  </div>
+                </div>
+              </td>
+              <td>
+                <p class="text-sm font-weight-bold mb-0">$5,000</p>
+              </td>
+              <td>
+                <span class="text-xs font-weight-bold">done</span>
+              </td>
+              <td class="align-middle text-center">
+                <div class="d-flex align-items-center justify-content-center">
+                  <span class="me-2 text-xs font-weight-bold">100%</span>
+                  <div>
+                    <vsud-progress
+                      color="success"
+                      variant="gradient"
+                      percentage="100"
+                    />
+                  </div>
+                </div>
+              </td>
+              <td class="align-middle">
+                <button
+                  class="btn btn-link text-secondary mb-0"
+                  aria-haspopup="true"
+                  aria-expanded="false"
+                >
+                  <i class="fa fa-ellipsis-v text-xs" aria-hidden="true"></i>
+                </button>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <div class="d-flex px-2">
+                  <div>
+                    <img
+                      src="../../assets/img/small-logos/logo-jira.svg"
+                      class="avatar avatar-sm rounded-circle me-2"
+                      alt="jira"
+                    />
+                  </div>
+                  <div class="my-auto">
+                    <h6 class="mb-0 text-sm">Jira</h6>
+                  </div>
+                </div>
+              </td>
+              <td>
+                <p class="text-sm font-weight-bold mb-0">$3,400</p>
+              </td>
+              <td>
+                <span class="text-xs font-weight-bold">canceled</span>
+              </td>
+              <td class="align-middle text-center">
+                <div class="d-flex align-items-center justify-content-center">
+                  <span class="me-2 text-xs font-weight-bold">30%</span>
+                  <div>
+                    <vsud-progress
+                      color="danger"
+                      variant="gradient"
+                      percentage="30"
+                    />
+                  </div>
+                </div>
+              </td>
+              <td class="align-middle">
+                <button
+                  class="btn btn-link text-secondary mb-0"
+                  aria-haspopup="true"
+                  aria-expanded="false"
+                >
+                  <i class="fa fa-ellipsis-v text-xs" aria-hidden="true"></i>
+                </button>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <div class="d-flex px-2">
+                  <div>
+                    <img
+                      src="../../assets/img/small-logos/logo-slack.svg"
+                      class="avatar avatar-sm rounded-circle me-2"
+                      alt="slack"
+                    />
+                  </div>
+                  <div class="my-auto">
+                    <h6 class="mb-0 text-sm">Slack</h6>
+                  </div>
+                </div>
+              </td>
+              <td>
+                <p class="text-sm font-weight-bold mb-0">$1,000</p>
+              </td>
+              <td>
+                <span class="text-xs font-weight-bold">canceled</span>
+              </td>
+              <td class="align-middle text-center">
+                <div class="d-flex align-items-center justify-content-center">
+                  <span class="me-2 text-xs font-weight-bold">0%</span>
+                  <div>
+                    <vsud-progress
+                      color="success"
+                      variant="gradient"
+                      percentage="0"
+                    />
+                  </div>
+                </div>
+              </td>
+              <td class="align-middle">
+                <button
+                  class="btn btn-link text-secondary mb-0"
+                  aria-haspopup="true"
+                  aria-expanded="false"
+                >
+                  <i class="fa fa-ellipsis-v text-xs" aria-hidden="true"></i>
+                </button>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <div class="d-flex px-2">
+                  <div>
+                    <img
+                      src="../../assets/img/small-logos/logo-invision.svg"
+                      class="avatar avatar-sm rounded-circle me-2"
+                      alt="webdev"
+                    />
+                  </div>
+                  <div class="my-auto">
+                    <h6 class="mb-0 text-sm">Webdev</h6>
+                  </div>
+                </div>
+              </td>
+              <td>
+                <p class="text-sm font-weight-bold mb-0">$14,000</p>
+              </td>
+              <td>
+                <span class="text-xs font-weight-bold">working</span>
+              </td>
+              <td class="align-middle text-center">
+                <div class="d-flex align-items-center justify-content-center">
+                  <span class="me-2 text-xs font-weight-bold">80%</span>
+                  <div>
+                    <vsud-progress
+                      color="info"
+                      variant="gradient"
+                      percentage="80"
+                    />
+                  </div>
+                </div>
+              </td>
+              <td class="align-middle">
+                <button
+                  class="btn btn-link text-secondary mb-0"
+                  aria-haspopup="true"
+                  aria-expanded="false"
+                >
+                  <i class="fa fa-ellipsis-v text-xs" aria-hidden="true"></i>
+                </button>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <div class="d-flex px-2">
+                  <div>
+                    <img
+                      src="../../assets/img/small-logos/logo-xd.svg"
+                      class="avatar avatar-sm rounded-circle me-2"
+                      alt="xd"
+                    />
+                  </div>
+                  <div class="my-auto">
+                    <h6 class="mb-0 text-sm">Adobe XD</h6>
+                  </div>
+                </div>
+              </td>
+              <td>
+                <p class="text-sm font-weight-bold mb-0">$2,300</p>
+              </td>
+              <td>
+                <span class="text-xs font-weight-bold">done</span>
+              </td>
+              <td class="align-middle text-center">
+                <div class="d-flex align-items-center justify-content-center">
+                  <span class="me-2 text-xs font-weight-bold">100%</span>
+                  <div>
+                    <vsud-progress
+                      color="success"
+                      variant="gradient"
+                      percentage="100"
+                    />
+                  </div>
+                </div>
+              </td>
+              <td class="align-middle">
+                <button
+                  class="btn btn-link text-secondary mb-0"
+                  aria-haspopup="true"
+                  aria-expanded="false"
+                >
+                  <i class="fa fa-ellipsis-v text-xs" aria-hidden="true"></i>
+                </button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import VsudProgress from "@/components/VsudProgress.vue";
+
+export default {
+  name: "ProjectsTable",
+  components: {
+    VsudProgress,
+  },
+};
+</script>
diff --git a/src/views/components/TransactionCard.vue b/src/views/components/TransactionCard.vue
index 2fd5f7c..4e6688b 100644
--- a/src/views/components/TransactionCard.vue
+++ b/src/views/components/TransactionCard.vue
@@ -1,158 +1,176 @@
-<template>
-  <div class="card h-100 mb-4">
-    <div class="card-header pb-0 px-3">
-      <div class="row">
-        <div class="col-md-6">
-          <h6 class="mb-0">Your Transaction's</h6>
-        </div>
-        <div class="col-md-6 d-flex justify-content-end align-items-center">
-          <i class="far fa-calendar-alt me-2" aria-hidden="true"></i>
-          <small>23 - 30 March 2020</small>
-        </div>
-      </div>
-    </div>
-    <div class="card-body pt-4 p-3">
-      <h6 class="text-uppercase text-body text-xs font-weight-bolder mb-3">Newest</h6>
-      <ul class="list-group">
-        <li
-          class="list-group-item border-0 d-flex justify-content-between ps-0 mb-2 border-radius-lg"
-        >
-          <div class="d-flex align-items-center">
-            <vsud-button
-              color="danger"
-              variant="outline"
-              size="sm"
-              class="btn-icon-only btn-rounded mb-0 me-3 d-flex align-items-center justify-content-center"
-            >
-              <i class="fas fa-arrow-down" aria-hidden="true"></i>
-            </vsud-button>
-            <div class="d-flex flex-column">
-              <h6 class="mb-1 text-dark text-sm">Netflix</h6>
-              <span class="text-xs">27 March 2020, at 12:30 PM</span>
-            </div>
-          </div>
-          <div
-            class="d-flex align-items-center text-danger text-gradient text-sm font-weight-bold"
-          >- $ 2,500</div>
-        </li>
-        <li
-          class="list-group-item border-0 d-flex justify-content-between ps-0 mb-2 border-radius-lg"
-        >
-          <div class="d-flex align-items-center">
-            <vsud-button
-              color="success"
-              variant="outline"
-              size="sm"
-              class="btn-icon-only btn-rounded mb-0 me-3 d-flex align-items-center justify-content-center"
-            >
-              <i class="fas fa-arrow-up" aria-hidden="true"></i>
-            </vsud-button>
-            <div class="d-flex flex-column">
-              <h6 class="mb-1 text-dark text-sm">Apple</h6>
-              <span class="text-xs">27 March 2020, at 04:30 AM</span>
-            </div>
-          </div>
-          <div
-            class="d-flex align-items-center text-success text-gradient text-sm font-weight-bold"
-          >+ $ 2,000</div>
-        </li>
-      </ul>
-      <h6 class="text-uppercase text-body text-xs font-weight-bolder my-3">Yesterday</h6>
-      <ul class="list-group">
-        <li
-          class="list-group-item border-0 d-flex justify-content-between ps-0 mb-2 border-radius-lg"
-        >
-          <div class="d-flex align-items-center">
-            <vsud-button
-              color="success"
-              variant="outline"
-              size="sm"
-              class="btn-icon-only btn-rounded mb-0 me-3 d-flex align-items-center justify-content-center"
-            >
-              <i class="fas fa-arrow-up" aria-hidden="true"></i>
-            </vsud-button>
-            <div class="d-flex flex-column">
-              <h6 class="mb-1 text-dark text-sm">Stripe</h6>
-              <span class="text-xs">26 March 2020, at 13:45 PM</span>
-            </div>
-          </div>
-          <div
-            class="d-flex align-items-center text-success text-gradient text-sm font-weight-bold"
-          >+ $ 750</div>
-        </li>
-        <li
-          class="list-group-item border-0 d-flex justify-content-between ps-0 mb-2 border-radius-lg"
-        >
-          <div class="d-flex align-items-center">
-            <vsud-button
-              color="success"
-              variant="outline"
-              size="sm"
-              class="btn-icon-only btn-rounded mb-0 me-3 d-flex align-items-center justify-content-center"
-            >
-              <i class="fas fa-arrow-up" aria-hidden="true"></i>
-            </vsud-button>
-            <div class="d-flex flex-column">
-              <h6 class="mb-1 text-dark text-sm">HubSpot</h6>
-              <span class="text-xs">26 March 2020, at 12:30 PM</span>
-            </div>
-          </div>
-          <div
-            class="d-flex align-items-center text-success text-gradient text-sm font-weight-bold"
-          >+ $ 1,000</div>
-        </li>
-        <li
-          class="list-group-item border-0 d-flex justify-content-between ps-0 mb-2 border-radius-lg"
-        >
-          <div class="d-flex align-items-center">
-            <vsud-button
-              color="success"
-              variant="outline"
-              size="sm"
-              class="btn-icon-only btn-rounded mb-0 me-3 d-flex align-items-center justify-content-center"
-            >
-              <i class="fas fa-arrow-up" aria-hidden="true"></i>
-            </vsud-button>
-            <div class="d-flex flex-column">
-              <h6 class="mb-1 text-dark text-sm">Creative Tim</h6>
-              <span class="text-xs">26 March 2020, at 08:30 AM</span>
-            </div>
-          </div>
-          <div
-            class="d-flex align-items-center text-success text-gradient text-sm font-weight-bold"
-          >+ $ 2,500</div>
-        </li>
-        <li
-          class="list-group-item border-0 d-flex justify-content-between ps-0 mb-2 border-radius-lg"
-        >
-          <div class="d-flex align-items-center">
-            <vsud-button
-              color="dark"
-              variant="outline"
-              size="sm"
-              class="btn-icon-only btn-rounded mb-0 me-3 d-flex align-items-center justify-content-center"
-            >
-              <i class="fas fa-exclamation" aria-hidden="true"></i>
-            </vsud-button>
-            <div class="d-flex flex-column">
-              <h6 class="mb-1 text-dark text-sm">Webflow</h6>
-              <span class="text-xs">26 March 2020, at 05:00 AM</span>
-            </div>
-          </div>
-          <div class="d-flex align-items-center text-dark text-sm font-weight-bold">Pending</div>
-        </li>
-      </ul>
-    </div>
-  </div>
-</template>
-
-<script>
-import VsudButton from "@/components/VsudButton.vue";
-
-export default {
-  name: "TransactionCard",
-  components: {
-    VsudButton,
-  },
-};
-</script>
+<template>
+  <div class="card h-100 mb-4">
+    <div class="card-header pb-0 px-3">
+      <div class="row">
+        <div class="col-md-6">
+          <h6 class="mb-0">Your Transaction's</h6>
+        </div>
+        <div class="col-md-6 d-flex justify-content-end align-items-center">
+          <i class="far fa-calendar-alt me-2" aria-hidden="true"></i>
+          <small>23 - 30 March 2020</small>
+        </div>
+      </div>
+    </div>
+    <div class="card-body pt-4 p-3">
+      <h6 class="text-uppercase text-body text-xs font-weight-bolder mb-3">
+        Newest
+      </h6>
+      <ul class="list-group">
+        <li
+          class="list-group-item border-0 d-flex justify-content-between ps-0 mb-2 border-radius-lg"
+        >
+          <div class="d-flex align-items-center">
+            <vsud-button
+              color="danger"
+              variant="outline"
+              size="sm"
+              class="btn-icon-only btn-rounded mb-0 me-3 d-flex align-items-center justify-content-center"
+            >
+              <i class="fas fa-arrow-down" aria-hidden="true"></i>
+            </vsud-button>
+            <div class="d-flex flex-column">
+              <h6 class="mb-1 text-dark text-sm">Netflix</h6>
+              <span class="text-xs">27 March 2020, at 12:30 PM</span>
+            </div>
+          </div>
+          <div
+            class="d-flex align-items-center text-danger text-gradient text-sm font-weight-bold"
+          >
+            - $ 2,500
+          </div>
+        </li>
+        <li
+          class="list-group-item border-0 d-flex justify-content-between ps-0 mb-2 border-radius-lg"
+        >
+          <div class="d-flex align-items-center">
+            <vsud-button
+              color="success"
+              variant="outline"
+              size="sm"
+              class="btn-icon-only btn-rounded mb-0 me-3 d-flex align-items-center justify-content-center"
+            >
+              <i class="fas fa-arrow-up" aria-hidden="true"></i>
+            </vsud-button>
+            <div class="d-flex flex-column">
+              <h6 class="mb-1 text-dark text-sm">Apple</h6>
+              <span class="text-xs">27 March 2020, at 04:30 AM</span>
+            </div>
+          </div>
+          <div
+            class="d-flex align-items-center text-success text-gradient text-sm font-weight-bold"
+          >
+            + $ 2,000
+          </div>
+        </li>
+      </ul>
+      <h6 class="text-uppercase text-body text-xs font-weight-bolder my-3">
+        Yesterday
+      </h6>
+      <ul class="list-group">
+        <li
+          class="list-group-item border-0 d-flex justify-content-between ps-0 mb-2 border-radius-lg"
+        >
+          <div class="d-flex align-items-center">
+            <vsud-button
+              color="success"
+              variant="outline"
+              size="sm"
+              class="btn-icon-only btn-rounded mb-0 me-3 d-flex align-items-center justify-content-center"
+            >
+              <i class="fas fa-arrow-up" aria-hidden="true"></i>
+            </vsud-button>
+            <div class="d-flex flex-column">
+              <h6 class="mb-1 text-dark text-sm">Stripe</h6>
+              <span class="text-xs">26 March 2020, at 13:45 PM</span>
+            </div>
+          </div>
+          <div
+            class="d-flex align-items-center text-success text-gradient text-sm font-weight-bold"
+          >
+            + $ 750
+          </div>
+        </li>
+        <li
+          class="list-group-item border-0 d-flex justify-content-between ps-0 mb-2 border-radius-lg"
+        >
+          <div class="d-flex align-items-center">
+            <vsud-button
+              color="success"
+              variant="outline"
+              size="sm"
+              class="btn-icon-only btn-rounded mb-0 me-3 d-flex align-items-center justify-content-center"
+            >
+              <i class="fas fa-arrow-up" aria-hidden="true"></i>
+            </vsud-button>
+            <div class="d-flex flex-column">
+              <h6 class="mb-1 text-dark text-sm">HubSpot</h6>
+              <span class="text-xs">26 March 2020, at 12:30 PM</span>
+            </div>
+          </div>
+          <div
+            class="d-flex align-items-center text-success text-gradient text-sm font-weight-bold"
+          >
+            + $ 1,000
+          </div>
+        </li>
+        <li
+          class="list-group-item border-0 d-flex justify-content-between ps-0 mb-2 border-radius-lg"
+        >
+          <div class="d-flex align-items-center">
+            <vsud-button
+              color="success"
+              variant="outline"
+              size="sm"
+              class="btn-icon-only btn-rounded mb-0 me-3 d-flex align-items-center justify-content-center"
+            >
+              <i class="fas fa-arrow-up" aria-hidden="true"></i>
+            </vsud-button>
+            <div class="d-flex flex-column">
+              <h6 class="mb-1 text-dark text-sm">Creative Tim</h6>
+              <span class="text-xs">26 March 2020, at 08:30 AM</span>
+            </div>
+          </div>
+          <div
+            class="d-flex align-items-center text-success text-gradient text-sm font-weight-bold"
+          >
+            + $ 2,500
+          </div>
+        </li>
+        <li
+          class="list-group-item border-0 d-flex justify-content-between ps-0 mb-2 border-radius-lg"
+        >
+          <div class="d-flex align-items-center">
+            <vsud-button
+              color="dark"
+              variant="outline"
+              size="sm"
+              class="btn-icon-only btn-rounded mb-0 me-3 d-flex align-items-center justify-content-center"
+            >
+              <i class="fas fa-exclamation" aria-hidden="true"></i>
+            </vsud-button>
+            <div class="d-flex flex-column">
+              <h6 class="mb-1 text-dark text-sm">Webflow</h6>
+              <span class="text-xs">26 March 2020, at 05:00 AM</span>
+            </div>
+          </div>
+          <div
+            class="d-flex align-items-center text-dark text-sm font-weight-bold"
+          >
+            Pending
+          </div>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+import VsudButton from "@/components/VsudButton.vue";
+
+export default {
+  name: "TransactionCard",
+  components: {
+    VsudButton,
+  },
+};
+</script>

From b50918470660e0fa03d8b611f98f7491e810156f Mon Sep 17 00:00:00 2001
From: Maisam Afshar <maisam.afshar@gmail.com>
Date: Thu, 1 Jun 2023 11:25:22 +0330
Subject: [PATCH 4/4] new updates

---
 CHANGELOG.md |  2 +-
 package.json | 26 +++++++++++++-------------
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6e59cc6..fe86790 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,6 @@
 # Change Log
 
-## [1.0.1] 2023-04-28
+## [1.0.1] 2023-06-01
 
 - Update dependencies & devDependencies
 
diff --git a/package.json b/package.json
index 96a4fa4..8f8a41b 100644
--- a/package.json
+++ b/package.json
@@ -11,21 +11,21 @@
     "format": "prettier .  --write"
   },
   "dependencies": {
-    "@popperjs/core": "2.11.7",
-    "bootstrap": "5.2.3",
-    "chart.js": "4.2.1",
-    "jkanban": "^1.3.1",
-    "vue": "^3.2.47",
-    "vue-router": "^4.1.6",
-    "vuex": "^4.1.0"
+    "@popperjs/core": "2.11.8",
+    "bootstrap": "5.3.0",
+    "chart.js": "4.3.0",
+    "jkanban": "1.3.1",
+    "vue": "3.3.4",
+    "vue-router": "4.2.2",
+    "vuex": "4.1.0"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^4.2.1",
-    "eslint": "^8.39.0",
-    "eslint-config-prettier": "^8.8.0",
-    "eslint-plugin-vue": "^9.11.0",
+    "@vitejs/plugin-vue": "4.2.3",
+    "eslint": "8.41.0",
+    "eslint-config-prettier": "8.8.0",
+    "eslint-plugin-vue": "9.14.1",
     "prettier": "2.8.8",
-    "sass": "^1.62.1",
-    "vite": "^4.3.3"
+    "sass": "1.62.1",
+    "vite": "4.3.9"
   }
 }