@fundamental-styles/common-css 0.0.1-rc.0 → 0.24.0-rc.102

package/dist/common-css.css

@@ -0,0 +1,1395 @@
+/*!
+ * Fundamental Library Styles v0.24.0-rc.102
+ * Copyright (c) 2022 SAP SE or an SAP affiliate company.
+ * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)
+ */
+/* stylelint-disable */
+/* Fully expanded pseudo element. Requires parent to have specified position */
+/* stylelint-disable */
+/* stylelint-enable */
+/* stylelint-disable */
+/* stylelint-enable */
+/* stylelint-disable */
+/* stylelint-enable */
+/* Fully expanded pseudo element. Requires parent to have specified position */
+/* Fully expanded pseudo element. Requires parent to have specified position */
+/* stylelint-enable */
+.sap-container,
+.sap-row,
+.sap-col {
+  font-size: var(--sapFontSize);
+  line-height: var(--sapContent_LineHeight);
+  color: var(--sapTextColor);
+  font-family: var(--sapFontFamily);
+  font-weight: normal;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  border: 0;
+}
+.sap-container::before, .sap-container::after,
+.sap-row::before,
+.sap-row::after,
+.sap-col::before,
+.sap-col::after {
+  -webkit-box-sizing: inherit;
+          box-sizing: inherit;
+  font-size: inherit;
+}
+.sap-container {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+  -webkit-box-flex: 0;
+      -ms-flex: 0 0 100%;
+          flex: 0 0 100%;
+  position: relative;
+  padding: 0 0.25rem;
+}
+.sap-container .sap-row {
+  margin-left: -0.25rem;
+  margin-right: -0.25rem;
+  min-width: calc(100% + 0.25rem * 2);
+}
+.sap-container > .sap-row > .sap-col {
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+}
+.sap-container.sap-container--no-horizontal-gap .sap-row, .sap-container.sap-container--no-gap .sap-row {
+  margin-left: 0;
+  margin-right: 0;
+}
+.sap-container.sap-container--no-horizontal-gap .sap-row .sap-col, .sap-container.sap-container--no-gap .sap-row .sap-col {
+  padding-left: 0;
+  padding-right: 0;
+}
+.sap-container.sap-container--no-vertical-gap > .sap-row > .sap-col, .sap-container.sap-container--no-gap > .sap-row > .sap-col {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+[dir=rtl] .sap-container, .sap-container[dir=rtl] {
+  direction: rtl;
+}
+.sap-row {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+  -webkit-box-flex: 0;
+      -ms-flex: 0 0 100%;
+          flex: 0 0 100%;
+  position: relative;
+  min-width: 100%;
+}
+.sap-col {
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+  min-width: 100%;
+  max-width: 100%;
+}
+.sap-col--0 {
+  min-width: 0%;
+  max-width: 0%;
+}
+.sap-col--offset-0 {
+  margin-left: 0%;
+}
+[dir=rtl] .sap-col--offset-0, .sap-col--offset-0[dir=rtl] {
+  margin-right: 0%;
+  margin-left: 0;
+}
+.sap-col--offset-after-0 {
+  margin-right: 0%;
+}
+[dir=rtl] .sap-col--offset-after-0, .sap-col--offset-after-0[dir=rtl] {
+  margin-right: 0;
+  margin-left: 0%;
+}
+.sap-col--1 {
+  min-width: 8.3333333333%;
+  max-width: 8.3333333333%;
+}
+.sap-col--offset-1 {
+  margin-left: 8.3333333333%;
+}
+[dir=rtl] .sap-col--offset-1, .sap-col--offset-1[dir=rtl] {
+  margin-right: 8.3333333333%;
+  margin-left: 0;
+}
+.sap-col--offset-after-1 {
+  margin-right: 8.3333333333%;
+}
+[dir=rtl] .sap-col--offset-after-1, .sap-col--offset-after-1[dir=rtl] {
+  margin-right: 0;
+  margin-left: 8.3333333333%;
+}
+.sap-col--2 {
+  min-width: 16.6666666667%;
+  max-width: 16.6666666667%;
+}
+.sap-col--offset-2 {
+  margin-left: 16.6666666667%;
+}
+[dir=rtl] .sap-col--offset-2, .sap-col--offset-2[dir=rtl] {
+  margin-right: 16.6666666667%;
+  margin-left: 0;
+}
+.sap-col--offset-after-2 {
+  margin-right: 16.6666666667%;
+}
+[dir=rtl] .sap-col--offset-after-2, .sap-col--offset-after-2[dir=rtl] {
+  margin-right: 0;
+  margin-left: 16.6666666667%;
+}
+.sap-col--3 {
+  min-width: 25%;
+  max-width: 25%;
+}
+.sap-col--offset-3 {
+  margin-left: 25%;
+}
+[dir=rtl] .sap-col--offset-3, .sap-col--offset-3[dir=rtl] {
+  margin-right: 25%;
+  margin-left: 0;
+}
+.sap-col--offset-after-3 {
+  margin-right: 25%;
+}
+[dir=rtl] .sap-col--offset-after-3, .sap-col--offset-after-3[dir=rtl] {
+  margin-right: 0;
+  margin-left: 25%;
+}
+.sap-col--4 {
+  min-width: 33.3333333333%;
+  max-width: 33.3333333333%;
+}
+.sap-col--offset-4 {
+  margin-left: 33.3333333333%;
+}
+[dir=rtl] .sap-col--offset-4, .sap-col--offset-4[dir=rtl] {
+  margin-right: 33.3333333333%;
+  margin-left: 0;
+}
+.sap-col--offset-after-4 {
+  margin-right: 33.3333333333%;
+}
+[dir=rtl] .sap-col--offset-after-4, .sap-col--offset-after-4[dir=rtl] {
+  margin-right: 0;
+  margin-left: 33.3333333333%;
+}
+.sap-col--5 {
+  min-width: 41.6666666667%;
+  max-width: 41.6666666667%;
+}
+.sap-col--offset-5 {
+  margin-left: 41.6666666667%;
+}
+[dir=rtl] .sap-col--offset-5, .sap-col--offset-5[dir=rtl] {
+  margin-right: 41.6666666667%;
+  margin-left: 0;
+}
+.sap-col--offset-after-5 {
+  margin-right: 41.6666666667%;
+}
+[dir=rtl] .sap-col--offset-after-5, .sap-col--offset-after-5[dir=rtl] {
+  margin-right: 0;
+  margin-left: 41.6666666667%;
+}
+.sap-col--6 {
+  min-width: 50%;
+  max-width: 50%;
+}
+.sap-col--offset-6 {
+  margin-left: 50%;
+}
+[dir=rtl] .sap-col--offset-6, .sap-col--offset-6[dir=rtl] {
+  margin-right: 50%;
+  margin-left: 0;
+}
+.sap-col--offset-after-6 {
+  margin-right: 50%;
+}
+[dir=rtl] .sap-col--offset-after-6, .sap-col--offset-after-6[dir=rtl] {
+  margin-right: 0;
+  margin-left: 50%;
+}
+.sap-col--7 {
+  min-width: 58.3333333333%;
+  max-width: 58.3333333333%;
+}
+.sap-col--offset-7 {
+  margin-left: 58.3333333333%;
+}
+[dir=rtl] .sap-col--offset-7, .sap-col--offset-7[dir=rtl] {
+  margin-right: 58.3333333333%;
+  margin-left: 0;
+}
+.sap-col--offset-after-7 {
+  margin-right: 58.3333333333%;
+}
+[dir=rtl] .sap-col--offset-after-7, .sap-col--offset-after-7[dir=rtl] {
+  margin-right: 0;
+  margin-left: 58.3333333333%;
+}
+.sap-col--8 {
+  min-width: 66.6666666667%;
+  max-width: 66.6666666667%;
+}
+.sap-col--offset-8 {
+  margin-left: 66.6666666667%;
+}
+[dir=rtl] .sap-col--offset-8, .sap-col--offset-8[dir=rtl] {
+  margin-right: 66.6666666667%;
+  margin-left: 0;
+}
+.sap-col--offset-after-8 {
+  margin-right: 66.6666666667%;
+}
+[dir=rtl] .sap-col--offset-after-8, .sap-col--offset-after-8[dir=rtl] {
+  margin-right: 0;
+  margin-left: 66.6666666667%;
+}
+.sap-col--9 {
+  min-width: 75%;
+  max-width: 75%;
+}
+.sap-col--offset-9 {
+  margin-left: 75%;
+}
+[dir=rtl] .sap-col--offset-9, .sap-col--offset-9[dir=rtl] {
+  margin-right: 75%;
+  margin-left: 0;
+}
+.sap-col--offset-after-9 {
+  margin-right: 75%;
+}
+[dir=rtl] .sap-col--offset-after-9, .sap-col--offset-after-9[dir=rtl] {
+  margin-right: 0;
+  margin-left: 75%;
+}
+.sap-col--10 {
+  min-width: 83.3333333333%;
+  max-width: 83.3333333333%;
+}
+.sap-col--offset-10 {
+  margin-left: 83.3333333333%;
+}
+[dir=rtl] .sap-col--offset-10, .sap-col--offset-10[dir=rtl] {
+  margin-right: 83.3333333333%;
+  margin-left: 0;
+}
+.sap-col--offset-after-10 {
+  margin-right: 83.3333333333%;
+}
+[dir=rtl] .sap-col--offset-after-10, .sap-col--offset-after-10[dir=rtl] {
+  margin-right: 0;
+  margin-left: 83.3333333333%;
+}
+.sap-col--11 {
+  min-width: 91.6666666667%;
+  max-width: 91.6666666667%;
+}
+.sap-col--offset-11 {
+  margin-left: 91.6666666667%;
+}
+[dir=rtl] .sap-col--offset-11, .sap-col--offset-11[dir=rtl] {
+  margin-right: 91.6666666667%;
+  margin-left: 0;
+}
+.sap-col--offset-after-11 {
+  margin-right: 91.6666666667%;
+}
+[dir=rtl] .sap-col--offset-after-11, .sap-col--offset-after-11[dir=rtl] {
+  margin-right: 0;
+  margin-left: 91.6666666667%;
+}
+.sap-col--12 {
+  min-width: 100%;
+  max-width: 100%;
+}
+.sap-col--offset-12 {
+  margin-left: 100%;
+}
+[dir=rtl] .sap-col--offset-12, .sap-col--offset-12[dir=rtl] {
+  margin-right: 100%;
+  margin-left: 0;
+}
+.sap-col--offset-after-12 {
+  margin-right: 100%;
+}
+[dir=rtl] .sap-col--offset-after-12, .sap-col--offset-after-12[dir=rtl] {
+  margin-right: 0;
+  margin-left: 100%;
+}
+.sap-col--full {
+  min-width: 8.3333333333%;
+  max-width: none;
+  -webkit-box-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+}
+.sap-col--wrap {
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+}
+@media (min-width: 600px) {
+  .sap-container {
+    padding: 0 0.5rem;
+  }
+  .sap-container .sap-row {
+    margin-left: -0.5rem;
+    margin-right: -0.5rem;
+    min-width: calc(100% + 0.5rem * 2);
+  }
+  .sap-container > .sap-row > .sap-col {
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+  }
+
+  .sap-col {
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+  }
+  .sap-col-md--0 {
+    min-width: 0%;
+    max-width: 0%;
+  }
+
+  .sap-col-md--offset-0 {
+    margin-left: 0%;
+  }
+  [dir=rtl] .sap-col-md--offset-0, .sap-col-md--offset-0[dir=rtl] {
+    margin-right: 0%;
+    margin-left: 0;
+  }
+
+  .sap-col-md--offset-after-0 {
+    margin-right: 0%;
+  }
+  [dir=rtl] .sap-col-md--offset-after-0, .sap-col-md--offset-after-0[dir=rtl] {
+    margin-right: 0;
+    margin-left: 0%;
+  }
+
+  .sap-col-md--1 {
+    min-width: 8.3333333333%;
+    max-width: 8.3333333333%;
+  }
+
+  .sap-col-md--offset-1 {
+    margin-left: 8.3333333333%;
+  }
+  [dir=rtl] .sap-col-md--offset-1, .sap-col-md--offset-1[dir=rtl] {
+    margin-right: 8.3333333333%;
+    margin-left: 0;
+  }
+
+  .sap-col-md--offset-after-1 {
+    margin-right: 8.3333333333%;
+  }
+  [dir=rtl] .sap-col-md--offset-after-1, .sap-col-md--offset-after-1[dir=rtl] {
+    margin-right: 0;
+    margin-left: 8.3333333333%;
+  }
+
+  .sap-col-md--2 {
+    min-width: 16.6666666667%;
+    max-width: 16.6666666667%;
+  }
+
+  .sap-col-md--offset-2 {
+    margin-left: 16.6666666667%;
+  }
+  [dir=rtl] .sap-col-md--offset-2, .sap-col-md--offset-2[dir=rtl] {
+    margin-right: 16.6666666667%;
+    margin-left: 0;
+  }
+
+  .sap-col-md--offset-after-2 {
+    margin-right: 16.6666666667%;
+  }
+  [dir=rtl] .sap-col-md--offset-after-2, .sap-col-md--offset-after-2[dir=rtl] {
+    margin-right: 0;
+    margin-left: 16.6666666667%;
+  }
+
+  .sap-col-md--3 {
+    min-width: 25%;
+    max-width: 25%;
+  }
+
+  .sap-col-md--offset-3 {
+    margin-left: 25%;
+  }
+  [dir=rtl] .sap-col-md--offset-3, .sap-col-md--offset-3[dir=rtl] {
+    margin-right: 25%;
+    margin-left: 0;
+  }
+
+  .sap-col-md--offset-after-3 {
+    margin-right: 25%;
+  }
+  [dir=rtl] .sap-col-md--offset-after-3, .sap-col-md--offset-after-3[dir=rtl] {
+    margin-right: 0;
+    margin-left: 25%;
+  }
+
+  .sap-col-md--4 {
+    min-width: 33.3333333333%;
+    max-width: 33.3333333333%;
+  }
+
+  .sap-col-md--offset-4 {
+    margin-left: 33.3333333333%;
+  }
+  [dir=rtl] .sap-col-md--offset-4, .sap-col-md--offset-4[dir=rtl] {
+    margin-right: 33.3333333333%;
+    margin-left: 0;
+  }
+
+  .sap-col-md--offset-after-4 {
+    margin-right: 33.3333333333%;
+  }
+  [dir=rtl] .sap-col-md--offset-after-4, .sap-col-md--offset-after-4[dir=rtl] {
+    margin-right: 0;
+    margin-left: 33.3333333333%;
+  }
+
+  .sap-col-md--5 {
+    min-width: 41.6666666667%;
+    max-width: 41.6666666667%;
+  }
+
+  .sap-col-md--offset-5 {
+    margin-left: 41.6666666667%;
+  }
+  [dir=rtl] .sap-col-md--offset-5, .sap-col-md--offset-5[dir=rtl] {
+    margin-right: 41.6666666667%;
+    margin-left: 0;
+  }
+
+  .sap-col-md--offset-after-5 {
+    margin-right: 41.6666666667%;
+  }
+  [dir=rtl] .sap-col-md--offset-after-5, .sap-col-md--offset-after-5[dir=rtl] {
+    margin-right: 0;
+    margin-left: 41.6666666667%;
+  }
+
+  .sap-col-md--6 {
+    min-width: 50%;
+    max-width: 50%;
+  }
+
+  .sap-col-md--offset-6 {
+    margin-left: 50%;
+  }
+  [dir=rtl] .sap-col-md--offset-6, .sap-col-md--offset-6[dir=rtl] {
+    margin-right: 50%;
+    margin-left: 0;
+  }
+
+  .sap-col-md--offset-after-6 {
+    margin-right: 50%;
+  }
+  [dir=rtl] .sap-col-md--offset-after-6, .sap-col-md--offset-after-6[dir=rtl] {
+    margin-right: 0;
+    margin-left: 50%;
+  }
+
+  .sap-col-md--7 {
+    min-width: 58.3333333333%;
+    max-width: 58.3333333333%;
+  }
+
+  .sap-col-md--offset-7 {
+    margin-left: 58.3333333333%;
+  }
+  [dir=rtl] .sap-col-md--offset-7, .sap-col-md--offset-7[dir=rtl] {
+    margin-right: 58.3333333333%;
+    margin-left: 0;
+  }
+
+  .sap-col-md--offset-after-7 {
+    margin-right: 58.3333333333%;
+  }
+  [dir=rtl] .sap-col-md--offset-after-7, .sap-col-md--offset-after-7[dir=rtl] {
+    margin-right: 0;
+    margin-left: 58.3333333333%;
+  }
+
+  .sap-col-md--8 {
+    min-width: 66.6666666667%;
+    max-width: 66.6666666667%;
+  }
+
+  .sap-col-md--offset-8 {
+    margin-left: 66.6666666667%;
+  }
+  [dir=rtl] .sap-col-md--offset-8, .sap-col-md--offset-8[dir=rtl] {
+    margin-right: 66.6666666667%;
+    margin-left: 0;
+  }
+
+  .sap-col-md--offset-after-8 {
+    margin-right: 66.6666666667%;
+  }
+  [dir=rtl] .sap-col-md--offset-after-8, .sap-col-md--offset-after-8[dir=rtl] {
+    margin-right: 0;
+    margin-left: 66.6666666667%;
+  }
+
+  .sap-col-md--9 {
+    min-width: 75%;
+    max-width: 75%;
+  }
+
+  .sap-col-md--offset-9 {
+    margin-left: 75%;
+  }
+  [dir=rtl] .sap-col-md--offset-9, .sap-col-md--offset-9[dir=rtl] {
+    margin-right: 75%;
+    margin-left: 0;
+  }
+
+  .sap-col-md--offset-after-9 {
+    margin-right: 75%;
+  }
+  [dir=rtl] .sap-col-md--offset-after-9, .sap-col-md--offset-after-9[dir=rtl] {
+    margin-right: 0;
+    margin-left: 75%;
+  }
+
+  .sap-col-md--10 {
+    min-width: 83.3333333333%;
+    max-width: 83.3333333333%;
+  }
+
+  .sap-col-md--offset-10 {
+    margin-left: 83.3333333333%;
+  }
+  [dir=rtl] .sap-col-md--offset-10, .sap-col-md--offset-10[dir=rtl] {
+    margin-right: 83.3333333333%;
+    margin-left: 0;
+  }
+
+  .sap-col-md--offset-after-10 {
+    margin-right: 83.3333333333%;
+  }
+  [dir=rtl] .sap-col-md--offset-after-10, .sap-col-md--offset-after-10[dir=rtl] {
+    margin-right: 0;
+    margin-left: 83.3333333333%;
+  }
+
+  .sap-col-md--11 {
+    min-width: 91.6666666667%;
+    max-width: 91.6666666667%;
+  }
+
+  .sap-col-md--offset-11 {
+    margin-left: 91.6666666667%;
+  }
+  [dir=rtl] .sap-col-md--offset-11, .sap-col-md--offset-11[dir=rtl] {
+    margin-right: 91.6666666667%;
+    margin-left: 0;
+  }
+
+  .sap-col-md--offset-after-11 {
+    margin-right: 91.6666666667%;
+  }
+  [dir=rtl] .sap-col-md--offset-after-11, .sap-col-md--offset-after-11[dir=rtl] {
+    margin-right: 0;
+    margin-left: 91.6666666667%;
+  }
+
+  .sap-col-md--12 {
+    min-width: 100%;
+    max-width: 100%;
+  }
+
+  .sap-col-md--offset-12 {
+    margin-left: 100%;
+  }
+  [dir=rtl] .sap-col-md--offset-12, .sap-col-md--offset-12[dir=rtl] {
+    margin-right: 100%;
+    margin-left: 0;
+  }
+
+  .sap-col-md--offset-after-12 {
+    margin-right: 100%;
+  }
+  [dir=rtl] .sap-col-md--offset-after-12, .sap-col-md--offset-after-12[dir=rtl] {
+    margin-right: 0;
+    margin-left: 100%;
+  }
+}
+@media (min-width: 1024px) {
+  .sap-col-lg--0 {
+    min-width: 0%;
+    max-width: 0%;
+  }
+
+  .sap-col-lg--offset-0 {
+    margin-left: 0%;
+  }
+  [dir=rtl] .sap-col-lg--offset-0, .sap-col-lg--offset-0[dir=rtl] {
+    margin-right: 0%;
+    margin-left: 0;
+  }
+
+  .sap-col-lg--offset-after-0 {
+    margin-right: 0%;
+  }
+  [dir=rtl] .sap-col-lg--offset-after-0, .sap-col-lg--offset-after-0[dir=rtl] {
+    margin-right: 0;
+    margin-left: 0%;
+  }
+
+  .sap-col-lg--1 {
+    min-width: 8.3333333333%;
+    max-width: 8.3333333333%;
+  }
+
+  .sap-col-lg--offset-1 {
+    margin-left: 8.3333333333%;
+  }
+  [dir=rtl] .sap-col-lg--offset-1, .sap-col-lg--offset-1[dir=rtl] {
+    margin-right: 8.3333333333%;
+    margin-left: 0;
+  }
+
+  .sap-col-lg--offset-after-1 {
+    margin-right: 8.3333333333%;
+  }
+  [dir=rtl] .sap-col-lg--offset-after-1, .sap-col-lg--offset-after-1[dir=rtl] {
+    margin-right: 0;
+    margin-left: 8.3333333333%;
+  }
+
+  .sap-col-lg--2 {
+    min-width: 16.6666666667%;
+    max-width: 16.6666666667%;
+  }
+
+  .sap-col-lg--offset-2 {
+    margin-left: 16.6666666667%;
+  }
+  [dir=rtl] .sap-col-lg--offset-2, .sap-col-lg--offset-2[dir=rtl] {
+    margin-right: 16.6666666667%;
+    margin-left: 0;
+  }
+
+  .sap-col-lg--offset-after-2 {
+    margin-right: 16.6666666667%;
+  }
+  [dir=rtl] .sap-col-lg--offset-after-2, .sap-col-lg--offset-after-2[dir=rtl] {
+    margin-right: 0;
+    margin-left: 16.6666666667%;
+  }
+
+  .sap-col-lg--3 {
+    min-width: 25%;
+    max-width: 25%;
+  }
+
+  .sap-col-lg--offset-3 {
+    margin-left: 25%;
+  }
+  [dir=rtl] .sap-col-lg--offset-3, .sap-col-lg--offset-3[dir=rtl] {
+    margin-right: 25%;
+    margin-left: 0;
+  }
+
+  .sap-col-lg--offset-after-3 {
+    margin-right: 25%;
+  }
+  [dir=rtl] .sap-col-lg--offset-after-3, .sap-col-lg--offset-after-3[dir=rtl] {
+    margin-right: 0;
+    margin-left: 25%;
+  }
+
+  .sap-col-lg--4 {
+    min-width: 33.3333333333%;
+    max-width: 33.3333333333%;
+  }
+
+  .sap-col-lg--offset-4 {
+    margin-left: 33.3333333333%;
+  }
+  [dir=rtl] .sap-col-lg--offset-4, .sap-col-lg--offset-4[dir=rtl] {
+    margin-right: 33.3333333333%;
+    margin-left: 0;
+  }
+
+  .sap-col-lg--offset-after-4 {
+    margin-right: 33.3333333333%;
+  }
+  [dir=rtl] .sap-col-lg--offset-after-4, .sap-col-lg--offset-after-4[dir=rtl] {
+    margin-right: 0;
+    margin-left: 33.3333333333%;
+  }
+
+  .sap-col-lg--5 {
+    min-width: 41.6666666667%;
+    max-width: 41.6666666667%;
+  }
+
+  .sap-col-lg--offset-5 {
+    margin-left: 41.6666666667%;
+  }
+  [dir=rtl] .sap-col-lg--offset-5, .sap-col-lg--offset-5[dir=rtl] {
+    margin-right: 41.6666666667%;
+    margin-left: 0;
+  }
+
+  .sap-col-lg--offset-after-5 {
+    margin-right: 41.6666666667%;
+  }
+  [dir=rtl] .sap-col-lg--offset-after-5, .sap-col-lg--offset-after-5[dir=rtl] {
+    margin-right: 0;
+    margin-left: 41.6666666667%;
+  }
+
+  .sap-col-lg--6 {
+    min-width: 50%;
+    max-width: 50%;
+  }
+
+  .sap-col-lg--offset-6 {
+    margin-left: 50%;
+  }
+  [dir=rtl] .sap-col-lg--offset-6, .sap-col-lg--offset-6[dir=rtl] {
+    margin-right: 50%;
+    margin-left: 0;
+  }
+
+  .sap-col-lg--offset-after-6 {
+    margin-right: 50%;
+  }
+  [dir=rtl] .sap-col-lg--offset-after-6, .sap-col-lg--offset-after-6[dir=rtl] {
+    margin-right: 0;
+    margin-left: 50%;
+  }
+
+  .sap-col-lg--7 {
+    min-width: 58.3333333333%;
+    max-width: 58.3333333333%;
+  }
+
+  .sap-col-lg--offset-7 {
+    margin-left: 58.3333333333%;
+  }
+  [dir=rtl] .sap-col-lg--offset-7, .sap-col-lg--offset-7[dir=rtl] {
+    margin-right: 58.3333333333%;
+    margin-left: 0;
+  }
+
+  .sap-col-lg--offset-after-7 {
+    margin-right: 58.3333333333%;
+  }
+  [dir=rtl] .sap-col-lg--offset-after-7, .sap-col-lg--offset-after-7[dir=rtl] {
+    margin-right: 0;
+    margin-left: 58.3333333333%;
+  }
+
+  .sap-col-lg--8 {
+    min-width: 66.6666666667%;
+    max-width: 66.6666666667%;
+  }
+
+  .sap-col-lg--offset-8 {
+    margin-left: 66.6666666667%;
+  }
+  [dir=rtl] .sap-col-lg--offset-8, .sap-col-lg--offset-8[dir=rtl] {
+    margin-right: 66.6666666667%;
+    margin-left: 0;
+  }
+
+  .sap-col-lg--offset-after-8 {
+    margin-right: 66.6666666667%;
+  }
+  [dir=rtl] .sap-col-lg--offset-after-8, .sap-col-lg--offset-after-8[dir=rtl] {
+    margin-right: 0;
+    margin-left: 66.6666666667%;
+  }
+
+  .sap-col-lg--9 {
+    min-width: 75%;
+    max-width: 75%;
+  }
+
+  .sap-col-lg--offset-9 {
+    margin-left: 75%;
+  }
+  [dir=rtl] .sap-col-lg--offset-9, .sap-col-lg--offset-9[dir=rtl] {
+    margin-right: 75%;
+    margin-left: 0;
+  }
+
+  .sap-col-lg--offset-after-9 {
+    margin-right: 75%;
+  }
+  [dir=rtl] .sap-col-lg--offset-after-9, .sap-col-lg--offset-after-9[dir=rtl] {
+    margin-right: 0;
+    margin-left: 75%;
+  }
+
+  .sap-col-lg--10 {
+    min-width: 83.3333333333%;
+    max-width: 83.3333333333%;
+  }
+
+  .sap-col-lg--offset-10 {
+    margin-left: 83.3333333333%;
+  }
+  [dir=rtl] .sap-col-lg--offset-10, .sap-col-lg--offset-10[dir=rtl] {
+    margin-right: 83.3333333333%;
+    margin-left: 0;
+  }
+
+  .sap-col-lg--offset-after-10 {
+    margin-right: 83.3333333333%;
+  }
+  [dir=rtl] .sap-col-lg--offset-after-10, .sap-col-lg--offset-after-10[dir=rtl] {
+    margin-right: 0;
+    margin-left: 83.3333333333%;
+  }
+
+  .sap-col-lg--11 {
+    min-width: 91.6666666667%;
+    max-width: 91.6666666667%;
+  }
+
+  .sap-col-lg--offset-11 {
+    margin-left: 91.6666666667%;
+  }
+  [dir=rtl] .sap-col-lg--offset-11, .sap-col-lg--offset-11[dir=rtl] {
+    margin-right: 91.6666666667%;
+    margin-left: 0;
+  }
+
+  .sap-col-lg--offset-after-11 {
+    margin-right: 91.6666666667%;
+  }
+  [dir=rtl] .sap-col-lg--offset-after-11, .sap-col-lg--offset-after-11[dir=rtl] {
+    margin-right: 0;
+    margin-left: 91.6666666667%;
+  }
+
+  .sap-col-lg--12 {
+    min-width: 100%;
+    max-width: 100%;
+  }
+
+  .sap-col-lg--offset-12 {
+    margin-left: 100%;
+  }
+  [dir=rtl] .sap-col-lg--offset-12, .sap-col-lg--offset-12[dir=rtl] {
+    margin-right: 100%;
+    margin-left: 0;
+  }
+
+  .sap-col-lg--offset-after-12 {
+    margin-right: 100%;
+  }
+  [dir=rtl] .sap-col-lg--offset-after-12, .sap-col-lg--offset-after-12[dir=rtl] {
+    margin-right: 0;
+    margin-left: 100%;
+  }
+}
+@media (min-width: 1440px) {
+  .sap-col-xl--0 {
+    min-width: 0%;
+    max-width: 0%;
+  }
+
+  .sap-col-xl--offset-0 {
+    margin-left: 0%;
+  }
+  [dir=rtl] .sap-col-xl--offset-0, .sap-col-xl--offset-0[dir=rtl] {
+    margin-right: 0%;
+    margin-left: 0;
+  }
+
+  .sap-col-xl--offset-after-0 {
+    margin-right: 0%;
+  }
+  [dir=rtl] .sap-col-xl--offset-after-0, .sap-col-xl--offset-after-0[dir=rtl] {
+    margin-right: 0;
+    margin-left: 0%;
+  }
+
+  .sap-col-xl--1 {
+    min-width: 8.3333333333%;
+    max-width: 8.3333333333%;
+  }
+
+  .sap-col-xl--offset-1 {
+    margin-left: 8.3333333333%;
+  }
+  [dir=rtl] .sap-col-xl--offset-1, .sap-col-xl--offset-1[dir=rtl] {
+    margin-right: 8.3333333333%;
+    margin-left: 0;
+  }
+
+  .sap-col-xl--offset-after-1 {
+    margin-right: 8.3333333333%;
+  }
+  [dir=rtl] .sap-col-xl--offset-after-1, .sap-col-xl--offset-after-1[dir=rtl] {
+    margin-right: 0;
+    margin-left: 8.3333333333%;
+  }
+
+  .sap-col-xl--2 {
+    min-width: 16.6666666667%;
+    max-width: 16.6666666667%;
+  }
+
+  .sap-col-xl--offset-2 {
+    margin-left: 16.6666666667%;
+  }
+  [dir=rtl] .sap-col-xl--offset-2, .sap-col-xl--offset-2[dir=rtl] {
+    margin-right: 16.6666666667%;
+    margin-left: 0;
+  }
+
+  .sap-col-xl--offset-after-2 {
+    margin-right: 16.6666666667%;
+  }
+  [dir=rtl] .sap-col-xl--offset-after-2, .sap-col-xl--offset-after-2[dir=rtl] {
+    margin-right: 0;
+    margin-left: 16.6666666667%;
+  }
+
+  .sap-col-xl--3 {
+    min-width: 25%;
+    max-width: 25%;
+  }
+
+  .sap-col-xl--offset-3 {
+    margin-left: 25%;
+  }
+  [dir=rtl] .sap-col-xl--offset-3, .sap-col-xl--offset-3[dir=rtl] {
+    margin-right: 25%;
+    margin-left: 0;
+  }
+
+  .sap-col-xl--offset-after-3 {
+    margin-right: 25%;
+  }
+  [dir=rtl] .sap-col-xl--offset-after-3, .sap-col-xl--offset-after-3[dir=rtl] {
+    margin-right: 0;
+    margin-left: 25%;
+  }
+
+  .sap-col-xl--4 {
+    min-width: 33.3333333333%;
+    max-width: 33.3333333333%;
+  }
+
+  .sap-col-xl--offset-4 {
+    margin-left: 33.3333333333%;
+  }
+  [dir=rtl] .sap-col-xl--offset-4, .sap-col-xl--offset-4[dir=rtl] {
+    margin-right: 33.3333333333%;
+    margin-left: 0;
+  }
+
+  .sap-col-xl--offset-after-4 {
+    margin-right: 33.3333333333%;
+  }
+  [dir=rtl] .sap-col-xl--offset-after-4, .sap-col-xl--offset-after-4[dir=rtl] {
+    margin-right: 0;
+    margin-left: 33.3333333333%;
+  }
+
+  .sap-col-xl--5 {
+    min-width: 41.6666666667%;
+    max-width: 41.6666666667%;
+  }
+
+  .sap-col-xl--offset-5 {
+    margin-left: 41.6666666667%;
+  }
+  [dir=rtl] .sap-col-xl--offset-5, .sap-col-xl--offset-5[dir=rtl] {
+    margin-right: 41.6666666667%;
+    margin-left: 0;
+  }
+
+  .sap-col-xl--offset-after-5 {
+    margin-right: 41.6666666667%;
+  }
+  [dir=rtl] .sap-col-xl--offset-after-5, .sap-col-xl--offset-after-5[dir=rtl] {
+    margin-right: 0;
+    margin-left: 41.6666666667%;
+  }
+
+  .sap-col-xl--6 {
+    min-width: 50%;
+    max-width: 50%;
+  }
+
+  .sap-col-xl--offset-6 {
+    margin-left: 50%;
+  }
+  [dir=rtl] .sap-col-xl--offset-6, .sap-col-xl--offset-6[dir=rtl] {
+    margin-right: 50%;
+    margin-left: 0;
+  }
+
+  .sap-col-xl--offset-after-6 {
+    margin-right: 50%;
+  }
+  [dir=rtl] .sap-col-xl--offset-after-6, .sap-col-xl--offset-after-6[dir=rtl] {
+    margin-right: 0;
+    margin-left: 50%;
+  }
+
+  .sap-col-xl--7 {
+    min-width: 58.3333333333%;
+    max-width: 58.3333333333%;
+  }
+
+  .sap-col-xl--offset-7 {
+    margin-left: 58.3333333333%;
+  }
+  [dir=rtl] .sap-col-xl--offset-7, .sap-col-xl--offset-7[dir=rtl] {
+    margin-right: 58.3333333333%;
+    margin-left: 0;
+  }
+
+  .sap-col-xl--offset-after-7 {
+    margin-right: 58.3333333333%;
+  }
+  [dir=rtl] .sap-col-xl--offset-after-7, .sap-col-xl--offset-after-7[dir=rtl] {
+    margin-right: 0;
+    margin-left: 58.3333333333%;
+  }
+
+  .sap-col-xl--8 {
+    min-width: 66.6666666667%;
+    max-width: 66.6666666667%;
+  }
+
+  .sap-col-xl--offset-8 {
+    margin-left: 66.6666666667%;
+  }
+  [dir=rtl] .sap-col-xl--offset-8, .sap-col-xl--offset-8[dir=rtl] {
+    margin-right: 66.6666666667%;
+    margin-left: 0;
+  }
+
+  .sap-col-xl--offset-after-8 {
+    margin-right: 66.6666666667%;
+  }
+  [dir=rtl] .sap-col-xl--offset-after-8, .sap-col-xl--offset-after-8[dir=rtl] {
+    margin-right: 0;
+    margin-left: 66.6666666667%;
+  }
+
+  .sap-col-xl--9 {
+    min-width: 75%;
+    max-width: 75%;
+  }
+
+  .sap-col-xl--offset-9 {
+    margin-left: 75%;
+  }
+  [dir=rtl] .sap-col-xl--offset-9, .sap-col-xl--offset-9[dir=rtl] {
+    margin-right: 75%;
+    margin-left: 0;
+  }
+
+  .sap-col-xl--offset-after-9 {
+    margin-right: 75%;
+  }
+  [dir=rtl] .sap-col-xl--offset-after-9, .sap-col-xl--offset-after-9[dir=rtl] {
+    margin-right: 0;
+    margin-left: 75%;
+  }
+
+  .sap-col-xl--10 {
+    min-width: 83.3333333333%;
+    max-width: 83.3333333333%;
+  }
+
+  .sap-col-xl--offset-10 {
+    margin-left: 83.3333333333%;
+  }
+  [dir=rtl] .sap-col-xl--offset-10, .sap-col-xl--offset-10[dir=rtl] {
+    margin-right: 83.3333333333%;
+    margin-left: 0;
+  }
+
+  .sap-col-xl--offset-after-10 {
+    margin-right: 83.3333333333%;
+  }
+  [dir=rtl] .sap-col-xl--offset-after-10, .sap-col-xl--offset-after-10[dir=rtl] {
+    margin-right: 0;
+    margin-left: 83.3333333333%;
+  }
+
+  .sap-col-xl--11 {
+    min-width: 91.6666666667%;
+    max-width: 91.6666666667%;
+  }
+
+  .sap-col-xl--offset-11 {
+    margin-left: 91.6666666667%;
+  }
+  [dir=rtl] .sap-col-xl--offset-11, .sap-col-xl--offset-11[dir=rtl] {
+    margin-right: 91.6666666667%;
+    margin-left: 0;
+  }
+
+  .sap-col-xl--offset-after-11 {
+    margin-right: 91.6666666667%;
+  }
+  [dir=rtl] .sap-col-xl--offset-after-11, .sap-col-xl--offset-after-11[dir=rtl] {
+    margin-right: 0;
+    margin-left: 91.6666666667%;
+  }
+
+  .sap-col-xl--12 {
+    min-width: 100%;
+    max-width: 100%;
+  }
+
+  .sap-col-xl--offset-12 {
+    margin-left: 100%;
+  }
+  [dir=rtl] .sap-col-xl--offset-12, .sap-col-xl--offset-12[dir=rtl] {
+    margin-right: 100%;
+    margin-left: 0;
+  }
+
+  .sap-col-xl--offset-after-12 {
+    margin-right: 100%;
+  }
+  [dir=rtl] .sap-col-xl--offset-after-12, .sap-col-xl--offset-after-12[dir=rtl] {
+    margin-right: 0;
+    margin-left: 100%;
+  }
+}
+/* Fully expanded pseudo element. Requires parent to have specified position */
+/* stylelint-disable */
+/* stylelint-enable */
+/* stylelint-disable */
+/* stylelint-enable */
+/* stylelint-disable */
+/* stylelint-enable */
+/* Fully expanded pseudo element. Requires parent to have specified position */
+/* Fully expanded pseudo element. Requires parent to have specified position */
+.sap-margin--tiny {
+  margin: 0.5rem !important;
+}
+.sap-margin--sm {
+  margin: 1rem !important;
+}
+.sap-margin--md {
+  margin: 2rem !important;
+}
+.sap-margin--lg {
+  margin: 3rem !important;
+}
+.sap-margin--none {
+  margin: 0 !important;
+}
+.sap-margin-top--tiny {
+  margin-top: 0.5rem !important;
+}
+.sap-margin-top--sm {
+  margin-top: 1rem !important;
+}
+.sap-margin-top--md {
+  margin-top: 2rem !important;
+}
+.sap-margin-top--lg {
+  margin-top: 3rem !important;
+}
+.sap-margin-top--none {
+  margin-top: 0 !important;
+}
+.sap-margin-end--tiny {
+  margin-right: 0.5rem !important;
+}
+[dir=rtl] .sap-margin-end--tiny, .sap-margin-end--tiny[dir=rtl] {
+  margin-left: 0.5rem !important;
+  margin-right: 0 !important;
+}
+.sap-margin-end--sm {
+  margin-right: 1rem !important;
+}
+[dir=rtl] .sap-margin-end--sm, .sap-margin-end--sm[dir=rtl] {
+  margin-left: 1rem !important;
+  margin-right: 0 !important;
+}
+.sap-margin-end--md {
+  margin-right: 2rem !important;
+}
+[dir=rtl] .sap-margin-end--md, .sap-margin-end--md[dir=rtl] {
+  margin-left: 2rem !important;
+  margin-right: 0 !important;
+}
+.sap-margin-end--lg {
+  margin-right: 3rem !important;
+}
+[dir=rtl] .sap-margin-end--lg, .sap-margin-end--lg[dir=rtl] {
+  margin-left: 3rem !important;
+  margin-right: 0 !important;
+}
+.sap-margin-end--none {
+  margin-right: 0;
+}
+[dir=rtl] .sap-margin-end--none, .sap-margin-end--none[dir=rtl] {
+  margin-left: 0 !important;
+}
+.sap-margin-bottom--tiny {
+  margin-bottom: 0.5rem !important;
+}
+.sap-margin-bottom--sm {
+  margin-bottom: 1rem !important;
+}
+.sap-margin-bottom--md {
+  margin-bottom: 2rem !important;
+}
+.sap-margin-bottom--lg {
+  margin-bottom: 3rem !important;
+}
+.sap-margin-bottom--none {
+  margin-bottom: 0 !important;
+}
+.sap-margin-begin--tiny {
+  margin-left: 0.5rem !important;
+}
+[dir=rtl] .sap-margin-begin--tiny, .sap-margin-begin--tiny[dir=rtl] {
+  margin-right: 0.5rem !important;
+  margin-left: 0 !important;
+}
+.sap-margin-begin--sm {
+  margin-left: 1rem !important;
+}
+[dir=rtl] .sap-margin-begin--sm, .sap-margin-begin--sm[dir=rtl] {
+  margin-right: 1rem !important;
+  margin-left: 0 !important;
+}
+.sap-margin-begin--md {
+  margin-left: 2rem !important;
+}
+[dir=rtl] .sap-margin-begin--md, .sap-margin-begin--md[dir=rtl] {
+  margin-right: 2rem !important;
+  margin-left: 0 !important;
+}
+.sap-margin-begin--lg {
+  margin-left: 3rem !important;
+}
+[dir=rtl] .sap-margin-begin--lg, .sap-margin-begin--lg[dir=rtl] {
+  margin-right: 3rem !important;
+  margin-left: 0 !important;
+}
+.sap-margin-begin--none {
+  margin-left: 0;
+}
+[dir=rtl] .sap-margin-begin--none, .sap-margin-begin--none[dir=rtl] {
+  margin-right: 0 !important;
+}
+.sap-margin-top-bottom--tiny {
+  margin-top: 0.5rem !important;
+  margin-bottom: 0.5rem !important;
+}
+.sap-margin-top-bottom--sm {
+  margin-top: 1rem !important;
+  margin-bottom: 1rem !important;
+}
+.sap-margin-top-bottom--md {
+  margin-top: 2rem !important;
+  margin-bottom: 2rem !important;
+}
+.sap-margin-top-bottom--lg {
+  margin-top: 3rem !important;
+  margin-bottom: 3rem !important;
+}
+.sap-margin-begin-end--tiny {
+  margin-left: 0.5rem !important;
+  margin-right: 0.5rem !important;
+}
+.sap-margin-begin-end--sm {
+  margin-left: 1rem !important;
+  margin-right: 1rem !important;
+}
+.sap-margin-begin-end--md {
+  margin-left: 2rem !important;
+  margin-right: 2rem !important;
+}
+.sap-margin-begin-end--lg {
+  margin-left: 3rem !important;
+  margin-right: 3rem !important;
+}
+.sap-margin-responsive--sm {
+  margin: 0 0 1rem 0 !important;
+}
+.sap-margin-responsive--md {
+  margin: 1rem !important;
+}
+.sap-margin-responsive--lg {
+  margin: 1rem 2rem !important;
+}
+.sap-margin-responsive--xl {
+  margin: 1rem 3rem !important;
+}
+.sap-margin-negative-begin-end--tiny {
+  margin: 0 -0.5rem !important;
+}
+.sap-margin-negative-begin-end--sm {
+  margin: 0 -1rem !important;
+}
+.sap-margin-negative-begin-end--md {
+  margin: 0 -2rem !important;
+}
+.sap-margin-negative-begin-end--lg {
+  margin: 0 -3rem !important;
+}
+/* Fully expanded pseudo element. Requires parent to have specified position */
+/* stylelint-disable */
+/* stylelint-enable */
+/* stylelint-disable */
+/* stylelint-enable */
+/* stylelint-disable */
+/* stylelint-enable */
+/* Fully expanded pseudo element. Requires parent to have specified position */
+/* Fully expanded pseudo element. Requires parent to have specified position */
+.sap-padding {
+  padding: 1rem !important;
+}
+.sap-padding-begin-end--tiny {
+  padding-left: 0.5rem !important;
+  padding-right: 0.5rem !important;
+}
+.sap-padding-begin-end--sm {
+  padding-left: 1rem !important;
+  padding-right: 1rem !important;
+}
+.sap-padding-begin-end--md {
+  padding-left: 2rem !important;
+  padding-right: 2rem !important;
+}
+.sap-padding-begin-end--lg {
+  padding-left: 3rem !important;
+  padding-right: 3rem !important;
+}
+.sap-padding--none {
+  padding: 0 !important;
+}
+.sap-padding-responsive--sm {
+  padding: 0 1rem !important;
+}
+.sap-padding-responsive--md, .sap-padding-responsive--lg {
+  padding: 0 2rem !important;
+}
+.sap-padding-responsive--xl {
+  padding: 0 3rem !important;
+}