@innovaccer/design-system/dist/index.umd.css

React components library project for Innovaccer Design System

/**** Color Primitives ****/
:root {
  /* Blue */
  --color-blue-100: #f0f9ff;
  --color-blue-200: #d6eeff;
  --color-blue-300: #c2e4ff;
  --color-blue-400: #a8d8ff;
  --color-blue-500: #8bcafe;
  --color-blue-600: #6fb7fb;
  --color-blue-700: #4fa3f8;
  --color-blue-800: #2e8ef5;
  --color-blue-900: #0a74f5;
  --color-blue-1000: #0060d6;
  --color-blue-1100: #0051ad;
  --color-blue-1200: #003e85;
  --color-blue-1300: #003066;
  --color-blue-1400: #002147;
  --color-blue-1000-4a: rgba(0, 96, 214, 0.04);
  --color-blue-1000-12a: rgba(0, 96, 214, 0.12);
  --color-blue-1000-16a: rgba(0, 96, 214, 0.16);
  --color-blue-200-48a: rgba(214, 238, 255, 0.48);
  --color-blue-500-48a: rgba(139, 202, 254, 0.48);
  --color-blue-1200-16a: rgba(0, 62, 133, 0.16);

  /* Red */
  --color-red-100: #fff2f0;
  --color-red-200: #ffddd6;
  --color-red-300: #ffccc2;
  --color-red-400: #ffb7a8;
  --color-red-500: #fe9e8b;
  --color-red-600: #fb866f;
  --color-red-700: #f86b4f;
  --color-red-800: #f54f2e;
  --color-red-900: #f5310a;
  --color-red-1000: #d62400;
  --color-red-1100: #ad1d00;
  --color-red-1200: #851600;
  --color-red-1300: #611000;
  --color-red-1400: #470c00;
  --color-red-1000-4a: rgba(214, 36, 0, 0.04);
  --color-red-1000-16a: rgba(214, 36, 0, 0.16);
  --color-red-1200-16a: rgba(133, 22, 0, 0.16);

  /* Green */
  --color-green-100: #deffdb;
  --color-green-200: #c4fcc0;
  --color-green-300: #a0f69d;
  --color-green-400: #88ee87;
  --color-green-500: #6be16d;
  --color-green-600: #4fcf55;
  --color-green-700: #27b933;
  --color-green-800: #07a61a;
  --color-green-900: #008f11;
  --color-green-1000: #007a0e;
  --color-green-1100: #00660c;
  --color-green-1200: #00520a;
  --color-green-1300: #004208;
  --color-green-1400: #002e05;
  --color-green-1000-4a: rgba(0, 122, 14, 0.04);
  --color-green-1000-16a: rgba(0, 122, 14, 0.16);
  --color-green-1200-16a: rgba(0, 82, 10, 0.16);

  /* Yellow */
  --color-yellow-100: #fff9e5;
  --color-yellow-200: #fff5d6;
  --color-yellow-300: #fff0c2;
  --color-yellow-400: #ffe9a8;
  --color-yellow-500: #fee18b;
  --color-yellow-600: #fbd86f;
  --color-yellow-700: #f8cd4f;
  --color-yellow-800: #f5c32e;
  --color-yellow-900: #f5ba0a;
  --color-yellow-1000: #d6a100;
  --color-yellow-1100: #ad8200;
  --color-yellow-1200: #856300;
  --color-yellow-1300: #664d00;
  --color-yellow-1400: #473600;
  --color-yellow-900-4a: rgba(245, 186, 10, 0.04);
  --color-yellow-900-16a: rgba(245, 186, 10, 0.16);
  --color-yellow-1000-16a: rgba(214, 161, 0, 0.16);
  --color-yellow-1100-16a: rgba(173, 130, 0, 0.16);

  /* Orange */
  --color-orange-100: #fff2db;
  --color-orange-200: #ffeccc;
  --color-orange-300: #ffe0ad;
  --color-orange-400: #ffce85;
  --color-orange-500: #ffba61;
  --color-orange-600: #ffaf4d;
  --color-orange-700: #ffa238;
  --color-orange-800: #ff931f;
  --color-orange-900: #ff8000;
  --color-orange-1000: #e56f00;
  --color-orange-1100: #cc5f00;
  --color-orange-1200: #b24d00;
  --color-orange-1300: #7a2f00;
  --color-orange-1400: #5c2200;
  --color-orange-1000-4a: rgba(229, 111, 0, 0.04);
  --color-orange-1000-16a: rgba(229, 111, 0, 0.16);

  /* Violet */
  --color-violet-100: #f7f0ff;
  --color-violet-200: #ebdbff;
  --color-violet-300: #dec7ff;
  --color-violet-400: #d3b4fd;
  --color-violet-500: #c7a0fd;
  --color-violet-600: #b689fb;
  --color-violet-700: #a771f9;
  --color-violet-800: #9657f4;
  --color-violet-900: #823aee;
  --color-violet-1000: #6f21e4;
  --color-violet-1100: #601ec2;
  --color-violet-1200: #531ba7;
  --color-violet-1300: #3e0e8b;
  --color-violet-1400: #2b0868;
  --color-violet-1000-16a: rgba(111, 33, 228, 0.16);

  /* Indigo */
  --color-indigo-100: #f2f3fd;
  --color-indigo-200: #daddfb;
  --color-indigo-300: #c8ccf9;
  --color-indigo-400: #bbc0f7;
  --color-indigo-500: #a8aff5;
  --color-indigo-600: #919af2;
  --color-indigo-700: #7d86ed;
  --color-indigo-800: #6873e8;
  --color-indigo-900: #5460e3;
  --color-indigo-1000: #3b48de;
  --color-indigo-1100: #1f2ed6;
  --color-indigo-1200: #1422b8;
  --color-indigo-1300: #0d1677;
  --color-indigo-1400: #0b1365;
  --color-indigo-1000-16a: rgba(59, 72, 222, 0.16);

  /* Lime */
  --color-lime-100: #ecffd1;
  --color-lime-200: #defcb0;
  --color-lime-300: #cbf98b;
  --color-lime-400: #b9f466;
  --color-lime-500: #a7ef43;
  --color-lime-600: #9aeb28;
  --color-lime-700: #8ce114;
  --color-lime-800: #7ecf0c;
  --color-lime-900: #70bc06;
  --color-lime-1000: #62a701;
  --color-lime-1100: #508901;
  --color-lime-1200: #3e6b00;
  --color-lime-1300: #294600;
  --color-lime-1400: #1b2e00;
  --color-lime-900-16a: rgba(112, 188, 6, 0.16);
  --color-lime-1000-16a: rgba(98, 167, 1, 0.16);

  /* Cyan */
  --color-cyan-100: #dbfaff;
  --color-cyan-200: #bdf5ff;
  --color-cyan-300: #99eeff;
  --color-cyan-400: #8beafd;
  --color-cyan-500: #7ee6fb;
  --color-cyan-600: #68def8;
  --color-cyan-700: #52d6f4;
  --color-cyan-800: #31cbf2;
  --color-cyan-900: #15c3ef;
  --color-cyan-1000: #0fabd2;
  --color-cyan-1100: #0589ad;
  --color-cyan-1200: #006280;
  --color-cyan-1300: #003f52;
  --color-cyan-1400: #00232e;

  /* Sea */
  --color-sea-100: #ddfdfa;
  --color-sea-200: #c4f8f3;
  --color-sea-300: #a5f3ec;
  --color-sea-400: #8ceee7;
  --color-sea-500: #73e7e0;
  --color-sea-600: #5ce0d7;
  --color-sea-700: #45d9cf;
  --color-sea-800: #23d7cb;
  --color-sea-900: #16c0b7;
  --color-sea-1000: #0ca79f;
  --color-sea-1100: #04867f;
  --color-sea-1200: #00615c;
  --color-sea-1300: #00423f;
  --color-sea-1400: #002927;

  /* Magenta */
  --color-magenta-100: #fff0f5;
  --color-magenta-200: #ffdbe8;
  --color-magenta-300: #ffc2d8;
  --color-magenta-400: #ffadcb;
  --color-magenta-500: #ff99c0;
  --color-magenta-600: #ff85b4;
  --color-magenta-700: #fe71a7;
  --color-magenta-800: #fc5a98;
  --color-magenta-900: #fa428c;
  --color-magenta-1000: #f7267a;
  --color-magenta-1100: #e40763;
  --color-magenta-1200: #b00753;
  --color-magenta-1300: #850040;
  --color-magenta-1400: #520029;

  /* Pink */
  --color-pink-100: #fff0fd;
  --color-pink-200: #ffe0fb;
  --color-pink-300: #ffd1f9;
  --color-pink-400: #ffc7f7;
  --color-pink-500: #febdf7;
  --color-pink-600: #fdaff5;
  --color-pink-700: #fca1f6;
  --color-pink-800: #f88cf2;
  --color-pink-900: #f47cf2;
  --color-pink-1000: #ed68ed;
  --color-pink-1100: #d016d0;
  --color-pink-1200: #ae09ae;
  --color-pink-1300: #510151;
  --color-pink-1400: #410c40;

  /* Gray */
  --color-gray-100: #f7f7f7;
  --color-gray-200: #ebebeb;
  --color-gray-300: #e0e0e0;
  --color-gray-400: #d4d4d4;
  --color-gray-500: #c4c4c4;
  --color-gray-600: #b5b5b5;
  --color-gray-700: #a3a3a3;
  --color-gray-800: #858585;
  --color-gray-900: #636363;
  --color-gray-1000: #575757;
  --color-gray-1100: #424242;
  --color-gray-1200: #333333;
  --color-gray-1300: #242424;
  --color-gray-1400: #1a1a1a;
  --color-gray-100-40a: rgba(247, 247, 247, 0.4);
  --color-gray-400-16a: rgba(212, 212, 212, 0.16);
  --color-gray-1400-16a: rgba(26, 26, 26, 0.16);
  --color-gray-1400-48a: rgba(26, 26, 26, 0.48);
  --color-gray-1400-64a: rgba(26, 26, 26, 0.64);
  --color-gray-1400-80a: rgba(26, 26, 26, 0.8);

  /* Defaults */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-white-48a: rgba(255, 255, 255, 0.48);
  --color-white-80a: rgba(255, 255, 255, 0.8);

  /**** Semantic Colors (mapped to primitives) ****/

  /* Warning (Yellow) */
  --haldi: var(--color-yellow-900);
  --haldi-dark: var(--color-yellow-1100);
  --haldi-darker: var(--color-yellow-1300);
  --haldi-light: var(--color-yellow-700);
  --haldi-lighter: var(--color-yellow-500);
  --haldi-lightest: var(--color-yellow-200);

  /* Primary (Blue) */
  --jal: var(--color-blue-1000);
  --jal-dark: var(--color-blue-1200);
  --jal-darker: var(--color-blue-1300);
  --jal-light: var(--color-blue-700);
  --jal-lighter: var(--color-blue-500);
  --jal-lightest: var(--color-blue-200);

  /* Accent 2 (Violet) */
  --jamun: var(--color-violet-1000);
  --jamun-dark: var(--color-violet-1200);
  --jamun-darker: var(--color-violet-1400);
  --jamun-light: var(--color-violet-700);
  --jamun-lighter: var(--color-violet-500);
  --jamun-lightest: var(--color-violet-200);

  /* Alert (Red) */
  --mirch: var(--color-red-1000);
  --mirch-dark: var(--color-red-1200);
  --mirch-darker: var(--color-red-1300);
  --mirch-light: var(--color-red-700);
  --mirch-lighter: var(--color-red-500);
  --mirch-lightest: var(--color-red-200);

  /* Accent 3 (Indigo) */
  --neel: var(--color-indigo-1000);
  --neel-dark: var(--color-indigo-1200);
  --neel-darker: var(--color-indigo-1400);
  --neel-light: var(--color-indigo-700);
  --neel-lighter: var(--color-indigo-500);
  --neel-lightest: var(--color-indigo-200);

  /* Success (Green) */
  --neem: var(--color-green-1000);
  --neem-dark: var(--color-green-1200);
  --neem-darker: var(--color-green-1300);
  --neem-light: var(--color-green-700);
  --neem-lighter: var(--color-green-500);
  --neem-lightest: var(--color-green-200);

  /* Neutral (Gray) */
  --night: var(--color-gray-1400);
  --night-light: var(--color-gray-1100);
  --night-lighter: var(--color-gray-900);
  --night-lightest: var(--color-gray-700);

  /* Accent 4 (Lime) */
  --nimbu: var(--color-lime-900);
  --nimbu-dark: var(--color-lime-1100);
  --nimbu-darker: var(--color-lime-1300);
  --nimbu-light: var(--color-lime-700);
  --nimbu-lighter: var(--color-lime-500);
  --nimbu-lightest: var(--color-lime-200);

  /* Shadows */
  --shadow-0: #ffffff;
  --shadow-10: #ffffff;
  --shadow-20: #ffffff;
  --shadow-30: #ffffff;

  /* Secondary (Gray) */
  --stone: var(--color-gray-400);
  --stone-dark: var(--color-gray-500);
  --stone-light: var(--color-gray-300);
  --stone-lighter: var(--color-gray-200);
  --stone-lightest: var(--color-gray-100);

  /* Accent 1 (Orange) */
  --tawak: var(--color-orange-1000);
  --tawak-dark: var(--color-orange-1200);
  --tawak-darker: var(--color-orange-1300);
  --tawak-light: var(--color-orange-700);
  --tawak-lighter: var(--color-orange-500);
  --tawak-lightest: var(--color-orange-200);

  --white: var(--color-white);

  /**** Fonts ****/
} /* close :root */

