censa_front_end_library/css/dist/index.css

React components library project for censa Design System

/**** Colors ****/
:root {
  --haldi: #ffc208;
  --haldi-dark: #b78707;
  --haldi-darker: #6b4a06;
  --haldi-light: #ffd462;
  --haldi-lighter: #ffe597;
  --haldi-lightest: #fff5c7;
  --jal: #5A05B8;
  --jal-dark: #8025E3;
  --jal-darker: #3E047C;
  --jal-light: #4f9de7;
  --jal-lighter: #F9F4FF;
  --jal-lightest: #F4EBFF;
  --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: #343238;
  --night-light: #595959;
  --night-lighter: #9B9A9D;
  --night-lightest: #CBCACB;
  --night-lite: #F4F3F5;
  --nimbu: #82c91e;
  --nimbu-dark: #578715;
  --nimbu-darker: #304a0b;
  --nimbu-light: #a6d763;
  --nimbu-lighter: #c6e599;
  --nimbu-lightest: #e3f3ce;
  --light-blue:#DCF1FD;
  --accent-blue: #275E7A;
  --shadow-0: #ffffff;
  --shadow-10: #ffffff;
  --shadow-20: #ffffff;
  --shadow-30: #ffffff;
  --stone1: #F9F4FF;
  --stone: #d5d5d5;
  --stone-dark: #F4EBFF;
  --stone-light: #e5e5e5;
  --stone-lighter: #F9F9FA;
  --stone-lightest: #f4f4f4;
  --tawak: #f07d00;
  --tawak-dark: #b35f13;
  --tawak-darker: #743208;
  --tawak-light: #feac5f;
  --tawak-lighter: #ffc998;
  --tawak-lightest: #fde6ce;
  --white: #ffffff;
  --placeholder: #9B9A9D;
  --chip: #E7E7E8;
  --linkbutton: #037FF7;
  --linkdisable:#99CCFC;
  /**** Fonts ****/
} /* close :root */

:root {
  /* Colors */

  /* default */
  --primary: var(--jal);
  --secondary: var(--stone);
  --secondary1: var(--stone1);
  --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 */
  --badge-color: var(--light-blue);
  --badge-font: var(--accent-blue);
  --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: rgba(90, 5, 184, 0.16);
  --secondary-shadow: rgba(213, 213, 213, 0.16);
  --success-shadow: rgba(46, 168, 67, 0.16);
  --alert-shadow: rgba(217, 55, 55, 0.16);
  --warning-shadow: rgba(255, 194, 8, 0.16);
  --accent1-shadow: rgba(240, 125, 0, 0.16);
  --accent2-shadow: rgba(122, 83, 178, 0.16);
  --accent3-shadow: rgba(61, 81, 212, 0.16);
  --accent4-shadow: rgba(130, 201, 30, 0.16);
  --inverse-shadow: rgba(52, 50, 56, 0.16);

  /* 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);
  --border-color: var(--chip);
  --link-color: var(--linkbutton);
  --link-disable: var(--linkdisable);

  /* spacing */
  --spacing-xs: 1px;
  --spacing-s: 2px;
  --spacing-xx: 4px;
  --spacing-m: 6px;
  --spacing: 8px;
  --spacing-l: 12px;
  /* 8 * 2 */
  --spacing-2: 16px;
  /* 8 * 3 */
  --spacing-xl: 32px;
  /* 8 * 4 */
  --spacing-3: 40px;
  /* 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: 'Inter';

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

  /* Font weight  */
  --font-weight-normal: 400;
  --font-weight: 500;
  --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(--spacing-xs) solid var(--secondary);
  --border-s: var(--spacing-s) 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;
}

@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  src: url(MaterialSymbolsOutlined.ttf);
}

@font-face {
  font-family: 'Material Symbols Rounded';
  font-style: normal;
  src: url(MaterialSymbolsRounded.ttf);
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 16px; /* preferred icon size */
  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-icons-outlined {
  font-family: 'Material Symbols Outlined';
  font-size: 24px; /* Preferred icon size */
}

.material-icons-rounded {
  font-family: 'Material Symbols Rounded';
  font-size: 24px; /* Preferred icon size */
}

@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-2));
  }
}

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

  to {
    left: 0;
  }
}

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

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

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

  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);
}

.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);
}

/* Text */
.Text {
  margin: 0;
  line-height: var(--font-height);
}

.Text--small {
  font-size: var(--font-size-s);
  line-height: var(--font-height-normal);
}

.Text--regular {
  font-size: var(--font-size);
  line-height: var(--font-height);
}

.Text--large {
  font-size: var(--font-size-m);
  line-height: var(--font-height-m);
}

.Text--default {
  color: var(--text);
}

.Text--subtle {
  color: var(--text-subtle);
}

.Text--disabled {
  color: var(--text-disabled);
}

.Text--destructive {
  color: var(--text-destructive);
}

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

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

.Text--link {
  color: var(--text-link);
}

.Text--medium {
  font-weight: var(--font-weight-medium);
}

.Text--strong {
  font-weight: var(--font-weight-bold);
}

/* Heading */
.Heading {
  margin: 0;
}

.Heading--s {
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-m);
  line-height: var(--font-height-m);
}

.Heading--m {
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-l);
  line-height: var(--font-height-l);
}

