From 9031a269559389ceaa7b862f6c42dd88c59d0ef9 Mon Sep 17 00:00:00 2001
From: duckietm <troop@mailtjes.com>
Date: Tue, 2 Apr 2024 16:56:24 +0200
Subject: [PATCH] Migrate Look&Feel of CoolUI

---
 src/App.scss                                  |  17 +-
 src/assets/styles/bootstrap/_accordion.scss   |   9 +-
 src/assets/styles/bootstrap/_alert.scss       |   4 +-
 src/assets/styles/bootstrap/_breadcrumb.scss  |   9 +-
 .../styles/bootstrap/_button-group.scss       |  23 +-
 src/assets/styles/bootstrap/_buttons.scss     | 131 ++++-
 src/assets/styles/bootstrap/_card.scss        |  22 +-
 src/assets/styles/bootstrap/_carousel.scss    |  19 +-
 src/assets/styles/bootstrap/_close.scss       |   3 +-
 src/assets/styles/bootstrap/_dropdown.scss    |   1 -
 src/assets/styles/bootstrap/_functions.scss   | 136 ++++-
 src/assets/styles/bootstrap/_images.scss      |   3 +-
 src/assets/styles/bootstrap/_list-group.scss  |  19 +-
 src/assets/styles/bootstrap/_modal.scss       |  24 +-
 src/assets/styles/bootstrap/_nav.scss         | 208 +++----
 src/assets/styles/bootstrap/_navbar.scss      |   7 +-
 src/assets/styles/bootstrap/_offcanvas.scss   |  14 +-
 src/assets/styles/bootstrap/_pagination.scss  |  22 +-
 .../styles/bootstrap/_placeholders.scss       |  11 +-
 src/assets/styles/bootstrap/_popover.scss     |  24 +-
 src/assets/styles/bootstrap/_progress.scss    |   4 +-
 src/assets/styles/bootstrap/_reboot.scss      | 370 ++++++------
 src/assets/styles/bootstrap/_spinners.scss    |   4 +-
 src/assets/styles/bootstrap/_tables.scss      |  16 +-
 src/assets/styles/bootstrap/_toasts.scss      |   6 +-
 src/assets/styles/bootstrap/_tooltip.scss     |  14 +-
 src/assets/styles/bootstrap/_type.scss        |   2 -
 src/assets/styles/bootstrap/_utilities.scss   | 549 +++++++++++-------
 src/assets/styles/bootstrap/_variables.scss   |   4 +-
 .../styles/bootstrap/bootstrap-grid.scss      |   2 +-
 .../styles/bootstrap/forms/_form-check.scss   |  23 +-
 .../styles/bootstrap/forms/_form-control.scss |  18 +-
 .../styles/bootstrap/forms/_form-range.scss   |  15 +-
 .../styles/bootstrap/forms/_form-select.scss  |  13 +-
 .../styles/bootstrap/forms/_input-group.scss  |  11 +-
 .../bootstrap/helpers/_colored-links.scss     |   6 +-
 .../styles/bootstrap/mixins/_backdrop.scss    |   8 +-
 .../bootstrap/mixins/_border-radius.scss      |   3 +-
 .../styles/bootstrap/mixins/_breakpoints.scss |  24 +-
 .../styles/bootstrap/mixins/_buttons.scss     |  51 +-
 .../styles/bootstrap/mixins/_deprecate.scss   |   7 +-
 .../styles/bootstrap/mixins/_forms.scss       |  18 +-
 .../styles/bootstrap/mixins/_gradients.scss   |  72 ++-
 src/assets/styles/bootstrap/mixins/_grid.scss |  36 +-
 .../styles/bootstrap/mixins/_image.scss       |   1 -
 .../styles/bootstrap/mixins/_transition.scss  |   7 +-
 .../styles/bootstrap/mixins/_utilities.scss   |  35 +-
 .../styles/bootstrap/utilities/_api.scss      |  13 +-
 src/assets/styles/bootstrap/vendor/_rfs.scss  |   2 +-
 src/assets/styles/icons.scss                  | 119 ++++
 src/assets/styles/index.scss                  |  92 +++
 src/common/InfiniteScroll.tsx                 |  96 ++-
 src/common/Slider.tsx                         |  21 +
 src/common/card/NitroCardView.scss            |  61 +-
 src/common/card/NitroCardView.tsx             |  30 +
 src/common/card/tabs/NitroCardTabsView.tsx    |   4 +-
 src/common/index.scss                         |  18 +-
 src/common/layout/LayoutCurrencyIcon.tsx      |   2 +-
 .../layout/LayoutFurniIconImageView.tsx       |   2 +-
 src/common/layout/LayoutFurniImageView.tsx    |  17 +-
 src/common/layout/LayoutGiftTagView.tsx       |   4 +-
 .../layout/LayoutGridColorPickerItem.tsx      |  75 +++
 src/common/layout/LayoutMiniCameraView.tsx    |   2 +-
 src/common/layout/LayoutPetImageView.tsx      |  21 +-
 src/common/layout/LayoutRoomPreviewerView.tsx |  63 +-
 src/common/layout/LayoutTrophyView.tsx        |   5 +-
 66 files changed, 1811 insertions(+), 861 deletions(-)
 create mode 100644 src/common/Slider.tsx
 create mode 100644 src/common/layout/LayoutGridColorPickerItem.tsx

diff --git a/src/App.scss b/src/App.scss
index 2000ade..687677d 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -21,14 +21,14 @@ $toolbar-height: 55px;
 $achievement-width: 375px;
 $achievement-height: 405px;
 
-$avatar-editor-width: 620px;
-$avatar-editor-height: 374px;
+$avatar-editor-width: 520px;
+$avatar-editor-height: 553px;
 
-$catalog-width: 630px;
-$catalog-height: 400px;
+$catalog-width: 650px;
+$catalog-height: 480px;
 
 $inventory-width: 528px;
-$inventory-height: 320px;
+$inventory-height: 370px;
 
 $navigator-width: 420px;
 $navigator-height: 440px;
@@ -60,8 +60,11 @@ $help-height: 290px;
 $nitropedia-width: 400px;
 $nitropedia-height: 400px;
 
-$messenger-width: 500px;
-$messenger-height: 370px;
+$nitrobubblehidden-width: 400px;
+$nitrobubblehidden-height: 400px;
+
+$messenger-width: 580px;
+$messenger-height: 455px;
 
 $marketplace-post-offer-width: 430px;
 $marketplace-post-offer-height: 250px;
diff --git a/src/assets/styles/bootstrap/_accordion.scss b/src/assets/styles/bootstrap/_accordion.scss
index fc62ceb..2d6ab38 100644
--- a/src/assets/styles/bootstrap/_accordion.scss
+++ b/src/assets/styles/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/styles/bootstrap/_alert.scss b/src/assets/styles/bootstrap/_alert.scss
index 80b6a43..670a7bf 100644
--- a/src/assets/styles/bootstrap/_alert.scss
+++ b/src/assets/styles/bootstrap/_alert.scss
@@ -1,7 +1,7 @@
+@use 'sass:math';
 //
 // Base styles
 //
-@use 'sass:math';
 
 .alert {
   position: relative;
@@ -22,7 +22,6 @@
   font-weight: $alert-link-font-weight;
 }
 
-
 // Dismissible alerts
 //
 // Expand the right padding and account for the close button's positioning.
@@ -40,7 +39,6 @@
   }
 }
 
-
 // scss-docs-start alert-modifiers
 // Generate contextual modifier classes for colorizing the alert.
 
diff --git a/src/assets/styles/bootstrap/_breadcrumb.scss b/src/assets/styles/bootstrap/_breadcrumb.scss
index f7fafe7..bbd5552 100644
--- a/src/assets/styles/bootstrap/_breadcrumb.scss
+++ b/src/assets/styles/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/styles/bootstrap/_button-group.scss b/src/assets/styles/bootstrap/_button-group.scss
index 13aa056..e7b961c 100644
--- a/src/assets/styles/bootstrap/_button-group.scss
+++ b/src/assets/styles/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/styles/bootstrap/_buttons.scss b/src/assets/styles/bootstrap/_buttons.scss
index 3c2cba9..672fd60 100644
--- a/src/assets/styles/bootstrap/_buttons.scss
+++ b/src/assets/styles/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
 //
@@ -102,15 +105,131 @@
   // No need for an active state here
 }
 
-
 //
 // Button Sizes
 //
 
+.btn-toggle {
+  border-image-source: url("@/assets/images/buttons/toggle_bg.png");
+  border-image-slice: 6 6 6 6 fill;
+  border-image-width: 6px 6px 6px 6px;
+  cursor: pointer;
+
+  .toggle-icon {
+    background-repeat: no-repeat;
+    width: 6px;
+    height: 8px;
+
+    &.left {
+      background-image: url("@/assets/images/buttons/toggle_left.png");
+    }
+
+    &.right {
+      background-image: url("@/assets/images/buttons/toggle_right.png");
+    }
+  }
+}
+
+.infostand-buttons {
+  border-image-source: url(@/assets/images/room/infostand_buttons.png);
+  border-image-slice: 3 3 3 3 fill;
+  border-image-width: 3px 3px 3px 3px;
+  font-size: 9px;
+  color: #ffffff;
+  height: 25px;
+  margin-top: 5px;
+
+  &:hover {
+    border-image-source: url(@/assets/images/room/infostand_buttons_hover.png);
+  }
+
+  &:active {
+    border-image-source: url(@/assets/images/room/infostand_buttons_active.png);
+  }
+}
+
+.volter-bold-button {
+  border-image-source: url(@/assets/images/buttons/volter_bold_btn.png);
+  border-image-slice: 6 6 6 6 fill;
+  border-image-width: 6px 6px 6px 6px;
+  font-size: 9px;
+  height: 20px;
+  margin-top: 5px;
+
+  &:hover {
+    border-image-source: url(@/assets/images/buttons/volter_bold_btn_hover.png);
+  }
+
+  &:active {
+    border-image-source: url(@/assets/images/buttons/volter_bold_btn_active.png);
+  }
+}
+
+.volter-button {
+  border-image-source: url(@/assets/images/buttons/volter_normal_btn.png);
+  border-image-slice: 4 4 4 4 fill;
+  border-image-width: 4px 4px 4px 4px;
+  font-size: 9px;
+  height: 20px;
+  margin-top: 5px;
+
+  &:hover {
+    border-image-source: url(@/assets/images/buttons/volter_normal_btn_hover.png);
+  }
+
+  &:active {
+    border-image-source: url(@/assets/images/buttons/volter_normal_btn_active.png);
+  }
+  &.active {
+    border-image-source: url(@/assets/images/buttons/volter_normal_btn_active.png);
+  }
+}
+
+.notification-buttons {
+  border-image-source: url(@/assets/images/room/infostand_buttons.png);
+  border-image-slice: 3 3 3 3 fill;
+  border-image-width: 3px 3px 3px 3px;
+  color: #ffffff;
+  height: 25px;
+  font-size: 13px;
+  padding: 0;
+  border-radius: 13px;
+
+  &:hover {
+    border-image-source: url(@/assets/images/room/infostand_buttons_hover.png);
+  }
+
+  &:active {
+    border-image-source: url(@/assets/images/room/infostand_buttons_active.png);
+  }
+}
+
+.notification-text-link {
+  font-size: 13px;
+}
+
+.gift-color-btn {
+  outline: 1px solid #000;
+  border: 3px solid #fff;
+  min-height: 22px;
+  min-width: 23px;
+
+}
+
 .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/styles/bootstrap/_card.scss b/src/assets/styles/bootstrap/_card.scss
