:root {
  --transition-time-fast: 100ms;
  --transition-time-base: 200ms;
  --transition-time-slow: 400ms;
  --transition-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* stylelint-disable max-line-length */
:root {
  --rgb-ui-carbon--darker: 43, 43, 43;
  --rgb-ui-carbon--dark: 53, 53, 53;
  --rgb-ui-carbon: 63, 63, 63;

  --rgb-ui-white-noise--darker: 228, 228, 228;
  --rgb-ui-white-noise--dark: 238, 238, 238;
  --rgb-ui-white-noise: 248, 248, 248;

  --rgb-ui-white: 255, 255, 255;
  --rgb-ui-black: 33, 33, 33;

  --rgb-ui-accent--hover: 48, 171, 232;
  --rgb-ui-accent: 35, 158, 219;
  --rgb-ui-accent--active: 22, 145, 207;

  --rgb-ui-success--hover: 10, 204, 162;
  --rgb-ui-success: 0, 190, 150;
  --rgb-ui-success--active: 0, 166, 130;

  --rgb-ui-warning--hover: 230, 186, 85;
  --rgb-ui-warning: 218, 174, 69;
  --rgb-ui-warning--active: 204, 159, 55;

  --rgb-ui-error--hover: 255, 99, 133;
  --rgb-ui-error: 252, 72, 112;
  --rgb-ui-error--active: 240, 58, 97;

  --rgb-ui-highlight: 215, 255, 0;

  --rgb-ui-info--hover: var(--rgb-ui-accent--hover);
  --rgb-ui-info: var(--rgb-ui-accent);
  --rgb-ui-info--active: var(--rgb-ui-accent--active);

  --color-ui-carbon--darker: rgb(var(--rgb-ui-carbon--darker));
  --color-ui-carbon--dark: rgb(var(--rgb-ui-carbon--dark));
  --color-ui-carbon: rgb(var(--rgb-ui-carbon));

  --color-ui-white-noise--darker: rgb(var(--rgb-ui-white-noise--darker));
  --color-ui-white-noise--dark: rgb(var(--rgb-ui-white-noise--dark));
  --color-ui-white-noise: rgb(var(--rgb-ui-white-noise));

  --color-ui-black: rgb(var(--rgb-ui-black));
  --color-ui-white: rgb(var(--rgb-ui-white));

  --color-ui-accent--active: rgb(var(--rgb-ui-accent--active));
  --color-ui-accent: rgb(var(--rgb-ui-accent));
  --color-ui-accent--hover: rgb(var(--rgb-ui-accent--hover));

  --color-ui-success--hover: rgb(var(--rgb-ui-success--hover));
  --color-ui-success: rgb(var(--rgb-ui-success));
  --color-ui-success--active: rgb(var(--rgb-ui-success--active));

  --color-ui-warning--hover: rgb(var(--rgb-ui-warning--hover));
  --color-ui-warning: rgb(var(--rgb-ui-warning));
  --color-ui-warning--active: rgb(var(--rgb-ui-warning--active));

  --color-ui-error--hover: rgb(var(--rgb-ui-error--hover));
  --color-ui-error: rgb(var(--rgb-ui-error));
  --color-ui-error--active: rgb(var(--rgb-ui-error--active));

  --color-ui-info--hover: rgb(var(--rgb-ui-info--hover));
  --color-ui-info: rgb(var(--rgb-ui-info));
  --color-ui-info--active: rgb(var(--rgb-ui-info--active));

  --color-ui-highlight: rgb(var(--rgb-ui-highlight));

  --rgb-sentiment-positive-active: 62, 148, 76;
  --rgb-sentiment-positive: 76, 161, 90;
  --rgb-sentiment-positive-hover: 90, 173, 104;
  --rgb-sentiment-negative-active: 201, 58, 58;
  --rgb-sentiment-negative: 215, 74, 74;
  --rgb-sentiment-negative-hover: 227, 89, 89;

  --color-sentiment-positive-active: rgb(var(--rgb-sentiment-positive-active));
  --color-sentiment-positive: rgb(var(--rgb-sentiment-positive));
  --color-sentiment-positive-hover: rgb(var(--rgb-sentiment-positive-hover));
  --color-sentiment-negative-active: rgb(var(--rgb-sentiment-negative-active));
  --color-sentiment-negative: rgb(var(--rgb-sentiment-negative));
  --color-sentiment-negative-hover: rgb(var(--rgb-sentiment-negative-hover));

  --rgb-product-forbidden-planet--active: 232, 159, 144;
  --rgb-product-forbidden-planet: 245, 177, 164;
  --rgb-product-forbidden-planet--hover: 255, 195, 184;

  --color-product-forbidden-planet--active: rgb(var(--rgb-product-forbidden-planet--active));
  --color-product-forbidden-planet: rgb(var(--rgb-product-forbidden-planet));
  --color-product-forbidden-planet--hover: rgb(var(--rgb-product-forbidden-planet--hover));

  --rgb-product-tiny-clanger--active: 232, 132, 166;
  --rgb-product-tiny-clanger: 245, 152, 183;
  --rgb-product-tiny-clanger--hover: 255, 171, 200;

  --color-product-tiny-clanger--active: rgb(var(--rgb-product-tiny-clanger--active));
  --color-product-tiny-clanger: rgb(var(--rgb-product-tiny-clanger));
  --color-product-tiny-clanger--hover: rgb(var(--rgb-product-tiny-clanger--hover));

  --rgb-product-critical-mass--active: 214, 75, 107;
  --rgb-product-critical-mass: 227, 90, 122;
  --rgb-product-critical-mass--hover: 240, 108, 139;

  --color-product-critical-mass--active: rgb(var(--rgb-product-critical-mass--active));
  --color-product-critical-mass: rgb(var(--rgb-product-critical-mass));
  --color-product-critical-mass--hover: rgb(var(--rgb-product-critical-mass--hover));

  --rgb-product-fantastic-voyage--active: 156, 36, 82;
  --rgb-product-fantastic-voyage: 167, 46, 94;
  --rgb-product-fantastic-voyage--hover: 181, 60, 106;

  --color-product-fantastic-voyage--active: rgb(var(--rgb-product-fantastic-voyage--active));
  --color-product-fantastic-voyage: rgb(var(--rgb-product-fantastic-voyage));
  --color-product-fantastic-voyage--hover: rgb(var(--rgb-product-fantastic-voyage--hover));

  --rgb-product-paradise-lost--active: 129, 90, 153;
  --rgb-product-paradise-lost: 144, 107, 167;
  --rgb-product-paradise-lost--hover: 157, 123, 179;

  --color-product-paradise-lost--active: rgb(var(--rgb-product-paradise-lost--active));
  --color-product-paradise-lost: rgb(var(--rgb-product-paradise-lost));
  --color-product-paradise-lost--hover: rgb(var(--rgb-product-paradise-lost--hover));

  --rgb-product-serene-sea--active: 125, 143, 201;
  --rgb-product-serene-sea: 144, 160, 214;
  --rgb-product-serene-sea--hover: 163, 178, 227;

  --color-product-serene-sea--active: rgb(var(--rgb-product-serene-sea--active));
  --color-product-serene-sea: rgb(var(--rgb-product-serene-sea));
  --color-product-serene-sea--hover: rgb(var(--rgb-product-serene-sea--hover));

  --rgb-product-event-horizon--active: 81, 85, 148;
  --rgb-product-event-horizon: 96, 99, 161;
  --rgb-product-event-horizon--hover: 113, 116, 173;

  --color-product-event-horizon--active: rgb(var(--rgb-product-event-horizon--active));
  --color-product-event-horizon: rgb(var(--rgb-product-event-horizon));
  --color-product-event-horizon--hover: rgb(var(--rgb-product-event-horizon--hover));

  --rgb-product-electric-dreams--active: 46, 109, 191;
  --rgb-product-electric-dreams: 59, 121, 204;
  --rgb-product-electric-dreams--hover: 74, 136, 217;

  --color-product-electric-dreams--active: rgb(var(--rgb-product-electric-dreams--active));
  --color-product-electric-dreams: rgb(var(--rgb-product-electric-dreams));
  --color-product-electric-dreams--hover: rgb(var(--rgb-product-electric-dreams--hover));

  --rgb-product-outer-limits--active: 108, 199, 235;
  --rgb-product-outer-limits: 127, 214, 248;
  --rgb-product-outer-limits--hover: 147, 222, 252;

  --color-product-outer-limits--active: rgb(var(--rgb-product-outer-limits--active));
  --color-product-outer-limits: rgb(var(--rgb-product-outer-limits));
  --color-product-outer-limits--hover: rgb(var(--rgb-product-outer-limits--hover));

  --rgb-product-giant-leap--active: 69, 192, 217;
  --rgb-product-giant-leap: 85, 205, 230;
  --rgb-product-giant-leap--hover: 102, 219, 242;

  --color-product-giant-leap--active: rgb(var(--rgb-product-giant-leap--active));
  --color-product-giant-leap: rgb(var(--rgb-product-giant-leap));
  --color-product-giant-leap--hover: rgb(var(--rgb-product-giant-leap--hover));

  --rgb-product-moon-lagoon--active: 25, 161, 176;
  --rgb-product-moon-lagoon: 36, 173, 189;
  --rgb-product-moon-lagoon--hover: 48, 186, 201;

  --color-product-moon-lagoon--active: rgb(var(--rgb-product-moon-lagoon--active));
  --color-product-moon-lagoon: rgb(var(--rgb-product-moon-lagoon));
  --color-product-moon-lagoon--hover: rgb(var(--rgb-product-moon-lagoon--hover));

  --rgb-product-space-invader--active: 36, 133, 100;
  --rgb-product-space-invader: 47, 145, 112;
  --rgb-product-space-invader--hover: 58, 158, 125;

  --color-product-space-invader--active: rgb(var(--rgb-product-space-invader--active));
  --color-product-space-invader: rgb(var(--rgb-product-space-invader));
  --color-product-space-invader--hover: rgb(var(--rgb-product-space-invader--hover));

  --rgb-product-extraterrestrial--active: 82, 168, 76;
  --rgb-product-extraterrestrial: 96, 180, 90;
  --rgb-product-extraterrestrial--hover: 112, 194, 107;

  --color-product-extraterrestrial--active: rgb(var(--rgb-product-extraterrestrial--active));
  --color-product-extraterrestrial: rgb(var(--rgb-product-extraterrestrial));
  --color-product-extraterrestrial--hover: rgb(var(--rgb-product-extraterrestrial--hover));

  --rgb-product-terra-form--active: 125, 184, 44;
  --rgb-product-terra-form: 138, 197, 57;
  --rgb-product-terra-form--hover: 151, 209, 71;

  --color-product-terra-form--active: rgb(var(--rgb-product-terra-form--active));
  --color-product-terra-form: rgb(var(--rgb-product-terra-form));
  --color-product-terra-form--hover: rgb(var(--rgb-product-terra-form--hover));

  --rgb-product-primeval-soup--active: 186, 186, 15;
  --rgb-product-primeval-soup: 200, 200, 25;
  --rgb-product-primeval-soup--hover: 212, 212, 38;

  --color-product-primeval-soup--active: rgb(var(--rgb-product-primeval-soup--active));
  --color-product-primeval-soup: rgb(var(--rgb-product-primeval-soup));
  --color-product-primeval-soup--hover: rgb(var(--rgb-product-primeval-soup--hover));

  --rgb-product-future-shock--active: 227, 223, 16;
  --rgb-product-future-shock: 240, 236, 29;
  --rgb-product-future-shock--hover: 252, 249, 43;

  --color-product-future-shock--active: rgb(var(--rgb-product-future-shock--active));
  --color-product-future-shock: rgb(var(--rgb-product-future-shock));
  --color-product-future-shock--hover: rgb(var(--rgb-product-future-shock--hover));

  --rgb-product-sun-maker--active: 240, 201, 5;
  --rgb-product-sun-maker: 252, 213, 18;
  --rgb-product-sun-maker--hover: 255, 220, 46;

  --color-product-sun-maker--active: rgb(var(--rgb-product-sun-maker--active));
  --color-product-sun-maker: rgb(var(--rgb-product-sun-maker));
  --color-product-sun-maker--hover: rgb(var(--rgb-product-sun-maker--hover));

  --rgb-product-new-horizon--active: 242, 178, 0;
  --rgb-product-new-horizon: 255, 190, 10;
  --rgb-product-new-horizon--hover: 254, 199, 49;

  --color-product-new-horizon--active: rgb(var(--rgb-product-new-horizon--active));
  --color-product-new-horizon: rgb(var(--rgb-product-new-horizon));
  --color-product-new-horizon--hover: rgb(var(--rgb-product-new-horizon--hover));

  --rgb-product-blast-off--active: 237, 132, 36;
  --rgb-product-blast-off: 249, 145, 50;
  --rgb-product-blast-off--hover: 255, 157, 67;

  --color-product-blast-off--active: rgb(var(--rgb-product-blast-off--active));
  --color-product-blast-off: rgb(var(--rgb-product-blast-off));
  --color-product-blast-off--hover: rgb(var(--rgb-product-blast-off--hover));

  --rgb-product-crash-course--active: 242, 93, 70;
  --rgb-product-crash-course: 255, 109, 86;
  --rgb-product-crash-course--hover: 255, 126, 106;

  --color-product-crash-course--active: rgb(var(--rgb-product-crash-course--active));
  --color-product-crash-course: rgb(var(--rgb-product-crash-course));
  --color-product-crash-course--hover: rgb(var(--rgb-product-crash-course--hover));

  --rgb-product-solar-rust--active: 191, 118, 15;
  --rgb-product-solar-rust: 205, 129, 26;
  --rgb-product-solar-rust--hover: 217, 143, 39;

  --color-product-solar-rust--active: rgb(var(--rgb-product-solar-rust--active));
  --color-product-solar-rust: rgb(var(--rgb-product-solar-rust));
  --color-product-solar-rust--hover: rgb(var(--rgb-product-solar-rust--hover));

  --rgb-product-ground-control--active: 145, 85, 45;
  --rgb-product-ground-control: 158, 97, 57;
  --rgb-product-ground-control--hover: 171, 110, 70;

  --color-product-ground-control--active: rgb(var(--rgb-product-ground-control--active));
  --color-product-ground-control: rgb(var(--rgb-product-ground-control));
  --color-product-ground-control--hover: rgb(var(--rgb-product-ground-control--hover));

  --rgb-product-space-oddity--active: 176, 149, 76;
  --rgb-product-space-oddity: 189, 163, 91;
  --rgb-product-space-oddity--hover: 201, 176, 107;

  --color-product-space-oddity--active: rgb(var(--rgb-product-space-oddity--active));
  --color-product-space-oddity: rgb(var(--rgb-product-space-oddity));
  --color-product-space-oddity--hover: rgb(var(--rgb-product-space-oddity--hover));

  --rgb-product-rocky-planet--active: 145, 128, 100;
  --rgb-product-rocky-planet: 158, 142, 117;
  --rgb-product-rocky-planet--hover: 171, 157, 135;

  --color-product-rocky-planet--active: rgb(var(--rgb-product-rocky-planet--active));
  --color-product-rocky-planet: rgb(var(--rgb-product-rocky-planet));
  --color-product-rocky-planet--hover: rgb(var(--rgb-product-rocky-planet--hover));

  --rgb-product-deep-thought--active: 167, 162, 179;
  --rgb-product-deep-thought: 187, 185, 192;
  --rgb-product-deep-thought--hover: 204, 204, 204;

  --color-product-deep-thought--active: rgb(var(--rgb-product-deep-thought--active));
  --color-product-deep-thought: rgb(var(--rgb-product-deep-thought));
  --color-product-deep-thought--hover: rgb(var(--rgb-product-deep-thought--hover));

  --rgb-product-luna-dust--active: 103, 129, 143;
  --rgb-product-luna-dust: 120, 144, 156;
  --rgb-product-luna-dust--hover: 138, 158, 168;

  --color-product-luna-dust--active: rgb(var(--rgb-product-luna-dust--active));
  --color-product-luna-dust: rgb(var(--rgb-product-luna-dust));
  --color-product-luna-dust--hover: rgb(var(--rgb-product-luna-dust--hover));

  --rgb-sentiment-negative--active: 201, 58, 58;
  --rgb-sentiment-negative: 215, 74, 74;
  --rgb-sentiment-negative--hover: 227, 89, 89;

  --color-sentiment-negative--active: rgb(var(--rgb-sentiment-negative--active));
  --color-sentiment-negative: rgb(var(--rgb-sentiment-negative));
  --color-sentiment-negative--hover: rgb(var(--rgb-sentiment-negative--hover));

  --rgb-sentiment-positive--active: 62, 148, 76;
  --rgb-sentiment-positive: 76, 161, 90;
  --rgb-sentiment-positive--hover: 90, 173, 104;

  --color-sentiment-positive--active: rgb(var(--rgb-sentiment-positive--active));
  --color-sentiment-positive: rgb(var(--rgb-sentiment-positive));
  --color-sentiment-positive--hover: rgb(var(--rgb-sentiment-positive--hover));

  --color-sentiment-neutral--active: var(--color-product-deep-thought--active);
  --color-sentiment-neutral: var(--color-product-deep-thought);
  --color-sentiment-neutral--hover: var(--color-product-deep-thought--hover);

  --rgb-social-twitter--active: 16, 148, 230;
  --rgb-social-twitter: 29, 161, 242;
  --rgb-social-twitter--hover: 43, 174, 255;

  --color-social-twitter--active: rgb(var(--rgb-social-twitter--active));
  --color-social-twitter: rgb(var(--rgb-social-twitter));
  --color-social-twitter--hover: rgb(var(--rgb-social-twitter--hover));

  --rgb-social-facebook--active: 11, 106, 230;
  --rgb-social-facebook: 23, 118, 242;
  --rgb-social-facebook--hover: 38, 132, 255;

  --color-social-facebook--active: rgb(var(--rgb-social-facebook--active));
  --color-social-facebook: rgb(var(--rgb-social-facebook));
  --color-social-facebook--hover: rgb(var(--rgb-social-facebook--hover));

  --rgb-social-instagram--active: 171, 58, 133;
  --rgb-social-instagram: 183, 71, 146;
  --rgb-social-instagram--hover: 196, 86, 160;

  --color-social-instagram--active: rgb(var(--rgb-social-instagram--active));
  --color-social-instagram: rgb(var(--rgb-social-instagram));
  --color-social-instagram--hover: rgb(var(--rgb-social-instagram--hover));

  --rgb-social-four-chan--active: 224, 153, 117;
  --rgb-social-four-chan: 238, 170, 136;
  --rgb-social-four-chan--hover: 250, 187, 155;

  --color-social-four-chan--active: rgb(var(--rgb-social-four-chan--active));
  --color-social-four-chan: rgb(var(--rgb-social-four-chan));
  --color-social-four-chan--hover: rgb(var(--rgb-social-four-chan--hover));

  --rgb-social-reddit--active: 225, 61, 0;
  --rgb-social-reddit: 255, 69, 0;
  --rgb-social-reddit--hover: 255, 87, 25;

  --color-social-reddit--active: rgb(var(--rgb-social-reddit--active));
  --color-social-reddit: rgb(var(--rgb-social-reddit));
  --color-social-reddit--hover: rgb(var(--rgb-social-reddit--hover));

  --rgb-social-tumblr--active: 41, 57, 79;
  --rgb-social-tumblr: 53, 70, 93;
  --rgb-social-tumblr--hover: 65, 82, 105;

  --color-social-tumblr--active: rgb(var(--rgb-social-tumblr--active));
  --color-social-tumblr: rgb(var(--rgb-social-tumblr));
  --color-social-tumblr--hover: rgb(var(--rgb-social-tumblr--hover));

  --rgb-social-vk--active: 61, 105, 156;
  --rgb-social-vk: 74, 118, 168;
  --rgb-social-vk--hover: 89, 132, 181;

  --color-social-vk--active: rgb(var(--rgb-social-vk--active));
  --color-social-vk: rgb(var(--rgb-social-vk));
  --color-social-vk--hover: rgb(var(--rgb-social-vk--hover));

  --rgb-social-youtube--active: 209, 0, 0;
  --rgb-social-youtube: 222, 0, 0;
  --rgb-social-youtube--hover: 226, 0, 0;

  --color-social-youtube--active: rgb(var(--rgb-social-youtube--active));
  --color-social-youtube: rgb(var(--rgb-social-youtube));
  --color-social-youtube--hover: rgb(var(--rgb-social-youtube--hover));

  --rgb-better-together: 240, 78, 78;

  --color-better-together: rgb(var(--rgb-better-together));

  --rgb-brand-hooloovoo: 87, 183, 221;
  --color-brand-hooloovoo: rgb(var(--rgb-brand-hooloovoo));
}
/* stylelint-enable */

:root {
  --layout-width-tiny: 23rem;
  --layout-width-small: 48rem;
  --layout-width-medium: 62rem;
  --layout-width-large: 75rem;

  --z-index-sticky: 1;
  --z-index-platform-mask: 2;
  --z-index-platform-console: 3;
  --z-index-platform-dock: 4;
  --z-index-position: 5;
  --z-index-modal: 5;
  --z-index-notifications: 6;
}

:root {
  --opacity-text--subtle: 0.75;
  --opacity-text--disabled: 0.3;

  --opacity-background--overlay-modal: 0.9;
  --opacity-background--overlay-heavy: 0.75;
  --opacity-background--overlay-light: 0.3;
  --opacity-background--subtle: 0.15;
  --opacity-background--active: 0.08;
  --opacity-background--disabled: 0.05;
  --opacity-background--hover: 0.04;

  --opacity-border: 0.2;

  --opacity-shadow--light: 0.14;
  --opacity-shadow--heavy: 0.15;

  --opacity-input-border--focused: 0.5;
  --opacity-input-border--valid: 0.4;
  --opacity-input-border--invalid: 0.75;
}

/* stylelint-disable max-line-length */
:root {
  --spacing-grid-size: 0.25rem;

  --spacing-grid-size--x1: var(--spacing-grid-size);
  --spacing-grid-size--x2: calc(var(--spacing-grid-size) * 2);
  --spacing-grid-size--x3: calc(var(--spacing-grid-size) * 3);
  --spacing-grid-size--x4: calc(var(--spacing-grid-size) * 4);
  --spacing-grid-size--x5: calc(var(--spacing-grid-size) * 5);
  --spacing-grid-size--x6: calc(var(--spacing-grid-size) * 6);
  --spacing-grid-size--x8: calc(var(--spacing-grid-size) * 8);

  --page-padding-horizontal: var(--spacing-grid-size--x6);
  --page-padding-vertical: var(--spacing-grid-size--x6);

  --component-line-height: 1rem;

  --component-total-line-height-small: calc(var(--component-line-height) + var(--component-padding-vertical-small) * 2 + var(--component-border-width-small) * 2);
  --component-total-line-height-medium: calc(var(--component-line-height) + var(--component-padding-vertical-medium) * 2 + var(--component-border-width-medium) * 2);
  --component-total-line-height-large: calc(var(--component-line-height) + var(--component-padding-vertical-large) * 2 + var(--component-border-width-large) * 2);

  --component-border-width-small: 0.0625rem;
  --component-border-width-medium: 0.0625rem;
  --component-border-width-large: 0.125rem;
  --component-border-width-huge: 0.125rem;
  --component-border-width: var(--component-border-width-small);

  --component-border-radius: 0.1875rem;
  --component-border-radius-large: 0.5rem;
  --component-border-radius-huge: 1.25rem;

  --component-padding-vertical-small: calc(var(--spacing-grid-size) - var(--component-border-width-small));
  --component-padding-vertical-medium: calc(var(--spacing-grid-size) * 2 - var(--component-border-width-small));
  --component-padding-vertical-large: calc(var(--spacing-grid-size) * 3 - var(--component-border-width-small));

  --component-padding-horizontal-small: calc(var(--spacing-grid-size) * 3);
  --component-padding-horizontal-medium: calc(var(--spacing-grid-size) * 3);
  --component-padding-horizontal-large: calc(var(--spacing-grid-size) * 4);

  --component-round-size-tiny: calc(var(--spacing-grid-size) * 4);
  --component-round-size-small: calc(var(--spacing-grid-size) * 6);
  --component-round-size-medium: calc(var(--spacing-grid-size) * 12);
  --component-round-size-large: calc(var(--spacing-grid-size) * 18);
  --component-round-size-huge: calc(var(--spacing-grid-size) * 30);

  --drop-shadow-border: 0 0 0 0.0625rem;
  --drop-shadow-definition: 0 0.0625rem 0.125rem 0.03125rem;
  --drop-shadow-elevation--x1: 0 0.0625rem 0.1875rem 0;
  --drop-shadow-elevation--x2: 0 0.25rem 0.5625rem 0;

  /**
   * Shared chart variables.
   *
   *  [1] Needed to normalise bar widths. However
   *      this is not in relation to anything so
   *      will need adjusting if text widths change :sob:
   */
  --cmp-chart-label-margin: var(--spacing-grid-size--x2);
  --cmp-chart-label-line-height: 1rem;  /* [1] */
  --cmp-chart-label-width: calc(2rem + var(--cmp-chart-label-margin));  /* [1] */
  --cmp-chart-label-height: calc(var(--cmp-chart-label-line-height) + var(--cmp-chart-label-margin));

  --cmp-chart-opacity-faded: 0.25;

  --cmp-dot-plot-diameter: 0.8125rem;
  --cmp-dot-plot-radius: calc(var(--cmp-dot-plot-diameter) * 0.5);

  --cmp-benchmark-line-width: 0.0625rem;
  --cmp-benchmark-line-height: var(--cmp-dot-plot-diameter);

  --cmp-chart-overflow-space: calc(var(--cmp-chart-label-width) + var(--cmp-dot-plot-radius));

  /**
   * Shared component variables.
   */
  --cmp-context-tip-edge-to-edge: 0.75rem;

  /**
   * Used for max-height of a topics container
   */
  --component-max-height: 62.5rem;
}
/* stylelint-enable */

/* stylelint-disable max-line-length */
:root {
  --rgb-theme-day-main: var(--rgb-ui-carbon);
  --rgb-theme-day-main--dark: var(--rgb-ui-carbon--dark);
  --rgb-theme-day-main--darker: var(--rgb-ui-carbon--darker);

  --rgb-theme-day-background--shade-1: var(--rgb-ui-white);
  --rgb-theme-day-background--shade-2: var(--rgb-ui-white-noise);
  --rgb-theme-day-background--shade-3: var(--rgb-ui-white-noise--dark);
  --rgb-theme-day-background--shade-4: var(--rgb-ui-white-noise--darker);

  --color-theme-day-main: rgb(var(--rgb-theme-day-main));
  --color-theme-day-main--dark: rgb(var(--rgb-theme-day-main--dark));
  --color-theme-day-main--darker: rgb(var(--rgb-theme-day-main--darker));

  --color-theme-day-text: var(--color-theme-day-main);
  --color-theme-day-text--subtle: rgba(var(--rgb-theme-day-main), var(--opacity-text--subtle));
  --color-theme-day-text--disabled: rgba(var(--rgb-theme-day-main), var(--opacity-text--disabled));

  --color-theme-day-background--shade-1: rgb(var(--rgb-theme-day-background--shade-1));
  --color-theme-day-background--shade-2: rgb(var(--rgb-theme-day-background--shade-2));
  --color-theme-day-background--shade-3: rgb(var(--rgb-theme-day-background--shade-3));
  --color-theme-day-background--shade-4: rgb(var(--rgb-theme-day-background--shade-4));

  --color-theme-day-background: var(--color-theme-day-background--shade-1);
  --color-theme-day-background--overlay-heavy: rgba(var(--rgb-theme-day-main), var(--opacity-background--overlay-heavy));
  --color-theme-day-background--overlay-light: rgba(var(--rgb-theme-day-main), var(--opacity-background--overlay-light));
  --color-theme-day-background--subtle: rgba(var(--rgb-theme-day-main), var(--opacity-background--subtle));
  --color-theme-day-background--active: rgba(var(--rgb-theme-day-main), var(--opacity-background--active));
  --color-theme-day-background--disabled: rgba(var(--rgb-theme-day-main), var(--opacity-background--disabled));
  --color-theme-day-background--hover: rgba(var(--rgb-theme-day-main), var(--opacity-background--hover));

  --color-theme-day-border: rgba(var(--rgb-theme-day-main), var(--opacity-border));

  --color-theme-day-shadow--border: rgba(var(--rgb-theme-day-main), var(--opacity-border));
  --color-theme-day-shadow--light: rgba(var(--rgb-theme-day-main), var(--opacity-shadow--light));
  --color-theme-day-shadow--heavy: rgba(var(--rgb-theme-day-main), var(--opacity-shadow--heavy));

  --drop-shadow-theme-day-border: var(--drop-shadow-border) var(--color-theme-day-shadow--border);
  --drop-shadow-theme-day-elevation--x1:
    var(--drop-shadow-elevation--x1) var(--color-theme-day-shadow--light),
    var(--drop-shadow-definition) var(--color-theme-day-shadow--heavy);
  --drop-shadow-theme-day-elevation--x2:
    var(--drop-shadow-elevation--x2) var(--color-theme-day-shadow--light),
    var(--drop-shadow-definition) var(--color-theme-day-shadow--heavy);
}

.ax-theme--day {
  --rgb-theme-main: var(--rgb-theme-day-main);
  --rgb-theme-main--dark: var(--rgb-theme-day-main--dark);
  --rgb-theme-main--darker: var(--rgb-theme-day-main--darker);

  --rgb-theme-background--shade-1: var(--rgb-theme-day-background--shade-1);
  --rgb-theme-background--shade-2: var(--rgb-theme-day-background--shade-2);
  --rgb-theme-background--shade-3: var(--rgb-theme-day-background--shade-3);
  --rgb-theme-background--shade-4: var(--rgb-theme-day-background--shade-4);

  --color-theme-main: var(--color-theme-day-main);
  --color-theme-main--dark: var(--color-theme-day-main--dark);
  --color-theme-main--darker: var(--color-theme-day-main--darker);

  --color-theme-text: var(--color-theme-day-text);
  --color-theme-text--subtle: var(--color-theme-day-text--subtle);
  --color-theme-text--disabled: var(--color-theme-day-text--disabled);

  --color-theme-background--shade-1: var(--color-theme-day-background--shade-1);
  --color-theme-background--shade-2: var(--color-theme-day-background--shade-2);
  --color-theme-background--shade-3: var(--color-theme-day-background--shade-3);
  --color-theme-background--shade-4: var(--color-theme-day-background--shade-4);

  --color-theme-background: var(--color-theme-day-background);
  --color-theme-background--overlay-heavy: var(--color-theme-day-background--overlay-heavy);
  --color-theme-background--overlay-light: var(--color-theme-day-background--overlay-light);
  --color-theme-background--subtle: var(--color-theme-day-background--subtle);
  --color-theme-background--active: var(--color-theme-day-background--active);
  --color-theme-background--disabled: var(--color-theme-day-background--disabled);
  --color-theme-background--hover: var(--color-theme-day-background--hover);

  --color-theme-border: var(--color-theme-day-border);

  --color-theme-shadow--border: var(--color-theme-day-shadow--border);
  --color-theme-shadow--light: var(--color-theme-day-shadow--heavy);
  --color-theme-shadow--heavy: var(--color-theme-day-shadow--light);

  --drop-shadow-theme-border: var(--drop-shadow-theme-day-border);
  --drop-shadow-theme-elevation--x1: var(--drop-shadow-theme-day-elevation--x1);
  --drop-shadow-theme-elevation--x2: var(--drop-shadow-theme-day-elevation--x2);
}

/* stylelint-disable max-line-length */
:root {
  --rgb-theme-night-main: var(--rgb-ui-white-noise);
  --rgb-theme-night-main--dark: var(--rgb-ui-white-noise--dark);
  --rgb-theme-night-main--darker: var(--rgb-ui-white-noise--darker);

  --rgb-theme-night-background--shade-1: var(--rgb-ui-black);
  --rgb-theme-night-background--shade-2: var(--rgb-ui-carbon--darker);
  --rgb-theme-night-background--shade-3: var(--rgb-ui-carbon--dark);
  --rgb-theme-night-background--shade-4: var(--rgb-ui-carbon);

  --color-theme-night-main: rgb(var(--rgb-theme-night-main));
  --color-theme-night-main--dark: rgb(var(--rgb-theme-night-main--dark));
  --color-theme-night-main--darker: rgb(var(--rgb-theme-night-main--darker));

  --color-theme-night-text: var(--color-theme-night-main);
  --color-theme-night-text--subtle: rgba(var(--rgb-theme-night-main), var(--opacity-text--subtle));
  --color-theme-night-text--disabled: rgba(var(--rgb-theme-night-main), var(--opacity-text--disabled));

  --color-theme-night-background--shade-1: rgb(var(--rgb-theme-night-background--shade-1));
  --color-theme-night-background--shade-2: rgb(var(--rgb-theme-night-background--shade-2));
  --color-theme-night-background--shade-3: rgb(var(--rgb-theme-night-background--shade-3));
  --color-theme-night-background--shade-4: rgb(var(--rgb-theme-night-background--shade-4));

  --color-theme-night-background: var(--color-theme-night-background--shade-2);
  --color-theme-night-background--overlay-heavy: rgba(var(--rgb-theme-night-main), var(--opacity-background--overlay-heavy));
  --color-theme-night-background--overlay-light: rgba(var(--rgb-theme-night-main), var(--opacity-background--overlay-light));
  --color-theme-night-background--subtle: rgba(var(--rgb-theme-night-main), var(--opacity-background--subtle));
  --color-theme-night-background--active: rgba(var(--rgb-theme-night-main), var(--opacity-background--active));
  --color-theme-night-background--disabled: rgba(var(--rgb-theme-night-main), var(--opacity-background--disabled));
  --color-theme-night-background--hover: rgba(var(--rgb-theme-night-main), var(--opacity-background--hover));

  --color-theme-night-border: rgba(var(--rgb-theme-night-main), var(--opacity-border));

  --color-theme-night-shadow--border: rgba(var(--rgb-theme-night-main), var(--opacity-border));
  --color-theme-night-shadow--light: rgba(var(--rgb-ui-black), var(--opacity-shadow--light));
  --color-theme-night-shadow--heavy: rgba(var(--rgb-ui-black), var(--opacity-shadow--heavy));

  --drop-shadow-theme-night-border: var(--drop-shadow-border) var(--color-theme-night-shadow--border);
  --drop-shadow-theme-night-elevation--x1:
    var(--drop-shadow-elevation--x1) var(--color-theme-night-shadow--light),
    var(--drop-shadow-definition) var(--color-theme-night-shadow--heavy);
  --drop-shadow-theme-night-elevation--x2:
    var(--drop-shadow-elevation--x2) var(--color-theme-night-shadow--light),
    var(--drop-shadow-definition) var(--color-theme-night-shadow--heavy);
}

.ax-theme--night {
  --rgb-theme-main: var(--rgb-theme-night-main);
  --rgb-theme-main--dark: var(--rgb-theme-night-main--dark);
  --rgb-theme-main--darker: var(--rgb-theme-night-main--darker);

  --rgb-theme-background--shade-1: var(--rgb-theme-night-background--shade-1);
  --rgb-theme-background--shade-2: var(--rgb-theme-night-background--shade-2);
  --rgb-theme-background--shade-3: var(--rgb-theme-night-background--shade-3);
  --rgb-theme-background--shade-4: var(--rgb-theme-night-background--shade-4);

  --color-theme-main: var(--color-theme-night-main);
  --color-theme-main--dark: var(--color-theme-night-main--dark);
  --color-theme-main--darker: var(--color-theme-night-main--darker);

  --color-theme-text: var(--color-theme-night-text);
  --color-theme-text--subtle: var(--color-theme-night-text--subtle);
  --color-theme-text--disabled: var(--color-theme-night-text--disabled);

  --color-theme-background--shade-1: var(--color-theme-night-background--shade-1);
  --color-theme-background--shade-2: var(--color-theme-night-background--shade-2);
  --color-theme-background--shade-3: var(--color-theme-night-background--shade-3);
  --color-theme-background--shade-4: var(--color-theme-night-background--shade-4);

  --color-theme-background: var(--color-theme-night-background);
  --color-theme-background--overlay-heavy: var(--color-theme-night-background--overlay-heavy);
  --color-theme-background--overlay-light: var(--color-theme-night-background--overlay-light);
  --color-theme-background--subtle: var(--color-theme-night-background--subtle);
  --color-theme-background--active: var(--color-theme-night-background--active);
  --color-theme-background--disabled: var(--color-theme-night-background--disabled);
  --color-theme-background--hover: var(--color-theme-night-background--hover);

  --color-theme-border: var(--color-theme-night-border);

  --color-theme-shadow--border: var(--color-theme-night-shadow--border);
  --color-theme-shadow--light: var(--color-theme-night-shadow--heavy);
  --color-theme-shadow--heavy: var(--color-theme-night-shadow--light);

  --drop-shadow-theme-border: var(--drop-shadow-theme-night-border);
  --drop-shadow-theme-elevation--x1: var(--drop-shadow-theme-night-elevation--x1);
  --drop-shadow-theme-elevation--x2: var(--drop-shadow-theme-night-elevation--x2);
}

/* stylelint-disable value-keyword-case */
:root {
  --font-family-body: 'Roboto', Helvetica, Arial, sans-serif;
  --font-family-mono: 'Roboto Mono', 'Andale Mono', monospace;

  --font-weight-thin: 100;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  --font-size-label: 0.625rem;
  --font-size-small: 0.75rem;
  --font-size-body: 0.8125rem;
  --font-size-large: 0.875rem;
  --font-size-headtitle: 1.0625rem;
  --font-size-headline: 1.375rem;
  --font-size-display1: 2rem;
  --font-size-display2: 2.5rem;

  --line-height-label: 1rem;
  --line-height-body: 1.25rem;
  --line-height-small: var(--line-height-body);
  --line-height-large: var(--line-height-body);
  --line-height-headtitle: 1.5rem;
  --line-height-headline: 1.75rem;
  --line-height-display1: 2.5rem;
  --line-height-display2: 3rem;

  --letter-spacing-tight: -0.00125rem;
  --letter-spacing-loose: 0.001875rem;
}
/* stylelint-enable */

.ax-icon {
  display: block;
  margin-right: auto;
  margin-left: auto;
  fill: currentColor;
}

.ax-icon--inline {
  display: inline;
  margin-right: initial;
  margin-left: initial;
  vertical-align: middle;
}

.ax-icon--inline.ax-icon--space-left-x1 { margin-left: var(--spacing-grid-size--x1); }
.ax-icon--inline.ax-icon--space-left-x2 { margin-left: var(--spacing-grid-size--x2); }
.ax-icon--inline.ax-icon--space-right-x1 { margin-right: var(--spacing-grid-size--x1); }
.ax-icon--inline.ax-icon--space-right-x2 { margin-right: var(--spacing-grid-size--x2); }

/* stylelint-disable property-no-vendor-prefix, selector-max-type */
/* stylelint-disable selector-max-universal */
*,
*::before,
*::after {
  box-sizing: inherit;
}
/* stylelint-enable selector-max-universal */

html,
body {
  box-sizing: border-box;
}

html {
  font-size: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "liga", "clig";
  font-variant-ligatures: common-ligatures;
  text-rendering: optimizeLegibility;
  line-height: var(--line-height-body);
}

button,
hr,
input {
  overflow: visible; /*  Show the overflow in Edge. */
}

input,
textarea {
  margin: 0; /* Remove the margin in Firefox and Safari. */
  font: inherit;
}

textarea {
  overflow: auto; /* Remove the default vertical scrollbar in IE. */
}

/* normalise button styles */
button {
  margin: 0;
  border-radius: 0;
  font: inherit

  /* Remove the inner border and padding in Firefox. */
}
button::-moz-focus-inner {
    padding: 0;
    border-style: none;
  }

/* Hack: around webkits autofill styling */
@keyframes inputAutofillFix {
  to {
    background-color: transparent;
    color: inherit;
  }
}

@keyframes appear-standard {
  from { transform: scale3d(0.8, 0.8, 1); opacity: 0; }
  to   { transform: scale3d(1, 1, 1);     opacity: 1; }
}

@keyframes disappear-standard {
  from { transform: scale3d(1, 1, 1);     opacity: 1; }
  to   { transform: scale3d(0.8, 0.8, 1); opacity: 0; }
}

@keyframes appear-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes disappear-fade {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* stylelint-disable declaration-no-important */
@media (max-width: 47.9375rem) {
  .ax-hidden-until--small  {
    display: none !important;
  }
}

@media (max-width: 61.9375rem) {
  .ax-hidden-until--medium  {
    display: none !important;
  }
}

@media (max-width: 74.9375rem) {
  .ax-hidden-until--large  {
    display: none !important;
  }
}

@media (min-width: 48rem) {
  .ax-visible-until--small  {
    display: none !important;
  }
}

@media (min-width: 62rem) {
  .ax-visible-until--medium  {
    display: none !important;
  }
}

@media (min-width: 75rem) {
  .ax-visible-until--large  {
    display: none !important;
  }
}

/* stylelint-enable */
.ax-space--x0 {
  margin-top: 0;
  margin-bottom: 0;
}

.ax-space--x1 {
  margin-top: var(--spacing-grid-size--x1);
  margin-bottom: var(--spacing-grid-size--x1);
}

.ax-space--x2 {
  margin-top: var(--spacing-grid-size--x2);
  margin-bottom: var(--spacing-grid-size--x2);
}

.ax-space--x3 {
  margin-top: var(--spacing-grid-size--x3);
  margin-bottom: var(--spacing-grid-size--x3);
}

.ax-space--x4 {
  margin-top: var(--spacing-grid-size--x4);
  margin-bottom: var(--spacing-grid-size--x4);
}

.ax-space--x5 {
  margin-top: var(--spacing-grid-size--x5);
  margin-bottom: var(--spacing-grid-size--x5);
}

.ax-space--x6 {
  margin-top: var(--spacing-grid-size--x6);
  margin-bottom: var(--spacing-grid-size--x6);
}

.ax-space--x8 {
  margin-top: var(--spacing-grid-size--x8);
  margin-bottom: var(--spacing-grid-size--x8);
}

.ax-space--x0:first-child, .ax-space--x1:first-child, .ax-space--x2:first-child, .ax-space--x3:first-child, .ax-space--x4:first-child, .ax-space--x5:first-child, .ax-space--x6:first-child, .ax-space--x8:first-child { margin-top: 0; }

.ax-space--x0:last-child,  .ax-space--x1:last-child,  .ax-space--x2:last-child,  .ax-space--x3:last-child,  .ax-space--x4:last-child,  .ax-space--x5:last-child,  .ax-space--x6:last-child,  .ax-space--x8:last-child  { margin-bottom: 0; }

.ax-sticky {
  position: sticky;
  z-index: var(--z-index-sticky);
}

.ax-container {
  position: relative;
}

.ax-cloak {
  opacity: 0;
  transition-property: opacity;
  transition-duration: var(--transition-time-base);
  transition-timing-function: var(--transition-function);
  pointer-events: none
}

.ax-cloak__container:hover .ax-cloak, .ax-cloak.ax-cloak--visible {
    opacity: 1;
    pointer-events: all
}

.ax-pointer--disabled {
  pointer-events: none;
}

.ax-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  outline: 0;
  border-width: var(--component-border-width);
  border-style: solid;
  border-radius: var(--component-border-radius);
  border-color: transparent;
  background-color: transparent;
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-loose);
  text-align: center;
  text-transform: uppercase;
  line-height: var(--component-line-height);
  white-space: nowrap;
  vertical-align: middle;
  transition-property: background-color, border-color, color;
  transition-duration: var(--transition-time-base);
  transition-timing-function: var(--transition-function)
}

