@zhang_jifan/fanui 2.1.0

package/dist/modules/fanui-layout.css

@@ -0,0 +1,4399 @@
+/* fanUI v2.1.0 · module: layout（独立产物，自带令牌） */
+.fanui-container {
+  width: 100%;
+  padding-inline-end: 16px;
+  padding-inline-start: 16px;
+  margin-inline-end: auto;
+  margin-inline-start: auto;
+  box-sizing: border-box;
+}
+@media (min-width: 576px) {
+  .fanui-container {
+    max-width: 540px;
+  }
+}
+@media (min-width: 768px) {
+  .fanui-container {
+    max-width: 720px;
+  }
+}
+@media (min-width: 992px) {
+  .fanui-container {
+    max-width: 960px;
+  }
+}
+@media (min-width: 1200px) {
+  .fanui-container {
+    max-width: 1140px;
+  }
+}
+@media (min-width: 1400px) {
+  .fanui-container {
+    max-width: 1320px;
+  }
+}
+
+.fanui-container-fluid {
+  width: 100%;
+  padding-inline-end: 16px;
+  padding-inline-start: 16px;
+  margin-inline-end: auto;
+  margin-inline-start: auto;
+  box-sizing: border-box;
+}
+
+.fanui-container-full {
+  width: 100%;
+  margin-inline-end: auto;
+  margin-inline-start: auto;
+}
+
+.fanui-container-sm {
+  width: 100%;
+  padding-inline-end: 16px;
+  padding-inline-start: 16px;
+  margin-inline-end: auto;
+  margin-inline-start: auto;
+  box-sizing: border-box;
+}
+@media (min-width: 576px) {
+  .fanui-container-sm {
+    max-width: 540px;
+  }
+}
+
+.fanui-container-md {
+  width: 100%;
+  padding-inline-end: 16px;
+  padding-inline-start: 16px;
+  margin-inline-end: auto;
+  margin-inline-start: auto;
+  box-sizing: border-box;
+}
+@media (min-width: 768px) {
+  .fanui-container-md {
+    max-width: 720px;
+  }
+}
+
+.fanui-container-lg {
+  width: 100%;
+  padding-inline-end: 16px;
+  padding-inline-start: 16px;
+  margin-inline-end: auto;
+  margin-inline-start: auto;
+  box-sizing: border-box;
+}
+@media (min-width: 992px) {
+  .fanui-container-lg {
+    max-width: 960px;
+  }
+}
+
+.fanui-container-xl {
+  width: 100%;
+  padding-inline-end: 16px;
+  padding-inline-start: 16px;
+  margin-inline-end: auto;
+  margin-inline-start: auto;
+  box-sizing: border-box;
+}
+@media (min-width: 1200px) {
+  .fanui-container-xl {
+    max-width: 1140px;
+  }
+}
+
+.fanui-container-xxl {
+  width: 100%;
+  padding-inline-end: 16px;
+  padding-inline-start: 16px;
+  margin-inline-end: auto;
+  margin-inline-start: auto;
+  box-sizing: border-box;
+}
+@media (min-width: 1400px) {
+  .fanui-container-xxl {
+    max-width: 1320px;
+  }
+}
+
+.fanui-layout {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+.fanui-layout__header {
+  flex: 0 0 auto;
+  z-index: var(--fanui-z-sticky, 1020);
+}
+.fanui-layout__body {
+  flex: 1 1 auto;
+  display: flex;
+  min-height: 0;
+}
+.fanui-layout__aside {
+  flex: 0 0 auto;
+  width: var(--fanui-layout-aside-width, 240px);
+  overflow-y: auto;
+}
+.fanui-layout__main {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow-x: hidden;
+}
+.fanui-layout__footer {
+  flex: 0 0 auto;
+}
+.fanui-layout--aside-end .fanui-layout__aside {
+  order: 2;
+}
+.fanui-layout--aside-end .fanui-layout__main {
+  order: 1;
+}
+@media (max-width: 767.95px) {
+  .fanui-layout__aside {
+    width: 100%;
+    max-width: none;
+  }
+  .fanui-layout--responsive .fanui-layout__body {
+    flex-direction: column;
+  }
+}
+
+.fanui-main {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.fanui-aside {
+  flex: 0 0 auto;
+}
+
+.fanui-section {
+  padding-block: var(--fanui-space-8);
+}
+
+.fanui-sticky-top {
+  position: sticky;
+  top: 0;
+  z-index: var(--fanui-z-sticky, 1020);
+}
+
+.fanui-sticky-bottom {
+  position: sticky;
+  bottom: 0;
+  z-index: var(--fanui-z-sticky, 1020);
+}
+
+.fanui-row {
+  --fanui-gutter-x: 24px;
+  --fanui-gutter-y: 0;
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: 0;
+  margin-inline-end: -12px;
+  margin-inline-start: -12px;
+}
+.fanui-row > * {
+  box-sizing: border-box;
+  flex-shrink: 0;
+  width: 100%;
+  max-width: 100%;
+  padding-inline-end: calc(var(--fanui-gutter-x, 24px) * 0.5);
+  padding-inline-start: calc(var(--fanui-gutter-x, 24px) * 0.5);
+  margin-top: var(--fanui-gutter-y, 0);
+}
+
+.fanui-row--no-gutters {
+  --fanui-gutter-x: 0;
+  --fanui-gutter-y: 0;
+}
+
+.fanui-row--inline {
+  display: inline-flex;
+}
+
+.fanui-col {
+  flex: 1 0 0%;
+  min-width: 0;
+}
+
+.fanui-col-auto {
+  flex: 0 0 auto;
+  width: auto;
+}
+
+.fanui-col-1 {
+  flex: 0 0 auto;
+  width: 8.3333333333%;
+  max-width: 100%;
+}
+
+.fanui-col-2 {
+  flex: 0 0 auto;
+  width: 16.6666666667%;
+  max-width: 100%;
+}
+
+.fanui-col-3 {
+  flex: 0 0 auto;
+  width: 25%;
+  max-width: 100%;
+}
+
+.fanui-col-4 {
+  flex: 0 0 auto;
+  width: 33.3333333333%;
+  max-width: 100%;
+}
+
+.fanui-col-5 {
+  flex: 0 0 auto;
+  width: 41.6666666667%;
+  max-width: 100%;
+}
+
+.fanui-col-6 {
+  flex: 0 0 auto;
+  width: 50%;
+  max-width: 100%;
+}
+
+.fanui-col-7 {
+  flex: 0 0 auto;
+  width: 58.3333333333%;
+  max-width: 100%;
+}
+
+.fanui-col-8 {
+  flex: 0 0 auto;
+  width: 66.6666666667%;
+  max-width: 100%;
+}
+
+.fanui-col-9 {
+  flex: 0 0 auto;
+  width: 75%;
+  max-width: 100%;
+}
+
+.fanui-col-10 {
+  flex: 0 0 auto;
+  width: 83.3333333333%;
+  max-width: 100%;
+}
+
+.fanui-col-11 {
+  flex: 0 0 auto;
+  width: 91.6666666667%;
+  max-width: 100%;
+}
+
+.fanui-col-12 {
+  flex: 0 0 auto;
+  width: 100%;
+  max-width: 100%;
+}
+
+.fanui-col-12 {
+  flex: 0 0 auto;
+  width: 100%;
+}
+
+.fanui-col {
+  flex: 1 0 0%;
+  min-width: 0;
+}
+
+.fanui-col-auto {
+  flex: 0 0 auto;
+  width: auto;
+  max-width: 100%;
+}
+
+.fanui-col-1 {
+  flex: 0 0 auto;
+  width: 8.3333333333%;
+  max-width: 100%;
+}
+
+.fanui-col-2 {
+  flex: 0 0 auto;
+  width: 16.6666666667%;
+  max-width: 100%;
+}
+
+.fanui-col-3 {
+  flex: 0 0 auto;
+  width: 25%;
+  max-width: 100%;
+}
+
+.fanui-col-4 {
+  flex: 0 0 auto;
+  width: 33.3333333333%;
+  max-width: 100%;
+}
+
+.fanui-col-5 {
+  flex: 0 0 auto;
+  width: 41.6666666667%;
+  max-width: 100%;
+}
+
+.fanui-col-6 {
+  flex: 0 0 auto;
+  width: 50%;
+  max-width: 100%;
+}
+
+.fanui-col-7 {
+  flex: 0 0 auto;
+  width: 58.3333333333%;
+  max-width: 100%;
+}
+
+.fanui-col-8 {
+  flex: 0 0 auto;
+  width: 66.6666666667%;
+  max-width: 100%;
+}
+
+.fanui-col-9 {
+  flex: 0 0 auto;
+  width: 75%;
+  max-width: 100%;
+}
+
+.fanui-col-10 {
+  flex: 0 0 auto;
+  width: 83.3333333333%;
+  max-width: 100%;
+}
+
+.fanui-col-11 {
+  flex: 0 0 auto;
+  width: 91.6666666667%;
+  max-width: 100%;
+}
+
+.fanui-col-12 {
+  flex: 0 0 auto;
+  width: 100%;
+  max-width: 100%;
+}
+
+.fanui-offset-0 {
+  margin-inline-start: 0;
+}
+
+.fanui-offset-1 {
+  margin-inline-start: 8.3333333333%;
+}
+
+.fanui-offset-2 {
+  margin-inline-start: 16.6666666667%;
+}
+
+.fanui-offset-3 {
+  margin-inline-start: 25%;
+}
+
+.fanui-offset-4 {
+  margin-inline-start: 33.3333333333%;
+}
+
+.fanui-offset-5 {
+  margin-inline-start: 41.6666666667%;
+}
+
+.fanui-offset-6 {
+  margin-inline-start: 50%;
+}
+
+.fanui-offset-7 {
+  margin-inline-start: 58.3333333333%;
+}
+
+.fanui-offset-8 {
+  margin-inline-start: 66.6666666667%;
+}
+
+.fanui-offset-9 {
+  margin-inline-start: 75%;
+}
+
+.fanui-offset-10 {
+  margin-inline-start: 83.3333333333%;
+}
+
+.fanui-offset-11 {
+  margin-inline-start: 91.6666666667%;
+}
+
+.fanui-order-0 {
+  order: 0;
+}
+
+.fanui-order-1 {
+  order: 1;
+}
+
+.fanui-order-2 {
+  order: 2;
+}
+
+.fanui-order-3 {
+  order: 3;
+}
+
+.fanui-order-4 {
+  order: 4;
+}
+
+.fanui-order-5 {
+  order: 5;
+}
+
+.fanui-order-6 {
+  order: 6;
+}
+
+.fanui-order-7 {
+  order: 7;
+}
+
+.fanui-order-8 {
+  order: 8;
+}
+
+.fanui-order-9 {
+  order: 9;
+}
+
+.fanui-order-10 {
+  order: 10;
+}
+
+.fanui-order-11 {
+  order: 11;
+}
+
+.fanui-order-12 {
+  order: 12;
+}
+
+.fanui-order-first {
+  order: -1;
+}
+
+.fanui-order-last {
+  order: 13;
+}
+
+@media (min-width: 576px) {
+  .fanui-col-sm {
+    flex: 1 0 0%;
+    min-width: 0;
+  }
+  .fanui-col-sm-auto {
+    flex: 0 0 auto;
+    width: auto;
+    max-width: 100%;
+  }
+  .fanui-col-sm-1 {
+    flex: 0 0 auto;
+    width: 8.3333333333%;
+    max-width: 100%;
+  }
+  .fanui-col-sm-2 {
+    flex: 0 0 auto;
+    width: 16.6666666667%;
+    max-width: 100%;
+  }
+  .fanui-col-sm-3 {
+    flex: 0 0 auto;
+    width: 25%;
+    max-width: 100%;
+  }
+  .fanui-col-sm-4 {
+    flex: 0 0 auto;
+    width: 33.3333333333%;
+    max-width: 100%;
+  }
+  .fanui-col-sm-5 {
+    flex: 0 0 auto;
+    width: 41.6666666667%;
+    max-width: 100%;
+  }
+  .fanui-col-sm-6 {
+    flex: 0 0 auto;
+    width: 50%;
+    max-width: 100%;
+  }
+  .fanui-col-sm-7 {
+    flex: 0 0 auto;
+    width: 58.3333333333%;
+    max-width: 100%;
+  }
+  .fanui-col-sm-8 {
+    flex: 0 0 auto;
+    width: 66.6666666667%;
+    max-width: 100%;
+  }
+  .fanui-col-sm-9 {
+    flex: 0 0 auto;
+    width: 75%;
+    max-width: 100%;
+  }
+  .fanui-col-sm-10 {
+    flex: 0 0 auto;
+    width: 83.3333333333%;
+    max-width: 100%;
+  }
+  .fanui-col-sm-11 {
+    flex: 0 0 auto;
+    width: 91.6666666667%;
+    max-width: 100%;
+  }
+  .fanui-col-sm-12 {
+    flex: 0 0 auto;
+    width: 100%;
+    max-width: 100%;
+  }
+  .fanui-offset-sm-0 {
+    margin-inline-start: 0;
+  }
+  .fanui-offset-sm-1 {
+    margin-inline-start: 8.3333333333%;
+  }
+  .fanui-offset-sm-2 {
+    margin-inline-start: 16.6666666667%;
+  }
+  .fanui-offset-sm-3 {
+    margin-inline-start: 25%;
+  }
+  .fanui-offset-sm-4 {
+    margin-inline-start: 33.3333333333%;
+  }
+  .fanui-offset-sm-5 {
+    margin-inline-start: 41.6666666667%;
+  }
+  .fanui-offset-sm-6 {
+    margin-inline-start: 50%;
+  }
+  .fanui-offset-sm-7 {
+    margin-inline-start: 58.3333333333%;
+  }
+  .fanui-offset-sm-8 {
+    margin-inline-start: 66.6666666667%;
+  }
+  .fanui-offset-sm-9 {
+    margin-inline-start: 75%;
+  }
+  .fanui-offset-sm-10 {
+    margin-inline-start: 83.3333333333%;
+  }
+  .fanui-offset-sm-11 {
+    margin-inline-start: 91.6666666667%;
+  }
+  .fanui-order-sm-0 {
+    order: 0;
+  }
+  .fanui-order-sm-1 {
+    order: 1;
+  }
+  .fanui-order-sm-2 {
+    order: 2;
+  }
+  .fanui-order-sm-3 {
+    order: 3;
+  }
+  .fanui-order-sm-4 {
+    order: 4;
+  }
+  .fanui-order-sm-5 {
+    order: 5;
+  }
+  .fanui-order-sm-6 {
+    order: 6;
+  }
+  .fanui-order-sm-7 {
+    order: 7;
+  }
+  .fanui-order-sm-8 {
+    order: 8;
+  }
+  .fanui-order-sm-9 {
+    order: 9;
+  }
+  .fanui-order-sm-10 {
+    order: 10;
+  }
+  .fanui-order-sm-11 {
+    order: 11;
+  }
+  .fanui-order-sm-12 {
+    order: 12;
+  }
+  .fanui-order-sm-first {
+    order: -1;
+  }
+  .fanui-order-sm-last {
+    order: 13;
+  }
+}
+@media (min-width: 768px) {
+  .fanui-col-md {
+    flex: 1 0 0%;
+    min-width: 0;
+  }
+  .fanui-col-md-auto {
+    flex: 0 0 auto;
+    width: auto;
+    max-width: 100%;
+  }
+  .fanui-col-md-1 {
+    flex: 0 0 auto;
+    width: 8.3333333333%;
+    max-width: 100%;
+  }
+  .fanui-col-md-2 {
+    flex: 0 0 auto;
+    width: 16.6666666667%;
+    max-width: 100%;
+  }
+  .fanui-col-md-3 {
+    flex: 0 0 auto;
+    width: 25%;
+    max-width: 100%;
+  }
+  .fanui-col-md-4 {
+    flex: 0 0 auto;
+    width: 33.3333333333%;
+    max-width: 100%;
+  }
+  .fanui-col-md-5 {
+    flex: 0 0 auto;
+    width: 41.6666666667%;
+    max-width: 100%;
+  }
+  .fanui-col-md-6 {
+    flex: 0 0 auto;
+    width: 50%;
+    max-width: 100%;
+  }
+  .fanui-col-md-7 {
+    flex: 0 0 auto;
+    width: 58.3333333333%;
+    max-width: 100%;
+  }
+  .fanui-col-md-8 {
+    flex: 0 0 auto;
+    width: 66.6666666667%;
+    max-width: 100%;
+  }
+  .fanui-col-md-9 {
+    flex: 0 0 auto;
+    width: 75%;
+    max-width: 100%;
+  }
+  .fanui-col-md-10 {
+    flex: 0 0 auto;
+    width: 83.3333333333%;
+    max-width: 100%;
+  }
+  .fanui-col-md-11 {
+    flex: 0 0 auto;
+    width: 91.6666666667%;
+    max-width: 100%;
+  }
+  .fanui-col-md-12 {
+    flex: 0 0 auto;
+    width: 100%;
+    max-width: 100%;
+  }
+  .fanui-offset-md-0 {
+    margin-inline-start: 0;
+  }
+  .fanui-offset-md-1 {
+    margin-inline-start: 8.3333333333%;
+  }
+  .fanui-offset-md-2 {
+    margin-inline-start: 16.6666666667%;
+  }
+  .fanui-offset-md-3 {
+    margin-inline-start: 25%;
+  }
+  .fanui-offset-md-4 {
+    margin-inline-start: 33.3333333333%;
+  }
+  .fanui-offset-md-5 {
+    margin-inline-start: 41.6666666667%;
+  }
+  .fanui-offset-md-6 {
+    margin-inline-start: 50%;
+  }
+  .fanui-offset-md-7 {
+    margin-inline-start: 58.3333333333%;
+  }
+  .fanui-offset-md-8 {
+    margin-inline-start: 66.6666666667%;
+  }
+  .fanui-offset-md-9 {
+    margin-inline-start: 75%;
+  }
+  .fanui-offset-md-10 {
+    margin-inline-start: 83.3333333333%;
+  }
+  .fanui-offset-md-11 {
+    margin-inline-start: 91.6666666667%;
+  }
+  .fanui-order-md-0 {
+    order: 0;
+  }
+  .fanui-order-md-1 {
+    order: 1;
+  }
+  .fanui-order-md-2 {
+    order: 2;
+  }
+  .fanui-order-md-3 {
+    order: 3;
+  }
+  .fanui-order-md-4 {
+    order: 4;
+  }
+  .fanui-order-md-5 {
+    order: 5;
+  }
+  .fanui-order-md-6 {
+    order: 6;
+  }
+  .fanui-order-md-7 {
+    order: 7;
+  }
+  .fanui-order-md-8 {
+    order: 8;
+  }
+  .fanui-order-md-9 {
+    order: 9;
+  }
+  .fanui-order-md-10 {
+    order: 10;
+  }
+  .fanui-order-md-11 {
+    order: 11;
+  }
+  .fanui-order-md-12 {
+    order: 12;
+  }
+  .fanui-order-md-first {
+    order: -1;
+  }
+  .fanui-order-md-last {
+    order: 13;
+  }
+}
+@media (min-width: 992px) {
+  .fanui-col-lg {
+    flex: 1 0 0%;
+    min-width: 0;
+  }
+  .fanui-col-lg-auto {
+    flex: 0 0 auto;
+    width: auto;
+    max-width: 100%;
+  }
+  .fanui-col-lg-1 {
+    flex: 0 0 auto;
+    width: 8.3333333333%;
+    max-width: 100%;
+  }
+  .fanui-col-lg-2 {
+    flex: 0 0 auto;
+    width: 16.6666666667%;
+    max-width: 100%;
+  }
+  .fanui-col-lg-3 {
+    flex: 0 0 auto;
+    width: 25%;
+    max-width: 100%;
+  }
+  .fanui-col-lg-4 {
+    flex: 0 0 auto;
+    width: 33.3333333333%;
+    max-width: 100%;
+  }
+  .fanui-col-lg-5 {
+    flex: 0 0 auto;
+    width: 41.6666666667%;
+    max-width: 100%;
+  }
+  .fanui-col-lg-6 {
+    flex: 0 0 auto;
+    width: 50%;
+    max-width: 100%;
+  }
+  .fanui-col-lg-7 {
+    flex: 0 0 auto;
+    width: 58.3333333333%;
+    max-width: 100%;
+  }
+  .fanui-col-lg-8 {
+    flex: 0 0 auto;
+    width: 66.6666666667%;
+    max-width: 100%;
+  }
+  .fanui-col-lg-9 {
+    flex: 0 0 auto;
+    width: 75%;
+    max-width: 100%;
+  }
+  .fanui-col-lg-10 {
+    flex: 0 0 auto;
+    width: 83.3333333333%;
+    max-width: 100%;
+  }
+  .fanui-col-lg-11 {
+    flex: 0 0 auto;
+    width: 91.6666666667%;
+    max-width: 100%;
+  }
+  .fanui-col-lg-12 {
+    flex: 0 0 auto;
+    width: 100%;
+    max-width: 100%;
+  }
+  .fanui-offset-lg-0 {
+    margin-inline-start: 0;
+  }
+  .fanui-offset-lg-1 {
+    margin-inline-start: 8.3333333333%;
+  }
+  .fanui-offset-lg-2 {
+    margin-inline-start: 16.6666666667%;
+  }
+  .fanui-offset-lg-3 {
+    margin-inline-start: 25%;
+  }
+  .fanui-offset-lg-4 {
+    margin-inline-start: 33.3333333333%;
+  }
+  .fanui-offset-lg-5 {
+    margin-inline-start: 41.6666666667%;
+  }
+  .fanui-offset-lg-6 {
+    margin-inline-start: 50%;
+  }
+  .fanui-offset-lg-7 {
+    margin-inline-start: 58.3333333333%;
+  }
+  .fanui-offset-lg-8 {
+    margin-inline-start: 66.6666666667%;
+  }
+  .fanui-offset-lg-9 {
+    margin-inline-start: 75%;
+  }
+  .fanui-offset-lg-10 {
+    margin-inline-start: 83.3333333333%;
+  }
+  .fanui-offset-lg-11 {
+    margin-inline-start: 91.6666666667%;
+  }
+  .fanui-order-lg-0 {
+    order: 0;
+  }
+  .fanui-order-lg-1 {
+    order: 1;
+  }
+  .fanui-order-lg-2 {
+    order: 2;
+  }
+  .fanui-order-lg-3 {
+    order: 3;
+  }
+  .fanui-order-lg-4 {
+    order: 4;
+  }
+  .fanui-order-lg-5 {
+    order: 5;
+  }
+  .fanui-order-lg-6 {
+    order: 6;
+  }
+  .fanui-order-lg-7 {
+    order: 7;
+  }
+  .fanui-order-lg-8 {
+    order: 8;
+  }
+  .fanui-order-lg-9 {
+    order: 9;
+  }
+  .fanui-order-lg-10 {
+    order: 10;
+  }
+  .fanui-order-lg-11 {
+    order: 11;
+  }
+  .fanui-order-lg-12 {
+    order: 12;
+  }
+  .fanui-order-lg-first {
+    order: -1;
+  }
+  .fanui-order-lg-last {
+    order: 13;
+  }
+}
+@media (min-width: 1200px) {
+  .fanui-col-xl {
+    flex: 1 0 0%;
+    min-width: 0;
+  }
+  .fanui-col-xl-auto {
+    flex: 0 0 auto;
+    width: auto;
+    max-width: 100%;
+  }
+  .fanui-col-xl-1 {
+    flex: 0 0 auto;
+    width: 8.3333333333%;
+    max-width: 100%;
+  }
+  .fanui-col-xl-2 {
+    flex: 0 0 auto;
+    width: 16.6666666667%;
+    max-width: 100%;
+  }
+  .fanui-col-xl-3 {
+    flex: 0 0 auto;
+    width: 25%;
+    max-width: 100%;
+  }
+  .fanui-col-xl-4 {
+    flex: 0 0 auto;
+    width: 33.3333333333%;
+    max-width: 100%;
+  }
+  .fanui-col-xl-5 {
+    flex: 0 0 auto;
+    width: 41.6666666667%;
+    max-width: 100%;
+  }
+  .fanui-col-xl-6 {
+    flex: 0 0 auto;
+    width: 50%;
+    max-width: 100%;
+  }
+  .fanui-col-xl-7 {
+    flex: 0 0 auto;
+    width: 58.3333333333%;
+    max-width: 100%;
+  }
+  .fanui-col-xl-8 {
+    flex: 0 0 auto;
+    width: 66.6666666667%;
+    max-width: 100%;
+  }
+  .fanui-col-xl-9 {
+    flex: 0 0 auto;
+    width: 75%;
+    max-width: 100%;
+  }
+  .fanui-col-xl-10 {
+    flex: 0 0 auto;
+    width: 83.3333333333%;
+    max-width: 100%;
+  }
+  .fanui-col-xl-11 {
+    flex: 0 0 auto;
+    width: 91.6666666667%;
+    max-width: 100%;
+  }
+  .fanui-col-xl-12 {
+    flex: 0 0 auto;
+    width: 100%;
+    max-width: 100%;
+  }
+  .fanui-offset-xl-0 {
+    margin-inline-start: 0;
+  }
+  .fanui-offset-xl-1 {
+    margin-inline-start: 8.3333333333%;
+  }
+  .fanui-offset-xl-2 {
+    margin-inline-start: 16.6666666667%;
+  }
+  .fanui-offset-xl-3 {
+    margin-inline-start: 25%;
+  }
+  .fanui-offset-xl-4 {
+    margin-inline-start: 33.3333333333%;
+  }
+  .fanui-offset-xl-5 {
+    margin-inline-start: 41.6666666667%;
+  }
+  .fanui-offset-xl-6 {
+    margin-inline-start: 50%;
+  }
+  .fanui-offset-xl-7 {
+    margin-inline-start: 58.3333333333%;
+  }
+  .fanui-offset-xl-8 {
+    margin-inline-start: 66.6666666667%;
+  }
+  .fanui-offset-xl-9 {
+    margin-inline-start: 75%;
+  }
+  .fanui-offset-xl-10 {
+    margin-inline-start: 83.3333333333%;
+  }
+  .fanui-offset-xl-11 {
+    margin-inline-start: 91.6666666667%;
+  }
+  .fanui-order-xl-0 {
+    order: 0;
+  }
+  .fanui-order-xl-1 {
+    order: 1;
+  }
+  .fanui-order-xl-2 {
+    order: 2;
+  }
+  .fanui-order-xl-3 {
+    order: 3;
+  }
+  .fanui-order-xl-4 {
+    order: 4;
+  }
+  .fanui-order-xl-5 {
+    order: 5;
+  }
+  .fanui-order-xl-6 {
+    order: 6;
+  }
+  .fanui-order-xl-7 {
+    order: 7;
+  }
+  .fanui-order-xl-8 {
+    order: 8;
+  }
+  .fanui-order-xl-9 {
+    order: 9;
+  }
+  .fanui-order-xl-10 {
+    order: 10;
+  }
+  .fanui-order-xl-11 {
+    order: 11;
+  }
+  .fanui-order-xl-12 {
+    order: 12;
+  }
+  .fanui-order-xl-first {
+    order: -1;
+  }
+  .fanui-order-xl-last {
+    order: 13;
+  }
+}
+@media (min-width: 1400px) {
+  .fanui-col-xxl {
+    flex: 1 0 0%;
+    min-width: 0;
+  }
+  .fanui-col-xxl-auto {
+    flex: 0 0 auto;
+    width: auto;
+    max-width: 100%;
+  }
+  .fanui-col-xxl-1 {
+    flex: 0 0 auto;
+    width: 8.3333333333%;
+    max-width: 100%;
+  }
+  .fanui-col-xxl-2 {
+    flex: 0 0 auto;
+    width: 16.6666666667%;
+    max-width: 100%;
+  }
+  .fanui-col-xxl-3 {
+    flex: 0 0 auto;
+    width: 25%;
+    max-width: 100%;
+  }
+  .fanui-col-xxl-4 {
+    flex: 0 0 auto;
+    width: 33.3333333333%;
+    max-width: 100%;
+  }
+  .fanui-col-xxl-5 {
+    flex: 0 0 auto;
+    width: 41.6666666667%;
+    max-width: 100%;
+  }
+  .fanui-col-xxl-6 {
+    flex: 0 0 auto;
+    width: 50%;
+    max-width: 100%;
+  }
+  .fanui-col-xxl-7 {
+    flex: 0 0 auto;
+    width: 58.3333333333%;
+    max-width: 100%;
+  }
+  .fanui-col-xxl-8 {
+    flex: 0 0 auto;
+    width: 66.6666666667%;
+    max-width: 100%;
+  }
+  .fanui-col-xxl-9 {
+    flex: 0 0 auto;
+    width: 75%;
+    max-width: 100%;
+  }
+  .fanui-col-xxl-10 {
+    flex: 0 0 auto;
+    width: 83.3333333333%;
+    max-width: 100%;
+  }
+  .fanui-col-xxl-11 {
+    flex: 0 0 auto;
+    width: 91.6666666667%;
+    max-width: 100%;
+  }
+  .fanui-col-xxl-12 {
+    flex: 0 0 auto;
+    width: 100%;
+    max-width: 100%;
+  }
+  .fanui-offset-xxl-0 {
+    margin-inline-start: 0;
+  }
+  .fanui-offset-xxl-1 {
+    margin-inline-start: 8.3333333333%;
+  }
+  .fanui-offset-xxl-2 {
+    margin-inline-start: 16.6666666667%;
+  }
+  .fanui-offset-xxl-3 {
+    margin-inline-start: 25%;
+  }
+  .fanui-offset-xxl-4 {
+    margin-inline-start: 33.3333333333%;
+  }
+  .fanui-offset-xxl-5 {
+    margin-inline-start: 41.6666666667%;
+  }
+  .fanui-offset-xxl-6 {
+    margin-inline-start: 50%;
+  }
+  .fanui-offset-xxl-7 {
+    margin-inline-start: 58.3333333333%;
+  }
+  .fanui-offset-xxl-8 {
+    margin-inline-start: 66.6666666667%;
+  }
+  .fanui-offset-xxl-9 {
+    margin-inline-start: 75%;
+  }
+  .fanui-offset-xxl-10 {
+    margin-inline-start: 83.3333333333%;
+  }
+  .fanui-offset-xxl-11 {
+    margin-inline-start: 91.6666666667%;
+  }
+  .fanui-order-xxl-0 {
+    order: 0;
+  }
+  .fanui-order-xxl-1 {
+    order: 1;
+  }
+  .fanui-order-xxl-2 {
+    order: 2;
+  }
+  .fanui-order-xxl-3 {
+    order: 3;
+  }
+  .fanui-order-xxl-4 {
+    order: 4;
+  }
+  .fanui-order-xxl-5 {
+    order: 5;
+  }
+  .fanui-order-xxl-6 {
+    order: 6;
+  }
+  .fanui-order-xxl-7 {
+    order: 7;
+  }
+  .fanui-order-xxl-8 {
+    order: 8;
+  }
+  .fanui-order-xxl-9 {
+    order: 9;
+  }
+  .fanui-order-xxl-10 {
+    order: 10;
+  }
+  .fanui-order-xxl-11 {
+    order: 11;
+  }
+  .fanui-order-xxl-12 {
+    order: 12;
+  }
+  .fanui-order-xxl-first {
+    order: -1;
+  }
+  .fanui-order-xxl-last {
+    order: 13;
+  }
+}
+.fanui-g0 {
+  --fanui-gutter-x: 0;
+  --fanui-gutter-y: 0;
+}
+
+.fanui-gx0 {
+  --fanui-gutter-x: 0;
+}
+
+.fanui-gy0 {
+  --fanui-gutter-y: 0;
+}
+
+.fanui-g1 {
+  --fanui-gutter-x: 4px;
+  --fanui-gutter-y: 4px;
+}
+
+.fanui-gx1 {
+  --fanui-gutter-x: 4px;
+}
+
+.fanui-gy1 {
+  --fanui-gutter-y: 4px;
+}
+
+.fanui-g2 {
+  --fanui-gutter-x: 8px;
+  --fanui-gutter-y: 8px;
+}
+
+.fanui-gx2 {
+  --fanui-gutter-x: 8px;
+}
+
+.fanui-gy2 {
+  --fanui-gutter-y: 8px;
+}
+
+.fanui-g3 {
+  --fanui-gutter-x: 12px;
+  --fanui-gutter-y: 12px;
+}
+
+.fanui-gx3 {
+  --fanui-gutter-x: 12px;
+}
+
+.fanui-gy3 {
+  --fanui-gutter-y: 12px;
+}
+
+.fanui-g4 {
+  --fanui-gutter-x: 16px;
+  --fanui-gutter-y: 16px;
+}
+
+.fanui-gx4 {
+  --fanui-gutter-x: 16px;
+}
+
+.fanui-gy4 {
+  --fanui-gutter-y: 16px;
+}
+
+.fanui-g5 {
+  --fanui-gutter-x: 20px;
+  --fanui-gutter-y: 20px;
+}
+
+.fanui-gx5 {
+  --fanui-gutter-x: 20px;
+}
+
+.fanui-gy5 {
+  --fanui-gutter-y: 20px;
+}
+
+.fanui-g6 {
+  --fanui-gutter-x: 24px;
+  --fanui-gutter-y: 24px;
+}
+
+.fanui-gx6 {
+  --fanui-gutter-x: 24px;
+}
+
+.fanui-gy6 {
+  --fanui-gutter-y: 24px;
+}
+
+.fanui-g8 {
+  --fanui-gutter-x: 32px;
+  --fanui-gutter-y: 32px;
+}
+
+.fanui-gx8 {
+  --fanui-gutter-x: 32px;
+}
+
+.fanui-gy8 {
+  --fanui-gutter-y: 32px;
+}
+
+.fanui-g10 {
+  --fanui-gutter-x: 40px;
+  --fanui-gutter-y: 40px;
+}
+
+.fanui-gx10 {
+  --fanui-gutter-x: 40px;
+}
+
+.fanui-gy10 {
+  --fanui-gutter-y: 40px;
+}
+
+.fanui-g-0 {
+  --fanui-gutter-x: 0;
+  --fanui-gutter-y: 0;
+}
+
+.fanui-gx-0 {
+  --fanui-gutter-x: 0;
+}
+
+.fanui-gy-0 {
+  --fanui-gutter-y: 0;
+}
+
+.fanui-g-1 {
+  --fanui-gutter-x: 4px;
+  --fanui-gutter-y: 4px;
+}
+
+.fanui-gx-1 {
+  --fanui-gutter-x: 4px;
+}
+
+.fanui-gy-1 {
+  --fanui-gutter-y: 4px;
+}
+
+.fanui-g-2 {
+  --fanui-gutter-x: 8px;
+  --fanui-gutter-y: 8px;
+}
+
+.fanui-gx-2 {
+  --fanui-gutter-x: 8px;
+}
+
+.fanui-gy-2 {
+  --fanui-gutter-y: 8px;
+}
+
+.fanui-g-3 {
+  --fanui-gutter-x: 12px;
+  --fanui-gutter-y: 12px;
+}
+
+.fanui-gx-3 {
+  --fanui-gutter-x: 12px;
+}
+
+.fanui-gy-3 {
+  --fanui-gutter-y: 12px;
+}
+
+.fanui-g-4 {
+  --fanui-gutter-x: 16px;
+  --fanui-gutter-y: 16px;
+}
+
+.fanui-gx-4 {
+  --fanui-gutter-x: 16px;
+}
+
+.fanui-gy-4 {
+  --fanui-gutter-y: 16px;
+}
+
+.fanui-g-5 {
+  --fanui-gutter-x: 20px;
+  --fanui-gutter-y: 20px;
+}
+
+.fanui-gx-5 {
+  --fanui-gutter-x: 20px;
+}
+
+.fanui-gy-5 {
+  --fanui-gutter-y: 20px;
+}
+
+.fanui-g-6 {
+  --fanui-gutter-x: 24px;
+  --fanui-gutter-y: 24px;
+}
+
+.fanui-gx-6 {
+  --fanui-gutter-x: 24px;
+}
+
+.fanui-gy-6 {
+  --fanui-gutter-y: 24px;
+}
+
+.fanui-g-8 {
+  --fanui-gutter-x: 32px;
+  --fanui-gutter-y: 32px;
+}
+
+.fanui-gx-8 {
+  --fanui-gutter-x: 32px;
+}
+
+.fanui-gy-8 {
+  --fanui-gutter-y: 32px;
+}
+
+.fanui-g-10 {
+  --fanui-gutter-x: 40px;
+  --fanui-gutter-y: 40px;
+}
+
+.fanui-gx-10 {
+  --fanui-gutter-x: 40px;
+}
+
+.fanui-gy-10 {
+  --fanui-gutter-y: 40px;
+}
+
+@media (min-width: 576px) {
+  .fanui-g-sm-0 {
+    --fanui-gutter-x: 0;
+    --fanui-gutter-y: 0;
+  }
+  .fanui-gx-sm-0 {
+    --fanui-gutter-x: 0;
+  }
+  .fanui-gy-sm-0 {
+    --fanui-gutter-y: 0;
+  }
+  .fanui-g-sm-1 {
+    --fanui-gutter-x: 4px;
+    --fanui-gutter-y: 4px;
+  }
+  .fanui-gx-sm-1 {
+    --fanui-gutter-x: 4px;
+  }
+  .fanui-gy-sm-1 {
+    --fanui-gutter-y: 4px;
+  }
+  .fanui-g-sm-2 {
+    --fanui-gutter-x: 8px;
+    --fanui-gutter-y: 8px;
+  }
+  .fanui-gx-sm-2 {
+    --fanui-gutter-x: 8px;
+  }
+  .fanui-gy-sm-2 {
+    --fanui-gutter-y: 8px;
+  }
+  .fanui-g-sm-3 {
+    --fanui-gutter-x: 12px;
+    --fanui-gutter-y: 12px;
+  }
+  .fanui-gx-sm-3 {
+    --fanui-gutter-x: 12px;
+  }
+  .fanui-gy-sm-3 {
+    --fanui-gutter-y: 12px;
+  }
+  .fanui-g-sm-4 {
+    --fanui-gutter-x: 16px;
+    --fanui-gutter-y: 16px;
+  }
+  .fanui-gx-sm-4 {
+    --fanui-gutter-x: 16px;
+  }
+  .fanui-gy-sm-4 {
+    --fanui-gutter-y: 16px;
+  }
+  .fanui-g-sm-5 {
+    --fanui-gutter-x: 20px;
+    --fanui-gutter-y: 20px;
+  }
+  .fanui-gx-sm-5 {
+    --fanui-gutter-x: 20px;
+  }
+  .fanui-gy-sm-5 {
+    --fanui-gutter-y: 20px;
+  }
+  .fanui-g-sm-6 {
+    --fanui-gutter-x: 24px;
+    --fanui-gutter-y: 24px;
+  }
+  .fanui-gx-sm-6 {
+    --fanui-gutter-x: 24px;
+  }
+  .fanui-gy-sm-6 {
+    --fanui-gutter-y: 24px;
+  }
+  .fanui-g-sm-8 {
+    --fanui-gutter-x: 32px;
+    --fanui-gutter-y: 32px;
+  }
+  .fanui-gx-sm-8 {
+    --fanui-gutter-x: 32px;
+  }
+  .fanui-gy-sm-8 {
+    --fanui-gutter-y: 32px;
+  }
+  .fanui-g-sm-10 {
+    --fanui-gutter-x: 40px;
+    --fanui-gutter-y: 40px;
+  }
+  .fanui-gx-sm-10 {
+    --fanui-gutter-x: 40px;
+  }
+  .fanui-gy-sm-10 {
+    --fanui-gutter-y: 40px;
+  }
+}
+@media (min-width: 768px) {
+  .fanui-g-md-0 {
+    --fanui-gutter-x: 0;
+    --fanui-gutter-y: 0;
+  }
+  .fanui-gx-md-0 {
+    --fanui-gutter-x: 0;
+  }
+  .fanui-gy-md-0 {
+    --fanui-gutter-y: 0;
+  }
+  .fanui-g-md-1 {
+    --fanui-gutter-x: 4px;
+    --fanui-gutter-y: 4px;
+  }
+  .fanui-gx-md-1 {
+    --fanui-gutter-x: 4px;
+  }
+  .fanui-gy-md-1 {
+    --fanui-gutter-y: 4px;
+  }
+  .fanui-g-md-2 {
+    --fanui-gutter-x: 8px;
+    --fanui-gutter-y: 8px;
+  }
+  .fanui-gx-md-2 {
+    --fanui-gutter-x: 8px;
+  }
+  .fanui-gy-md-2 {
+    --fanui-gutter-y: 8px;
+  }
+  .fanui-g-md-3 {
+    --fanui-gutter-x: 12px;
+    --fanui-gutter-y: 12px;
+  }
+  .fanui-gx-md-3 {
+    --fanui-gutter-x: 12px;
+  }
+  .fanui-gy-md-3 {
+    --fanui-gutter-y: 12px;
+  }
+  .fanui-g-md-4 {
+    --fanui-gutter-x: 16px;
+    --fanui-gutter-y: 16px;
+  }
+  .fanui-gx-md-4 {
+    --fanui-gutter-x: 16px;
+  }
+  .fanui-gy-md-4 {
+    --fanui-gutter-y: 16px;
+  }
+  .fanui-g-md-5 {
+    --fanui-gutter-x: 20px;
+    --fanui-gutter-y: 20px;
+  }
+  .fanui-gx-md-5 {
+    --fanui-gutter-x: 20px;
+  }
+  .fanui-gy-md-5 {
+    --fanui-gutter-y: 20px;
+  }
+  .fanui-g-md-6 {
+    --fanui-gutter-x: 24px;
+    --fanui-gutter-y: 24px;
+  }
+  .fanui-gx-md-6 {
+    --fanui-gutter-x: 24px;
+  }
+  .fanui-gy-md-6 {
+    --fanui-gutter-y: 24px;
+  }
+  .fanui-g-md-8 {
+    --fanui-gutter-x: 32px;
+    --fanui-gutter-y: 32px;
+  }
+  .fanui-gx-md-8 {
+    --fanui-gutter-x: 32px;
+  }
+  .fanui-gy-md-8 {
+    --fanui-gutter-y: 32px;
+  }
+  .fanui-g-md-10 {
+    --fanui-gutter-x: 40px;
+    --fanui-gutter-y: 40px;
+  }
+  .fanui-gx-md-10 {
+    --fanui-gutter-x: 40px;
+  }
+  .fanui-gy-md-10 {
+    --fanui-gutter-y: 40px;
+  }
+}
+@media (min-width: 992px) {
+  .fanui-g-lg-0 {
+    --fanui-gutter-x: 0;
+    --fanui-gutter-y: 0;
+  }
+  .fanui-gx-lg-0 {
+    --fanui-gutter-x: 0;
+  }
+  .fanui-gy-lg-0 {
+    --fanui-gutter-y: 0;
+  }
+  .fanui-g-lg-1 {
+    --fanui-gutter-x: 4px;
+    --fanui-gutter-y: 4px;
+  }
+  .fanui-gx-lg-1 {
+    --fanui-gutter-x: 4px;
+  }
+  .fanui-gy-lg-1 {
+    --fanui-gutter-y: 4px;
+  }
+  .fanui-g-lg-2 {
+    --fanui-gutter-x: 8px;
+    --fanui-gutter-y: 8px;
+  }
+  .fanui-gx-lg-2 {
+    --fanui-gutter-x: 8px;
+  }
+  .fanui-gy-lg-2 {
+    --fanui-gutter-y: 8px;
+  }
+  .fanui-g-lg-3 {
+    --fanui-gutter-x: 12px;
+    --fanui-gutter-y: 12px;
+  }
+  .fanui-gx-lg-3 {
+    --fanui-gutter-x: 12px;
+  }
+  .fanui-gy-lg-3 {
+    --fanui-gutter-y: 12px;
+  }
+  .fanui-g-lg-4 {
+    --fanui-gutter-x: 16px;
+    --fanui-gutter-y: 16px;
+  }
+  .fanui-gx-lg-4 {
+    --fanui-gutter-x: 16px;
+  }
+  .fanui-gy-lg-4 {
+    --fanui-gutter-y: 16px;
+  }
+  .fanui-g-lg-5 {
+    --fanui-gutter-x: 20px;
+    --fanui-gutter-y: 20px;
+  }
+  .fanui-gx-lg-5 {
+    --fanui-gutter-x: 20px;
+  }
+  .fanui-gy-lg-5 {
+    --fanui-gutter-y: 20px;
+  }
+  .fanui-g-lg-6 {
+    --fanui-gutter-x: 24px;
+    --fanui-gutter-y: 24px;
+  }
+  .fanui-gx-lg-6 {
+    --fanui-gutter-x: 24px;
+  }
+  .fanui-gy-lg-6 {
+    --fanui-gutter-y: 24px;
+  }
+  .fanui-g-lg-8 {
+    --fanui-gutter-x: 32px;
+    --fanui-gutter-y: 32px;
+  }
+  .fanui-gx-lg-8 {
+    --fanui-gutter-x: 32px;
+  }
+  .fanui-gy-lg-8 {
+    --fanui-gutter-y: 32px;
+  }
+  .fanui-g-lg-10 {
+    --fanui-gutter-x: 40px;
+    --fanui-gutter-y: 40px;
+  }
+  .fanui-gx-lg-10 {
+    --fanui-gutter-x: 40px;
+  }
+  .fanui-gy-lg-10 {
+    --fanui-gutter-y: 40px;
+  }
+}
+@media (min-width: 1200px) {
+  .fanui-g-xl-0 {
+    --fanui-gutter-x: 0;
+    --fanui-gutter-y: 0;
+  }
+  .fanui-gx-xl-0 {
+    --fanui-gutter-x: 0;
+  }
+  .fanui-gy-xl-0 {
+    --fanui-gutter-y: 0;
+  }
+  .fanui-g-xl-1 {
+    --fanui-gutter-x: 4px;
+    --fanui-gutter-y: 4px;
+  }
+  .fanui-gx-xl-1 {
+    --fanui-gutter-x: 4px;
+  }
+  .fanui-gy-xl-1 {
+    --fanui-gutter-y: 4px;
+  }
+  .fanui-g-xl-2 {
+    --fanui-gutter-x: 8px;
+    --fanui-gutter-y: 8px;
+  }
+  .fanui-gx-xl-2 {
+    --fanui-gutter-x: 8px;
+  }
+  .fanui-gy-xl-2 {
+    --fanui-gutter-y: 8px;
+  }
+  .fanui-g-xl-3 {
+    --fanui-gutter-x: 12px;
+    --fanui-gutter-y: 12px;
+  }
+  .fanui-gx-xl-3 {
+    --fanui-gutter-x: 12px;
+  }
+  .fanui-gy-xl-3 {
+    --fanui-gutter-y: 12px;
+  }
+  .fanui-g-xl-4 {
+    --fanui-gutter-x: 16px;
+    --fanui-gutter-y: 16px;
+  }
+  .fanui-gx-xl-4 {
+    --fanui-gutter-x: 16px;
+  }
+  .fanui-gy-xl-4 {
+    --fanui-gutter-y: 16px;
+  }
+  .fanui-g-xl-5 {
+    --fanui-gutter-x: 20px;
+    --fanui-gutter-y: 20px;
+  }
+  .fanui-gx-xl-5 {
+    --fanui-gutter-x: 20px;
+  }
+  .fanui-gy-xl-5 {
+    --fanui-gutter-y: 20px;
+  }
+  .fanui-g-xl-6 {
+    --fanui-gutter-x: 24px;
+    --fanui-gutter-y: 24px;
+  }
+  .fanui-gx-xl-6 {
+    --fanui-gutter-x: 24px;
+  }
+  .fanui-gy-xl-6 {
+    --fanui-gutter-y: 24px;
+  }
+  .fanui-g-xl-8 {
+    --fanui-gutter-x: 32px;
+    --fanui-gutter-y: 32px;
+  }
+  .fanui-gx-xl-8 {
+    --fanui-gutter-x: 32px;
+  }
+  .fanui-gy-xl-8 {
+    --fanui-gutter-y: 32px;
+  }
+  .fanui-g-xl-10 {
+    --fanui-gutter-x: 40px;
+    --fanui-gutter-y: 40px;
+  }
+  .fanui-gx-xl-10 {
+    --fanui-gutter-x: 40px;
+  }
+  .fanui-gy-xl-10 {
+    --fanui-gutter-y: 40px;
+  }
+}
+@media (min-width: 1400px) {
+  .fanui-g-xxl-0 {
+    --fanui-gutter-x: 0;
+    --fanui-gutter-y: 0;
+  }
+  .fanui-gx-xxl-0 {
+    --fanui-gutter-x: 0;
+  }
+  .fanui-gy-xxl-0 {
+    --fanui-gutter-y: 0;
+  }
+  .fanui-g-xxl-1 {
+    --fanui-gutter-x: 4px;
+    --fanui-gutter-y: 4px;
+  }
+  .fanui-gx-xxl-1 {
+    --fanui-gutter-x: 4px;
+  }
+  .fanui-gy-xxl-1 {
+    --fanui-gutter-y: 4px;
+  }
+  .fanui-g-xxl-2 {
+    --fanui-gutter-x: 8px;
+    --fanui-gutter-y: 8px;
+  }
+  .fanui-gx-xxl-2 {
+    --fanui-gutter-x: 8px;
+  }
+  .fanui-gy-xxl-2 {
+    --fanui-gutter-y: 8px;
+  }
+  .fanui-g-xxl-3 {
+    --fanui-gutter-x: 12px;
+    --fanui-gutter-y: 12px;
+  }
+  .fanui-gx-xxl-3 {
+    --fanui-gutter-x: 12px;
+  }
+  .fanui-gy-xxl-3 {
+    --fanui-gutter-y: 12px;
+  }
+  .fanui-g-xxl-4 {
+    --fanui-gutter-x: 16px;
+    --fanui-gutter-y: 16px;
+  }
+  .fanui-gx-xxl-4 {
+    --fanui-gutter-x: 16px;
+  }
+  .fanui-gy-xxl-4 {
+    --fanui-gutter-y: 16px;
+  }
+  .fanui-g-xxl-5 {
+    --fanui-gutter-x: 20px;
+    --fanui-gutter-y: 20px;
+  }
+  .fanui-gx-xxl-5 {
+    --fanui-gutter-x: 20px;
+  }
+  .fanui-gy-xxl-5 {
+    --fanui-gutter-y: 20px;
+  }
+  .fanui-g-xxl-6 {
+    --fanui-gutter-x: 24px;
+    --fanui-gutter-y: 24px;
+  }
+  .fanui-gx-xxl-6 {
+    --fanui-gutter-x: 24px;
+  }
+  .fanui-gy-xxl-6 {
+    --fanui-gutter-y: 24px;
+  }
+  .fanui-g-xxl-8 {
+    --fanui-gutter-x: 32px;
+    --fanui-gutter-y: 32px;
+  }
+  .fanui-gx-xxl-8 {
+    --fanui-gutter-x: 32px;
+  }
+  .fanui-gy-xxl-8 {
+    --fanui-gutter-y: 32px;
+  }
+  .fanui-g-xxl-10 {
+    --fanui-gutter-x: 40px;
+    --fanui-gutter-y: 40px;
+  }
+  .fanui-gx-xxl-10 {
+    --fanui-gutter-x: 40px;
+  }
+  .fanui-gy-xxl-10 {
+    --fanui-gutter-y: 40px;
+  }
+}
+.fanui-grid {
+  display: grid;
+  gap: var(--fanui-space-4);
+}
+
+.fanui-grid-cols-1 {
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+}
+
+.fanui-grid-cols-2 {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.fanui-grid-cols-3 {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.fanui-grid-cols-4 {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
+.fanui-grid-cols-5 {
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+}
+
+.fanui-grid-cols-6 {
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+}
+
+.fanui-grid-cols-7 {
+  grid-template-columns: repeat(7, minmax(0, 1fr));
+}
+
+.fanui-grid-cols-8 {
+  grid-template-columns: repeat(8, minmax(0, 1fr));
+}
+
+.fanui-grid-cols-9 {
+  grid-template-columns: repeat(9, minmax(0, 1fr));
+}
+
+.fanui-grid-cols-10 {
+  grid-template-columns: repeat(10, minmax(0, 1fr));
+}
+
+.fanui-grid-cols-11 {
+  grid-template-columns: repeat(11, minmax(0, 1fr));
+}
+
+.fanui-grid-cols-12 {
+  grid-template-columns: repeat(12, minmax(0, 1fr));
+}
+
+.fanui-grid-auto-xs {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+  gap: 16px;
+}
+
+.fanui-grid-auto-sm {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: 16px;
+}
+
+.fanui-grid-auto-md {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  gap: 16px;
+}
+
+.fanui-grid-auto-lg {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 16px;
+}
+
+.fanui-grid-auto-xl {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
+  gap: 16px;
+}
+
+.fanui-grid-cols-1 {
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+}
+
+.fanui-grid-cols-2 {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.fanui-grid-cols-3 {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.fanui-grid-cols-4 {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
+.fanui-grid-cols-5 {
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+}
+
+.fanui-grid-cols-6 {
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+}
+
+.fanui-grid-cols-7 {
+  grid-template-columns: repeat(7, minmax(0, 1fr));
+}
+
+.fanui-grid-cols-8 {
+  grid-template-columns: repeat(8, minmax(0, 1fr));
+}
+
+.fanui-grid-cols-9 {
+  grid-template-columns: repeat(9, minmax(0, 1fr));
+}
+
+.fanui-grid-cols-10 {
+  grid-template-columns: repeat(10, minmax(0, 1fr));
+}
+
+.fanui-grid-cols-11 {
+  grid-template-columns: repeat(11, minmax(0, 1fr));
+}
+
+.fanui-grid-cols-12 {
+  grid-template-columns: repeat(12, minmax(0, 1fr));
+}
+
+.fanui-grid-span-full {
+  grid-column: 1/-1;
+}
+
+.fanui-grid-span-1 {
+  grid-column: span 1/span 1;
+}
+
+.fanui-grid-rows-1 {
+  grid-row: span 1/span 1;
+}
+
+.fanui-grid-span-2 {
+  grid-column: span 2/span 2;
+}
+
+.fanui-grid-rows-2 {
+  grid-row: span 2/span 2;
+}
+
+.fanui-grid-span-3 {
+  grid-column: span 3/span 3;
+}
+
+.fanui-grid-rows-3 {
+  grid-row: span 3/span 3;
+}
+
+.fanui-grid-span-4 {
+  grid-column: span 4/span 4;
+}
+
+.fanui-grid-rows-4 {
+  grid-row: span 4/span 4;
+}
+
+.fanui-grid-span-5 {
+  grid-column: span 5/span 5;
+}
+
+.fanui-grid-rows-5 {
+  grid-row: span 5/span 5;
+}
+
+.fanui-grid-span-6 {
+  grid-column: span 6/span 6;
+}
+
+.fanui-grid-rows-6 {
+  grid-row: span 6/span 6;
+}
+
+.fanui-grid-span-7 {
+  grid-column: span 7/span 7;
+}
+
+.fanui-grid-rows-7 {
+  grid-row: span 7/span 7;
+}
+
+.fanui-grid-span-8 {
+  grid-column: span 8/span 8;
+}
+
+.fanui-grid-rows-8 {
+  grid-row: span 8/span 8;
+}
+
+.fanui-grid-span-9 {
+  grid-column: span 9/span 9;
+}
+
+.fanui-grid-rows-9 {
+  grid-row: span 9/span 9;
+}
+
+.fanui-grid-span-10 {
+  grid-column: span 10/span 10;
+}
+
+.fanui-grid-rows-10 {
+  grid-row: span 10/span 10;
+}
+
+.fanui-grid-span-11 {
+  grid-column: span 11/span 11;
+}
+
+.fanui-grid-rows-11 {
+  grid-row: span 11/span 11;
+}
+
+.fanui-grid-span-12 {
+  grid-column: span 12/span 12;
+}
+
+.fanui-grid-rows-12 {
+  grid-row: span 12/span 12;
+}
+
+@media (min-width: 576px) {
+  .fanui-grid-cols-sm-1 {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+  }
+  .fanui-grid-cols-sm-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  .fanui-grid-cols-sm-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+  .fanui-grid-cols-sm-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+  .fanui-grid-cols-sm-5 {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
+  .fanui-grid-cols-sm-6 {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+  }
+  .fanui-grid-cols-sm-7 {
+    grid-template-columns: repeat(7, minmax(0, 1fr));
+  }
+  .fanui-grid-cols-sm-8 {
+    grid-template-columns: repeat(8, minmax(0, 1fr));
+  }
+  .fanui-grid-cols-sm-9 {
+    grid-template-columns: repeat(9, minmax(0, 1fr));
+  }
+  .fanui-grid-cols-sm-10 {
+    grid-template-columns: repeat(10, minmax(0, 1fr));
+  }
+  .fanui-grid-cols-sm-11 {
+    grid-template-columns: repeat(11, minmax(0, 1fr));
+  }
+  .fanui-grid-cols-sm-12 {
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+  }
+  .fanui-grid-span-sm-full {
+    grid-column: 1/-1;
+  }
+  .fanui-grid-span-sm-1 {
+    grid-column: span 1/span 1;
+  }
+  .fanui-grid-rows-sm-1 {
+    grid-row: span 1/span 1;
+  }
+  .fanui-grid-span-sm-2 {
+    grid-column: span 2/span 2;
+  }
+  .fanui-grid-rows-sm-2 {
+    grid-row: span 2/span 2;
+  }
+  .fanui-grid-span-sm-3 {
+    grid-column: span 3/span 3;
+  }
+  .fanui-grid-rows-sm-3 {
+    grid-row: span 3/span 3;
+  }
+  .fanui-grid-span-sm-4 {
+    grid-column: span 4/span 4;
+  }
+  .fanui-grid-rows-sm-4 {
+    grid-row: span 4/span 4;
+  }
+  .fanui-grid-span-sm-5 {
+    grid-column: span 5/span 5;
+  }
+  .fanui-grid-rows-sm-5 {
+    grid-row: span 5/span 5;
+  }
+  .fanui-grid-span-sm-6 {
+    grid-column: span 6/span 6;
+  }
+  .fanui-grid-rows-sm-6 {
+    grid-row: span 6/span 6;
+  }
+  .fanui-grid-span-sm-7 {
+    grid-column: span 7/span 7;
+  }
+  .fanui-grid-rows-sm-7 {
+    grid-row: span 7/span 7;
+  }
+  .fanui-grid-span-sm-8 {
+    grid-column: span 8/span 8;
+  }
+  .fanui-grid-rows-sm-8 {
+    grid-row: span 8/span 8;
+  }
+  .fanui-grid-span-sm-9 {
+    grid-column: span 9/span 9;
+  }
+  .fanui-grid-rows-sm-9 {
+    grid-row: span 9/span 9;
+  }
+  .fanui-grid-span-sm-10 {
+    grid-column: span 10/span 10;
+  }
+  .fanui-grid-rows-sm-10 {
+    grid-row: span 10/span 10;
+  }
+  .fanui-grid-span-sm-11 {
+    grid-column: span 11/span 11;
+  }
+  .fanui-grid-rows-sm-11 {
+    grid-row: span 11/span 11;
+  }
+  .fanui-grid-span-sm-12 {
+    grid-column: span 12/span 12;
+  }
+  .fanui-grid-rows-sm-12 {
+    grid-row: span 12/span 12;
+  }
+}
+@media (min-width: 768px) {
+  .fanui-grid-cols-md-1 {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+  }
+  .fanui-grid-cols-md-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  .fanui-grid-cols-md-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+  .fanui-grid-cols-md-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+  .fanui-grid-cols-md-5 {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
+  .fanui-grid-cols-md-6 {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+  }
+  .fanui-grid-cols-md-7 {
+    grid-template-columns: repeat(7, minmax(0, 1fr));
+  }
+  .fanui-grid-cols-md-8 {
+    grid-template-columns: repeat(8, minmax(0, 1fr));
+  }
+  .fanui-grid-cols-md-9 {
+    grid-template-columns: repeat(9, minmax(0, 1fr));
+  }
+  .fanui-grid-cols-md-10 {
+    grid-template-columns: repeat(10, minmax(0, 1fr));
+  }
+  .fanui-grid-cols-md-11 {
+    grid-template-columns: repeat(11, minmax(0, 1fr));
+  }
+  .fanui-grid-cols-md-12 {
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+  }
+  .fanui-grid-span-md-full {
+    grid-column: 1/-1;
+  }
+  .fanui-grid-span-md-1 {
+    grid-column: span 1/span 1;
+  }
+  .fanui-grid-rows-md-1 {
+    grid-row: span 1/span 1;
+  }
+  .fanui-grid-span-md-2 {
+    grid-column: span 2/span 2;
+  }
+  .fanui-grid-rows-md-2 {
+    grid-row: span 2/span 2;
+  }
+  .fanui-grid-span-md-3 {
+    grid-column: span 3/span 3;
+  }
+  .fanui-grid-rows-md-3 {
+    grid-row: span 3/span 3;
+  }
+  .fanui-grid-span-md-4 {
+    grid-column: span 4/span 4;
+  }
+  .fanui-grid-rows-md-4 {
+    grid-row: span 4/span 4;
+  }
+  .fanui-grid-span-md-5 {
+    grid-column: span 5/span 5;
+  }
+  .fanui-grid-rows-md-5 {
+    grid-row: span 5/span 5;
+  }
+  .fanui-grid-span-md-6 {
+    grid-column: span 6/span 6;
+  }
+  .fanui-grid-rows-md-6 {
+    grid-row: span 6/span 6;
+  }
+  .fanui-grid-span-md-7 {
+    grid-column: span 7/span 7;
+  }
+  .fanui-grid-rows-md-7 {
+    grid-row: span 7/span 7;
+  }
+  .fanui-grid-span-md-8 {
+    grid-column: span 8/span 8;
+  }
+  .fanui-grid-rows-md-8 {
+    grid-row: span 8/span 8;
+  }
+  .fanui-grid-span-md-9 {
+    grid-column: span 9/span 9;
+  }
+  .fanui-grid-rows-md-9 {
+    grid-row: span 9/span 9;
+  }
+  .fanui-grid-span-md-10 {
+    grid-column: span 10/span 10;
+  }
+  .fanui-grid-rows-md-10 {
+    grid-row: span 10/span 10;
+  }
+  .fanui-grid-span-md-11 {
+    grid-column: span 11/span 11;
+  }
+  .fanui-grid-rows-md-11 {
+    grid-row: span 11/span 11;
+  }
+  .fanui-grid-span-md-12 {
+    grid-column: span 12/span 12;
+  }
+  .fanui-grid-rows-md-12 {
+    grid-row: span 12/span 12;
+  }
+}
+@media (min-width: 992px) {
+  .fanui-grid-cols-lg-1 {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+  }
+  .fanui-grid-cols-lg-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  .fanui-grid-cols-lg-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+  .fanui-grid-cols-lg-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+  .fanui-grid-cols-lg-5 {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
+  .fanui-grid-cols-lg-6 {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+  }
+  .fanui-grid-cols-lg-7 {
+    grid-template-columns: repeat(7, minmax(0, 1fr));
+  }
+  .fanui-grid-cols-lg-8 {
+    grid-template-columns: repeat(8, minmax(0, 1fr));
+  }
+  .fanui-grid-cols-lg-9 {
+    grid-template-columns: repeat(9, minmax(0, 1fr));
+  }
+  .fanui-grid-cols-lg-10 {
+    grid-template-columns: repeat(10, minmax(0, 1fr));
+  }
+  .fanui-grid-cols-lg-11 {
+    grid-template-columns: repeat(11, minmax(0, 1fr));
+  }
+  .fanui-grid-cols-lg-12 {
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+  }
+  .fanui-grid-span-lg-full {
+    grid-column: 1/-1;
+  }
+  .fanui-grid-span-lg-1 {
+    grid-column: span 1/span 1;
+  }
+  .fanui-grid-rows-lg-1 {
+    grid-row: span 1/span 1;
+  }
+  .fanui-grid-span-lg-2 {
+    grid-column: span 2/span 2;
+  }
+  .fanui-grid-rows-lg-2 {
+    grid-row: span 2/span 2;
+  }
+  .fanui-grid-span-lg-3 {
+    grid-column: span 3/span 3;
+  }
+  .fanui-grid-rows-lg-3 {
+    grid-row: span 3/span 3;
+  }
+  .fanui-grid-span-lg-4 {
+    grid-column: span 4/span 4;
+  }
+  .fanui-grid-rows-lg-4 {
+    grid-row: span 4/span 4;
+  }
+  .fanui-grid-span-lg-5 {
+    grid-column: span 5/span 5;
+  }
+  .fanui-grid-rows-lg-5 {
+    grid-row: span 5/span 5;
+  }
+  .fanui-grid-span-lg-6 {
+    grid-column: span 6/span 6;
+  }
+  .fanui-grid-rows-lg-6 {
+    grid-row: span 6/span 6;
+  }
+  .fanui-grid-span-lg-7 {
+    grid-column: span 7/span 7;
+  }
+  .fanui-grid-rows-lg-7 {
+    grid-row: span 7/span 7;
+  }
+  .fanui-grid-span-lg-8 {
+    grid-column: span 8/span 8;
+  }
+  .fanui-grid-rows-lg-8 {
+    grid-row: span 8/span 8;
+  }
+  .fanui-grid-span-lg-9 {
+    grid-column: span 9/span 9;
+  }
+  .fanui-grid-rows-lg-9 {
+    grid-row: span 9/span 9;
+  }
+  .fanui-grid-span-lg-10 {
+    grid-column: span 10/span 10;
+  }
+  .fanui-grid-rows-lg-10 {
+    grid-row: span 10/span 10;
+  }
+  .fanui-grid-span-lg-11 {
+    grid-column: span 11/span 11;
+  }
+  .fanui-grid-rows-lg-11 {
+    grid-row: span 11/span 11;
+  }
+  .fanui-grid-span-lg-12 {
+    grid-column: span 12/span 12;
+  }
+  .fanui-grid-rows-lg-12 {
+    grid-row: span 12/span 12;
+  }
+}
+@media (min-width: 1200px) {
+  .fanui-grid-cols-xl-1 {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+  }
+  .fanui-grid-cols-xl-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  .fanui-grid-cols-xl-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+  .fanui-grid-cols-xl-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+  .fanui-grid-cols-xl-5 {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
+  .fanui-grid-cols-xl-6 {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+  }
+  .fanui-grid-cols-xl-7 {
+    grid-template-columns: repeat(7, minmax(0, 1fr));
+  }
+  .fanui-grid-cols-xl-8 {
+    grid-template-columns: repeat(8, minmax(0, 1fr));
+  }
+  .fanui-grid-cols-xl-9 {
+    grid-template-columns: repeat(9, minmax(0, 1fr));
+  }
+  .fanui-grid-cols-xl-10 {
+    grid-template-columns: repeat(10, minmax(0, 1fr));
+  }
+  .fanui-grid-cols-xl-11 {
+    grid-template-columns: repeat(11, minmax(0, 1fr));
+  }
+  .fanui-grid-cols-xl-12 {
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+  }
+  .fanui-grid-span-xl-full {
+    grid-column: 1/-1;
+  }
+  .fanui-grid-span-xl-1 {
+    grid-column: span 1/span 1;
+  }
+  .fanui-grid-rows-xl-1 {
+    grid-row: span 1/span 1;
+  }
+  .fanui-grid-span-xl-2 {
+    grid-column: span 2/span 2;
+  }
+  .fanui-grid-rows-xl-2 {
+    grid-row: span 2/span 2;
+  }
+  .fanui-grid-span-xl-3 {
+    grid-column: span 3/span 3;
+  }
+  .fanui-grid-rows-xl-3 {
+    grid-row: span 3/span 3;
+  }
+  .fanui-grid-span-xl-4 {
+    grid-column: span 4/span 4;
+  }
+  .fanui-grid-rows-xl-4 {
+    grid-row: span 4/span 4;
+  }
+  .fanui-grid-span-xl-5 {
+    grid-column: span 5/span 5;
+  }
+  .fanui-grid-rows-xl-5 {
+    grid-row: span 5/span 5;
+  }
+  .fanui-grid-span-xl-6 {
+    grid-column: span 6/span 6;
+  }
+  .fanui-grid-rows-xl-6 {
+    grid-row: span 6/span 6;
+  }
+  .fanui-grid-span-xl-7 {
+    grid-column: span 7/span 7;
+  }
+  .fanui-grid-rows-xl-7 {
+    grid-row: span 7/span 7;
+  }
+  .fanui-grid-span-xl-8 {
+    grid-column: span 8/span 8;
+  }
+  .fanui-grid-rows-xl-8 {
+    grid-row: span 8/span 8;
+  }
+  .fanui-grid-span-xl-9 {
+    grid-column: span 9/span 9;
+  }
+  .fanui-grid-rows-xl-9 {
+    grid-row: span 9/span 9;
+  }
+  .fanui-grid-span-xl-10 {
+    grid-column: span 10/span 10;
+  }
+  .fanui-grid-rows-xl-10 {
+    grid-row: span 10/span 10;
+  }
+  .fanui-grid-span-xl-11 {
+    grid-column: span 11/span 11;
+  }
+  .fanui-grid-rows-xl-11 {
+    grid-row: span 11/span 11;
+  }
+  .fanui-grid-span-xl-12 {
+    grid-column: span 12/span 12;
+  }
+  .fanui-grid-rows-xl-12 {
+    grid-row: span 12/span 12;
+  }
+}
+@media (min-width: 1400px) {
+  .fanui-grid-cols-xxl-1 {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+  }
+  .fanui-grid-cols-xxl-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  .fanui-grid-cols-xxl-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+  .fanui-grid-cols-xxl-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+  .fanui-grid-cols-xxl-5 {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
+  .fanui-grid-cols-xxl-6 {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+  }
+  .fanui-grid-cols-xxl-7 {
+    grid-template-columns: repeat(7, minmax(0, 1fr));
+  }
+  .fanui-grid-cols-xxl-8 {
+    grid-template-columns: repeat(8, minmax(0, 1fr));
+  }
+  .fanui-grid-cols-xxl-9 {
+    grid-template-columns: repeat(9, minmax(0, 1fr));
+  }
+  .fanui-grid-cols-xxl-10 {
+    grid-template-columns: repeat(10, minmax(0, 1fr));
+  }
+  .fanui-grid-cols-xxl-11 {
+    grid-template-columns: repeat(11, minmax(0, 1fr));
+  }
+  .fanui-grid-cols-xxl-12 {
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+  }
+  .fanui-grid-span-xxl-full {
+    grid-column: 1/-1;
+  }
+  .fanui-grid-span-xxl-1 {
+    grid-column: span 1/span 1;
+  }
+  .fanui-grid-rows-xxl-1 {
+    grid-row: span 1/span 1;
+  }
+  .fanui-grid-span-xxl-2 {
+    grid-column: span 2/span 2;
+  }
+  .fanui-grid-rows-xxl-2 {
+    grid-row: span 2/span 2;
+  }
+  .fanui-grid-span-xxl-3 {
+    grid-column: span 3/span 3;
+  }
+  .fanui-grid-rows-xxl-3 {
+    grid-row: span 3/span 3;
+  }
+  .fanui-grid-span-xxl-4 {
+    grid-column: span 4/span 4;
+  }
+  .fanui-grid-rows-xxl-4 {
+    grid-row: span 4/span 4;
+  }
+  .fanui-grid-span-xxl-5 {
+    grid-column: span 5/span 5;
+  }
+  .fanui-grid-rows-xxl-5 {
+    grid-row: span 5/span 5;
+  }
+  .fanui-grid-span-xxl-6 {
+    grid-column: span 6/span 6;
+  }
+  .fanui-grid-rows-xxl-6 {
+    grid-row: span 6/span 6;
+  }
+  .fanui-grid-span-xxl-7 {
+    grid-column: span 7/span 7;
+  }
+  .fanui-grid-rows-xxl-7 {
+    grid-row: span 7/span 7;
+  }
+  .fanui-grid-span-xxl-8 {
+    grid-column: span 8/span 8;
+  }
+  .fanui-grid-rows-xxl-8 {
+    grid-row: span 8/span 8;
+  }
+  .fanui-grid-span-xxl-9 {
+    grid-column: span 9/span 9;
+  }
+  .fanui-grid-rows-xxl-9 {
+    grid-row: span 9/span 9;
+  }
+  .fanui-grid-span-xxl-10 {
+    grid-column: span 10/span 10;
+  }
+  .fanui-grid-rows-xxl-10 {
+    grid-row: span 10/span 10;
+  }
+  .fanui-grid-span-xxl-11 {
+    grid-column: span 11/span 11;
+  }
+  .fanui-grid-rows-xxl-11 {
+    grid-row: span 11/span 11;
+  }
+  .fanui-grid-span-xxl-12 {
+    grid-column: span 12/span 12;
+  }
+  .fanui-grid-rows-xxl-12 {
+    grid-row: span 12/span 12;
+  }
+}
+.fanui-d-none {
+  display: none;
+}
+
+.fanui-d-block {
+  display: block;
+}
+
+.fanui-d-inline {
+  display: inline;
+}
+
+.fanui-d-inline-block {
+  display: inline-block;
+}
+
+.fanui-d-flex {
+  display: flex;
+}
+
+.fanui-d-inline-flex {
+  display: inline-flex;
+}
+
+.fanui-d-grid {
+  display: grid;
+}
+
+.fanui-d-inline-grid {
+  display: inline-grid;
+}
+
+.fanui-d-contents {
+  display: contents;
+}
+
+.fanui-d-flow-root {
+  display: flow-root;
+}
+
+.fanui-flex-row {
+  flex-direction: row;
+}
+
+.fanui-flex-row-reverse {
+  flex-direction: row-reverse;
+}
+
+.fanui-flex-col {
+  flex-direction: column;
+}
+
+.fanui-flex-col-reverse {
+  flex-direction: column-reverse;
+}
+
+.fanui-flex-wrap {
+  flex-wrap: wrap;
+}
+
+.fanui-flex-wrap-reverse {
+  flex-wrap: wrap-reverse;
+}
+
+.fanui-flex-nowrap {
+  flex-wrap: nowrap;
+}
+
+.fanui-justify-start {
+  justify-content: flex-start;
+}
+
+.fanui-justify-end {
+  justify-content: flex-end;
+}
+
+.fanui-justify-center {
+  justify-content: center;
+}
+
+.fanui-justify-between {
+  justify-content: space-between;
+}
+
+.fanui-justify-around {
+  justify-content: space-around;
+}
+
+.fanui-justify-evenly {
+  justify-content: space-evenly;
+}
+
+.fanui-justify-stretch {
+  justify-content: stretch;
+}
+
+.fanui-items-start {
+  align-items: flex-start;
+}
+
+.fanui-content-start {
+  align-content: flex-start;
+}
+
+.fanui-self-start {
+  align-self: flex-start;
+}
+
+.fanui-items-end {
+  align-items: flex-end;
+}
+
+.fanui-content-end {
+  align-content: flex-end;
+}
+
+.fanui-self-end {
+  align-self: flex-end;
+}
+
+.fanui-items-center {
+  align-items: center;
+}
+
+.fanui-content-center {
+  align-content: center;
+}
+
+.fanui-self-center {
+  align-self: center;
+}
+
+.fanui-items-baseline {
+  align-items: baseline;
+}
+
+.fanui-content-baseline {
+  align-content: baseline;
+}
+
+.fanui-self-baseline {
+  align-self: baseline;
+}
+
+.fanui-items-stretch {
+  align-items: stretch;
+}
+
+.fanui-content-stretch {
+  align-content: stretch;
+}
+
+.fanui-self-stretch {
+  align-self: stretch;
+}
+
+.fanui-place-center {
+  place-items: center;
+}
+
+.fanui-place-start {
+  place-items: start;
+}
+
+.fanui-place-end {
+  place-items: end;
+}
+
+.fanui-flex-1 {
+  flex: 1 1 0%;
+}
+
+.fanui-flex-auto {
+  flex: 1 1 auto;
+}
+
+.fanui-flex-initial {
+  flex: 0 1 auto;
+}
+
+.fanui-flex-none {
+  flex: none;
+}
+
+.fanui-grow {
+  flex-grow: 1;
+}
+
+.fanui-grow-0 {
+  flex-grow: 0;
+}
+
+.fanui-shrink {
+  flex-shrink: 1;
+}
+
+.fanui-shrink-0 {
+  flex-shrink: 0;
+}
+
+.fanui-basis-auto {
+  flex-basis: auto;
+}
+
+.fanui-basis-0 {
+  flex-basis: 0%;
+}
+
+.fanui-basis-full {
+  flex-basis: 100%;
+}
+
+.fanui-basis-1-2 {
+  flex-basis: 50%;
+}
+
+.fanui-basis-1-3 {
+  flex-basis: 33.333333%;
+}
+
+.fanui-basis-2-3 {
+  flex-basis: 66.666667%;
+}
+
+.fanui-basis-1-4 {
+  flex-basis: 25%;
+}
+
+.fanui-basis-3-4 {
+  flex-basis: 75%;
+}
+
+.fanui-order-0 {
+  order: 0;
+}
+
+.fanui-order-1 {
+  order: 1;
+}
+
+.fanui-order-2 {
+  order: 2;
+}
+
+.fanui-order-3 {
+  order: 3;
+}
+
+.fanui-order-4 {
+  order: 4;
+}
+
+.fanui-order-5 {
+  order: 5;
+}
+
+.fanui-order-6 {
+  order: 6;
+}
+
+.fanui-order-7 {
+  order: 7;
+}
+
+.fanui-order-8 {
+  order: 8;
+}
+
+.fanui-order-9 {
+  order: 9;
+}
+
+.fanui-order-10 {
+  order: 10;
+}
+
+.fanui-order-11 {
+  order: 11;
+}
+
+.fanui-order-12 {
+  order: 12;
+}
+
+.fanui-order-first {
+  order: -9999;
+}
+
+.fanui-order-last {
+  order: 9999;
+}
+
+.fanui-gap-0 {
+  gap: 0;
+}
+
+.fanui-gap-x-0 {
+  column-gap: 0;
+}
+
+.fanui-gap-y-0 {
+  row-gap: 0;
+}
+
+.fanui-gap-1 {
+  gap: 4px;
+}
+
+.fanui-gap-x-1 {
+  column-gap: 4px;
+}
+
+.fanui-gap-y-1 {
+  row-gap: 4px;
+}
+
+.fanui-gap-2 {
+  gap: 8px;
+}
+
+.fanui-gap-x-2 {
+  column-gap: 8px;
+}
+
+.fanui-gap-y-2 {
+  row-gap: 8px;
+}
+
+.fanui-gap-3 {
+  gap: 12px;
+}
+
+.fanui-gap-x-3 {
+  column-gap: 12px;
+}
+
+.fanui-gap-y-3 {
+  row-gap: 12px;
+}
+
+.fanui-gap-4 {
+  gap: 16px;
+}
+
+.fanui-gap-x-4 {
+  column-gap: 16px;
+}
+
+.fanui-gap-y-4 {
+  row-gap: 16px;
+}
+
+.fanui-gap-5 {
+  gap: 20px;
+}
+
+.fanui-gap-x-5 {
+  column-gap: 20px;
+}
+
+.fanui-gap-y-5 {
+  row-gap: 20px;
+}
+
+.fanui-gap-6 {
+  gap: 24px;
+}
+
+.fanui-gap-x-6 {
+  column-gap: 24px;
+}
+
+.fanui-gap-y-6 {
+  row-gap: 24px;
+}
+
+.fanui-gap-8 {
+  gap: 32px;
+}
+
+.fanui-gap-x-8 {
+  column-gap: 32px;
+}
+
+.fanui-gap-y-8 {
+  row-gap: 32px;
+}
+
+.fanui-gap-10 {
+  gap: 40px;
+}
+
+.fanui-gap-x-10 {
+  column-gap: 40px;
+}
+
+.fanui-gap-y-10 {
+  row-gap: 40px;
+}
+
+.fanui-gap-12 {
+  gap: 48px;
+}
+
+.fanui-gap-x-12 {
+  column-gap: 48px;
+}
+
+.fanui-gap-y-12 {
+  row-gap: 48px;
+}
+
+.fanui-gap-16 {
+  gap: 64px;
+}
+
+.fanui-gap-x-16 {
+  column-gap: 64px;
+}
+
+.fanui-gap-y-16 {
+  row-gap: 64px;
+}
+
+.fanui-gap-20 {
+  gap: 80px;
+}
+
+.fanui-gap-x-20 {
+  column-gap: 80px;
+}
+
+.fanui-gap-y-20 {
+  row-gap: 80px;
+}
+
+.fanui-gap-24 {
+  gap: 96px;
+}
+
+.fanui-gap-x-24 {
+  column-gap: 96px;
+}
+
+.fanui-gap-y-24 {
+  row-gap: 96px;
+}
+
+.fanui-d-none {
+  display: none;
+}
+
+.fanui-d-block {
+  display: block;
+}
+
+.fanui-d-inline {
+  display: inline;
+}
+
+.fanui-d-inline-block {
+  display: inline-block;
+}
+
+.fanui-d-flex {
+  display: flex;
+}
+
+.fanui-d-inline-flex {
+  display: inline-flex;
+}
+
+.fanui-d-grid {
+  display: grid;
+}
+
+.fanui-d-inline-grid {
+  display: inline-grid;
+}
+
+.fanui-flex-row {
+  flex-direction: row;
+}
+
+.fanui-flex-col {
+  flex-direction: column;
+}
+
+.fanui-flex-row-reverse {
+  flex-direction: row-reverse;
+}
+
+.fanui-flex-col-reverse {
+  flex-direction: column-reverse;
+}
+
+.fanui-flex-wrap {
+  flex-wrap: wrap;
+}
+
+.fanui-flex-nowrap {
+  flex-wrap: nowrap;
+}
+
+.fanui-justify-start {
+  justify-content: flex-start;
+}
+
+.fanui-justify-end {
+  justify-content: flex-end;
+}
+
+.fanui-justify-center {
+  justify-content: center;
+}
+
+.fanui-justify-between {
+  justify-content: space-between;
+}
+
+.fanui-justify-around {
+  justify-content: space-around;
+}
+
+.fanui-justify-evenly {
+  justify-content: space-evenly;
+}
+
+.fanui-justify-stretch {
+  justify-content: stretch;
+}
+
+.fanui-items-start {
+  align-items: flex-start;
+}
+
+.fanui-self-start {
+  align-self: flex-start;
+}
+
+.fanui-items-end {
+  align-items: flex-end;
+}
+
+.fanui-self-end {
+  align-self: flex-end;
+}
+
+.fanui-items-center {
+  align-items: center;
+}
+
+.fanui-self-center {
+  align-self: center;
+}
+
+.fanui-items-baseline {
+  align-items: baseline;
+}
+
+.fanui-self-baseline {
+  align-self: baseline;
+}
+
+.fanui-items-stretch {
+  align-items: stretch;
+}
+
+.fanui-self-stretch {
+  align-self: stretch;
+}
+
+.fanui-gap-0 {
+  gap: 0;
+}
+
+.fanui-gap-1 {
+  gap: 4px;
+}
+
+.fanui-gap-2 {
+  gap: 8px;
+}
+
+.fanui-gap-3 {
+  gap: 12px;
+}
+
+.fanui-gap-4 {
+  gap: 16px;
+}
+
+.fanui-gap-5 {
+  gap: 20px;
+}
+
+.fanui-gap-6 {
+  gap: 24px;
+}
+
+.fanui-gap-8 {
+  gap: 32px;
+}
+
+.fanui-gap-10 {
+  gap: 40px;
+}
+
+.fanui-gap-12 {
+  gap: 48px;
+}
+
+.fanui-gap-16 {
+  gap: 64px;
+}
+
+.fanui-gap-20 {
+  gap: 80px;
+}
+
+.fanui-gap-24 {
+  gap: 96px;
+}
+
+.fanui-order-0 {
+  order: 0;
+}
+
+.fanui-order-1 {
+  order: 1;
+}
+
+.fanui-order-2 {
+  order: 2;
+}
+
+.fanui-order-3 {
+  order: 3;
+}
+
+.fanui-order-4 {
+  order: 4;
+}
+
+.fanui-order-5 {
+  order: 5;
+}
+
+.fanui-order-6 {
+  order: 6;
+}
+
+.fanui-order-7 {
+  order: 7;
+}
+
+.fanui-order-8 {
+  order: 8;
+}
+
+.fanui-order-9 {
+  order: 9;
+}
+
+.fanui-order-10 {
+  order: 10;
+}
+
+.fanui-order-11 {
+  order: 11;
+}
+
+.fanui-order-12 {
+  order: 12;
+}
+
+.fanui-order-first {
+  order: -9999;
+}
+
+.fanui-order-last {
+  order: 9999;
+}
+
+@media (min-width: 576px) {
+  .fanui-d-sm-none {
+    display: none;
+  }
+  .fanui-d-sm-block {
+    display: block;
+  }
+  .fanui-d-sm-inline {
+    display: inline;
+  }
+  .fanui-d-sm-inline-block {
+    display: inline-block;
+  }
+  .fanui-d-sm-flex {
+    display: flex;
+  }
+  .fanui-d-sm-inline-flex {
+    display: inline-flex;
+  }
+  .fanui-d-sm-grid {
+    display: grid;
+  }
+  .fanui-d-sm-inline-grid {
+    display: inline-grid;
+  }
+  .fanui-flex-sm-row {
+    flex-direction: row;
+  }
+  .fanui-flex-sm-col {
+    flex-direction: column;
+  }
+  .fanui-flex-sm-row-reverse {
+    flex-direction: row-reverse;
+  }
+  .fanui-flex-sm-col-reverse {
+    flex-direction: column-reverse;
+  }
+  .fanui-flex-sm-wrap {
+    flex-wrap: wrap;
+  }
+  .fanui-flex-sm-nowrap {
+    flex-wrap: nowrap;
+  }
+  .fanui-justify-sm-start {
+    justify-content: flex-start;
+  }
+  .fanui-justify-sm-end {
+    justify-content: flex-end;
+  }
+  .fanui-justify-sm-center {
+    justify-content: center;
+  }
+  .fanui-justify-sm-between {
+    justify-content: space-between;
+  }
+  .fanui-justify-sm-around {
+    justify-content: space-around;
+  }
+  .fanui-justify-sm-evenly {
+    justify-content: space-evenly;
+  }
+  .fanui-justify-sm-stretch {
+    justify-content: stretch;
+  }
+  .fanui-items-sm-start {
+    align-items: flex-start;
+  }
+  .fanui-self-sm-start {
+    align-self: flex-start;
+  }
+  .fanui-items-sm-end {
+    align-items: flex-end;
+  }
+  .fanui-self-sm-end {
+    align-self: flex-end;
+  }
+  .fanui-items-sm-center {
+    align-items: center;
+  }
+  .fanui-self-sm-center {
+    align-self: center;
+  }
+  .fanui-items-sm-baseline {
+    align-items: baseline;
+  }
+  .fanui-self-sm-baseline {
+    align-self: baseline;
+  }
+  .fanui-items-sm-stretch {
+    align-items: stretch;
+  }
+  .fanui-self-sm-stretch {
+    align-self: stretch;
+  }
+  .fanui-gap-sm-0 {
+    gap: 0;
+  }
+  .fanui-gap-sm-1 {
+    gap: 4px;
+  }
+  .fanui-gap-sm-2 {
+    gap: 8px;
+  }
+  .fanui-gap-sm-3 {
+    gap: 12px;
+  }
+  .fanui-gap-sm-4 {
+    gap: 16px;
+  }
+  .fanui-gap-sm-5 {
+    gap: 20px;
+  }
+  .fanui-gap-sm-6 {
+    gap: 24px;
+  }
+  .fanui-gap-sm-8 {
+    gap: 32px;
+  }
+  .fanui-gap-sm-10 {
+    gap: 40px;
+  }
+  .fanui-gap-sm-12 {
+    gap: 48px;
+  }
+  .fanui-gap-sm-16 {
+    gap: 64px;
+  }
+  .fanui-gap-sm-20 {
+    gap: 80px;
+  }
+  .fanui-gap-sm-24 {
+    gap: 96px;
+  }
+  .fanui-order-sm-0 {
+    order: 0;
+  }
+  .fanui-order-sm-1 {
+    order: 1;
+  }
+  .fanui-order-sm-2 {
+    order: 2;
+  }
+  .fanui-order-sm-3 {
+    order: 3;
+  }
+  .fanui-order-sm-4 {
+    order: 4;
+  }
+  .fanui-order-sm-5 {
+    order: 5;
+  }
+  .fanui-order-sm-6 {
+    order: 6;
+  }
+  .fanui-order-sm-7 {
+    order: 7;
+  }
+  .fanui-order-sm-8 {
+    order: 8;
+  }
+  .fanui-order-sm-9 {
+    order: 9;
+  }
+  .fanui-order-sm-10 {
+    order: 10;
+  }
+  .fanui-order-sm-11 {
+    order: 11;
+  }
+  .fanui-order-sm-12 {
+    order: 12;
+  }
+  .fanui-order-sm-first {
+    order: -9999;
+  }
+  .fanui-order-sm-last {
+    order: 9999;
+  }
+}
+@media (min-width: 768px) {
+  .fanui-d-md-none {
+    display: none;
+  }
+  .fanui-d-md-block {
+    display: block;
+  }
+  .fanui-d-md-inline {
+    display: inline;
+  }
+  .fanui-d-md-inline-block {
+    display: inline-block;
+  }
+  .fanui-d-md-flex {
+    display: flex;
+  }
+  .fanui-d-md-inline-flex {
+    display: inline-flex;
+  }
+  .fanui-d-md-grid {
+    display: grid;
+  }
+  .fanui-d-md-inline-grid {
+    display: inline-grid;
+  }
+  .fanui-flex-md-row {
+    flex-direction: row;
+  }
+  .fanui-flex-md-col {
+    flex-direction: column;
+  }
+  .fanui-flex-md-row-reverse {
+    flex-direction: row-reverse;
+  }
+  .fanui-flex-md-col-reverse {
+    flex-direction: column-reverse;
+  }
+  .fanui-flex-md-wrap {
+    flex-wrap: wrap;
+  }
+  .fanui-flex-md-nowrap {
+    flex-wrap: nowrap;
+  }
+  .fanui-justify-md-start {
+    justify-content: flex-start;
+  }
+  .fanui-justify-md-end {
+    justify-content: flex-end;
+  }
+  .fanui-justify-md-center {
+    justify-content: center;
+  }
+  .fanui-justify-md-between {
+    justify-content: space-between;
+  }
+  .fanui-justify-md-around {
+    justify-content: space-around;
+  }
+  .fanui-justify-md-evenly {
+    justify-content: space-evenly;
+  }
+  .fanui-justify-md-stretch {
+    justify-content: stretch;
+  }
+  .fanui-items-md-start {
+    align-items: flex-start;
+  }
+  .fanui-self-md-start {
+    align-self: flex-start;
+  }
+  .fanui-items-md-end {
+    align-items: flex-end;
+  }
+  .fanui-self-md-end {
+    align-self: flex-end;
+  }
+  .fanui-items-md-center {
+    align-items: center;
+  }
+  .fanui-self-md-center {
+    align-self: center;
+  }
+  .fanui-items-md-baseline {
+    align-items: baseline;
+  }
+  .fanui-self-md-baseline {
+    align-self: baseline;
+  }
+  .fanui-items-md-stretch {
+    align-items: stretch;
+  }
+  .fanui-self-md-stretch {
+    align-self: stretch;
+  }
+  .fanui-gap-md-0 {
+    gap: 0;
+  }
+  .fanui-gap-md-1 {
+    gap: 4px;
+  }
+  .fanui-gap-md-2 {
+    gap: 8px;
+  }
+  .fanui-gap-md-3 {
+    gap: 12px;
+  }
+  .fanui-gap-md-4 {
+    gap: 16px;
+  }
+  .fanui-gap-md-5 {
+    gap: 20px;
+  }
+  .fanui-gap-md-6 {
+    gap: 24px;
+  }
+  .fanui-gap-md-8 {
+    gap: 32px;
+  }
+  .fanui-gap-md-10 {
+    gap: 40px;
+  }
+  .fanui-gap-md-12 {
+    gap: 48px;
+  }
+  .fanui-gap-md-16 {
+    gap: 64px;
+  }
+  .fanui-gap-md-20 {
+    gap: 80px;
+  }
+  .fanui-gap-md-24 {
+    gap: 96px;
+  }
+  .fanui-order-md-0 {
+    order: 0;
+  }
+  .fanui-order-md-1 {
+    order: 1;
+  }
+  .fanui-order-md-2 {
+    order: 2;
+  }
+  .fanui-order-md-3 {
+    order: 3;
+  }
+  .fanui-order-md-4 {
+    order: 4;
+  }
+  .fanui-order-md-5 {
+    order: 5;
+  }
+  .fanui-order-md-6 {
+    order: 6;
+  }
+  .fanui-order-md-7 {
+    order: 7;
+  }
+  .fanui-order-md-8 {
+    order: 8;
+  }
+  .fanui-order-md-9 {
+    order: 9;
+  }
+  .fanui-order-md-10 {
+    order: 10;
+  }
+  .fanui-order-md-11 {
+    order: 11;
+  }
+  .fanui-order-md-12 {
+    order: 12;
+  }
+  .fanui-order-md-first {
+    order: -9999;
+  }
+  .fanui-order-md-last {
+    order: 9999;
+  }
+}
+@media (min-width: 992px) {
+  .fanui-d-lg-none {
+    display: none;
+  }
+  .fanui-d-lg-block {
+    display: block;
+  }
+  .fanui-d-lg-inline {
+    display: inline;
+  }
+  .fanui-d-lg-inline-block {
+    display: inline-block;
+  }
+  .fanui-d-lg-flex {
+    display: flex;
+  }
+  .fanui-d-lg-inline-flex {
+    display: inline-flex;
+  }
+  .fanui-d-lg-grid {
+    display: grid;
+  }
+  .fanui-d-lg-inline-grid {
+    display: inline-grid;
+  }
+  .fanui-flex-lg-row {
+    flex-direction: row;
+  }
+  .fanui-flex-lg-col {
+    flex-direction: column;
+  }
+  .fanui-flex-lg-row-reverse {
+    flex-direction: row-reverse;
+  }
+  .fanui-flex-lg-col-reverse {
+    flex-direction: column-reverse;
+  }
+  .fanui-flex-lg-wrap {
+    flex-wrap: wrap;
+  }
+  .fanui-flex-lg-nowrap {
+    flex-wrap: nowrap;
+  }
+  .fanui-justify-lg-start {
+    justify-content: flex-start;
+  }
+  .fanui-justify-lg-end {
+    justify-content: flex-end;
+  }
+  .fanui-justify-lg-center {
+    justify-content: center;
+  }
+  .fanui-justify-lg-between {
+    justify-content: space-between;
+  }
+  .fanui-justify-lg-around {
+    justify-content: space-around;
+  }
+  .fanui-justify-lg-evenly {
+    justify-content: space-evenly;
+  }
+  .fanui-justify-lg-stretch {
+    justify-content: stretch;
+  }
+  .fanui-items-lg-start {
+    align-items: flex-start;
+  }
+  .fanui-self-lg-start {
+    align-self: flex-start;
+  }
+  .fanui-items-lg-end {
+    align-items: flex-end;
+  }
+  .fanui-self-lg-end {
+    align-self: flex-end;
+  }
+  .fanui-items-lg-center {
+    align-items: center;
+  }
+  .fanui-self-lg-center {
+    align-self: center;
+  }
+  .fanui-items-lg-baseline {
+    align-items: baseline;
+  }
+  .fanui-self-lg-baseline {
+    align-self: baseline;
+  }
+  .fanui-items-lg-stretch {
+    align-items: stretch;
+  }
+  .fanui-self-lg-stretch {
+    align-self: stretch;
+  }
+  .fanui-gap-lg-0 {
+    gap: 0;
+  }
+  .fanui-gap-lg-1 {
+    gap: 4px;
+  }
+  .fanui-gap-lg-2 {
+    gap: 8px;
+  }
+  .fanui-gap-lg-3 {
+    gap: 12px;
+  }
+  .fanui-gap-lg-4 {
+    gap: 16px;
+  }
+  .fanui-gap-lg-5 {
+    gap: 20px;
+  }
+  .fanui-gap-lg-6 {
+    gap: 24px;
+  }
+  .fanui-gap-lg-8 {
+    gap: 32px;
+  }
+  .fanui-gap-lg-10 {
+    gap: 40px;
+  }
+  .fanui-gap-lg-12 {
+    gap: 48px;
+  }
+  .fanui-gap-lg-16 {
+    gap: 64px;
+  }
+  .fanui-gap-lg-20 {
+    gap: 80px;
+  }
+  .fanui-gap-lg-24 {
+    gap: 96px;
+  }
+  .fanui-order-lg-0 {
+    order: 0;
+  }
+  .fanui-order-lg-1 {
+    order: 1;
+  }
+  .fanui-order-lg-2 {
+    order: 2;
+  }
+  .fanui-order-lg-3 {
+    order: 3;
+  }
+  .fanui-order-lg-4 {
+    order: 4;
+  }
+  .fanui-order-lg-5 {
+    order: 5;
+  }
+  .fanui-order-lg-6 {
+    order: 6;
+  }
+  .fanui-order-lg-7 {
+    order: 7;
+  }
+  .fanui-order-lg-8 {
+    order: 8;
+  }
+  .fanui-order-lg-9 {
+    order: 9;
+  }
+  .fanui-order-lg-10 {
+    order: 10;
+  }
+  .fanui-order-lg-11 {
+    order: 11;
+  }
+  .fanui-order-lg-12 {
+    order: 12;
+  }
+  .fanui-order-lg-first {
+    order: -9999;
+  }
+  .fanui-order-lg-last {
+    order: 9999;
+  }
+}
+@media (min-width: 1200px) {
+  .fanui-d-xl-none {
+    display: none;
+  }
+  .fanui-d-xl-block {
+    display: block;
+  }
+  .fanui-d-xl-inline {
+    display: inline;
+  }
+  .fanui-d-xl-inline-block {
+    display: inline-block;
+  }
+  .fanui-d-xl-flex {
+    display: flex;
+  }
+  .fanui-d-xl-inline-flex {
+    display: inline-flex;
+  }
+  .fanui-d-xl-grid {
+    display: grid;
+  }
+  .fanui-d-xl-inline-grid {
+    display: inline-grid;
+  }
+  .fanui-flex-xl-row {
+    flex-direction: row;
+  }
+  .fanui-flex-xl-col {
+    flex-direction: column;
+  }
+  .fanui-flex-xl-row-reverse {
+    flex-direction: row-reverse;
+  }
+  .fanui-flex-xl-col-reverse {
+    flex-direction: column-reverse;
+  }
+  .fanui-flex-xl-wrap {
+    flex-wrap: wrap;
+  }
+  .fanui-flex-xl-nowrap {
+    flex-wrap: nowrap;
+  }
+  .fanui-justify-xl-start {
+    justify-content: flex-start;
+  }
+  .fanui-justify-xl-end {
+    justify-content: flex-end;
+  }
+  .fanui-justify-xl-center {
+    justify-content: center;
+  }
+  .fanui-justify-xl-between {
+    justify-content: space-between;
+  }
+  .fanui-justify-xl-around {
+    justify-content: space-around;
+  }
+  .fanui-justify-xl-evenly {
+    justify-content: space-evenly;
+  }
+  .fanui-justify-xl-stretch {
+    justify-content: stretch;
+  }
+  .fanui-items-xl-start {
+    align-items: flex-start;
+  }
+  .fanui-self-xl-start {
+    align-self: flex-start;
+  }
+  .fanui-items-xl-end {
+    align-items: flex-end;
+  }
+  .fanui-self-xl-end {
+    align-self: flex-end;
+  }
+  .fanui-items-xl-center {
+    align-items: center;
+  }
+  .fanui-self-xl-center {
+    align-self: center;
+  }
+  .fanui-items-xl-baseline {
+    align-items: baseline;
+  }
+  .fanui-self-xl-baseline {
+    align-self: baseline;
+  }
+  .fanui-items-xl-stretch {
+    align-items: stretch;
+  }
+  .fanui-self-xl-stretch {
+    align-self: stretch;
+  }
+  .fanui-gap-xl-0 {
+    gap: 0;
+  }
+  .fanui-gap-xl-1 {
+    gap: 4px;
+  }
+  .fanui-gap-xl-2 {
+    gap: 8px;
+  }
+  .fanui-gap-xl-3 {
+    gap: 12px;
+  }
+  .fanui-gap-xl-4 {
+    gap: 16px;
+  }
+  .fanui-gap-xl-5 {
+    gap: 20px;
+  }
+  .fanui-gap-xl-6 {
+    gap: 24px;
+  }
+  .fanui-gap-xl-8 {
+    gap: 32px;
+  }
+  .fanui-gap-xl-10 {
+    gap: 40px;
+  }
+  .fanui-gap-xl-12 {
+    gap: 48px;
+  }
+  .fanui-gap-xl-16 {
+    gap: 64px;
+  }
+  .fanui-gap-xl-20 {
+    gap: 80px;
+  }
+  .fanui-gap-xl-24 {
+    gap: 96px;
+  }
+  .fanui-order-xl-0 {
+    order: 0;
+  }
+  .fanui-order-xl-1 {
+    order: 1;
+  }
+  .fanui-order-xl-2 {
+    order: 2;
+  }
+  .fanui-order-xl-3 {
+    order: 3;
+  }
+  .fanui-order-xl-4 {
+    order: 4;
+  }
+  .fanui-order-xl-5 {
+    order: 5;
+  }
+  .fanui-order-xl-6 {
+    order: 6;
+  }
+  .fanui-order-xl-7 {
+    order: 7;
+  }
+  .fanui-order-xl-8 {
+    order: 8;
+  }
+  .fanui-order-xl-9 {
+    order: 9;
+  }
+  .fanui-order-xl-10 {
+    order: 10;
+  }
+  .fanui-order-xl-11 {
+    order: 11;
+  }
+  .fanui-order-xl-12 {
+    order: 12;
+  }
+  .fanui-order-xl-first {
+    order: -9999;
+  }
+  .fanui-order-xl-last {
+    order: 9999;
+  }
+}
+@media (min-width: 1400px) {
+  .fanui-d-xxl-none {
+    display: none;
+  }
+  .fanui-d-xxl-block {
+    display: block;
+  }
+  .fanui-d-xxl-inline {
+    display: inline;
+  }
+  .fanui-d-xxl-inline-block {
+    display: inline-block;
+  }
+  .fanui-d-xxl-flex {
+    display: flex;
+  }
+  .fanui-d-xxl-inline-flex {
+    display: inline-flex;
+  }
+  .fanui-d-xxl-grid {
+    display: grid;
+  }
+  .fanui-d-xxl-inline-grid {
+    display: inline-grid;
+  }
+  .fanui-flex-xxl-row {
+    flex-direction: row;
+  }
+  .fanui-flex-xxl-col {
+    flex-direction: column;
+  }
+  .fanui-flex-xxl-row-reverse {
+    flex-direction: row-reverse;
+  }
+  .fanui-flex-xxl-col-reverse {
+    flex-direction: column-reverse;
+  }
+  .fanui-flex-xxl-wrap {
+    flex-wrap: wrap;
+  }
+  .fanui-flex-xxl-nowrap {
+    flex-wrap: nowrap;
+  }
+  .fanui-justify-xxl-start {
+    justify-content: flex-start;
+  }
+  .fanui-justify-xxl-end {
+    justify-content: flex-end;
+  }
+  .fanui-justify-xxl-center {
+    justify-content: center;
+  }
+  .fanui-justify-xxl-between {
+    justify-content: space-between;
+  }
+  .fanui-justify-xxl-around {
+    justify-content: space-around;
+  }
+  .fanui-justify-xxl-evenly {
+    justify-content: space-evenly;
+  }
+  .fanui-justify-xxl-stretch {
+    justify-content: stretch;
+  }
+  .fanui-items-xxl-start {
+    align-items: flex-start;
+  }
+  .fanui-self-xxl-start {
+    align-self: flex-start;
+  }
+  .fanui-items-xxl-end {
+    align-items: flex-end;
+  }
+  .fanui-self-xxl-end {
+    align-self: flex-end;
+  }
+  .fanui-items-xxl-center {
+    align-items: center;
+  }
+  .fanui-self-xxl-center {
+    align-self: center;
+  }
+  .fanui-items-xxl-baseline {
+    align-items: baseline;
+  }
+  .fanui-self-xxl-baseline {
+    align-self: baseline;
+  }
+  .fanui-items-xxl-stretch {
+    align-items: stretch;
+  }
+  .fanui-self-xxl-stretch {
+    align-self: stretch;
+  }
+  .fanui-gap-xxl-0 {
+    gap: 0;
+  }
+  .fanui-gap-xxl-1 {
+    gap: 4px;
+  }
+  .fanui-gap-xxl-2 {
+    gap: 8px;
+  }
+  .fanui-gap-xxl-3 {
+    gap: 12px;
+  }
+  .fanui-gap-xxl-4 {
+    gap: 16px;
+  }
+  .fanui-gap-xxl-5 {
+    gap: 20px;
+  }
+  .fanui-gap-xxl-6 {
+    gap: 24px;
+  }
+  .fanui-gap-xxl-8 {
+    gap: 32px;
+  }
+  .fanui-gap-xxl-10 {
+    gap: 40px;
+  }
+  .fanui-gap-xxl-12 {
+    gap: 48px;
+  }
+  .fanui-gap-xxl-16 {
+    gap: 64px;
+  }
+  .fanui-gap-xxl-20 {
+    gap: 80px;
+  }
+  .fanui-gap-xxl-24 {
+    gap: 96px;
+  }
+  .fanui-order-xxl-0 {
+    order: 0;
+  }
+  .fanui-order-xxl-1 {
+    order: 1;
+  }
+  .fanui-order-xxl-2 {
+    order: 2;
+  }
+  .fanui-order-xxl-3 {
+    order: 3;
+  }
+  .fanui-order-xxl-4 {
+    order: 4;
+  }
+  .fanui-order-xxl-5 {
+    order: 5;
+  }
+  .fanui-order-xxl-6 {
+    order: 6;
+  }
+  .fanui-order-xxl-7 {
+    order: 7;
+  }
+  .fanui-order-xxl-8 {
+    order: 8;
+  }
+  .fanui-order-xxl-9 {
+    order: 9;
+  }
+  .fanui-order-xxl-10 {
+    order: 10;
+  }
+  .fanui-order-xxl-11 {
+    order: 11;
+  }
+  .fanui-order-xxl-12 {
+    order: 12;
+  }
+  .fanui-order-xxl-first {
+    order: -9999;
+  }
+  .fanui-order-xxl-last {
+    order: 9999;
+  }
+}
+.fanui-center {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: nowrap;
+}
+
+.fanui-center-col {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: nowrap;
+}
+
+.fanui-between {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: nowrap;
+}
+
+.fanui-around {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  align-items: center;
+  flex-wrap: nowrap;
+}
+
+.fanui-start {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  flex-wrap: nowrap;
+}
+
+.fanui-end {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  align-items: center;
+  flex-wrap: nowrap;
+}
+
+.fanui-stack {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: stretch;
+  flex-wrap: nowrap;
+}
+
+.fanui-inline-row {
+  display: inline-flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  flex-wrap: nowrap;
+}
+
+.fanui-fill {
+  flex: 1 1 0%;
+  min-width: 0;
+}
+
+.fanui-all-center {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: nowrap;
+}