.Heading--l {
  font-weight: var(--font-weight-normal);
  font-size: var(--font-size-xl);
  line-height: var(--font-height-xl);
}

.Heading--xl {
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-xxl);
  line-height: var(--font-height-xxl);
}

.Heading--xxl {
  font-weight: var(--font-weight-normal);
  font-size: var(--font-size-xxxl);
  line-height: var(--font-height-xxl);
}

.Heading--default {
  color: var(--text);
}

.Heading--subtle {
  color: var(--text-subtle);
}

.Heading--disabled {
  color: var(--text-disabled);
}

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

/* Label */
.Label {
  display: inline-flex;
}

.Label--withInput {
  margin-bottom: var(--spacing-m);
}

.Label--optional {
  align-items: center;
}

.Label-text {
  line-height: var(--font-height-s);
  font-weight: var(--font-weight-normal);
  word-break: break-all;
  font-size: var(--font-size);
}

.Label-optionalText {
  line-height: var(--font-height-s);
  margin-left: var(--spacing-m);
}

.Label--disabled {
  color: var(--text-disabled);
}

.Label-requiredIndicator {
  height: 6px;
  width: 6px;
  border-radius: 50%;
  background: var(--alert);
  margin-left: var(--spacing-m);
  margin-bottom: 6px;
  display: inline-flex;
}

/* Caption */
.Caption {
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.Caption--withInput {
  margin-top: var(--spacing-m);
}

.Caption-icon {
  display: flex;
  align-content: center;
  margin-right: var(--spacing-m);
}

.Caption--hidden {
  display: none;
}

/* Subheading */
.Subheading {
  margin: 0;
  font-weight: var(--font-weight-bolder);
  font-size: var(--spacing-l);
  line-height: var(--font-height-m);
  letter-spacing: var(--letter-spacing);
  text-transform: uppercase;
}

.Subheading--default {
  color: var(--text);
}

.Subheading--subtle {
  color: var(--text-subtle);
}

.Subheading--disabled {
  color: var(--text-disabled);
}

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

.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: var(--spacing-2);
}

::-webkit-scrollbar-thumb {
  border: var(--spacing-s) solid rgba(0, 0, 0, 0);
  background-clip: padding-box;
  border-radius: var(--spacing);
  background-color: var(--secondary);
}

.cds-accordion-container {
  display: flex;
  justify-content: center;
  padding: var(--Spacing-200, 8px) var(--Spacing-200, 8px) var(--Spacing-200, 8px) var(--Spacing-300, 12px);
  flex-direction: column;
  /* width: 100%; */
  height: auto;
}
.cds-accordion-bordered {
  border: 1px solid #f4f3f5;
  border-radius: 8px;
}
.cds-accordion-open {
  margin-top: 8px;
  margin-bottom: 8px;
}
.cds-accordion-header {
  color: var(--Input-Label-Primary, #343238);
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}
.cds-accordion-content {
  padding: 8px 0;
}

.ActionButton {
  display: flex;
  flex-shrink: 0;
  overflow: hidden;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  cursor: pointer;
  color: var(--inverse-lighter);
  border-radius: 50%;
  padding: var(--spacing-s);
}

.ActionButton:focus-visible,
.ActionButton:focus {
  outline: var(--spacing-s) solid var(--secondary-shadow);
}

.ActionButton:hover {
  background-color: var(--secondary);
}

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

.ActionCard {
  cursor: pointer;
  border-radius: var(--spacing-m);
  width: 100%;
  border: var(--spacing-xs) solid var(--secondary-dark);
}

.ActionCard:hover {
  box-shadow: var(--shadow-m);
  transition: var(--duration--fast-01) var(--standard-productive-curve);
}

.ActionCard:focus,
.ActionCard:focus-visible {
  outline: none;
  border: var(--spacing-xs) solid var(--secondary-light);
  box-shadow: var(--shadow-spread) var(--secondary-shadow);
}

.ActionCard:active {
  box-shadow: var(--shadow-l);
  transition: var(--duration--fast-01) var(--standard-productive-curve);
}

.ActionCard--disabled {
  pointer-events: none;
  position: relative;
  border: var(--spacing-xs) solid var(--secondary-lighter);
}

.ActionCard-overlay--disabled {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  opacity: 50%;
  background: var(--secondary-light);
}
.action-space {
  justify-content: space-between;
  border-radius: 8px;
  border: 1px solid #cbcacb;
}
.action-space .Text--default {
  color: #0a080c;
  font-size: 16px;
  font-weight: 600;
}
.action-space .Text--subtle {
  color: #343238;
  font-weight: 400;
  font-size: 14px;
}

/* badge */

.Avatar {
  display: flex;
  flex-grow: 0;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  text-transform: uppercase;
  border-radius: 50%;
  cursor: default;
}

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

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

.Avatar--disabled {
  cursor: default;
}

.Avatar--primary {
  background: #a9d385;
}
.Avatar--primary .Text--white {
  color: #345815;
}
.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--secondary {
  color: var(--inverse) !important;
}

.Avatar-content--success {
  color: var(--success-darker) !important;
}

.Avatar-content--warning {
  color: var(--warning-darker) !important;
}

.Avatar-content--accent1 {
  color: var(--accent1-darker) !important;
}

.Avatar-content--accent4 {
  color: var(--accent4-darker) !important;
}
span.Avatar.Avatar--regular.Avatar--secondary img {
  height: auto;
}

.AvatarGroup-item {
  border-radius: 50%;
}

.AvatarGroup-item--regular {
  margin-right: calc(var(--spacing-m) * -1);
}

.AvatarGroup-item--tiny {
  margin-right: calc(var(--spacing-s) * -1);
}

.AvatarGroup-Popper {
  max-width: var(--spacing-9);
  overflow: hidden;
  box-sizing: border-box;
  word-break: break-word;
  -webkit-hyphens: auto;
          hyphens: auto;
}

.AvatarGroup-TextWrapper {
  padding-right: var(--spacing);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  overflow-y: auto;
}

.AvatarCount-wrapper {
  border-radius: 50%;
}

@keyframes backdrop-open {
  from {
    opacity: 0;
  }
  to {
    opacity: 60;
  }
}

@keyframes backdrop-close {
  from {
    opacity: 60;
  }
  to {
    opacity: 0;
  }
}

.Backdrop {
  background-color: rgba(47, 47, 47, 0.6);
  height: 100vh;
  width: 100vw;
  position: fixed;
  left: 0;
  top: 0;
  display: none;
  align-items: center;
  z-index: 1000;
  overflow: auto;
  flex-direction: column;
  justify-content: center;
  touch-action: none;
  visibility: hidden;
}

.Backdrop--open {
  display: flex;
  visibility: visible;
}

.Backdrop-animation--open {
  animation: backdrop-open var(--duration--fast-02) var(--entrance-expressive-curve);
}

.Backdrop-animation--close {
  animation: backdrop-close var(--duration--fast-02) var(--exit-expressive-curve);
}

/* badge */

.Badge {
  /* 160px */
  max-width: calc(var(--spacing-2) * 10);
  /* truncate */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--font-size-s);
  line-height: var(--font-height-s);
  text-transform: capitalize;
  padding-right: var(--spacing);
  padding-left: var(--spacing);
  padding-top: var(--spacing-xx);
  padding-bottom: var(--spacing-xx);
  border-radius: var(--spacing-m);
  display: inline-block;
  box-sizing: border-box;
  font-weight: var(--font-weight-medium);
  cursor: default;
}

