/*! Do not edit directly, generated from https://github.com/OutSystems/rd-neo-design-system || prod.neo-design-system.css || Version: 1.18.1 || 2023-09-13 09:29:49 */
:root {
  --border-radius-m: 6px;
  --border-radius: 4px;
  --border-radius-rounded: 100px;
  --border-radius-circle: 100%;
  --color-brand-light: #f85E40;
  --color-brand: #f22800;
  --color-brand-dark: #db2400;
  --color-brand-darker: #bb1f00;
  --color-neutral-0: #fff;
  --color-neutral-1: #f5f6fa;
  --color-neutral-2: #dedfe4;
  --color-neutral-3: #c6c9ce;
  --color-neutral-4: #afb2b8;
  --color-neutral-5: #979ca2;
  --color-neutral-6: #80858c;
  --color-neutral-7: #686e76;
  --color-neutral-8: #515860;
  --color-neutral-9: #39414a;
  --color-neutral-10: #222b34;
  --color-neutral-11: #0a141e;
  --color-selection-0: #dcecfd;
  --color-selection-1: #add1fb;
  --color-selection-2: #66aaf7;
  --color-selection-3: #157df3;
  --color-selection-4: #006de9;
  --color-selection-5: #0066db;
  --color-selection-6: #19487f;
  --color-selection-7: #123661;
  --color-brand-yellow-light: #fed06b;
  --color-brand-yellow: #fdb515;
  --color-brand-yellow-dark: #d99b11;
  --color-brand-green-lighter: #2dd267;
  --color-brand-green-light: #00802d;
  --color-brand-green: #005f21;
  --color-brand-blue-lighter: #38bdff;
  --color-brand-blue-light: #32a9e5;
  --color-brand-blue: #0077b3;
  --color-blue-light-3: #649FF2;
  --color-blue: #176DE5;
  --color-turquoise: #2DD2B9;
  --color-turquoise-dark-2: #1BAA94;
  --color-error-lighter: #fde9e6;
  --color-error-light: #fcd4cc;
  --color-error: #f22800;
  --color-error-dark: #8d1300;
  --color-error-darker: #421f00;
  --color-error-5: #cb371f;
  --color-warning-lighter: #fef7e8;
  --color-warning-light: #fee8b9;
  --color-warning: #fdb515;
  --color-warning-dark: #703800;
  --color-warning-darker: #421f00;
  --color-success-lighter: #eafaf0;
  --color-success-light: #c0f1d1;
  --color-success: #2dd267;
  --color-success-dark: #0d532a;
  --color-success-darker: #072b15;
  --color-info-lighter: #ebf8ff;
  --color-info-light: #c3ebff;
  --color-info: #38bdff;
  --color-info-dark: #064787;
  --color-info-darker: #002850;
  --font-size-display: 60px;
  --font-size-h1: 36px;
  --font-size-h2: 32px;
  --font-size-h3: 28px;
  --font-size-h4: 26px;
  --font-size-h5: 24px;
  --font-size-h6: 22px;
  --font-size-m: 18px;
  --font-size-base: 16px;
  --font-size-s: 14px;
  --font-size-xs: 12px;
  --font-size-xxs: 10px;
  --font-regular: 400;
  --font-semi-bold: 600;
  --font-bold: 700;
  --space-xs: 4px;
  --space-s: 8px;
  --space-base: 16px;
  --space-m: 24px;
  --space-l: 32px;
  --space-xl: 40px;
  --space-xxl: 48px;
  --space-xxxl: 78px;
  --shadow-level-0: 0px 0.2px 0.5px rgba(32, 35, 39, 0.08), 0px 0.6px 2.5px rgba(32, 35, 39, 0.17);
  --shadow-level-1: 0px 0.45px 1.35px rgba(32, 35, 39, 0.11), 0px 1.8px 5.4px rgba(32, 35, 39, 0.13);
  --shadow-level-2: 0px 0.6px 1.8px rgba(32, 35, 39, 0.11), 0px 3.2px 7.2px rgba(32, 35, 39, 0.13);
  --shadow-level-3: 0px 1.2px 3.6px rgba(32, 35, 39, 0.11), 0px 6.4px 14.4px rgba(32, 35, 39, 0.13);
  --shadow-down-soft-s: 0px 1px 4px rgba(10, 20, 30, 0.06), 0px 4px 6px rgba(10, 20, 30, 0.04);
  --shadow-down-s: 0px 1px 4px rgba(10, 20, 30, 0.15), 0px 4px 6px rgba(10, 20, 30, 0.1);
  --shadow-down-m: 0px 1px 4px rgba(10, 20, 30, 0.15), 0px 6px 12px rgba(10, 20, 30, 0.13);
  --unified-aside-width: 72px;
  --unified-aside-width-expanded: 256px;
  --unified-header-height: 56px;
  --transition-time-instant: 0;
  --transition-time-xs: 70ms;
  --transition-time-s: 140ms;
  --transition-time-base: 250ms;
  --transition-time-m: 320ms;
  --transition-time-l: 400ms;
  --transition-time-xl: 1000ms;
  --transition-time-xxl: 2000ms;
  --transition-curve-linear: linear;
  --transition-curve-quick: cubic-bezier(0.04, 0, 0.02, 1);
  --transition-curve-base: cubic-bezier(0.2, 0, 0.38, 0.8);
  --transition-curve-expressive: cubic-bezier(0.4, 0.24, 0.3, 1);
  --transition-curve-bounce: cubic-bezier(0.4, 0.1, 0.2, 1.3);
  --time-s: 110ms;
  --time-m: 150ms;
  --time-l: 200ms;
  --time-xl: 300ms;
  --ease-in: ease-in;
  --ease-out: cubic-bezier(0, 0, 0.3, 1);
  --linear: linear;
  --header-size: 56px;
  --footer-size: 72px;
  --input-border-color-default: var(--color-neutral-6);
  --input-border-color-hover: var(--color-neutral-8);
  --input-border-color-focus: var(--color-neutral-8);
  --input-border-color-disabled: var(--color-neutral-4);
  --input-border-color-error: var(--color-error);
  --dark-theme-input-border-color-error: var(--color-brand-darker);
  --input-background-color-default: var(--color-neutral-0);
  --input-background-color-disabled: var(--color-neutral-2);
  --input-text-color-placeholder: var(--color-neutral-6);
  --input-text-color-default: var(--color-neutral-11);
  --input-text-color-disabled: var(--color-neutral-6);
  --input-ghost-border-color-default: transparent;
  --input-ghost-border-color-hover: var(--color-neutral-2);
  --input-ghost-border-color-focus: transparent;
  --input-ghost-border-color-disabled: transparent;
  --input-ghost-text-color-disabled: var(--color-neutral-3);
  --input-ghost-background-color-default: transparent;
  --input-ghost-background-color-hover: var(--color-neutral-2);
  --input-ghost-background-color-focus: transparent;
  --input-ghost-background-color-disabled: transparent;
  --dropdown-ghost-background-color-focus: var(--color-neutral-2);
  --input-outline-border-color-default: var(--color-neutral-2);
  --input-outline-border-color-hover: var(--color-neutral-2);
  --input-outline-border-color-focus: var(--color-neutral-2);
  --input-outline-border-color-disabled: var(--color-neutral-2);
  --input-outline-background-color-default: transparent;
  --input-outline-background-color-hover: var(--color-neutral-2);
  --input-outline-background-color-disabled: transparent;
  --input-outline-text-color-disabled: var(--color-neutral-3);
  --dropdown-outline-background-color-focus: var(--color-neutral-2);
}