.ax-button:hover {
    cursor: pointer;
  }

.ax-button[disabled],
  .ax-button[disabled]:hover,
  .ax-button[disabled]:active {
    cursor: default;
  }

.ax-button {

  /* Works around flex alignment bug in Safari */
}

.ax-button::before,
  .ax-button::after {
    content: '';
    flex: 1 0 auto;
  }

.ax-button--joined-left {
  border-left-width: 0;
}

.ax-button--joined:not(:first-child),
.ax-button--joined-left {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.ax-button--joined:not(:last-child),
.ax-button--joined-right {
  margin-right: 0;
  border-right-width: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.ax-button--full {
  width: 100%;
}

@media (max-width: 47.9375rem) {
  .ax-button--full--small { width: 100%; }
}

@media (max-width: 61.9375rem) {
  .ax-button--full--medium { width: 100%; }
}

@media (max-width: 74.9375rem) {
  .ax-button--full--large { width: 100%; }
}

.ax-button--circle-small,
.ax-button--circle-medium,
.ax-button--circle-large,
.ax-button--circle-huge {
  padding: 0;
  border-radius: 50%;
  line-height: 0;
}

.ax-button--circle-small {
  width: var(--component-round-size-small);
  height: var(--component-round-size-small);
  border-width: var(--component-border-width-small);
}

.ax-button--circle-medium {
  width: var(--component-round-size-medium);
  height: var(--component-round-size-medium);
  border-width: var(--component-border-width-medium);
}

.ax-button--circle-large {
  width: var(--component-round-size-large);
  height: var(--component-round-size-large);
  border-width: var(--component-border-width-large);
}

.ax-button--circle-huge {
  width: var(--component-round-size-huge);
  height: var(--component-round-size-huge);
  border-width: var(--component-border-width-huge);
}

.ax-button--rectangle-small {
  padding: var(--component-padding-vertical-small) var(--component-padding-horizontal-small);
  font-size: var(--font-size-small);
}

.ax-button--rectangle-medium {
  padding: var(--component-padding-vertical-medium) var(--component-padding-horizontal-medium);
  font-size: var(--font-size-small);
}

.ax-button--rectangle-large {
  padding: var(--component-padding-vertical-large) var(--component-padding-horizontal-large);
  font-size: var(--font-size-large);
}

.ax-button--icon-only.ax-button--rectangle-small {
    padding-right: var(--component-padding-vertical-small);
    padding-left: var(--component-padding-vertical-small);
  }

.ax-button--icon-only.ax-button--rectangle-medium {
    padding-right: var(--component-padding-vertical-medium);
    padding-left: var(--component-padding-vertical-medium);
  }

.ax-button--icon-only.ax-button--rectangle-large {
    padding-right: var(--component-padding-vertical-large);
    padding-left: var(--component-padding-vertical-large);
  }

.ax-button--stadium-small {
  min-width: var(--component-round-size-small);
  height: var(--component-round-size-small);
  padding: 0 calc(var(--component-round-size-small) * 0.25);
  border-width: var(--component-border-width-small);
  border-radius: var(--component-round-size-small);
  line-height: 0;
}

.ax-button--primary {
  border-color: transparent;
  color: var(--color-ui-white-noise)

  /* Pattern obscurity */
}

.ax-button--primary.ax-button--joined:not(:first-child) {
    border-left-color: rgba(var(--rgb-ui-white-noise--dark), 0.45);
  }

.ax-button--primary:disabled {
    background-color: var(--color-theme-background--disabled);
    color: var(--color-theme-text--disabled);
  }

.ax-button--primary:not(:disabled):active,
  .ax-button--primary:not(:disabled).ax-button--active {
    color: var(--color-ui-white-noise);
  }

.ax-button--secondary {
  border-color: var(--color-theme-border)
}

.ax-button--secondary:hover {
    border-color: transparent;
    background-color: var(--color-theme-background--subtle);
  }

.ax-button--secondary:disabled {
    border-color: var(--color-theme-border);
    background-color: transparent;
    color: var(--color-theme-text--disabled);
  }

.ax-button--secondary:not(:disabled):active,
  .ax-button--secondary:not(:disabled).ax-button--active {
    border-color: transparent;
    background-color: var(--color-theme-background--subtle);
  }

.ax-button--tertiary:disabled {
    color: var(--color-theme-text--disabled);
  }

.ax-button--quaternary {
  color: var(--color-theme-text--subtle)
}

.ax-button--quaternary:hover {
    color: var(--color-ui-accent--hover);
  }

.ax-button--quaternary:disabled {
    color: var(--color-theme-text--disabled);
  }

.ax-button--quaternary:not(:disabled):active,
  .ax-button--quaternary:not(:disabled).ax-button--active {
    color: var(--color-ui-accent--active);
  }

.ax-button--accent:not(:disabled).ax-button--primary {
    background-color: var(--color-ui-accent)
  }

.ax-button--accent:not(:disabled).ax-button--primary:hover  {
      background-color: var(--color-ui-accent--hover);
    }

.ax-button--accent:not(:disabled).ax-button--primary:active,
    .ax-button--accent:not(:disabled).ax-button--primary.ax-button--active {
      background-color: var(--color-ui-accent--active);
    }

.ax-button--accent:not(:disabled).ax-button--secondary,
  .ax-button--accent:not(:disabled).ax-button--tertiary {
    color: var(--color-ui-accent);
  }

.ax-button--accent:not(:disabled).ax-button--secondary:hover, .ax-button--accent:not(:disabled).ax-button--tertiary:hover, .ax-button--accent:not(:disabled).ax-button--quaternary:hover {
      color: var(--color-ui-accent--hover);
    }

.ax-button--accent:not(:disabled).ax-button--secondary:active,
    .ax-button--accent:not(:disabled).ax-button--secondary.ax-button--active,
    .ax-button--accent:not(:disabled).ax-button--tertiary:active,
    .ax-button--accent:not(:disabled).ax-button--tertiary.ax-button--active,
    .ax-button--accent:not(:disabled).ax-button--quaternary:active,
    .ax-button--accent:not(:disabled).ax-button--quaternary.ax-button--active {
      color: var(--color-ui-accent--active);
    }

.ax-button--negative:not(:disabled).ax-button--primary {
    background-color: var(--color-ui-error)
  }

.ax-button--negative:not(:disabled).ax-button--primary:hover  {
      background-color: var(--color-ui-error--hover);
    }

.ax-button--negative:not(:disabled).ax-button--primary:active,
    .ax-button--negative:not(:disabled).ax-button--primary.ax-button--active {
      background-color: var(--color-ui-error--active);
    }

.ax-button--negative:not(:disabled).ax-button--secondary,
  .ax-button--negative:not(:disabled).ax-button--tertiary {
    color: var(--color-ui-error);
  }

.ax-button--negative:not(:disabled).ax-button--secondary:hover, .ax-button--negative:not(:disabled).ax-button--tertiary:hover, .ax-button--negative:not(:disabled).ax-button--quaternary:hover {
      color: var(--color-ui-error--hover);
    }

.ax-button--negative:not(:disabled).ax-button--secondary:active,
    .ax-button--negative:not(:disabled).ax-button--secondary.ax-button--active,
    .ax-button--negative:not(:disabled).ax-button--tertiary:active,
    .ax-button--negative:not(:disabled).ax-button--tertiary.ax-button--active,
    .ax-button--negative:not(:disabled).ax-button--quaternary:active,
    .ax-button--negative:not(:disabled).ax-button--quaternary.ax-button--active {
      color: var(--color-ui-error--active);
    }

.ax-button--positive:not(:disabled).ax-button--primary {
    background-color: var(--color-ui-success)
  }

.ax-button--positive:not(:disabled).ax-button--primary:hover  {
      background-color: var(--color-ui-success--hover);
    }

.ax-button--positive:not(:disabled).ax-button--primary:active,
    .ax-button--positive:not(:disabled).ax-button--primary.ax-button--active {
      background-color: var(--color-ui-success--active);
    }

.ax-button--positive:not(:disabled).ax-button--secondary,
  .ax-button--positive:not(:disabled).ax-button--tertiary {
    color: var(--color-ui-success);
  }

.ax-button--positive:not(:disabled).ax-button--secondary:hover, .ax-button--positive:not(:disabled).ax-button--tertiary:hover, .ax-button--positive:not(:disabled).ax-button--quaternary:hover {
      color: var(--color-ui-success--hover);
    }

.ax-button--positive:not(:disabled).ax-button--secondary:active,
    .ax-button--positive:not(:disabled).ax-button--secondary.ax-button--active,
    .ax-button--positive:not(:disabled).ax-button--tertiary:active,
    .ax-button--positive:not(:disabled).ax-button--tertiary.ax-button--active,
    .ax-button--positive:not(:disabled).ax-button--quaternary:active,
    .ax-button--positive:not(:disabled).ax-button--quaternary.ax-button--active {
      color: var(--color-ui-success--active);
    }

.ax-button__icon {
  display: inline-flex;
  margin: 0 var(--spacing-grid-size);
}

.ax-button__icon--start { margin-left: 0; }
.ax-button__icon--end   { margin-right: 0; }

.ax-progress-finite__background {
  fill: none;
  stroke: var(--color-theme-background--subtle);
}

.ax-progress-finite__arc {
  fill: none;
  stroke: var(--color-ui-accent--hover);
  transition-property: stroke-dashoffset;
  transition-duration: var(--transition-time-slow);
  transition-timing-function: var(--transition-function);
}

.ax-radial-progress {
  display: block;
  margin-right: auto;
  margin-left: auto;
}

.ax-radial-progress--tiny {
  width: var(--component-round-size-tiny);
  height: var(--component-round-size-tiny);
}

.ax-radial-progress--small {
  width: var(--component-round-size-small);
  height: var(--component-round-size-small);
}

.ax-radial-progress--medium {
  width: var(--component-round-size-medium);
  height: var(--component-round-size-medium);
}

.ax-radial-progress--large {
  width: var(--component-round-size-large);
  height: var(--component-round-size-large);
}

.ax-inline-group__spacer {
  --cmp-inline-spacing: var(--spacing-grid-size--x2);
  margin-bottom: calc(var(--cmp-inline-spacing) * -1)

  /* stylelint-disable selector-max-universal */
}
.ax-inline-group__spacer > * {
    margin-right: var(--cmp-inline-spacing);
    margin-bottom: var(--cmp-inline-spacing);
  }
.ax-inline-group__spacer > *:last-child {
    margin-right: 0;
  }
.ax-inline-group__spacer {
  /* stylelint-enable */
}

.ax-editable-title {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  overflow: hidden;
}

.ax-editable-title__input {
  flex: 0 1 100%;
  min-width: 0;
}

.ax-editable-title__icon {
  flex: 0 0 auto;
  margin-left: var(--spacing-grid-size);
}

.ax-text--align-left   { text-align: left; }
.ax-text--align-center { text-align: center; }
.ax-text--align-right  { text-align: right; }

@media (min-width: 48rem) {
  .ax-text--align-left--small   { text-align: left; }
  .ax-text--align-center--small { text-align: center; }
  .ax-text--align-right--small  { text-align: right; }
}

@media (min-width: 62rem) {
  .ax-text--align-left--medium   { text-align: left; }
  .ax-text--align-center--medium { text-align: center; }
  .ax-text--align-right--medium  { text-align: right; }
}

@media (min-width: 75rem) {
  .ax-text--align-left--large   { text-align: left; }
  .ax-text--align-center--large { text-align: center; }
  .ax-text--align-right--large  { text-align: right; }
}

.ax-text--break-none { white-space: nowrap; }
.ax-text--break-all  { white-space: initial; word-break: break-all; }
.ax-text--break-word { white-space: initial; word-wrap: break-word; }

.ax-text--case-upper   { text-transform: uppercase; }
.ax-text--case-capital { text-transform: capitalize; }
.ax-text--case-lower   { text-transform: lowercase; }

.ax-text--color-body { color: var(--color-theme-text); }
.ax-text--color-day { color: var(--color-theme-day-text); }
.ax-text--color-night { color: var(--color-theme-night-text); }
.ax-text--color-error { color: var(--color-ui-error); }
.ax-text--color-success { color: var(--color-ui-success); }
.ax-text--color-warning { color: var(--color-ui-warning); }
.ax-text--color-disabled { color: var(--color-theme-text--disabled); }
.ax-text--color-subtle { color: var(--color-theme-text--subtle); }
.ax-text--color-twitter { color: var(--color-social-twitter); }
.ax-text--color-facebook { color: var(--color-social-facebook); }
.ax-text--color-instagram { color: var(--color-social-instagram); }
.ax-text--color-forbidden-planet { color: var(--color-product-forbidden-planet); }
.ax-text--color-tiny-clanger { color: var(--color-product-tiny-clanger); }
.ax-text--color-critical-mass { color: var(--color-product-critical-mass); }
.ax-text--color-fantastic-voyage { color: var(--color-product-fantastic-voyage); }
.ax-text--color-paradise-lost { color: var(--color-product-paradise-lost); }
.ax-text--color-serene-sea { color: var(--color-product-serene-sea); }
.ax-text--color-event-horizon { color: var(--color-product-event-horizon); }
.ax-text--color-electric-dreams { color: var(--color-product-electric-dreams); }
.ax-text--color-outer-limits { color: var(--color-product-outer-limits); }
.ax-text--color-giant-leap { color: var(--color-product-giant-leap); }
.ax-text--color-moon-lagoon { color: var(--color-product-moon-lagoon); }
.ax-text--color-space-invader { color: var(--color-product-space-invader); }
.ax-text--color-extraterrestrial { color: var(--color-product-extraterrestrial); }
.ax-text--color-terra-form { color: var(--color-product-terra-form); }
.ax-text--color-primeval-soup { color: var(--color-product-primeval-soup); }
.ax-text--color-future-shock { color: var(--color-product-future-shock); }
.ax-text--color-sun-maker { color: var(--color-product-sun-maker); }
.ax-text--color-new-horizon { color: var(--color-product-new-horizon); }
.ax-text--color-blast-off { color: var(--color-product-blast-off); }
.ax-text--color-crash-course { color: var(--color-product-crash-course); }
.ax-text--color-solar-rust { color: var(--color-product-solar-rust); }
.ax-text--color-ground-control { color: var(--color-product-ground-control); }
.ax-text--color-space-oddity { color: var(--color-product-space-oddity); }
.ax-text--color-rocky-planet { color: var(--color-product-rocky-planet); }
.ax-text--color-deep-thought { color: var(--color-product-deep-thought); }
.ax-text--color-luna-dust { color: var(--color-product-luna-dust); }
.ax-text--color-sentiment-positive { color: var(--color-sentiment-positive); }
.ax-text--color-sentiment-negative { color: var(--color-sentiment-negative); }
.ax-text--color-sentiment-neutral { color: var(--color-sentiment-neutral); }
.ax-text--color-ui-accent { color: var(--color-ui-accent); }

.ax-text--ellipsis {
  max-width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.ax-text--emphasize { font-style: italic; }

.ax-text--size-label {
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--letter-spacing-loose);
  text-transform: uppercase;
  line-height: var(--line-height-label);
}

.ax-text--size-small {
  font-size: var(--font-size-small);
}

.ax-text--size-body {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
}

.ax-text--size-large {
  font-size: var(--font-size-large);
  line-height: var(--line-height-large);
}

.ax-text--size-headtitle {
  font-size: var(--font-size-headtitle);
  line-height: var(--line-height-headtitle);
}

.ax-text--size-headline {
  font-size: var(--font-size-headline);
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-headline);
}

.ax-text--size-display2 {
  font-size: var(--font-size-display2);
  line-height: var(--line-height-display2);
}

.ax-text--size-display1 {
  font-size: var(--font-size-display1);
  line-height: var(--line-height-display1);
}

.ax-text--size-headtitle,
.ax-text--size-headline,
.ax-text--size-display2,
.ax-text--size-display1 {
  letter-spacing: var(--letter-spacing-tight);
}

.ax-text--strike         { text-decoration: line-through; }
.ax-text--underline-body { text-decoration: underline; }

.ax-text--underline-display2,
.ax-text--underline-display1,
.ax-text--underline-headline {
  border-bottom: var(--component-border-width) solid var(--color-theme-border);
}

.ax-text--underline-headline { padding-bottom: calc(var(--spacing-grid-size) * 2); }
.ax-text--underline-display1 { padding-bottom: calc(var(--spacing-grid-size) * 2); }
.ax-text--underline-display2 { padding-bottom: calc(var(--spacing-grid-size) * 3); }

.ax-text--size-large,
.ax-text--size-headtitle {
  font-weight: var(--font-weight-regular);
}

.ax-text--strong,
.ax-text--size-label.ax-text--strong,
.ax-text--size-label .ax-text--strong {
  font-weight: var(--font-weight-bold);
}

.ax-text--size-display2,
.ax-text--size-display1 {
  font-weight: var(--font-weight-thin);
}

.ax-text--size-headline.ax-text--strong,
.ax-text--size-headline .ax-text--strong,
.ax-text--size-display1.ax-text--strong,
.ax-text--size-display1 .ax-text--strong,
.ax-text--size-display2.ax-text--strong,
.ax-text--size-display2 .ax-text--strong {
  font-weight: var(--font-weight-medium);
}

.ax-text--face-monospace {
  font-family: var(--font-family-mono);
}

.ax-editable-line {
  position: relative;
  padding: 0 var(--spacing-grid-size) 0 0;
  white-space: pre;
}

.ax-editable-line__structure {
  min-width: 1em; /* stylelint-disable-line unit-blacklist */
  visibility: hidden;
}

.ax-editable-line__input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  min-width: 0;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0.0625rem solid transparent;
  border-radius: var(--component-border-radius);
  background-color: transparent;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  text-overflow: ellipsis;
  line-height: inherit;
  transition-property: border-color;
  transition-duration: var(--transition-time-base);
  transition-timing-function: var(--transition-function);
  appearance: none
}

