/* Based on https://codepen.io/_fbrz/pen/ljuJn */

.loader-wrapper--small--gmdw2 {
  --loader-size: 1.5rem;
}

.loader-wrapper--medium--UeYYh {
  --loader-size: 3rem;
}

.loader-wrapper--large--BF1Zz {
  --loader-size: 5rem;
}

.loader-wrapper--VoASR {
  /*
   * To change size of icon, just change value here.
   * Rest is based on this value.
   */
  --loader-size-half: calc(var(--loader-size) / 2);
  --loader-rim-size: calc(var(--loader-size) / 4);
  --loader-rim-size-small: calc(var(--loader-size) / 15);

  display: inline-block;
}

.loader-wrapper--hidden--XHYoi {
  visibility: hidden;
}

.title-wrapper--F8wC_ {
  font: var(--font-subtitle-small);
  line-height: var(--font-line-text-height);
  margin-bottom: var(--spacing-normal);
  width: 100%;
}

.loader--aOJt_ {
  color: currentColor;
  height: 100%;
  position: relative;
  width: 100%;
}

.loader__icon--UK2oA {
  animation: animate-loader-rotation--VgkCR 1.5s linear infinite;
  color: currentColor;
  clip: rect(0, var(--loader-size), var(--loader-size), var(--loader-size-half));
  height: var(--loader-size);
  width: var(--loader-size);
  position: absolute;
  left: calc(50% - var(--loader-size-half));
  top: calc(50% - var(--loader-size-half));
}

.loader__icon--UK2oA::after {
  animation: animate-loader-rim--OIrmN 1.5s ease-in-out infinite;
  content: '';
  display: block;
  border-radius: 50%;
  clip: rect(0, var(--loader-size), var(--loader-size), var(--loader-size-half));
  position: absolute;
  height: var(--loader-size);
  width: var(--loader-size);
}

@keyframes animate-loader-rotation--VgkCR {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(220deg);
  }
}

@keyframes animate-loader-rim--OIrmN {
  0% {
    box-shadow: inset currentColor 0 0 0 var(--loader-rim-size);
    transform: rotate(-140deg);
  }

  50% {
    box-shadow: inset currentColor 0 0 0 var(--loader-rim-size-small);
  }

  100% {
    box-shadow: inset currentColor 0 0 0 var(--loader-rim-size);
    transform: rotate(140deg);
  }
}

.placeholder--CjKLz .placeholder__item--primary--DKU0W {
  --placeholder-end-background-color: rgba(172,135,248,0.8);
  --placeholder-start-background-color: rgba(140,89,245,0.70196);
}

.placeholder--CjKLz .placeholder__item--grey--k7xzT {
  --placeholder-end-background-color: rgba(217,218,224,0.4);
  --placeholder-start-background-color: rgba(221,221,221,0.70196);
}

.placeholder--CjKLz .placeholder__item--hidden--RK6np {
  display: none;
}

.placeholder__item--U_vR9 {
  --placeholder-text-color: transparent;
  --transition-background-duration: 1.5s;
  --transition-opacity-duration: 0.4s;
  --transition-transform-duration: 0.3s;

  transition: 0.3s transform ease-in, 0.4s opacity ease-out;

  transition: var(--transition-transform-duration) transform ease-in, var(--transition-opacity-duration) opacity ease-out;
}

.placeholder--CjKLz .placeholder__item--U_vR9 {
  animation: pulse--u2vcH var(--transition-background-duration) infinite;
  background: linear-gradient(270deg, var(--placeholder-start-background-color), var(--placeholder-end-background-color), var(--placeholder-start-background-color)) 0% 0% / 300% 300%;

  /*
  Since we may never know the size of an element
  in advance, make sure it is always rounded.
*/
  border-radius: 99999px;
  color: var(--placeholder-text-color);
  pointer-events: none;
  box-shadow: none;
}

.placeholder--CjKLz .placeholder__item--U_vR9 > * {
  visibility: hidden;
}

.placeholder--CjKLz .actions--button--HumPh {
  color: transparent;
}

@keyframes pulse--u2vcH {
  0%,
  100% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }
}

.placeholder--CjKLz.transition-placeholder--E6r6v {
  width: 100%;
}

.transition-placeholder-enter--XJCYa .placeholder__item--U_vR9,
.transition-placeholder-leave-to--w8CgU .placeholder__item--U_vR9 {
  opacity: 0;
  transform: translateY(5px);
}

.transition-placeholder-enter-to--W50rM .placeholder__item--U_vR9,
.transition-placeholder-leave--C_B7S .placeholder__item--U_vR9 {
  opacity: 1;
  transform: translateY(0);
}

.placeholder--CjKLz.transition-placeholder-enter--XJCYa .placeholder__item--U_vR9,
.placeholder--CjKLz.transition-placeholder-leave-to--w8CgU .placeholder__item--U_vR9 {
  transform: translateY(-5px);
}

.grid--ARM5R {
  display: grid;
  grid-gap: 0 var(--grid-gutter);
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  margin: 0 var(--grid-margin);
}

.group--HGKgJ {
  margin-bottom: var(--spacing-4);
}

.group--color-dark--AQAZF {
  color: var(--primary-outer-space);
}

.group__title--ji4MO {
  align-content: center;
  color: inherit;
  display: flex;
  flex-direction: column;
  grid-column: 1;
  text-align: center;
}

.group__title-inner--njx4n {
  background: var(--neutral-athens-light);
  display: flex;
  flex-flow: column nowrap;
  flex-shrink: 0;
  position: sticky;
  top: 0;
}

.group__title--today--ndZ88 {
  color: var(--color-primary);
}

.group__day-numeric--Y_PNn {
  align-self: center;
  font: var(--font-heading-h3);
  letter-spacing: var(--font-heading-letter-spacing-h345);

  /* exception from h4 to match design */
  line-height: 1;
}

.group__date-string--p9zdn {
  font: var(--font-text-xxs);
  text-transform: uppercase;
}

.group__spacer--nBLQC {
  border-right: var(--neutral-athens) 1px solid;
  grid-column: 1;
  height: 100%;
  margin-top: var(--spacing-4);
  width: 50%;
}

.group__inner--yQ2OW {
  grid-column: 2 / 6;
}

.scrollable-list--BLFEE {
  background: var(--neutral-athens-light);
  list-style: none;
  overflow-anchor: none;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--spacing-4) 0 var(--spacing-8);
  -webkit-overflow-scrolling: touch;
}

.scrollable-list__note--IeXyr {
  display: block;
  font: var(--font-subtitle-small);
  margin: 0;
  padding: var(--spacing-8) 0 0;
  text-align: center;
}

:root {
  --grid-columns: 5;
  --grid-gutter: 15px;
  --grid-margin: 21px;
}

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

.text-wrap--Y7DKl {
  /* this is the only option that is recognized
   *  by html2canvas break-word
   *  doesn't seem to work
   */
  word-break: break-all;
  white-space: normal;
  overflow-wrap: break-word;
}

.user-selectable--D65Iw {
  user-select: text;
}

.link-green-outer-space--NR0iX {
  color: var(--color-primary);
  cursor: pointer;
}

.link-green-outer-space--NR0iX:hover {
  color: var(--outer-space);
}

.link-green-outer-space--NR0iX:focus {
  color: var(--comet);
}

.link-green-outer-space--NR0iX:focus:hover {
  color: var(--outer-space);
}

.bottom-line--pq21N {
  border-bottom: var(--neutral-athens) 1px solid;
}

.with-horizontal-label--DndoZ {
  align-items: center;
  display: flex;
}

.with-horizontal-label__icon--nSBfn {
  align-items: center;
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  margin-left: calc(var(--spacing-1) * -1);
  width: var(--spacing-10);
}

.with-horizontal-label__label--OTZn7 {
  flex: 1 1;
  font: var(--font-text-sm);
  margin-left: var(--spacing-1);
}

.with-horizontal-label__label--ellipsis--UNNrC {
}

/* =======================================
 *
 * TYPOGRAPHY: ICONS
 *
 * All icons used in Chronos are available at:
 * https://projects.invisionapp.com/d/main#/console/14635332/341487023/preview
 *
 * 1. General classes
 * 2. Sizes
 * 3. Class Setup
 *
 * ======================================= */

/* ========================================
 * 1. General classes
 * ====================================== */
.icon--TpySZ {
  /*
    By default icons will position in center.
    To position it different, pass a class to
    icon component and override this.
  */
  align-self: center;
  display: flex;
  flex: 0 0 auto;
  justify-content: flex-start;
}

.neutral-white-fill--dieJt {
  fill: var(--neutral-white);
}

.state-default-fill--LcgbF {
  fill: var(--color-primary);
}

/* ========================================
 * 2. Sizes
 * ====================================== */

.icon__item--size-large--qFqTx {
  font-size: var(--icon-font-size-lg);
}

.icon__item--size-medium--ebkQ9 {
  font-size: var(--icon-font-size-md);
}

.icon__item--size-small--pz6Cv {
  font-size: var(--icon-font-size-sm);
}

.icon__item--size-button-large--nnRx8 {
  font-size: var(--icon-font-size-button-lg);
}

.icon__item--size-button-medium--PoZBb {
  font-size: var(--icon-font-size-button-md);
}

.icon__item--size-button-small--IGJXY {
  font-size: var(--icon-font-size-button-sm);
}

/* ========================================
 * 3. Classes Setup
 * ====================================== */

.icon__item--syv9P {
  /*
    align-self needs to be defined on
    parent level. This helps to position
    icon without using extra props.
  */
  align-self: inherit;
  color: inherit; /* use !important to prevent issues with browser extensions that change fonts */
  font-family: shyftplan, sans-serif !important;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-style: normal;
  font-feature-settings: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  speak: none;
  text-transform: none;
}

/*
  NOTE: You can just copy paste css (style.css)
  generated by icomoon (it is included in folder).
  To reflect in Chronos UI, add new icons to
  /tokens/icon/allIcons.ts
*/

.icon__item--sort-down-path1--kE0OI::before {
  content: '\e967';
  color: #8c59f5;
}

.icon__item--sort-down-path2--yCV95::before {
  content: '\e968';
  margin-left: -1em;
  color: #000;
}

.icon__item--sort-up-path1--YJ9wC::before {
  content: '\e969';
  color: #000;
}

.icon__item--sort-up-path2--M25el::before {
  content: '\e96a';
  margin-left: -1em;
  color: #8c59f5;
}

.icon__item--sort-default--k3Siw::before {
  content: '\e966';
}

.icon__item--arrow-down--Z6bSj::before {
  content: '\e903';
}

.icon__item--arrow-handle-down--d4W_n::before {
  content: '\e904';
}

.icon__item--arrow-handle-left--DVCy4::before {
  content: '\e905';
}

.icon__item--arrow-handle-right--uCzun::before {
  content: '\e906';
}

.icon__item--arrow-handle-up--a3746::before {
  content: '\e907';
}

.icon__item--arrow-left--p4EID::before {
  content: '\e908';
}

.icon__item--arrow-right--D1QCd::before {
  content: '\e909';
}

.icon__item--arrow-up--EQB4N::before {
  content: '\e90a';
}

.icon__item--attachment--TeCFo::before {
  content: '\e90b';
}

.icon__item--box--R6AJr::before {
  content: '\e90c';
}

.icon__item--calendar--_8V8p::before {
  content: '\e90d';
}

.icon__item--calendar-availability--Y2_pJ::before {
  content: '\e900';
}

.icon__item--calendar-available--ekSOq::before {
  content: '\e90e';
}

.icon__item--calendar-first-day--jyOWZ::before {
  content: '\e90f';
}

.icon__item--calendar-last-day--vFSRP::before {
  content: '\e910';
}

.icon__item--calendar-my-shifts--gVQV3::before {
  content: '\e911';
}

.icon__item--calendar-offer-shifts--yC7C1::before {
  content: '\e912';
}

.icon__item--calendar-open-shifts--tU3aE::before {
  content: '\e913';
}

.icon__item--calendar-unavailable--WqANm::before {
  content: '\e914';
}

.icon__item--calendar-views--KfMtd::before {
  content: '\e901';
}

.icon__item--camera--Prwrk::before {
  content: '\e915';
}

.icon__item--cancel--QryLQ::before {
  content: '\e96c';
}

.icon__item--chat--_qJUA::before {
  content: '\e916';
}

.icon__item--check--KmQh5::before {
  content: '\e917';
}

.icon__item--clock--c7WTl::before {
  content: '\e918';
}

.icon__item--close--DdHS6::before {
  content: '\e919';
}

.icon__item--collapse--ZMDRW::before {
  content: '\e91a';
}

.icon__item--companies-b--rsUOE::before {
  content: '\e95d';
}

.icon__item--companies-m--ntaeR::before {
  content: '\e95e';
}

.icon__item--companies-s--mDn4D::before {
  content: '\e95f';
}

.icon__item--context-horizontal--K3lRd::before {
  content: '\e91b';
}

.icon__item--context-vertical--hyliT::before {
  content: '\e91c';
}

.icon__item--contract--yu3Rt::before {
  content: '\e91d';
}

.icon__item--dashboard--fJr2h::before {
  content: '\e91e';
}

.icon__item--delete--hYAG0::before {
  content: '\e964';
}

.icon__item--download--Kcl2o::before {
  content: '\e91f';
}

.icon__item--drag-handle--Y7r2y::before {
  content: '\e920';
}

.icon__item--drag-handle-down--UDq0k::before {
  content: '\e921';
}

.icon__item--drag-handle-up--oPZXF::before {
  content: '\e922';
}

.icon__item--edit--B7V8y::before {
  content: '\e923';
}

.icon__item--employees--Czifz::before {
  content: '\e965';
}

.icon__item--energy--zvjYo::before {
  content: '\e924';
}

.icon__item--expand--NClYo::before {
  content: '\e925';
}

.icon__item--eye--RNF6B::before {
  content: '\e926';
}

.icon__item--eye-cut--YwecI::before {
  content: '\e927';
}

.icon__item--facebook--wZU0l::before {
  content: '\e928';
}

.icon__item--filter--UFrB8::before {
  content: '\e929';
}

.icon__item--gallery--LiFFI::before {
  content: '\e92a';
}

.icon__item--globe--rDRX9::before {
  content: '\e92c';
}

.icon__item--google-drive--dajf_::before {
  content: '\e92b';
}

.icon__item--home--STv0H::before {
  content: '\e92d';
}

.icon__item--imac--jB62R::before {
  content: '\e92e';
}

.icon__item--info--fRCrw::before {
  content: '\e92f';
}

.icon__item--info-filled--nvPh9::before {
  content: '\e610';
}

.icon__item--info-question--z0LRz::before {
  content: '\e930';
}

.icon__item--instagram--S4cqH::before {
  content: '\e931';
}

.icon__item--join-request--xYYRU::before {
  content: '\e962';
}

.icon__item--leave-request--R6VDQ::before {
  content: '\e961';
}

.icon__item--linkedin--BK4yu::before {
  content: '\e932';
}

.icon__item--location--qUMnD::before {
  content: '\e933';
}

.icon__item--mail--G_neC::before {
  content: '\e934';
}

.icon__item--medal--mUgPP::before {
  content: '\e935';
}

.icon__item--medium--r0x1u::before {
  content: '\e936';
}

.icon__item--megaphon--EIf84::before {
  content: '\e937';
}

.icon__item--menu--f_5BN::before {
  content: '\e938';
}

.icon__item--moon--YepUJ::before {
  content: '\e939';
}

.icon__item--notebook--KCf0X::before {
  content: '\e93a';
}

.icon__item--notes--pVZlo::before {
  content: '\e93b';
}

.icon__item--notification--RG1Pf::before {
  content: '\e93c';
}

.icon__item--notification-notify--nIbiZ::before {
  content: '\e93d';
}

.icon__item--paid--ZWQF0::before {
  content: '\e902';
}

.icon__item--password--ypM3P::before {
  content: '\e93e';
}

.icon__item--payroll--m89q4::before {
  content: '\e93f';
}

.icon__item--phone--Tbzgc::before {
  content: '\e940';
}

.icon__item--plus--1MrzT::before {
  content: '\e941';
}

.icon__item--position--im33E::before {
  content: '\e942';
}

.icon__item--punchtime-default--rssIg::before {
  content: '\e943';
}

.icon__item--punchtime-mode--ZVznN::before {
  content: '\e944';
}

.icon__item--punchtime-pause--FUu5u::before {
  content: '\e945';
}

.icon__item--push--jVSOt::before {
  content: '\e946';
}

.icon__item--replace-request--cXgIp::before {
  content: '\e960';
}

.icon__item--report-problem--xZbug::before {
  content: '\e96e';
}

.icon__item--search--zMlQv::before {
  content: '\e947';
}

.icon__item--send--IDtPv::before {
  content: '\e948';
}

.icon__item--server--Hvnfh::before {
  content: '\e949';
}

.icon__item--settings--a5OJ2::before {
  content: '\e94a';
}

.icon__item--settings-alternate--TTeVk::before {
  content: '\e96b';
}

.icon__item--sheet-chart--AQsCN::before {
  content: '\e94b';
}

.icon__item--sickness--yko4m::before {
  content: '\e94c';
}

.icon__item--smart-phone--isvQc::before {
  content: '\e94d';
}

.icon__item--status--iX0Co::before {
  content: '\e94e';
}

.icon__item--subtract--Vy8MA::before {
  content: '\e94f';
}

.icon__item--swap--V6Wib::before {
  content: '\e950';
}

.icon__item--tablet--uL_Hi::before {
  content: '\e951';
}

.icon__item--tag--sHIUk::before {
  content: '\e952';
}

.icon__item--tooltip-information--KjgoV::before {
  content: '\e96d';
}

.icon__item--trash--q_KDd::before {
  content: '\e953';
}

.icon__item--twitter--kH0gq::before {
  content: '\e954';
}

.icon__item--undo--Mewro::before {
  content: '\e955';
}

.icon__item--unpaid--ujtAZ::before {
  content: '\e963';
}

.icon__item--update--AlXSg::before {
  content: '\e956';
}

.icon__item--upload--wgTqC::before {
  content: '\e957';
}

.icon__item--user--F52iZ::before {
  content: '\e958';
}

.icon__item--vacation--WwaFp::before {
  content: '\e959';
}

.icon__item--views--mfn8z::before {
  content: '\e95a';
}

.icon__item--write-dashboard-message--PYvsQ::before {
  content: '\e95b';
}

.icon__item--xing--hDX0s::before {
  content: '\e95c';
}

@font-face {
  font-family: shyftplan;
  font-style: normal;
  src: url(mobile-assets.shyftplan.8ffc92be9474d92a1907.woff) format('woff');
}

.tag--kEBQN {
  --border-radius: 9999px;

  border-radius: 9999px;

  border-radius: var(--border-radius);
  color: var(--neutral-white);
  display: inline-block;
  font: var(--font-caption);
  letter-spacing: var(--font-heading-letter-spacing-text);
  font-weight: var(--font-weight-bold);
  padding: var(--spacing-2) var(--spacing-4);
  max-width: 100%;
}

.tag--small--hnm1w {
  font-weight: var(--font-weight-medium);
  padding: 0 var(--spacing-2);

  /* 18px */
  line-height: 1.125rem;
}

.tag__inner--p1Q87 {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  display: block;
}

.user-avatar--tzhyV {
  display: flex;
  align-content: center;
  justify-content: center;
  place-content: center;
  width: var(--user-icon-size);
}

.user-avatar--large--yvvvV {
  --user-icon-size: 3.5rem;
}

/*
 * Just to accomodate 3 variations of images
 * TODO: Check with Lencin if we need 3 versions.
 */

.user-avatar--medium--OHfEv {
  --user-icon-size: 1.875rem;
}

.user-avatar--small--OST_g {
  --user-icon-size: 1.62rem;
}

.user-avatar__icon--nS7bd {
  border-radius: 50%;
  height: var(--user-icon-size);
  width: var(--user-icon-size);
}

.avatar-with-fallback--CLkv1 {
  align-items: center;
  background: var(--palettes-gray-lighter);
  border-radius: 50%;
  display: flex;
  font-size: var(--avatar-font-size) !important;
  height: var(--avatar-size);
  justify-content: center;
  margin-left: var(--spacing-1);
  width: var(--avatar-size);
}

.avatar-with-fallback--large--oM3hO {
  --avatar-font-size: var(--font-size-heading-md);
  --avatar-size: 3.5rem;
}

.avatar-with-fallback--small--mkUo0 {
  --avatar-font-size: var(--font-size-text-md);
  --avatar-size: 1.5rem;
}

.staffing-state--overstaffed--fBodd {
  color: var(--feedback-error);
}

.staffing-state--understaffed--Xz4nc {
  color: var(--feedback-warning);
}

.staffing-state--fully-staffed--nMBOO {
  color: var(--feedback-success);
}