:root {
  /* Colors */

  /* default */
  --primary: var(--jal);
  --secondary: var(--stone);
  --success: var(--neem);
  --alert: var(--mirch);
  --warning: var(--haldi);
  --accent1: var(--tawak);
  --accent2: var(--jamun);
  --accent3: var(--neel);
  --accent4: var(--nimbu);
  --inverse: var(--night);

  /* dark */
  --primary-dark: var(--jal-dark);
  --secondary-dark: var(--stone-dark);
  --success-dark: var(--neem-dark);
  --alert-dark: var(--mirch-dark);
  --warning-dark: var(--haldi-dark);
  --accent1-dark: var(--tawak-dark);
  --accent2-dark: var(--jamun-dark);
  --accent3-dark: var(--neel-dark);
  --accent4-dark: var(--nimbu-dark);

  /* darker */
  --primary-darker: var(--jal-darker);
  --success-darker: var(--neem-darker);
  --alert-darker: var(--mirch-darker);
  --warning-darker: var(--haldi-darker);
  --accent1-darker: var(--tawak-darker);
  --accent2-darker: var(--jamun-darker);
  --accent3-darker: var(--neel-darker);
  --accent4-darker: var(--nimbu-darker);

  /* light */
  --primary-light: var(--jal-light);
  --secondary-light: var(--stone-light);
  --success-light: var(--neem-light);
  --alert-light: var(--mirch-light);
  --warning-light: var(--haldi-light);
  --accent1-light: var(--tawak-light);
  --accent2-light: var(--jamun-light);
  --accent3-light: var(--neel-light);
  --accent4-light: var(--nimbu-light);
  --inverse-light: var(--night-light);

  /* lighter */
  --primary-lighter: var(--jal-lighter);
  --secondary-lighter: var(--stone-lighter);
  --success-lighter: var(--neem-lighter);
  --alert-lighter: var(--mirch-lighter);
  --warning-lighter: var(--haldi-lighter);
  --accent1-lighter: var(--tawak-lighter);
  --accent2-lighter: var(--jamun-lighter);
  --accent3-lighter: var(--neel-lighter);
  --accent4-lighter: var(--nimbu-lighter);
  --inverse-lighter: var(--night-lighter);

  /* lightest */
  --primary-lightest: var(--jal-lightest);
  --secondary-lightest: var(--stone-lightest);
  --success-lightest: var(--neem-lightest);
  --alert-lightest: var(--mirch-lightest);
  --warning-lightest: var(--haldi-lightest);
  --accent1-lightest: var(--tawak-lightest);
  --accent2-lightest: var(--jamun-lightest);
  --accent3-lightest: var(--neel-lightest);
  --accent4-lightest: var(--nimbu-lightest);
  --inverse-lightest: var(--night-lightest);

  /* Focus */
  --primary-focus: var(--primary-dark);
  --inverse-focus: var(--night);

  /* Ultra Light */
  --primary-ultra-light: var(--color-blue-100);
  --success-ultra-light: var(--color-green-100);
  --alert-ultra-light: var(--color-red-100);
  --warning-ultra-light: var(--color-yellow-100);
  --accent1-ultra-light: var(--color-orange-100);
  --accent2-ultra-light: var(--color-violet-100);
  --accent3-ultra-light: var(--color-indigo-100);
  --accent4-ultra-light: var(--color-lime-100);

  /* Avatar specific color for the time being */
  --primary-300: var(--color-blue-300);
  --success-300: var(--color-green-300);
  --alert-300: var(--color-red-300);
  --warning-300: var(--color-yellow-300);
  --accent1-300: var(--color-orange-300);
  --accent2-300: var(--color-violet-300);
  --accent3-300: var(--color-indigo-300);
  --accent4-300: var(--color-lime-300);

  /* shadow */
  --primary-shadow: color-mod(var(--primary) a(var(--opacity-4)));
  --secondary-shadow: color-mod(var(--secondary) a(var(--opacity-4)));
  --success-shadow: color-mod(var(--success) a(var(--opacity-4)));
  --alert-shadow: color-mod(var(--alert) a(var(--opacity-4)));
  --warning-shadow: color-mod(var(--warning) a(var(--opacity-4)));
  --accent1-shadow: color-mod(var(--accent1) a(var(--opacity-4)));
  --accent2-shadow: color-mod(var(--accent2) a(var(--opacity-4)));
  --accent3-shadow: color-mod(var(--accent3) a(var(--opacity-4)));
  --accent4-shadow: color-mod(var(--accent4) a(var(--opacity-4)));
  --inverse-shadow: color-mod(var(--inverse) a(var(--opacity-4)));

  /* Text colors */
  --text: var(--night);
  --text-subtle: var(--night-lighter);
  --text-link: var(--primary);
  --text-disabled: var(--inverse-lightest);
  --text-destructive: var(--alert);
  --text-white: var(--white);
  --text-success: var(--success);

  /* spacing - DEPRECATED */
  --spacing-xs: 1px;
  --spacing-s: 2px;
  --spacing-m: 4px;
  --spacing-0-75: 6px;
  --spacing: 8px;
  --spacing-l: 12px;
  /* 8 * 2 */
  --spacing-2: 16px;
  /* 8 * 3 */
  --spacing-xl: 24px;
  /* 8 * 4 */
  --spacing-3: 32px;
  /* 8 * 6 */
  --spacing-4: 48px;
  /* 8 * 8 */
  --spacing-5: 64px;
  /* 8 * 12 */
  --spacing-6: 96px;
  /* 8 * 16 */
  --spacing-7: 128px;
  /* 8 * 22 */
  --spacing-8: 176px;
  /* 8 * 32 */
  --spacing-9: 256px;

  /* Fonts */
  --font-family: 'Nunito Sans';

  /* Font size */
  --font-size-xxs: 4px;
  --font-size-xs: 8px;
  --font-size-s: 12px;
  --font-size: 14px;
  --font-size-m: 16px;
  --font-size-l: 20px;
  --font-size-xl: 28px;
  --font-size-xxl: 32px;
  --font-size-xxxl: 40px;

  /* Font weight  */
  --font-weight-normal: 400;
  --font-weight-medium: 600;
  --font-weight-bold: 700;
  --font-weight-bolder: 800;

  /* Line height or Font height  */
  --font-height-normal: normal;
  --font-height-s: 16px;
  --font-height: 20px;
  --font-height-m: 24px;
  --font-height-l: 32px;
  --font-height-xl: 40px;
  --font-height-xxl: 48px;

  /* Letter spacing */
  --letter-spacing: 0.5px;

  /* body settings */

  /* border */
  --border: var(--border-width-2-5) solid var(--secondary);
  --border-s: var(--border-width-05) solid var(--secondary);

  /* padding */

  /* shadow */
  --shadow-s: 0 1px 4px 0 rgba(0, 0, 0, 0.16);
  --shadow-m: 0 2px 8px 0 rgba(0, 0, 0, 0.16);
  --shadow-l: 0 4px 16px 0 rgba(0, 0, 0, 0.16);
  --shadow-spread: 0 0 0 3px;

  /* 
  Grid breakpoints
  Define the minimum dimensions at which your layout will change,
  adapting to different screen sizes, for use in media queries. 
  */

  --grid-s-breakpoint: 576px;
  --grid-m-breakpoint: 768px;
  --grid-l-breakpoint: 992px;
  --grid-xl-breakpoint: 1200px;

  /* 
  Grid columns
  Set the number of columns and specify the width of the gutters. 
  */

  --grid-columns: 12;

  /* Undefined colors */
  --card-subdued-bg: #fcfafa;

  /* Transparancy (Opacity) */
  --transparent-58: 0.58;

  /* Transition curve timing function */
  /* Use standard-easing when an element is visible from the beginning to the end of a motion. Ex-Expanding cards. */
  --standard-productive-curve: cubic-bezier(0.2, 0, 0.38, 0.9);
  --standard-expressive-curve: cubic-bezier(0.4, 0.14, 0.3, 1);
  /* Use entrance-easing when an element quickly appears and slows down to a stop. Ex-when adding elements to the view, such as a modal appearing. */
  --entrance-productive-curve: cubic-bezier(0, 0, 0.38, 0.9);
  --entrance-expressive-curve: cubic-bezier(0, 0, 0.3, 1);
  /* Use exit-easing when removing elements from view, such as closing a modal or toaster. */
  --exit-productive-curve: cubic-bezier(0.2, 0, 1, 0.9);
  --exit-expressive-curve: cubic-bezier(0.4, 0.14, 1, 1);

  /* Transition duration */
  --duration--fast-01: 80ms;
  --duration--fast-02: 120ms;
  --duration--moderate-01: 160ms;
  --duration--moderate-02: 240ms;
  --duration--slow-01: 400ms;
  --duration--slow-02: 720ms;

  /* Opacity */
  --opacity-1: 0.04;
  --opacity-2: 0.08;
  --opacity-3: 0.12;
  --opacity-4: 0.16;
  --opacity-6: 0.24;
  --opacity-8: 0.32;
  --opacity-10: 0.4;
  --opacity-12: 0.48;
  --opacity-16: 0.64;
  --opacity-20: 0.8;

  /* Spacing (value / 4) * 10 */
  --spacing-2-5: 1px;
  --spacing-05: 2px;
  --spacing-10: 4px;
  --spacing-15: 6px;
  --spacing-20: 8px;
  --spacing-30: 12px;
  --spacing-40: 16px;
  --spacing-60: 24px;
  --spacing-80: 32px;
  --spacing-120: 48px;
  --spacing-160: 64px;
  --spacing-240: 96px;
  --spacing-320: 128px;
  --spacing-440: 176px;
  --spacing-640: 256px;

  /* Border Radius */
  --border-radius-2-5: 1px;
  --border-radius-05: 2px;
  --border-radius-10: 4px;
  --border-radius-15: 6px;
  --border-radius-20: 8px;
  --border-radius-30: 12px;
  --border-radius-40: 16px;
  --border-radius-full: 9999px;

  /* Border Width */
  --border-width-2-5: 1px;
  --border-width-05: 2px;
  --border-width-7-5: 3px;
  --border-width-10: 4px;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.fade-in {
  animation: fadeIn var(--duration--fast-02) var(--standard-productive-curve);
}

.fade-out {
  animation: fadeOut var(--duration--fast-02) var(--standard-expressive-curve);
}

.opacity-0 {
  opacity: 0;
}

.opacity-1 {
  opacity: 1;
}

@keyframes exitLeftCurve {
  from {
    opacity: 1;
    left: 0;
  }

  to {
    opacity: 0;
    left: calc(-1 * var(--spacing-40));
  }
}

@keyframes entryLeftCurve {
  from {
    left: var(--spacing-40);
  }

  to {
    left: 0;
  }
}

@keyframes exitRightCurve {
  from {
    opacity: 1;
    left: 0;
  }

  to {
    opacity: 0;
    left: var(--spacing-40);
  }
}

@keyframes entryRightCurve {
  from {
    left: calc(-1 * var(--spacing-40));
  }

  to {
    left: 0;
  }
}

.slideOut-left {
  animation: exitLeftCurve var(--duration--moderate-02) var(--exit-expressive-curve);
  animation-fill-mode: forwards;
}

.slideIn-left {
  animation: fadeIn var(--duration--moderate-01) var(--entrance-expressive-curve),
    entryLeftCurve var(--duration--moderate-02) var(--entrance-expressive-curve);
}

.slideOut-right {
  animation: exitRightCurve var(--duration--moderate-02) var(--exit-expressive-curve);
  animation-fill-mode: forwards;
}

.slideIn-right {
  animation: fadeIn var(--duration--moderate-01) var(--entrance-expressive-curve),
    entryRightCurve var(--duration--moderate-02) var(--entrance-expressive-curve);
}

.rotate-clockwise {
  transform: rotateZ(360deg);
  transition: var(--duration--moderate-02) var(--standard-productive-curve);
  animation-fill-mode: forwards;
}

.rotate-anticlockwise {
  transform: rotateZ(180deg);
  transition: var(--duration--moderate-02) var(--standard-productive-curve);
}

.shimmer-text {
  text-align: center;
  background: var(--inverse-light);
  color: rgba(47, 47, 47, 0.1) !important;
  background: linear-gradient(to right, var(--inverse-light) 0%, var(--secondary-dark) 50%, var(--inverse-light) 100%);
  background-size: 200% 100%;
  background-clip: text;
  animation: shimmerText 2s infinite linear forwards;
  background-clip: text;
}

@keyframes shimmerText {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}

.ss {
  background: red;
}

body {
  font-family: var(--font-family);
  color: var(--text);
  line-height: var(--font-height);
  margin: 0;
  padding: 0;
  font-size: var(--font-size);
}

.PopperWrapper-trigger {
  display: inline-flex;
  flex-grow: 1;
}

.Overlay-container {
  display: flex;
  position: relative;
  flex-direction: row;
  justify-content: center;
  z-index: 1500;
}

.Overlay-container--open {
  animation-timing-function: cubic-bezier(0, 0, 0.3, 1);
}

.Overlay-container--close {
  animation-timing-function: cubic-bezier(0.4, 0.14, 1, 1);
}

::-webkit-scrollbar {
  width: 16px;
}

::-webkit-scrollbar-thumb {
  background: var(--secondary-dark);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--inverse-lightest);
  border: 2px solid transparent;
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:active {
  background: var(--inverse-lighter);
  border: 2px solid transparent;
  background-clip: content-box;
}

.align-baseline {
  vertical-align: baseline !important;
}

.align-top {
  vertical-align: top !important;
}

.align-middle {
  vertical-align: middle !important;
}

.align-bottom {
  vertical-align: bottom !important;
}

.align-text-bottom {
  vertical-align: text-bottom !important;
}

.align-text-top {
  vertical-align: text-top !important;
}

.bg-primary {
  background-color: var(--primary) !important;
}

.bg-secondary {
  background-color: var(--secondary) !important;
}

.bg-secondary-lighter {
  background-color: var(--secondary-lighter) !important;
}

.bg-secondary-lightest {
  background-color: var(--secondary-lightest) !important;
}

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

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

.bg-danger {
  background-color: var(--alert) !important;
}

.bg-light {
  background-color: var(--white) !important;
}

.bg-dark {
  background-color: var(--inverse) !important;
}

.bg-transparent {
  background-color: transparent !important;
}

.border {
  border: var(--border) !important;
}

.border-top {
  border-top: var(--border) !important;
}

.border-bottom {
  border-bottom: var(--border) !important;
}

.border-right {
  border-right: var(--border) !important;
}

.border-left {
  border-left: var(--border) !important;
}

.border-0 {
  border: 0 !important;
}

.border-top-0 {
  border-top: 0 !important;
}

.border-right-0 {
  border-right: 0 !important;
}

.border-bottom-0 {
  border-bottom: 0 !important;
}

.border-left-0 {
  border-left: 0 !important;
}

.rounded-2-5 {
  border-radius: var(--border-radius-2-5) !important;
}

.rounded-05 {
  border-radius: var(--border-radius-05) !important;
}

.rounded-10 {
  border-radius: var(--border-radius-10) !important;
}

.rounded-15 {
  border-radius: var(--border-radius-15) !important;
}

.rounded-20 {
  border-radius: var(--border-radius-20) !important;
}

.rounded-30 {
  border-radius: var(--border-radius-30) !important;
}

.rounded-40 {
  border-radius: var(--border-radius-40) !important;
}

.rounded-full {
  border-radius: var(--border-radius-full) !important;
}

.cursor-pointer {
  cursor: pointer;
}

.cursor-default {
  cursor: default;
}

.cursor-not-allowed {
  cursor: not-allowed;
}

.d-none {
  display: none !important;
}

.d-inline {
  display: inline !important;
}

.d-inline-block {
  display: inline-block !important;
}

.d-block {
  display: block !important;
}

.d-table {
  display: table !important;
}

.d-table-row {
  display: table-row !important;
}

.d-table-cell {
  display: table-cell !important;
}

.d-flex {
  display: flex !important;
}

.d-inline-flex {
  display: inline-flex !important;
}

.flex-fill {
  flex: 1 1 auto !important;
}

.flex-row {
  flex-direction: row !important;
}

.flex-column {
  flex-direction: column !important;
}

.flex-row-reverse {
  flex-direction: row-reverse !important;
}

.flex-column-reverse {
  flex-direction: column-reverse !important;
}

.flex-grow-0 {
  flex-grow: 0 !important;
}

.flex-grow-1 {
  flex-grow: 1 !important;
}

.flex-shrink-0 {
  flex-shrink: 0 !important;
}

.flex-shrink-1 {
  flex-shrink: 1 !important;
}

.flex-wrap {
  flex-wrap: wrap !important;
}

.flex-nowrap {
  flex-wrap: nowrap !important;
}

.flex-wrap-reverse {
  flex-wrap: wrap-reverse !important;
}

.justify-content-start {
  justify-content: flex-start !important;
}

.justify-content-end {
  justify-content: flex-end !important;
}

.justify-content-center {
  justify-content: center !important;
}

.justify-content-between {
  justify-content: space-between !important;
}

.justify-content-around {
  justify-content: space-around !important;
}

.justify-content-evenly {
  justify-content: space-evenly !important;
}

.align-items-start {
  align-items: flex-start !important;
}

.align-items-end {
  align-items: flex-end !important;
}

.align-items-center {
  align-items: center !important;
}

.align-items-baseline {
  align-items: baseline !important;
}

.align-items-stretch {
  align-items: stretch !important;
}

.align-content-start {
  align-content: flex-start !important;
}

.align-content-end {
  align-content: flex-end !important;
}

.align-content-center {
  align-content: center !important;
}

.align-content-between {
  align-content: space-between !important;
}

.align-content-around {
  align-content: space-around !important;
}

.align-content-stretch {
  align-content: stretch !important;
}

.align-self-auto {
  align-self: auto !important;
}

.align-self-start {
  align-self: flex-start !important;
}

.align-self-end {
  align-self: flex-end !important;
}

.align-self-center {
  align-self: center !important;
}

.align-self-baseline {
  align-self: baseline !important;
}

.align-self-stretch {
  align-self: stretch !important;
}

.order-first {
  order: -1 !important;
}

.order-0 {
  order: 0 !important;
}

.order-1 {
  order: 1 !important;
}

.order-2 {
  order: 2 !important;
}

.order-3 {
  order: 3 !important;
}

.order-4 {
  order: 4 !important;
}

.order-5 {
  order: 5 !important;
}

.order-last {
  order: 6 !important;
}

.Row {
  display: flex;
  flex-wrap: wrap;
  flex: 1 100%;
}

.Col {
  position: relative;
  box-sizing: border-box;
  flex: 1 0 0%;
}

.Col--auto {
  flex: 0 0 auto;
  width: auto;
}

.Col--1 {
  flex: 0 0 auto;
  width: calc(100% / var(--grid-columns) * 1);
}

.Col--2 {
  flex: 0 0 auto;
  width: calc(100% / var(--grid-columns) * 2);
}

.Col--3 {
  flex: 0 0 auto;
  width: calc(100% / var(--grid-columns) * 3);
}

.Col--4 {
  flex: 0 0 auto;
  width: calc(100% / var(--grid-columns) * 4);
}

.Col--5 {
  flex: 0 0 auto;
  width: calc(100% / var(--grid-columns) * 5);
}

.Col--6 {
  flex: 0 0 auto;
  width: calc(100% / var(--grid-columns) * 6);
}

.Col--7 {
  flex: 0 0 auto;
  width: calc(100% / var(--grid-columns) * 7);
}

.Col--8 {
  flex: 0 0 auto;
  width: calc(100% / var(--grid-columns) * 8);
}

.Col--9 {
  flex: 0 0 auto;
  width: calc(100% / var(--grid-columns) * 9);
}

.Col--10 {
  flex: 0 0 auto;
  width: calc(100% / var(--grid-columns) * 10);
}

.Col--11 {
  flex: 0 0 auto;
  width: calc(100% / var(--grid-columns) * 11);
}

.Col--12 {
  flex: 0 0 auto;
  width: calc(100% / var(--grid-columns) * 12);
}

/* if the viewport is between 0 to 575 pixels wide. */

@media (max-width: 575px) {
  .Col--xs-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .Col--xs-1 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 1);
  }
  .Col--xs-2 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 2);
  }
  .Col--xs-3 {
    flex: 0 0 auto;
  }
  .Col--xs-4 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 4);
  }
  .Col--xs-5 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 5);
  }
  .Col--xs-6 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 6);
  }
  .Col--xs-7 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 7);
  }
  .Col--xs-8 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 8);
  }
  .Col--xs-9 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 9);
  }
  .Col--xs-10 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 10);
  }
  .Col--xs-11 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 11);
  }
  .Col--xs-12 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 12);
  }
}

