@festo-ui/web-essentials 5.0.1 → 5.1.0-dev.164

package/dist/css/festo-web-essentials.css

@@ -1,5 +1,5 @@
 /*!
- * Festo UI - Web Essentials v5.0.1 (https://storybook.festo.design/)
+ * Festo UI - Web Essentials v5.1.0-dev.164 (https://storybook.festo.design/)
  * Copyright 2022 Festo SE & Co. KG
  * Licensed under Apache-2.0
  */
@@ -65,6 +65,27 @@
   line-height: 1;
 }
 
+.fwe-font-weight-base {
+  font-weight: var(--fwe-font-weight-normal);
+}
+
+.fwe-font-weight-normal {
+  font-weight: var(--fwe-font-weight-normal);
+}
+
+.fwe-font-weight-bold {
+  font-weight: var(--fwe-font-weight-bold);
+}
+
+.fwe-font-family-sans-serif {
+  font-family: var(--fwe-font-family-sans-serif);
+}
+
+.fwe-font-family-monospace,
+.fwe-font-family-code {
+  font-family: var(--fwe-font-family-monospace);
+}
+
 .fwe-icon, .fwe-stepper-vertical .fwe-step-container.fwe-step-done .fwe-step, .fwe-stepper-horizontal .fwe-step-container.fwe-step-done .fwe-step, .fwe-search-input .fwe-clear-icon, .fwe-search-input .fwe-search-icon, .fwe-notification-menu .fwe-notification-list .fwe-notification-item-content, .fwe-notification-menu .fwe-notification-list .fwe-notification-error, .fwe-notification-menu .fwe-notification-list .fwe-notification-warning, .fwe-notification-menu .fwe-notification-list .fwe-notification-info, .fwe-pagination .fwe-navigate-btn, .fwe-pagination .fwe-navigate-btn-down, .fwe-pagination .fwe-navigate-btn-up, .fwe-select-wrapper, label.fwe-checkbox .fwe-checkbox-checkmark, .fwe-mobile-flyout-page .fwe-page-back i, .fwe-mobile-flyout .fwe-mobile-flyout-button, .fwe-mobile-flyout .fwe-close-button, .fwe-mobile-flyout .fwe-burger-button, .fwe-navbar .fwe-navbar-burger-menu, table.fwe-table tr th.fwe-table-order {
   font-family: var(--fwe-font-family-icons-16);
   font-size: var(--fwe-font-size-base);
@@ -2502,7 +2523,6 @@ h6,
   --fwe-control-border-darker: #9ca2a9;
   --fwe-control-scrollbar: #d2d5d9;
   --fwe-background: #f2f3f5;
-  --fwe-background-image-gallery: #707070;
   --fwe-border: #d8dce1;
   --fwe-border-disabled: #e6e9ec;
   --fwe-snackbar-info-bg: #c8e6fa;
@@ -2881,6 +2901,58 @@ template {
   display: none;
 }
 
+.fwe-object-fit-contain {
+  -o-object-fit: contain !important;
+  object-fit: contain !important;
+}
+
+.fwe-object-fit-cover {
+  -o-object-fit: cover !important;
+  object-fit: cover !important;
+}
+
+.fwe-object-fit-fill {
+  -o-object-fit: fill !important;
+  object-fit: fill !important;
+}
+
+.fwe-object-fit-scale-down {
+  -o-object-fit: scale-down !important;
+  object-fit: scale-down !important;
+}
+
+.fwe-w-100 {
+  width: 100% !important;
+}
+
+.fwe-h-100 {
+  height: 100% !important;
+}
+
+.fwe-text-align-center {
+  text-align: center;
+}
+
+.fwe-text-align-right {
+  text-align: right;
+}
+
+.fwe-text-align-left {
+  text-align: right;
+}
+
+.fwe-text-align-justify {
+  text-align: justify;
+}
+
+.fwe-text-align-end {
+  text-align: end;
+}
+
+.fwe-text-align-start {
+  text-align: start;
+}
+
 /* a screen reader friendly approach */
 .fwe-d-none {
   display: none !important;
@@ -12908,305 +12980,857 @@ template {
   .fwe-col-1 {
     grid-column-end: span 1;
   }
+  .fwe-grid-line-break {
+    grid-column-start: 1;
+  }
+  .fwe-offset-1 {
+    grid-column-start: 2;
+  }
   .fwe-col-2 {
     grid-column-end: span 2;
   }
+  .fwe-grid-line-break {
+    grid-column-start: 1;
+  }
+  .fwe-offset-2 {
+    grid-column-start: 3;
+  }
   .fwe-col-3 {
     grid-column-end: span 3;
   }
+  .fwe-grid-line-break {
+    grid-column-start: 1;
+  }
+  .fwe-offset-3 {
+    grid-column-start: 4;
+  }
   .fwe-col-4 {
     grid-column-end: span 4;
   }
+  .fwe-grid-line-break {
+    grid-column-start: 1;
+  }
+  .fwe-offset-4 {
+    grid-column-start: 5;
+  }
   .fwe-col-5 {
     grid-column-end: span 5;
   }
+  .fwe-grid-line-break {
+    grid-column-start: 1;
+  }
+  .fwe-offset-5 {
+    grid-column-start: 6;
+  }
   .fwe-col-6 {
     grid-column-end: span 6;
   }
+  .fwe-grid-line-break {
+    grid-column-start: 1;
+  }
+  .fwe-offset-6 {
+    grid-column-start: 7;
+  }
   .fwe-col-7 {
     grid-column-end: span 7;
   }
+  .fwe-grid-line-break {
+    grid-column-start: 1;
+  }
+  .fwe-offset-7 {
+    grid-column-start: 8;
+  }
   .fwe-col-8 {
     grid-column-end: span 8;
   }
+  .fwe-grid-line-break {
+    grid-column-start: 1;
+  }
+  .fwe-offset-8 {
+    grid-column-start: 9;
+  }
   .fwe-col-9 {
     grid-column-end: span 9;
   }
+  .fwe-grid-line-break {
+    grid-column-start: 1;
+  }
+  .fwe-offset-9 {
+    grid-column-start: 10;
+  }
   .fwe-col-10 {
     grid-column-end: span 10;
   }
+  .fwe-grid-line-break {
+    grid-column-start: 1;
+  }
+  .fwe-offset-10 {
+    grid-column-start: 11;
+  }
   .fwe-col-11 {
     grid-column-end: span 11;
   }
+  .fwe-grid-line-break {
+    grid-column-start: 1;
+  }
+  .fwe-offset-11 {
+    grid-column-start: 12;
+  }
   .fwe-col-12 {
     grid-column-end: span 12;
   }
+  .fwe-grid-line-break {
+    grid-column-start: 1;
+  }
 }
 @media (min-width: 375px) {
   .fwe-col-xxs-1 {
     grid-column-end: span 1;
   }
+  .fwe-grid-line-break-xxs {
+    grid-column-start: 1;
+  }
+  .fwe-offset-xxs-1 {
+    grid-column-start: 2;
+  }
   .fwe-col-xxs-2 {
     grid-column-end: span 2;
   }
+  .fwe-grid-line-break-xxs {
+    grid-column-start: 1;
+  }
+  .fwe-offset-xxs-2 {
+    grid-column-start: 3;
+  }
   .fwe-col-xxs-3 {
     grid-column-end: span 3;
   }
+  .fwe-grid-line-break-xxs {
+    grid-column-start: 1;
+  }
+  .fwe-offset-xxs-3 {
+    grid-column-start: 4;
+  }
   .fwe-col-xxs-4 {
     grid-column-end: span 4;
   }
+  .fwe-grid-line-break-xxs {
+    grid-column-start: 1;
+  }
+  .fwe-offset-xxs-4 {
+    grid-column-start: 5;
+  }
   .fwe-col-xxs-5 {
     grid-column-end: span 5;
   }
+  .fwe-grid-line-break-xxs {
+    grid-column-start: 1;
+  }
+  .fwe-offset-xxs-5 {
+    grid-column-start: 6;
+  }
   .fwe-col-xxs-6 {
     grid-column-end: span 6;
   }
+  .fwe-grid-line-break-xxs {
+    grid-column-start: 1;
+  }
+  .fwe-offset-xxs-6 {
+    grid-column-start: 7;
+  }
   .fwe-col-xxs-7 {
     grid-column-end: span 7;
   }
+  .fwe-grid-line-break-xxs {
+    grid-column-start: 1;
+  }
+  .fwe-offset-xxs-7 {
+    grid-column-start: 8;
+  }
   .fwe-col-xxs-8 {
     grid-column-end: span 8;
   }
+  .fwe-grid-line-break-xxs {
+    grid-column-start: 1;
+  }
+  .fwe-offset-xxs-8 {
+    grid-column-start: 9;
+  }
   .fwe-col-xxs-9 {
     grid-column-end: span 9;
   }
+  .fwe-grid-line-break-xxs {
+    grid-column-start: 1;
+  }
+  .fwe-offset-xxs-9 {
+    grid-column-start: 10;
+  }
   .fwe-col-xxs-10 {
     grid-column-end: span 10;
   }
+  .fwe-grid-line-break-xxs {
+    grid-column-start: 1;
+  }
+  .fwe-offset-xxs-10 {
+    grid-column-start: 11;
+  }
   .fwe-col-xxs-11 {
     grid-column-end: span 11;
   }
+  .fwe-grid-line-break-xxs {
+    grid-column-start: 1;
+  }
+  .fwe-offset-xxs-11 {
+    grid-column-start: 12;
+  }
   .fwe-col-xxs-12 {
     grid-column-end: span 12;
   }
+  .fwe-grid-line-break-xxs {
+    grid-column-start: 1;
+  }
 }
 @media (min-width: 600px) {
   .fwe-col-xs-1 {
     grid-column-end: span 1;
   }
+  .fwe-grid-line-break-xs {
+    grid-column-start: 1;
+  }
+  .fwe-offset-xs-1 {
+    grid-column-start: 2;
+  }
   .fwe-col-xs-2 {
     grid-column-end: span 2;
   }
+  .fwe-grid-line-break-xs {
+    grid-column-start: 1;
+  }
+  .fwe-offset-xs-2 {
+    grid-column-start: 3;
+  }
   .fwe-col-xs-3 {
     grid-column-end: span 3;
   }
+  .fwe-grid-line-break-xs {
+    grid-column-start: 1;
+  }
+  .fwe-offset-xs-3 {
+    grid-column-start: 4;
+  }
   .fwe-col-xs-4 {
     grid-column-end: span 4;
   }
+  .fwe-grid-line-break-xs {
+    grid-column-start: 1;
+  }
+  .fwe-offset-xs-4 {
+    grid-column-start: 5;
+  }
   .fwe-col-xs-5 {
     grid-column-end: span 5;
   }
+  .fwe-grid-line-break-xs {
+    grid-column-start: 1;
+  }
+  .fwe-offset-xs-5 {
+    grid-column-start: 6;
+  }
   .fwe-col-xs-6 {
     grid-column-end: span 6;
   }
+  .fwe-grid-line-break-xs {
+    grid-column-start: 1;
+  }
+  .fwe-offset-xs-6 {
+    grid-column-start: 7;
+  }
   .fwe-col-xs-7 {
     grid-column-end: span 7;
   }
+  .fwe-grid-line-break-xs {
+    grid-column-start: 1;
+  }
+  .fwe-offset-xs-7 {
+    grid-column-start: 8;
+  }
   .fwe-col-xs-8 {
     grid-column-end: span 8;
   }
+  .fwe-grid-line-break-xs {
+    grid-column-start: 1;
+  }
+  .fwe-offset-xs-8 {
+    grid-column-start: 9;
+  }
   .fwe-col-xs-9 {
     grid-column-end: span 9;
   }
+  .fwe-grid-line-break-xs {
+    grid-column-start: 1;
+  }
+  .fwe-offset-xs-9 {
+    grid-column-start: 10;
+  }
   .fwe-col-xs-10 {
     grid-column-end: span 10;
   }
+  .fwe-grid-line-break-xs {
+    grid-column-start: 1;
+  }
+  .fwe-offset-xs-10 {
+    grid-column-start: 11;
+  }
   .fwe-col-xs-11 {
     grid-column-end: span 11;
   }
+  .fwe-grid-line-break-xs {
+    grid-column-start: 1;
+  }
+  .fwe-offset-xs-11 {
+    grid-column-start: 12;
+  }
   .fwe-col-xs-12 {
     grid-column-end: span 12;
   }
+  .fwe-grid-line-break-xs {
+    grid-column-start: 1;
+  }
 }
 @media (min-width: 769px) {
   .fwe-col-sm-1 {
     grid-column-end: span 1;
   }
+  .fwe-grid-line-break-sm {
+    grid-column-start: 1;
+  }
+  .fwe-offset-sm-1 {
+    grid-column-start: 2;
+  }
   .fwe-col-sm-2 {
     grid-column-end: span 2;
   }
+  .fwe-grid-line-break-sm {
+    grid-column-start: 1;
+  }
+  .fwe-offset-sm-2 {
+    grid-column-start: 3;
+  }
   .fwe-col-sm-3 {
     grid-column-end: span 3;
   }
+  .fwe-grid-line-break-sm {
+    grid-column-start: 1;
+  }
+  .fwe-offset-sm-3 {
+    grid-column-start: 4;
+  }
   .fwe-col-sm-4 {
     grid-column-end: span 4;
   }
+  .fwe-grid-line-break-sm {
+    grid-column-start: 1;
+  }
+  .fwe-offset-sm-4 {
+    grid-column-start: 5;
+  }
   .fwe-col-sm-5 {
     grid-column-end: span 5;
   }
+  .fwe-grid-line-break-sm {
+    grid-column-start: 1;
+  }
+  .fwe-offset-sm-5 {
+    grid-column-start: 6;
+  }
   .fwe-col-sm-6 {
     grid-column-end: span 6;
   }
+  .fwe-grid-line-break-sm {
+    grid-column-start: 1;
+  }
+  .fwe-offset-sm-6 {
+    grid-column-start: 7;
+  }
   .fwe-col-sm-7 {
     grid-column-end: span 7;
   }
+  .fwe-grid-line-break-sm {
+    grid-column-start: 1;
+  }
+  .fwe-offset-sm-7 {
+    grid-column-start: 8;
+  }
   .fwe-col-sm-8 {
     grid-column-end: span 8;
   }
+  .fwe-grid-line-break-sm {
+    grid-column-start: 1;
+  }
+  .fwe-offset-sm-8 {
+    grid-column-start: 9;
+  }
   .fwe-col-sm-9 {
     grid-column-end: span 9;
   }
+  .fwe-grid-line-break-sm {
+    grid-column-start: 1;
+  }
+  .fwe-offset-sm-9 {
+    grid-column-start: 10;
+  }
   .fwe-col-sm-10 {
     grid-column-end: span 10;
   }
+  .fwe-grid-line-break-sm {
+    grid-column-start: 1;
+  }
+  .fwe-offset-sm-10 {
+    grid-column-start: 11;
+  }
   .fwe-col-sm-11 {
     grid-column-end: span 11;
   }
+  .fwe-grid-line-break-sm {
+    grid-column-start: 1;
+  }
+  .fwe-offset-sm-11 {
+    grid-column-start: 12;
+  }
   .fwe-col-sm-12 {
     grid-column-end: span 12;
   }
+  .fwe-grid-line-break-sm {
+    grid-column-start: 1;
+  }
 }
 @media (min-width: 1025px) {
   .fwe-col-md-1 {
     grid-column-end: span 1;
   }
+  .fwe-grid-line-break-md {
+    grid-column-start: 1;
+  }
+  .fwe-offset-md-1 {
+    grid-column-start: 2;
+  }
   .fwe-col-md-2 {
     grid-column-end: span 2;
   }
+  .fwe-grid-line-break-md {
+    grid-column-start: 1;
+  }
+  .fwe-offset-md-2 {
+    grid-column-start: 3;
+  }
   .fwe-col-md-3 {
     grid-column-end: span 3;
   }
+  .fwe-grid-line-break-md {
+    grid-column-start: 1;
+  }
+  .fwe-offset-md-3 {
+    grid-column-start: 4;
+  }
   .fwe-col-md-4 {
     grid-column-end: span 4;
   }
+  .fwe-grid-line-break-md {
+    grid-column-start: 1;
+  }
+  .fwe-offset-md-4 {
+    grid-column-start: 5;
+  }
   .fwe-col-md-5 {
     grid-column-end: span 5;
   }
+  .fwe-grid-line-break-md {
+    grid-column-start: 1;
+  }
+  .fwe-offset-md-5 {
+    grid-column-start: 6;
+  }
   .fwe-col-md-6 {
     grid-column-end: span 6;
   }
+  .fwe-grid-line-break-md {
+    grid-column-start: 1;
+  }
+  .fwe-offset-md-6 {
+    grid-column-start: 7;
+  }
   .fwe-col-md-7 {
     grid-column-end: span 7;
   }
+  .fwe-grid-line-break-md {
+    grid-column-start: 1;
+  }
+  .fwe-offset-md-7 {
+    grid-column-start: 8;
+  }
   .fwe-col-md-8 {
     grid-column-end: span 8;
   }
+  .fwe-grid-line-break-md {
+    grid-column-start: 1;
+  }
+  .fwe-offset-md-8 {
+    grid-column-start: 9;
+  }
   .fwe-col-md-9 {
     grid-column-end: span 9;
   }
+  .fwe-grid-line-break-md {
+    grid-column-start: 1;
+  }
+  .fwe-offset-md-9 {
+    grid-column-start: 10;
+  }
   .fwe-col-md-10 {
     grid-column-end: span 10;
   }
+  .fwe-grid-line-break-md {
+    grid-column-start: 1;
+  }
+  .fwe-offset-md-10 {
+    grid-column-start: 11;
+  }
   .fwe-col-md-11 {
     grid-column-end: span 11;
   }
+  .fwe-grid-line-break-md {
+    grid-column-start: 1;
+  }
+  .fwe-offset-md-11 {
+    grid-column-start: 12;
+  }
   .fwe-col-md-12 {
     grid-column-end: span 12;
   }
+  .fwe-grid-line-break-md {
+    grid-column-start: 1;
+  }
 }
 @media (min-width: 1281px) {
   .fwe-col-lg-1 {
     grid-column-end: span 1;
   }
+  .fwe-grid-line-break-lg {
+    grid-column-start: 1;
+  }
+  .fwe-offset-lg-1 {
+    grid-column-start: 2;
+  }
   .fwe-col-lg-2 {
     grid-column-end: span 2;
   }
+  .fwe-grid-line-break-lg {
+    grid-column-start: 1;
+  }
+  .fwe-offset-lg-2 {
+    grid-column-start: 3;
+  }
   .fwe-col-lg-3 {
     grid-column-end: span 3;
   }
+  .fwe-grid-line-break-lg {
+    grid-column-start: 1;
+  }
+  .fwe-offset-lg-3 {
+    grid-column-start: 4;
+  }
   .fwe-col-lg-4 {
     grid-column-end: span 4;
   }
+  .fwe-grid-line-break-lg {
+    grid-column-start: 1;
+  }
+  .fwe-offset-lg-4 {
+    grid-column-start: 5;
+  }
   .fwe-col-lg-5 {
     grid-column-end: span 5;
   }
+  .fwe-grid-line-break-lg {
+    grid-column-start: 1;
+  }
+  .fwe-offset-lg-5 {
+    grid-column-start: 6;
+  }
   .fwe-col-lg-6 {
     grid-column-end: span 6;
   }
+  .fwe-grid-line-break-lg {
+    grid-column-start: 1;
+  }
+  .fwe-offset-lg-6 {
+    grid-column-start: 7;
+  }
   .fwe-col-lg-7 {
     grid-column-end: span 7;
   }
+  .fwe-grid-line-break-lg {
+    grid-column-start: 1;
+  }
+  .fwe-offset-lg-7 {
+    grid-column-start: 8;
+  }
   .fwe-col-lg-8 {
     grid-column-end: span 8;
   }
+  .fwe-grid-line-break-lg {
+    grid-column-start: 1;
+  }
+  .fwe-offset-lg-8 {
+    grid-column-start: 9;
+  }
   .fwe-col-lg-9 {
     grid-column-end: span 9;
   }
+  .fwe-grid-line-break-lg {
+    grid-column-start: 1;
+  }
+  .fwe-offset-lg-9 {
+    grid-column-start: 10;
+  }
   .fwe-col-lg-10 {
     grid-column-end: span 10;
   }
+  .fwe-grid-line-break-lg {
+    grid-column-start: 1;
+  }
+  .fwe-offset-lg-10 {
+    grid-column-start: 11;
+  }
   .fwe-col-lg-11 {
     grid-column-end: span 11;
   }
+  .fwe-grid-line-break-lg {
+    grid-column-start: 1;
+  }
+  .fwe-offset-lg-11 {
+    grid-column-start: 12;
+  }
   .fwe-col-lg-12 {
     grid-column-end: span 12;
   }
+  .fwe-grid-line-break-lg {
+    grid-column-start: 1;
+  }
 }
 @media (min-width: 1441px) {
   .fwe-col-xl-1 {
     grid-column-end: span 1;
   }
+  .fwe-grid-line-break-xl {
+    grid-column-start: 1;
+  }
+  .fwe-offset-xl-1 {
+    grid-column-start: 2;
+  }
   .fwe-col-xl-2 {
     grid-column-end: span 2;
   }
+  .fwe-grid-line-break-xl {
+    grid-column-start: 1;
+  }
+  .fwe-offset-xl-2 {
+    grid-column-start: 3;
+  }
   .fwe-col-xl-3 {
     grid-column-end: span 3;
   }
+  .fwe-grid-line-break-xl {
+    grid-column-start: 1;
+  }
+  .fwe-offset-xl-3 {
+    grid-column-start: 4;
+  }
   .fwe-col-xl-4 {
     grid-column-end: span 4;
   }
+  .fwe-grid-line-break-xl {
+    grid-column-start: 1;
+  }
+  .fwe-offset-xl-4 {
+    grid-column-start: 5;
+  }
   .fwe-col-xl-5 {
     grid-column-end: span 5;
   }
+  .fwe-grid-line-break-xl {
+    grid-column-start: 1;
+  }
+  .fwe-offset-xl-5 {
+    grid-column-start: 6;
+  }
   .fwe-col-xl-6 {
     grid-column-end: span 6;
   }
+  .fwe-grid-line-break-xl {
+    grid-column-start: 1;
+  }
+  .fwe-offset-xl-6 {
+    grid-column-start: 7;
+  }
   .fwe-col-xl-7 {
     grid-column-end: span 7;
   }
+  .fwe-grid-line-break-xl {
+    grid-column-start: 1;
+  }
+  .fwe-offset-xl-7 {
+    grid-column-start: 8;
+  }
   .fwe-col-xl-8 {
     grid-column-end: span 8;
   }
+  .fwe-grid-line-break-xl {
+    grid-column-start: 1;
+  }
+  .fwe-offset-xl-8 {
+    grid-column-start: 9;
+  }
   .fwe-col-xl-9 {
     grid-column-end: span 9;
   }
+  .fwe-grid-line-break-xl {
+    grid-column-start: 1;
+  }
+  .fwe-offset-xl-9 {
+    grid-column-start: 10;
+  }
   .fwe-col-xl-10 {
     grid-column-end: span 10;
   }
+  .fwe-grid-line-break-xl {
+    grid-column-start: 1;
+  }
+  .fwe-offset-xl-10 {
+    grid-column-start: 11;
+  }
   .fwe-col-xl-11 {
     grid-column-end: span 11;
   }
+  .fwe-grid-line-break-xl {
+    grid-column-start: 1;
+  }
+  .fwe-offset-xl-11 {
+    grid-column-start: 12;
+  }
   .fwe-col-xl-12 {
     grid-column-end: span 12;
   }
+  .fwe-grid-line-break-xl {
+    grid-column-start: 1;
+  }
 }
 @media (min-width: 1921px) {
   .fwe-col-xxl-1 {
     grid-column-end: span 1;
   }
+  .fwe-grid-line-break-xxl {
+    grid-column-start: 1;
+  }
+  .fwe-offset-xxl-1 {
+    grid-column-start: 2;
+  }
   .fwe-col-xxl-2 {
     grid-column-end: span 2;
   }
+  .fwe-grid-line-break-xxl {
+    grid-column-start: 1;
+  }
+  .fwe-offset-xxl-2 {
+    grid-column-start: 3;
+  }
   .fwe-col-xxl-3 {
     grid-column-end: span 3;
   }
+  .fwe-grid-line-break-xxl {
+    grid-column-start: 1;
+  }
+  .fwe-offset-xxl-3 {
+    grid-column-start: 4;
+  }
   .fwe-col-xxl-4 {
     grid-column-end: span 4;
   }
+  .fwe-grid-line-break-xxl {
+    grid-column-start: 1;
+  }
+  .fwe-offset-xxl-4 {
+    grid-column-start: 5;
+  }
   .fwe-col-xxl-5 {
     grid-column-end: span 5;
   }
+  .fwe-grid-line-break-xxl {
+    grid-column-start: 1;
+  }
+  .fwe-offset-xxl-5 {
+    grid-column-start: 6;
+  }
   .fwe-col-xxl-6 {
     grid-column-end: span 6;
   }
+  .fwe-grid-line-break-xxl {
+    grid-column-start: 1;
+  }
+  .fwe-offset-xxl-6 {
+    grid-column-start: 7;
+  }
   .fwe-col-xxl-7 {
     grid-column-end: span 7;
   }
+  .fwe-grid-line-break-xxl {
+    grid-column-start: 1;
+  }
+  .fwe-offset-xxl-7 {
+    grid-column-start: 8;
+  }
   .fwe-col-xxl-8 {
     grid-column-end: span 8;
   }
+  .fwe-grid-line-break-xxl {
+    grid-column-start: 1;
+  }
+  .fwe-offset-xxl-8 {
+    grid-column-start: 9;
+  }
   .fwe-col-xxl-9 {
     grid-column-end: span 9;
   }
+  .fwe-grid-line-break-xxl {
+    grid-column-start: 1;
+  }
+  .fwe-offset-xxl-9 {
+    grid-column-start: 10;
+  }
   .fwe-col-xxl-10 {
     grid-column-end: span 10;
   }
+  .fwe-grid-line-break-xxl {
+    grid-column-start: 1;
+  }
+  .fwe-offset-xxl-10 {
+    grid-column-start: 11;
+  }
   .fwe-col-xxl-11 {
     grid-column-end: span 11;
   }
+  .fwe-grid-line-break-xxl {
+    grid-column-start: 1;
+  }
+  .fwe-offset-xxl-11 {
+    grid-column-start: 12;
+  }
   .fwe-col-xxl-12 {
     grid-column-end: span 12;
   }
+  .fwe-grid-line-break-xxl {
+    grid-column-start: 1;
+  }
 }
 .fwe-grid {
   display: grid;
@@ -13277,8 +13901,8 @@ table.fwe-table tr th.fwe-table-order.fwe-table-order-descending::before {
 table.fwe-table tr td {
   background-color: var(--fwe-white);
   border-bottom: 2px solid var(--fwe-background);
-  padding-top: 11px;
-  padding-bottom: 13px;
+  padding-top: 12px;
+  padding-bottom: 12px;
   padding-left: 16px;
   padding-right: 16px;
   vertical-align: top;
@@ -13761,6 +14385,10 @@ header.fwe-fixed-header {
   align-items: center;
 }
 
+.fwe-navbar-margin {
+  margin-top: 64px;
+}
+
 .fwe-mobile-flyout {
   position: relative;
 }
@@ -13815,19 +14443,21 @@ header.fwe-fixed-header {
   overflow-x: hidden;
   overflow-y: auto;
 }
-.fwe-mobile-flyout-page::-webkit-scrollbar {
-  width: 14px;
-}
-.fwe-mobile-flyout-page::-webkit-scrollbar-track {
-  background: transparent;
-}
-.fwe-mobile-flyout-page::-webkit-scrollbar-thumb {
-  overflow: visible;
-  background-color: var(--fwe-control-scrollbar);
-  border: 3px solid rgba(242, 243, 245, 0);
-  -webkit-background-clip: padding-box;
-  background-clip: padding-box;
-  border-radius: 8px;
+@media (pointer: fine) {
+  .fwe-mobile-flyout-page::-webkit-scrollbar {
+    width: 14px;
+  }
+  .fwe-mobile-flyout-page::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  .fwe-mobile-flyout-page::-webkit-scrollbar-thumb {
+    overflow: visible;
+    background-color: var(--fwe-control-scrollbar);
+    border: 3px solid rgba(242, 243, 245, 0);
+    -webkit-background-clip: padding-box;
+    background-clip: padding-box;
+    border-radius: 8px;
+  }
 }
 .fwe-mobile-flyout-page.fwe-opened {
   transform: translateX(0%);
@@ -14367,10 +14997,17 @@ label.fwe-switch.fwe-switch-label-below .fwe-radio-label-content, label.fwe-chec
 .fwe-radio-group.fwe-radio-lg label.fwe-radio .fwe-radio-checkmark {
   height: 24px;
   width: 24px;
+  min-height: 24px;
+  min-width: 24px;
 }
 .fwe-radio-group.fwe-radio-lg label.fwe-radio .fwe-radio-checkmark:after {
   height: 24px;
   width: 24px;
+  min-height: 24px;
+  min-width: 24px;
+}
+.fwe-radio-group.fwe-radio-lg label.fwe-radio .fwe-radio-label-content {
+  line-height: 32px;
 }
 label.fwe-radio {
   cursor: pointer;
@@ -14387,6 +15024,8 @@ label.fwe-radio .fwe-radio-checkmark {
   position: relative;
   height: 16px;
   width: 16px;
+  min-height: 16px;
+  min-width: 16px;
   border: 1px solid var(--fwe-control-border);
   background-color: var(--fwe-white);
   border-radius: 50%;
@@ -14402,16 +15041,25 @@ label.fwe-radio .fwe-radio-checkmark:after {
   top: -1px;
   height: 16px;
   width: 16px;
+  min-height: 16px;
+  min-width: 16px;
   transition: transform ease-out 0.3s, background-color ease-out 0.3s;
   transform: scale(0.001);
 }
 label.fwe-radio.fwe-radio-lg .fwe-radio-checkmark {
   height: 24px;
   width: 24px;
+  min-height: 24px;
+  min-width: 24px;
 }
 label.fwe-radio.fwe-radio-lg .fwe-radio-checkmark:after {
   height: 24px;
   width: 24px;
+  min-height: 24px;
+  min-width: 24px;
+}
+label.fwe-radio.fwe-radio-lg .fwe-radio-label-content {
+  line-height: 32px;
 }
 label.fwe-radio .fwe-radio-label-content {
   line-height: 24px;
@@ -14422,7 +15070,7 @@ label.fwe-radio input[type=radio] {
   opacity: 0;
   cursor: pointer;
 }
-label.fwe-radio input[type=radio]:hover ~ .fwe-radio-checkmark {
+label.fwe-radio input[type=radio]:hover:not(:disabled) ~ .fwe-radio-checkmark {
   background-color: var(--fwe-control);
 }
 label.fwe-radio input[type=radio]:active ~ .fwe-radio-checkmark {
@@ -14432,7 +15080,7 @@ label.fwe-radio input[type=radio]:checked ~ .fwe-radio-checkmark {
   background-color: var(--fwe-hero);
   border-color: var(--fwe-hero);
 }
-label.fwe-radio input[type=radio]:hover:checked ~ .fwe-radio-checkmark {
+label.fwe-radio input[type=radio]:hover:checked:not(:disabled) ~ .fwe-radio-checkmark {
   background-color: var(--fwe-hero-dark);
   border-color: var(--fwe-hero-dark);
 }
@@ -14470,7 +15118,9 @@ label.fwe-switch.fwe-switch-label-below .fwe-checkbox-label-content, label.fwe-c
 
 label.fwe-checkbox.fwe-checkbox-lg .fwe-checkbox-checkmark, .fwe-checkbox-group.fwe-checkbox-lg label.fwe-checkbox .fwe-checkbox-checkmark {
   height: 24px;
+  min-height: 24px;
   width: 24px;
+  min-width: 24px;
   border-radius: 4px;
 }
 label.fwe-checkbox.fwe-checkbox-lg .fwe-checkbox-checkmark:before, .fwe-checkbox-group.fwe-checkbox-lg label.fwe-checkbox .fwe-checkbox-checkmark:before {
@@ -14497,7 +15147,9 @@ label.fwe-checkbox .fwe-checkbox-checkmark {
   box-sizing: border-box;
   position: relative;
   height: 16px;
+  min-height: 16px;
   width: 16px;
+  min-width: 16px;
   border: 1px solid var(--fwe-control-border);
   background-color: var(--fwe-white);
   border-radius: 2px;
@@ -15685,19 +16337,21 @@ fieldset.fwe-progress-container label {
   overflow-x: hidden;
   overflow-y: auto;
 }
-.fwe-modal .fwe-modal-body::-webkit-scrollbar {
-  width: 14px;
-}
-.fwe-modal .fwe-modal-body::-webkit-scrollbar-track {
-  background: transparent;
-}
-.fwe-modal .fwe-modal-body::-webkit-scrollbar-thumb {
-  overflow: visible;
-  background-color: var(--fwe-control-scrollbar);
-  border: 3px solid rgba(242, 243, 245, 0);
-  -webkit-background-clip: padding-box;
-  background-clip: padding-box;
-  border-radius: 8px;
+@media (pointer: fine) {
+  .fwe-modal .fwe-modal-body::-webkit-scrollbar {
+    width: 14px;
+  }
+  .fwe-modal .fwe-modal-body::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  .fwe-modal .fwe-modal-body::-webkit-scrollbar-thumb {
+    overflow: visible;
+    background-color: var(--fwe-control-scrollbar);
+    border: 3px solid rgba(242, 243, 245, 0);
+    -webkit-background-clip: padding-box;
+    background-clip: padding-box;
+    border-radius: 8px;
+  }
 }
 .fwe-modal-h1 {
   margin-top: 0;
@@ -16497,19 +17151,21 @@ fieldset.fwe-progress-container label {
   scrollbar-width: thin;
   scrollbar-color: var(--fwe-control-scrollbar) var(--fwe-gray-100);
 }
-.fwe-scrollbar::-webkit-scrollbar {
-  width: 14px;
-}
-.fwe-scrollbar::-webkit-scrollbar-track {
-  background: transparent;
-}
-.fwe-scrollbar::-webkit-scrollbar-thumb {
-  overflow: visible;
-  background-color: var(--fwe-control-scrollbar);
-  border: 3px solid rgba(242, 243, 245, 0);
-  -webkit-background-clip: padding-box;
-  background-clip: padding-box;
-  border-radius: 8px;
+@media (pointer: fine) {
+  .fwe-scrollbar::-webkit-scrollbar {
+    width: 14px;
+  }
+  .fwe-scrollbar::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  .fwe-scrollbar::-webkit-scrollbar-thumb {
+    overflow: visible;
+    background-color: var(--fwe-control-scrollbar);
+    border: 3px solid rgba(242, 243, 245, 0);
+    -webkit-background-clip: padding-box;
+    background-clip: padding-box;
+    border-radius: 8px;
+  }
 }
 
 /* stylelint-disable */
@@ -16966,19 +17622,21 @@ input[type=search]::-webkit-search-cancel-button {
   scrollbar-color: var(--fwe-control-scrollbar) var(--fwe-gray-100);
   position: relative;
 }
-.fwe-tree::-webkit-scrollbar {
-  width: 14px;
-}
-.fwe-tree::-webkit-scrollbar-track {
-  background: transparent;
-}
-.fwe-tree::-webkit-scrollbar-thumb {
-  overflow: visible;
-  background-color: var(--fwe-control-scrollbar);
-  border: 3px solid rgba(242, 243, 245, 0);
-  -webkit-background-clip: padding-box;
-  background-clip: padding-box;
-  border-radius: 8px;
+@media (pointer: fine) {
+  .fwe-tree::-webkit-scrollbar {
+    width: 14px;
+  }
+  .fwe-tree::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  .fwe-tree::-webkit-scrollbar-thumb {
+    overflow: visible;
+    background-color: var(--fwe-control-scrollbar);
+    border: 3px solid rgba(242, 243, 245, 0);
+    -webkit-background-clip: padding-box;
+    background-clip: padding-box;
+    border-radius: 8px;
+  }
 }
 .fwe-tree-node {
   position: relative;
@@ -17140,4 +17798,44 @@ input[type=search]::-webkit-search-cancel-button {
   color: var(--fwe-btn-hero-active);
 }
 
+.fwe-sidebar-overlay {
+  z-index: var(--fwe-z-index-sticky);
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.16);
+  padding: 32px;
+  position: fixed;
+  right: 0px;
+  top: 0px;
+  bottom: 0px;
+  width: 480px;
+  background: var(--fwe-white);
+  transform: translateX(480px);
+  transition: opacity 400ms, transform 400ms;
+  opacity: 0;
+}
+.fwe-sidebar-overlay--open {
+  opacity: 1;
+  transform: translateX(0px);
+}
+.fwe-sidebar-overlay .fwe-close-icon-button {
+  line-height: 1;
+  display: block;
+  border: none;
+  background-color: transparent;
+  padding: 0;
+  margin: 0 0 0 auto;
+  outline: none;
+  text-align: right;
+  cursor: pointer;
+}
+.fwe-sidebar-overlay .fwe-close-icon-button:hover {
+  color: var(--fwe-hero);
+}
+@media (max-width: 600px) {
+  .fwe-sidebar-overlay {
+    left: 0px;
+    width: unset;
+    transform: translateX(100%);
+  }
+}
+
 /*# sourceMappingURL=festo-web-essentials.css.map */