.ax-editable-line__input:hover {
    border-color: var(--color-theme-border);
  }

.ax-editable-line__input:focus {
    outline: none;
    border-color: rgba(var(--rgb-ui-accent), var(--opacity-input-border--focused));
  }

.ax-editable-line__input::placeholder {
    color: var(--color-theme-text--disabled);
    -webkit-user-select: none;
            user-select: none;
  }

.ax-editable-line__input:focus::placeholder {
    color: transparent;
  }

.ax-editable-line__input[value='']:focus + .ax-editable-line__structure {
  width: 0;
}

.ax-pictogram {
  display: block;
  margin-right: auto;
  margin-left: auto;
  fill: currentColor;
}

.ax-input {
  flex: 1 1 auto;
  border: 0;
  background-color: transparent;
  text-overflow: ellipsis;
  line-height: var(--component-line-height)
}

.ax-input::placeholder {
    color: var(--color-theme-text--disabled);
  }

.ax-input:focus {
    outline: none
  }

.ax-input:focus::placeholder {
      color: transparent;
    }

.ax-input__progress {
  padding-right: var(--component-padding-horizontal-small);
}

.ax-input__icon--align-right {
  order: 1;
}

.ax-input__icon-container--small .ax-input {
  padding: var(--component-padding-vertical-small) var(--component-padding-horizontal-small);
  font-size: var(--font-size-small);
}

.ax-input__icon-container--medium .ax-input {
  padding: var(--component-padding-vertical-medium) var(--component-padding-horizontal-medium);
  font-size: var(--font-size-small);
}

.ax-input__icon-container--large .ax-input {
  padding: var(--component-padding-vertical-large) var(--component-padding-horizontal-large);
  font-size: var(--font-size-large);
}

.ax-input:-webkit-autofill,
.ax-input:-webkit-autofill:hover,
.ax-input:-webkit-autofill:focus,
.ax-input:-webkit-autofill:active {
  animation-name: inputAutofillFix;
  animation-fill-mode: forwards;
}

.ax-input__icon-container {
  display: flex;
  position: relative;
  flex: 1 1 auto;
  align-items: center;
  border-width: var(--component-border-width);
  border-style: solid;
  border-radius: var(--component-border-radius);
  border-color: var(--color-theme-border);
  background-color: var(--color-theme-background);
  transition-property: border-color;
  transition-duration: var(--transition-time-base);
  transition-timing-function: var(--transition-function)
}

.ax-input__icon-container .ax-input__icon--align-left {
    padding-left: var(--spacing-grid-size--x2);
  }

.ax-input__icon-container .ax-input__icon--align-right {
    padding-right: var(--spacing-grid-size--x2);
  }

.ax-input__icon-container .ax-input__icon--align-left + .ax-input {
    padding-left: var(--spacing-grid-size);
  }

.ax-input__icon-container .ax-input__icon--align-right + .ax-input {
    padding-right: var(--spacing-grid-size);
  }

.ax-input__icon-container:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

.ax-input__icon-container--disabled {
  background-color: var(--color-theme-background--disabled);
}

.ax-input__icon-container--focused {
  border-color: rgba(var(--rgb-ui-accent), var(--opacity-input-border--focused));
}

.ax-input__icon-container--overlay {
  border-color: transparent;
  background-color: var(--color-theme-background--subtle)
}

.ax-input__icon-container--overlay .ax-input::placeholder {
    color: var(--color-theme-text--subtle);
  }

.ax-input__icon-container--valid:not(.ax-input__icon-container--focused) {
  border-color: rgba(var(--rgb-ui-error), var(--opacity-input-border--valid));
}

.ax-input__icon-container--invalid {
  border-color: rgba(var(--rgb-ui-error), var(--opacity-input-border--invalid));
  color: var(--color-ui-error)
}

.ax-input__icon-container--invalid .ax-input::placeholder {
    color: var(--color-ui-error);
  }

.ax-input__icon-container--light .ax-input:focus::placeholder, .ax-input__icon-container--dark .ax-input:focus::placeholder {
    color: transparent;
  }

.ax-input__container {
  display: flex;
}

.ax-input__wrapper--target {
  cursor: pointer;
}

.ax-position {
  z-index: var(--z-index-position);
}

.ax-position__mask {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: var(--z-index-position);
}

.ax-context {
  /**
  * The designs of the tip is 1.5rem from corner to corner. To calculate
  * the pre-rotated square we use `Math.sqrt((1.5rem**2)/2)`
  */
  --cmp-context-tip-space: calc(var(--spacing-grid-size) * 2);
  --cmp-context-padding-vertical-tiny: calc(var(--spacing-grid-size) / 2);
  --cmp-context-padding-horizontal-tiny: calc(var(--spacing-grid-size) * 3);
  --cmp-context-padding-vertical-small: calc(var(--spacing-grid-size) * 1.5);
  --cmp-context-padding-horizontal-small: calc(var(--spacing-grid-size) * 3);
  --cmp-context-padding-medium: calc(var(--spacing-grid-size) * 4);
  --cmp-context-padding-large: calc(var(--spacing-grid-size) * 6);
  --cmp-context-menu-item-padding-vertical: calc(var(--spacing-grid-size) * 3);
  --cmp-context-menu-item-padding-vertical-small: calc(var(--spacing-grid-size) * 1.5);
  position: relative;
  border-radius: var(--component-border-radius);
  box-shadow: var(--drop-shadow-theme-border), var(--drop-shadow-theme-elevation--x2);
}

.ax-context__content {
  position: relative;
  border-radius: var(--component-border-radius);
  background-color: var(--color-theme-background);
  color: var(--color-theme-text);
  overflow-y: auto;
  scroll-behavior: smooth;
}

.ax-context-content {
  position: relative;
  overflow: hidden
}

.ax-context--success .ax-context-content {
    background-color: var(--color-ui-success);
    color: var(--color-ui-white-noise)
}

.ax-context--warning .ax-context-content {
    background-color: var(--color-ui-warning);
    color: var(--color-ui-carbon)
}

.ax-context--error .ax-context-content {
    background-color: var(--color-ui-error);
    color: var(--color-ui-white-noise)
}

.ax-context--info .ax-context-content {
    background-color: var(--color-ui-info);
    color: var(--color-ui-white-noise)
}

.ax-context--carbon .ax-context-content {
    background-color: var(--color-ui-carbon);
    color: var(--color-ui-white-noise)
}

.ax-context--white .ax-context-content {
    background-color: var(--color-ui-white);
    color: var(--color-ui-carbon)
}

.ax-context-content--padding-horizontal-tiny {
  padding-right: var(--cmp-context-padding-horizontal-tiny);
  padding-left: var(--cmp-context-padding-horizontal-tiny);
}

.ax-context-content--padding-horizontal-small {
  padding-right: var(--cmp-context-padding-horizontal-small);
  padding-left: var(--cmp-context-padding-horizontal-small);
}

.ax-context-content--padding-horizontal-medium {
  padding-right: var(--cmp-context-padding-medium);
  padding-left: var(--cmp-context-padding-medium);
}

.ax-context-content--padding-horizontal-large {
  padding-right: var(--cmp-context-padding-large);
  padding-left: var(--cmp-context-padding-large);
}

.ax-context-content--padding-vertical-tiny {
  padding-top: var(--cmp-context-padding-vertical-tiny);
  padding-bottom: var(--cmp-context-padding-vertical-tiny);
}

.ax-context-content--padding-vertical-small {
  padding-top: var(--cmp-context-padding-vertical-small);
  padding-bottom: var(--cmp-context-padding-vertical-small);
}

.ax-context-content--padding-vertical-medium {
  padding-top: var(--cmp-context-padding-medium);
  padding-bottom: var(--cmp-context-padding-medium);
}

.ax-context-content--padding-vertical-large {
  padding-top: var(--cmp-context-padding-large);
  padding-bottom: var(--cmp-context-padding-large);
}

.ax-context-content + .ax-context-content::before {
  content: '';
  position: absolute;
  top: 0;
  border-top: var(--component-border-width) solid var(--color-theme-border);
}

.ax-context-content--padding-horizontal-medium::before {
  right: var(--cmp-context-padding-medium);
  left: var(--cmp-context-padding-medium);
}

.ax-context-content--padding-horizontal-none::before,
.ax-context-content--padding-horizontal-large::before {
  right: var(--cmp-context-padding-large);
  left: var(--cmp-context-padding-large);
}

.ax-context-content--full-separator::before {
  right: 0;
  left: 0;
}

.ax-context-content--scrollable .ax-context-content__scroll {
  overflow-y: auto;
}

.ax-context-menu {
  height: 100%;
}

.ax-context-menu--padding-vertical-none {
  padding-top: 0;
  padding-bottom: 0;
}

.ax-context-menu--padding-vertical-medium {
  padding-top: var(--cmp-context-tip-space);
  padding-bottom: var(--cmp-context-tip-space);
}

.ax-context-menu__item {
  display: flex;
  align-items: center;
  width: 100%;
  outline: 0;
  border: 0;
  background-color: var(--color-theme-background);
  color: var(--color-theme-text);
  text-align: left;
  transition-property: background-color, color;
  transition-duration: var(--transition-time-base);
  transition-timing-function: var(--transition-function);
}