.user-lineup--Ul48M {
  align-items: center;
  display: flex;
  margin-top: var(--spacing-3);
}

.user-lineup__avatar--jubed {
  /*
    Add a background color so that
    users can see something before image
    loads
  */
  background: var(--neutral-athens);
  border-radius: 50%;
  font: var(--font-small-text);
  margin-left: var(--spacing-1);
}

.user-lineup--Ul48M .user-lineup__avatar--jubed {
  --user-icon-size: 1.5rem;

  /*
   * CSS specificity to ensure avatars on
   * placeholder are circles.
   * Placeholders have by default display
   * property as inline.
   */
  display: flex;
}

.user-lineup__avatar--jubed:first-child {
  margin-left: 0;
}

.user-lineup__avatar--icon--rqsh8 {
  align-content: center;
  background: var(--outer-space);
  border-radius: 99999px;
  color: var(--neutral-white);
  height: var(--user-icon-size);
  justify-content: center;
  width: var(--user-icon-size);
}

.user-lineup__slots--BSx2n {
  color: var(--color-primary);
  font: var(--font-text-sm);
  margin-left: var(--spacing-2);
}

.user-lineup__slots--BSx2n:first-child {
  margin-left: 0;
}

.ripple--oUAtZ {
  --color-button-ripple: rgba(140, 89, 245, 0.3);
  --color-button-ripple-light: rgba(255, 255, 255, 0.3);
  --color-button-ripple-error: rgba(217, 83, 79, 0.3);
  --color-button-ripple-neutral: rgba(46, 53, 61, 0.3);
  --color-button-ripple-grey: rgba(46, 53, 61, 0.3);
}

@keyframes ripple--oUAtZ {
  0% {
    transform: scale(1, 1);
  }

  40% {
    transform: scale(12, 20);
  }

  100% {
    transform: scale(12, 20);
  }
}

.ripple--oUAtZ {
  border-radius: 50%;
  height: 20%;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  transform: scale(12, 20);
  transform-origin: center center;
  transition: opacity var(--transition-default);
  width: 20%;

  /* as position: absolute creates a new stacking context, -1 should be fine */
  z-index: -1;
}

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

.ripple--light--soLCE {
  background-color: var(--color-button-ripple-light);
}

.ripple--grey--VKoJg {
  background-color: var(--color-button-ripple-grey);
}

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

.ripple--neutral--nnbuh {
  background-color: var(--color-button-ripple-neutral);
}

.ripple--active--K1ete {
  animation: ripple--oUAtZ 0.3s var(--transition-timing-function-default) 1;
  opacity: 1;
  transform: scale(12, 20);
  /* disable transition for enter */
  transition-duration: 0;
}

.button--yxYEm {
  --color-button-disabled: var(--neutral-comet);
  --background-color-button-disabled: var(--neutral-athens);
  --button-disabled-opacity: 0.6;
  --background-color-button: var(--color-primary);
  --color-button: var(--color-primary);
  --color-button-hover: rgba(140,89,245,0.30196);

  border: none;
  color: var(--color-button);
  cursor: pointer;
  display: flex;
  font: var(--button-font);
  letter-spacing: var(--font-heading-letter-spacing-text);
  font-weight: var(--button-font-weight);
  justify-content: center;
  line-height: var(--font-line-text-height);
  overflow: hidden;
  padding: var(--button-padding);
  position: relative;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;

  /* to remove buttons tab blue circle in mobile */
  -webkit-tap-highlight-color: transparent;

  /* fix for border-radius + overflow:hidden bug on safari */
  will-change: transform;
  -webkit-mask-image: radial-gradient(white, black);
          mask-image: radial-gradient(white, black);
}

/* button sizes */

.button--small--L2u3J {
  --button-font-weight: var(--font-weight-regular);
  --button-font: var(--font-body-small);
  --button-padding: var(--spacing-2) var(--spacing-7);
  --font-line-text-height: 1.125rem; /* 18px */
}

.button--medium--p9N7l {
  --button-font-weight: var(--font-weight-medium);
  --button-font: var(--font-subtitle-big);
  --button-padding: var(--spacing-5) var(--spacing-9);
  --font-line-text-height: 1.1875rem; /* 19px */
}

.button--large--U7TTI {
  --button-font-weight: var(--font-weight-medium);
  --button-font: var(--font-body-big);
  --button-padding: var(--spacing-6) var(--spacing-11);
  --font-line-text-height: 1.375rem; /* 22px */
}

/* this is needed to position ripple properly */
.button__content--sGtT_ {
  display: flex;
  flex: 1 1;
  justify-content: center;
  overflow: hidden;
  z-index: 2;
}

.button--yxYEm:focus {
  outline: none;
}

.button--yxYEm:disabled {
  color: var(--color-button-disabled);
  opacity: var(--button-disabled-opacity);
  pointer-events: none;
}

.button--yxYEm svg,
.button--yxYEm svg * {
  display: block;
  height: var(--button-icon-size);
  width: var(--button-icon-size);
}

/* button colors */
.button--success--ydmV5 {
  --color-button: var(--color-primary);
}

.button--error--J9eKY {
  --color-button: var(--feedback-error);
  --background-color-button: var(--feedback-error);
  --color-button-hover: rgba(217,83,79,0.2);
}

.button--neutral--M_B9Q {
  --color-button: var(--outer-space);
  --background-color-button: var(--outer-space);
  --color-button-hover: rgba(46,53,61,0.2);
}

.button--grey--K6QRQ {
  --color-button: var(--outer-space) !important;
  --background-color-button: var(--neutral-athens);
  --color-button-hover: rgba(46,53,61,0.2);
}

.button--pressed--_BxJ3 {
  background-color: var(--color-button-hover) !important;
}

.button-icon--SmC9B {
  --background-color-primary: var(--background-color-button);
  --background-color-secondary: var(--neutral-athens);
  
  --size-large: calc(var(--icon-font-size-lg) + calc(var(--icon-font-size-lg) * 0.8));
  --size-medium: calc(var(--icon-font-size-md) + calc(var(--icon-font-size-md) * 0.8));
  --size-small: calc(var(--icon-font-size-sm) + calc(var(--icon-font-size-sm) * 0.8))
}

.button-icon--colored--BgRFy {
  --color-button: var(--neutral-white);
  background-color: var(--background-color-button);
}

.button-icon--outline--spB1b {
  box-shadow: inset 0 0 0 2px var(--background-color-button);
  color: var(--color-button);
}

.button-icon--outline--spB1b,
.button-icon--ghost--g5zMD {
  background: none;
  color: var(--color-button);
}

.button-icon--SmC9B:disabled {
  color: var(--color-button-disabled);
}

.button-icon--colored--BgRFy:disabled {
  background-color: var(--background-color-button-disabled);
}

/* hover styles */
@media (hover: hover) {
  .button-icon--ghost--g5zMD:hover,
  .button-icon--outline--spB1b:hover {
    background-color: var(--color-button-hover);
  }
}

.button-icon--large--lHXMP {
  --button-icon-dimension: var(--button-icon-size-lg);
  --button-icon-font: var(--icon-sizes-button-lg);
}

.button-icon--medium--EnSIF {
  --button-icon-dimension: var(--button-icon-size-md);
  --button-icon-font: var(--icon-sizes-button-md);
}

.button-icon--medium--EnSIF {
  height: var(--size-medium);
  width: var(--size-medium);
}

.button-icon--small--DHv3m {
  --button-icon-dimension: var(--button-icon-size-sm);
  --button-icon-font: var(--icon-sizes-button-sm);
}

.button-icon--SmC9B {
  /* Fix for Chrome issue: https://www.chromestatus.com/feature/5213452823953408 */
  align-items: center;
  border-radius: 50%;
  display: flex;
  font: var(--button-icon-font);
  height: var(--button-icon-dimension);
  justify-content: center;
  padding: 0;
  width: var(--button-icon-dimension);
}

:root {
  --grid-margin: var(--spacing-7);
  --back-button-z-index: 10;
}

.with-back-button--VCal9 {
  display: flex;
  flex-flow: column nowrap;

  /* bottom navigation is never present in WithBackButton */
  height: 100%;
  width: 100%;

  /* for iOS <11.x */
  padding: constant(safe-area-inset-top) 0 constant(safe-area-inset-bottom);
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
  padding-top: var(--android-top-inset);
  padding-bottom: var(--android-bottom-inset);
}

.with-back-button__button-bar--yUApX {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding: var(--grid-margin) var(--grid-margin) 0;
}

.with-back-button__other--XE6Rh {
  /* just to have a class, might need it in the future */
}

.with-back-button__button--zXTt3 {
  /* This moves the left edge of the used icon flush to left edge of its parent */
  margin-left: calc( -1 * ( var(--button-icon-dimension) - var(--icon-font-size-button-lg) ) / 2 );
}

.with-back-button__button--back--b3WHI {
  background-color: transparent;
  color: var(--color-primary);
  cursor: pointer;
  transform: rotate(180deg);
}

.with-back-button__before-title--nirh9 {
  margin-bottom: var(--spacing-2);
}

.with-back-button__title--vslIp {
  background: var(--neutral-white);
  color: inherit;
  font: var(--font-heading-h3);
  letter-spacing: var(--font-heading-letter-spacing-h356);
  margin: 0 calc(-1 * var(--grid-margin)) var(--spacing-6) 0;
  padding: 0 var(--grid-margin) var(--spacing-5) 0;
  position: sticky;
  flex-shrink: 0;

  /* must match the top padding of with-back-button__content */
  top: calc(-1 * var(--spacing-7));

  /*
    Make it big so that z-index on Chronos Components
    does not affect. Also check Overlay component to make
    sure value does not exceed over that.
  */
  z-index: 10;
  z-index: var(--back-button-z-index);
}

.with-back-button__title-inner--Y5iNA {
  flex: 1 1;
}

.with-back-button__content--c_qOq {
  flex: 1 0;
  overflow-y: auto;
  padding: var(--spacing-7) var(--grid-margin) var(--grid-margin);
  width: 100%;
  display: flex;
  flex-direction: column;
  scroll-behavior: smooth;

  /* FAQ: Do not use -webkit-overflow-scrolling: touch; here as it will create a new stacking context
     interfering with modal display (e.g. Overlay or InputSelectDrawer) */

  /* -webkit-overflow-scrolling: touch; */
}

.with-back-button__content--has-bottom-bar--Pj5T_ {
  padding-bottom: var(--spacing-16);
}

.with-back-button__content--has-bottom-bar--Pj5T_::after {
  --bottom-bar-height: calc(calc(2 * var(--grid-margin)) + var(--spacing-16));

  content: ' ';
  min-height:
    calc(
      var(--bottom-bar-height) + var(--spacing-7) + var(--grid-margin)
    );
  width: 100%;
  display: block;
}

.with-back-button__bottom-bar--WC1md {
  display: flex;
  flex-flow: column nowrap;
  padding: var(--grid-margin);
  width: 100%;
  z-index: 10;
  z-index: var(--back-button-z-index);
  background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,0.94902) 40%);
}

.list--hmSsO {
  width: calc(100% + var(--spacing-7));
}

.overlay--z2VZf {
  --z-index: 999;
  --z-index-background: -1;
  --z-index-container: 0;
  --background-transition-duration: 0.4s;
  --container-transition-duration: 0.2s;

  bottom: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  justify-content: flex-end;
  left: 0;
  position: fixed;
  width: 100vw;
  z-index: 999;
  z-index: var(--z-index);
}

.overlay__background--QPGxu {
  background-color: rgba(0,0,0,0.8);
  bottom: 0;
  height: 100%;
  position: absolute;
  top: 0;
  transition: var(--background-transition-duration) opacity ease-out;
  width: 100%;
  z-index: var(--z-index-background);
}

.overlay__container--EkYoG {
  display: flex;
  flex-direction: column;
  max-height: 75%;
  transition: var(--container-transition-duration) transform ease-in;
  z-index: var(--z-index-container);
  overflow: hidden;
}

.overlay__label--Zh1qz {
  color: var(--neutral-white);
  font: var(--font-caption);
  letter-spacing: var(--font-heading-letter-spacing-text);
  margin: var(--spacing-10) var(--spacing-7) 0;
  transition: var(--background-transition-duration) opacity ease-out;
}

.overlay__body--UKPXJ {
  background: var(--neutral-athens-light);
  border-radius: var(--spacing-8) var(--spacing-8) 0 0;
  color: var(--outer-space);
  margin: var(--spacing-10) 0 0 0;
  overflow: auto;
  padding: var(--spacing-7) 0;
  width: 100%;
  padding-bottom: var(--android-bottom-inset);
}

.overlay__label--Zh1qz + .overlay__body--UKPXJ {
  margin-top: var(--spacing-3);
}

/* TRANSITION CLASSES */

/* overlay background transition */
.transition-slide-enter--MXPP5 .overlay__background--QPGxu,
.transition-slide-leave-to--_ARBS .overlay__background--QPGxu,
.transition-slide-enter--MXPP5 .overlay__label--Zh1qz,
.transition-slide-leave-to--_ARBS .overlay__label--Zh1qz {
  opacity: 0;
}

.transition-slide-enter-to--OPUwE .overlay__background--QPGxu,
.transition-slide-leave--Cq0L7 .overlay__background--QPGxu,
.transition-slide-enter-to--OPUwE .overlay__label--Zh1qz,
.transition-slide-leave--Cq0L7 .overlay__label--Zh1qz {
  opacity: 1;
}

/* Main Content transition */
.transition-slide-enter--MXPP5 .overlay__container--EkYoG,
.transition-slide-leave-to--_ARBS .overlay__container--EkYoG {
  transform: translateY(100%);
}

.transition-slide-enter-to--OPUwE .overlay__container--EkYoG,
.transition-slide-leave--Cq0L7 .overlay__container--EkYoG {
  transform: translateY(0);
}

.button-round--gbzy7 {
  border-radius: 999px;
  transition: background-color var(--transition-default);
}

.button-round--colored--ipKIp {
  --color-button: var(--neutral-white);

  background-color: var(--background-color-button);
}

.button-round--outline--Oz9l3 {
  box-shadow: inset 0 0 0 2px var(--background-color-button);
  color: var(--color-button);
}

.button-round--outline--Oz9l3,
.button-round--ghost--HDZIZ {
  background: none;
  color: var(--color-button);
}

/* hover styles */
@media (hover: hover) {
  .button-round--ghost--HDZIZ:hover,
  .button-round--outline--Oz9l3:hover {
    background-color: var(--color-button-hover);
  }
}

/* disabled styles */
.button-round--gbzy7:disabled {
  color: var(--color-button-disabled);
}

.button-round--colored--ipKIp:disabled {
  background-color: var(--background-color-button-disabled);
}

.button-round--outline--Oz9l3:disabled {
  box-shadow: inset 0 0 0 2px var(--background-color-button-disabled);
}

.warning__title--yfnm1 {
  color: var(--feedback-error);
  font: var(--font-heading-h4);
  letter-spacing: var(--font-heading-letter-spacing-h345);
  padding: 0 0 var(--spacing-5) 0;
  grid-column: span 6;
}

.warning__description--Wc_75 {
  grid-column: span 6;
  padding-top: var(--spacing-7);
}

.warning__actions--N4Yh0 {
  display: flex;
  font: var(--font-body-small);
  grid-column: span 6;
  justify-content: flex-end;
  padding: var(--spacing-7) 0 0 0;
}

.warning__action--sxnrT {
  margin-left: var(--spacing-7);
}

.step-form__steps--kfKhb {
  flex: 1 1;
  overflow: hidden;
}

.step-form__step--XmgM0 {
  padding: var(--spacing-5) 0 var(--spacing-5) 0;
}

.step-form__step--XmgM0:first-child {
  padding: 0;
}

.step-form__step--XmgM0:last-child {
  border: none;
}

.step-form__input-line--yr4xl {
  margin-bottom: var(--spacing-5);
}

.step-form__select--RYvnT {
  margin-right: var(--spacing-4);
}

.steps-navigation--DML3k {
  --step-indicator-item-width: 0.375rem;

  /* rgba value for box-shadow is based on neutral-athens */
  --steps-box-shadow: 0 2px 45px 0 rgba(231, 232, 237, 0.8);

  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;

  /*
    WithBackButton has a default padding
    of var(--grid-margin). Since button
    has a background, need to negate
    parent padding and set its own padding.
  */
  padding: var(--grid-margin);
  margin: calc(-1 * var(--grid-margin));
  background: var(--neutral-white);
  box-shadow: 0 2px 45px 0 rgba(231, 232, 237, 0.8);
  box-shadow: var(--steps-box-shadow);
}

.steps-counter--Qpixg {
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex: 1 1;
}

.step-indicator--w577n {
  width: calc(2 * var(--step-indicator-item-width));
  height: var(--step-indicator-item-width);
  margin: 0 var(--spacing-3);
  display: flex;
  justify-content: center;
  align-content: center;
}

.step-indicator--w577n::after {
  content: '';
  display: block;
  border-radius: 9999px;
  width: 100%;
  height: 100%;
  transition: transform var(--transition-default), background-color var(--transition-default);
}

.step-indicator--w577n:not(.step-indicator--active--d7Gq7)::after {
  transform: scaleX(0.5);
  background-color: var(--neutral-athens);
}

.step-indicator--active--d7Gq7::after {
  transform: scaleX(1);
  background-color: var(--color-primary);
}

.step-indicator--hidden--lseEa {
  display: none;
}

.steps-item--AerfG {
  padding: var(--spacing-2);
}

.steps-item--hidden--OVNow {
  visibility: hidden;
}

.steps-item-previous-icon--ltxpT {
  margin-right: var(--spacing-2);
}

.steps-item-next-icon--SrP8K {
  margin-left: var(--spacing-2);
}

.user-with-avatar--BOOFH {
  align-items: stretch;
  color: var(--outer-space);
  display: grid;
  font: var(--font-heading-h5);
  letter-spacing: var(--font-heading-letter-spacing-h345);
  grid-template-columns: 1fr 10fr 1fr;
}

.user-with-avatar--small--_Jtqg {
  font: var(--font-caption);
  letter-spacing: var(--font-heading-letter-spacing-text);
}

.user-with-avatar__avatar--UFqEL {
  margin: var(--spacing-4) var(--spacing-4) var(--spacing-4) 0;
  grid-column: 1;
  grid-row: 1;
}

.user-with-avatar__name--gCiYx {
  color: var(--outer-space);
  display: flex;
  flex: 1 1;
  padding: var(--spacing-4) var(--spacing-4) var(--spacing-4) 0;
  align-items: center;
  grid-row: 1;
  grid-column: 2/4;
  text-align: left;
}

.user-with-avatar__border--G2oxE {
  grid-row: 3;
  grid-column: 2/4;
}

.user-with-avatar__actions--sKyhx {
  grid-row: 2;
  grid-column: 2/4;
  margin-right: var(--spacing-7);
}

.user-with-avatar__flags--FZ2gd {
  display: flex;
  align-items: center;
  grid-row: 1;
  grid-column: 3;
  margin-right: var(--spacing-7);
}