/* if the viewport is between 576 and 767 pixels wide. */

@media (min-width: 576px) and (max-width: 767px) {
  .Col--s-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .Col--s-1 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 1);
  }
  .Col--s-2 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 2);
  }
  .Col--s-3 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 3);
  }
  .Col--s-4 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 4);
  }
  .Col--s-5 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 5);
  }
  .Col--s-6 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 6);
  }
  .Col--s-7 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 7);
  }
  .Col--s-8 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 8);
  }
  .Col--s-9 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 9);
  }
  .Col--s-10 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 10);
  }
  .Col--s-11 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 11);
  }
  .Col--s-12 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 12);
  }
}

/* if the viewport is between 768 and 991 pixels wide. */

@media (min-width: 768px) and (max-width: 991px) {
  .Col--m-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .Col--m-1 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 1);
  }
  .Col--m-2 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 2);
  }
  .Col--m-3 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 3);
  }
  .Col--m-4 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 4);
  }
  .Col--m-5 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 5);
  }
  .Col--m-6 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 6);
  }
  .Col--m-7 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 7);
  }
  .Col--m-8 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 8);
  }
  .Col--m-9 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 9);
  }
  .Col--m-10 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 10);
  }
  .Col--m-11 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 11);
  }
  .Col--m-12 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 12);
  }
}