.ax-context-menu__item--padding-vertical-medium {
  padding: var(--cmp-context-menu-item-padding-vertical) var(--cmp-context-padding-large);
}

.ax-context-menu__item--padding-vertical-small {
  padding: var(--cmp-context-menu-item-padding-vertical-small) var(--cmp-context-padding-large);
}

.ax-context-menu__item:focus {
  outline: 0;
  background-color: var(--color-theme-background--active);
  cursor: pointer;
}

.ax-context-menu__item:disabled {
  background-color: transparent;
  color: var(--color-theme-text--disabled);
  cursor: default;
}

.ax-context-menu__item-content {
  flex: 1 1 auto;
  overflow: hidden;
}

.ax-context-menu__item-checkbox {
  flex: 0 0 auto;
  margin-right: var(--spacing-grid-size--x2);
}

.ax-context-menu__item-icon {
  flex: 0 0 auto;
  margin-left: var(--spacing-grid-size--x2);
}

.ax-context-menu .ax-context-menu {
  padding: 0
}

.ax-context-menu .ax-context-menu .ax-context-menu__item {
    padding-left: calc(var(--spacing-grid-size) * 12);
  }

.ax-context-tip__arrow {
  --tip-size: 0.75rem;
  width: var(--tip-size);
  height: var(--tip-size)
}

.ax-position[data-popper-placement*='top'] .ax-context-tip__arrow { bottom: calc(var(--tip-size) * -0.5)
}

.ax-position[data-popper-placement*='bottom'] .ax-context-tip__arrow { top: calc(var(--tip-size) * -0.5)
}

.ax-position[data-popper-placement*='left'] .ax-context-tip__arrow { right: calc(var(--tip-size) * -0.5)
}

.ax-position[data-popper-placement*='right'] .ax-context-tip__arrow { left: calc(var(--tip-size) * -0.5)
}

.ax-context-tip__arrow::before {
  content: '';
  position: absolute;
  width: var(--tip-size);
  height: var(--tip-size);
  transform: rotate(45deg);
  box-shadow: var(--drop-shadow-theme-border), var(--drop-shadow-theme-elevation--x2);
  background-color: var(--color-theme-background);
  pointer-events: none
}

.ax-context-tip--faded .ax-context-tip__arrow::before { background-color: var(--color-theme-text)
}

.ax-context-tip--success .ax-context-tip__arrow::before { background-color: var(--color-ui-success)
}

.ax-context-tip--warning .ax-context-tip__arrow::before { background-color: var(--color-ui-warning)
}

.ax-context-tip--error .ax-context-tip__arrow::before { background-color: var(--color-ui-error)
}

.ax-context-tip--info .ax-context-tip__arrow::before { background-color: var(--color-ui-info)
}

.ax-context-tip--shade-1 .ax-context-tip__arrow::before { background-color: var(--color-theme-background--shade-1)
}

.ax-context-tip--shade-2 .ax-context-tip__arrow::before { background-color: var(--color-theme-background--shade-2)
}

.ax-context-tip--shade-3 .ax-context-tip__arrow::before { background-color: var(--color-theme-background--shade-3)
}

.ax-context-tip--shade-4 .ax-context-tip__arrow::before { background-color: var(--color-theme-background--shade-4)
}

.ax-context-tip--carbon .ax-context-tip__arrow::before { background-color: var(--color-ui-carbon)
}

.ax-context-tip--white .ax-context-tip__arrow::before { background-color: var(--color-ui-white)
}

.ax-link {
  color: inherit;
  font-style: inherit;
  text-decoration: inherit;
  transition-property: color;
  transition-duration: var(--transition-time-base);
  transition-timing-function: var(--transition-function)
}

.ax-link:hover,
  .ax-link:active {
    color: inherit;
    text-decoration: inherit;
    cursor: pointer;
  }

.ax-link:focus { outline: none; }

.ax-link--style-normal {
  color: var(--color-ui-accent)
}

.ax-link--style-normal:hover,
  .ax-link--style-normal:focus { color: var(--color-ui-accent--hover); }

.ax-link--style-normal:active { color: var(--color-ui-accent--active); }

.ax-link--style-body { color: var(--color-theme-text); }
.ax-link--style-subtle { color: var(--color-theme-text--subtle); }

.ax-link--style-body:hover,
  .ax-link--style-body:focus,
  .ax-link--style-subtle:hover,
  .ax-link--style-subtle:focus { color: var(--color-ui-accent--hover); }

.ax-link--style-body:active, .ax-link--style-subtle:active { color: var(--color-ui-accent--active); }

.ax-link--style-day {
  color: var(--color-theme-day-text--subtle)
}

.ax-link--style-day:hover,
  .ax-link--style-day:focus,
  .ax-link--style-day:active { color: var(--color-theme-day-text); }

.ax-link--style-night {
  color: var(--color-theme-night-text--subtle)
}

.ax-link--style-night:hover,
  .ax-link--style-night:focus,
  .ax-link--style-night:active { color: var(--color-theme-night-text); }

.ax-link--style-mono {
  color: var(--color-theme-text--subtle)
}

.ax-link--style-mono:hover,
  .ax-link--style-mono:focus,
  .ax-link--style-mono:active { color: var(--color-theme-text); }

.ax-input,
.ax-textarea {
  width: 100%;
  min-width: 0;
  color: inherit;
  appearance: none
}

.ax-input::placeholder, .ax-textarea::placeholder {
    opacity: 1;
    color: var(--color-theme-text--disabled);
  }

.ax-input:focus, .ax-textarea:focus {
    outline: none
  }

.ax-input:focus::placeholder, .ax-textarea:focus::placeholder {
      color: transparent;
    }

.ax-input__wrapper {
  display: flex;
  position: relative;
  flex: 1 1 auto;
  flex-direction: column;
}

.ax-input__wrapper--inline {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.ax-input__wrapper--inline .ax-input__icon-container {
  margin-left: var(--spacing-grid-size--x2);
}

.ax-input__hint-wrapper {
  display: flex;
  justify-content: flex-end;
}

.ax-input__hint-wrapper .ax-input__wrapper--label {
  flex-grow: 1;
}

.ax-input__hint {
  flex-shrink: 0;
}

.ax-input__wrapper--inline .ax-input__hint-wrapper {
  align-items: center;
}

.ax-input__wrapper--inline .ax-input__hint {
  margin-left: var(--spacing-grid-size--x1);
}

.ax-input__wrapper--target .ax-input {
  cursor: pointer;
}

.ax-checkbox,
.ax-radio {
  --cmp-input-checkbox-size: calc(var(--spacing-grid-size) * 4);
  --cmp-chedio-indicator-space: calc(var(--spacing-grid-size) * 2);
  --cmp-checkbox-thickness: calc(var(--cmp-input-checkbox-size) * 0.125);
  --cmp-checkbox-padding-top: calc(var(--cmp-input-checkbox-size) * 0.25);
  --cmp-checkbox-padding-bottom: calc(var(--cmp-input-checkbox-size) * 0.375);
  --cmp-checkbox-padding-horizontal: calc(var(--cmp-input-checkbox-size) * 0.25);
  --cmp-checkbox-indeterminate-top:
    calc(var(--cmp-input-checkbox-size) * 0.5 - var(--cmp-checkbox-thickness));
  --cmp-checkbox-indeterminate-horizontal: calc(var(--cmp-input-checkbox-size) * 0.2);
  display: flex;
  align-items: center;
  cursor: pointer;
}

.ax-checkbox--disabled,
.ax-radio--disabled {
  cursor: default;
}

.ax-checkbox__input,
.ax-radio__input {
  position: fixed;
  opacity: 0;
  z-index: -1;
}

.ax-checkbox__indicator,
.ax-radio__indicator {
  position: relative;
  width: var(--cmp-input-checkbox-size);
  height: var(--cmp-input-checkbox-size);
  border: var(--component-border-width) solid var(--color-theme-border);
  background-color: var(--color-theme-background);
  transition-property: background-color, border-color, color;
  transition-duration: var(--transition-time-base);
  transition-timing-function: var(--transition-function)
}

.ax-checkbox__indicator::before, .ax-radio__indicator::before {
    content: '';
  }

.ax-radio__indicator {
  border-radius: 50%
}

.ax-radio__indicator::before {
    position: absolute;
    top: calc(var(--cmp-input-checkbox-size) * 0.25);
    right: calc(var(--cmp-input-checkbox-size) * 0.25);
    bottom: calc(var(--cmp-input-checkbox-size) * 0.25);
    left: calc(var(--cmp-input-checkbox-size) * 0.25);
    border-radius: 50%;
    transition-property: background-color;
    transition-duration: var(--transition-time-base);
    transition-timing-function: var(--transition-function);
  }

.ax-checkbox__indicator {
  border-radius: var(--component-border-radius);
}

.ax-checkbox__label,
.ax-radio__label {
  margin-left: var(--cmp-chedio-indicator-space);
  transition-property: color;
  transition-duration: var(--transition-time-base);
  transition-timing-function: var(--transition-function);
}

.ax-checkbox__input:disabled + .ax-checkbox__indicator,
.ax-radio__input:disabled + .ax-radio__indicator {
  background-color: var(--color-theme-background--disabled);
}

.ax-checkbox__input:checked:enabled + .ax-checkbox__indicator,
.ax-radio__input:checked:enabled + .ax-radio__indicator {
  border-color: transparent;
  background-color: var(--color-ui-accent);
}

.ax-checkbox__input:disabled ~ .ax-checkbox__label,
.ax-radio__input:disabled ~ .ax-radio__label {
  color: var(--color-theme-text--disabled);
}

.ax-checkbox__input:active:enabled + .ax-checkbox__indicator,
.ax-radio__input:active:enabled + .ax-radio__indicator {
  border-color: rgba(var(--rgb-ui-accent), var(--opacity-input-border--focused));
}

.ax-checkbox--invalid .ax-checkbox__input:enabled + .ax-checkbox__indicator,
.ax-checkbox--invalid .ax-checkbox__input:focus + .ax-checkbox__indicator,
.ax-radio--invalid .ax-radio__input:enabled + .ax-radio__indicator,
.ax-radio--invalid .ax-radio__input:focus + .ax-radio__indicator {
  border-color: rgba(var(--rgb-ui-error), var(--opacity-input-border--invalid));
}

.ax-checkbox--invalid .ax-checkbox__input:checked:enabled + .ax-checkbox__indicator,
.ax-radio--invalid .ax-radio__input:checked:enabled + .ax-radio__indicator {
  background-color: var(--color-ui-error);
}

.ax-checkbox--invalid .ax-checkbox__input:active:enabled + .ax-checkbox__indicator,
.ax-radio--invalid .ax-radio__input:active:enabled + .ax-radio__indicator {
  border-color: rgba(var(--rgb-ui-error), var(--opacity-input-border--focused));
}

.ax-checkbox--invalid .ax-checkbox__input:enabled ~ .ax-checkbox__label,
.ax-radio--invalid .ax-radio__input:enabled ~ .ax-radio__label {
  color: var(--color-ui-error);
}

.ax-checkbox__input:checked:active:enabled + .ax-checkbox__indicator,
.ax-radio__input:checked:active:enabled + .ax-radio__indicator {
  background-color: var(--color-theme-background);
}

/* stylelint-disable no-duplicate-selectors */
.ax-radio__input + .ax-radio__indicator::before { background-color: transparent
}
.ax-radio__input:checked + .ax-radio__indicator::before { background-color: var(--color-ui-white-noise)
}
.ax-radio__input:checked:active:enabled + .ax-radio__indicator::before { background-color: var(--color-ui-accent)
}
.ax-radio__input:disabled + .ax-radio__indicator::before { background-color: transparent
}
.ax-radio__input:disabled:checked + .ax-radio__indicator::before {
    background-color: var(--color-theme-border)
}
.ax-radio--invalid .ax-radio__input:checked + .ax-radio__indicator::before {
    border-color: var(--color-ui-error)
}
.ax-radio--invalid .ax-radio__input:checked:active:enabled + .ax-radio__indicator::before {
    background-color: var(--color-ui-error)
}

.ax-checkbox--disabled .tick {
  stroke: var(--color-theme-border);
}

.ax-checkbox--disabled .indeterminate {
  fill: var(--color-theme-border);
}

.ax-progress-infinite__arc {
  fill: none;
  animation: spin 1s linear infinite;
}

.ax-progress-infinite__arc-gradient-stop--subtle {
  stop-color: var(--color-theme-background--subtle);
}

.ax-progress-infinite__arc-gradient-stop--white {
  stop-color: var(--color-ui-white-noise--dark);
}

.ax-progress-infinite__arc-gradient-stop--subtle:last-of-type,
.ax-progress-infinite__arc-gradient-stop--white:last-of-type {
  stop-opacity: 0;
}

.ax-alert-bar {
  padding-right: var(--page-padding-horizontal);
  padding-left: var(--page-padding-horizontal);
}

.ax-alert-bar--small {
  padding-top: var(--spacing-grid-size--x2);
  padding-bottom: var(--spacing-grid-size--x2);
}

.ax-alert-bar--medium {
  padding-top: var(--spacing-grid-size--x3);
  padding-bottom: var(--spacing-grid-size--x3);
}

.ax-alert-bar--success { background-color: var(--color-ui-success); }
.ax-alert-bar--warning { background-color: var(--color-ui-warning); }
.ax-alert-bar--error   { background-color: var(--color-ui-error); }
.ax-alert-bar--info    { background-color: var(--color-ui-info); }

.ax-grid {
  --cmp-grid-gutter-size-tiny: calc(var(--spacing-grid-size) * 2);
  --cmp-grid-gutter-size-small: calc(var(--spacing-grid-size) * 4);
  --cmp-grid-gutter-size-medium: calc(var(--spacing-grid-size) * 6);
  --cmp-grid-gutter-size-large: calc(var(--spacing-grid-size) * 8);
  display: flex;
}

.ax-grid__cell {
  flex: 1 1 0%;
  min-width: 0;
}

.ax-grid--wrap { flex-wrap: wrap; }

.ax-grid--vertical-start  { align-items: flex-start; }
.ax-grid--vertical-middle { align-items: center; }
.ax-grid--vertical-end    { align-items: flex-end; }

.ax-grid--horizontal-start    { justify-content: flex-start; }
.ax-grid--horizontal-middle   { justify-content: center; }
.ax-grid--horizontal-end      { justify-content: flex-end; }
.ax-grid--horizontal-around   { justify-content: space-around; }
.ax-grid--horizontal-between  { justify-content: space-between; }

.ax-grid--columns { flex-direction: column; }

.ax-grid__cell--start  { align-self: flex-start; }
.ax-grid__cell--middle { align-self: center; }
.ax-grid__cell--end    { align-self: flex-end; }

.ax-grid--gutters-horizontal--tiny   { margin-left: calc(var(--cmp-grid-gutter-size-tiny) * -1); }
.ax-grid--gutters-horizontal--small  { margin-left: calc(var(--cmp-grid-gutter-size-small) * -1); }
.ax-grid--gutters-horizontal--medium { margin-left: calc(var(--cmp-grid-gutter-size-medium) * -1); }
.ax-grid--gutters-horizontal--large  { margin-left: calc(var(--cmp-grid-gutter-size-large) * -1); }

.ax-grid--gutters-vertical--tiny   { margin-bottom: calc(var(--cmp-grid-gutter-size-tiny) * -1); }
.ax-grid--gutters-vertical--small  { margin-bottom: calc(var(--cmp-grid-gutter-size-small) * -1); }
.ax-grid--gutters-vertical--medium { margin-bottom: calc(var(--cmp-grid-gutter-size-medium) * -1); }
.ax-grid--gutters-vertical--large  { margin-bottom: calc(var(--cmp-grid-gutter-size-large) * -1); }

.ax-grid--gutters-horizontal--tiny > .ax-grid__cell   { padding-left: var(--cmp-grid-gutter-size-tiny); }
.ax-grid--gutters-horizontal--small > .ax-grid__cell  { padding-left: var(--cmp-grid-gutter-size-small); }
.ax-grid--gutters-horizontal--medium > .ax-grid__cell { padding-left: var(--cmp-grid-gutter-size-medium); }
.ax-grid--gutters-horizontal--large > .ax-grid__cell  { padding-left: var(--cmp-grid-gutter-size-large); }

.ax-grid--gutters-vertical--tiny > .ax-grid__cell   { padding-bottom: var(--cmp-grid-gutter-size-tiny); }
.ax-grid--gutters-vertical--small > .ax-grid__cell  { padding-bottom: var(--cmp-grid-gutter-size-small); }
.ax-grid--gutters-vertical--medium > .ax-grid__cell { padding-bottom: var(--cmp-grid-gutter-size-medium); }
.ax-grid--gutters-vertical--large > .ax-grid__cell  { padding-bottom: var(--cmp-grid-gutter-size-large); }

.ax-grid__cell--fill    { flex: 1 1 auto; }
.ax-grid__cell--fit     { flex: 1 1 0%; }
.ax-grid__cell--full    { flex: 1 1 100%; }
.ax-grid__cell--none    { flex: 0 0 auto; }
.ax-grid__cell--shrink  { flex: 0 1 auto; }
.ax-grid__cell--sub-grid { display: flex; }

.ax-grid--fill > .ax-grid__cell   { flex: 1 1 auto; }
.ax-grid--fit > .ax-grid__cell    { flex: 1 1 0%; }
.ax-grid--full > .ax-grid__cell   { flex: 1 1 100%; }
.ax-grid--none > .ax-grid__cell   { flex: 0 0 auto; }
.ax-grid--shrink > .ax-grid__cell { flex: 0 1 auto; }

@media (min-width: 48rem) {
  .ax-grid__cell--fill--small    { flex: 1 1 auto; }
  .ax-grid__cell--fit--small     { flex: 1 1 0%; }
  .ax-grid__cell--full--small    { flex: 1 1 100%; }
  .ax-grid__cell--none--small    { flex: 0 0 auto; }
  .ax-grid__cell--shrink--small  { flex: 0 1 auto; }

  .ax-grid--fill--small > .ax-grid__cell   { flex: 1 1 auto; }
  .ax-grid--fit--small > .ax-grid__cell    { flex: 1 1 0%; }
  .ax-grid--full--small > .ax-grid__cell   { flex: 1 1 100%; }
  .ax-grid--none--small > .ax-grid__cell   { flex: 0 0 auto; }
  .ax-grid--shrink--small > .ax-grid__cell { flex: 0 1 auto; }
}

@media (min-width: 62rem) {
  .ax-grid__cell--fill--medium    { flex: 1 1 auto; }
  .ax-grid__cell--fit--medium     { flex: 1 1 0%; }
  .ax-grid__cell--full--medium    { flex: 1 1 100%; }
  .ax-grid__cell--none--medium    { flex: 0 0 auto; }
  .ax-grid__cell--shrink--medium  { flex: 0 1 auto; }

  .ax-grid--fill--medium > .ax-grid__cell   { flex: 1 1 auto; }
  .ax-grid--fit--medium > .ax-grid__cell    { flex: 1 1 0%; }
  .ax-grid--full--medium > .ax-grid__cell   { flex: 1 1 100%; }
  .ax-grid--none--medium > .ax-grid__cell   { flex: 0 0 auto; }
  .ax-grid--shrink--medium > .ax-grid__cell { flex: 0 1 auto; }
}

@media (min-width: 75rem) {
  .ax-grid__cell--fill--large    { flex: 1 1 auto; }
  .ax-grid__cell--fit--large     { flex: 1 1 0%; }
  .ax-grid__cell--full--large    { flex: 1 1 100%; }
  .ax-grid__cell--none--large    { flex: 0 0 auto; }
  .ax-grid__cell--shrink--large  { flex: 0 1 auto; }

  .ax-grid--fill--large > .ax-grid__cell   { flex: 1 1 auto; }
  .ax-grid--fit--large > .ax-grid__cell    { flex: 1 1 0%; }
  .ax-grid--full--large > .ax-grid__cell   { flex: 1 1 100%; }
  .ax-grid--none--large > .ax-grid__cell   { flex: 0 0 auto; }
  .ax-grid--shrink--large > .ax-grid__cell { flex: 0 1 auto; }
}

@media (max-width: 47.9375rem) {
  .ax-grid--responsive > .ax-grid__cell {
    flex: 1 1 100%;
  }
}

.ax-alert-icon {
  display: flex;
  align-items: center;
  margin-right: auto;
  margin-left: auto;
  border-radius: 50%;
  line-height: 0;
}

.ax-alert-icon--tiny {
  width: var(--component-round-size-tiny);
  height: var(--component-round-size-tiny);
}

.ax-alert-icon--small {
  width: var(--component-round-size-small);
  height: var(--component-round-size-small);
}

.ax-alert-icon--medium {
  width: var(--component-round-size-medium);
  height: var(--component-round-size-medium);
}

.ax-alert-icon--large {
  width: var(--component-round-size-large);
  height: var(--component-round-size-large);
}

.ax-alert-icon--primary {
  color: var(--color-ui-white-noise)
}

.ax-alert-icon--primary.ax-alert-icon--success { background-color: var(--color-ui-success); }

.ax-alert-icon--primary.ax-alert-icon--warning { background-color: var(--color-ui-warning); }

.ax-alert-icon--primary.ax-alert-icon--error { background-color: var(--color-ui-error); }

.ax-alert-icon--primary.ax-alert-icon--info { background-color: var(--color-ui-info); }

.ax-alert-icon--secondary {
  background-color: var(--color-theme-background--active)
}

.ax-alert-icon--secondary.ax-alert-icon--success { color: var(--color-ui-success); }

.ax-alert-icon--secondary.ax-alert-icon--warning { color: var(--color-ui-warning); }

.ax-alert-icon--secondary.ax-alert-icon--error { color: var(--color-ui-error); }

.ax-alert-icon--secondary.ax-alert-icon--info { color: var(--color-ui-info); }

.ax-alert-icon--subtle {
  background-color: var(--color-theme-background--overlay-light);
  color: var(--color-ui-white-noise);
}

.ax-progress-button {
  position: relative;
}

.ax-progress-button__indicator {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  transform-origin: center;
  transition-property: transform;
  transition-duration: var(--transition-time-base);
  transition-timing-function: var(--transition-function)
}

.ax-progress-button--in-progress .ax-progress-button__indicator {
    transform: translate(-50%, -50%) scale(1)
}

.ax-progress-button__content {
  display: flex;
}

.ax-separator {
  width: 100%;
  border-color: var(--color-theme-border);
}

.ax-separator--solid {
  border-style: solid;
}

.ax-separator--dotted {
  border-style: dotted;
}

.ax-separator--horizontal {
  border-width: var(--component-border-width-small) 0 0 0;
}

.ax-separator--vertical {
  width: 0;
  height: 100%;
  border-width: 0 var(--component-border-width-small) 0 0;
}

.ax-toggle {
  --ax-toggle-knob-color: var(--color-ui-white);
  --ax-toggle-border-width: 0.0625rem;
  --ax-toggle-size--small: var(--spacing-grid-size--x4);
  --ax-toggle-size--medium: var(--spacing-grid-size--x6);
  --ax-toggle-diameter--small: calc(var(--ax-toggle-size--small) - var(--ax-toggle-border-width) * 2);
  --ax-toggle-diameter--medium: calc(var(--ax-toggle-size--medium) - var(--ax-toggle-border-width) * 2);
  display: flex;
  align-items: center;
  -webkit-user-select: none;
          user-select: none;
}

.ax-toggle--enabled {
  cursor: pointer;
}

.ax-toggle__switch {
  display: flex;
  position: relative;
}

.ax-toggle__label {
  margin-right: calc(var(--spacing-grid-size) * 2);
}

.ax-toggle__input {
  position: absolute;
  opacity: 0;
  cursor: inherit;
}

.ax-toggle__appearance {
  background-color: var(--color-theme-background--subtle);
  transition: background-color var(--transition-time-base) var(--transition-function)
}

.ax-toggle__appearance::after {
    content: '';
    position: absolute;
    top: var(--ax-toggle-border-width);
    left: var(--ax-toggle-border-width);
    border: var(--ax-toggle-border-width) solid var(--ax-toggle-knob-color);
    border-radius: 50%;
    box-shadow: 0.1rem 0 0.25rem 0 rgba(var(--rgb-ui-carbon--dark), 0.3);
    background-color: var(--ax-toggle-knob-color);
    transition-property: background-color, border-color, box-shadow, transform;
    transition-duration: var(--transition-time-base);
    transition-timing-function: var(--transition-function);
  }

.ax-toggle--small .ax-toggle__input,
  .ax-toggle--small .ax-toggle__appearance {
    width: calc(var(--ax-toggle-size--small) * 2);
    height: var(--ax-toggle-size--small);
    border-radius: var(--ax-toggle-size--small);
  }

.ax-toggle--small .ax-toggle__appearance::after {
    width: var(--ax-toggle-diameter--small);
    height: var(--ax-toggle-diameter--small);
  }

.ax-toggle--medium .ax-toggle__input,
  .ax-toggle--medium .ax-toggle__appearance {
    width: calc(var(--ax-toggle-size--medium) * 2);
    height: var(--ax-toggle-size--medium);
    border-radius: var(--ax-toggle-size--medium);
  }

.ax-toggle--medium .ax-toggle__appearance::after {
    width: var(--ax-toggle-diameter--medium);
    height: var(--ax-toggle-diameter--medium);
  }

.ax-toggle--align-left {
  justify-content: flex-start;
}

.ax-toggle--align-right {
  justify-content: flex-end;
}

.ax-toggle--align-full {
  justify-content: space-between;
}

.ax-toggle__input:checked + .ax-toggle__appearance {
    background-color: var(--color-ui-accent)
  }

.ax-toggle__input:checked + .ax-toggle__appearance::after {
      transform: translateX(calc(100% + var(--ax-toggle-border-width) * 2));
      box-shadow: 0 0 0.25rem 0 rgba(var(--rgb-ui-carbon--dark), 0.3);
    }

.ax-toggle__input:disabled + .ax-toggle__appearance {
    background-color: var(--color-theme-background--subtle)
  }

.ax-toggle__input:disabled + .ax-toggle__appearance::after {
      border-color: var(--color-theme-border);
      box-shadow: 0 0 0.25rem 0 rgba(var(--rgb-ui-carbon--dark), 0);
      background-color: transparent;
    }

/* stylelint-disable no-descending-specificity */
.ax-card {
  color: var(--color-theme-text);
  overflow: hidden;
  transition-property: background-color, box-shadow;
  transition-duration: var(--transition-time-base);
  transition-timing-function: var(--transition-function)
}
.ax-card:focus {
    outline: none;
  }
.ax-card-list--divided .ax-card {
    border-bottom: 0.0625rem dotted var(--color-theme-border);
    border-radius: 0
}

.ax-card--border {
  box-shadow: var(--drop-shadow-theme-border);
}

.ax-card--border-radius-small {
  border-radius: var(--component-border-radius);
}

.ax-card--border-radius-large {
  border-radius: var(--component-border-radius-large);
}

.ax-card--hover.ax-card--shadow,
.ax-card--clickable:focus.ax-card--shadow,
.ax-card--clickable:hover.ax-card--shadow {
  box-shadow: var(--drop-shadow-theme-elevation--x2);
}

.ax-card--hover.ax-card--border.ax-card--shadow,
.ax-card--clickable:focus.ax-card--border.ax-card--shadow,
.ax-card--clickable:hover.ax-card--border.ax-card--shadow {
  box-shadow:
    var(--drop-shadow-theme-border),
    var(--drop-shadow-theme-elevation--x2);
}

.ax-card--shadow,
.ax-card--active.ax-card--shadow,
.ax-card--clickable:active.ax-card--shadow {
  box-shadow: var(--drop-shadow-theme-elevation--x1);
}

.ax-card--border.ax-card--shadow,
.ax-card--active.ax-card--border.ax-card--shadow,
.ax-card--clickable:active.ax-card--border.ax-card--shadow {
  box-shadow:
    var(--drop-shadow-theme-border),
    var(--drop-shadow-theme-elevation--x1);
}

.ax-card--shade-1 { background-color: var(--color-theme-background--shade-1); }
.ax-card--shade-2 { background-color: var(--color-theme-background--shade-2); }
.ax-card--shade-3 { background-color: var(--color-theme-background--shade-3); }
.ax-card--shade-4 { background-color: var(--color-theme-background--shade-4); }

.ax-card--clickable {
  cursor: pointer;
}

.ax-card__content {
  position: relative;
  transition-property: background-color;
  transition-duration: var(--transition-time-base);
  transition-timing-function: var(--transition-function);
}

.ax-card__content--size-small {
  padding-top: var(--spacing-grid-size--x3);
  padding-bottom: var(--spacing-grid-size--x3);
}

.ax-card__content--size-medium {
  padding-top: var(--spacing-grid-size--x4);
  padding-bottom: var(--spacing-grid-size--x4);
}

.ax-card__content--size-large {
  padding-top: var(--spacing-grid-size--x6);
  padding-bottom: var(--spacing-grid-size--x6);
}

.ax-card__content--shade-1 { background-color: var(--color-theme-background--shade-1); }
.ax-card__content--shade-2 { background-color: var(--color-theme-background--shade-2); }
.ax-card__content--shade-3 { background-color: var(--color-theme-background--shade-3); }
.ax-card__content--shade-4 { background-color: var(--color-theme-background--shade-4); }

.ax-card--hover:not(.ax-card--shadow) .ax-card__content,
.ax-card--clickable:not(.ax-card--shadow):focus .ax-card__content,
.ax-card--clickable:not(.ax-card--shadow):hover .ax-card__content {
  background-color: var(--color-theme-background--hover);
}

.ax-card--active:not(.ax-card--shadow) .ax-card__content,
.ax-card--clickable:not(.ax-card--shadow):active .ax-card__content {
  background-color: var(--color-theme-background--active);
}

.ax-card__content:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  border-bottom-width: 0.0625rem;
  border-bottom-color: var(--color-theme-border);
}

