@simplysm/angular 14.0.1 → 14.0.5

package/dist/styles.css

@@ -139,6 +139,7 @@
     --background-color: white;
     --background-rev-color: black;
     --control-color: white;
+    --busy-overlay-bg: rgba(255, 255, 255, 0.6);
     --animation-duration: 0.2s;
     --elevation-size: 0.0833rem;
     --sidebar-width: 15em;
@@ -212,6 +213,7 @@
     --trans-default: rgba(255, 255, 255, 0.2);
     --trans-light: rgba(255, 255, 255, 0.1);
     --trans-lighter: rgba(255, 255, 255, 0.03);
+    --trans-lightest: rgba(255, 255, 255, 0.05);
     --trans-rev-default: rgba(0, 0, 0, 0.1);
     --trans-rev-light: rgba(0, 0, 0, 0.2);
     --trans-rev-lighter: rgba(0, 0, 0, 0.3);
@@ -232,6 +234,7 @@
     --background-color: #000;
     --background-rev-color: #fff;
     --control-color: #000;
+    --busy-overlay-bg: rgba(0, 0, 0, 0.6);
     --sheet-bg: var(--theme-gray-lightest);
   }
   .sd-theme-dark img:not(.no-invert) {
@@ -1015,7 +1018,7 @@
   .bd-none {
     border: none !important;
   }
-  .bd-trans {
+  .bd-transparent {
     border-color: transparent !important;
   }
   .bdt {
@@ -1240,7 +1243,7 @@
   .bdt-none {
     border-top: none !important;
   }
-  .bdt-trans {
+  .bdt-transparent {
     border-top-color: transparent !important;
   }
   .bdr {
@@ -1465,7 +1468,7 @@
   .bdr-none {
     border-right: none !important;
   }
-  .bdr-trans {
+  .bdr-transparent {
     border-right-color: transparent !important;
   }
   .bdb {
@@ -1690,7 +1693,7 @@
   .bdb-none {
     border-bottom: none !important;
   }
-  .bdb-trans {
+  .bdb-transparent {
     border-bottom-color: transparent !important;
   }
   .bdl {
@@ -1915,7 +1918,7 @@
   .bdl-none {
     border-left: none !important;
   }
-  .bdl-trans {
+  .bdl-transparent {
     border-left-color: transparent !important;
   }
   .bd-width-xxs {
@@ -2173,1061 +2176,1061 @@
   .m-xxs {
     margin: var(--gap-xxs) !important;
   }
-  .p-xs {
-    padding: var(--gap-xs) !important;
-  }
-  .m-xs {
-    margin: var(--gap-xs) !important;
+  .pv-xxs {
+    padding-top: var(--gap-xxs) !important;
+    padding-bottom: var(--gap-xxs) !important;
   }
-  .p-sm {
-    padding: var(--gap-sm) !important;
+  .ph-xxs {
+    padding-left: var(--gap-xxs) !important;
+    padding-right: var(--gap-xxs) !important;
   }
-  .m-sm {
-    margin: var(--gap-sm) !important;
+  .mv-xxs {
+    margin-top: var(--gap-xxs) !important;
+    margin-bottom: var(--gap-xxs) !important;
   }
-  .p-default {
-    padding: var(--gap-default) !important;
+  .mh-xxs {
+    margin-left: var(--gap-xxs) !important;
+    margin-right: var(--gap-xxs) !important;
   }
-  .m-default {
-    margin: var(--gap-default) !important;
+  .sw-xxs {
+    width: var(--gap-xxs) !important;
   }
-  .p-lg {
-    padding: var(--gap-lg) !important;
+  .sh-xxs {
+    height: var(--gap-xxs) !important;
   }
-  .m-lg {
-    margin: var(--gap-lg) !important;
+  .pt-xxs {
+    padding-top: var(--gap-xxs) !important;
   }
-  .p-xl {
-    padding: var(--gap-xl) !important;
+  .mt-xxs {
+    margin-top: var(--gap-xxs) !important;
   }
-  .m-xl {
-    margin: var(--gap-xl) !important;
+  .t-xxs {
+    top: var(--gap-xxs) !important;
   }
-  .p-xxl {
-    padding: var(--gap-xxl) !important;
+  .pr-xxs {
+    padding-right: var(--gap-xxs) !important;
   }
-  .m-xxl {
-    margin: var(--gap-xxl) !important;
+  .mr-xxs {
+    margin-right: var(--gap-xxs) !important;
   }
-  .p-0 {
-    padding: var(--gap-0) !important;
+  .r-xxs {
+    right: var(--gap-xxs) !important;
   }
-  .m-0 {
-    margin: var(--gap-0) !important;
+  .pb-xxs {
+    padding-bottom: var(--gap-xxs) !important;
   }
-  .p-auto {
-    padding: var(--gap-auto) !important;
+  .mb-xxs {
+    margin-bottom: var(--gap-xxs) !important;
   }
-  .m-auto {
-    margin: var(--gap-auto) !important;
+  .b-xxs {
+    bottom: var(--gap-xxs) !important;
   }
-  .p-xxs-xxs {
-    padding: var(--gap-xxs) var(--gap-xxs) !important;
+  .pl-xxs {
+    padding-left: var(--gap-xxs) !important;
   }
-  .m-xxs-xxs {
-    margin: var(--gap-xxs) var(--gap-xxs) !important;
+  .ml-xxs {
+    margin-left: var(--gap-xxs) !important;
   }
-  .p-xxs-xs {
-    padding: var(--gap-xxs) var(--gap-xs) !important;
+  .l-xxs {
+    left: var(--gap-xxs) !important;
   }
-  .m-xxs-xs {
-    margin: var(--gap-xxs) var(--gap-xs) !important;
+  .p-xs {
+    padding: var(--gap-xs) !important;
   }
-  .p-xxs-sm {
-    padding: var(--gap-xxs) var(--gap-sm) !important;
+  .m-xs {
+    margin: var(--gap-xs) !important;
   }
-  .m-xxs-sm {
-    margin: var(--gap-xxs) var(--gap-sm) !important;
+  .pv-xs {
+    padding-top: var(--gap-xs) !important;
+    padding-bottom: var(--gap-xs) !important;
   }
-  .p-xxs-default {
-    padding: var(--gap-xxs) var(--gap-default) !important;
+  .ph-xs {
+    padding-left: var(--gap-xs) !important;
+    padding-right: var(--gap-xs) !important;
   }
-  .m-xxs-default {
-    margin: var(--gap-xxs) var(--gap-default) !important;
+  .mv-xs {
+    margin-top: var(--gap-xs) !important;
+    margin-bottom: var(--gap-xs) !important;
   }
-  .p-xxs-lg {
-    padding: var(--gap-xxs) var(--gap-lg) !important;
+  .mh-xs {
+    margin-left: var(--gap-xs) !important;
+    margin-right: var(--gap-xs) !important;
   }
-  .m-xxs-lg {
-    margin: var(--gap-xxs) var(--gap-lg) !important;
+  .sw-xs {
+    width: var(--gap-xs) !important;
   }
-  .p-xxs-xl {
-    padding: var(--gap-xxs) var(--gap-xl) !important;
+  .sh-xs {
+    height: var(--gap-xs) !important;
   }
-  .m-xxs-xl {
-    margin: var(--gap-xxs) var(--gap-xl) !important;
+  .pt-xs {
+    padding-top: var(--gap-xs) !important;
   }
-  .p-xxs-xxl {
-    padding: var(--gap-xxs) var(--gap-xxl) !important;
+  .mt-xs {
+    margin-top: var(--gap-xs) !important;
   }
-  .m-xxs-xxl {
-    margin: var(--gap-xxs) var(--gap-xxl) !important;
+  .t-xs {
+    top: var(--gap-xs) !important;
   }
-  .p-xxs-0 {
-    padding: var(--gap-xxs) var(--gap-0) !important;
+  .pr-xs {
+    padding-right: var(--gap-xs) !important;
   }
-  .m-xxs-0 {
-    margin: var(--gap-xxs) var(--gap-0) !important;
+  .mr-xs {
+    margin-right: var(--gap-xs) !important;
   }
-  .p-xxs-auto {
-    padding: var(--gap-xxs) var(--gap-auto) !important;
+  .r-xs {
+    right: var(--gap-xs) !important;
   }
-  .m-xxs-auto {
-    margin: var(--gap-xxs) var(--gap-auto) !important;
+  .pb-xs {
+    padding-bottom: var(--gap-xs) !important;
   }
-  .p-xs-xxs {
-    padding: var(--gap-xs) var(--gap-xxs) !important;
+  .mb-xs {
+    margin-bottom: var(--gap-xs) !important;
   }
-  .m-xs-xxs {
-    margin: var(--gap-xs) var(--gap-xxs) !important;
+  .b-xs {
+    bottom: var(--gap-xs) !important;
   }
-  .p-xs-xs {
-    padding: var(--gap-xs) var(--gap-xs) !important;
+  .pl-xs {
+    padding-left: var(--gap-xs) !important;
   }
-  .m-xs-xs {
-    margin: var(--gap-xs) var(--gap-xs) !important;
+  .ml-xs {
+    margin-left: var(--gap-xs) !important;
   }
-  .p-xs-sm {
-    padding: var(--gap-xs) var(--gap-sm) !important;
+  .l-xs {
+    left: var(--gap-xs) !important;
   }
-  .m-xs-sm {
-    margin: var(--gap-xs) var(--gap-sm) !important;
+  .p-sm {
+    padding: var(--gap-sm) !important;
   }
-  .p-xs-default {
-    padding: var(--gap-xs) var(--gap-default) !important;
+  .m-sm {
+    margin: var(--gap-sm) !important;
   }
-  .m-xs-default {
-    margin: var(--gap-xs) var(--gap-default) !important;
+  .pv-sm {
+    padding-top: var(--gap-sm) !important;
+    padding-bottom: var(--gap-sm) !important;
   }
-  .p-xs-lg {
-    padding: var(--gap-xs) var(--gap-lg) !important;
+  .ph-sm {
+    padding-left: var(--gap-sm) !important;
+    padding-right: var(--gap-sm) !important;
   }
-  .m-xs-lg {
-    margin: var(--gap-xs) var(--gap-lg) !important;
+  .mv-sm {
+    margin-top: var(--gap-sm) !important;
+    margin-bottom: var(--gap-sm) !important;
   }
-  .p-xs-xl {
-    padding: var(--gap-xs) var(--gap-xl) !important;
+  .mh-sm {
+    margin-left: var(--gap-sm) !important;
+    margin-right: var(--gap-sm) !important;
   }
-  .m-xs-xl {
-    margin: var(--gap-xs) var(--gap-xl) !important;
+  .sw-sm {
+    width: var(--gap-sm) !important;
   }
-  .p-xs-xxl {
-    padding: var(--gap-xs) var(--gap-xxl) !important;
+  .sh-sm {
+    height: var(--gap-sm) !important;
   }
-  .m-xs-xxl {
-    margin: var(--gap-xs) var(--gap-xxl) !important;
+  .pt-sm {
+    padding-top: var(--gap-sm) !important;
   }
-  .p-xs-0 {
-    padding: var(--gap-xs) var(--gap-0) !important;
+  .mt-sm {
+    margin-top: var(--gap-sm) !important;
   }
-  .m-xs-0 {
-    margin: var(--gap-xs) var(--gap-0) !important;
+  .t-sm {
+    top: var(--gap-sm) !important;
   }
-  .p-xs-auto {
-    padding: var(--gap-xs) var(--gap-auto) !important;
+  .pr-sm {
+    padding-right: var(--gap-sm) !important;
   }
-  .m-xs-auto {
-    margin: var(--gap-xs) var(--gap-auto) !important;
+  .mr-sm {
+    margin-right: var(--gap-sm) !important;
   }
-  .p-sm-xxs {
-    padding: var(--gap-sm) var(--gap-xxs) !important;
+  .r-sm {
+    right: var(--gap-sm) !important;
   }
-  .m-sm-xxs {
-    margin: var(--gap-sm) var(--gap-xxs) !important;
+  .pb-sm {
+    padding-bottom: var(--gap-sm) !important;
   }
-  .p-sm-xs {
-    padding: var(--gap-sm) var(--gap-xs) !important;
+  .mb-sm {
+    margin-bottom: var(--gap-sm) !important;
   }
-  .m-sm-xs {
-    margin: var(--gap-sm) var(--gap-xs) !important;
+  .b-sm {
+    bottom: var(--gap-sm) !important;
   }
-  .p-sm-sm {
-    padding: var(--gap-sm) var(--gap-sm) !important;
+  .pl-sm {
+    padding-left: var(--gap-sm) !important;
   }
-  .m-sm-sm {
-    margin: var(--gap-sm) var(--gap-sm) !important;
+  .ml-sm {
+    margin-left: var(--gap-sm) !important;
   }
-  .p-sm-default {
-    padding: var(--gap-sm) var(--gap-default) !important;
+  .l-sm {
+    left: var(--gap-sm) !important;
   }
-  .m-sm-default {
-    margin: var(--gap-sm) var(--gap-default) !important;
+  .p-default {
+    padding: var(--gap-default) !important;
   }
-  .p-sm-lg {
-    padding: var(--gap-sm) var(--gap-lg) !important;
+  .m-default {
+    margin: var(--gap-default) !important;
   }
-  .m-sm-lg {
-    margin: var(--gap-sm) var(--gap-lg) !important;
+  .pv-default {
+    padding-top: var(--gap-default) !important;
+    padding-bottom: var(--gap-default) !important;
   }
-  .p-sm-xl {
-    padding: var(--gap-sm) var(--gap-xl) !important;
+  .ph-default {
+    padding-left: var(--gap-default) !important;
+    padding-right: var(--gap-default) !important;
   }
-  .m-sm-xl {
-    margin: var(--gap-sm) var(--gap-xl) !important;
+  .mv-default {
+    margin-top: var(--gap-default) !important;
+    margin-bottom: var(--gap-default) !important;
   }
-  .p-sm-xxl {
-    padding: var(--gap-sm) var(--gap-xxl) !important;
+  .mh-default {
+    margin-left: var(--gap-default) !important;
+    margin-right: var(--gap-default) !important;
   }
-  .m-sm-xxl {
-    margin: var(--gap-sm) var(--gap-xxl) !important;
+  .sw-default {
+    width: var(--gap-default) !important;
   }
-  .p-sm-0 {
-    padding: var(--gap-sm) var(--gap-0) !important;
+  .sh-default {
+    height: var(--gap-default) !important;
   }
-  .m-sm-0 {
-    margin: var(--gap-sm) var(--gap-0) !important;
+  .pt-default {
+    padding-top: var(--gap-default) !important;
   }
-  .p-sm-auto {
-    padding: var(--gap-sm) var(--gap-auto) !important;
+  .mt-default {
+    margin-top: var(--gap-default) !important;
   }
-  .m-sm-auto {
-    margin: var(--gap-sm) var(--gap-auto) !important;
+  .t-default {
+    top: var(--gap-default) !important;
   }
-  .p-default-xxs {
-    padding: var(--gap-default) var(--gap-xxs) !important;
+  .pr-default {
+    padding-right: var(--gap-default) !important;
   }
-  .m-default-xxs {
-    margin: var(--gap-default) var(--gap-xxs) !important;
+  .mr-default {
+    margin-right: var(--gap-default) !important;
   }
-  .p-default-xs {
-    padding: var(--gap-default) var(--gap-xs) !important;
+  .r-default {
+    right: var(--gap-default) !important;
   }
-  .m-default-xs {
-    margin: var(--gap-default) var(--gap-xs) !important;
+  .pb-default {
+    padding-bottom: var(--gap-default) !important;
   }
-  .p-default-sm {
-    padding: var(--gap-default) var(--gap-sm) !important;
+  .mb-default {
+    margin-bottom: var(--gap-default) !important;
   }
-  .m-default-sm {
-    margin: var(--gap-default) var(--gap-sm) !important;
+  .b-default {
+    bottom: var(--gap-default) !important;
   }
-  .p-default-default {
-    padding: var(--gap-default) var(--gap-default) !important;
+  .pl-default {
+    padding-left: var(--gap-default) !important;
   }
-  .m-default-default {
-    margin: var(--gap-default) var(--gap-default) !important;
+  .ml-default {
+    margin-left: var(--gap-default) !important;
   }
-  .p-default-lg {
-    padding: var(--gap-default) var(--gap-lg) !important;
+  .l-default {
+    left: var(--gap-default) !important;
   }
-  .m-default-lg {
-    margin: var(--gap-default) var(--gap-lg) !important;
+  .p-lg {
+    padding: var(--gap-lg) !important;
   }
-  .p-default-xl {
-    padding: var(--gap-default) var(--gap-xl) !important;
+  .m-lg {
+    margin: var(--gap-lg) !important;
   }
-  .m-default-xl {
-    margin: var(--gap-default) var(--gap-xl) !important;
+  .pv-lg {
+    padding-top: var(--gap-lg) !important;
+    padding-bottom: var(--gap-lg) !important;
   }
-  .p-default-xxl {
-    padding: var(--gap-default) var(--gap-xxl) !important;
+  .ph-lg {
+    padding-left: var(--gap-lg) !important;
+    padding-right: var(--gap-lg) !important;
   }
-  .m-default-xxl {
-    margin: var(--gap-default) var(--gap-xxl) !important;
+  .mv-lg {
+    margin-top: var(--gap-lg) !important;
+    margin-bottom: var(--gap-lg) !important;
   }
-  .p-default-0 {
-    padding: var(--gap-default) var(--gap-0) !important;
+  .mh-lg {
+    margin-left: var(--gap-lg) !important;
+    margin-right: var(--gap-lg) !important;
   }
-  .m-default-0 {
-    margin: var(--gap-default) var(--gap-0) !important;
+  .sw-lg {
+    width: var(--gap-lg) !important;
   }
-  .p-default-auto {
-    padding: var(--gap-default) var(--gap-auto) !important;
+  .sh-lg {
+    height: var(--gap-lg) !important;
   }
-  .m-default-auto {
-    margin: var(--gap-default) var(--gap-auto) !important;
+  .pt-lg {
+    padding-top: var(--gap-lg) !important;
   }
-  .p-lg-xxs {
-    padding: var(--gap-lg) var(--gap-xxs) !important;
+  .mt-lg {
+    margin-top: var(--gap-lg) !important;
   }
-  .m-lg-xxs {
-    margin: var(--gap-lg) var(--gap-xxs) !important;
+  .t-lg {
+    top: var(--gap-lg) !important;
   }
-  .p-lg-xs {
-    padding: var(--gap-lg) var(--gap-xs) !important;
+  .pr-lg {
+    padding-right: var(--gap-lg) !important;
   }
-  .m-lg-xs {
-    margin: var(--gap-lg) var(--gap-xs) !important;
+  .mr-lg {
+    margin-right: var(--gap-lg) !important;
   }
-  .p-lg-sm {
-    padding: var(--gap-lg) var(--gap-sm) !important;
+  .r-lg {
+    right: var(--gap-lg) !important;
   }
-  .m-lg-sm {
-    margin: var(--gap-lg) var(--gap-sm) !important;
+  .pb-lg {
+    padding-bottom: var(--gap-lg) !important;
   }
-  .p-lg-default {
-    padding: var(--gap-lg) var(--gap-default) !important;
+  .mb-lg {
+    margin-bottom: var(--gap-lg) !important;
   }
-  .m-lg-default {
-    margin: var(--gap-lg) var(--gap-default) !important;
+  .b-lg {
+    bottom: var(--gap-lg) !important;
   }
-  .p-lg-lg {
-    padding: var(--gap-lg) var(--gap-lg) !important;
+  .pl-lg {
+    padding-left: var(--gap-lg) !important;
   }
-  .m-lg-lg {
-    margin: var(--gap-lg) var(--gap-lg) !important;
+  .ml-lg {
+    margin-left: var(--gap-lg) !important;
   }
-  .p-lg-xl {
-    padding: var(--gap-lg) var(--gap-xl) !important;
+  .l-lg {
+    left: var(--gap-lg) !important;
   }
-  .m-lg-xl {
-    margin: var(--gap-lg) var(--gap-xl) !important;
+  .p-xl {
+    padding: var(--gap-xl) !important;
   }
-  .p-lg-xxl {
-    padding: var(--gap-lg) var(--gap-xxl) !important;
+  .m-xl {
+    margin: var(--gap-xl) !important;
   }
-  .m-lg-xxl {
-    margin: var(--gap-lg) var(--gap-xxl) !important;
+  .pv-xl {
+    padding-top: var(--gap-xl) !important;
+    padding-bottom: var(--gap-xl) !important;
   }
-  .p-lg-0 {
-    padding: var(--gap-lg) var(--gap-0) !important;
+  .ph-xl {
+    padding-left: var(--gap-xl) !important;
+    padding-right: var(--gap-xl) !important;
   }
-  .m-lg-0 {
-    margin: var(--gap-lg) var(--gap-0) !important;
+  .mv-xl {
+    margin-top: var(--gap-xl) !important;
+    margin-bottom: var(--gap-xl) !important;
   }
-  .p-lg-auto {
-    padding: var(--gap-lg) var(--gap-auto) !important;
+  .mh-xl {
+    margin-left: var(--gap-xl) !important;
+    margin-right: var(--gap-xl) !important;
   }
-  .m-lg-auto {
-    margin: var(--gap-lg) var(--gap-auto) !important;
+  .sw-xl {
+    width: var(--gap-xl) !important;
   }
-  .p-xl-xxs {
-    padding: var(--gap-xl) var(--gap-xxs) !important;
+  .sh-xl {
+    height: var(--gap-xl) !important;
   }
-  .m-xl-xxs {
-    margin: var(--gap-xl) var(--gap-xxs) !important;
+  .pt-xl {
+    padding-top: var(--gap-xl) !important;
   }
-  .p-xl-xs {
-    padding: var(--gap-xl) var(--gap-xs) !important;
+  .mt-xl {
+    margin-top: var(--gap-xl) !important;
   }
-  .m-xl-xs {
-    margin: var(--gap-xl) var(--gap-xs) !important;
+  .t-xl {
+    top: var(--gap-xl) !important;
   }
-  .p-xl-sm {
-    padding: var(--gap-xl) var(--gap-sm) !important;
+  .pr-xl {
+    padding-right: var(--gap-xl) !important;
   }
-  .m-xl-sm {
-    margin: var(--gap-xl) var(--gap-sm) !important;
+  .mr-xl {
+    margin-right: var(--gap-xl) !important;
   }
-  .p-xl-default {
-    padding: var(--gap-xl) var(--gap-default) !important;
+  .r-xl {
+    right: var(--gap-xl) !important;
   }
-  .m-xl-default {
-    margin: var(--gap-xl) var(--gap-default) !important;
+  .pb-xl {
+    padding-bottom: var(--gap-xl) !important;
   }
-  .p-xl-lg {
-    padding: var(--gap-xl) var(--gap-lg) !important;
+  .mb-xl {
+    margin-bottom: var(--gap-xl) !important;
   }
-  .m-xl-lg {
-    margin: var(--gap-xl) var(--gap-lg) !important;
+  .b-xl {
+    bottom: var(--gap-xl) !important;
   }
-  .p-xl-xl {
-    padding: var(--gap-xl) var(--gap-xl) !important;
+  .pl-xl {
+    padding-left: var(--gap-xl) !important;
   }
-  .m-xl-xl {
-    margin: var(--gap-xl) var(--gap-xl) !important;
+  .ml-xl {
+    margin-left: var(--gap-xl) !important;
   }
-  .p-xl-xxl {
-    padding: var(--gap-xl) var(--gap-xxl) !important;
+  .l-xl {
+    left: var(--gap-xl) !important;
   }
-  .m-xl-xxl {
-    margin: var(--gap-xl) var(--gap-xxl) !important;
+  .p-xxl {
+    padding: var(--gap-xxl) !important;
   }
-  .p-xl-0 {
-    padding: var(--gap-xl) var(--gap-0) !important;
+  .m-xxl {
+    margin: var(--gap-xxl) !important;
   }
-  .m-xl-0 {
-    margin: var(--gap-xl) var(--gap-0) !important;
+  .pv-xxl {
+    padding-top: var(--gap-xxl) !important;
+    padding-bottom: var(--gap-xxl) !important;
   }
-  .p-xl-auto {
-    padding: var(--gap-xl) var(--gap-auto) !important;
+  .ph-xxl {
+    padding-left: var(--gap-xxl) !important;
+    padding-right: var(--gap-xxl) !important;
   }
-  .m-xl-auto {
-    margin: var(--gap-xl) var(--gap-auto) !important;
+  .mv-xxl {
+    margin-top: var(--gap-xxl) !important;
+    margin-bottom: var(--gap-xxl) !important;
   }
-  .p-xxl-xxs {
-    padding: var(--gap-xxl) var(--gap-xxs) !important;
+  .mh-xxl {
+    margin-left: var(--gap-xxl) !important;
+    margin-right: var(--gap-xxl) !important;
   }
-  .m-xxl-xxs {
-    margin: var(--gap-xxl) var(--gap-xxs) !important;
+  .sw-xxl {
+    width: var(--gap-xxl) !important;
   }
-  .p-xxl-xs {
-    padding: var(--gap-xxl) var(--gap-xs) !important;
+  .sh-xxl {
+    height: var(--gap-xxl) !important;
   }
-  .m-xxl-xs {
-    margin: var(--gap-xxl) var(--gap-xs) !important;
+  .pt-xxl {
+    padding-top: var(--gap-xxl) !important;
   }
-  .p-xxl-sm {
-    padding: var(--gap-xxl) var(--gap-sm) !important;
+  .mt-xxl {
+    margin-top: var(--gap-xxl) !important;
   }
-  .m-xxl-sm {
-    margin: var(--gap-xxl) var(--gap-sm) !important;
+  .t-xxl {
+    top: var(--gap-xxl) !important;
   }
-  .p-xxl-default {
-    padding: var(--gap-xxl) var(--gap-default) !important;
+  .pr-xxl {
+    padding-right: var(--gap-xxl) !important;
   }
-  .m-xxl-default {
-    margin: var(--gap-xxl) var(--gap-default) !important;
+  .mr-xxl {
+    margin-right: var(--gap-xxl) !important;
   }
-  .p-xxl-lg {
-    padding: var(--gap-xxl) var(--gap-lg) !important;
+  .r-xxl {
+    right: var(--gap-xxl) !important;
   }
-  .m-xxl-lg {
-    margin: var(--gap-xxl) var(--gap-lg) !important;
+  .pb-xxl {
+    padding-bottom: var(--gap-xxl) !important;
   }
-  .p-xxl-xl {
-    padding: var(--gap-xxl) var(--gap-xl) !important;
+  .mb-xxl {
+    margin-bottom: var(--gap-xxl) !important;
   }
-  .m-xxl-xl {
-    margin: var(--gap-xxl) var(--gap-xl) !important;
+  .b-xxl {
+    bottom: var(--gap-xxl) !important;
   }
-  .p-xxl-xxl {
-    padding: var(--gap-xxl) var(--gap-xxl) !important;
+  .pl-xxl {
+    padding-left: var(--gap-xxl) !important;
   }
-  .m-xxl-xxl {
-    margin: var(--gap-xxl) var(--gap-xxl) !important;
+  .ml-xxl {
+    margin-left: var(--gap-xxl) !important;
   }
-  .p-xxl-0 {
-    padding: var(--gap-xxl) var(--gap-0) !important;
+  .l-xxl {
+    left: var(--gap-xxl) !important;
   }
-  .m-xxl-0 {
-    margin: var(--gap-xxl) var(--gap-0) !important;
+  .p-0 {
+    padding: var(--gap-0) !important;
   }
-  .p-xxl-auto {
-    padding: var(--gap-xxl) var(--gap-auto) !important;
+  .m-0 {
+    margin: var(--gap-0) !important;
   }
-  .m-xxl-auto {
-    margin: var(--gap-xxl) var(--gap-auto) !important;
+  .pv-0 {
+    padding-top: var(--gap-0) !important;
+    padding-bottom: var(--gap-0) !important;
   }
-  .p-0-xxs {
-    padding: var(--gap-0) var(--gap-xxs) !important;
+  .ph-0 {
+    padding-left: var(--gap-0) !important;
+    padding-right: var(--gap-0) !important;
   }
-  .m-0-xxs {
-    margin: var(--gap-0) var(--gap-xxs) !important;
+  .mv-0 {
+    margin-top: var(--gap-0) !important;
+    margin-bottom: var(--gap-0) !important;
   }
-  .p-0-xs {
-    padding: var(--gap-0) var(--gap-xs) !important;
+  .mh-0 {
+    margin-left: var(--gap-0) !important;
+    margin-right: var(--gap-0) !important;
   }
-  .m-0-xs {
-    margin: var(--gap-0) var(--gap-xs) !important;
+  .sw-0 {
+    width: var(--gap-0) !important;
   }
-  .p-0-sm {
-    padding: var(--gap-0) var(--gap-sm) !important;
+  .sh-0 {
+    height: var(--gap-0) !important;
   }
-  .m-0-sm {
-    margin: var(--gap-0) var(--gap-sm) !important;
+  .pt-0 {
+    padding-top: var(--gap-0) !important;
   }
-  .p-0-default {
-    padding: var(--gap-0) var(--gap-default) !important;
+  .mt-0 {
+    margin-top: var(--gap-0) !important;
   }
-  .m-0-default {
-    margin: var(--gap-0) var(--gap-default) !important;
+  .t-0 {
+    top: var(--gap-0) !important;
   }
-  .p-0-lg {
-    padding: var(--gap-0) var(--gap-lg) !important;
+  .pr-0 {
+    padding-right: var(--gap-0) !important;
   }
-  .m-0-lg {
-    margin: var(--gap-0) var(--gap-lg) !important;
+  .mr-0 {
+    margin-right: var(--gap-0) !important;
   }
-  .p-0-xl {
-    padding: var(--gap-0) var(--gap-xl) !important;
+  .r-0 {
+    right: var(--gap-0) !important;
   }
-  .m-0-xl {
-    margin: var(--gap-0) var(--gap-xl) !important;
+  .pb-0 {
+    padding-bottom: var(--gap-0) !important;
   }
-  .p-0-xxl {
-    padding: var(--gap-0) var(--gap-xxl) !important;
+  .mb-0 {
+    margin-bottom: var(--gap-0) !important;
   }
-  .m-0-xxl {
-    margin: var(--gap-0) var(--gap-xxl) !important;
+  .b-0 {
+    bottom: var(--gap-0) !important;
   }
-  .p-0-0 {
-    padding: var(--gap-0) var(--gap-0) !important;
+  .pl-0 {
+    padding-left: var(--gap-0) !important;
   }
-  .m-0-0 {
-    margin: var(--gap-0) var(--gap-0) !important;
+  .ml-0 {
+    margin-left: var(--gap-0) !important;
   }
-  .p-0-auto {
-    padding: var(--gap-0) var(--gap-auto) !important;
+  .l-0 {
+    left: var(--gap-0) !important;
   }
-  .m-0-auto {
-    margin: var(--gap-0) var(--gap-auto) !important;
+  .p-auto {
+    padding: var(--gap-auto) !important;
   }
-  .p-auto-xxs {
-    padding: var(--gap-auto) var(--gap-xxs) !important;
+  .m-auto {
+    margin: var(--gap-auto) !important;
   }
-  .m-auto-xxs {
-    margin: var(--gap-auto) var(--gap-xxs) !important;
+  .pv-auto {
+    padding-top: var(--gap-auto) !important;
+    padding-bottom: var(--gap-auto) !important;
   }
-  .p-auto-xs {
-    padding: var(--gap-auto) var(--gap-xs) !important;
+  .ph-auto {
+    padding-left: var(--gap-auto) !important;
+    padding-right: var(--gap-auto) !important;
   }
-  .m-auto-xs {
-    margin: var(--gap-auto) var(--gap-xs) !important;
+  .mv-auto {
+    margin-top: var(--gap-auto) !important;
+    margin-bottom: var(--gap-auto) !important;
   }
-  .p-auto-sm {
-    padding: var(--gap-auto) var(--gap-sm) !important;
+  .mh-auto {
+    margin-left: var(--gap-auto) !important;
+    margin-right: var(--gap-auto) !important;
   }
-  .m-auto-sm {
-    margin: var(--gap-auto) var(--gap-sm) !important;
+  .sw-auto {
+    width: var(--gap-auto) !important;
   }
-  .p-auto-default {
-    padding: var(--gap-auto) var(--gap-default) !important;
+  .sh-auto {
+    height: var(--gap-auto) !important;
   }
-  .m-auto-default {
-    margin: var(--gap-auto) var(--gap-default) !important;
+  .pt-auto {
+    padding-top: var(--gap-auto) !important;
   }
-  .p-auto-lg {
-    padding: var(--gap-auto) var(--gap-lg) !important;
+  .mt-auto {
+    margin-top: var(--gap-auto) !important;
   }
-  .m-auto-lg {
-    margin: var(--gap-auto) var(--gap-lg) !important;
+  .t-auto {
+    top: var(--gap-auto) !important;
   }
-  .p-auto-xl {
-    padding: var(--gap-auto) var(--gap-xl) !important;
+  .pr-auto {
+    padding-right: var(--gap-auto) !important;
   }
-  .m-auto-xl {
-    margin: var(--gap-auto) var(--gap-xl) !important;
+  .mr-auto {
+    margin-right: var(--gap-auto) !important;
   }
-  .p-auto-xxl {
-    padding: var(--gap-auto) var(--gap-xxl) !important;
+  .r-auto {
+    right: var(--gap-auto) !important;
   }
-  .m-auto-xxl {
-    margin: var(--gap-auto) var(--gap-xxl) !important;
+  .pb-auto {
+    padding-bottom: var(--gap-auto) !important;
   }
-  .p-auto-0 {
-    padding: var(--gap-auto) var(--gap-0) !important;
+  .mb-auto {
+    margin-bottom: var(--gap-auto) !important;
   }
-  .m-auto-0 {
-    margin: var(--gap-auto) var(--gap-0) !important;
+  .b-auto {
+    bottom: var(--gap-auto) !important;
   }
-  .p-auto-auto {
-    padding: var(--gap-auto) var(--gap-auto) !important;
+  .pl-auto {
+    padding-left: var(--gap-auto) !important;
   }
-  .m-auto-auto {
-    margin: var(--gap-auto) var(--gap-auto) !important;
+  .ml-auto {
+    margin-left: var(--gap-auto) !important;
   }
-  .pv-xxs {
-    padding-top: var(--gap-xxs) !important;
-    padding-bottom: var(--gap-xxs) !important;
+  .l-auto {
+    left: var(--gap-auto) !important;
   }
-  .ph-xxs {
-    padding-left: var(--gap-xxs) !important;
-    padding-right: var(--gap-xxs) !important;
+  .p-xxs-xxs {
+    padding: var(--gap-xxs) var(--gap-xxs) !important;
   }
-  .mv-xxs {
-    margin-top: var(--gap-xxs) !important;
-    margin-bottom: var(--gap-xxs) !important;
+  .m-xxs-xxs {
+    margin: var(--gap-xxs) var(--gap-xxs) !important;
   }
-  .mh-xxs {
-    margin-left: var(--gap-xxs) !important;
-    margin-right: var(--gap-xxs) !important;
+  .p-xxs-xs {
+    padding: var(--gap-xxs) var(--gap-xs) !important;
   }
-  .pv-xs {
-    padding-top: var(--gap-xs) !important;
-    padding-bottom: var(--gap-xs) !important;
+  .m-xxs-xs {
+    margin: var(--gap-xxs) var(--gap-xs) !important;
   }
-  .ph-xs {
-    padding-left: var(--gap-xs) !important;
-    padding-right: var(--gap-xs) !important;
+  .p-xxs-sm {
+    padding: var(--gap-xxs) var(--gap-sm) !important;
   }
-  .mv-xs {
-    margin-top: var(--gap-xs) !important;
-    margin-bottom: var(--gap-xs) !important;
+  .m-xxs-sm {
+    margin: var(--gap-xxs) var(--gap-sm) !important;
   }
-  .mh-xs {
-    margin-left: var(--gap-xs) !important;
-    margin-right: var(--gap-xs) !important;
+  .p-xxs-default {
+    padding: var(--gap-xxs) var(--gap-default) !important;
   }
-  .pv-sm {
-    padding-top: var(--gap-sm) !important;
-    padding-bottom: var(--gap-sm) !important;
+  .m-xxs-default {
+    margin: var(--gap-xxs) var(--gap-default) !important;
   }
-  .ph-sm {
-    padding-left: var(--gap-sm) !important;
-    padding-right: var(--gap-sm) !important;
+  .p-xxs-lg {
+    padding: var(--gap-xxs) var(--gap-lg) !important;
   }
-  .mv-sm {
-    margin-top: var(--gap-sm) !important;
-    margin-bottom: var(--gap-sm) !important;
+  .m-xxs-lg {
+    margin: var(--gap-xxs) var(--gap-lg) !important;
   }
-  .mh-sm {
-    margin-left: var(--gap-sm) !important;
-    margin-right: var(--gap-sm) !important;
+  .p-xxs-xl {
+    padding: var(--gap-xxs) var(--gap-xl) !important;
   }
-  .pv-default {
-    padding-top: var(--gap-default) !important;
-    padding-bottom: var(--gap-default) !important;
+  .m-xxs-xl {
+    margin: var(--gap-xxs) var(--gap-xl) !important;
   }
-  .ph-default {
-    padding-left: var(--gap-default) !important;
-    padding-right: var(--gap-default) !important;
+  .p-xxs-xxl {
+    padding: var(--gap-xxs) var(--gap-xxl) !important;
   }
-  .mv-default {
-    margin-top: var(--gap-default) !important;
-    margin-bottom: var(--gap-default) !important;
+  .m-xxs-xxl {
+    margin: var(--gap-xxs) var(--gap-xxl) !important;
   }
-  .mh-default {
-    margin-left: var(--gap-default) !important;
-    margin-right: var(--gap-default) !important;
+  .p-xxs-0 {
+    padding: var(--gap-xxs) var(--gap-0) !important;
   }
-  .pv-lg {
-    padding-top: var(--gap-lg) !important;
-    padding-bottom: var(--gap-lg) !important;
+  .m-xxs-0 {
+    margin: var(--gap-xxs) var(--gap-0) !important;
   }
-  .ph-lg {
-    padding-left: var(--gap-lg) !important;
-    padding-right: var(--gap-lg) !important;
+  .p-xxs-auto {
+    padding: var(--gap-xxs) var(--gap-auto) !important;
   }
-  .mv-lg {
-    margin-top: var(--gap-lg) !important;
-    margin-bottom: var(--gap-lg) !important;
+  .m-xxs-auto {
+    margin: var(--gap-xxs) var(--gap-auto) !important;
   }
-  .mh-lg {
-    margin-left: var(--gap-lg) !important;
-    margin-right: var(--gap-lg) !important;
+  .p-xs-xxs {
+    padding: var(--gap-xs) var(--gap-xxs) !important;
   }
-  .pv-xl {
-    padding-top: var(--gap-xl) !important;
-    padding-bottom: var(--gap-xl) !important;
+  .m-xs-xxs {
+    margin: var(--gap-xs) var(--gap-xxs) !important;
   }
-  .ph-xl {
-    padding-left: var(--gap-xl) !important;
-    padding-right: var(--gap-xl) !important;
+  .p-xs-xs {
+    padding: var(--gap-xs) var(--gap-xs) !important;
   }
-  .mv-xl {
-    margin-top: var(--gap-xl) !important;
-    margin-bottom: var(--gap-xl) !important;
+  .m-xs-xs {
+    margin: var(--gap-xs) var(--gap-xs) !important;
   }
-  .mh-xl {
-    margin-left: var(--gap-xl) !important;
-    margin-right: var(--gap-xl) !important;
+  .p-xs-sm {
+    padding: var(--gap-xs) var(--gap-sm) !important;
   }
-  .pv-xxl {
-    padding-top: var(--gap-xxl) !important;
-    padding-bottom: var(--gap-xxl) !important;
+  .m-xs-sm {
+    margin: var(--gap-xs) var(--gap-sm) !important;
   }
-  .ph-xxl {
-    padding-left: var(--gap-xxl) !important;
-    padding-right: var(--gap-xxl) !important;
+  .p-xs-default {
+    padding: var(--gap-xs) var(--gap-default) !important;
   }
-  .mv-xxl {
-    margin-top: var(--gap-xxl) !important;
-    margin-bottom: var(--gap-xxl) !important;
+  .m-xs-default {
+    margin: var(--gap-xs) var(--gap-default) !important;
   }
-  .mh-xxl {
-    margin-left: var(--gap-xxl) !important;
-    margin-right: var(--gap-xxl) !important;
+  .p-xs-lg {
+    padding: var(--gap-xs) var(--gap-lg) !important;
   }
-  .pv-0 {
-    padding-top: var(--gap-0) !important;
-    padding-bottom: var(--gap-0) !important;
+  .m-xs-lg {
+    margin: var(--gap-xs) var(--gap-lg) !important;
   }
-  .ph-0 {
-    padding-left: var(--gap-0) !important;
-    padding-right: var(--gap-0) !important;
+  .p-xs-xl {
+    padding: var(--gap-xs) var(--gap-xl) !important;
   }
-  .mv-0 {
-    margin-top: var(--gap-0) !important;
-    margin-bottom: var(--gap-0) !important;
+  .m-xs-xl {
+    margin: var(--gap-xs) var(--gap-xl) !important;
   }
-  .mh-0 {
-    margin-left: var(--gap-0) !important;
-    margin-right: var(--gap-0) !important;
+  .p-xs-xxl {
+    padding: var(--gap-xs) var(--gap-xxl) !important;
   }
-  .pv-auto {
-    padding-top: var(--gap-auto) !important;
-    padding-bottom: var(--gap-auto) !important;
+  .m-xs-xxl {
+    margin: var(--gap-xs) var(--gap-xxl) !important;
   }
-  .ph-auto {
-    padding-left: var(--gap-auto) !important;
-    padding-right: var(--gap-auto) !important;
+  .p-xs-0 {
+    padding: var(--gap-xs) var(--gap-0) !important;
   }
-  .mv-auto {
-    margin-top: var(--gap-auto) !important;
-    margin-bottom: var(--gap-auto) !important;
+  .m-xs-0 {
+    margin: var(--gap-xs) var(--gap-0) !important;
   }
-  .mh-auto {
-    margin-left: var(--gap-auto) !important;
-    margin-right: var(--gap-auto) !important;
+  .p-xs-auto {
+    padding: var(--gap-xs) var(--gap-auto) !important;
   }
-  .sw-xxs {
-    width: var(--gap-xxs) !important;
+  .m-xs-auto {
+    margin: var(--gap-xs) var(--gap-auto) !important;
   }
-  .sh-xxs {
-    height: var(--gap-xxs) !important;
+  .p-sm-xxs {
+    padding: var(--gap-sm) var(--gap-xxs) !important;
   }
-  .sw-xs {
-    width: var(--gap-xs) !important;
+  .m-sm-xxs {
+    margin: var(--gap-sm) var(--gap-xxs) !important;
   }
-  .sh-xs {
-    height: var(--gap-xs) !important;
+  .p-sm-xs {
+    padding: var(--gap-sm) var(--gap-xs) !important;
   }
-  .sw-sm {
-    width: var(--gap-sm) !important;
+  .m-sm-xs {
+    margin: var(--gap-sm) var(--gap-xs) !important;
   }
-  .sh-sm {
-    height: var(--gap-sm) !important;
+  .p-sm-sm {
+    padding: var(--gap-sm) var(--gap-sm) !important;
   }
-  .sw-default {
-    width: var(--gap-default) !important;
+  .m-sm-sm {
+    margin: var(--gap-sm) var(--gap-sm) !important;
   }
-  .sh-default {
-    height: var(--gap-default) !important;
+  .p-sm-default {
+    padding: var(--gap-sm) var(--gap-default) !important;
   }
-  .sw-lg {
-    width: var(--gap-lg) !important;
+  .m-sm-default {
+    margin: var(--gap-sm) var(--gap-default) !important;
   }
-  .sh-lg {
-    height: var(--gap-lg) !important;
+  .p-sm-lg {
+    padding: var(--gap-sm) var(--gap-lg) !important;
   }
-  .sw-xl {
-    width: var(--gap-xl) !important;
+  .m-sm-lg {
+    margin: var(--gap-sm) var(--gap-lg) !important;
   }
-  .sh-xl {
-    height: var(--gap-xl) !important;
+  .p-sm-xl {
+    padding: var(--gap-sm) var(--gap-xl) !important;
   }
-  .sw-xxl {
-    width: var(--gap-xxl) !important;
+  .m-sm-xl {
+    margin: var(--gap-sm) var(--gap-xl) !important;
   }
-  .sh-xxl {
-    height: var(--gap-xxl) !important;
+  .p-sm-xxl {
+    padding: var(--gap-sm) var(--gap-xxl) !important;
   }
-  .sw-0 {
-    width: var(--gap-0) !important;
+  .m-sm-xxl {
+    margin: var(--gap-sm) var(--gap-xxl) !important;
   }
-  .sh-0 {
-    height: var(--gap-0) !important;
+  .p-sm-0 {
+    padding: var(--gap-sm) var(--gap-0) !important;
   }
-  .sw-auto {
-    width: var(--gap-auto) !important;
+  .m-sm-0 {
+    margin: var(--gap-sm) var(--gap-0) !important;
   }
-  .sh-auto {
-    height: var(--gap-auto) !important;
+  .p-sm-auto {
+    padding: var(--gap-sm) var(--gap-auto) !important;
   }
-  .pt-xxs {
-    padding-top: var(--gap-xxs) !important;
+  .m-sm-auto {
+    margin: var(--gap-sm) var(--gap-auto) !important;
   }
-  .mt-xxs {
-    margin-top: var(--gap-xxs) !important;
+  .p-default-xxs {
+    padding: var(--gap-default) var(--gap-xxs) !important;
   }
-  .t-xxs {
-    top: var(--gap-xxs) !important;
+  .m-default-xxs {
+    margin: var(--gap-default) var(--gap-xxs) !important;
   }
-  .pr-xxs {
-    padding-right: var(--gap-xxs) !important;
+  .p-default-xs {
+    padding: var(--gap-default) var(--gap-xs) !important;
   }
-  .mr-xxs {
-    margin-right: var(--gap-xxs) !important;
+  .m-default-xs {
+    margin: var(--gap-default) var(--gap-xs) !important;
   }
-  .r-xxs {
-    right: var(--gap-xxs) !important;
+  .p-default-sm {
+    padding: var(--gap-default) var(--gap-sm) !important;
   }
-  .pb-xxs {
-    padding-bottom: var(--gap-xxs) !important;
+  .m-default-sm {
+    margin: var(--gap-default) var(--gap-sm) !important;
   }
-  .mb-xxs {
-    margin-bottom: var(--gap-xxs) !important;
+  .p-default-default {
+    padding: var(--gap-default) var(--gap-default) !important;
   }
-  .b-xxs {
-    bottom: var(--gap-xxs) !important;
+  .m-default-default {
+    margin: var(--gap-default) var(--gap-default) !important;
   }
-  .pl-xxs {
-    padding-left: var(--gap-xxs) !important;
+  .p-default-lg {
+    padding: var(--gap-default) var(--gap-lg) !important;
   }
-  .ml-xxs {
-    margin-left: var(--gap-xxs) !important;
+  .m-default-lg {
+    margin: var(--gap-default) var(--gap-lg) !important;
   }
-  .l-xxs {
-    left: var(--gap-xxs) !important;
+  .p-default-xl {
+    padding: var(--gap-default) var(--gap-xl) !important;
   }
-  .pt-xs {
-    padding-top: var(--gap-xs) !important;
+  .m-default-xl {
+    margin: var(--gap-default) var(--gap-xl) !important;
   }
-  .mt-xs {
-    margin-top: var(--gap-xs) !important;
+  .p-default-xxl {
+    padding: var(--gap-default) var(--gap-xxl) !important;
   }
-  .t-xs {
-    top: var(--gap-xs) !important;
+  .m-default-xxl {
+    margin: var(--gap-default) var(--gap-xxl) !important;
   }
-  .pr-xs {
-    padding-right: var(--gap-xs) !important;
+  .p-default-0 {
+    padding: var(--gap-default) var(--gap-0) !important;
   }
-  .mr-xs {
-    margin-right: var(--gap-xs) !important;
+  .m-default-0 {
+    margin: var(--gap-default) var(--gap-0) !important;
   }
-  .r-xs {
-    right: var(--gap-xs) !important;
+  .p-default-auto {
+    padding: var(--gap-default) var(--gap-auto) !important;
   }
-  .pb-xs {
-    padding-bottom: var(--gap-xs) !important;
+  .m-default-auto {
+    margin: var(--gap-default) var(--gap-auto) !important;
   }
-  .mb-xs {
-    margin-bottom: var(--gap-xs) !important;
+  .p-lg-xxs {
+    padding: var(--gap-lg) var(--gap-xxs) !important;
   }
-  .b-xs {
-    bottom: var(--gap-xs) !important;
+  .m-lg-xxs {
+    margin: var(--gap-lg) var(--gap-xxs) !important;
   }
-  .pl-xs {
-    padding-left: var(--gap-xs) !important;
+  .p-lg-xs {
+    padding: var(--gap-lg) var(--gap-xs) !important;
   }
-  .ml-xs {
-    margin-left: var(--gap-xs) !important;
+  .m-lg-xs {
+    margin: var(--gap-lg) var(--gap-xs) !important;
   }
-  .l-xs {
-    left: var(--gap-xs) !important;
+  .p-lg-sm {
+    padding: var(--gap-lg) var(--gap-sm) !important;
   }
-  .pt-sm {
-    padding-top: var(--gap-sm) !important;
+  .m-lg-sm {
+    margin: var(--gap-lg) var(--gap-sm) !important;
   }
-  .mt-sm {
-    margin-top: var(--gap-sm) !important;
+  .p-lg-default {
+    padding: var(--gap-lg) var(--gap-default) !important;
   }
-  .t-sm {
-    top: var(--gap-sm) !important;
+  .m-lg-default {
+    margin: var(--gap-lg) var(--gap-default) !important;
   }
-  .pr-sm {
-    padding-right: var(--gap-sm) !important;
+  .p-lg-lg {
+    padding: var(--gap-lg) var(--gap-lg) !important;
   }
-  .mr-sm {
-    margin-right: var(--gap-sm) !important;
+  .m-lg-lg {
+    margin: var(--gap-lg) var(--gap-lg) !important;
   }
-  .r-sm {
-    right: var(--gap-sm) !important;
+  .p-lg-xl {
+    padding: var(--gap-lg) var(--gap-xl) !important;
   }
-  .pb-sm {
-    padding-bottom: var(--gap-sm) !important;
+  .m-lg-xl {
+    margin: var(--gap-lg) var(--gap-xl) !important;
   }
-  .mb-sm {
-    margin-bottom: var(--gap-sm) !important;
+  .p-lg-xxl {
+    padding: var(--gap-lg) var(--gap-xxl) !important;
   }
-  .b-sm {
-    bottom: var(--gap-sm) !important;
+  .m-lg-xxl {
+    margin: var(--gap-lg) var(--gap-xxl) !important;
   }
-  .pl-sm {
-    padding-left: var(--gap-sm) !important;
+  .p-lg-0 {
+    padding: var(--gap-lg) var(--gap-0) !important;
+  }
+  .m-lg-0 {
+    margin: var(--gap-lg) var(--gap-0) !important;
   }
-  .ml-sm {
-    margin-left: var(--gap-sm) !important;
+  .p-lg-auto {
+    padding: var(--gap-lg) var(--gap-auto) !important;
   }
-  .l-sm {
-    left: var(--gap-sm) !important;
+  .m-lg-auto {
+    margin: var(--gap-lg) var(--gap-auto) !important;
   }
-  .pt-default {
-    padding-top: var(--gap-default) !important;
+  .p-xl-xxs {
+    padding: var(--gap-xl) var(--gap-xxs) !important;
   }
-  .mt-default {
-    margin-top: var(--gap-default) !important;
+  .m-xl-xxs {
+    margin: var(--gap-xl) var(--gap-xxs) !important;
   }
-  .t-default {
-    top: var(--gap-default) !important;
+  .p-xl-xs {
+    padding: var(--gap-xl) var(--gap-xs) !important;
   }
-  .pr-default {
-    padding-right: var(--gap-default) !important;
+  .m-xl-xs {
+    margin: var(--gap-xl) var(--gap-xs) !important;
   }
-  .mr-default {
-    margin-right: var(--gap-default) !important;
+  .p-xl-sm {
+    padding: var(--gap-xl) var(--gap-sm) !important;
   }
-  .r-default {
-    right: var(--gap-default) !important;
+  .m-xl-sm {
+    margin: var(--gap-xl) var(--gap-sm) !important;
   }
-  .pb-default {
-    padding-bottom: var(--gap-default) !important;
+  .p-xl-default {
+    padding: var(--gap-xl) var(--gap-default) !important;
   }
-  .mb-default {
-    margin-bottom: var(--gap-default) !important;
+  .m-xl-default {
+    margin: var(--gap-xl) var(--gap-default) !important;
   }
-  .b-default {
-    bottom: var(--gap-default) !important;
+  .p-xl-lg {
+    padding: var(--gap-xl) var(--gap-lg) !important;
   }
-  .pl-default {
-    padding-left: var(--gap-default) !important;
+  .m-xl-lg {
+    margin: var(--gap-xl) var(--gap-lg) !important;
   }
-  .ml-default {
-    margin-left: var(--gap-default) !important;
+  .p-xl-xl {
+    padding: var(--gap-xl) var(--gap-xl) !important;
   }
-  .l-default {
-    left: var(--gap-default) !important;
+  .m-xl-xl {
+    margin: var(--gap-xl) var(--gap-xl) !important;
   }
-  .pt-lg {
-    padding-top: var(--gap-lg) !important;
+  .p-xl-xxl {
+    padding: var(--gap-xl) var(--gap-xxl) !important;
   }
-  .mt-lg {
-    margin-top: var(--gap-lg) !important;
+  .m-xl-xxl {
+    margin: var(--gap-xl) var(--gap-xxl) !important;
   }
-  .t-lg {
-    top: var(--gap-lg) !important;
+  .p-xl-0 {
+    padding: var(--gap-xl) var(--gap-0) !important;
   }
-  .pr-lg {
-    padding-right: var(--gap-lg) !important;
+  .m-xl-0 {
+    margin: var(--gap-xl) var(--gap-0) !important;
   }
-  .mr-lg {
-    margin-right: var(--gap-lg) !important;
+  .p-xl-auto {
+    padding: var(--gap-xl) var(--gap-auto) !important;
   }
-  .r-lg {
-    right: var(--gap-lg) !important;
+  .m-xl-auto {
+    margin: var(--gap-xl) var(--gap-auto) !important;
   }
-  .pb-lg {
-    padding-bottom: var(--gap-lg) !important;
+  .p-xxl-xxs {
+    padding: var(--gap-xxl) var(--gap-xxs) !important;
   }
-  .mb-lg {
-    margin-bottom: var(--gap-lg) !important;
+  .m-xxl-xxs {
+    margin: var(--gap-xxl) var(--gap-xxs) !important;
   }
-  .b-lg {
-    bottom: var(--gap-lg) !important;
+  .p-xxl-xs {
+    padding: var(--gap-xxl) var(--gap-xs) !important;
   }
-  .pl-lg {
-    padding-left: var(--gap-lg) !important;
+  .m-xxl-xs {
+    margin: var(--gap-xxl) var(--gap-xs) !important;
   }
-  .ml-lg {
-    margin-left: var(--gap-lg) !important;
+  .p-xxl-sm {
+    padding: var(--gap-xxl) var(--gap-sm) !important;
   }
-  .l-lg {
-    left: var(--gap-lg) !important;
+  .m-xxl-sm {
+    margin: var(--gap-xxl) var(--gap-sm) !important;
   }
-  .pt-xl {
-    padding-top: var(--gap-xl) !important;
+  .p-xxl-default {
+    padding: var(--gap-xxl) var(--gap-default) !important;
   }
-  .mt-xl {
-    margin-top: var(--gap-xl) !important;
+  .m-xxl-default {
+    margin: var(--gap-xxl) var(--gap-default) !important;
   }
-  .t-xl {
-    top: var(--gap-xl) !important;
+  .p-xxl-lg {
+    padding: var(--gap-xxl) var(--gap-lg) !important;
   }
-  .pr-xl {
-    padding-right: var(--gap-xl) !important;
+  .m-xxl-lg {
+    margin: var(--gap-xxl) var(--gap-lg) !important;
   }
-  .mr-xl {
-    margin-right: var(--gap-xl) !important;
+  .p-xxl-xl {
+    padding: var(--gap-xxl) var(--gap-xl) !important;
   }
-  .r-xl {
-    right: var(--gap-xl) !important;
+  .m-xxl-xl {
+    margin: var(--gap-xxl) var(--gap-xl) !important;
   }
-  .pb-xl {
-    padding-bottom: var(--gap-xl) !important;
+  .p-xxl-xxl {
+    padding: var(--gap-xxl) var(--gap-xxl) !important;
   }
-  .mb-xl {
-    margin-bottom: var(--gap-xl) !important;
+  .m-xxl-xxl {
+    margin: var(--gap-xxl) var(--gap-xxl) !important;
   }
-  .b-xl {
-    bottom: var(--gap-xl) !important;
+  .p-xxl-0 {
+    padding: var(--gap-xxl) var(--gap-0) !important;
   }
-  .pl-xl {
-    padding-left: var(--gap-xl) !important;
+  .m-xxl-0 {
+    margin: var(--gap-xxl) var(--gap-0) !important;
   }
-  .ml-xl {
-    margin-left: var(--gap-xl) !important;
+  .p-xxl-auto {
+    padding: var(--gap-xxl) var(--gap-auto) !important;
   }
-  .l-xl {
-    left: var(--gap-xl) !important;
+  .m-xxl-auto {
+    margin: var(--gap-xxl) var(--gap-auto) !important;
   }
-  .pt-xxl {
-    padding-top: var(--gap-xxl) !important;
+  .p-0-xxs {
+    padding: var(--gap-0) var(--gap-xxs) !important;
   }
-  .mt-xxl {
-    margin-top: var(--gap-xxl) !important;
+  .m-0-xxs {
+    margin: var(--gap-0) var(--gap-xxs) !important;
   }
-  .t-xxl {
-    top: var(--gap-xxl) !important;
+  .p-0-xs {
+    padding: var(--gap-0) var(--gap-xs) !important;
   }
-  .pr-xxl {
-    padding-right: var(--gap-xxl) !important;
+  .m-0-xs {
+    margin: var(--gap-0) var(--gap-xs) !important;
   }
-  .mr-xxl {
-    margin-right: var(--gap-xxl) !important;
+  .p-0-sm {
+    padding: var(--gap-0) var(--gap-sm) !important;
   }
-  .r-xxl {
-    right: var(--gap-xxl) !important;
+  .m-0-sm {
+    margin: var(--gap-0) var(--gap-sm) !important;
   }
-  .pb-xxl {
-    padding-bottom: var(--gap-xxl) !important;
+  .p-0-default {
+    padding: var(--gap-0) var(--gap-default) !important;
   }
-  .mb-xxl {
-    margin-bottom: var(--gap-xxl) !important;
+  .m-0-default {
+    margin: var(--gap-0) var(--gap-default) !important;
   }
-  .b-xxl {
-    bottom: var(--gap-xxl) !important;
+  .p-0-lg {
+    padding: var(--gap-0) var(--gap-lg) !important;
   }
-  .pl-xxl {
-    padding-left: var(--gap-xxl) !important;
+  .m-0-lg {
+    margin: var(--gap-0) var(--gap-lg) !important;
   }
-  .ml-xxl {
-    margin-left: var(--gap-xxl) !important;
+  .p-0-xl {
+    padding: var(--gap-0) var(--gap-xl) !important;
   }
-  .l-xxl {
-    left: var(--gap-xxl) !important;
+  .m-0-xl {
+    margin: var(--gap-0) var(--gap-xl) !important;
   }
-  .pt-0 {
-    padding-top: var(--gap-0) !important;
+  .p-0-xxl {
+    padding: var(--gap-0) var(--gap-xxl) !important;
   }
-  .mt-0 {
-    margin-top: var(--gap-0) !important;
+  .m-0-xxl {
+    margin: var(--gap-0) var(--gap-xxl) !important;
   }
-  .t-0 {
-    top: var(--gap-0) !important;
+  .p-0-0 {
+    padding: var(--gap-0) var(--gap-0) !important;
   }
-  .pr-0 {
-    padding-right: var(--gap-0) !important;
+  .m-0-0 {
+    margin: var(--gap-0) var(--gap-0) !important;
   }
-  .mr-0 {
-    margin-right: var(--gap-0) !important;
+  .p-0-auto {
+    padding: var(--gap-0) var(--gap-auto) !important;
   }
-  .r-0 {
-    right: var(--gap-0) !important;
+  .m-0-auto {
+    margin: var(--gap-0) var(--gap-auto) !important;
   }
-  .pb-0 {
-    padding-bottom: var(--gap-0) !important;
+  .p-auto-xxs {
+    padding: var(--gap-auto) var(--gap-xxs) !important;
   }
-  .mb-0 {
-    margin-bottom: var(--gap-0) !important;
+  .m-auto-xxs {
+    margin: var(--gap-auto) var(--gap-xxs) !important;
   }
-  .b-0 {
-    bottom: var(--gap-0) !important;
+  .p-auto-xs {
+    padding: var(--gap-auto) var(--gap-xs) !important;
   }
-  .pl-0 {
-    padding-left: var(--gap-0) !important;
+  .m-auto-xs {
+    margin: var(--gap-auto) var(--gap-xs) !important;
   }
-  .ml-0 {
-    margin-left: var(--gap-0) !important;
+  .p-auto-sm {
+    padding: var(--gap-auto) var(--gap-sm) !important;
   }
-  .l-0 {
-    left: var(--gap-0) !important;
+  .m-auto-sm {
+    margin: var(--gap-auto) var(--gap-sm) !important;
   }
-  .pt-auto {
-    padding-top: var(--gap-auto) !important;
+  .p-auto-default {
+    padding: var(--gap-auto) var(--gap-default) !important;
   }
-  .mt-auto {
-    margin-top: var(--gap-auto) !important;
+  .m-auto-default {
+    margin: var(--gap-auto) var(--gap-default) !important;
   }
-  .t-auto {
-    top: var(--gap-auto) !important;
+  .p-auto-lg {
+    padding: var(--gap-auto) var(--gap-lg) !important;
   }
-  .pr-auto {
-    padding-right: var(--gap-auto) !important;
+  .m-auto-lg {
+    margin: var(--gap-auto) var(--gap-lg) !important;
   }
-  .mr-auto {
-    margin-right: var(--gap-auto) !important;
+  .p-auto-xl {
+    padding: var(--gap-auto) var(--gap-xl) !important;
   }
-  .r-auto {
-    right: var(--gap-auto) !important;
+  .m-auto-xl {
+    margin: var(--gap-auto) var(--gap-xl) !important;
   }
-  .pb-auto {
-    padding-bottom: var(--gap-auto) !important;
+  .p-auto-xxl {
+    padding: var(--gap-auto) var(--gap-xxl) !important;
   }
-  .mb-auto {
-    margin-bottom: var(--gap-auto) !important;
+  .m-auto-xxl {
+    margin: var(--gap-auto) var(--gap-xxl) !important;
   }
-  .b-auto {
-    bottom: var(--gap-auto) !important;
+  .p-auto-0 {
+    padding: var(--gap-auto) var(--gap-0) !important;
   }
-  .pl-auto {
-    padding-left: var(--gap-auto) !important;
+  .m-auto-0 {
+    margin: var(--gap-auto) var(--gap-0) !important;
   }
-  .ml-auto {
-    margin-left: var(--gap-auto) !important;
+  .p-auto-auto {
+    padding: var(--gap-auto) var(--gap-auto) !important;
   }
-  .l-auto {
-    left: var(--gap-auto) !important;
+  .m-auto-auto {
+    margin: var(--gap-auto) var(--gap-auto) !important;
   }
   .tx-left {
     text-align: left !important;
@@ -3336,6 +3339,743 @@
     align-items: center;
   }
 }
+.flex-row {
+  display: flex !important;
+  flex-wrap: nowrap;
+  flex-direction: row;
+}
+@supports not (appearance: auto) {
+  .flex-row.gap-xxs {
+    gap: 0;
+  }
+  .flex-row.gap-xxs > * + * {
+    margin-left: var(--gap-xxs);
+  }
+  .flex-row.gap-xs {
+    gap: 0;
+  }
+  .flex-row.gap-xs > * + * {
+    margin-left: var(--gap-xs);
+  }
+  .flex-row.gap-sm {
+    gap: 0;
+  }
+  .flex-row.gap-sm > * + * {
+    margin-left: var(--gap-sm);
+  }
+  .flex-row.gap-default {
+    gap: 0;
+  }
+  .flex-row.gap-default > * + * {
+    margin-left: var(--gap-default);
+  }
+  .flex-row.gap-lg {
+    gap: 0;
+  }
+  .flex-row.gap-lg > * + * {
+    margin-left: var(--gap-lg);
+  }
+  .flex-row.gap-xl {
+    gap: 0;
+  }
+  .flex-row.gap-xl > * + * {
+    margin-left: var(--gap-xl);
+  }
+  .flex-row.gap-xxl {
+    gap: 0;
+  }
+  .flex-row.gap-xxl > * + * {
+    margin-left: var(--gap-xxl);
+  }
+  .flex-row.gap-0 {
+    gap: 0;
+  }
+  .flex-row.gap-0 > * + * {
+    margin-left: var(--gap-0);
+  }
+  .flex-row.gap-auto {
+    gap: 0;
+  }
+  .flex-row.gap-auto > * + * {
+    margin-left: var(--gap-auto);
+  }
+}
+
+.flex-column {
+  display: flex !important;
+  flex-wrap: nowrap;
+  flex-direction: column;
+}
+@supports not (appearance: auto) {
+  .flex-column.gap-xxs {
+    gap: 0;
+  }
+  .flex-column.gap-xxs > * + * {
+    margin-top: var(--gap-xxs);
+  }
+  .flex-column.gap-xs {
+    gap: 0;
+  }
+  .flex-column.gap-xs > * + * {
+    margin-top: var(--gap-xs);
+  }
+  .flex-column.gap-sm {
+    gap: 0;
+  }
+  .flex-column.gap-sm > * + * {
+    margin-top: var(--gap-sm);
+  }
+  .flex-column.gap-default {
+    gap: 0;
+  }
+  .flex-column.gap-default > * + * {
+    margin-top: var(--gap-default);
+  }
+  .flex-column.gap-lg {
+    gap: 0;
+  }
+  .flex-column.gap-lg > * + * {
+    margin-top: var(--gap-lg);
+  }
+  .flex-column.gap-xl {
+    gap: 0;
+  }
+  .flex-column.gap-xl > * + * {
+    margin-top: var(--gap-xl);
+  }
+  .flex-column.gap-xxl {
+    gap: 0;
+  }
+  .flex-column.gap-xxl > * + * {
+    margin-top: var(--gap-xxl);
+  }
+  .flex-column.gap-0 {
+    gap: 0;
+  }
+  .flex-column.gap-0 > * + * {
+    margin-top: var(--gap-0);
+  }
+  .flex-column.gap-auto {
+    gap: 0;
+  }
+  .flex-column.gap-auto > * + * {
+    margin-top: var(--gap-auto);
+  }
+}
+
+.flex-row-inline {
+  display: inline-flex !important;
+  flex-direction: row;
+}
+@supports not (appearance: auto) {
+  .flex-row-inline.gap-xxs {
+    gap: 0;
+  }
+  .flex-row-inline.gap-xxs > * + * {
+    margin-left: var(--gap-xxs);
+  }
+  .flex-row-inline.gap-xs {
+    gap: 0;
+  }
+  .flex-row-inline.gap-xs > * + * {
+    margin-left: var(--gap-xs);
+  }
+  .flex-row-inline.gap-sm {
+    gap: 0;
+  }
+  .flex-row-inline.gap-sm > * + * {
+    margin-left: var(--gap-sm);
+  }
+  .flex-row-inline.gap-default {
+    gap: 0;
+  }
+  .flex-row-inline.gap-default > * + * {
+    margin-left: var(--gap-default);
+  }
+  .flex-row-inline.gap-lg {
+    gap: 0;
+  }
+  .flex-row-inline.gap-lg > * + * {
+    margin-left: var(--gap-lg);
+  }
+  .flex-row-inline.gap-xl {
+    gap: 0;
+  }
+  .flex-row-inline.gap-xl > * + * {
+    margin-left: var(--gap-xl);
+  }
+  .flex-row-inline.gap-xxl {
+    gap: 0;
+  }
+  .flex-row-inline.gap-xxl > * + * {
+    margin-left: var(--gap-xxl);
+  }
+  .flex-row-inline.gap-0 {
+    gap: 0;
+  }
+  .flex-row-inline.gap-0 > * + * {
+    margin-left: var(--gap-0);
+  }
+  .flex-row-inline.gap-auto {
+    gap: 0;
+  }
+  .flex-row-inline.gap-auto > * + * {
+    margin-left: var(--gap-auto);
+  }
+}
+
+.flex-column-inline {
+  display: inline-flex !important;
+  flex-direction: column;
+}
+@supports not (appearance: auto) {
+  .flex-column-inline.gap-xxs {
+    gap: 0;
+  }
+  .flex-column-inline.gap-xxs > * + * {
+    margin-top: var(--gap-xxs);
+  }
+  .flex-column-inline.gap-xs {
+    gap: 0;
+  }
+  .flex-column-inline.gap-xs > * + * {
+    margin-top: var(--gap-xs);
+  }
+  .flex-column-inline.gap-sm {
+    gap: 0;
+  }
+  .flex-column-inline.gap-sm > * + * {
+    margin-top: var(--gap-sm);
+  }
+  .flex-column-inline.gap-default {
+    gap: 0;
+  }
+  .flex-column-inline.gap-default > * + * {
+    margin-top: var(--gap-default);
+  }
+  .flex-column-inline.gap-lg {
+    gap: 0;
+  }
+  .flex-column-inline.gap-lg > * + * {
+    margin-top: var(--gap-lg);
+  }
+  .flex-column-inline.gap-xl {
+    gap: 0;
+  }
+  .flex-column-inline.gap-xl > * + * {
+    margin-top: var(--gap-xl);
+  }
+  .flex-column-inline.gap-xxl {
+    gap: 0;
+  }
+  .flex-column-inline.gap-xxl > * + * {
+    margin-top: var(--gap-xxl);
+  }
+  .flex-column-inline.gap-0 {
+    gap: 0;
+  }
+  .flex-column-inline.gap-0 > * + * {
+    margin-top: var(--gap-0);
+  }
+  .flex-column-inline.gap-auto {
+    gap: 0;
+  }
+  .flex-column-inline.gap-auto > * + * {
+    margin-top: var(--gap-auto);
+  }
+}
+
+.flex-auto {
+  flex: 1 0 auto;
+}
+
+.flex-fill {
+  flex: 1 1 auto;
+  overflow: auto;
+}
+
+.flex-min {
+  flex: 0 0 0;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+}
+
+.grid-1 {
+  grid-column-end: span 1;
+}
+
+.grid-2 {
+  grid-column-end: span 2;
+}
+
+.grid-3 {
+  grid-column-end: span 3;
+}
+
+.grid-4 {
+  grid-column-end: span 4;
+}
+
+.grid-5 {
+  grid-column-end: span 5;
+}
+
+.grid-6 {
+  grid-column-end: span 6;
+}
+
+.grid-7 {
+  grid-column-end: span 7;
+}
+
+.grid-8 {
+  grid-column-end: span 8;
+}
+
+.grid-9 {
+  grid-column-end: span 9;
+}
+
+.grid-10 {
+  grid-column-end: span 10;
+}
+
+.grid-11 {
+  grid-column-end: span 11;
+}
+
+.grid-12 {
+  grid-column-end: span 12;
+}
+
+@media (max-width: 1280px) {
+  .grid-sm-1 {
+    grid-column-end: span 1;
+  }
+  .grid-sm-2 {
+    grid-column-end: span 2;
+  }
+  .grid-sm-3 {
+    grid-column-end: span 3;
+  }
+  .grid-sm-4 {
+    grid-column-end: span 4;
+  }
+  .grid-sm-5 {
+    grid-column-end: span 5;
+  }
+  .grid-sm-6 {
+    grid-column-end: span 6;
+  }
+  .grid-sm-7 {
+    grid-column-end: span 7;
+  }
+  .grid-sm-8 {
+    grid-column-end: span 8;
+  }
+  .grid-sm-9 {
+    grid-column-end: span 9;
+  }
+  .grid-sm-10 {
+    grid-column-end: span 10;
+  }
+  .grid-sm-11 {
+    grid-column-end: span 11;
+  }
+  .grid-sm-12 {
+    grid-column-end: span 12;
+  }
+}
+@media (max-width: 1024px) {
+  .grid-xs-1 {
+    grid-column-end: span 1;
+  }
+  .grid-xs-2 {
+    grid-column-end: span 2;
+  }
+  .grid-xs-3 {
+    grid-column-end: span 3;
+  }
+  .grid-xs-4 {
+    grid-column-end: span 4;
+  }
+  .grid-xs-5 {
+    grid-column-end: span 5;
+  }
+  .grid-xs-6 {
+    grid-column-end: span 6;
+  }
+  .grid-xs-7 {
+    grid-column-end: span 7;
+  }
+  .grid-xs-8 {
+    grid-column-end: span 8;
+  }
+  .grid-xs-9 {
+    grid-column-end: span 9;
+  }
+  .grid-xs-10 {
+    grid-column-end: span 10;
+  }
+  .grid-xs-11 {
+    grid-column-end: span 11;
+  }
+  .grid-xs-12 {
+    grid-column-end: span 12;
+  }
+}
+@media (max-width: 800px) {
+  .grid-xxs-1 {
+    grid-column-end: span 1;
+  }
+  .grid-xxs-2 {
+    grid-column-end: span 2;
+  }
+  .grid-xxs-3 {
+    grid-column-end: span 3;
+  }
+  .grid-xxs-4 {
+    grid-column-end: span 4;
+  }
+  .grid-xxs-5 {
+    grid-column-end: span 5;
+  }
+  .grid-xxs-6 {
+    grid-column-end: span 6;
+  }
+  .grid-xxs-7 {
+    grid-column-end: span 7;
+  }
+  .grid-xxs-8 {
+    grid-column-end: span 8;
+  }
+  .grid-xxs-9 {
+    grid-column-end: span 9;
+  }
+  .grid-xxs-10 {
+    grid-column-end: span 10;
+  }
+  .grid-xxs-11 {
+    grid-column-end: span 11;
+  }
+  .grid-xxs-12 {
+    grid-column-end: span 12;
+  }
+}
+.card {
+  display: block;
+  background: var(--control-color);
+  border-radius: var(--border-radius-default);
+  transition: box-shadow 0.3s ease-in-out;
+  box-shadow: 0 calc(2 * var(--elevation-size)) calc(2 * 4 * var(--elevation-size)) var(--trans-lighter), 0 var(--elevation-size) var(--elevation-size) var(--trans-lighter);
+  animation: sd-card var(--animation-duration) ease-out;
+  opacity: 0;
+  transform: translateY(-1em);
+  animation-fill-mode: forwards;
+}
+.card:hover, .card:focus-within {
+  box-shadow: 0 calc(4 * var(--elevation-size)) calc(4 * 4 * var(--elevation-size)) var(--trans-lighter), 0 var(--elevation-size) var(--elevation-size) var(--trans-lighter);
+}
+
+@keyframes sd-card {
+  from {
+    opacity: 0;
+    transform: translateY(-1em);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+.form-box {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-default);
+}
+@supports not (appearance: auto) {
+  .form-box {
+    gap: 0;
+  }
+  .form-box > * + * {
+    margin-top: var(--gap-default);
+  }
+  .form-box.gap-xxs {
+    gap: 0;
+  }
+  .form-box.gap-xxs > * + * {
+    margin-top: var(--gap-xxs);
+  }
+  .form-box.gap-xs {
+    gap: 0;
+  }
+  .form-box.gap-xs > * + * {
+    margin-top: var(--gap-xs);
+  }
+  .form-box.gap-sm {
+    gap: 0;
+  }
+  .form-box.gap-sm > * + * {
+    margin-top: var(--gap-sm);
+  }
+  .form-box.gap-default {
+    gap: 0;
+  }
+  .form-box.gap-default > * + * {
+    margin-top: var(--gap-default);
+  }
+  .form-box.gap-lg {
+    gap: 0;
+  }
+  .form-box.gap-lg > * + * {
+    margin-top: var(--gap-lg);
+  }
+  .form-box.gap-xl {
+    gap: 0;
+  }
+  .form-box.gap-xl > * + * {
+    margin-top: var(--gap-xl);
+  }
+  .form-box.gap-xxl {
+    gap: 0;
+  }
+  .form-box.gap-xxl > * + * {
+    margin-top: var(--gap-xxl);
+  }
+  .form-box.gap-0 {
+    gap: 0;
+  }
+  .form-box.gap-0 > * + * {
+    margin-top: var(--gap-0);
+  }
+  .form-box.gap-auto {
+    gap: 0;
+  }
+  .form-box.gap-auto > * + * {
+    margin-top: var(--gap-auto);
+  }
+}
+.form-box > div,
+.form-box > .form-box-item {
+  display: block;
+}
+.form-box > div > label,
+.form-box > .form-box-item > label {
+  display: block;
+  margin-bottom: var(--gap-xs);
+  white-space: nowrap;
+  font-weight: bold;
+  border: 1px solid transparent;
+}
+@media all and (pointer: coarse) {
+  .form-box > div,
+  .form-box > .form-box-item {
+    margin-bottom: var(--gap-default);
+  }
+  .form-box > div > label,
+  .form-box > .form-box-item > label {
+    margin-bottom: var(--gap-xxs);
+  }
+}
+
+.form-box-inline {
+  display: inline-flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+  gap: var(--gap-sm);
+}
+@supports not (appearance: auto) {
+  .form-box-inline {
+    gap: 0;
+  }
+  .form-box-inline > * + * {
+    margin-left: var(--gap-sm);
+  }
+  .form-box-inline.gap-xxs {
+    gap: 0;
+  }
+  .form-box-inline.gap-xxs > * + * {
+    margin-left: var(--gap-xxs);
+  }
+  .form-box-inline.gap-xs {
+    gap: 0;
+  }
+  .form-box-inline.gap-xs > * + * {
+    margin-left: var(--gap-xs);
+  }
+  .form-box-inline.gap-sm {
+    gap: 0;
+  }
+  .form-box-inline.gap-sm > * + * {
+    margin-left: var(--gap-sm);
+  }
+  .form-box-inline.gap-default {
+    gap: 0;
+  }
+  .form-box-inline.gap-default > * + * {
+    margin-left: var(--gap-default);
+  }
+  .form-box-inline.gap-lg {
+    gap: 0;
+  }
+  .form-box-inline.gap-lg > * + * {
+    margin-left: var(--gap-lg);
+  }
+  .form-box-inline.gap-xl {
+    gap: 0;
+  }
+  .form-box-inline.gap-xl > * + * {
+    margin-left: var(--gap-xl);
+  }
+  .form-box-inline.gap-xxl {
+    gap: 0;
+  }
+  .form-box-inline.gap-xxl > * + * {
+    margin-left: var(--gap-xxl);
+  }
+  .form-box-inline.gap-0 {
+    gap: 0;
+  }
+  .form-box-inline.gap-0 > * + * {
+    margin-left: var(--gap-0);
+  }
+  .form-box-inline.gap-auto {
+    gap: 0;
+  }
+  .form-box-inline.gap-auto > * + * {
+    margin-left: var(--gap-auto);
+  }
+}
+.form-box-inline > div,
+.form-box-inline > .form-box-item {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+}
+.form-box-inline > div > label,
+.form-box-inline > .form-box-item > label {
+  display: block;
+  white-space: nowrap;
+  font-weight: bold;
+  border: 1px solid transparent;
+  padding-left: var(--gap-sm);
+  padding-right: var(--gap-sm);
+}
+
+.form-table {
+  display: table;
+  border-collapse: separate;
+  border-spacing: 0;
+  border: 0;
+}
+.form-table > * > tr > *,
+.form-table > tr > * {
+  padding: 0 var(--gap-default) var(--gap-sm) 0;
+  vertical-align: middle;
+}
+.form-table > * > tr > *:last-child,
+.form-table > tr > *:last-child {
+  padding-right: 0;
+}
+.form-table > * > tr:last-child > *,
+.form-table > tr:last-child > * {
+  padding-bottom: 0;
+}
+.form-table > * > tr > th,
+.form-table > tr > th {
+  padding-left: var(--gap-sm);
+  text-align: right;
+  width: 0;
+  white-space: nowrap;
+}
+.form-table > * > tr > th.form-table-header,
+.form-table > tr > th.form-table-header {
+  text-align: left;
+  line-height: var(--line-height);
+  margin-bottom: var(--gap-sm);
+  color: var(--theme-gray-default);
+  font-weight: normal;
+  padding: var(--gap-xxl) 0 var(--gap-sm) 0;
+  font-size: var(--font-size-sm);
+}
+.form-table > tbody:first-child > tr:first-child > th.form-table-header,
+.form-table > tr:first-child > th.form-table-header {
+  padding-top: 0;
+}
+
+.table {
+  display: table;
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  border-right: 1px solid var(--border-color-default);
+  border-bottom: 1px solid var(--border-color-default);
+}
+.table > * > tr > *,
+.table > tr > * {
+  padding: var(--gap-xs) var(--gap-sm);
+  border-left: 1px solid var(--theme-gray-lighter);
+  border-top: 1px solid var(--theme-gray-lighter);
+}
+.table > * > tr > *:first-child,
+.table > tr > *:first-child {
+  border-left: 1px solid var(--border-color-default);
+}
+.table > * > tr:first-child > *,
+.table > tr:first-child > * {
+  border-top: 1px solid var(--border-color-default);
+}
+.table > tbody > tr:first-child,
+.table > tr:first-child {
+  border-top: 1px solid var(--border-color-default);
+}
+.table > tbody > tr > th,
+.table > tr > th {
+  background: var(--theme-gray-lightest);
+}
+.table > tbody > tr > td,
+.table > tr > td {
+  vertical-align: top;
+}
+.table > thead > tr > th {
+  background: var(--theme-gray-lightest);
+}
+.table.table-inset {
+  border-right: none;
+  border-bottom: none;
+}
+.table.table-inset > * > tr > *:first-child,
+.table.table-inset > tr > *:first-child {
+  border-left: none;
+}
+.table.table-inset > *:first-child > tr:first-child > *,
+.table.table-inset > tr:first-child > * {
+  border-top: none;
+}
+.table.table-inline {
+  width: auto;
+}
+.table.table-bd-v {
+  border-bottom: none;
+}
+.table.table-bd-v > * > tr > *,
+.table.table-bd-v > tr > * {
+  border-top: none;
+}
+.table.table-bd-h {
+  border-right: none;
+}
+.table.table-bd-h > tbody > tr > td:first-child,
+.table.table-bd-h > tr > td:first-child {
+  border-left: none;
+}
+.table.table-bd-h > * > tr > *,
+.table.table-bd-h > tr > * {
+  border-left: none;
+}
+
 ng-icon {
   --ng-icon__size: 1.33em;
   vertical-align: -0.2em !important;