/* if the viewport is between 992 and 1199 pixels wide. */

@media (min-width: 992px) and (max-width: 1199px) {
  .Col--l-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .Col--l-1 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 1);
  }
  .Col--l-2 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 2);
  }
  .Col--l-3 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 3);
  }
  .Col--l-4 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 4);
  }
  .Col--l-5 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 5);
  }
  .Col--l-6 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 6);
  }
  .Col--l-7 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 7);
  }
  .Col--l-8 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 8);
  }
  .Col--l-9 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 9);
  }
  .Col--l-10 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 10);
  }
  .Col--l-11 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 11);
  }
  .Col--l-12 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 12);
  }
}

/* if the viewport is 1200 pixels wide or wider. */

@media (min-width: 1200px) {
  .Col--xl-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .Col--xl-1 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 1);
  }
  .Col--xl-2 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 2);
  }
  .Col--xl-3 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 3);
  }
  .Col--xl-4 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 4);
  }
  .Col--xl-5 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 5);
  }
  .Col--xl-6 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 6);
  }
  .Col--xl-7 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 7);
  }
  .Col--xl-8 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 8);
  }
  .Col--xl-9 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 9);
  }
  .Col--xl-10 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 10);
  }
  .Col--xl-11 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 11);
  }
  .Col--xl-12 {
    flex: 0 0 auto;
    width: calc(100% / var(--grid-columns) * 12);
  }
}