/* This is common styling referenced for all common input types. */
.input-text-common--gfxRV {
  --disabled-opacity: 0.5;

  border: none;
  border-radius: 0;
  background: none;
  padding: 0;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.input-text-common--gfxRV:focus {
  outline: none;
}

.input-text-common--gfxRV:disabled {
  opacity: var(--disabled-opacity);
  pointer-events: none;
}

.input-text-common--gfxRV::placeholder {
  color: var(--neutral-athens);
  font: inherit;
}

.text-input--error--C_SDp .input-text-common--gfxRV {
  color: var(--feedback-error);
}

.input-text--wqc5G {
  /* color: var(--color-primary); */
  font: var(--font-body-big);
  letter-spacing: var(--font-heading-letter-spacing-text);
  flex: 1 1 100%;
}

.input-text--wqc5G:focus {
  color: var(--color-primary);
  caret-color: currentColor;
}

.input-text-common--with-border--ySyy0 {
  border-bottom: var(--neutral-athens) 2px solid;
  padding-bottom: var(--spacing-2);
}

.input-text-common--with-border--ySyy0:focus {
  border-bottom-color: var(--color-primary);
}

.input-wrapper--E4Vg2 {}

/* INPUT STATUS */
.input--none--EwMyr {}

.input--error--dkTSv {}

.input--success--xDxLr {}

.input--disabled--sSEdB {
  opacity: 0.5;
  pointer-events: none;
}

/*
 * Main Elements for Input. It has:
 * 1. Label
 * 2. Container for actual element
 * 3. Error message
 */

.input__label--IVsk5 {
  color: var(--primary-outer-space);
  display: block;
  font: var(--font-caption);
  letter-spacing: var(--font-heading-letter-spacing-text);
  margin-bottom: var(--spacing-half);
  width: 100%;
}

.input__icon--SPqu7 {
  align-self: center;
  margin: 0 var(--spacing-3) 0 0;
}

/* container for actual element */
.input__inner-container--KCrsf {
  align-items: center;
  display: inline-flex;
  flex-flow: nowrap;
  justify-content: flex-start;
  width: 100%;
  flex: 1 1;
}

.input__inner-container--has-border--iE5Zc {
}

.input__inner-container--has-border--iE5Zc:focus-within {
  border-color: var(--color-primary);
}

.input__error-message--uwHvK {
  color: var(--feedback-error);
  font: var(--font-small-text);
  width: 100%;
}

.input__error-message--uwHvK:not(:empty) {
  padding-top: var(--spacing-normal);
}

/**
 * Set default style for invalid elements.
 */
:not(output):-moz-ui-invalid {
  box-shadow: none;
}

:not(output):-moz-ui-invalid:-moz-focusring {
  box-shadow: none;
}

/**
 * Classes for inputs with suffix
 */
.input__slot-wrapper--HqBNf {
  position: relative;
  font: var(--font-heading-h3);
  letter-spacing: var(--font-heading-letter-spacing-h345);
  color: var(--primary-outer-space);
  display: flex;
  align-items: center;
  flex: 1 1;
}

.input__slot--NTiJq,
.input__suffix--nEcUj {
  letter-spacing: var(--font-heading-letter-spacing-h345);
  font: var(--font-heading-h3);
}

.input__slot--NTiJq {
  flex: 1 1 100%;
}

.button-full-width--uGpd0 {
  background-color: var(--background-color-button);
  width: 100%;
}

.button-full-width--colored--5qGxW {
  --color-button: var(--neutral-white);
}

.button-full-width--ghost--B8BIF {
  background-color: transparent;
  color: var(--outer-space);
}

.button-full-width--uGpd0:disabled {
  background-color: var(--background-color-button-disabled);
}

.input-select-drawer--PXOPr {
  --color-input-text: var(--color-primary);
  --color-drawer-icon: inherit;
}

.input-select-drawer__input--V5c7M {
  align-items: center;
  background: 0;
  border: 0;
  color: inherit;
  display: flex;
  font: inherit;
  margin: 0;
  max-width: 100%;
  outline: 0;
  padding: 0;
  text-align: left;
}

.input-select-drawer__input-text--Pxz8A {

  color: var(--color-input-text);
}

.input-select-drawer__input--disabled--eUGbf .input-select-drawer__input-text--Pxz8A {
  color: var(--neutral-athens);
}

.input-select-drawer__input--empty--wDRnI .input-select-drawer__input-text--Pxz8A {
  color: var(--primary-outer-space);
}

.input-select-drawer__input--invalid--K7xSD .input-select-drawer__input-text--Pxz8A {
  color: var(--feedback-error);
}

.input-select-drawer__icon--fDsYe {
  color: var(--color-drawer-icon);
  margin: 0 0 0 0.75rem;
}

.input-select-drawer__options--VMnI8 {
  list-style: none;
  margin: 0;
  outline: 0;
  padding: 0 0 0 var(--spacing-7);
}

.input-select-drawer__option--_kQKV {
  color: var(--primary-outer-space);
}

.input-select-drawer__option--_kQKV:not(:last-child) {
  border-bottom: var(--neutral-athens) 1px solid;
}

.input-select-drawer__option--selected--W4mKt {
  color: var(--color-primary);
}

.input-select-drawer__option--disabled--RGZQk {
  color: var(--neutral-comet);
  opacity: 0.6;
}

.input-select-drawer__button--cck93 {
  color: inherit;
  padding: var(--spacing-7) var(--spacing-7) var(--spacing-7) 0;
  width: 100%;
}

.input-select-drawer__option--_kQKV:not(.input-select-drawer__option--selected--W4mKt)
  .input-select-drawer__button--cck93:focus {
  color: var(--primary-cod-gray);
}

.input-select-drawer__option-text--Oblr0 {

  flex: 1 1;
  text-align: left;
}

.input-select--IMYBY {
  --select-icon-width: var(--spacing-normal);

  background: var(--neutral-white);
  height: var(--select-height);
  font: var(--font-body-big);
  letter-spacing: var(--font-heading-letter-spacing-text);
  overflow: hidden;
  position: relative;
}

.input-select__icon--qtyvI {
  justify-content: center;
  pointer-events: none;

  /* FIXME: colors should be `inherit` so they can more easily be changed from the outside */
  color: var(--neutral-comet);
}

.input-select__input--d398Y {
  --select-height: 50px;

  /* hide select dropdown arrow */
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  appearance: none;
  font: inherit;
  background: transparent;
  border: none;
  height: 100%;
  padding: 0 var(--select-icon-width) 0 0;
  outline: none;
  min-width: 0;

  /* FIXME: colors should be `inherit` so they can more easily be changed from the outside */
  color: var(--color-primary);
}

.input-select__input--empty--CDcLW {
  color: var(--neutral-black);
}

/* Internet Explorer 10–11 and Edge */
.input-select__input--d398Y::-ms-expand {
  display: none;
}

/* Internet Explorer 10–11 and Edge */
.select-input__option--zXzeg::-ms-expand {
  display: none;
}

.input-time--ZVTBi {
  --date-input-letter-spacing: -0.04125rem; /* 5px */
  --date-input-width: 10.25rem;

  display: flex;
  width: 100%;
}

.input-time__input--j2OSX {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 0;
  border-radius: 0;
  color: var(--primary-outer-space);
  font: var(--font-heading-h5);
  letter-spacing: var(--date-input-letter-spacing);
  /*
   * When cleared, nothing is visible in Input Date.
   * So to maintain height aspect with icon,
   * need to add min-height of 25px.
  */
  min-height: 2.35rem;
  -webkit-tap-highlight-color: transparent;
}

.input-time--no-value--QFDps.input-time--is-apple--uKuUG .input-time__input--j2OSX::before {
  color: var(--neutral-athens);
  /* Fix for Safari to display placeholder */
  content: attr(placeholder);
  font: inherit;
  transform: translate(var(--spacing-3));
  transform-origin: left;
}

/* hide placeholder text in Mobile browsers other than Safari */
.input-time--no-value--QFDps.input-time--is-apple--uKuUG .input-time__input--j2OSX::-webkit-datetime-edit-fields-wrapper {
  display: none;
}

.input-time__input--j2OSX::-webkit-clear-button,
.input-time__input--j2OSX::-webkit-inner-spin-button,
.input-time__input--j2OSX::-webkit-calendar-picker-indicator {
  -webkit-appearance: none;
          appearance: none;
  display: none;
}

.input-time__input--j2OSX::-ms-clear,
.input-time__input--j2OSX::-ms-expand {
  display: none;
}

.time__input--error--BoOlM.input-time__input--j2OSX {
  color: var(--feedback-error);
}

.input-number__input--P8tJX {
  -webkit-appearance: textfield;
     -moz-appearance: textfield;
          appearance: textfield;
  min-width: 0;
}

.input-number__input--P8tJX::-webkit-clear-button,
.input-number__input--P8tJX::-webkit-inner-spin-button {
  display: none;
  -webkit-appearance: none;
          appearance: none;
  margin: 0;
}

.input-number__input--P8tJX::-ms-clear {
  appearance: none;
  display: none;
}

.input--error--ifEFU.input-number__input--P8tJX {
  color: var(--feedback-error);
}

.input-number__suffix--YOqJb {
  margin-left: var(--spacing-3);
}

.create-shift_input--MMa95 {
  margin-bottom: var(--spacing-8);
}

.create-shift_input--MMa95 input {
  /* fix for Safari wrapping text inside date inputs */
  white-space: nowrap;
  width: auto;
}

.create-shift__input--time--sFNI3,
.create-shift__input--number--EVzwZ {
  display: inline-block;
  width: auto;
  width: initial;
}

/* can only directly target the label element
   hide them but not from screen readers */
.create-shift__input--time--sFNI3 label {
  margin: 0;
  max-height: 0;
  overflow: hidden;
  text-indent: -9999px;
}

/* can only directly target the input element */
.create-shift__input--time--sFNI3 input {
  font: var(--font-heading-h3);

  /* 28px is the line height, 24px is the font size */
  min-height: calc(28 / 24 * 1em);

  /* 5ch is most likely the shortest input, e.g. 09:00 */
  min-width: 5ch;
}

.create-shift__step-item--Z92rr {
  padding: var(--spacing-4) var(--grid-margin) var(--spacing-4) 0;
}

.create-shift__step-item--Z92rr:first-child {
  padding: 0;
}

.create-shift__step-item--Z92rr:last-child {
  border: 0;
}

.create-shift__side-by-side--Xdy0S {
  align-items: flex-end;
  display: grid;
  grid-auto-columns: max-content;
  grid-auto-flow: column;
  grid-gap: 0 var(--spacing-10);
}

.create-shift__time-label--siaZ5 {
  color: var(--primary-outer-space);
  font: var(--font-caption);
  letter-spacing: var(--font-heading-letter-spacing-text);
  margin-bottom: var(--spacing-2);
}

.drawer-selection--LPSX4 {
  padding: 0 var(--spacing-7);
}

.drawer-selection__button-area--KMWut {
  width: calc(100% + var(--spacing-7));
}

.drawer-selection-button--Z5mlg {
  align-items: center;
  display: flex;
  padding: var(--spacing-7) var(--spacing-7) var(--spacing-7) 0;
  border-bottom: var(--neutral-athens) 1px solid;
}

.drawer-selection-button--Z5mlg:last-child {
  border-bottom: none;
}

.drawer-selection-button--error--KnN4l {
  color: var(--feedback-error);
}

.drawer-selection-button--secondary--W6HTi {
  color: var(--neutral-comet);
}

.drawer-selection-button-text--ka67z {
  color: inherit;
  font: var(--font-body-big);
  margin-right: var(--spacing-2);
  text-align: left;
  width: 100%;
}

.details__general--BzpTD {
  color: var(--outer-space);
}

.details__general--BzpTD + .details__general--BzpTD {
  margin-top: var(--spacing-7);
}

.details__is-available--available--EXHaR {
  color: var(--feedback-success);
}

.details__is-available--unavailable--AywNk {
  color: var(--feedback-error);
}

.details__delete-button--V0V3w {
  width: 100%;
}

.input-toggle--c8RTX {
  --input-toggle-height: 1.5rem;
  --input-toggle-width: 3rem;
  --toggle-border-radius: 1.5rem;
  --toggle-circle-size: 1.2rem;
  --input-toggle-left: 0.25rem;
  --input-toggle-right: 1.4rem;

  -webkit-tap-highlight-color: transparent;
}

.input-toggle--small--QzKEd .input-toggle--c8RTX {
  display: flex;
}

.input-toggle__input--QFaRL {
  display: none;
}

.input-toggle__label--pT5vY {
  background: var(--primary-cod-gray);
  border-radius: var(--toggle-border-radius);
  cursor: pointer;
  display: block;
  height: var(--input-toggle-height);
  position: relative;
  transition: background 0.25s ease-out;
  width: var(--input-toggle-width);
}

.input-toggle__label--pT5vY::after {
  background: var(--neutral-white);
  border-radius: 50%;
  content: '';
  display: block;
  height: var(--toggle-circle-size);
  left: var(--input-toggle-left);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.15s ease-out, background 0.15s ease-out;
  width: var(--toggle-circle-size);
}

.input-toggle__input--QFaRL:checked + .input-toggle__label--pT5vY {
  background: var(--color-primary);
}

.input-toggle__input--QFaRL:checked + .input-toggle__label--pT5vY::after {
  transform: translate(var(--input-toggle-right), -50%);
}

.input-toggle__input--QFaRL:disabled + .input-toggle__label--pT5vY {
  opacity: 0.5;
  pointer-events: none;
}

.input-date--_vzYw {
  width: 100%;
}

.input-date__container--JWv5v {
  --date-input-letter-spacing: var(--font-heading-letter-spacing-h345);
  --date-input-width: 10.25rem;

  display: flex;
  width: 100%;
}

.input-date--full-width--ywqxA {
  width: 100%;
}

.input-date--_vzYw.input-date--full-width--ywqxA {
  flex: 1 1;
}

.input-date__input--sdihC {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 0;
  flex: 1 1;
  border-radius: 0;
  color: var(--primary-outer-space);
  font: var(--font-heading-h5);
  letter-spacing: var(--date-input-letter-spacing);
  /*
   * When cleared, nothing is visible in Input Date.
   * So to maintain height aspect with icon, need
   * to add min-height of 25px.
  */
  min-height: var(--spacing-12);
  padding: 0 0 var(--spacing-2) 0;
  -webkit-tap-highlight-color: transparent;
}

.input-date--no-value--RbMXp.input-date--is-apple--XSf9M .input-date__input--sdihC::before {
  color: var(--neutral-athens);
  /* Fix for Safari to display placeholder */

  content: attr(placeholder);
  font: inherit;
  transform: translate(var(--spacing-3));
  transform-origin: left;
}

/* hide placeholder text in Mobile browsers other than Safari */
.input-date--no-value--RbMXp.input-date--is-apple--XSf9M
  .input-date__input--sdihC::-webkit-datetime-edit-fields-wrapper {
  display: none;
}

.input-date__input--sdihC::-webkit-clear-button,
.input-date__input--sdihC::-webkit-inner-spin-button,
.input-date__input--sdihC::-webkit-calendar-picker-indicator {
  -webkit-appearance: none;
          appearance: none;
  display: none;
}

.input-date__input--sdihC::-ms-clear,
.input-date__input--sdihC::-ms-expand {
  display: none;
}

.input--error--Rjof9.input-date__input--sdihC {
  color: var(--feedback-error);
}

.form__steps-user--v_jwP {
  margin: 0 var(--grid-margin) 0 0;
}

.form__steps-item--side-by-side--Wh22D {
  align-items: flex-end;
  display: grid;
  grid-column-gap: var(--spacing-10);
  grid-template-columns: min-content min-content;
}

/* HACK: as these inputs should have their natural width, we have to target
   the element inside the component */
.form__date-input--xDdRc input,
.form__time-input--g8As6 input {
  /* fix for Safari wrapping text inside date inputs */
  white-space: nowrap;
  width: auto;
}

.form__steps-item--margin-5--vwsQV {
  margin: var(--spacing-5) var(--grid-margin) 0 0;
}

.form__steps-item--margin-8--R2qzg {
  margin: var(--spacing-8) var(--grid-margin) 0 0;
}

.form__input--ih2Jb {
  display: inline-block;
  width: auto;
  width: initial;
}

.form__steps-item--rHMss {
}

.form__steps-item--rHMss:last-child {
  border: 0;
}

.form__error--gIH5A {
  color: var(--feedback-error);
  font: var(--font-caption);
  margin-top: var(--spacing-1);
}

.conflicts-warning--RKYpo {
  margin: 0 var(--grid-margin);
}

.conflicts-warning__title--AM0Dx {
  color: var(--feedback-error);
  font: var(--font-heading-h4);
  line-height: var(--font-heading-letter-spacing-h345);
}

.conflicts-warning__warning--gNmgL {
  font: var(--font-text-md-md);
  margin-top: var(--spacing-7);
}

.conflicts-warning__list--fPXLp {
  font: var(--font-text-sm);
  margin-top: var(--spacing-4);
}

.conflicts-warning__list-item--fCI6e {
  align-items: center;
  display: flex;
}

.conflicts-warning__list-item--fCI6e:not(:first-child) {
  margin-top: var(--spacing-3);
}

.conflicts-warning__icon--xiOT6 {
  margin-right: var(--spacing-1);
}

.conflicts-warning__actions--TodGj {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--spacing-7);
}

.edit-container__wrapper--aIAKp {
  display: contents;
}

.card__wrapper--p8eL8 {
  --background-color-available: rgba(68, 187, 68, 0.2);
  --border-color-available: rgb(68, 187, 68);
  --background-color-unavailable: rgba(217, 83, 79, 0.2);
  --border-color-unavailable: rgb(217, 83, 79);
  --background-color-default: rgba(217, 218, 224, 0.2);
  --border-color-default: rgb(217, 218, 224, 0.4);

  border-radius: var(--spacing-3);
  margin-bottom: var(--spacing-7);
  overflow: hidden;
  transition: background-color var(--transition-default);
  color: var(--primary-cod-gray);
}

/*
  This is used to unify spacing if for a given day
  there are more than one availabilities.
*/
.card__wrapper--p8eL8:not(:last-child) {
  margin-bottom: var(--spacing-11);
}

.card--uTn08 {
  border-left: 4px solid var(--border-color-default);
  background-color: var(--background-color-default);
  display: flex;
  padding: var(--spacing-3) var(--spacing-3) var(--spacing-3) var(--spacing-2);
  position: relative;
}

.card--available--dsKpy {
  background-color: var(--background-color-available);
  border-left-color: var(--border-color-available);
}

.card--unavailable--T0see {
  background-color: var(--background-color-unavailable);
  border-left-color: var(--border-color-unavailable);
}

.card__content--wWD6f {
  flex: 1 1;
  overflow: hidden;
  padding-top: var(--spacing-2);
}

.card__time--vI60L {
  font: var(--font-heading-h5);
  letter-spacing: var(--font-heading-letter-spacing-h345);
  margin-bottom: var(--spacing-2);
}

.card__time-text--KhN0C {
  display: inline-block;
}

.card__title--tXtO7 {
  font: var(--font-text-xs);
  max-width: 100%;
  text-transform: uppercase;
  display: inline-block;
}

.card__title--placeholder--o1P3e {
  margin-bottom: var(--spacing-1);
}

.card__heading--FanE1 {
  align-items: flex-end;
  display: flex;
  justify-content: space-between;
}

.card__repeat--TCQ4f {
  font: var(--font-text-xs);
  max-width: 100%;
  display: inline-block;
}

.card__buttons--We7fT {
  color: var(--outer-space);
  display: flex;
  flex-direction: column;
  padding-top: var(--spacing-2);
}

.card__button--vrq3c {
  color: inherit;
  margin: 0 0 0 var(--spacing-4);
}

.card__button--vrq3c:not(:last-child) {
  margin-bottom: var(--spacing-2);
}

.availabilities__empty-day--JqE9O {
  display: flex;
  align-items: center;
  height: 100%;
}

.tabs--HZg9Z {
  background-color: var(--neutral-athens-light);
  border-radius: var(--spacing-8) var(--spacing-8) 0 0;
  display: flex;
  flex-direction: column;
  padding: var(--spacing-2) 0 0;
}

.tabs__nav--z2OMq {
  color: var(--primary-cod-gray);
  display: flex;
  flex-direction: row;
  flex: 0 0 auto;
  font: var(--font-subtitle-small);
  z-index: 1;
}

.tabs__nav--scroller--vky1y {
  overflow-y: auto;
}

.tabs__nav--scroller--vky1y::-webkit-scrollbar {
  -webkit-appearance: none;
          appearance: none;
  display: none;
  max-height: 0;
  max-width: 0;
}

.tabs__nav-lists--ojoif {
  display: flex;
  flex-flow: row nowrap;
  min-width: 100%;
}

.tabs__nav-item--Eqp2F {
  border-bottom: 1px solid var(--neutral-athens);
  flex: 1 0;
  text-align: center;
  z-index: 1;
}

.tabs__nav-item--equal-width--nx0wl {
  flex: 1 1;
  text-align: center;
}

.tabs__nav-link--Whi6j {
  --background-color-button: transparent;

  color: currentColor; /* stylelint-disable-line */
  font-size: var(--font-size-text-md);
  min-width: 100%;
  padding: var(--spacing-3) var(--spacing-5);
  white-space: nowrap;
}

.tabs__nav-link--Whi6j::after {
  background: var(--color-primary);
  bottom: 0;
  content: ' ';
  height: 2px;
  left: 0;
  position: absolute;
  transform: scaleX(0);
  transition: transform 0.2s var(--transition-timing-function-default);
  width: 100%;
  z-index: 10;
}

.tabs__nav-link--active--l4bUB::after {
  transform: scaleX(1);
}

.tabs__tab-content--wFlHM {
  flex: 1 0;
  overflow: hidden;
  width: 100%;
}

.with-static-header--PJFyl {
  --background-color: var(--color-primary);
  --header-size: 44px;
  --button-size: var(--spacing-11);
  --icon-size: var(--spacing-7);

  background: var(--background-color);
  display: flex;
  flex: 1 1;
  flex-flow: column nowrap;
  overflow: hidden;
  width: 100%;

  /* for iOS <11.x */
  padding: constant(safe-area-inset-top) 0 0;
  padding: env(safe-area-inset-top) 0 0;
  padding-top: var(--android-top-inset);
}

.with-static-header__header--zclo4 {
  padding: 0 var(--grid-margin) var(--spacing-7);
}

