@import "https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;500;600&family=Roboto&display=swap";

/* src/styles.scss */
:root {
  --button-background-color: var(--blue-100);
  --button-border-color: var(--blue-100);
  --button-text-color: var(--white);
  --hover-button-background-color: var(--blue-80);
  --hover-button-border-color: var(--blue-80);
  --hover-button-text-color: var(--white);
  --hover-button-background-ghost-color: var(--blue-10);
  --disabled-button-background-color: var(--blue-140);
  --disabled-button-border-color: var(--blue-140);
  --disabled-button-text-color: var(--blue-50);
  --button-text-size: 16px;
  --button-icon-gap: 8px;
}
.button,
button {
  cursor: pointer;
  display: inline-block;
  box-sizing: border-box;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -webkit-user-select: none;
  user-select: none;
  border: none;
  font-family: var(--font-heading);
  border-radius: var(--border-radius);
  z-index: 2;
  color: var(--button-text-color);
  background-color: var(--button-background-color);
  transition: all 0.15s ease-in-out;
  font-size: var(--button-text-size);
}
.button .button-text,
button .button-text {
  display: flex;
  align-items: center;
  overflow-y: visible;
  justify-content: center;
}
.button.ghost,
button.ghost {
  background-color: transparent;
  color: var(--button-border-color);
  box-shadow: inset 0px 0px 0px 2px var(--button-border-color);
}
.button.ghost .icon,
button.ghost .icon {
  background-color: var(--button-border-color);
}
.button.text,
button.text {
  background-color: transparent;
  color: var(--button-background-color);
}
.button.text .icon,
button.text .icon {
  background-color: var(--button-background-color);
}
.button .button-text,
button .button-text {
  height: var(--button-text-size);
  gap: var(--button-icon-gap);
}
.button .icon,
button .icon {
  width: var(--button-text-size);
  height: var(--button-text-size);
}
.button.medium,
button.medium {
  --button-text-size: 16px;
  --button-icon-gap: 8px;
  padding: 11px 20px;
  padding-top: 12px;
}
.button.medium.no-text,
button.medium.no-text {
  padding: 11px;
  padding-top: 12px;
}
.button.small,
button.small {
  --button-text-size: 14px;
  --button-icon-gap: 4px;
  padding: 8px 12px;
}
.button.small.no-text,
button.small.no-text {
  padding: 8px;
}
.button.large,
button.large {
  --button-text-size: 18px;
  --button-icon-gap: 10px;
  padding: 18px 24px;
}
.button.large.no-text,
button.large.no-text {
  padding: 18px;
}
.button.primary,
button.primary {
  --button-background-color: var(--blue-100);
  --button-border-color: var(--blue-100);
  --button-text-color: var(--white);
  --hover-button-background-color: var(--blue-80);
  --hover-button-border-color: var(--blue-80);
  --hover-button-text-color: var(--white);
  --hover-button-background-ghost-color: var(--blue-10);
  --disabled-button-background-color: var(--blue-140);
  --disabled-button-border-color: var(--blue-140);
  --disabled-button-text-color: var(--blue-50);
}
.button.inverted,
button.inverted {
  --button-background-color: var(--gray-100);
  --button-border-color: var(--gray-100);
  --button-text-color: var(--white);
  --hover-button-background-color: var(--gray-80);
  --hover-button-border-color: var(--gray-80);
  --hover-button-text-color: var(--white);
  --hover-button-background-ghost-color: var(--gray-10);
  --disabled-button-background-color: var(--gray-50);
  --disabled-button-border-color: var(--gray-50);
  --disabled-button-text-color: var(--gray-50);
}
.button.success,
button.success {
  --button-background-color: var(--green-100);
  --button-border-color: var(--green-100);
  --button-text-color: var(--white);
  --hover-button-background-color: var(--green-80);
  --hover-button-border-color: var(--green-80);
  --hover-button-text-color: var(--white);
  --hover-button-background-ghost-color: var(--green-10);
  --disabled-button-background-color: var(--green-140);
  --disabled-button-border-color: var(--green-140);
  --disabled-button-text-color: var(--green-50);
}
.button.warning,
button.warning {
  --button-background-color: var(--orange-100);
  --button-border-color: var(--orange-100);
  --button-text-color: var(--white);
  --hover-button-background-color: var(--orange-80);
  --hover-button-border-color: var(--orange-80);
  --hover-button-text-color: var(--white);
  --hover-button-background-ghost-color: var(--orange-10);
  --disabled-button-background-color: var(--orange-140);
  --disabled-button-border-color: var(--orange-140);
  --disabled-button-text-color: var(--orange-50);
}
.button.error,
button.error {
  --button-background-color: var(--red-100);
  --button-border-color: var(--red-100);
  --button-text-color: var(--white);
  --hover-button-background-color: var(--red-80);
  --hover-button-border-color: var(--red-80);
  --hover-button-text-color: var(--white);
  --hover-button-background-ghost-color: var(--red-10);
  --disabled-button-background-color: var(--red-140);
  --disabled-button-border-color: var(--red-140);
  --disabled-button-text-color: var(--red-50);
}
.button.stretch,
button.stretch {
  width: 100%;
}
.button .icon,
button .icon {
  display: inline-block;
  background-color: var(--button-text-color);
}
.button:active,
.button:disabled,
.button.selected,
button:active,
button:disabled,
button.selected {
  background-color: var(--disabled-button-background-color);
}
.button:active.ghost,
.button:disabled.ghost,
.button.selected.ghost,
button:active.ghost,
button:disabled.ghost,
button.selected.ghost {
  background-color: transparent;
  color: var(--disabled-button-border-color);
  box-shadow: inset 0px 0px 0px 2px var(--disabled-button-border-color);
}
.button:active.ghost .icon,
.button:disabled.ghost .icon,
.button.selected.ghost .icon,
button:active.ghost .icon,
button:disabled.ghost .icon,
button.selected.ghost .icon {
  background-color: var(--disabled-button-border-color);
}
.button:active.text,
.button:disabled.text,
.button.selected.text,
button:active.text,
button:disabled.text,
button.selected.text {
  background-color: transparent;
  color: var(--disabled-button-text-color);
}
.button:active.text .icon,
.button:disabled.text .icon,
.button.selected.text .icon,
button:active.text .icon,
button:disabled.text .icon,
button.selected.text .icon {
  background-color: var(--disabled-button-text-color);
}
.button:hover:not(:disabled),
button:hover:not(:disabled) {
  background-color: var(--hover-button-background-color);
  color: var(--hover-button-text-color);
}
.button:hover:not(:disabled) .icon,
button:hover:not(:disabled) .icon {
  background-color: var(--hover-button-text-color);
}
.button:hover:not(:disabled).ghost,
button:hover:not(:disabled).ghost {
  background-color: var(--hover-button-background-ghost-color);
  color: var(--button-background-color);
  box-shadow: inset 0px 0px 0px 2px var(--hover-button-border-color);
}
.button:hover:not(:disabled).ghost .icon,
button:hover:not(:disabled).ghost .icon {
  background-color: var(--button-background-color);
}
.button:hover:not(:disabled).text,
button:hover:not(:disabled).text {
  background-color: var(--hover-button-background-ghost-color);
  color: var(--button-background-color);
}
.button:hover:not(:disabled).text .icon,
button:hover:not(:disabled).text .icon {
  background-color: var(--button-background-color);
}
.button:focus,
button:focus {
  z-index: 1;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5);
}
.button:disabled,
button:disabled {
  cursor: not-allowed;
}
.button-group {
  display: flex;
}
.button-group .button:not(:first-child),
.button-group kronos-button:not(:first-child),
.button-group button:not(:first-child) {
  margin-left: 8px;
}
.button-group.right {
  justify-content: flex-end;
}
.button-group.center {
  justify-content: center;
}
:root {
  --calendar-day-name-color: var(--gray-60);
}
:root body.dark {
  --calendar-day-name-color: var(--gray-60);
  --calendar-date-color: var(--gray-40);
  --calendar-week-number-color: var(--gray-60);
  --calendar-date-future-background-stripe: var(--gray-100);
  --calendar-date-future-date-color: var(--gray-40);
}
.calendar {
  width: 100%;
  display: flex;
  flex-direction: column;
  font-size: small;
}
.calendar .calendar-row {
  width: 100%;
  display: flex;
  min-height: 100px;
}
.calendar .calendar-row.calendar-header {
  min-height: unset;
}
.calendar .calendar-row.calendar-header > * {
  color: var(--calendar-day-name-color);
}
.calendar .calendar-row > * {
  position: relative;
  border: 1px solid var(--gray-100);
  text-align: center;
}
.calendar .calendar-row > *:first-child {
  width: 40px;
  text-align: left;
}
.calendar .calendar-row > *:not(:first-child) {
  width: 16.6666666667%;
}
.calendar .calendar-row .week-number {
  color: var(--calendar-week-number-color);
  align-content: center;
}
.calendar .calendar-row .week-day {
  overflow: hidden;
  padding: 0px 4px;
  padding-bottom: 4px;
}
.calendar .calendar-row .week-day.not-current-month .date-container .date {
  color: var(--gray-100);
}
.calendar .calendar-row .week-day .date-container {
  display: flex;
  justify-content: center;
  padding: 4px;
}
.calendar .calendar-row .week-day .date-container .date {
  left: auto;
  border-radius: 50%;
  padding: 4px;
}
.calendar .calendar-row .week-day .date-container .date.today {
  background-color: var(--blue-100);
}
.calendar .calendar-row .week-day .all-day-activities,
.calendar .calendar-row .week-day .activities {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.calendar .calendar-row .week-day .all-day-activities > *,
.calendar .calendar-row .week-day .activities > * {
  display: flex;
  overflow: hidden;
  align-items: center;
  margin-bottom: 2px;
}
.calendar .calendar-row .week-day .all-day-activities > * {
  background-color: var(--gray-60);
  border-radius: 4px;
  padding: 2px;
}
.calendar .calendar-row .week-day .all-day-activities > *.task {
  background-color: var(--green-150);
  color: var(--green-20);
}
.calendar .calendar-row .week-day .all-day-activities > *.task.done {
  text-decoration: line-through;
  background-color: var(--green-150);
  color: var(--green-100);
}
.calendar .calendar-row .week-day .all-day-activities > *.task.done .icon {
  background-color: var(--green-100);
}
.calendar .calendar-row .week-day .all-day-activities > *.task .icon {
  background-color: var(--green-20);
}
.calendar .calendar-row .week-day .all-day-activities > *.service-report {
  background-color: var(--gray-120);
  color: var(--gray-40);
}
.calendar .calendar-row .week-day .all-day-activities > * .icon {
  margin-right: 4px;
  width: 12px;
  height: 12px;
}
.calendar .calendar-row .week-day .all-day-activities > * .title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.calendar .calendar-row .week-day .activities > *.registration::before {
  background-color: var(--blue-100);
}
.calendar .calendar-row .week-day .activities > *.break {
  color: var(--gray-60);
}
.calendar .calendar-row .week-day .activities > *::before {
  content: " ";
  min-width: 6px;
  max-width: 6px;
  min-height: 6px;
  max-height: 6px;
  border-radius: 50%;
  background-color: var(--gray-80);
  margin-right: 4px;
}
.calendar .calendar-row .week-day .activities > * .time {
  margin-right: 4px;
  color: var(--gray-80);
}
.calendar .calendar-row .week-day .activities > * .title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.calendar .calendar-row .week-day .register-day {
  display: flex;
  position: absolute;
  bottom: 4px;
  right: 4px;
}
:root {
  --card-background: var(--white);
}
:root body.dark {
  --card-background: var(--gray-170);
}
.card {
  border-radius: var(--border-radius);
  background-color: var(--card-background);
  padding: 16px;
  box-shadow: var(--shadow-md);
}
:root {
  --checkbox-check-background-selected: var(--blue-100);
  --checkbox-check-background-selected-disabled: var(--gray-40);
  --checkbox-check-mark: var(--white);
}
.checkbox-container input {
  display: none;
}
.checkbox-container input:checked + .checkbox .checkbox-check {
  background: var(--checkbox-check-background-selected);
  border-color: var(--checkbox-check-background-selected);
  animation: wave 0.15s ease-in-out;
}
.checkbox-container input:checked + .checkbox .checkbox-check svg {
  stroke-dashoffset: 0;
}
.checkbox-container input:disabled + .checkbox {
  cursor: not-allowed;
}
.checkbox-container input:disabled + .checkbox .checkbox-check {
  border-color: var(--checkbox-check-background-selected-disabled);
}
.checkbox-container input:disabled + .checkbox .checkbox-label {
  color: var(--input-color-border-disabled);
}
.checkbox-container input:disabled:checked + .checkbox .checkbox-check {
  background: var(--checkbox-check-background-selected-disabled);
}
.checkbox-container .checkbox {
  -webkit-user-select: none;
  user-select: none;
  cursor: pointer;
  display: flex;
}
.checkbox-container .checkbox:hover .checkbox-check {
  border-color: var(--checkbox-check-background-selected);
}
.checkbox-container .checkbox .checkbox-check {
  position: relative;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  transform: scale(1);
  border: 2px solid var(--input-color-border);
  display: flex;
  align-items: center;
  justify-content: center;
}
.checkbox-container .checkbox .checkbox-check svg {
  fill: none;
  stroke: var(--checkbox-check-mark);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 16px;
  stroke-dashoffset: 16px;
  transition: all 0.15s ease-in-out;
}
.checkbox-container .checkbox .checkbox-label {
  padding-left: 8px;
  line-height: 18px;
  font-family: var(--font-heading);
}
.checkbox-container .inline-svg {
  display: none;
}
form .checkbox-container {
  padding-top: 30px;
}
@keyframes wave {
  50% {
    transform: scale(0.9);
  }
}
.chip {
  background-color: var(--blue-100);
  color: var(--white);
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 99px;
  display: flex;
  align-items: center;
  overflow: hidden;
  display: flex;
}
.chip .icon {
  background-color: var(--white);
  margin-right: 4px;
  height: 14px;
  width: 14px;
}
.chip .text {
  overflow: hidden;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}
:root {
  --collapsible-title-color: var(---gray-120);
  --collapsible-icon-color: var(---gray-160);
  --collapsible-border-color: var(--gray-30);
  --collapsible-background: var(--gray-5);
  --collapsible-background-open: var(--gray-15);
  --collapsible-background-hover: var(--gray-20);
}
:root body.dark {
  --collapsible-title-color: var(--gray-20);
  --collapsible-icon-color: var(--gray-20);
  --collapsible-border-color: var(--gray-130);
  --collapsible-background: var(--gray-150);
  --collapsible-background-open: var(--gray-160);
  --collapsible-background-hover: var(--gray-140);
}
.collapsible {
  background-color: var(--collapsible-background);
  border-bottom: var(--collapsible-border-color) solid 1px;
  position: relative;
}
.collapsible.open {
  background-color: var(--collapsible-background-open);
}
.collapsible.open > .title.hide-title-when-open {
  padding-top: 0;
  height: 0px;
  opacity: 0;
}
.collapsible > .title {
  color: var(--collapsible-title-color);
  font-family: var(--font-heading);
  width: 100%;
  cursor: pointer;
  padding: 16px 8px;
  -webkit-user-select: none;
  user-select: none;
  opacity: 1;
  transition: height 0.2s ease-in-out;
}
.collapsible > .title:hover {
  background-color: var(--collapsible-background-hover);
  transition: background-color 0.2s ease-in-out;
}
.collapsible > .content {
  transition: all 0.2s ease-in-out;
  padding: 0 16px;
}
.collapsible > .collapse-icon {
  position: absolute;
  width: 24px;
  height: 24px;
  right: 0;
  top: 16px;
  transition: all 0.2s ease-in-out;
  z-index: 999;
}
.collapsible > .collapse-icon svg {
  fill: var(--collapsible-icon-color);
}
.collapsible > .collapse-icon.expanded {
  transform: rotate(180deg);
  transition: transform 0.2s ease-in-out;
}
.collapsible > .collapse-icon.collapsed {
  transform: rotate(0deg);
  transition: transform 0.2s ease-in-out;
}
.collapsible :last-child {
  margin-bottom: 0;
}
:root {
  --date-picker-panel-background: var(--white);
  --date-picker-panel-current-date-background: var(--blue-100);
  --date-picker-panel-month-text-color: var(--gray-160);
  --date-picker-panel-day-text-color: var(--gray-160);
  --date-picker-panel-week-number-text-color: var(--gray-70);
  --date-picker-panel-date-text-color: var(--blue-100);
  --date-picker-panel-date-background-hover: var(--blue-20);
  --date-picker-panel-selected-date-text-color: var(--white);
  --date-picker-panel-selected-date-background: var(--blue-100);
}
:root body.dark {
  --date-picker-panel-background: var(--gray-150);
  --date-picker-panel-current-date-background: var(--blue-100);
  --date-picker-panel-month-text-color: var(--gray-10);
  --date-picker-panel-day-text-color: var(--gray-10);
  --date-picker-panel-week-number-text-color: var(--gray-70);
  --date-picker-panel-date-text-color: var(--blue-100);
  --date-picker-panel-date-background-hover: var(--blue-180);
  --date-picker-panel-selected-date-text-color: var(--white);
  --date-picker-panel-selected-date-background: var(--blue-100);
}
.date-picker .form-control dp-date-picker::placeholder {
  transition: all 0.15s ease-in-out;
}
.date-picker .form-control dp-date-picker:active:not([disabled]),
.date-picker .form-control dp-date-picker:focus:not([disabled]),
.date-picker .form-control dp-date-picker.open:not([disabled]) {
  background-color: var(--input-color-background-active);
  border-color: var(--input-color-border-active);
  outline: none;
}
.date-picker .form-control dp-date-picker:active:not([disabled])::placeholder,
.date-picker .form-control dp-date-picker:focus:not([disabled])::placeholder,
.date-picker .form-control dp-date-picker.open:not([disabled])::placeholder {
  color: var(--input-color-placeholder-active);
}
.date-picker .form-control dp-date-picker:active:not([disabled]) + label,
.date-picker .form-control dp-date-picker:focus:not([disabled]) + label,
.date-picker .form-control dp-date-picker.open:not([disabled]) + label {
  color: var(--input-color-border-active);
}
.date-picker .form-control dp-date-picker[disabled] input {
  border-color: var(--input-color-border-disabled);
  border-style: dashed;
  cursor: not-allowed;
}
.date-picker .form-control dp-date-picker[disabled] input::placeholder {
  color: var(--input-color-placeholder-disabled);
}
.date-picker .form-control dp-date-picker[disabled] + label {
  color: var(--input-color-border-disabled);
}
.date-picker .form-control dp-date-picker[required] + label {
  display: block;
}
.date-picker .form-control dp-date-picker[required] + label::after {
  margin-left: 4px;
  content: "*";
  color: var(--input-color-border-error);
}
.date-picker .form-control dp-date-picker.success input {
  border-color: var(--input-color-border-success);
}
.date-picker .form-control dp-date-picker.success + label {
  color: var(--input-color-border-success);
}
.date-picker .form-control dp-date-picker.error input {
  border-color: var(--input-color-border-error);
}
.date-picker .form-control dp-date-picker.error + label {
  color: var(--input-color-border-error);
}
.cdk-overlay-pane .dp-popup {
  box-shadow: var(--shadow-md);
  padding: 8px;
  border-radius: var(--border-radius);
  border: var(--default-border);
  background-color: var(--date-picker-panel-background);
}
.cdk-overlay-pane .dp-popup .dp-day-calendar-container {
  background-color: var(--date-picker-panel-background);
}
.cdk-overlay-pane .dp-popup .dp-day-calendar-container .dp-calendar-nav-container {
  border: none;
  height: 40px;
  margin-bottom: 8px;
}
.cdk-overlay-pane .dp-popup .dp-day-calendar-container .dp-calendar-nav-container .dp-nav-header span {
  color: var(--date-picker-panel-month-text-color);
  font-family: var(--font-heading);
  font-size: 1rem;
}
.cdk-overlay-pane .dp-popup .dp-day-calendar-container .dp-calendar-nav-container .dp-nav-header .dp-nav-header-btn {
  display: none;
}
.cdk-overlay-pane .dp-popup .dp-day-calendar-container .dp-calendar-nav-container .dp-nav-btns-container .dp-calendar-nav-left,
.cdk-overlay-pane .dp-popup .dp-day-calendar-container .dp-calendar-nav-container .dp-nav-btns-container .dp-calendar-nav-right,
.cdk-overlay-pane .dp-popup .dp-day-calendar-container .dp-calendar-nav-container .dp-nav-btns-container .dp-current-location-btn {
  line-height: unset;
  padding: unset;
  width: 24px;
  height: 24px;
}
.cdk-overlay-pane .dp-popup .dp-day-calendar-container .dp-calendar-nav-container .dp-nav-btns-container .dp-calendar-nav-left::before {
  left: 2px;
}
.cdk-overlay-pane .dp-popup .dp-day-calendar-container .dp-calendar-nav-container .dp-nav-btns-container .dp-calendar-nav-right::before {
  left: -1px;
}
.cdk-overlay-pane .dp-popup .dp-day-calendar-container .dp-calendar-nav-container .dp-nav-btns-container .dp-current-location-btn {
  top: unset;
  margin: 0 4px;
  background-color: var(--date-picker-panel-current-date-background);
  border: var(--default-border-primary);
  box-shadow: inset 0 0 0 2px var(--gray-5);
}
.cdk-overlay-pane .dp-popup .dp-day-calendar-container .dp-calendar-wrapper {
  border: none;
  margin-left: 30px;
}
.cdk-overlay-pane .dp-popup .dp-day-calendar-container .dp-calendar-wrapper .dp-weekdays {
  margin-bottom: 4px;
  display: flex;
  justify-content: space-around;
}
.cdk-overlay-pane .dp-popup .dp-day-calendar-container .dp-calendar-wrapper .dp-weekdays .dp-calendar-weekday {
  border: none;
  color: var(--date-picker-panel-day-text-color);
  font-family: var(--font-heading);
  font-size: 1rem;
}
.cdk-overlay-pane .dp-popup .dp-day-calendar-container .dp-calendar-wrapper .dp-calendar-week .dp-week-number {
  color: var(--date-picker-panel-week-number-text-color);
  font-family: var(--font-heading);
  font-size: 13px;
  left: 16px;
  padding-top: 6px;
  text-align: right;
  width: 16px;
}
.cdk-overlay-pane .dp-popup .dp-day-calendar-container .dp-calendar-wrapper .dp-calendar-week button {
  width: 40px;
  height: 32px;
  padding: unset;
  background-color: unset;
  color: var(--date-picker-panel-date-text-color);
}
.cdk-overlay-pane .dp-popup .dp-day-calendar-container .dp-calendar-wrapper .dp-calendar-week button.dp-selected {
  color: var(--date-picker-panel-selected-date-text-color);
  background-color: var(--date-picker-panel-selected-date-background);
}
.cdk-overlay-pane .dp-popup .dp-day-calendar-container .dp-calendar-wrapper .dp-calendar-week button:hover:not([disabled]) {
  background-color: var(--date-picker-panel-date-background-hover);
}
.cdk-overlay-pane .dp-popup .dp-day-calendar-container .dp-calendar-wrapper .dp-calendar-week button[disabled] {
  cursor: not-allowed;
  color: var(--input-color-border-disabled);
}
:root {
  --day-overview-date-background: var(--blue-100);
  --day-overview-date-green: var(--green-120);
  --day-overview-date-orange: var(--orange-100);
  --day-overview-date-red: var(--red-100);
  --day-overview-date-weekend: var(--gray-70);
  --day-overview-text-color: var(--gray-160);
  --day-overview-border-color: var(--gray-50);
}
:root body.dark {
  --day-overview-date-background: var(--blue-100);
  --day-overview-date-green: var(--green-140);
  --day-overview-date-orange: var(--orange-110);
  --day-overview-date-red: var(--red-120);
  --day-overview-date-weekend: var(--gray-120);
  --day-overview-text-color: var(--gray-20);
  --day-overview-border-color: var(--gray-120);
}
.card-registration {
  margin-top: 1rem;
  width: 100%;
  display: grid;
  grid-template-columns: min-content auto min-content;
  grid-auto-rows: minmax(min-content, max-content);
  align-items: center;
}
.card-registration .date {
  text-align: center;
  padding: 1rem 2rem;
  color: white;
  background-color: var(--day-overview-date-background);
  border-radius: var(--border-radius) 0 0 var(--border-radius);
  margin: -1rem 0 -1rem -1rem;
  height: calc(100% + 2rem);
  display: flex;
  align-items: center;
  width: 120px;
  font-family: var(--font-heading);
}
.card-registration .date .text {
  margin: 0 auto;
  line-height: 1.8rem;
}
.card-registration .date .text .day-of-week-full {
  display: none;
}
.card-registration .date .text .month-full {
  display: none;
  text-transform: lowercase;
}
.card-registration .date .text .month {
  display: unset;
}
.card-registration .date .text .day {
  font-size: 2rem;
}
.card-registration .date .text .day.today {
  font-size: 1rem;
  margin-left: -0.3rem;
  padding: 0.42rem 0;
}
.card-registration .date.green {
  background-color: var(--day-overview-date-green);
}
.card-registration .date.orange {
  background-color: var(--day-overview-date-orange);
}
.card-registration .date.not-registered {
  background-color: var(--day-overview-date-red);
}
.card-registration .date.not-registered.weekend {
  background-color: var(--day-overview-date-weekend);
}
.card-registration .icon {
  width: 1.2rem;
  height: 1.2rem;
  margin-top: -2px;
  margin-bottom: -2px;
  display: inline-block;
  margin-right: 1rem;
  background-size: cover;
  background-repeat: no-repeat;
}
.card-registration .icon.icon-lg {
  width: 1.5rem;
  height: 1.5rem;
}
.card-registration .icon svg {
  fill: var(--blue-100);
  width: 1.5rem;
  height: 1.5rem;
}
.card-registration .icon.icon-clock {
  background-image: url(/assets/icons/icon-clock.svg);
}
.card-registration .icon.icon-break {
  background-image: url(/assets/icons/icon-break.svg);
}
.card-registration .icon.icon-pencil {
  background-image: url(/assets/icons/icon-pencil.svg);
}
.card-registration .icon.icon-register {
  background-image: url(/assets/icons/icon-register.svg);
}
.card-registration .icon.icon-warning {
  background-image: url(/assets/icons/icon-warning.svg);
}
.card-registration .registrations .registration-info {
  color: var(--day-overview-text-color);
  padding: 0 1rem;
  display: grid;
  align-items: center;
  align-content: center;
  grid-template-columns: auto min-content 3rem;
}
.card-registration .registrations .registration-info .icon {
  background-color: var(--day-overview-text-color);
}
.card-registration .registrations .registration-info:hover:not(.total) {
  cursor: pointer;
}
.card-registration .registrations .registration-info.total {
  align-items: center;
}
.card-registration .registrations .registration-info.total * {
  display: flex;
  margin-bottom: 0 !important;
  grid-row-start: 1 !important;
  grid-row-end: 2 !important;
}
.card-registration .registrations .registration-info:not(:only-of-type):not(:last-of-type)::after {
  margin-bottom: 2rem;
  content: " ";
  cursor: default;
  position: relative;
  grid-column-start: 1;
  grid-column-end: 4;
  bottom: calc(-1rem + 0.5px);
  height: 1px;
  background-color: var(--day-overview-border-color);
}
.card-registration .registrations .registration-info .start-end,
.card-registration .registrations .registration-info .not-registered {
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  font-size: 1rem;
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 2;
}
.card-registration .registrations .registration-info .break-time {
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  font-size: 1rem;
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 2;
  grid-row-end: 3;
}
.card-registration .registrations .registration-info .project {
  display: flex;
  align-items: center;
  font-size: 1rem;
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 3;
  grid-row-end: 4;
  overflow: hidden;
}
.card-registration .registrations .registration-info .project .project-title {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.card-registration .registrations .registration-info .overnight {
  display: flex;
  align-items: center;
  font-size: 1rem;
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 4;
  grid-row-end: 5;
  overflow: hidden;
  margin-top: 0.5rem;
}
.card-registration .registrations .registration-info .total-time {
  font-size: 1.5rem;
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 4;
  margin-left: 0.5rem;
  white-space: nowrap;
}
.card-registration .registrations .registration-info.not-registered {
  color: var(--red-100);
}
.card-registration .registrations .registration-info.not-registered svg {
  fill: var(--red-100);
}
.card-registration .registrations .registration-info.not-registered.weekend {
  color: var(--gray-170);
}
.card-registration .registrations .registration-info.green .total-time {
  color: var(--green-120);
}
.card-registration .registrations .registration-info.green svg {
  fill: var(--green-120);
}
.card-registration .registrations .registration-info.orange .total-time {
  color: var(--orange-100);
}
.card-registration .registrations .registration-info.orange svg {
  fill: var(--orange-100);
}
.card-registration .registrations .registration-info .action {
  margin-left: 2rem;
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 4;
}
.card-registration .action {
  justify-self: end;
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 4;
}
@media only screen and (max-width: 600px) {
  .card-registration {
    display: flex;
    flex-direction: column;
    align-items: initial;
  }
  .card-registration .date {
    border-radius: var(--border-radius) var(--border-radius) 0 0;
    width: calc(100% + 2rem);
    margin: -1rem -1rem 0 -1rem;
  }
  .card-registration .date .text {
    display: flex;
    gap: 0.4ch;
  }
  .card-registration .date .text .day-of-week {
    display: none;
    margin-right: 0.2ch;
    text-transform: capitalize;
  }
  .card-registration .date .text .day-of-week-full {
    margin-right: 0.2ch;
    display: unset;
  }
  .card-registration .date .text .month-full {
    display: unset;
  }
  .card-registration .date .text .month {
    display: none;
  }
  .card-registration .date .text .day {
    margin-right: 0.2ch;
  }
  .card-registration .date .text .day.today {
    padding: 0;
  }
  .card-registration .date .text * {
    font-size: 1rem !important;
  }
  .card-registration .registrations {
    margin-top: 1rem;
  }
  .card-registration .registrations .registration-info {
    padding: 0;
  }
  .registrations {
    margin-top: 1rem;
  }
  .registrations .registration-info {
    padding: 0;
  }
}
ion-icon {
  font-size: 64px;
}
:root {
  --dropdown-panel-background: var(--gray-150);
  --dropdown-option-background: var(--gray-150);
  --dropdown-option-background-hover: var(--gray-140);
  --dropdown-option-border-color: var(--gray-130);
  --dropdown-option-text-color-selected: var(--blue-100);
}
.dropdown {
  position: relative;
  -webkit-user-select: none;
  user-select: none;
}
.dropdown .form-control .dropdown-input {
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: none;
}
.dropdown .form-control .dropdown-input.open {
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}
.dropdown .form-control .dropdown-input.open .toggle {
  transform: rotate(180deg);
}
.dropdown .form-control .dropdown-input .value {
  flex-grow: 1;
  display: inline-block;
  overflow: hidden;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dropdown .form-control .dropdown-input .value .placeholder {
  color: var(--input-color-placeholder);
  overflow: hidden;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dropdown .form-control .dropdown-input .toggle {
  display: flex;
  align-items: center;
}
.dropdown .form-control .dropdown-input .toggle svg {
  fill: var(--input-color-border);
}
.dropdown .form-control .dropdown-input[disabled] {
  cursor: not-allowed;
}
.dropdown .form-control .dropdown-input[disabled] .toggle svg {
  fill: var(--input-color-border-disabled);
}
.dropdown .dropdown-panel {
  position: absolute;
  display: none;
  background-color: var(--dropdown-panel-background);
  z-index: 9999;
  width: 100%;
  height: 0;
  max-height: 250px;
  overflow: auto;
  padding: 8px 0;
  border-radius: var(--border-radius);
  border: var(--default-border);
  border-width: 0px;
  border-color: var(--input-color-border);
  font-family: var(--font-heading);
  font-weight: 400;
}
.dropdown .dropdown-panel .search-input {
  padding: 8px;
  padding-top: 0;
}
.dropdown .dropdown-panel .no-results {
  padding: 8px;
  padding-left: 16px;
  color: var(--input-color-placeholder);
}
.dropdown .dropdown-panel .dropdown-option {
  transition: all 0.3s ease-in-out;
  background-color: var(--dropdown-option-background);
  margin: 0px 4px;
  padding: 8px;
  cursor: pointer;
}
.dropdown .dropdown-panel .dropdown-option .title {
  overflow: hidden;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dropdown .dropdown-panel .dropdown-option .description {
  color: var(--input-color-placeholder);
  overflow: hidden;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
}
.dropdown .dropdown-panel .dropdown-option:not(:last-child) {
  border-bottom: 1px solid var(--dropdown-option-border-color);
}
.dropdown .dropdown-panel .dropdown-option:not(:last-child).selected::before {
  bottom: -1px;
}
.dropdown .dropdown-panel .dropdown-option:hover {
  background-color: var(--dropdown-option-background-hover);
}
.dropdown .dropdown-panel .dropdown-option.selected {
  color: var(--dropdown-option-text-color-selected);
  position: relative;
}
.dropdown .dropdown-panel .dropdown-option.selected::before {
  content: " ";
  width: 4px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: -4px;
  background-color: var(--dropdown-option-text-color-selected);
}
.dropdown .dropdown-panel.open {
  height: auto;
  overflow: auto;
  border-width: 2px;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  box-shadow: var(--shadow-md);
  display: unset;
  border-color: var(--input-color-border-active);
  border-top: none;
}
.dropdown .dropdown-panel.has-message {
  top: 59px;
}
.dropdown .dropdown-panel::-webkit-scrollbar-track {
  background: unset;
}
.dropdown .dropdown-panel::-webkit-scrollbar-thumb {
  border: 4px var(--white) solid;
}
:root {
  --input-color-label: var(--gray-140);
  --input-color-text: var(--gray-140);
  --input-color-placeholder: var(--gray-70);
  --input-color-placeholder-active: var(--gray-70);
  --input-color-placeholder-disabled: var(--gray-20);
  --input-color-background: var(--white);
  --input-color-background-disabled: var(--gray-10);
  --input-color-background-active: var(--blue-5);
  --input-color-background-error: var(--red-10);
  --input-color-background-success: var(--white);
  --input-color-border: var(--gray-100);
  --input-color-border-disabled: var(--gray-40);
  --input-color-border-active: var(--blue-100);
  --input-color-border-error: var(--red-110);
  --input-color-border-success: var(--green-110);
}
:root body.dark {
  --input-color-label: var(--gray-20);
  --input-color-text: var(--gray-20);
  --input-color-placeholder: var(--gray-70);
  --input-color-placeholder-active: var(--gray-70);
  --input-color-placeholder-disabled: var(--gray-20);
  --input-color-background: var(--gray-150);
  --input-color-background-disabled: var(--gray-10);
  --input-color-background-active: var(--gray-140);
  --input-color-background-error: var(--red-10);
  --input-color-background-success: var(--white);
  --input-color-border: var(--gray-70);
  --input-color-border-disabled: var(--gray-70);
  --input-color-border-active: var(--blue-100);
  --input-color-border-error: var(--red-100);
  --input-color-border-success: var(--green-110);
}
.form-control {
  display: flex;
  flex-direction: column-reverse;
  width: 100%;
}
.form-control label {
  margin: 0;
  padding-left: var(--border-radius);
  font-family: var(--font-heading);
  color: var(--input-color-label);
  font-weight: 400;
  line-height: 1rem;
  transition: all 0.15s ease-in-out;
  margin-bottom: 4px;
  overflow: hidden;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
}
.form-control .message-left {
  margin: 0;
  padding-left: var(--border-radius);
  font-family: var(--font-heading);
  color: var(--input-color-border);
  font-weight: 400;
  font-size: 14px;
  line-height: 1rem;
  transition: all 0.15s ease-in-out;
  margin-top: 4px;
}
.form-control .message-left.success {
  color: var(--input-color-border-success);
}
.form-control .message-left.error {
  color: var(--input-color-border-error);
}
.form-control input[type=text],
.form-control input[type=number],
.form-control input[type=email],
.form-control input[type=password],
.form-control textarea,
.form-control dp-time-select,
.form-control dp-date-picker > .ltr > .dp-input-container > input,
.form-control .dropdown-input {
  border-radius: var(--border-radius);
  border: var(--default-border);
  border-color: var(--input-color-border);
  color: var(--input-color-text);
  box-sizing: border-box;
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1rem;
  padding: 5px var(--border-radius);
  width: 100%;
  background-color: transparent;
  transition: border 0.15s ease-in-out;
  transition: color 0.15s ease-in-out;
}
.form-control input[type=text]::placeholder,
.form-control input[type=number]::placeholder,
.form-control input[type=email]::placeholder,
.form-control input[type=password]::placeholder,
.form-control textarea::placeholder,
.form-control dp-time-select::placeholder,
.form-control dp-date-picker > .ltr > .dp-input-container > input::placeholder,
.form-control .dropdown-input::placeholder {
  transition: all 0.15s ease-in-out;
}
.form-control input[type=text]:active:not([disabled]),
.form-control input[type=text]:focus:not([disabled]),
.form-control input[type=text].open:not([disabled]),
.form-control input[type=number]:active:not([disabled]),
.form-control input[type=number]:focus:not([disabled]),
.form-control input[type=number].open:not([disabled]),
.form-control input[type=email]:active:not([disabled]),
.form-control input[type=email]:focus:not([disabled]),
.form-control input[type=email].open:not([disabled]),
.form-control input[type=password]:active:not([disabled]),
.form-control input[type=password]:focus:not([disabled]),
.form-control input[type=password].open:not([disabled]),
.form-control textarea:active:not([disabled]),
.form-control textarea:focus:not([disabled]),
.form-control textarea.open:not([disabled]),
.form-control dp-time-select:active:not([disabled]),
.form-control dp-time-select:focus:not([disabled]),
.form-control dp-time-select.open:not([disabled]),
.form-control dp-date-picker > .ltr > .dp-input-container > input:active:not([disabled]),
.form-control dp-date-picker > .ltr > .dp-input-container > input:focus:not([disabled]),
.form-control dp-date-picker > .ltr > .dp-input-container > input.open:not([disabled]),
.form-control .dropdown-input:active:not([disabled]),
.form-control .dropdown-input:focus:not([disabled]),
.form-control .dropdown-input.open:not([disabled]) {
  background-color: var(--input-color-background-active);
  border-color: var(--input-color-border-active);
  outline: none;
}
.form-control input[type=text]:active:not([disabled])::placeholder,
.form-control input[type=text]:focus:not([disabled])::placeholder,
.form-control input[type=text].open:not([disabled])::placeholder,
.form-control input[type=number]:active:not([disabled])::placeholder,
.form-control input[type=number]:focus:not([disabled])::placeholder,
.form-control input[type=number].open:not([disabled])::placeholder,
.form-control input[type=email]:active:not([disabled])::placeholder,
.form-control input[type=email]:focus:not([disabled])::placeholder,
.form-control input[type=email].open:not([disabled])::placeholder,
.form-control input[type=password]:active:not([disabled])::placeholder,
.form-control input[type=password]:focus:not([disabled])::placeholder,
.form-control input[type=password].open:not([disabled])::placeholder,
.form-control textarea:active:not([disabled])::placeholder,
.form-control textarea:focus:not([disabled])::placeholder,
.form-control textarea.open:not([disabled])::placeholder,
.form-control dp-time-select:active:not([disabled])::placeholder,
.form-control dp-time-select:focus:not([disabled])::placeholder,
.form-control dp-time-select.open:not([disabled])::placeholder,
.form-control dp-date-picker > .ltr > .dp-input-container > input:active:not([disabled])::placeholder,
.form-control dp-date-picker > .ltr > .dp-input-container > input:focus:not([disabled])::placeholder,
.form-control dp-date-picker > .ltr > .dp-input-container > input.open:not([disabled])::placeholder,
.form-control .dropdown-input:active:not([disabled])::placeholder,
.form-control .dropdown-input:focus:not([disabled])::placeholder,
.form-control .dropdown-input.open:not([disabled])::placeholder {
  color: var(--input-color-placeholder-active);
}
.form-control input[type=text]:active:not([disabled]) + label,
.form-control input[type=text]:focus:not([disabled]) + label,
.form-control input[type=text].open:not([disabled]) + label,
.form-control input[type=number]:active:not([disabled]) + label,
.form-control input[type=number]:focus:not([disabled]) + label,
.form-control input[type=number].open:not([disabled]) + label,
.form-control input[type=email]:active:not([disabled]) + label,
.form-control input[type=email]:focus:not([disabled]) + label,
.form-control input[type=email].open:not([disabled]) + label,
.form-control input[type=password]:active:not([disabled]) + label,
.form-control input[type=password]:focus:not([disabled]) + label,
.form-control input[type=password].open:not([disabled]) + label,
.form-control textarea:active:not([disabled]) + label,
.form-control textarea:focus:not([disabled]) + label,
.form-control textarea.open:not([disabled]) + label,
.form-control dp-time-select:active:not([disabled]) + label,
.form-control dp-time-select:focus:not([disabled]) + label,
.form-control dp-time-select.open:not([disabled]) + label,
.form-control dp-date-picker > .ltr > .dp-input-container > input:active:not([disabled]) + label,
.form-control dp-date-picker > .ltr > .dp-input-container > input:focus:not([disabled]) + label,
.form-control dp-date-picker > .ltr > .dp-input-container > input.open:not([disabled]) + label,
.form-control .dropdown-input:active:not([disabled]) + label,
.form-control .dropdown-input:focus:not([disabled]) + label,
.form-control .dropdown-input.open:not([disabled]) + label {
  color: var(--input-color-border-active);
}
.form-control input[type=text][disabled],
.form-control input[type=number][disabled],
.form-control input[type=email][disabled],
.form-control input[type=password][disabled],
.form-control textarea[disabled],
.form-control dp-time-select[disabled],
.form-control dp-date-picker > .ltr > .dp-input-container > input[disabled],
.form-control .dropdown-input[disabled] {
  cursor: not-allowed;
  border-color: var(--input-color-border-disabled);
  border-style: dashed;
}
.form-control input[type=text][disabled]::placeholder,
.form-control input[type=number][disabled]::placeholder,
.form-control input[type=email][disabled]::placeholder,
.form-control input[type=password][disabled]::placeholder,
.form-control textarea[disabled]::placeholder,
.form-control dp-time-select[disabled]::placeholder,
.form-control dp-date-picker > .ltr > .dp-input-container > input[disabled]::placeholder,
.form-control .dropdown-input[disabled]::placeholder {
  color: var(--input-color-placeholder-disabled);
}
.form-control input[type=text][disabled] + label,
.form-control input[type=number][disabled] + label,
.form-control input[type=email][disabled] + label,
.form-control input[type=password][disabled] + label,
.form-control textarea[disabled] + label,
.form-control dp-time-select[disabled] + label,
.form-control dp-date-picker > .ltr > .dp-input-container > input[disabled] + label,
.form-control .dropdown-input[disabled] + label {
  color: var(--input-color-border-disabled);
}
.form-control input[type=text][required] + label,
.form-control input[type=number][required] + label,
.form-control input[type=email][required] + label,
.form-control input[type=password][required] + label,
.form-control textarea[required] + label,
.form-control dp-time-select[required] + label,
.form-control dp-date-picker > .ltr > .dp-input-container > input[required] + label,
.form-control .dropdown-input[required] + label {
  display: block;
}
.form-control input[type=text][required] + label::after,
.form-control input[type=number][required] + label::after,
.form-control input[type=email][required] + label::after,
.form-control input[type=password][required] + label::after,
.form-control textarea[required] + label::after,
.form-control dp-time-select[required] + label::after,
.form-control dp-date-picker > .ltr > .dp-input-container > input[required] + label::after,
.form-control .dropdown-input[required] + label::after {
  margin-left: 4px;
  content: "*";
  color: var(--input-color-border-error);
}
.form-control input[type=text].success,
.form-control input[type=number].success,
.form-control input[type=email].success,
.form-control input[type=password].success,
.form-control textarea.success,
.form-control dp-time-select.success,
.form-control dp-date-picker > .ltr > .dp-input-container > input.success,
.form-control .dropdown-input.success {
  border-color: var(--input-color-border-success);
}
.form-control input[type=text].success + label,
.form-control input[type=number].success + label,
.form-control input[type=email].success + label,
.form-control input[type=password].success + label,
.form-control textarea.success + label,
.form-control dp-time-select.success + label,
.form-control dp-date-picker > .ltr > .dp-input-container > input.success + label,
.form-control .dropdown-input.success + label {
  color: var(--input-color-border-success);
}
.form-control input[type=text].error,
.form-control input[type=number].error,
.form-control input[type=email].error,
.form-control input[type=password].error,
.form-control textarea.error,
.form-control dp-time-select.error,
.form-control dp-date-picker > .ltr > .dp-input-container > input.error,
.form-control .dropdown-input.error {
  border-color: var(--input-color-border-error);
}
.form-control input[type=text].error + label,
.form-control input[type=number].error + label,
.form-control input[type=email].error + label,
.form-control input[type=password].error + label,
.form-control textarea.error + label,
.form-control dp-time-select.error + label,
.form-control dp-date-picker > .ltr > .dp-input-container > input.error + label,
.form-control .dropdown-input.error + label {
  color: var(--input-color-border-error);
}
.form-control textarea {
  padding: 8px var(--border-radius);
  resize: none;
  min-height: 8rem;
}
:root {
  --illustration-text-color: var(--gray-180);
  --illustration-description-color: var(--gray-140);
  --illustration-color-skin-01: #ffb8b8;
  --illustration-color-skin-02: #9e616a;
  --illustration-color-skin-03: #9e616a;
  --illustration-color-hair-01: var(--gray-180);
  --illustration-color-hair-02: var(--gray-150);
  --illustration-color-shoes: var(--gray-180);
  --illustration-color-pants: var(--gray-180);
  --illustration-color-shirt-01: var(--blue-100);
  --illustration-color-shirt-02: var(--gray-140);
  --illustration-color-shirt-03: var(--gray-30);
  --illustration-color-ground: var(--gray-30);
  --illustration-color-focus: var(--blue-100);
  --illustration-color-muted-01: var(--gray-50);
  --illustration-color-muted-02: var(--gray-40);
  --illustration-color-muted-03: var(--gray-30);
  --illustration-color-muted-04: var(--gray-20);
  --illustration-color-muted-05: var(--gray-10);
  --illustration-color-muted-06: var(--white);
  --illustration-color-elementary-01: var(--gray-140);
  --illustration-color-elementary-02: var(--gray-170);
  --illustration-color-elementary-03: var(--gray-180);
}
:root body.dark {
  --illustration-text-color: var(--gray-20);
  --illustration-description-color: var(--gray-60);
  --illustration-color-hair-01: var(--gray-190);
  --illustration-color-hair-02: var(--gray-170);
  --illustration-color-shoes: var(--gray-190);
  --illustration-color-pants: var(--gray-190);
  --illustration-color-shirt-01: var(--blue-100);
  --illustration-color-shirt-02: var(--gray-140);
  --illustration-color-shirt-03: var(--gray-120);
  --illustration-color-ground: var(--gray-130);
  --illustration-color-focus: var(--blue-100);
  --illustration-color-muted-01: var(--gray-110);
  --illustration-color-muted-02: var(--gray-120);
  --illustration-color-muted-03: var(--gray-130);
  --illustration-color-muted-04: var(--gray-140);
  --illustration-color-muted-05: var(--gray-160);
  --illustration-color-muted-06: var(--white);
  --illustration-color-elementary-01: var(--gray-140);
  --illustration-color-elementary-02: var(--gray-170);
  --illustration-color-elementary-03: var(--gray-190);
}
.illustration {
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 32px;
}
.illustration svg {
  width: 460px;
  max-width: 100%;
  height: 350px;
}
.illustration svg [id^=skin-01] {
  fill: var(--illustration-color-skin-01);
}
.illustration svg [id^=skin-02] {
  fill: var(--illustration-color-skin-02);
}
.illustration svg [id^=skin-03] {
  fill: var(--illustration-color-skin-03);
}
.illustration svg [id^=hair-01] {
  fill: var(--illustration-color-hair-01);
}
.illustration svg [id^=hair-02] {
  fill: var(--illustration-color-hair-02);
}
.illustration svg [id^=shoes] {
  fill: var(--illustration-color-shoes);
}
.illustration svg [id^=pants] {
  fill: var(--illustration-color-pants);
}
.illustration svg [id^=shirt-01] {
  fill: var(--illustration-color-shirt-01);
}
.illustration svg [id^=shirt-02] {
  fill: var(--illustration-color-shirt-02);
}
.illustration svg [id^=shirt-03] {
  fill: var(--illustration-color-shirt-03);
}
.illustration svg [id^=ground] {
  fill: var(--illustration-color-ground);
}
.illustration svg [id^=focus] {
  fill: var(--illustration-color-focus);
}
.illustration svg [id^=muted-01] {
  fill: var(--illustration-color-muted-01);
}
.illustration svg [id^=muted-02] {
  fill: var(--illustration-color-muted-02);
}
.illustration svg [id^=muted-03] {
  fill: var(--illustration-color-muted-03);
}
.illustration svg [id^=muted-04] {
  fill: var(--illustration-color-muted-04);
}
.illustration svg [id^=muted-05] {
  fill: var(--illustration-color-muted-05);
}
.illustration svg [id^=muted-06] {
  fill: var(--illustration-color-muted-06);
}
.illustration svg [id^=elementary-01] {
  fill: var(--illustration-color-elementary-01);
}
.illustration svg [id^=elementary-02] {
  fill: var(--illustration-color-elementary-02);
}
.illustration svg [id^=elementary-03] {
  fill: var(--illustration-color-elementary-03);
}
.illustration img {
  width: 460px;
  max-width: 100%;
  height: 350px;
}
.illustration .title {
  text-align: center;
  margin-top: 16px;
  font-family: var(--font-heading);
  font-size: var(--font-size-h3);
  margin-top: 16px;
  color: var(--illustration-text-color);
}
.illustration .description {
  color: var(--illustration-description-color);
}
@media only screen and (max-width: 500px) {
  .illustration {
    margin-top: 64px;
  }
  .illustration .title {
    font-size: var(--font-size-h4);
  }
}
:root {
  --list-background-color: var(--gray-5);
  --list-background-color-hover: var(--gray-10);
  --list-border-color: var(--gray-20);
  --list-note-text-color: var(---gray-70);
}
:root body.dark {
  --list-background-color: var(--gray-180);
  --list-background-color-hover: var(--gray-160);
  --list-border-color: var(--gray-150);
  --list-note-text-color: var(--gray-50);
}
.list {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.list .list-item {
  transition: all 0.3s ease-in-out;
  background-color: var(--list-background-color);
  margin: 0px 4px;
  padding: 16px 8px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  border-bottom: 1px solid var(--list-border-color);
}
.list .list-item .title {
  overflow: hidden;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-grow: 1;
  flex-shrink: 0;
}
.list .list-item .note {
  margin-left: 8px;
  overflow: hidden;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-grow: 0;
  color: var(--list-note-text-color);
  font-size: 14px;
}
.list .list-item:hover {
  background-color: var(--list-background-color-hover);
}
.list .list-item:hover::before {
  width: 4px;
}
.list .list-item::before {
  content: " ";
  width: 0px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: -4px;
  background-color: var(--blue-100);
  transition: all 0.1s ease-in-out;
}
:root {
  --loading-spinner-color: var(--gray-60);
  --loading-spinner-text-01: var(--gray-60);
  --loading-spinner-text-02: var(--gray-100);
}
:root body.dark {
  --loading-spinner-color: var(--gray-80);
  --loading-spinner-text-01: var(--gray-80);
  --loading-spinner-text-02: var(--gray-120);
}
.loading-spinner-container {
  display: flex;
  justify-content: center;
}
.loading-spinner-container * {
  -webkit-user-select: none;
  user-select: none;
}
.loading-spinner-container .loading-spinner-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.loading-spinner-container .loading-spinner-content svg.loading-spinner {
  animation: 2s linear infinite svg-animation;
  max-width: 100px;
  height: 3rem;
}
.loading-spinner-container .loading-spinner-content svg.loading-spinner.small {
  height: 1rem;
}
.loading-spinner-container .loading-spinner-content svg.loading-spinner.large {
  height: 5rem;
}
.loading-spinner-container .loading-spinner-content svg.loading-spinner circle {
  animation: 1.4s ease-in-out infinite both circle-animation;
  display: block;
  fill: transparent;
  stroke: var(--loading-spinner-color);
  stroke-linecap: round;
  stroke-dasharray: 283;
  stroke-dashoffset: 280;
  stroke-width: 10px;
  transform-origin: 50% 50%;
}
.loading-spinner-container .loading-spinner-content .text {
  margin-top: 8px;
  background:
    linear-gradient(
      90deg,
      var(--loading-spinner-text-01),
      var(--loading-spinner-text-02),
      var(--loading-spinner-text-01)) 0 0/400% 100%;
  color: transparent;
  background-clip: text;
  animation: text-animation 4s linear infinite;
  font-family: var(--font-heading);
}
@keyframes svg-animation {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(360deg);
  }
}
@keyframes circle-animation {
  0%, 25% {
    stroke-dashoffset: 280;
    transform: rotate(0);
  }
  50%, 75% {
    stroke-dashoffset: 75;
    transform: rotate(45deg);
  }
  100% {
    stroke-dashoffset: 280;
    transform: rotate(360deg);
  }
}
@keyframes text-animation {
  to {
    background-position: 400% 0;
  }
}
.tabs {
  display: flex;
  border-bottom: 2px solid var(--gray-15);
  gap: 16px;
}
.tabs .tab {
  position: relative;
  padding: 0 8px;
  padding-bottom: 4px;
  color: var(--gray-70);
  cursor: pointer;
  font-family: var(--font-heading);
  transition: all 0.2s ease-in-out;
  -webkit-user-select: none;
  user-select: none;
}
.tabs .tab::after {
  content: " ";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background-color: var(--gray-15);
  transition: all 0.2s ease-in-out;
}
.tabs .tab:hover,
.tabs .tab:focus {
  color: var(--blue-70);
}
.tabs .tab:hover::after,
.tabs .tab:focus::after {
  background-color: var(--blue-20);
}
.tabs .tab.selected {
  color: var(--blue-100);
}
.tabs .tab.selected::after {
  background-color: var(--blue-100);
}
:root {
  --period-selector-background: var(--gray-15);
  --period-selector-text-color: var(--gray-160);
  --period-selector-button-color: var(--blue-100);
  --period-selector-button-color-disabled: var(--gray-70);
}
:root body.dark {
  --period-selector-background: var(--gray-170);
  --period-selector-text-color: var(--gray-20);
  --period-selector-button-color: var(--blue-100);
  --period-selector-button-color-disabled: var(--gray-70);
}
.period-selector {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px;
  margin-bottom: 16px;
  background-color: var(--period-selector-background);
  border-radius: var(--border-radius);
}
.period-selector .previous,
.period-selector .next {
  cursor: pointer;
  padding: 8px;
  display: flex;
  align-items: center;
}
.period-selector .previous .icon,
.period-selector .next .icon {
  background-color: var(--period-selector-button-color);
}
.period-selector .previous.disabled,
.period-selector .next.disabled {
  cursor: not-allowed;
}
.period-selector .previous.disabled .icon,
.period-selector .next.disabled .icon {
  background-color: var(--period-selector-button-color-disabled);
}
.period-selector .display-string {
  font-family: var(--font-heading);
  color: var(--period-selector-text-color);
}
:root {
  --tabs-border-color: var(--gray-15);
  --tabs-border-color-hover: var(--blue-20);
  --tabs-border-color-selected: var(--blue-100);
  --tabs-tab-text-color: var(--gray-70);
  --tabs-tab-text-color-hover: var(--blue-70);
  --tabs-tab-text-color-selected: var(--blue-100);
}
:root body.dark {
  --tabs-border-color: var(--gray-40);
  --tabs-border-color-hover: var(--gray-30);
  --tabs-border-color-selected: var(--blue-100);
  --tabs-tab-text-color: var(--gray-40);
  --tabs-tab-text-color-hover: var(--gray-10);
  --tabs-tab-text-color-selected: var(--blue-100);
}
.tabs {
  display: flex;
  border-bottom: 2px solid var(--tabs-border-color);
  gap: 16px;
}
.tabs .tab {
  position: relative;
  padding: 0 8px;
  padding-bottom: 4px;
  color: var(--tabs-tab-text-color);
  cursor: pointer;
  font-family: var(--font-heading);
  transition: all 0.2s ease-in-out;
  -webkit-user-select: none;
  user-select: none;
}
.tabs .tab::after {
  content: " ";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background-color: var(--tabs-border-color);
  transition: all 0.2s ease-in-out;
}
.tabs .tab:hover,
.tabs .tab:focus {
  color: var(--tabs-tab-text-color-hover);
}
.tabs .tab:hover::after,
.tabs .tab:focus::after {
  background-color: var(--tabs-border-color-hover);
}
.tabs .tab.selected {
  color: var(--tabs-tab-text-color-selected);
}
.tabs .tab.selected::after {
  background-color: var(--tabs-border-color-selected);
}
:root {
  --pill-background-color: var(--gray-15);
  --pill-border-color: var(--blue-20);
  --pill-text-color: var(--blue-100);
}
:root .pill.blue {
  --pill-background-color: var(--blue-170);
  --pill-border-color: var(--blue-120);
  --pill-text-color: var(--blue-30);
}
:root .pill.orange {
  --pill-background-color: var(--orange-170);
  --pill-border-color: var(--orange-120);
  --pill-text-color: var(--orange-30);
}
:root .pill.green {
  --pill-background-color: var(--green-180);
  --pill-border-color: var(--green-140);
  --pill-text-color: var(--green-30);
}
:root .pill.red {
  --pill-background-color: var(--red-170);
  --pill-border-color: var(--red-120);
  --pill-text-color: var(--red-20);
}
:root body.dark {
  --pill-background-color: var(--gray-160);
  --pill-border-color: var(--gray-120);
  --pill-text-color: var(--gray-30);
}
:root body.dark .pill.blue {
  --pill-background-color: var(--blue-170);
  --pill-border-color: var(--blue-120);
  --pill-text-color: var(--blue-30);
}
:root body.dark .pill.orange {
  --pill-background-color: var(--orange-170);
  --pill-border-color: var(--orange-120);
  --pill-text-color: var(--orange-30);
}
:root body.dark .pill.green {
  --pill-background-color: var(--green-180);
  --pill-border-color: var(--green-140);
  --pill-text-color: var(--green-30);
}
:root body.dark .pill.red {
  --pill-background-color: var(--red-170);
  --pill-border-color: var(--red-120);
  --pill-text-color: var(--red-20);
}
:root .pill.blue {
  --pill-background-color: var(--blue-15);
  --pill-border-color: var(--blue-20);
  --pill-text-color: var(--blue-100);
}
.pills {
  display: flex;
  gap: 4px;
}
.pill {
  display: flex;
  background-color: var(--pill-background-color);
  border-radius: 8px;
  border: 2px solid var(--pill-border-color);
  color: var(--pill-text-color);
  font-size: 14px;
  line-height: 14px;
  padding: 4px 8px;
  align-items: center;
  font-family: var(--font-heading);
  -webkit-user-select: none;
  user-select: none;
}
.pill .icon {
  width: 12px;
  height: 12px;
  margin-right: 6px;
  background-color: var(--pill-text-color);
}
:root {
  --skeleton-color: var(--gray-20);
}
:root body.dark {
  --skeleton-color: var(--gray-160);
}
.skeleton {
  position: relative;
  min-height: 1rem;
  height: 100%;
}
.skeleton::after {
  content: " ";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background:
    linear-gradient(
      90deg,
      var(--skeleton-color),
      rgba(255, 255, 255, 0),
      var(--skeleton-color));
  animation: leftToRight 1.5s linear infinite;
  background-size: 200%;
  border-radius: 8px;
}
@keyframes leftToRight {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}
.time-picker .form-control.inline {
  align-items: flex-start;
}
.time-picker .form-control dp-date-picker::placeholder {
  transition: all 0.15s ease-in-out;
}
.time-picker .form-control dp-date-picker:active:not([disabled]),
.time-picker .form-control dp-date-picker:focus:not([disabled]),
.time-picker .form-control dp-date-picker.open:not([disabled]) {
  background-color: var(--input-color-background-active);
  border-color: var(--input-color-border-active);
  outline: none;
}
.time-picker .form-control dp-date-picker:active:not([disabled])::placeholder,
.time-picker .form-control dp-date-picker:focus:not([disabled])::placeholder,
.time-picker .form-control dp-date-picker.open:not([disabled])::placeholder {
  color: var(--input-color-placeholder-active);
}
.time-picker .form-control dp-date-picker:active:not([disabled]) + label,
.time-picker .form-control dp-date-picker:focus:not([disabled]) + label,
.time-picker .form-control dp-date-picker.open:not([disabled]) + label {
  color: var(--input-color-border-active);
}
.time-picker .form-control dp-date-picker[disabled] input {
  border-color: var(--input-color-border-disabled);
  border-style: dashed;
  cursor: not-allowed;
}
.time-picker .form-control dp-date-picker[disabled] input::placeholder {
  color: var(--input-color-placeholder-disabled);
}
.time-picker .form-control dp-date-picker[disabled] + label {
  color: var(--input-color-border-disabled);
}
.time-picker .form-control dp-date-picker[required] + label {
  display: block;
}
.time-picker .form-control dp-date-picker[required] + label::after {
  margin-left: 4px;
  content: "*";
  color: var(--input-color-border-error);
}
.time-picker .form-control dp-date-picker.success input {
  border-color: var(--input-color-border-success);
}
.time-picker .form-control dp-date-picker.success + label {
  color: var(--input-color-border-success);
}
.time-picker .form-control dp-date-picker.error input {
  border-color: var(--input-color-border-error);
}
.time-picker .form-control dp-date-picker.error + label {
  color: var(--input-color-border-error);
}
dp-time-select {
  border: none !important;
  width: unset !important;
  touch-action: manipulation;
}
dp-time-select * {
  touch-action: manipulation;
}
dp-time-select .dp-time-select-controls {
  background-color: transparent !important;
  min-width: 75px;
}
dp-time-select .dp-time-select-controls .dp-time-select-control button {
  padding: unset !important;
  font-size: unset;
}
dp-time-select .dp-time-select-controls .dp-time-select-control button.dp-time-select-control-up::before {
  top: 2px;
}
dp-time-select .dp-time-select-controls .dp-time-select-control button.dp-time-select-control-down::before {
  top: -1px;
}
dp-time-select.success .dp-time-select-display-hours,
dp-time-select.success .dp-time-select-separator,
dp-time-select.success .dp-time-select-display-minutes {
  color: var(--input-color-border-success);
}
dp-time-select.error .dp-time-select-display-hours,
dp-time-select.error .dp-time-select-separator,
dp-time-select.error .dp-time-select-display-minutes {
  color: var(--input-color-border-error);
}
dp-time-select[disabled] {
  cursor: not-allowed;
}
dp-time-select[disabled] > * {
  pointer-events: none;
}
dp-time-select[disabled] .dp-time-select-controls .dp-time-select-control button {
  background-color: var(--input-color-border-disabled);
}
:root {
  --tooltip-background-color: var(--gray-80);
  --tooltip-text-color: var(--gray-150);
}
:root body.dark {
  --tooltip-background-color: var(--gray-190);
  --tooltip-text-color: var(--gray-15);
}
.tooltip {
  position: fixed;
  z-index: 99999;
  background-color: var(--tooltip-background-color);
  color: var(--tooltip-text-color);
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 13px;
  white-space: nowrap;
  box-shadow: var(--shadow-md);
}
.tooltip::before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
}
.tooltip.right::before {
  border-right: 5px solid var(--tooltip-background-color);
  border-bottom: 5px solid transparent;
  border-top: 5px solid transparent;
  left: -5px;
  bottom: calc(50% - 5px);
}
.tooltip.left::before {
  border-left: 5px solid var(--tooltip-background-color);
  border-bottom: 5px solid transparent;
  border-top: 5px solid transparent;
  right: -5px;
  bottom: calc(50% - 5px);
}
.tooltip.top::before {
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid var(--tooltip-background-color);
  left: calc(50% - 5px);
  bottom: -5px;
}
.tooltip.bottom::before {
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid var(--tooltip-background-color);
  left: calc(50% - 5px);
  top: -5px;
}
:root {
  --blue-200: hsl(205, 75%, 6%);
  --blue-190: hsl(203, 76%, 10%);
  --blue-180: hsl(203, 77%, 14%);
  --blue-170: hsl(204, 76%, 22%);
  --blue-160: hsl(204, 77%, 25%);
  --blue-150: hsl(204, 76%, 29%);
  --blue-140: hsl(204, 76%, 37%);
  --blue-130: hsl(204, 76%, 41%);
  --blue-120: hsl(204, 76%, 45%);
  --blue-110: hsl(204, 76%, 49%);
  --blue-100: hsl(204, 76%, 52%);
  --blue-90: hsl(204, 76%, 56%);
  --blue-80: hsl(204, 76%, 60%);
  --blue-70: hsl(204, 76%, 64%);
  --blue-60: hsl(204, 76%, 68%);
  --blue-50: hsl(204, 77%, 72%);
  --blue-40: hsl(204, 76%, 75%);
  --blue-30: hsl(204, 75%, 79%);
  --blue-20: hsl(204, 76%, 87%);
  --blue-15: hsl(204, 74%, 91%);
  --blue-10: hsl(206, 78%, 95%);
  --blue-5: hsl(200, 75%, 98%);
  --gray-200: hsl(240, 23%, 3%);
  --gray-190: hsl(240, 17%, 10%);
  --gray-180: hsl(240, 17%, 14%);
  --gray-170: hsl(244, 17%, 18%);
  --gray-160: hsl(243, 17%, 22%);
  --gray-150: hsl(243, 17%, 25%);
  --gray-140: hsl(244, 17%, 33%);
  --gray-130: hsl(242, 17%, 37%);
  --gray-120: hsl(243, 17%, 45%);
  --gray-110: hsl(243, 17%, 49%);
  --gray-100: hsl(243, 17%, 53%);
  --gray-90: hsl(243, 17%, 56%);
  --gray-80: hsl(243, 17%, 60%);
  --gray-70: hsl(242, 17%, 64%);
  --gray-60: hsl(244, 17%, 68%);
  --gray-50: hsl(243, 17%, 72%);
  --gray-40: hsl(243, 17%, 75%);
  --gray-30: hsl(244, 18%, 83%);
  --gray-20: hsl(240, 17%, 87%);
  --gray-15: hsl(248, 17%, 91%);
  --gray-10: hsl(240, 15%, 95%);
  --gray-5: hsl(240, 20%, 97%);
  --green-200: hsl(145, 63%, 6%);
  --green-190: hsl(145, 63%, 10%);
  --green-180: hsl(145, 63%, 14%);
  --green-170: hsl(145, 63%, 22%);
  --green-160: hsl(145, 63%, 25%);
  --green-150: hsl(145, 63%, 29%);
  --green-140: hsl(145, 63%, 37%);
  --green-130: hsl(145, 63%, 41%);
  --green-120: hsl(145, 63%, 45%);
  --green-110: hsl(145, 63%, 49%);
  --green-100: hsl(145, 63%, 52%);
  --green-90: hsl(145, 63%, 56%);
  --green-80: hsl(145, 63%, 60%);
  --green-70: hsl(145, 63%, 64%);
  --green-60: hsl(145, 63%, 68%);
  --green-50: hsl(145, 63%, 72%);
  --green-40: hsl(145, 63%, 75%);
  --green-30: hsl(145, 63%, 79%);
  --green-20: hsl(145, 63%, 87%);
  --green-15: hsl(145, 63%, 91%);
  --green-10: hsl(145, 63%, 95%);
  --green-5: hsl(145, 63%, 98%);
  --orange-200: hsl(35, 72%, 6%);
  --orange-190: hsl(35, 72%, 10%);
  --orange-180: hsl(35, 72%, 14%);
  --orange-170: hsl(35, 72%, 22%);
  --orange-160: hsl(35, 72%, 25%);
  --orange-150: hsl(35, 72%, 29%);
  --orange-140: hsl(35, 72%, 37%);
  --orange-130: hsl(35, 72%, 41%);
  --orange-120: hsl(35, 72%, 45%);
  --orange-110: hsl(35, 72%, 49%);
  --orange-100: hsl(35, 72%, 48%);
  --orange-90: hsl(35, 72%, 56%);
  --orange-80: hsl(35, 72%, 60%);
  --orange-70: hsl(35, 72%, 64%);
  --orange-60: hsl(35, 72%, 68%);
  --orange-50: hsl(35, 72%, 72%);
  --orange-40: hsl(35, 72%, 75%);
  --orange-30: hsl(35, 72%, 79%);
  --orange-20: hsl(35, 72%, 87%);
  --orange-15: hsl(35, 72%, 91%);
  --orange-10: hsl(35, 72%, 95%);
  --orange-5: hsl(35, 72%, 98%);
  --red-200: hsl(0, 63%, 6%);
  --red-190: hsl(0, 63%, 10%);
  --red-180: hsl(0, 63%, 14%);
  --red-170: hsl(0, 63%, 22%);
  --red-160: hsl(0, 63%, 25%);
  --red-150: hsl(0, 63%, 29%);
  --red-140: hsl(0, 63%, 37%);
  --red-130: hsl(0, 63%, 41%);
  --red-120: hsl(0, 63%, 45%);
  --red-110: hsl(0, 63%, 49%);
  --red-100: hsl(0, 63%, 52%);
  --red-90: hsl(0, 63%, 56%);
  --red-80: hsl(0, 63%, 60%);
  --red-70: hsl(0, 63%, 64%);
  --red-60: hsl(0, 63%, 68%);
  --red-50: hsl(0, 63%, 72%);
  --red-40: hsl(0, 63%, 75%);
  --red-30: hsl(0, 63%, 79%);
  --red-20: hsl(0, 63%, 87%);
  --red-15: hsl(0, 63%, 91%);
  --red-10: hsl(0, 63%, 95%);
  --red-5: hsl(0, 63%, 98%);
  --white: #ffffff;
  --color-background: var(--gray-5);
  --shadow-lg: 6px 6px 8px rgba(0, 0, 0, 0.06);
  --shadow-md: 2px 2px 8px rgba(0, 0, 0, 0.1);
  --border-radius: 12px;
  --default-border: 2px solid var(--gray-100);
  --default-border-primary: 2px solid var(--blue-100);
  --default-border-error: 2px solid var(--red-100);
  --default-border-success: 2px solid var(--green-100);
}
:root body.dark {
  --color-background: var(--gray-180);
  --shadow-lg: 6px 6px 8px rgba(0, 0, 0, 0.06);
  --shadow-md: 2px 2px 8px rgba(0, 0, 0, 0.1);
  --border-radius: 12px;
  --default-border: 2px solid var(--gray-100);
  --default-border-primary: 2px solid var(--blue-100);
  --default-border-error: 2px solid var(--red-100);
  --default-border-success: 2px solid var(--green-100);
}
.text-blue {
  color: var(--blue-100) !important;
}
.text-light {
  color: var(--gray-5) !important;
}
.text-error {
  color: var(--red-100) !important;
}
.text-color {
  color: var(--gray-160) !important;
}
:root {
  --font-size-h1: 48px;
  --font-size-h2: 39px;
  --font-size-h3: 31px;
  --font-size-h4: 25px;
  --font-size-h5: 20px;
  --font-size-h6: 16px;
  --paragraph: 16px;
  --font-heading: "Baloo 2", sans-serif;
  --font-paragraph: "Roboto", sans-serif;
  --color-heading: var(--gray-140);
  --color-text: var(--gray-140);
  --color-text-inverted: var(--gray-10);
  --color-code-background: var(--gray-15);
  --color-code-text: var(--gray-170);
}
:root body.dark {
  --color-text: var(--gray-20);
  --color-heading: var(--gray-5);
  --color-text-inverted: var(--gray-140);
  --color-code-background: var(--gray-170);
  --color-code-text: var(--gray-5);
}
h1,
h2,
h3,
h4,
h5,
h6,
.font-style-heading {
  font-family: var(--font-heading);
  line-height: 1;
  margin: 0;
  padding: 0;
  padding-bottom: 8px;
  color: var(--color-heading);
  font-weight: 500;
}
h1 {
  margin-top: 0;
  font-size: var(--font-size-h1);
}
h2 {
  font-size: var(--font-size-h2);
}
h3 {
  font-size: var(--font-size-h3);
}
h4 {
  font-size: var(--font-size-h4);
}
h5 {
  font-size: var(--font-size-h5);
}
p {
  color: var(--color-text);
  line-height: 24px;
}
a {
  text-decoration: none;
  color: var(--blue-100);
}
a:hover {
  text-decoration: underline;
  color: var(--blue-120);
}
.font-size-h1 {
  font-size: var(--font-size-h1);
}
.font-size-h2 {
  font-size: var(--font-size-h2);
}
.font-size-h3 {
  font-size: var(--font-size-h3);
}
.font-size-h4 {
  font-size: var(--font-size-h4);
}
.font-size-h5 {
  font-size: var(--font-size-h5);
}
.font-family-heading {
  font-family: var(--font-heading);
}
.font-family-paragraph {
  font-family: var(--font-paragraph);
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.clickable-text {
  cursor: pointer;
}
.page-title {
  margin-bottom: 32px;
}
code {
  background-color: var(--color-code-background);
  color: var(--color-code-text);
  border-radius: var(--border-radius);
  font-size: 14px;
  font-weight: 400;
  line-height: 1rem;
  padding: 8px var(--border-radius);
  transition: all 0.15s ease-in-out;
  width: 100%;
  display: block;
}
code.inline {
  display: inline-block;
  width: unset;
  padding-top: 4px;
  padding-bottom: 4px;
}
a,
a:hover,
a:focus,
a:active {
  text-decoration: none;
  color: inherit;
}
:root {
  --icon-color-default: var(--gray-160);
  --icon-color-primary: var(--blue-100);
  --icon-color-success: var(--green-100);
  --icon-color-danger: var(--orange-100);
  --icon-color-error: var(--red-100);
}
:root body.dark {
  --icon-color-default: var(--gray-5);
  --icon-color-primary: var(--blue-100);
  --icon-color-success: var(--green-120);
  --icon-color-danger: var(--orange-120);
  --icon-color-error: var(--red-110);
}
.icon {
  height: 16px;
  width: 16px;
  background-color: var(--icon-color-default);
  background-size: cover;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  display: inline-block;
}
.icon.icon-add {
  -webkit-mask-image: url("./media/add-OIUHEKDG.svg");
  mask-image: url("./media/add-OIUHEKDG.svg");
}
.icon.icon-account {
  -webkit-mask-image: url("./media/account-PHXHPKJ4.svg");
  mask-image: url("./media/account-PHXHPKJ4.svg");
}
.icon.icon-break {
  -webkit-mask-image: url("./media/break-AHWLRTGE.svg");
  mask-image: url("./media/break-AHWLRTGE.svg");
}
.icon.icon-bug {
  -webkit-mask-image: url("./media/bug-MHVBQYA7.svg");
  mask-image: url("./media/bug-MHVBQYA7.svg");
}
.icon.icon-calendar-add {
  -webkit-mask-image: url("./media/calendar-add-AIMHL53K.svg");
  mask-image: url("./media/calendar-add-AIMHL53K.svg");
}
.icon.icon-calendar {
  -webkit-mask-image: url("./media/calendar-FIG4JMV6.svg");
  mask-image: url("./media/calendar-FIG4JMV6.svg");
}
.icon.icon-check {
  -webkit-mask-image: url("./media/check-AHFI64SJ.svg");
  mask-image: url("./media/check-AHFI64SJ.svg");
}
.icon.icon-chevron-down {
  -webkit-mask-image: url("./media/chevron-down-OQZFGFIC.svg");
  mask-image: url("./media/chevron-down-OQZFGFIC.svg");
}
.icon.icon-chevron-up {
  -webkit-mask-image: url("./media/chevron-up-NJKLUW4O.svg");
  mask-image: url("./media/chevron-up-NJKLUW4O.svg");
}
.icon.icon-chevron-left {
  -webkit-mask-image: url("./media/chevron-left-LIWDDHWV.svg");
  mask-image: url("./media/chevron-left-LIWDDHWV.svg");
}
.icon.icon-chevron-right {
  -webkit-mask-image: url("./media/chevron-right-IAMAOUF6.svg");
  mask-image: url("./media/chevron-right-IAMAOUF6.svg");
}
.icon.icon-customer {
  -webkit-mask-image: url("./media/customer-YDL25EWE.svg");
  mask-image: url("./media/customer-YDL25EWE.svg");
}
.icon.icon-dashboard {
  -webkit-mask-image: url("./media/dashboard-VNYZKOAJ.svg");
  mask-image: url("./media/dashboard-VNYZKOAJ.svg");
}
.icon.icon-day-ended {
  -webkit-mask-image: url("./media/day-ended-NUIV443S.svg");
  mask-image: url("./media/day-ended-NUIV443S.svg");
}
.icon.icon-day-started {
  -webkit-mask-image: url("./media/day-started-3IWTMRNV.svg");
  mask-image: url("./media/day-started-3IWTMRNV.svg");
}
.icon.icon-delete {
  -webkit-mask-image: url("./media/delete-J2I4JEY5.svg");
  mask-image: url("./media/delete-J2I4JEY5.svg");
}
.icon.icon-download {
  -webkit-mask-image: url("./media/download-YLJSAI5A.svg");
  mask-image: url("./media/download-YLJSAI5A.svg");
}
.icon.icon-employee {
  -webkit-mask-image: url("./media/employee-7ITNSQ3X.svg");
  mask-image: url("./media/employee-7ITNSQ3X.svg");
}
.icon.icon-filter {
  -webkit-mask-image: url("./media/filter-F4UCJAMQ.svg");
  mask-image: url("./media/filter-F4UCJAMQ.svg");
}
.icon.icon-overnight {
  -webkit-mask-image: url("./media/overnight-LBGXS2OY.svg");
  mask-image: url("./media/overnight-LBGXS2OY.svg");
}
.icon.icon-project {
  -webkit-mask-image: url("./media/project-MDSQ3NTL.svg");
  mask-image: url("./media/project-MDSQ3NTL.svg");
}
.icon.icon-search {
  -webkit-mask-image: url("./media/search-XZKE3Q6K.svg");
  mask-image: url("./media/search-XZKE3Q6K.svg");
}
.icon.icon-service-report {
  -webkit-mask-image: url("./media/service-report-M3YO3YHV.svg");
  mask-image: url("./media/service-report-M3YO3YHV.svg");
}
.icon.icon-settings {
  -webkit-mask-image: url("./media/settings-O3BOCW6J.svg");
  mask-image: url("./media/settings-O3BOCW6J.svg");
}
.icon.icon-sign-day {
  -webkit-mask-image: url("./media/sign-day-BQA6J44R.svg");
  mask-image: url("./media/sign-day-BQA6J44R.svg");
}
.icon.icon-sort {
  -webkit-mask-image: url("./media/sort-ZIMHDPSI.svg");
  mask-image: url("./media/sort-ZIMHDPSI.svg");
}
.icon.icon-statistics {
  -webkit-mask-image: url("./media/statistics-QVLCP4NX.svg");
  mask-image: url("./media/statistics-QVLCP4NX.svg");
}
.icon.icon-task {
  -webkit-mask-image: url("./media/task-AYSVJXVI.svg");
  mask-image: url("./media/task-AYSVJXVI.svg");
}
.icon.icon-time-range {
  -webkit-mask-image: url("./media/time-range-ZHIRQWC7.svg");
  mask-image: url("./media/time-range-ZHIRQWC7.svg");
}
.icon.icon-timesheet {
  -webkit-mask-image: url("./media/timesheet-2DINIB3A.svg");
  mask-image: url("./media/timesheet-2DINIB3A.svg");
}
.icon.icon-upload {
  -webkit-mask-image: url("./media/upload-IPVRWRC6.svg");
  mask-image: url("./media/upload-IPVRWRC6.svg");
}
.icon.icon-upload-file {
  -webkit-mask-image: url("./media/upload-file-LCRLFQY7.svg");
  mask-image: url("./media/upload-file-LCRLFQY7.svg");
}
.icon.default {
  background-color: var(--icon-color-default);
}
.icon.primary {
  background-color: var(--icon-color-primary);
}
.icon.success {
  background-color: var(--icon-color-success);
}
.icon.danger {
  background-color: var(--icon-color-danger);
}
.icon.error {
  background-color: var(--icon-color-error);
}
.p-0 {
  padding: 0px !important;
}
.p-t-0 {
  padding-top: 0px !important;
}
.p-b-0 {
  padding-bottom: 0px !important;
}
.p-l-0 {
  padding-left: 0px !important;
}
.p-r-0 {
  padding-right: 0px !important;
}
.p-4 {
  padding: 4px !important;
}
.p-t-4 {
  padding-top: 4px !important;
}
.p-b-4 {
  padding-bottom: 4px !important;
}
.p-l-4 {
  padding-left: 4px !important;
}
.p-r-4 {
  padding-right: 4px !important;
}
.p-8 {
  padding: 8px !important;
}
.p-t-8 {
  padding-top: 8px !important;
}
.p-b-8 {
  padding-bottom: 8px !important;
}
.p-l-8 {
  padding-left: 8px !important;
}
.p-r-8 {
  padding-right: 8px !important;
}
.p-16 {
  padding: 16px !important;
}
.p-t-16 {
  padding-top: 16px !important;
}
.p-b-16 {
  padding-bottom: 16px !important;
}
.p-l-16 {
  padding-left: 16px !important;
}
.p-r-16 {
  padding-right: 16px !important;
}
.p-32 {
  padding: 32px !important;
}
.p-t-32 {
  padding-top: 32px !important;
}
.p-b-32 {
  padding-bottom: 32px !important;
}
.p-l-32 {
  padding-left: 32px !important;
}
.p-r-32 {
  padding-right: 32px !important;
}
.p-64 {
  padding: 64px !important;
}
.p-t-64 {
  padding-top: 64px !important;
}
.p-b-64 {
  padding-bottom: 64px !important;
}
.p-l-64 {
  padding-left: 64px !important;
}
.p-r-64 {
  padding-right: 64px !important;
}
.m-0 {
  margin: 0px !important;
}
.m-t-0 {
  margin-top: 0px !important;
}
.m-b-0 {
  margin-bottom: 0px !important;
}
.m-l-0 {
  margin-left: 0px !important;
}
.m-r-0 {
  margin-right: 0px !important;
}
.m-4 {
  margin: 4px !important;
}
.m-t-4 {
  margin-top: 4px !important;
}
.m-b-4 {
  margin-bottom: 4px !important;
}
.m-l-4 {
  margin-left: 4px !important;
}
.m-r-4 {
  margin-right: 4px !important;
}
.m-8 {
  margin: 8px !important;
}
.m-t-8 {
  margin-top: 8px !important;
}
.m-b-8 {
  margin-bottom: 8px !important;
}
.m-l-8 {
  margin-left: 8px !important;
}
.m-r-8 {
  margin-right: 8px !important;
}
.m-16 {
  margin: 16px !important;
}
.m-t-16 {
  margin-top: 16px !important;
}
.m-b-16 {
  margin-bottom: 16px !important;
}
.m-l-16 {
  margin-left: 16px !important;
}
.m-r-16 {
  margin-right: 16px !important;
}
.m-32 {
  margin: 32px !important;
}
.m-t-32 {
  margin-top: 32px !important;
}
.m-b-32 {
  margin-bottom: 32px !important;
}
.m-l-32 {
  margin-left: 32px !important;
}
.m-r-32 {
  margin-right: 32px !important;
}
.m-64 {
  margin: 64px !important;
}
.m-t-64 {
  margin-top: 64px !important;
}
.m-b-64 {
  margin-bottom: 64px !important;
}
.m-l-64 {
  margin-left: 64px !important;
}
.m-r-64 {
  margin-right: 64px !important;
}
.show {
  display: block !important;
}
.row.show {
  display: -webkit-flex !important;
  display: -ms-flexbox !important;
  display: flex !important;
}
.hide {
  display: none !important;
}
.show-xs {
  display: block !important;
}
.row.show-xs {
  display: -webkit-flex !important;
  display: -ms-flexbox !important;
  display: flex !important;
}
.hide-xs {
  display: none !important;
}
@media only screen and (min-width: 575px) {
  .show-sm {
    display: block !important;
  }
  .row.show-sm {
    display: -webkit-flex !important;
    display: -ms-flexbox !important;
    display: flex !important;
  }
  .hide-sm {
    display: none !important;
  }
}
@media only screen and (min-width: 767px) {
  .show-md {
    display: block !important;
  }
  .row.show-md {
    display: -webkit-flex !important;
    display: -ms-flexbox !important;
    display: flex !important;
  }
  .hide-md {
    display: none !important;
  }
}
@media only screen and (min-width: 991px) {
  .show-lg {
    display: block !important;
  }
  .row.show-lg {
    display: -webkit-flex !important;
    display: -ms-flexbox !important;
    display: flex !important;
  }
  .hide-lg {
    display: none !important;
  }
}
@media only screen and (min-width: 1199px) {
  .show-xl {
    display: block !important;
  }
  .row.show-xl {
    display: -webkit-flex !important;
    display: -ms-flexbox !important;
    display: flex !important;
  }
  .hide-xl {
    display: none !important;
  }
}
:root {
  --sidebar-min-width: 300px;
  --topbar-height: 70px;
  --content-padding: 64px;
}
html,
body {
  height: 100%;
  margin: 0;
}
.app {
  min-height: 100%;
  max-height: 100%;
  min-width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
}
@media (hover: none) {
  .app {
    height: -webkit-fill-available;
  }
}
.app .main {
  height: calc(100vh - var(--topbar-height));
  display: flex;
  position: relative;
}
@media (hover: none) {
  .app .main {
    height: -webkit-fill-available;
  }
}
.app .main:not(.sidebar-open) .sidebar-container {
  min-width: 0px;
  max-width: 0px;
}
.app .main.sidebar-open .sidebar-container {
  min-width: var(--sidebar-min-width);
  max-width: 100%;
}
.app .main .sidebar-container {
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  transition: transform 0.2s ease-in-out;
  background-color: var(--white);
  color: var(--color-sidebar-background);
  z-index: 999999;
}
.app .main .page {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  padding: var(--content-padding);
  transition: filter 0.2s ease-in-out;
  color: var(--color-text);
  background-color: var(--color-background);
}
.app .main .page .container-overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  transition: all 0.2s ease-in-out;
  z-index: -1;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background-color: rgba(39, 38, 54, 0);
}
.app .main .page .container {
  max-width: 900px;
  margin: 0 auto;
}
@media only screen and (max-width: 800px) {
  .app .main .sidebar-container {
    position: fixed;
    z-index: 99999;
    top: var(--topbar-height) !important;
    left: 0;
    top: 0;
    bottom: 0;
  }
  .app .main .page {
    padding: var(--content-padding) 32px;
    overflow-x: hidden;
  }
  .app .main.sidebar-open {
    overflow: hidden;
  }
  .app .main.sidebar-open .page {
    overflow: hidden;
  }
  .app .main.sidebar-open .page .container-overlay.active {
    z-index: 500;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    background-color: rgba(39, 38, 54, 0.4);
  }
}
@media only screen and (max-width: 500px) {
  .app .main .page {
    padding: var(--content-padding) 16px;
    padding-top: 32px;
  }
}
:root {
  --sidebar-background: var(--white);
  --sidebar-group-title-color: var(--gray-120);
  --sidebar-item-background: var(--white);
  --sidebar-item-background-hover: var(--blue-10);
  --sidebar-item-background-active: var(--blue-100);
  --sidebar-item-text: var(--blue-100);
  --sidebar-item-text-hover: var(--blue-100);
  --sidebar-item-text-active: var(--white);
}
:root body.dark {
  --sidebar-background: var(--gray-190);
  --sidebar-group-title-color: var(--gray-120);
  --sidebar-item-background: var(--gray-190);
  --sidebar-item-background-hover: var(--gray-170);
  --sidebar-item-background-active: var(--blue-120);
  --sidebar-item-text: var(--white);
  --sidebar-item-text-hover: var(--white);
  --sidebar-item-text-active: var(--white);
}
.sidebar-container {
  scrollbar-color: var(--color-dark-light) var(--white);
}
.sidebar-container::-webkit-scrollbar-track {
  background: var(--white);
}
.sidebar-container::-webkit-scrollbar-thumb {
  border: 4px var(--white) solid;
}
.sidebar {
  width: 100%;
  min-height: 100%;
  padding: 8px;
  background-color: var(--sidebar-background);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
}
.sidebar .sidebar-group {
  display: flex;
  flex-direction: column;
}
.sidebar .sidebar-group .sidebar-group-title {
  padding-left: var(--border-radius);
  color: var(--sidebar-group-title-color);
  width: 100%;
  margin-bottom: 8px;
  font-family: var(--font-heading);
  -webkit-user-select: none;
  user-select: none;
}
.sidebar .sidebar-group .sidebar-item {
  padding: 10px 16px;
  border-radius: var(--border-radius);
  text-decoration: none;
  display: flex;
  align-items: center;
  line-height: 20px;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  background-color: var(--sidebar-item-background);
  color: var(--sidebar-item-text);
  font-family: var(--font-heading);
}
.sidebar .sidebar-group .sidebar-item .icon {
  margin-right: 8px;
  background-color: var(--sidebar-item-text);
}
.sidebar .sidebar-group .sidebar-item .action-item-count {
  margin-left: auto;
  background-color: var(--sidebar-item-text);
  color: var(--sidebar-item-background);
  padding: 0 8px;
  border-radius: var(--border-radius);
}
.sidebar .sidebar-group .sidebar-item:not(:last-of-type) {
  margin-bottom: 8px;
}
.sidebar .sidebar-group .sidebar-item:hover {
  background-color: var(--sidebar-item-background-hover);
  color: var(--sidebar-item-text-hover);
}
.sidebar .sidebar-group .sidebar-item.selected {
  background-color: var(--sidebar-item-background-active);
  color: var(--sidebar-item-text-active);
}
.sidebar .sidebar-group .sidebar-item.selected .icon {
  background-color: var(--sidebar-item-text-active);
}
.sidebar .sidebar-group .sidebar-item.selected .action-item-count {
  background-color: var(--sidebar-item-text-active);
  color: var(--sidebar-item-background-active);
}
:root {
  --scrollbar-background: var(--white);
  --scrollbar-thumb: var(--gray-40);
}
:root body.dark {
  --scrollbar-background: var(--gray-190);
  --scrollbar-thumb: var(--gray-160);
}
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-background);
}
*::-webkit-scrollbar-track {
  background: var(--scrollbar-background);
}
::-webkit-scrollbar {
  width: 16px;
}
::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border: 4px var(--scrollbar-background) solid;
  border-radius: 99px;
  background-clip: padding-box;
}
:root {
  --color-topbar-background: var(--white);
  --color-topbar-text: var(--gray-160);
  --color-topbar-build-type-text: var(--gray-70);
}
:root body.dark {
  --color-topbar-background: var(--gray-190);
  --color-topbar-text: var(--white);
  --color-topbar-build-type-text: var(--gray-70);
}
.topbar-container {
  width: 100%;
  height: var(--topbar-height);
  display: block;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 9999;
}
.topbar-container .topbar {
  background-color: var(--color-topbar-background);
  color: var(--color-topbar-text);
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: var(--shadow-lg);
  z-index: 4;
}
.topbar-container .topbar .left {
  padding-left: 24px;
  display: flex;
  align-items: center;
}
.topbar-container .topbar .left .sidebar-toggle {
  margin-right: 16px;
  height: 24px;
}
.topbar-container .topbar .left .logo {
  display: flex;
  align-items: center;
}
.topbar-container .topbar .left .logo img {
  height: 20px;
}
.topbar-container .topbar .left .build-type-container {
  margin-left: 16px;
  color: var(--color-topbar-build-type-text);
}
.topbar-container .topbar .app-name {
  height: 2rem;
  flex-shrink: 0;
  margin-right: 1rem;
  display: flex;
  align-items: center;
  position: relative;
}
.topbar-container .topbar .app-name .build-type {
  position: absolute;
  left: 100px;
  width: 200px;
  opacity: 0.5;
}
.topbar-container .topbar .app-name svg {
  height: 2rem;
  width: auto;
}
.topbar-container .topbar .user-info {
  display: flex;
  align-items: center;
  flex-shrink: 1;
  min-width: 0;
}
.topbar-container .topbar .user-info .truncate-text {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar-container .topbar .user-info .create-issue {
  margin-right: 2rem;
}
.topbar-container .topbar .user-info .user-company {
  cursor: pointer;
  text-align: right;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  flex-shrink: 2;
}
.topbar-container .topbar .user-info .user-company .company-name {
  color: var(--color-dark-light);
}
.topbar-container .topbar .user-info .profile-picture {
  cursor: pointer;
  height: 40px;
  min-width: 40px;
  border-radius: 50%;
  margin-left: 16px;
  background-image: url(/assets/img/default-profile-picture.jpg);
  background-size: cover;
  background-position: center;
  background-color: gray;
}
.topbar-container .topbar .user-info ion-icon {
  cursor: pointer;
  flex-shrink: 0;
}
@media (min-width: 1275px) {
  .sidebar-toggle {
    display: none;
  }
}
:root {
  --auth-screen-background-gradient-start: var(--blue-100);
  --auth-screen-background-gradient-end: var(--blue-120);
  --auth-screen-brand-background-gradient-start: var(--blue-170);
  --auth-screen-brand-background-gradient-end: var(--blue-190);
}
:root body.dark {
  --auth-screen-background-gradient-start: var(--gray-180);
  --auth-screen-background-gradient-end: var(--gray-190);
  --auth-screen-brand-background-gradient-start: var(--blue-140);
  --auth-screen-brand-background-gradient-end: var(--blue-160);
}
.auth {
  width: 100vw;
  height: 100vh;
  height: -webkit-fill-available;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image:
    linear-gradient(
      145deg,
      var(--auth-screen-background-gradient-start),
      var(--auth-screen-background-gradient-end));
}
.auth .auth-container {
  position: absolute;
  min-width: 1000px;
  max-width: 1000px;
  margin: 0 auto;
  box-shadow: var(--shadow-lg);
  border-radius: var(--border-radius);
  overflow: hidden;
  display: grid;
  grid-template-columns: auto 350px;
}
.auth .auth-container.create-company {
  grid-template-columns: auto 640px;
}
.auth .auth-container.register .right {
  display: unset;
}
.auth .auth-container .left {
  background-image:
    linear-gradient(
      145deg,
      var(--auth-screen-brand-background-gradient-start),
      var(--auth-screen-brand-background-gradient-end));
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
}
.auth .auth-container .left .left-content {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 32px;
}
.auth .auth-container .left .left-content .logo {
  margin-bottom: 64px;
  margin-top: 32px;
}
.auth .auth-container .left .left-content .logo > img {
  max-width: 200px;
}
.auth .auth-container .left .left-content .illustration {
  width: 80%;
  margin-bottom: 32px;
}
.auth .auth-container .left .left-content .illustration > img {
  width: 100%;
  height: auto;
}
.auth .auth-container .right {
  background-color: var(--color-background);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.auth .auth-container .right .right-content {
  display: flex;
  align-items: stretch;
  justify-content: center;
  flex-direction: column;
  padding: 32px;
}
.auth .auth-container .right .right-content .title > h1 {
  color: var(--color-heading);
  font-size: var(--font-size-h3);
  margin-bottom: 32px;
  text-align: center;
  font-weight: 800;
}
.auth .auth-container .right .right-content .form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.auth .auth-container .right .right-content .form .forgot-password {
  text-align: right;
}
.auth .auth-container .right .right-content .form p {
  text-align: center;
}
.auth-fullscreen {
  width: 100vw;
  height: 100vh;
  height: -webkit-fill-available;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background-image:
    linear-gradient(
      145deg,
      var(--blue-170),
      var(--blue-190));
}
.auth-fullscreen .logo {
  margin-bottom: 32px;
  margin-top: 32px;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
}
.auth-fullscreen .logo > img {
  max-width: 200px;
}
.auth-fullscreen h1 {
  color: var(--blue-5);
  font-size: var(--font-size-h2);
  text-align: center;
  margin-bottom: 16px;
}
.auth-fullscreen .illustration {
  width: 540px;
  margin-bottom: 32px;
  max-width: 100%;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
}
.auth-fullscreen .illustration > img {
  width: 100%;
  height: auto;
}
@media (max-width: 1032px) {
  .auth {
    padding-left: 16px;
    padding-right: 16px;
  }
  .auth .auth-container {
    min-width: unset;
    max-width: unset;
    width: calc(100% - 32px);
  }
}
@media (max-width: 780px) {
  .auth .auth-container {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
  }
  .auth .auth-container .left .left-content {
    padding: 16px;
  }
  .auth .auth-container .left .left-content .logo {
    margin-bottom: 16px;
    margin-top: 16px;
  }
  .auth .auth-container .left .left-content .logo > img {
    max-height: 200px;
  }
  .auth .auth-container .left .left-content .illustration {
    display: none;
  }
  .auth .auth-container .right {
    min-width: 290px;
    justify-content: space-around;
  }
}
.row {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  position: relative;
}
.col,
.col-1,
.col-10,
.col-11,
.col-12,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-auto,
.col-lg,
.col-lg-1,
.col-lg-10,
.col-lg-11,
.col-lg-12,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-auto,
.col-md,
.col-md-1,
.col-md-10,
.col-md-11,
.col-md-12,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-auto,
.col-sm,
.col-sm-1,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-auto,
.col-xl,
.col-xl-1,
.col-xl-10,
.col-xl-11,
.col-xl-12,
.col-xl-2,
.col-xl-3,
.col-xl-4,
.col-xl-5,
.col-xl-6,
.col-xl-7,
.col-xl-8,
.col-xl-9,
.col-xl-auto {
  position: relative;
  width: 100%;
  min-height: 1px;
}
.col {
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -ms-flex-positive: 1;
  flex-grow: 1;
  max-width: 100%;
}
.col-auto {
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  width: auto;
  max-width: none;
}
.col-1 {
  -ms-flex: 0 0 8.333333%;
  flex: 0 0 8.333333%;
  max-width: 8.333333%;
}
.col-1td {
  width: 8.333333%;
}
.col-2 {
  -ms-flex: 0 0 16.666667%;
  flex: 0 0 16.666667%;
  max-width: 16.666667%;
}
.col-2td {
  width: 16.666667%;
}
.col-3 {
  -ms-flex: 0 0 25%;
  flex: 0 0 25%;
  max-width: 25%;
}
.col-3td {
  width: 25%;
}
.col-4 {
  -ms-flex: 0 0 33.333333%;
  flex: 0 0 33.333333%;
  max-width: 33.333333%;
}
.col-4td {
  width: 33.333333%;
}
.col-5 {
  -ms-flex: 0 0 41.666667%;
  flex: 0 0 41.666667%;
  max-width: 41.666667%;
}
.col-5td {
  width: 41.666667%;
}
.col-6 {
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%;
}
.col-6td {
  width: 50%;
}
.col-7 {
  -ms-flex: 0 0 58.333333%;
  flex: 0 0 58.333333%;
  max-width: 58.333333%;
}
.col-7td {
  width: 58.333333%;
}
.col-8 {
  -ms-flex: 0 0 66.666667%;
  flex: 0 0 66.666667%;
  max-width: 66.666667%;
}
.col-8td {
  width: 66.666667%;
}
.col-9 {
  -ms-flex: 0 0 75%;
  flex: 0 0 75%;
  max-width: 75%;
}
.col-9td {
  width: 75%;
}
.col-10 {
  -ms-flex: 0 0 83.333333%;
  flex: 0 0 83.333333%;
  max-width: 83.333333%;
}
.col-10td {
  width: 83.333333%;
}
.col-11 {
  -ms-flex: 0 0 91.666667%;
  flex: 0 0 91.666667%;
  max-width: 91.666667%;
}
.col-11td {
  width: 91.666667%;
}
.col-12 {
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%;
}
.col-12td {
  width: 100%;
}
.order-first {
  -ms-flex-order: -1;
  order: -1;
}
.order-1 {
  -ms-flex-order: 1;
  order: 1;
}
.order-2 {
  -ms-flex-order: 2;
  order: 2;
}
.order-3 {
  -ms-flex-order: 3;
  order: 3;
}
.order-4 {
  -ms-flex-order: 4;
  order: 4;
}
.order-5 {
  -ms-flex-order: 5;
  order: 5;
}
.order-6 {
  -ms-flex-order: 6;
  order: 6;
}
.order-7 {
  -ms-flex-order: 7;
  order: 7;
}
.order-8 {
  -ms-flex-order: 8;
  order: 8;
}
.order-9 {
  -ms-flex-order: 9;
  order: 9;
}
.order-10 {
  -ms-flex-order: 10;
  order: 10;
}
.order-11 {
  -ms-flex-order: 11;
  order: 11;
}
.order-12 {
  -ms-flex-order: 12;
  order: 12;
}
.offset-1 {
  margin-left: 8.333333%;
}
.offset-2 {
  margin-left: 16.666667%;
}
.offset-3 {
  margin-left: 25%;
}
.offset-4 {
  margin-left: 33.333333%;
}
.offset-5 {
  margin-left: 41.666667%;
}
.offset-6 {
  margin-left: 50%;
}
.offset-7 {
  margin-left: 58.333333%;
}
.offset-8 {
  margin-left: 66.666667%;
}
.offset-9 {
  margin-left: 75%;
}
.offset-10 {
  margin-left: 83.333333%;
}
.offset-11 {
  margin-left: 91.666667%;
}
@media (min-width: 576px) {
  .col-sm {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
  }
  .col-sm-auto {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    max-width: none;
  }
  .col-sm-1 {
    -ms-flex: 0 0 8.333333%;
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
  }
  .col-sm-2 {
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }
  .col-sm-3 {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-sm-4 {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .col-sm-5 {
    -ms-flex: 0 0 41.666667%;
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
  }
  .col-sm-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-sm-7 {
    -ms-flex: 0 0 58.333333%;
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
  }
  .col-sm-8 {
    -ms-flex: 0 0 66.666667%;
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }
  .col-sm-9 {
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
  }
  .col-sm-10 {
    -ms-flex: 0 0 83.333333%;
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
  }
  .col-sm-11 {
    -ms-flex: 0 0 91.666667%;
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
  }
  .col-sm-12 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
  .order-sm-first {
    -ms-flex-order: -1;
    order: -1;
  }
  .order-sm-1 {
    -ms-flex-order: 1;
    order: 1;
  }
  .order-sm-2 {
    -ms-flex-order: 2;
    order: 2;
  }
  .order-sm-3 {
    -ms-flex-order: 3;
    order: 3;
  }
  .order-sm-4 {
    -ms-flex-order: 4;
    order: 4;
  }
  .order-sm-5 {
    -ms-flex-order: 5;
    order: 5;
  }
  .order-sm-6 {
    -ms-flex-order: 6;
    order: 6;
  }
  .order-sm-7 {
    -ms-flex-order: 7;
    order: 7;
  }
  .order-sm-8 {
    -ms-flex-order: 8;
    order: 8;
  }
  .order-sm-9 {
    -ms-flex-order: 9;
    order: 9;
  }
  .order-sm-10 {
    -ms-flex-order: 10;
    order: 10;
  }
  .order-sm-11 {
    -ms-flex-order: 11;
    order: 11;
  }
  .order-sm-12 {
    -ms-flex-order: 12;
    order: 12;
  }
  .offset-sm-0 {
    margin-left: 0;
  }
  .offset-sm-1 {
    margin-left: 8.333333%;
  }
  .offset-sm-2 {
    margin-left: 16.666667%;
  }
  .offset-sm-3 {
    margin-left: 25%;
  }
  .offset-sm-4 {
    margin-left: 33.333333%;
  }
  .offset-sm-5 {
    margin-left: 41.666667%;
  }
  .offset-sm-6 {
    margin-left: 50%;
  }
  .offset-sm-7 {
    margin-left: 58.333333%;
  }
  .offset-sm-8 {
    margin-left: 66.666667%;
  }
  .offset-sm-9 {
    margin-left: 75%;
  }
  .offset-sm-10 {
    margin-left: 83.333333%;
  }
  .offset-sm-11 {
    margin-left: 91.666667%;
  }
}
@media (min-width: 768px) {
  .col-md {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
  }
  .col-md-auto {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    max-width: none;
  }
  .col-md-1 {
    -ms-flex: 0 0 8.333333%;
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
  }
  .col-md-2 {
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }
  .col-md-3 {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-md-4 {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .col-md-5 {
    -ms-flex: 0 0 41.666667%;
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
  }
  .col-md-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-md-7 {
    -ms-flex: 0 0 58.333333%;
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
  }
  .col-md-8 {
    -ms-flex: 0 0 66.666667%;
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }
  .col-md-9 {
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
  }
  .col-md-10 {
    -ms-flex: 0 0 83.333333%;
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
  }
  .col-md-11 {
    -ms-flex: 0 0 91.666667%;
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
  }
  .col-md-12 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
  .order-md-first {
    -ms-flex-order: -1;
    order: -1;
  }
  .order-md-1 {
    -ms-flex-order: 1;
    order: 1;
  }
  .order-md-2 {
    -ms-flex-order: 2;
    order: 2;
  }
  .order-md-3 {
    -ms-flex-order: 3;
    order: 3;
  }
  .order-md-4 {
    -ms-flex-order: 4;
    order: 4;
  }
  .order-md-5 {
    -ms-flex-order: 5;
    order: 5;
  }
  .order-md-6 {
    -ms-flex-order: 6;
    order: 6;
  }
  .order-md-7 {
    -ms-flex-order: 7;
    order: 7;
  }
  .order-md-8 {
    -ms-flex-order: 8;
    order: 8;
  }
  .order-md-9 {
    -ms-flex-order: 9;
    order: 9;
  }
  .order-md-10 {
    -ms-flex-order: 10;
    order: 10;
  }
  .order-md-11 {
    -ms-flex-order: 11;
    order: 11;
  }
  .order-md-12 {
    -ms-flex-order: 12;
    order: 12;
  }
  .offset-md-0 {
    margin-left: 0;
  }
  .offset-md-1 {
    margin-left: 8.333333%;
  }
  .offset-md-2 {
    margin-left: 16.666667%;
  }
  .offset-md-3 {
    margin-left: 25%;
  }
  .offset-md-4 {
    margin-left: 33.333333%;
  }
  .offset-md-5 {
    margin-left: 41.666667%;
  }
  .offset-md-6 {
    margin-left: 50%;
  }
  .offset-md-7 {
    margin-left: 58.333333%;
  }
  .offset-md-8 {
    margin-left: 66.666667%;
  }
  .offset-md-9 {
    margin-left: 75%;
  }
  .offset-md-10 {
    margin-left: 83.333333%;
  }
  .offset-md-11 {
    margin-left: 91.666667%;
  }
}
@media (min-width: 992px) {
  .col-lg {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
  }
  .col-lg-auto {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    max-width: none;
  }
  .col-lg-1 {
    -ms-flex: 0 0 8.333333%;
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
  }
  .col-lg-2 {
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }
  .col-lg-3 {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-lg-4 {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .col-lg-5 {
    -ms-flex: 0 0 41.666667%;
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
  }
  .col-lg-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-lg-7 {
    -ms-flex: 0 0 58.333333%;
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
  }
  .col-lg-8 {
    -ms-flex: 0 0 66.666667%;
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }
  .col-lg-9 {
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
  }
  .col-lg-10 {
    -ms-flex: 0 0 83.333333%;
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
  }
  .col-lg-11 {
    -ms-flex: 0 0 91.666667%;
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
  }
  .col-lg-12 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
  .order-lg-first {
    -ms-flex-order: -1;
    order: -1;
  }
  .order-lg-1 {
    -ms-flex-order: 1;
    order: 1;
  }
  .order-lg-2 {
    -ms-flex-order: 2;
    order: 2;
  }
  .order-lg-3 {
    -ms-flex-order: 3;
    order: 3;
  }
  .order-lg-4 {
    -ms-flex-order: 4;
    order: 4;
  }
  .order-lg-5 {
    -ms-flex-order: 5;
    order: 5;
  }
  .order-lg-6 {
    -ms-flex-order: 6;
    order: 6;
  }
  .order-lg-7 {
    -ms-flex-order: 7;
    order: 7;
  }
  .order-lg-8 {
    -ms-flex-order: 8;
    order: 8;
  }
  .order-lg-9 {
    -ms-flex-order: 9;
    order: 9;
  }
  .order-lg-10 {
    -ms-flex-order: 10;
    order: 10;
  }
  .order-lg-11 {
    -ms-flex-order: 11;
    order: 11;
  }
  .order-lg-12 {
    -ms-flex-order: 12;
    order: 12;
  }
  .offset-lg-0 {
    margin-left: 0;
  }
  .offset-lg-1 {
    margin-left: 8.333333%;
  }
  .offset-lg-2 {
    margin-left: 16.666667%;
  }
  .offset-lg-3 {
    margin-left: 25%;
  }
  .offset-lg-4 {
    margin-left: 33.333333%;
  }
  .offset-lg-5 {
    margin-left: 41.666667%;
  }
  .offset-lg-6 {
    margin-left: 50%;
  }
  .offset-lg-7 {
    margin-left: 58.333333%;
  }
  .offset-lg-8 {
    margin-left: 66.666667%;
  }
  .offset-lg-9 {
    margin-left: 75%;
  }
  .offset-lg-10 {
    margin-left: 83.333333%;
  }
  .offset-lg-11 {
    margin-left: 91.666667%;
  }
}
@media (min-width: 1200px) {
  .col-xl {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
  }
  .col-xl-auto {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    max-width: none;
  }
  .col-xl-1 {
    -ms-flex: 0 0 8.333333%;
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
  }
  .col-xl-2 {
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }
  .col-xl-3 {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-xl-4 {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .col-xl-5 {
    -ms-flex: 0 0 41.666667%;
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
  }
  .col-xl-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-xl-7 {
    -ms-flex: 0 0 58.333333%;
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
  }
  .col-xl-8 {
    -ms-flex: 0 0 66.666667%;
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }
  .col-xl-9 {
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
  }
  .col-xl-10 {
    -ms-flex: 0 0 83.333333%;
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
  }
  .col-xl-11 {
    -ms-flex: 0 0 91.666667%;
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
  }
  .col-xl-12 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
  .order-xl-first {
    -ms-flex-order: -1;
    order: -1;
  }
  .order-xl-1 {
    -ms-flex-order: 1;
    order: 1;
  }
  .order-xl-2 {
    -ms-flex-order: 2;
    order: 2;
  }
  .order-xl-3 {
    -ms-flex-order: 3;
    order: 3;
  }
  .order-xl-4 {
    -ms-flex-order: 4;
    order: 4;
  }
  .order-xl-5 {
    -ms-flex-order: 5;
    order: 5;
  }
  .order-xl-6 {
    -ms-flex-order: 6;
    order: 6;
  }
  .order-xl-7 {
    -ms-flex-order: 7;
    order: 7;
  }
  .order-xl-8 {
    -ms-flex-order: 8;
    order: 8;
  }
  .order-xl-9 {
    -ms-flex-order: 9;
    order: 9;
  }
  .order-xl-10 {
    -ms-flex-order: 10;
    order: 10;
  }
  .order-xl-11 {
    -ms-flex-order: 11;
    order: 11;
  }
  .order-xl-12 {
    -ms-flex-order: 12;
    order: 12;
  }
  .offset-xl-0 {
    margin-left: 0;
  }
  .offset-xl-1 {
    margin-left: 8.333333%;
  }
  .offset-xl-2 {
    margin-left: 16.666667%;
  }
  .offset-xl-3 {
    margin-left: 25%;
  }
  .offset-xl-4 {
    margin-left: 33.333333%;
  }
  .offset-xl-5 {
    margin-left: 41.666667%;
  }
  .offset-xl-6 {
    margin-left: 50%;
  }
  .offset-xl-7 {
    margin-left: 58.333333%;
  }
  .offset-xl-8 {
    margin-left: 66.666667%;
  }
  .offset-xl-9 {
    margin-left: 75%;
  }
  .offset-xl-10 {
    margin-left: 83.333333%;
  }
  .offset-xl-11 {
    margin-left: 91.666667%;
  }
}
.flex-row {
  -ms-flex-direction: row !important;
  flex-direction: row !important;
}
.flex-column {
  -ms-flex-direction: column !important;
  flex-direction: column !important;
}
.flex-row-reverse {
  -ms-flex-direction: row-reverse !important;
  flex-direction: row-reverse !important;
}
.flex-column-reverse {
  -ms-flex-direction: column-reverse !important;
  flex-direction: column-reverse !important;
}
.flex-wrap {
  -ms-flex-wrap: wrap !important;
  flex-wrap: wrap !important;
}
.flex-nowrap {
  -ms-flex-wrap: nowrap !important;
  flex-wrap: nowrap !important;
}
.flex-wrap-reverse {
  -ms-flex-wrap: wrap-reverse !important;
  flex-wrap: wrap-reverse !important;
}
.justify-content-start {
  -ms-flex-pack: start !important;
  justify-content: flex-start !important;
}
.justify-content-end {
  -ms-flex-pack: end !important;
  justify-content: flex-end !important;
}
.justify-content-center {
  -ms-flex-pack: center !important;
  justify-content: center !important;
}
.justify-content-between {
  -ms-flex-pack: justify !important;
  justify-content: space-between !important;
}
.justify-content-around {
  -ms-flex-pack: distribute !important;
  justify-content: space-around !important;
}
.align-items-start {
  -ms-flex-align: start !important;
  align-items: flex-start !important;
}
.align-items-end {
  -ms-flex-align: end !important;
  align-items: flex-end !important;
}
.align-items-center {
  -ms-flex-align: center !important;
  align-items: center !important;
}
.align-items-baseline {
  -ms-flex-align: baseline !important;
  align-items: baseline !important;
}
.align-items-stretch {
  -ms-flex-align: stretch !important;
  align-items: stretch !important;
}
.align-content-start {
  -ms-flex-line-pack: start !important;
  align-content: flex-start !important;
}
.align-content-end {
  -ms-flex-line-pack: end !important;
  align-content: flex-end !important;
}
.align-content-center {
  -ms-flex-line-pack: center !important;
  align-content: center !important;
}
.align-content-between {
  -ms-flex-line-pack: justify !important;
  align-content: space-between !important;
}
.align-content-around {
  -ms-flex-line-pack: distribute !important;
  align-content: space-around !important;
}
.align-content-stretch {
  -ms-flex-line-pack: stretch !important;
  align-content: stretch !important;
}
.align-self-auto {
  -ms-flex-item-align: auto !important;
  align-self: auto !important;
}
.align-self-start {
  -ms-flex-item-align: start !important;
  align-self: flex-start !important;
}
.align-self-end {
  -ms-flex-item-align: end !important;
  align-self: flex-end !important;
}
.align-self-center {
  -ms-flex-item-align: center !important;
  align-self: center !important;
}
.align-self-baseline {
  -ms-flex-item-align: baseline !important;
  align-self: baseline !important;
}
.align-self-stretch {
  -ms-flex-item-align: stretch !important;
  align-self: stretch !important;
}
@media (min-width: 576px) {
  .flex-sm-row {
    -ms-flex-direction: row !important;
    flex-direction: row !important;
  }
  .flex-sm-column {
    -ms-flex-direction: column !important;
    flex-direction: column !important;
  }
  .flex-sm-row-reverse {
    -ms-flex-direction: row-reverse !important;
    flex-direction: row-reverse !important;
  }
  .flex-sm-column-reverse {
    -ms-flex-direction: column-reverse !important;
    flex-direction: column-reverse !important;
  }
  .flex-sm-wrap {
    -ms-flex-wrap: wrap !important;
    flex-wrap: wrap !important;
  }
  .flex-sm-nowrap {
    -ms-flex-wrap: nowrap !important;
    flex-wrap: nowrap !important;
  }
  .flex-sm-wrap-reverse {
    -ms-flex-wrap: wrap-reverse !important;
    flex-wrap: wrap-reverse !important;
  }
  .justify-content-sm-start {
    -ms-flex-pack: start !important;
    justify-content: flex-start !important;
  }
  .justify-content-sm-end {
    -ms-flex-pack: end !important;
    justify-content: flex-end !important;
  }
  .justify-content-sm-center {
    -ms-flex-pack: center !important;
    justify-content: center !important;
  }
  .justify-content-sm-between {
    -ms-flex-pack: justify !important;
    justify-content: space-between !important;
  }
  .justify-content-sm-around {
    -ms-flex-pack: distribute !important;
    justify-content: space-around !important;
  }
  .align-items-sm-start {
    -ms-flex-align: start !important;
    align-items: flex-start !important;
  }
  .align-items-sm-end {
    -ms-flex-align: end !important;
    align-items: flex-end !important;
  }
  .align-items-sm-center {
    -ms-flex-align: center !important;
    align-items: center !important;
  }
  .align-items-sm-baseline {
    -ms-flex-align: baseline !important;
    align-items: baseline !important;
  }
  .align-items-sm-stretch {
    -ms-flex-align: stretch !important;
    align-items: stretch !important;
  }
  .align-content-sm-start {
    -ms-flex-line-pack: start !important;
    align-content: flex-start !important;
  }
  .align-content-sm-end {
    -ms-flex-line-pack: end !important;
    align-content: flex-end !important;
  }
  .align-content-sm-center {
    -ms-flex-line-pack: center !important;
    align-content: center !important;
  }
  .align-content-sm-between {
    -ms-flex-line-pack: justify !important;
    align-content: space-between !important;
  }
  .align-content-sm-around {
    -ms-flex-line-pack: distribute !important;
    align-content: space-around !important;
  }
  .align-content-sm-stretch {
    -ms-flex-line-pack: stretch !important;
    align-content: stretch !important;
  }
  .align-self-sm-auto {
    -ms-flex-item-align: auto !important;
    align-self: auto !important;
  }
  .align-self-sm-start {
    -ms-flex-item-align: start !important;
    align-self: flex-start !important;
  }
  .align-self-sm-end {
    -ms-flex-item-align: end !important;
    align-self: flex-end !important;
  }
  .align-self-sm-center {
    -ms-flex-item-align: center !important;
    align-self: center !important;
  }
  .align-self-sm-baseline {
    -ms-flex-item-align: baseline !important;
    align-self: baseline !important;
  }
  .align-self-sm-stretch {
    -ms-flex-item-align: stretch !important;
    align-self: stretch !important;
  }
}
@media (min-width: 768px) {
  .flex-md-row {
    -ms-flex-direction: row !important;
    flex-direction: row !important;
  }
  .flex-md-column {
    -ms-flex-direction: column !important;
    flex-direction: column !important;
  }
  .flex-md-row-reverse {
    -ms-flex-direction: row-reverse !important;
    flex-direction: row-reverse !important;
  }
  .flex-md-column-reverse {
    -ms-flex-direction: column-reverse !important;
    flex-direction: column-reverse !important;
  }
  .flex-md-wrap {
    -ms-flex-wrap: wrap !important;
    flex-wrap: wrap !important;
  }
  .flex-md-nowrap {
    -ms-flex-wrap: nowrap !important;
    flex-wrap: nowrap !important;
  }
  .flex-md-wrap-reverse {
    -ms-flex-wrap: wrap-reverse !important;
    flex-wrap: wrap-reverse !important;
  }
  .justify-content-md-start {
    -ms-flex-pack: start !important;
    justify-content: flex-start !important;
  }
  .justify-content-md-end {
    -ms-flex-pack: end !important;
    justify-content: flex-end !important;
  }
  .justify-content-md-center {
    -ms-flex-pack: center !important;
    justify-content: center !important;
  }
  .justify-content-md-between {
    -ms-flex-pack: justify !important;
    justify-content: space-between !important;
  }
  .justify-content-md-around {
    -ms-flex-pack: distribute !important;
    justify-content: space-around !important;
  }
  .align-items-md-start {
    -ms-flex-align: start !important;
    align-items: flex-start !important;
  }
  .align-items-md-end {
    -ms-flex-align: end !important;
    align-items: flex-end !important;
  }
  .align-items-md-center {
    -ms-flex-align: center !important;
    align-items: center !important;
  }
  .align-items-md-baseline {
    -ms-flex-align: baseline !important;
    align-items: baseline !important;
  }
  .align-items-md-stretch {
    -ms-flex-align: stretch !important;
    align-items: stretch !important;
  }
  .align-content-md-start {
    -ms-flex-line-pack: start !important;
    align-content: flex-start !important;
  }
  .align-content-md-end {
    -ms-flex-line-pack: end !important;
    align-content: flex-end !important;
  }
  .align-content-md-center {
    -ms-flex-line-pack: center !important;
    align-content: center !important;
  }
  .align-content-md-between {
    -ms-flex-line-pack: justify !important;
    align-content: space-between !important;
  }
  .align-content-md-around {
    -ms-flex-line-pack: distribute !important;
    align-content: space-around !important;
  }
  .align-content-md-stretch {
    -ms-flex-line-pack: stretch !important;
    align-content: stretch !important;
  }
  .align-self-md-auto {
    -ms-flex-item-align: auto !important;
    align-self: auto !important;
  }
  .align-self-md-start {
    -ms-flex-item-align: start !important;
    align-self: flex-start !important;
  }
  .align-self-md-end {
    -ms-flex-item-align: end !important;
    align-self: flex-end !important;
  }
  .align-self-md-center {
    -ms-flex-item-align: center !important;
    align-self: center !important;
  }
  .align-self-md-baseline {
    -ms-flex-item-align: baseline !important;
    align-self: baseline !important;
  }
  .align-self-md-stretch {
    -ms-flex-item-align: stretch !important;
    align-self: stretch !important;
  }
}
@media (min-width: 992px) {
  .flex-lg-row {
    -ms-flex-direction: row !important;
    flex-direction: row !important;
  }
  .flex-lg-column {
    -ms-flex-direction: column !important;
    flex-direction: column !important;
  }
  .flex-lg-row-reverse {
    -ms-flex-direction: row-reverse !important;
    flex-direction: row-reverse !important;
  }
  .flex-lg-column-reverse {
    -ms-flex-direction: column-reverse !important;
    flex-direction: column-reverse !important;
  }
  .flex-lg-wrap {
    -ms-flex-wrap: wrap !important;
    flex-wrap: wrap !important;
  }
  .flex-lg-nowrap {
    -ms-flex-wrap: nowrap !important;
    flex-wrap: nowrap !important;
  }
  .flex-lg-wrap-reverse {
    -ms-flex-wrap: wrap-reverse !important;
    flex-wrap: wrap-reverse !important;
  }
  .justify-content-lg-start {
    -ms-flex-pack: start !important;
    justify-content: flex-start !important;
  }
  .justify-content-lg-end {
    -ms-flex-pack: end !important;
    justify-content: flex-end !important;
  }
  .justify-content-lg-center {
    -ms-flex-pack: center !important;
    justify-content: center !important;
  }
  .justify-content-lg-between {
    -ms-flex-pack: justify !important;
    justify-content: space-between !important;
  }
  .justify-content-lg-around {
    -ms-flex-pack: distribute !important;
    justify-content: space-around !important;
  }
  .align-items-lg-start {
    -ms-flex-align: start !important;
    align-items: flex-start !important;
  }
  .align-items-lg-end {
    -ms-flex-align: end !important;
    align-items: flex-end !important;
  }
  .align-items-lg-center {
    -ms-flex-align: center !important;
    align-items: center !important;
  }
  .align-items-lg-baseline {
    -ms-flex-align: baseline !important;
    align-items: baseline !important;
  }
  .align-items-lg-stretch {
    -ms-flex-align: stretch !important;
    align-items: stretch !important;
  }
  .align-content-lg-start {
    -ms-flex-line-pack: start !important;
    align-content: flex-start !important;
  }
  .align-content-lg-end {
    -ms-flex-line-pack: end !important;
    align-content: flex-end !important;
  }
  .align-content-lg-center {
    -ms-flex-line-pack: center !important;
    align-content: center !important;
  }
  .align-content-lg-between {
    -ms-flex-line-pack: justify !important;
    align-content: space-between !important;
  }
  .align-content-lg-around {
    -ms-flex-line-pack: distribute !important;
    align-content: space-around !important;
  }
  .align-content-lg-stretch {
    -ms-flex-line-pack: stretch !important;
    align-content: stretch !important;
  }
  .align-self-lg-auto {
    -ms-flex-item-align: auto !important;
    align-self: auto !important;
  }
  .align-self-lg-start {
    -ms-flex-item-align: start !important;
    align-self: flex-start !important;
  }
  .align-self-lg-end {
    -ms-flex-item-align: end !important;
    align-self: flex-end !important;
  }
  .align-self-lg-center {
    -ms-flex-item-align: center !important;
    align-self: center !important;
  }
  .align-self-lg-baseline {
    -ms-flex-item-align: baseline !important;
    align-self: baseline !important;
  }
  .align-self-lg-stretch {
    -ms-flex-item-align: stretch !important;
    align-self: stretch !important;
  }
}
@media (min-width: 1200px) {
  .flex-xl-row {
    -ms-flex-direction: row !important;
    flex-direction: row !important;
  }
  .flex-xl-column {
    -ms-flex-direction: column !important;
    flex-direction: column !important;
  }
  .flex-xl-row-reverse {
    -ms-flex-direction: row-reverse !important;
    flex-direction: row-reverse !important;
  }
  .flex-xl-column-reverse {
    -ms-flex-direction: column-reverse !important;
    flex-direction: column-reverse !important;
  }
  .flex-xl-wrap {
    -ms-flex-wrap: wrap !important;
    flex-wrap: wrap !important;
  }
  .flex-xl-nowrap {
    -ms-flex-wrap: nowrap !important;
    flex-wrap: nowrap !important;
  }
  .flex-xl-wrap-reverse {
    -ms-flex-wrap: wrap-reverse !important;
    flex-wrap: wrap-reverse !important;
  }
  .justify-content-xl-start {
    -ms-flex-pack: start !important;
    justify-content: flex-start !important;
  }
  .justify-content-xl-end {
    -ms-flex-pack: end !important;
    justify-content: flex-end !important;
  }
  .justify-content-xl-center {
    -ms-flex-pack: center !important;
    justify-content: center !important;
  }
  .justify-content-xl-between {
    -ms-flex-pack: justify !important;
    justify-content: space-between !important;
  }
  .justify-content-xl-around {
    -ms-flex-pack: distribute !important;
    justify-content: space-around !important;
  }
  .align-items-xl-start {
    -ms-flex-align: start !important;
    align-items: flex-start !important;
  }
  .align-items-xl-end {
    -ms-flex-align: end !important;
    align-items: flex-end !important;
  }
  .align-items-xl-center {
    -ms-flex-align: center !important;
    align-items: center !important;
  }
  .align-items-xl-baseline {
    -ms-flex-align: baseline !important;
    align-items: baseline !important;
  }
  .align-items-xl-stretch {
    -ms-flex-align: stretch !important;
    align-items: stretch !important;
  }
  .align-content-xl-start {
    -ms-flex-line-pack: start !important;
    align-content: flex-start !important;
  }
  .align-content-xl-end {
    -ms-flex-line-pack: end !important;
    align-content: flex-end !important;
  }
  .align-content-xl-center {
    -ms-flex-line-pack: center !important;
    align-content: center !important;
  }
  .align-content-xl-between {
    -ms-flex-line-pack: justify !important;
    align-content: space-between !important;
  }
  .align-content-xl-around {
    -ms-flex-line-pack: distribute !important;
    align-content: space-around !important;
  }
  .align-content-xl-stretch {
    -ms-flex-line-pack: stretch !important;
    align-content: stretch !important;
  }
  .align-self-xl-auto {
    -ms-flex-item-align: auto !important;
    align-self: auto !important;
  }
  .align-self-xl-start {
    -ms-flex-item-align: start !important;
    align-self: flex-start !important;
  }
  .align-self-xl-end {
    -ms-flex-item-align: end !important;
    align-self: flex-end !important;
  }
  .align-self-xl-center {
    -ms-flex-item-align: center !important;
    align-self: center !important;
  }
  .align-self-xl-baseline {
    -ms-flex-item-align: baseline !important;
    align-self: baseline !important;
  }
  .align-self-xl-stretch {
    -ms-flex-item-align: stretch !important;
    align-self: stretch !important;
  }
}
.float-left {
  float: left !important;
}
.float-right {
  float: right !important;
}
.float-none {
  float: none !important;
}
@media (min-width: 576px) {
  .float-sm-left {
    float: left !important;
  }
  .float-sm-right {
    float: right !important;
  }
  .float-sm-none {
    float: none !important;
  }
}
@media (min-width: 768px) {
  .float-md-left {
    float: left !important;
  }
  .float-md-right {
    float: right !important;
  }
  .float-md-none {
    float: none !important;
  }
}
@media (min-width: 992px) {
  .float-lg-left {
    float: left !important;
  }
  .float-lg-right {
    float: right !important;
  }
  .float-lg-none {
    float: none !important;
  }
}
@media (min-width: 1200px) {
  .float-xl-left {
    float: left !important;
  }
  .float-xl-right {
    float: right !important;
  }
  .float-xl-none {
    float: none !important;
  }
}
.position-static {
  position: static !important;
}
.position-relative {
  position: relative !important;
}
.position-absolute {
  position: absolute !important;
}
.position-fixed {
  position: fixed !important;
}
.position-sticky {
  position: -webkit-sticky !important;
  position: sticky !important;
}
.search-bar {
  width: 100%;
  margin-top: 16px;
}
.search-bar .search-input {
  display: flex;
  gap: 8px;
}
.search-bar .search-input kronos-input {
  flex-grow: 1;
}
:root {
  --animation-fast: 0.25s;
  --demo-container-border-color: var(--gray-20);
}
:root body.dark {
  --demo-container-border-color: var(--gray-140);
}
* {
  box-sizing: border-box;
}
body {
  font-size: 16px;
  font-family: var(--font-paragraph);
  color: var(--color-text);
  background-color: var(--color-background);
  margin: 0;
  padding: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  perspective: 1000;
  -webkit-perspective: 1000;
}
svg {
  -ms-user-select: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
}
img {
  max-width: 100%;
}
.chart-container {
  width: calc(100% - 30px);
  height: 400px;
}
.demo-container {
  padding: 16px;
  margin-top: 16px;
  margin-bottom: 16px;
  border-radius: var(--border-radius);
  border: var(--default-border);
  border-color: var(--demo-container-border-color);
}
.demo-container .grid-system-demo {
  background-color: var(--demo-container-border-color);
  padding: 8px;
  border: var(--default-border);
}
.d-none {
  display: none;
}

/* angular:styles/global:styles */