index 22890f5..94f1b4c 100644
--- a/src/assets/styles/bootstrap/_card.scss
+++ b/src/assets/styles/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/styles/bootstrap/_carousel.scss b/src/assets/styles/bootstrap/_carousel.scss
index 3d8fb15..6ea3d65 100644
--- a/src/assets/styles/bootstrap/_carousel.scss
+++ b/src/assets/styles/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/styles/bootstrap/_close.scss b/src/assets/styles/bootstrap/_close.scss
index 32a0f68..27fc146 100644
--- a/src/assets/styles/bootstrap/_close.scss
+++ b/src/assets/styles/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/styles/bootstrap/_dropdown.scss b/src/assets/styles/bootstrap/_dropdown.scss
index adc1143..d3fbf68 100644
--- a/src/assets/styles/bootstrap/_dropdown.scss
+++ b/src/assets/styles/bootstrap/_dropdown.scss
@@ -116,7 +116,6 @@
   }
 }
 
-
 // Dividers (basically an `<hr>`) within the dropdown
 .dropdown-divider {
   height: 0;
diff --git a/src/assets/styles/bootstrap/_functions.scss b/src/assets/styles/bootstrap/_functions.scss
index 1f5a283..893c682 100644
--- a/src/assets/styles/bootstrap/_functions.scss
+++ b/src/assets/styles/bootstrap/_functions.scss
@@ -1,11 +1,10 @@
+@use 'sass:math';
 // Bootstrap functions
 //
 // Utility mixins and functions for evaluating source code across our variables, maps, and mixins.
 
 // Ascending
 // Used to evaluate Sass maps like our grid breakpoints.
-@use 'sass:math';
-
 @mixin _assert-ascending($map, $map-name) {
   $prev-key: null;
   $prev-num: null;
@@ -40,7 +39,10 @@
 }
 
 @function rgba-css-var($identifier, $target) {
-  @return rgba(var(--#{$variable-prefix}#{$identifier}-rgb), var(--#{$variable-prefix}#{$target}-opacity));
+  @return rgba(
+    var(--#{$variable-prefix}#{$identifier}-rgb),
+    var(--#{$variable-prefix}#{$target}-opacity)
+  );
 }
 
 // stylelint-disable scss/dollar-variable-pattern
@@ -51,10 +53,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;
@@ -86,7 +96,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;
@@ -114,7 +129,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;
@@ -144,9 +164,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;
+$_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) {
+@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;
@@ -170,7 +218,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
@@ -180,15 +232,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
@@ -210,7 +272,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 * 1% > 0, shade-color($color, $weight), tint-color($color, -$weight));
+  @return if(
+    $weight * 1% > 0,
+    shade-color($color, $weight),
+    tint-color($color, -$weight)
+  );
 }
 // scss-docs-end color-functions
 
@@ -224,11 +290,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) {
@@ -244,7 +319,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;
   }
 
@@ -252,11 +332,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: math.abs($dividend);
   $divisor: math.abs($divisor);
   @if $dividend == 0 {
@@ -275,7 +363,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) {
@@ -289,9 +377,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/styles/bootstrap/_images.scss b/src/assets/styles/bootstrap/_images.scss
index 3d6a101..61677ac 100644
--- a/src/assets/styles/bootstrap/_images.scss
+++ b/src/assets/styles/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/styles/bootstrap/_list-group.scss b/src/assets/styles/bootstrap/_list-group.scss
index 455acef..b4a9730 100644
--- a/src/assets/styles/bootstrap/_list-group.scss
+++ b/src/assets/styles/bootstrap/_list-group.scss
@@ -1,9 +1,8 @@
+@use 'sass:math';
 // Base class
 //
 // Easily usable on <ul>, <ol>, or <div>.
 
-@use 'sass:math';
-
 .list-group {
   display: flex;
   flex-direction: column;
@@ -25,7 +24,6 @@
   }
 }
 
-
 // Interactive list items
 //
 // Use anchor or button elements instead of `li`s or `div`s to create interactive
@@ -51,7 +49,6 @@
   }
 }
 
-
 // Individual list items
 //
 // Use on `li`s or `div`s within the `.list-group` parent.
@@ -98,7 +95,6 @@
   }
 }
 
-
 // Horizontal
 //
 // Change the layout of list group items from vertical (default) to horizontal.
@@ -139,7 +135,6 @@
   }
 }
 
-
 // Flush list items
 //
 // Remove borders and border-radius to keep list group items edge-to-edge. Most
@@ -157,7 +152,6 @@
   }
 }
 
-
 // scss-docs-start list-group-modifiers
 // List group contextual variants
 //
@@ -167,10 +161,17 @@
 @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) {
+  @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), math.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/styles/bootstrap/_modal.scss b/src/assets/styles/bootstrap/_modal.scss
index 21e1258..da87f9c 100644
--- a/src/assets/styles/bootstrap/_modal.scss
+++ b/src/assets/styles/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/styles/bootstrap/_nav.scss b/src/assets/styles/bootstrap/_nav.scss
index cd1371d..365a143 100644
--- a/src/assets/styles/bootstrap/_nav.scss
+++ b/src/assets/styles/bootstrap/_nav.scss
@@ -4,37 +4,37 @@
 // `<nav>`s, `<ul>`s or `<ol>`s.
 
 .nav {
-    display: flex;
-    flex-wrap: wrap;
-    padding-left: 0;
-    margin-bottom: 0;
-    list-style: none;
+  display: flex;
+  flex-wrap: wrap;
+  padding-left: 0;
+  margin-bottom: 0;
+  list-style: none;
 }
 
 .nav-link {
-    display: block;
-    padding: $nav-link-padding-y $nav-link-padding-x;
-    @include font-size($nav-link-font-size);
-    font-weight: $nav-link-font-weight;
-    color: $nav-link-color;
-    text-decoration: if($link-decoration == none, null, none);
-    @include transition($nav-link-transition);
+  display: block;
+  padding: $nav-link-padding-y $nav-link-padding-x;
+  @include font-size($nav-link-font-size);
+  font-weight: $nav-link-font-weight;
+  color: $nav-link-color;
+  text-decoration: if($link-decoration == none, null, none);
+  @include transition($nav-link-transition);
 
-    display: flex;
-    align-items: center;
+  display: flex;
+  align-items: center;
 
-    &:hover,
-    &:focus {
-        color: $nav-link-hover-color;
-        text-decoration: if($link-hover-decoration == underline, none, null);
-    }
+  &:hover,
+  &:focus {
+    color: $nav-link-hover-color;
+    text-decoration: if($link-hover-decoration == underline, none, null);
+  }
 
-    // Disabled state lightens text
-    &.disabled {
-        color: $nav-link-disabled-color;
-        pointer-events: none;
-        cursor: default;
-    }
+  // Disabled state lightens text
+  &.disabled {
+    color: $nav-link-disabled-color;
+    pointer-events: none;
+    cursor: default;
+  }
 }
 
 //
