@bpmn-io/form-js-viewer 1.5.0-alpha.0 → 1.5.0

package/dist/assets/form-js.css

@@ -948,6 +948,30 @@
   margin: 4px 0;
 }
 
+.fjs-container .fjs-iframe {
+  margin: 4px 0;
+  width: 100%;
+  border: 1px solid var(--color-borders-readonly);
+}
+
+.fjs-container .fjs-iframe-placeholder {
+  margin: 4px 0;
+  height: 90px;
+  display: flex;
+  justify-content: center;
+  background: var(--color-background-readonly);
+  color: var(--color-text-light);
+  border: 1px solid var(--color-borders-readonly);
+}
+
+.fjs-container .fjs-iframe-placeholder .fjs-iframe-placeholder-text {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  overflow: hidden;
+}
+
 /**
 * Flatpickr style adjustments
 */
@@ -998,163 +1022,135 @@
 }
 
 .cds--grid {
-  margin-right: auto;
-  margin-left: auto;
-  max-width: 99rem;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  margin-inline: auto;
+  max-inline-size: 99rem;
+  padding-inline: 1rem;
 }
 @media (min-width: 42rem) {
   .cds--grid {
-    padding-right: 2rem;
-    padding-left: 2rem;
+    padding-inline: 2rem;
   }
 }
 @media (min-width: 99rem) {
   .cds--grid {
-    padding-right: 2.5rem;
-    padding-left: 2.5rem;
+    padding-inline: 2.5rem;
   }
 }
 
 @media (min-width: 99rem) {
   .cds--grid--full-width {
-    max-width: 100%;
+    max-inline-size: 100%;
   }
 }
 .cds--row {
   display: flex;
   flex-wrap: wrap;
-  margin-right: -1rem;
-  margin-left: -1rem;
+  margin-inline: -1rem;
 }
 
 .cds--row-padding [class*=cds--col],
 .cds--col-padding {
-  padding-top: 1rem;
-  padding-bottom: 1rem;
+  padding-block: 1rem;
 }
 
 .cds--grid--condensed [class*=cds--col] {
-  padding-top: 0.03125rem;
-  padding-bottom: 0.03125rem;
+  padding-block: 0.03125rem;
 }
 
 .cds--col {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col, .cds--grid--condensed .cds--col {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col, .cds--grid--narrow .cds--col {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-sm-0 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-sm-0, .cds--grid--condensed .cds--col-sm-0 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-sm-0, .cds--grid--narrow .cds--col-sm-0 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-sm-1 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-sm-1, .cds--grid--condensed .cds--col-sm-1 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-sm-1, .cds--grid--narrow .cds--col-sm-1 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-sm-2 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-sm-2, .cds--grid--condensed .cds--col-sm-2 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-sm-2, .cds--grid--narrow .cds--col-sm-2 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-sm-3 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-sm-3, .cds--grid--condensed .cds--col-sm-3 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-sm-3, .cds--grid--narrow .cds--col-sm-3 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-sm-4 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-sm-4, .cds--grid--condensed .cds--col-sm-4 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-sm-4, .cds--grid--narrow .cds--col-sm-4 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-sm,
 .cds--col-sm--auto {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-sm, .cds--grid--condensed .cds--col-sm,
 .cds--row--condensed .cds--col-sm--auto,
 .cds--grid--condensed .cds--col-sm--auto {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-sm, .cds--grid--narrow .cds--col-sm,
 .cds--row--narrow .cds--col-sm--auto,
 .cds--grid--narrow .cds--col-sm--auto {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col,
 .cds--col-sm {
-  max-width: 100%;
   flex-basis: 0;
   flex-grow: 1;
+  max-inline-size: 100%;
 }
 
 .cds--col--auto,
 .cds--col-sm--auto {
-  width: auto;
-  max-width: 100%;
   flex: 1 0 0%;
+  inline-size: auto;
+  max-inline-size: 100%;
 }
 
 .cds--col-sm-0 {
@@ -1163,1498 +1159,1305 @@
 
 .cds--col-sm-1 {
   display: block;
-  max-width: 25%;
   flex: 0 0 25%;
+  max-inline-size: 25%;
 }
 
 .cds--col-sm-2 {
   display: block;
-  max-width: 50%;
   flex: 0 0 50%;
+  max-inline-size: 50%;
 }
 
 .cds--col-sm-3 {
   display: block;
-  max-width: 75%;
   flex: 0 0 75%;
+  max-inline-size: 75%;
 }
 
 .cds--col-sm-4 {
   display: block;
-  max-width: 100%;
   flex: 0 0 100%;
+  max-inline-size: 100%;
 }
 
 .cds--offset-sm-0 {
-  margin-left: 0;
+  margin-inline-start: 0;
 }
 
 .cds--offset-sm-1 {
-  margin-left: 25%;
+  margin-inline-start: 25%;
 }
 
 .cds--offset-sm-2 {
-  margin-left: 50%;
+  margin-inline-start: 50%;
 }
 
 .cds--offset-sm-3 {
-  margin-left: 75%;
+  margin-inline-start: 75%;
 }
 
 .cds--col-md-0 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-md-0, .cds--grid--condensed .cds--col-md-0 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-md-0, .cds--grid--narrow .cds--col-md-0 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-md-1 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-md-1, .cds--grid--condensed .cds--col-md-1 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-md-1, .cds--grid--narrow .cds--col-md-1 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-md-2 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-md-2, .cds--grid--condensed .cds--col-md-2 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-md-2, .cds--grid--narrow .cds--col-md-2 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-md-3 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-md-3, .cds--grid--condensed .cds--col-md-3 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-md-3, .cds--grid--narrow .cds--col-md-3 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-md-4 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-md-4, .cds--grid--condensed .cds--col-md-4 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-md-4, .cds--grid--narrow .cds--col-md-4 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-md-5 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-md-5, .cds--grid--condensed .cds--col-md-5 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-md-5, .cds--grid--narrow .cds--col-md-5 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-md-6 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-md-6, .cds--grid--condensed .cds--col-md-6 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-md-6, .cds--grid--narrow .cds--col-md-6 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-md-7 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-md-7, .cds--grid--condensed .cds--col-md-7 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-md-7, .cds--grid--narrow .cds--col-md-7 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-md-8 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-md-8, .cds--grid--condensed .cds--col-md-8 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-md-8, .cds--grid--narrow .cds--col-md-8 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-md,
 .cds--col-md--auto {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-md, .cds--grid--condensed .cds--col-md,
 .cds--row--condensed .cds--col-md--auto,
 .cds--grid--condensed .cds--col-md--auto {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-md, .cds--grid--narrow .cds--col-md,
 .cds--row--narrow .cds--col-md--auto,
 .cds--grid--narrow .cds--col-md--auto {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 @media (min-width: 42rem) {
   .cds--col,
   .cds--col-md {
-    max-width: 100%;
     flex-basis: 0;
     flex-grow: 1;
+    max-inline-size: 100%;
   }
   .cds--col--auto,
   .cds--col-md--auto {
-    width: auto;
-    max-width: 100%;
     flex: 1 0 0%;
+    inline-size: auto;
+    max-inline-size: 100%;
   }
   .cds--col-md-0 {
     display: none;
   }
   .cds--col-md-1 {
     display: block;
-    max-width: 12.5%;
     flex: 0 0 12.5%;
+    max-inline-size: 12.5%;
   }
   .cds--col-md-2 {
     display: block;
-    max-width: 25%;
     flex: 0 0 25%;
+    max-inline-size: 25%;
   }
   .cds--col-md-3 {
     display: block;
-    max-width: 37.5%;
     flex: 0 0 37.5%;
+    max-inline-size: 37.5%;
   }
   .cds--col-md-4 {
     display: block;
-    max-width: 50%;
     flex: 0 0 50%;
+    max-inline-size: 50%;
   }
   .cds--col-md-5 {
     display: block;
-    max-width: 62.5%;
     flex: 0 0 62.5%;
+    max-inline-size: 62.5%;
   }
   .cds--col-md-6 {
     display: block;
-    max-width: 75%;
     flex: 0 0 75%;
+    max-inline-size: 75%;
   }
   .cds--col-md-7 {
     display: block;
-    max-width: 87.5%;
     flex: 0 0 87.5%;
+    max-inline-size: 87.5%;
   }
   .cds--col-md-8 {
     display: block;
-    max-width: 100%;
     flex: 0 0 100%;
+    max-inline-size: 100%;
   }
   .cds--offset-md-0 {
-    margin-left: 0;
+    margin-inline-start: 0;
   }
   .cds--offset-md-1 {
-    margin-left: 12.5%;
+    margin-inline-start: 12.5%;
   }
   .cds--offset-md-2 {
-    margin-left: 25%;
+    margin-inline-start: 25%;
   }
   .cds--offset-md-3 {
-    margin-left: 37.5%;
+    margin-inline-start: 37.5%;
   }
   .cds--offset-md-4 {
-    margin-left: 50%;
+    margin-inline-start: 50%;
   }
   .cds--offset-md-5 {
-    margin-left: 62.5%;
+    margin-inline-start: 62.5%;
   }
   .cds--offset-md-6 {
-    margin-left: 75%;
+    margin-inline-start: 75%;
   }
   .cds--offset-md-7 {
-    margin-left: 87.5%;
+    margin-inline-start: 87.5%;
   }
 }
 .cds--col-lg-0 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-lg-0, .cds--grid--condensed .cds--col-lg-0 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-lg-0, .cds--grid--narrow .cds--col-lg-0 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-lg-1 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-lg-1, .cds--grid--condensed .cds--col-lg-1 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-lg-1, .cds--grid--narrow .cds--col-lg-1 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-lg-2 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-lg-2, .cds--grid--condensed .cds--col-lg-2 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-lg-2, .cds--grid--narrow .cds--col-lg-2 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-lg-3 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-lg-3, .cds--grid--condensed .cds--col-lg-3 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-lg-3, .cds--grid--narrow .cds--col-lg-3 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-lg-4 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-lg-4, .cds--grid--condensed .cds--col-lg-4 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-lg-4, .cds--grid--narrow .cds--col-lg-4 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-lg-5 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-lg-5, .cds--grid--condensed .cds--col-lg-5 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-lg-5, .cds--grid--narrow .cds--col-lg-5 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-lg-6 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-lg-6, .cds--grid--condensed .cds--col-lg-6 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-lg-6, .cds--grid--narrow .cds--col-lg-6 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-lg-7 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-lg-7, .cds--grid--condensed .cds--col-lg-7 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-lg-7, .cds--grid--narrow .cds--col-lg-7 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-lg-8 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-lg-8, .cds--grid--condensed .cds--col-lg-8 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-lg-8, .cds--grid--narrow .cds--col-lg-8 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-lg-9 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-lg-9, .cds--grid--condensed .cds--col-lg-9 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-lg-9, .cds--grid--narrow .cds--col-lg-9 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-lg-10 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-lg-10, .cds--grid--condensed .cds--col-lg-10 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-lg-10, .cds--grid--narrow .cds--col-lg-10 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-lg-11 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-lg-11, .cds--grid--condensed .cds--col-lg-11 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-lg-11, .cds--grid--narrow .cds--col-lg-11 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-lg-12 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-lg-12, .cds--grid--condensed .cds--col-lg-12 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-lg-12, .cds--grid--narrow .cds--col-lg-12 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-lg-13 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-lg-13, .cds--grid--condensed .cds--col-lg-13 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-lg-13, .cds--grid--narrow .cds--col-lg-13 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-lg-14 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-lg-14, .cds--grid--condensed .cds--col-lg-14 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-lg-14, .cds--grid--narrow .cds--col-lg-14 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-lg-15 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-lg-15, .cds--grid--condensed .cds--col-lg-15 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-lg-15, .cds--grid--narrow .cds--col-lg-15 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-lg-16 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-lg-16, .cds--grid--condensed .cds--col-lg-16 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-lg-16, .cds--grid--narrow .cds--col-lg-16 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-lg,
 .cds--col-lg--auto {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-lg, .cds--grid--condensed .cds--col-lg,
 .cds--row--condensed .cds--col-lg--auto,
 .cds--grid--condensed .cds--col-lg--auto {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-lg, .cds--grid--narrow .cds--col-lg,
 .cds--row--narrow .cds--col-lg--auto,
 .cds--grid--narrow .cds--col-lg--auto {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 @media (min-width: 66rem) {
   .cds--col,
   .cds--col-lg {
-    max-width: 100%;
     flex-basis: 0;
     flex-grow: 1;
+    max-inline-size: 100%;
   }
   .cds--col--auto,
   .cds--col-lg--auto {
-    width: auto;
-    max-width: 100%;
     flex: 1 0 0%;
+    inline-size: auto;
+    max-inline-size: 100%;
   }
   .cds--col-lg-0 {
     display: none;
   }
   .cds--col-lg-1 {
     display: block;
-    max-width: 6.25%;
     flex: 0 0 6.25%;
+    max-inline-size: 6.25%;
   }
   .cds--col-lg-2 {
     display: block;
-    max-width: 12.5%;
     flex: 0 0 12.5%;
+    max-inline-size: 12.5%;
   }
   .cds--col-lg-3 {
     display: block;
-    max-width: 18.75%;
     flex: 0 0 18.75%;
+    max-inline-size: 18.75%;
   }
   .cds--col-lg-4 {
     display: block;
-    max-width: 25%;
     flex: 0 0 25%;
+    max-inline-size: 25%;
   }
   .cds--col-lg-5 {
     display: block;
-    max-width: 31.25%;
     flex: 0 0 31.25%;
+    max-inline-size: 31.25%;
   }
   .cds--col-lg-6 {
     display: block;
-    max-width: 37.5%;
     flex: 0 0 37.5%;
+    max-inline-size: 37.5%;
   }
   .cds--col-lg-7 {
     display: block;
-    max-width: 43.75%;
     flex: 0 0 43.75%;
+    max-inline-size: 43.75%;
   }
   .cds--col-lg-8 {
     display: block;
-    max-width: 50%;
     flex: 0 0 50%;
+    max-inline-size: 50%;
   }
   .cds--col-lg-9 {
     display: block;
-    max-width: 56.25%;
     flex: 0 0 56.25%;
+    max-inline-size: 56.25%;
   }
   .cds--col-lg-10 {
     display: block;
-    max-width: 62.5%;
     flex: 0 0 62.5%;
+    max-inline-size: 62.5%;
   }
   .cds--col-lg-11 {
     display: block;
-    max-width: 68.75%;
     flex: 0 0 68.75%;
+    max-inline-size: 68.75%;
   }
   .cds--col-lg-12 {
     display: block;
-    max-width: 75%;
     flex: 0 0 75%;
+    max-inline-size: 75%;
   }
   .cds--col-lg-13 {
     display: block;
-    max-width: 81.25%;
     flex: 0 0 81.25%;
+    max-inline-size: 81.25%;
   }
   .cds--col-lg-14 {
     display: block;
-    max-width: 87.5%;
     flex: 0 0 87.5%;
+    max-inline-size: 87.5%;
   }
   .cds--col-lg-15 {
     display: block;
-    max-width: 93.75%;
     flex: 0 0 93.75%;
+    max-inline-size: 93.75%;
   }
   .cds--col-lg-16 {
     display: block;
-    max-width: 100%;
     flex: 0 0 100%;
+    max-inline-size: 100%;
   }
   .cds--offset-lg-0 {
-    margin-left: 0;
+    margin-inline-start: 0;
   }
   .cds--offset-lg-1 {
-    margin-left: 6.25%;
+    margin-inline-start: 6.25%;
   }
   .cds--offset-lg-2 {
-    margin-left: 12.5%;
+    margin-inline-start: 12.5%;
   }
   .cds--offset-lg-3 {
-    margin-left: 18.75%;
+    margin-inline-start: 18.75%;
   }
   .cds--offset-lg-4 {
-    margin-left: 25%;
+    margin-inline-start: 25%;
   }
   .cds--offset-lg-5 {
-    margin-left: 31.25%;
+    margin-inline-start: 31.25%;
   }
   .cds--offset-lg-6 {
-    margin-left: 37.5%;
+    margin-inline-start: 37.5%;
   }
   .cds--offset-lg-7 {
-    margin-left: 43.75%;
+    margin-inline-start: 43.75%;
   }
   .cds--offset-lg-8 {
-    margin-left: 50%;
+    margin-inline-start: 50%;
   }
   .cds--offset-lg-9 {
-    margin-left: 56.25%;
+    margin-inline-start: 56.25%;
   }
   .cds--offset-lg-10 {
-    margin-left: 62.5%;
+    margin-inline-start: 62.5%;
   }
   .cds--offset-lg-11 {
-    margin-left: 68.75%;
+    margin-inline-start: 68.75%;
   }
   .cds--offset-lg-12 {
-    margin-left: 75%;
+    margin-inline-start: 75%;
   }
   .cds--offset-lg-13 {
-    margin-left: 81.25%;
+    margin-inline-start: 81.25%;
   }
   .cds--offset-lg-14 {
-    margin-left: 87.5%;
+    margin-inline-start: 87.5%;
   }
   .cds--offset-lg-15 {
-    margin-left: 93.75%;
+    margin-inline-start: 93.75%;
   }
 }
 .cds--col-xlg-0 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-xlg-0, .cds--grid--condensed .cds--col-xlg-0 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-xlg-0, .cds--grid--narrow .cds--col-xlg-0 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-xlg-1 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-xlg-1, .cds--grid--condensed .cds--col-xlg-1 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-xlg-1, .cds--grid--narrow .cds--col-xlg-1 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-xlg-2 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-xlg-2, .cds--grid--condensed .cds--col-xlg-2 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-xlg-2, .cds--grid--narrow .cds--col-xlg-2 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-xlg-3 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-xlg-3, .cds--grid--condensed .cds--col-xlg-3 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-xlg-3, .cds--grid--narrow .cds--col-xlg-3 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-xlg-4 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-xlg-4, .cds--grid--condensed .cds--col-xlg-4 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-xlg-4, .cds--grid--narrow .cds--col-xlg-4 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-xlg-5 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-xlg-5, .cds--grid--condensed .cds--col-xlg-5 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-xlg-5, .cds--grid--narrow .cds--col-xlg-5 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-xlg-6 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-xlg-6, .cds--grid--condensed .cds--col-xlg-6 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-xlg-6, .cds--grid--narrow .cds--col-xlg-6 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-xlg-7 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-xlg-7, .cds--grid--condensed .cds--col-xlg-7 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-xlg-7, .cds--grid--narrow .cds--col-xlg-7 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-xlg-8 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-xlg-8, .cds--grid--condensed .cds--col-xlg-8 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-xlg-8, .cds--grid--narrow .cds--col-xlg-8 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-xlg-9 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-xlg-9, .cds--grid--condensed .cds--col-xlg-9 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-xlg-9, .cds--grid--narrow .cds--col-xlg-9 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-xlg-10 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-xlg-10, .cds--grid--condensed .cds--col-xlg-10 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-xlg-10, .cds--grid--narrow .cds--col-xlg-10 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-xlg-11 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-xlg-11, .cds--grid--condensed .cds--col-xlg-11 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-xlg-11, .cds--grid--narrow .cds--col-xlg-11 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-xlg-12 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-xlg-12, .cds--grid--condensed .cds--col-xlg-12 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-xlg-12, .cds--grid--narrow .cds--col-xlg-12 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-xlg-13 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-xlg-13, .cds--grid--condensed .cds--col-xlg-13 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-xlg-13, .cds--grid--narrow .cds--col-xlg-13 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-xlg-14 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-xlg-14, .cds--grid--condensed .cds--col-xlg-14 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-xlg-14, .cds--grid--narrow .cds--col-xlg-14 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-xlg-15 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-xlg-15, .cds--grid--condensed .cds--col-xlg-15 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-xlg-15, .cds--grid--narrow .cds--col-xlg-15 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-xlg-16 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-xlg-16, .cds--grid--condensed .cds--col-xlg-16 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-xlg-16, .cds--grid--narrow .cds--col-xlg-16 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-xlg,
 .cds--col-xlg--auto {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-xlg, .cds--grid--condensed .cds--col-xlg,
 .cds--row--condensed .cds--col-xlg--auto,
 .cds--grid--condensed .cds--col-xlg--auto {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-xlg, .cds--grid--narrow .cds--col-xlg,
 .cds--row--narrow .cds--col-xlg--auto,
 .cds--grid--narrow .cds--col-xlg--auto {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 @media (min-width: 82rem) {
   .cds--col,
   .cds--col-xlg {
-    max-width: 100%;
     flex-basis: 0;
     flex-grow: 1;
+    max-inline-size: 100%;
   }
   .cds--col--auto,
   .cds--col-xlg--auto {
-    width: auto;
-    max-width: 100%;
     flex: 1 0 0%;
+    inline-size: auto;
+    max-inline-size: 100%;
   }
   .cds--col-xlg-0 {
     display: none;
   }
   .cds--col-xlg-1 {
     display: block;
-    max-width: 6.25%;
     flex: 0 0 6.25%;
+    max-inline-size: 6.25%;
   }
   .cds--col-xlg-2 {
     display: block;
-    max-width: 12.5%;
     flex: 0 0 12.5%;
+    max-inline-size: 12.5%;
   }
   .cds--col-xlg-3 {
     display: block;
-    max-width: 18.75%;
     flex: 0 0 18.75%;
+    max-inline-size: 18.75%;
   }
   .cds--col-xlg-4 {
     display: block;
-    max-width: 25%;
     flex: 0 0 25%;
+    max-inline-size: 25%;
   }
   .cds--col-xlg-5 {
     display: block;
-    max-width: 31.25%;
     flex: 0 0 31.25%;
+    max-inline-size: 31.25%;
   }
   .cds--col-xlg-6 {
     display: block;
-    max-width: 37.5%;
     flex: 0 0 37.5%;
+    max-inline-size: 37.5%;
   }
   .cds--col-xlg-7 {
     display: block;
-    max-width: 43.75%;
     flex: 0 0 43.75%;
+    max-inline-size: 43.75%;
   }
   .cds--col-xlg-8 {
     display: block;
-    max-width: 50%;
     flex: 0 0 50%;
+    max-inline-size: 50%;
   }
   .cds--col-xlg-9 {
     display: block;
-    max-width: 56.25%;
     flex: 0 0 56.25%;
+    max-inline-size: 56.25%;
   }
   .cds--col-xlg-10 {
     display: block;
-    max-width: 62.5%;
     flex: 0 0 62.5%;
+    max-inline-size: 62.5%;
   }
   .cds--col-xlg-11 {
     display: block;
-    max-width: 68.75%;
     flex: 0 0 68.75%;
+    max-inline-size: 68.75%;
   }
   .cds--col-xlg-12 {
     display: block;
-    max-width: 75%;
     flex: 0 0 75%;
+    max-inline-size: 75%;
   }
   .cds--col-xlg-13 {
     display: block;
-    max-width: 81.25%;
     flex: 0 0 81.25%;
+    max-inline-size: 81.25%;
   }
   .cds--col-xlg-14 {
     display: block;
-    max-width: 87.5%;
     flex: 0 0 87.5%;
+    max-inline-size: 87.5%;
   }
   .cds--col-xlg-15 {
     display: block;
-    max-width: 93.75%;
     flex: 0 0 93.75%;
+    max-inline-size: 93.75%;
   }
   .cds--col-xlg-16 {
     display: block;
-    max-width: 100%;
     flex: 0 0 100%;
+    max-inline-size: 100%;
   }
   .cds--offset-xlg-0 {
-    margin-left: 0;
+    margin-inline-start: 0;
   }
   .cds--offset-xlg-1 {
-    margin-left: 6.25%;
+    margin-inline-start: 6.25%;
   }
   .cds--offset-xlg-2 {
-    margin-left: 12.5%;
+    margin-inline-start: 12.5%;
   }
   .cds--offset-xlg-3 {
-    margin-left: 18.75%;
+    margin-inline-start: 18.75%;
   }
   .cds--offset-xlg-4 {
-    margin-left: 25%;
+    margin-inline-start: 25%;
   }
   .cds--offset-xlg-5 {
-    margin-left: 31.25%;
+    margin-inline-start: 31.25%;
   }
   .cds--offset-xlg-6 {
-    margin-left: 37.5%;
+    margin-inline-start: 37.5%;
   }
   .cds--offset-xlg-7 {
-    margin-left: 43.75%;
+    margin-inline-start: 43.75%;
   }
   .cds--offset-xlg-8 {
-    margin-left: 50%;
+    margin-inline-start: 50%;
   }
   .cds--offset-xlg-9 {
-    margin-left: 56.25%;
+    margin-inline-start: 56.25%;
   }
   .cds--offset-xlg-10 {
-    margin-left: 62.5%;
+    margin-inline-start: 62.5%;
   }
   .cds--offset-xlg-11 {
-    margin-left: 68.75%;
+    margin-inline-start: 68.75%;
   }
   .cds--offset-xlg-12 {
-    margin-left: 75%;
+    margin-inline-start: 75%;
   }
   .cds--offset-xlg-13 {
-    margin-left: 81.25%;
+    margin-inline-start: 81.25%;
   }
   .cds--offset-xlg-14 {
-    margin-left: 87.5%;
+    margin-inline-start: 87.5%;
   }
   .cds--offset-xlg-15 {
-    margin-left: 93.75%;
+    margin-inline-start: 93.75%;
   }
 }
 .cds--col-max-0 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-max-0, .cds--grid--condensed .cds--col-max-0 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-max-0, .cds--grid--narrow .cds--col-max-0 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-max-1 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-max-1, .cds--grid--condensed .cds--col-max-1 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-max-1, .cds--grid--narrow .cds--col-max-1 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-max-2 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-max-2, .cds--grid--condensed .cds--col-max-2 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-max-2, .cds--grid--narrow .cds--col-max-2 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-max-3 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-max-3, .cds--grid--condensed .cds--col-max-3 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-max-3, .cds--grid--narrow .cds--col-max-3 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-max-4 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-max-4, .cds--grid--condensed .cds--col-max-4 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-max-4, .cds--grid--narrow .cds--col-max-4 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-max-5 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-max-5, .cds--grid--condensed .cds--col-max-5 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-max-5, .cds--grid--narrow .cds--col-max-5 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-max-6 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-max-6, .cds--grid--condensed .cds--col-max-6 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-max-6, .cds--grid--narrow .cds--col-max-6 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-max-7 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-max-7, .cds--grid--condensed .cds--col-max-7 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-max-7, .cds--grid--narrow .cds--col-max-7 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-max-8 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-max-8, .cds--grid--condensed .cds--col-max-8 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-max-8, .cds--grid--narrow .cds--col-max-8 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-max-9 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-max-9, .cds--grid--condensed .cds--col-max-9 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-max-9, .cds--grid--narrow .cds--col-max-9 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-max-10 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-max-10, .cds--grid--condensed .cds--col-max-10 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-max-10, .cds--grid--narrow .cds--col-max-10 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-max-11 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-max-11, .cds--grid--condensed .cds--col-max-11 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-max-11, .cds--grid--narrow .cds--col-max-11 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-max-12 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-max-12, .cds--grid--condensed .cds--col-max-12 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-max-12, .cds--grid--narrow .cds--col-max-12 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-max-13 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-max-13, .cds--grid--condensed .cds--col-max-13 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-max-13, .cds--grid--narrow .cds--col-max-13 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-max-14 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-max-14, .cds--grid--condensed .cds--col-max-14 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-max-14, .cds--grid--narrow .cds--col-max-14 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-max-15 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-max-15, .cds--grid--condensed .cds--col-max-15 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-max-15, .cds--grid--narrow .cds--col-max-15 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-max-16 {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-max-16, .cds--grid--condensed .cds--col-max-16 {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-max-16, .cds--grid--narrow .cds--col-max-16 {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 .cds--col-max,
 .cds--col-max--auto {
-  width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  inline-size: 100%;
+  padding-inline: 1rem;
 }
 .cds--row--condensed .cds--col-max, .cds--grid--condensed .cds--col-max,
 .cds--row--condensed .cds--col-max--auto,
 .cds--grid--condensed .cds--col-max--auto {
-  padding-right: 0.03125rem;
-  padding-left: 0.03125rem;
+  padding-inline: 0.03125rem;
 }
 .cds--row--narrow .cds--col-max, .cds--grid--narrow .cds--col-max,
 .cds--row--narrow .cds--col-max--auto,
 .cds--grid--narrow .cds--col-max--auto {
-  padding-right: 1rem;
-  padding-left: 0;
+  padding-inline: 0 1rem;
 }
 
 @media (min-width: 99rem) {
   .cds--col,
   .cds--col-max {
-    max-width: 100%;
     flex-basis: 0;
     flex-grow: 1;
+    max-inline-size: 100%;
   }
   .cds--col--auto,
   .cds--col-max--auto {
-    width: auto;
-    max-width: 100%;
     flex: 1 0 0%;
+    inline-size: auto;
+    max-inline-size: 100%;
   }
   .cds--col-max-0 {
     display: none;
   }
   .cds--col-max-1 {
     display: block;
-    max-width: 6.25%;
     flex: 0 0 6.25%;
+    max-inline-size: 6.25%;
   }
   .cds--col-max-2 {
     display: block;
-    max-width: 12.5%;
     flex: 0 0 12.5%;
+    max-inline-size: 12.5%;
   }
   .cds--col-max-3 {
     display: block;
-    max-width: 18.75%;
     flex: 0 0 18.75%;
+    max-inline-size: 18.75%;
   }
   .cds--col-max-4 {
     display: block;
-    max-width: 25%;
     flex: 0 0 25%;
+    max-inline-size: 25%;
   }
   .cds--col-max-5 {
     display: block;
-    max-width: 31.25%;
     flex: 0 0 31.25%;
+    max-inline-size: 31.25%;
   }
   .cds--col-max-6 {
     display: block;
-    max-width: 37.5%;
     flex: 0 0 37.5%;
+    max-inline-size: 37.5%;
   }
   .cds--col-max-7 {
     display: block;
-    max-width: 43.75%;
     flex: 0 0 43.75%;
+    max-inline-size: 43.75%;
   }
   .cds--col-max-8 {
     display: block;
-    max-width: 50%;
     flex: 0 0 50%;
+    max-inline-size: 50%;
   }
   .cds--col-max-9 {
     display: block;
-    max-width: 56.25%;
     flex: 0 0 56.25%;
+    max-inline-size: 56.25%;
   }
   .cds--col-max-10 {
     display: block;
-    max-width: 62.5%;
     flex: 0 0 62.5%;
+    max-inline-size: 62.5%;
   }
   .cds--col-max-11 {
     display: block;
-    max-width: 68.75%;
     flex: 0 0 68.75%;
+    max-inline-size: 68.75%;
   }
   .cds--col-max-12 {
     display: block;
-    max-width: 75%;
     flex: 0 0 75%;
+    max-inline-size: 75%;
   }
   .cds--col-max-13 {
     display: block;
-    max-width: 81.25%;
     flex: 0 0 81.25%;
+    max-inline-size: 81.25%;
   }
   .cds--col-max-14 {
     display: block;
-    max-width: 87.5%;
     flex: 0 0 87.5%;
+    max-inline-size: 87.5%;
   }
   .cds--col-max-15 {
     display: block;
-    max-width: 93.75%;
     flex: 0 0 93.75%;
+    max-inline-size: 93.75%;
   }
   .cds--col-max-16 {
     display: block;
-    max-width: 100%;
     flex: 0 0 100%;
+    max-inline-size: 100%;
   }
   .cds--offset-max-0 {
-    margin-left: 0;
+    margin-inline-start: 0;
   }
   .cds--offset-max-1 {
-    margin-left: 6.25%;
+    margin-inline-start: 6.25%;
   }
   .cds--offset-max-2 {
-    margin-left: 12.5%;
+    margin-inline-start: 12.5%;
   }
   .cds--offset-max-3 {
-    margin-left: 18.75%;
+    margin-inline-start: 18.75%;
   }
   .cds--offset-max-4 {
-    margin-left: 25%;
+    margin-inline-start: 25%;
   }
   .cds--offset-max-5 {
-    margin-left: 31.25%;
+    margin-inline-start: 31.25%;
   }
   .cds--offset-max-6 {
-    margin-left: 37.5%;
+    margin-inline-start: 37.5%;
   }
   .cds--offset-max-7 {
-    margin-left: 43.75%;
+    margin-inline-start: 43.75%;
   }
   .cds--offset-max-8 {
-    margin-left: 50%;
+    margin-inline-start: 50%;
   }
   .cds--offset-max-9 {
-    margin-left: 56.25%;
+    margin-inline-start: 56.25%;
   }
   .cds--offset-max-10 {
-    margin-left: 62.5%;
+    margin-inline-start: 62.5%;
   }
   .cds--offset-max-11 {
-    margin-left: 68.75%;
+    margin-inline-start: 68.75%;
   }
   .cds--offset-max-12 {
-    margin-left: 75%;
+    margin-inline-start: 75%;
   }
   .cds--offset-max-13 {
-    margin-left: 81.25%;
+    margin-inline-start: 81.25%;
   }
   .cds--offset-max-14 {
-    margin-left: 87.5%;
+    margin-inline-start: 87.5%;
   }
   .cds--offset-max-15 {
-    margin-left: 93.75%;
+    margin-inline-start: 93.75%;
   }
 }
 .cds--no-gutter,
 .cds--row.cds--no-gutter [class*=cds--col] {
-  padding-right: 0;
-  padding-left: 0;
+  padding-inline: 0;
 }
 
 .cds--no-gutter--start,
 .cds--row.cds--no-gutter--start [class*=cds--col] {
-  padding-left: 0;
+  padding-inline-start: 0;
 }
 
 .cds--no-gutter--end,
 .cds--row.cds--no-gutter--end [class*=cds--col] {
-  padding-right: 0;
+  padding-inline-end: 0;
 }
 
 .cds--hang--start {
-  padding-left: 1rem;
+  padding-inline-start: 1rem;
 }
 
 .cds--hang--end {
-  padding-right: 1rem;
+  padding-inline-end: 1rem;
 }
 
 .flatpickr-calendar {