[data-theme=dark]:root {
  --color-neutral-0: #0a141e;
  --color-neutral-1: #222b34;
  --color-neutral-2: #39414a;
  --color-neutral-3: #515860;
  --color-neutral-4: #686e76;
  --color-neutral-5: #80858c;
  --color-neutral-6: #979ca2;
  --color-neutral-7: #afb2b8;
  --color-neutral-8: #c6c9ce;
  --color-neutral-9: #dedfe4;
  --color-neutral-10: #f5f6fa;
  --color-neutral-11: #fff;
  --color-brand-light: #bb1f00;
  --color-brand: #db2400;
  --color-brand-dark: #f22800;
  --color-brand-darker: #f85e40;
  --color-brand-blue-lighter: #0077b3;
  --color-brand-blue-light: #32a9e5;
  --color-brand-blue: #38bdff;
  --color-brand-yellow-light: #d99b11;
  --color-brand-yellow: #fdb515;
  --color-brand-yellow-dark: #fed06b;
  --color-brand-green-lighter: #005f21;
  --color-brand-green-light: #00802d;
  --color-brand-green: #2dd267;
  --color-error-lighter: #4c0a00;
  --color-error-light: #8d1300;
  --color-error: #f22800;
  --color-error-dark: #fcd4cc;
  --color-error-darker: #fde9e6;
  --color-warning-lighter: #421f00;
  --color-warning-light: #703800;
  --color-warning: #fdb515;
  --color-warning-dark: #fee8b9;
  --color-warning-darker: #fef7e8;
  --color-success-lighter: #072b15;
  --color-success-light: #0d532a;
  --color-success: #2dd267;
  --color-success-dark: #c0f1d1;
  --color-success-darker: #eafaf0;
  --color-info-lighter: #002850;
  --color-info-light: #064787;
  --color-info: #38bdff;
  --color-info-dark: #c3ebff;
  --color-info-darker: #ebf8ff;
  --color-blue-light-3: #176de5;
  --color-blue: #649ff2;
  /* Hybrid Color - Turquoise */
  --color-turquoise: #1baa94;
  --color-turquoise-dark-2: #2dd2b9;
  --shadow-down-soft-s: 0px 1px 4px rgba(0, 0, 0, 0.08), 0px 4px 6px rgba(0, 0, 0, 0.06);
  --shadow-down-s: 0px 1px 4px rgba(0, 0, 0, 0.18), 0px 4px 6px rgba(0, 0, 0, 0.15);
  --shadow-down-m: 0px 1px 4px rgba(0, 0, 0, 0.18), 0px 6px 12px rgba(0, 0, 0, 0.15);
}

.background-brand-yellow-light {
  background-color: var(--color-brand-yellow-light);
}

.background-brand-yellow {
  background-color: var(--color-brand-yellow);
}