.ax-card__content--separator-dotted::after { border-bottom-style: dotted; }
.ax-card__content--separator-solid::after { border-bottom-style: solid; }

.ax-card__image,
.ax-card__images {
  position: relative;
  border-bottom: 0.0625rem dotted var(--color-theme-border);
}

.ax-card__images--ratio {
  height: 0;
}

.ax-card__images-grid {
  display: grid;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  grid-gap: 0.125rem;
}

.ax-card__images-grid-item {
  background-position: center;
  background-size: cover;
}

.ax-card__images--2 .ax-card__images-grid-item:last-child { grid-column-start: 2; }

.ax-card__images--3 .ax-card__images-grid-item:nth-child(1) { grid-row-end: span 2; }

.ax-card__images--3 .ax-card__images-grid-item:nth-child(2) { grid-column-start: 2; }

.ax-card__images--3 .ax-card__images-grid-item:nth-child(3) { grid-column-start: 2; grid-row-start: 2; }

.ax-card__images--4 .ax-card__images-grid-item:nth-child(2) { grid-column-start: 2; }

.ax-card__images--4 .ax-card__images-grid-item:nth-child(3) { grid-row-start: 2; }

.ax-card__images--4 .ax-card__images-grid-item:nth-child(4) { grid-column-start: 2; grid-row-start: 2; }

.ax-card__caption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding-top: var(--spacing-grid-size--x2);
  padding-bottom: var(--spacing-grid-size--x2);
  background-color: var(--color-theme-day-background--overlay-heavy);
  color: var(--color-theme-night-text);
}

.ax-card--size-small .ax-card__caption,
  .ax-card--size-small .ax-card__content {
    padding-right: var(--spacing-grid-size--x3);
    padding-left: var(--spacing-grid-size--x3);
  }

.ax-card--size-small .ax-card__content--separator-indented::after {
    right: var(--spacing-grid-size--x3);
    left: var(--spacing-grid-size--x3);
  }

.ax-card--size-medium .ax-card__caption,
  .ax-card--size-medium .ax-card__content {
    padding-right: var(--spacing-grid-size--x4);
    padding-left: var(--spacing-grid-size--x4);
  }

.ax-card--size-medium .ax-card__content--separator-indented::after {
    right: var(--spacing-grid-size--x4);
    left: var(--spacing-grid-size--x4);
  }

.ax-card--size-large .ax-card__caption,
  .ax-card--size-large .ax-card__content {
    padding-right: var(--spacing-grid-size--x6);
    padding-left: var(--spacing-grid-size--x6);
  }

.ax-card--size-large .ax-card__content--separator-indented::after {
    right: var(--spacing-grid-size--x6);
    left: var(--spacing-grid-size--x6);
  }

.ax-list--style-inline {
  --cmp-list-item-spacing: calc(var(--spacing-grid-size) * 3);
  padding: 0;
  list-style: none
}

.ax-list--style-inline .ax-list__item {
    display: inline-block;
    margin: 0 var(--cmp-list-item-spacing) 0 0;
    padding: 0 var(--cmp-list-item-spacing) 0 0;
    border-right: var(--component-border-width) solid var(--color-theme-border);
    vertical-align: middle
  }

.ax-list--style-inline .ax-list__item:last-child  {
      margin-right: 0;
      padding-right: 0;
      border-right-width: 0;
    }

.ax-list--style-none {
  padding: 0;
  list-style: none;
}

.ax-alert-card {
  display: flex;
}

.ax-alert-card__icon {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  border-right: var(--component-border-width) solid var(--color-theme-border);
}

.ax-alert-card__remove {
  flex: 0 0 auto;
  align-self: center;
}

.ax-alert-card__content {
  flex: 1 1 0%;
  align-self: center;
  color: var(--color-theme-text--subtle);
}

.ax-alert-card--small .ax-alert-card__icon {
    margin-right: var(--spacing-grid-size--x3);
    padding-right: var(--spacing-grid-size--x3);
  }

.ax-alert-card--small .ax-alert-card__remove {
    margin-left: var(--spacing-grid-size--x3);
  }

.ax-alert-card--medium .ax-alert-card__icon {
    margin-right: var(--spacing-grid-size--x4);
    padding-right: var(--spacing-grid-size--x4);
  }

.ax-alert-card--medium .ax-alert-card__remove {
    margin-left: var(--spacing-grid-size--x4);
  }

.ax-alert-card--large .ax-alert-card__icon {
    margin-right: var(--spacing-grid-size--x6);
    padding-right: var(--spacing-grid-size--x6);
  }

.ax-alert-card--large .ax-alert-card__remove {
    margin-left: var(--spacing-grid-size--x6);
  }

.ax-reveal {
  transition-property: height, opacity, margin;
  transition-duration: var(--transition-time-slow);
  transition-timing-function: var(--transition-function);
}

.ax-reveal__inner {
  transform: translateY(25%);
  transition-property: transform;
  transition-duration: var(--transition-time-slow);
  transition-timing-function: var(--transition-function);
}

.ax-reveal--visible .ax-reveal__inner {
  transform: translateY(0%);
}

.ax-color-picker__option {
  --cmp-color-picker-border-width: 0.1875rem;
  border-width: var(--cmp-color-picker-border-width);
  border-radius: 50%;
  transition-property: background-color, border-color;
  transition-duration: var(--transition-time-base);
  transition-timing-function: var(--transition-function);
}

.ax-color-picker__option--forbidden-planet { background-color: var(--color-product-forbidden-planet); }
.ax-color-picker__option--tiny-clanger { background-color: var(--color-product-tiny-clanger); }
.ax-color-picker__option--critical-mass { background-color: var(--color-product-critical-mass); }
.ax-color-picker__option--fantastic-voyage { background-color: var(--color-product-fantastic-voyage); }
.ax-color-picker__option--paradise-lost { background-color: var(--color-product-paradise-lost); }
.ax-color-picker__option--serene-sea { background-color: var(--color-product-serene-sea); }
.ax-color-picker__option--event-horizon { background-color: var(--color-product-event-horizon); }
.ax-color-picker__option--electric-dreams { background-color: var(--color-product-electric-dreams); }
.ax-color-picker__option--outer-limits { background-color: var(--color-product-outer-limits); }
.ax-color-picker__option--giant-leap { background-color: var(--color-product-giant-leap); }
.ax-color-picker__option--moon-lagoon { background-color: var(--color-product-moon-lagoon); }
.ax-color-picker__option--space-invader { background-color: var(--color-product-space-invader); }
.ax-color-picker__option--extraterrestrial { background-color: var(--color-product-extraterrestrial); }
.ax-color-picker__option--terra-form { background-color: var(--color-product-terra-form); }
.ax-color-picker__option--primeval-soup { background-color: var(--color-product-primeval-soup); }
.ax-color-picker__option--future-shock { background-color: var(--color-product-future-shock); }
.ax-color-picker__option--sun-maker { background-color: var(--color-product-sun-maker); }
.ax-color-picker__option--new-horizon { background-color: var(--color-product-new-horizon); }
.ax-color-picker__option--blast-off { background-color: var(--color-product-blast-off); }
.ax-color-picker__option--crash-course { background-color: var(--color-product-crash-course); }
.ax-color-picker__option--solar-rust { background-color: var(--color-product-solar-rust); }
.ax-color-picker__option--ground-control { background-color: var(--color-product-ground-control); }
.ax-color-picker__option--space-oddity { background-color: var(--color-product-space-oddity); }
.ax-color-picker__option--rocky-planet { background-color: var(--color-product-rocky-planet); }
.ax-color-picker__option--deep-thought { background-color: var(--color-product-deep-thought); }
.ax-color-picker__option--luna-dust { background-color: var(--color-product-luna-dust); }

.ax-color-picker__option--empty {
  border: solid var(--color-theme-background--subtle);
}

.ax-color-picker__option--disabled {
  border: solid var(--component-border-width-small) var(--color-theme-background--subtle);
  background-color: transparent;
}

.ax-color-picker__option--clickable {
  cursor: pointer
}

.ax-color-picker__option--clickable.ax-color-picker__option--forbidden-planet:hover  { background-color: var(--color-product-forbidden-planet--hover); }

.ax-color-picker__option--clickable.ax-color-picker__option--forbidden-planet:active { background-color: var(--color-product-forbidden-planet--active); }

.ax-color-picker__option--clickable.ax-color-picker__option--tiny-clanger:hover  { background-color: var(--color-product-tiny-clanger--hover); }

.ax-color-picker__option--clickable.ax-color-picker__option--tiny-clanger:active { background-color: var(--color-product-tiny-clanger--active); }

.ax-color-picker__option--clickable.ax-color-picker__option--critical-mass:hover  { background-color: var(--color-product-critical-mass--hover); }

.ax-color-picker__option--clickable.ax-color-picker__option--critical-mass:active { background-color: var(--color-product-critical-mass--active); }

.ax-color-picker__option--clickable.ax-color-picker__option--fantastic-voyage:hover  { background-color: var(--color-product-fantastic-voyage--hover); }

.ax-color-picker__option--clickable.ax-color-picker__option--fantastic-voyage:active { background-color: var(--color-product-fantastic-voyage--active); }

.ax-color-picker__option--clickable.ax-color-picker__option--paradise-lost:hover  { background-color: var(--color-product-paradise-lost--hover); }

.ax-color-picker__option--clickable.ax-color-picker__option--paradise-lost:active { background-color: var(--color-product-paradise-lost--active); }

.ax-color-picker__option--clickable.ax-color-picker__option--serene-sea:hover  { background-color: var(--color-product-serene-sea--hover); }

.ax-color-picker__option--clickable.ax-color-picker__option--serene-sea:active { background-color: var(--color-product-serene-sea--active); }

.ax-color-picker__option--clickable.ax-color-picker__option--event-horizon:hover  { background-color: var(--color-product-event-horizon--hover); }

.ax-color-picker__option--clickable.ax-color-picker__option--event-horizon:active { background-color: var(--color-product-event-horizon--active); }

.ax-color-picker__option--clickable.ax-color-picker__option--electric-dreams:hover  { background-color: var(--color-product-electric-dreams--hover); }

.ax-color-picker__option--clickable.ax-color-picker__option--electric-dreams:active { background-color: var(--color-product-electric-dreams--active); }

.ax-color-picker__option--clickable.ax-color-picker__option--outer-limits:hover  { background-color: var(--color-product-outer-limits--hover); }

.ax-color-picker__option--clickable.ax-color-picker__option--outer-limits:active { background-color: var(--color-product-outer-limits--active); }

.ax-color-picker__option--clickable.ax-color-picker__option--giant-leap:hover  { background-color: var(--color-product-giant-leap--hover); }

.ax-color-picker__option--clickable.ax-color-picker__option--giant-leap:active { background-color: var(--color-product-giant-leap--active); }

.ax-color-picker__option--clickable.ax-color-picker__option--moon-lagoon:hover  { background-color: var(--color-product-moon-lagoon--hover); }

.ax-color-picker__option--clickable.ax-color-picker__option--moon-lagoon:active { background-color: var(--color-product-moon-lagoon--active); }

.ax-color-picker__option--clickable.ax-color-picker__option--space-invader:hover  { background-color: var(--color-product-space-invader--hover); }

.ax-color-picker__option--clickable.ax-color-picker__option--space-invader:active { background-color: var(--color-product-space-invader--active); }

.ax-color-picker__option--clickable.ax-color-picker__option--extraterrestrial:hover  { background-color: var(--color-product-extraterrestrial--hover); }

.ax-color-picker__option--clickable.ax-color-picker__option--extraterrestrial:active { background-color: var(--color-product-extraterrestrial--active); }

.ax-color-picker__option--clickable.ax-color-picker__option--terra-form:hover  { background-color: var(--color-product-terra-form--hover); }

.ax-color-picker__option--clickable.ax-color-picker__option--terra-form:active { background-color: var(--color-product-terra-form--active); }

.ax-color-picker__option--clickable.ax-color-picker__option--primeval-soup:hover  { background-color: var(--color-product-primeval-soup--hover); }

.ax-color-picker__option--clickable.ax-color-picker__option--primeval-soup:active { background-color: var(--color-product-primeval-soup--active); }

.ax-color-picker__option--clickable.ax-color-picker__option--future-shock:hover  { background-color: var(--color-product-future-shock--hover); }

.ax-color-picker__option--clickable.ax-color-picker__option--future-shock:active { background-color: var(--color-product-future-shock--active); }

.ax-color-picker__option--clickable.ax-color-picker__option--sun-maker:hover  { background-color: var(--color-product-sun-maker--hover); }

.ax-color-picker__option--clickable.ax-color-picker__option--sun-maker:active { background-color: var(--color-product-sun-maker--active); }

.ax-color-picker__option--clickable.ax-color-picker__option--new-horizon:hover  { background-color: var(--color-product-new-horizon--hover); }

.ax-color-picker__option--clickable.ax-color-picker__option--new-horizon:active { background-color: var(--color-product-new-horizon--active); }

.ax-color-picker__option--clickable.ax-color-picker__option--blast-off:hover  { background-color: var(--color-product-blast-off--hover); }

.ax-color-picker__option--clickable.ax-color-picker__option--blast-off:active { background-color: var(--color-product-blast-off--active); }

.ax-color-picker__option--clickable.ax-color-picker__option--crash-course:hover  { background-color: var(--color-product-crash-course--hover); }

.ax-color-picker__option--clickable.ax-color-picker__option--crash-course:active { background-color: var(--color-product-crash-course--active); }

.ax-color-picker__option--clickable.ax-color-picker__option--solar-rust:hover  { background-color: var(--color-product-solar-rust--hover); }

.ax-color-picker__option--clickable.ax-color-picker__option--solar-rust:active { background-color: var(--color-product-solar-rust--active); }

.ax-color-picker__option--clickable.ax-color-picker__option--ground-control:hover  { background-color: var(--color-product-ground-control--hover); }

.ax-color-picker__option--clickable.ax-color-picker__option--ground-control:active { background-color: var(--color-product-ground-control--active); }

.ax-color-picker__option--clickable.ax-color-picker__option--space-oddity:hover  { background-color: var(--color-product-space-oddity--hover); }

.ax-color-picker__option--clickable.ax-color-picker__option--space-oddity:active { background-color: var(--color-product-space-oddity--active); }

.ax-color-picker__option--clickable.ax-color-picker__option--rocky-planet:hover  { background-color: var(--color-product-rocky-planet--hover); }

.ax-color-picker__option--clickable.ax-color-picker__option--rocky-planet:active { background-color: var(--color-product-rocky-planet--active); }

.ax-color-picker__option--clickable.ax-color-picker__option--deep-thought:hover  { background-color: var(--color-product-deep-thought--hover); }

.ax-color-picker__option--clickable.ax-color-picker__option--deep-thought:active { background-color: var(--color-product-deep-thought--active); }

.ax-color-picker__option--clickable.ax-color-picker__option--luna-dust:hover  { background-color: var(--color-product-luna-dust--hover); }

.ax-color-picker__option--clickable.ax-color-picker__option--luna-dust:active { background-color: var(--color-product-luna-dust--active); }

.ax-color-picker__option--clickable.ax-color-picker__option--empty:hover  { border-color: var(--color-theme-background--hover); }

.ax-color-picker__option--clickable.ax-color-picker__option--empty:active { border-color: var(--color-theme-background--active); }

.ax-image {
  display: block;
  margin-right: auto;
  margin-left: auto;
  border: 0 solid var(--color-theme-border);
}

.ax-image--circle  { border-radius: 50%; }
.ax-image--rounded { border-radius: var(--component-border-radius); }
.ax-image--square  { border-radius: 0; }

.ax-image--border-small { border-width: var(--component-border-width-small); }
.ax-image--border-large { border-width: var(--component-border-width-large); }

@keyframes ax-animicon-tick {
  100%{ stroke-dashoffset: 0; }
}

.ax-animicon--tick {
  stroke-dasharray: 14;
  stroke-dashoffset: 14;
  animation-duration: var(--transition-time-base);
  animation-fill-mode: forwards;
  animation-timing-function: var(--transition-function);
}

.ax-animicon--tick-in {
  animation-name: ax-animicon-tick;
}

@keyframes ax-animicon-cross {
  100%{ stroke-dashoffset: 0; }
}

.ax-animicon--cross {
  stroke-dasharray: 25;
  stroke-dashoffset: 25;
  animation-duration: var(--transition-time-slow);
  animation-fill-mode: forwards;
  animation-timing-function: var(--transition-function);
}

.ax-animicon--cross-in {
  animation-name: ax-animicon-cross;
}

.ax-dialog {
  display: flex;
  flex-direction: column;
  max-width: 100%;
  max-height: 100%;
  border-radius: var(--component-border-radius);
  box-shadow: var(--drop-shadow-theme-border), var(--drop-shadow-theme-elevation--x2);
  background-color: var(--color-theme-background);
  color: var(--color-theme-text);
}

.ax-dialog__body,
.ax-dialog__header {
  padding: var(--page-padding-vertical) var(--page-padding-horizontal);
}

.ax-dialog__header {
  border-bottom: 0.0625rem solid var(--color-theme-border);
}

.ax-dialog__body {
  flex: 1 1 auto;
  overflow: auto;
}

.ax-dialog__footer {
  padding: 0 var(--page-padding-vertical) var(--page-padding-horizontal);
}

