@coreui/coreui 5.1.1 → 5.2.0

package/dist/css/coreui.css

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 /*!
- * CoreUI  v5.1.1 (https://coreui.io)
+ * CoreUI  v5.2.0 (https://coreui.io)
  * Copyright (c) 2024 creativeLabs Łukasz Holeczek
  * Licensed under MIT (https://github.com/coreui/coreui/blob/main/LICENSE)
  */
@@ -847,7 +847,7 @@ progress {
 }
 
 .col {
-  flex: 1 0 0%;
+  flex: 1 0 0;
 }
 
 .row-cols-auto > * {
@@ -1056,7 +1056,7 @@ progress {
 
 @media (min-width: 576px) {
   .col-sm {
-    flex: 1 0 0%;
+    flex: 1 0 0;
   }
   .row-cols-sm-auto > * {
     flex: 0 0 auto;
@@ -1225,7 +1225,7 @@ progress {
 }
 @media (min-width: 768px) {
   .col-md {
-    flex: 1 0 0%;
+    flex: 1 0 0;
   }
   .row-cols-md-auto > * {
     flex: 0 0 auto;
@@ -1394,7 +1394,7 @@ progress {
 }
 @media (min-width: 992px) {
   .col-lg {
-    flex: 1 0 0%;
+    flex: 1 0 0;
   }
   .row-cols-lg-auto > * {
     flex: 0 0 auto;
@@ -1563,7 +1563,7 @@ progress {
 }
 @media (min-width: 1200px) {
   .col-xl {
-    flex: 1 0 0%;
+    flex: 1 0 0;
   }
   .row-cols-xl-auto > * {
     flex: 0 0 auto;
@@ -1732,7 +1732,7 @@ progress {
 }
 @media (min-width: 1400px) {
   .col-xxl {
-    flex: 1 0 0%;
+    flex: 1 0 0;
   }
   .row-cols-xxl-auto > * {
     flex: 0 0 auto;
@@ -2681,9 +2681,11 @@ textarea.form-control-lg {
   top: 0;
   left: 0;
   z-index: 2;
+  max-width: 100%;
   height: 100%;
   padding: 1rem 0.75rem;
   overflow: hidden;
+  color: rgba(var(--cui-body-color-rgb), 0.65);
   text-align: start;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -2728,17 +2730,18 @@ textarea.form-control-lg {
   padding-bottom: 0.625rem;
 }
 .form-floating > .form-control:not(:-moz-placeholder-shown) ~ label {
-  color: rgba(var(--cui-body-color-rgb), 0.65);
   transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
 }
 .form-floating > .form-control:focus ~ label,
 .form-floating > .form-control:not(:placeholder-shown) ~ label,
 .form-floating > .form-control-plaintext ~ label,
 .form-floating > .form-select ~ label {
-  color: rgba(var(--cui-body-color-rgb), 0.65);
   transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
 }
-.form-floating > .form-control:not(:-moz-placeholder-shown) ~ label::after {
+.form-floating > .form-control:-webkit-autofill ~ label {
+  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
+}
+.form-floating > textarea:not(:-moz-placeholder-shown) ~ label::after {
   position: absolute;
   inset: 1rem 0.375rem;
   z-index: -1;
@@ -2747,10 +2750,8 @@ textarea.form-control-lg {
   background-color: var(--cui-body-bg);
   border-radius: var(--cui-border-radius);
 }
-.form-floating > .form-control:focus ~ label::after,
-.form-floating > .form-control:not(:placeholder-shown) ~ label::after,
-.form-floating > .form-control-plaintext ~ label::after,
-.form-floating > .form-select ~ label::after {
+.form-floating > textarea:focus ~ label::after,
+.form-floating > textarea:not(:placeholder-shown) ~ label::after {
   position: absolute;
   inset: 1rem 0.375rem;
   z-index: -1;
@@ -2759,9 +2760,8 @@ textarea.form-control-lg {
   background-color: var(--cui-body-bg);
   border-radius: var(--cui-border-radius);
 }
-.form-floating > .form-control:-webkit-autofill ~ label {
-  color: rgba(var(--cui-body-color-rgb), 0.65);
-  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
+.form-floating > textarea:disabled ~ label::after {
+  background-color: var(--cui-secondary-bg);
 }
 .form-floating > .form-control-plaintext ~ label {
   border-width: var(--cui-border-width) 0;
@@ -2770,10 +2770,6 @@ textarea.form-control-lg {
 .form-floating > .form-control:disabled ~ label {
   color: #6d7d9c;
 }
-.form-floating > :disabled ~ label::after,
-.form-floating > .form-control:disabled ~ label::after {
-  background-color: var(--cui-secondary-bg);
-}
 
 .input-group {
   position: relative;
@@ -2898,7 +2894,7 @@ textarea.form-control-lg {
 .was-validated .form-control:valid, .form-control.is-valid {
   border-color: var(--cui-form-valid-border-color);
   padding-right: calc(1.5em + 0.75rem);
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%231b9e3e' 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");
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%231b9e3e' 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.1'/%3e%3c/svg%3e");
   background-repeat: no-repeat;
   background-position: right calc(0.375em + 0.1875rem) center;
   background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
@@ -2917,7 +2913,7 @@ textarea.form-control-lg {
   border-color: var(--cui-form-valid-border-color);
 }
 .was-validated .form-select:valid:not([multiple]):not([size]), .was-validated .form-select:valid:not([multiple])[size="1"], .form-select.is-valid:not([multiple]):not([size]), .form-select.is-valid:not([multiple])[size="1"] {
-  --cui-form-select-bg-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%231b9e3e' 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");
+  --cui-form-select-bg-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%231b9e3e' 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.1'/%3e%3c/svg%3e");
   padding-right: 4.125rem;
   background-position: right 0.75rem center, center right 2.25rem;
   background-size: 16px 12px, calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
@@ -4220,7 +4216,8 @@ textarea.form-control-lg {
   border-bottom-right-radius: 0;
   border-bottom-left-radius: 0;
 }
-.btn-group-vertical > .btn ~ .btn,
+.btn-group-vertical > .btn:nth-child(n+3),
+.btn-group-vertical > :not(.btn-check) + .btn,
 .btn-group-vertical > .btn-group:not(:first-child) > .btn {
   border-top-left-radius: 0;
   border-top-right-radius: 0;
@@ -4373,8 +4370,8 @@ textarea.form-control-lg {
 
 .nav-justified > .nav-link,
 .nav-justified .nav-item {
-  flex-basis: 0;
   flex-grow: 1;
+  flex-basis: 0;
   text-align: center;
 }
 
@@ -4481,8 +4478,8 @@ textarea.form-control-lg {
 }
 
 .navbar-collapse {
-  flex-basis: 100%;
   flex-grow: 1;
+  flex-basis: 100%;
   align-items: center;
 }
 
@@ -4977,7 +4974,7 @@ textarea.form-control-lg {
     flex-flow: row wrap;
   }
   .card-group > .card {
-    flex: 1 0 0%;
+    flex: 1 0 0;
     margin-bottom: 0;
   }
   .card-group > .card + .card {
@@ -5022,11 +5019,11 @@ textarea.form-control-lg {
   --cui-accordion-btn-padding-y: 1rem;
   --cui-accordion-btn-color: var(--cui-body-color);
   --cui-accordion-btn-bg: var(--cui-accordion-bg);
-  --cui-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='rgba%2837, 43, 54, 0.95%29' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
+  --cui-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='rgba%2837, 43, 54, 0.95%29' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
   --cui-accordion-btn-icon-width: 1.25rem;
   --cui-accordion-btn-icon-transform: rotate(-180deg);
   --cui-accordion-btn-icon-transition: transform 0.2s ease-in-out;
-  --cui-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%233634a3' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
+  --cui-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%233634a3' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
   --cui-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(88, 86, 214, 0.25);
   --cui-accordion-body-padding-x: 1.25rem;
   --cui-accordion-body-padding-y: 1rem;
@@ -5136,16 +5133,15 @@ textarea.form-control-lg {
 .accordion-flush > .accordion-item:last-child {
   border-bottom: 0;
 }
-.accordion-flush > .accordion-item > .accordion-header .accordion-button, .accordion-flush > .accordion-item > .accordion-header .accordion-button.collapsed {
-  border-radius: 0;
-}
-.accordion-flush > .accordion-item > .accordion-collapse {
+.accordion-flush > .accordion-item > .accordion-collapse,
+.accordion-flush > .accordion-item > .accordion-header .accordion-button,
+.accordion-flush > .accordion-item > .accordion-header .accordion-button.collapsed {
   border-radius: 0;
 }
 
 [data-coreui-theme=dark] .accordion-button::after {
-  --cui-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='rgba%28255, 255, 255, 0.87%29'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
-  --cui-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23403f98'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
+  --cui-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='rgba%28255, 255, 255, 0.87%29'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e");
+  --cui-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23403f98'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e");
 }
 
 .breadcrumb {
@@ -5850,7 +5846,7 @@ textarea.form-control-lg {
 
 .btn-close {
   --cui-btn-close-color: #080a0c;
-  --cui-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23080a0c'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
+  --cui-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23080a0c'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414'/%3e%3c/svg%3e");
   --cui-btn-close-opacity: 0.5;
   --cui-btn-close-hover-opacity: 0.75;
   --cui-btn-close-focus-shadow: 0 0 0 0.25rem rgba(88, 86, 214, 0.25);
@@ -6647,11 +6643,11 @@ textarea.form-control-lg {
   } ]
 } */
 .carousel-control-prev-icon {
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0'/%3e%3c/svg%3e");
 }
 
 .carousel-control-next-icon {
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e");
 }
 
 .carousel-indicators {
@@ -7753,144 +7749,114 @@ textarea.form-control-lg {
     transition: none;
   }
 }
-.sidebar.sidebar-fixed, .sidebar.sidebar-narrow, .sidebar.sidebar-narrow-unfoldable, .sidebar.sidebar-overlaid {
-  z-index: var(--cui-sidebar-zindex);
-}
 .sidebar:not(.sidebar-end) {
   margin-left: 0;
 }
-.sidebar:not(.sidebar-end) ~ * {
-  --cui-sidebar-occupy-start: 16rem;
-}
 .sidebar.sidebar-end {
   order: 99;
   margin-right: 0;
 }
-.sidebar.sidebar-end ~ * {
-  --cui-sidebar-occupy-end: 16rem;
-}
-.sidebar.sidebar-sm {
-  --cui-sidebar-width: 12rem;
-}
 @media (min-width: 992px) {
-  .sidebar.sidebar-sm:not(.sidebar-end):not(.hide) ~ * {
-    --cui-sidebar-occupy-start: 12rem;
+  .sidebar:not(.hide):not(.sidebar-narrow):not(.sidebar-narrow-unfoldable:not(:hover)):not(.sidebar-narrow-unfoldable):not(.sidebar-overlaid):not(.sidebar-end) ~ * {
+    --cui-sidebar-occupy-start: 16rem;
   }
-  .sidebar.sidebar-sm.sidebar-end:not(.hide) ~ * {
-    --cui-sidebar-occupy-end: 12rem;
+  .sidebar:not(.hide):not(.sidebar-narrow):not(.sidebar-narrow-unfoldable:not(:hover)):not(.sidebar-narrow-unfoldable):not(.sidebar-overlaid).sidebar-end ~ * {
+    --cui-sidebar-occupy-end: 16rem;
   }
-}
-.sidebar.sidebar-lg {
-  --cui-sidebar-width: 20rem;
-}
-@media (min-width: 992px) {
-  .sidebar.sidebar-lg:not(.sidebar-end):not(.hide) ~ * {
-    --cui-sidebar-occupy-start: 20rem;
-  }
-  .sidebar.sidebar-lg.sidebar-end:not(.hide) ~ * {
-    --cui-sidebar-occupy-end: 20rem;
-  }
-}
-.sidebar.sidebar-xl {
-  --cui-sidebar-width: 24rem;
-}
-@media (min-width: 992px) {
-  .sidebar.sidebar-xl:not(.sidebar-end):not(.hide) ~ * {
-    --cui-sidebar-occupy-start: 24rem;
-  }
-  .sidebar.sidebar-xl.sidebar-end:not(.hide) ~ * {
-    --cui-sidebar-occupy-end: 24rem;
-  }
-}
-@media (min-width: 992px) {
   .sidebar.hide:not(.sidebar-end) {
     margin-left: calc(-1 * var(--cui-sidebar-width));
   }
-  .sidebar.hide:not(.sidebar-end) ~ * {
-    --cui-sidebar-occupy-start: 0;
-  }
   .sidebar.hide.sidebar-end {
     margin-right: calc(-1 * var(--cui-sidebar-width));
   }
-  .sidebar.hide.sidebar-end ~ * {
-    --cui-sidebar-occupy-end: 0;
-  }
 }
-@media (min-width: 992px) {
-  .sidebar.sidebar-fixed {
+@media (max-width: 991.98px) {
+  .sidebar {
+    --cui-is-mobile: true;
     position: fixed;
     top: 0;
     bottom: 0;
+    z-index: var(--cui-sidebar-zindex);
   }
-  .sidebar.sidebar-fixed:not(.sidebar-end) {
+  .sidebar:not(.sidebar-end) {
     left: 0;
   }
-  .sidebar.sidebar-fixed.sidebar-end {
+  .sidebar:not(.sidebar-end):not(.show) {
+    margin-left: calc(-1 * var(--cui-sidebar-width));
+  }
+  .sidebar.sidebar-end {
     right: 0;
   }
-}
-@media (min-width: 992px) {
-  .sidebar.sidebar-sticky {
-    position: -webkit-sticky;
-    position: sticky;
-    top: 0;
-    height: 100vh;
+  .sidebar.sidebar-end:not(.show) {
+    margin-right: calc(-1 * var(--cui-sidebar-width));
   }
 }
-.sidebar.sidebar-overlaid {
-  --cui-sidebar-overlaid-box-shadow: var(--cui-box-shadow);
+
+.sidebar-fixed, .sidebar-narrow-unfoldable, .sidebar-overlaid {
   position: fixed;
   top: 0;
   bottom: 0;
+  z-index: var(--cui-sidebar-zindex);
 }
-.sidebar.sidebar-overlaid:not(.sidebar-end) {
+.sidebar-fixed:not(.sidebar-end), .sidebar-narrow-unfoldable:not(.sidebar-end), .sidebar-overlaid:not(.sidebar-end) {
   left: 0;
-  margin-left: calc(-1 * var(--cui-sidebar-width));
-}
-.sidebar.sidebar-overlaid:not(.sidebar-end) ~ * {
-  --cui-sidebar-occupy-start: 0 !important;
 }
-.sidebar.sidebar-overlaid.sidebar-end {
+.sidebar-fixed.sidebar-end, .sidebar-end.sidebar-narrow-unfoldable, .sidebar-end.sidebar-overlaid {
   right: 0;
-  margin-right: calc(-1 * var(--cui-sidebar-width));
 }
-.sidebar.sidebar-overlaid.sidebar-end ~ * {
-  --cui-sidebar-occupy-end: 0 !important;
+
+.sidebar-overlaid {
+  --cui-sidebar-overlaid-box-shadow: var(--cui-box-shadow);
+}
+.sidebar-overlaid:not(.sidebar-end) {
+  margin-left: calc(-1 * var(--cui-sidebar-width));
+}
+.sidebar-overlaid.sidebar-end {
+  margin-right: calc(-1 * var(--cui-sidebar-width));
 }
-.sidebar.sidebar-overlaid.show {
+.sidebar-overlaid.show {
   box-shadow: var(--cui-sidebar-overlaid-box-shadow);
 }
-.sidebar.sidebar-overlaid.show:not(.sidebar-end) {
+.sidebar-overlaid.show:not(.sidebar-end) {
   margin-left: 0;
 }
-.sidebar.sidebar-overlaid.show.sidebar-end {
+.sidebar-overlaid.show.sidebar-end {
   margin-right: 0;
 }
-@media (max-width: 991.98px) {
-  .sidebar {
-    --cui-is-mobile: true;
-    position: fixed;
-    top: 0;
-    bottom: 0;
-    z-index: var(--cui-sidebar-zindex);
-  }
-  .sidebar:not(.sidebar-end) {
-    left: 0;
+
+.sidebar-sm {
+  --cui-sidebar-width: 12rem;
+}
+@media (min-width: 992px) {
+  .sidebar-sm:not(.hide):not(.sidebar-narrow):not(.sidebar-narrow-unfoldable:not(:hover)):not(.sidebar-narrow-unfoldable):not(.sidebar-overlaid):not(.sidebar-end) ~ * {
+    --cui-sidebar-occupy-start: 12rem;
   }
-  .sidebar:not(.sidebar-end) ~ * {
-    --cui-sidebar-occupy-start: 0 !important;
+  .sidebar-sm:not(.hide):not(.sidebar-narrow):not(.sidebar-narrow-unfoldable:not(:hover)):not(.sidebar-narrow-unfoldable):not(.sidebar-overlaid).sidebar-end ~ * {
+    --cui-sidebar-occupy-end: 12rem;
   }
-  .sidebar:not(.sidebar-end):not(.show) {
-    margin-left: calc(-1 * var(--cui-sidebar-width));
+}
+
+.sidebar-lg {
+  --cui-sidebar-width: 20rem;
+}
+@media (min-width: 992px) {
+  .sidebar-lg:not(.hide):not(.sidebar-narrow):not(.sidebar-narrow-unfoldable:not(:hover)):not(.sidebar-narrow-unfoldable):not(.sidebar-overlaid):not(.sidebar-end) ~ * {
+    --cui-sidebar-occupy-start: 20rem;
   }
-  .sidebar.sidebar-end {
-    right: 0;
+  .sidebar-lg:not(.hide):not(.sidebar-narrow):not(.sidebar-narrow-unfoldable:not(:hover)):not(.sidebar-narrow-unfoldable):not(.sidebar-overlaid).sidebar-end ~ * {
+    --cui-sidebar-occupy-end: 20rem;
   }
-  .sidebar.sidebar-end ~ * {
-    --cui-sidebar-occupy-end: 0 !important;
+}
+
+.sidebar-xl {
+  --cui-sidebar-width: 24rem;
+}
+@media (min-width: 992px) {
+  .sidebar-xl:not(.hide):not(.sidebar-narrow):not(.sidebar-narrow-unfoldable:not(:hover)):not(.sidebar-narrow-unfoldable):not(.sidebar-overlaid):not(.sidebar-end) ~ * {
+    --cui-sidebar-occupy-start: 24rem;
   }
-  .sidebar.sidebar-end:not(.show) {
-    margin-right: calc(-1 * var(--cui-sidebar-width));
+  .sidebar-xl:not(.hide):not(.sidebar-narrow):not(.sidebar-narrow-unfoldable:not(:hover)):not(.sidebar-narrow-unfoldable):not(.sidebar-overlaid).sidebar-end ~ * {
+    --cui-sidebar-occupy-end: 24rem;
   }
 }
 
@@ -8022,6 +7988,7 @@ textarea.form-control-lg {
 .sidebar-nav {
   --cui-sidebar-nav-padding-x: 0.5rem;
   --cui-sidebar-nav-padding-y: 0.5rem;
+  --cui-sidebar-nav-gap: 1px;
   --cui-sidebar-nav-title-padding-x: 1rem;
   --cui-sidebar-nav-title-padding-y: 0.75rem;
   --cui-sidebar-nav-title-margin-top: 1rem;
@@ -8064,9 +8031,9 @@ textarea.form-control-lg {
   --cui-sidebar-nav-group-items-padding-y: 0;
   --cui-sidebar-nav-group-items-padding-x: 0;
   --cui-sidebar-nav-group-indicator-color: var(--cui-tertiary-color);
-  --cui-sidebar-nav-group-indicator-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
+  --cui-sidebar-nav-group-indicator-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e");
   --cui-sidebar-nav-group-indicator-hover-color: var(--cui-emphasis-color);
-  --cui-sidebar-nav-group-indicator-hover-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
+  --cui-sidebar-nav-group-indicator-hover-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e");
   --cui-sidebar-nav-group-toggle-show-color: var(--cui-body-color);
   position: relative;
   display: flex;
@@ -8081,7 +8048,7 @@ textarea.form-control-lg {
 .sidebar-nav .nav-item + .nav-item,
 .sidebar-nav .nav-item + .nav-group,
 .sidebar-nav .nav-group + .nav-item {
-  margin-top: 1px;
+  margin-top: var(--cui-sidebar-nav-gap);
 }
 .sidebar-nav .nav-title {
   padding: var(--cui-sidebar-nav-title-padding-y) var(--cui-sidebar-nav-title-padding-x);
@@ -8237,7 +8204,7 @@ textarea.form-control-lg {
   transform: rotate(180deg);
 }
 .sidebar-nav .nav-group.show + .show {
-  margin-top: 1px;
+  margin-top: var(--cui-sidebar-nav-gap);
 }
 .sidebar-nav .nav-group-toggle {
   cursor: pointer;
@@ -8273,80 +8240,66 @@ textarea.form-control-lg {
   --cui-sidebar-nav-link-padding-y: 0.5625rem;
 }
 
-.sidebar-narrow-unfoldable:not(:hover), .sidebar-narrow {
+.sidebar-narrow, .sidebar-narrow-unfoldable:not(:hover) {
   --cui-sidebar-narrow-width: 4rem;
 }
 @media (min-width: 992px) {
-  .sidebar-narrow-unfoldable:not(:hover), .sidebar-narrow {
+  .sidebar-narrow, .sidebar-narrow-unfoldable:not(:hover) {
     flex: 0 0 var(--cui-sidebar-narrow-width);
     width: var(--cui-sidebar-narrow-width);
     padding-bottom: var(--cui-sidebar-toggler-height);
     overflow: visible;
   }
-  .sidebar-fixed.sidebar-narrow-unfoldable:not(:hover), .sidebar-fixed.sidebar-narrow {
-    width: var(--cui-sidebar-narrow-width);
-  }
-  .sidebar-narrow-unfoldable:not(:hover) .sidebar-brand-full, .sidebar-narrow .sidebar-brand-full {
+  .sidebar-narrow .sidebar-brand-full, .sidebar-narrow-unfoldable:not(:hover) .sidebar-brand-full {
     display: none;
   }
-  .sidebar-narrow-unfoldable:not(:hover) .sidebar-brand-narrow, .sidebar-narrow .sidebar-brand-narrow {
+  .sidebar-narrow .sidebar-brand-narrow, .sidebar-narrow-unfoldable:not(:hover) .sidebar-brand-narrow {
     display: block;
   }
-  .sidebar-narrow-unfoldable:not(:hover) .sidebar-header, .sidebar-narrow .sidebar-header {
+  .sidebar-narrow .sidebar-header, .sidebar-narrow-unfoldable:not(:hover) .sidebar-header {
     justify-content: center;
     padding-right: 0;
     padding-left: 0;
   }
-  .sidebar-narrow-unfoldable:not(:hover) .sidebar-nav, .sidebar-narrow .sidebar-nav {
+  .sidebar-narrow .sidebar-nav, .sidebar-narrow-unfoldable:not(:hover) .sidebar-nav {
     --cui-sidebar-nav-link-padding-x: 0.5rem;
     --cui-sidebar-nav-link-padding-y: 0.75rem;
   }
-  .sidebar-narrow-unfoldable:not(:hover) .nav-icon, .sidebar-narrow .nav-icon {
+  .sidebar-narrow .nav-link, .sidebar-narrow-unfoldable:not(:hover) .nav-link {
+    overflow: hidden;
+  }
+  .sidebar-narrow .nav-icon, .sidebar-narrow-unfoldable:not(:hover) .nav-icon {
     flex: 0 0 calc(var(--cui-sidebar-narrow-width) - var(--cui-sidebar-nav-padding-x) * 2 - var(--cui-sidebar-nav-link-padding-x) * 2);
   }
-  .sidebar-narrow-unfoldable:not(:hover) .d-narrow-none, .sidebar-narrow .d-narrow-none,
-  .sidebar-narrow-unfoldable:not(:hover) .nav-label,
+  .sidebar-narrow .d-narrow-none, .sidebar-narrow-unfoldable:not(:hover) .d-narrow-none,
   .sidebar-narrow .nav-label,
-  .sidebar-narrow-unfoldable:not(:hover) .nav-title,
+  .sidebar-narrow-unfoldable:not(:hover) .nav-label,
   .sidebar-narrow .nav-title,
-  .sidebar-narrow-unfoldable:not(:hover) .nav-group-items,
+  .sidebar-narrow-unfoldable:not(:hover) .nav-title,
   .sidebar-narrow .nav-group-items,
-  .sidebar-narrow-unfoldable:not(:hover) .sidebar-form,
-  .sidebar-narrow .sidebar-form {
+  .sidebar-narrow-unfoldable:not(:hover) .nav-group-items,
+  .sidebar-narrow .nav-group.show .nav-group-items,
+  .sidebar-narrow .sidebar-form,
+  .sidebar-narrow-unfoldable:not(:hover) .sidebar-form {
     height: 0 !important;
     padding: 0 !important;
     margin: 0 !important;
     visibility: hidden;
     opacity: 0;
   }
-  .sidebar-narrow-unfoldable:not(:hover) .sidebar-toggler::before, .sidebar-narrow .sidebar-toggler::before {
+  .sidebar-narrow .sidebar-toggler::before, .sidebar-narrow-unfoldable:not(:hover) .sidebar-toggler::before {
     transform: rotate(-180deg);
   }
-  .sidebar-end.sidebar-narrow-unfoldable:not(:hover) .sidebar-toggler::before, .sidebar-end.sidebar-narrow .sidebar-toggler::before {
+  .sidebar-narrow.sidebar-end .sidebar-toggler::before, .sidebar-end.sidebar-narrow-unfoldable:not(:hover) .sidebar-toggler::before {
     transform: rotate(0deg);
   }
 }
 
-.sidebar-narrow:not(.sidebar-end) ~ * {
-  --cui-sidebar-occupy-start: 4rem !important;
-}
-.sidebar-narrow.sidebar-end ~ * {
-  --cui-sidebar-occupy-end: 4rem !important;
-}
-.sidebar-narrow .nav-link {
-  overflow: hidden;
-}
-
 .sidebar-narrow-unfoldable {
-  position: fixed;
-}
-.sidebar-narrow-unfoldable:not(.sidebar-end) ~ * {
-  --cui-sidebar-occupy-start: 4rem !important;
-}
-.sidebar-narrow-unfoldable.sidebar-end ~ * {
-  --cui-sidebar-occupy-end: 4rem !important;
+  --cui-sidebar-narrow-unfoldable-box-shadow: var(--cui-box-shadow);
 }
 .sidebar-narrow-unfoldable:hover {
+  box-shadow: var(--cui-sidebar-narrow-unfoldable-box-shadow);
   box-shadow: 0 0.5rem 1rem rgba(8, 10, 12, 0.15);
 }
 .sidebar-narrow-unfoldable:hover .sidebar-toggler::before {
@@ -8355,57 +8308,18 @@ textarea.form-control-lg {
 .sidebar-narrow-unfoldable:hover.sidebar-end .sidebar-toggler::before {
   transform: rotate(0deg);
 }
-.sidebar-narrow-unfoldable .nav-link {
-  overflow: hidden;
-}
-
-.sidebar:not(.show).sidebar-self-hiding.sidebar-narrow:not(.sidebar-end), .sidebar:not(.show).sidebar-self-hiding.sidebar-narrow-unfoldable:not(.sidebar-end) {
-  margin-left: calc(var(--cui-sidebar-narrow-width) * -1);
-}
-.sidebar:not(.show).sidebar-self-hiding.sidebar-narrow.sidebar-end, .sidebar:not(.show).sidebar-self-hiding.sidebar-narrow-unfoldable.sidebar-end {
-  margin-right: calc(var(--cui-sidebar-narrow-width) * -1);
-}
 
-@media (max-width: 575.98px) {
-  .sidebar:not(.show).sidebar-self-hiding-sm.sidebar-narrow:not(.sidebar-end), .sidebar:not(.show).sidebar-self-hiding-sm.sidebar-narrow-unfoldable:not(.sidebar-end) {
-    margin-left: calc(var(--cui-sidebar-narrow-width) * -1);
-  }
-  .sidebar:not(.show).sidebar-self-hiding-sm.sidebar-narrow.sidebar-end, .sidebar:not(.show).sidebar-self-hiding-sm.sidebar-narrow-unfoldable.sidebar-end {
-    margin-right: calc(var(--cui-sidebar-narrow-width) * -1);
-  }
-}
-@media (max-width: 767.98px) {
-  .sidebar:not(.show).sidebar-self-hiding-md.sidebar-narrow:not(.sidebar-end), .sidebar:not(.show).sidebar-self-hiding-md.sidebar-narrow-unfoldable:not(.sidebar-end) {
-    margin-left: calc(var(--cui-sidebar-narrow-width) * -1);
-  }
-  .sidebar:not(.show).sidebar-self-hiding-md.sidebar-narrow.sidebar-end, .sidebar:not(.show).sidebar-self-hiding-md.sidebar-narrow-unfoldable.sidebar-end {
-    margin-right: calc(var(--cui-sidebar-narrow-width) * -1);
-  }
-}
-@media (max-width: 991.98px) {
-  .sidebar:not(.show).sidebar-self-hiding-lg.sidebar-narrow:not(.sidebar-end), .sidebar:not(.show).sidebar-self-hiding-lg.sidebar-narrow-unfoldable:not(.sidebar-end) {
-    margin-left: calc(var(--cui-sidebar-narrow-width) * -1);
-  }
-  .sidebar:not(.show).sidebar-self-hiding-lg.sidebar-narrow.sidebar-end, .sidebar:not(.show).sidebar-self-hiding-lg.sidebar-narrow-unfoldable.sidebar-end {
-    margin-right: calc(var(--cui-sidebar-narrow-width) * -1);
-  }
-}
-@media (max-width: 1199.98px) {
-  .sidebar:not(.show).sidebar-self-hiding-xl.sidebar-narrow:not(.sidebar-end), .sidebar:not(.show).sidebar-self-hiding-xl.sidebar-narrow-unfoldable:not(.sidebar-end) {
-    margin-left: calc(var(--cui-sidebar-narrow-width) * -1);
-  }
-  .sidebar:not(.show).sidebar-self-hiding-xl.sidebar-narrow.sidebar-end, .sidebar:not(.show).sidebar-self-hiding-xl.sidebar-narrow-unfoldable.sidebar-end {
-    margin-right: calc(var(--cui-sidebar-narrow-width) * -1);
-  }
-}
-@media (max-width: 1399.98px) {
-  .sidebar:not(.show).sidebar-self-hiding-xxl.sidebar-narrow:not(.sidebar-end), .sidebar:not(.show).sidebar-self-hiding-xxl.sidebar-narrow-unfoldable:not(.sidebar-end) {
-    margin-left: calc(var(--cui-sidebar-narrow-width) * -1);
+@media (min-width: 992px) {
+  .sidebar-narrow:not(.sidebar-end):not(.hide) ~ *,
+  .sidebar-narrow-unfoldable:not(.sidebar-end):not(.hide) ~ * {
+    --cui-sidebar-occupy-start: 4rem;
   }
-  .sidebar:not(.show).sidebar-self-hiding-xxl.sidebar-narrow.sidebar-end, .sidebar:not(.show).sidebar-self-hiding-xxl.sidebar-narrow-unfoldable.sidebar-end {
-    margin-right: calc(var(--cui-sidebar-narrow-width) * -1);
+  .sidebar-narrow.sidebar-end:not(.hide) ~ *,
+  .sidebar-narrow-unfoldable.sidebar-end:not(.hide) ~ * {
+    --cui-sidebar-occupy-end: 4rem;
   }
 }
+
 .clearfix::after {
   display: block;
   clear: both;