.overflow-auto {
  overflow: auto !important;
}

.overflow-hidden {
  overflow: hidden !important;
}

.position-static {
  position: static !important;
}

.position-relative {
  position: relative !important;
}

.position-absolute {
  position: absolute !important;
}

.position-fixed {
  position: fixed !important;
}

.position-sticky {
  position: -webkit-sticky !important;
  position: sticky !important;
}

.w-25 {
  width: 25% !important;
}

.w-50 {
  width: 50% !important;
}

.w-75 {
  width: 75% !important;
}

.w-100 {
  width: 100% !important;
}

.w-auto {
  width: auto !important;
}

.mw-100 {
  max-width: 100% !important;
}

.vw-25 {
  width: 25vw !important;
}

.vw-50 {
  width: 50vw !important;
}

.vw-75 {
  width: 75vw !important;
}

.vw-100 {
  width: 100vw !important;
}

.min-vw-100 {
  min-width: 100vw !important;
}

.h-25 {
  height: 25% !important;
}

.h-50 {
  height: 50% !important;
}

.h-75 {
  height: 75% !important;
}

.h-100 {
  height: 100% !important;
}

.h-auto {
  height: auto !important;
}

.mh-100 {
  max-height: 100% !important;
}

.vh-25 {
  height: 25vh !important;
}