.ax-dialog__footer-image {
  padding: 0 var(--page-padding-horizontal) 0 var(--page-padding-horizontal);
}

.ax-dialog__header,
.ax-dialog__footer {
  flex: 0 1 auto;
}

.ax-dialog--fullscreen,
.ax-dialog--large {
  width: 100vw;
  height: 100vh;
}

.ax-dialog--fullscreen {
  border-radius: 0;
}

.ax-modal__container {
  display: flex;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: var(--z-index-modal);
}

.ax-modal__container--overlay-shade-1 {
  background-color: rgba(var(--rgb-theme-background--shade-1), var(--opacity-background--overlay-modal));
}

.ax-modal__container--overlay-shade-2 {
  background-color: rgba(var(--rgb-theme-background--shade-2), var(--opacity-background--overlay-modal));
}

.ax-modal__container--overlay-shade-3 {
  background-color: rgba(var(--rgb-theme-background--shade-3), var(--opacity-background--overlay-modal));
}

.ax-modal__container--overlay-shade-4 {
  background-color: rgba(var(--rgb-theme-background--shade-4), var(--opacity-background--overlay-modal));
}

.ax-modal {
  display: flex;
  position: relative;
  flex-direction: column;
  max-width: 100%;
  min-height: 0;
}

.ax-modal__container--padding-x6 .ax-modal { padding: calc(var(--spacing-grid-size) * 6); }
.ax-modal__container--padding-x8 .ax-modal { padding: calc(var(--spacing-grid-size) * 8); }
.ax-modal__container--padding-x12 .ax-modal { padding: calc(var(--spacing-grid-size) * 12); }
.ax-modal__container--padding-x16 .ax-modal { padding: calc(var(--spacing-grid-size) * 16); }

.ax-modal__body--open {
  overflow: hidden;
}

.ax-modal__mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.ax-logo-page {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  height: 100%;
  padding: 0 var(--page-padding-horizontal);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  color: var(--color-theme-text);
}

.ax-logo-page--night { background-color: var(--color-ui-carbon--dark); }
.ax-logo-page--day { background-color: var(--color-ui-white-noise); }

.ax-logo-page__header {
  flex: 0 0 auto;
  width: 100%;
  max-width: var(--layout-width-medium);
  margin: 0 auto;
}

.ax-logo-page__body {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  justify-content: center;
  padding: var(--page-padding-vertical) 0;
}

.ax-logo {
  max-width: 100%;
}

/* Update to logo colour vars */
.cls-1 {
  fill: rgb(255, 255, 255);
}

.cls-2 {
  fill: rgb(63, 63, 63);
}

.Anon-3 {
  fill: rgb(87, 183, 221);
}

.Anon-2 {
  fill: rgb(249, 145, 50);
}

.Anon-5 {
  fill: rgb(169, 139, 188);
}

.Anon-4 {
  fill: rgb(255, 109, 86);
}

.Anon-12102 {
  fill: rgb(138, 197, 57);
}

.cls-3 {
  fill: rgb(255, 190, 10);
}

.ax-status-message {
  width: var(--layout-width-tiny);
  max-width: 100%;
  margin: 0 auto;
}

.ax-candytar {
  display: block;
  margin-right: auto;
  margin-left: auto;
}

.ax-candytar__initials {
  fill: var(--color-ui-white);
  font-size: 0.9rem;
}

.ax-candytar--tiny-clanger .ax-candytar__body,
  .ax-candytar--tiny-clanger .ax-candytar__background {
    fill: var(--color-product-tiny-clanger);
  }

.ax-candytar--critical-mass .ax-candytar__body,
  .ax-candytar--critical-mass .ax-candytar__background {
    fill: var(--color-product-critical-mass);
  }

.ax-candytar--paradise-lost .ax-candytar__body,
  .ax-candytar--paradise-lost .ax-candytar__background {
    fill: var(--color-product-paradise-lost);
  }

.ax-candytar--serene-sea .ax-candytar__body,
  .ax-candytar--serene-sea .ax-candytar__background {
    fill: var(--color-product-serene-sea);
  }

.ax-candytar--giant-leap .ax-candytar__body,
  .ax-candytar--giant-leap .ax-candytar__background {
    fill: var(--color-product-giant-leap);
  }

.ax-candytar--moon-lagoon .ax-candytar__body,
  .ax-candytar--moon-lagoon .ax-candytar__background {
    fill: var(--color-product-moon-lagoon);
  }

.ax-candytar--terra-form .ax-candytar__body,
  .ax-candytar--terra-form .ax-candytar__background {
    fill: var(--color-product-terra-form);
  }

.ax-candytar--primeval-soup .ax-candytar__body,
  .ax-candytar--primeval-soup .ax-candytar__background {
    fill: var(--color-product-primeval-soup);
  }

.ax-candytar--new-horizon .ax-candytar__body,
  .ax-candytar--new-horizon .ax-candytar__background {
    fill: var(--color-product-new-horizon);
  }

.ax-candytar--blast-off .ax-candytar__body,
  .ax-candytar--blast-off .ax-candytar__background {
    fill: var(--color-product-blast-off);
  }

.ax-candytar--ground-control .ax-candytar__body,
  .ax-candytar--ground-control .ax-candytar__background {
    fill: var(--color-product-ground-control);
  }

.ax-candytar--luna-dust .ax-candytar__body,
  .ax-candytar--luna-dust .ax-candytar__background {
    fill: var(--color-product-luna-dust);
  }

.ax-dock__list-header,
.ax-dock__list-footer {
  margin: 0;
  padding: 0;
}

.ax-dock__list-footer {
  margin-top: auto;
}

.ax-dock__item {
  display: flex;
  flex-direction: column;
  width: var(--cmp-platform-dock-size);
  height: var(--cmp-platform-dock-size);
}

.ax-dock__item-wrapper {
  display: flex;
  flex: 1 0 0%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.ax-dock__icon-link {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  color: var(--color-theme-night-text);
  transition-property: background-color, color;
  transition-duration: var(--transition-time-base);
  transition-timing-function: var(--transition-function)
}

.ax-dock__icon-link:hover { color: var(--color-ui-accent--hover); }

.ax-dock__icon-link:active { color: var(--color-ui-accent); }

.ax-dock__icon-link--active,
.ax-dock__icon-link--active:hover {
  background-color: var(--color-ui-accent);
  color: var(--color-ui-white-noise);
}

.ax-console-menu__header {
  margin:
    var(--spacing-grid-size--x4)
    var(--page-padding-horizontal)
    var(--spacing-grid-size--x2);
  padding: 0 0 calc(var(--spacing-grid-size--x1) - var(--component-border-width));
  border-bottom: var(--component-border-width) solid var(--color-theme-border);
}

.ax-console-menu {
  padding: 0;
  list-style: none;
}

.ax-console-menu__item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 2.5rem;
  padding: var(--spacing-grid-size--x2) var(--page-padding-horizontal);
  cursor: pointer;
  transition-property: background-color;
  transition-duration: var(--transition-time-base);
  transition-timing-function: var(--transition-function);
}

.ax-console-menu__item:hover {
  background-color: var(--color-theme-background--hover);
}

.ax-console-menu__item:active,
.ax-console-menu__item--active,
.ax-console-menu__item--active:hover {
  background-color: var(--color-theme-background--active);
}

.ax-console-menu__item--disabed,
.ax-console-menu__item--disabled:hover {
  background-color: transparent;
  cursor: default;
}

.ax-notifications {
  display: flex;
  position: fixed;
  top: 0;
  right: 0;
  flex-direction: column;
  max-height: 100vh;
  padding-bottom: var(--page-padding-vertical);
  overflow-y: auto;
  z-index: var(--z-index-notifications);
}

.ax-notifications__notification {
  margin: var(--page-padding-vertical) var(--page-padding-horizontal) 0;
}

.ax-notification {
  display: flex;
  max-width: var(--layout-width-tiny);
  border-radius: var(--component-border-radius);
  box-shadow: var(--drop-shadow-theme-day-border), var(--drop-shadow-theme-day-elevation--x2);
  background-color: var(--color-theme-day-background);
  color: var(--color-theme-day-text);
}

.ax-notification__icon {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  padding: var(--spacing-grid-size--x4) var(--spacing-grid-size--x4);
  border-right: 0.0625rem solid var(--color-theme-day-border)
}

.ax-notification--error .ax-notification__icon { color: var(--color-ui-error)
}

.ax-notification--info .ax-notification__icon { color: var(--color-ui-info)
}

.ax-notification--success .ax-notification__icon { color: var(--color-ui-success)
}

.ax-notification--warning .ax-notification__icon { color: var(--color-ui-warning)
}

.ax-notification__messsage {
  flex: 1 1 auto;
  align-self: center;
  padding: var(--spacing-grid-size--x4) var(--spacing-grid-size--x4);
}

.ax-notification__remove {
  flex: 0 0 auto;
  padding: var(--spacing-grid-size--x3) var(--spacing-grid-size--x3) var(--spacing-grid-size--x3) 0;
}

.ax-table {
  width: 100%;
  border-spacing: 0;
}

.ax-table__cell {
  padding: var(--spacing-grid-size--x2) var(--spacing-grid-size--x4);
  border-top: var(--component-border-width-medium) dotted var(--color-theme-border);
  transition-property: color, border-color;
  transition-duration: var(--transition-time-base);
  transition-timing-function: var(--transition-function);
}

.ax-table__row--clickable {
  cursor: pointer;
}

.ax-table__row--borderless .ax-table__cell {
  border-top-width: 0;
}

.ax-table__row:first-child .ax-table__cell {
  border-top-width: var(--component-border-width-medium);
  border-top-style: solid;
}

.ax-table__row:last-child .ax-table__cell {
  border-bottom: var(--component-border-width-medium) dotted var(--color-theme-border);
}

.ax-table__cell--align-left {
  text-align: left;
}

.ax-table__cell--align-right {
  text-align: right;
}

.ax-table__cell--align-centre {
  text-align: center;
}

.ax-table__cell--horizontal-padding-none {
  padding-right: 0;
  padding-left: 0;
}

.ax-table__cell--horizontal-padding-medium {
  padding-right: var(--spacing-grid-size--x4);
  padding-left: var(--spacing-grid-size--x4);
}

.ax-table__cell--vertical-padding-none {
  padding-top: 0;
  padding-bottom: 0;
}

.ax-table__cell--vertical-padding-small {
  padding-top: var(--spacing-grid-size--x2);
  padding-bottom: var(--spacing-grid-size--x2);
}

.ax-table__cell--vertical-padding-medium {
  padding-top: var(--spacing-grid-size--x3);
  padding-bottom: var(--spacing-grid-size--x3);
}

.ax-table__cell--vertical-padding-large {
  padding-top: var(--spacing-grid-size--x4);
  padding-bottom: var(--spacing-grid-size--x4);
}

.ax-table__header-button {
  display: inline-flex;
  position: relative;
  align-items: center;
  padding: 0;
  outline: 0;
  border: none;
  background: none;
  color: var(--color-theme-text--subtle);
  cursor: pointer;
  transition: color var(--transition-time-base) var(--transition-function);
}

.ax-table__cell--selected {
  color: var(--color-theme-text);
}

.ax-table__header-button--disabled {
  cursor: auto;
}

.ax-table__header-label--align-right .ax-table__header-button {
  flex-direction: row-reverse;
}

.ax-table__header-label--selected .ax-table__header-button {
  color: var(--color-theme-text);
}

.ax-table__header-button::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  transform: scaleX(0) translateY(var(--spacing-grid-size--x2));
  border-bottom: var(--spacing-grid-size--x1) solid var(--color-ui-accent);
  transition: transform var(--transition-time-base) var(--transition-function);
}

.ax-table__header-label--selected .ax-table__header-button::after {
  transform: scaleX(1) translateY(var(--spacing-grid-size--x2));
}

.ax-table__header-button:hover:not(.ax-table__header-button--disabled) {
  color: var(--color-ui-accent--hover);
}

.ax-table__header-label {
  padding: var(--spacing-grid-size--x2) var(--spacing-grid-size--x4);
  color: var(--color-theme-text--subtle);
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
  vertical-align: bottom;
  transition: color var(--transition-time-base) var(--transition-function);
}

.ax-table__header-icon {
  flex-shrink: 0;
}

.ax-table__header:only-child .ax-table__header-label {
  border-bottom: var(--component-border-width-medium) solid var(--color-theme-border);
}

.ax-table__header-label--align-left {
  text-align: left;
}

.ax-table__header-label--align-right {
  text-align: right;
}

.ax-table__header-label--align-centre {
  text-align: center;
}

.ax-table__header-label--grow {
  width: 100%;
}

.ax-table__header-label--selected {
  color: var(--color-theme-text);
}

.ax-table__header-label--shrink {
  width: 1%;
}

/* stylelint-disable value-no-vendor-prefix, property-no-vendor-prefix */
.ax-table__header-tooltip--wrap.ax-table__header-tooltip--wrap {
  display: -webkit-box;
  white-space: normal;
  -webkit-line-clamp: 2;
}
/* stylelint-enable value-no-vendor-prefix, property-no-vendor-prefix  */

.ax-table__row {
  transition-property: background-color;
  transition-duration: var(--transition-time-base);
  transition-timing-function: var(--transition-function);
}

.ax-table__row.ax-table__row--hover,
.ax-table__row:hover {
  background-color: var(--color-theme-background--hover);
}

.ax-status-badge {
  display: block;
}

.ax-menu {
  display: flex;
  margin: 0;
  padding: 0;
  white-space: nowrap;
  overflow: auto;
}

.ax-menu__item {
  display: inline-flex;
  margin: 0 var(--spacing-grid-size--x6) 0 0;
  list-style: none
}

.ax-menu__item:last-child {
    margin-right: 0;
  }

.ax-menu__item-button {
  display: flex;
  flex: 0 1 auto;
  align-items: center;
  justify-content: center;
  padding: 0 0 var(--spacing-grid-size--x3);
  outline: 0;
  border: 0;
  border-bottom: var(--spacing-grid-size) solid transparent;
  background: none;
  color: inherit;
  transition-property: border-bottom-color, color;
  transition-duration: var(--transition-time-base);
  transition-timing-function: var(--transition-function);
}

/* stylelint-disable no-descending-specificity */
.ax-menu__item:hover .ax-menu__item-button {
  color: var(--color-ui-accent--hover);
  cursor: pointer;
}

.ax-menu__item--active .ax-menu__item-button,
.ax-menu__item--active:hover .ax-menu__item-button {
  border-bottom-color: var(--color-ui-accent--active);
  color: inherit;
}

.ax-menu__item--disabled .ax-menu__item-button,
.ax-menu__item--disabled:hover .ax-menu__item-button {
  border-bottom-color: transparent;
  color: var(--color-theme-text--disabled);
  cursor: default;
}
/* stylelint-enable */

.ax-tabset__list {
  display: flex;
  align-items: flex-end;
  padding: 0;
  white-space: nowrap;
  overflow: auto
}

.ax-tabset__list::after {
    content: '';
    flex: 1 1 auto;
    border-bottom: var(--component-border-width) solid var(--color-theme-border);
  }

.ax-tabset__list-item {
  position: relative;
  margin: 0 var(--component-padding-vertical-medium) 0 0;
  border: var(--component-border-width) solid transparent;
  border-radius: var(--component-border-radius) var(--component-border-radius) 0 0;
  background-color: var(--color-theme-background--subtle);
  list-style: none;
  transition-property: background-color, border-color, color;
  transition-duration: var(--transition-time-base);
  transition-timing-function: var(--transition-function)
}

.ax-tabset__list-item::after {
    content: '';
    position: absolute;
    right: calc(var(--component-border-width) * -1);
    bottom: calc(var(--component-border-width) * -1);
    width: var(--component-padding-vertical-medium);
    transform: translateX(100%);
    border-bottom: var(--component-border-width) solid var(--color-theme-border);
  }

.ax-tabset__list-item--active {
  padding-bottom: var(--component-border-width);
  border-color: var(--color-theme-border);
  border-bottom-color: transparent;
  background-color: var(--color-theme-background);
  color: var(--color-ui-accent--active);
}

.ax-tabset__list-item--disabled {
  border-bottom-color: var(--color-theme-border);
  background-color: var(--color-theme-background--disabled);
}

.ax-tabset__button {
  outline: 0;
  border: 0;
  background: none;
  color: var(--color-theme-text--subtle);
  line-height: var(--component-line-height);
  transition-property: color;
  transition-duration: var(--transition-time-base);
  transition-timing-function: var(--transition-function)
}

.ax-tabset__button:hover {
    color: var(--color-ui-accent);
    cursor: pointer;
  }

.ax-tabset__button:disabled {
    color: var(--color-theme-text--disabled);
    cursor: default;
  }

.ax-tabset__button::first-letter {
    text-transform: capitalize;
  }

.ax-tabset__list-item--active .ax-tabset__button {
  color: var(--color-ui-accent--active);
}

.ax-tabset__list--medium .ax-tabset__button {
  padding:
    calc(var(--component-padding-vertical-medium) - var(--component-border-width))
    var(--component-padding-horizontal-medium)
    var(--component-padding-vertical-medium);
}

.ax-tabset__list--large .ax-tabset__button {
  padding:
    calc(var(--component-padding-vertical-large) - var(--component-border-width))
    var(--component-padding-horizontal-large)
    var(--component-padding-vertical-large);
}

.ax-textarea {
  padding: var(--component-padding-vertical-medium) var(--component-padding-horizontal-small);
  border: 0;
  border-radius: var(--component-border-radius);
  background-color: var(--color-theme-background);
  resize: none;
  transition-property: border-color;
  transition-duration: var(--transition-time-base);
  transition-timing-function: var(--transition-function)
}

.ax-textarea:focus { border-color: rgba(var(--rgb-ui-accent), var(--opacity-input-border--focused)); }

.ax-textarea:disabled { background-color: var(--color-theme-background--disabled); }

.ax-textarea--valid:not(:focus)  {
  border-color: rgba(var(--rgb-ui-error), var(--opacity-input-border--valid));
}

.ax-textarea--invalid:not(:focus) {
  border-color: rgba(var(--rgb-ui-error), var(--opacity-input-border--invalid));
  color: var(--color-ui-error)
}

.ax-textarea--invalid:not(:focus)::placeholder {
    color: var(--color-ui-error);
  }

.ax-textarea__progress {
  align-self: start;
  padding-top: var(--component-padding-horizontal-small);
  padding-right: var(--component-padding-horizontal-small);
}

.ax-alert-dialog {
  width: 25rem;
  max-width: 100%;
  border-radius: var(--component-border-radius);
  box-shadow: var(--drop-shadow-theme-border), var(--drop-shadow-theme-elevation--x2);
  background-color: var(--color-theme-background);
}

.ax-alert-dialog__header {
  border-top-left-radius: var(--component-border-radius);
  border-top-right-radius: var(--component-border-radius);
  overflow: hidden;
}

.ax-alert-dialog__body {
  padding: var(--spacing-grid-size--x5) var(--spacing-grid-size--x6);
}

.ax-animation-wrapper__fade-in-right {
  transform: translateX(-1.875rem);
  opacity: 0;
  transition: transform 0.4s, opacity 0.4s;
}

.ax-animation-wrapper__fade-in-right--toggled {
  transform: translateX(0);
  opacity: 1;
}

.ax-animation-wrapper__fade-in-left {
  transform: translateX(1.875rem);
  opacity: 0;
  transition: transform 0.4s, opacity 0.4s;
}

.ax-animation-wrapper__fade-in-left--toggled {
  transform: translateX(0);
  opacity: 1;
}

.ax-animation-wrapper__fade-in-down {
  transform: translateY(-1.875rem);
  opacity: 0;
  transition: transform 0.4s, opacity 0.4s;
}

.ax-animation-wrapper__fade-in-down--toggled {
  transform: translateY(0);
  opacity: 1;
}

.ax-animation-wrapper__fade-in-up {
  transform: translateY(1.875rem);
  opacity: 0;
  transition: transform 0.4s, opacity 0.4s;
}

.ax-animation-wrapper__fade-in-up--toggled {
  transform: translateY(0);
  opacity: 1;
}

.ax-animation-wrapper__timing-function--ease-out { transition-timing-function: ease-out; }
.ax-animation-wrapper__timing-function--ease-in { transition-timing-function: ease-in; }
.ax-animation-wrapper__timing-function--ease-in-out { transition-timing-function: ease-in-out; }
.ax-animation-wrapper__timing-function--linear { transition-timing-function: linear; }

/* Initial state: open */
.ax-animated-logo {
  --logo-animation-duration: 1.4s;
  --logo-animation-delay: 1s;
  --logo-tile-orange-offset: -93.7%;
  --logo-tile-yellow-offset: -75.2%;
  --logo-tile-red-offset: 89.7%;
  --logo-tile-blue-offset: 95.7%;
  width: 1.5rem;
  height: 1.5rem
}
.ax-animated-logo .logo-text {
    opacity: 1;
  }
.ax-animated-logo .tile-orange {
    transform: translate(var(--logo-tile-orange-offset), 0);
  }
.ax-animated-logo .tile-yellow {
    transform: translate(var(--logo-tile-yellow-offset), 0);
  }
.ax-animated-logo .tile-red {
    transform: translate(var(--logo-tile-red-offset), 0);
  }
.ax-animated-logo .tile-blue {
    transform: translate(var(--logo-tile-blue-offset), 0);
  }

/* open animation */
.ax-animated-logo--open .logo-text {
    animation:
      ax-animated-logo--open-logo
      var(--logo-animation-duration) both;
  }
.ax-animated-logo--open .tile-orange {
    animation:
      ax-animated-logo--open-orange
      var(--logo-animation-duration) both;
  }
.ax-animated-logo--open .tile-yellow {
    animation:
      ax-animated-logo--open-yellow
      var(--logo-animation-duration) both;
  }
.ax-animated-logo--open .tile-red {
    animation:
      ax-animated-logo--open-red var(--logo-animation-duration)
      both;
  }
.ax-animated-logo--open .tile-blue {
    animation:
      ax-animated-logo--open-blue var(--logo-animation-duration)
      both;
  }

@keyframes ax-animated-logo--open-logo {
  0% {
    opacity: 0;
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes ax-animated-logo--open-orange {
  0% {
    transform: translate(0, 0);
  }
  60% {
    transform: translate(0, 0);
  }
  80% {
    transform: translate(var(--logo-tile-orange-offset), 0);
  }
  100% {
    transform: translate(var(--logo-tile-orange-offset), 0);
  }
}

@keyframes ax-animated-logo--open-yellow {
  0% {
    transform: translate(0, 0);
  }
  40% {
    transform: translate(0, 0);
  }
  60% {
    transform: translate(var(--logo-tile-yellow-offset), 0);
  }
  100% {
    transform: translate(var(--logo-tile-yellow-offset), 0);
  }
}

@keyframes ax-animated-logo--open-red {
  0% {
    transform: translate(0, 0);
  }
  20% {
    transform: translate(0, 0);
  }
  40% {
    transform: translate(var(--logo-tile-red-offset), 0);
  }
  100% {
    transform: translate(var(--logo-tile-red-offset), 0);
  }
}

@keyframes ax-animated-logo--open-blue {
  0% {
    transform: translate(0, 0);
  }
  20% {
    transform: translate(var(--logo-tile-blue-offset), 0);
  }
  100% {
    transform: translate(var(--logo-tile-blue-offset), 0);
  }
}

/* close animations */
.ax-animated-logo--close .logo-text {
    animation:
      ax-animated-logo--close-logo
      var(--logo-animation-duration) var(--logo-animation-delay) both;
  }
.ax-animated-logo--close .tile-orange {
    animation:
      ax-animated-logo--close-orange
      var(--logo-animation-duration) var(--logo-animation-delay) both;
  }
.ax-animated-logo--close .tile-yellow {
    animation:
      ax-animated-logo--close-yellow
      var(--logo-animation-duration) var(--logo-animation-delay) both;
  }
.ax-animated-logo--close .tile-red {
    animation:
      ax-animated-logo--close-red var(--logo-animation-duration)
      var(--logo-animation-delay) both;
  }
.ax-animated-logo--close .tile-blue {
    animation:
      ax-animated-logo--close-blue var(--logo-animation-duration)
      var(--logo-animation-delay) both;
  }

@keyframes ax-animated-logo--close-logo {
  0% {
    opacity: 1;
  }
  30% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes ax-animated-logo--close-orange {
  0% {
    transform: translate(var(--logo-tile-orange-offset), 0);
  }
  20% {
    transform: translate(var(--logo-tile-orange-offset), 0);
  }
  40% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, 0);
  }
}

@keyframes ax-animated-logo--close-yellow {
  0% {
    transform: translate(var(--logo-tile-yellow-offset), 0);
  }
  40% {
    transform: translate(var(--logo-tile-yellow-offset), 0);
  }
  60% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, 0);
  }
}