.with-static-header__button-bar--JOAYm {
  --icon-font-size-button-lg: var(--icon-size);

  display: grid;
  grid-auto-columns: max-content;
  grid-auto-flow: column;
  grid-gap: 0 var(--spacing-5);
  justify-content: flex-end;
  margin: 0 calc(-1 * (var(--button-size) - var(--spacing-7)) / 2);
}

.with-static-header__button-bar--JOAYm button {
  --button-icon-dimension: var(--button-size);
}

.with-static-header__title--dkKrx {
  color: var(--neutral-white);
  font: var(--font-heading-h2);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--font-heading-letter-spacing-h012);
  margin: var(--spacing-3) 0 0;
}

/* if no button bar is present, maintain the top distance anyway, just as if it was there */
.with-static-header__title--dkKrx:first-child {
  margin-top: calc(var(--spacing-3) + var(--button-size));
}

.with-static-header__list--jLlJM {
  background: var(--neutral-athens-light);
  border-radius: var(--spacing-9) var(--spacing-9) 0 0;
  display: flex;
  flex-flow: column nowrap;
  flex: 1 1;
  margin-bottom: calc(0 - constant(safe-area-inset-bottom) - var(--android-bottom-inset));
  margin-bottom: calc(0 - env(safe-area-inset-bottom) - var(--android-bottom-inset));
  min-height: calc(100vh - constant(safe-area-inset-bottom) - var(--android-bottom-inset));
  min-height: calc(100vh - env(safe-area-inset-bottom) - var(--android-bottom-inset));
  overflow: hidden;
}

.with-static-header__list--with-bottom-bar--z3g6Z {
  margin-bottom: calc(var(--bottom-bar-height) - constant(safe-area-inset-bottom));
  margin-bottom: calc(var(--bottom-bar-height) - env(safe-area-inset-bottom));
  min-height: calc(100vh - var(--bottom-bar-height) - constant(safe-area-inset-bottom));
  min-height: calc(100vh - var(--bottom-bar-height) - env(safe-area-inset-bottom));
}

.with-static-header--with-transition--rVTk9 .with-static-header__header--zclo4 {
  transition: opacity 225ms cubic-bezier(0.22, 1, 0.36, 1);
}

.with-static-header--with-transition--rVTk9 .with-static-header__list--jLlJM {
  transition: transform 450ms cubic-bezier(0.22, 1, 0.36, 1);
}

.with-collapsible-header--Kv6eH {
  background: var(--color-primary);
  display: flex;
  flex-flow: column nowrap;
  flex: 1 1;
  width: 100%;
  overflow: hidden;

  /* for iOS <11.x */
  padding: calc(var(--grid-margin) + constant(safe-area-inset-top)) 0 0;
  padding: calc(var(--grid-margin) + env(safe-area-inset-top)) 0 0;
  padding-top: var(--android-top-inset);
}

.with-collapsible-header--has-top-button-bar--rDJ4d {
  /* for iOS <11.x */
  padding: constant(safe-area-inset-top) 0 0;
  padding: env(safe-area-inset-top) 0 0;
  padding-top: var(--android-top-inset);
}

.with-collapsible-header__title--a3yYn {
  color: var(--neutral-white);
  display: block;
  font: var(--font-heading-h2);
  letter-spacing: var(--font-heading-letter-spacing-h012);
  font-weight: var(--font-weight-medium);
  padding: 0 var(--grid-margin) var(--grid-margin);
}

.with-collapsible-header__header--AwPX7 {
  overflow: auto;
  z-index: 1;
}

.with-collapsible-header__header--collapsed--FkfmX {
  max-height: 0;
  opacity: 0;
}

.with-collapsible-header__handle--bOr8t {
  align-self: center;
  background: none;
  border: 0;

  /* just for desktop to make dev easier */
  cursor: pointer;
  display: flex;
  outline: 0;
  padding: 13.5px var(--spacing-8);
}

.with-collapsible-header__handle--bOr8t::before,
.with-collapsible-header__handle--bOr8t::after {
  background: var(--neutral-comet);
  border-radius: 9999px;
  content: "";
  display: block;
  height: 3px;
  transform: rotate(0deg);
  transition: transform 1000ms cubic-bezier(0.22, 1, 0.36, 1);
  width: 13px;
}

.with-collapsible-header__handle--bOr8t::before {
  margin-right: -1px;
}

.with-collapsible-header__handle--bOr8t::after {
  margin-left: -1px;
}

.with-collapsible-header--collapsed--UFBCe .with-collapsible-header__handle--bOr8t::before {
  transform: rotate(10deg);
}

.with-collapsible-header--collapsed--UFBCe .with-collapsible-header__handle--bOr8t::after {
  transform: rotate(-10deg);
}

.button-floating__container--zsPiJ {
  --color-label: var(--neutral-athens-light);

  display: grid;
  position: fixed;
  top: 0;
  left: 0;
  grid-template-columns: [label] 1fr [icon] max-content;
  grid-gap: 0;
  align-content: end;
  align-items: center;
  transition: none;
  z-index: 10;
  background: transparent;
  padding: var(--spacing-4);
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.button-floating__container--open--mhIVr {
  background: rgba(0,0,0,0.6);
  grid-gap: var(--spacing-16) 0;
  pointer-events: initial;
  transition:
    background-color var(--transition-default), gap var(--transition-default);
}

.button-floating--nm5YU {
  grid-column: icon;
  transition: transform var(--transition-default);
  box-shadow: 0 2px 7px 1px rgba(0,0,0,0.30196);
  pointer-events: initial;
}

.button-floating__container--open--mhIVr .button-floating--nm5YU {
  transform: rotate(45deg);
}

.button-floating__action--JOIW4 {
  grid-column: icon;
  justify-self: center;
}

.button-floating__action-label--pVE_I {
  grid-column: label;
  justify-self: end;
  margin-right: var(--spacing-4);
  cursor: pointer;
  text-transform: capitalize;
  color: var(--color-label);
  font: var(--font-caption);
  letter-spacing: var(--font-heading-letter-spacing-text);
}

.floating-action-button--BR0FP {
  padding: calc(var(--bottom-bar-height) + var(--grid-margin) + constant(safe-area-inset-bottom)) var(--grid-margin);
  padding: calc(var(--bottom-bar-height) + var(--grid-margin) + env(safe-area-inset-bottom)) var(--grid-margin);
}

.day-picker--TO9N9 {
  /* 31px */
  --day-picker-elem-size: 1.9375rem;

  /* 24px */
  --grid-vertical-gap: 1.5rem;

  display: grid;

  /* horizontal gap is set to 0 so that it auto-adjusts to using space-between */
  grid-gap: 1.5rem 0;
  grid-gap: var(--grid-vertical-gap) 0;
  gap: 1.5rem 0;
  gap: var(--grid-vertical-gap) 0;
  grid-template: repeat(7, 1fr) / repeat(7, 1.9375rem);
  grid-template: repeat(7, 1fr) / repeat(7, var(--day-picker-elem-size));
  justify-content: space-between;
}

/*
  For really small device make height of Collapsible
  item 100%
*/
@media screen and (max-width: 321px) {
  .day-picker--TO9N9 {
    --grid-vertical-gap: 0.875rem;
  }
}

.day-picker__weekday--Tcoo9,
.day-picker__day--Q4rru {
  align-items: center;
  display: flex;
  font: var(--font-text-sm);
  justify-content: center;
  position: relative;

  /* to fix some weird behavior of the month picker overlaying this here */
  z-index: 3;
}

.day-picker__weekday--Tcoo9 {
  /* -8px */
  margin-bottom: -0.5rem;
  opacity: 0.6;
}

.day-picker__day--Q4rru {
  height: var(--day-picker-elem-size);
  -webkit-tap-highlight-color: transparent;
}

.day-picker__day--selected--PYF3A {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 9999px;
}

.day-picker__day--today--l_6sl {
  background: var(--neutral-white);
  border-radius: 9999px;
  color: var(--color-primary);
}

.day-picker__day--0--h15tS {
  grid-column: 7;
}

.day-picker__day--1--Upcw9 {
  grid-column: 1;
}

.day-picker__day--2--F22QP {
  grid-column: 2;
}

.day-picker__day--3--qoR3I {
  grid-column: 3;
}

.day-picker__day--4--KVbdT {
  grid-column: 4;
}

.day-picker__day--5--sgjUV {
  grid-column: 5;
}

.day-picker__day--6--DWde1 {
  grid-column: 6;
}

.header--VE7Tc {
  align-items: flex-start;
  display: flex;
  margin: var(--spacing-7) 0 0;
  overflow-x: scroll;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  transition: height var(--transition-default);
  -webkit-overflow-scrolling: touch;
}

.header--VE7Tc::-webkit-scrollbar {
  display: none;
}

.header__calendar--fINgX {
  color: var(--neutral-white);

  /* this is just a rough estimate of the max height (500px) */
  max-height: 31.25rem;
  flex: 0 0 100%;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

.header__icon--hO_8H {
  color: var(--neutral-white);
}

.header__content--XuZXv {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--spacing-7);
}

.header__title--Grt4A {
  align-items: center;
  display: flex;
  font: var(--font-heading-h2);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--font-heading-letter-spacing-h012);
}

.header__arrow--oAE3D {
  margin-left: var(--spacing-3);
  transition: transform var(--transition-default);
}

.header__arrow--collapsed--fuvfz {
  transform: rotate(180deg);
}

.header__calendar--collapsed--cmMic {
  max-height: 0;
}

.calendar__title--XoY5o {
  display: flex;
  outline: 0;
}

.calendar__title-chevron--tn6kn {
  margin-left: var(--spacing-3);
}

.calendar__title-chevron--with-transition--NPzvx {
  transition: transform var(--transition-default);
}

.calendar__title-chevron--collapsed--lVWer {
  transform: rotate(180deg);
}

.calendar__filters-button--ZK9Ha {
  --button-background-color-active: rgba(255,255,255,0.2);

  align-items: center;
  color: var(--neutral-white);
  height: var(--button-icon-dimension);
  min-width: var(--button-icon-dimension);
  padding: 0;
}

/* this is required so icons size match when IconButton
is next to some other button with icon inside */
.calendar__filters-icon--bcrHN span {
  font-size: var(--icon-font-size-button-lg);
}

.calendar__filters-button--active--sbFjH {
  background-color: var(--button-background-color-active);
  padding: 0 var(--spacing-4);
}

.calendar__filters-wrapper--P6TS1 {
  align-items: center;
  display: flex;
}

.calendar__filters-count--d9Qyg {
  font: var(--font-heading-h5);
  letter-spacing: var(--font-heading-letter-spacing-h345);
  margin-right: var(--spacing-3);
}

.toggle-input-row--iJOwS {
  padding: var(--spacing-5) 0;
}

.toggle-input-row--iJOwS:not(:last-child) {
  margin-bottom: var(--spacing-5);
}

.toggle-input-row__label--xHZxX {
  display: flex;
}

.toggle-input-row__name--tfMnl {
  font: var(--font-big-body);
  padding-right: var(--spacing-3);
  flex: 1 1;
  min-width: 0;
  align-self: center;
}

.toggle-input-row__input--XGiXi {
  align-self: center;
}

.section-header--uoxXT {
  color: var(--neutral-comet);
  font: var(--font-text-sm);
  display: inline-block;
}

/* This is common styling referenced for all common input types. */
.input-text-common--gfxRV {
  --disabled-opacity: 0.5;

  border: none;
  border-radius: 0;
  background: none;
  padding: 0;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.input-text-common--gfxRV:focus {
  outline: none;
}

.input-text-common--gfxRV:disabled {
  opacity: var(--disabled-opacity);
  pointer-events: none;
}

.input-text-common--gfxRV::-moz-placeholder {
  color: var(--neutral-athens);
  font: inherit;
}

.input-text-common--gfxRV::placeholder {
  color: var(--neutral-athens);
  font: inherit;
}

.text-input--error--C_SDp .input-text-common--gfxRV {
  color: var(--feedback-error);
}

.input-text--wqc5G {
  /* color: var(--color-primary); */
  font: var(--font-body-big);
  letter-spacing: var(--font-heading-letter-spacing-text);
  flex: 1 1 100%;
}

.input-text--wqc5G:focus {
  color: var(--color-primary);
  caret-color: currentColor;
}

.input-text-common--with-border--ySyy0 {
  border-bottom: var(--neutral-athens) 2px solid;
  padding-bottom: var(--spacing-2);
}

.input-text-common--with-border--ySyy0:focus {
  border-bottom-color: var(--color-primary);
}

.input-search__suffix--W6Ghc {
  color: var(--neutral-comet);
  height: auto;
}

.selector--QwCwt {
  display: flex;
  flex-flow: column nowrap;
  height: 100%;
  margin-top: var(--spacing-9);
}

.selector__list-item--YspiW {
  color: var(--outer-space);
  position: relative;
}

.selector__list-item--YspiW:not(:last-child)::after {
  background: var(--neutral-athens);
  bottom: 0;
  content: '';
  height: 1px;
  left: 0;
  position: absolute;
  width: 100%;
}

.selector__button--WK7dC {
  align-items: center;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: var(--neutral-white);
  border: none;
  display: flex;
  justify-content: space-between;
  outline: none;
  padding: 0;
  width: 100%;
}

.selector__button--is-selected--CoMl4 {
  color: var(--color-primary);
}

.selector__avatar--YW0TP {
  flex: 1 1;
}

.selector__name--hj1pg {
  font: var(--font-body-big);
  letter-spacing: var(--font-heading-letter-spacing-text);
  text-align: left;
  padding: 0 var(--spacing-3);
  flex: 1 1;
}

.selector__button--with-avatar--YMVQT .selector__name--hj1pg {
  border: 0;
}

.selector__button--WK7dC:not(.selector__button--with-avatar--YMVQT) .selector__name--hj1pg {
  margin: var(--spacing-9) 0;
  padding: 0;
}

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

.selector__content--TaYWj {
  display: flex;
  align-self: stretch;
  flex: 1 1;
}

.selector__icon-container--ydHJC {
  display: flex;
  align-self: stretch;
  padding-right: calc(2 * var(--spacing-7));
}

.selector__search--jVMLL {
  margin-bottom: var(--spacing-6);
  margin-right: var(--grid-margin);
}

.page__select-all-btn--TLKUk {
  color: var(--color-primary);
  font-size: var(--font-size-text-md);
  padding: var(--spacing-1);
}

.page__select-all-icon--nYUlT {
  margin-right: var(--spacing-2);
}

.filters--AVTFH {
  display: flex;
  flex-flow: column nowrap;
  height: 100%;
}

.filters__title--kY6I9 {
  font: var(--font-heading-h3);
  letter-spacing: var(--font-heading-letter-spacing-h345);
}

.filters__content--KUCS6 {
  margin-top: var(--spacing-9);
}

.filters__list-item--N8H4w {
}

.filters__list-item--N8H4w:last-child {
  border-bottom: none;
}

.filters__list-item-link--eZA2g {
  padding: var(--spacing-9) var(--spacing-7) var(--spacing-9) 0;
  display: flex;
  align-items: center;
}

.filters__list-item-link-content--zMhOa {
  display: flex;
  flex: 1 1;
  justify-content: flex-start;
}

.filters__list-item-selected-count--ENrEb {
  border-radius: 9999px;
  background-color: var(--color-primary);
  color: var(--neutral-white);
  font: var(--font-caption);
  letter-spacing: var(--font-heading-letter-spacing-text);
  padding: var(--spacing-1) var(--spacing-2);
}

.filters__list-item-link-icon--Wsveg {
  margin-left: auto;
  color: var(--color-primary);
}

.filters__list-item-name--Ej15K {
  font: var(--font-body-big);
  letter-spacing: var(--font-heading-letter-spacing-text);
  color: var(--outer-space);
  margin-right: var(--spacing-2);
}

.filters__reset-button--r4FVU {
  margin-top: auto;
}

.button-round-with-loader__loader--xKVd0 {
  --loader-size: 1em;

  height: 1em;

  height: var(--loader-size);
  margin: 2px 0;
  width: 1em;
  width: var(--loader-size);
}

.collisions__details--bPsxu {
  margin: 0 0 var(--spacing-8) 0;
}

.collisions__details-title--igDJX {
  color: var(--neutral-outer-space);
  font: var(--font-caption);
  letter-spacing: var(--font-heading-letter-spacing-text);
}

.collisions--J2boj:only-child .collisions__details-title--igDJX {
  font: var(--font-heading-h5);
  line-height: var(--font-heading-letter-spacing-h356);
}

.collisions__sub-item--P_5or {
  margin: var(--spacing-3) 0 0 var(--spacing-6);
}

.colliding-items-list--MROFb {
  margin-top: var(--spacing-4);
}

.conflicts__wrapper--MDDM6 {
  grid-column: span var(--grid-columns);
}

.conflicts__conflict--_hQMp {
  display: block;
  font: var(--font-paragraph);
  margin-bottom: var(--spacing-7);
}

.conflict__time-account-container--lower-limit--mCQfv span {
  color: var(--feedback-error);
}

.conflict__time-account-container--lower-warning--X7W5F span {
  color: var(--color-orange);
}

.evaluation--sbczF {
  /* noop */
}

.evaluation__button--icon--wAO6C {
  margin-left: var(--spacing-2);
}

.evaluation__before-title-info--SARlr {
  display: flex;
  justify-content: space-between;
}

.evaluation__before-title-info--text--F8o7v {
  font-size: var(--font-size-text-xs);
  text-transform: uppercase;
  color: var(--neutral-comet);
}

.evaluation__before-title-info--status--QHyoV {
  font-size: var(--font-size-text-sm);
  color: var(--color-primary);
}

.evaluation__info-approval-waiting--mzx9h {
  color: var(--feedback-warning);
  font-size: var(--font-size-text-sm);
  display: flex;
}

.evaluation__info-approval-waiting--icon--kkJ3B {
  margin-right: var(--spacing-2);
}

.evaluation__tags--T6dC8 {
  margin-top: calc(-1 * var(--spacing-7));
  margin-bottom: var(--spacing-7);
}

.evaluation__submit-btn--gBQly {
  width: 100%;
  margin-top: var(--spacing-5);
}

.section-shift-duration--Vtowt {
  margin-bottom: var(--spacing-5);
}

.section-shift-duration__label--TCuhq {
  display: flex;
  align-items: center;
  font-size: var(--font-size-text-md);
  padding: var(--spacing-3) 0;
  border-bottom: 1px solid var(--neutral-athens);
}

.section-shift-duration__label--icon--zB0tm {
  margin-right: var(--spacing-2);
}

.section-shift-duration__no-show--YNe7D {
  text-transform: lowercase;
}

.section-shift-duration__btn-edit--YV12Z {
  margin-left: auto;
}

.section-item--YyZpn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--neutral-comet);
  font-size: var(--font-size-text-sm);
  padding: var(--spacing-3) 0;
  border-bottom: 1px solid var(--neutral-athens);
}

.section-item__date-time-dark--TjQ7B {
  color: var(--primary-cod-gray);
}

.section-item__date-time--timestring--fP3N1 {
  display: inline-flex;
  align-items: center;
}

.section-item__date-time-dash--_8S24 {
  margin: 0 var(--spacing-2);
  color: var(--primary-cod-gray);
}

.section-item__date-time-underline--MnqCn {
  color: var(--primary-cod-gray);
  -webkit-text-decoration: underline;
  text-decoration: underline;
}

.section-item__date-time-strikethrough--mNftI {
  font-weight: var(--font-weight-normal);
  -webkit-text-decoration: line-through;
  text-decoration: line-through;
}

.section-item__date-time-highlight--N38bv {
  color: var(--color-primary);
}

.section-date-item--iYpIZ {
  /* noop */
}

.section-date-item__date-time--NCnnn {
  display: flex;
}

.section-date-item__no-show--jL0DO {
  text-transform: lowercase;
}

.section-breaks--q1TVm {
  margin-bottom: var(--spacing-5);
}

.section-breaks__error--uFJbW {
  color: var(--feedback-error);
}

.section-breaks__label--RHVo4 {
  display: flex;
  align-items: center;
  font-size: var(--font-size-text-md);
  padding: var(--spacing-3) 0;
  border-bottom: 1px solid var(--neutral-athens);
}

.section-breaks__label--icon--AryUH {
  margin-right: var(--spacing-2);
}

.section-breaks__break--eKhuZ {
  padding-top: var(--spacing-2);
}

.section-breaks__section-item--label--B_MJA {
  display: flex;
  align-items: center;
}

.section-breaks__section-item--break-number--SyLc1 {
  border: 1px solid;
  border-radius: 50%;
  padding: var(--spacing-1);
  margin-right: var(--spacing-1);
  height: var(--font-size-text-xl);
  width: var(--font-size-text-xl);
  display: flex;
  justify-content: center;
  align-items: center;
}

.section-breaks__button-add-break--Q8aQE {
  margin-top: var(--spacing-5);
}