.vh-50 {
  height: 50vh !important;
}

.vh-75 {
  height: 75vh !important;
}

.vh-100 {
  height: 100vh !important;
}

.min-vh-100 {
  min-height: 100vh !important;
}

.m-0 {
  margin: 0 !important;
}

.m-1 {
  margin: var(--spacing-2-5) !important;
}

.m-2 {
  margin: var(--spacing-05) !important;
}

.m-3 {
  margin: var(--spacing-10) !important;
}

.m-3-5 {
  margin: var(--spacing-15) !important;
}

.m-4 {
  margin: var(--spacing-20) !important;
}

.m-5 {
  margin: var(--spacing-30) !important;
}

.m-6 {
  margin: var(--spacing-40) !important;
}

.m-7 {
  margin: var(--spacing-60) !important;
}

.m-8 {
  margin: var(--spacing-80) !important;
}

.m-9 {
  margin: var(--spacing-120) !important;
}

.m-10 {
  margin: var(--spacing-160) !important;
}

.m-11 {
  margin: var(--spacing-240) !important;
}

.m-12 {
  margin: var(--spacing-320) !important;
}

.m-13 {
  margin: var(--spacing-440) !important;
}

.m-14 {
  margin: var(--spacing-640) !important;
}

.m-auto {
  margin: auto !important;
}

.mx-0 {
  margin-right: 0 !important;
  margin-left: 0 !important;
}

.mx-1 {
  margin-right: var(--spacing-2-5) !important;
  margin-left: var(--spacing-2-5) !important;
}

.mx-2 {
  margin-right: var(--spacing-05) !important;
  margin-left: var(--spacing-05) !important;
}

.mx-3 {
  margin-right: var(--spacing-10) !important;
  margin-left: var(--spacing-10) !important;
}

.mx-3-5 {
  margin-right: var(--spacing-15) !important;
  margin-left: var(--spacing-15) !important;
}

.mx-4 {
  margin-right: var(--spacing-20) !important;
  margin-left: var(--spacing-20) !important;
}

.mx-5 {
  margin-right: var(--spacing-30) !important;
  margin-left: var(--spacing-30) !important;
}

.mx-6 {
  margin-right: var(--spacing-40) !important;
  margin-left: var(--spacing-40) !important;
}

.mx-7 {
  margin-right: var(--spacing-60) !important;
  margin-left: var(--spacing-60) !important;
}

.mx-8 {
  margin-right: var(--spacing-80) !important;
  margin-left: var(--spacing-80) !important;
}

.mx-9 {
  margin-right: var(--spacing-120) !important;
  margin-left: var(--spacing-120) !important;
}

.mx-10 {
  margin-right: var(--spacing-160) !important;
  margin-left: var(--spacing-160) !important;
}

.mx-11 {
  margin-right: var(--spacing-240) !important;
  margin-left: var(--spacing-240) !important;
}

.mx-12 {
  margin-right: var(--spacing-320) !important;
  margin-left: var(--spacing-320) !important;
}

.mx-13 {
  margin-right: var(--spacing-440) !important;
  margin-left: var(--spacing-440) !important;
}

.mx-14 {
  margin-right: var(--spacing-640) !important;
  margin-left: var(--spacing-640) !important;
}

.mx-auto {
  margin-right: auto !important;
  margin-left: auto !important;
}

.my-0 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.my-1 {
  margin-top: var(--spacing-2-5) !important;
  margin-bottom: var(--spacing-2-5) !important;
}

.my-2 {
  margin-top: var(--spacing-05) !important;
  margin-bottom: var(--spacing-05) !important;
}

.my-3 {
  margin-top: var(--spacing-10) !important;
  margin-bottom: var(--spacing-10) !important;
}

.my-3-5 {
  margin-top: var(--spacing-15) !important;
  margin-bottom: var(--spacing-15) !important;
}

.my-4 {
  margin-top: var(--spacing-20) !important;
  margin-bottom: var(--spacing-20) !important;
}

.my-5 {
  margin-top: var(--spacing-30) !important;
  margin-bottom: var(--spacing-30) !important;
}

