.klara-ui-typography {
  color: #415158;
  font-weight: 300;
  font-size: 16px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  line-height: 1.4;
}
.klara-ui-typography h1,
.klara-ui-typography h2,
.klara-ui-typography h3 {
  margin: 0.2em 0;
  font-weight: 500;
  line-height: 1.6;
}
.klara-ui-typography h1 {
  font-size: 29px;
}
.klara-ui-typography h2 {
  font-size: 26px;
}
.klara-ui-typography h3 {
  font-size: 25px;
}
.klara-ui-typography ol,
.klara-ui-typography ul {
  font-size: 16px;
  line-height: 1.6;
}
.klara-ui-typography input,
.klara-ui-typography textarea,
.klara-ui-typography select,
.klara-ui-typography button {
  font-size: inherit;
}
.klara-ui-typography select {
  font-size: 16px;
}
.klara-ui-typography .font-ui {
  color: #99abb3;
  font-size: 16px;
}
.klara-ui-typography .font-ui__button,
.klara-ui-typography .font-ui button {
  color: #415158;
  font-size: 16px;
}
.klara-ui-typography .font-ui__button--large,
.klara-ui-typography .font-ui button--large {
  color: #415158;
  font-weight: 400;
  font-size: 18px;
}
.klara-ui-typography .font-ui__placeholder,
.klara-ui-typography .font-ui *::placeholder,
.klara-ui-typography .font-ui *::-webkit-input-placeholder {
  color: #99abb3 !important;
  font-weight: 300;
  font-size: 16px;
}
.klara-ui-typography .font-ui__text,
.klara-ui-typography .font-ui p {
  color: #415158;
  font-size: 16px;
}
.klara-ui-typography .font-ui__label,
.klara-ui-typography .font-ui label {
  color: #617983;
  font-weight: 300;
  font-size: 16px;
}
.klara-ui-typography .font-ui__label--sub,
.klara-ui-typography .font-ui label--sub {
  color: #617983;
  font-size: 14px;
}
.klara-ui-typography .font-content {
  font-size: 16px;
}
.klara-ui-typography .font-content__headline,
.klara-ui-typography .font-content h2 {
  font-size: 26px;
}
.klara-ui-typography .font-content__headline--sub,
.klara-ui-typography .font-content h3:not(.font-content__card__headline) {
  font-size: 21px;
}
.klara-ui-typography .font-content__preamble {
  font-weight: 500;
  font-size: 16px;
}
.klara-ui-typography .font-content__quote,
.klara-ui-typography .font-content blockquote {
  font-weight: 500;
  font-style: italic;
  font-size: 21px;
}
.klara-ui-typography .font-content__paragraph,
.klara-ui-typography .font-content p:not(.font-content__card__paragraph):not(.font-content__card__preamble) {
  font-size: 16px;
  line-height: 1.4;
}
.klara-ui-typography .font-content__link {
  color: #0075c3;
  font-weight: 400;
}
.klara-ui-typography .font-content__link:hover {
  color: #0087e3;
}
.klara-ui-typography .font-content__card {
  font-size: 14px;
  line-height: 1.2;
}
.klara-ui-typography .font-content__card__headline {
  font-weight: 500;
  font-size: 16px;
}
.klara-ui-typography .font-content__card__preamble {
  font-weight: 500;
  font-size: 14px;
}
.klara-ui-typography .font-content__card__paragraph {
  font-size: 14px;
}
body {
  margin: 0;
}
a:active,
a:hover {
  outline: 0;
}
b,
strong {
  font-weight: 500;
}
h1 {
  font-size: 2rem;
  margin: 0.67em 0;
}
small {
  font-size: 80%;
}
pre {
  overflow: auto;
}
button,
input,
optgroup,
select,
textarea {
  color: inherit; /* 1 */
  font: inherit; /* 2 */
  margin: 0; /* 3 */
}
button[disabled],
html input[disabled] {
  cursor: default;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}
fieldset {
  border: 1px solid $brand-duller;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}