@keyframes ax-animated-logo--close-red {
  0% {
    transform: translate(var(--logo-tile-red-offset), 0);
  }
  60% {
    transform: translate(var(--logo-tile-red-offset), 0);
  }
  80% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, 0);
  }
}

@keyframes ax-animated-logo--close-blue {
  0% {
    transform: translate(var(--logo-tile-blue-offset), 0);
  }
  80% {
    transform: translate(var(--logo-tile-blue-offset), 0);
  }
  100% {
    transform: translate(0, 0);
  }
}

.ax-badge {
  display: inline-flex;
  position: relative;
  padding: 0 calc(var(--component-line-height) * 0.5);
  border-radius: var(--component-line-height);
  font-size: var(--font-size-small);
  line-height: var(--component-line-height);
  white-space: nowrap;
  vertical-align: middle;
  overflow: hidden;
}

.ax-badge--full {
  width: 100%;
}

@media (max-width: 47.9375rem) {
  .ax-badge--full--small { width: 100%; }
}

@media (max-width: 61.9375rem) {
  .ax-badge--full--medium { width: 100%; }
}

@media (max-width: 74.9375rem) {
  .ax-badge--full--large { width: 100%; }
}

.ax-badge--clickable {
  cursor: pointer;
}

.ax-badge__content {
  position: relative;
  width: 100%;
}

.ax-badge__background {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transition-property: background-color;
  transition-duration: var(--transition-time-base);
  transition-timing-function: var(--transition-function);
}

.ax-badge--faded .ax-badge__background { background-color: var(--color-theme-text); }
.ax-badge--highlight .ax-badge__background { background-color: var(--color-ui-highlight); }
.ax-badge--success .ax-badge__background { background-color: var(--color-ui-success); }
.ax-badge--error .ax-badge__background { background-color: var(--color-ui-error); }
.ax-badge--forbidden-planet .ax-badge__background { background-color: var(--color-product-forbidden-planet); }
.ax-badge--tiny-clanger .ax-badge__background { background-color: var(--color-product-tiny-clanger); }
.ax-badge--critical-mass .ax-badge__background { background-color: var(--color-product-critical-mass); }
.ax-badge--fantastic-voyage .ax-badge__background { background-color: var(--color-product-fantastic-voyage); }
.ax-badge--paradise-lost .ax-badge__background { background-color: var(--color-product-paradise-lost); }
.ax-badge--serene-sea .ax-badge__background { background-color: var(--color-product-serene-sea); }
.ax-badge--event-horizon .ax-badge__background { background-color: var(--color-product-event-horizon); }
.ax-badge--electric-dreams .ax-badge__background { background-color: var(--color-product-electric-dreams); }
.ax-badge--outer-limits .ax-badge__background { background-color: var(--color-product-outer-limits); }
.ax-badge--giant-leap .ax-badge__background { background-color: var(--color-product-giant-leap); }
.ax-badge--moon-lagoon .ax-badge__background { background-color: var(--color-product-moon-lagoon); }
.ax-badge--space-invader .ax-badge__background { background-color: var(--color-product-space-invader); }
.ax-badge--extraterrestrial .ax-badge__background { background-color: var(--color-product-extraterrestrial); }
.ax-badge--terra-form .ax-badge__background { background-color: var(--color-product-terra-form); }
.ax-badge--primeval-soup .ax-badge__background { background-color: var(--color-product-primeval-soup); }
.ax-badge--future-shock .ax-badge__background { background-color: var(--color-product-future-shock); }
.ax-badge--sun-maker .ax-badge__background { background-color: var(--color-product-sun-maker); }
.ax-badge--new-horizon .ax-badge__background { background-color: var(--color-product-new-horizon); }
.ax-badge--blast-off .ax-badge__background { background-color: var(--color-product-blast-off); }
.ax-badge--crash-course .ax-badge__background { background-color: var(--color-product-crash-course); }
.ax-badge--solar-rust .ax-badge__background { background-color: var(--color-product-solar-rust); }
.ax-badge--ground-control .ax-badge__background { background-color: var(--color-product-ground-control); }
.ax-badge--space-oddity .ax-badge__background { background-color: var(--color-product-space-oddity); }
.ax-badge--rocky-planet .ax-badge__background { background-color: var(--color-product-rocky-planet); }
.ax-badge--deep-thought .ax-badge__background { background-color: var(--color-product-deep-thought); }
.ax-badge--luna-dust .ax-badge__background { background-color: var(--color-product-luna-dust); }

.ax-badge--success.ax-badge--clickable:hover .ax-badge__background { background-color: var(--color-ui-success--hover); }

.ax-badge--success.ax-badge--clickable:active .ax-badge__background { background-color: var(--color-ui-success--active); }

.ax-badge--error.ax-badge--clickable:hover .ax-badge__background { background-color: var(--color-ui-error--hover); }

.ax-badge--error.ax-badge--clickable:active .ax-badge__background { background-color: var(--color-ui-error--active); }

.ax-badge--forbidden-planet.ax-badge--clickable:hover .ax-badge__background { background-color: var(--color-product-forbidden-planet--hover); }

.ax-badge--forbidden-planet.ax-badge--clickable:active .ax-badge__background { background-color: var(--color-product-forbidden-planet--active); }

.ax-badge--tiny-clanger.ax-badge--clickable:hover .ax-badge__background { background-color: var(--color-product-tiny-clanger--hover); }

.ax-badge--tiny-clanger.ax-badge--clickable:active .ax-badge__background { background-color: var(--color-product-tiny-clanger--active); }

.ax-badge--critical-mass.ax-badge--clickable:hover .ax-badge__background { background-color: var(--color-product-critical-mass--hover); }

.ax-badge--critical-mass.ax-badge--clickable:active .ax-badge__background { background-color: var(--color-product-critical-mass--active); }

.ax-badge--fantastic-voyage.ax-badge--clickable:hover .ax-badge__background { background-color: var(--color-product-fantastic-voyage--hover); }

.ax-badge--fantastic-voyage.ax-badge--clickable:active .ax-badge__background { background-color: var(--color-product-fantastic-voyage--active); }

.ax-badge--paradise-lost.ax-badge--clickable:hover .ax-badge__background { background-color: var(--color-product-paradise-lost--hover); }

.ax-badge--paradise-lost.ax-badge--clickable:active .ax-badge__background { background-color: var(--color-product-paradise-lost--active); }

.ax-badge--serene-sea.ax-badge--clickable:hover .ax-badge__background { background-color: var(--color-product-serene-sea--hover); }

.ax-badge--serene-sea.ax-badge--clickable:active .ax-badge__background { background-color: var(--color-product-serene-sea--active); }

.ax-badge--event-horizon.ax-badge--clickable:hover .ax-badge__background { background-color: var(--color-product-event-horizon--hover); }

.ax-badge--event-horizon.ax-badge--clickable:active .ax-badge__background { background-color: var(--color-product-event-horizon--active); }

.ax-badge--electric-dreams.ax-badge--clickable:hover .ax-badge__background { background-color: var(--color-product-electric-dreams--hover); }

.ax-badge--electric-dreams.ax-badge--clickable:active .ax-badge__background { background-color: var(--color-product-electric-dreams--active); }

.ax-badge--outer-limits.ax-badge--clickable:hover .ax-badge__background { background-color: var(--color-product-outer-limits--hover); }

.ax-badge--outer-limits.ax-badge--clickable:active .ax-badge__background { background-color: var(--color-product-outer-limits--active); }

.ax-badge--giant-leap.ax-badge--clickable:hover .ax-badge__background { background-color: var(--color-product-giant-leap--hover); }

.ax-badge--giant-leap.ax-badge--clickable:active .ax-badge__background { background-color: var(--color-product-giant-leap--active); }

.ax-badge--moon-lagoon.ax-badge--clickable:hover .ax-badge__background { background-color: var(--color-product-moon-lagoon--hover); }

.ax-badge--moon-lagoon.ax-badge--clickable:active .ax-badge__background { background-color: var(--color-product-moon-lagoon--active); }

.ax-badge--space-invader.ax-badge--clickable:hover .ax-badge__background { background-color: var(--color-product-space-invader--hover); }

.ax-badge--space-invader.ax-badge--clickable:active .ax-badge__background { background-color: var(--color-product-space-invader--active); }

.ax-badge--extraterrestrial.ax-badge--clickable:hover .ax-badge__background { background-color: var(--color-product-extraterrestrial--hover); }

.ax-badge--extraterrestrial.ax-badge--clickable:active .ax-badge__background { background-color: var(--color-product-extraterrestrial--active); }

.ax-badge--terra-form.ax-badge--clickable:hover .ax-badge__background { background-color: var(--color-product-terra-form--hover); }

.ax-badge--terra-form.ax-badge--clickable:active .ax-badge__background { background-color: var(--color-product-terra-form--active); }

.ax-badge--primeval-soup.ax-badge--clickable:hover .ax-badge__background { background-color: var(--color-product-primeval-soup--hover); }

.ax-badge--primeval-soup.ax-badge--clickable:active .ax-badge__background { background-color: var(--color-product-primeval-soup--active); }

.ax-badge--future-shock.ax-badge--clickable:hover .ax-badge__background { background-color: var(--color-product-future-shock--hover); }

.ax-badge--future-shock.ax-badge--clickable:active .ax-badge__background { background-color: var(--color-product-future-shock--active); }

.ax-badge--sun-maker.ax-badge--clickable:hover .ax-badge__background { background-color: var(--color-product-sun-maker--hover); }

.ax-badge--sun-maker.ax-badge--clickable:active .ax-badge__background { background-color: var(--color-product-sun-maker--active); }

.ax-badge--new-horizon.ax-badge--clickable:hover .ax-badge__background { background-color: var(--color-product-new-horizon--hover); }

.ax-badge--new-horizon.ax-badge--clickable:active .ax-badge__background { background-color: var(--color-product-new-horizon--active); }

.ax-badge--blast-off.ax-badge--clickable:hover .ax-badge__background { background-color: var(--color-product-blast-off--hover); }

.ax-badge--blast-off.ax-badge--clickable:active .ax-badge__background { background-color: var(--color-product-blast-off--active); }

.ax-badge--crash-course.ax-badge--clickable:hover .ax-badge__background { background-color: var(--color-product-crash-course--hover); }

.ax-badge--crash-course.ax-badge--clickable:active .ax-badge__background { background-color: var(--color-product-crash-course--active); }

.ax-badge--solar-rust.ax-badge--clickable:hover .ax-badge__background { background-color: var(--color-product-solar-rust--hover); }

.ax-badge--solar-rust.ax-badge--clickable:active .ax-badge__background { background-color: var(--color-product-solar-rust--active); }

.ax-badge--ground-control.ax-badge--clickable:hover .ax-badge__background { background-color: var(--color-product-ground-control--hover); }

.ax-badge--ground-control.ax-badge--clickable:active .ax-badge__background { background-color: var(--color-product-ground-control--active); }

.ax-badge--space-oddity.ax-badge--clickable:hover .ax-badge__background { background-color: var(--color-product-space-oddity--hover); }

.ax-badge--space-oddity.ax-badge--clickable:active .ax-badge__background { background-color: var(--color-product-space-oddity--active); }

.ax-badge--rocky-planet.ax-badge--clickable:hover .ax-badge__background { background-color: var(--color-product-rocky-planet--hover); }

.ax-badge--rocky-planet.ax-badge--clickable:active .ax-badge__background { background-color: var(--color-product-rocky-planet--active); }

.ax-badge--deep-thought.ax-badge--clickable:hover .ax-badge__background { background-color: var(--color-product-deep-thought--hover); }

.ax-badge--deep-thought.ax-badge--clickable:active .ax-badge__background { background-color: var(--color-product-deep-thought--active); }

.ax-badge--luna-dust.ax-badge--clickable:hover .ax-badge__background { background-color: var(--color-product-luna-dust--hover); }

.ax-badge--luna-dust.ax-badge--clickable:active .ax-badge__background { background-color: var(--color-product-luna-dust--active); }

.ax-chip {
  --chip-color-opacity: 0.2;
  --chip-background-opacity: 0.08;
  --chip-background-opacity-hover: 0.15;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-right: var(--spacing-grid-size--x2);
  margin-bottom: var(--spacing-grid-size--x2);
  padding: 0;
  outline: 0;
  border-width: var(--component-border-width);
  border-style: solid;
  border-radius: var(--component-border-radius-huge);
  border-color: transparent;
  background-color: rgba(var(--rgb-ui-carbon), var(--chip-background-opacity));
  color: var(--color-ui-carbon);
  letter-spacing: var(--letter-spacing-loose);
  text-align: center;
  line-height: var(--component-line-height);
  white-space: nowrap;
  vertical-align: middle;
  transition-property: background-color, border-color, color;
  transition-duration: var(--transition-time-base);
  transition-timing-function: var(--transition-function)
}

.ax-chip:hover {
    background-color: rgba(var(--rgb-ui-carbon), var(--chip-background-opacity-hover));
    cursor: pointer;
  }

.ax-chip[disabled],
  .ax-chip[disabled]:hover,
  .ax-chip[disabled]:active {
    background-color: var(--color-theme-background--disabled);
    color: var(--color-theme-text--disabled);
    cursor: default;
    pointer-events: none;
  }

.ax-chip[disabled]:hover {
    background-color: var(--color-ui-white-noise);
  }

.ax-chip-metric {
  margin-right: var(--spacing-grid-size--x1);
  color: var(--color-theme-text--subtle);
}

.ax-chip-metric--light {
  color: var(--color-ui-white);
}

.ax-chip--active {
  border-width: var(--component-border-width);
  border-style: solid;
  border-radius: var(--component-border-radius-huge);
  border-color: var(--color-ui-accent);
}

.ax-chip--valid {
  background-color: rgba(var(--rgb-ui-success), var(--chip-color-opacity))
}

.ax-chip--valid:hover {
    background-color: rgba(var(--rgb-ui-success--hover), var(--chip-color-opacity));
  }

.ax-chip--invalid {
  background-color: rgba(var(--rgb-ui-error), var(--chip-color-opacity))
}

.ax-chip--invalid:hover {
    background-color: rgba(var(--rgb-ui-error--hover), var(--chip-color-opacity));
  }

.ax-chip-label {
  margin: 0 var(--spacing-grid-size--x2) 0 var(--spacing-grid-size--x2);
}

.ax-chip--small {
  padding: var(--component-padding-vertical-small) var(--component-padding-horizontal-small);
  font-size: var(--font-size-small);
}

.ax-chip--medium {
  padding: var(--component-padding-vertical-medium) var(--component-padding-horizontal-medium);
  font-size: var(--font-size-medium);
}

.ax-chip--large {
  padding: var(--component-padding-vertical-large) var(--component-padding-horizontal-large);
  font-size: var(--font-size-large);
}

.ax-chiplist {
  display: flex;
  flex-wrap: wrap;
  margin-top: var(--spacing-grid-size--x2);
  margin-bottom: var(--spacing-grid-size--x2);
  overflow: hidden;
}

.ax-chiplist-label {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: var(--spacing-grid-size--x1);
  margin-bottom: var(--spacing-grid-size--x2);
  font-weight: var(--font-weight-bold);
  line-height: var(--component-line-height);
}

.ax-chiplist--small,
.ax-chiplist--medium,
.ax-chiplist--large {
  transition-property: max-height, opacity, margin;
  transition-duration: var(--transition-time-fast);
  transition-timing-function: var(--transition-function);
}

.ax-chiplist--small {
  max-height: var(--component-total-line-height-small);
}

.ax-chiplist--medium {
  max-height: var(--component-total-line-height-medium);
}

.ax-chiplist--large {
  max-height: var(--component-total-line-height-large);
}

.ax-chiplist-label--small {
  padding-top: var(--component-padding-vertical-small);
  padding-right: var(--component-padding-horizontal-small);
  padding-bottom: var(--component-padding-vertical-small);
  padding-left: 0;
  font-size: var(--font-size-small);
}

.ax-chiplist-label--medium {
  padding-top: var(--component-padding-vertical-medium);
  padding-right: var(--component-padding-horizontal-medium);
  padding-bottom: var(--component-padding-vertical-medium);
  padding-left: 0;
  font-size: var(--font-size-medium);
}

.ax-chiplist-label--large {
  padding-top: var(--component-padding-vertical-large);
  padding-right: var(--component-padding-horizontal-large);
  padding-bottom: var(--component-padding-vertical-large);
  padding-left: 0;
  font-size: var(--font-size-large);
}

.ax-chiplist--expanded {
  max-height: var(--component-max-height);
}

.ax-chiplist--expandable {
  cursor: pointer;
}

.ax-data-picker {
  display: flex;
}

.ax-data-picker__dropdown {
  flex: 1 1 auto;
  min-width: 0;
}

.ax-data-picker__link {
  overflow: hidden;
}

.ax-data-picker__meta {
  flex: 0 0 auto;
  border-left: 0.0625rem solid var(--color-theme-border);
}

.ax-date-picker__day {
  display: block;
  position: relative;
  padding: 0 var(--spacing-grid-size);
  outline: 0;
  border: 0;
  background-color: transparent;
  color: var(--color-theme-text--subtle);
  cursor: pointer
}

.ax-date-picker__day:disabled {
    color: var(--color-theme-text--disabled);
    cursor: default;
  }

.ax-date-picker__day-inner {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  width: var(--component-round-size-small);
  height: var(--component-round-size-small);
  border-radius: var(--component-round-size-small);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-loose);
  line-height: var(--component-line-height);
}

.ax-date-picker__day--selection {
  color: var(--color-ui-accent--active)
}

.ax-date-picker__day--selection::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: var(--color-theme-background--subtle)
  }

.ax-date-picker__day--first.ax-date-picker__day--selection::before {
      border-top-left-radius: var(--component-round-size-small);
      border-bottom-left-radius: var(--component-round-size-small)
  }

.ax-date-picker__day--last.ax-date-picker__day--selection::before {
      border-top-right-radius: var(--component-round-size-small);
      border-bottom-right-radius: var(--component-round-size-small)
  }

.ax-date-picker__day--selected {
  color: var(--color-ui-white-noise)
}

.ax-date-picker__day--selected::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
  }

.ax-date-picker__day--selected .ax-date-picker__day-inner {
    background-color: var(--color-ui-accent--active);
  }

.ax-date-picker__day--selected-end:not(.ax-date-picker__day--first)::before {
  right: 50%;
  left: 0;
  background-color: var(--color-theme-background--subtle);
}

.ax-date-picker__day--selected-start:not(.ax-date-picker__day--last)::before {
  right: 0;
  left: 50%;
  background-color: var(--color-theme-background--subtle);
}

.ax-date-range-selection {
  padding: 0 var(--spacing-grid-size--x2);
  border-radius: var(--component-round-size-small);
  background-color: var(--color-theme-background--subtle);
}

.ax-date-range-selection__item {
  position: relative;
  height: var(--component-round-size-small);
  padding: 0 var(--spacing-grid-size--x2);
  outline: 0;
  border: 0;
  background-color: transparent;
  color: var(--color-theme-text--subtle);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-loose);
  text-transform: uppercase;
  cursor: pointer
}

.ax-date-range-selection__item:nth-last-child(n+2)::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 0.1875rem;
    height: 0.1875rem;
    margin-left: var(--spacing-grid-size--x2);
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background-color: var(--color-product-deep-thought);
  }

.ax-date-range-selection__item:hover {
    color: var(--color-ui-accent);
  }

.ax-date-range-selection__item:active {
    color: var(--color-ui-accent--active);
  }

.ax-date-range-selection__item--active {
  color: var(--color-ui-accent);
  cursor: initial;
}

.ax-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-width: var(--component-border-width);
  border-style: solid;
  border-radius: var(--component-border-radius);
  background-color: transparent;
  text-align: center;
  line-height: var(--component-line-height);
  white-space: nowrap;
  vertical-align: middle;
}

.ax-label--small {
  padding: var(--component-padding-vertical-small) var(--component-padding-horizontal-small);
  font-size: var(--font-size-small);
}

.ax-label--medium {
  padding: var(--component-padding-vertical-medium) var(--component-padding-horizontal-medium);
  font-size: var(--font-size-large);
}

.ax-label--full {
  width: 100%;
}

@media (max-width: 47.9375rem) {
  .ax-label--full--small { width: 100%; }
}

@media (max-width: 61.9375rem) {
  .ax-label--full--medium { width: 100%; }
}

@media (max-width: 74.9375rem) {
  .ax-label--full--large { width: 100%; }
}

.ax-label--white {
  border-color: var(--color-theme-border);
  background-color: var(--color-ui-white);
  color: var(--color-theme-day-text);
}

.ax-label--success {
  border-color: transparent;
  background-color: var(--color-ui-success);
  color: var(--color-theme-night-text);
}

.ax-label--error {
  border-color: transparent;
  background-color: var(--color-ui-error);
  color: var(--color-theme-night-text);
}

.ax-label__icon {
  display: inline-flex;
  margin: 0 var(--spacing-grid-size);
}

.ax-label__icon--start { margin-left: 0; }
.ax-label__icon--end   { margin-right: 0; }

.ax-lozenge {
  display: inline-flex;
  align-items: center;
  max-width: 10rem;
  height: 1rem;
  padding: 0.125rem var(--spacing-grid-size--x2);
  border-radius: var(--component-border-radius);
  background-color: var(--color-theme-background--shade-4);
  color: var(--color-theme-text);
  font-size: var(--font-size-small);
  line-height: normal;
}

.ax-lozenge--medium {
  height: 1.5rem;
  padding: 0.125rem 0.625rem;
}

.ax-status-lozenge {
  font-feature-settings: "c2sc";
  font-variant: small-caps;
  text-transform: uppercase;
}

.ax-status-lozenge__indicator {
  --indicator-size: var(--spacing-grid-size--x2);
  display: inline-block;
  width: var(--indicator-size);
  height: var(--indicator-size);
  margin-right: var(--spacing-grid-size);
  border-radius: var(--component-border-radius-huge);
}

.ax-status-lozenge__indicator--success {
  background-color: var(--color-ui-success);
}

.ax-status-lozenge__indicator--info {
  background-color: var(--color-ui-info);
}

.ax-status-lozenge__indicator--warning {
  background-color: var(--color-ui-warning);
}

.ax-status-lozenge__indicator--error {
  background-color: var(--color-ui-error);
}

.ax-lozenge--tiny-clanger {
  background-color: var(--color-product-tiny-clanger);
  color: var(--color-ui-white);
}

