gd-bs 6.6.57 → 6.6.59

package/src/styles/_custom.scss

@@ -1,17 +1,26 @@
 /** Customizations */
 .bs {
+
     /* Color match links to 'SharePoint Blue' */
-    a, .link-primary {
+    a,
+    .link-primary {
         color: var(--sp-theme-primary, #0078d4);
     }
+
     /* Color match hover links */
-    a:hover, a:focus, .link-primary:hover, .link-primary:focus {
+    a:hover,
+    a:focus,
+    .link-primary:hover,
+    .link-primary:focus {
         color: var(--sp-theme-darker, #004578);
     }
+
     /* Color match active links */
-    a:active, .link-primary:active {
+    a:active,
+    .link-primary:active {
         color: var(--sp-theme-light, #c7e0f4);
     }
+
     /* Color match accordion */
     .accordion {
         --bs-accordion-btn-focus-border-color: var(--sp-theme-secondary, #2b88d8);
@@ -19,72 +28,93 @@
         --bs-accordion-active-bg: var(--sp-theme-light, #c7e0f4);
         --bs-accordion-active-color: var(--sp-theme-primary, #0078d4);
     }
+
     .accordion-button::after {
         background: transparent;
         background-color: var(--sp-neutral-dark, #201f1e);
         -webkit-mask: var(--bs-accordion-btn-icon);
         -webkit-mask-repeat: no-repeat;
     }
+
     .accordion-button:not(.collapsed)::after {
         background: transparent;
         background-color: var(--sp-theme-darker, #004578);
         -webkit-mask: var(--bs-accordion-btn-active-icon);
         -webkit-mask-repeat: no-repeat;
     }
+
     .bg-danger {
         background-color: var(--sp-error-icon, #a80000) !important;
     }
+
     .bg-dark {
         background-color: var(--sp-neutral-dark, #201f1e) !important;
     }
+
     .bg-info {
         background-color: var(--sp-accent, #8764b8) !important;
     }
+
     .bg-light {
         background-color: var(--sp-neutral-lighter, #f3f2f1) !important;
     }
+
     .bg-primary {
         background-color: var(--sp-theme-primary, #0078d4) !important;
     }
+
     .bg-secondary {
         background-color: var(--sp-info-icon, #605e5c) !important;
     }
+
     /* Create a reusable 'SharePoint' background color */
     .bg-sharepoint {
         background-color: var(--sp-theme-dark, #005a9e) !important;
     }
+
     .bg-success {
         background-color: var(--sp-success-icon, #107c10) !important;
     }
+
     .bg-warning {
         background-color: var(--sp-severe-warning-icon, #d83b01) !important;
     }
-    .bg-white, .bg-body {
+
+    .bg-white,
+    .bg-body {
         background-color: var(--sp-white, #ffffff) !important;
     }
+
     /* Fix breadcrumb alignment */
     .breadcrumb {
         margin-bottom: 0;
     }
+
     /* Color match breadcrumb links */
-    .breadcrumb-item.active, .breadcrumb-item>a {
+    .breadcrumb-item.active,
+    .breadcrumb-item>a {
         color: var(--sp-primary-button-text, #ffffff);
         text-decoration: none;
     }
+
     /* Color match breadcrumb hover links */
-    .breadcrumb-item>a:hover, .breadcrumb-item>a:focus {
+    .breadcrumb-item>a:hover,
+    .breadcrumb-item>a:focus {
         color: var(--sp-neutral-quaternary, #d2d0ce);
         text-decoration: underline;
     }
+
     /* Color match breadcrumb active links */
     .breadcrumb-item>a:active {
         color: var(--sp-primary-text, #333333);
         text-decoration: underline;
     }
+
     /* Fix breadcrumb alignment */
     .breadcrumb-item+.breadcrumb-item::before {
         padding-top: 0.15rem;
     }
+
     /* Close button adjustments */
     .btn-close {
         --bs-btn-close-color: var(--sp-black, #000000);
@@ -97,21 +127,25 @@
         -webkit-mask-position: center;
         -webkit-mask-repeat: no-repeat;
     }
+
     .btn:focus-visible {
         background-color: var(--sp-neutral-dark, #201f1e);
         border-color: var(--sp-neutral-dark, #201f1e);
         color: var(--sp-neutral-lighter, #f3f2f1);
     }
+
     /** Button Icon - Custom class */
     .btn-icon {
         font-size: 0.875rem;
         min-width: 0px;
         padding: 2px;
     }
+
     /* Align icon properly when using btn-sm */
     .btn-icon-sm {
         margin: 0 0.25rem 0.14rem -0.25rem;
     }
+
     /* Don't reorder the btn- classes. It breaks active colors. */
     .btn-outline-danger {
         --bs-btn-color: var(--sp-error-icon, #a80000);
@@ -125,6 +159,7 @@
         --bs-btn-disabled-color: var(--sp-error-icon, #a80000);
         --bs-btn-disabled-border-color: var(--sp-error-icon, #a80000);
     }
+
     .btn-outline-light {
         --bs-btn-color: var(--sp-neutral-lighter, #f3f2f1);
         --bs-btn-border-color: var(--sp-neutral-lighter, #f3f2f1);
@@ -137,6 +172,7 @@
         --bs-btn-disabled-color: var(--sp-neutral-lighter, #f3f2f1);
         --bs-btn-disabled-border-color: var(--sp-neutral-lighter, #f3f2f1);
     }
+
     .btn-outline-primary {
         --bs-btn-color: var(--sp-theme-primary, #0078d4);
         --bs-btn-border-color: var(--sp-theme-primary, #0078d4);
@@ -149,6 +185,7 @@
         --bs-btn-disabled-color: var(--sp-theme-primary, #0078d4);
         --bs-btn-disabled-border-color: var(--sp-theme-primary, #0078d4);
     }
+
     .btn-outline-secondary {
         --bs-btn-color: var(--sp-info-icon, #605e5c);
         --bs-btn-border-color: var(--sp-info-icon, #605e5c);
@@ -161,6 +198,7 @@
         --bs-btn-disabled-color: var(--sp-info-icon, #605e5c);
         --bs-btn-disabled-border-color: var(--sp-info-icon, #605e5c);
     }
+
     .btn-outline-success {
         --bs-btn-color: var(--sp-success-icon, #107c10);
         --bs-btn-border-color: var(--sp-success-icon, #107c10);
@@ -173,6 +211,7 @@
         --bs-btn-disabled-color: var(--sp-success-icon, #107c10);
         --bs-btn-disabled-border-color: var(--sp-success-icon, #107c10);
     }
+
     .btn-outline-warning {
         --bs-btn-color: var(--sp-severe-warning-icon, #d83b01);
         --bs-btn-border-color: var(--sp-severe-warning-icon, #d83b01);
@@ -185,6 +224,7 @@
         --bs-btn-disabled-color: var(--sp-severe-warning-icon, #d83b01);
         --bs-btn-disabled-border-color: var(--sp-severe-warning-icon, #d83b01);
     }
+
     .btn-primary {
         --bs-btn-color: var(--sp-white, #ffffff);
         --bs-btn-bg: var(--sp-theme-primary, #0078d4);
@@ -199,6 +239,7 @@
         --bs-btn-disabled-bg: var(--sp-theme-primary, #0078d4);
         --bs-btn-disabled-border-color: var(--sp-theme-primary, #0078d4);
     }
+
     .btn-secondary {
         --bs-btn-color: var(--sp-white, #ffffff);
         --bs-btn-bg: var(--sp-info-icon, #605e5c);
@@ -213,57 +254,81 @@
         --bs-btn-disabled-bg: var(--sp-info-icon, #605e5c);
         --bs-btn-disabled-border-color: var(--sp-info-icon, #605e5c);
     }
+
     /* Fix color for outline light focus */
     .btn-outline-light:focus {
         color: var(--sp-neutral-lighter, #f3f2f1);
     }
+
     /* Fix color for outline light active */
-    .btn-outline-light:active, .btn-outline-light:hover {
+    .btn-outline-light:active,
+    .btn-outline-light:hover {
         color: var(--sp-black, #000000);
+
         svg.brand path {
             fill: var(--sp-black, #000000);
         }
     }
+
     /* Color match primary outline button focus */
-    .btn-check:focus+.bs .btn-outline-primary, .btn-outline-primary:focus {
+    .btn-check:focus+.bs .btn-outline-primary,
+    .btn-outline-primary:focus {
         box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--sp-theme-tertiary, #71afe5), transparent 25%);
     }
+
     /* Color match the primary button focus */
-    .btn-check:focus+.btn-primary, .btn-primary:focus {
+    .btn-check:focus+.btn-primary,
+    .btn-primary:focus {
         background-color: var(--sp-theme-darker, #004578);
         border-color: var(--sp-theme-darker, #004578);
         box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--sp-theme-tertiary, #71afe5), transparent 25%);
     }
+
     /* Color match the shadow on active */
-    .btn-check:checked+.btn-primary:focus, .btn-check:active+.btn-primary:focus, .btn-primary:active:focus, .btn-primary.active:focus, .show>.btn-primary.dropdown-toggle:focus {
+    .btn-check:checked+.btn-primary:focus,
+    .btn-check:active+.btn-primary:focus,
+    .btn-primary:active:focus,
+    .btn-primary.active:focus,
+    .show>.btn-primary.dropdown-toggle:focus {
         box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--sp-theme-tertiary, #71afe5), transparent 25%);
     }
+
     .card {
         --bs-card-border-color: var(--bs-border-color);
         --bs-card-cap-bg: color-mix(in srgb, var(--sp-black, #000000), transparent 95%);
         --bs-card-cap-color: var(--bs-body-color);
         --bs-card-color: var(--bs-body-color);
     }
+
     .carousel-caption {
         color: var(--sp-neutral-dark, #201f1e) !important;
     }
-    .carousel-control-prev-icon, .carousel-control-next-icon {
+
+    .carousel-control-prev-icon,
+    .carousel-control-next-icon {
         filter: invert(1);
     }
+
     .carousel-indicators [data-bs-target] {
         background-color: var(--sp-neutral-dark, #201f1e) !important;
     }
+
     .dropdown-divider {
         border-color: var(--sp-neutral-quaternary, #d2d0ce);
     }
+
     /* Color match dropdown hover */
-    .dropdown-item:hover, .dropdown-item:focus {
+    .dropdown-item:hover,
+    .dropdown-item:focus {
         background-color: var(--sp-neutral-quaternary, #d2d0ce);
     }
+
     /* Color match dropdown active */
-    .dropdown-item.active, .dropdown-item:active {
+    .dropdown-item.active,
+    .dropdown-item:active {
         background-color: var(--sp-theme-primary, #0078d4);
     }
+
     /* Dropdown Menu - Using the popover component for the menu, so we don't need to hide it by default */
     .dropdown-menu {
         --bs-dropdown-header-color: var(--sp-info-icon, #605e5c);
@@ -271,15 +336,19 @@
         --bs-dropdown-link-active-bg: var(--sp-theme-primary, #0078d4);
         display: contents;
     }
+
     /* Show checkboxes & toggles as buttons */
-    .form-check .form-check-input, .form-select:hover {
+    .form-check .form-check-input,
+    .form-select:hover {
         cursor: pointer;
     }
+
     /* Adjust checkbox size */
     .form-check:not(.form-switch) .form-check-input[type=checkbox] {
         height: 1.25rem;
         width: 1.25rem;
     }
+
     .form-check:not(.form-switch) .form-check-input:checked[type=checkbox] {
         --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3e%3cpath d='M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z'/%3e%3cpath d='M10.97 4.97a.75.75 0 0 1 1.071 1.05l-3.992 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.235.235 0 0 1 .02-.022z'/%3e%3c/svg%3e");
         background: transparent;
@@ -287,163 +356,254 @@
         transition: background-color 0.2s;
         -webkit-mask: var(--bs-form-check-bg-image);
     }
+
     /* Fix checkbox label alignment */
     .form-check:not(.form-switch) .form-check-label {
         display: inline;
         margin-left: .5rem;
         margin-top: .25rem;
     }
+
     /** Color match the toggle background color to 'SharePoint Blue' */
     .form-check-input:checked {
         background-color: var(--sp-theme-primary, #0078d4);
         border-color: var(--sp-theme-primary, #0078d4);
     }
+
     /* Fix for readonly */
-    .form-check > .form-check-input[readonly] {
+    .form-check>.form-check-input[readonly] {
         pointer-events: none;
     }
-    .form-control:hover, .form-select:hover {
+
+    .form-control:hover,
+    .form-select:hover {
         border-color: var(--sp-theme-tertiary, #71afe5);
     }
+
     /* Color match disabled form elements */
-    .form-control:disabled, .form-control[readonly] {
+    .form-control:disabled,
+    .form-control[readonly] {
         background-color: var(--sp-neutral-quaternary, #d2d0ce);
         border-color: var(--sp-neutral-light, #edebe9);
         color: var(--sp-neutral-tertiary, #a19f9d);
     }
+
     /* Fix validation styling */
-    .form-control.is-invalid, .form-select.is-invalid {
+    .form-control.is-invalid,
+    .form-select.is-invalid {
         --bs-control-invalid-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23a80000'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23a80000' stroke='none'/%3e%3c/svg%3e");
     }
+
     .form-control.is-invalid {
         background-image: var(--bs-control-invalid-image);
         border-color: var(--sp-error-icon, #a80000) !important;
     }
-    .form-control.is-valid, .form-select.is-valid {
+
+    .form-control.is-valid,
+    .form-select.is-valid {
         --bs-control-valid-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23107c10' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
     }
+
     .form-control.is-valid {
         background-image: var(--bs-control-valid-image);
         border-color: var(--sp-success-icon, #107c10) !important;
     }
+
     .form-control::placeholder {
         color: var(--sp-info-icon, #605e5c);
     }
+
     .form-range::-webkit-slider-thumb {
         background-color: var(--sp-theme-primary, #0078d4);
     }
+
     /* Bootstrap Icon: Custom - caret-up-fill + caret-down-fill */
     .form-select {
         --bs-form-select-bg-img: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 16 25.333' fill='%23605e5c' width='1em' height='1em'><path d='M0.34 8.03C-0.44 8.92 0.2 10.32 1.38 10.32C2.71 10.32 13.3 10.32 14.62 10.32C15.38 10.32 16 9.7 16 8.94C16 8.61 15.88 8.28 15.66 8.03C15 7.28 9.7 1.23 9.04 0.47C8.54 -0.1 7.67 -0.16 7.09 0.34C7.05 0.38 7 0.43 6.96 0.47C6.96 0.47 1.01 7.28 0.34 8.03Z'/><path d='M0.34 17.3C-0.44 16.41 0.2 15.01 1.38 15.01C2.71 15.01 13.3 15.01 14.62 15.01C15.38 15.01 16 15.63 16 16.39C16 16.73 15.88 17.05 15.66 17.3C15 18.06 9.7 24.11 9.04 24.86C8.54 25.43 7.67 25.49 7.09 24.99C7.05 24.95 7 24.91 6.96 24.86C6.96 24.86 1.01 18.06 0.34 17.3Z'/></svg>");
     }
+
     /* Color match form-select active */
-    .form-select:active, .form-select:focus {
+    .form-select:active,
+    .form-select:focus {
         border-color: var(--sp-theme-secondary, #2b88d8);
         box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--sp-theme-tertiary, #71afe5), transparent 65%);
     }
-    .form-select.is-invalid:not([multiple]):not([size]), .form-select.is-invalid:not([multiple])[size="1"] {
-        --bs-select-invalid-image: var(--bs-form-select-bg-img),var(--bs-control-invalid-image);
+
+    .form-select.is-invalid:not([multiple]):not([size]),
+    .form-select.is-invalid:not([multiple])[size="1"] {
+        --bs-select-invalid-image: var(--bs-form-select-bg-img), var(--bs-control-invalid-image);
         background-image: var(--bs-select-invalid-image);
         border-color: var(--sp-error-icon, #a80000) !important;
     }
-    .form-select.is-valid:not([multiple]):not([size]), .form-select.is-valid:not([multiple])[size="1"] {
-        --bs-select-valid-image: var(--bs-form-select-bg-img),var(--bs-control-valid-image);
+
+    .form-select.is-valid:not([multiple]):not([size]),
+    .form-select.is-valid:not([multiple])[size="1"] {
+        --bs-select-valid-image: var(--bs-form-select-bg-img), var(--bs-control-valid-image);
         background-image: var(--bs-select-valid-image);
         border-color: var(--sp-success-icon, #107c10) !important;
     }
+
     /* Fix text width on dataTables_length */
     .form-select-sm {
         background-size: 8px 10px;
         padding-right: 1.65rem;
     }
+
     /* Color match the toggle */
     .form-switch {
         .form-check-input {
             height: 1.25em;
         }
+
         .form-check-input:focus:not(:checked):not(.dark) {
             --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%238a8886'/%3e%3c/svg%3e");
         }
-        .form-check-input.dark, .form-check-input.dark:focus, .form-check-input.dark:checked {
+
+        .form-check-input.dark,
+        .form-check-input.dark:focus,
+        .form-check-input.dark:checked {
             --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23faf9f8'/%3e%3c/svg%3e");
         }
     }
-    :not(.btn-group).invert, .btn-group.invert::after, img.invert {
+
+    :not(.btn-group).invert,
+    .btn-group.invert::after,
+    img.invert {
         filter: invert(1);
     }
+
+    .jumbotron-danger {
+        background-color: var(--sp-error-icon, #a80000) !important;
+        color: var(--sp-white, #ffffff);
+    }
+
+    .jumbotron-dark {
+        background-color: var(--sp-neutral-dark, #201f1e) !important;
+        color: var(--sp-black, #000000);
+    }
+
+    .jumbotron-info {
+        background-color: var(--sp-accent, #8764b8) !important;
+        color: var(--sp-white, #ffffff);
+    }
+
+    .jumbotron-light {
+        background-color: var(--sp-neutral-lighter, #f3f2f1) !important;
+        color: var(--sp-black, #000000);
+    }
+
+    .jumbotron-primary {
+        background-color: var(--sp-theme-primary, #0078d4) !important;
+        color: var(--sp-white, #ffffff);
+    }
+
+    .jumbotron-secondary {
+        background-color: var(--sp-info-icon, #605e5c) !important;
+        color: var(--sp-white, #ffffff);
+    }
+
+    .jumbotron-success {
+        background-color: var(--sp-success-icon, #107c10) !important;
+        color: var(--sp-white, #ffffff);
+    }
+
+    .jumbotron-warning {
+        background-color: var(--sp-severe-warning-icon, #d83b01) !important;
+        color: var(--sp-white, #ffffff);
+    }
+
     .line-limit-1 {
         display: -webkit-box;
         overflow: hidden;
         -webkit-box-orient: vertical;
         -webkit-line-clamp: 1;
     }
+
     /* Color match the active list group item */
     .list-group {
         --bs-list-group-active-color: var(--sp-white, #ffffff);
         --bs-list-group-active-bg: var(--sp-theme-primary, #0078d4);
         --bs-list-group-active-border-color: var(--sp-theme-primary, #0078d4);
     }
+
     .modal {
         --bs-modal-color: var(--bs-body-color);
     }
+
     /* Increase modal border size */
     .modal-footer {
         border-top: 2px solid var(--sp-neutral-quaternary, #d2d0ce);
     }
+
     /* Increase modal border size */
     .modal-header {
         border-bottom: 2px solid var(--sp-neutral-quaternary, #d2d0ce);
+
         .btn-close {
             padding: 1rem;
         }
     }
+
     /* Align modal header to the left */
     .modal-title {
         line-height: 1.2;
         margin: 0;
     }
+
     /* Define a custom margin-end value */
     .me-75 {
         margin-right: 0.75rem !important;
     }
+
     /* Define a custom margin-start value */
     .ms-75 {
         margin-left: 0.75rem !important;
     }
+
     /* Define a custom margin-x value */
     .mx-75 {
         margin-left: 0.75rem !important;
         margin-right: 0.75rem !important;
     }
+
     /* Set max-width to fit content */
     .mw-fit {
         max-width: fit-content !important;
     }
+
     /* Set color for active nav links */
-    .nav-link:active, .navbar-brand:active {
+    .nav-link:active,
+    .navbar-brand:active {
         color: var(--bs-navbar-active-color);
     }
+
     .nav-tabs {
         border-bottom: 0;
     }
+
     /* Set background color and border for nav-tabs */
     .nav-tabs .nav-link {
         background-color: color-mix(in srgb, var(--sp-black, #000000), transparent 95%);
         border-radius: 0.25rem 0.25rem 0 0;
         border: 2px solid var(--sp-neutral-quaternary, #d2d0ce);
     }
+
     /* Color match nav-tabs hover to secondary color */
     .nav-tabs .nav-link:hover {
         background-color: var(--sp-info-icon, #605e5c);
         border-color: var(--sp-info-icon, #605e5c);
         color: var(--sp-primary-button-text, #ffffff);
     }
+
     /* Color match nav-tabs active to SharePoint */
-    .nav-tabs .nav-link.active, .nav-tabs .show>.nav-link, .nav-tabs .nav-link:focus {
+    .nav-tabs .nav-link.active,
+    .nav-tabs .show>.nav-link,
+    .nav-tabs .nav-link:focus {
         background-color: var(--sp-theme-primary, #0078d4);
         border-color: var(--sp-theme-primary, #0078d4);
         color: var(--sp-primary-button-text, #ffffff);
     }
+
     .navbar {
         --bs-navbar-color: var(--sp-primary-button-text, #ffffff);
         --bs-navbar-hover-color: var(--sp-theme-darker, #004578);
@@ -452,59 +612,146 @@
         --bs-navbar-brand-color: var(--sp-primary-button-text, #ffffff);
         --bs-navbar-brand-hover-color: var(--sp-theme-darker, #004578);
     }
-    span.navbar-brand:hover, span.navbar-brand:focus {
+
+    span.navbar-brand:hover,
+    span.navbar-brand:focus {
         color: var(--bs-navbar-brand-color);
     }
+
     /* Properly align the navbar brand text */
     .navbar-brand {
         align-items: baseline;
     }
+
     /* Match off-canvas border color to modal */
     .offcanvas-header {
         border-bottom: 2px solid var(--sp-neutral-quaternary, #d2d0ce);
         padding: 0.5rem 0.5rem 0.5rem 1rem;
     }
+
     /* Off-canvas close button alignment */
     .offcanvas-header .btn-close {
         margin: 0rem 0rem 0rem auto;
         padding: 1rem;
     }
+
     /* Off-canvas sizes (Small 1) */
-    .offcanvas-start.offcanvas-size-sm1, .offcanvas-end.offcanvas-size-sm1 { width: 20vw; }
-    .offcanvas-top.offcanvas-size-sm1, .offcanvas-bottom.offcanvas-size-sm1 { height: 20vh; }
+    .offcanvas-start.offcanvas-size-sm1,
+    .offcanvas-end.offcanvas-size-sm1 {
+        width: 20vw;
+    }
+
+    .offcanvas-top.offcanvas-size-sm1,
+    .offcanvas-bottom.offcanvas-size-sm1 {
+        height: 20vh;
+    }
+
     /* Off-canvas sizes (Small 2) */
-    .offcanvas-start.offcanvas-size-sm2, .offcanvas-end.offcanvas-size-sm2 { width: 25vw; }
-    .offcanvas-top.offcanvas-size-sm2, .offcanvas-bottom.offcanvas-size-sm2 { height: 25vh; }
+    .offcanvas-start.offcanvas-size-sm2,
+    .offcanvas-end.offcanvas-size-sm2 {
+        width: 25vw;
+    }
+
+    .offcanvas-top.offcanvas-size-sm2,
+    .offcanvas-bottom.offcanvas-size-sm2 {
+        height: 25vh;
+    }
+
     /* Off-canvas sizes (Small 3) */
-    .offcanvas-start.offcanvas-size-sm3, .offcanvas-end.offcanvas-size-sm3 { width: 30vw; }
-    .offcanvas-top.offcanvas-size-sm3, .offcanvas-bottom.offcanvas-size-sm3 { height: 30vh; }
+    .offcanvas-start.offcanvas-size-sm3,
+    .offcanvas-end.offcanvas-size-sm3 {
+        width: 30vw;
+    }
+
+    .offcanvas-top.offcanvas-size-sm3,
+    .offcanvas-bottom.offcanvas-size-sm3 {
+        height: 30vh;
+    }
+
     /* Off-canvas sizes (Medium 1) */
-    .offcanvas-start.offcanvas-size-md1, .offcanvas-end.offcanvas-size-md1 { width: 40vw; }
-    .offcanvas-top.offcanvas-size-md1, .offcanvas-bottom.offcanvas-size-md1 { height: 40vh; }
+    .offcanvas-start.offcanvas-size-md1,
+    .offcanvas-end.offcanvas-size-md1 {
+        width: 40vw;
+    }
+
+    .offcanvas-top.offcanvas-size-md1,
+    .offcanvas-bottom.offcanvas-size-md1 {
+        height: 40vh;
+    }
+
     /* Off-canvas sizes (Medium 2) */
-    .offcanvas-start.offcanvas-size-md2, .offcanvas-end.offcanvas-size-md2 { width: 50vw; }
-    .offcanvas-top.offcanvas-size-md2, .offcanvas-bottom.offcanvas-size-md2 { height: 50vh; }
+    .offcanvas-start.offcanvas-size-md2,
+    .offcanvas-end.offcanvas-size-md2 {
+        width: 50vw;
+    }
+
+    .offcanvas-top.offcanvas-size-md2,
+    .offcanvas-bottom.offcanvas-size-md2 {
+        height: 50vh;
+    }
+
     /* Off-canvas sizes (Medium 3) */
-    .offcanvas-start.offcanvas-size-md3, .offcanvas-end.offcanvas-size-md3 { width: 60vw; }
-    .offcanvas-top.offcanvas-size-md3, .offcanvas-bottom.offcanvas-size-md3 { height: 60vh; }
+    .offcanvas-start.offcanvas-size-md3,
+    .offcanvas-end.offcanvas-size-md3 {
+        width: 60vw;
+    }
+
+    .offcanvas-top.offcanvas-size-md3,
+    .offcanvas-bottom.offcanvas-size-md3 {
+        height: 60vh;
+    }
+
     /* Off-canvas sizes (Large 1) */
-    .offcanvas-start.offcanvas-size-lg1, .offcanvas-end.offcanvas-size-lg1 { width: 75vw; }
-    .offcanvas-top.offcanvas-size-lg1, .offcanvas-bottom.offcanvas-size-lg1 { height: 75vh; }
+    .offcanvas-start.offcanvas-size-lg1,
+    .offcanvas-end.offcanvas-size-lg1 {
+        width: 75vw;
+    }
+
+    .offcanvas-top.offcanvas-size-lg1,
+    .offcanvas-bottom.offcanvas-size-lg1 {
+        height: 75vh;
+    }
+
     /* Off-canvas sizes (Large 2) */
-    .offcanvas-start.offcanvas-size-lg2, .offcanvas-end.offcanvas-size-lg2 { width: 80vw; }
-    .offcanvas-top.offcanvas-size-lg2, .offcanvas-bottom.offcanvas-size-lg2 { height: 80vh; }
+    .offcanvas-start.offcanvas-size-lg2,
+    .offcanvas-end.offcanvas-size-lg2 {
+        width: 80vw;
+    }
+
+    .offcanvas-top.offcanvas-size-lg2,
+    .offcanvas-bottom.offcanvas-size-lg2 {
+        height: 80vh;
+    }
+
     /* Off-canvas sizes (Large 3) */
-    .offcanvas-start.offcanvas-size-lg3, .offcanvas-end.offcanvas-size-lg3 { width: 90vw; }
-    .offcanvas-top.offcanvas-size-lg3, .offcanvas-bottom.offcanvas-size-lg3 { height: 90vh; }
+    .offcanvas-start.offcanvas-size-lg3,
+    .offcanvas-end.offcanvas-size-lg3 {
+        width: 90vw;
+    }
+
+    .offcanvas-top.offcanvas-size-lg3,
+    .offcanvas-bottom.offcanvas-size-lg3 {
+        height: 90vh;
+    }
+
     /* Off-canvas sizes (Full) */
-    .offcanvas-start.offcanvas-size-full, .offcanvas-end.offcanvas-size-full { width: 100vw; }
-    .offcanvas-top.offcanvas-size-full, .offcanvas-bottom.offcanvas-size-full { height: 100vh; }
+    .offcanvas-start.offcanvas-size-full,
+    .offcanvas-end.offcanvas-size-full {
+        width: 100vw;
+    }
+
+    .offcanvas-top.offcanvas-size-full,
+    .offcanvas-bottom.offcanvas-size-full {
+        height: 100vh;
+    }
+
     /* Color match the pagination link color to 'SharePoint Blue' */
     .page-link {
         border-color: var(--sp-info-icon, #605e5c);
         color: var(--sp-theme-primary, #0078d4);
         font-size: 13px;
     }
+
     /* Color match the pagination disabled border colors */
     .page-item.disabled .page-link {
         background-color: var(--sp-white, #ffffff);
@@ -512,6 +759,7 @@
         color: var(--sp-info-icon, #605e5c);
         pointer-events: none;
     }
+
     /* Color match the pagination active link colors */
     .page-item.active .page-link {
         background-color: var(--sp-info-icon, #605e5c);
@@ -519,112 +767,143 @@
         color: var(--sp-primary-button-text, #ffffff);
         z-index: inherit;
     }
+
     /* Color match for SharePoint */
     .page-link:focus {
         background-color: var(--sp-neutral-quaternary, #d2d0ce);
     }
+
     /* Color match for SharePoint */
     .page-link:hover {
         color: var(--sp-primary-text, #333333);
         background-color: var(--sp-neutral-quaternary, #d2d0ce);
         border-color: var(--sp-info-icon, #605e5c);
     }
+
     /* Color match for SharePoint */
-    .page-link:focus, .form-control:focus, .form-check-input:focus {
+    .page-link:focus,
+    .form-control:focus,
+    .form-check-input:focus {
         border-color: var(--sp-theme-secondary, #2b88d8);
         box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--sp-theme-tertiary, #71afe5), transparent 65%);
         color: var(--sp-primary-text, #333333);
     }
+
     /* Define a custom padding-end value */
     .pe-06 {
         padding-right: 0.6rem !important;
     }
+
     /* Define a custom padding-end value */
     .pe-75 {
         padding-right: 0.75rem !important;
     }
+
     /* Define a custom padding-start value */
     .ps-75 {
         padding-left: 0.75rem !important;
     }
+
     /* Define a custom padding-top value */
     .pt-03 {
         padding-top: 0.3rem !important;
     }
+
     /* Define a custom padding-x value */
     .px-75 {
         padding-left: 0.75rem !important;
         padding-right: 0.75rem !important;
     }
+
     /* Fix for TippyJS Placement */
     .popover-body>* {
         position: relative !important;
     }
+
     /* Fix Rich Textbox rounded corners */
     .rich-textbox {
         .editor-container {
             border-radius: 0 0 var(--bs-border-radius, 0.375rem) var(--bs-border-radius, 0.375rem) !important;
         }
+
         .toolbar-container {
             border-radius: var(--bs-border-radius, 0.375rem) var(--bs-border-radius, 0.375rem) 0 0 !important;
         }
     }
+
     svg.brand path {
         fill: var(--sp-white, #ffffff);
     }
+
     svg.icon-svg path {
         fill: currentColor;
     }
+
     .table {
         --bs-table-striped-bg: color-mix(in srgb, var(--sp-black, #000000), transparent 95%);
         --bs-table-active-bg: color-mix(in srgb, var(--sp-black, #000000), transparent 90%);
         --bs-table-hover-bg: color-mix(in srgb, var(--sp-black, #000000), transparent 92%);
     }
+
     /* Add the default text color */
     .text-body {
         color: var(--sp-primary-text, #333333) !important;
     }
+
     .text-danger {
         color: var(--sp-error-icon, #a80000) !important;
     }
+
     .text-dark {
         color: var(--sp-neutral-dark, #201f1e) !important;
     }
+
     .text-default {
         color: var(--sp-primary-text, #333333) !important;
     }
+
     .text-info {
         color: var(--sp-accent, #8764b8) !important;
     }
+
     .text-light {
         color: var(--sp-neutral-lighter, #f3f2f1) !important;
     }
+
     .text-muted {
         color: var(--sp-neutral-secondary-alt, #8a8886) !important;
     }
+
     .text-primary {
         color: var(--sp-theme-primary, #0078d4) !important;
     }
+
     .text-secondary {
         color: var(--sp-info-icon, #605e5c) !important;
     }
+
     .text-success {
         color: var(--sp-success-icon, #107c10) !important;
     }
+
     .text-warning {
         color: var(--sp-severe-warning-icon, #d83b01) !important;
     }
+
     .text-white {
         color: var(--sp-white, #ffffff) !important;
     }
+
     /* Auto size the toast width */
     .toast {
         width: auto;
     }
+
     /* Fix for TippyJS Placement */
     .tooltip-body>* {
         position: relative !important;
     }
+
     /* Define a custom width value */
     .w-5 {
         width: 5% !important;
@@ -643,4 +922,4 @@
 /** Offcanvas background - Shouldn't be under the .bs class */
 .offcanvas-backdrop {
     @include overlay-backdrop($zindex-offcanvas-backdrop, $offcanvas-backdrop-bg, $offcanvas-backdrop-opacity);
-}
+}