.background-brand-yellow-dark {
  background-color: var(--color-brand-yellow-dark);
}

.text-brand-yellow-light {
  color: var(--color-brand-yellow-light);
}

.text-brand-yellow {
  color: var(--color-brand-yellow);
}

.text-brand-yellow-dark {
  color: var(--color-brand-yellow-dark);
}

.background-brand-green-lighter {
  background-color: var(--color-brand-green-lighter);
}

.background-brand-green-light {
  background-color: var(--color-brand-green-light);
}

.background-brand-green {
  background-color: var(--color-brand-green);
}

.text-brand-green-lighter {
  color: var(--color-brand-green-lighter);
}

.text-brand-green-light {
  color: var(--color-brand-green-light);
}

.text-brand-green {
  color: var(--color-brand-green);
}

.background-brand-blue-lighter {
  background-color: var(--color-brand-blue-lighter);
}

.background-brand-blue-light {
  background-color: var(--color-brand-blue-light);
}

.background-brand-blue {
  background-color: var(--color-brand-blue);
}

.text-brand-blue-lighter {
  color: var(--color-brand-blue-lighter);
}

.text-brand-blue-light {
  color: var(--color-brand-blue-light);
}

.text-brand-blue {
  color: var(--color-brand-blue);
}

.background-error-lighter {
  background-color: var(--color-error-lighter);
}

.background-error-light {
  background-color: var(--color-error-light);
}

.background-error {
  background-color: var(--color-error);
}

.background-error-dark {
  background-color: var(--color-error-dark);
}

.background-error-darker {
  background-color: var(--color-error-darker);
}

.text-error-lighter {
  color: var(--color-error-lighter);
}

.text-error-light {
  color: var(--color-error-light);
}

.text-error {
  color: var(--color-error);
}

.text-error-dark {
  color: var(--color-error-dark);
}

.text-error-darker {
  color: var(--color-error-darker);
}

.background-warning-lighter {
  background-color: var(--color-warning-lighter);
}

.background-warning-light {
  background-color: var(--color-warning-light);
}

.background-warning {
  background-color: var(--color-warning);
}

.background-warning-dark {
  background-color: var(--color-warning-dark);
}

.background-warning-darker {
  background-color: var(--color-warning-darker);
}

.text-warning-lighter {
  color: var(--color-warning-lighter);
}

.text-warning-light {
  color: var(--color-warning-light);
}

.text-warning {
  color: var(--color-warning);
}

.text-warning-dark {
  color: var(--color-warning-dark);
}

.text-warning-darker {
  color: var(--color-warning-darker);
}

.background-success-lighter {
  background-color: var(--color-success-lighter);
}

.background-success-light {
  background-color: var(--color-success-light);
}

.background-success {
  background-color: var(--color-success);
}

.background-success-dark {
  background-color: var(--color-success-dark);
}

.background-success-darker {
  background-color: var(--color-success-darker);
}

.text-success-lighter {
  color: var(--color-success-lighter);
}

.text-success-light {
  color: var(--color-success-light);
}

.text-success {
  color: var(--color-success);
}

.text-success-dark {
  color: var(--color-success-dark);
}

.text-success-darker {
  color: var(--color-success-darker);
}

.background-info-lighter {
  background-color: var(--color-info-lighter);
}

.background-info-light {
  background-color: var(--color-info-light);
}

.background-info {
  background-color: var(--color-info);
}

.background-info-dark {
  background-color: var(--color-info-dark);
}

.background-info-darker {
  background-color: var(--color-info-darker);
}

.text-info-lighter {
  color: var(--color-info-lighter);
}

.text-info-light {
  color: var(--color-info-light);
}

.text-info {
  color: var(--color-info);
}

.text-info-dark {
  color: var(--color-info-dark);
}

.text-info-darker {
  color: var(--color-info-darker);
}

.background-blue-light-3 {
  background-color: var(--color-blue-light-3);
}

.background-blue {
  background-color: var(--color-blue);
}

.text-blue-light-3 {
  color: var(--color-blue-light-3);
}

.text-blue {
  color: var(--color-blue);
}

.background-turquoise {
  background-color: var(--color-turquoise);
}

.background-turquoise-dark-2 {
  background-color: var(--color-turquoise-dark-2);
}

.text-turquoise {
  color: var(--color-turquoise);
}

.text-turquoise-dark-2 {
  color: var(--color-turquoise-dark-2);
}

.shadow-down-soft-s {
  box-shadow: var(--shadow-down-soft-s);
}

.shadow-down-s {
  box-shadow: var(--shadow-down-s);
}

.shadow-down-m {
  box-shadow: var(--shadow-down-m);
}

