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

React components library project for Innovaccer Design System

/**** Colors ****/
:root {
  --haldi: #ffc208;
  --haldi-dark: #b78707;
  --haldi-darker: #6b4a06;
  --haldi-light: #ffd462;
  --haldi-lighter: #ffe597;
  --haldi-lightest: #fff5c7;
  --jal: #0070dd;
  --jal-dark: #00509f;
  --jal-darker: #003365;
  --jal-light: #4f9de7;
  --jal-lighter: #97c5f0;
  --jal-lightest: #dcecf9;
  --jamun: #7a53b2;
  --jamun-dark: #644491;
  --jamun-darker: #4e3572;
  --jamun-light: #9d7ec6;
  --jamun-lighter: #bfaada;
  --jamun-lightest: #e0d8ee;
  --mirch: #d93737;
  --mirch-dark: #9c2828;
  --mirch-darker: #631919;
  --mirch-light: #eb776c;
  --mirch-lighter: #f7ada5;
  --mirch-lightest: #f9e2e2;
  --neel: #3d51d4;
  --neel-dark: #2c3a98;
  --neel-darker: #1c2561;
  --neel-light: #7583e1;
  --neel-lighter: #abb4ed;
  --neel-lightest: #e2e5f9;
  --neem: #2ea843;
  --neem-dark: #227934;
  --neem-darker: #154d26;
  --neem-light: #71c077;
  --neem-lighter: #a5d8aa;
  --neem-lightest: #d7efdf;
  --night: #1f1f1f;
  --night-light: #494949;
  --night-lighter: #707070;
  --night-lightest: #a6a6a6;
  --nimbu: #82c91e;
  --nimbu-dark: #578715;
  --nimbu-darker: #304a0b;
  --nimbu-light: #a6d763;
  --nimbu-lighter: #c6e599;
  --nimbu-lightest: #e3f3ce;
  --shadow-0: #ffffff;
  --shadow-10: #ffffff;
  --shadow-20: #ffffff;
  --shadow-30: #ffffff;
  --stone: #d5d5d5;
  --stone-dark: #c5c5c5;
  --stone-light: #e5e5e5;
  --stone-lighter: #ececec;
  --stone-lightest: #f4f4f4;
  --tawak: #f07d00;
  --tawak-dark: #b35f13;
  --tawak-darker: #743208;
  --tawak-light: #feac5f;
  --tawak-lighter: #ffc998;
  --tawak-lightest: #fde6ce;
  --white: #ffffff;

  /**** 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);

  /* 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: #c5c5c5;
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
  background: #a6a6a6;
  border: 2px solid transparent;
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:active {
  background: #707070;
  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;
}

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

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

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

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

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

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

.pl-0 {
  padding-left: 0 !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.pl-auto {
  padding-left: auto !important;
}

.text-align-start {
  text-align: start !important;
}

.text-align-end {
  text-align: end !important;
}

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

.text-align-justify {
  text-align: justify !important;
}

.text-align-left {
  text-align: left !important;
}

.text-align-right {
  text-align: right !important;
}

.color-white {
  color: var(--white);
}

.color-primary {
  color: var(--primary);
}

.color-secondary {
  color: var(--secondary);
}

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

.color-alert {
  color: var(--alert);
}

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

.color-accent1 {
  color: var(--accent1);
}

.color-accent2 {
  color: var(--accent2);
}

.color-accent3 {
  color: var(--accent3);
}

.color-accent4 {
  color: var(--accent4);
}

.color-inverse {
  color: var(--inverse);
}

/* dark */

.color-primary-dark {
  color: var(--primary-dark);
}

.color-secondary-dark {
  color: var(--secondary-dark);
}

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

.color-alert-dark {
  color: var(--alert-dark);
}

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

.color-accent1-dark {
  color: var(--accent1-dark);
}

.color-accent2-dark {
  color: var(--accent2-dark);
}

.color-accent3-dark {
  color: var(--accent3-dark);
}

.color-accent4-dark {
  color: var(--accent4-dark);
}

/* darker */

.color-primary-darker {
  color: var(--primary-darker);
}

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

.color-alert-darker {
  color: var(--alert-darker);
}

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

.color-accent1-darker {
  color: var(--accent1-darker);
}

.color-accent2-darker {
  color: var(--accent2-darker);
}

.color-accent3-darker {
  color: var(--accent3-darker);
}

.color-accent4-darker {
  color: var(--accent4-darker);
}

/* light */

.color-primary-light {
  color: var(--primary-light);
}

.color-secondary-light {
  color: var(--secondary-light);
}

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

.color-alert-light {
  color: var(--alert-light);
}

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

.color-accent1-light {
  color: var(--accent1-light);
}

.color-accent2-light {
  color: var(--accent2-light);
}

.color-accent3-light {
  color: var(--accent3-light);
}

.color-accent4-light {
  color: var(--accent4-light);
}

.color-inverse-light {
  color: var(--inverse-light);
}

/* lighter */
.color-primary-lighter {
  color: var(--primary-lighter);
}

.color-secondary-lighter {
  color: var(--secondary-lighter);
}

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

.color-alert-lighter {
  color: var(--alert-lighter);
}

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

.color-accent1-lighter {
  color: var(--accent1-lighter);
}

.color-accent2-lighter {
  color: var(--accent2-lighter);
}

.color-accent3-lighter {
  color: var(--accent3-lighter);
}

.color-accent4-lighter {
  color: var(--accent4-lighter);
}

.color-inverse-lighter {
  color: var(--inverse-lighter);
}

/* lightest */
.color-primary-lightest {
  color: var(--primary-lightest);
}

.color-secondary-lightest {
  color: var(--secondary-lightest);
}

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

.color-alert-lightest {
  color: var(--alert-lightest);
}

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

.color-accent1-lightest {
  color: var(--accent1-lightest);
}

.color-accent2-lightest {
  color: var(--accent2-lightest);
}

.color-accent3-lightest {
  color: var(--accent3-lightest);
}

.color-accent4-lightest {
  color: var(--accent4-lightest);
}

.color-inverse-lightest {
  color: var(--inverse-lightest);
}

/* shadow */
.color-primary-shadow {
  color: var(--primary-shadow);
}

.color-secondary-shadow {
  color: var(--secondary-shadow);
}

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

.color-alert-shadow {
  color: var(--alert-shadow);
}

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

.color-accent1-shadow {
  color: var(--accent1-shadow);
}

.color-accent2-shadow {
  color: var(--accent2-shadow);
}

.color-accent3-shadow {
  color: var(--accent3-shadow);
}

.color-accent4-shadow {
  color: var(--accent4-shadow);
}

.color-inverse-shadow {
  color: var(--inverse-shadow);
}

/** utility **/

.hide-scroll-bar::-webkit-scrollbar {
  height: 0px;
  /* Remove scrollbar space */
  background: transparent;
  /* Optional: just make scrollbar invisible */
}

.hide-scroll-bar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
}