.section-breaks__section-item--total-time--icz_r {
  padding: var(--spacing-5) 0 var(--spacing-3) ;
  border-bottom: 1px solid var(--neutral-athens);
}

.section-breaks__no-show--MiDBF {
  text-transform: lowercase;
}

.section-breaks__btn-edit--kU2As {
  margin-left: auto;
}

.section-evaluation-note--skW7T {
  padding: var(--spacing-3) 0;
}

.section-evaluation-note__label--Dobq0 {
  color: var(--neutral-comet);
  font-size: var(--font-size-text-sm);
}

.section-evaluation-note__note--dsbm7 {
  margin-top: var(--spacing-2);
  font-size: var(--font-size-text-md);
}

.section-employee--JextQ {
  color: var(--neutral-comet);
  font-size: var(--font-size-text-md);
  border-bottom: 1px solid var(--neutral-athens);
  padding-bottom: var(--spacing-3);
  margin-bottom: var(--spacing-5);
}

.section-employee__user--jsfJ1, .section-employee__work-time--IAZOh {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-2) 0 var(--spacing-1);
}

.section-employee__user--avatar--VZyvM {
  display: flex;
  align-items: center;
}

.section-employee__user--avatar--name--CEAwZ, .section-employee__work-time--time--JzqmC {
  padding-left: var(--spacing-1);
  font-size: var(--font-size-text-sm);
  color: var(--outer-space);
}

.section-employee__no-show--hl4mv {
  text-transform: lowercase;
  font-size: var(--font-size-text-sm);
}

.section-tags--dB0i4 {
  margin: calc(-1 * var(--spacing-1));
}

.section-tags__heading--MOuHd {
  color: var(--primary-cod-gray);
  font: var(--font-text-sm);
  margin-bottom: var(--spacing-6);
}

.section-tags__tag--Y1DjJ {
  margin: var(--spacing-1);
}

.drawer-edit-duration--m_TKu {
  display: flex;
  flex-direction: column;
  font-size: var(--font-size-heading-sm);
}

.drawer-edit-duration__header--YStGi {
  padding-bottom: var(--spacing-7);
}

.drawer-edit-duration__date-time-section--aJnSy {
  display: flex;
  align-items: flex-end;
  padding-bottom: var(--spacing-7);
}

.drawer-edit-duration__date-time-section--input--Z6uK_ {
  max-width: 45%;
}

.drawer-edit-duration__date-time-section--input--Z6uK_:not(:last-child) {
  margin-right: var(--spacing-6);
}

.drawer-edit-duration__date-time-section--input_error--BVWkN,
.drawer-edit-duration__date-time-section--input_error--BVWkN input {
  color: var(--feedback-error);
}

.drawer-edit-duration__date-time-section--input--Z6uK_ input{
  font-size: var(--font-size-heading-xs);
}

.drawer-edit-duration__collapse-button--BgCsN {
  align-self: center;
  margin-top: calc(-1 * var(--spacing-6));
  height: -moz-fit-content;
  height: fit-content;
  color: var(--outer-space);
}

.drawer-edit-duration__confirm-button-wrapper--F8XFo {
  padding-top: var(--font-size-heading-sm);
}

.drawer-edit-duration__confirm-button-wrapper__confirm-button--VsskS {
  width: 100%;
}

.overlay-edit-note--ScwO5 {
  position: fixed;
  top: 0;
  left: 0;
  background-color:  var(--neutral-white);
  height: 100svh;
  width: 100svw;
  z-index: 10;
}

.overlay-edit-note__text-area--QRdu5 {
  border: 0;
  width: 100%;
  color: var(--outer-space);
  font: var(--font-text-xl);
  resize: none;
  flex: 1 1;
}

.overlay-edit-note__text-area--QRdu5:focus {
  outline: none;
  color: var(--outer-space);
}

.drawer-edit-or-create-break--VcV45 {
  display: flex;
  flex-direction: column;
  font-size: var(--font-size-heading-sm);
  margin-bottom: var(--keyboard-height);
}

.drawer-edit-or-create-break__collapse-button--t9xun {
  align-self: center;
  margin-top: calc(-1 * var(--spacing-6));
  height: -moz-fit-content;
  height: fit-content;
  color: var(--outer-space);
}

.drawer-edit-or-create-break__title--ZvwcN {
  /* noop */
}

.drawer-edit-or-create-break__break--OSvpQ {
  border-bottom: 1px solid var(--neutral-athens);
  padding-bottom: var(--spacing-7);
  margin-top: var(--spacing-8);
}

.drawer-edit-or-create-break__break--title--vhfuP {
  display: flex;
  align-items: center;
  font-size: var(--font-size-text-md);
  margin-bottom: var(--spacing-2);
}

.drawer-edit-or-create-break__break--number--P0i2Y {
  border: 1px solid var(--outer-space);
  border-radius: 50%;
  padding: var(--spacing-1);
  margin-left: var(--spacing-2);
  height: var(--font-size-text-xl);
  width: var(--font-size-text-xl);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: var(--font-size-text-sm);
}

.drawer-edit-or-create-break__btn-break-delete--izpqa {
  margin-left: auto;
  min-width: var(--button-icon-dimension);
}

.drawer-edit-or-create-break__date-time-section--SolrL {
  display: flex;
  align-items: flex-end;
}

.drawer-edit-or-create-break__date-time-section--input--boSgb {
  max-width: calc(3 * var(--spacing-12));
  margin-bottom: 0;
}

.drawer-edit-or-create-break__date-time-section--dash--yzlpd {
  width: var(--spacing-14);
  text-align: center;
  margin-bottom: var(--spacing-5);
  padding: 0 var(--spacing-5);
}

.drawer-edit-or-create-break__date-time-section--input_error--rAeS3,
.drawer-edit-or-create-break__date-time-section--input_error--rAeS3 input {
  color: var(--feedback-error);
}

.drawer-edit-or-create-break__date-time-section--input--boSgb input {
  font-size: var(--font-size-heading-xs);
}

.drawer-edit-or-create-break__untimed-break-input--TrxkA input {
  font-size: var(--font-size-heading-sm);
}

.drawer-edit-or-create-break__untimed-break-input--TrxkA span {
  font-size: var(--font-size-heading-xs);
}

.drawer-edit-or-create-break__untimed-break-input--TrxkA div {
  width: auto;
  width: initial;
}

.drawer-edit-or-create-break__confirm-button--TFHsl {
  margin-top: var(--spacing-7);
  width: 100%;
}

.drawer-discard-changes--JwjKa {
  display: flex;
  flex-direction: column;
  font-size: var(--font-size-heading-sm);
}

.drawer-discard-changes--header--URK3U {
  padding-bottom: var(--spacing-4);
}

.drawer-discard-changes--info--L2iTb {
  font-size: var(--font-size-text-md);
  padding-bottom: var(--spacing-7);
}

.drawer-discard-changes--action-button--wkFsv {
  width: 100%;
}

.drawer-discard-changes--action-button--wkFsv:not(:last-child) {
  margin-bottom: var(--spacing-5);
  background-color: transparent;
}

.confirm__title--vZue8 {
  color: var(--primary-cod-gray);
  font: var(--font-heading-h4);
  grid-column: span var(--grid-columns);
  letter-spacing: var(--font-heading-letter-spacing-h345);
  margin: 0;
  padding: 0;
}

.confirm__description--snwjI {
  color: var(--neutral-comet);
  font: var(--font-subtitle-small);
  grid-column: span var(--grid-columns);
  margin-top: var(--spacing-4);
}

.confirm__actions--RDjow {
  font: var(--font-body-small);
  grid-column: span var(--grid-columns);
  margin-top: var(--spacing-7);
}

.confirm__action--jkHNN {
  width: 100%;
}

.confirm__action--jkHNN:not(:last-child) {
  margin-bottom: var(--spacing-5);
}

.assignment-state--t3EZ1 {
  color: var(--outer-space);
}

.assignment-state--assigned--VXZbP {
  color: var(--feedback-success);
}

.assignment-state--not-assigned--HrRp7 {
  color: var(--feedback-error);
}

.assignment-state--pending--MivK8 {
  color: var(--feedback-warning);
}

.assignment-state--conflict--pH3Kz {
  color: var(--feedback-error);
}

.avatar-with-horizontal-label__avatar--GN0Td {
  --user-icon-size: var(--spacing-7) !important;
}

.general-section__item--yoynd {
  color: var(--outer-space);
  margin-top: var(--spacing-7);
}

.general-section__location--fNpVh,
.general-section__shiftplan--GrAjR {

  /*
    Without min-width only icon will have
    a placeholder transition visible and
    beside it will be empty.
  */
  min-width: 4rem;
}

.details__section--SsRKy {
  margin-top: var(--spacing-12);
}

.details__subheading--egN69 {
  color: var(--primary-cod-gray);
  font: var(--font-text-sm);
  margin-bottom: var(--spacing-6);
}

.details__tags--YTxq8 {
  margin: calc(-1 * var(--spacing-1));
}

.details__tag--Tfbtk {
  margin: var(--spacing-1);
}

.details__note--B_DJC {
  color: var(--neutral-comet);
  font: var(--font-text-sm);
  margin-bottom: var(--spacing-5);
}

.details__shiftplan--CLBOE,
.details__location--K5TAc {

  /*
    Without min-width only icon will have
    a placeholder transition visible and
    beside it will be empty.
  */
  min-width: 4rem;
}

.details__user-list--vmoJs {
  margin: calc(-1 * var(--spacing-4)) 0;
  width: calc(100% + var(--spacing-7));
}

.details__general--spJ0V {
  color: var(--outer-space);
}

.details__general--spJ0V + .details__general--spJ0V {
  margin-top: var(--spacing-7);
}

.details__assignment-state--BfuVE {
  margin-top: var(--spacing-7);
}

.details__action-button--d2dJl {
  width: 100%;
}

.details_leave__action-button--JHkED {
  color: var(--color-red);
  margin: var(--spacing-6);
  font: var(--font-weight-bold);
  background: transparent;
  border: none;
}

.details__flag--success--bbyys {
  color: var(--feedback-success);
}

.details__confirm-description--AfpTX {
  margin-bottom: var(--spacing-4);
  font-weight: var(--font-weight-light);
}

.shift-tags--YA_E1 {
  margin: calc(-1 * var(--spacing-1));
}

.shift-tags__heading--mJ4Em {
  color: var(--primary-cod-gray);
  font: var(--font-text-sm);
  margin-bottom: var(--spacing-6);
}

.shift-tags__tag--tCyMP {
  margin: var(--spacing-1);
}

/* wrapper is needed to have a fancy border */
.card__wrapper--tOWO0 {
  border-radius: var(--spacing-3);
  margin-bottom: var(--spacing-6);
  overflow: hidden;
  transition: background-color var(--transition-default);
}

.card__wrapper--tOWO0:last-child {
  margin-bottom: 0;
}

.card--c4VbC {
  border-left: 4px solid transparent;
  display: flex;
  padding: var(--spacing-3) var(--spacing-3) var(--spacing-3) var(--spacing-2);
  position: relative;
}

.card__content--mTAMk {
  flex: 1 1;
  overflow: hidden;
  padding-top: var(--spacing-2);
}

.card__preset-or-time--XHJry {
  font: var(--font-heading-h5);
  letter-spacing: var(--font-heading-letter-spacing-h345);
}

.card__preset-or-time-text--mq1Kb {
  display: inline-block;
}

.card__heading--iSZ2m {
  align-items: flex-end;
  display: flex;
  justify-content: space-between;
}

.card__position--lhgtg {
  font: var(--font-text-xs);
  max-width: 100%;
  text-transform: uppercase;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-clamp: 2;
  margin-bottom: var(--spacing-1);
}

.card__position--placeholder--TSX6z {
  margin-bottom: var(--spacing-1);
}

.card__other--n8jcw {
  align-items: center;
  display: flex;
  margin-top: var(--spacing-3);
}

.card__slots--G1npq {
  color: var(--color-primary);
  font: var(--font-text-sm);
  margin-left: var(--spacing-2);
}

.card__slots--G1npq:first-child {
  margin-left: 0;
}

.card__slots--overassigned--EPmyM {
  color: var(--feedback-error);
}

.card__avatar--lZ0_I {
  /*
    Add a background color so that
    users can see something before image
    loads
  */
  background: var(--neutral-athens);
  border-radius: 50%;
  font: var(--font-small-text);
  margin-left: var(--spacing-1);
}

.card__other--n8jcw .card__avatar--lZ0_I {
  --user-icon-size: 1.5rem;

  /*
   * CSS specificity to ensure avatars on
   * placeholder are circles.
   * Placeholders have by default display
   * property as inline.
   */
  display: flex;
}

.card__avatar--icon--NjiyR {
  align-content: center;
  background: var(--palette-gray-lighter);
  border-radius: 99999px;
  height: var(--user-icon-size);
  justify-content: center;
  width: var(--user-icon-size);
}

.card__avatar--lZ0_I:first-child {
  margin-left: 0;
}

.card__tag--nVB2r {
  /* bottom margin is normally spacing-3.
     When card__label is following with top margin of spacing-2 this here must be spacing-1 */
  margin: var(--spacing-2) 0 var(--spacing-1);
}

.card__label--wpVHu {
  margin-left: var(--spacing-1);
  margin-top: var(--spacing-2);
}

.card__buttons--ScaxW {
  color: var(--outer-space);
  display: flex;
  flex-direction: column;
  padding-top: var(--spacing-2);
}

.card__button--n5mn1 {
  color: inherit;
  margin: 0 0 0 var(--spacing-4);
}

.card__button--n5mn1:not(:last-child) {
  margin-bottom: var(--spacing-2);
}

.card__evaluation-tag--MVTSR {
  color: var(--color-primary);
  margin-bottom: var(--spacing-2);
  font-weight: var(--font-weight-normal);
}

.shifts--QB_a1 {
  background: var(--neutral-athens-light);
  height: 100%;
  overflow-y: auto;
  overflow-anchor: none;
  padding: var(--spacing-4) 0 var(--spacing-8);
  list-style: none;
}

.shifts__note--HC0IA {
  display: block;
  font: var(--font-subtitle-small);
  margin: 0;
  padding: var(--spacing-8) 0 0;
  text-align: center;
}

.shifts__item--CUCum {
  grid-column: 1 / 6;
}

.shifts__empty-day--R7ySV {
  display: flex;
  align-items: center;
  height: 100%;
}

.shifts__rotation-card--nrJDL {
  grid-column: 2 / 6;
  border-top: solid 1px;
  border-bottom: solid 1px;
  border-right: solid 1px;
}

.shifts__rotation-name--wWnYo {
  position: absolute;
  top: 0;
  right: 0;
  border-bottom-left-radius: var(--spacing-3);
  padding: 2px;
  font: var(--font-subtitle-small);
  color: var(--color-bw-100);
}

.absences__filters-button--L9zMx {
  --button-background-color-active: rgba(255,255,255,0.2);

  align-items: center;
  color: var(--neutral-white);
  height: var(--button-icon-dimension);
  min-width: var(--button-icon-dimension);
  padding: 0;
}

/* this is required so icons size match when IconButton
is next to some other button with icon inside */
.absences__filters-icon--Rw25w span {
  font-size: var(--icon-font-size-button-lg);
}

.absences__filters-button--active--emMEZ {
  background-color: var(--button-background-color-active);
  padding: 0 var(--spacing-4);
}

.absences__filters-wrapper--upCRU {
  align-items: center;
  display: flex;
}

.absences__filters-count--etKZx {
  font: var(--font-heading-h5);
  letter-spacing: var(--font-heading-letter-spacing-h345);
  margin-right: var(--spacing-3);
}

/* =======================================
 *
 * Card
 *
 * A card is a wrapper for elements which could have:
 * 1. A header
 * 2. A body
 *
 * An Component having both header and body is:
 * A Swatch component for colors.
 * https://projects.invisionapp.com/d/main#/console/14635332/319732963/preview
 *
 * An Component having only is:
 * A Cards Component for punchtime.
 * https://projects.invisionapp.com/d/main#/console/14635332/319732966/preview
 *
 * ======================================= */

.card--a_Gh7 {
  --card-border-radius: 0.675rem;
  --card-outer-shadow-color: rgba(0,0,0,0.05098);

  background-color: var(--neutral-white);
  border-radius: 0.675rem;
  border-radius: var(--card-border-radius);
  box-shadow: 0 0 20px 0 rgba(0,0,0,0.05098);
  box-shadow: 0 0 20px 0 var(--card-outer-shadow-color);
}

.absence-balance--hxhAv {
  /* noop */
}

.absence-balance__card--albgm {
  --transition-duration-default: 0.3s;

  align-items: start;
  margin: var(--spacing-3) 0 0;
  overflow: scroll;
}

.absence-balance--animate--XiMos {
  transition: height var(--transition-duration-default);
}

.absence-balance__grid--jvvE_ {
  color: var(--outer-space);
  grid-column: 1 / 6;
  padding: var(--spacing-6) var(--spacing-13);
  margin: 0;
}

.absence-balance__heading--D_bdx {
  display: flex;
}

.absence-balance__title--WFcwH {
  font: var(--font-heading-h5);
  align-self: center;
  margin-left: var(--spacing-3);
  text-overflow: ellipsis;
  overflow: hidden;
}

.absence-balance__value--bOuxa {
  font: var(--font-heading-h5);
}

.absence-balance__time-account-header--DhvbW {
  display: flex;
  font: var(--font-heading-h5);
  align-items: center;
  margin-bottom: var(--spacing-1);
}

.absence-balance__minutes--time-account--rlurJ {
  display: flex;
  font-size: var(--font-size-text-lg);
  font-weight: var(--font-weight-regular);
}

.absence-balance__time-account-icon--pd7tF {
  padding-left: var(--spacing-3);
}

.absence-balance__projected-balance--HoMDa {
  color: var(--palettes-gray-light);
  font: var(--font-subtitle-small);
  margin-top: var(--spacing-2);
  font-weight: var(--font-weight-regular);
}

.absence-balance__icon--mcFlh {
  align-self: start;
  grid-column: 1 / 1;
  justify-self: end;
}

@media (min-width: 768px) {
  .absence-balance__icon--mcFlh {
    justify-self: center;
  }
}

.absence-balance__content--F0rBf {
  grid-column: 2 / 6;
  margin: var(--spacing-6) 0 var(--spacing-15) var(--spacing-13);
  display: grid;
  grid-template-columns: auto;
  grid-gap: var(--spacing-5);
  gap: var(--spacing-5);
}

.absence-balance__content--time-account--HMMXC {
  grid-column: 2 / 6;
  margin: var(--spacing-6) 0 var(--spacing-5) var(--spacing-14);
  display: grid;
  grid-template-columns: auto;
  grid-gap: var(--spacing-5);
  gap: var(--spacing-5);
}

.absence-balance__time-account-balance-minutes--warning--wDEgc {
  color: var(--color-orange);
}

.absence-balance__time-account-balance-minutes--limit--SuVAm {
  color: var(--feedback-error);
}

.absence-balance__year-label--TGxcM {
  font: var(--font-heading-h3);
  color: var(--neutral-white);
}

.absence-balance__year-switch-select--oR8rO {
  font: var(--font-body-small);
  background: transparent;
  justify-self: right;

  --color-input-text: var(--neutral-white);
  --color-drawer-icon: var(--neutral-white);
}

.absence-balance__year-switch--dZDXx {
  margin-top: var(--spacing-7);
  align-items: center;
  display: grid;
  grid-template-columns: 1fr max-content;
}

.ant-carousel .slick-dots li {
  width: var(--spacing-2);
}

.ant-carousel .slick-dots .slick-active {
  width: var(--spacing-4) !important;
}

.ant-carousel .slick-dots .slick-active button {
  background-color: var(--color-primary) !important;
  height: var(--spacing-2);
  width: var(--spacing-4);
  border-radius: 30%;
}

.ant-carousel .slick-dots li button {
  height: var(--spacing-2);
  width: var(--spacing-2);
  border-radius: 50%;
}

.ant-carousel .slick-dots li button {
  background-color: var(--palettes-gray-lighter);
}

/* limit the visible carousel bubbles to 25 to avoid breaking design */
.slick-dots li:nth-child(n + 25) {
  display: none !important;
}

.drawer-balance__card--PHx6M {
    background: var(--color-bw-00);
    border-radius: 4px;
    padding: var(--spacing-5);
    border: 1px solid var(--color-grey-200);
    font-size: var(--font-size-text-md);
}

.drawer-balance__card-text--BCdr8 {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--spacing-3);
}

.drawer-balance__card-text--divided--FDQtQ {
    border-bottom: 1px solid var(--color-grey-200);
    padding-bottom: var(--spacing-3);
}

.drawer-balance__card-text--BCdr8:last-child {
    margin-bottom: 0;
}