.Badge--primary {
  background: var(--primary);
  color: var(--white);
}

.Badge--secondary {
  background: var(--badge-color);
  color: var(--badge-font);
}

.Badge--success {
  background: #eaf6ec;
  color: #1c6527;
}

.Badge--alert {
  background: #efcfce;
  color: #91010b;
}

.Badge--warning {
  background: #fff7e6;
  color: #996802;
}

.Badge--accent1 {
  background: #2fa843;
  color: var(--white);
  border-radius: 2px !important;
}

.Badge--accent2 {
  background: var(--accent2);
  color: var(--white);
}

.Badge--accent3 {
  background: var(--accent3);
  color: var(--white);
}

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

.Badge--subtle-primary {
  color: var(--primary-darker);
  background: var(--primary-lightest);
}

.Badge--subtle-secondary {
  color: var(--text);
  background: var(--secondary-light);
}

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

.Badge--subtle-alert {
  color: var(--alert-darker);
  background: var(--alert-lightest);
}

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

.Badge--subtle-accent1 {
  color: var(--accent1-darker);
  background: var(--accent1-lightest);
}

.Badge--subtle-accent2 {
  color: var(--accent2-darker);
  background: var(--accent2-lightest);
}

.Badge--subtle-accent3 {
  color: var(--accent3-darker);
  background: var(--accent3-lightest);
}

.Badge--subtle-accent4 {
  color: var(--accent4-darker);
  background: var(--accent4-lightest);
}

/* breadcrumbs */

.Breadcrumbs {
  display: flex;
  align-items: center;
}

.Breadcrumbs-item {
  display: flex;
  align-items: center;
}

.Breadcrumbs-link {
  /* 160px */
  max-width: calc(var(--spacing-2) * 10);
  margin: var(--spacing-m) 0;
  font-weight: var(--font-weight) !important;
}

.Breadcrumbs-link:active {
  color: var(--inverse);
}

.Breadcrumbs-item:first-child .Breadcrumbs-link {
  margin-left: 0;
}

.Breadcrumbs-itemSeparator {
  color: var(--secondary);
  font-size: var(--font-size-s);
  line-height: var(--font-height-s);
  width: var(--spacing-m);
  margin: 0 var(--spacing-m);
}

.Breadcrumbs-dropdown {
  height: var(--font-height-m);
}

.Breadcrumbs-Button:focus {
  background: var(--secondary) !important;
}