:root {
  --border-radius-m: 6px;
  --border-radius: 4px;
  --border-radius-rounded: 100px;
  --border-radius-circle: 100%;
  --color-brand-light: #f85E40;
  --color-brand: #f22800;
  --color-brand-dark: #db2400;
  --color-brand-darker: #bb1f00;
  --color-neutral-0: #fff;
  --color-neutral-1: #f5f6fa;
  --color-neutral-2: #dedfe4;
  --color-neutral-3: #c6c9ce;
  --color-neutral-4: #afb2b8;
  --color-neutral-5: #979ca2;
  --color-neutral-6: #80858c;
  --color-neutral-7: #686e76;
  --color-neutral-8: #515860;
  --color-neutral-9: #39414a;
  --color-neutral-10: #222b34;
  --color-neutral-11: #0a141e;
  --color-selection-0: #dcecfd;
  --color-selection-1: #add1fb;
  --color-selection-2: #66aaf7;
  --color-selection-3: #157df3;
  --color-selection-4: #006de9;
  --color-selection-5: #0066db;
  --color-selection-6: #19487f;
  --color-selection-7: #123661;
  --color-brand-yellow-light: #fed06b;
  --color-brand-yellow: #fdb515;
  --color-brand-yellow-dark: #d99b11;
  --color-brand-green-lighter: #2dd267;
  --color-brand-green-light: #00802d;
  --color-brand-green: #005f21;
  --color-brand-blue-lighter: #38bdff;
  --color-brand-blue-light: #32a9e5;
  --color-brand-blue: #0077b3;
  --color-blue-light-3: #649FF2;
  --color-blue: #176DE5;
  --color-turquoise: #2DD2B9;
  --color-turquoise-dark-2: #1BAA94;
  --color-error-lighter: #fde9e6;
  --color-error-light: #fcd4cc;
  --color-error: #f22800;
  --color-error-dark: #8d1300;
  --color-error-darker: #421f00;
  --color-error-5: #cb371f;
  --color-warning-lighter: #fef7e8;
  --color-warning-light: #fee8b9;
  --color-warning: #fdb515;
  --color-warning-dark: #703800;
  --color-warning-darker: #421f00;
  --color-success-lighter: #eafaf0;
  --color-success-light: #c0f1d1;
  --color-success: #2dd267;
  --color-success-dark: #0d532a;
  --color-success-darker: #072b15;
  --color-info-lighter: #ebf8ff;
  --color-info-light: #c3ebff;
  --color-info: #38bdff;
  --color-info-dark: #064787;
  --color-info-darker: #002850;
  --font-size-display: 60px;
  --font-size-h1: 36px;
  --font-size-h2: 32px;
  --font-size-h3: 28px;
  --font-size-h4: 26px;
  --font-size-h5: 24px;
  --font-size-h6: 22px;
  --font-size-m: 18px;
  --font-size-base: 16px;
  --font-size-s: 14px;
  --font-size-xs: 12px;
  --font-size-xxs: 10px;
  --font-regular: 400;
  --font-semi-bold: 600;
  --font-bold: 700;
  --space-xs: 4px;
  --space-s: 8px;
  --space-base: 16px;
  --space-m: 24px;
  --space-l: 32px;
  --space-xl: 40px;
  --space-xxl: 48px;
  --space-xxxl: 78px;
  --shadow-level-0: 0px 0.2px 0.5px rgba(32, 35, 39, 0.08), 0px 0.6px 2.5px rgba(32, 35, 39, 0.17);
  --shadow-level-1: 0px 0.45px 1.35px rgba(32, 35, 39, 0.11), 0px 1.8px 5.4px rgba(32, 35, 39, 0.13);
  --shadow-level-2: 0px 0.6px 1.8px rgba(32, 35, 39, 0.11), 0px 3.2px 7.2px rgba(32, 35, 39, 0.13);
  --shadow-level-3: 0px 1.2px 3.6px rgba(32, 35, 39, 0.11), 0px 6.4px 14.4px rgba(32, 35, 39, 0.13);
  --shadow-down-soft-s: 0px 1px 4px rgba(10, 20, 30, 0.06), 0px 4px 6px rgba(10, 20, 30, 0.04);
  --shadow-down-s: 0px 1px 4px rgba(10, 20, 30, 0.15), 0px 4px 6px rgba(10, 20, 30, 0.1);
  --shadow-down-m: 0px 1px 4px rgba(10, 20, 30, 0.15), 0px 6px 12px rgba(10, 20, 30, 0.13);
  --unified-aside-width: 72px;
  --unified-aside-width-expanded: 256px;
  --unified-header-height: 56px;
  --transition-time-instant: 0;
  --transition-time-xs: 70ms;
  --transition-time-s: 140ms;
  --transition-time-base: 250ms;
  --transition-time-m: 320ms;
  --transition-time-l: 400ms;
  --transition-time-xl: 1000ms;
  --transition-time-xxl: 2000ms;
  --transition-curve-linear: linear;
  --transition-curve-quick: cubic-bezier(0.04, 0, 0.02, 1);
  --transition-curve-base: cubic-bezier(0.2, 0, 0.38, 0.8);
  --transition-curve-expressive: cubic-bezier(0.4, 0.24, 0.3, 1);
  --transition-curve-bounce: cubic-bezier(0.4, 0.1, 0.2, 1.3);
  --time-s: 110ms;
  --time-m: 150ms;
  --time-l: 200ms;
  --time-xl: 300ms;
  --ease-in: ease-in;
  --ease-out: cubic-bezier(0, 0, 0.3, 1);
  --linear: linear;
  --header-size: 56px;
  --footer-size: 72px;
  --input-border-color-default: var(--color-neutral-6);
  --input-border-color-hover: var(--color-neutral-8);
  --input-border-color-focus: var(--color-neutral-8);
  --input-border-color-disabled: var(--color-neutral-4);
  --input-border-color-error: var(--color-error);
  --dark-theme-input-border-color-error: var(--color-brand-darker);
  --input-background-color-default: var(--color-neutral-0);
  --input-background-color-disabled: var(--color-neutral-2);
  --input-text-color-placeholder: var(--color-neutral-6);
  --input-text-color-default: var(--color-neutral-11);
  --input-text-color-disabled: var(--color-neutral-6);
  --input-ghost-border-color-default: transparent;
  --input-ghost-border-color-hover: var(--color-neutral-2);
  --input-ghost-border-color-focus: transparent;
  --input-ghost-border-color-disabled: transparent;
  --input-ghost-text-color-disabled: var(--color-neutral-3);
  --input-ghost-background-color-default: transparent;
  --input-ghost-background-color-hover: var(--color-neutral-2);
  --input-ghost-background-color-focus: transparent;
  --input-ghost-background-color-disabled: transparent;
  --dropdown-ghost-background-color-focus: var(--color-neutral-2);
  --input-outline-border-color-default: var(--color-neutral-2);
  --input-outline-border-color-hover: var(--color-neutral-2);
  --input-outline-border-color-focus: var(--color-neutral-2);
  --input-outline-border-color-disabled: var(--color-neutral-2);
  --input-outline-background-color-default: transparent;
  --input-outline-background-color-hover: var(--color-neutral-2);
  --input-outline-background-color-disabled: transparent;
  --input-outline-text-color-disabled: var(--color-neutral-3);
  --dropdown-outline-background-color-focus: var(--color-neutral-2);
}