@@ -42,62 +42,62 @@
 //
 
 .nav-tabs {
-    border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color;
+  border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color;
 
-    .nav-link {
-        position: relative;
-        margin-bottom: -$nav-tabs-border-width;
-        background-color: $nav-tabs-link-bg;
-        border: $nav-tabs-border-width solid $nav-tabs-border-color;
-        @include border-top-radius($nav-tabs-border-radius);
+  .nav-link {
+    position: relative;
+    margin-bottom: -$nav-tabs-border-width;
+    background-color: $nav-tabs-link-bg;
+    border: $nav-tabs-border-width solid $nav-tabs-border-color;
+    @include border-top-radius($nav-tabs-border-radius);
 
-        &.active {
-            &:before {
-                background: #ffffff;
-            }
-        }
-
-        &:before {
-            content: "";
-            position: absolute;
-            width: 93%;
-            height: 3px;
-            border-radius: $border-radius;
-            top: 1.5px;
-            left: 0;
-            right: 0;
-            margin: auto;
-            background: #c2c9d1;
-            z-index: 1;
-        }
-
-        &:hover,
-        &:focus {
-            border-color: $nav-tabs-link-hover-border-color;
-            // Prevents active .nav-link tab overlapping focus outline of previous/next .nav-link
-            isolation: isolate;
-        }
-
-        &.disabled {
-            color: $nav-link-disabled-color;
-            background-color: transparent;
-            border-color: transparent;
-        }
+    &.active {
+      &:before {
+        background: #ffffff;
+      }
     }
 
-    .nav-link.active,
-    .nav-item.show .nav-link {
-        color: $nav-tabs-link-active-color;
-        background-color: $nav-tabs-link-active-bg;
-        border-color: $nav-tabs-link-active-border-color;
+    &:before {
+      content: "";
+      position: absolute;
+      width: 93%;
+      height: 3px;
+      border-radius: $border-radius;
+      top: 1.5px;
+      left: 0;
+      right: 0;
+      margin: auto;
+      background: #c2c9d1;
+      z-index: 1;
     }
 
-    .dropdown-menu {
-        // Make dropdown border overlap tab border
-        margin-top: -$nav-tabs-border-width;
-        // Remove the top rounded corners here since there is a hard edge above the menu
-        @include border-top-radius(0);
+    &:hover,
+    &:focus {
+      border-color: $nav-tabs-link-hover-border-color;
+      // Prevents active .nav-link tab overlapping focus outline of previous/next .nav-link
+      isolation: isolate;
     }
+
+    &.disabled {
+      color: $nav-link-disabled-color;
+      background-color: transparent;
+      border-color: transparent;
+    }
+  }
+
+  .nav-link.active,
+  .nav-item.show .nav-link {
+    color: $nav-tabs-link-active-color;
+    background-color: $nav-tabs-link-active-bg;
+    border-color: $nav-tabs-link-active-border-color;
+  }
+
+  .dropdown-menu {
+    // Make dropdown border overlap tab border
+    margin-top: -$nav-tabs-border-width;
+    // Remove the top rounded corners here since there is a hard edge above the menu
+    @include border-top-radius(0);
+  }
 }
 
 //
@@ -105,17 +105,17 @@
 //
 
 .nav-pills {
-    .nav-link {
-        background: none;
-        border: 0;
-        @include border-radius($nav-pills-border-radius);
-    }
+  .nav-link {
+    background: none;
+    border: 0;
+    @include border-radius($nav-pills-border-radius);
+  }
 
-    .nav-link.active,
-    .show > .nav-link {
-        color: $nav-pills-link-active-color;
-        @include gradient-bg($nav-pills-link-active-bg);
-    }
+  .nav-link.active,
+  .show > .nav-link {
+    color: $nav-pills-link-active-color;
+    @include gradient-bg($nav-pills-link-active-bg);
+  }
 }
 
 //
@@ -123,27 +123,27 @@
 //
 
 .nav-fill {
-    > .nav-link,
-    .nav-item {
-        flex: 1 1 auto;
-        text-align: center;
-    }
+  > .nav-link,
+  .nav-item {
+    flex: 1 1 auto;
+    text-align: center;
+  }
 }
 
 .nav-justified {
-    > .nav-link,
-    .nav-item {
-        flex-basis: 0;
-        flex-grow: 1;
-        text-align: center;
-    }
+  > .nav-link,
+  .nav-item {
+    flex-basis: 0;
+    flex-grow: 1;
+    text-align: center;
+  }
 }
 
 .nav-fill,
 .nav-justified {
-    .nav-item .nav-link {
-        width: 100%; // Make sure button will grow
-    }
+  .nav-item .nav-link {
+    width: 100%; // Make sure button will grow
+  }
 }
 
 // Tabbable tabs
@@ -151,10 +151,10 @@
 // Hide tabbable panes to start, show them when `.active`
 
 .tab-content {
-    > .tab-pane {
-        display: none;
-    }
-    > .active {
-        display: block;
-    }
+  > .tab-pane {
+    display: none;
+  }
+  > .active {
+    display: block;
+  }
 }
diff --git a/src/assets/styles/bootstrap/_navbar.scss b/src/assets/styles/bootstrap/_navbar.scss
index 001dfc9..103995d 100644
--- a/src/assets/styles/bootstrap/_navbar.scss
+++ b/src/assets/styles/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/styles/bootstrap/_offcanvas.scss b/src/assets/styles/bootstrap/_offcanvas.scss
index a089c2a..5ee101b 100644
--- a/src/assets/styles/bootstrap/_offcanvas.scss
+++ b/src/assets/styles/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/styles/bootstrap/_pagination.scss b/src/assets/styles/bootstrap/_pagination.scss
index 9c46666..02a66d4 100644
--- a/src/assets/styles/bootstrap/_pagination.scss
+++ b/src/assets/styles/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/styles/bootstrap/_placeholders.scss b/src/assets/styles/bootstrap/_placeholders.scss
index 2f647cc..f0d29e1 100644
--- a/src/assets/styles/bootstrap/_placeholders.scss
+++ b/src/assets/styles/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/styles/bootstrap/_popover.scss b/src/assets/styles/bootstrap/_popover.scss
index 3b8208e..8d8a507 100644
--- a/src/assets/styles/bootstrap/_popover.scss
+++ b/src/assets/styles/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/styles/bootstrap/_progress.scss b/src/assets/styles/bootstrap/_progress.scss
index 5715ab0..287ba89 100644
--- a/src/assets/styles/bootstrap/_progress.scss
+++ b/src/assets/styles/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/styles/bootstrap/_reboot.scss b/src/assets/styles/bootstrap/_reboot.scss
index 4345886..391a55b 100644
--- a/src/assets/styles/bootstrap/_reboot.scss
+++ b/src/assets/styles/bootstrap/_reboot.scss
@@ -14,8 +14,8 @@
 *,
 *::before,
 *::after {
-    line-height: normal;
-    box-sizing: border-box;
+  line-height: normal;
+  box-sizing: border-box;
 }
 
 // Root
@@ -24,15 +24,15 @@
 // null by default, thus nothing is generated.
 
 :root {
-    @if $font-size-root != null {
-        font-size: var(--#{$variable-prefix}-root-font-size);
-    }
+  @if $font-size-root != null {
+    font-size: var(--#{$variable-prefix}-root-font-size);
+  }
 
-    @if $enable-smooth-scroll {
-        @media (prefers-reduced-motion: no-preference) {
-            scroll-behavior: smooth;
-        }
+  @if $enable-smooth-scroll {
+    @media (prefers-reduced-motion: no-preference) {
+      scroll-behavior: smooth;
     }
+  }
 }
 
 // Body
@@ -44,16 +44,16 @@
 
 // scss-docs-start reboot-body-rules
 body {
-    margin: 0; // 1
-    font-family: var(--#{$variable-prefix}body-font-family);
-    @include font-size(var(--#{$variable-prefix}body-font-size));
-    font-weight: var(--#{$variable-prefix}body-font-weight);
-    line-height: var(--#{$variable-prefix}body-line-height);
-    color: var(--#{$variable-prefix}body-color);
-    text-align: var(--#{$variable-prefix}body-text-align);
-    background-color: var(--#{$variable-prefix}body-bg); // 2
-    -webkit-text-size-adjust: 100%; // 3
-    -webkit-tap-highlight-color: rgba($black, 0); // 4
+  margin: 0; // 1
+  font-family: var(--#{$variable-prefix}body-font-family);
+  @include font-size(var(--#{$variable-prefix}body-font-size));
+  font-weight: var(--#{$variable-prefix}body-font-weight);
+  line-height: var(--#{$variable-prefix}body-line-height);
+  color: var(--#{$variable-prefix}body-color);
+  text-align: var(--#{$variable-prefix}body-text-align);
+  background-color: var(--#{$variable-prefix}body-bg); // 2
+  -webkit-text-size-adjust: 100%; // 3
+  -webkit-tap-highlight-color: rgba($black, 0); // 4
 }
 // scss-docs-end reboot-body-rules
 
@@ -63,15 +63,15 @@ body {
 // 2. Set correct height and prevent the `size` attribute to make the `hr` look like an input field
 
 hr {
-    margin: $hr-margin-y 0;
-    color: $hr-color; // 1
-    background-color: rgba(black,.2);
-    border: 0;
-    opacity: $hr-opacity;
+  margin: $hr-margin-y 0;
+  color: $hr-color; // 1
+  background-color: rgba(black, 0.2);
+  border: 0;
+  opacity: $hr-opacity;
 }
 
 hr:not([size]) {
-    height: $hr-height; // 2
+  height: $hr-height; // 2
 }
 
 // Typography
@@ -81,43 +81,43 @@ hr:not([size]) {
 //    margin for easier control within type scales as it avoids margin collapsing.
 
 %heading {
-    margin-top: 0; // 1
-    margin-bottom: $headings-margin-bottom;
-    font-family: $headings-font-family;
-    font-style: $headings-font-style;
-    font-weight: $headings-font-weight;
-    line-height: $headings-line-height;
-    color: $headings-color;
+  margin-top: 0; // 1
+  margin-bottom: $headings-margin-bottom;
+  font-family: $headings-font-family;
+  font-style: $headings-font-style;
+  font-weight: $headings-font-weight;
+  line-height: $headings-line-height;
+  color: $headings-color;
 }
 
 h1 {
-    @extend %heading;
-    @include font-size($h1-font-size);
+  @extend %heading;
+  @include font-size($h1-font-size);
 }
 
 h2 {
-    @extend %heading;
-    @include font-size($h2-font-size);
+  @extend %heading;
+  @include font-size($h2-font-size);
 }
 
 h3 {
-    @extend %heading;
-    @include font-size($h3-font-size);
+  @extend %heading;
+  @include font-size($h3-font-size);
 }
 
 h4 {
-    @extend %heading;
-    @include font-size($h4-font-size);
+  @extend %heading;
+  @include font-size($h4-font-size);
 }
 
 h5 {
-    @extend %heading;
-    @include font-size($h5-font-size);
+  @extend %heading;
+  @include font-size($h5-font-size);
 }
 
 h6 {
-    @extend %heading;
-    @include font-size($h6-font-size);
+  @extend %heading;
+  @include font-size($h6-font-size);
 }
 
 // Reset margins on paragraphs
@@ -126,8 +126,8 @@ h6 {
 // bottom margin to use `rem` units instead of `em`.
 
 p {
-    margin-top: 0;
-    margin-bottom: $paragraph-margin-bottom;
+  margin-top: 0;
+  margin-bottom: $paragraph-margin-bottom;
 }
 
 // Abbreviations
@@ -139,56 +139,56 @@ p {
 
 abbr[title],
 abbr[data-bs-original-title] {
-    // 1
-    text-decoration: underline dotted; // 2
-    cursor: help; // 3
-    text-decoration-skip-ink: none; // 4
+  // 1
+  text-decoration: underline dotted; // 2
+  cursor: help; // 3
+  text-decoration-skip-ink: none; // 4
 }
 
 // Address
 
 address {
-    margin-bottom: 1rem;
-    font-style: normal;
-    line-height: inherit;
+  margin-bottom: 1rem;
+  font-style: normal;
+  line-height: inherit;
 }
 
 // Lists
 
 ol,
 ul {
-    padding-left: 2rem;
+  padding-left: 2rem;
 }
 
 ol,
 ul,
 dl {
-    margin-top: 0;
-    margin-bottom: 1rem;
+  margin-top: 0;
+  margin-bottom: 1rem;
 }
 
 ol ol,
 ul ul,
 ol ul,
 ul ol {
-    margin-bottom: 0;
+  margin-bottom: 0;
 }
 
 dt {
-    font-weight: $dt-font-weight;
+  font-weight: $dt-font-weight;
 }
 
 // 1. Undo browser default
 
 dd {
-    margin-bottom: 0.5rem;
-    margin-left: 0; // 1
+  margin-bottom: 0.5rem;
+  margin-left: 0; // 1
 }
 
 // Blockquote
 
 blockquote {
-    margin: 0 0 1rem;
+  margin: 0 0 1rem;
 }
 
 // Strong
@@ -197,7 +197,7 @@ blockquote {
 
 b,
 strong {
-    font-weight: $font-weight-bolder;
+  font-weight: $font-weight-bolder;
 }
 
 // Small
@@ -205,14 +205,14 @@ strong {
 // Add the correct font size in all browsers
 
 small {
-    @include font-size($small-font-size);
+  @include font-size($small-font-size);
 }
 
 // Mark
 
 mark {
-    padding: $mark-padding;
-    background-color: $mark-bg;
+  padding: $mark-padding;
+  background-color: $mark-bg;
 }
 
 // Sub and Sup
@@ -222,29 +222,29 @@ mark {
 
 sub,
 sup {
-    position: relative;
-    @include font-size($sub-sup-font-size);
-    line-height: 0;
-    vertical-align: baseline;
+  position: relative;
+  @include font-size($sub-sup-font-size);
+  line-height: 0;
+  vertical-align: baseline;
 }
 
 sub {
-    bottom: -0.25em;
+  bottom: -0.25em;
 }
 sup {
-    top: -0.5em;
+  top: -0.5em;
 }
 
 // Links
 
 a {
-    color: $link-color;
-    text-decoration: $link-decoration;
+  color: $link-color;
+  text-decoration: $link-decoration;
 
-    &:hover {
-        color: $link-hover-color;
-        text-decoration: $link-hover-decoration;
-    }
+  &:hover {
+    color: $link-hover-color;
+    text-decoration: $link-hover-decoration;
+  }
 }
 
 // And undo these styles for placeholder links/named anchors (without href).
@@ -253,11 +253,11 @@ a {
 // See https://github.com/twbs/bootstrap/issues/19402
 
 a:not([href]):not([class]) {
-    &,
-    &:hover {
-        color: inherit;
-        text-decoration: none;
-    }
+  &,
+  &:hover {
+    color: inherit;
+    text-decoration: none;
+  }
 }
 
 // Code
@@ -266,12 +266,10 @@ pre,
 code,
 kbd,
 samp {
-    font-family: $font-family-code;
-    @include font-size(
-        1em
-    ); // Correct the odd `em` font sizing in all browsers.
-    direction: ltr #{"/* rtl:ignore */"};
-    unicode-bidi: bidi-override;
+  font-family: $font-family-code;
+  @include font-size(1em); // Correct the odd `em` font sizing in all browsers.
+  direction: ltr #{"/* rtl:ignore */"};
+  unicode-bidi: bidi-override;
 }
 
 // 1. Remove browser default top margin
@@ -279,44 +277,44 @@ samp {
 // 3. Don't allow content to break outside
 
 pre {
-    display: block;
-    margin-top: 0; // 1
-    margin-bottom: 1rem; // 2
-    overflow: auto; // 3
-    @include font-size($code-font-size);
-    color: $pre-color;
+  display: block;
+  margin-top: 0; // 1
+  margin-bottom: 1rem; // 2
+  overflow: auto; // 3
+  @include font-size($code-font-size);
+  color: $pre-color;
 
-    // Account for some code outputs that place code tags in pre tags
-    code {
-        @include font-size(inherit);
-        color: inherit;
-        word-break: normal;
-    }
+  // Account for some code outputs that place code tags in pre tags
+  code {
+    @include font-size(inherit);
+    color: inherit;
+    word-break: normal;
+  }
 }
 
 code {
-    @include font-size($code-font-size);
-    color: $code-color;
-    word-wrap: break-word;
+  @include font-size($code-font-size);
+  color: $code-color;
+  word-wrap: break-word;
 
-    // Streamline the style when inside anchors to avoid broken underline and more
-    a > & {
-        color: inherit;
-    }
+  // Streamline the style when inside anchors to avoid broken underline and more
+  a > & {
+    color: inherit;
+  }
 }
 
 kbd {
-    padding: $kbd-padding-y $kbd-padding-x;
-    @include font-size($kbd-font-size);
-    color: $kbd-color;
-    background-color: $kbd-bg;
-    @include border-radius($border-radius-sm);
+  padding: $kbd-padding-y $kbd-padding-x;
+  @include font-size($kbd-font-size);
+  color: $kbd-color;
+  background-color: $kbd-bg;
+  @include border-radius($border-radius-sm);
 
-    kbd {
-        padding: 0;
-        @include font-size(1em);
-        font-weight: $nested-kbd-font-weight;
-    }
+  kbd {
+    padding: 0;
+    @include font-size(1em);
+    font-weight: $nested-kbd-font-weight;
+  }
 }
 
 // Figures
@@ -324,14 +322,14 @@ kbd {
 // Apply a consistent margin strategy (matches our type styles).
 
 figure {
-    margin: 0 0 1rem;
+  margin: 0 0 1rem;
 }
 
 // Images and content
 
 img,
 svg {
-    vertical-align: middle;
+  vertical-align: middle;
 }
 
 // Tables
@@ -339,15 +337,15 @@ svg {
 // Prevent double borders
 
 table {
-    caption-side: bottom;
-    border-collapse: collapse;
+  caption-side: bottom;
+  border-collapse: collapse;
 }
 
 caption {
-    padding-top: $table-cell-padding-y;
-    padding-bottom: $table-cell-padding-y;
-    color: $table-caption-color;
-    text-align: left;
+  padding-top: $table-cell-padding-y;
+  padding-bottom: $table-cell-padding-y;
+  color: $table-caption-color;
+  text-align: left;
 }
 
 // 1. Removes font-weight bold by inheriting
@@ -355,9 +353,9 @@ caption {
 // 3. Fix alignment for Safari
 
 th {
-    font-weight: $table-th-font-weight; // 1
-    text-align: inherit; // 2
-    text-align: -webkit-match-parent; // 3
+  font-weight: $table-th-font-weight; // 1
+  text-align: inherit; // 2
+  text-align: -webkit-match-parent; // 3
 }
 
 thead,
@@ -366,9 +364,9 @@ tfoot,
 tr,
 td,
 th {
-    border-color: inherit;
-    border-style: solid;
-    border-width: 0;
+  border-color: inherit;
+  border-style: solid;
+  border-width: 0;
 }
 
 // Forms
@@ -376,15 +374,15 @@ th {
 // 1. Allow labels to use `margin` for spacing.
 
 label {
-    display: inline-block; // 1
+  display: inline-block; // 1
 }
 
 // Remove the default `border-radius` that macOS Chrome adds.
 // See https://github.com/twbs/bootstrap/issues/24093
 
 button {
-    // stylelint-disable-next-line property-disallowed-list
-    border-radius: 0;
+  // stylelint-disable-next-line property-disallowed-list
+  border-radius: 0;
 }
 
 // Explicitly remove focus outline in Chromium when it shouldn't be
@@ -393,7 +391,7 @@ button {
 // confused and applies its very visible two-tone outline anyway.
 
 button:focus:not(:focus-visible) {
-    outline: 0;
+  outline: 0;
 }
 
 // 1. Remove the margin in Firefox and Safari
@@ -403,40 +401,40 @@ button,
 select,
 optgroup,
 textarea {
-    margin: 0; // 1
-    font-family: inherit;
-    @include font-size(inherit);
-    line-height: inherit;
+  margin: 0; // 1
+  font-family: inherit;
+  @include font-size(inherit);
+  line-height: inherit;
 }
 
 // Remove the inheritance of text transform in Firefox
 button,
 select {
-    text-transform: none;
+  text-transform: none;
 }
 // Set the cursor for non-`<button>` buttons
 //
 // Details at https://github.com/twbs/bootstrap/pull/30562
 [role="button"] {
-    cursor: pointer;
+  cursor: pointer;
 }
 
 select {
-    // Remove the inheritance of word-wrap in Safari.
-    // See https://github.com/twbs/bootstrap/issues/24990
-    word-wrap: normal;
+  // Remove the inheritance of word-wrap in Safari.
+  // See https://github.com/twbs/bootstrap/issues/24990
+  word-wrap: normal;
 
-    // Undo the opacity change from Chrome
-    &:disabled {
-        opacity: 1;
-    }
+  // Undo the opacity change from Chrome
+  &:disabled {
+    opacity: 1;
+  }
 }
 
 // Remove the dropdown arrow in Chrome from inputs built with datalists.
 // See https://stackoverflow.com/a/54997118
 
 [list]::-webkit-calendar-picker-indicator {
-    display: none;
+  display: none;
 }
 
 // 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
@@ -448,26 +446,26 @@ button,
 [type="button"], // 1
 [type="reset"],
 [type="submit"] {
-    -webkit-appearance: button; // 2
+  -webkit-appearance: button; // 2
 
-    @if $enable-button-pointers {
-        &:not(:disabled) {
-            cursor: pointer; // 3
-        }
+  @if $enable-button-pointers {
+    &:not(:disabled) {
+      cursor: pointer; // 3
     }
+  }
 }
 
 // Remove inner border and padding from Firefox, but don't restore the outline like Normalize.
 
 ::-moz-focus-inner {
-    padding: 0;
-    border-style: none;
+  padding: 0;
+  border-style: none;
 }
 
 // 1. Textareas should really only resize vertically so they don't break their (horizontal) containers.
 
 textarea {
-    resize: vertical; // 1
+  resize: vertical; // 1
 }
 
 // 1. Browsers set a default `min-width: min-content;` on fieldsets,
@@ -478,10 +476,10 @@ textarea {
 // 2. Reset the default outline behavior of fieldsets so they don't affect page layout.
 
 fieldset {
-    min-width: 0; // 1
-    padding: 0; // 2
-    margin: 0; // 2
-    border: 0; // 2
+  min-width: 0; // 1
+  padding: 0; // 2
+  margin: 0; // 2
+  border: 0; // 2
 }
 
 // 1. By using `float: left`, the legend will behave like a block element.
@@ -490,17 +488,17 @@ fieldset {
 //    See https://github.com/twbs/bootstrap/issues/29712
 
 legend {
-    float: left; // 1
-    width: 100%;
-    padding: 0;
-    margin-bottom: $legend-margin-bottom;
-    @include font-size($legend-font-size);
-    font-weight: $legend-font-weight;
-    line-height: inherit;
+  float: left; // 1
+  width: 100%;
+  padding: 0;
+  margin-bottom: $legend-margin-bottom;
+  @include font-size($legend-font-size);
+  font-weight: $legend-font-weight;
+  line-height: inherit;
 
-    + * {
-        clear: left; // 2
-    }
+  + * {
+    clear: left; // 2
+  }
 }
 
 // Fix height of inputs with a type of datetime-local, date, month, week, or time
@@ -513,11 +511,11 @@ legend {
 ::-webkit-datetime-edit-day-field,
 ::-webkit-datetime-edit-month-field,
 ::-webkit-datetime-edit-year-field {
-    padding: 0;
+  padding: 0;
 }
 
 ::-webkit-inner-spin-button {
-    height: auto;
+  height: auto;
 }
 
 // 1. Correct the outline style in Safari.
@@ -527,8 +525,8 @@ legend {
 //    https://github.com/twbs/bootstrap/issues/11586.
 
 [type="search"] {
-    outline-offset: -2px; // 1
-    -webkit-appearance: textfield; // 2
+  outline-offset: -2px; // 1
+  -webkit-appearance: textfield; // 2
 }
 
 // 1. A few input types should stay LTR
@@ -548,39 +546,39 @@ legend {
 // Remove the inner padding in Chrome and Safari on macOS.
 
 ::-webkit-search-decoration {
-    -webkit-appearance: none;
+  -webkit-appearance: none;
 }
 
 // Remove padding around color pickers in webkit browsers
 
 ::-webkit-color-swatch-wrapper {
-    padding: 0;
+  padding: 0;
 }
 
 // Inherit font family and line height for file input buttons
 
 ::file-selector-button {
-    font: inherit;
+  font: inherit;
 }
 
 // 1. Change font properties to `inherit`
 // 2. Correct the inability to style clickable types in iOS and Safari.
 
 ::-webkit-file-upload-button {
-    font: inherit; // 1
-    -webkit-appearance: button; // 2
+  font: inherit; // 1
+  -webkit-appearance: button; // 2
 }
 
 // Correct element displays
 
 output {
-    display: inline-block;
+  display: inline-block;
 }
 
 // Remove border from iframe
 
 iframe {
-    border: 0;
+  border: 0;
 }
 
 // Summary
@@ -588,8 +586,8 @@ iframe {
 // 1. Add the correct display in all browsers
 
 summary {
-    display: list-item; // 1
-    cursor: pointer;
+  display: list-item; // 1
+  cursor: pointer;
 }
 
 // Progress
@@ -597,7 +595,7 @@ summary {
 // Add the correct vertical alignment in Chrome, Firefox, and Opera.
 
 progress {
-    vertical-align: baseline;
+  vertical-align: baseline;
 }
 
 // Hidden attribute
@@ -605,5 +603,5 @@ progress {
 // Always hide an element with the `hidden` HTML attribute.
 
 [hidden] {
-    display: none !important;
+  display: none !important;
 }
diff --git a/src/assets/styles/bootstrap/_spinners.scss b/src/assets/styles/bootstrap/_spinners.scss
index a4a2c77..ba0a165 100644
--- a/src/assets/styles/bootstrap/_spinners.scss
+++ b/src/assets/styles/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/styles/bootstrap/_tables.scss b/src/assets/styles/bootstrap/_tables.scss
index 92556ba..075b47a 100644
--- a/src/assets/styles/bootstrap/_tables.scss
+++ b/src/assets/styles/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.
@@ -99,7 +96,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);
   }
 }
@@ -109,7 +108,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);
 }
 
@@ -119,12 +120,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/styles/bootstrap/_toasts.scss b/src/assets/styles/bootstrap/_toasts.scss
index 0a2d6ec..22006dc 100644
--- a/src/assets/styles/bootstrap/_toasts.scss
+++ b/src/assets/styles/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/styles/bootstrap/_tooltip.scss b/src/assets/styles/bootstrap/_tooltip.scss
index 75ff078..fc81664 100644
--- a/src/assets/styles/bootstrap/_tooltip.scss
+++ b/src/assets/styles/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/styles/bootstrap/_type.scss b/src/assets/styles/bootstrap/_type.scss
index b2d524c..5224f34 100644
--- a/src/assets/styles/bootstrap/_type.scss
+++ b/src/assets/styles/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/styles/bootstrap/_utilities.scss b/src/assets/styles/bootstrap/_utilities.scss
index 7c6c723..4412255 100644
--- a/src/assets/styles/bootstrap/_utilities.scss
+++ b/src/assets/styles/bootstrap/_utilities.scss
@@ -7,41 +7,45 @@ $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,
+      ),
     "overflow-x": (
       property: overflow-x,
       values: auto hidden visible scroll,
@@ -52,48 +56,52 @@ $utilities: map-merge(
     ),
     // 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,
@@ -102,23 +110,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,
@@ -126,14 +135,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,
@@ -141,46 +150,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,
@@ -190,37 +212,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,
@@ -229,7 +260,7 @@ $utilities: map-merge(
       values: (
         grow-0: 0,
         grow-1: 1,
-      )
+      ),
     ),
     "flex-shrink": (
       responsive: true,
@@ -238,19 +269,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,
@@ -262,7 +293,7 @@ $utilities: map-merge(
         between: space-between,
         around: space-around,
         evenly: space-evenly,
-      )
+      ),
     ),
     "align-items": (
       responsive: true,
@@ -273,7 +304,7 @@ $utilities: map-merge(
         center: center,
         baseline: baseline,
         stretch: stretch,
-      )
+      ),
     ),
     "align-content": (
       responsive: true,
@@ -285,7 +316,7 @@ $utilities: map-merge(
         between: space-between,
         around: space-around,
         stretch: stretch,
-      )
+      ),
     ),
     "align-self": (
       responsive: true,
@@ -297,7 +328,7 @@ $utilities: map-merge(
         center: center,
         baseline: baseline,
         stretch: stretch,
-      )
+      ),
     ),
     "order": (
       responsive: true,
@@ -316,152 +347,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,
@@ -471,8 +550,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,
@@ -482,7 +561,7 @@ $utilities: map-merge(
         sm: $line-height-sm,
         base: $line-height-base,
         lg: $line-height-lg,
-      )
+      ),
     ),
     "text-align": (
       responsive: true,
@@ -492,16 +571,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,
@@ -509,79 +588,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
+    "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,
+            )
+          ),
       ),
-      values: map-merge(
-        $utilities-text-colors,
-        (
-          "muted": $text-muted,
-          "black-50": rgba($black, .5), // deprecated
-          "white-50": rgba($white, .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
+    "background-color":
+      (
+        property: background-color,
+        class: bg,
+        local-vars: (
+          "bg-opacity": 1,
+        ),
+        values:
+          map-merge(
+            $utilities-bg-colors,
+            (
+              "transparent": transparent,
+            )
+          ),
       ),
-      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,
@@ -589,50 +680,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/styles/bootstrap/_variables.scss b/src/assets/styles/bootstrap/_variables.scss
index eb668b3..7d9c6ee 100644
--- a/src/assets/styles/bootstrap/_variables.scss
+++ b/src/assets/styles/bootstrap/_variables.scss
@@ -478,7 +478,7 @@ $utilities-bg-colors: map-loop($utilities-colors, rgba-css-var, "$key", "bg") !d
 //
 // Style anchor elements.
 
-$link-color:                              $body-color !default;
+$link-color:                              $black !default;
 $link-decoration:                         underline !default;
 $link-shade-percentage:                   20% !default;
 $link-hover-color:                        shift-color($link-color, $link-shade-percentage) !default;
@@ -1680,4 +1680,4 @@ $kbd-font-size:                     $code-font-size !default;
 $kbd-color:                         $white !default;
 $kbd-bg:                            $gray-900 !default;
 
-$pre-color:                         null !default;
+$pre-color:                         null !default;
\ No newline at end of file
diff --git a/src/assets/styles/bootstrap/bootstrap-grid.scss b/src/assets/styles/bootstrap/bootstrap-grid.scss
index 2c68fbb..33a6841 100644
--- a/src/assets/styles/bootstrap/bootstrap-grid.scss
+++ b/src/assets/styles/bootstrap/bootstrap-grid.scss
@@ -58,7 +58,7 @@ $utilities: map-get-multiple(
     "padding-top",
     "padding-end",
     "padding-bottom",
-    "padding-start",
+    "padding-start"
   )
 );
 
diff --git a/src/assets/styles/bootstrap/forms/_form-check.scss b/src/assets/styles/bootstrap/forms/_form-check.scss
index 402c595..a4ada2b 100644
--- a/src/assets/styles/bootstrap/forms/_form-check.scss
+++ b/src/assets/styles/bootstrap/forms/_form-check.scss
@@ -14,6 +14,17 @@
   }
 }
 
+.flash-form-check-input {
+    width: 15px;
+    height: 15px;
+    background-image: url(@/assets/images/buttons/checkbox.png);
+    -webkit-appearance: none;
+
+    &:checked {
+      background-image: url(@/assets/images/buttons/checkbox_checked.png);
+    }
+}
+
 .form-check-input {
   width: $form-check-input-width;
   height: $form-check-input-width;
@@ -53,7 +64,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 +73,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 +86,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 +137,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/styles/bootstrap/forms/_form-control.scss b/src/assets/styles/bootstrap/forms/_form-control.scss
index 96423c5..36d6471 100644
--- a/src/assets/styles/bootstrap/forms/_form-control.scss
+++ b/src/assets/styles/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/styles/bootstrap/forms/_form-range.scss b/src/assets/styles/bootstrap/forms/_form-range.scss
index 6de4213..8fed070 100644
--- a/src/assets/styles/bootstrap/forms/_form-range.scss
+++ b/src/assets/styles/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/styles/bootstrap/forms/_form-select.scss b/src/assets/styles/bootstrap/forms/_form-select.scss
index 4506a97..0cbe336 100644
--- a/src/assets/styles/bootstrap/forms/_form-select.scss
+++ b/src/assets/styles/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/styles/bootstrap/forms/_input-group.scss b/src/assets/styles/bootstrap/forms/_input-group.scss
index 1400529..40fc201 100644
--- a/src/assets/styles/bootstrap/forms/_input-group.scss
+++ b/src/assets/styles/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/styles/bootstrap/helpers/_colored-links.scss b/src/assets/styles/bootstrap/helpers/_colored-links.scss
index 8c167de..d655615 100644
--- a/src/assets/styles/bootstrap/helpers/_colored-links.scss
+++ b/src/assets/styles/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/styles/bootstrap/mixins/_backdrop.scss b/src/assets/styles/bootstrap/mixins/_backdrop.scss
index 9705ae9..a29b087 100644
--- a/src/assets/styles/bootstrap/mixins/_backdrop.scss
+++ b/src/assets/styles/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/styles/bootstrap/mixins/_border-radius.scss b/src/assets/styles/bootstrap/mixins/_border-radius.scss
index 616decb..d2bbf0b 100644
--- a/src/assets/styles/bootstrap/mixins/_border-radius.scss
+++ b/src/assets/styles/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/styles/bootstrap/mixins/_breakpoints.scss b/src/assets/styles/bootstrap/mixins/_breakpoints.scss
index cdc8034..c109039 100644
--- a/src/assets/styles/bootstrap/mixins/_breakpoints.scss
+++ b/src/assets/styles/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/styles/bootstrap/mixins/_buttons.scss b/src/assets/styles/bootstrap/mixins/_buttons.scss
index b674996..316554e 100644
--- a/src/assets/styles/bootstrap/mixins/_buttons.scss
+++ b/src/assets/styles/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/styles/bootstrap/mixins/_deprecate.scss b/src/assets/styles/bootstrap/mixins/_deprecate.scss
index df070bc..119f593 100644
--- a/src/assets/styles/bootstrap/mixins/_deprecate.scss
+++ b/src/assets/styles/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/styles/bootstrap/mixins/_forms.scss b/src/assets/styles/bootstrap/mixins/_forms.scss
index dc5bdb0..17ea778 100644
--- a/src/assets/styles/bootstrap/mixins/_forms.scss
+++ b/src/assets/styles/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/styles/bootstrap/mixins/_gradients.scss b/src/assets/styles/bootstrap/mixins/_gradients.scss
index 44167d1..6e8d453 100644
--- a/src/assets/styles/bootstrap/mixins/_gradients.scss
+++ b/src/assets/styles/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/styles/bootstrap/mixins/_grid.scss b/src/assets/styles/bootstrap/mixins/_grid.scss
index 59cc563..a7367b5 100644
--- a/src/assets/styles/bootstrap/mixins/_grid.scss
+++ b/src/assets/styles/bootstrap/mixins/_grid.scss
@@ -7,22 +7,36 @@
   --#{$variable-prefix}gutter-y: 0;
   display: flex;
   flex-wrap: wrap;
-  margin-top: calc(var(--#{$variable-prefix}gutter-y) * -1); // stylelint-disable-line function-disallowed-list
-  margin-right: calc(var(--#{$variable-prefix}gutter-x) * -.5); // stylelint-disable-line function-disallowed-list
-  margin-left: calc(var(--#{$variable-prefix}gutter-x) * -.5); // stylelint-disable-line function-disallowed-list
+  margin-top: calc(
+    var(--#{$variable-prefix}gutter-y) * -1
+  ); // stylelint-disable-line function-disallowed-list
+  margin-right: calc(
+    var(--#{$variable-prefix}gutter-x) * -0.5
+  ); // stylelint-disable-line function-disallowed-list
+  margin-left: calc(
+    var(--#{$variable-prefix}gutter-x) * -0.5
+  ); // 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);
 }
 
@@ -30,7 +44,6 @@
   @if $size {
     flex: 0 0 auto;
     width: percentage(divide($size, $columns));
-
   } @else {
     flex: 1 1 0;
     max-width: 100%;
@@ -64,7 +77,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);
 
@@ -99,7 +116,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/styles/bootstrap/mixins/_image.scss b/src/assets/styles/bootstrap/mixins/_image.scss
index e1df779..95206cf 100644
--- a/src/assets/styles/bootstrap/mixins/_image.scss
+++ b/src/assets/styles/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/styles/bootstrap/mixins/_transition.scss b/src/assets/styles/bootstrap/mixins/_transition.scss
index d437f6d..36ce54f 100644
--- a/src/assets/styles/bootstrap/mixins/_transition.scss
+++ b/src/assets/styles/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/styles/bootstrap/mixins/_utilities.scss b/src/assets/styles/bootstrap/mixins/_utilities.scss
index e871b42..9a0d92c 100644
--- a/src/assets/styles/bootstrap/mixins/_utilities.scss
+++ b/src/assets/styles/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/styles/bootstrap/utilities/_api.scss b/src/assets/styles/bootstrap/utilities/_api.scss
index 62e1d39..21956b2 100644
--- a/src/assets/styles/bootstrap/utilities/_api.scss
+++ b/src/assets/styles/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/styles/bootstrap/vendor/_rfs.scss b/src/assets/styles/bootstrap/vendor/_rfs.scss
index 0189f86..fbe4f7a 100644
--- a/src/assets/styles/bootstrap/vendor/_rfs.scss
+++ b/src/assets/styles/bootstrap/vendor/_rfs.scss
@@ -1,3 +1,4 @@
+@use 'sass:math';
 // stylelint-disable property-blacklist, scss/dollar-variable-default
 
 // SCSS RFS mixin
@@ -7,7 +8,6 @@
 // Licensed under MIT (https://github.com/twbs/rfs/blob/main/LICENSE)
 
 // Configuration
-@use 'sass:math';
 
 // Base value
 $rfs-base-value: 1.25rem !default;
diff --git a/src/assets/styles/icons.scss b/src/assets/styles/icons.scss
index 509952b..b4edd49 100644
--- a/src/assets/styles/icons.scss
+++ b/src/assets/styles/icons.scss
@@ -192,7 +192,68 @@
         width: 17px;
         height: 19px;
     }
+    &.chatstickers-icon {
+        background-image: url('@/assets/images/chat/stickers-icon.png');
+        width: 22px;
+        height: 22px;
+    }
 
+    &.sticker-icon {
+        background-image: url('@/assets/images/chat/sticker.png');
+        width: 22px;
+        height: 22px;
+        margin-left: 5px;
+    }
+    &.icon-room-history-back-enabled {
+        background-image: url('@/assets/images/icons/room-history-back-enabled.png');
+        width: 34px;
+        height: 36px;
+    }
+    &.icon-room-history-back-disabled {
+        background-image: url('@/assets/images/icons/room-history-back-disabled.png');
+        width: 34px;
+        height: 36px;
+    }
+
+    &.icon-room-history-enabled {
+        background-image: url('@/assets/images/icons/room-history-enabled.png');
+        width: 33px;
+        height: 35px;
+    }
+
+    &.icon-room-history-disabled {
+        background-image: url('@/assets/images/icons/room-history-disabled.png');
+        width: 33px;
+        height: 35px;
+    }
+
+    &.icon-room-history-next-enabled {
+        background-image: url('@/assets/images/icons/room-history-next-enabled.png');
+        width: 34px;
+        height: 38px;
+    }
+
+    &.icon-room-history-next-disabled {
+        background-image: url('@/assets/images/icons/room-history-next-disabled.png');
+        width: 34px;
+        height: 38px;
+    }
+    &.icon-bawtool {
+        background: url('@/assets/images/icons/builderstool.png');
+        width: 20px;
+        height: 22px;
+    }
+    &.icon-chat-enablebubble {
+        background: url('@/assets/images/icons/enablebubble.png');
+        width: 17px;
+        height: 21px;
+    }
+
+    &.icon-chat-disablebubble {
+        background: url('@/assets/images/icons/disablebubble.png');
+        width: 17px;
+        height: 21px;
+    }
     &.pencil-icon {
         background-image: url('@/assets/images/infostand/pencil-icon.png');
         width: 17px;
@@ -613,6 +674,64 @@
         height: 19px;
     }
 
+    &.chatmicrophone-on-icon {
+        background-image: url('@/assets/images/chat/microphone-on.png');
+        width: 22px;
+        height: 22px;
+        cursor: pointer;
+    }
+
+    &.chatmicrophone-off-icon {
+        background-image: url('@/assets/images/chat/microphone-off.png');
+        width: 22px;
+        height: 22px;
+        cursor: pointer;
+    }
+    &.chatdeleteaudio-icon {
+        background-image: url('@/assets/images/chat/deleteaudio.png');
+        width: 22px;
+        height: 22px;
+        cursor: pointer;
+    }
+    &.chatmicrophoneConsoe-on-icon {
+        background-image: url('@/assets/images/chat/microphone-on.png');
+        width: 22px;
+        height: 22px;
+        cursor: pointer;
+    }
+
+    &.chatmicrophoneConsoe-off-icon {
+        background-image: url('@/assets/images/chat/microphone-off.png');
+        width: 22px;
+        height: 22px;
+        cursor: pointer;
+    }
+    &.chatdeleteAudioConsola-icon {
+        background-image: url('@/assets/images/chat/deleteaudio.png');
+        width: 22px;
+        height: 22px;
+        cursor: pointer;
+    }
+    &.chatmas-icon {
+        background-image: url('@/assets/images/chat/mas.png');
+        width: 22px;
+        height: 27px;
+        background-position: center;
+        float: right;
+        cursor: pointer;
+        margin-right: 39px;
+        margin-top: 1px;
+        position: absolute;
+        z-index: 999999;
+        right: -26px;
+    }
+    &.chatequis-icon {
+        background-image: url('@/assets/images/chat/equis.png');
+        width: 22px;
+        height: 22px;
+        margin-left: 3px;
+        cursor: pointer;
+    }
     &.spin {
         animation: rotating 1s linear infinite;
     }
diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss
index dc1c5da..2e0960d 100644
--- a/src/assets/styles/index.scss
+++ b/src/assets/styles/index.scss
@@ -24,3 +24,95 @@ input::-webkit-inner-spin-button {
 input[type=number] {
   -moz-appearance: textfield;
 }
+.rounded {
+  border-radius: 0.5rem;
+}
+.btn-primary{
+  color: #fff;
+  background-color: #1e7295;
+  border: 2px solid #1a617f;
+  padding: 0.25rem 0.5rem;
+  font-size: .7875rem;
+  border-radius: 0.5rem;
+  box-shadow: none!important;
+}
+.btn-primary:hover{
+  background-color: #185b77;
+  border-color: #175670;
+  box-shadow: none!important;
+}
+.btn-secondary{
+  color: #fff;
+  background-color: #1e7295;
+  border: 2px solid #1a617f;
+  padding: 0.25rem 0.5rem;
+  font-size: .7875rem;
+  border-radius: 0.5rem;
+  box-shadow: none!important;
+}
+.btn-secondary:hover{
+  background-color: #185b77;
+  border-color: #175670;
+  box-shadow: none!important;
+}
+.btn-success{
+  color: #fff;
+  background-color: #00800b;
+  border: 2px solid #006d09;
+  padding: 0.25rem 0.5rem;
+  font-size: .7875rem;
+  border-radius: 0.5rem;
+  box-shadow: none!important;
+}
+.btn-success:hover{
+  box-shadow: none!important;
+}
+.btn-danger{
+  color: #fff;
+  background-color: #a81a12;
+  border: 2px solid #b9322a;
+  padding: 0.25rem 0.5rem;
+  font-size: .7875rem;
+  border-radius: 0.5rem;
+  box-shadow: none!important;
+}
+.btn-danger:hover{
+  box-shadow: none!important;
+}
+.btn-warning{
+  color: #222;
+  background-color: #ffc107;
+  border: 2px solid #f3c12a;
+  padding: 0.25rem 0.5rem;
+  font-size: .7875rem;
+  border-radius: 0.5rem;
+  box-shadow: none!important;
+}
+.btn-warning:hover{
+  box-shadow: none!important;
+}
+.btn-dark {
+  color: #fff;
+  background-color: #212131;
+  border: 2px solid #1c1c2a;
+  box-shadow: none!important;
+  border-radius: 8px;
+  padding: 4px 11px 4px 11px;
+}
+.btn-dark:hover{
+  background-color: #212131;
+  border: 2px solid #1c1c2a;
+  box-shadow: none!important;
+  border-radius: 8px;
+  padding: 4px 11px 4px 11px;
+}
+.btn-friendsgen{
+  background-color: #424354;
+  border: 2px solid #63647a;
+  border-radius: 10px;
+}
+.btn-friendsgensuccess{
+  background-color: #b69b83;
+  border: 2px solid #e2c1a3;
+  border-radius: 10px;
+}
diff --git a/src/common/InfiniteScroll.tsx b/src/common/InfiniteScroll.tsx
index 99893f9..7a05c09 100644
--- a/src/common/InfiniteScroll.tsx
+++ b/src/common/InfiniteScroll.tsx
@@ -1,6 +1,7 @@
 import { useVirtualizer } from '@tanstack/react-virtual';
-import { FC, ReactElement, useRef, useState } from 'react';
+import { FC, Fragment, ReactElement, useEffect, useRef, useState } from 'react';
 import { Base } from './Base';
+import { UseMountEffect } from '../hooks';
 
 interface InfiniteScrollProps<T = any>
 {
@@ -13,43 +14,80 @@ interface InfiniteScrollProps<T = any>
 export const InfiniteScroll: FC<InfiniteScrollProps> = props =>
 {
     const { rows = [], overscan = 5, scrollToBottom = false, rowRender = null } = props;
-    const [ scrollIndex, setScrollIndex ] = useState<number>(rows.length - 1);
+    const scrollIndex = rows.length - 1;
     const parentRef = useRef<HTMLDivElement>(null);
 
-    const virtualizer = useVirtualizer({
+    const { getVirtualItems, getTotalSize, scrollToIndex = null, measureElement } = useVirtualizer({
         count: rows.length,
-        overscan,
         getScrollElement: () => parentRef.current,
-        estimateSize: () => 45,
+        estimateSize: () => 8,
+        overscan
     });
-    const items = virtualizer.getVirtualItems();
+
+    const virtualItems = getVirtualItems();
+    const totalSize = getTotalSize();
+
+    const paddingTop = (virtualItems.length > 0) ? (virtualItems?.[0]?.start || 0) : 0
+    const paddingBottom = (virtualItems.length > 0) ? (totalSize - (virtualItems?.[virtualItems.length - 1]?.end || 0)) : 0;
+
+    const lastElementVisible = (dataIndexValue: number) =>
+    {
+        if (!parentRef.current) return false;
+      
+        const parentElement = parentRef.current;
+        const lastElement = parentElement.querySelector(`[data-index="${ dataIndexValue - 1 }"]`);
+      
+        if (!lastElement) return false;
+      
+        const lastElementRect = lastElement.getBoundingClientRect();
+      
+        const { scrollTop, scrollHeight, clientHeight } = parentElement;
+
+        const lastElementVisible = scrollTop + clientHeight + lastElementRect.height >= scrollHeight - lastElementRect.height;
+
+        return lastElementVisible;
+    };
+
+    UseMountEffect(() =>
+    {
+        setTimeout(() => scrollToIndex(scrollIndex), 0)
+    });
+
+    useEffect(() =>
+    {
+        if (!scrollToBottom) return;
+
+        if (!lastElementVisible(scrollIndex)) return;
+        
+        scrollToIndex(scrollIndex);
+    }, [ scrollToBottom, scrollIndex, scrollToIndex ]);
 
     return (
         <Base fit innerRef={ parentRef } position="relative" overflow="auto">
-            <div
-                style={ {
-                    height: virtualizer.getTotalSize(),
-                    width: '100%',
-                    position: 'relative'
-                } }>
+            { (paddingTop > 0) &&
                 <div
-                    style={ {
-                        position: 'absolute',
-                        top: 0,
-                        left: 0,
-                        width: '100%',
-                        transform: `translateY(${ items[0]?.start ?? 0 }px)`
-                    } }>
-                    { items.map((virtualRow) => (
-                        <div
-                            key={ virtualRow.key }
-                            data-index={ virtualRow.index }
-                            ref={ virtualizer.measureElement }>
-                            { rowRender(rows[virtualRow.index]) }
-                        </div>
-                    )) }
-                </div>
-            </div>
+                    style={ { minHeight: `${ paddingTop }px` } } /> }
+            { virtualItems.map(item => 
+            {
+                const row = rows[item.index];
+
+                if (!row) return (
+                    <Fragment
+                        key={ item.key } />
+                );
+
+                return (
+                    <div
+                        key={ item.key }
+                        data-index={ item.index }
+                        ref={ measureElement }>
+                        { rowRender(row) }
+                    </div>
+                )
+            }) }
+            { (paddingBottom > 0) &&
+                <div
+                    style={ { minHeight: `${ paddingBottom }px` } } /> }
         </Base>
     );
 }
diff --git a/src/common/Slider.tsx b/src/common/Slider.tsx
new file mode 100644
index 0000000..50cba28
--- /dev/null
+++ b/src/common/Slider.tsx
@@ -0,0 +1,21 @@
+import { FC } from 'react';
+import ReactSlider, { ReactSliderProps } from 'react-slider';
+import { Button } from './Button';
+import { Flex } from './Flex';
+import { FaAngleLeft, FaAngleRight } from 'react-icons/fa';
+
+export interface SliderProps extends ReactSliderProps
+{
+    disabledButton?: boolean;
+}
+
+export const Slider: FC<SliderProps> = props =>
+{
+    const { disabledButton, max, min, value, onChange, ...rest } = props;
+
+    return <Flex fullWidth gap={ 1 }>
+        { !disabledButton && <Button disabled={ min >= value } onClick={ () => onChange(min < value ? value - 1 : min, 0) }><FaAngleLeft /></Button> }
+        <ReactSlider className={ 'nitro-slider' } max={ max } min={ min } value={ value } onChange={ onChange } { ...rest } />
+        { !disabledButton && <Button disabled={ max <= value } onClick={ () => onChange(max > value ? value + 1 : max, 0) }><FaAngleRight /></Button> }
+    </Flex>;
+}
diff --git a/src/common/card/NitroCardView.scss b/src/common/card/NitroCardView.scss
index a552182..91b3525 100644
--- a/src/common/card/NitroCardView.scss
+++ b/src/common/card/NitroCardView.scss
@@ -1,8 +1,13 @@
 $nitro-card-header-height: 33px;
-$nitro-card-tabs-height: 33px;
+$nitro-card-tabs-height: 42px;
 
 .nitro-card {
     resize: both;
+    padding: 0.5rem;
+    background: #ededed;
+    border-radius: 0.75rem!important;
+    border: 2px solid #454566!important;
+    box-shadow: 0 0 0 1pt #fff!important;
 
     @include media-breakpoint-down(lg) {
         max-width: 100vw !important;
@@ -13,9 +18,14 @@ $nitro-card-tabs-height: 33px;
         border: $border-width solid $border-color;
 
         .nitro-card-header {
-            min-height: 33px;
-            max-height: 33px;
-            background: $primary;
+            min-height: 28px;
+            max-height: 28px;
+            width: 100%;
+            padding: 1rem;
+            border-radius: 0.5rem;
+            background: #454566;
+            border: 2px solid #66669b;
+            margin-bottom: 0.25rem;
 
             .nitro-card-header-text {
                 color: $white;
@@ -71,19 +81,21 @@ $nitro-card-tabs-height: 33px;
         }
 
         .nitro-card-tabs {
-            background-color: $secondary;
+            background-color: #ededed;
 
             .nav-item {
-                padding: $nav-link-padding-y $nav-link-padding-x;
-                background-color: $muted;
-                color: $black;
+                padding: 0.2rem 0.4rem;
+                background-color: #dedede;
+                color: #000;
                 z-index: 1;
-                margin-bottom: -1px;
+                box-shadow: 0 0 0 1pt #fff !important;
+                border: 2px solid #454566!important;
+                border-radius: 0.5rem;
+                border-top-left-radius: 0.5rem !important;
+                border-top-right-radius: 0.5rem !important;
 
                 &.active {
-                    background-color: $light;
-                    border-color: $border-color $border-color $light !important;
-                    border-bottom: 1px solid black;
+                    background-color: #e1e5ff;
 
                     &:before {
                         background: $white;
@@ -107,7 +119,7 @@ $nitro-card-tabs-height: 33px;
         }
 
         .content-area {
-            background-color: $light;
+            background-color: #ededed;
         }
     }
 
@@ -118,22 +130,12 @@ $nitro-card-tabs-height: 33px;
             position: relative;
             min-height: 28px;
             max-height: 28px;
-            background: repeating-linear-gradient($tertiary, $tertiary 50%, $quaternary 50%, $quaternary 100%);
-            border-bottom: 2px solid darken($quaternary, 5);
-            box-shadow: 0 2px white;
             width: 100%;
-            margin: 0;
-            padding-top:2px;
-
-            &:before {
-                position: absolute;
-                content: ' ';
-                top: 0;
-                left: 0;
-                width: 100%;
-                height: 2px;
-                background-color: rgba($white, 0.3);
-            }
+            padding: 1rem;
+            border-radius: 0.5rem;
+            background: #454566;
+            border: 2px solid #66669b;
+            margin-bottom: 0.25rem;
 
             .nitro-card-header-text {
                 color: $white;
@@ -197,7 +199,7 @@ $nitro-card-tabs-height: 33px;
         }
 
         .content-area {
-            background-color: $light;
+            background-color: #ededed;
         }
     }
 }
@@ -230,7 +232,6 @@ $nitro-card-tabs-height: 33px;
     height: 100%;
     min-height: $nitro-card-tabs-height;
     max-height: $nitro-card-tabs-height;
-    border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color;
 }
 
 .nitro-card-accordion-set {
diff --git a/src/common/card/NitroCardView.tsx b/src/common/card/NitroCardView.tsx
index 3caa6bf..46c4126 100644
--- a/src/common/card/NitroCardView.tsx
+++ b/src/common/card/NitroCardView.tsx
@@ -24,6 +24,36 @@ export const NitroCardView: FC<NitroCardViewProps> = props =>
         return newClassNames;
     }, [ theme, classNames ]);
 
+    /* useEffect(() =>
+    {
+        if(!uniqueKey || !elementRef || !elementRef.current) return;
+
+        const localStorage = GetLocalStorage<WindowSaveOptions>(`nitro.windows.${ uniqueKey }`);
+        const element = elementRef.current;
+
+        if(localStorage && localStorage.size)
+        {
+            //element.style.width = `${ localStorage.size.width }px`;
+            //element.style.height = `${ localStorage.size.height }px`;
+        }
+
+        const observer = new ResizeObserver(event =>
+        {
+            const newStorage = { ...GetLocalStorage<Partial<WindowSaveOptions>>(`nitro.windows.${ uniqueKey }`) } as WindowSaveOptions;
+
+            newStorage.size = { width: element.offsetWidth, height: element.offsetHeight };
+
+            SetLocalStorage<WindowSaveOptions>(`nitro.windows.${ uniqueKey }`, newStorage);
+        });
+
+        observer.observe(element);
+
+        return () =>
+        {
+            observer.disconnect();
+        }
+    }, [ uniqueKey ]); */
+
     return (
         <NitroCardContextProvider value={ { theme } }>
             <DraggableWindow uniqueKey={ uniqueKey } handleSelector={ handleSelector } windowPosition={ windowPosition } disableDrag={ disableDrag }>
diff --git a/src/common/card/tabs/NitroCardTabsView.tsx b/src/common/card/tabs/NitroCardTabsView.tsx
index 1a64a12..a365872 100644
--- a/src/common/card/tabs/NitroCardTabsView.tsx
+++ b/src/common/card/tabs/NitroCardTabsView.tsx
@@ -7,7 +7,7 @@ export const NitroCardTabsView: FC<FlexProps> = props =>
 
     const getClassNames = useMemo(() =>
     {
-        const newClassNames: string[] = [ 'container-fluid', 'nitro-card-tabs', 'pt-1' ];
+        const newClassNames: string[] = [ 'container-fluid', 'nitro-card-tabs', 'pt-1', 'position-relative' ];
 
         if(classNames.length) newClassNames.push(...classNames);
 
@@ -19,4 +19,4 @@ export const NitroCardTabsView: FC<FlexProps> = props =>
             { children }
         </Flex>
     );
-}
+}
\ No newline at end of file
diff --git a/src/common/index.scss b/src/common/index.scss
index 8539aa5..705b9ca 100644
--- a/src/common/index.scss
+++ b/src/common/index.scss
@@ -280,8 +280,7 @@
     }
 }
 
-.furni-image,
-.room-object-image {
+.furni-image {
     position: relative;
     width: 100%;
     height: 100%;
@@ -531,12 +530,12 @@
 }
 
 .nitro-progress-bar {
-    border: 1px solid $white;
+    border: 1px solid #fff;
     padding: 2px;
-    height: 20px;
-    border-radius: $border-radius;
+    height: 25px;
+    border-radius: 1em;
     overflow: hidden;
-    background: $primary;
+    background: #212529;
 
     &.large {
         height: 30px;
@@ -546,11 +545,8 @@
         height: 100%;
         z-index: 1;
         transition: all 1s;
-        border-radius: calc(#{$border-radius} / 2);
-        background: repeating-linear-gradient($tertiary,
-                $tertiary 50%,
-                $quaternary 50%,
-                $quaternary 100%);
+        border-radius: 1em;
+        background: repeating-linear-gradient(#d6baa1,#d6baa1 50%,#b69b83 0,#b69b83);
     }
 
     .nitro-progress-bar-text {
diff --git a/src/common/layout/LayoutCurrencyIcon.tsx b/src/common/layout/LayoutCurrencyIcon.tsx
index c261545..05d016f 100644
--- a/src/common/layout/LayoutCurrencyIcon.tsx
+++ b/src/common/layout/LayoutCurrencyIcon.tsx
@@ -13,7 +13,7 @@ export const LayoutCurrencyIcon: FC<CurrencyIconProps> = props =>
 
     const getClassNames = useMemo(() =>
     {
-        const newClassNames: string[] = [ 'nitro-currency-icon' ];
+        const newClassNames: string[] = [ 'nitro-currency-icon topcurrencygen' ];
 
         if(classNames.length) newClassNames.push(...classNames);
 
diff --git a/src/common/layout/LayoutFurniIconImageView.tsx b/src/common/layout/LayoutFurniIconImageView.tsx
index 4ee166d..b1191db 100644
--- a/src/common/layout/LayoutFurniIconImageView.tsx
+++ b/src/common/layout/LayoutFurniIconImageView.tsx
@@ -1,6 +1,6 @@
 import { FC } from 'react';
+import { LayoutImage, LayoutImageProps } from '.';
 import { GetImageIconUrlForProduct } from '../../api';
-import { LayoutImage, LayoutImageProps } from './LayoutImage';
 
 interface LayoutFurniIconImageViewProps extends LayoutImageProps
 {
diff --git a/src/common/layout/LayoutFurniImageView.tsx b/src/common/layout/LayoutFurniImageView.tsx
index 8b17723..3c6b984 100644
--- a/src/common/layout/LayoutFurniImageView.tsx
+++ b/src/common/layout/LayoutFurniImageView.tsx
@@ -45,7 +45,15 @@ export const LayoutFurniImageView: FC<LayoutFurniImageViewProps> = props =>
         let imageResult: ImageResult = null;
 
         const listener: IGetImageListener = {
-            imageReady: async (id, texture, image) => setImageElement(await TextureUtils.generateImage(texture)),
+            imageReady: (id, texture, image) =>
+            {
+                if(!image && texture)
+                {
+                    image = TextureUtils.generateImage(texture);
+                }
+
+                image.onload = () => setImageElement(image);
+            },
             imageFailed: null
         };
 
@@ -59,9 +67,12 @@ export const LayoutFurniImageView: FC<LayoutFurniImageViewProps> = props =>
                 break;
         }
 
-        if(!imageResult) return;
+        if(imageResult)
+        {
+            const image = imageResult.getImage();
 
-        (async () => setImageElement(await TextureUtils.generateImage(imageResult.data)))();
+            image.onload = () => setImageElement(image);
+        }
     }, [ productType, productClassId, direction, extraData ]);
 
     if(!imageElement) return null;
diff --git a/src/common/layout/LayoutGiftTagView.tsx b/src/common/layout/LayoutGiftTagView.tsx
index e8f2d78..8fcc405 100644
--- a/src/common/layout/LayoutGiftTagView.tsx
+++ b/src/common/layout/LayoutGiftTagView.tsx
@@ -1,8 +1,6 @@
 import { FC } from 'react';
+import { Column, Flex, Text } from '..';
 import { LocalizeText } from '../../api';
-import { Column } from '../Column';
-import { Flex } from '../Flex';
-import { Text } from '../Text';
 import { LayoutAvatarImageView } from './LayoutAvatarImageView';
 
 interface LayoutGiftTagViewProps
diff --git a/src/common/layout/LayoutGridColorPickerItem.tsx b/src/common/layout/LayoutGridColorPickerItem.tsx
new file mode 100644
index 0000000..cfd7f68
--- /dev/null
+++ b/src/common/layout/LayoutGridColorPickerItem.tsx
@@ -0,0 +1,75 @@
+import { FC, useMemo } from 'react';
+import { Base } from '../Base';
+import { Column, ColumnProps } from '../Column';
+import { LayoutItemCountView } from './LayoutItemCountView';
+import { LayoutLimitedEditionStyledNumberView } from './limited-edition';
+
+export interface LayoutGridColorPickerItemProps extends ColumnProps
+{
+    itemImage?: string;
+    itemColor?: string;
+    itemActive?: boolean;
+    itemCount?: number;
+    itemCountMinimum?: number;
+    itemUniqueSoldout?: boolean;
+    itemUniqueNumber?: number;
+    itemUnseen?: boolean;
+    itemHighlight?: boolean;
+    disabled?: boolean;
+}
+
+export const LayoutGridColorPickerItem: FC<LayoutGridColorPickerItemProps> = props =>
+{
+    const { itemImage = undefined, itemColor = undefined, itemActive = false, itemCount = 1, itemCountMinimum = 1, itemUniqueSoldout = false, itemUniqueNumber = -2, itemUnseen = false, itemHighlight = false, disabled = false, center = true, column = true, style = {}, classNames = [], position = 'relative', overflow = 'hidden', children = null, ...rest } = props;
+
+    const getClassNames = useMemo(() =>
+    {
+        const newClassNames: string[] = [ 'layout-grid-item', 'color-picker-frame' ];
+
+        if(itemActive) newClassNames.push('active');
+
+        if(itemUniqueSoldout || (itemUniqueNumber > 0)) newClassNames.push('unique-item');
+
+        if(itemUniqueSoldout) newClassNames.push('sold-out');
+
+        if(itemUnseen) newClassNames.push('unseen');
+
+        if(itemHighlight) newClassNames.push('has-highlight');
+
+        if(disabled) newClassNames.push('disabled')
+
+        if(itemImage === null) newClassNames.push('icon', 'loading-icon');
+
+        if(classNames.length) newClassNames.push(...classNames);
+
+        return newClassNames;
+    }, [ itemActive, itemUniqueSoldout, itemUniqueNumber, itemUnseen, itemHighlight, disabled, itemImage, classNames ]);
+
+    const getStyle = useMemo(() =>
+    {
+        let newStyle = { ...style };
+
+        if(itemImage) newStyle.backgroundImage = `url(${ itemImage })`;
+
+        if(itemColor) newStyle.backgroundColor = itemColor;
+
+        if(Object.keys(style).length) newStyle = { ...newStyle, ...style };
+
+        return newStyle;
+    }, [ style, itemImage, itemColor ]);
+
+    return (
+        <Column center={ center } pointer position={ position } overflow={ overflow } column={ column } classNames={ getClassNames } style={ getStyle } { ...rest }>
+            { (itemCount > itemCountMinimum) &&
+                <LayoutItemCountView count={ itemCount } /> }
+            { (itemUniqueNumber > 0) && 
+                <>
+                    <Base fit className="unique-bg-override" style={ { backgroundImage: `url(${ itemImage })` } } />
+                    <div className="position-absolute bottom-0 unique-item-counter">
+                        <LayoutLimitedEditionStyledNumberView value={ itemUniqueNumber } />
+                    </div>
+                </> }
+            { children }
+        </Column>
+    );
+}
diff --git a/src/common/layout/LayoutMiniCameraView.tsx b/src/common/layout/LayoutMiniCameraView.tsx
index 29156d8..170f9c0 100644
--- a/src/common/layout/LayoutMiniCameraView.tsx
+++ b/src/common/layout/LayoutMiniCameraView.tsx
@@ -6,7 +6,7 @@ import { DraggableWindow } from '../draggable-window';
 interface LayoutMiniCameraViewProps
 {
     roomId: number;
-    textureReceiver: (texture: NitroTexture) => Promise<void>;
+    textureReceiver: (texture: NitroTexture) => void;
     onClose: () => void;
 }
 
diff --git a/src/common/layout/LayoutPetImageView.tsx b/src/common/layout/LayoutPetImageView.tsx
index e052ddf..b6f5f65 100644
--- a/src/common/layout/LayoutPetImageView.tsx
+++ b/src/common/layout/LayoutPetImageView.tsx
@@ -67,7 +67,7 @@ export const LayoutPetImageView: FC<LayoutPetImageViewProps> = props =>
         if(petTypeId === 16) petHeadOnly = false;
 
         const imageResult = GetRoomEngine().getRoomObjectPetImage(petTypeId, petPaletteId, petColor1, new Vector3d((direction * 45)), 64, {
-            imageReady: async (id, texture, image) =>
+            imageReady: (id, texture, image) =>
             {
                 if(isDisposed.current) return;
 
@@ -80,7 +80,7 @@ export const LayoutPetImageView: FC<LayoutPetImageViewProps> = props =>
 
                 else if(texture)
                 {
-                    setPetUrl(await TextureUtils.generateImageUrl(texture));
+                    setPetUrl(TextureUtils.generateImageUrl(texture));
                     setWidth(texture.width);
                     setHeight(texture.height);
                 }
@@ -93,17 +93,14 @@ export const LayoutPetImageView: FC<LayoutPetImageViewProps> = props =>
 
         if(imageResult)
         {
-            (async () =>
-            {
-                const image = await imageResult.getImage();
+            const image = imageResult.getImage();
 
-                if(image)
-                {
-                    setPetUrl(image.src);
-                    setWidth(image.width);
-                    setHeight(image.height);
-                }
-            })();
+            if(image)
+            {
+                setPetUrl(image.src);
+                setWidth(image.width);
+                setHeight(image.height);
+            }
         }
     }, [ figure, typeId, paletteId, petColor, customParts, posture, headOnly, direction ]);
 
diff --git a/src/common/layout/LayoutRoomPreviewerView.tsx b/src/common/layout/LayoutRoomPreviewerView.tsx
index e6a005b..69fbea8 100644
--- a/src/common/layout/LayoutRoomPreviewerView.tsx
+++ b/src/common/layout/LayoutRoomPreviewerView.tsx
@@ -1,5 +1,5 @@
-import { GetRenderer, GetTicker, NitroTicker, RoomPreviewer, TextureUtils } from '@nitrots/nitro-renderer';
-import { FC, MouseEvent, ReactNode, useEffect, useRef } from 'react';
+import { ColorConverter, GetTicker, IRoomRenderingCanvas, RoomPreviewer, TextureUtils } from '@nitrots/nitro-renderer';
+import { FC, MouseEvent, ReactNode, useEffect, useRef, useState } from 'react';
 
 export interface LayoutRoomPreviewerViewProps
 {
@@ -11,6 +11,7 @@ export interface LayoutRoomPreviewerViewProps
 export const LayoutRoomPreviewerView: FC<LayoutRoomPreviewerViewProps> = props =>
 {
     const { roomPreviewer = null, height = 0, children = null } = props;
+    const [ renderingCanvas, setRenderingCanvas ] = useState<IRoomRenderingCanvas>(null);
     const elementRef = useRef<HTMLDivElement>();
 
     const onClick = (event: MouseEvent<HTMLDivElement>) =>
@@ -23,33 +24,44 @@ export const LayoutRoomPreviewerView: FC<LayoutRoomPreviewerViewProps> = props =
 
     useEffect(() =>
     {
-        if(!elementRef) return;
+        if(!roomPreviewer) return;
 
-        const width = elementRef.current.parentElement.clientWidth;
-        const texture = TextureUtils.createRenderTexture(width, height);
-
-        const update = async (ticker: NitroTicker) =>
+        const update = (time: number) =>
         {
-            if(!roomPreviewer || !elementRef.current) return;
+            if(!roomPreviewer || !renderingCanvas || !elementRef.current) return;
         
             roomPreviewer.updatePreviewRoomView();
 
-            const renderingCanvas = roomPreviewer.getRenderingCanvas();
-
             if(!renderingCanvas.canvasUpdated) return;
 
-            GetRenderer().render({
-                target: texture,
-                container: renderingCanvas.master,
-                clear: true
-            });
+            elementRef.current.style.backgroundImage = `url(${ TextureUtils.generateImageUrl(renderingCanvas.master) })`;
+        }
 
-            let canvas = GetRenderer().texture.generateCanvas(texture);
-            const base64 = canvas.toDataURL('image/png');
-    
-            canvas = null;
+        if(!renderingCanvas)
+        {
+            if(elementRef.current && roomPreviewer)
+            {
+                const computed = document.defaultView.getComputedStyle(elementRef.current, null);
 
-            elementRef.current.style.backgroundImage = `url(${ base64 })`;
+                let backgroundColor = computed.backgroundColor;
+
+                backgroundColor = ColorConverter.rgbStringToHex(backgroundColor);
+                backgroundColor = backgroundColor.replace('#', '0x');
+
+                roomPreviewer.backgroundColor = parseInt(backgroundColor, 16);
+
+                const width = elementRef.current.parentElement.clientWidth;
+                
+                roomPreviewer.getRoomCanvas(width, height);
+
+                const canvas = roomPreviewer.getRenderingCanvas();
+
+                setRenderingCanvas(canvas);
+
+                canvas.canvasUpdated = true;
+
+                update(-1);
+            }
         }
 
         GetTicker().add(update);
@@ -62,22 +74,19 @@ export const LayoutRoomPreviewerView: FC<LayoutRoomPreviewerViewProps> = props =
 
             roomPreviewer.modifyRoomCanvas(width, height);
 
-            update(GetTicker());
+            update(-1);
         });
-
-        roomPreviewer.getRoomCanvas(width, height);
         
         resizeObserver.observe(elementRef.current);
 
         return () =>
         {
-            GetTicker().remove(update);
-
             resizeObserver.disconnect();
 
-            texture.destroy(true);
+            GetTicker().remove(update);
         }
-    }, [ roomPreviewer, elementRef, height ]);
+
+    }, [ renderingCanvas, roomPreviewer, elementRef, height ]);
 
     return (
         <div className="room-preview-container">
diff --git a/src/common/layout/LayoutTrophyView.tsx b/src/common/layout/LayoutTrophyView.tsx
index a65cd95..1320625 100644
--- a/src/common/layout/LayoutTrophyView.tsx
+++ b/src/common/layout/LayoutTrophyView.tsx
@@ -1,9 +1,6 @@
 import { FC } from 'react';
+import { Base, Column, Flex, Text } from '..';
 import { LocalizeText } from '../../api';
-import { Base } from '../Base';
-import { Column } from '../Column';
-import { Flex } from '../Flex';
-import { Text } from '../Text';
 import { DraggableWindow } from '../draggable-window';
 
 interface LayoutTrophyViewProps