@swisspost/design-system-components 1.2.0 → 1.3.0

package/dist/collection/components/post-collapsible/post-collapsible.css

@@ -41,7 +41,7 @@
   color: var(--post-contrast-color) !important;
 }
 
-.bg-yellow, .bg-light, .bg-gray, .bg-white, .bg-info, .bg-warning, .bg-olive-bright, :root {
+.bg-yellow, .bg-light, .bg-gray, .bg-white, .bg-success, .bg-info, .bg-warning, .bg-petrol-bright, .bg-coral-bright, .bg-olive-bright, :root {
   --post-contrast-color: #000;
   --post-contrast-color-inverted: #fff;
   --post-gray-10: #e6e6e6;
@@ -104,7 +104,7 @@
   --post-aubergine-bright-rgb: 117, 102, 160;
 }
 
-.bg-dark, .bg-primary, .bg-black, .bg-success, .bg-danger, .bg-nightblue, .bg-nightblue-bright, .bg-petrol, .bg-petrol-bright, .bg-coral, .bg-coral-bright, .bg-olive, .bg-purple, .bg-purple-bright, .bg-aubergine, .bg-aubergine-bright {
+.bg-dark, .bg-primary, .bg-black, .bg-danger, .bg-nightblue, .bg-nightblue-bright, .bg-petrol, .bg-coral, .bg-olive, .bg-purple, .bg-purple-bright, .bg-aubergine, .bg-aubergine-bright {
   --post-contrast-color: #fff;
   --post-contrast-color-inverted: #000;
   --post-dark: #faf9f8;
@@ -180,6 +180,20 @@
   --bs-body-line-height: 1.4;
   --bs-body-color: #000;
   --bs-body-bg: #fff;
+  --bs-border-width: 1px;
+  --bs-border-style: solid;
+  --bs-border-color: #cccccc;
+  --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
+  --bs-border-radius: 3px;
+  --bs-border-radius-sm: 3px;
+  --bs-border-radius-lg: 3px;
+  --bs-border-radius-xl: 1rem;
+  --bs-border-radius-2xl: 2rem;
+  --bs-border-radius-pill: 50rem;
+  --bs-link-color: #333333;
+  --bs-link-hover-color: #292929;
+  --bs-code-color: #d63384;
+  --bs-highlight-bg: #fcf8e3;
 }
 
 @font-face {
@@ -233,15 +247,11 @@ body {
 hr {
   margin: 1rem 0;
   color: inherit;
-  background-color: currentColor;
   border: 0;
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
   opacity: 0.25;
 }
 
-hr:not([size]) {
-  height: 1px;
-}
-
 h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
   margin-top: 0;
   margin-bottom: 0.5rem;
@@ -300,8 +310,7 @@ p {
   margin-bottom: 0.8em;
 }
 
-abbr[title],
-abbr[data-bs-original-title] {
+abbr[title] {
   text-decoration: underline dotted;
   cursor: help;
   text-decoration-skip-ink: none;
@@ -356,7 +365,7 @@ small, .small {
 
 mark, .mark {
   padding: 0.2em;
-  background-color: #fcf8e3;
+  background-color: var(--bs-highlight-bg);
 }
 
 sub,
@@ -376,11 +385,11 @@ sup {
 }
 
 a {
-  color: #333333;
+  color: var(--bs-link-color);
   text-decoration: underline;
 }
 a:hover {
-  color: #292929;
+  color: var(--bs-link-hover-color);
 }
 
 a:not([href]):not([class]), a:not([href]):not([class]):hover {
@@ -394,8 +403,6 @@ kbd,
 samp {
   font-family: var(--bs-font-monospace);
   font-size: 1em;
-  direction: ltr /* rtl:ignore */;
-  unicode-bidi: bidi-override;
 }
 
 pre {
@@ -413,7 +420,7 @@ pre code {
 
 code {
   font-size: 80%;
-  color: #d63384;
+  color: var(--bs-code-color);
   word-wrap: break-word;
 }
 a > code {
@@ -421,10 +428,10 @@ a > code {
 }
 
 kbd {
-  padding: 0.2rem 0.4rem;
+  padding: 0.1875rem 0.375rem;
   font-size: 80%;
-  color: #fff;
-  background-color: #212529;
+  color: var(--bs-body-bg);
+  background-color: var(--bs-body-color);
   border-radius: 3px;
 }
 kbd kbd {
@@ -509,8 +516,8 @@ select:disabled {
   opacity: 1;
 }
 
-[list]::-webkit-calendar-picker-indicator {
-  display: none;
+[list]:not([type=date]):not([type=datetime-local]):not([type=month]):not([type=week]):not([type=time])::-webkit-calendar-picker-indicator {
+  display: none !important;
 }
 
 button,
@@ -596,10 +603,6 @@ legend + * {
 
 ::file-selector-button {
   font: inherit;
-}
-
-::-webkit-file-upload-button {
-  font: inherit;
   -webkit-appearance: button;
 }
 
@@ -770,22 +773,6 @@ progress {
   }
 }
 
-.text-body .lead {
-  font-size: 1.0625rem;
-  line-height: 1.4;
-}
-@media (min-width: 600px) {
-  .text-body .lead {
-    font-size: 1.25rem;
-  }
-}
-@media (min-width: 1024px) {
-  .text-body .lead {
-    font-size: 1.5rem;
-    line-height: 1.1;
-  }
-}
-
 .text-body h3,
 .text-body .h3,
 .text-body h4,
@@ -863,7 +850,7 @@ progress {
 .text-body .h3,
 .text-body h4,
 .text-body .h4,
-.text-body p, .text-body .lead {
+.text-body p {
   margin-bottom: 0.8em;
 }
 
@@ -1118,6 +1105,23 @@ q:lang(en) {
 .text-body .h5 {
   font-weight: 700;
 }
+.text-body .lead {
+  font-size: 1.0625rem;
+  line-height: 1.4;
+  margin-bottom: 0.8em;
+}
+@media (min-width: 600px) {
+  .text-body .lead {
+    font-size: 1.25rem;
+  }
+}
+@media (min-width: 1024px) {
+  .text-body .lead {
+    font-size: 1.5rem;
+    line-height: 1.1;
+  }
+}
+
 code {
   color: inherit;
   font-size: inherit;
@@ -1129,60 +1133,100 @@ code {
   content: "";
 }
 
+.text-bg-primary {
+  color: #fff !important;
+  background-color: RGBA(51, 51, 51, var(--bs-bg-opacity, 1)) !important;
+}
+
+.text-bg-secondary {
+  color: #fff !important;
+  background-color: RGBA(102, 102, 102, var(--bs-bg-opacity, 1)) !important;
+}
+
+.text-bg-light {
+  color: #000 !important;
+  background-color: RGBA(250, 249, 248, var(--bs-bg-opacity, 1)) !important;
+}
+
+.text-bg-dark {
+  color: #fff !important;
+  background-color: RGBA(51, 51, 51, var(--bs-bg-opacity, 1)) !important;
+}
+
+.text-bg-success {
+  color: #000 !important;
+  background-color: RGBA(44, 145, 28, var(--bs-bg-opacity, 1)) !important;
+}
+
+.text-bg-info {
+  color: #000 !important;
+  background-color: RGBA(255, 204, 0, var(--bs-bg-opacity, 1)) !important;
+}
+
+.text-bg-warning {
+  color: #000 !important;
+  background-color: RGBA(244, 158, 0, var(--bs-bg-opacity, 1)) !important;
+}
+
+.text-bg-danger {
+  color: #fff !important;
+  background-color: RGBA(165, 23, 40, var(--bs-bg-opacity, 1)) !important;
+}
+
 .link-primary {
-  color: #333333;
+  color: #333333 !important;
 }
 .link-primary:hover, .link-primary:focus {
-  color: #292929;
+  color: #292929 !important;
 }
 
 .link-secondary {
-  color: #666666;
+  color: #666666 !important;
 }
 .link-secondary:hover, .link-secondary:focus {
-  color: #525252;
+  color: #525252 !important;
 }
 
 .link-light {
-  color: #faf9f8;
+  color: #faf9f8 !important;
 }
 .link-light:hover, .link-light:focus {
-  color: #fbfaf9;
+  color: #fbfaf9 !important;
 }
 
 .link-dark {
-  color: #333333;
+  color: #333333 !important;
 }
 .link-dark:hover, .link-dark:focus {
-  color: #292929;
+  color: #292929 !important;
 }
 
 .link-success {
-  color: #2c911c;
+  color: #2c911c !important;
 }
 .link-success:hover, .link-success:focus {
-  color: #56a749;
+  color: #56a749 !important;
 }
 
 .link-info {
-  color: #fc0;
+  color: #fc0 !important;
 }
 .link-info:hover, .link-info:focus {
-  color: #ffd633;
+  color: #ffd633 !important;
 }
 
 .link-warning {
-  color: #f49e00;
+  color: #f49e00 !important;
 }
 .link-warning:hover, .link-warning:focus {
-  color: #f6b133;
+  color: #f6b133 !important;
 }
 
 .link-danger {
-  color: #a51728;
+  color: #a51728 !important;
 }
 .link-danger:hover, .link-danger:focus {
-  color: #841220;
+  color: #841220 !important;
 }
 
 .ratio {
@@ -1240,12 +1284,24 @@ code {
   z-index: 1020;
 }
 
+.sticky-bottom {
+  position: sticky;
+  bottom: 0;
+  z-index: 1020;
+}
+
 @media (min-width: 400px) {
   .sticky-sm-top {
     position: sticky;
     top: 0;
     z-index: 1020;
   }
+
+  .sticky-sm-bottom {
+    position: sticky;
+    bottom: 0;
+    z-index: 1020;
+  }
 }
 @media (min-width: 600px) {
   .sticky-rg-top {
@@ -1253,6 +1309,12 @@ code {
     top: 0;
     z-index: 1020;
   }
+
+  .sticky-rg-bottom {
+    position: sticky;
+    bottom: 0;
+    z-index: 1020;
+  }
 }
 @media (min-width: 780px) {
   .sticky-md-top {
@@ -1260,6 +1322,12 @@ code {
     top: 0;
     z-index: 1020;
   }
+
+  .sticky-md-bottom {
+    position: sticky;
+    bottom: 0;
+    z-index: 1020;
+  }
 }
 @media (min-width: 1024px) {
   .sticky-lg-top {
@@ -1267,6 +1335,12 @@ code {
     top: 0;
     z-index: 1020;
   }
+
+  .sticky-lg-bottom {
+    position: sticky;
+    bottom: 0;
+    z-index: 1020;
+  }
 }
 @media (min-width: 1280px) {
   .sticky-xl-top {
@@ -1274,6 +1348,12 @@ code {
     top: 0;
     z-index: 1020;
   }
+
+  .sticky-xl-bottom {
+    position: sticky;
+    bottom: 0;
+    z-index: 1020;
+  }
 }
 @media (min-width: 1441px) {
   .sticky-xxl-top {
@@ -1281,6 +1361,12 @@ code {
     top: 0;
     z-index: 1020;
   }
+
+  .sticky-xxl-bottom {
+    position: sticky;
+    bottom: 0;
+    z-index: 1020;
+  }
 }
 .hstack {
   display: flex;
@@ -1330,7 +1416,7 @@ code {
   align-self: stretch;
   width: 1px;
   min-height: 1em;
-  background-color: currentColor;
+  background-color: currentcolor;
   opacity: 0.25;
 }
 
@@ -1543,7 +1629,7 @@ code {
 }
 
 .border {
-  border: 1px solid #cccccc !important;
+  border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
 }
 
 .border-0 {
@@ -1551,7 +1637,7 @@ code {
 }
 
 .border-top {
-  border-top: 1px solid #cccccc !important;
+  border-top: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
 }
 
 .border-top-0 {
@@ -1559,7 +1645,7 @@ code {
 }
 
 .border-end {
-  border-right: 1px solid #cccccc !important;
+  border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
 }
 
 .border-end-0 {
@@ -1567,7 +1653,7 @@ code {
 }
 
 .border-bottom {
-  border-bottom: 1px solid #cccccc !important;
+  border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
 }
 
 .border-bottom-0 {
@@ -1575,7 +1661,7 @@ code {
 }
 
 .border-start {
-  border-left: 1px solid #cccccc !important;
+  border-left: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
 }
 
 .border-start-0 {
@@ -1583,59 +1669,88 @@ code {
 }
 
 .border-primary {
-  border-color: #333333 !important;
+  --bs-border-opacity: 1;
+  border-color: rgba(var(--bs-primary-rgb), var(--bs-border-opacity)) !important;
 }
 
 .border-secondary {
-  border-color: #666666 !important;
+  --bs-border-opacity: 1;
+  border-color: rgba(var(--bs-secondary-rgb), var(--bs-border-opacity)) !important;
 }
 
 .border-light {
-  border-color: #faf9f8 !important;
+  --bs-border-opacity: 1;
+  border-color: rgba(var(--bs-light-rgb), var(--bs-border-opacity)) !important;
 }
 
 .border-dark {
-  border-color: #333333 !important;
+  --bs-border-opacity: 1;
+  border-color: rgba(var(--bs-dark-rgb), var(--bs-border-opacity)) !important;
 }
 
 .border-success {
-  border-color: #2c911c !important;
+  --bs-border-opacity: 1;
+  border-color: rgba(var(--bs-success-rgb), var(--bs-border-opacity)) !important;
 }
 
 .border-info {
-  border-color: #fc0 !important;
+  --bs-border-opacity: 1;
+  border-color: rgba(var(--bs-info-rgb), var(--bs-border-opacity)) !important;
 }
 
 .border-warning {
-  border-color: #f49e00 !important;
+  --bs-border-opacity: 1;
+  border-color: rgba(var(--bs-warning-rgb), var(--bs-border-opacity)) !important;
 }
 
 .border-danger {
-  border-color: #a51728 !important;
+  --bs-border-opacity: 1;
+  border-color: rgba(var(--bs-danger-rgb), var(--bs-border-opacity)) !important;
 }
 
 .border-white {
-  border-color: #fff !important;
+  --bs-border-opacity: 1;
+  border-color: rgba(var(--bs-white-rgb), var(--bs-border-opacity)) !important;
 }
 
 .border-1 {
-  border-width: 1px !important;
+  --bs-border-width: 1px;
 }
 
 .border-2 {
-  border-width: 2px !important;
+  --bs-border-width: 2px;
 }
 
 .border-3 {
-  border-width: 3px !important;
+  --bs-border-width: 3px;
 }
 
 .border-4 {
-  border-width: 4px !important;
+  --bs-border-width: 4px;
 }
 
 .border-5 {
-  border-width: 5px !important;
+  --bs-border-width: 5px;
+}
+
+.border-opacity-10 {
+  --bs-border-opacity: 0.1;
+}
+
+.border-opacity-25 {
+  --bs-border-opacity: 0.25;
+}
+
+.border-opacity-50 {
+  --bs-border-opacity: 0.5;
+}
+
+.border-opacity-75 {
+  --bs-border-opacity: 0.75;
+}
+
+.border-opacity-100 {
+  --bs-border-opacity: 1;
 }
 
 .w-25 {
@@ -1750,30 +1865,6 @@ code {
   flex-wrap: wrap-reverse !important;
 }
 
-.gap-0 {
-  gap: 0 !important;
-}
-
-.gap-1 {
-  gap: 0.25rem !important;
-}
-
-.gap-2 {
-  gap: 0.5rem !important;
-}
-
-.gap-3 {
-  gap: 1rem !important;
-}
-
-.gap-4 {
-  gap: 1.5rem !important;
-}
-
-.gap-5 {
-  gap: 3rem !important;
-}
-
 .justify-content-start {
   justify-content: flex-start !important;
 }
@@ -2288,6 +2379,30 @@ code {
   padding-left: 3rem !important;
 }
 
+.gap-0 {
+  gap: 0 !important;
+}
+
+.gap-1 {
+  gap: 0.25rem !important;
+}
+
+.gap-2 {
+  gap: 0.5rem !important;
+}
+
+.gap-3 {
+  gap: 1rem !important;
+}
+
+.gap-4 {
+  gap: 1.5rem !important;
+}
+
+.gap-5 {
+  gap: 3rem !important;
+}
+
 .font-monospace {
   font-family: var(--bs-font-monospace) !important;
 }
@@ -2360,6 +2475,10 @@ code {
   font-weight: 700 !important;
 }
 
+.fw-semibold {
+  font-weight: 600 !important;
+}
+
 .fw-bolder {
   font-weight: bolder !important;
 }
@@ -2567,7 +2686,7 @@ code {
 }
 
 .rounded {
-  border-radius: 3px !important;
+  border-radius: var(--bs-border-radius) !important;
 }
 
 .rounded-0 {
@@ -2575,15 +2694,23 @@ code {
 }
 
 .rounded-1 {
-  border-radius: 3px !important;
+  border-radius: var(--bs-border-radius-sm) !important;
 }
 
 .rounded-2 {
-  border-radius: 3px !important;
+  border-radius: var(--bs-border-radius) !important;
 }
 
 .rounded-3 {
-  border-radius: 3px !important;
+  border-radius: var(--bs-border-radius-lg) !important;
+}
+
+.rounded-4 {
+  border-radius: var(--bs-border-radius-xl) !important;
+}
+
+.rounded-5 {
+  border-radius: var(--bs-border-radius-2xl) !important;
 }
 
 .rounded-circle {
@@ -2591,27 +2718,27 @@ code {
 }
 
 .rounded-pill {
-  border-radius: 50rem !important;
+  border-radius: var(--bs-border-radius-pill) !important;
 }
 
 .rounded-top {
-  border-top-left-radius: 3px !important;
-  border-top-right-radius: 3px !important;
+  border-top-left-radius: var(--bs-border-radius) !important;
+  border-top-right-radius: var(--bs-border-radius) !important;
 }
 
 .rounded-end {
-  border-top-right-radius: 3px !important;
-  border-bottom-right-radius: 3px !important;
+  border-top-right-radius: var(--bs-border-radius) !important;
+  border-bottom-right-radius: var(--bs-border-radius) !important;
 }
 
 .rounded-bottom {
-  border-bottom-right-radius: 3px !important;
-  border-bottom-left-radius: 3px !important;
+  border-bottom-right-radius: var(--bs-border-radius) !important;
+  border-bottom-left-radius: var(--bs-border-radius) !important;
 }
 
 .rounded-start {
-  border-bottom-left-radius: 3px !important;
-  border-top-left-radius: 3px !important;
+  border-bottom-left-radius: var(--bs-border-radius) !important;
+  border-top-left-radius: var(--bs-border-radius) !important;
 }
 
 .visible {
@@ -2723,30 +2850,6 @@ code {
     flex-wrap: wrap-reverse !important;
   }
 
-  .gap-sm-0 {
-    gap: 0 !important;
-  }
-
-  .gap-sm-1 {
-    gap: 0.25rem !important;
-  }
-
-  .gap-sm-2 {
-    gap: 0.5rem !important;
-  }
-
-  .gap-sm-3 {
-    gap: 1rem !important;
-  }
-
-  .gap-sm-4 {
-    gap: 1.5rem !important;
-  }
-
-  .gap-sm-5 {
-    gap: 3rem !important;
-  }
-
   .justify-content-sm-start {
     justify-content: flex-start !important;
   }
@@ -3261,6 +3364,30 @@ code {
     padding-left: 3rem !important;
   }
 
+  .gap-sm-0 {
+    gap: 0 !important;
+  }
+
+  .gap-sm-1 {
+    gap: 0.25rem !important;
+  }
+
+  .gap-sm-2 {
+    gap: 0.5rem !important;
+  }
+
+  .gap-sm-3 {
+    gap: 1rem !important;
+  }
+
+  .gap-sm-4 {
+    gap: 1.5rem !important;
+  }
+
+  .gap-sm-5 {
+    gap: 3rem !important;
+  }
+
   .text-sm-start {
     text-align: left !important;
   }
@@ -3374,30 +3501,6 @@ code {
     flex-wrap: wrap-reverse !important;
   }
 
-  .gap-rg-0 {
-    gap: 0 !important;
-  }
-
-  .gap-rg-1 {
-    gap: 0.25rem !important;
-  }
-
-  .gap-rg-2 {
-    gap: 0.5rem !important;
-  }
-
-  .gap-rg-3 {
-    gap: 1rem !important;
-  }
-
-  .gap-rg-4 {
-    gap: 1.5rem !important;
-  }
-
-  .gap-rg-5 {
-    gap: 3rem !important;
-  }
-
   .justify-content-rg-start {
     justify-content: flex-start !important;
   }
@@ -3912,6 +4015,30 @@ code {
     padding-left: 3rem !important;
   }
 
+  .gap-rg-0 {
+    gap: 0 !important;
+  }
+
+  .gap-rg-1 {
+    gap: 0.25rem !important;
+  }
+
+  .gap-rg-2 {
+    gap: 0.5rem !important;
+  }
+
+  .gap-rg-3 {
+    gap: 1rem !important;
+  }
+
+  .gap-rg-4 {
+    gap: 1.5rem !important;
+  }
+
+  .gap-rg-5 {
+    gap: 3rem !important;
+  }
+
   .text-rg-start {
     text-align: left !important;
   }
@@ -4025,30 +4152,6 @@ code {
     flex-wrap: wrap-reverse !important;
   }
 
-  .gap-md-0 {
-    gap: 0 !important;
-  }
-
-  .gap-md-1 {
-    gap: 0.25rem !important;
-  }
-
-  .gap-md-2 {
-    gap: 0.5rem !important;
-  }
-
-  .gap-md-3 {
-    gap: 1rem !important;
-  }
-
-  .gap-md-4 {
-    gap: 1.5rem !important;
-  }
-
-  .gap-md-5 {
-    gap: 3rem !important;
-  }
-
   .justify-content-md-start {
     justify-content: flex-start !important;
   }
@@ -4563,6 +4666,30 @@ code {
     padding-left: 3rem !important;
   }
 
+  .gap-md-0 {
+    gap: 0 !important;
+  }
+
+  .gap-md-1 {
+    gap: 0.25rem !important;
+  }
+
+  .gap-md-2 {
+    gap: 0.5rem !important;
+  }
+
+  .gap-md-3 {
+    gap: 1rem !important;
+  }
+
+  .gap-md-4 {
+    gap: 1.5rem !important;
+  }
+
+  .gap-md-5 {
+    gap: 3rem !important;
+  }
+
   .text-md-start {
     text-align: left !important;
   }
@@ -4676,30 +4803,6 @@ code {
     flex-wrap: wrap-reverse !important;
   }
 
-  .gap-lg-0 {
-    gap: 0 !important;
-  }
-
-  .gap-lg-1 {
-    gap: 0.25rem !important;
-  }
-
-  .gap-lg-2 {
-    gap: 0.5rem !important;
-  }
-
-  .gap-lg-3 {
-    gap: 1rem !important;
-  }
-
-  .gap-lg-4 {
-    gap: 1.5rem !important;
-  }
-
-  .gap-lg-5 {
-    gap: 3rem !important;
-  }
-
   .justify-content-lg-start {
     justify-content: flex-start !important;
   }
@@ -5214,6 +5317,30 @@ code {
     padding-left: 3rem !important;
   }
 
+  .gap-lg-0 {
+    gap: 0 !important;
+  }
+
+  .gap-lg-1 {
+    gap: 0.25rem !important;
+  }
+
+  .gap-lg-2 {
+    gap: 0.5rem !important;
+  }
+
+  .gap-lg-3 {
+    gap: 1rem !important;
+  }
+
+  .gap-lg-4 {
+    gap: 1.5rem !important;
+  }
+
+  .gap-lg-5 {
+    gap: 3rem !important;
+  }
+
   .text-lg-start {
     text-align: left !important;
   }
@@ -5327,30 +5454,6 @@ code {
     flex-wrap: wrap-reverse !important;
   }
 
-  .gap-xl-0 {
-    gap: 0 !important;
-  }
-
-  .gap-xl-1 {
-    gap: 0.25rem !important;
-  }
-
-  .gap-xl-2 {
-    gap: 0.5rem !important;
-  }
-
-  .gap-xl-3 {
-    gap: 1rem !important;
-  }
-
-  .gap-xl-4 {
-    gap: 1.5rem !important;
-  }
-
-  .gap-xl-5 {
-    gap: 3rem !important;
-  }
-
   .justify-content-xl-start {
     justify-content: flex-start !important;
   }
@@ -5865,6 +5968,30 @@ code {
     padding-left: 3rem !important;
   }
 
+  .gap-xl-0 {
+    gap: 0 !important;
+  }
+
+  .gap-xl-1 {
+    gap: 0.25rem !important;
+  }
+
+  .gap-xl-2 {
+    gap: 0.5rem !important;
+  }
+
+  .gap-xl-3 {
+    gap: 1rem !important;
+  }
+
+  .gap-xl-4 {
+    gap: 1.5rem !important;
+  }
+
+  .gap-xl-5 {
+    gap: 3rem !important;
+  }
+
   .text-xl-start {
     text-align: left !important;
   }
@@ -5978,30 +6105,6 @@ code {
     flex-wrap: wrap-reverse !important;
   }
 
-  .gap-xxl-0 {
-    gap: 0 !important;
-  }
-
-  .gap-xxl-1 {
-    gap: 0.25rem !important;
-  }
-
-  .gap-xxl-2 {
-    gap: 0.5rem !important;
-  }
-
-  .gap-xxl-3 {
-    gap: 1rem !important;
-  }
-
-  .gap-xxl-4 {
-    gap: 1.5rem !important;
-  }
-
-  .gap-xxl-5 {
-    gap: 3rem !important;
-  }
-
   .justify-content-xxl-start {
     justify-content: flex-start !important;
   }
@@ -6516,6 +6619,30 @@ code {
     padding-left: 3rem !important;
   }
 
+  .gap-xxl-0 {
+    gap: 0 !important;
+  }
+
+  .gap-xxl-1 {
+    gap: 0.25rem !important;
+  }
+
+  .gap-xxl-2 {
+    gap: 0.5rem !important;
+  }
+
+  .gap-xxl-3 {
+    gap: 1rem !important;
+  }
+
+  .gap-xxl-4 {
+    gap: 1.5rem !important;
+  }
+
+  .gap-xxl-5 {
+    gap: 3rem !important;
+  }
+
   .text-xxl-start {
     text-align: left !important;
   }
@@ -16695,9 +16822,11 @@ a:focus, a:hover {
 .container,
 .container-fluid,
 .container-xs {
+  --bs-gutter-x: 30px;
+  --bs-gutter-y: 0;
   width: 100%;
-  padding-right: var(--bs-gutter-x, 15px);
-  padding-left: var(--bs-gutter-x, 15px);
+  padding-right: calc(var(--bs-gutter-x) * 0.5);
+  padding-left: calc(var(--bs-gutter-x) * 0.5);
   margin-right: auto;
   margin-left: auto;
 }
@@ -16897,20 +17026,45 @@ a:focus, a:hover {
   }
 }
 
+.accordion {
+  --bs-accordion-color: #000;
+  --bs-accordion-bg: #fff;
+  --bs-accordion-transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1), border-radius 0.15s ease;
+  --bs-accordion-border-color: #e6e6e6;
+  --bs-accordion-border-width: 2px;
+  --bs-accordion-border-radius: 0;
+  --bs-accordion-inner-border-radius: -2px;
+  --bs-accordion-btn-padding-x: 1rem;
+  --bs-accordion-btn-padding-y: 1rem;
+  --bs-accordion-btn-color: #000;
+  --bs-accordion-btn-bg: var(--bs-accordion-bg);
+  --bs-accordion-btn-icon: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath opacity='1' fill='%23000000' d='M23.6,13.2l-7.5,7.6l-7.6-7.6l0.9-0.9l6.6,6.6l6.6-6.6L23.6,13.2z'%3E%3C/path%3E%3C/svg%3E");
+  --bs-accordion-btn-icon-width: 1.5rem;
+  --bs-accordion-btn-icon-transform: rotate(180deg);
+  --bs-accordion-btn-icon-transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath opacity='1' fill='%23000000' d='M23.6,13.2l-7.5,7.6l-7.6-7.6l0.9-0.9l6.6,6.6l6.6-6.6L23.6,13.2z'%3E%3C/path%3E%3C/svg%3E");
+  --bs-accordion-btn-focus-border-color: #000;
+  --bs-accordion-btn-focus-box-shadow: 0 0 0 0.125rem rgba(51, 51, 51, 0.25);
+  --bs-accordion-body-padding-x: 1rem;
+  --bs-accordion-body-padding-y: 1rem;
+  --bs-accordion-active-color: #000;
+  --bs-accordion-active-bg: transparent;
+}
+
 .accordion-button {
   position: relative;
   display: flex;
   align-items: center;
   width: 100%;
-  padding: 1rem 1rem;
+  padding: var(--bs-accordion-btn-padding-y) var(--bs-accordion-btn-padding-x);
   font-size: 1rem;
-  color: #000;
+  color: var(--bs-accordion-btn-color);
   text-align: left;
-  background-color: #fff;
+  background-color: var(--bs-accordion-btn-bg);
   border: 0;
   border-radius: 0;
   overflow-anchor: none;
-  transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1), border-radius 0.15s ease;
+  transition: var(--bs-accordion-transition);
 }
 @media (prefers-reduced-motion: reduce) {
   .accordion-button {
@@ -16918,24 +17072,24 @@ a:focus, a:hover {
   }
 }
 .accordion-button:not(.collapsed) {
-  color: #000;
-  background-color: transparent;
-  box-shadow: inset 0 -2px 0 #e6e6e6;
+  color: var(--bs-accordion-active-color);
+  background-color: var(--bs-accordion-active-bg);
+  box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color);
 }
 .accordion-button:not(.collapsed)::after {
-  background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath opacity='1' fill='%23000000' d='M23.6,13.2l-7.5,7.6l-7.6-7.6l0.9-0.9l6.6,6.6l6.6-6.6L23.6,13.2z'%3E%3C/path%3E%3C/svg%3E");
-  transform: rotate(180deg);
+  background-image: var(--bs-accordion-btn-active-icon);
+  transform: var(--bs-accordion-btn-icon-transform);
 }
 .accordion-button::after {
   flex-shrink: 0;
-  width: 1.5rem;
-  height: 1.5rem;
+  width: var(--bs-accordion-btn-icon-width);
+  height: var(--bs-accordion-btn-icon-width);
   margin-left: auto;
   content: "";
-  background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath opacity='1' fill='%23000000' d='M23.6,13.2l-7.5,7.6l-7.6-7.6l0.9-0.9l6.6,6.6l6.6-6.6L23.6,13.2z'%3E%3C/path%3E%3C/svg%3E");
+  background-image: var(--bs-accordion-btn-icon);
   background-repeat: no-repeat;
-  background-size: 1.5rem;
-  transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  background-size: var(--bs-accordion-btn-icon-width);
+  transition: var(--bs-accordion-btn-icon-transition);
 }
 @media (prefers-reduced-motion: reduce) {
   .accordion-button::after {
@@ -16947,9 +17101,9 @@ a:focus, a:hover {
 }
 .accordion-button:focus {
   z-index: 3;
-  border-color: #000;
+  border-color: var(--bs-accordion-btn-focus-border-color);
   outline: 0;
-  box-shadow: 0 0 0 0.125rem rgba(51, 51, 51, 0.25);
+  box-shadow: var(--bs-accordion-btn-focus-box-shadow);
 }
 
 .accordion-header {
@@ -16957,35 +17111,36 @@ a:focus, a:hover {
 }
 
 .accordion-item {
-  background-color: #fff;
-  border: 2px solid #e6e6e6;
+  color: var(--bs-accordion-color);
+  background-color: var(--bs-accordion-bg);
+  border: var(--bs-accordion-border-width) solid var(--bs-accordion-border-color);
 }
 .accordion-item:first-of-type {
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
+  border-top-left-radius: var(--bs-accordion-border-radius);
+  border-top-right-radius: var(--bs-accordion-border-radius);
 }
 .accordion-item:first-of-type .accordion-button {
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
+  border-top-left-radius: var(--bs-accordion-inner-border-radius);
+  border-top-right-radius: var(--bs-accordion-inner-border-radius);
 }
 .accordion-item:not(:first-of-type) {
   border-top: 0;
 }
 .accordion-item:last-of-type {
-  border-bottom-right-radius: 0;
-  border-bottom-left-radius: 0;
+  border-bottom-right-radius: var(--bs-accordion-border-radius);
+  border-bottom-left-radius: var(--bs-accordion-border-radius);
 }
 .accordion-item:last-of-type .accordion-button.collapsed {
-  border-bottom-right-radius: 0;
-  border-bottom-left-radius: 0;
+  border-bottom-right-radius: var(--bs-accordion-inner-border-radius);
+  border-bottom-left-radius: var(--bs-accordion-inner-border-radius);
 }
 .accordion-item:last-of-type .accordion-collapse {
-  border-bottom-right-radius: 0;
-  border-bottom-left-radius: 0;
+  border-bottom-right-radius: var(--bs-accordion-border-radius);
+  border-bottom-left-radius: var(--bs-accordion-border-radius);
 }
 
 .accordion-body {
-  padding: 1rem 1rem;
+  padding: var(--bs-accordion-body-padding-y) var(--bs-accordion-body-padding-x);
 }
 
 .accordion-flush .accordion-collapse {
@@ -17002,7 +17157,7 @@ a:focus, a:hover {
 .accordion-flush .accordion-item:last-child {
   border-bottom: 0;
 }
-.accordion-flush .accordion-item .accordion-button {
+.accordion-flush .accordion-item .accordion-button, .accordion-flush .accordion-item .accordion-button.collapsed {
   border-radius: 0;
 }