textarea {
  overflow: auto;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
td,
th {
  padding: 0;
}
html {
  font: caption;
  font-weight: 300;
  font-size: 14px;
  line-height: 1.4;
}
.klara-ui-accordion--can-expand {
  position: relative;
  overflow: hidden;
  padding-bottom: 40px;
  transition: height 0.15s ease;
}
.klara-ui-accordion__handle {
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 8px;
  width: 100%;
  height: 40px;
  outline: 0;
  border: 0;
}
.klara-ui-accordion__handle span {
  color: #20292b;
  font-weight: 500;
  font-size: 14px;
}
.klara-ui-accordion__handle svg {
  fill: #20292b;
}
.badge.article-status-badge--published,
.badge.article-status-badge--scheduled {
  background: #d3f0e1;
}
.autocomplete {
  position: relative;
  outline: 0;
}
.autocomplete__pill-wrapper {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.autocomplete__pill-wrapper >:last-child {
  flex: 1;
}
.autocomplete__pill-wrapper .badge {
  align-self: flex-start;
  margin-bottom: 2px;
  padding-top: 1px;
  padding-bottom: 1px;
}
.autocomplete .autocomplete__input-field {
  margin-right: 4px;
  min-width: 16px;
}
.autocomplete .autocomplete__input-field:not(:first-child) {
  margin-left: 4px;
}
.autocomplete .autocomplete__input-field:empty::before {
  color: #99abb3;
  content: attr(placeholder);
}
.autocomplete .autocomplete__input-field-placeholder:not(:first-child) {
  width: 4px;
  transition: width 60ms;
}
.autocomplete .autocomplete__input-field-placeholder:not(.autocomplete--disabled):not(:first-child) {
  cursor: text;
}
.autocomplete .autocomplete__input-field-placeholder:not(.autocomplete--disabled):hover {
  width: 16px;
}
.autocomplete__suggestions {
  position: absolute;
  left: 0;
  z-index: 2;
  overflow-x: hidden;
  overflow-y: scroll;
  margin: 2px 0 0;
  margin-top: -16px;
  padding: 0;
  min-width: 100%;
  max-height: 300px;
  border: 1px solid #fafafa;
  border: 1px solid #99abb3;
  background-color: #fff;
  box-shadow: 0 4px 8px -1px rgba(97,121,131,0.5);
  list-style-type: none;
  word-break: break-word;
  font-size: 14px;
  animation: 0.2s fadein;
}
.autocomplete__suggestions:focus {
  outline: 0;
}
.autocomplete__suggestion {
  padding: 10px;
}
.autocomplete__suggestion--active {
  background-color: #eef1f2;
}
.autocomplete__input {
  flex: 1 0 50px;
}
.autocomplete__input input {
  min-width: 100px;
}
.autocomplete__input--hidden input {
  width: 1px;
  opacity: 0;
}
.autocomplete__input--hidden input:hover {
  cursor: default;
}
@-moz-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.badge {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  box-sizing: border-box;
  padding: 3px 10px 3px 5px;
  min-height: 24px;
  border: 1px solid transparent;
  border-radius: 3px;
  background: #eef1f2;
  color: #415158;
  font-weight: 300;
  font-size: 14px;
  line-height: 1;
}
.badge svg {
  flex-shrink: 0;
  margin: 0 5px 0 0;
  fill: #415158;
}
.badge--right-aligned-icon {
  flex-direction: row-reverse;
  padding: 3px 5px 3px 6px;
}
.badge--right-aligned-icon svg {
  margin: 0 0 0 5px;
}
.badge:focus {
  outline: 1px dotted #99abb3;
}
.badge--dark {
  background: #617983;
  color: #fff;
}
.badge--dark svg {
  fill: #fff;
}
.badge--darker {
  background: #415158;
  color: #fafafa;
}
.badge--darker svg {
  fill: #fafafa;
}
.badge--success {
  background: #d3f0e1;
}
.badge--tooltip {
  position: relative;
}
.button {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding: 8px 6px;
  min-height: 36px;
  border-radius: 3px;
  text-decoration: none;
  transition: background-color 0.1s ease-out, color 0.1s ease-out;
}
.button > span {
  margin: 0 6px;
  min-width: 56px;
}
.button > svg {
  margin-top: -4px;
  margin-bottom: -4px;
}
.button--compact > span {
  margin: 0 2px;
}
a.button {
  display: inline-flex;
}
.button:hover {
  border: 1px solid #f6eef6;
  background: #f6eef6;
  color: $c-primary-fg;
}
.button:hover > svg {
  transition: fill 0.1s ease-out;
  fill: $c-primary-fg;
}
.button--primary:hover {
  border: 1px solid #f6eef6;
  background: #f6eef6;
  color: #fff;
}
.button--primary:hover > svg {
  transition: fill 0.1s ease-out;
  fill: #fff;
}
.button:focus {
  outline: 1px dotted #8c238c;
}
.button[disabled]:hover {
  cursor: not-allowed;
}
.button--ghost {
  border: 1px solid transparent;
  background: transparent;
  color: #8c238c;
}
.button--ghost > svg {
  transition: fill 0.1s ease-out;
  fill: #8c238c;
}
.button--primary.button--default {
  border: 1px solid #8c238c;
  background: #8c238c;
  color: #fff;
}
.button--primary.button--default > svg {
  transition: fill 0.1s ease-out;
  fill: #fff;
}
.button--primary.button--success {
  border: 1px solid #21b468;
  background: #21b468;
  color: #fff;
}
.button--primary.button--success > svg {
  transition: fill 0.1s ease-out;
  fill: #fff;
}
.button--primary.button--warning {
  border: 1px solid #ff9d00;
  background: #ff9d00;
  color: #fff;
}
.button--primary.button--warning > svg {
  transition: fill 0.1s ease-out;
  fill: #fff;
}
.button--primary.button--danger {
  border: 1px solid #da2300;
  background: #da2300;
  color: #fff;
}
.button--primary.button--danger > svg {
  transition: fill 0.1s ease-out;
  fill: #fff;
}
.button--primary.button--inverted {
  border: 1px solid transparent;
  background: rgba(255,255,255,0.3);
  color: #fff;
}
.button--primary.button--inverted > svg {
  transition: fill 0.1s ease-out;
  fill: #fff;
}
.button--primary[disabled] {
  border: 1px solid #99abb3;
  background: #99abb3;
  color: #fff;
}
.button--primary[disabled] > svg {
  transition: fill 0.1s ease-out;
  fill: #fff;
}
.button--standard.button--default {
  border: 1px solid #8c238c;
  background: #fff;
  color: #8c238c;
}
.button--standard.button--default > svg {
  transition: fill 0.1s ease-out;
  fill: #8c238c;
}
.button--standard.button--success {
  border: 1px solid #21b468;
  background: transparent;
  color: #21b468;
}
.button--standard.button--success > svg {
  transition: fill 0.1s ease-out;
  fill: #21b468;
}
.button--standard.button--warning {
  border: 1px solid #ff9d00;
  background: transparent;
  color: #ff9d00;
}
.button--standard.button--warning > svg {
  transition: fill 0.1s ease-out;
  fill: #ff9d00;
}
.button--standard.button--danger {
  border: 1px solid #da2300;
  background: transparent;
  color: #da2300;
}
.button--standard.button--danger > svg {
  transition: fill 0.1s ease-out;
  fill: #da2300;
}
.button--standard.button--inverted {
  border: 1px solid #fff;
  background: transparent;
  color: #fff;
}
.button--standard.button--inverted > svg {
  transition: fill 0.1s ease-out;
  fill: #fff;
}
.button--standard[disabled] {
  border: 1px solid #99abb3;
  background: transparent;
  color: #99abb3;
}
.button--standard[disabled] > svg {
  transition: fill 0.1s ease-out;
  fill: #99abb3;
}
.button.button--active {
  border: 1px solid #a329a3;
  background: #a329a3;
  color: #fff;
}
.button.button--active > svg {
  transition: fill 0.1s ease-out;
  fill: #fff;
}
.button.button--active:hover {
  border: 1px solid #a329a3;
  background: #a329a3;
  color: #fff;
}
.button.button--active:hover > svg {
  transition: fill 0.1s ease-out;
  fill: #fff;
}
.button--default:hover {
  border: 1px solid #a329a3;
  background: #a329a3;
  color: #fff;
}
.button--default:hover > svg {
  transition: fill 0.1s ease-out;
  fill: #fff;
}
.button--success:hover {
  border: 1px solid #27cc76;
  background: #27cc76;
  color: #fff;
}
.button--success:hover > svg {
  transition: fill 0.1s ease-out;
  fill: #fff;
}
.button--warning:hover {
  border: 1px solid #ffb642;
  background: #ffb642;
  color: #fff;
}
.button--warning:hover > svg {
  transition: fill 0.1s ease-out;
  fill: #fff;
}
.button--danger:hover {
  border: 1px solid #f24625;
  background: #f24625;
  color: #fff;
}
.button--danger:hover > svg {
  transition: fill 0.1s ease-out;
  fill: #fff;
}
.button--inverted:hover {
  border: 1px solid #fff;
  background: rgba(255,255,255,0.2);
  color: #fff;
}
.button--inverted:hover > svg {
  transition: fill 0.1s ease-out;
  fill: #fff;
}
.button--ghost:hover {
  border: 1px solid #eef1f2;
  background: #eef1f2;
  color: #8c238c;
}
.button--ghost:hover > svg {
  transition: fill 0.1s ease-out;
  fill: #8c238c;
}
.button--ghost[disabled] {
  border-color: transparent;
}
.button--ghost[disabled]:hover {
  background: none;
  color: #99abb3;
}
.button--ghost[disabled]:hover svg {
  fill: #99abb3;
}
.button--icon.button--started .icon {
  animation: button-spin-animation 1.5s ease-in-out infinite;
}
.button--icon--left svg {
  margin-right: 4px;
}
.button--icon--left > span {
  margin: 0 4px 0 0;
  min-width: 0;
  text-align: left;
}
.button--icon--right svg {
  margin-left: 4px;
}
.button--icon--right > span {
  margin: 0 0 0 4px;
  min-width: 0;
  text-align: left;
}
.button--no-round-left {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.button--no-round-right {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.button--small {
  box-sizing: border-box;
  padding: 4px;
  min-height: 32px;
  font-size: 12px;
}
.button--small > svg {
  width: 20px;
  height: 20px;
}
.button--small.button--icon--left svg {
  margin-right: 2px;
}
.button--small.button--icon--right svg {
  margin-left: 2px;
}
.button--large {
  box-sizing: border-box;
  padding: 12px;
  min-height: 50px;
  font-size: 16px;
}
.button--large > svg {
  width: 24px;
  height: 24px;
}
@-moz-keyframes button-spin-animation {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes button-spin-animation {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-o-keyframes button-spin-animation {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes button-spin-animation {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.checkbox-field {
  display: flex;
  align-items: flex-start;
  padding: 0;
  border: 0;
  background: none;
}
.checkbox-field__label {
  margin: 2px 0 0 4px;
  text-align: left;
  font-size: 14px;
}
.checkbox-field .icon {
  flex: 0 0 auto;
  fill: #415158;
}
.checkbox-field:focus {
  outline: 0;
}
.checkbox-field:focus .icon {
  border: 1px dotted #99abb3;
}
.checkbox-field[disabled] {
  opacity: 0.6;
}
.crow {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  margin: 0;
  padding: 0;
  height: 100%;
}
.crow__ws-auto > * {
  flex: 1;
}
.crow__right {
  justify-content: flex-end;
}
.crow__down {
  align-items: flex-end;
}
.crow__left {
  justify-content: flex-start;
}
.crow__up {
  align-items: flex-start;
}
.crow.crow__gutter-small {
  margin-right: -2px;
  margin-left: -2px;
}
.crow.crow__gutter-small > * {
  padding-right: 2px;
  padding-left: 2px;
}
.crow.crow__gutter-medium {
  margin-right: -4px;
  margin-left: -4px;
}
.crow.crow__gutter-medium > * {
  padding-right: 4px;
  padding-left: 4px;
}
.crow.crow__gutter-large {
  margin-right: -8px;
  margin-left: -8px;
}
.crow.crow__gutter-large > * {
  padding-right: 8px;
  padding-left: 8px;
}
.kui-datepicker {
  display: inline-block;
  background: #fff;
  text-align: center;
  cursor: default;
}
.kui-datepicker:focus {
  outline: 1px dotted #99abb3;
}
.kui-datepicker__calendar {
  border-collapse: collapse;
}
.kui-datepicker__calendar thead td {
  padding: 4px;
}
.kui-datepicker__day {
  padding: 8px;
  border: 1px solid transparent;
  color: #20292b;
  transition: all 100ms;
}
.kui-datepicker__day:hover {
  background: #f7f8f9;
}
.kui-datepicker__day--today {
  font-weight: 900;
}
.kui-datepicker__day--outside-month {
  color: #99abb3;
}
.kui-datepicker__day--selected {
  background: #8c238c;
  color: #fff;
}
.kui-datepicker__day--selected:hover {
  background: #a329a3;
}
.kui-datepicker__day--invalid {
  background: #f7f8f9;
  color: #99abb3;
  cursor: not-allowed;
}
.kui-datepicker__day--invalid:hover {
  background: #f7f8f9;
}
.kui-datepicker__next,
.kui-datepicker__previous {
  font-size: 18px;
}
.kui-datepicker__next:hover,
.kui-datepicker__previous:hover {
  background: #f7f8f9;
}
.kui-timepicker input {
  margin: 8px auto;
  padding: 4px;
  width: 80px;
  outline: 0;
  border: 0;
  border-bottom: 1px solid #d3dbdf;
  text-align: center;
  font-size: 15px;
  -webkit-appearance: none;
}
.kui-timepicker input::-webkit-outer-spin-button,
.kui-timepicker input::-webkit-inner-spin-button,
.kui-timepicker input::-webkit-clear-button {
  display: none;
  -webkit-appearance: none;
}
.kui-timepicker label {
  font-weight: bold;
}
.kui-timepicker--disabled {
  color: #617983;
}
.drop-down {
  position: relative;
  width: 100%;
  user-select: none;
}
.drop-down.margin {
  margin-top: 8px;
  margin-bottom: 12px;
}
.drop-down__button {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: auto;
}
.drop-down__button.ghost > span {
  margin: 0;
  min-width: 0;
}
.drop-down__button svg {
  width: 16px;
  height: 16px;
}
.drop-down .button--ghost {
  z-index: 1;
  padding: 0;
  border: none;
  border-bottom: 1px solid #99abb3;
  border-radius: 0;
  background: transparent;
  color: #415158;
}
.drop-down .button--ghost:hover {
  color: #415158;
}
.drop-down .button--ghost:focus {
  outline: none;
  border-bottom: 2px solid #8c238c;
}
.drop-down .button--ghost:focus > svg {
  fill: #8c238c;
}
.drop-down .button--ghost:focus +label {
  color: #8c238c;
}
.drop-down .button--ghost svg {
  fill: #415158;
}
.drop-down__label {
  position: absolute;
  top: 10px;
  left: 0;
  z-index: 0;
  color: #99abb3;
  font-size: 16px;
  transition: transform 100ms;
  transform-origin: 0 0;
}
.drop-down__label.selected {
  font-size: 14px;
  transform: translate(0, -21px);
}
.drop-down__popover {
  width: 100%;
}
.drop-down__badge {
  margin: 2px;
  white-space: nowrap;
}
.icon-drop-down-option {
  justify-content: unset;
  width: 100%;
  white-space: nowrap;
}
.drop-down-option {
  position: relative;
  display: flex;
  align-items: center;
  padding: 4px 4px 4px 32px;
  height: 36px;
  color: #617983;
  list-style: none;
  white-space: nowrap;
  cursor: default;
}
.drop-down-option > svg {
  position: absolute;
  top: 9px;
  left: 9px;
  fill: $c-focus-color-fill;
}
.drop-down-option:active {
  background-color: #eef1f2;
}
.drop-down-option:last-child {
  margin-bottom: 0;
}
.drop-down-option--highlighted {
  background-color: #eef1f2;
}
.icon {
  fill: #8c238c;
}
.icon__noFill {
  fill: none;
}
.icon--success {
  fill: #21b468;
}
.icon--warning {
  fill: #ff9d00;
}
.icon--danger {
  fill: #da2300;
}
.icon--inverted {
  fill: #617983;
}
.icon[disabled] {
  fill: #99abb3;
}
.klara-ui-list {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}
.klara-ui-list__debug-wrapper {
  background: #e0fcff;
}
.klara-ui-list__auto-size > li {
  flex: 1;
}
.klara-ui-list__centered {
  align-items: center;
}
.klara-ui-list__center-center {
  justify-content: center;
  align-items: center;
  align-content: center;
  height: 100%;
}
.klara-ui-list__center-center.klara-ui-list__padding-small {
  margin-right: -2px;
  margin-left: -2px;
}
.klara-ui-list__center-center.klara-ui-list__padding-small > li {
  padding-right: 2px;
  padding-left: 2px;
}
.klara-ui-list__center-center.klara-ui-list__padding-small.klara-ui-list__debug > li {
  position: relative;
}
.klara-ui-list__center-center.klara-ui-list__padding-small.klara-ui-list__debug > li:not(:first-child):before,
.klara-ui-list__center-center.klara-ui-list__padding-small.klara-ui-list__debug > li:not(:last-child):after {
  position: absolute;
  top: 0;
  width: 2px;
  height: 100%;
  content: "";
}
.klara-ui-list__center-center.klara-ui-list__padding-small.klara-ui-list__debug > li:not(:first-child):before {
  right: 100%;
  background: #79e5ad;
}
.klara-ui-list__center-center.klara-ui-list__padding-small.klara-ui-list__debug > li:not(:last-child):after {
  left: 100%;
  background: #21b468;
}
.klara-ui-list__center-center.klara-ui-list__padding-medium {
  margin-right: -4px;
  margin-left: -4px;
}
.klara-ui-list__center-center.klara-ui-list__padding-medium > li {
  padding-right: 4px;
  padding-left: 4px;
}
.klara-ui-list__center-center.klara-ui-list__padding-medium.klara-ui-list__debug > li {
  position: relative;
}
.klara-ui-list__center-center.klara-ui-list__padding-medium.klara-ui-list__debug > li:not(:first-child):before,
.klara-ui-list__center-center.klara-ui-list__padding-medium.klara-ui-list__debug > li:not(:last-child):after {
  position: absolute;
  top: 0;
  width: 4px;
  height: 100%;
  content: "";
}
.klara-ui-list__center-center.klara-ui-list__padding-medium.klara-ui-list__debug > li:not(:first-child):before {
  right: 100%;
  background: #79e5ad;
}
.klara-ui-list__center-center.klara-ui-list__padding-medium.klara-ui-list__debug > li:not(:last-child):after {
  left: 100%;
  background: #21b468;
}
.klara-ui-list__center-center.klara-ui-list__padding-large {
  margin-right: -8px;
  margin-left: -8px;
}
.klara-ui-list__center-center.klara-ui-list__padding-large > li {
  padding-right: 8px;
  padding-left: 8px;
}
.klara-ui-list__center-center.klara-ui-list__padding-large.klara-ui-list__debug > li {
  position: relative;
}
.klara-ui-list__center-center.klara-ui-list__padding-large.klara-ui-list__debug > li:not(:first-child):before,
.klara-ui-list__center-center.klara-ui-list__padding-large.klara-ui-list__debug > li:not(:last-child):after {
  position: absolute;
  top: 0;
  width: 8px;
  height: 100%;
  content: "";
}
.klara-ui-list__center-center.klara-ui-list__padding-large.klara-ui-list__debug > li:not(:first-child):before {
  right: 100%;
  background: #79e5ad;
}
.klara-ui-list__center-center.klara-ui-list__padding-large.klara-ui-list__debug > li:not(:last-child):after {
  left: 100%;
  background: #21b468;
}
.klara-ui-list__right {
  flex-direction: row;
  justify-content: flex-end;
}
.klara-ui-list__right.klara-ui-list__padding-small {
  margin-right: -2px;
  margin-left: -2px;
}
.klara-ui-list__right.klara-ui-list__padding-small > li {
  padding-right: 2px;
  padding-left: 2px;
}
.klara-ui-list__right.klara-ui-list__padding-small.klara-ui-list__debug > li {
  position: relative;
}
.klara-ui-list__right.klara-ui-list__padding-small.klara-ui-list__debug > li:not(:first-child):before,
.klara-ui-list__right.klara-ui-list__padding-small.klara-ui-list__debug > li:not(:last-child):after {
  position: absolute;
  top: 0;
  width: 2px;
  height: 100%;
  content: "";
}
.klara-ui-list__right.klara-ui-list__padding-small.klara-ui-list__debug > li:not(:first-child):before {
  right: 100%;
  background: #79e5ad;
}
.klara-ui-list__right.klara-ui-list__padding-small.klara-ui-list__debug > li:not(:last-child):after {
  left: 100%;
  background: #21b468;
}
.klara-ui-list__right.klara-ui-list__padding-medium {
  margin-right: -4px;
  margin-left: -4px;
}
.klara-ui-list__right.klara-ui-list__padding-medium > li {
  padding-right: 4px;
  padding-left: 4px;
}
.klara-ui-list__right.klara-ui-list__padding-medium.klara-ui-list__debug > li {
  position: relative;
}
.klara-ui-list__right.klara-ui-list__padding-medium.klara-ui-list__debug > li:not(:first-child):before,
.klara-ui-list__right.klara-ui-list__padding-medium.klara-ui-list__debug > li:not(:last-child):after {
  position: absolute;
  top: 0;
  width: 4px;
  height: 100%;
  content: "";
}
.klara-ui-list__right.klara-ui-list__padding-medium.klara-ui-list__debug > li:not(:first-child):before {
  right: 100%;
  background: #79e5ad;
}
.klara-ui-list__right.klara-ui-list__padding-medium.klara-ui-list__debug > li:not(:last-child):after {
  left: 100%;
  background: #21b468;
}
.klara-ui-list__right.klara-ui-list__padding-large {
  margin-right: -8px;
  margin-left: -8px;
}
.klara-ui-list__right.klara-ui-list__padding-large > li {
  padding-right: 8px;
  padding-left: 8px;
}
.klara-ui-list__right.klara-ui-list__padding-large.klara-ui-list__debug > li {
  position: relative;
}
.klara-ui-list__right.klara-ui-list__padding-large.klara-ui-list__debug > li:not(:first-child):before,
.klara-ui-list__right.klara-ui-list__padding-large.klara-ui-list__debug > li:not(:last-child):after {
  position: absolute;
  top: 0;
  width: 8px;
  height: 100%;
  content: "";
}
.klara-ui-list__right.klara-ui-list__padding-large.klara-ui-list__debug > li:not(:first-child):before {
  right: 100%;
  background: #79e5ad;
}
.klara-ui-list__right.klara-ui-list__padding-large.klara-ui-list__debug > li:not(:last-child):after {
  left: 100%;
  background: #21b468;
}
.klara-ui-list__down {
  display: inline-flex;
  flex-direction: column;
  justify-content: flex-end;
}
.klara-ui-list__down.klara-ui-list__padding-small {
  margin-top: -2px;
  margin-bottom: -2px;
}
.klara-ui-list__down.klara-ui-list__padding-small > li {
  padding-top: 2px;
  padding-bottom: 2px;
}
.klara-ui-list__down.klara-ui-list__padding-small.klara-ui-list__debug > li {
  position: relative;
}
.klara-ui-list__down.klara-ui-list__padding-small.klara-ui-list__debug > li:not(:first-child):before,
.klara-ui-list__down.klara-ui-list__padding-small.klara-ui-list__debug > li:not(:last-child):after {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  content: "";
}
.klara-ui-list__down.klara-ui-list__padding-small.klara-ui-list__debug > li:not(:first-child):before {
  bottom: 100%;
  background: #79e5ad;
}
.klara-ui-list__down.klara-ui-list__padding-small.klara-ui-list__debug > li:not(:last-child):after {
  top: 100%;
  background: #21b468;
}
.klara-ui-list__down.klara-ui-list__padding-medium {
  margin-top: -4px;
  margin-bottom: -4px;
}
.klara-ui-list__down.klara-ui-list__padding-medium > li {
  padding-top: 4px;
  padding-bottom: 4px;
}
.klara-ui-list__down.klara-ui-list__padding-medium.klara-ui-list__debug > li {
  position: relative;
}
.klara-ui-list__down.klara-ui-list__padding-medium.klara-ui-list__debug > li:not(:first-child):before,
.klara-ui-list__down.klara-ui-list__padding-medium.klara-ui-list__debug > li:not(:last-child):after {
  position: absolute;
  left: 0;
  width: 100%;
  height: 4px;
  content: "";
}
.klara-ui-list__down.klara-ui-list__padding-medium.klara-ui-list__debug > li:not(:first-child):before {
  bottom: 100%;
  background: #79e5ad;
}
.klara-ui-list__down.klara-ui-list__padding-medium.klara-ui-list__debug > li:not(:last-child):after {
  top: 100%;
  background: #21b468;
}
.klara-ui-list__down.klara-ui-list__padding-large {
  margin-top: -8px;
  margin-bottom: -8px;
}
.klara-ui-list__down.klara-ui-list__padding-large > li {
  padding-top: 8px;
  padding-bottom: 8px;
}
.klara-ui-list__down.klara-ui-list__padding-large.klara-ui-list__debug > li {
  position: relative;
}
.klara-ui-list__down.klara-ui-list__padding-large.klara-ui-list__debug > li:not(:first-child):before,
.klara-ui-list__down.klara-ui-list__padding-large.klara-ui-list__debug > li:not(:last-child):after {
  position: absolute;
  left: 0;
  width: 100%;
  height: 8px;
  content: "";
}
.klara-ui-list__down.klara-ui-list__padding-large.klara-ui-list__debug > li:not(:first-child):before {
  bottom: 100%;
  background: #79e5ad;
}
.klara-ui-list__down.klara-ui-list__padding-large.klara-ui-list__debug > li:not(:last-child):after {
  top: 100%;
  background: #21b468;
}
.klara-ui-list__left {
  flex-direction: row;
  justify-content: flex-start;
}
.klara-ui-list__left.klara-ui-list__padding-small {
  margin-right: -2px;
  margin-left: -2px;
}
.klara-ui-list__left.klara-ui-list__padding-small > li {
  padding-right: 2px;
  padding-left: 2px;
}
.klara-ui-list__left.klara-ui-list__padding-small.klara-ui-list__debug > li {
  position: relative;
}
.klara-ui-list__left.klara-ui-list__padding-small.klara-ui-list__debug > li:not(:first-child):before,
.klara-ui-list__left.klara-ui-list__padding-small.klara-ui-list__debug > li:not(:last-child):after {
  position: absolute;
  top: 0;
  width: 2px;
  height: 100%;
  content: "";
}
.klara-ui-list__left.klara-ui-list__padding-small.klara-ui-list__debug > li:not(:first-child):before {
  right: 100%;
  background: #79e5ad;
}
.klara-ui-list__left.klara-ui-list__padding-small.klara-ui-list__debug > li:not(:last-child):after {
  left: 100%;
  background: #21b468;
}
.klara-ui-list__left.klara-ui-list__padding-medium {
  margin-right: -4px;
  margin-left: -4px;
}
.klara-ui-list__left.klara-ui-list__padding-medium > li {
  padding-right: 4px;
  padding-left: 4px;
}
.klara-ui-list__left.klara-ui-list__padding-medium.klara-ui-list__debug > li {
  position: relative;
}
.klara-ui-list__left.klara-ui-list__padding-medium.klara-ui-list__debug > li:not(:first-child):before,
.klara-ui-list__left.klara-ui-list__padding-medium.klara-ui-list__debug > li:not(:last-child):after {
  position: absolute;
  top: 0;
  width: 4px;
  height: 100%;
  content: "";
}
.klara-ui-list__left.klara-ui-list__padding-medium.klara-ui-list__debug > li:not(:first-child):before {
  right: 100%;
  background: #79e5ad;
}
.klara-ui-list__left.klara-ui-list__padding-medium.klara-ui-list__debug > li:not(:last-child):after {
  left: 100%;
  background: #21b468;
}
.klara-ui-list__left.klara-ui-list__padding-large {
  margin-right: -8px;
  margin-left: -8px;
}
.klara-ui-list__left.klara-ui-list__padding-large > li {
  padding-right: 8px;
  padding-left: 8px;
}
.klara-ui-list__left.klara-ui-list__padding-large.klara-ui-list__debug > li {
  position: relative;
}
.klara-ui-list__left.klara-ui-list__padding-large.klara-ui-list__debug > li:not(:first-child):before,
.klara-ui-list__left.klara-ui-list__padding-large.klara-ui-list__debug > li:not(:last-child):after {
  position: absolute;
  top: 0;
  width: 8px;
  height: 100%;
  content: "";
}
.klara-ui-list__left.klara-ui-list__padding-large.klara-ui-list__debug > li:not(:first-child):before {
  right: 100%;
  background: #79e5ad;
}
.klara-ui-list__left.klara-ui-list__padding-large.klara-ui-list__debug > li:not(:last-child):after {
  left: 100%;
  background: #21b468;
}
.klara-ui-list__up {
  display: inline-flex;
  flex-direction: column;
  justify-content: flex-start;
}
.klara-ui-list__up.klara-ui-list__padding-small {
  margin-top: -2px;
  margin-bottom: -2px;
}
.klara-ui-list__up.klara-ui-list__padding-small > li {
  padding-top: 2px;
  padding-bottom: 2px;
}
.klara-ui-list__up.klara-ui-list__padding-small.klara-ui-list__debug > li {
  position: relative;
}
.klara-ui-list__up.klara-ui-list__padding-small.klara-ui-list__debug > li:not(:first-child):before,
.klara-ui-list__up.klara-ui-list__padding-small.klara-ui-list__debug > li:not(:last-child):after {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  content: "";
}
.klara-ui-list__up.klara-ui-list__padding-small.klara-ui-list__debug > li:not(:first-child):before {
  bottom: 100%;
  background: #79e5ad;
}
.klara-ui-list__up.klara-ui-list__padding-small.klara-ui-list__debug > li:not(:last-child):after {
  top: 100%;
  background: #21b468;
}
.klara-ui-list__up.klara-ui-list__padding-medium {
  margin-top: -4px;
  margin-bottom: -4px;
}
.klara-ui-list__up.klara-ui-list__padding-medium > li {
  padding-top: 4px;
  padding-bottom: 4px;
}
.klara-ui-list__up.klara-ui-list__padding-medium.klara-ui-list__debug > li {
  position: relative;
}
.klara-ui-list__up.klara-ui-list__padding-medium.klara-ui-list__debug > li:not(:first-child):before,
.klara-ui-list__up.klara-ui-list__padding-medium.klara-ui-list__debug > li:not(:last-child):after {
  position: absolute;
  left: 0;
  width: 100%;
  height: 4px;
  content: "";
}
.klara-ui-list__up.klara-ui-list__padding-medium.klara-ui-list__debug > li:not(:first-child):before {
  bottom: 100%;
  background: #79e5ad;
}
.klara-ui-list__up.klara-ui-list__padding-medium.klara-ui-list__debug > li:not(:last-child):after {
  top: 100%;
  background: #21b468;
}
.klara-ui-list__up.klara-ui-list__padding-large {
  margin-top: -8px;
  margin-bottom: -8px;
}
.klara-ui-list__up.klara-ui-list__padding-large > li {
  padding-top: 8px;
  padding-bottom: 8px;
}
.klara-ui-list__up.klara-ui-list__padding-large.klara-ui-list__debug > li {
  position: relative;
}
.klara-ui-list__up.klara-ui-list__padding-large.klara-ui-list__debug > li:not(:first-child):before,
.klara-ui-list__up.klara-ui-list__padding-large.klara-ui-list__debug > li:not(:last-child):after {
  position: absolute;
  left: 0;
  width: 100%;
  height: 8px;
  content: "";
}
.klara-ui-list__up.klara-ui-list__padding-large.klara-ui-list__debug > li:not(:first-child):before {
  bottom: 100%;
  background: #79e5ad;
}
.klara-ui-list__up.klara-ui-list__padding-large.klara-ui-list__debug > li:not(:last-child):after {
  top: 100%;
  background: #21b468;
}
.kui-menu-bar {
  width: 190px;
  background: #fff;
}
.kui-menu-bar > ul {
  width: 100%;
}
.kui-menu-bar .button {
  justify-content: flex-start;
  padding: 12px;
  width: 100%;
  border: 0;
  border-radius: 0;
  background: none;
  color: #415158;
}
.kui-menu-bar .button > span {
  font-size: 18px;
}
.kui-menu-bar .button svg {
  margin-right: 8px;
  fill: #415158;
}
.kui-menu-bar .button:hover {
  background: #eef1f2;
}
.kui-menu-bar .button.active {
  background: #d3dbdf;
}
.kui-menu-bar__gray {
  background: #eef1f2;
}
.kui-menu-bar__horizontal {
  width: 100%;
}
.kui-menu-bar__horizontal li {
  flex: 1;
}
.kui-menu-bar__horizontal .button {
  justify-content: center;
  padding: 12px;
  border-bottom: 2px solid transparent;
  color: #99abb3;
}
.kui-menu-bar__horizontal .button > span {
  white-space: nowrap;
  font-size: 16px;
}
.kui-menu-bar__horizontal .button:focus {
  outline: 0;
}
.kui-menu-bar__horizontal .button svg {
  fill: #99abb3;
}
.kui-menu-bar__horizontal .button.active {
  border-color: #a329a3;
  background: transparent;
  color: #a329a3;
}
.kui-menu-bar__horizontal .button.active svg {
  fill: #a329a3;
}
.klara-ui-modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  display: flex;
  background: rgba(255,255,255,0.4);
}
.klara-ui-modal__container {
  display: flex;
  flex-flow: column nowrap;
  margin: auto;
  max-width: 550px;
  max-height: 800px;
  width: 80%;
  height: 80%;
  border: 1px solid #99abb3;
  border-radius: 4px;
  background: White;
  box-shadow: 0 2px 10px rgba(32,41,43,0.2);
}
.klara-ui-modal__title {
  margin: 4px 0;
  font-weight: normal;
  font-size: 21px;
  line-height: 1;
}
.klara-ui-modal header {
  flex: 0;
  padding: 16px;
  border-bottom: 1px solid #eef1f2;
  color: #99abb3;
  text-align: center;
}
.klara-ui-modal__content {
  position: relative;
  flex: 1;
  overflow-y: scroll;
  padding: 2em;
}
.klara-ui-modal footer {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  padding: 16px;
  border-top: 1px solid #eef1f2;
}
.klara-ui-modal footer > * {
  margin: 0 0 0 0.5em;
}
.notification {
  display: flex;
  align-items: center;
  background: #da2300;
  color: #fff;
  transition: all 0.5s linear;
}
.notification--overlay {
  position: absolute;
  right: 0;
  bottom: -50px;
  left: 0;
  min-height: 50px;
}
.notification--overlay.notification--showing {
  bottom: 0;
}
.notification--non-overlay {
  height: 0;
}
.notification--non-overlay .notification__inner {
  height: 0;
  transition: all 0.5s linear;
  transform: translateY(25px);
}
.notification--non-overlay.notification--showing {
  height: 50px;
}
.notification--non-overlay.notification--showing .notification__inner {
  display: flex;
  transform: translateY(0);
}
.notification__inner {
  display: flex;
  flex: 1 1 auto;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 6px;
}
.notification__inner button {
  margin-right: 5px;
}
.notification__inner button:last-child {
  margin-right: 0;
}
.notification__inner .notification__countdown-value {
  margin-left: 10px;
}
.notification__body {
  display: flex;
  flex: 1 1 auto;
  justify-content: center;
  align-items: center;
  margin-right: 5px;
}
.notification__body strong {
  margin-right: 5px;
}
.notification--info {
  background: #20292b;
}
.notification--success {
  background: #21b468;
}
.notification--hidden {
  bottom: -50px;
}
.klara-ui-popover {
  position: absolute;
  z-index: 999;
  transition-duration: 100ms;
  transition-property: left, top;
}
.klara-ui-popover__content {
  position: absolute;
  padding: 8px;
  border: 1px solid #99abb3;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(32,41,43,0.2);
  transition-duration: 100ms;
  transition-property: left, top;
}
.klara-ui-popover__attach-arrow {
  position: absolute;
  display: block;
  width: 12px;
  height: 12px;
  border-right: 1px solid #99abb3;
  border-bottom: 1px solid #99abb3;
  background: #fff;
}
.kui-radiobuttons__option {
  display: flex;
  align-items: center;
}
.kui-radiobuttons__option:focus {
  outline: 1px dashed #99abb3;
}
.kui-radiobuttons__option .icon {
  margin-right: 4px;
  fill: #415158;
}
.spinner--fadein {
  animation: fade-in-animation 1s ease-in-out 1;
}
@-moz-keyframes fade-in-animation {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes fade-in-animation {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-o-keyframes fade-in-animation {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade-in-animation {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.spinner--fading path:nth-child(1) {
  opacity: 0.3;
  animation: fading-cake-animation 1.1s ease-in-out infinite;
}
.spinner--fading path:nth-child(2) {
  opacity: 0.3;
  animation: fading-cake-animation 1.1s ease-in-out infinite;
  animation-delay: 0.25s;
}
.spinner--fading path:nth-child(3) {
  opacity: 0.3;
  animation: fading-cake-animation 1.1s ease-in-out infinite;
  animation-delay: 0.5s;
}
.spinner--fading path:nth-child(4) {
  opacity: 0.3;
  animation: fading-cake-animation 1.1s ease-in-out infinite;
  animation-delay: 0.75s;
}
@-moz-keyframes fading-cake-animation {
  0% {
    opacity: 0.3;
  }
  25% {
    opacity: 0.4;
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: 0.4;
  }
  100% {
    opacity: 0.3;
  }
}
@-webkit-keyframes fading-cake-animation {
  0% {
    opacity: 0.3;
  }
  25% {
    opacity: 0.4;
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: 0.4;
  }
  100% {
    opacity: 0.3;
  }
}
@-o-keyframes fading-cake-animation {
  0% {
    opacity: 0.3;
  }
  25% {
    opacity: 0.4;
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: 0.4;
  }
  100% {
    opacity: 0.3;
  }
}
@keyframes fading-cake-animation {
  0% {
    opacity: 0.3;
  }
  25% {
    opacity: 0.4;
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: 0.4;
  }
  100% {
    opacity: 0.3;
  }
}
.spinner--light path:nth-child(1),
.spinner--light path:nth-child(2),
.spinner--light path:nth-child(3),
.spinner--light path:nth-child(4) {
  fill: #fff;
}
.spinner--robot path:nth-child(1) {
  animation: cake-animation-1 1.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) infinite;
}
.spinner--robot path:nth-child(2) {
  animation: cake-animation-2 1.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) infinite;
  animation-delay: 0.3s;
}
.spinner--robot path:nth-child(3) {
  animation: cake-animation-3 1.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) infinite;
  animation-delay: 0.6s;
}
.spinner--robot path:nth-child(4) {
  animation: cake-animation-4 1.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) infinite;
  animation-delay: 0.9s;
}
@-moz-keyframes cake-animation-1 {
  0% {
    transform: translate(0, 0);
  }
  20% {
    transform: translate(1px, -1px);
  }
  45% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, 0);
  }
}
@-webkit-keyframes cake-animation-1 {
  0% {
    transform: translate(0, 0);
  }
  20% {
    transform: translate(1px, -1px);
  }
  45% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, 0);
  }
}
@-o-keyframes cake-animation-1 {
  0% {
    transform: translate(0, 0);
  }
  20% {
    transform: translate(1px, -1px);
  }
  45% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, 0);
  }
}
@keyframes cake-animation-1 {
  0% {
    transform: translate(0, 0);
  }
  20% {
    transform: translate(1px, -1px);
  }
  45% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, 0);
  }
}
@-moz-keyframes cake-animation-2 {
  0% {
    transform: translate(0, 0);
  }
  20% {
    transform: translate(1px, 0);
  }
  45% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, 0);
  }
}
@-webkit-keyframes cake-animation-2 {
  0% {
    transform: translate(0, 0);
  }
  20% {
    transform: translate(1px, 0);
  }
  45% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, 0);
  }
}
@-o-keyframes cake-animation-2 {
  0% {
    transform: translate(0, 0);
  }
  20% {
    transform: translate(1px, 0);
  }
  45% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, 0);
  }
}
@keyframes cake-animation-2 {
  0% {
    transform: translate(0, 0);
  }
  20% {
    transform: translate(1px, 0);
  }
  45% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, 0);
  }
}
@-moz-keyframes cake-animation-3 {
  0% {
    transform: translate(0, 0);
  }
  20% {
    transform: translate(1px, 1px);
  }
  45% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, 0);
  }
}
@-webkit-keyframes cake-animation-3 {
  0% {
    transform: translate(0, 0);
  }
  20% {
    transform: translate(1px, 1px);
  }
  45% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, 0);
  }
}
@-o-keyframes cake-animation-3 {
  0% {
    transform: translate(0, 0);
  }
  20% {
    transform: translate(1px, 1px);
  }
  45% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, 0);
  }
}
@keyframes cake-animation-3 {
  0% {
    transform: translate(0, 0);
  }
  20% {
    transform: translate(1px, 1px);
  }
  45% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, 0);
  }
}
@-moz-keyframes cake-animation-4 {
  0% {
    transform: translate(0, 0);
  }
  20% {
    transform: translate(-1px, 0);
  }
  45% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, 0);
  }
}
@-webkit-keyframes cake-animation-4 {
  0% {
    transform: translate(0, 0);
  }
  20% {
    transform: translate(-1px, 0);
  }
  45% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, 0);
  }
}
@-o-keyframes cake-animation-4 {
  0% {
    transform: translate(0, 0);
  }
  20% {
    transform: translate(-1px, 0);
  }
  45% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, 0);
  }
}
@keyframes cake-animation-4 {
  0% {
    transform: translate(0, 0);
  }
  20% {
    transform: translate(-1px, 0);
  }
  45% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, 0);
  }
}
.klara-ui-switch {
  display: inline-flex;
  line-height: 1;
}
.klara-ui-switch__input {
  position: absolute;
  visibility: hidden;
}
.klara-ui-switch__input:focus + .klara-ui-switch__wrapper {
  outline: 1px dotted #8c238c;
}
.klara-ui-switch__label-text {
  margin: 0 10px;
  font-size: 14px;
  user-select: none;
}
.klara-ui-switch__wrapper {
  position: relative;
  display: inline-flex;
  width: 34px;
  height: 20px;
}
.klara-ui-switch__wrapper--disabled {
  cursor: not-allowed;
}
.klara-ui-switch__wrapper--disabled .klara-ui-switch__track,
.klara-ui-switch__wrapper--disabled .klara-ui-switch__knob {
  border-color: #d3dbdf;
  background: #eef1f2;
}
.klara-ui-switch__track {
  position: absolute;
  width: 100%;
  height: 14px;
  border: 1px solid #99abb3;
  border-radius: 3em;
  background: #fff;
  transition: background 0.2s;
}
.klara-ui-switch__track--on {
  border-color: #8c238c;
  background: #a329a3;
}
.klara-ui-switch__knob {
  position: absolute;
  top: -3px;
  left: 0;
  box-sizing: inherit;
  width: 20px;
  height: 20px;
  border: 1px solid #99abb3;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2);
  transition: left 0.3s;
}
.klara-ui-switch__knob--on {
  right: 0;
  left: 15.3px;
  border-color: #8c238c;
}
.klara-ui-tabs {
  position: relative;
  display: flex;
  flex: 1;
  align-items: center;
  overflow: hidden;
  margin: 0;
  padding: 8px 0 0;
  background: #f7f8f9;
  cursor: default;
  user-select: none;
}
.klara-ui-tabs::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: #d3dbdf;
  content: "";
}
.klara-ui-tabs__inner {
  display: flex;
  flex: 1;
  align-items: center;
  overflow-x: hidden;
  overflow-y: hidden;
  padding: 0 8px;
}
.klara-ui-tabs__inner::-webkit-scrollbar {
  display: none;
}
.klara-ui-tabs__overflow-indicator--left,
.klara-ui-tabs__overflow-indicator--right {
  position: absolute;
  top: 8px;
  bottom: 1px;
  z-index: 200;
  display: flex;
  align-items: center;
  width: 0;
  transition: all 150ms;
}
.klara-ui-tabs__overflow-indicator--left.visible,
.klara-ui-tabs__overflow-indicator--right.visible {
  width: 60px;
}
.klara-ui-tabs__overflow-indicator--left.visible > svg,
.klara-ui-tabs__overflow-indicator--right.visible > svg {
  opacity: 1;
}
.klara-ui-tabs__overflow-indicator--left > svg,
.klara-ui-tabs__overflow-indicator--right > svg {
  opacity: 0;
  transition: fill 150ms;
  fill: #99abb3;
}
.klara-ui-tabs__overflow-indicator--left:hover > svg,
.klara-ui-tabs__overflow-indicator--right:hover > svg {
  fill: #617983;
}
.klara-ui-tabs__overflow-indicator--left {
  left: 0;
  background: linear-gradient(to right, #f7f8f9 50%, transparent);
}
.klara-ui-tabs__overflow-indicator--right {
  right: 0;
  justify-content: flex-end;
  background: linear-gradient(to left, #f7f8f9 50%, transparent);
}
.klara-ui-tabs__tab {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  padding: 0 12px 0 16px;
  max-width: 175px;
  height: 40px;
  color: #617983;
}
.klara-ui-tabs__tab-enter .klara-ui-tabs__tab {
  top: 40px;
  transition: all 150ms;
}
.klara-ui-tabs__tab-enter-active .klara-ui-tabs__tab {
  top: 0;
}
.klara-ui-tabs__tab-exit .klara-ui-tabs__tab {
  top: 0;
  transition: all 150ms;
}
.klara-ui-tabs__tab-exit-active .klara-ui-tabs__tab {
  top: 40px;
}
.klara-ui-tabs__tab--active {
  z-index: 100;
  color: #415158;
}
.klara-ui-tabs__tab--active .klara-ui-tabs__tab__title::before {
  opacity: 0;
}
.klara-ui-tabs__tab--active .klara-ui-tabs__tab__title::after {
  opacity: 1;
}
.klara-ui-tabs__tab--active .klara-ui-tabs__tab__background {
  border-color: #d3dbdf;
  background: #fff;
}
.klara-ui-tabs__tab__title {
  position: relative;
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
}
.klara-ui-tabs__tab__title::before,
.klara-ui-tabs__tab__title::after {
  position: absolute;
  top: 0;
  right: 0;
  width: 30px;
  height: 100%;
  content: "";
}
.klara-ui-tabs__tab__title::before {
  background: linear-gradient(to left, #f7f8f9 20%, transparent);
  opacity: 1;
}
.klara-ui-tabs__tab__title::after {
  background: linear-gradient(to left, #fff 20%, transparent);
  opacity: 0;
}
.klara-ui-tabs__tab__close {
  z-index: 1;
  display: flex;
  justify-content: center;
}
.klara-ui-tabs__tab__close svg {
  fill: #617983;
}
.klara-ui-tabs__tab__background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 1px solid transparent;
  border-bottom: 0;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  background: #f7f8f9;
  pointer-events: none;
}
.klara-ui-tabs__tab::after {
  position: absolute;
  top: 20%;
  right: -1px;
  z-index: 1;
  width: 1px;
  height: 60%;
  background: #99abb3;
  content: "";
}
.klara-ui-tabs__tab--active::after {
  display: none;
}
.klara-ui-tabs [data-react-beautiful-dnd-drag-handle] {
  flex: 1;
  max-width: 175px;
  outline: 0;
  cursor: default;
}
.klara-ui-tabs__transition-group {
  display: flex;
  flex: 1;
}
.klara-ui-tabs [data-react-beautiful-dnd-droppable] {
  display: flex;
  flex: 1;
}
.klara-ui-tabs__add-tab {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  margin: 0 4px;
}
.klara-ui-tabs__add-tab button {
  width: 32px;
  outline: 0 !important;
  border-radius: 50%;
}
.field-counter {
  color: #99abb3;
  white-space: nowrap;
}
.field-counter--maxed {
  color: #da2300;
}
.text-field {
/*
   * Goal is to have following setup
   * Label + 6px + Text + 6px + Floor + 6px + Helper/Error Text
   */
  position: relative;
  padding: 16px 0 0;
  font-size: 16px;
  line-height: 24px;
}
.text-field__label {
  position: absolute;
  color: #99abb3;
  pointer-events: none;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  white-space: nowrap;
}
.text-field__label {
  transition: transform 100ms;
  transform-origin: 0 0;
}
.text-field__placeholder {
  color: #99abb3;
}
.text-field__input-container {
  position: relative;
  padding-right: 20px;
}
.text-field__icon {
  position: absolute;
  right: 0;
  bottom: 5px;
  min-width: 18px;
}
.text-field__control {
  min-height: 26px;
  border: 0 none;
  background: rgba(0,0,0,0);
  color: #415158;
  font-family: inherit;
  line-height: inherit;
  resize: none;
  appearance: none;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  caret-color: #415158;
}
.text-field__control:focus {
  outline: 0 none;
}
.text-field__control::placeholder {
  color: #99abb3;
}
.text-field__control--native {
  display: block;
  box-sizing: border-box;
  margin: 0;
  padding: 0 0 2px;
  width: 100%;
}
.text-field__floor-wrap {
  margin: 0 0 5px;
}
.text-field__floor {
  position: absolute;
  margin: 0;
  width: 100%;
  border: 0 none;
  border-bottom: 1px solid #99abb3;
  transition: border-color 100ms;
}
.text-field__footer {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  min-height: 16px;
  font-size: 14px;
  line-height: 16px;
  pointer-events: none;
}
.text-field__error-text,
.text-field__helper-text {
  flex: 1;
  color: #99abb3;
}
.text-field__error-text {
  color: #da2300;
}
.text-field__counter {
  margin: 0 0 0 15px;
}
.text-field:hover .text-field__floor {
  border-bottom: 1px solid #617983;
}
.text-field:focus {
  outline: 0 none;
}
.text-field.text-field--focused .text-field__label {
  transform: scale(0.875) translateY(-23.5px);
  color: #8c238c;
}
.text-field.text-field--focused .text-field__floor {
  border-bottom: 2px solid #8c238c;
}
.text-field--filled .text-field__label {
  transform: scale(0.875) translateY(-23.5px);
}
.text-field.text-field--invalid .text-field__label {
  transform: scale(0.875) translateY(-23.5px);
  color: #da2300;
}
.text-field.text-field--invalid .text-field__floor {
  border-bottom: 2px solid #da2300;
}
.text-field.text-field--disabled {
  cursor: not-allowed;
}
.text-field.text-field--disabled .text-field__control {
  color: #617983;
  cursor: inherit;
}
.text-field.text-field--disabled .text-field__floor {
  border-bottom: 1px solid #eef1f2;
}
mark {
  display: inline;
  background-color: transparent;
  color: #00b0c5;
  font-weight: 500;
}
.toggle-button-group {
  display: flex;
  flex-wrap: nowrap;
}
.toggle-button-group .button {
  border-radius: 3px;
}
.toggle-button-group .button > span {
  min-width: auto;
}
.toggle-button-group .button--active,
.toggle-button-group .button--active:hover {
  background-color: #8c238c;
  color: #fff;
}
.klara-ui-tooltip {
  position: absolute;
}
.klara-ui-tooltip__hoverable .klara-ui-tooltip {
  opacity: 0;
  pointer-events: none;
}
.klara-ui-tooltip__hoverable:hover .klara-ui-tooltip {
  opacity: 1;
}
.klara-ui-tooltip__inner {
  position: relative;
  padding: 4px 6px 6px 8px;
  background: #20292b;
  box-shadow: 1px 1px 1px rgba(0,0,0,0.4);
}
.klara-ui-tooltip:before {
  position: absolute;
  margin-top: -5px;
  width: 10px;
  height: 10px;
  background: #20292b;
  box-shadow: 1px 1px 1px rgba(0,0,0,0.4);
  content: "";
  transform: rotate(45deg);
}
.klara-ui-tooltip__up {
  bottom: 100%;
  left: 50%;
  display: flex;
  justify-content: center;
  margin-bottom: 8px;
  margin-left: -100px;
  width: 200px;
}
.klara-ui-tooltip__up:before {
  top: 100%;
  left: 50%;
  margin-left: -5px;
}
.klara-ui-tooltip__right {
  top: 50%;
  left: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-left: 8px;
  width: 200px;
  height: 0;
}
.klara-ui-tooltip__right:before {
  top: 50%;
  right: 100%;
  margin-right: -5px;
}
.klara-ui-tooltip__down {
  top: 100%;
  left: 50%;
  display: flex;
  justify-content: center;
  margin-top: 8px;
  margin-left: -100px;
  width: 200px;
}
.klara-ui-tooltip__down:before {
  bottom: 100%;
  left: 50%;
  margin-bottom: -5px;
  margin-left: -5px;
}
.klara-ui-tooltip__left {
  top: 50%;
  right: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-right: 8px;
  width: 200px;
  height: 0;
}
.klara-ui-tooltip__left:before {
  top: 50%;
  left: 100%;
  margin-left: -5px;
}
.klara-ui-tooltip__text {
  color: #fff;
  letter-spacing: 0.5px;
  font-size: 14px;
  line-height: 1.4;
}