.drawer-balance__title--Uh4bx {
    display: flex;
    font-size: var(--font-size-heading-sm);
    margin-bottom: var(--spacing-4);
}

.drawer-balance__icon--oxiuQ {
    margin-right: var(--spacing-3);
}

.drawer-balance__text-requested-absences--TI8PH {
    font-size: var(--font-size-text-md);
    margin-top: var(--spacing-3);
    display: flex;
    justify-content: space-between;
}

.drawer-balance__button--bY9fN {
    padding-bottom: var(--spacing-11);
    padding-top: var(--spacing-8);
}

.drawer-balance__card-text--projected--eKX3j {
    padding: var(--spacing-5);
    border-radius: 4px;
    margin: 0;
    background: var(--color-grey-50);
    display: flex;
    flex-direction: column;
}

.drawer-balance__card-text-indicator-container--xjO57 {
    display: flex;
    margin-bottom: var(--spacing-3);
}

.drawer-balance__card-text--current--nVOHp {
    display: flex;
}
.drawer-balance__card-text-icon--current--VBZ14 {
    margin-left: var(--spacing-2);
}

.drawer-balance__card-text-icon-indicator--projected--unTXn,
.drawer-balance__card-text-icon-indicator--current--V54Qp {
    margin-right: var(--spacing-4);
}

.drawer-balance__card-text-icon--warning--zIKL9,
.drawer-balance__card-text--orange--zjYDh {
    color: var(--color-orange);
}

.drawer-balance__card-text-icon--limit--tcukp,
.drawer-balance__card-text--red--Rcy0d {
    color: var(--feedback-error);
}

.card--QM7Ad {
  margin: 0;
  overflow: hidden;
  padding-left: var(--grid-margin);
  row-gap: var(--spacing-4);
}

.card__avatar--R4XfK {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}

.card__header--oo9UB {
  align-self: flex-start;
  display: flex;
  grid-column: 2 / 6;
  grid-row: 2 / 3;
  min-width: 0;
}

.card__header-title-wrapper--BcrTh {
  display: flex;
  flex: 1 1;
  flex-direction: column;
  overflow: hidden;
}

.card__header-title--iMpwW {
  display: inline-block;
  font: var(--font-heading-h5);
  letter-spacing: var(--font-heading-letter-spacing-h345);
  margin-bottom: var(--spacing-2);
}

.card__header-subtitle--Dg6n8 {
  color: var(--neutral-comet);
  display: inline-block;
  font: var(--font-caption);
  letter-spacing: var(--font-heading-letter-spacing-text);
}

.card__header-icon--IdBTE {
  align-self: initial;
  margin: 0 var(--grid-margin) var(--spacing-3) var(--spacing-5);
}

.card__content--AeYJN {
  grid-column: 2 / 6;
  grid-row: 3 / 4;

  /* Add padding so that text do not extend to the right */
  padding-right: var(--grid-margin);
}

.card__content-line--T15zW {
  display: flex;
  font: var(--font-caption);
  letter-spacing: var(--font-heading-letter-spacing-text);
  margin-bottom: var(--spacing-6);
}

.card__content-line--T15zW:last-child {
  margin-bottom: var(--spacing-3);
}

.card__notes--PkoTs {
  /* needed, otherwise -webkit-box-orient will be removed */

  /* autoprefixer: ignore next */
  -webkit-box-orient: vertical;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.card__content-icon--Mesn6 {
  margin-right: var(--spacing-2);
}

.card__message--mu8SI {
  white-space: pre-line;
}

.card__state--new--QV98v {
  color: var(--feedback-warning);
}

.card__state--accepted--thsRa {
  color: var(--feedback-success);
}

.card__state--withdrawn--staCB,
.card__state--refused--nsrFj {
  color: var(--feedback-error);
}

.sort--ZzKUj {
  margin-bottom: var(--spacing-4);
}

.timeframe--ereRc {
  margin-bottom: var(--spacing-13);
}

.timeframe__title--n3_jk {
  color: var(--primary-outer-space);
  display: block;
  font: var(--font-caption);
  letter-spacing: var(--font-heading-letter-spacing-text);
  margin-bottom: var(--spacing-half);
  width: 100%;
}

.timeframe__box--LkMpr {
  align-content: center;
  display: grid;
  grid-gap: var(--spacing-6);
  grid-template-columns: repeat(4, 1fr);
  justify-content: start;
  width: 100%;
}

.timeframe__input-box--rgjQ8 {
  align-self: end;
  display: flex;
  grid-column: span 2;
}

@media screen and (max-width: 321px) {
  .timeframe__input-box--rgjQ8 {
    grid-column: span 4;
  }
}

.timeframe__icon--pLrRQ {
  margin-right: var(--spacing-3);
}

.timeframe__error--k2fiz {
  color: var(--feedback-error);
  font: var(--font-caption);
  letter-spacing: var(--font-heading-letter-spacing-text);
  padding: var(--spacing-2) 0;
}

.filters--sEHDG {
  display: flex;
  flex-flow: column nowrap;
  height: 100%;
}

.filters__title--QEWgQ {
  font: var(--font-heading-h3);
  letter-spacing: var(--font-heading-letter-spacing-h345);
}

.filters__list-item--Zlt_J {
}

.filters__list-item--Zlt_J:last-child {
  border-bottom: none;
}

.filters__list-item-link--U4txf {
  align-items: center;
  display: flex;
  padding: var(--spacing-9) var(--spacing-7) var(--spacing-9) 0;
}

.filters__list-item-link-content--Qriof {
  display: flex;
  flex: 1 1;
  justify-content: flex-start;
}

.filters__list-item-selected-count--yd4G4 {
  background-color: var(--color-primary);
  border-radius: 9999px;
  color: var(--neutral-white);
  font: var(--font-caption);
  letter-spacing: var(--font-heading-letter-spacing-text);
  padding: var(--spacing-1) var(--spacing-2);
}

.filters__list-item-link-icon--inXEo {
  color: var(--color-primary);
  margin-left: auto;
}

.filters__list-item-name--pICD6 {
  color: var(--outer-space);
  font: var(--font-body-big);
  letter-spacing: var(--font-heading-letter-spacing-text);
  margin-right: var(--spacing-2);
}

.filters__reset-button--b8ywV {
  margin-top: auto;
}

.dates__date-row--ByteL {
  display: grid;
  grid-column-gap: var(--grid-gutter);
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) minmax(0, 1fr);
  align-items: end;
}

.dates__date-input--JmBHL {
  grid-column: 1 / 2;
}

.dates__time-input--PAG41 {
  grid-column: 2 / 3;
}

.dates__days-input--cU04C {
  grid-column: 1 / 2;
}

.dates__error--fdObn {
  color: var(--feedback-error);
  font: var(--font-caption);
  letter-spacing: var(--font-heading-letter-spacing-text);
}

.dates__error-item--Vq9XJ {
  padding: 0;
}

.dates__days-input-warning--vzzbC {
  grid-row: 2 / 3;
  grid-column: 1 / 2;
  color: var(--feedback-warning);
  font: var(--font-caption);
  letter-spacing: var(--font-heading-letter-spacing-text);
}

.dates__days--n5KHY {
  word-break: nowrap;
  display: inline-block;
}

.label--TlZBu {
  align-items: center;
  display: flex;
  font: var(--font-caption);
  letter-spacing: var(--font-heading-letter-spacing-text);
  word-wrap: anywhere;
}

.label__icon--Haf9l {
  margin-right: var(--spacing-4);
  width: 1.875rem;
  display: flex;
  justify-content: center;
}

.dates__days--KGj8M {
  word-break: nowrap;
  display: inline-block;
}

.employment__label--KFuit {
  font: var(--font-caption);
  letter-spacing: var(--font-heading-letter-spacing-text);
  color: var(--primary-outer-space);
  display: inline-block;
  margin-bottom: var(--spacing-3);
}

.employment__selector--CIlzS {
  margin-top: 0;
}

.text-input--jJnOE {
  display: block;
}

.text-area-input--oyWBp {
  font-size: var(--font-text-xl);
  width: 100%;
}

.text-area-input--oyWBp > .input__label--Dq_s9,
.text-area-input--oyWBp > .input__input-container--ZMFyk {
  flex: 0 0 auto;
  width: 100%;
}

.text-area--ThKv0 {
  color: var(--color-primary);
  font: var(--font-text-xl);
  resize: none;
  flex: 1 1;
}

.attachment--oki90 {
  color: var(--neutral-comet);
  font: var(--font-caption);
  letter-spacing: var(--font-heading-letter-spacing-text);
}

.attachment__label--Ct20C {
  display: block;
  margin-bottom: var(--spacing-6);
}

.attachment__input-wrapper--iF5LJ {
  align-content: center;
  border: 2px dotted currentColor;
  border-radius: var(--spacing-3);
  color: var(--color-primary);
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0 var(--spacing-4) 0 0;
  padding: var(--spacing-1);
  width: 100%;
}

.attachment__input-wrapper--invalid--M7uH3 {
  color: var(--primary-outer-space);
}

.attachment__input--iIel7 {
  display: none;
}

.attachment__error--STMDC {
  color: var(--feedback-error);
  margin-top: var(--spacing-1);
}

.attachment__icon--Js6hZ {
  margin: var(--spacing-6);
}

.attachment__text--Apegj {
  font: var(--font-heading-h5);
  letter-spacing: var(--font-heading-letter-spacing-h345);
  margin-bottom: var(--spacing-6);
  text-align: center;
}

.attachment__preview--ovd9F {
  align-items: center;
  display: flex;
  width: 100%;
}

.attachment__preview-image-wrapper--MX8Q7 {
  border-radius: var(--spacing-3);
  display: flex;
  flex: 1 1;
  flex-direction: column;
  height: 100px;
  justify-content: center;
  overflow: hidden;
}

.attachment__preview-image--S6ScS {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
}

.attachment__preview-clear--_2rwf {
  margin: var(--spacing-5);
}

.attachment__details--gaNgc {
  margin-top: var(--spacing-1);
}

.reason__attachment--LE7Tt {
  margin-right: var(--spacing-4);
}

.reason__attachment-container--j3yHL {
  font: var(--font-caption);
  letter-spacing: var(--font-heading-letter-spacing-text);
  color: var(--primary-cod-gray);
}

.reason__label--rHpWw {
  margin-bottom: var(--spacing-2);
  display: block;
}

.reason__file-name--lOs2m {
  display: block;
  min-width: 0;
  color: var(--neutral-comet);
  margin-bottom: var(--spacing-6);
}

.time-account-balance--t_QqQ {
  display: flex;
  justify-content: space-between;
  padding-right: var(--spacing-5);
}

.time-account-balance__boxes--BO_ME {
  display: flex;
  gap: var(--spacing-2);
}

.time-account-balance__box--Wujqf {
  min-width: 62px;
  text-align: center;
}

.time-account-balance__value--xrD5U {
  padding: var(--spacing-3);
  background-color: var(--neutral-athens-light);
  font-size: var(--font-size-text-md);
  border-radius: var(--spacing-1);
  height: 33px;
}

.time-account-balance__title--HV54X {
  margin-top: var(--spacing-1);
  margin-bottom: 0;
  font-size: var(--font-size-text-xxs);
}

.time-account-balance__warning--jgrwz {
  color: var(--color-orange);
}

.time-account-balance__limit--uh6ZV {
  color: var(--feedback-error);
}

.time-account-balance__loader--UkKY5 {
  --loader-size: 1em;
  height: 1em;
  height: var(--loader-size);
  width: 1em;
  width: var(--loader-size);
}

.download-item--Wq6L_ {
  display: flex;
  font: var(--font-caption);
  letter-spacing: var(--font-heading-letter-spacing-text);
  padding: 0;
  margin-top: calc(var(--spacing-2) * -1);
}

.download-item__file-name--IljYQ {
  align-self: center;
  flex: 1 1;
  min-width: 0;
  padding-right: var(--spacing-half);
  color: var(--primary-cod-gray);
}

.download-item__link--J0QtG {
  align-self: center;
  color: var(--color-primary);
  flex: 0 0 auto;
  width: var(--icon-font-size-sm);
}

.download-item__link--J0QtG:hover {
  color: var(--neutral-outer-space);
}

.download-item__link--J0QtG:focus {
  color: var(--color-primary);
}

.action-button--vDge0:only-child {
  width: 100%;
}

.action-button__area--BJmnR {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

.section--I_PqZ {
  margin-top: var(--spacing-12);
}

.section__heading--nLwka {
  color: var(--neutral-comet);
  font: var(--font-text-sm);
  margin-bottom: var(--spacing-6);
}

.details__section--B0wlc {
  margin-top: var(--spacing-12);
}

.details__subheading--O3mRa {
  color: var(--neutral-comet);
  font: var(--font-text-sm);
  margin-bottom: var(--spacing-6);
}

.details__note--L0vE5,
.details__decline-message--BDkjR,
.details__download-item--HJywL,
.details__attachment--L3i0l,
.details__total-days--HCwMH {
  color: var(--primary-cod-gray);
  font: var(--font-text-sm);
  margin-bottom: var(--spacing-5);
}

.details__note--L0vE5 {
  word-break: break-all;
}

.details__shiftplan--FNIbU,
.details__location--ZyBsL {

  /*
    Without min-width only icon will have
    a placeholder transition visible and
    beside it will be empty.
  */
  min-width: 4rem;
}

.details__user-list--en9EL {
  margin: calc(-1 * var(--spacing-4)) 0;
  width: calc(100% + var(--spacing-7));
}

.details__general--sCvK_ {
  color: var(--outer-space);
}

.details__general--sCvK_ + .details__general--sCvK_ {
  margin-top: var(--spacing-7);
}

.details__assignment-state--qySFX {
  margin-top: var(--spacing-7);
}

.details__button-withdraw--w4D6f {
  width: 100%;
}

.details__attachment-icon--eI69l {
  color: var(--feedback-success);
}

.details__is-paid--paid--pg4_v,
.details__state--accepted--c1DRq {
  color: var(--feedback-success);
}

.details__state--new--b78bC {
  color: var(--feedback-warning);
}

.details__is-paid--unpaid--DeJ37,
.details__state--refused--j9RG1,
.details__state--withdrawn--sfWIT {
  color: var(--feedback-error);
}

.details__message-state-updated-at--dRFvr {
  font: var(--font-text-xxs);
  color: var(--neutral-comet);
  margin-top: var(--spacing-2);
}

.decline-message-form--oQrXp {
  display: flex;
  flex-flow: column nowrap;
  height: 100%;
}

.decline-message-form__form--TVC4G {
  display: flex;
  flex: 1 1;
  flex-flow: column nowrap;
  height: 100%;
}

.decline-message-form__textfield--HvZnO {
  flex: 1 1;
}

.decline-message-form__button--FkXwc {
  padding: 0;
}

.username--aFbCs {
  /* to please the linter */
  font: inherit;
}

.username--fallback--ebA_Z {
  font-style: italic;
}

.header--oGy2_ {
  align-self: center;
  grid-column: 2 / 6;
  grid-row: 2 / 3;
}

.header__title--Exmsb {
  font: var(--font-heading-h5);
  letter-spacing: var(--font-heading-letter-spacing-h345);
}

.header__subtitle--jabaM {
  color: var(--neutral-comet);
  font: var(--font-caption);
  letter-spacing: var(--font-heading-letter-spacing-text);
  margin-top: var(--spacing-2);
}

.header__icon--s_6MX {
  float: right;
  margin-left: var(--spacing-5);
}

.item--ysoEh {
  margin: 0;
}

.item--ysoEh:not(:first-child) {
  margin-top: var(--spacing-7);
}

.item__avatar--k4IRq {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}

.item__content--pQkF0 {
  border-bottom: var(--neutral-athens) 1px solid;
  grid-column: 2 / 6;
  grid-row: 3 / 4;
  margin: var(--spacing-4) calc(-1 * var(--grid-margin)) 0 0;
  padding: 0 var(--grid-margin) var(--spacing-3) 0;
}

.item__content-line--VLUV8 {
  align-items: center;
  display: flex;
  font: var(--font-caption);
  letter-spacing: var(--font-heading-letter-spacing-text);
}

.item__content-line--VLUV8:not(:last-child) {
  margin-bottom: var(--spacing-5);
}

.item__message--wixIH {
  white-space: pre-line;
}

.item__status--pending--vzypr {
  color: var(--feedback-warning);
}

.item__status--accepted--oG1Jt {
  color: var(--feedback-success);
}

.item__status--withdrawn--P5yxG,
.item__status--refused--DrxAj {
  color: var(--feedback-error);
}

.shift-form__section--EvUhi:not(:first-child) {
  margin-top: var(--spacing-7);
}

.shift-form__subheading--jTcUS {
  color: var(--neutral-comet);
  font: var(--font-text-sm);
  margin-bottom: var(--spacing-4);
}

.shift-form__text--hlRKP {
  font: var(--font-text-mdm);
}

.shift-form__input--iAEH0 {
  display: inline-block;
}

/* FIXME: cannot be controlled from the outside, so resort to element matching */
.shift-form__input--iAEH0 label {
  color: var(--neutral-comet);
}

.shift-form__actions--E_PMa {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  grid-gap: 0 var(--spacing-5);
}

.break-warning--w09S1 {
  margin-top: calc(var(--spacing-15) + var(--spacing-15) + var(--spacing-5));
}

.break-warning__illustration--_j7nU {
  margin: 0 calc(-1 * var(--grid-margin));
  position: relative;
}

.break-warning__illustration-img--UliQO {
  margin: 0 var(--grid-margin);
}

.break-warning__illustration-background--ULLtB {
  background: linear-gradient(0deg, rgb(186, 190, 195, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
  clip-path: polygon(0 0, 100% 0, 100% 85%, 0 44%);
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}

.break-warning__title--NTLSN {
  font: var(--font-heading-h3);
  letter-spacing: var(--font-heading-letter-spacing-h345);
  margin-top: var(--spacing-13);
}

.break-warning__message--zYHyt {
  font: var(--font-text-mdm);
  margin-top: var(--spacing-5);
}

.break-warning__actions--MZMEp {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  grid-gap: 0 var(--spacing-5);
}

/* background: linear-gradient(0deg, rgb(186, 190, 195, 0.2) 0%, rgba(255, 255, 255, 0) 100%); */

.punch-card--Ln39b {
  padding: var(--spacing-double);
}

.punch-card__title--LZD9s {
  display: block;
  font: var(--font-heading-h5);
  line-height: var(--font-heading-letter-spacing-h345);
  margin: 0;
}

.punch-card__title--center--Rggg3 {
  text-align: center;
}

.punch-card__cta--Y7WQH {
  align-items: center;
  display: flex;
  justify-content: center;
  margin: 0 auto;
}

.punched-base--MSsJN {
  color: var(--outer-space);
  grid-column: 1 / 6;
  padding: var(--grid-margin) 0;
  margin: 0;
}

.punched-base__title--ez9TN {
  align-self: center;
  grid-column: 2 / 6;
  padding: 0;
  margin: 0 var(--grid-margin) 0 0;
}

.punched-base__icon--yzKBe {
  align-self: start;
  grid-column: 1 / 1;
  justify-self: end;
}

@media (min-width: 768px) {
  .punched-base__icon--yzKBe {
    justify-self: center;
  }
}

.punched-base__shift-details--VkQRS {
  grid-column: 2 / 6;
  margin: var(--spacing-half) var(--grid-margin) 0 0;
}

.punched-base__actions--Y2VJn {
  align-self: center;
  display: flex;
  justify-content: center;
  font: var(--font-body-small);
  grid-column: 1 / 6;
  justify-self: center;
  padding: var(--spacing-normal) 0 0 0;
}

.shift-details--K9jJy {
  width: 100%;
}

.shift-details__period--iivcj {
  font: var(--font-heading-h5);
  letter-spacing: var(--font-heading-letter-spacing-h345);
  margin: 0;
  margin-bottom: var(--spacing-1);
  position: relative;
}

.shift-details__yesterday--ieCRk {
  font-size: var(--font-size-text-sm);
  opacity: 0.65;
  padding-right: var(--spacing-2);
}

.shift-details__hours--Yr0mw {
  display: inline-block;
}

.shift-details__position--B7cul {
  /* this is apparently needed for the placeholder not to be 100% width */
  display: inline-block;
  font: var(--font-overline);
  margin: 0;
  max-width: 100%;
  opacity: 0.65;
  overflow: hidden;
  padding: 0;
  position: relative;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.shift-details__today--iR41n {
  display: flex;
  padding-top: var(--spacing-normal);
}

.shift-time--tQyGo {
  display: flex;
  padding-top: var(--spacing-4);
}

.shift-time__icon-container--XM6Wt {
  display: flex;
}

.shift-time__icon--scvt1 {
  align-self: center;
}

.shift-time__icon--highlight--AUnUH {
  color: var(--color-primary);
}

.shift-time__hours--CYVZ5 {
  align-self: center;
  font: var(--font-caption);
  letter-spacing: var(--font-heading-letter-spacing-text);
  margin: 0 var(--spacing-5) 0 var(--spacing-3);
  position: relative;
}

.shift-time__icon-container--XM6Wt:last-child .shift-time__hours--CYVZ5 {
  margin-right: 0;
}

.shift-time__hours--CYVZ5 + .shift-time__icon--scvt1 {
  margin-left: var(--spacing-3);
}

.actions__button--mFfHr:not(:last-child) {
  margin-right: var(--spacing-2);
}

.actions__button--ghost-color--exaTb {
  color: var(--primary-cod-gray);
}

.punch-timing--bhHqR {
  --transition-duration-default: 0.3s;

  align-items: start;
  margin: var(--spacing-7) 0 0;
}

.punch-timing--animate--pYXJl {
  transition: height var(--transition-duration-default);
}

.create-message--XM5cw {
  display: flex;
  flex-flow: column nowrap;
  height: 100%;
}

.create-message__title--IL4_h {
  font: var(--font-heading-h3);
  letter-spacing: var(--font-heading-letter-spacing-h345);
}

.create-message__form--FJLRy {
  display: flex;
  flex: 1 1;
  flex-flow: column nowrap;
  height: 100%;
  margin-top: var(--spacing-9);
}

.create-message__textfield--Ck4bH {
  flex: 1 1;
}

.create-message__button--K618Z {
  width: 100%;
}

.create-message__loader--PoKyx {
  height: 1em;
  width: 1em;
}

.keypad--N1LPi {
  /* 75px */
  --key-size: 4.6875rem;

  display: grid;
  grid-gap: var(--spacing-5) var(--spacing-9);
  grid-template-columns: repeat(3, max-content);
}

.keypad__key--g6NV_ {
  /* needed to vertically center in FF */
  align-items: center;
  color: inherit;
  font: inherit;
  height: var(--key-size);
  padding: 0;
  transition: opacity var(--transition-default);
  width: var(--key-size);
}

.keypad__key--hidden--bVz5F {
  opacity: 0;
  pointer-events: none;
}

.punch-clock--tAyIZ {
  background: var(--outer-space);
  display: flex;
  flex-flow: column nowrap;
  height: 100%;

  /* for iOS <11.x */
  padding: constant(safe-area-inset-top) var(--grid-margin) constant(safe-area-inset-bottom);
  padding: env(safe-area-inset-top) var(--grid-margin) env(safe-area-inset-bottom);
  padding-top: var(--android-top-inset);
  padding-bottom: var(--android-bottom-inset);
  width: 100%;
}

.punch-clock__top-bar--kkCwD {
  align-items: center;
  display: flex;
  height: 2rem; /* 32px */
  justify-content: flex-end;
  margin-bottom: var(--spacing-1);
}

.punch-clock__top-bar-button--ys8D6 {
  --icon-font-size-button-md: 1.25rem; /* 20px */

  color: var(--neutral-white);
  margin: -0.25rem; /* -4px */
  height: 2.25rem;  /* 36px */
  width: 2.25rem; /* 36px */
}

.punch-clock__form-wrapper--gBcV0 {
  align-self: center;
  align-items: center;
  display: flex;
  flex: 1 1;
  overflow-y: auto;
  padding: var(--spacing-14) 0;
}

.punch-clock__form--edfAV {
  display: grid;
  grid-auto-flow: row;

  /* to make input and button not extend beyond keypad's width */
  grid-template-columns: min-content;
  margin: auto 0;
}

.punch-clock__input--Do8b3 {
  border: 0;
  background: 0;
  color: var(--neutral-white);
  font: var(--font-heading-h1);

  /* 14.15px */
  letter-spacing: 0.8844rem;
  outline: 0;
  padding: 0;
  text-align: center;
  width: 100%;
}

.punch-clock__company--RVEQt {
  /* needed, otherwise -webkit-box-orient will be removed */

  /* autoprefixer: ignore next */
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  color: var(--neutral-white);
  font: var(--font-heading-h2);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--font-heading-letter-spacing-h012);
  overflow: hidden;
}

.punch-clock__mode--NSv0i {
  color: var(--neutral-white);
  font: var(--font-text-mdm);
  margin-top: var(--spacing-2);
}

.punch-clock__keypad--UV1e9 {
  align-self: center;
  color: var(--neutral-white);
  font-family: var(--font-family-base);
  font-size: 2.3125rem; /* 37px */
  font-weight: var(--font-weight-light);
  letter-spacing: 0;
  line-height: 1.2759; /* 29px */
  margin-top: var(--spacing-14);
}

.punch-clock__button--xsY2v {
  margin-top: var(--spacing-12);
  transition: opacity var(--transition-default);
  width: 100%;
}

.punch-clock__button--hidden--qNqfQ {
  opacity: 0;
  pointer-events: none;
}

.punch-clock__loader--ZLst7 {
  --loader-size: 1em;

  height: 1em;

  height: var(--loader-size);
  margin: 2px 0;
  width: 1em;
  width: var(--loader-size);
}

.input-email--T_4Zf {
  flex: 1 1;
  color: var(--color-primary);
  font: var(--font-body-big);
  letter-spacing: var(--font-heading-letter-spacing-text);
}

.input-email--error--XlsVS {
  color: var(--feedback-error);
}

.input-password--VNvo1 {
  color: var(--color-primary);
  flex: 1 1;
  font: var(--font-body-big);
  letter-spacing: var(--font-heading-letter-spacing-text);
  min-width: 0;
}

.input-password--error--rTh4H {
  color: var(--feedback-error);
}

.input-password--masked--RqKeJ {
  font: var(--font-body-big);
  letter-spacing: 0.225rem;
}

.input-password--overflow-shadow--fOtCx {
}

.input-password__visibility-toggle--zNIIK {
  cursor: pointer;
  padding-left: var(--spacing-normal);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  outline: none;
}

@media (hover: hover) {
  .input-password__visibility-toggle--zNIIK:hover {
    color: var(--color-primary);
  }
}

.login--KwWm1 {
  max-height: 100%;
  overflow-y: auto;

  /* for iOS <11.x */
  padding: calc(15.5vh + constant(safe-area-inset-top)) var(--grid-margin) calc(env(safe-area-inset-bottom) + var(--android-bottom-inset) + var(--spacing-19));
  padding: calc(15.5vh + env(safe-area-inset-top)) var(--grid-margin) calc(env(safe-area-inset-bottom) + var(--android-bottom-inset) + var(--spacing-19));
  padding-top: var(--android-top-inset);
}

.login--sso--aih6E {
  padding: 0;
}

.login__logo--D87le {
  width: var(--spacing-15);
}

.login__header--gZelv {
  color: var(--primary-cod-gray);
  font: var(--font-heading-h2);
  letter-spacing: var(--font-heading-letter-spacing-h012);
  margin-top: var(--spacing-12);
  margin-bottom: 0;
}

.login__subheader--GmmoC {
  color: var(--neutral-comet);
  font: var(--font-heading-h5);
  letter-spacing: var(--font-heading-letter-spacing-h345);
  margin-top: var(--spacing-3);
}

.login__error--ttffP {
  color: var(--feedback-error);
  font: var(--font-text-sm);
  margin-top: var(--spacing-18);
}

.login__input-email--ifAjH {
  margin-top: var(--spacing-19);
}

.login__error--ttffP + .login__input-email--ifAjH {
  margin-top: var(--spacing-6);
}

.login__input-password--fjPdU {
  margin-top: var(--spacing-11);
}

.login__button--q3TpT {
  margin-top: calc(var(--spacing-19) + var(--spacing-3));
  width: 100%;
}

.login__button--sso--IHQT9 {
  margin-top: var(--spacing-6);
}

.login__loader--eroC9 {
  /* make it slightly bigger than the text content, hence using em */
  --loader-size: 1.25em;

  /* restore top padding to maintain button size */
  padding: 0.6875rem 0;
}

.login__punchtime-button--b1k1t {
  margin: var(--spacing-10) auto 0;
}

.login__punchtime-button-icon--_6yI_ {
  /* icon is 20px in this case */
  --icon-font-size-md: 1.25rem;

  margin: 0 var(--spacing-3) 0 0;
}

/* stylelint-disable */
html,
body {
  width: 100%;
  height: 100%;
}
input::-ms-clear,
input::-ms-reveal {
  display: none;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  font-family: sans-serif;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -ms-overflow-style: scrollbar;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
@-ms-viewport {
  width: device-width;
}
body {
  margin: 0;
}
[tabindex='-1']:focus {
  outline: none;
}
hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;
  margin-bottom: 0.5em;
  font-weight: 500;
}
p {
  margin-top: 0;
  margin-bottom: 1em;
}
abbr[title],
abbr[data-original-title] {
  -webkit-text-decoration: underline dotted;
  text-decoration: underline;
  text-decoration: underline dotted;
  border-bottom: 0;
  cursor: help;
}
address {
  margin-bottom: 1em;
  font-style: normal;
  line-height: inherit;
}
input[type='text'],
input[type='password'],
input[type='number'],
textarea {
  -webkit-appearance: none;
}
ol,
ul,
dl {
  margin-top: 0;
  margin-bottom: 1em;
}
ol ol,
ul ul,
ol ul,
ul ol {
  margin-bottom: 0;
}
dt {
  font-weight: 500;
}
dd {
  margin-bottom: 0.5em;
  margin-left: 0;
}
blockquote {
  margin: 0 0 1em;
}
dfn {
  font-style: italic;
}
b,
strong {
  font-weight: bolder;
}
small {
  font-size: 80%;
}
sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
pre,
code,
kbd,
samp {
  font-size: 1em;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
}
pre {
  margin-top: 0;
  margin-bottom: 1em;
  overflow: auto;
}
figure {
  margin: 0 0 1em;
}
img {
  vertical-align: middle;
  border-style: none;
}
a,
area,
button,
[role='button'],
input:not([type='range']),
label,
select,
summary,
textarea {
  touch-action: manipulation;
}
table {
  border-collapse: collapse;
}
caption {
  padding-top: 0.75em;
  padding-bottom: 0.3em;
  text-align: left;
  caption-side: bottom;
}
input,
button,
select,
optgroup,
textarea {
  margin: 0;
  color: inherit;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
}
button,
input {
  overflow: visible;
}
button,
select {
  text-transform: none;
}
button,
html [type='button'],
[type='reset'],
[type='submit'] {
  -webkit-appearance: button;
}
button::-moz-focus-inner,
[type='button']::-moz-focus-inner,
[type='reset']::-moz-focus-inner,
[type='submit']::-moz-focus-inner {
  padding: 0;
  border-style: none;
}
input[type='radio'],
input[type='checkbox'] {
  box-sizing: border-box;
  padding: 0;
}
input[type='date'],
input[type='time'],
input[type='datetime-local'],
input[type='month'] {
  -webkit-appearance: listbox;
}
textarea {
  overflow: auto;
  resize: vertical;
}
fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
legend {
  display: block;
  width: 100%;
  max-width: 100%;
  margin-bottom: 0.5em;
  padding: 0;
  color: inherit;
  font-size: 1.5em;
  line-height: inherit;
  white-space: normal;
}
progress {
  vertical-align: baseline;
}
[type='number']::-webkit-inner-spin-button,
[type='number']::-webkit-outer-spin-button {
  height: auto;
}
[type='search'] {
  outline-offset: -2px;
  -webkit-appearance: none;
}
[type='search']::-webkit-search-cancel-button,
[type='search']::-webkit-search-decoration {
  -webkit-appearance: none;
}
::-webkit-file-upload-button {
  font: inherit;
  -webkit-appearance: button;
}
output {
  display: inline-block;
}
summary {
  display: list-item;
}
template {
  display: none;
}
[hidden] {
  display: none !important;
}
mark {
  padding: 0.2em;
  background-color: #feffe6;
}

.chat-avatar--nrKVn {
  --background: var(--outer-space);
  --color: var(--neutral-white);
  --font: var(--font-text-xl);
  --size: 3.5rem;
}

.chat-avatar__avatar--Bx2mT {
  --user-icon-size: var(--size);
}

.chat-avatar__empty--v9A_V {
  align-items: center;
  background: var(--background);
  border-radius: 9999px;
  color: var(--color);
  display: flex;
  font: var(--font);
  height: var(--size);
  justify-content: center;
  width: var(--size);
}

.list-with-image-and-label--dCUsd {
  /* noop */
}

.list-with-image-and-label__image--skF7Y {
  grid-column: 1;
  padding: var(--spacing-4) 0;
}

.list-with-image-and-label--dense--TIpq7 .list-with-image-and-label__image--skF7Y {
  padding: var(--spacing-2) 0;
}

.list-with-image-and-label__label--Iqp1H {
  border-bottom: var(--neutral-athens) 1px solid;
  display: flex;
  flex-flow: column wrap;
  grid-column: 2 / 6;
  justify-content: center;
  margin: 0 calc(-1 * var(--grid-margin)) 0 0;
  padding: 0 var(--grid-margin) 0 0;
}

.chat__item--QU738 {
  /* noop */
}

.chat-item__body--BG0n3 {
  margin: var(--spacing-4) 0;
  position: relative;
  width: 100%;
}

.chat-item__person--Hx4pK {
  color: var(--outer-space);
  font: var(--font-heading-h5);
  letter-spacing: var(--font-heading-letter-spacing-h345);
  width: 100%;
}

.chat-item__person--with-highlight--Dmogz {
  font-weight: var(--font-weight-light);
}

.chat-item__person-highlight--J8AIw {
  font-weight: var(--font-weight-medium);
}

.chat-item__supplemental--PidbH {
  display: flex;
}

.chat-item__message--avKNB {
  color: var(--neutral-comet);
  flex: 1 1;
  font: var(--font-text-sm);
  line-height: 1.5;
  margin-top: var(--spacing-1);
}

.chat-item__time--0i91i {
  align-self: center;
  color: var(--neutral-comet);
  font: var(--font-text-xxs);
  text-transform: uppercase;
}

.chat-item__new-message-icon--Qityb {
  border-radius: 999px;
  border: var(--feedback-error) 4px solid;
  height: var(--spacing-3);
  position: absolute;
  right: 0;
  top: 0;
  width: var(--spacing-3);
}

.chats-list--nMtwj {
  display: flex;
  flex-flow: column nowrap;
  overflow-y: auto;
}

.chats-list__tabs--LLWPI {
  flex-shrink: 0;

  /* these are needed since otherwise the ripple will extend to outside of the tabs */
  overflow: hidden;
  position: relative;
  z-index: 2;
}

.chats-list__chats--nKzHF {
  background: var(--neutral-athens-light);
  padding-bottom: var(--android-bottom-inset);
}

.create-chat--xSNV1 {
  /* noop */
}

.create-chat__search--l1k70 {
  align-items: center;
  display: flex;
  margin-bottom: var(--spacing-4);
}

.create-chat__search-input--QvqKd {
  background: 0;
  border: 0;
  color: var(--neutral-white);
  flex: 1 1;
  font: var(--font-text-xl);
  outline: 0;
}

.create-chat__search-input--QvqKd::-moz-placeholder {
  color: var(--neutral-white);
  opacity: 0.5;
}

.create-chat__search-input--QvqKd::placeholder {
  color: var(--neutral-white);
  opacity: 0.5;
}

.create-chat__button--B63EF {
  --button-icon-dimension: 32px;

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

.create-chat__list--ep0oF {
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: var(--android-bottom-inset);
}

.with-back-button-compact--hqvF4 {
  --background-color: var(--neutral-athens-light);
  --header-size: 44px;
  --icon-size: 32px;

  display: flex;
  flex-flow: column nowrap;
  height: 100%;
  width: 100%;

  /* for iOS <11.x */
  padding: constant(safe-area-inset-top) 0 constant(safe-area-inset-bottom);
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
  padding-top: var(--android-top-inset);
  padding-bottom: var(--android-bottom-inset);
}

.with-back-button-compact__header--Ehi6a {
  align-items: center;
  color: var(--primary-cod-gray);
  display: flex;
  font: var(--font-text-mdm);
  height: var(--header-size);
  padding: 0 var(--grid-margin);
}

.with-back-button-compact__button--qSIHh {
  --button-icon-dimension: var(--icon-size);
}

.with-back-button-compact__main--mbFVK {
  background: var(--background-color);
  flex: 1 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.with-back-button-compact__footer--DkDlh {
  background: var(--neutral-white);
}

.chat-input--JWH0D {
  align-items: center;
  display: flex;
  margin: 0 var(--grid-margin);
  min-height: 42px;
}

.chat-input__input--wLiT0 {
  background: var(--neutral-white);
  border: 0;
  color: var(--neutral-comet);
  flex: 1 1;
  font: var(--font-text-mdr);
  outline: 0;
  padding: var(--spacing-2) 0;
  resize: none;
}

.chat-input__action--h5NYQ {
  --icon-font-size-button-md: var(--spacing-7);

  align-self: flex-end;

  /* FIXME: temporary fix for the send icon not being centered */
  text-indent: calc(-1 * var(--spacing-1));
  margin: var(--spacing-2) 0 var(--spacing-2) var(--spacing-2);
}

.chat-message--C9h6J {
  display: grid;
  grid-template-columns: max-content 1fr;
  grid-gap: 0 var(--spacing-1);
  margin: 0 var(--grid-margin) var(--spacing-3);
}

.chat-message--mine--AGAn4 {
  grid-template-columns: 0 1fr;
  grid-gap: 0;
}

.chat-message__avatar--S2Apw {
  --user-icon-size: var(--spacing-8);

  align-self: flex-end;
}

.chat-message__bubble-wrapper--e8ngY {
  grid-column: 2;
}

.chat-message--mine--AGAn4 .chat-message__bubble-wrapper--e8ngY {
  display: flex;
  justify-content: flex-end;
}

.chat-message__bubble--Bh4FI {
  background: var(--neutral-athens);
  border-radius: var(--spacing-1) var(--spacing-5) var(--spacing-5);
  color: var(--neutral-comet);
  display: inline-block;
  font: var(--font-text-sm);
  font-weight: var(--font-weight-regular);
  line-height: 1.5;
  padding: var(--spacing-3) var(--spacing-5);
  white-space: pre-wrap;
  word-break: break-word;
}

.chat-message--mine--AGAn4 .chat-message__bubble--Bh4FI:not([class*="placeholder"]) {
  background: var(--color-primary);
  border-radius: var(--spacing-5) var(--spacing-1) var(--spacing-5) var(--spacing-5);
  color: var(--neutral-white);
}

.chat-message__date--v1vlz {
  color: var(--neutral-comet);
  font: var(--font-text-xxs);
  grid-column: 2;
  grid-row: 2;
  margin: var(--spacing-1) 0 0;
}

.chat-message--mine--AGAn4 .chat-message__date--v1vlz {
  text-align: right;
}

.chat-message__link--xp8v3 {
  color: inherit;
  -webkit-text-decoration: underline;
  text-decoration: underline;
  cursor: pointer;
}

.chat__empty--lDj4w {
  align-items: center;
  color: var(--outer-space);
  display: flex;
  flex-direction: column;
  font: var(--font-heading-h5);
  height: 100%;
  justify-content: center;
  letter-spacing: var(--font-heading-letter-spacing-h345);
}

.chat__empty-icon--bCvhw {
  color: var(--neutral-athens);
  height: 3em;
  margin-bottom: var(--spacing-8);
}

.chat__date--FURJ0 {
  color: var(--neutral-comet);
  font: var(--font-text-xxs);
  margin: var(--spacing-4) 0 var(--spacing-3);
  text-align: center;
}

.chat__avatar--jP8pm {
  --font: var(--font-text-xxs);
  --size: var(--spacing-8);

  flex-shrink: 0;
  margin: 0 0 0 var(--spacing-2);
}

.chat__title--r45Zq {
  color: var(--primary-cod-gray);
  font: var(--font-text-mdm);
  margin: 0 0 0 var(--spacing-2);
}

.group--y0jPW {
  padding: var(--spacing-double) 0 var(--spacing-normal);
}

.group--y0jPW:not(:last-child) {
  border-bottom: 1px solid var(--neutral-athens);
}

.group__month-name--Z2KXK {
  font: var(--font-body-font);
  margin-bottom: var(--spacing-normal);
}

.group__row--DlVcJ {
  color: var(--neutral-outer-space);
  font: var(--font-caption);
  letter-spacing: var(--font-heading-letter-spacing-text);
}

.header--xjA6a {
  display: flex;
}

.header__select--B3aa6 {
  /* TODO: Remove it once Chronos is updated */
  font: var(--font-body-big);
  letter-spacing: var(--font-heading-letter-spacing-text);
  padding-top: var(--spacing-double);
  max-width: var(--select-width);
}

.header__select-label--SPY8P {
  color: var(--primary-outer-space);
  display: block;
  font: var(--font-caption);
  letter-spacing: var(--font-heading-letter-spacing-text);
  margin-bottom: var(--spacing-half);
  width: 100%;
}

.header__select-year--uUUIm {
  color: var(--color-primary);
}

.no-payslips--J7m82 {
  display: flex;
  font: var(--font-caption);
  letter-spacing: var(--font-heading-letter-spacing-text);
  padding: var(--spacing-normal) 0;
}

.no-payslips__title--omMU7 {
  display: block;
  font: var(--font-subtitle-small);
  line-height: var(--font-line-text-height);
  margin: 0;
  padding-bottom: var(--spacing-double);
}

.payslip--hHbmD {
  display: flex;
  font: var(--font-caption);
  letter-spacing: var(--font-heading-letter-spacing-text);
  padding: var(--spacing-normal) 0;
}

.payslip__file-name--KosHK {
  align-self: center;
  flex: 1 1;
  min-width: 0;
  padding-right: var(--spacing-half);
}

.payslip__download-link--loJ0S {
  align-self: center;
  color: var(--color-primary);
  flex: 0 0 auto;
  width: var(--icon-font-size-sm);
}

.payslip__download-link--loJ0S:hover {
  color: var(--neutral-outer-space);
}

.payslip__download-link--loJ0S:focus {
  color: var(--color-primary);
}

.payslips__details--r5ZRY {
  width: 100%;
}

.payslips__loader--iuDQm {
  color: currentColor; /* stylelint-disable-line */
}

.company-switch--Mwrve {
  max-width: 100%;
}

.company-switch__select--mb2Sj {
  font: var(--font-big-body);
  background: transparent;

  --color-input-text: var(--neutral-white);
  --color-drawer-icon: var(--neutral-white);
}

.company-switch__single-item--eykkU {
  max-width: 100%;
  font: var(--font-big-body);
}

.employment--ycNx2 {
  align-items: center;
  color: var(--neutral-white);
  margin: var(--spacing-7) 0 0;
}

.employment__avatar--EwDYv {
  grid-column: 1 / 2;
}

.employment__content--dqH5R {
  grid-column: 2 / 6;
  overflow: hidden;
  min-width: 0;
}

.employment__name--m7t2H {
  font: var(--font-heading-h3);
  letter-spacing: var(--font-heading-letter-spacing-h345);
}

.button--nbq47 {
  align-items: center;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: none;
  display: flex;
  justify-content: space-between;
  outline: none;

  /*
    Expanding width helps to fit ripple
    effect to the end.
  */
  width: calc(100% + var(--grid-margin));
  padding: var(--spacing-5) var(--spacing-7) var(--spacing-5) 0;
}

.button--nbq47:not(:last-child) {
  border-bottom: var(--neutral-athens) 1px solid;
}

.button--logout--YoLsz {
  color: var(--color-primary);
}

.button__name--PzZ88 {
  font: var(--font-heading-h5);
  letter-spacing: var(--font-heading-letter-spacing-h345);
  text-align: left;
  padding: 0 var(--spacing-3) 0 0;
  margin-right: auto;
}

.button--logout--YoLsz .button__name--PzZ88 {
  text-align: center;
  margin-right: 0;
}

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

.button__icon-container--hp6HT {
  display: flex;
  align-self: stretch;
}

.profile__grid--SV_xH {
  overflow-x: hidden;
  overflow-y: auto;
  overflow: hidden auto;
  padding: 0 var(--grid-margin);
}

.profile__section--bgBvq {
  margin-bottom: var(--spacing-6);
  color: var(--primary-outer-space);
  grid-column: 1 / 6;
}

.profile__section--bgBvq:last-of-type {
  margin-bottom: 0;
}

.profile__input-text--aDXEx {
  margin-bottom: var(--spacing-6);
}

.profile__logout--TBrik {
  grid-column: 1 / 6;
}

.settings-button--yXWep {
  /*
    there is no 35px button size available in
    Chronos.
  */
  --flag-icon-size: 2.1875rem;

  /* remove extra spacing from settings button */
  padding-left: 0;
  padding-right: 0;
}

.settings-button__title--JtjsP {
  min-width: 0;
  flex: 1 1;
  margin-left: var(--spacing-11);
  margin-right: var(--spacing-5);
  text-align: left;
  align-self: center;
  font: var(--font-text-xl);
}

.settings-button--is-selected--wG_zx .settings-button__title--JtjsP {
  color: var(--color-primary);
}

.settings-button__language-flag--q3XAU {
  flex: 0 0;
}

.settings-button__icon--EFzPK {
  flex: 0 0;
  color: var(--color-primary);
}

.settings-button__icon-container--JWyam {
  display: flex;
  align-self: stretch;
}

.notification-settings-section--qjRix {
  margin-top: var(--spacing-12);
}

/*
  needs to match inner spacing between
  settings input elements.
*/
.notification-settings-section--without-title--sLpdF {
  margin-top: var(--spacing-5);
}

.notification-settings-section--qjRix:last-child {
  margin-bottom: var(--spacing-12);
}

.notification-settings-section__heading--IaYsX {
  color: var(--neutral-comet);
  font: var(--font-text-sm);
}

.feedback-form__textarea--SSZne {
  /* noop */
}

.feedback-form__textarea--SSZne textarea {
  /* FIXME: this is not ideal: because of a rogue div somewhere up in the hierarchy,
    we have to guesstimate the height */
  min-height: 68vh;
}

:root {
  --android-bottom-inset: 0px; /* Default */
  --bottom-bar-height: calc(54px + var(--android-bottom-inset));
}

.bottom-bar--UhMMD {
  /* for iOS <11.x */
  height: calc((54px + 0px) + constant(safe-area-inset-bottom));
  height: calc(calc(54px + 0px) + constant(safe-area-inset-bottom));
  height: calc(var(--bottom-bar-height) + constant(safe-area-inset-bottom));
  height: calc(calc(54px + 0px) + env(safe-area-inset-bottom));
  height: calc(var(--bottom-bar-height) + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  background: var(--neutral-white);
  box-shadow: 0 1px 3px rgba(0,0,0,0.12157);

  /* for iOS <11.x */
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  padding-bottom: 0px;
  padding-bottom: var(--android-bottom-inset);
  flex-shrink: 0;
}

.bottom-bar__button--HwjHr {
  display: flex;
  align-items: center;
  justify-content: center;
  outline: none;
  color: var(--primary-outer-space);
  -webkit-text-decoration: none;
  text-decoration: none;
}

.bottom-bar__button--active--KC3dR {
  color: var(--color-primary);
}

.bottom-bar__icon--pMUWy {
  /* icons are cut off otherwise */
  padding: var(--spacing-1);
}

.bottom-bar__chat-icon--BJ5Tt::before {
  content: ' ';
  z-index: 3;
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--feedback-error);
  transform: scale(0);
  transition: transform 0.3s ease-in 0.2s, opacity 0.3s ease-in 0.2s;
}

.bottom-bar__chat-icon--has-new-messages--YChIh::before {
  transform: scale(1) translate(10px, -10px);
}

.rating__title--i6p32 {
  color: var(--primary-cod-gray);
  font: var(--font-heading-h4);
  grid-column: span var(--grid-columns);
  letter-spacing: var(--font-heading-letter-spacing-h345);
  margin: 0;
  padding: 0;
}

.rating__description--jpF1h {
  color: var(--neutral-comet);
  font: var(--font-subtitle-small);
  grid-column: span var(--grid-columns);
  margin-top: var(--spacing-4);
}

.rating__actions--BpkFH {
  font: var(--font-body-small);
  grid-column: span var(--grid-columns);
  margin-top: var(--spacing-7);
}

.rating__action--ide8q {
  width: 100%;
}

.rating__action--ide8q:not(:last-child) {
  margin-bottom: var(--spacing-5);
}

.snackbar--qfGmL {
  --snackbar-background: rgba(0, 0, 0, 0.8);
  --snackbar-icon-background: var(--neutral-white);
  --snackbar-text-color: var(--neutral-white);

  align-items: center;
  background: rgba(0, 0, 0, 0.8);
  background: var(--snackbar-background);
  border-radius: 9999px;

  /* for iOS <11.x */
  bottom: calc(constant(safe-area-inset-bottom) + var(--bottom-bar-height) + var(--spacing-2));
  bottom: calc(env(safe-area-inset-bottom) + var(--bottom-bar-height) + var(--spacing-2));
  display: flex;
  left: 0;
  margin: 0 var(--spacing-3);
  padding: var(--spacing-2) 0 var(--spacing-2) var(--spacing-2);
  position: fixed;
  transition: transform var(--transition-default), opacity var(--transition-default);
  width: calc(100% - 2 * var(--spacing-3));
  z-index: 9999;
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px); /* could be a variable once we use it anywhere else */
}

.snackbar__icon--KjULU {
  display: flex;
  background: var(--snackbar-icon-background);
  border-radius: 9999px;
  height: var(--spacing-12);
  justify-content: center;
  width: var(--spacing-12);
}

.snackbar__icon--success--yWJWJ {
  color: var(--shyftplan-green);
}

.snackbar__icon--error--h3n71 {
  color: var(--feedback-error);
}

.snackbar__message--gtv8n {
  color: var(--snackbar-text-color);
  flex: 1 1;
  font: var(--font-text-mdm);
  margin: 0 var(--spacing-4) 0 var(--spacing-6);
}

.transition-slide-enter--SPiEv.snackbar--qfGmL,
.transition-slide-leave-to--ISvmk.snackbar--qfGmL {
  opacity: 0;
  transform: translateY(50vh);
}

.transition-slide-enter-to--U8xzw.snackbar--qfGmL,
.transition-slide-leave--gabk1.snackbar--qfGmL {
  opacity: 1;
  transform: translateY(0);
}

:root {
  --color-box-shadow: rgba(0,0,0,0.10196);
  --color-bw-00: #fff;
  --color-bw-100: #000;
  --color-grey-200: #E5E7EB;
  --color-grey-50: #F9FAFB;
  --color-orange: #FD9900;
  --color-placeholder: #b7b7b7;
  --color-primary: #8c59f5;
  --color-primary-pressed: rgb(140, 89, 245);
  --color-red: #f21427;
  --feedback-error: #d9534f;
  --feedback-success: #8c59f5;
  --feedback-warning: #f0ad4e;
  --neutral-athens: #e7e8ed;
  --neutral-athens-light: #f7f8fa;
  --neutral-comet: #545a6c;
  --neutral-white: #fff;
  --outer-space: #2e353d;
  --palettes-gray-dark: #656565;
  --palettes-gray-darker: #404040;
  --palettes-gray-light: #adadad;
  --palettes-gray-lighter: #d2d2d2;
  --palettes-gray-normal: #898989;
  --palettes-gray-soft: #f6f6f6;
  --palettes-gray-softer: #fff;
  --primary-cod-gray: #1c1c1c;
  --primary-color-primary: #8c59f5;
  --primary-outer-space: #2e353d;
  --roman-pressed: #ce4f4b;
  --color-box-shadow: #0000001a;
  --color-placeholder: #b7b7b7;
  --color-bw-00: #fff;
  --color-bw-100: #000;
  --color-red: #f21427;
  --color-orange: #FD9900;
  --sandy-brown-pressed: #e3a44a;
  --shyftplan-green: #4b4;
}

:root {
  --grid-columns: 5;
  --grid-gutter: 15px;
  --grid-margin: 21px;
}

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

.text-wrap--Y7DKl {
  /* this is the only option that is recognized
   *  by html2canvas break-word
   *  doesn't seem to work
   */
  word-break: break-all;
  white-space: normal;
  word-wrap: break-word;
}

.user-selectable--D65Iw {
  -webkit-user-select: text;
     -moz-user-select: text;
          user-select: text;
}

.link-green-outer-space--NR0iX {
  color: var(--color-primary);
  cursor: pointer;
}

.link-green-outer-space--NR0iX:hover {
  color: var(--outer-space);
}

.link-green-outer-space--NR0iX:focus {
  color: var(--comet);
}

.link-green-outer-space--NR0iX:focus:hover {
  color: var(--outer-space);
}

.bottom-line--pq21N {
  border-bottom: var(--neutral-athens) 1px solid;
}

@font-face {
  font-family: 'Montserrat';
  font-display: swap;
  font-style: normal;
  font-weight: 100;
  src:
    url(mobile-assets.Montserrat-Thin.b45e4c0f140a13759744.woff2) format('woff2'),
    url(mobile-assets.Montserrat-Thin.d9ac0c4ad3756cc6cee6.woff) format('woff'),
    url(mobile-assets.Montserrat-Thin.0d06a659f531011748f0.otf) format('otf');
}
@font-face {
  font-family: 'Montserrat';
  font-display: swap;
  font-style: normal;
  font-weight: 300;
  src:
    url(mobile-assets.Montserrat-Light.6bddc9aa874ccb438a2c.woff2) format('woff2'),
    url(mobile-assets.Montserrat-Light.e6846aefc95efeec1878.woff) format('woff'),
    url(mobile-assets.Montserrat-Light.dcccd61bf06aba5c5c99.otf) format('otf');
}
@font-face {
  font-family: 'Montserrat';
  font-display: swap;
  font-style: normal;
  font-weight: 400;
  src:
    url(mobile-assets.Montserrat-Regular.57ccdcc66ec84d0f4a54.woff2) format('woff2'),
    url(mobile-assets.Montserrat-Regular.9f41050070251662f2fc.woff) format('woff'),
    url(mobile-assets.Montserrat-Regular.cfe8a3efde65b43ae9ef.otf) format('otf');
}
@font-face {
  font-family: 'Montserrat';
  font-display: swap;
  font-style: normal;
  font-weight: 500;
  src:
    url(mobile-assets.Montserrat-Medium.30380fe3e99698ecfc9f.woff2) format('woff2'),
    url(mobile-assets.Montserrat-Medium.30d2328c8c5c615794d3.woff) format('woff'),
    url(mobile-assets.Montserrat-Medium.fc95a2b78f36289e1b66.otf) format('otf');
}
@font-face {
  font-family: 'Montserrat';
  font-display: swap;
  font-style: normal;
  font-weight: 600;
  src:
    url(mobile-assets.Montserrat-Bold.25b6edce96dfe1eeb565.woff2) format('woff2'),
    url(mobile-assets.Montserrat-Bold.319b5a39587ae21367c8.woff) format('woff'),
    url(mobile-assets.Montserrat-Bold.d8b81ded80f5274b5229.otf) format('otf');
}

@font-face {
  font-family: 'shyftplan';
  font-style: normal;
  src: url(mobile-assets.shyftplan.7045b9008e524c3fbfca.woff) format('woff');
}

:root {
  --icon-font-size-sm: 1rem;
  --icon-font-size-md: 1.4375rem;
  --icon-font-size-lg: 1.875rem;
  --icon-font-size-button-sm: 0.75rem;
  --icon-font-size-button-md: 1rem;
  --icon-font-size-button-lg: 1.5rem;
  --button-icon-size-sm: 1.5rem;
  --button-icon-size-md: 1.875rem;
  --button-icon-size-lg: 3.4375rem;
}

html {
  height: 100%;
}

body {
  margin: 0;
  height: 100%;
  overflow: hidden;

  /* for iOS <11.x */
  padding: 0 constant(safe-area-inset-right) 0 constant(safe-area-inset-left);
  padding: 0 env(safe-area-inset-right) 0 env(safe-area-inset-left);
}

ul {
  padding: 0;
  margin: 0;
}

li {
  list-style: none;
}

* {
  box-sizing: border-box;
}

a,
a:visited {
  -webkit-text-decoration: none;
  text-decoration: none;
}

.root--XmuCK {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  /* generic font settings */
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-regular);
  font-size: 100%;
}

.neutral-white-fill--_TCdj {
  fill: var(--neutral-white);
}

.state-default-fill--NdbE6 {
  fill: var(--color-primary);
}

:root {
  --spacing-1: 0.1875rem; /* 3px */
  --spacing-2: 0.375rem; /* 6px */
  --spacing-3: 0.5625rem; /* 9px */
  --spacing-4: 0.75rem; /* 12px */
  --spacing-5: 0.9375rem; /* 15px */
  --spacing-6: 1.125rem; /* 18px */
  --spacing-7: 1.3125rem; /* 21px */
  --spacing-8: 1.5rem; /* 24px */
  --spacing-9: 1.6875rem; /* 27px */
  --spacing-10: 1.875rem; /* 30px */
  --spacing-11: 2.0625rem; /* 33px */
  --spacing-12: 2.25rem; /* 36px */
  --spacing-13: 2.4375rem; /* 39px */
  --spacing-14: 2.625rem; /* 42px */
  --spacing-15: 2.8125rem; /* 45px */
  --spacing-16: 3rem; /* 48px */
  --spacing-17: 3.1875rem; /* 51px */
  --spacing-18: 3.375rem; /* 54px */
  --spacing-19: 3.5625rem; /* 57px */
  --spacing-half: 0.375rem; /* 6px */
  --spacing-normal: 0.75rem; /* 12px */
  --spacing-double: 1.5rem; /* 24px */
}

:root {
  --transition-timing-function-default: ease-out;
  --transition-duration-default: 0.3s;
  --transition-default: var(--transition-duration-default) var(--transition-timing-function-default);
  --transition-fast: var(--transition-timing-function-default) calc(var(--transition-duration-default) / 2);
}

:root {
  --font-family-base: 'Montserrat', Arial, sans-serif;
  --font-weight-thin: 100;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 600;
  --font-size-heading-xxl: 4.0625rem; /* 65px / 16px */
  --font-size-heading-xl: 2.8125rem; /* 45px / 16px */
  --font-size-heading-lg: 2.1875rem; /* 35px / 16px */
  --font-size-heading-md: 1.5rem; /* 24px / 16px */
  --font-size-heading-sm: 1.3125rem; /* 21px / 16px */
  --font-size-heading-xs: 1rem; /* 16px / 16px */
  --font-size-text-xl: 1.125rem; /* 18px / 16px */
  --font-size-text-lg: 1rem; /* 16px / 16px */
  --font-size-text-md: 0.875rem; /* 14px / 16px */
  --font-size-text-sm: 0.75rem; /* 12px / 16px */
  --font-size-text-xs: 0.6875rem; /* 11px / 16px */
  --font-size-text-xxs: 0.625rem; /* 10px / 16px */
  --font-line-heading-height: 1.1;
  --font-line-text-height: 1.2;
  --font-heading-letter-spacing-h012: -0.053125rem; /* -0.85px / 16px */
  --font-heading-letter-spacing-h345: -0.03125rem; /* -0.5px / 16px */
  --font-heading-letter-spacing-text: -0.00625rem; /* -0.1px / 16px */
  --font-heading-hero: 600 4.0625rem / 1.1 Montserrat, Arial, sans-serif;
  --font-heading-h1: 500 2.8125rem / 1.1 Montserrat, Arial, sans-serif;
  --font-heading-h2: 600 2.1875rem / 1.1 Montserrat, Arial, sans-serif;
  --font-heading-h3: 500 1.5rem / 1.2 Montserrat, Arial, sans-serif;
  --font-heading-h4: 500 1.3125rem / 1.2 Montserrat, Arial, sans-serif;
  --font-heading-h5: 500 1rem / 1.2 Montserrat, Arial, sans-serif;
  --font-body-big: 400 1.125rem / 1.2 Montserrat, Arial, sans-serif;
  --font-subtitle-big: 600 1rem / 1.2 Montserrat, Arial, sans-serif;
  --font-subtitle-small: 500 0.875rem / 1.2 Montserrat, Arial, sans-serif;
  --font-body-small: 400 0.875rem / 1.2 Montserrat, Arial, sans-serif;
  --font-caption: 500 0.75rem / 1.2 Montserrat, Arial, sans-serif;
  --font-overline: 500 0.6875rem / 1.2 Montserrat, Arial, sans-serif;
  --font-small-text: 400 0.625rem / 1.2 Montserrat, Arial, sans-serif;
  --font-text-xl: 400 1.125rem / 1.2 Montserrat, Arial, sans-serif;
  --font-text-lg: 600 1rem / 1.2 Montserrat, Arial, sans-serif;
  --font-text-mdm: 500 0.875rem / 1.2 Montserrat, Arial, sans-serif;
  --font-text-mdr: 400 0.875rem / 1.2 Montserrat, Arial, sans-serif;
  --font-text-sm: 500 0.75rem / 1.2 Montserrat, Arial, sans-serif;
  --font-text-xs: 500 0.6875rem / 1.2 Montserrat, Arial, sans-serif;
  --font-text-xxs: 400 0.625rem / 1.2 Montserrat, Arial, sans-serif;
  --font-paragraph: 400 0.875rem / 1.2 Montserrat, Arial, sans-serif;
  --font-label: 500 0.75rem / 1.2 Montserrat, Arial, sans-serif;
}