.my-6 {
  margin-top: var(--spacing-40) !important;
  margin-bottom: var(--spacing-40) !important;
}

.my-7 {
  margin-top: var(--spacing-60) !important;
  margin-bottom: var(--spacing-60) !important;
}

.my-8 {
  margin-top: var(--spacing-80) !important;
  margin-bottom: var(--spacing-80) !important;
}

.my-9 {
  margin-top: var(--spacing-120) !important;
  margin-bottom: var(--spacing-120) !important;
}

.my-10 {
  margin-top: var(--spacing-160) !important;
  margin-bottom: var(--spacing-160) !important;
}

.my-11 {
  margin-top: var(--spacing-240) !important;
  margin-bottom: var(--spacing-240) !important;
}

.my-12 {
  margin-top: var(--spacing-320) !important;
  margin-bottom: var(--spacing-320) !important;
}

.my-13 {
  margin-top: var(--spacing-440) !important;
  margin-bottom: var(--spacing-440) !important;
}

.my-14 {
  margin-top: var(--spacing-640) !important;
  margin-bottom: var(--spacing-640) !important;
}

.my-auto {
  margin-top: auto !important;
  margin-bottom: auto !important;
}

.mt-0 {
  margin-top: 0 !important;
}

.mt-1 {
  margin-top: var(--spacing-2-5) !important;
}

.mt-2 {
  margin-top: var(--spacing-05) !important;
}

.mt-3 {
  margin-top: var(--spacing-10) !important;
}

.mt-3-5 {
  margin-top: var(--spacing-15) !important;
}

.mt-4 {
  margin-top: var(--spacing-20) !important;
}

.mt-5 {
  margin-top: var(--spacing-30) !important;
}

.mt-6 {
  margin-top: var(--spacing-40) !important;
}

.mt-7 {
  margin-top: var(--spacing-60) !important;
}

.mt-8 {
  margin-top: var(--spacing-80) !important;
}

.mt-9 {
  margin-top: var(--spacing-120) !important;
}

.mt-10 {
  margin-top: var(--spacing-160) !important;
}

.mt-11 {
  margin-top: var(--spacing-240) !important;
}

.mt-12 {
  margin-top: var(--spacing-320) !important;
}

.mt-13 {
  margin-top: var(--spacing-440) !important;
}

.mt-14 {
  margin-top: var(--spacing-640) !important;
}

.mt-auto {
  margin-top: auto !important;
}

.mb-0 {
  margin-bottom: 0 !important;
}

.mb-1 {
  margin-bottom: var(--spacing-2-5) !important;
}

.mb-2 {
  margin-bottom: var(--spacing-05) !important;
}

.mb-3 {
  margin-bottom: var(--spacing-10) !important;
}

.mb-3-5 {
  margin-bottom: var(--spacing-15) !important;
}

.mb-4 {
  margin-bottom: var(--spacing-20) !important;
}

.mb-5 {
  margin-bottom: var(--spacing-30) !important;
}

.mb-6 {
  margin-bottom: var(--spacing-40) !important;
}

.mb-7 {
  margin-bottom: var(--spacing-60) !important;
}

.mb-8 {
  margin-bottom: var(--spacing-80) !important;
}

.mb-9 {
  margin-bottom: var(--spacing-120) !important;
}

.mb-10 {
  margin-bottom: var(--spacing-160) !important;
}

.mb-11 {
  margin-bottom: var(--spacing-240) !important;
}

.mb-12 {
  margin-bottom: var(--spacing-320) !important;
}

.mb-13 {
  margin-bottom: var(--spacing-440) !important;
}

.mb-14 {
  margin-bottom: var(--spacing-640) !important;
}

.mb-auto {
  margin-bottom: auto !important;
}

.mr-0 {
  margin-right: 0 !important;
}

.mr-1 {
  margin-right: var(--spacing-2-5) !important;
}

.mr-2 {
  margin-right: var(--spacing-05) !important;
}

.mr-3 {
  margin-right: var(--spacing-10) !important;
}

.mr-3-5 {
  margin-right: var(--spacing-15) !important;
}

.mr-4 {
  margin-right: var(--spacing-20) !important;
}

.mr-5 {
  margin-right: var(--spacing-30) !important;
}

.mr-6 {
  margin-right: var(--spacing-40) !important;
}

.mr-7 {
  margin-right: var(--spacing-60) !important;
}

.mr-8 {
  margin-right: var(--spacing-80) !important;
}

.mr-9 {
  margin-right: var(--spacing-120) !important;
}

.mr-10 {
  margin-right: var(--spacing-160) !important;
}

.mr-11 {
  margin-right: var(--spacing-240) !important;
}

.mr-12 {
  margin-right: var(--spacing-320) !important;
}

.mr-13 {
  margin-right: var(--spacing-440) !important;
}

.mr-14 {
  margin-right: var(--spacing-640) !important;
}

.mr-auto {
  margin-right: auto !important;
}

.ml-0 {
  margin-left: 0 !important;
}

.ml-1 {
  margin-left: var(--spacing-2-5) !important;
}

.ml-2 {
  margin-left: var(--spacing-05) !important;
}

.ml-3 {
  margin-left: var(--spacing-10) !important;
}

.ml-3-5 {
  margin-left: var(--spacing-15) !important;
}

.ml-4 {
  margin-left: var(--spacing-20) !important;
}

.ml-5 {
  margin-left: var(--spacing-30) !important;
}

.ml-6 {
  margin-left: var(--spacing-40) !important;
}

.ml-7 {
  margin-left: var(--spacing-60) !important;
}

.ml-8 {
  margin-left: var(--spacing-80) !important;
}

.ml-9 {
  margin-left: var(--spacing-120) !important;
}

.ml-10 {
  margin-left: var(--spacing-160) !important;
}

.ml-11 {
  margin-left: var(--spacing-240) !important;
}

.ml-12 {
  margin-left: var(--spacing-320) !important;
}

.ml-13 {
  margin-left: var(--spacing-440) !important;
}

.ml-14 {
  margin-left: var(--spacing-640) !important;
}

.ml-auto {
  margin-left: auto !important;
}

.p-0 {
  padding: 0 !important;
}

.p-1 {
  padding: var(--spacing-2-5) !important;
}

.p-2 {
  padding: var(--spacing-05) !important;
}

.p-3 {
  padding: var(--spacing-10) !important;
}

.p-3-5 {
  padding: var(--spacing-15) !important;
}

.p-4 {
  padding: var(--spacing-20) !important;
}

.p-5 {
  padding: var(--spacing-30) !important;
}

.p-6 {
  padding: var(--spacing-40) !important;
}

.p-7 {
  padding: var(--spacing-60) !important;
}

.p-8 {
  padding: var(--spacing-80) !important;
}

.p-9 {
  padding: var(--spacing-120) !important;
}

.p-10 {
  padding: var(--spacing-160) !important;
}

.p-11 {
  padding: var(--spacing-240) !important;
}

.p-12 {
  padding: var(--spacing-320) !important;
}

.p-13 {
  padding: var(--spacing-440) !important;
}

.p-14 {
  padding: var(--spacing-640) !important;
}

.p-auto {
  padding: auto !important;
}