.Breadcrumbs-last-item {
  color: var(--Content-Secondary, #343238);
  font-size: var(--font-size-s);
  height: var(--font-height-s);
  line-height: var(--font-height-s);
}

.Button {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  position: relative;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  border: 0;
  border-radius: var(--spacing-m);

  padding-top: var(--spacing);
  padding-bottom: var(--spacing);

  text-align: center;
  font-family: var(--font-family);
  font-weight: var(--font-weight-normal);
  /* font-weight: var(--font-weight-medium); */
  font-size: var(--font-size);
  line-height: var(--font-height-s);
  color: var(--text-white);

  transition: var(--duration--fast-01) var(--standard-productive-curve);
}

.Button:disabled {
  cursor: not-allowed;
  pointer-events: none;
}

.Button:focus {
  outline: 0;
}

.Button--iconAlign-right {
  flex-direction: row-reverse;
}

.Button--tiny {
  height: var(--spacing-xl);
  padding-right: var(--spacing);
  padding-left: var(--spacing);
  padding-top: var(--spacing-m);
  padding-bottom: var(--spacing-m);
}

.Button--tinySquare {
  width: var(--spacing-xl);
}

.Button--regular {
  height: var(--spacing-xl);
  padding-right: var(--spacing-l) !important;
  padding-left: var(--spacing-l) !important;
  line-height: var(--font-height-m);
  padding-left: var(--spacing-2);
  padding-right: var(--spacing-2);
}

.Button--regularSquare {
  width: var(--spacing-3);
}

.Button--large {
  height: 52px;
  padding-right: var(--spacing-xl);
  padding-left: var(--spacing-xl);
  line-height: var(--font-height-m);
  font-size: var(--font-size-m);
}

.Button--largeSquare {
  width: 40px;
}

.Button--tinySquare .Button-icon,
.Button--largeSquare .Button-icon,
.Button--tinySquare .Spinner,
.Button--largeSquare .Spinner {
  padding-left: var(--spacing-s);
  padding-right: var(--spacing-s);
}

.Button--expanded {
  width: 100%;
}

.Button-icon {
  line-height: inherit;
  display: flex;
  align-items: center;
}

.Button-icon--left {
  margin-right: var(--spacing);
}

.Button-icon--right {
  margin-left: var(--spacing);
}

.Button--tiny .Button-icon--left {
  margin-right: var(--spacing-m);
}
.Button--tiny .Button-icon--right {
  margin-left: var(--spacing-m);
}

.Button--basic {
  background: var(--transparent);
  border: 1px solid var(--primary);
  color: var(--primary) !important;
}

.Button--basic:hover {
  background: var(--secondary1);
}

.Button--basic:active {
  background: var(--secondary-dark);
}

.Button--basic:focus {
  box-shadow: var(--shadow-spread) var(--secondary-shadow);
}

.Button--basic:disabled {
  background: var(--secondary-lighter);
  color: var(--inverse-lightest) !important;
  border: 1px solid var(--inverse-lightest);
}

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

.Button--primary:hover {
  background: var(--primary-dark);
}

.Button--primary:active {
  background: var(--primary-darker);
}

.Button--primary:focus {
  box-shadow: var(--shadow-spread) var(--primary-shadow);
}

.Button--primary:disabled {
  background: var(--night-lightest);
}

.Button--success {
  background: var(--primary);
}

.Button--success:hover {
  background: var(--primary-dark);
}

.Button--success:active {
  background: var(--primary-darker);
}

.Button--success:focus {
  box-shadow: var(--shadow-spread) var(--primary-shadow);
}

.Button--success:disabled {
  background: var(--primary-lighter);
}

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

.Button--alert:hover {
  background: var(--alert-dark);
}

.Button--alert:active {
  background: var(--alert-darker);
}

.Button--alert:focus {
  box-shadow: var(--shadow-spread) var(--alert-shadow);
}

.Button--alert:disabled {
  background: var(--alert-lighter);
}

.Button--transparent {
  background: transparent;
  color: var(--inverse);
}

.Button--transparent:hover {
  background-color: var(--stone-lighter) !important;
  color: #0a080c;
}

.Button--transparent:focus {
  box-shadow: var(--shadow-spread) var(--secondary-shadow);
}

.Button--transparent:active {
  background-color: var(--night-lite) !important;
  color: #0a080c;
}

.Button--transparent:focus:active {
  background: var(--secondary-dark);
}

.Button--transparent:disabled {
  background: transparent;
  color: var(--night-lightest);
}

.Button-spinner {
  display: flex;
  position: absolute;
  z-index: 1;
}

.Button--tiny .Spinner--small {
  height: var(--font-size-s);
  width: var(--font-size-s);
}

.Button--large .Spinner--small {
  height: var(--font-size-l);
  width: var(--font-size-l);
}

.Button--selected {
  background: var(--primary-lightest);
  color: var(--primary-dark);
}

.Button--selected:hover {
  background: var(--primary-lighter);
}

.Button--selected:active {
  background: var(--primary-lighter);
  color: var(--primary-darker);
}

.Button--selected:focus {
  background: var(--primary-lightest);
  box-shadow: var(--shadow-spread) var(--primary-shadow);
}

.Button--selected:focus:active {
  background: var(--primary-lighter);
}

.Button--selected:disabled {
  background: var(--primary-lightest);
  color: var(--primary-lighter);
}

.Button-text--hidden {
  visibility: hidden;
}

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

/* calendar */

.Calendar-wrapper {
  display: flex;
  flex-wrap: wrap;
}

.Calendar {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.Calendar--small {
  padding: var(--spacing-l);
  padding-bottom: var(--spacing);
  width: 212px;
}

.Calendar-date--small {
  height: 300px;
}

.Calendar-month--small {
  height: 200px;
}

.Calendar-year--small {
  height: 200px;
}

.Calendar--large {
  padding-top: var(--spacing-2);
  padding-left: var(--spacing-2);
  padding-right: var(--spacing-2);
  padding-bottom: var(--spacing-l);
  width: 316px;
}

.Calendar-date--large {
  height: 365px;
}

.Calendar-month--large {
  height: 276px;
}

.Calendar-year--large {
  height: 272px;
}

.Calendar-header--large {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: var(--spacing-l);
}

.Calendar-header--small {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: var(--spacing);
}

.Calendar-headerIcon {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  border: none;
  color: var(--night) !important;
}

.Calendar-headerIcon--prev {
  left: 0;
}

.Calendar-headerIcon--next {
  right: 0;
}

.Calendar-headerContent {
  display: flex;
  white-space: nowrap;
  cursor: pointer;
  padding-top: var(--spacing-m);
  padding-bottom: var(--spacing-m);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.Calendar-body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: space-between;
}

.Calendar-valueRow {
  display: flex;
  justify-content: space-between;
  padding-top: var(--spacing-s);
  padding-bottom: var(--spacing-s);
}

.Calendar-valueWrapper {
  display: inline-flex;
  flex: 1 0 0;
  justify-content: center;
  position: relative;
}

.Calendar-valueWrapper--inRange {
  background: var(--night-lite);
}

.Calendar-valueWrapper--inRange .Calendar-inRangeValue:hover {
  background: var(--primary-lighter);
}

.Calendar-valueWrapper--inRange .Calendar-inRangeValue:active {
  background: var(--primary-light);
}

.Calendar-valueWrapper--inRangeError {
  background: var(--night-lite);
}

.Calendar-valueWrapper--start {
  background: linear-gradient(90deg, white 50%, var(--primary-lightest) 50%);
  border-radius: var(--spacing-m) 0 0 var(--spacing-m);
}

.Calendar-valueWrapper--startError {
  background: linear-gradient(90deg, white 50%, var(--alert-lightest) 50%);
}

.Calendar-valueWrapper--end {
  background: linear-gradient(90deg, var(--primary-lightest) 50%, white 50%);
  border-radius: 0 var(--spacing-m) var(--spacing-m) 0;
}

.Calendar-valueWrapper--hoverDate {
  background: linear-gradient(90deg, var(--primary-lightest) 10%, white 50%);
  border-radius: 0 var(--spacing-m) var(--spacing-m) 0;
}

.Calendar-valueWrapper--endError {
  background: linear-gradient(90deg, var(--alert-lightest) 50%, white 50%);
}

.Calendar-valueWrapper--startEnd {
  background: transparent;
}

.Calendar-value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  border-radius: var(--spacing-m);
  transition: var(--duration--fast-01) var(--standard-productive-curve);
}

.Calendar-value:hover {
  background: var(--secondary-light);
}

.Calendar-value:active {
  background: var(--secondary);
}

.Calendar-value:active .Calendar-value--currDate {
  color: var(--primary-dark);
}

.Calendar-value--start:hover,
.Calendar-value--end:hover {
  background: var(--primary-lightest);
}

.Calendar-value--startError:hover,
.Calendar-value--endError:hover {
  background: var(--alert-lightest);
}

.Calendar-value--start,
.Calendar-value--end {
  background: var(--primary-lightest);
}

.Calendar-value--startError,
.Calendar-value--endError {
  background: var(--alert-lightest);
}

.Calendar-value--currDateMonthYear {
  background: var(--night);
}
.Calendar-value--currDateMonthYear .Text {
  color: var(--white) !important;
}
.Calendar-value--currDateMonthYear:hover {
  background: var(--night-lite);
}

.Calendar-value--currDateMonthYear:active {
  background: var(--primary-lighter);
}

.Calendar-value--currDate:active {
  color: var(--primary-dark);
}

.Calendar-value--active {
  background: var(--night);
  font-weight: var(--font-weight-bold);
}

.Calendar-value--active:hover {
  background: var(--primary-dark);
}

.Calendar-value--active:active {
  background: var(--primary-darker);
}

.Calendar-yearValue--small,
.Calendar-monthValue--small {
  height: var(--spacing-xl);
  width: var(--spacing-4);
}

.Calendar-yearValue--large,
.Calendar-monthValue--large {
  height: var(--spacing-3);
  width: var(--spacing-5);
}

.Calendar-dateValue--small {
  height: var(--spacing-xl);
  width: var(--spacing-xl);
}

.Calendar-dateValue--large {
  height: var(--spacing-3);
  width: var(--spacing-3);
}

.Calendar-valueWrapper--dummy {
  opacity: var(--transparent-58);
}

.Calendar-value--disabled {
  pointer-events: none;
}

.Calendar-dayValues {
  display: flex;
  justify-content: center;
  padding-top: var(--spacing);
  padding-bottom: var(--spacing);
}

.Calendar-dateValues {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: space-around;
}

.Calendar-dayValues .Calendar-value {
  padding: 0;
}

.Calendar-eventsIndicator {
  position: absolute;
  bottom: var(--spacing-s);
  width: var(--spacing-m);
  height: var(--spacing-m);
  background-color: var(--alert);
  border-radius: 50%;
}
.Calendar-eventsIndicator--small {
  width: 3px;
  height: 3px;
}
.Calendar-eventsIndicator--active {
  background-color: var(--white);
}

.Calendar-valueWrapper--inStartRange {
  background: linear-gradient(90deg, white 50%, var(--primary-lightest) 50%);
}

.Calendar-valueWrapper--inEndRange {
  background: linear-gradient(90deg, var(--primary-lightest) 50%, white 50%);
}

.Calendar-valueWrapper--inEdgeRange .Calendar-inRangeValue {
  background: var(--night-lite);
}

.Calendar-valueWrapper--inEdgeRange .Calendar-inRangeValue:hover {
  background: var(--primary-lighter);
}

.Calendar-valueWrapper--inEdgeRange .Calendar-inRangeValue:active {
  background: var(--primary-light);
}
.Calendar-valueWrapper .Calendar-value--currDate {
  color: var(--white);
}

/* badge */

.Card {
  border-radius: 12px;
  border: var(--spacing-xs) solid var(--secondary-light);
  position: relative;
  overflow: hidden;
  background-color: var(--white);
}
.Card--default,
.Card--light,
.Card--medium,
.Card--dark {
  border: none;
  box-shadow: var(--shadow-s);
}

.Card--shadow10 {
  border: none;
  box-shadow: var(--shadow-s);
}

.Card--shadow20 {
  border: none;
  box-shadow: var(--shadow-m);
}

.Card--shadow30 {
  border: none;
  box-shadow: var(--shadow-l);
}

.Card-header {
  padding: var(--spacing-2) var(--spacing-2) var(--spacing-l) var(--spacing-2);
}

.Card-body {
  padding-left: var(--spacing-2);
  padding-right: var(--spacing-2);
}

.Card-footer {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: var(--spacing-2);
}

.Card-footer--withSeperator {
  border-top: var(--spacing-xs) solid var(--secondary-light);
}
.cradwrapsection {
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
}
.card-radius {
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}
/* Define the animation */
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

/* Apply the animation to the button */
.live-button i {
  animation: pulse 2s infinite;
}

.Card-wrapper {
  height: 250px;
}
.heading-weight-text {
  font-weight: normal !important;
  font-size: 16px;
}
.notecheck img {
  background-color: #f3f9ff;
  border-radius: 12px;
  padding: 10px;
  height: 40px;
  width: 40px;
}
.userGroup img {
  background-color: #f5fbf5;
  border-radius: 12px;
  padding: 10px;
  height: 40px;
  width: 40px;
}
.trolley img {
  background-color: #fff3f3;
  border-radius: 12px;
  padding: 10px;
  height: 40px;
  width: 40px;
}
.bid img {
  background-color: #fffbf3;
  border-radius: 12px;
  padding: 10px;
  height: 40px;
  width: 40px;
}

.cradwrapsection .ProgressBar-indicator--regular {
  height: 4px !important;
}
.cradwrapsection .ProgressBar {
  background-color: #f4f3f5;
  margin: 10px 0px;
}
.cradwrapsection .ProgressBar-indicator {
  background-color: #2fa843 !important;
}
.livesectionwrap .Button--alert {
  background-color: #fee6e8;
  color: #c1030f;
  font-weight: 600;
}
.livesectionwrap .Button--primary {
  background-color: #fff7e6;
  color: #996802;
  font-weight: 600;
}
.Card-wrapper .float-left {
  height: 150px;
  position: absolute;
  top: 50px;
}

.productimg {
  position: relative;
  background-color: #f4ebff;
  height: 100%;
  width: 13%;
  float: left;
}

.CardSubdued {
  background: var(--card-subdued-bg);
  padding: var(--spacing-2);
}

.CardSubdued--top {
  border-top: var(--spacing-xs) solid var(--secondary-light);
}

.CardSubdued--left {
  border-left: var(--spacing-xs) solid var(--secondary-light);
}

.CardSubdued--right {
  border-right: var(--spacing-xs) solid var(--secondary-light);
}

.CardSubdued--bottom {
  border-bottom: var(--spacing-xs) solid var(--secondary-light);
}

.Box {
  width: 100%;
  border-radius: var(--spacing);
  padding: var(--spacing-l);
}

.Box--typing {
  padding-top: var(--spacing);
  padding-bottom: var(--spacing);
}

.Box--incoming {
  border: var(--spacing-xs) solid var(--secondary-light);
  background-color: var(--white);
}

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

.Box-incoming--withStatus {
  border-bottom-left-radius: 0px;
}

.Box-outgoing--withStatus {
  border-bottom-right-radius: 0px;
}

.Box--urgent {
  border-color: var(--alert);
}

.ChatMessage-status {
  margin-top: var(--spacing-m);
  display: block;
}

.Checkbox {
  display: flex;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  line-height: initial;
  box-sizing: border-box;
  padding-top: var(--spacing-s);
  padding-bottom: var(--spacing-s);
}

.Checkbox-input {
  position: absolute;
  z-index: 2;
  opacity: 0;
  cursor: pointer;
  height: 100%;
  width: 100%;
  margin: 0;
}

.Checkbox-labelWrapper {
  padding-left: var(--spacing);
  display: flex;
  flex-direction: column;
  min-width: 0;
  color: var(--night-light);
}

.Checkbox-label {
  display: flex;
  cursor: pointer;
}

.Checkbox-label--tiny {
  font-weight: var(--font-weight-bold);
}

.Checkbox-outerWrapper {
  position: relative;
  margin-top: var(--spacing-s);
}

.Checkbox-outerWrapper--regular {
  height: var(--spacing-2);
  min-width: var(--spacing-2);
}
.Checkbox-outerWrapper--regular span:hover {
  border: 1px solid #a04efc;
}
.Checkbox:hover .Checkbox-input {
  border: 1px solid #a04efc;
}

.Checkbox-outerWrapper--tiny {
  height: var(--spacing-l);
  min-width: var(--spacing-l);
}

/* Type: Unchecked  */

.Checkbox-wrapper {
  top: 0;
  left: 0;
  border-radius: var(--spacing-s);
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 100%;
  width: 100%;
  justify-content: center;
  transition: var(--duration--fast-01) var(--standard-productive-curve);
}

.Checkbox-input:focus {
  outline: 0;
}

.Checkbox-input ~ .Checkbox-wrapper--default {
  /* border: var(--spacing-xs) solid var(--secondary-dark); */
  background-color: var(--shadow-0);
  border: 1px solid #cbcacb;
}

.Checkbox-input:focus ~ .Checkbox-wrapper--default {
  box-shadow: var(--shadow-spread) var(--secondary-shadow);
}

.Checkbox-input:hover ~ .Checkbox-wrapper--default {
  border: 1px solid #a04efc;
}

.Checkbox-input:active ~ .Checkbox-wrapper--default {
  border: var(--spacing-xs) solid var(--inverse-lightest);
  background-color: #8025e3;
}

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

.Checkbox--disabled .Checkbox-wrapper--default {
  background-color: #e7d0ff;
  border: 1px solid #e7d0ff;
}

/* Type: checked && Type: indeterminate  */

.Checkbox-input--checked ~ .Checkbox-wrapper,
.Checkbox-input--indeterminate ~ .Checkbox-wrapper {
  background-color: #8025e3;
  border: 0;
}

.Checkbox-input--checked:focus ~ .Checkbox-wrapper,
.Checkbox-input--indeterminate:focus ~ .Checkbox-wrapper {
  box-shadow: var(--shadow-spread) var(--primary-shadow);
  background-color: #8025e3;
  border: 0;
}

.Checkbox-input--checked:hover ~ .Checkbox-wrapper,
.Checkbox-input--indeterminate:hover ~ .Checkbox-wrapper {
  background-color: #a04efc;
  border: 0;
}

.Checkbox-input--checked:active ~ .Checkbox-wrapper,
.Checkbox-input--indeterminate:active ~ .Checkbox-wrapper {
  background-color: #8025e3;
  border: 0;
}

.Checkbox--disabled .Checkbox-input--checked ~ .Checkbox-wrapper,
.Checkbox--disabled .Checkbox-input--indeterminate ~ .Checkbox-wrapper {
  background-color: #e7d0ff;
  border: 1px solid #e7d0ff !important;
  border: 0;
}

/* Error State -> Default */

.Checkbox-wrapper--error {
  border: var(--spacing-xs) solid var(--alert);
}

.Checkbox-input:focus ~ .Checkbox-wrapper--error {
  box-shadow: var(--shadow-spread) var(--alert-shadow);
}

.Checkbox-input:hover ~ .Checkbox-wrapper--error {
  border: var(--spacing-xs) solid var(--alert-dark);
}

.Checkbox-input:active ~ .Checkbox-wrapper--error {
  border: var(--spacing-xs) solid var(--alert-darker);
  background-color: #8025e3;
}

.Checkbox--disabled .Checkbox-wrapper--error {
  border: var(--spacing-xs) solid var(--alert-lighter);
  background-color: #e7d0ff;
}

/* Error State -> Checked & Indeterminate */

.Checkbox-input--checked ~ .Checkbox-wrapper--error,
.Checkbox-input--indeterminate ~ .Checkbox-wrapper--error {
  border: var(--spacing-xs) solid var(--alert);
}

.Checkbox-input--checked:focus ~ .Checkbox-wrapper--error,
.Checkbox-input--indeterminate:focus ~ .Checkbox-wrapper--error {
  border: var(--spacing-xs) solid var(--alert);
  box-shadow: var(--shadow-spread) var(--primary-shadow);
}

.Checkbox-input--checked:hover ~ .Checkbox-wrapper--error,
.Checkbox-input--indeterminate:hover ~ .Checkbox-wrapper--error {
  border: var(--spacing-xs) solid var(--alert-dark);
}

.Checkbox-input--checked:active ~ .Checkbox-wrapper--error,
.Checkbox-input--indeterminate:active ~ .Checkbox-wrapper--error {
  background-color: var(--primary-darker);
  border: var(--spacing-xs) solid var(--alert-darker);
}

.Checkbox--disabled .Checkbox-input--checked ~ .Checkbox-wrapper--error,
.Checkbox--disabled .Checkbox-input--indeterminate ~ .Checkbox-wrapper--error {
  border: var(--spacing-xs) solid var(--alert-lighter);
}

.Chip {
  display: flex;
  box-sizing: border-box;
  border-radius: var(--spacing-m);
  padding-right: var(--spacing);
  padding-left: var(--spacing);
  padding-top: var(--spacing-m);
  padding-bottom: var(--spacing-m);
  width: -moz-fit-content;
  width: fit-content;
  justify-content: space-between;
  border-style: solid;
  border-width: var(--spacing-xs);
  align-items: center;
  flex-direction: row;
  cursor: default;
  height: var(--spacing-xl);
  transition: var(--duration--fast-01) var(--standard-productive-curve);
}

.Chip-wrapper {
  display: inline-flex;
  align-items: center;
}

.Chip-icon--left {
  margin-right: var(--spacing-m);
  display: flex;
  align-items: center;
}

.Chip-icon--right {
  display: flex;
  align-items: center;
  border-radius: 10px;
  margin-left: var(--spacing-s);
}

.Chip--action {
  background: var(--white);
  border: 0px;
  cursor: pointer;
  border: 1px solid #e7e7e8;
  color: #0a080c;
}

.Chip--action:hover {
  background: var(--white);
  border: 1px solid #59565c;
}

.Chip--action:focus-visible {
  box-shadow: var(--shadow-spread) var(--secondary-shadow);
  outline: none;
}

.Chip--action:active {
  background: var(--white);
  border: 1px solid #59565c;
  color: #0a080c;
}

.Chip-action--disabled {
  background: #f4f3f5;
  border: 0px;
  color: #cbcacb;
  outline: none;
  cursor: default;
  border: 1px solid #f4f3f5;
}

.Chip--selection {
  background: var(--shadow-0);
  border-color: var(--chip);
  cursor: pointer;
}
.Chip--selection span {
  color: var(--input-placeholder) !important;
}
.Chip--selection:hover {
  background: #e7e7e8;
  border-color: #9b9a9d;
  color: #0a080c;
}

.Chip--selection:focus-visible {
  box-shadow: var(--shadow-spread) var(--secondary-shadow);
  outline: none;
}

.Chip--selection:active {
  background: var(--secondary-light);
  border-color: var(--inverse-lightest);
}

.Chip-selection--disabled {
  background: var(--secondary-lightest);
  border-color: var(--secondary-lighter);
}

.Chip-selection--selected {
  background: transparent;
  border-color: #59565c;
  color: #0a080c;
}
.Chip-selection--selected i {
  color: #0a080c;
}
.Chip-selection--selected:hover {
  background: #e7e7e8;
  border-color: #9b9a9d;
  color: #0a080c;
}

.Chip-selection--selected:focus-visible {
  box-shadow: var(--shadow-spread) var(--primary-shadow);
  outline: none;
}

.Chip-selection--selected:active {
  background: var(--primary-lighter);
  border-color: var(--primary-dark);
}

.Chip-selection--selected:active .Chip-icon,
.Chip-selection--selected:active .Chip-text {
  color: var(--primary-darker);
}

.Chip-selection--selectedDisabled {
  background: var(--primary-lightest);
  border-color: var(--primary-lighter);
}

.Chip--input {
  background: var(--secondary-light);
  font-weight: var(--font-weight-normal);
  border: 0px;
}

.Chip--input:hover {
  background: var(--secondary);
}

.Chip--input:focus-visible,
.Chip--input:focus {
  box-shadow: var(--shadow-spread) var(--secondary-shadow);
  outline: none;
}

.Chip--input:active {
  background: var(--secondary-dark);
}

.Chip-input--disabled {
  background: var(--secondary-lighter);
  border: 0px;
}

.Chip-icon--right:focus-visible {
  outline: var(--spacing-s) solid var(--secondary-shadow);
}

.Chip-icon--right:hover {
  background-color: var(--secondary);
}

.Chip-icon--right:active {
  background-color: var(--secondary-dark);
}

.Chip-icon-disabled--right {
  pointer-events: none;
}

.Chip-icon--selected {
  border-radius: 10px;
}

.Chip-icon--selected:focus-visible {
  outline: var(--spacing-s) solid var(--primary-shadow);
}

.Chip-icon--selected:hover {
  background-color: var(--primary-lighter);
}

.Chip-icon--selected:active {
  background-color: var(--primary-light);
}

.Chip-selection--disabled:focus-visible,
.Chip-icon-disabled--right:focus-visible,
.Chip-selection--selectedDisabled:focus-visible,
.Chip-input--disabled:focus-visible {
  outline: none;
}

.Chip-icon--clear {
  padding-right: var(--spacing-s);
}

.ChipGroup {
  display: inline-flex;
}

.ChipGroup-item {
  margin: 0 var(--spacing-m);
}

.ChipGroup-item:first-child {
  margin-left: 0;
}

.ChipGroup-item:last-child {
  margin-right: 0;
}

.ChipInput {
  display: flex;
  border-radius: var(--spacing-m);
  box-shadow: inset 0 0 0 var(--spacing-xs) var(--secondary);
  padding-left: 10px;
  padding-right: 10px;
  background: var(--white);
  cursor: text;
  flex: 100%;
}

.ChipInput:focus,
.ChipInput:focus-visible {
  outline: var(--spacing-xs) var(--primary);
}

.ChipInput:hover {
  background: var(--secondary-lighter);
  border-color: var(--secondary-dark);
}

.ChipInput:focus-within {
  box-shadow: inset 0 0 0 var(--spacing-xs) var(--primary);
  background: var(--white);
}

.ChipInput--disabled {
  background: var(--secondary-lightest);
  border-color: var(--secondary-light);
  pointer-events: none;
}

.ChipInput--withChips {
  padding-right: var(--spacing);
}

.ChipInput--error,
.ChipInput--error:focus-within {
  box-shadow: inset 0 0 0 var(--spacing-xs) var(--alert);
}

.ChipInput-wrapper {
  display: flex;
  flex: 100%;
  align-items: center;
  flex-wrap: