@innovaccer/design-system/css/dist/index.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: rgba(0, 112, 221, 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(31, 31, 31, 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);

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

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

@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%;
  -webkit-background-clip: text;
          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;
}

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

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

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

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

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

.Label-requiredIndicator {
  height: var(--spacing-15);
  width: var(--spacing-15);
  border-radius: var(--border-radius-full);
  background: var(--alert);
  margin-left: var(--spacing-10);
  margin-bottom: var(--spacing-15);
  display: inline-flex;
}

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

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

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

.Caption--hidden {
  display: none;
}

/* Subheading */
.Subheading {
  margin: 0;
  font-weight: var(--font-weight-bolder);
  font-size: var(--spacing-30);
  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);
}

.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: var(--border-radius-full);
  padding: var(--spacing-05);
}

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

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

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

.ActionCard {
  border-radius: var(--border-radius-10);
  width: 100%;
}

.ActionCard--default {
  cursor: pointer;
  border: var(--border-width-2-5) solid var(--secondary-dark);
}

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

.ActionCard--default:focus,
.ActionCard--default:focus-visible {
  outline: none;
  border: var(--border-width-2-5) solid var(--secondary-dark);
  box-shadow: var(--shadow-spread) var(--secondary-shadow);
}

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

.ActionCard--disabled {
  cursor: not-allowed;
  position: relative;
  border: var(--border-width-2-5) solid var(--secondary-lighter);
}

.ActionCard-overlay--disabled {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  opacity: var(--opacity-10);
  background: var(--secondary-lightest);
}

/* 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(--spacing-20);
  height: var(--spacing-20);
  right: 0;
  bottom: 0;
}

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

.Avatar-presence--away {
  background: var(--secondary-dark);
}

.Avatar-status {
  top: calc(-1 * var(--spacing-05));
  right: calc(-1 * var(--spacing-05));
  width: var(--spacing-30);
  height: var(--spacing-30);
  border-radius: var(--border-radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  cursor: pointer;
  overflow: hidden;
}

.AvatarGroup-item {
  border-radius: var(--border-radius-full);
  position: relative;
  margin-right: calc(var(--spacing-05) * -1);
}

.AvatarGroup-item--regular {
  height: var(--spacing-80);
}

.AvatarGroup-item--tiny {
  height: var(--spacing-60);
}

.AvatarGroup-Popper {
  overflow-y: auto;
  box-sizing: border-box;
}

.AvatarGroup-TextWrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  overflow-y: auto;
}

.AvatarCount-wrapper {
  border-radius: var(--border-radius-full);
  position: relative;
}

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

.AvatarGroup-inputWrapper {
  border-bottom: var(--border-width-2-5) solid var(--secondary-dark);
}

.AvatarGroup-inputWrapper:focus-within {
  border-bottom: var(--border-width-2-5) solid var(--primary);
}

.AvatarGroup-input {
  min-width: unset !important;
  background: transparent;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  height: calc(var(--spacing-80) + var(--spacing-10)) !important;
}

.AvatarGroup-input,
.AvatarGroup-input:focus-within {
  border: unset !important;
  box-shadow: none !important;
}

.AvatarGroup-input:hover {
  background-color: var(--secondary-lightest);
}

.AvatarGroup-listItem--disabled {
  cursor: not-allowed;
  pointer-events: auto !important;
}

/* Selection avatar group */
.SelectionAvatarGroup {
  box-sizing: border-box;
  display: flex;
  align-items: center;
}

/* Selection Avatar List */

.SelectionAvatarGroup-item {
  margin-right: calc(var(--spacing-05) * -1);
  border-radius: var(--border-radius-full);
  display: flex;
  transition: transform var(--duration--fast-01) var(--standard-productive-curve);
  position: relative;
}

.SelectionAvatarGroup-item--active:focus,
.SelectionAvatarGroup-item--active:focus-visible {
  outline: 3px solid var(--primary-shadow);
  outline-offset: 3px;
}

.SelectionAvatarGroup-item--active:active {
  outline: var(--spacing-05) solid #00509f;
  outline-offset: var(--spacing-2-5);
}

.SelectionAvatarGroup-wrapper:hover .SelectionAvatarGroup-item--active {
  transform: translateY(-8px);
}

/* Selected Avatar Group Item */

.SelectionAvatarGroup-item--selected {
  outline-offset: var(--spacing-2-5);
  outline: var(--spacing-05) solid var(--primary-dark);
}

.SelectionAvatarGroup-item--selected:active {
  outline-offset: var(--spacing-2-5);
  outline: var(--spacing-05) solid var(--primary-darker);
}

.SelectionAvatarGroup-item--selected:focus,
.SelectionAvatarGroup-item--selected:focus-visible {
  box-shadow: 0 0 0 var(--spacing-2-5) white, 0 0 0 3px var(--primary-dark), 0 0 0 3px var(--primary-shadow) !important;
}

/* Selection Avatar Popover */

.SelectionAvatarGroup-popper {
  overflow-y: auto;
  box-sizing: border-box;
}

.SelectionAvatar-inputWrapper {
  border-bottom: var(--border-width-2-5) solid var(--secondary-dark);
}

.SelectionAvatar-inputWrapper:focus-within {
  border-bottom: var(--border-width-2-5) solid var(--primary);
}

.SelectionAvatar-input {
  min-width: unset !important;
  background: transparent;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0;
  height: 36px;
}

.SelectionAvatar-input,
.SelectionAvatar-input:focus-within {
  border: unset !important;
  box-shadow: none !important;
}

.SelectionAvatar-input:hover {
  background-color: #f4f4f4;
}

/* Selection Avatar Count */

.SelectionAvatarCount-wrapper {
  border-radius: var(--border-radius-full);
}

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

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

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

.SelectionAvatarCount--selected {
  outline-offset: var(--spacing-2-5);
  outline: var(--spacing-05) solid var(--primary-dark);
}

.SelectionAvatarCount--selected:focus,
.SelectionAvatarCount--selected:focus-visible {
  box-shadow: 0 0 0 var(--spacing-2-5) white, 0 0 0 3px var(--primary-dark), 0 0 0 3px var(--primary-shadow) !important;
}

@keyframes backdrop-open {
  from {
    opacity: 0;
  }
  to {
    opacity: var(--opacity-16);
  }
}

@keyframes backdrop-close {
  from {
    opacity: var(--opacity-16);
  }
  to {
    opacity: 0;
  }
}

.Backdrop {
  background-color: rgba(31, 31, 31, 0.64);
  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-40) * 10);
  /* truncate */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--font-size-s);
  line-height: var(--font-height-s);
  text-transform: uppercase;
  padding-right: var(--spacing-10);
  padding-left: var(--spacing-10);
  padding-top: var(--spacing-05);
  padding-bottom: var(--spacing-05);
  border-radius: var(--border-radius-10);
  display: inline-block;
  box-sizing: border-box;
  font-weight: var(--font-weight-bold);
  cursor: default;
}

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

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

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

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

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

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

.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-40) * 10);
  margin: var(--spacing-10) 0;
}

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

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

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

.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(--border-radius-10);

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

  text-align: center;
  font-family: var(--font-family);
  font-weight: var(--font-weight-normal);
  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;
}

.Button:focus {
  outline: 0;
}

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

.Button-regularIcon--left {
  margin-left: calc(-1 * var(--spacing-05));
}

.Button-regularIcon--right {
  margin-right: calc(-1 * var(--spacing-05));
}

.Button--tiny {
  height: var(--spacing-60);
  padding-right: var(--spacing-20);
  padding-left: var(--spacing-20);
  padding-top: var(--spacing-10);
  padding-bottom: var(--spacing-10);
}

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

.Button--regular {
  height: var(--spacing-80);
  padding-right: var(--spacing-30);
  padding-left: var(--spacing-30);
}

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

.Button--large {
  height: 40px;
  padding-right: var(--spacing-40);
  padding-left: var(--spacing-40);

  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-05);
  padding-right: var(--spacing-05);
}

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

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

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

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

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

.Button--basic {
  background: var(--secondary-light);
  color: var(--inverse);
}

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

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

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

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

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

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

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

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

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

.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-30);
  padding-bottom: var(--spacing-20);
  width: 212px;
}

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

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

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

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

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

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

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

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

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

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

.Calendar-headerContent {
  display: flex;
  white-space: nowrap;
  cursor: pointer;
  padding-top: var(--spacing-10);
  padding-bottom: var(--spacing-10);
  -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-05);
  padding-bottom: var(--spacing-05);
}

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

.Calendar-valueWrapper--inRange {
  background: var(--primary-lightest);
}

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

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

.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(--border-radius-10) var(--border-radius-10) 0;
}

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

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

.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-10);
  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(--primary-lightest);
}

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

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

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

.Calendar-value--active {
  background: var(--primary);
  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-60);
  width: var(--spacing-120);
}

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

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

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

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

.Calendar-valueWrapper--disabled {
  opacity: var(--opacity-10);
}

.Calendar-valueWrapper--active-dummy {
  opacity: var(--opacity-16);
}

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

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

.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-05);
  width: var(--spacing-10);
  height: var(--spacing-10);
  background-color: var(--alert);
  border-radius: var(--border-radius-full);
}
.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(--primary-lightest);
}

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

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

/* badge */

.Card {
  border-radius: var(--border-radius-10);
  border: var(--border-width-2-5) solid var(--secondary-light);
  position: relative;
  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-40) var(--spacing-40) var(--spacing-30) var(--spacing-40);
}

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

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

.Card-footer--withSeperator {
  border-top: var(--border-width-2-5) solid var(--secondary-light);
}

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

.CardSubdued--top {
  border-top: var(--border-width-2-5) solid var(--secondary-light);
}

.CardSubdued--left {
  border-left: var(--border-width-2-5) solid var(--secondary-light);
}

.CardSubdued--right {
  border-right: var(--border-width-2-5) solid var(--secondary-light);
}

.CardSubdued--bottom {
  border-bottom: var(--border-width-2-5) solid var(--secondary-light);
}

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

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

.Box--incoming {
  border: var(--border-width-2-5) solid var(--secondary-light);
  background-color: var(--white);
}

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

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

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

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

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

.ChatBubble-box--outgoing {
  background-color: var(--primary-lightest);
  border-radius: var(--border-radius-20);
  padding: var(--spacing-20) var(--spacing-30);
}

.ChatBubble-separator {
  width: var(--spacing-10);
  height: var(--spacing-10);
  border-radius: var(--border-radius-full);
  margin: 0 var(--spacing-20);
  background: var(--inverse-lightest);
}

.ChatBubble-box--noSuccess {
  margin-right: calc(var(--spacing-40) + var(--spacing-10));
}

.ChatBubble-box {
  width: 100%;
}

.ChatBubble-actionBar--outgoing {
  width: -moz-max-content;
  width: max-content;
  margin-right: var(--spacing-10);
  margin-top: var(--spacing-15);
}

.ChatBubble-actionBar--incoming {
  width: -moz-max-content;
  width: max-content;
  margin-left: var(--spacing-10);
  margin-top: var(--spacing-15);
}

.ChatBubble-box--incoming {
  background-color: var(--secondary-lightest);
  border-radius: var(--border-radius-20);
  padding: var(--spacing-20) var(--spacing-30);
}

.ChatBubble-metaData--incoming {
  margin-left: calc(var(--spacing-80) + var(--spacing-20));
}

.ChatBubble-boxWrapper {
  flex: 0 0 auto;
  display: flex;
  max-width: 70%;
}

.ChatBubble-actionBarWrapper {
  flex: 0 0 auto;
}

.ChatInput {
  display: flex;
  flex-direction: row;
  align-items: center;
  border: var(--border-width-2-5) solid var(--secondary);
  padding: var(--spacing-20);
  border-radius: var(--border-radius-10);
  background: var(--white);
  max-width: 100%;
  min-width: var(--spacing-640);
  transition: all var(--duration--slow-01) var(--standard-productive-curve);
  max-height: var(--spacing-440);
  position: relative;
  box-sizing: border-box;
  line-height: var(--font-height-m);
}

.ChatInput--expanded {
  flex-direction: column;
  align-items: flex-start;
}

.ChatInput--disabled {
  background: var(--secondary-lightest);
  cursor: not-allowed;
}

.ChatInput:hover {
  background: var(--secondary-lighter);
}

.ChatInput:focus-within,
.ChatInput:focus,
.ChatInput:focus-visible {
  outline: none;
  border: var(--border-width-2-5) solid var(--primary);
  box-shadow: var(--shadow-spread) var(--primary-shadow);
}

.ChatInput-textarea {
  flex: 1;
  height: var(--spacing-60);
  width: 100%;
  resize: none;
  border: none;
  outline: none;
  transition-delay: var(--duration--slow-01);
  transition: width var(--duration--slow-01) var(--standard-productive-curve);
  box-sizing: border-box;
  cursor: auto;
  padding: var(--spacing-05) 0;
  background: none;
  word-break: break-all;
  overflow-y: scroll;
  font-family: var(--font-family);
  font-weight: var(--font-weight-normal);
  line-height: var(--font-height);
  font-size: var(--font-size);
  color: var(--inverse);
}

.ChatInput-textarea::-moz-placeholder {
  color: var(--inverse-lighter);
}

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

.ChatInput textarea:disabled::-moz-placeholder {
  color: var(--inverse-lightest);
}

.ChatInput textarea:disabled::placeholder {
  color: var(--inverse-lightest);
}

.ChatInput-actions {
  display: flex;
  flex-shrink: 0;
  transition: all var(--duration--slow-01) var(--standard-productive-curve);
  margin-left: var(--spacing-20);
  align-items: center;
}

.ChatInput-actions--expanded {
  width: 100%;
  justify-content: flex-end;
  margin-top: var(--spacing-20);
  margin-left: 0;
}

.Chat-UnreadMessage {
  border-radius: var(--border-radius-40);
  padding: var(--spacing-05) var(--spacing-30) var(--spacing-05) var(--spacing-20);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--primary);
  cursor: pointer;
}

.NewMessage-Divider--left {
  flex: 1;
  height: var(--spacing-2-5);
  background-color: var(--primary);
  margin-right: var(--spacing-40);
}

.NewMessage-Divider--right {
  flex: 1;
  height: var(--spacing-2-5);
  background-color: var(--primary);
  margin-left: var(--spacing-40);
}

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

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

.Checkbox-labelWrapper {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

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

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

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

.Checkbox-outerWrapper--regular {
  height: var(--spacing-40);
  min-width: var(--spacing-40);
}

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

/* Type: Unchecked  */

.Checkbox-wrapper {
  top: 0;
  left: 0;
  border-radius: var(--border-radius-05);
  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(--border-width-2-5) solid var(--secondary-dark);
  background-color: var(--shadow-0);
}

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

.Checkbox-input:hover ~ .Checkbox-wrapper--default {
  border: var(--border-width-2-5) solid var(--inverse-lightest);
  background-color: var(--shadow-0);
}

.Checkbox-input:active ~ .Checkbox-wrapper--default {
  border: var(--border-width-2-5) solid var(--inverse-lightest);
  background-color: var(--secondary-light);
}

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

.Checkbox--disabled .Checkbox-wrapper--default {
  border: var(--border-width-2-5) solid var(--secondary-light);
  background-color: var(--secondary-lightest);
}

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

.Checkbox-input--checked ~ .Checkbox-wrapper,
.Checkbox-input--indeterminate ~ .Checkbox-wrapper {
  background-color: var(--primary);
  border: 0;
}

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

.Checkbox-input--checked:hover ~ .Checkbox-wrapper,
.Checkbox-input--indeterminate:hover ~ .Checkbox-wrapper {
  background-color: var(--primary-dark);
  border: 0;
}

.Checkbox-input--checked:active ~ .Checkbox-wrapper,
.Checkbox-input--indeterminate:active ~ .Checkbox-wrapper {
  background-color: var(--primary-darker);
  border: 0;
}

.Checkbox--disabled .Checkbox-input--checked ~ .Checkbox-wrapper,
.Checkbox--disabled .Checkbox-input--indeterminate ~ .Checkbox-wrapper {
  background-color: var(--primary-lighter);
  border: 0;
}

/* Error State -> Default */

.Checkbox-wrapper--error {
  border: var(--border-width-2-5) 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(--border-width-2-5) solid var(--alert-dark);
}

.Checkbox-input:active ~ .Checkbox-wrapper--error {
  border: var(--border-width-2-5) solid var(--alert-darker);
  background-color: var(--secondary-light);
}

.Checkbox--disabled .Checkbox-wrapper--error {
  border: var(--border-width-2-5) solid var(--alert-lighter);
  background-color: var(--secondary-lightest);
}

/* Error State -> Checked & Indeterminate */

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

.Checkbox-input--checked:focus ~ .Checkbox-wrapper--error,
.Checkbox-input--indeterminate:focus ~ .Checkbox-wrapper--error {
  border: var(--border-width-2-5) 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(--border-width-2-5) solid var(--alert-dark);
}

.Checkbox-input--checked:active ~ .Checkbox-wrapper--error,
.Checkbox-input--indeterminate:active ~ .Checkbox-wrapper--error {
  backg