@xlabs-store/core 0.0.1

package/dist/collection/components/x-col/x-col.css

@@ -0,0 +1,1704 @@
+@charset "UTF-8";
+:root {
+  /** Primary Colors **/
+  --x-color-primary: #1677ff;
+  --x-color-primary-rgb: 22, 119, 255;
+  --x-color-primary-contrast: #ffffff;
+  --x-color-primary-contrast-rgb: 255, 255, 255;
+  --x-color-primary-shade: #0958d9;
+  --x-color-primary-tint: #4096ff;
+  --x-color-primary-bg: #e6f4ff;
+  --x-color-primary-bg-hover: #bae0ff;
+  --x-color-primary-border: #91caff;
+  --x-color-primary-border-hover: #69b1ff;
+  --x-color-primary-hover: #4096ff;
+  --x-color-primary-active: #0958d9;
+  --x-color-primary-text: #1677ff;
+  --x-color-primary-text-hover: #4096ff;
+  --x-color-primary-text-active: #0958d9;
+  /** Secondary Colors **/
+  --x-color-secondary: #3dc2ff;
+  --x-color-secondary-rgb: 61, 194, 255;
+  --x-color-secondary-contrast: #ffffff;
+  --x-color-secondary-contrast-rgb: 255, 255, 255;
+  --x-color-secondary-shade: #36abe0;
+  --x-color-secondary-tint: #50c8ff;
+  /** Success Colors **/
+  --x-color-success: #52c41a;
+  --x-color-success-rgb: 82, 196, 26;
+  --x-color-success-contrast: #ffffff;
+  --x-color-success-contrast-rgb: 255, 255, 255;
+  --x-color-success-shade: #389e0d;
+  --x-color-success-tint: #73d13d;
+  --x-color-success-bg: #f6ffed;
+  --x-color-success-bg-hover: #d9f7be;
+  --x-color-success-border: #b7eb8f;
+  --x-color-success-border-hover: #95de64;
+  --x-color-success-hover: #73d13d;
+  --x-color-success-active: #389e0d;
+  --x-color-success-text: #52c41a;
+  --x-color-success-text-hover: #73d13d;
+  --x-color-success-text-active: #389e0d;
+  /** Warning Colors **/
+  --x-color-warning: #faad14;
+  --x-color-warning-rgb: 250, 173, 20;
+  --x-color-warning-contrast: #000000;
+  --x-color-warning-contrast-rgb: 0, 0, 0;
+  --x-color-warning-shade: #d48806;
+  --x-color-warning-tint: #ffc53d;
+  --x-color-warning-bg: #fffbe6;
+  --x-color-warning-bg-hover: #fff1b8;
+  --x-color-warning-border: #ffe58f;
+  --x-color-warning-border-hover: #ffd666;
+  --x-color-warning-hover: #ffc53d;
+  --x-color-warning-active: #d48806;
+  --x-color-warning-text: #faad14;
+  --x-color-warning-text-hover: #ffc53d;
+  --x-color-warning-text-active: #d48806;
+  /** Danger/Error Colors **/
+  --x-color-danger: #ff4d4f;
+  --x-color-danger-rgb: 255, 77, 79;
+  --x-color-danger-contrast: #ffffff;
+  --x-color-danger-contrast-rgb: 255, 255, 255;
+  --x-color-danger-shade: #cf1322;
+  --x-color-danger-tint: #ff7875;
+  --x-color-error: #ff4d4f;
+  --x-color-error-rgb: 255, 77, 79;
+  --x-color-error-bg: #fff2f0;
+  --x-color-error-bg-hover: #ffccc7;
+  --x-color-error-border: #ffa39e;
+  --x-color-error-border-hover: #ff7875;
+  --x-color-error-hover: #ff7875;
+  --x-color-error-active: #d9363e;
+  --x-color-error-text: #ff4d4f;
+  --x-color-error-text-hover: #ff7875;
+  --x-color-error-text-active: #d9363e;
+  /** Info Colors **/
+  --x-color-info: #1677ff;
+  --x-color-info-rgb: 22, 119, 255;
+  --x-color-info-bg: #e6f4ff;
+  --x-color-info-bg-hover: #bae0ff;
+  --x-color-info-border: #91caff;
+  --x-color-info-border-hover: #69b1ff;
+  --x-color-info-hover: #69b1ff;
+  --x-color-info-active: #0958d9;
+  --x-color-info-text: #1677ff;
+  --x-color-info-text-hover: #69b1ff;
+  --x-color-info-text-active: #0958d9;
+  /** Text Colors **/
+  --x-color-text: rgba(0, 0, 0, 0.88);
+  --x-color-text-secondary: rgba(0, 0, 0, 0.65);
+  --x-color-text-tertiary: rgba(0, 0, 0, 0.45);
+  --x-color-text-quaternary: rgba(0, 0, 0, 0.25);
+  --x-color-text-disabled: rgba(0, 0, 0, 0.25);
+  --x-color-text-placeholder: rgba(0, 0, 0, 0.25);
+  --x-color-text-heading: rgba(0, 0, 0, 0.88);
+  --x-color-text-label: rgba(0, 0, 0, 0.65);
+  --x-color-text-description: rgba(0, 0, 0, 0.45);
+  --x-color-text-light-solid: #ffffff;
+  /** Background Colors **/
+  --x-color-bg-container: #ffffff;
+  --x-color-bg-elevated: #ffffff;
+  --x-color-bg-layout: #f5f5f5;
+  --x-color-bg-spotlight: rgba(0, 0, 0, 0.85);
+  --x-color-bg-mask: rgba(0, 0, 0, 0.45);
+  --x-color-bg-base: #ffffff;
+  --x-color-bg-container-disabled: #f5f5f5;
+  --x-color-bg-container-loading: rgba(255, 255, 255, 0.65);
+  /** Common Colors **/
+  --x-color-white: #ffffff;
+  /** Fill Colors **/
+  --x-color-fill: rgba(0, 0, 0, 0.15);
+  --x-color-fill-secondary: rgba(0, 0, 0, 0.06);
+  --x-color-fill-tertiary: rgba(0, 0, 0, 0.04);
+  --x-color-fill-quaternary: rgba(0, 0, 0, 0.02);
+  /** Border Colors **/
+  --x-color-border: #d9d9d9;
+  --x-color-border-secondary: #f0f0f0;
+  --x-color-border-bg: #ffffff;
+  /** Split/Divider Colors **/
+  --x-color-split: rgba(5, 5, 5, 0.06);
+  /** Dark/Medium/Light - Legacy support **/
+  --x-color-dark: #222428;
+  --x-color-dark-rgb: 34, 36, 40;
+  --x-color-dark-contrast: #ffffff;
+  --x-color-dark-contrast-rgb: 255, 255, 255;
+  --x-color-dark-shade: #1e2023;
+  --x-color-dark-tint: #383a3e;
+  --x-color-medium: #92949c;
+  --x-color-medium-rgb: 146, 148, 156;
+  --x-color-medium-contrast: #ffffff;
+  --x-color-medium-contrast-rgb: 255, 255, 255;
+  --x-color-medium-shade: #808289;
+  --x-color-medium-tint: #9d9fa6;
+  --x-color-light: #f4f5f8;
+  --x-color-light-rgb: 244, 245, 248;
+  --x-color-light-contrast: #000000;
+  --x-color-light-contrast-rgb: 0, 0, 0;
+  --x-color-light-shade: #d7d8da;
+  --x-color-light-tint: #f5f6f9;
+  /** Font Family **/
+  --x-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --x-font-family-code: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
+  /** Font Sizes **/
+  --x-font-size: 14px;
+  --x-font-size-sm: 12px;
+  --x-font-size-lg: 16px;
+  --x-font-size-xl: 20px;
+  /** Heading Font Sizes **/
+  --x-font-size-heading-1: 38px;
+  --x-font-size-heading-2: 30px;
+  --x-font-size-heading-3: 24px;
+  --x-font-size-heading-4: 20px;
+  --x-font-size-heading-5: 16px;
+  /** Line Heights **/
+  --x-line-height: 1.5714285714285714;
+  --x-line-height-lg: 1.5;
+  --x-line-height-sm: 1.6666666666666667;
+  --x-line-height-heading-1: 1.2105263157894737;
+  --x-line-height-heading-2: 1.2666666666666666;
+  --x-line-height-heading-3: 1.3333333333333333;
+  --x-line-height-heading-4: 1.4;
+  --x-line-height-heading-5: 1.5;
+  /** Font Weight **/
+  --x-font-weight-normal: 400;
+  --x-font-weight-medium: 500;
+  --x-font-weight-semibold: 600;
+  --x-font-weight-strong: 600;
+  /** Additional Font Sizes **/
+  --x-font-size-base: 14px;
+  --x-font-size-xxl: 24px;
+  /** Additional Line Heights **/
+  --x-line-height-base: 1.5714285714285714;
+  --x-spacing-xxs: 4px;
+  --x-spacing-xs: 8px;
+  --x-spacing-sm: 12px;
+  --x-spacing-md: 16px;
+  --x-spacing-lg: 20px;
+  --x-spacing-xl: 24px;
+  --x-spacing-xxl: 32px;
+  --x-spacing-xxxl: 48px;
+  /** Margin/Padding shortcuts **/
+  --x-margin-xxs: 4px;
+  --x-margin-xs: 8px;
+  --x-margin-sm: 12px;
+  --x-margin-md: 16px;
+  --x-margin-lg: 24px;
+  --x-margin-xl: 32px;
+  --x-margin-xxl: 48px;
+  --x-padding-xxs: 4px;
+  --x-padding-xs: 8px;
+  --x-padding-sm: 12px;
+  --x-padding-md: 16px;
+  --x-padding-lg: 24px;
+  --x-padding-content-horizontal-lg: 24px;
+  --x-padding-content-vertical-lg: 12px;
+  --x-padding-content-horizontal: 16px;
+  --x-padding-content-vertical: 12px;
+  --x-padding-content-horizontal-sm: 16px;
+  --x-padding-content-vertical-sm: 8px;
+  --x-border-radius: 6px;
+  --x-border-radius-xs: 2px;
+  --x-border-radius-sm: 4px;
+  --x-border-radius-lg: 8px;
+  --x-border-radius-xl: 12px;
+  --x-border-radius-outer: 4px;
+  --x-border-radius-base: 6px;
+  --x-border-width: 1px;
+  --x-border-width-base: 1px;
+  --x-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
+  --x-shadow-secondary: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
+  --x-shadow-tertiary: 0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);
+  --x-shadow-lg: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
+  --x-box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
+  --x-box-shadow-secondary: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
+  --x-box-shadow-tertiary: 0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);
+  --x-box-shadow-popover-arrow: 2px 2px 5px rgba(0, 0, 0, 0.05);
+  --x-box-shadow-card: 0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09);
+  --x-box-shadow-drawer-right: -6px 0 16px 0 rgba(0, 0, 0, 0.08), -3px 0 6px -4px rgba(0, 0, 0, 0.12), -9px 0 28px 8px rgba(0, 0, 0, 0.05);
+  --x-box-shadow-drawer-left: 6px 0 16px 0 rgba(0, 0, 0, 0.08), 3px 0 6px -4px rgba(0, 0, 0, 0.12), 9px 0 28px 8px rgba(0, 0, 0, 0.05);
+  --x-box-shadow-drawer-up: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
+  --x-box-shadow-drawer-down: 0 -6px 16px 0 rgba(0, 0, 0, 0.08), 0 -3px 6px -4px rgba(0, 0, 0, 0.12), 0 -9px 28px 8px rgba(0, 0, 0, 0.05);
+  --x-box-shadow-tabs-overflow-left: inset 10px 0 8px -8px rgba(0, 0, 0, 0.08);
+  --x-box-shadow-tabs-overflow-right: inset -10px 0 8px -8px rgba(0, 0, 0, 0.08);
+  --x-box-shadow-tabs-overflow-top: inset 0 10px 8px -8px rgba(0, 0, 0, 0.08);
+  --x-box-shadow-tabs-overflow-bottom: inset 0 -10px 8px -8px rgba(0, 0, 0, 0.08);
+  --x-motion-duration-fast: 0.1s;
+  --x-motion-duration-mid: 0.2s;
+  --x-motion-duration-slow: 0.3s;
+  --x-motion-ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
+  --x-motion-ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
+  --x-motion-ease-in: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+  --x-motion-ease-out-back: cubic-bezier(0.12, 0.4, 0.29, 1.46);
+  --x-motion-ease-in-back: cubic-bezier(0.71, -0.46, 0.88, 0.6);
+  --x-motion-ease-in-out-circle: cubic-bezier(0.78, 0.14, 0.15, 0.86);
+  --x-motion-ease-out-circle: cubic-bezier(0.08, 0.82, 0.17, 1);
+  --x-motion-ease-in-circle: cubic-bezier(0.6, 0.04, 0.98, 0.34);
+  --x-motion-ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+  --x-motion-ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
+  --x-z-index-base: 0;
+  --x-z-index-popup-base: 1000;
+  --x-z-index-popup: 1030;
+  --x-z-index-affix: 10;
+  --x-z-index-modal: 1000;
+  --x-z-index-modal-mask: 1000;
+  --x-z-index-drawer: 1000;
+  --x-z-index-popover: 1030;
+  --x-z-index-dropdown: 1050;
+  --x-z-index-tooltip: 1070;
+  --x-z-index-notification: 1080;
+  --x-z-index-message: 1090;
+  --x-z-index-popconfirm: 1060;
+  --x-z-index-table-fixed: 10;
+  --x-opacity-loading: 0.65;
+  --x-opacity-image: 1;
+  --x-opacity-disabled: 0.5;
+  --x-control-height: 32px;
+  --x-control-height-xs: 24px;
+  --x-control-height-sm: 24px;
+  --x-control-height-lg: 40px;
+  --x-control-radio-size: 16px;
+  --x-control-checkbox-size: 16px;
+  --x-control-padding-horizontal: 12px;
+  --x-control-padding-horizontal-sm: 8px;
+  --x-control-outline-width: 2px;
+  --x-control-outline: rgba(5, 145, 255, 0.1);
+  --x-control-item-bg-hover: rgba(0, 0, 0, 0.04);
+  --x-control-item-bg-active: #e6f4ff;
+  --x-control-item-bg-active-hover: #bae0ff;
+  --x-control-item-bg-active-disabled: rgba(0, 0, 0, 0.15);
+  --x-control-tmp-outline: rgba(0, 0, 0, 0.02);
+  --x-color-yellow: #fadb14;
+  --x-color-yellow-rgb: 250, 219, 20;
+  --x-font-family-base: var(--x-font-family);
+  --x-color-link: #1677ff;
+  --x-color-link-hover: #69b1ff;
+  --x-color-link-active: #0958d9;
+  --x-color-icon: rgba(0, 0, 0, 0.45);
+  --x-color-icon-hover: rgba(0, 0, 0, 0.88);
+  --x-color-highlight: #ff4d4f;
+  --x-color-bg-text-hover: rgba(0, 0, 0, 0.06);
+  --x-color-bg-text-active: rgba(0, 0, 0, 0.15);
+  --x-screen-xs: 480px;
+  --x-screen-xs-min: 480px;
+  --x-screen-xs-max: 575px;
+  --x-screen-sm: 576px;
+  --x-screen-sm-min: 576px;
+  --x-screen-sm-max: 767px;
+  --x-screen-md: 768px;
+  --x-screen-md-min: 768px;
+  --x-screen-md-max: 991px;
+  --x-screen-lg: 992px;
+  --x-screen-lg-min: 992px;
+  --x-screen-lg-max: 1199px;
+  --x-screen-xl: 1200px;
+  --x-screen-xl-min: 1200px;
+  --x-screen-xl-max: 1599px;
+  --x-screen-xxl: 1600px;
+  --x-screen-xxl-min: 1600px;
+  --x-color-fill-content: rgba(0, 0, 0, 0.06);
+  --x-color-fill-content-hover: rgba(0, 0, 0, 0.15);
+  --x-color-fill-alter: rgba(0, 0, 0, 0.02);
+  --x-scrollbar-width: 12px;
+  --x-scrollbar-track-bg: rgba(0, 0, 0, 0.04);
+  --x-scrollbar-thumb-bg: rgba(0, 0, 0, 0.25);
+  --x-scrollbar-thumb-bg-hover: rgba(0, 0, 0, 0.35);
+  --x-menu-dark-bg: #001529;
+  --x-menu-dark-item-bg: #001529;
+  --x-menu-dark-popup-bg: #001529;
+  --x-menu-dark-submenu-item-bg: #000c17;
+}
+
+/**
+* X-Col Component Variables
+* 
+* Sass variables for x-col component
+* Resolution priority: x-col → ref (x-*)
+* 
+* Usage: Import this file in x-col.scss
+* @use './variables' as *;
+*/
+/**
+ * X-Col Component Styles
+ * 
+ * Uses Sass variables from _variables.scss
+ * Resolution priority: x-col → ref (x-*)
+ */
+:host {
+  /* ========================================
+   * BASE STYLES
+   * ======================================== */
+  display: var(--x-col-display, block);
+  max-width: 100%;
+  flex: var(--x-col-flex, 0 0 auto);
+  order: var(--x-col-order, 0);
+}
+
+/* Base Grid System (24 columns) */
+:host(.x-col-0) {
+  display: block;
+  flex: 0 0 0%;
+  max-width: 0%;
+}
+
+:host(.x-col-offset-0) {
+  margin-left: 0%;
+}
+
+:host(.x-col-push-0) {
+  left: 0%;
+  position: relative;
+}
+
+:host(.x-col-pull-0) {
+  right: 0%;
+  position: relative;
+}
+
+:host(.x-col-order-0) {
+  order: 0;
+}
+
+:host(.x-col-1) {
+  display: block;
+  flex: 0 0 4.1666666667%;
+  max-width: 4.1666666667%;
+}
+
+:host(.x-col-offset-1) {
+  margin-left: 4.1666666667%;
+}
+
+:host(.x-col-push-1) {
+  left: 4.1666666667%;
+  position: relative;
+}
+
+:host(.x-col-pull-1) {
+  right: 4.1666666667%;
+  position: relative;
+}
+
+:host(.x-col-order-1) {
+  order: 1;
+}
+
+:host(.x-col-2) {
+  display: block;
+  flex: 0 0 8.3333333333%;
+  max-width: 8.3333333333%;
+}
+
+:host(.x-col-offset-2) {
+  margin-left: 8.3333333333%;
+}
+
+:host(.x-col-push-2) {
+  left: 8.3333333333%;
+  position: relative;
+}
+
+:host(.x-col-pull-2) {
+  right: 8.3333333333%;
+  position: relative;
+}
+
+:host(.x-col-order-2) {
+  order: 2;
+}
+
+:host(.x-col-3) {
+  display: block;
+  flex: 0 0 12.5%;
+  max-width: 12.5%;
+}
+
+:host(.x-col-offset-3) {
+  margin-left: 12.5%;
+}
+
+:host(.x-col-push-3) {
+  left: 12.5%;
+  position: relative;
+}
+
+:host(.x-col-pull-3) {
+  right: 12.5%;
+  position: relative;
+}
+
+:host(.x-col-order-3) {
+  order: 3;
+}
+
+:host(.x-col-4) {
+  display: block;
+  flex: 0 0 16.6666666667%;
+  max-width: 16.6666666667%;
+}
+
+:host(.x-col-offset-4) {
+  margin-left: 16.6666666667%;
+}
+
+:host(.x-col-push-4) {
+  left: 16.6666666667%;
+  position: relative;
+}
+
+:host(.x-col-pull-4) {
+  right: 16.6666666667%;
+  position: relative;
+}
+
+:host(.x-col-order-4) {
+  order: 4;
+}
+
+:host(.x-col-5) {
+  display: block;
+  flex: 0 0 20.8333333333%;
+  max-width: 20.8333333333%;
+}
+
+:host(.x-col-offset-5) {
+  margin-left: 20.8333333333%;
+}
+
+:host(.x-col-push-5) {
+  left: 20.8333333333%;
+  position: relative;
+}
+
+:host(.x-col-pull-5) {
+  right: 20.8333333333%;
+  position: relative;
+}
+
+:host(.x-col-order-5) {
+  order: 5;
+}
+
+:host(.x-col-6) {
+  display: block;
+  flex: 0 0 25%;
+  max-width: 25%;
+}
+
+:host(.x-col-offset-6) {
+  margin-left: 25%;
+}
+
+:host(.x-col-push-6) {
+  left: 25%;
+  position: relative;
+}
+
+:host(.x-col-pull-6) {
+  right: 25%;
+  position: relative;
+}
+
+:host(.x-col-order-6) {
+  order: 6;
+}
+
+:host(.x-col-7) {
+  display: block;
+  flex: 0 0 29.1666666667%;
+  max-width: 29.1666666667%;
+}
+
+:host(.x-col-offset-7) {
+  margin-left: 29.1666666667%;
+}
+
+:host(.x-col-push-7) {
+  left: 29.1666666667%;
+  position: relative;
+}
+
+:host(.x-col-pull-7) {
+  right: 29.1666666667%;
+  position: relative;
+}
+
+:host(.x-col-order-7) {
+  order: 7;
+}
+
+:host(.x-col-8) {
+  display: block;
+  flex: 0 0 33.3333333333%;
+  max-width: 33.3333333333%;
+}
+
+:host(.x-col-offset-8) {
+  margin-left: 33.3333333333%;
+}
+
+:host(.x-col-push-8) {
+  left: 33.3333333333%;
+  position: relative;
+}
+
+:host(.x-col-pull-8) {
+  right: 33.3333333333%;
+  position: relative;
+}
+
+:host(.x-col-order-8) {
+  order: 8;
+}
+
+:host(.x-col-9) {
+  display: block;
+  flex: 0 0 37.5%;
+  max-width: 37.5%;
+}
+
+:host(.x-col-offset-9) {
+  margin-left: 37.5%;
+}
+
+:host(.x-col-push-9) {
+  left: 37.5%;
+  position: relative;
+}
+
+:host(.x-col-pull-9) {
+  right: 37.5%;
+  position: relative;
+}
+
+:host(.x-col-order-9) {
+  order: 9;
+}
+
+:host(.x-col-10) {
+  display: block;
+  flex: 0 0 41.6666666667%;
+  max-width: 41.6666666667%;
+}
+
+:host(.x-col-offset-10) {
+  margin-left: 41.6666666667%;
+}
+
+:host(.x-col-push-10) {
+  left: 41.6666666667%;
+  position: relative;
+}
+
+:host(.x-col-pull-10) {
+  right: 41.6666666667%;
+  position: relative;
+}
+
+:host(.x-col-order-10) {
+  order: 10;
+}
+
+:host(.x-col-11) {
+  display: block;
+  flex: 0 0 45.8333333333%;
+  max-width: 45.8333333333%;
+}
+
+:host(.x-col-offset-11) {
+  margin-left: 45.8333333333%;
+}
+
+:host(.x-col-push-11) {
+  left: 45.8333333333%;
+  position: relative;
+}
+
+:host(.x-col-pull-11) {
+  right: 45.8333333333%;
+  position: relative;
+}
+
+:host(.x-col-order-11) {
+  order: 11;
+}
+
+:host(.x-col-12) {
+  display: block;
+  flex: 0 0 50%;
+  max-width: 50%;
+}
+
+:host(.x-col-offset-12) {
+  margin-left: 50%;
+}
+
+:host(.x-col-push-12) {
+  left: 50%;
+  position: relative;
+}
+
+:host(.x-col-pull-12) {
+  right: 50%;
+  position: relative;
+}
+
+:host(.x-col-order-12) {
+  order: 12;
+}
+
+:host(.x-col-13) {
+  display: block;
+  flex: 0 0 54.1666666667%;
+  max-width: 54.1666666667%;
+}
+
+:host(.x-col-offset-13) {
+  margin-left: 54.1666666667%;
+}
+
+:host(.x-col-push-13) {
+  left: 54.1666666667%;
+  position: relative;
+}
+
+:host(.x-col-pull-13) {
+  right: 54.1666666667%;
+  position: relative;
+}
+
+:host(.x-col-order-13) {
+  order: 13;
+}
+
+:host(.x-col-14) {
+  display: block;
+  flex: 0 0 58.3333333333%;
+  max-width: 58.3333333333%;
+}
+
+:host(.x-col-offset-14) {
+  margin-left: 58.3333333333%;
+}
+
+:host(.x-col-push-14) {
+  left: 58.3333333333%;
+  position: relative;
+}
+
+:host(.x-col-pull-14) {
+  right: 58.3333333333%;
+  position: relative;
+}
+
+:host(.x-col-order-14) {
+  order: 14;
+}
+
+:host(.x-col-15) {
+  display: block;
+  flex: 0 0 62.5%;
+  max-width: 62.5%;
+}
+
+:host(.x-col-offset-15) {
+  margin-left: 62.5%;
+}
+
+:host(.x-col-push-15) {
+  left: 62.5%;
+  position: relative;
+}
+
+:host(.x-col-pull-15) {
+  right: 62.5%;
+  position: relative;
+}
+
+:host(.x-col-order-15) {
+  order: 15;
+}
+
+:host(.x-col-16) {
+  display: block;
+  flex: 0 0 66.6666666667%;
+  max-width: 66.6666666667%;
+}
+
+:host(.x-col-offset-16) {
+  margin-left: 66.6666666667%;
+}
+
+:host(.x-col-push-16) {
+  left: 66.6666666667%;
+  position: relative;
+}
+
+:host(.x-col-pull-16) {
+  right: 66.6666666667%;
+  position: relative;
+}
+
+:host(.x-col-order-16) {
+  order: 16;
+}
+
+:host(.x-col-17) {
+  display: block;
+  flex: 0 0 70.8333333333%;
+  max-width: 70.8333333333%;
+}
+
+:host(.x-col-offset-17) {
+  margin-left: 70.8333333333%;
+}
+
+:host(.x-col-push-17) {
+  left: 70.8333333333%;
+  position: relative;
+}
+
+:host(.x-col-pull-17) {
+  right: 70.8333333333%;
+  position: relative;
+}
+
+:host(.x-col-order-17) {
+  order: 17;
+}
+
+:host(.x-col-18) {
+  display: block;
+  flex: 0 0 75%;
+  max-width: 75%;
+}
+
+:host(.x-col-offset-18) {
+  margin-left: 75%;
+}
+
+:host(.x-col-push-18) {
+  left: 75%;
+  position: relative;
+}
+
+:host(.x-col-pull-18) {
+  right: 75%;
+  position: relative;
+}
+
+:host(.x-col-order-18) {
+  order: 18;
+}
+
+:host(.x-col-19) {
+  display: block;
+  flex: 0 0 79.1666666667%;
+  max-width: 79.1666666667%;
+}
+
+:host(.x-col-offset-19) {
+  margin-left: 79.1666666667%;
+}
+
+:host(.x-col-push-19) {
+  left: 79.1666666667%;
+  position: relative;
+}
+
+:host(.x-col-pull-19) {
+  right: 79.1666666667%;
+  position: relative;
+}
+
+:host(.x-col-order-19) {
+  order: 19;
+}
+
+:host(.x-col-20) {
+  display: block;
+  flex: 0 0 83.3333333333%;
+  max-width: 83.3333333333%;
+}
+
+:host(.x-col-offset-20) {
+  margin-left: 83.3333333333%;
+}
+
+:host(.x-col-push-20) {
+  left: 83.3333333333%;
+  position: relative;
+}
+
+:host(.x-col-pull-20) {
+  right: 83.3333333333%;
+  position: relative;
+}
+
+:host(.x-col-order-20) {
+  order: 20;
+}
+
+:host(.x-col-21) {
+  display: block;
+  flex: 0 0 87.5%;
+  max-width: 87.5%;
+}
+
+:host(.x-col-offset-21) {
+  margin-left: 87.5%;
+}
+
+:host(.x-col-push-21) {
+  left: 87.5%;
+  position: relative;
+}
+
+:host(.x-col-pull-21) {
+  right: 87.5%;
+  position: relative;
+}
+
+:host(.x-col-order-21) {
+  order: 21;
+}
+
+:host(.x-col-22) {
+  display: block;
+  flex: 0 0 91.6666666667%;
+  max-width: 91.6666666667%;
+}
+
+:host(.x-col-offset-22) {
+  margin-left: 91.6666666667%;
+}
+
+:host(.x-col-push-22) {
+  left: 91.6666666667%;
+  position: relative;
+}
+
+:host(.x-col-pull-22) {
+  right: 91.6666666667%;
+  position: relative;
+}
+
+:host(.x-col-order-22) {
+  order: 22;
+}
+
+:host(.x-col-23) {
+  display: block;
+  flex: 0 0 95.8333333333%;
+  max-width: 95.8333333333%;
+}
+
+:host(.x-col-offset-23) {
+  margin-left: 95.8333333333%;
+}
+
+:host(.x-col-push-23) {
+  left: 95.8333333333%;
+  position: relative;
+}
+
+:host(.x-col-pull-23) {
+  right: 95.8333333333%;
+  position: relative;
+}
+
+:host(.x-col-order-23) {
+  order: 23;
+}
+
+:host(.x-col-24) {
+  display: block;
+  flex: 0 0 100%;
+  max-width: 100%;
+}
+
+:host(.x-col-offset-24) {
+  margin-left: 100%;
+}
+
+:host(.x-col-push-24) {
+  left: 100%;
+  position: relative;
+}
+
+:host(.x-col-pull-24) {
+  right: 100%;
+  position: relative;
+}
+
+:host(.x-col-order-24) {
+  order: 24;
+}
+
+:host(.x-col-0) {
+  display: none;
+}
+
+/* Responsive Breakpoints */
+@media (min-width: 0) {
+  :host(.x-col-xs-0) {
+    display: block;
+    flex: 0 0 0%;
+    max-width: 0%;
+  }
+  :host(.x-col-xs-1) {
+    display: block;
+    flex: 0 0 4.1666666667%;
+    max-width: 4.1666666667%;
+  }
+  :host(.x-col-xs-2) {
+    display: block;
+    flex: 0 0 8.3333333333%;
+    max-width: 8.3333333333%;
+  }
+  :host(.x-col-xs-3) {
+    display: block;
+    flex: 0 0 12.5%;
+    max-width: 12.5%;
+  }
+  :host(.x-col-xs-4) {
+    display: block;
+    flex: 0 0 16.6666666667%;
+    max-width: 16.6666666667%;
+  }
+  :host(.x-col-xs-5) {
+    display: block;
+    flex: 0 0 20.8333333333%;
+    max-width: 20.8333333333%;
+  }
+  :host(.x-col-xs-6) {
+    display: block;
+    flex: 0 0 25%;
+    max-width: 25%;
+  }
+  :host(.x-col-xs-7) {
+    display: block;
+    flex: 0 0 29.1666666667%;
+    max-width: 29.1666666667%;
+  }
+  :host(.x-col-xs-8) {
+    display: block;
+    flex: 0 0 33.3333333333%;
+    max-width: 33.3333333333%;
+  }
+  :host(.x-col-xs-9) {
+    display: block;
+    flex: 0 0 37.5%;
+    max-width: 37.5%;
+  }
+  :host(.x-col-xs-10) {
+    display: block;
+    flex: 0 0 41.6666666667%;
+    max-width: 41.6666666667%;
+  }
+  :host(.x-col-xs-11) {
+    display: block;
+    flex: 0 0 45.8333333333%;
+    max-width: 45.8333333333%;
+  }
+  :host(.x-col-xs-12) {
+    display: block;
+    flex: 0 0 50%;
+    max-width: 50%;
+  }
+  :host(.x-col-xs-13) {
+    display: block;
+    flex: 0 0 54.1666666667%;
+    max-width: 54.1666666667%;
+  }
+  :host(.x-col-xs-14) {
+    display: block;
+    flex: 0 0 58.3333333333%;
+    max-width: 58.3333333333%;
+  }
+  :host(.x-col-xs-15) {
+    display: block;
+    flex: 0 0 62.5%;
+    max-width: 62.5%;
+  }
+  :host(.x-col-xs-16) {
+    display: block;
+    flex: 0 0 66.6666666667%;
+    max-width: 66.6666666667%;
+  }
+  :host(.x-col-xs-17) {
+    display: block;
+    flex: 0 0 70.8333333333%;
+    max-width: 70.8333333333%;
+  }
+  :host(.x-col-xs-18) {
+    display: block;
+    flex: 0 0 75%;
+    max-width: 75%;
+  }
+  :host(.x-col-xs-19) {
+    display: block;
+    flex: 0 0 79.1666666667%;
+    max-width: 79.1666666667%;
+  }
+  :host(.x-col-xs-20) {
+    display: block;
+    flex: 0 0 83.3333333333%;
+    max-width: 83.3333333333%;
+  }
+  :host(.x-col-xs-21) {
+    display: block;
+    flex: 0 0 87.5%;
+    max-width: 87.5%;
+  }
+  :host(.x-col-xs-22) {
+    display: block;
+    flex: 0 0 91.6666666667%;
+    max-width: 91.6666666667%;
+  }
+  :host(.x-col-xs-23) {
+    display: block;
+    flex: 0 0 95.8333333333%;
+    max-width: 95.8333333333%;
+  }
+  :host(.x-col-xs-24) {
+    display: block;
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+}
+@media (min-width: 576px) {
+  :host(.x-col-sm-0) {
+    display: block;
+    flex: 0 0 0%;
+    max-width: 0%;
+  }
+  :host(.x-col-sm-1) {
+    display: block;
+    flex: 0 0 4.1666666667%;
+    max-width: 4.1666666667%;
+  }
+  :host(.x-col-sm-2) {
+    display: block;
+    flex: 0 0 8.3333333333%;
+    max-width: 8.3333333333%;
+  }
+  :host(.x-col-sm-3) {
+    display: block;
+    flex: 0 0 12.5%;
+    max-width: 12.5%;
+  }
+  :host(.x-col-sm-4) {
+    display: block;
+    flex: 0 0 16.6666666667%;
+    max-width: 16.6666666667%;
+  }
+  :host(.x-col-sm-5) {
+    display: block;
+    flex: 0 0 20.8333333333%;
+    max-width: 20.8333333333%;
+  }
+  :host(.x-col-sm-6) {
+    display: block;
+    flex: 0 0 25%;
+    max-width: 25%;
+  }
+  :host(.x-col-sm-7) {
+    display: block;
+    flex: 0 0 29.1666666667%;
+    max-width: 29.1666666667%;
+  }
+  :host(.x-col-sm-8) {
+    display: block;
+    flex: 0 0 33.3333333333%;
+    max-width: 33.3333333333%;
+  }
+  :host(.x-col-sm-9) {
+    display: block;
+    flex: 0 0 37.5%;
+    max-width: 37.5%;
+  }
+  :host(.x-col-sm-10) {
+    display: block;
+    flex: 0 0 41.6666666667%;
+    max-width: 41.6666666667%;
+  }
+  :host(.x-col-sm-11) {
+    display: block;
+    flex: 0 0 45.8333333333%;
+    max-width: 45.8333333333%;
+  }
+  :host(.x-col-sm-12) {
+    display: block;
+    flex: 0 0 50%;
+    max-width: 50%;
+  }
+  :host(.x-col-sm-13) {
+    display: block;
+    flex: 0 0 54.1666666667%;
+    max-width: 54.1666666667%;
+  }
+  :host(.x-col-sm-14) {
+    display: block;
+    flex: 0 0 58.3333333333%;
+    max-width: 58.3333333333%;
+  }
+  :host(.x-col-sm-15) {
+    display: block;
+    flex: 0 0 62.5%;
+    max-width: 62.5%;
+  }
+  :host(.x-col-sm-16) {
+    display: block;
+    flex: 0 0 66.6666666667%;
+    max-width: 66.6666666667%;
+  }
+  :host(.x-col-sm-17) {
+    display: block;
+    flex: 0 0 70.8333333333%;
+    max-width: 70.8333333333%;
+  }
+  :host(.x-col-sm-18) {
+    display: block;
+    flex: 0 0 75%;
+    max-width: 75%;
+  }
+  :host(.x-col-sm-19) {
+    display: block;
+    flex: 0 0 79.1666666667%;
+    max-width: 79.1666666667%;
+  }
+  :host(.x-col-sm-20) {
+    display: block;
+    flex: 0 0 83.3333333333%;
+    max-width: 83.3333333333%;
+  }
+  :host(.x-col-sm-21) {
+    display: block;
+    flex: 0 0 87.5%;
+    max-width: 87.5%;
+  }
+  :host(.x-col-sm-22) {
+    display: block;
+    flex: 0 0 91.6666666667%;
+    max-width: 91.6666666667%;
+  }
+  :host(.x-col-sm-23) {
+    display: block;
+    flex: 0 0 95.8333333333%;
+    max-width: 95.8333333333%;
+  }
+  :host(.x-col-sm-24) {
+    display: block;
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+}
+@media (min-width: 768px) {
+  :host(.x-col-md-0) {
+    display: block;
+    flex: 0 0 0%;
+    max-width: 0%;
+  }
+  :host(.x-col-md-1) {
+    display: block;
+    flex: 0 0 4.1666666667%;
+    max-width: 4.1666666667%;
+  }
+  :host(.x-col-md-2) {
+    display: block;
+    flex: 0 0 8.3333333333%;
+    max-width: 8.3333333333%;
+  }
+  :host(.x-col-md-3) {
+    display: block;
+    flex: 0 0 12.5%;
+    max-width: 12.5%;
+  }
+  :host(.x-col-md-4) {
+    display: block;
+    flex: 0 0 16.6666666667%;
+    max-width: 16.6666666667%;
+  }
+  :host(.x-col-md-5) {
+    display: block;
+    flex: 0 0 20.8333333333%;
+    max-width: 20.8333333333%;
+  }
+  :host(.x-col-md-6) {
+    display: block;
+    flex: 0 0 25%;
+    max-width: 25%;
+  }
+  :host(.x-col-md-7) {
+    display: block;
+    flex: 0 0 29.1666666667%;
+    max-width: 29.1666666667%;
+  }
+  :host(.x-col-md-8) {
+    display: block;
+    flex: 0 0 33.3333333333%;
+    max-width: 33.3333333333%;
+  }
+  :host(.x-col-md-9) {
+    display: block;
+    flex: 0 0 37.5%;
+    max-width: 37.5%;
+  }
+  :host(.x-col-md-10) {
+    display: block;
+    flex: 0 0 41.6666666667%;
+    max-width: 41.6666666667%;
+  }
+  :host(.x-col-md-11) {
+    display: block;
+    flex: 0 0 45.8333333333%;
+    max-width: 45.8333333333%;
+  }
+  :host(.x-col-md-12) {
+    display: block;
+    flex: 0 0 50%;
+    max-width: 50%;
+  }
+  :host(.x-col-md-13) {
+    display: block;
+    flex: 0 0 54.1666666667%;
+    max-width: 54.1666666667%;
+  }
+  :host(.x-col-md-14) {
+    display: block;
+    flex: 0 0 58.3333333333%;
+    max-width: 58.3333333333%;
+  }
+  :host(.x-col-md-15) {
+    display: block;
+    flex: 0 0 62.5%;
+    max-width: 62.5%;
+  }
+  :host(.x-col-md-16) {
+    display: block;
+    flex: 0 0 66.6666666667%;
+    max-width: 66.6666666667%;
+  }
+  :host(.x-col-md-17) {
+    display: block;
+    flex: 0 0 70.8333333333%;
+    max-width: 70.8333333333%;
+  }
+  :host(.x-col-md-18) {
+    display: block;
+    flex: 0 0 75%;
+    max-width: 75%;
+  }
+  :host(.x-col-md-19) {
+    display: block;
+    flex: 0 0 79.1666666667%;
+    max-width: 79.1666666667%;
+  }
+  :host(.x-col-md-20) {
+    display: block;
+    flex: 0 0 83.3333333333%;
+    max-width: 83.3333333333%;
+  }
+  :host(.x-col-md-21) {
+    display: block;
+    flex: 0 0 87.5%;
+    max-width: 87.5%;
+  }
+  :host(.x-col-md-22) {
+    display: block;
+    flex: 0 0 91.6666666667%;
+    max-width: 91.6666666667%;
+  }
+  :host(.x-col-md-23) {
+    display: block;
+    flex: 0 0 95.8333333333%;
+    max-width: 95.8333333333%;
+  }
+  :host(.x-col-md-24) {
+    display: block;
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+}
+@media (min-width: 992px) {
+  :host(.x-col-lg-0) {
+    display: block;
+    flex: 0 0 0%;
+    max-width: 0%;
+  }
+  :host(.x-col-lg-1) {
+    display: block;
+    flex: 0 0 4.1666666667%;
+    max-width: 4.1666666667%;
+  }
+  :host(.x-col-lg-2) {
+    display: block;
+    flex: 0 0 8.3333333333%;
+    max-width: 8.3333333333%;
+  }
+  :host(.x-col-lg-3) {
+    display: block;
+    flex: 0 0 12.5%;
+    max-width: 12.5%;
+  }
+  :host(.x-col-lg-4) {
+    display: block;
+    flex: 0 0 16.6666666667%;
+    max-width: 16.6666666667%;
+  }
+  :host(.x-col-lg-5) {
+    display: block;
+    flex: 0 0 20.8333333333%;
+    max-width: 20.8333333333%;
+  }
+  :host(.x-col-lg-6) {
+    display: block;
+    flex: 0 0 25%;
+    max-width: 25%;
+  }
+  :host(.x-col-lg-7) {
+    display: block;
+    flex: 0 0 29.1666666667%;
+    max-width: 29.1666666667%;
+  }
+  :host(.x-col-lg-8) {
+    display: block;
+    flex: 0 0 33.3333333333%;
+    max-width: 33.3333333333%;
+  }
+  :host(.x-col-lg-9) {
+    display: block;
+    flex: 0 0 37.5%;
+    max-width: 37.5%;
+  }
+  :host(.x-col-lg-10) {
+    display: block;
+    flex: 0 0 41.6666666667%;
+    max-width: 41.6666666667%;
+  }
+  :host(.x-col-lg-11) {
+    display: block;
+    flex: 0 0 45.8333333333%;
+    max-width: 45.8333333333%;
+  }
+  :host(.x-col-lg-12) {
+    display: block;
+    flex: 0 0 50%;
+    max-width: 50%;
+  }
+  :host(.x-col-lg-13) {
+    display: block;
+    flex: 0 0 54.1666666667%;
+    max-width: 54.1666666667%;
+  }
+  :host(.x-col-lg-14) {
+    display: block;
+    flex: 0 0 58.3333333333%;
+    max-width: 58.3333333333%;
+  }
+  :host(.x-col-lg-15) {
+    display: block;
+    flex: 0 0 62.5%;
+    max-width: 62.5%;
+  }
+  :host(.x-col-lg-16) {
+    display: block;
+    flex: 0 0 66.6666666667%;
+    max-width: 66.6666666667%;
+  }
+  :host(.x-col-lg-17) {
+    display: block;
+    flex: 0 0 70.8333333333%;
+    max-width: 70.8333333333%;
+  }
+  :host(.x-col-lg-18) {
+    display: block;
+    flex: 0 0 75%;
+    max-width: 75%;
+  }
+  :host(.x-col-lg-19) {
+    display: block;
+    flex: 0 0 79.1666666667%;
+    max-width: 79.1666666667%;
+  }
+  :host(.x-col-lg-20) {
+    display: block;
+    flex: 0 0 83.3333333333%;
+    max-width: 83.3333333333%;
+  }
+  :host(.x-col-lg-21) {
+    display: block;
+    flex: 0 0 87.5%;
+    max-width: 87.5%;
+  }
+  :host(.x-col-lg-22) {
+    display: block;
+    flex: 0 0 91.6666666667%;
+    max-width: 91.6666666667%;
+  }
+  :host(.x-col-lg-23) {
+    display: block;
+    flex: 0 0 95.8333333333%;
+    max-width: 95.8333333333%;
+  }
+  :host(.x-col-lg-24) {
+    display: block;
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+}
+@media (min-width: 1200px) {
+  :host(.x-col-xl-0) {
+    display: block;
+    flex: 0 0 0%;
+    max-width: 0%;
+  }
+  :host(.x-col-xl-1) {
+    display: block;
+    flex: 0 0 4.1666666667%;
+    max-width: 4.1666666667%;
+  }
+  :host(.x-col-xl-2) {
+    display: block;
+    flex: 0 0 8.3333333333%;
+    max-width: 8.3333333333%;
+  }
+  :host(.x-col-xl-3) {
+    display: block;
+    flex: 0 0 12.5%;
+    max-width: 12.5%;
+  }
+  :host(.x-col-xl-4) {
+    display: block;
+    flex: 0 0 16.6666666667%;
+    max-width: 16.6666666667%;
+  }
+  :host(.x-col-xl-5) {
+    display: block;
+    flex: 0 0 20.8333333333%;
+    max-width: 20.8333333333%;
+  }
+  :host(.x-col-xl-6) {
+    display: block;
+    flex: 0 0 25%;
+    max-width: 25%;
+  }
+  :host(.x-col-xl-7) {
+    display: block;
+    flex: 0 0 29.1666666667%;
+    max-width: 29.1666666667%;
+  }
+  :host(.x-col-xl-8) {
+    display: block;
+    flex: 0 0 33.3333333333%;
+    max-width: 33.3333333333%;
+  }
+  :host(.x-col-xl-9) {
+    display: block;
+    flex: 0 0 37.5%;
+    max-width: 37.5%;
+  }
+  :host(.x-col-xl-10) {
+    display: block;
+    flex: 0 0 41.6666666667%;
+    max-width: 41.6666666667%;
+  }
+  :host(.x-col-xl-11) {
+    display: block;
+    flex: 0 0 45.8333333333%;
+    max-width: 45.8333333333%;
+  }
+  :host(.x-col-xl-12) {
+    display: block;
+    flex: 0 0 50%;
+    max-width: 50%;
+  }
+  :host(.x-col-xl-13) {
+    display: block;
+    flex: 0 0 54.1666666667%;
+    max-width: 54.1666666667%;
+  }
+  :host(.x-col-xl-14) {
+    display: block;
+    flex: 0 0 58.3333333333%;
+    max-width: 58.3333333333%;
+  }
+  :host(.x-col-xl-15) {
+    display: block;
+    flex: 0 0 62.5%;
+    max-width: 62.5%;
+  }
+  :host(.x-col-xl-16) {
+    display: block;
+    flex: 0 0 66.6666666667%;
+    max-width: 66.6666666667%;
+  }
+  :host(.x-col-xl-17) {
+    display: block;
+    flex: 0 0 70.8333333333%;
+    max-width: 70.8333333333%;
+  }
+  :host(.x-col-xl-18) {
+    display: block;
+    flex: 0 0 75%;
+    max-width: 75%;
+  }
+  :host(.x-col-xl-19) {
+    display: block;
+    flex: 0 0 79.1666666667%;
+    max-width: 79.1666666667%;
+  }
+  :host(.x-col-xl-20) {
+    display: block;
+    flex: 0 0 83.3333333333%;
+    max-width: 83.3333333333%;
+  }
+  :host(.x-col-xl-21) {
+    display: block;
+    flex: 0 0 87.5%;
+    max-width: 87.5%;
+  }
+  :host(.x-col-xl-22) {
+    display: block;
+    flex: 0 0 91.6666666667%;
+    max-width: 91.6666666667%;
+  }
+  :host(.x-col-xl-23) {
+    display: block;
+    flex: 0 0 95.8333333333%;
+    max-width: 95.8333333333%;
+  }
+  :host(.x-col-xl-24) {
+    display: block;
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+}
+@media (min-width: 1600px) {
+  :host(.x-col-xxl-0) {
+    display: block;
+    flex: 0 0 0%;
+    max-width: 0%;
+  }
+  :host(.x-col-xxl-1) {
+    display: block;
+    flex: 0 0 4.1666666667%;
+    max-width: 4.1666666667%;
+  }
+  :host(.x-col-xxl-2) {
+    display: block;
+    flex: 0 0 8.3333333333%;
+    max-width: 8.3333333333%;
+  }
+  :host(.x-col-xxl-3) {
+    display: block;
+    flex: 0 0 12.5%;
+    max-width: 12.5%;
+  }
+  :host(.x-col-xxl-4) {
+    display: block;
+    flex: 0 0 16.6666666667%;
+    max-width: 16.6666666667%;
+  }
+  :host(.x-col-xxl-5) {
+    display: block;
+    flex: 0 0 20.8333333333%;
+    max-width: 20.8333333333%;
+  }
+  :host(.x-col-xxl-6) {
+    display: block;
+    flex: 0 0 25%;
+    max-width: 25%;
+  }
+  :host(.x-col-xxl-7) {
+    display: block;
+    flex: 0 0 29.1666666667%;
+    max-width: 29.1666666667%;
+  }
+  :host(.x-col-xxl-8) {
+    display: block;
+    flex: 0 0 33.3333333333%;
+    max-width: 33.3333333333%;
+  }
+  :host(.x-col-xxl-9) {
+    display: block;
+    flex: 0 0 37.5%;
+    max-width: 37.5%;
+  }
+  :host(.x-col-xxl-10) {
+    display: block;
+    flex: 0 0 41.6666666667%;
+    max-width: 41.6666666667%;
+  }
+  :host(.x-col-xxl-11) {
+    display: block;
+    flex: 0 0 45.8333333333%;
+    max-width: 45.8333333333%;
+  }
+  :host(.x-col-xxl-12) {
+    display: block;
+    flex: 0 0 50%;
+    max-width: 50%;
+  }
+  :host(.x-col-xxl-13) {
+    display: block;
+    flex: 0 0 54.1666666667%;
+    max-width: 54.1666666667%;
+  }
+  :host(.x-col-xxl-14) {
+    display: block;
+    flex: 0 0 58.3333333333%;
+    max-width: 58.3333333333%;
+  }
+  :host(.x-col-xxl-15) {
+    display: block;
+    flex: 0 0 62.5%;
+    max-width: 62.5%;
+  }
+  :host(.x-col-xxl-16) {
+    display: block;
+    flex: 0 0 66.6666666667%;
+    max-width: 66.6666666667%;
+  }
+  :host(.x-col-xxl-17) {
+    display: block;
+    flex: 0 0 70.8333333333%;
+    max-width: 70.8333333333%;
+  }
+  :host(.x-col-xxl-18) {
+    display: block;
+    flex: 0 0 75%;
+    max-width: 75%;
+  }
+  :host(.x-col-xxl-19) {
+    display: block;
+    flex: 0 0 79.1666666667%;
+    max-width: 79.1666666667%;
+  }
+  :host(.x-col-xxl-20) {
+    display: block;
+    flex: 0 0 83.3333333333%;
+    max-width: 83.3333333333%;
+  }
+  :host(.x-col-xxl-21) {
+    display: block;
+    flex: 0 0 87.5%;
+    max-width: 87.5%;
+  }
+  :host(.x-col-xxl-22) {
+    display: block;
+    flex: 0 0 91.6666666667%;
+    max-width: 91.6666666667%;
+  }
+  :host(.x-col-xxl-23) {
+    display: block;
+    flex: 0 0 95.8333333333%;
+    max-width: 95.8333333333%;
+  }
+  :host(.x-col-xxl-24) {
+    display: block;
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+}