.ellipsis--noWrap {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cursor-pointer {
  cursor: pointer;
}

.white-space-nowrap {
  white-space: nowrap;
}

.white-space-pre {
  white-space: pre;
}

.bottom-0 {
  bottom: 0;
}

/* fallback */
@font-face {
  font-family: 'Material Symbols Rounded';
  font-style: normal;
  font-weight: 300;
  src: url(MaterialSymbolsRounded.woff2) format('woff2');
}

.material-symbols {
  font-family: 'Material Symbols Rounded';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

.material-symbols-rounded {
  font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 0, 'opsz' 24;
  font-family: 'Material Symbols Rounded';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
  font-family: 'Material Symbols Rounded';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

/* Avatar */

.Avatar {
  display: flex;
  flex-grow: 0;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  text-transform: uppercase;
  border-radius: var(--border-radius-full);
  cursor: default;
  position: relative;
}

.Avatar--default:focus,
.Avatar--default:focus-visible {
  outline: 3px solid var(--primary-shadow);
  outline-offset: 3px;
}

.Avatar-wrapper--square {
  padding: var(--spacing-2-5);
  box-sizing: border-box;
}

.Avatar--square {
  width: 100%;
  height: 100%;
  border-radius: var(--border-radius-10);
}

.Avatar--regular {
  height: var(--spacing-80);
  width: var(--spacing-80);
}

.Avatar--tiny {
  height: var(--spacing-60);
  width: var(--spacing-60);
}

.Avatar--noInitials {
  cursor: default;
}

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

.Avatar--disabled::after {
  opacity: var(--opacity-20);
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  position: absolute;
  pointer-events: none;
  content: '';
  background-color: var(--white);
}

.Avatar--primary {
  background: var(--primary);
}

.Avatar--secondary {
  background: var(--secondary-light);
}

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

.Avatar--alert {
  background: var(--alert);
}

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

.Avatar--accent1 {
  background: var(--accent1);
}

.Avatar--accent2 {
  background: var(--accent2);
}

.Avatar--accent3 {
  background: var(--accent3);
}

.Avatar--accent4 {
  background: var(--accent4);
}

.Avatar-content--tiny {
  line-height: var(--font-height-s) !important;
  font-size: 10px !important;
}

.Avatar-content {
  color: var(--inverse) !important;
  opacity: var(--opacity-20);
  mix-blend-mode: multiply;
}

.Avatar-presence {
  position: absolute;
  border-radius: var(--border-radius-full);
  width: var(--