[data-theme=dark]:root {
  --color-neutral-0: #0a141e;
  --color-neutral-1: #222b34;
  --color-neutral-2: #39414a;
  --color-neutral-3: #515860;
  --color-neutral-4: #686e76;
  --color-neutral-5: #80858c;
  --color-neutral-6: #979ca2;
  --color-neutral-7: #afb2b8;
  --color-neutral-8: #c6c9ce;
  --color-neutral-9: #dedfe4;
  --color-neutral-10: #f5f6fa;
  --color-neutral-11: #fff;
  --color-brand-light: #bb1f00;
  --color-brand: #db2400;
  --color-brand-dark: #f22800;
  --color-brand-darker: #f85e40;
  --color-brand-blue-lighter: #0077b3;
  --color-brand-blue-light: #32a9e5;
  --color-brand-blue: #38bdff;
  --color-brand-yellow-light: #d99b11;
  --color-brand-yellow: #fdb515;
  --color-brand-yellow-dark: #fed06b;
  --color-brand-green-lighter: #005f21;
  --color-brand-green-light: #00802d;
  --color-brand-green: #2dd267;
  --color-error-lighter: #4c0a00;
  --color-error-light: #8d1300;
  --color-error: #f22800;
  --color-error-dark: #fcd4cc;
  --color-error-darker: #fde9e6;
  --color-warning-lighter: #421f00;
  --color-warning-light: #703800;
  --color-warning: #fdb515;
  --color-warning-dark: #fee8b9;
  --color-warning-darker: #fef7e8;
  --color-success-lighter: #072b15;
  --color-success-light: #0d532a;
  --color-success: #2dd267;
  --color-success-dark: #c0f1d1;
  --color-success-darker: #eafaf0;
  --color-info-lighter: #002850;
  --color-info-light: #064787;
  --color-info: #38bdff;
  --color-info-dark: #c3ebff;
  --color-info-darker: #ebf8ff;
  --color-blue-light-3: #176de5;
  --color-blue: #649ff2;
  /* Hybrid Color - Turquoise */
  --color-turquoise: #1baa94;
  --color-turquoise-dark-2: #2dd2b9;
  --shadow-down-soft-s: 0px 1px 4px rgba(0, 0, 0, 0.08), 0px 4px 6px rgba(0, 0, 0, 0.06);
  --shadow-down-s: 0px 1px 4px rgba(0, 0, 0, 0.18), 0px 4px 6px rgba(0, 0, 0, 0.15);
  --shadow-down-m: 0px 1px 4px rgba(0, 0, 0, 0.18), 0px 6px 12px rgba(0, 0, 0, 0.15);
}

.border-radius {
  border-radius: 4px;
}

.border-radius-m {
  border-radius: 6px;
}

.border-radius-rounded {
  border-radius: 100px;
}

.border-radius-circle {
  border-radius: 100%;
}

/*! Sizing modifiers */
.width-xs {
  width: 4px;
}

.height-xs {
  height: 4px;
}

.min-width-xs {
  min-width: 4px;
}

.min-height-xs {
  min-height: 4px;
}

.max-width-xs {
  max-width: 4px;
}

.max-height-xs {
  max-height: 4px;
}

.width-s {
  width: 8px;
}

.height-s {
  height: 8px;
}

.min-width-s {
  min-width: 8px;
}

.min-height-s {
  min-height: 8px;
}

.max-width-s {
  max-width: 8px;
}

.max-height-s {
  max-height: 8px;
}

.width-base {
  width: 16px;
}

.height-base {
  height: 16px;
}

.min-width-base {
  min-width: 16px;
}

.min-height-base {
  min-height: 16px;
}

.max-width-base {
  max-width: 16px;
}

.max-height-base {
  max-height: 16px;
}

.width-m {
  width: 24px;
}

.height-m {
  height: 24px;
}

.min-width-m {
  min-width: 24px;
}

.min-height-m {
  min-height: 24px;
}

.max-width-m {
  max-width: 24px;
}

.max-height-m {
  max-height: 24px;
}

.width-l {
  width: 32px;
}

.height-l {
  height: 32px;
}

.min-width-l {
  min-width: 32px;
}

.min-height-l {
  min-height: 32px;
}

.max-width-l {
  max-width: 32px;
}

.max-height-l {
  max-height: 32px;
}

.width-xl {
  width: 40px;
}

.height-xl {
  height: 40px;
}

.min-width-xl {
  min-width: 40px;
}

.min-height-xl {
  min-height: 40px;
}

.max-width-xl {
  max-width: 40px;
}

.max-height-xl {
  max-height: 40px;
}

.width-xxl {
  width: 48px;
}

.height-xxl {
  height: 48px;
}

.min-width-xxl {
  min-width: 48px;
}

.min-height-xxl {
  min-height: 48px;
}

.max-width-xxl {
  max-width: 48px;
}

.max-height-xxl {
  max-height: 48px;
}

.width-xxxl {
  width: 78px;
}

.height-xxxl {
  height: 78px;
}

.min-width-xxxl {
  min-width: 78px;
}

.min-height-xxxl {
  min-height: 78px;
}

.max-width-xxxl {
  max-width: 78px;
}

.max-height-xxxl {
  max-height: 78px;
}

.width-auto {
  width: auto;
}

.height-auto {
  height: auto;
}

.min-width-auto {
  min-width: auto;
}

.min-height-auto {
  min-height: auto;
}

.max-width-auto {
  max-width: auto;
}

.max-height-auto {
  max-height: auto;
}

