/**
 * XUI Tokens (v14.7.1)
 * Do not edit directly. Generated on Tue, 24 March 2026 at 12:05:14 am UTC
 */

:root {
  --x-typography-font-family-base: Inter;
  --x-typography-font-family-fallback: '"Helvetica Neue"', Helvetica, Arial, sans-serif;
  --x-typography-heading-super: 700 64px/0.95 'National 2';
  --x-typography-heading-large: 700 44px/1.05 'National 2';
  --x-typography-heading-standard: 700 32px/1.05 'National 2';
  --x-typography-heading-small: 700 28px/1.15 'National 2';
  --x-typography-heading-tiny: 700 22px/1.15 'National 2';
  --x-typography-body-large-semibold: 600 17px/1.45 Inter;
  --x-typography-body-large-regular: 400 17px/1.45 Inter;
  --x-typography-body-standard-semibold: 600 15px/1.45 Inter;
  --x-typography-body-standard-regular: 400 15px/1.45 Inter;
  --x-typography-body-small-semibold: 600 13px/1.45 Inter;
  --x-typography-body-small-bold: 700 13px/1.45 Inter;
  --x-typography-body-small-regular: 400 13px/1.45 Inter;
  --x-typography-input-semibold: 600 15px/1.45 Inter;
  --x-typography-input-regular: 400 15px/1.45 Inter;
  --x-typography-input-small-regular: 400 13px/1.45 Inter;
  --x-typography-input-small-semibold: 600 13px/1.45 Inter;
  --x-typography-input-label-small-semibold: 600 12px/1.3 Inter;
  --x-typography-input-label-small-regular: 400 12px/1.3 Inter;
  --x-typography-data-notification-small-medium: 500 10px/1.3 Inter;
  --x-typography-data-super-medium: 500 22px/1.3 'National 2';
  --x-typography-data-super-regular: 400 22px/1.3 'National 2';
  --x-typography-data-large-bold: 700 17px/1.3 Inter;
  --x-typography-data-large-regular: 400 17px/1.3 Inter;
  --x-typography-data-standard-bold: 700 15px/1.4 Inter;
  --x-typography-data-standard-regular: 400 15px/1.4 Inter;
  --x-typography-data-small-bold: 700 13px/1.3 Inter;
  --x-typography-data-small-semibold: 600 13px/1.3 Inter;
  --x-typography-data-small-regular: 400 13px/1.3 Inter;
  --x-typography-data-total-small-semibold-caps: 700 12px/1.3 Inter;
  --x-typography-component-button-standard-regular: 400 14px/1.3 Inter;
  --x-typography-component-button-small-medium: 500 13px/1 Inter;
  --x-typography-component-button-standard-medium: 500 14px/1 Inter;
  --x-typography-component-tag-standard-medium: 500 12px/1 Inter;
  --x-typography-component-global-navigation-standard-medium: 500 15px/1.3 Inter;
  --x-typography-component-global-navigation-standard-regular: 400 15px/1.3 Inter;
  --x-typography-component-global-navigation-label-semi-bold: 600 15px/1 Inter;
  --x-typography-component-in-page-navigation-subheading: 400 22px/1.15 Inter;
  --x-typography-component-in-page-navigation-page-title-non-dashboard: 700 24px/1.15 'National 2'; /* Page Title size for non-dashboard. */
  --x-typography-component-in-page-navigation-page-title-dashboard: 700 28px/1.15 'National 2'; /* Page Title size for non-dashboard. */
  --x-typography-component-breadcrumb-link: 400 12px/1.3 Inter;
  --x-border-standard: 1px solid #cfd1d5; /* Deprecated. Need to replace this with a new semantic border token. */
  --x-border-regular: 1px solid #a6aab1; /* Applies a standard border to all sides */
  --x-border-subtle: 1px solid #cfd1d5; /* Applies a standard border to all sides */
  --x-border-soft: 1px solid #e1e2e5; /* Applies a standard border to all sides */
  --x-border-strong: 1px solid #828995; /* Applies a standard border to all sides */
  --x-border-control: 1px solid #828995; /* Border for control inputs */
  --x-border-increased-contrast: 1px solid #828995; /* Deprecated. Need to replace this with a new semantic border token. */
  --x-border-muted: 1px solid #e1e2e5; /* Deprecated. Need to replace this with a new semantic border token. */
  --x-size-icon-2xsmall: 16px;
  --x-size-icon-xsmall: 20px;
  --x-size-icon-small: 24px;
  --x-size-icon-medium: 32px;
  --x-size-icon-large: 40px;
  --x-size-icon-xlarge: 60px;
  --x-size-control-medium: 40px; /* Min-height for medium size input control. */
  --x-size-control-small: 32px; /* Min-height for small size input control. */
  --x-size-control-xsmall: 24px; /* Min-height for small size input control. */
  --x-shadow-border-all: 0 0 0 1px rgb(0% 0% 0% / 0.2); /* Applies an external border to all sides */
  --x-shadow-border-top: 0 -1px 0 1px rgb(0% 0% 0% / 0.2); /* Applies an external border to the top */
  --x-shadow-border-right: 1px 0 0 1px rgb(0% 0% 0% / 0.2); /* Applies an external border to the right */
  --x-shadow-border-bottom: 0 1px 0 1px rgb(0% 0% 0% / 0.2); /* Applies an external border to the bottom */
  --x-shadow-border-left: -1px 0 0 1px rgb(0% 0% 0% / 0.2); /* Applies an external border to the left */
  --x-shadow-elevation-lift: 0 3px 6px 0 rgb(0% 0% 0% / 0.2), 0 0 0 1px rgb(0% 0% 0% / 0.05); /* For temporary elements that overlap content, such as tooltips and dropdowns */
  --x-shadow-elevation-pop: 0 8px 16px 0 rgb(0% 0% 0% / 0.2), 0 0 0 0 rgb(0% 0% 0% / 0.05); /* For prominent elements that overlap content, such as modals. Often used in conjunction with a mask */
  --x-shadow-overlap-top: 0 1px 0 0 rgb(0% 0% 0% / 0.2), 0 3px 0 0 rgb(0% 0% 0% / 0.05); /* For toolbars and other navigational elements fixed to the top, with content that scrolls beneath */
  --x-shadow-overlap-right: -1px 0 0 0 rgb(0% 0% 0% / 0.2), -3px 0 0 0 rgb(0% 0% 0% / 0.05); /* For toolbars and other navigational elements fixed to the right, with content that scrolls beneath */
  --x-shadow-overlap-bottom: 0 -1px 0 0 rgb(0% 0% 0% / 0.2), 0 -3px 0 0 rgb(0% 0% 0% / 0.05); /* For toolbars and other navigational elements fixed to the bottom, with content that scrolls beneath */
  --x-shadow-overlap-left: 1px 0 0 0 rgb(0% 0% 0% / 0.2), 3px 0 0 0 rgb(0% 0% 0% / 0.05); /* For toolbars and other navigational elements fixed to the left, with content that scrolls beneath */
  --x-motion-speed-fast: 0.1s;
  --x-motion-speed-medium: 0.3s;
  --x-motion-speed-slow: 0.5s;
  --x-motion-curve-standard: ease;
  --x-motion-curve-enter: ease-in;
  --x-motion-curve-exit: ease-out;
  --x-motion-delay-short: 0.1s;
  --x-motion-delay-none: 0;
  --x-motion-delay-medium: 0.3s;
  --x-motion-delay-long: 0.5s;
  --x-color-action-default: #1f68dd;
  --x-color-action-hover: #184390;
  --x-color-action-active: #1c5dc5;
  --x-color-action-focus: #1c5dc5;
  --x-color-action-focus-inverse: #ffffff;
  --x-color-action-disabled-default: #828995;
  --x-color-action-disabled-inverse: #e1e2e5;
  --x-color-action-secondary-hover: #eff0f3;
  --x-color-action-secondary-active: #e1e2e5;
  --x-color-action-negative-hover: #fdeced;
  --x-color-action-negative-active: #f7c9cb;
  --x-color-action-inverse-hover: #1e3145;
  --x-color-action-inverse-active: #424f60;
  --x-color-action-drag-dropzone: #fdf7ce; /* Background colour to indicate dropzone */
  --x-color-action-drag-border-default: #e8c403;
  --x-color-action-drag-border-hover: #bc9b00;
  --x-color-text-default: #1e3145;
  --x-color-text-faint: #616b7a;
  --x-color-text-muted: #424f60;
  --x-color-text-inverse: #ffffff;
  --x-color-background-primary: #ffffff;
  --x-color-background-secondary: #f6f6f8;
  --x-color-background-tertiary: #eff0f3;
  --x-color-background-quaternary: #e1e2e5;
  --x-color-background-inverse-primary: #081f33;
  --x-color-background-inverse-secondary: #1e3145;
  --x-color-background-inverse-tertiary: #424f60;
  --x-color-background-inverse-quaternary: #556070;
  --x-color-sentiment-positive-foreground: #0f7b3d;
  --x-color-sentiment-positive-background: #f0fbf3;
  --x-color-sentiment-negative-foreground: #c31230;
  --x-color-sentiment-negative-background: #fff6f7;
  --x-color-sentiment-negative-inverse-foreground: #ef626d;
  --x-color-sentiment-negative-inverse-background: #2a0305;
  --x-color-sentiment-warning-foreground: #bb421f;
  --x-color-sentiment-warning-background: #fef8e4;
  --x-color-sentiment-neutral-foreground: #616b7a;
  --x-color-sentiment-neutral-background: #f6f6f8;
  --x-color-sentiment-inform-foreground: #1f68dd;
  --x-color-sentiment-inform-background: #eff9ff;
  --x-color-sentiment-standard-foreground: #cfd1d5;
  --x-color-sentiment-standard-background: #ffffff;
  --x-color-border-soft: #e1e2e5;
  --x-color-border-subtle: #cfd1d5;
  --x-color-border-regular: #a6aab1;
  --x-color-border-strong: #828995;
  --x-color-dataviz-money-in-fill: #3982ed;
  --x-color-dataviz-money-in-stroke: #3982ed;
  --x-color-dataviz-money-out-fill: #b4d8ff;
  --x-color-dataviz-money-out-stroke: #3982ed;
  --x-color-dataviz-neutral-fill-01: #e1e2e5;
  --x-color-dataviz-neutral-fill-02: #cfd1d5;
  --x-color-dataviz-neutral-fill-03: #a6aab1;
  --x-color-dataviz-neutral-fill-04: #828995;
  --x-color-dataviz-neutral-fill-05: #697280;
  --x-color-dataviz-neutral-fill-06: #616b7a;
  --x-color-dataviz-neutral-fill-07: #556070;
  --x-color-dataviz-neutral-fill-08: #424f60;
  --x-color-dataviz-neutral-fill-09: #1e3145;
  --x-color-dataviz-neutral-fill-10: #081f33;
  --x-color-dataviz-neutral-border: #828995;
  --x-color-dataviz-neutral-primary: #a6aab1;
  --x-color-dataviz-neutral-secondary: #1e3145;
  --x-color-dataviz-tonal-fill-01: #b4d8ff;
  --x-color-dataviz-tonal-fill-02: #84B7FF;
  --x-color-dataviz-tonal-fill-03: #5b9ff9;
  --x-color-dataviz-tonal-fill-04: #3982ed;
  --x-color-dataviz-tonal-fill-05: #1f68dd;
  --x-color-dataviz-tonal-fill-06: #1c5dc5;
  --x-color-dataviz-tonal-fill-07: #1950aa;
  --x-color-dataviz-tonal-fill-08: #184390;
  --x-color-dataviz-tonal-fill-09: #12387b;
  --x-color-dataviz-tonal-fill-10: #0b2e67;
  --x-color-dataviz-tonal-border: #3982ed;
  --x-color-dataviz-tonal-primary: #b4d8ff;
  --x-color-dataviz-tonal-secondary: #3982ed;
  --x-color-dataviz-framework-negative-fill: #c31230;
  --x-color-dataviz-framework-negative-stroke: #c31230;
  --x-color-dataviz-framework-positive-fill: #0f7b3d;
  --x-color-dataviz-framework-positive-stroke: #0f7b3d;
  --x-color-dataviz-framework-keylines: #e1e2e5;
  --x-color-dataviz-framework-labels: #616b7a;
  --x-color-icon-default: #1e3145;
  --x-color-icon-muted: #424f60;
  --x-color-icon-faint: #616b7a;
  --x-color-icon-inverse: #ffffff;
  --x-color-shadow-transparent: rgba(255,255,255,0);
  --x-color-shadow-default: rgb(0% 0% 0% / 0.2);
  --x-color-shadow-subtle: rgb(0% 0% 0% / 0.05);
  --x-color-shadow-overflow-top: linear-gradient(to bottom, rgb(0% 0% 0% / 0.2) 20%, rgba(255,255,255,0));
  --x-color-shadow-overflow-left: linear-gradient(to right, rgb(0% 0% 0% / 0.2) 20%, rgba(255,255,255,0));
  --x-color-shadow-overflow-right: linear-gradient(to left, rgb(0% 0% 0% / 0.2) 20%, rgba(255,255,255,0));
  --x-color-shadow-overflow-bottom: linear-gradient(to top, rgb(0% 0% 0% / 0.2) 20%, rgba(255,255,255,0));
  --x-color-shadow-overflow-default: rgb(0% 0% 0% / 0.2);
  --x-color-theme-sb: #1f68dd;
  --x-color-theme-ab: #1e3145;
  --x-color-pair-pink-foreground: #551b2d;
  --x-color-pair-pink-background: #ff9bbc;
  --x-color-pair-grape-foreground: #48214c;
  --x-color-pair-grape-background: #f09af7;
  --x-color-pair-violet-foreground: #27276f;
  --x-color-pair-violet-background: #abb4f9;
  --x-color-pair-blue-foreground: #0b2e67;
  --x-color-pair-blue-background: #84B7FF;
  --x-color-pair-turquoise-foreground: #0a353e;
  --x-color-pair-turquoise-background: #a4eefe;
  --x-color-pair-mint-foreground: #0d3728;
  --x-color-pair-mint-background: #a9f2d3;
  --x-color-pair-green-foreground: #033918;
  --x-color-pair-green-background: #92c49d;
  --x-color-pair-yellow-foreground: #422d00;
  --x-color-pair-yellow-background: #f9e280;
  --x-color-pair-orange-foreground: #5b1a07;
  --x-color-pair-orange-background: #ffb68f;
  --x-color-pair-red-foreground: #650715;
  --x-color-pair-red-background: #f29095;
  --x-color-mask-default: rgb(0% 0% 0% / 0.7);
  --x-color-indicator-red-default: #c31230; /* Indicator colour contrast of 3:1 against background colour. */
  --x-color-indicator-orange-default: #cf4921; /* Indicator colour contrast of 3:1 against background colour. */
  --x-color-indicator-yellow-default: #907300; /* Indicator colour contrast of 3:1 against background colour. */
  --x-color-indicator-green-default: #0f7b3d; /* Indicator colour contrast of 3:1 against background colour. */
  --x-color-indicator-mint-default: #2a8565; /* Indicator colour contrast of 3:1 against background colour. */
  --x-color-indicator-turquoise-default: #1f8194; /* Indicator colour contrast of 3:1 against background colour. */
  --x-color-indicator-blue-default: #2e73e1; /* Indicator colour contrast of 3:1 against background colour. */
  --x-color-indicator-violet-default: #6268e7; /* Indicator colour contrast of 3:1 against background colour. */
  --x-color-indicator-grape-default: #aa55b2; /* Indicator colour contrast of 3:1 against background colour. */
  --x-color-indicator-pink-default: #da2f66; /* Indicator colour contrast of 3:1 against background colour. */
  --x-color-indicator-gray-default: #616b7a; /* Indicator colour contrast of 3:1 against background colour. */
  --x-color-xero-logo: #13B5EA; /* Xero brand blue. Only to be used for the Xero logo. */
  --x-color-fade-overflow-top: linear-gradient(to bottom, #ffffff 0%, rgb(100% 100% 100% / 0.9) 11.79%, rgb(100% 100% 100% / 0.1) 78.62%, rgb(100% 100% 100% / 0.05) 88.21%, transparent 100%);
  --x-color-fade-overflow-right: linear-gradient(to left, #ffffff 0%, rgb(100% 100% 100% / 0.9) 11.79%, rgb(100% 100% 100% / 0.1) 78.62%, rgb(100% 100% 100% / 0.05) 88.21%, transparent 100%);
  --x-color-fade-overflow-bottom: linear-gradient(to top, #ffffff 0%, rgb(100% 100% 100% / 0.9) 11.79%, rgb(100% 100% 100% / 0.1) 78.62%, rgb(100% 100% 100% / 0.05) 88.21%, transparent 100%);
  --x-color-fade-overflow-left: linear-gradient(to right, #ffffff 0%, rgb(100% 100% 100% / 0.9) 11.79%, rgb(100% 100% 100% / 0.1) 78.62%, rgb(100% 100% 100% / 0.05) 88.21%, transparent 100%);
  --x-effect-action-focus: 0 0 0 1px #ffffff, 0 0 0 3px #1f68dd;
  --x-effect-action-inverse-focus: 0 0 0 1px #081f33, 0 0 0 3px #cfd1d5;
  --x-component-spacing-form-stack: 20px;
  --x-component-spacing-form-inline: 20px;
  --x-component-spacing-stepper-32: 32px;
  --x-component-spacing-stepper-40: 40px;
  --x-component-font-size-avatar-2xsmall: 7px; /* Only to be used when Avatar is nested inside a 'small' component. */
  --x-component-width-popover-large: 400px;
  --x-component-width-popover-medium: 320px;
  --x-component-width-popover-small: 200px;
  --x-component-width-popover-xsmall: 100px;
  --x-component-width-illustration-large: 400px;
  --x-component-width-illustration-medium: 280px;
  --x-component-width-illustration-small: 160px;
  --x-component-size-avatar-2xsmall: 16px;
  --x-component-size-avatar-large: 80px;
  --x-component-size-avatar-xlarge: 120px;
  --x-component-size-avatar-small: 32px;
  --x-component-size-avatar-xsmall: 24px;
  --x-component-size-avatar-medium: 40px;
  --x-component-size-sidepanel-320: 320px;
  --x-component-size-sidepanel-400: 400px;
  --x-component-size-table-row-height: 40px; /* Retheme rowheight, this will reduce to 36px */
  --x-component-size-navigation-height: 60px;
  --x-component-color-dashboard-template-background: #eff0f3;
  --x-component-color-widget-template-background: #ffffff;
  --x-component-color-table-row-background-parent: #dbefff;
  --x-component-color-table-row-background-alternating: #eff9ff;
  --x-component-color-table-row-background-default: #ffffff;
  --x-component-color-table-row-background-selected-default: #eff9ff;
  --x-component-color-table-row-background-selected-hover: #e7f6ff;
  --x-component-color-table-row-background-hover: #f6f6f8;
  --x-z-index-toast: 6000;
  --x-z-index-sheet: 5000;
  --x-z-index-sheet-mask: 4000;
  --x-z-index-nav: 3000;
  --x-z-index-side-panel: 2000;
  --x-z-index-header-footer: 800;
  --x-z-index-contextual-top: 500;
  --x-z-index-checkbox-radio: 3;
  --x-z-index-focus: 2;
  --x-z-index-responsive-overlay: 1;
  --x-z-index-body: 1;
  --x-z-index-html: 0;
  --x-z-index-hidden: -1;
}