.px-0 {
  padding-right: 0 !important;
  padding-left: 0 !important;
}

.px-1 {
  padding-right: var(--spacing-2-5) !important;
  padding-left: var(--spacing-2-5) !important;
}

.px-2 {
  padding-right: var(--spacing-05) !important;
  padding-left: var(--spacing-05) !important;
}

.px-3 {
  padding-right: var(--spacing-10) !important;
  padding-left: var(--spacing-10) !important;
}

.px-3-5 {
  padding-right: var(--spacing-15) !important;
  padding-left: var(--spacing-15) !important;
}

.px-4 {
  padding-right: var(--spacing-20) !important;
  padding-left: var(--spacing-20) !important;
}

.px-5 {
  padding-right: var(--spacing-30) !important;
  padding-left: var(--spacing-30) !important;
}

.px-6 {
  padding-right: var(--spacing-40) !important;
  padding-left: var(--spacing-40) !important;
}

.px-7 {
  padding-right: var(--spacing-60) !important;
  padding-left: var(--spacing-60) !important;
}

.px-8 {
  padding-right: var(--spacing-80) !important;
  padding-left: var(--spacing-80) !important;
}

.px-9 {
  padding-right: var(--spacing-120) !important;
  padding-left: var(--spacing-120) !important;
}

.px-10 {
  padding-right: var(--spacing-160) !important;
  padding-left: var(--spacing-160) !important;
}

.px-11 {
  padding-right: var(--spacing-240) !important;
  padding-left: var(--spacing-240) !important;
}

.px-12 {
  padding-right: var(--spacing-320) !important;
  padding-left: var(--spacing-320) !important;
}

.px-13 {
  padding-right: var(--spacing-440) !important;
  padding-left: var(--spacing-440) !important;
}

.px-14 {
  padding-right: var(--spacing-640) !important;
  padding-left: var(--spacing-640) !important;
}

.px-auto {
  padding-right: auto !important;
  padding-left: auto !important;
}

.py-0 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.py-1 {
  padding-top: var(--spacing-2-5) !important;
  padding-bottom: var(--spacing-2-5) !important;
}

.py-2 {
  padding-top: var(--spacing-05) !important;
  padding-bottom: var(--spacing-05) !important;
}

.py-3 {
  padding-top: var(--spacing-10) !important;
  padding-bottom: var(--spacing-10) !important;
}

.py-3-5 {
  padding-top: var(--spacing-15) !important;
  padding-bottom: var(--spacing-15) !important;
}

.py-4 {
  padding-top: var(--spacing-20) !important;
  padding-bottom: var(--spacing-20) !important;
}

.py-5 {
  padding-top: var(--spacing-30) !important;
  padding-bottom: var(--spacing-30) !important;
}

.py-6 {
  padding-top: var(--spacing-40) !important;
  padding-bottom: var(--spacing-40) !important;
}

.py-7 {
  padding-top: var(--spacing-60) !important;
  padding-bottom: var(--spacing-60) !important;
}

.py-8 {
  padding-top: var(--spacing-80) !important;
  padding-bottom: var(--spacing-80) !important;
}

.py-9 {
  padding-top: var(--spacing-120) !important;
  padding-bottom: var(--spacing-120) !important;
}

.py-10 {
  padding-top: var(--spacing-160) !important;
  padding-bottom: var(--spacing-160) !important;
}

.py-11 {
  padding-top: var(--spacing-240) !important;
  padding-bottom: var(--spacing-240) !important;
}

.py-12 {
  padding-top: var(--spacing-320) !important;
  padding-bottom: var(--spacing-320) !important;
}

.py-13 {
  padding-top: var(--spacing-440) !important;
  padding-bottom: var(--spacing-440) !important;
}

.py-14 {
  padding-top: var(--spacing-640) !important;
  padding-bottom: var(--spacing-640) !important;
}

.py-auto {
  padding-top: auto !important;
  padding-bottom: auto !important;
}

.pt-0 {
  padding-top: 0 !important;
}

.pt-1 {
  padding-top: var(--spacing-2-5) !important;
}

.pt-2 {
  padding-top: var(--spacing-05) !important;
}

.pt-3 {
  padding-top: var(--spacing-10) !important;
}

.pt-3-5 {
  padding-top: var(--spacing-15) !important;
}

.pt-4 {
  padding-top: var(--spacing-20) !important;
}

.pt-5 {
  padding-top: var(--spacing-30) !important;
}

.pt-6 {
  padding-top: var(--spacing-40) !important;
}

.pt-7 {
  padding-top: var(--spacing-60) !important;
}

.pt-8 {
  padding-top: var(--spacing-80) !important;
}

.pt-9 {
  padding-top: var(--spacing-120) !important;
}

.pt-10 {
  padding-top: var(--spacing-160) !important;
}

.pt-11 {
  padding-top: var(--spacing-240) !important;
}

.pt-12 {
  padding-top: var(--spacing-320) !important;
}

.pt-13 {
  padding-top: var(--spacing-440) !important;
}

.pt-14 {
  padding-top: var(--spacing-640) !important;
}

.pt-auto {
  padding-top: auto !important;
}

.pb-0 {
  padding-bottom: 0 !important;
}

.pb-1 {
  padding-bottom: var(--spacing-2-5) !important;
}

.pb-2 {
  padding-bottom: var(--spacing-05) !important;
}

.pb-3 {
  padding-bottom: var(--spacing-10) !important;
}

.pb-3-5 {
  padding-bottom: var(--spacing-15) !important;
}

.pb-4 {
  padding-bottom: var(--spacing-20) !important;
}

.pb-5 {
  padding-bottom: var(--spacing-30) !important;
}

.pb-6 {
  padding-bottom: var(--spacing-40) !important;
}

.pb-7 {
  padding-bottom: var(--spacing-60) !important;
}

.pb-8 {
  padding-bottom: var(--spacing-80) !important;
}

.pb-9 {
  padding-bottom: var(--spacing-120) !important;
}

.pb-10 {
  padding-bottom: var(--spacing-160) !important;
}

.pb-11 {
  padding-bottom: var(--spacing-240) !important;
}

.pb-12 {
  padding-bottom: var(--spacing-320) !important;
}

.pb-13 {
  padding-bottom: var(--spacing-440) !important;
}

.pb-14 {
  padding-bottom: var(--spacing-640) !important;
}

.pb-auto {
  padding-bottom: auto !important;
}

.pr-0 {
  padding-right: 0 !important;
}

.pr-1 {
  padding-right: var(--spacing-2-5) !important;
}

.pr-2 {
  padding-right: var(--spacing-05) !important;
}

.pr-3 {
  padding-right: var(--spacing-10) !important;
}

.pr-3-5 {
  padding-right: var(--spacing-15) !important;
}

.pr-4 {
  padding-right: var(--spacing-20) !important;
}

.pr-5 {
  padding-right: var(--spacing-30) !important;
}

.pr-6 {
  padding-right: var(--spacing-40) !important;
}

.pr-7 {
  padding-right: var(--spacing-60) !important;
}

.pr-8 {
  padding-right: var(--spacing-80) !important;
}

.pr-9 {
  padding-right: var(--spacing-120) !important;
}

.