/*! y axis spacing */
/*! x axis spacing */
/*! Spacing modifiers */
/*! phone spacing */
.phone .padding-xs--phone {
  padding-left: 4px;
}
.phone .padding-top-xs--phone {
  padding-left: 4px;
}
.phone .padding-right-xs--phone {
  padding-left: 4px;
}
.phone .padding-bottom-xs--phone {
  padding-left: 4px;
}
.phone .padding-left-xs--phone {
  padding-left: 4px;
}
.phone .margin-xs--phone {
  padding-left: 4px;
}
.phone .margin-top-xs--phone {
  padding-left: 4px;
}
.phone .margin-right-xs--phone {
  padding-left: 4px;
}
.phone .margin-bottom-xs--phone {
  padding-left: 4px;
}
.phone .margin-left-xs--phone {
  padding-left: 4px;
}
.phone .padding-s--phone {
  padding-left: 8px;
}
.phone .padding-top-s--phone {
  padding-left: 8px;
}
.phone .padding-right-s--phone {
  padding-left: 8px;
}
.phone .padding-bottom-s--phone {
  padding-left: 8px;
}
.phone .padding-left-s--phone {
  padding-left: 8px;
}
.phone .margin-s--phone {
  padding-left: 8px;
}
.phone .margin-top-s--phone {
  padding-left: 8px;
}
.phone .margin-right-s--phone {
  padding-left: 8px;
}
.phone .margin-bottom-s--phone {
  padding-left: 8px;
}
.phone .margin-left-s--phone {
  padding-left: 8px;
}
.phone .padding-base--phone {
  padding-left: 16px;
}
.phone .padding-top-base--phone {
  padding-left: 16px;
}
.phone .padding-right-base--phone {
  padding-left: 16px;
}
.phone .padding-bottom-base--phone {
  padding-left: 16px;
}
.phone .padding-left-base--phone {
  padding-left: 16px;
}
.phone .margin-base--phone {
  padding-left: 16px;
}
.phone .margin-top-base--phone {
  padding-left: 16px;
}
.phone .margin-right-base--phone {
  padding-left: 16px;
}
.phone .margin-bottom-base--phone {
  padding-left: 16px;
}
.phone .margin-left-base--phone {
  padding-left: 16px;
}
.phone .padding-m--phone {
  padding-left: 24px;
}
.phone .padding-top-m--phone {
  padding-left: 24px;
}
.phone .padding-right-m--phone {
  padding-left: 24px;
}
.phone .padding-bottom-m--phone {
  padding-left: 24px;
}
.phone .padding-left-m--phone {
  padding-left: 24px;
}
.phone .margin-m--phone {
  padding-left: 24px;
}
.phone .margin-top-m--phone {
  padding-left: 24px;
}
.phone .margin-right-m--phone {
  padding-left: 24px;
}
.phone .margin-bottom-m--phone {
  padding-left: 24px;
}
.phone .margin-left-m--phone {
  padding-left: 24px;
}
.phone .padding-l--phone {
  padding-left: 32px;
}
.phone .padding-top-l--phone {
  padding-left: 32px;
}
.phone .padding-right-l--phone {
  padding-left: 32px;
}
.phone .padding-bottom-l--phone {
  padding-left: 32px;
}
.phone .padding-left-l--phone {
  padding-left: 32px;
}
.phone .margin-l--phone {
  padding-left: 32px;
}
.phone .margin-top-l--phone {
  padding-left: 32px;
}
.phone .margin-right-l--phone {
  padding-left: 32px;
}
.phone .margin-bottom-l--phone {
  padding-left: 32px;
}
.phone .margin-left-l--phone {
  padding-left: 32px;
}
.phone .padding-xl--phone {
  padding-left: 40px;
}
.phone .padding-top-xl--phone {
  padding-left: 40px;
}
.phone .padding-right-xl--phone {
  padding-left: 40px;
}
.phone .padding-bottom-xl--phone {
  padding-left: 40px;
}
.phone .padding-left-xl--phone {
  padding-left: 40px;
}
.phone .margin-xl--phone {
  padding-left: 40px;
}
.phone .margin-top-xl--phone {
  padding-left: 40px;
}
.phone .margin-right-xl--phone {
  padding-left: 40px;
}
.phone .margin-bottom-xl--phone {
  padding-left: 40px;
}
.phone .margin-left-xl--phone {
  padding-left: 40px;
}
.phone .padding-xxl--phone {
  padding-left: 48px;
}
.phone .padding-top-xxl--phone {
  padding-left: 48px;
}
.phone .padding-right-xxl--phone {
  padding-left: 48px;
}
.phone .padding-bottom-xxl--phone {
  padding-left: 48px;
}
.phone .padding-left-xxl--phone {
  padding-left: 48px;
}
.phone .margin-xxl--phone {
  padding-left: 48px;
}
.phone .margin-top-xxl--phone {
  padding-left: 48px;
}
.phone .margin-right-xxl--phone {
  padding-left: 48px;
}
.phone .margin-bottom-xxl--phone {
  padding-left: 48px;
}
.phone .margin-left-xxl--phone {
  padding-left: 48px;
}
.phone .padding-xxxl--phone {
  padding-left: 78px;
}
.phone .padding-top-xxxl--phone {
  padding-left: 78px;
}
.phone .padding-right-xxxl--phone {
  padding-left: 78px;
}
.phone .padding-bottom-xxxl--phone {
  padding-left: 78px;
}
.phone .padding-left-xxxl--phone {
  padding-left: 78px;
}
.phone .margin-xxxl--phone {
  padding-left: 78px;
}
.phone .margin-top-xxxl--phone {
  padding-left: 78px;
}
.phone .margin-right-xxxl--phone {
  padding-left: 78px;
}
.phone .margin-bottom-xxxl--phone {
  padding-left: 78px;
}
.phone .margin-left-xxxl--phone {
  padding-left: 78px;
}
.phone .padding-auto--phone {
  padding-left: auto;
}
.phone .padding-top-auto--phone {
  padding-left: auto;
}
.phone .padding-right-auto--phone {
  padding-left: auto;
}
.phone .padding-bottom-auto--phone {
  padding-left: auto;
}
.phone .padding-left-auto--phone {
  padding-left: auto;
}
.phone .margin-auto--phone {
  padding-left: auto;
}
.phone .margin-top-auto--phone {
  padding-left: auto;
}
.phone .margin-right-auto--phone {
  padding-left: auto;
}
.phone .margin-bottom-auto--phone {
  padding-left: auto;
}
.phone .margin-left-auto--phone {
  padding-left: auto;
}