.ax-lozenge--critical-mass {
  background-color: var(--color-product-critical-mass);
  color: var(--color-ui-white);
}

.ax-lozenge--fantastic-voyage {
  background-color: var(--color-product-fantastic-voyage);
  color: var(--color-ui-white);
}

.ax-lozenge--paradise-lost {
  background-color: var(--color-product-paradise-lost);
  color: var(--color-ui-white);
}

.ax-lozenge--serene-sea {
  background-color: var(--color-product-serene-sea);
  color: var(--color-ui-white);
}

.ax-lozenge--event-horizon {
  background-color: var(--color-product-event-horizon);
  color: var(--color-ui-white);
}

.ax-lozenge--electric-dreams {
  background-color: var(--color-product-electric-dreams);
  color: var(--color-ui-white);
}

.ax-lozenge--outer-limits {
  background-color: var(--color-product-outer-limits);
  color: var(--color-ui-white);
}

.ax-lozenge--giant-leap {
  background-color: var(--color-product-giant-leap);
  color: var(--color-ui-white);
}

.ax-lozenge--moon-lagoon {
  background-color: var(--color-product-moon-lagoon);
  color: var(--color-ui-white);
}

.ax-lozenge--space-invader {
  background-color: var(--color-product-space-invader);
  color: var(--color-ui-white);
}

.ax-lozenge--extraterrestrial {
  background-color: var(--color-product-extraterrestrial);
  color: var(--color-ui-white);
}

.ax-lozenge--terra-form {
  background-color: var(--color-product-terra-form);
  color: var(--color-ui-white);
}

.ax-lozenge--primeval-soup {
  background-color: var(--color-product-primeval-soup);
  color: var(--color-ui-white);
}

.ax-lozenge--future-shock {
  background-color: var(--color-product-future-shock);
  color: var(--color-ui-white);
}

.ax-lozenge--sun-maker {
  background-color: var(--color-product-sun-maker);
  color: var(--color-ui-white);
}

.ax-lozenge--new-horizon {
  background-color: var(--color-product-new-horizon);
  color: var(--color-ui-white);
}

.ax-lozenge--blast-off {
  background-color: var(--color-product-blast-off);
  color: var(--color-ui-white);
}

.ax-lozenge--crash-course {
  background-color: var(--color-product-crash-course);
  color: var(--color-ui-white);
}

.ax-lozenge--solar-rust {
  background-color: var(--color-product-solar-rust);
  color: var(--color-ui-white);
}

.ax-lozenge--ground-control {
  background-color: var(--color-product-ground-control);
  color: var(--color-ui-white);
}

.ax-lozenge--space-oddity {
  background-color: var(--color-product-space-oddity);
  color: var(--color-ui-white);
}

.ax-lozenge--rocky-planet {
  background-color: var(--color-product-rocky-planet);
  color: var(--color-ui-white);
}

.ax-lozenge--deep-thought {
  background-color: var(--color-product-deep-thought);
  color: var(--color-ui-white);
}

.ax-lozenge--luna-dust {
  background-color: var(--color-product-luna-dust);
  color: var(--color-ui-white);
}

.ax-lozenge--sentiment-positive {
  background-color: var(--color-sentiment-positive);
  color: var(--color-ui-white);
}

.ax-lozenge--sentiment-negative {
  background-color: var(--color-sentiment-negative);
  color: var(--color-ui-white);
}

.ax-lozenge--sentiment-neutral {
  background-color: var(--color-sentiment-neutral);
  color: var(--color-ui-white);
}

.ax-lozenge--social-twitter {
  background-color: var(--color-social-twitter);
  color: var(--color-ui-white);
}

.ax-lozenge--social-facebook {
  background-color: var(--color-social-facebook);
  color: var(--color-ui-white);
}

.ax-lozenge--social-instagram {
  background-color: var(--color-social-instagram);
  color: var(--color-ui-white);
}

.ax-lozenge--social-reddit {
  background-color: var(--color-social-reddit);
  color: var(--color-ui-white);
}

.ax-lozenge--social-youtube {
  background-color: var(--color-social-youtube);
  color: var(--color-ui-white);
}

.ax-lozenge--social-tumblr {
  background-color: var(--color-social-tumblr);
  color: var(--color-ui-white);
}

:root {
  --cmp-platform-dock-size: calc(var(--spacing-grid-size) * 16);
}

.ax-platform {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  width: 100%;
  min-height: 100vh;
}

.ax-platform__mask {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: var(--z-index-platform-mask);
}

.ax-platform__dock {
  display: flex;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  flex-direction: column;
  margin: 0;
  padding: 0;
  background-color: var(--color-ui-carbon);
  color: var(--color-theme-night-text);
  list-style: none;
  z-index: var(--z-index-platform-dock);
}

.ax-platform__console {
  position: fixed;
  top: 0;
  bottom: 0;
  overflow: auto;
  z-index: var(--z-index-platform-console);
  transition-property: transform;
  transition-duration: var(--transition-time-base);
  transition-timing-function: var(--transition-function);
}

.ax-platform__console--left {
  left: 0;
  transform: translate(-100%);
}

.ax-platform__console--right {
  right: 0;
  transform: translate(100%);
}

.ax-platform__console--open {
  transform: translate(0);
}

.ax-platform__canvas {
  min-height: 100vh;
  transition-property: transform;
  transition-duration: var(--transition-time-base);
  transition-timing-function: var(--transition-function);
}

.ax-platform__console,
.ax-platform__canvas {
  display: flex;
  flex-direction: column;
}

.ax-platform__console,
.ax-platform__console-header {
  color: var(--color-theme-text);
}

.ax-platform__console--shade-2,
.ax-platform__console-header--shade-2 {
  background-color: var(--color-theme-background--shade-2);
}

.ax-platform__console--shade-3,
.ax-platform__console-header--shade-3 {
  background-color: var(--color-theme-background--shade-3);
}

.ax-platform__console--shade-4,
.ax-platform__console-header--shade-4 {
  background-color: var(--color-theme-background--shade-4);
}

.ax-platform,
.ax-platform__canvas,
.ax-platform__canvas-header {
  color: var(--color-theme-text);
}

.ax-platform__console-header,
.ax-platform__canvas-header {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  justify-content: center;
  padding: 0 var(--page-padding-horizontal);
}

.ax-platform--shade-1.ax-platform,
.ax-platform--shade-1 .ax-platform__canvas,
.ax-platform--shade-1 .ax-platform__canvas-header {
  background-color: var(--color-theme-background--shade-1);
}

.ax-platform--shade-2.ax-platform,
.ax-platform--shade-2 .ax-platform__canvas,
.ax-platform--shade-2 .ax-platform__canvas-header {
  background-color: var(--color-theme-background--shade-2);
}

.ax-platform__console-header--separator,
.ax-platform__canvas-header--separator {
  border-bottom: 0.0625rem solid var(--color-theme-border);
}

.ax-platform__console-header--small,
.ax-platform__canvas-header--small {
  min-height: 2.5rem;
}

.ax-platform__console-header--large,
.ax-platform__canvas-header--large {
  min-height: var(--cmp-platform-dock-size);
}

.ax-platform__dock ~ .ax-platform__console {
  margin-left: var(--cmp-platform-dock-size);
}

.ax-platform__dock ~ .ax-platform__canvas {
  padding-left: var(--cmp-platform-dock-size);
}

/**
 * The !important statements below are to remove the dynamic
 * shifting of the canvas from the console widths
 * in Javascript.
 */
@media (max-width: 74.9375rem) {
    .ax-platform--responsive.ax-platform--console-open .ax-platform__mask {
      display: block;
    }

    .ax-platform--responsive .ax-platform__canvas {
      /* stylelint-disable declaration-no-important */
      margin-right: initial !important;
      margin-left: initial !important;
      transform: initial !important;
      /* stylelint-enable declaration-no-important */
    }
}

.ax-slider {
  --ax-slider-track-size--small: var(--spacing-grid-size--x1);
  --ax-slider-track-size--medium: var(--spacing-grid-size--x2);
  --ax-slider-thumb-size--small: var(--spacing-grid-size--x4);
  --ax-slider-thumb-size--medium: var(--spacing-grid-size--x6);
  --ax-slider-thumb-border-width: 0.0625rem;
  position: relative;
  outline: none;
  -webkit-user-select: none;
          user-select: none;
}

.ax-slider__track {
  position: relative;
  top: 50%;
  right: 0;
  left: 0;
  transform: translateY(-50%);
  background-color: var(--color-theme-background--subtle);
  cursor: pointer;
}

.ax-slider__fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  background-color: var(--color-ui-accent);
}

.ax-slider__marker {
  position: absolute;
  top: -50%;
  opacity: 0.75;
  background-color: var(--color-theme-background--overlay-heavy);
}

.ax-slider__thumb {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  border: var(--ax-slider-thumb-border-width) solid var(--color-theme-border);
  border-radius: 50%;
  box-shadow: var(--drop-shadow-theme-elevation--x1);
  background-color: var(--color-ui-white);
  cursor: pointer;
}

.ax-slider__range .ax-slider__thumb {
    transform: translateX(-50%) translateY(-30%);
  }

.ax-slider--small {
  height: var(--spacing-grid-size--x6);
  margin: 0 calc(var(--ax-slider-thumb-size--small) / 2)
}

.ax-slider--small .ax-slider__track {
    top: 33%;
    height: var(--ax-slider-track-size--small);
    border-radius: var(--ax-slider-track-size--small);
  }

.ax-slider--small .ax-slider__fill {
    height: var(--ax-slider-track-size--small);
    border-radius: var(--ax-slider-track-size--small);
  }

.ax-slider--small .ax-slider__marker {
    width: 0.125rem;
    height: 0.5rem;
  }

.ax-slider--small .ax-slider__thumb {
    width: var(--ax-slider-thumb-size--small);
    min-width: var(--spacing-grid-size--x3);
    height: var(--ax-slider-thumb-size--small);
    min-height: var(--spacing-grid-size--x3);
  }

.ax-slider--medium {
  height: var(--ax-slider-thumb-size--medium);
  margin: 0 calc(var(--ax-slider-thumb-size--medium) / 2)
}

.ax-slider--medium .ax-slider__track,
  .ax-slider--medium .ax-slider__fill {
    height: var(--ax-slider-track-size--medium);
    border-radius: var(--ax-slider-track-size--medium);
  }

.ax-slider--medium .ax-slider__marker {
    width: 0.25rem;
    height: 1rem;
  }

.ax-slider--medium .ax-slider__thumb {
    width: var(--ax-slider-thumb-size--medium);
    min-width: var(--ax-slider-thumb-size--small);
    height: var(--ax-slider-thumb-size--medium);
    min-height: var(--ax-slider-thumb-size--small);
  }

.ax-slider--disabled .ax-slider__thumb {
    cursor: default;
  }

.ax-slider--disabled .ax-slider__fill {
    background-color: var(--color-theme-border);
  }


.ax-tip__content {
  background-color: var(--color-theme-background);
  /* stylelint-disable */
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  /* stylelint-enable */
}

.ax-tip--shadow .ax-tip__content {
  background-color: transparent;
}

.ax-tip__arrow--small {
  width: var(--cmp-tip-size--small);
  height: var(--cmp-tip-size--small);
  margin: var(--cmp-tip-size--small)
}

.ax-tip--top .ax-tip__arrow--small { bottom: calc(var(--cmp-tip-size--small) * -0.5)
}

.ax-tip--right .ax-tip__arrow--small { left: calc(var(--cmp-tip-size--small) * -0.5)
}

.ax-tip--bottom .ax-tip__arrow--small { top: calc(var(--cmp-tip-size--small) * -0.5)
}

.ax-tip--left .ax-tip__arrow--small { right: calc(var(--cmp-tip-size--small) * -0.5)
}

.ax-tip__arrow--medium {
  width: var(--cmp-tip-size--medium);
  height: var(--cmp-tip-size--medium);
  margin: var(--cmp-tip-size--medium)
}

.ax-tip--top .ax-tip__arrow--medium { bottom: calc(var(--cmp-tip-size--medium) * -0.5)
}

.ax-tip--right .ax-tip__arrow--medium { left: calc(var(--cmp-tip-size--medium) * -0.5)
}

.ax-tip--bottom .ax-tip__arrow--medium { top: calc(var(--cmp-tip-size--medium) * -0.5)
}

.ax-tip--left .ax-tip__arrow--medium { right: calc(var(--cmp-tip-size--medium) * -0.5)
}

.ax-tip__arrow {
  /**
  * The designs of the medium tip is 1.5rem from corner to corner. To calculate
  * the pre-rotated square we use `Math.sqrt((1.5rem**2)/2)`
  */
  --cmp-tip-size--medium: 1.0606601717798212rem;
  --cmp-tip-size--small: 0.75rem;
  position: absolute;
  transform: rotate(45deg);
  background-color: var(--color-theme-background);
  pointer-events: none
}

.ax-tip--faded .ax-tip__arrow { background-color: var(--color-theme-text)
}

.ax-tip--success .ax-tip__arrow { background-color: var(--color-ui-success)
}

.ax-tip--warning .ax-tip__arrow { background-color: var(--color-ui-warning)
}

.ax-tip--error .ax-tip__arrow { background-color: var(--color-ui-error)
}

.ax-tip--info .ax-tip__arrow { background-color: var(--color-ui-info)
}

.ax-tip--shade-1 .ax-tip__arrow { background-color: var(--color-theme-background--shade-1)
}

.ax-tip--shade-2 .ax-tip__arrow { background-color: var(--color-theme-background--shade-2)
}

.ax-tip--shade-3 .ax-tip__arrow { background-color: var(--color-theme-background--shade-3)
}

.ax-tip--shade-4 .ax-tip__arrow { background-color: var(--color-theme-background--shade-4)
}

.ax-tip--carbon .ax-tip__arrow { background-color: var(--color-ui-carbon)
}

.ax-tip--white .ax-tip__arrow { background-color: var(--color-ui-white)
}

.ax-tip--shadow .ax-tip__arrow {
    box-shadow: var(--drop-shadow-theme-border), var(--drop-shadow-theme-elevation--x2)
}

.ax-tip--top .ax-tip__arrow--small {
  transform: translateY(var(--cmp-tip-size--small)) rotate(45deg);
}

.ax-tip--top .ax-tip__arrow--medium {
  transform: translateY(var(--cmp-tip-size--medium)) rotate(45deg);
}

.ax-tip--right .ax-tip__arrow--small {
  transform: translateX(calc(var(--cmp-tip-size--small) * -1)) rotate(45deg);
}

.ax-tip--right .ax-tip__arrow--medium {
  transform: translateX(calc(var(--cmp-tip-size--medium) * -1)) rotate(45deg);
}

.ax-tip--bottom .ax-tip__arrow--small {
  transform: translateY(calc(var(--cmp-tip-size--small) * -1)) rotate(45deg);
}

.ax-tip--bottom .ax-tip__arrow--medium {
  transform: translateY(calc(var(--cmp-tip-size--medium) * -1)) rotate(45deg);
}

.ax-tip--left .ax-tip__arrow--small {
  transform: translateX(var(--cmp-tip-size--small)) rotate(45deg);
}

.ax-tip--left .ax-tip__arrow--medium {
  transform: translateX(var(--cmp-tip-size--medium)) rotate(45deg);
}

.ax-transition__wrapper  {
  position: relative;
  overflow: hidden;
}

.ax-transition__item {
  position: absolute;
  width: 100%;
  animation-fill-mode: forwards;
}

.ax-animate-next-enter-active {
  animation-name: moveFromRight;
}

.ax-animate-next-exit-active {
  animation-name: moveToLeft;
}

.ax-animate-previous-enter-active {
  animation-name: moveFromLeft;
}

.ax-animate-previous-exit-active {
  animation-name: moveToRight;
}

@keyframes moveToLeft {
  to {
    transform: translateX(-100%);
  }
}

@keyframes moveFromLeft {
  from {
    transform: translateX(-100%);
  }
}

@keyframes moveToRight {
  to {
    transform: translateX(100%);
  }
}

@keyframes moveFromRight {
  from {
    transform: translateX(100%);
  }
}

/**
 * DEPRECATED
 * DO NOT USE when moving forwards, this will be removed
 * Use custom properties and component-based classes instead
 */

/* General */

.vl-dib {
    display: inline-block;
}

/* Flexbox */

.vl-flex-row,
.vl-flex-column {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-content: stretch;
    align-items: stretch;
    position: relative;
    min-height: 0;
}

.vl-inline-flex {
    display: inline-flex;
}

.vl-flex-row {
    flex-direction: row;
}

.vl-flex-column {
    flex-direction: column;
}

.vl-flex-wrap {
    flex-wrap: wrap;
}

.vl-flex-vh-center {
    justify-content: center;
    align-items: center;
}

.vl-flex-1 {
    flex: 1;
}

.vl-flex-2 {
    flex: 2;
}

.vl-flex-3 {
    flex: 3;
}

.vl-flex-4 {
    flex: 4;
}

.vl-flex-5 {
    flex: 5;
}

/* Margin */

.vl-margin-none {
    margin: 0;
}

.vl-margin-tiny {
    margin: 0.5vmin;
}

.vl-margin-small {
    margin: 1vmin;
}

.vl-margin-medium {
    margin: 1.5vmin;
}

.vl-margin-large {
    margin: 2vmin;
}

.vl-margin-huge {
    margin: 2.5vmin;
}

.vl-margin-h-tiny {
    margin-left: 0.5vmin;
    margin-right: 0.5vmin;
}

.vl-margin-h-small {
    margin-left: 1vmin;
    margin-right: 1vmin;
}

.vl-margin-h-medium {
    margin-left: 1.5vmin;
    margin-right: 1.5vmin;
}

.vl-margin-h-large {
    margin-left: 2vmin;
    margin-right: 2vmin;
}

.vl-margin-h-huge {
    margin-left: 2.5vmin;
    margin-right: 2.5vmin;
}

.vl-margin-v-tiny {
    margin-top: 0.5vmin;
    margin-bottom: 0.5vmin;
}

.vl-margin-v-small {
    margin-top: 1vmin;
    margin-bottom: 1vmin;
}

.vl-margin-v-medium {
    margin-top: 1.5vmin;
    margin-bottom: 1.5vmin;
}

.vl-margin-v-large {
    margin-top: 2vmin;
    margin-bottom: 2vmin;
}

.vl-margin-v-huge {
    margin-top: 2.5vmin;
    margin-bottom: 2.5vmin;
}

.vl-margin-l-tiny {
    margin-left: 0.5vmin;
}

.vl-margin-l-small {
    margin-left: 1vmin;
}

.vl-margin-l-medium {
    margin-left: 1.5vmin;
}

.vl-margin-l-large {
    margin-left: 2vmin;
}

.vl-margin-l-huge {
    margin-left: 2.5vmin;
}

.vl-margin-r-tiny {
    margin-right: 0.5vmin;
}

.vl-margin-r-small {
    margin-right: 1vmin;
}

.vl-margin-r-medium {
    margin-right: 1.5vmin;
}

.vl-margin-r-large {
    margin-right: 2vmin;
}

.vl-margin-r-huge {
    margin-right: 2.5vmin;
}

.vl-margin-t-tiny {
    margin-top: 0.5vmin;
}

.vl-margin-t-small {
    margin-top: 1vmin;
}

.vl-margin-t-medium {
    margin-top: 1.5vmin;
}

.vl-margin-t-large {
    margin-top: 2vmin;
}

.vl-margin-t-huge {
    margin-top: 2.5vmin;
}

.vl-margin-b-tiny {
    margin-bottom: 0.5vmin;
}

.vl-margin-b-small {
    margin-bottom: 1vmin;
}

.vl-margin-b-medium {
    margin-bottom: 1.5vmin;
}

.vl-margin-b-large {
    margin-bottom: 2vmin;
}

.vl-margin-b-huge {
    margin-bottom: 2.5vmin;
}

/* Padding */

.vl-padding-none {
    padding: 0;
}

.vl-padding-tiny {
    padding: 0.5vmin;
}

.vl-padding-small {
    padding: 1vmin;
}

.vl-padding-medium {
    padding: 1.5vmin;
}

.vl-padding-large {
    padding: 2vmin;
}

.vl-padding-huge {
    padding: 2.5vmin;
}

.vl-padding-h-tiny {
    padding-left: 0.5vmin;
    padding-right: 0.5vmin;
}

.vl-padding-h-small {
    padding-left: 1vmin;
    padding-right: 1vmin;
}

.vl-padding-h-medium {
    padding-left: 1.5vmin;
    padding-right: 1.5vmin;
}

.vl-padding-h-large {
    padding-left: 2vmin;
    padding-right: 2vmin;
}

.vl-padding-h-huge {
    padding-left: 2.5vmin;
    padding-right: 2.5vmin;
}

.vl-padding-v-tiny {
    padding-top: 0.5vmin;
    padding-bottom: 0.5vmin;
}

.vl-padding-v-small {
    padding-top: 1vmin;
    padding-bottom: 1vmin;
}

.vl-padding-v-medium {
    padding-top: 1.5vmin;
    padding-bottom: 1.5vmin;
}

.vl-padding-v-large {
    padding-top: 2vmin;
    padding-bottom: 2vmin;
}

.vl-padding-v-huge {
    padding-top: 2.5vmin;
    padding-bottom: 2.5vmin;
}

.vl-padding-l-tiny {
    padding-left: 0.5vmin;
}

.vl-padding-l-small {
    padding-left: 1vmin;
}

.vl-padding-l-medium {
    padding-left: 1.5vmin;
}

.vl-padding-l-large {
    padding-left: 2vmin;
}

.vl-padding-l-huge {
    padding-left: 2.5vmin;
}

.vl-padding-r-tiny {
    padding-right: 0.5vmin;
}

.vl-padding-r-small {
    padding-right: 1vmin;
}

.vl-padding-r-medium {
    padding-right: 1.5vmin;
}

.vl-padding-r-large {
    padding-right: 2vmin;
}

.vl-padding-r-huge {
    padding-right: 2.5vmin;
}

.vl-padding-t-tiny {
    padding-top: 0.5vmin;
}

.vl-padding-t-small {
    padding-top: 1vmin;
}

.vl-padding-t-medium {
    padding-top: 1.5vmin;
}

.vl-padding-t-large {
    padding-top: 2vmin;
}

.vl-padding-t-huge {
    padding-top: 2.5vmin;
}

.vl-padding-b-tiny {
    padding-bottom: 0.5vmin;
}

.vl-padding-b-small {
    padding-bottom: 1vmin;
}

.vl-padding-b-medium {
    padding-bottom: 1.5vmin;
}

.vl-padding-b-large {
    padding-bottom: 2vmin;
}

.vl-padding-b-huge {
    padding-bottom: 2.5vmin;
}

/* Text */

.vl-text-thin {
    font-weight: 100;
}

.vl-text-light {
    font-weight: var(--viz-type-weight-light);
}

.vl-text-regular {
    font-weight: var(--viz-type-weight-normal);
}

.vl-text-bold {
    font-weight: var(--viz-type-weight-bold);
}

.vl-text-small {
    font-size: 1.5vmin;
}

.vl-text-medium {
    font-size: 2vmin;
}

.vl-text-large {
    font-size: 2.5vmin;
}

.vl-text-huge {
    font-size: 6vmin;
}

.vl-text-x-huge {
    font-size: 10vmin;
}

.vl-ellipsis {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

/* Visibility */

.vl-hidden {
    display: none;
}

/* Positioning */

.vl-absolute-center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.vl-absolute-stretched {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

.vl-bg-cover {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

/* Tables */

.vl-table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* Borders */

.vl-border-b {
    border-bottom-width: 1px;
    border-bottom-style: solid;
}