/*| tablet spacing */
.tablet .padding-xs--tablet {
  padding-left: 4px;
}
.tablet .padding-top-xs--tablet {
  padding-left: 4px;
}
.tablet .padding-right-xs--tablet {
  padding-left: 4px;
}
.tablet .padding-bottom-xs--tablet {
  padding-left: 4px;
}
.tablet .padding-left-xs--tablet {
  padding-left: 4px;
}
.tablet .margin-xs--tablet {
  padding-left: 4px;
}
.tablet .margin-top-xs--tablet {
  padding-left: 4px;
}
.tablet .margin-right-xs--tablet {
  padding-left: 4px;
}
.tablet .margin-bottom-xs--tablet {
  padding-left: 4px;
}
.tablet .margin-left-xs--tablet {
  padding-left: 4px;
}
.tablet .padding-s--tablet {
  padding-left: 8px;
}
.tablet .padding-top-s--tablet {
  padding-left: 8px;
}
.tablet .padding-right-s--tablet {
  padding-left: 8px;
}
.tablet .padding-bottom-s--tablet {
  padding-left: 8px;
}
.tablet .padding-left-s--tablet {
  padding-left: 8px;
}
.tablet .margin-s--tablet {
  padding-left: 8px;
}
.tablet .margin-top-s--tablet {
  padding-left: 8px;
}
.tablet .margin-right-s--tablet {
  padding-left: 8px;
}
.tablet .margin-bottom-s--tablet {
  padding-left: 8px;
}
.tablet .margin-left-s--tablet {
  padding-left: 8px;
}
.tablet .padding-base--tablet {
  padding-left: 16px;
}
.tablet .padding-top-base--tablet {
  padding-left: 16px;
}
.tablet .padding-right-base--tablet {
  padding-left: 16px;
}
.tablet .padding-bottom-base--tablet {
  padding-left: 16px;
}
.tablet .padding-left-base--tablet {
  padding-left: 16px;
}
.tablet .margin-base--tablet {
  padding-left: 16px;
}
.tablet .margin-top-base--tablet {
  padding-left: 16px;
}
.tablet .margin-right-base--tablet {
  padding-left: 16px;
}
.tablet .margin-bottom-base--tablet {
  padding-left: 16px;
}
.tablet .margin-left-base--tablet {
  padding-left: 16px;
}
.tablet .padding-m--tablet {
  padding-left: 24px;
}
.tablet .padding-top-m--tablet {
  padding-left: 24px;
}
.tablet .padding-right-m--tablet {
  padding-left: 24px;
}
.tablet .padding-bottom-m--tablet {
  padding-left: 24px;
}
.tablet .padding-left-m--tablet {
  padding-left: 24px;
}
.tablet .margin-m--tablet {
  padding-left: 24px;
}
.tablet .margin-top-m--tablet {
  padding-left: 24px;
}
.tablet .margin-right-m--tablet {
  padding-left: 24px;
}
.tablet .margin-bottom-m--tablet {
  padding-left: 24px;
}
.tablet .margin-left-m--tablet {
  padding-left: 24px;
}
.tablet .padding-l--tablet {
  padding-left: 32px;
}
.tablet .padding-top-l--tablet {
  padding-left: 32px;
}
.tablet .padding-right-l--tablet {
  padding-left: 32px;
}
.tablet .padding-bottom-l--tablet {
  padding-left: 32px;
}
.tablet .padding-left-l--tablet {
  padding-left: 32px;
}
.tablet .margin-l--tablet {
  padding-left: 32px;
}
.tablet .margin-top-l--tablet {
  padding-left: 32px;
}
.tablet .margin-right-l--tablet {
  padding-left: 32px;
}
.tablet .margin-bottom-l--tablet {
  padding-left: 32px;
}
.tablet .margin-left-l--tablet {
  padding-left: 32px;
}
.tablet .padding-xl--tablet {
  padding-left: 40px;
}
.tablet .padding-top-xl--tablet {
  padding-left: 40px;
}
.tablet .padding-right-xl--tablet {
  padding-left: 40px;
}
.tablet .padding-bottom-xl--tablet {
  padding-left: 40px;
}
.tablet .padding-left-xl--tablet {
  padding-left: 40px;
}
.tablet .margin-xl--tablet {
  padding-left: 40px;
}
.tablet .margin-top-xl--tablet {
  padding-left: 40px;
}
.tablet .margin-right-xl--tablet {
  padding-left: 40px;
}
.tablet .margin-bottom-xl--tablet {
  padding-left: 40px;
}
.tablet .margin-left-xl--tablet {
  padding-left: 40px;
}
.tablet .padding-xxl--tablet {
  padding-left: 48px;
}
.tablet .padding-top-xxl--tablet {
  padding-left: 48px;
}
.tablet .padding-right-xxl--tablet {
  padding-left: 48px;
}
.tablet .padding-bottom-xxl--tablet {
  padding-left: 48px;
}
.tablet .padding-left-xxl--tablet {
  padding-left: 48px;
}
.tablet .margin-xxl--tablet {
  padding-left: 48px;
}
.tablet .margin-top-xxl--tablet {
  padding-left: 48px;
}
.tablet .margin-right-xxl--tablet {
  padding-left: 48px;
}
.tablet .margin-bottom-xxl--tablet {
  padding-left: 48px;
}
.tablet .margin-left-xxl--tablet {
  padding-left: 48px;
}
.tablet .padding-xxxl--tablet {
  padding-left: 78px;
}
.tablet .padding-top-xxxl--tablet {
  padding-left: 78px;
}
.tablet .padding-right-xxxl--tablet {
  padding-left: 78px;
}
.tablet .padding-bottom-xxxl--tablet {
  padding-left: 78px;
}
.tablet .padding-left-xxxl--tablet {
  padding-left: 78px;
}
.tablet .margin-xxxl--tablet {
  padding-left: 78px;
}
.tablet .margin-top-xxxl--tablet {
  padding-left: 78px;
}
.tablet .margin-right-xxxl--tablet {
  padding-left: 78px;
}
.tablet .margin-bottom-xxxl--tablet {
  padding-left: 78px;
}
.tablet .margin-left-xxxl--tablet {
  padding-left: 78px;
}
.tablet .padding-auto--tablet {
  padding-left: auto;
}
.tablet .padding-top-auto--tablet {
  padding-left: auto;
}
.tablet .padding-right-auto--tablet {
  padding-left: auto;
}
.tablet .padding-bottom-auto--tablet {
  padding-left: auto;
}
.tablet .padding-left-auto--tablet {
  padding-left: auto;
}
.tablet .margin-auto--tablet {
  padding-left: auto;
}
.tablet .margin-top-auto--tablet {
  padding-left: auto;
}
.tablet .margin-right-auto--tablet {
  padding-left: auto;
}
.tablet .margin-bottom-auto--tablet {
  padding-left: auto;
}
.tablet .margin-left-auto--tablet {
  padding-left: auto;
}