html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5,
h6, p, blockquote, pre, a, abbr, acronym, address, big,
cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small,
strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt,
dd, ol, ul, li, fieldset, form, label, legend, table, caption,
tbody, tfoot, thead, tr, th, td, article, aside, canvas, details,
embed, figure, figcaption, footer, header, hgroup, menu, nav,
output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
}

html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

img, fieldset, a img {
  border: none;
}

input[type=text],
input[type=email],
input[type=number],
input[type=tel],
textarea {
  -webkit-appearance: none;
}

input[type=number] {
  -moz-appearance: textfield;
}

input[type=submit],
button {
  line-height: 1.15;
  cursor: pointer;
}
input[type=submit]::-moz-focus-inner,
button::-moz-focus-inner {
  padding: 0;
  border: 0;
}

button {
  background-color: transparent;
  font: inherit;
}

textarea {
  overflow: auto;
}

input, button {
  margin: 0;
  padding: 0;
  border: 0;
}

div, input, textarea, select, button,
h1, h2, h3, h4, h5, h6, a, span, a:focus {
  outline: none;
}

ul, ol {
  list-style-type: none;
}

table {
  border-spacing: 0;
  border-collapse: collapse;
  width: 100%;
}

html {
  line-height: 1.15;
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

p {
  outline: none;
}

.link {
  color: var(--solution-primary-color);
  text-decoration: none;
}

.primary {
  color: var(--typo-primary, #2E3538);
}

.secondary {
  color: var(--typo-secondary, #878B92);
}

.reverse {
  color: var(--typo-white, var(--G-0, #FFFFFF));
}

.tertiary {
  color: var(--tertiary, #6B6B6B);
}

.inactive {
  color: var(--inactive, #B2B2B3);
}

.error {
  color: #FF5757;
}

.currentColor {
  color: currentColor;
}

.thin {
  font-weight: 100;
}

.light {
  font-weight: 300;
}

.regular {
  font-weight: 400;
}

.medium {
  font-weight: 500;
}

.medium.is-firefox-in-windows {
  font-weight: 600;
}

.semibold {
  font-weight: 600;
}

.bold {
  font-weight: 700;
}

.heavy {
  font-weight: 900;
}

.nowrap {
  display: inline-block;
  vertical-align: top;
  white-space: nowrap;
}

.ellipsis {
  overflow: hidden;
  display: block;
  max-width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wrap {
  white-space: normal;
}

.lineclamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  /* autoprefixer: ignore next */
  -webkit-box-orient: vertical;
}

.word-break-ellipsis {
  text-overflow: clip;
  overflow: hidden;
  white-space: nowrap;
  max-width: 100%;
  margin-right: 2px;
}

.word-break-all {
  word-break: break-all;
}

.word-break-word {
  word-break: break-word;
}

.text-center {
  text-align: center;
}

.word-break {
  word-break: break-all;
}

.text-wrap {
  white-space: normal;
}

.typo-hover {
  cursor: pointer;
  transition: color ease-in 100ms;
}
.typo-hover:hover {
  color: var(--solution-hover-color);
  transition: color ease-out 200ms;
}
.typo-hover:hover.link:after {
  color: var(--solution-primary-color);
}

.typo-active {
  color: var(--solution-hover-color);
}

.inherit {
  color: inherit;
}

.capitalize {
  text-transform: capitalize;
}

.lowercase {
  text-transform: lowercase;
}

.underline {
  text-decoration: underline;
}

.align-center {
  text-align: center;
}

.align-left {
  text-align: left;
}

.align-right {
  text-align: right;
}

.title-xxs {
  font-size: 15px;
  line-height: 21px;
}

.title-xs {
  font-size: 16px;
  line-height: 24px;
}

.title-s {
  font-size: 18px;
  line-height: 25px;
}

.title-l {
  font-size: 20px;
  line-height: 25px;
}

.title-xl {
  font-size: 22px;
  line-height: 30px;
}

.title-xxl {
  font-size: 26px;
  line-height: 32px;
}

.title-xxxl {
  font-size: 42px;
  line-height: 54px;
}

.title--clamps {
  overflow: hidden;
  display: -webkit-box;
  /* autoprefixer: ignore next */
  -webkit-box-orient: vertical;
  overflow-wrap: break-word;
}

.title--clamps-2 {
  -webkit-line-clamp: 2;
}

.paragraph-xl {
  font-size: 21px;
  line-height: 27px;
}

.paragraph-l {
  font-size: 14px;
  line-height: 20px;
}

.paragraph-m {
  font-size: 13px;
  line-height: 18px;
}

.paragraph-s {
  font-size: 12px;
  line-height: 18px;
}

.paragraph-xs {
  font-size: 11px;
  line-height: 16px;
}

.paragraph-xxs {
  font-size: 10px;
  line-height: 15px;
}

.paragraph-xxxs {
  font-size: 9px;
  line-height: 14px;
}

.paragraph--clamps {
  overflow: hidden;
  display: -webkit-box;
  /* autoprefixer: ignore next */
  -webkit-box-orient: vertical;
  overflow-wrap: break-word;
}
.paragraph--clamps-1 {
  -webkit-line-clamp: 1;
}
.paragraph--clamps-2 {
  -webkit-line-clamp: 2;
}
.paragraph--clamps-3 {
  -webkit-line-clamp: 3;
}
.paragraph--clamps-4 {
  -webkit-line-clamp: 4;
}
.paragraph--clamps-5 {
  -webkit-line-clamp: 5;
}
.paragraph--clamps-6 {
  -webkit-line-clamp: 6;
}
.paragraph--clamps-7 {
  -webkit-line-clamp: 7;
}
.paragraph--clamps-8 {
  -webkit-line-clamp: 8;
}
.paragraph--clamps-9 {
  -webkit-line-clamp: 9;
}
.paragraph--clamps-10 {
  -webkit-line-clamp: 10;
}
.paragraph--clamps-11 {
  -webkit-line-clamp: 11;
}

.paragraph--letter-space {
  letter-spacing: 1px;
}

.table-head {
  font-size: 12px;
  line-height: 18px;
  text-transform: uppercase;
}
.table-head--small {
  font-size: 11px;
  line-height: 16px;
}
.table-head--tiny {
  font-size: 9px;
  line-height: 11px;
}

.field-label {
  font-size: 11px;
  line-height: 16px;
  text-transform: uppercase;
}

.field-label-small {
  font-size: 11px;
  line-height: 16px;
  text-transform: uppercase;
}

.card-caption {
  font-size: 9px;
  line-height: 14px;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.field-types-caption {
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 1px;
}

.uppercase {
  text-transform: uppercase;
}

.transition {
  transition: color 200ms ease-in-out;
}

.capitalize {
  text-transform: capitalize;
}

.sh-0 {
  box-shadow: none;
}

.sh-1 {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.066);
}

.sh-2 {
  box-shadow: 0 4px 10px rgba(128, 128, 128, 0.25);
}

.sh-3 {
  box-shadow: -1px 4px 8px rgba(128, 128, 128, 0.5);
}

.sh-4 {
  box-shadow: rgba(15, 15, 15, 0.05) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px 3px 6px, rgba(15, 15, 15, 0.2) 0px 9px 24px;
}

.page-h {
  box-shadow: 4px 8px 14px rgba(0, 0, 0, 0.08);
}

.page-c {
  box-shadow: 4px 8px 14px rgba(0, 0, 0, 0.04);
}

.sys-m-p {
  box-shadow: 1px 7px 7px rgba(0, 0, 0, 0.4);
}

:root {
  --link: #00A6ED;
  --error: #DD1C1A;
  --active: #FF6F2C;
  --highlight: #F1C40F;
  --success: #57A773;
  --grid-column-first-width: 0;
  --grid-row-size: 40px;
  --solution-primary-color: #3a86ff;
  --solution-dw-color: 231, 240, 254;
  --solution-w-color: 183, 227, 251;
  --solution-secondary-color: #e7f0fe;
  --solution-hover-color: #0055db;
  --solution-highlight-color: #0055db;
  --topbar-height: 50px;
}

html {
  height: 100%;
}

body {
  background-color: var(--G-0-5, #FAFAFA);
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  color: var(--typo-primary, #2E3538);
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.container {
  padding-left: 20px;
  padding-right: 20px;
}

.space {
  height: 100%;
}

.img-responsive {
  max-width: 100%;
  height: auto;
}

.free-space {
  width: 100%;
}

.half-space {
  width: 50%;
}

.object-cover {
  width: 100%;
  height: 100%;
}

.highlight {
  background-color: #f8e287;
}

.block {
  display: block;
}

.inline {
  display: inline;
}

.inline-block {
  display: inline-block;
}

.hidden {
  display: none;
}

.block-hidden {
  overflow: hidden;
}

.scroll-hidden {
  position: fixed;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.layout-space {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.scroll-area {
  overflow-y: hidden;
  flex-basis: 100%;
  box-sizing: border-box;
}

.content-wrapper {
  width: 100%;
  max-width: 1003px;
  padding: 0 20px;
  margin: 0 auto;
}

.outline-offset {
  margin: 0 -50px;
  padding: 0 50px;
}

.wrapper {
  padding: 10px;
  background-color: var(--G-0-5, #FAFAFA);
  border-radius: 5px;
}

.text--xl {
  font-size: 21px;
  line-height: 27px;
}

.text--xl-min {
  font-size: 18px;
  line-height: 25px;
}

.text--l-plus {
  font-size: 16px;
  line-height: 24px;
}

.text--l-semi-plus {
  font-size: 15px;
  line-height: 20px;
}

.text--l {
  font-size: 14px;
  line-height: 20px;
}

.text--l-md {
  font-size: 16px;
  line-height: 24px;
}

.text--m, .results-not-found__description {
  font-size: 13px;
  line-height: 18px;
}

.text--s {
  font-size: 12px;
  line-height: 18px;
}

.text--xs {
  font-size: 11px;
  line-height: 16px;
}

.text--xxs {
  font-size: 10px;
  line-height: 15px;
}

.text--xxxs {
  font-size: 9px;
  line-height: 14px;
}

.text--ellipsis {
  overflow: hidden;
  display: block;
  max-width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text--nowrap {
  display: inline-block;
  vertical-align: top;
  white-space: nowrap;
}

.text--wrap {
  white-space: normal;
}

.text--uppercase {
  text-transform: uppercase;
}

.text--lowercase {
  text-transform: lowercase;
}

.text--capitalize {
  text-transform: capitalize;
}

.text--align-left {
  text-align: left;
}

.text--align-right {
  text-align: right;
}

.text--align-center {
  text-align: center;
}

.text--clamps {
  overflow: hidden;
  display: -webkit-box;
  /* autoprefixer: ignore next */
  -webkit-box-orient: vertical;
  overflow-wrap: break-word;
}
.text--clamps-1 {
  -webkit-line-clamp: 1;
}
.text--clamps-2 {
  -webkit-line-clamp: 2;
}
.text--clamps-3 {
  -webkit-line-clamp: 3;
}
.text--clamps-4 {
  -webkit-line-clamp: 4;
}
.text--clamps-5 {
  -webkit-line-clamp: 5;
}
.text--clamps-6 {
  -webkit-line-clamp: 6;
}
.text--clamps-7 {
  -webkit-line-clamp: 7;
}
.text--clamps-8 {
  -webkit-line-clamp: 8;
}
.text--clamps-9 {
  -webkit-line-clamp: 9;
}
.text--clamps-10 {
  -webkit-line-clamp: 10;
}
.text--clamps-11 {
  -webkit-line-clamp: 11;
}

.text--clamps-break-word {
  word-break: break-word;
}

.text--letter-space {
  letter-spacing: 1px;
}

.text--transition {
  transition: color 150ms ease-out;
}

.text--break-all {
  word-break: break-all;
}

.text--break-word {
  word-break: break-word;
}

.text--placeholder {
  letter-spacing: -0.21px;
}

.title--xxs {
  font-size: 15px;
  line-height: 21px;
}

.title--xs {
  font-size: 16px;
  line-height: 24px;
}

.title--s {
  font-size: 18px;
  line-height: 25px;
}

.title--l {
  font-size: 20px;
  line-height: 25px;
}

.title--xl {
  font-size: 22px;
  line-height: 30px;
}

.title--xxl {
  font-size: 26px;
  line-height: 32px;
}

.title--xxxl {
  font-size: 42px;
  line-height: 54px;
}

.title--ellipsis {
  overflow: hidden;
  display: block;
  max-width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.title--nowrap {
  display: inline-block;
  vertical-align: top;
  white-space: nowrap;
}

.title--wrap {
  white-space: normal;
}

.title--uppercase {
  text-transform: uppercase;
}

.title--lowercase {
  text-transform: lowercase;
}

.title--capitalize {
  text-transform: capitalize;
}

.title--align-left {
  text-align: left;
}

.title--align-right {
  text-align: right;
}

.title--align-center {
  text-align: center;
}

.editable-paragraph {
  display: inline-block;
  border-bottom: 1px dashed var(--G-2, #DEDEDE);
  transition: all 0.2s ease-in-out;
  cursor: text;
  word-break: break-word;
}

.link {
  overflow-wrap: break-word;
}
.link.is-hover {
  cursor: pointer;
  transition: color 150ms ease-out;
}
.link.is-hover:hover {
  color: var(--solution-hover-color);
  transition: color 200ms ease-in;
}
.link.is-active {
  color: var(--solution-hover-color);
}
.link.is-disabled {
  pointer-events: none;
  color: var(--typo-primary, #2E3538);
}
.link.link--underline-none {
  text-decoration: none;
}
.link.link--underline-none:hover {
  text-decoration: none;
}
.link.link--underline-default {
  text-decoration: underline;
}
.link.link--underline-default:hover {
  text-decoration: none;
}
.link.link--underline-hover {
  text-decoration: none;
}
.link.link--underline-hover:hover {
  text-decoration: underline;
}
.link.link--underline-always {
  text-decoration: underline;
}
.link.link--underline-always:hover {
  text-decoration: underline;
}

.link--xxl {
  font-size: 18px;
  line-height: 25px;
}

.link--xl {
  font-size: 16px;
  line-height: 24px;
}

.link--l {
  font-size: 14px;
  line-height: 20px;
}

.link--l-semi-plus {
  font-size: 15px;
  line-height: 20px;
}

.link--m {
  font-size: 13px;
  line-height: 18px;
}

.link--s {
  font-size: 12px;
  line-height: 18px;
}

.link--xs {
  font-size: 11px;
  line-height: 16px;
}

.link--wrap {
  white-space: normal;
}

.link--nowrap {
  display: inline-block;
  vertical-align: top;
  white-space: nowrap;
}

.link--ellipsis {
  overflow: hidden;
  display: block;
  max-width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.link--break-all {
  word-break: break-all;
}

.link--break-word {
  word-break: break-word;
}

.link--uppercase {
  text-transform: uppercase;
}

.link--capitalize {
  text-transform: capitalize;
}

.link--lowercase {
  text-transform: lowercase;
}

.link--align-left {
  text-align: left;
}

.link--align-center {
  text-align: center;
}

.link--align-right {
  text-align: right;
}

.link--clamps {
  overflow: hidden;
  display: -webkit-box;
  /* autoprefixer: ignore next */
  -webkit-box-orient: vertical;
  overflow-wrap: break-word;
}
.link--clamps-1 {
  -webkit-line-clamp: 1;
}
.link--clamps-2 {
  -webkit-line-clamp: 2;
}
.link--clamps-3 {
  -webkit-line-clamp: 3;
}
.link--clamps-4 {
  -webkit-line-clamp: 4;
}
.link--clamps-5 {
  -webkit-line-clamp: 5;
}
.link--clamps-6 {
  -webkit-line-clamp: 6;
}
.link--clamps-7 {
  -webkit-line-clamp: 7;
}
.link--clamps-8 {
  -webkit-line-clamp: 8;
}
.link--clamps-9 {
  -webkit-line-clamp: 9;
}
.link--clamps-10 {
  -webkit-line-clamp: 10;
}
.link--clamps-11 {
  -webkit-line-clamp: 11;
}

.table-head-text {
  font-size: 12px;
  line-height: 18px;
  font-weight: 600;
  letter-spacing: 1px;
}
.table-head-text--no-letter-spacing {
  letter-spacing: normal;
}

.add-button {
  display: flex;
  align-items: center;
}
.add-button__content {
  display: inline-flex;
  align-items: center;
  transition: color 150ms ease-out;
  color: var(--add-button-text-color);
}
.add-button__icon {
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--add-button-icon-background);
  color: var(--add-button-icon-color);
  transition: background-color 200ms ease-in , color 200ms ease-in;
}
.add-button:hover .add-button__content {
  color: var(--add-button-text-hover-color);
  transition: color 200ms ease-in;
}
.add-button:hover .add-button__icon {
  background-color: var(--add-button-icon-hover-background);
  color: var(--add-button-icon-hover-color);
  transition: background-color 200ms ease-in , color 200ms ease-in;
}
.add-button.is-disabled {
  pointer-events: none;
}

.done-cancel {
  display: flex;
  border-top: 1px solid var(--h-line-70, rgba(222, 222, 222, 0.7));
  background-color: var(--G-0-5, #FAFAFA);
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  width: 100%;
}
.done-cancel__button {
  width: 50%;
  padding: 10px;
}
.done-cancel__button:first-child {
  color: var(--tertiary, #6B6B6B);
  border-bottom-left-radius: 5px;
}
.done-cancel__button:not(:last-child) {
  border-right: 1px solid var(--G-1-2, #F0F0F0);
}
.done-cancel__button:last-child {
  border-bottom-right-radius: 5px;
}
.done-cancel__button:hover, .done-cancel__button:focus {
  background-color: var(--G-1, #F3F3F4);
  color: var(--typo-primary, #2E3538);
}

.empty-button {
  position: relative;
  background-color: transparent;
  border-radius: 100px;
  color: var(--typo-primary, #2E3538);
  display: flex;
  align-items: center;
}
.empty-button.is-disabled {
  pointer-events: none;
  cursor: default;
}
.empty-button:focus {
  color: var(--solution-hover-color);
}
.empty-button--size-md {
  height: 24px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 600;
}
.empty-button--size-lg {
  height: 32px;
  font-size: 14px;
  padding: 0 15px;
  font-weight: 600;
}
.empty-button--size-xl {
  height: 40px;
  padding: 0 30px;
  font-size: 15px;
  font-weight: 500;
}

.icon-button {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--icon-button-color);
  background: var(--icon-button-background);
  transition: color 150ms ease-out , background-color 150ms ease-out;
}
.icon-button:disabled {
  cursor: default;
  pointer-events: none;
}
.icon-button--background {
  padding: 5px;
}
.icon-button--kind-circle {
  border-radius: 100%;
}
.icon-button--kind-round {
  border-radius: 5px;
}
.icon-button:not(:disabled):hover, .icon-button:not(:disabled):focus {
  color: var(--icon-button-color-hover);
  background: var(--icon-button-background-hover);
  transition: color 200ms ease-in , background-color 200ms ease-in;
}

.icon-text-button {
  background-color: transparent;
  display: flex;
  align-items: center;
  padding: 4px;
}
.icon-text-button__icon {
  display: flex;
  margin-right: 4px;
  transition: color 150ms ease-out , opacity 150ms ease-out;
  color: var(--r-icon-button-color);
  opacity: var(--r-icon-button-alpha);
}
.icon-text-button__text {
  display: flex;
  transition: color 150ms ease-out , opacity 150ms ease-out;
  color: var(--r-text-button-color);
  opacity: var(--r-text-button-alpha);
}
.icon-text-button:hover .icon-text-button__icon {
  transition: color 200ms ease-in , opacity 200ms ease-in;
  color: var(--r-icon-button-hover-color);
  opacity: var(--r-icon-button-hover-alpha);
}
.icon-text-button:hover .icon-text-button__text {
  transition: color 200ms ease-in , opacity 200ms ease-in;
  color: var(--r-text-button-hover-color);
  opacity: var(--r-text-button-hover-alpha);
}
.icon-text-button.is-disabled {
  pointer-events: none;
  cursor: default;
}

.r-tooltip-button {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: transparent;
  border-radius: 50%;
  color: var(--r-tooltip-button-color);
  font-size: 0;
  cursor: pointer;
  transition: color 150ms ease-out;
}
.r-tooltip-button--size-s {
  width: 12px;
  height: 12px;
  min-width: 12px;
}
.r-tooltip-button--size-m {
  height: 16px;
  width: 16px;
  min-width: 16px;
}
.r-tooltip-button:hover {
  color: var(--r-tooltip-button-hover-color);
}
.r-tooltip-button.is-error {
  color: var(--r-tooltip-button-error-color);
  transition: color 200ms ease-in;
}
.r-tooltip-button.is-error:hover {
  color: #F1273F;
  transition: color 200ms ease-in;
}
.r-tooltip-button.is-active {
  color: var(--r-tooltip-button-active-color);
  transition: color 200ms ease-in;
}

.circle-plus-button {
  color: var(--G-4, #B2B2B3);
  width: 16px;
  min-width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: transparent;
  transition: background-color 150ms ease-out;
}
.circle-plus-button.is-active, .circle-plus-button:hover {
  color: var(--solution-primary-color);
  background-color: var(--solution-secondary-color);
  transition: background-color 200ms ease-in;
}

.color-picker-button {
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
}
.color-picker-button__circle {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  position: relative;
}
.color-picker-button__circle:before {
  content: "";
  position: absolute;
  top: 7px;
  left: 4px;
  display: block;
  width: 0;
  height: 0;
  border: 4px solid transparent;
  border-top-color: var(--G-0, #FFFFFF);
}
.color-picker-button--size-M {
  width: 28px;
  height: 28px;
}
.color-picker-button--size-L {
  width: 35px;
  height: 35px;
}
.color-picker-button--outline {
  border: 1px solid var(--G-1-5, #E9E9E9);
  transition: background 150ms ease-out , border-color 150ms ease-out;
}
.color-picker-button--outline:hover, .color-picker-button--outline.is-active {
  border-color: var(--G-3, #C7C8C9);
  transition: background 200ms ease-in , border-color 200ms ease-in;
}
.color-picker-button--filled {
  border: 1px solid transparent;
  transition: border 150ms ease-out , background 150ms ease-out;
}
.color-picker-button--filled:hover, .color-picker-button--filled.is-active {
  border-color: var(--G-1-5, #E9E9E9);
  transition: border 200ms ease-in , background 200ms ease-in;
}
.color-picker-button.is-darken .color-picker-button__circle:before {
  border-top-color: var(--ic-dark, #2D2D2D);
}
.color-picker-button:hover, .color-picker-button.is-active {
  background-color: var(--G-0, #FFFFFF);
}

.r-button {
  display: flex;
  align-items: center;
  position: relative;
  height: var(--height);
  padding: var(--side-padding);
  border-radius: var(--border-radius);
  border: var(--border-width) solid var(--border-color);
  color: var(--text-color);
  background-color: var(--background);
  transition: color 150ms ease-out , background 150ms ease-out , border-color 150ms ease-out , opacity 150ms ease-out;
}
.r-button__icon {
  display: flex;
  color: var(--icon-color);
  transition: color 150ms ease-out;
}
.r-button__icon:only-child {
  margin: 0;
}
.r-button__icon {
  margin-right: var(--icon-right-indent);
  margin-left: var(--icon-left-indent);
}
.r-button__loader {
  width: var(--button-spinner-size, 20px);
  height: var(--button-spinner-size, 20px);
  margin: 0 auto;
  border: 2px solid var(--G-0, #FFFFFF);
  border-radius: 50%;
  border-right-color: transparent;
  position: absolute;
  top: var(--button-spinner-position, calc(50% - 10px));
  left: var(--button-spinner-position, calc(50% - 10px));
  animation: cssload-spin 700ms infinite linear;
}
.r-button:hover, .r-button:focus, .r-button.is-active {
  color: var(--text-color-hover);
  background-color: var(--background-hover);
  border-color: var(--border-hover-color);
  transition: color 200ms ease-in , background 200ms ease-in;
}
.r-button:hover .r-button__icon, .r-button:focus .r-button__icon, .r-button.is-active .r-button__icon {
  color: var(--icon-hover-color);
  transition: color 200ms ease-in;
}
.r-button.is-disabled {
  opacity: 0.5;
  pointer-events: none;
  cursor: default;
  background-color: var(--G-4, #B2B2B3);
  transition: opacity 200ms ease-in;
}
.r-button.is-loading {
  pointer-events: none;
  user-select: none;
}
.r-button.is-loading .r-button__content {
  opacity: 0;
}
.r-button.is-content-reversed {
  flex-direction: row-reverse;
}

@keyframes cssload-spin {
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.switch-button {
  width: var(--width);
  height: var(--height);
  border-radius: var(--border-radius);
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  padding-right: var(--padding-slider);
  padding-left: var(--padding-slider);
  background-color: var(--background);
  color: var(--color);
  cursor: pointer;
  transition: background-color 150ms ease-out , color 150ms ease-out;
}
.switch-button__text_wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.switch-button:hover {
  background-color: var(--background-hover);
  transition: background-color 200ms ease-in;
}
.switch-button__item {
  display: flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  flex-grow: 1;
  height: 100%;
  min-width: var(--width-item);
  position: relative;
  z-index: 1;
  padding-right: var(--gap-item);
  padding-left: var(--gap-item);
}
.switch-button__item:hover, .switch-button__item:focus {
  color: var(--color-hover);
  transition: color 200ms ease-in;
}
.switch-button__item .text {
  display: flex;
}
.switch-button__item.is-active {
  color: var(--color-active);
  transition: color 150ms ease-out;
}
.switch-button__item.is-active:hover {
  color: var(--color-active);
}
.switch-button__slider {
  position: absolute;
  height: var(--height-slider);
  width: var(--width-slider);
  border: var(--border-slider);
  border-radius: var(--border-radius-slider, var(--border-radius));
  background-color: var(--background-slider);
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: var(--margin-left-slider);
  transition: left 150ms ease-out;
}

.simple-add-button {
  height: 24px;
  padding: 0 8px 0 4px;
  background-color: transparent;
  border-radius: 5px;
  color: var(--tertiary, #6B6B6B);
  transition: background-color 150ms ease-out;
}
.simple-add-button.is-active, .simple-add-button:hover {
  background-color: var(--G-1, #F3F3F4);
  color: var(--typo-primary, #2E3538);
  transition: background-color 200ms ease-in;
}
.simple-add-button.is-disabled {
  opacity: 0.5;
}

.explore-button {
  width: 100%;
  height: 42px;
  background-color: var(--solution-primary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 12px;
  line-height: 18px;
  font-weight: 600;
  color: var(--G-0, #FFFFFF);
  padding: 0 22px;
  border-radius: 0 0 5px 5px;
  cursor: pointer;
  transition: background-color 150ms ease-out;
}
.explore-button:hover {
  background-color: var(--solution-hover-color);
  transition: background-color 200ms ease-in;
}
.explore-button__content {
  margin-right: 6px;
}

.info-icon-button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 34px;
  height: 34px;
  border-radius: 5px;
  background-color: var(--G-1, #F3F3F4);
  color: var(--solution-primary-color);
  cursor: pointer;
  transition: background-color 150ms ease-out;
}
.info-icon-button:hover {
  background-color: var(--G-1-5, #E9E9E9);
  color: var(--solution-hover-color);
  transition: background-color 200ms ease-in;
}

.split-button {
  align-items: center;
  border-radius: 50%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  position: relative;
  width: fit-content;
}
.split-button.is-disabled {
  opacity: 0.5;
  transition: opacity 150ms ease-out;
}
.split-button.is-disabled .split-button__main-button,
.split-button.is-disabled .split-button__side-button {
  background-color: var(--G-4, #B2B2B3);
  cursor: default;
  pointer-events: none;
}
.split-button.is-loading .split-button__main-button,
.split-button.is-loading .split-button__side-button {
  pointer-events: none;
  user-select: none;
}
.split-button.is-loading .split-button__main-button__text {
  opacity: 0;
}
.split-button.is-side-menu-active .split-button__side-button {
  background-color: var(--split-button-hover-color);
}
.split-button.is-side-menu-active .split-button__side-button span {
  transform: rotate(180deg);
  transition: transform 200ms ease-in;
}
.split-button__main-button, .split-button__side-button {
  transition: background 150ms ease-out;
  background-color: var(--split-button-color);
  height: var(--button-height);
}
.split-button__main-button:focus-visible, .split-button__main-button:hover, .split-button__side-button:focus-visible, .split-button__side-button:hover {
  background-color: var(--split-button-hover-color);
  cursor: pointer;
}
.split-button__main-button {
  border-radius: 200px 0 0 200px;
  padding: 7px 10px 7px 15px;
  position: relative;
  font-weight: 600;
  font-size: 14px;
  line-height: 18px;
}
.split-button__side-button {
  border-radius: 0 200px 200px 0;
  padding: 7px 15px 7px 10px;
  position: relative;
}
.split-button__side-button span {
  transform: rotate(0);
  display: block;
  transition: transform 150ms ease-out;
}
.split-button__side-button::before {
  background-color: rgba(255, 255, 255, 0.4);
  content: "";
  display: block;
  height: calc(var(--button-height) / 2);
  left: 0;
  position: absolute;
  top: calc(50% - var(--button-height) / 4);
  width: 1px;
}
.split-button__side-button__icon {
  display: flex;
}
.split-button__loader {
  left: calc(50% - 6px);
  position: absolute;
  top: calc(50% - var(--button-height) / 4);
}

.expand-button {
  padding-top: 25px;
  padding-bottom: 25px;
}
.expand-button.is-active .expand-button__icon {
  transform: rotate(0deg);
  transition: transform 200ms ease-in;
}
.expand-button__head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  text-align: left;
  cursor: pointer;
}
.expand-button__head:before {
  content: "";
  position: absolute;
  top: -10px;
  right: 0;
  bottom: -10px;
  left: 0;
}
.expand-button__badge {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-width: 17px;
  height: 16px;
  border: 1px solid var(--G-1-5, #E9E9E9);
  padding: 0 4px;
  background-color: var(--G-1, #F3F3F4);
  border-radius: 5px;
}
.expand-button__content {
  margin-top: 23px;
}
.expand-button__icon {
  color: var(--G-5, #9B9C9E);
  transform: rotate(-90deg);
  transition: transform 150ms ease-out;
}
.expand-button__side {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
}

.blank-dashed-button {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 36px;
  font-size: 12px;
  line-height: 18px;
  color: var(--tertiary, #6B6B6B);
  cursor: pointer;
}
.blank-dashed-button:hover::before, .blank-dashed-button.is-active::before {
  opacity: 0.5;
  border-color: var(--solution-primary-color);
  background-color: var(--solution-secondary-color);
  transition: opacity 200ms ease-in , border-color 200ms ease-in , background-color 200ms ease-in;
}
.blank-dashed-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 1px dashed var(--G-3, #C7C8C9);
  border-radius: 5px;
  transition: opacity 150ms ease-out , border-color 150ms ease-out , background-color 150ms ease-out;
}
.blank-dashed-button__inner {
  z-index: 2;
  position: relative;
}

.sidebar-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  height: 38px;
  padding-left: 19px;
  color: rgba(46, 53, 56, 0.8);
}
.sidebar-item:hover {
  color: #2E3538;
}
.sidebar-item:hover::before {
  background-color: var(--G-2, #DEDEDE);
  transition: background-color 200ms ease-in;
}
.sidebar-item.is-active {
  color: #2E3538;
}
.sidebar-item.is-active::before {
  background-color: var(--solution-primary-color);
  transition: background-color 200ms ease-in;
}
.sidebar-item::before {
  content: " ";
  position: absolute;
  top: 50%;
  left: 0;
  display: block;
  width: 4px;
  height: 25px;
  border-radius: 2px;
  transform: translateY(-50%);
  transition: background-color 150ms ease-out;
}

.radio-icon-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  flex-basis: 100%;
  gap: 5px;
  min-height: 68px;
  padding: 10px;
  border-radius: 5px;
  color: var(--tertiary, #6B6B6B);
  cursor: pointer;
  text-align: center;
  transition: background-color 150ms ease-out , color 150ms ease-out;
}
.radio-icon-button::before {
  content: " ";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: 1px solid var(--G-1-5, #E9E9E9);
  border-radius: inherit;
  transition: opacity 150ms ease-out , border-color 150ms ease-out;
}
.radio-icon-button.is-active, .radio-icon-button:hover {
  color: var(--typo-primary, #2E3538);
  transition: background-color 200ms ease-in , color 200ms ease-in;
}
.radio-icon-button.is-active::before, .radio-icon-button:hover::before {
  opacity: 0.5;
  border-color: var(--solution-primary-color);
  transition: opacity 200ms ease-in , border-color 200ms ease-in;
}
.radio-icon-button.is-active .radio-icon-button__icon, .radio-icon-button:hover .radio-icon-button__icon {
  opacity: 1;
  color: var(--solution-primary-color);
  transition: opacity 200ms ease-in , color 200ms ease-in;
}
.radio-icon-button.is-active {
  background-color: var(--solution-secondary-color);
}
.radio-icon-button__icon {
  opacity: 0.4;
  color: var(--ic-darker, #151515);
  transition: opacity 150ms ease-out , color 150ms ease-out;
}

.rating-buttons {
  white-space: nowrap;
  height: 16px;
  font-size: 0;
  display: inline-block;
  position: relative;
  color: var(--G-3, #C7C8C9);
}
.rating-buttons__item {
  display: inline-block;
  height: 20px;
}
.rating-buttons--rectangle .rating-buttons__rectangle {
  border: 1px solid #D7D7DB;
  background-color: var(--G-0, #FFFFFF);
}
.rating-buttons__rectangle {
  min-width: 20px;
  width: 20px;
  border-radius: 5px;
  background-color: var(--G-3, #C7C8C9);
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  line-height: 20px;
  text-align: center;
  margin-right: 2px;
}
.rating-buttons__rectangle.is-hover {
  background-color: var(--custom-washed-color);
  color: var(--G-0, #FFFFFF);
}
.rating-buttons__rectangle.is-active {
  background-color: var(--custom-color);
  color: var(--G-0, #FFFFFF);
  border-color: var(--custom-color);
}
.rating-buttons.is-clickable .rating-buttons__item {
  cursor: pointer;
}
.rating-buttons--rectangle, .rating-buttons--number {
  height: 20px;
  color: var(--typo-primary, #2E3538);
}
.rating-buttons--rectangle .rating-buttons__tooltip:not(:last-child) .rating-buttons__item, .rating-buttons--number .rating-buttons__tooltip:not(:last-child) .rating-buttons__item {
  padding-right: 2px;
}
.rating-buttons .tooltip {
  position: absolute;
  top: 0;
  left: 0;
}
.rating-buttons-tooltip-area {
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.avatar-menu-option__avatar {
  margin-right: 10px;
}

.dropdown-panel:not(.is-animation-disabled).dropdown-panel--animation-top.enter {
  opacity: 0;
  transform: translateY(10px);
}
.dropdown-panel:not(.is-animation-disabled).dropdown-panel--animation-top.enter-active {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 250ms ease-out, transform 250ms ease-out;
}
.dropdown-panel:not(.is-animation-disabled).dropdown-panel--animation-top.exit-active {
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 180ms ease-in, transform 180ms ease-in;
}
.dropdown-panel:not(.is-animation-disabled).dropdown-panel--animation-left.enter {
  transform: translateX(-10px);
}
.dropdown-panel:not(.is-animation-disabled).dropdown-panel--animation-left.enter-active {
  transform: translateX(0);
  transition: opacity 250ms ease-out, transform 250ms ease-out;
}
.dropdown-panel:not(.is-animation-disabled).dropdown-panel--animation-left.exit-active {
  transform: translateX(-5px);
  transition: opacity 180ms ease-in, transform 180ms ease-in;
}
.dropdown-panel:not(.is-animation-disabled).dropdown-panel--animation-right.enter {
  transform: translateX(10px);
}
.dropdown-panel:not(.is-animation-disabled).dropdown-panel--animation-right.enter-active {
  transform: translateX(0);
  transition: opacity 250ms ease-out, transform 250ms ease-out;
}
.dropdown-panel:not(.is-animation-disabled).dropdown-panel--animation-right.exit-active {
  transform: translateX(5px);
  transition: opacity 180ms ease-in, transform 180ms ease-in;
}

.dropdown-panel.exit-active.is-animation-disabled {
  opacity: 0;
}

.dropdown-panel {
  position: relative;
  box-shadow: var(--dropdown-panel-box-shadow, rgba(15, 15, 15, 0.05) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px 3px 6px, rgba(15, 15, 15, 0.2) 0px 9px 24px);
}
.dropdown-panel:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 1px solid var(--dropdown-panel-border-color, transparent);
  border-radius: inherit;
  background-color: var(--dropdown-panel-background-color, var(--G-0, #FFFFFF));
  z-index: 1;
  pointer-events: none;
}
.dropdown-panel__close-button {
  position: absolute;
  top: -17px;
  left: -14px;
  z-index: 4;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 28px;
  height: 28px;
  border: 2px solid #fff;
  transform: rotate(45deg);
  border-radius: 50%;
  background-color: #b2b2b3;
  cursor: pointer;
  color: #fff;
}
.dropdown-panel__arrow {
  position: absolute;
  transform: rotate(45deg);
  box-shadow: rgba(15, 15, 15, 0.05) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px 3px 6px;
}
.dropdown-panel__content {
  position: relative;
  z-index: 3;
}
.dropdown-panel__line {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
}
.dropdown-panel--arrow-white .dropdown-panel__arrow {
  width: 9.34px;
  height: 9.34px;
  background-color: var(--dropdown-panel-arrow-color, var(--G-0, #FFFFFF));
}
.dropdown-panel--arrow-custom .dropdown-panel__arrow {
  width: 9.34px;
  height: 9.34px;
  top: -5px;
  box-shadow: none;
}
.dropdown-panel--arrow-custom .dropdown-panel__line {
  background-color: var(--solution-highlight-color);
  height: 6px;
  border-radius: 5px 5px 0 0;
}
.dropdown-panel--arrow-white .dropdown-panel__arrow {
  top: -5px;
}
.dropdown-panel--arrow-sc-4 {
  padding-top: 6px;
}
.dropdown-panel--arrow-sc-4 .dropdown-panel__line {
  background-color: var(--solution-primary-color);
  height: 6px;
  border-radius: 5px 5px 0 0;
}
.dropdown-panel--arrow-sc-4 .dropdown-panel__arrow {
  width: var(--dropdown-sc-4-size, 13px);
  height: var(--dropdown-sc-4-size, 13px);
  top: var(--dropdown-sc-4-top, -4px);
  background-color: var(--dropdown-panel-arrow-color, var(--solution-primary-color));
  box-shadow: none;
}
.dropdown-panel--panel-line .dropdown-panel__line {
  background-color: var(--solution-highlight-color);
  height: 6px;
  border-radius: 5px 5px 0 0;
}
.dropdown-panel--panel-line .dropdown-panel__arrow {
  width: var(--dropdown-sc-4-size, 14px);
  height: var(--dropdown-sc-4-size, 14px);
  top: var(--dropdown-sc-4-top, -7px);
  background-color: var(--dropdown-panel-arrow-color, var(--solution-highlight-color));
  border-radius: 0;
  box-shadow: none;
}
.dropdown-panel--panel-line .menu-group-content__title {
  padding-top: 15px;
  padding-bottom: 8px;
}
.dropdown-panel--panel-line .menu-option-wrapper__list {
  padding-bottom: 5px;
  padding-top: 14px;
}
.dropdown-panel--horisontal-view .dropdown-panel__arrow {
  left: -5px;
}
.dropdown-panel--corner-all:not(.dropdown-panel--arrow-white):not(.dropdown-panel--arrow-sc-4) {
  background-color: var(--G-0, #FFFFFF);
}
.dropdown-panel--animation-right {
  transform-origin: left top;
}
.dropdown-panel--animation-right.dropdown-panel--horisontal-view .dropdown-panel__arrow {
  right: -5px;
  left: initial;
}
.dropdown-panel--animation-left {
  transform-origin: left top;
}
.dropdown-panel--corner-all {
  border-radius: 5px;
}
.dropdown-panel--corner-bottom {
  border-radius: 0 0 5px 5px;
}
.dropdown-panel--corner-bottom:before {
  border-radius: 0 0 5px 5px;
}
.dropdown-panel--corner-bottom .dropdown-panel__line {
  height: 2px;
  border-radius: 0;
}
.dropdown-panel--corner-top {
  border-radius: 5px 5px 0 0;
}
.dropdown-panel__import-application {
  box-shadow: 0 4px 10px rgba(128, 128, 128, 0.25);
}
.dropdown-panel--type-calendar {
  border-right: 1px solid var(--G-2, #DEDEDE);
  border-bottom: 1px solid var(--G-2, #DEDEDE);
  border-left: 1px solid var(--G-2, #DEDEDE);
  padding-top: 4px;
}
.dropdown-panel--type-calendar .dropdown-panel__line {
  height: 4px;
  border-radius: 0;
  background-color: var(--solution-primary-color);
}
.dropdown-panel--type-calendar .dropdown-panel__arrow {
  top: -5px;
  width: 10px;
  height: 10px;
  background-color: var(--dropdown-panel-arrow-color, var(--solution-primary-color));
  border-top-left-radius: 0;
}
.flip-vertical .dropdown-panel {
  transform-origin: center bottom;
  box-shadow: rgba(15, 15, 15, 0.05) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px -3px 6px, rgba(15, 15, 15, 0.2) 0px -9px 24px;
}
.flip-vertical .dropdown-panel .dropdown-panel__arrow {
  top: auto;
  bottom: -5px;
  transform: rotate(45deg);
  box-shadow: rgba(15, 15, 15, 0.05) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px -3px 6px;
}
.flip-vertical .dropdown-panel.dropdown-panel--corner-bottom {
  border-radius: 5px 5px 0 0;
}
.flip-vertical .dropdown-panel.dropdown-panel--corner-bottom:before {
  border-radius: 5px 5px 0 0;
}
.flip-horizontal .dropdown-panel.dropdown-panel--horisontal-view.dropdown-panel--animation-right .dropdown-panel__arrow {
  left: -5px;
  right: initial;
}

.menu-button {
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--r-menu-button-background);
  color: var(--r-menu-button-color);
  transition: background 150ms ease-out , color 150ms ease-out;
}
.menu-button--size-l {
  width: 36px;
  height: 32px;
}
.menu-button--size-m {
  width: 41px;
  height: 23px;
}
.menu-button--size-s {
  width: 24px;
  height: 24px;
}
.menu-button:hover {
  background: var(--r-menu-button-hover-background);
  color: var(--r-menu-button-hover-color);
}
.menu-button.is-active {
  background: var(--r-menu-button-active-background);
  color: var(--r-menu-button-active-color);
}
.menu-button:hover, .menu-button.is-active {
  transition: background 200ms ease-in , color 200ms ease-in;
}

.menu-group-content__title {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 10px 12px;
  border-bottom: 1px solid var(--G-1-2, #F0F0F0);
  cursor: pointer;
}
.menu-group-content__back-icon {
  margin-right: 8px;
}
.menu-group-content__search {
  padding: 8px 15px 2px;
}
.menu-group-content__subtitle {
  padding-left: 10px;
  position: relative;
}
.menu-group-content__subtitle:before {
  content: "";
  position: absolute;
  top: 7px;
  width: 2px;
  left: 5px;
  height: 2px;
  background-color: var(--inactive, #B2B2B3);
  border-radius: 50%;
}

.menu-line-separator {
  margin: 11px 0 13px;
  height: 1px;
  background-color: var(--menu-line-separator-color, var(--G-1-2, #F0F0F0));
  flex-shrink: 0;
}
.menu-line-separator--small-offset {
  margin-top: 9px;
  margin-bottom: 4px;
}

.menu-option {
  height: var(--menu-option-height, 36px);
  padding: 0 5px;
  width: 100%;
  margin-bottom: var(--menu-option-bottom-margin, 1px);
  position: relative;
  color: var(--menu-option-color, var(--tertiary, #6B6B6B));
}
.menu-option:last-child {
  margin-bottom: var(--menu-option-bottom-margin-last, 0px);
}
.menu-option__container {
  height: var(--menu-option-height, 36px);
  display: flex;
  align-items: center;
  background-color: var(--menu-option-background-color, transparent);
  border-radius: 5px;
  transition: background 150ms ease-out;
}
.menu-option__in {
  height: 100%;
  padding-right: var(--menu-option-inner-padding-right, 10px);
  padding-left: var(--menu-option-inner-padding-left, 10px);
  display: flex;
  align-items: center;
}
.menu-option__button {
  width: 100%;
  height: 100%;
  color: currentColor;
}
.menu-option__icon {
  opacity: var(--menu-option-icon-opacity, 1);
  margin-right: var(--menu-option-icon-margin-right, 13px);
  color: var(--menu-option-icon-color, var(--solution-primary-color));
  transition: opacity 150ms ease-out , color 150ms ease-out , fill 150ms ease-out;
}
.menu-option__icon_small_margin {
  margin-right: 8px;
  color: var(--menu-option-icon-color, var(--solution-primary-color));
}
.menu-option__icon_wrapper_right {
  justify-content: flex-end;
  flex-grow: 1;
  display: flex;
}
.menu-option__icon_right {
  margin: 0;
}
.menu-option__text {
  margin-right: 10px;
  margin: var(--menu-option-margin-text);
  transition: color 150ms ease-out;
}
.menu-option__button {
  width: 100%;
  height: 100%;
}
.menu-option__arrow {
  margin-left: auto;
}
.menu-option__awesome {
  width: 20px;
}
.menu-option__info {
  opacity: 0;
  position: absolute;
  top: 50%;
  right: 17px;
  color: var(--G-3, #C7C8C9);
  cursor: pointer;
  transform: translate(0, -50%);
  transition: opacity 150ms ease-out , color 150ms ease-out;
}
.menu-option__info:hover {
  color: var(--G-7, #6F7173);
}
.menu-option__right-content {
  padding-right: 10px;
}
.menu-option:hover:not(.is-disabled), .menu-option.is-active:not(.is-disabled) {
  color: var(--menu-option-color-active, var(--typo-primary, #2E3538));
}
.menu-option:hover:not(.is-disabled) .menu-option__container, .menu-option.is-active:not(.is-disabled) .menu-option__container {
  background-color: var(--menu-option-background-color-active, var(--G-1, #F3F3F4));
  transition: background 200ms ease-in;
}
.menu-option:hover:not(.is-disabled) .menu-option__icon, .menu-option.is-active:not(.is-disabled) .menu-option__icon {
  opacity: var(--menu-option-icon-opacity-active, 1);
  transition: opacity 200ms ease-in , color 200ms ease-in , fill 200ms ease-in;
}
.menu-option:hover:not(.is-disabled) .menu-option__text, .menu-option.is-active:not(.is-disabled) .menu-option__text {
  transition: color 200ms ease-in;
}
.menu-option:hover:not(.is-disabled) .menu-option__arrow, .menu-option.is-active:not(.is-disabled) .menu-option__arrow {
  color: var(--menu-option-arrow-color-active, var(--solution-primary-color));
}
.menu-option:hover:not(.is-disabled).menu-option--arrow-left .menu-option__arrow, .menu-option.is-active:not(.is-disabled).menu-option--arrow-left .menu-option__arrow {
  transform: rotate(180deg);
}
.menu-option:hover .menu-option__info {
  opacity: 1;
  transition: opacity 200ms ease-in , color 200ms ease-in;
}
.menu-option--hover-icon-gray:hover .menu-option__icon, .menu-option--hover-icon-gray.is-active .menu-option__icon {
  color: var(--menu-option-hover-icon-color, #2d2d2d);
}
.menu-option--hover-icon-sc3:hover .menu-option__icon, .menu-option--hover-icon-sc3.is-active .menu-option__icon {
  color: var(--solution-hover-color);
}
.menu-option--hover-icon-sc1:hover .menu-option__icon, .menu-option--hover-icon-sc1.is-active .menu-option__icon {
  color: var(--solution-primary-color);
}
.menu-option--icon-color-gray .menu-option__arrow {
  color: var(--G-7, #6F7173);
}
.menu-option--icon-color-g8 .menu-option__arrow {
  color: var(--G-8, #4d4d4d);
}
.menu-option--hover-arrow-g8:hover .menu-option__arrow, .menu-option--hover-arrow-g8.is-active:not(.is-disabled) .menu-option__arrow {
  color: var(--G-8, #4d4d4d);
}
.menu-option--hover-arrow-sc3:hover:not(.is-disabled) .menu-option__arrow {
  color: var(--solution-hover-color);
}
.menu-option--icon-color-sc1 .menu-option__arrow {
  color: var(--solution-primary-color);
}
.menu-option--icon-variable .menu-option__arrow {
  color: var(--menu-option-arrow-color, var(--G-7, #6F7173));
}
.menu-option--hover-icon-variable .menu-option__icon {
  color: var(--menu-option-icon-hover-color, var(--G-7, #6F7173));
}
.menu-option--hover-arrow-variable:hover:not(.is-disabled) .menu-option__arrow {
  color: var(--menu-option-hover-arrow-color, var(--G-7, #6F7173));
}
.menu-option--hover-icon-primary:hover:not(.is-disabled) .menu-option__icon {
  fill: var(--typo-primary, #2E3538) !important;
  color: var(--typo-primary, #2E3538) !important;
}
.menu-option--static-info .menu-option__in {
  padding-right: 32px;
}
.menu-option--static-info.menu-option--arrow-left .menu-option__in, .menu-option--static-info.menu-option--arrow-right .menu-option__in {
  padding-right: 52px;
}
.menu-option--static-info.menu-option--arrow-left .menu-option__arrow, .menu-option--static-info.menu-option--arrow-right .menu-option__arrow {
  position: absolute;
  top: var(--menu-option-arrow-top, 10px);
  right: 15px;
}
.menu-option--static-info.menu-option--arrow-left .menu-option__info, .menu-option--static-info.menu-option--arrow-right .menu-option__info {
  right: 36px;
}
.menu-option--right-content .menu-option__button {
  display: flex;
  align-items: center;
}
.menu-option--right-content .menu-option__in {
  flex-grow: 1;
}
.menu-option.is-disabled .menu-option__button {
  pointer-events: none;
}
.menu-option.is-disabled .menu-option__icon,
.menu-option.is-disabled .menu-option__arrow {
  color: var(--ic-light, #c7cdcf);
}
.menu-option.is-disabled .menu-option__text {
  color: var(--G-3, #C7C8C9);
}
.menu-option.is-coming-soon .menu-option__icon {
  color: var(--G-2, #DEDEDE);
}
.menu-option.is-coming-soon .menu-option__text {
  color: var(--inactive, #B2B2B3);
}
.menu-option.is-coming-soon:hover {
  background-color: var(--G-0-5, #FAFAFA);
}
.menu-option.is-coming-soon:hover .menu-option__text {
  color: var(--inactive, #B2B2B3);
}
.menu-option.with-info-tooltip .menu-option__in {
  padding-right: 32px;
}
.menu-option.with-info-tooltip .tooltip {
  position: absolute;
  top: 10px;
  right: 17px;
  color: var(--G-3, #C7C8C9);
}
.menu-option.with-info-tooltip .tooltip:hover {
  color: var(--G-7, #6F7173);
}

.menu-option-static {
  height: 36px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  border-radius: 5px;
}
.menu-option-static__in {
  padding: 0 5px;
  width: 100%;
}

.menu-option-wrapper {
  overflow: hidden;
  border-radius: 5px;
}
.menu-option-wrapper__list {
  display: flex;
  flex-direction: column;
  padding: 12px 0;
  overflow: auto;
}
.menu-option-wrapper__list::-webkit-scrollbar {
  width: 13px;
}
.menu-option-wrapper__list::-webkit-scrollbar-track {
  background-color: transparent;
}
.menu-option-wrapper__list::-webkit-scrollbar-thumb {
  box-shadow: inset 0 0 13px 13px rgba(155, 156, 158, 0.4);
  border: 4px solid transparent;
  border-radius: 13px;
  background-color: transparent;
}
.menu-option-wrapper__list::-webkit-scrollbar-thumb:hover {
  box-shadow: inset 0 0 13px 13px rgba(155, 156, 158, 0.6);
}
.menu-option-wrapper__additional {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--G-1-5, #E9E9E9);
  padding: 12px 0;
  background-color: var(--G-0-5, #FAFAFA);
}
.menu-option-wrapper--custom-additional .menu-option-wrapper__additional {
  padding: 0;
}
.menu-option-wrapper--small-list-paddings .menu-option-wrapper__list {
  padding: 5px 0;
}
.menu-option-wrapper--no-padding .menu-option-wrapper__list {
  padding: 0;
}

.panel-resizer {
  z-index: 15;
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--resizer-left-position, -10px);
  right: var(--resizer-right-position, auto);
  overflow: hidden;
  width: 20px;
  cursor: col-resize;
  user-select: none;
}
.panel-resizer:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--resizer-line-left-position, 9px);
  visibility: hidden;
  width: 2px;
  background-color: var(--solution-primary-color);
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}
.panel-resizer__slider {
  border-radius: 5px;
  width: 8px;
  height: 40px;
  background-color: var(--solution-primary-color);
  position: absolute;
  top: 0;
  left: var(--resizer-slider-left-position, 6px);
  opacity: 0;
}
.panel-resizer:hover:before, .panel-resizer.is-hover:before {
  opacity: 1;
  visibility: visible;
}
.panel-resizer:hover .panel-resizer__slider, .panel-resizer.is-hover .panel-resizer__slider {
  opacity: 1;
}

.submenu-content {
  border-radius: 0;
}
.submenu-content:before {
  border-radius: 0;
}
.submenu-content--radius-top-left {
  border-top-left-radius: 5px;
}
.submenu-content--radius-top-left:before {
  border-top-left-radius: 5px;
}
.submenu-content--radius-top-right {
  border-top-right-radius: 5px;
}
.submenu-content--radius-top-right:before {
  border-top-right-radius: 5px;
}
.submenu-content--radius-bottom-right {
  border-bottom-right-radius: 5px;
}
.submenu-content--radius-bottom-right:before {
  border-bottom-right-radius: 5px;
}
.submenu-content--radius-bottom-left {
  border-bottom-left-radius: 5px;
}
.submenu-content--radius-bottom-left:before {
  border-bottom-left-radius: 5px;
}
.submenu-content.enter-active {
  transition: opacity 150ms ease-out, transform 150ms ease-out;
}
.submenu-content.exit-active {
  transition: opacity 150ms ease-in, transform 150ms ease-in;
}
.submenu-content:not(.is-animation-disabled).enter {
  transform: translateX(-5px);
}
.submenu-content:not(.is-animation-disabled).enter-active {
  transform: translateX(0);
}
.submenu-content:not(.is-animation-disabled).exit-active {
  transform: translateX(-5px);
}
.flip-horizontal .submenu-content.enter {
  transform: translateX(5px);
}
.flip-horizontal .submenu-content.enter-active {
  transform: translateX(0);
}
.flip-horizontal .submenu-content.exit-active {
  transform: translateX(5px);
}

.edit-description-textarea {
  min-width: 340px;
  max-width: 340px;
}
.edit-description-textarea.with-children .edit-description-textarea__buttons {
  border-top: 1px solid var(--G-1, #F3F3F4);
}
.edit-description-textarea__inner {
  padding: 20px 20px 0 20px;
}
.edit-description-textarea__body {
  padding: 20px;
}
.edit-description-textarea__buttons {
  display: flex;
  justify-content: flex-end;
  padding: 15px 20px;
}
.edit-description-textarea__button:not(:last-child) {
  margin-right: 10px;
}
.edit-description-textarea__control::placeholder {
  font-size: 13px;
}

.widget-panel {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 47px);
  border-radius: 0 0 5px 5px;
}
.widget-panel__head {
  position: relative;
  display: flex;
  align-items: center;
  padding: 12px 20px;
  background-color: var(--G-0-5, #FAFAFA);
  border-bottom: 1px solid var(--G-1-5, #E9E9E9);
  border-radius: 5px 0 0 0;
}
.widget-panel__heading {
  margin-right: 8px;
}
.widget-panel__actions {
  cursor: pointer;
  margin-right: 15px;
}
.widget-panel__buttons {
  display: flex;
  align-items: center;
  margin-left: auto;
}
.widget-panel__close {
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--G-5, #9B9C9E);
  width: 24px;
  height: 24px;
}
.widget-panel__close:hover {
  color: var(--G-8, #4d4d4d);
}
.widget-panel__filter {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 35px;
  padding: 0 20px;
  border-bottom: 1px solid var(--G-1-5, #E9E9E9);
  z-index: 2;
}
.widget-panel__nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--G-1-5, #E9E9E9);
  padding: 0 20px;
}
.widget-panel__body {
  padding: 5px 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  height: calc(100% - 50px);
}
.widget-panel__body--no-padding {
  padding: 0;
}
.widget-panel__info-icon {
  margin-right: 15px;
}
.widget-panel.is-home-page-position {
  height: calc(100vh - 57px);
}

.widget-panel-dropdown .dropdown-panel__arrow {
  box-shadow: rgba(15, 15, 15, 0.05) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px 3px 6px;
}

.menu-tail-option {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  margin-top: 9px;
  margin-bottom: -12px;
  padding: 0 15px;
  background-color: var(--menu-tail-option-bg-color, var(--solution-secondary-color));
  color: var(--menu-tail-option-color, var(--solution-primary-color));
  cursor: pointer;
  transition: color 150ms ease-out , background-color 150ms ease-out;
}
.menu-tail-option:hover {
  transition: color 200ms ease-in , background-color 200ms ease-in;
  background-color: var(--menu-tail-option-hover-bg-color, var(--solution-secondary-color));
  color: var(--menu-tail-option-hover-color, var(--solution-hover-color));
}
.menu-tail-option__icon {
  margin-right: 10px;
}

.controls-panel__head {
  display: flex;
  align-items: center;
  gap: 15px;
  min-height: 39px;
  border-bottom: 1px solid var(--G-1-5, #E9E9E9);
  padding: 0 15px;
}
.controls-panel__close {
  margin-left: auto;
  color: var(--G-4, #B2B2B3);
  cursor: pointer;
}
.controls-panel__close:hover {
  color: var(--G-8, #4d4d4d);
}
.controls-panel__body {
  padding: var(--controls-panel-body-padding, 13px 15px);
}
.controls-panel__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  min-height: 48px;
  border-top: 1px solid var(--G-1-5, #E9E9E9);
  padding: 10px 15px;
}
.controls-panel__additional {
  display: flex;
  align-items: center;
  gap: 10px;
}
.controls-panel__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.controls-panel-field-group {
  display: flex;
  align-items: center;
}
.controls-panel-field-group__title {
  width: var(---panel-field-group-title-width, 40%);
  padding-right: 10px;
}
.controls-panel-field-group__body {
  width: var(---panel-field-group-body-width, 60%);
}

.controls-panel-delete-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--G-3, #C7C8C9);
}
.controls-panel-delete-button:hover {
  color: #FF5757;
}

.checkbox {
  display: flex;
}
.checkbox:hover .checkbox__label {
  border-color: var(--solution-primary-color);
  transition: border 0.2s ease-in-out;
}
.checkbox input {
  display: none;
}
.checkbox input:checked + .checkbox__label {
  border-color: var(--solution-primary-color);
  background-color: var(--solution-primary-color);
}
.checkbox input:checked + .checkbox__label:before {
  opacity: 1;
}
.checkbox__label {
  position: relative;
  display: block;
  width: 18px;
  height: 18px;
  border: 2px solid var(--G-2, #DEDEDE);
  border-radius: 3px;
  background-color: var(--G-0, #FFFFFF);
  cursor: pointer;
}
.checkbox__label:before {
  content: "";
  opacity: 0;
  position: absolute;
  top: 2px;
  left: 5px;
  display: block;
  width: 5px;
  height: 9px;
  border-bottom: 2px solid var(--G-0, #FFFFFF);
  border-right: 2px solid var(--G-0, #FFFFFF);
  transform: rotate(45deg);
}
.checkbox--circle .checkbox__label {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid var(--solution-primary-color);
}
.checkbox--circle .checkbox__label::before {
  content: none;
}
.checkbox.is-error .checkbox__label {
  border-color: #FF5757;
}
.checkbox.is-read-only {
  pointer-events: none;
}
.checkbox.is-read-only .checkbox__label {
  border-color: var(--G-4, #B2B2B3) !important;
  background-color: var(--G-4, #B2B2B3) !important;
}
.checkbox--currentcolor input:checked + .checkbox__label {
  border-color: currentColor;
  background-color: currentColor;
}
.checkbox--currentcolor.checkbox--circle .checkbox__label {
  border-color: currentColor;
}
.checkbox--currentcolor.checkbox--rect:hover .checkbox__label {
  border-color: currentColor;
}

.field-label {
  display: block;
  margin-bottom: 4px;
  text-overflow: ellipsis;
  overflow: auto;
  white-space: nowrap;
}
.field-label--color-link {
  color: var(--solution-primary-color);
  text-decoration: none;
}
.field-label--color-primary {
  color: var(--typo-primary, #2E3538);
}
.field-label--color-secondary {
  color: var(--typo-secondary, #878B92);
}
.field-label--color-reverse {
  color: var(--typo-white, var(--G-0, #FFFFFF));
}
.field-label--color-tertiary {
  color: var(--tertiary, #6B6B6B);
}
.field-label--color-inactive {
  color: var(--inactive, #B2B2B3);
}
.field-label--color-error {
  color: #FF5757;
}
.field-label--weight-light {
  font-weight: 300;
}
.field-label--weight-regular {
  font-weight: 400;
}
.field-label--weight-medium {
  font-weight: 500;
}
.field-label--weight-semibold {
  font-weight: 600;
}
.field-label--weight-bold {
  font-weight: 700;
}
.field-label--weight-heavy {
  font-weight: 900;
}

.react-input-field {
  position: relative;
  overflow: hidden;
  width: 100%;
  border-radius: 5px;
}
.react-input-field input {
  width: 100%;
  background-color: transparent;
  line-height: normal;
  text-overflow: ellipsis;
  transition: border 150ms ease-out;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}
.react-input-field input::placeholder {
  font-family: inherit;
  letter-spacing: -0.21px;
}
.react-input-field input::-webkit-inner-spin-button {
  display: none;
}
.react-input-field__icon {
  position: absolute;
  top: 50%;
  display: flex;
  color: var(--solution-primary-color);
  transform: translate(0, -50%);
  cursor: pointer;
}
.react-input-field__checkbox {
  position: absolute;
  top: 50%;
  right: 10px;
  display: flex;
  color: var(--solution-primary-color);
  transform: translate(0, -50%);
  cursor: pointer;
}
.react-input-field__clear {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 28px;
  height: 30px;
  color: var(--ic-light, #c7cdcf);
  cursor: pointer;
  transition: color 0.2s ease-in-out;
}
.react-input-field__clear:hover {
  color: var(--G-6, #868788);
}
.react-input-field__clear-text {
  position: absolute;
  bottom: 5px;
  right: 7px;
  color: var(--typo-secondary, #878B92);
  cursor: pointer;
  transition: color 0.2s ease-in-out;
}
.react-input-field__clear-text:hover {
  color: #FF5757;
}
.react-input-field__length {
  position: absolute;
  right: 0;
  color: var(--typo-secondary, #878B92);
  pointer-events: none;
  transition: right 250ms ease-out;
}
.react-input-field--text-color-primary input {
  color: var(--typo-primary, #2E3538);
}
.react-input-field--text-color-secondary input {
  color: var(--typo-secondary, #878B92);
}
.react-input-field--text-color-reverse input {
  color: var(--typo-white, var(--G-0, #FFFFFF));
}
.react-input-field--text-color-tertiary input {
  color: var(--tertiary, #6B6B6B);
}
.react-input-field--text-color-inactive input {
  color: var(--inactive, #B2B2B3);
}
.react-input-field--text-color-error input {
  color: #FF5757;
}
.react-input-field--text-color-success input {
  color: #3EAC40;
}
.react-input-field--text-color-link input {
  color: var(--solution-primary-color);
}
.react-input-field--text-color-currentColor input {
  color: currentColor;
}
.react-input-field--text-weight-regular input {
  font-weight: normal;
}
.react-input-field--text-weight-medium input {
  font-weight: 500;
}
.react-input-field--text-weight-semibold input {
  font-weight: 600;
}
.react-input-field--text-weight-bold input {
  font-weight: bold;
}
.react-input-field--text-size-xs input {
  font-size: 11px;
}
.react-input-field--text-size-s input {
  font-size: 12px;
}
.react-input-field--text-size-m input {
  font-size: 13px;
}
.react-input-field--text-size-l input {
  font-size: 14px;
}
.react-input-field--text-size-xl input {
  font-size: 20px;
}
.react-input-field--placeholder-color-inactive input::placeholder {
  color: var(--inactive, #B2B2B3);
}
.react-input-field--placeholder-color-secondary input::placeholder {
  color: var(--typo-secondary, #878B92);
}
.react-input-field--placeholder-color-primary input::placeholder {
  color: var(--typo-primary, #2E3538);
}
.react-input-field--background-color-transparent {
  background-color: transparent;
}
.react-input-field--background-color-white {
  background-color: var(--G-0, #FFFFFF);
}
.react-input-field--background-color-G-0-5 {
  background-color: var(--G-0-5, #FAFAFA);
}
.react-input-field--background-color-G-1 {
  background-color: var(--G-1, #F3F3F4);
}
.react-input-field--border-color-transparent input {
  border: 0;
}
.react-input-field--border-color-G-1-5 input {
  border: 1px solid var(--G-1-5, #E9E9E9);
}
.react-input-field--border-color-E5E5E5 input {
  border: 1px solid #E5E5E5;
}
.react-input-field--border-hover-color-transparent input:hover {
  border: 0;
}
.react-input-field--border-hover-color-G-1-5 input:hover {
  border: 1px solid var(--G-1-5, #E9E9E9);
  transition: border 200ms ease-in;
}
.react-input-field--border-hover-color-G-3 input:hover {
  border: 1px solid var(--G-3, #C7C8C9);
  transition: border 200ms ease-in;
}
.react-input-field--border-focus-color-transparent input:focus {
  border: 0;
}
.react-input-field--border-focus-color-G-1-5 input:focus {
  border: 1px solid var(--G-1-5, #E9E9E9);
  transition: border 200ms ease-in;
}
.react-input-field--border-focus-color-G-3 input:focus {
  border: 1px solid var(--G-3, #C7C8C9);
  transition: border 200ms ease-in;
}
.react-input-field--border-focus-color-solution-color input:focus {
  border: 1px solid var(--solution-primary-color);
  transition: border 200ms ease-in;
}
.react-input-field--border-radius-5 {
  border-radius: 5px;
}
.react-input-field--border-radius-5 input {
  border-radius: 5px;
}
.react-input-field--border-radius-100 {
  border-radius: 100px;
}
.react-input-field--border-radius-100 input {
  border-radius: 100px;
}
.react-input-field--gutters-20 input {
  padding: 0 20px;
}
.react-input-field--gutters-16 input {
  padding: 0 16px;
}
.react-input-field--gutters-10 input {
  padding: 0 10px;
}
.react-input-field--gutters-0 input {
  padding: 0;
}
.react-input-field--gap-top-4 {
  margin-top: 4px;
}
.react-input-field--left-icon .react-input-field__icon {
  left: 8px;
}
.react-input-field--left-icon input {
  padding-left: 35px;
}
.react-input-field--right-icon .react-input-field__icon {
  right: 8px;
}
.react-input-field--right-icon input {
  padding-right: 30px;
}

.react-number-input-field {
  position: relative;
  width: 100%;
  border-radius: 5px;
  user-select: none;
}
.react-number-input-field::after {
  content: "";
  position: absolute;
  top: -3px;
  right: -3px;
  bottom: -3px;
  left: -3px;
  opacity: 0;
  pointer-events: none;
  border: 3px solid var(--solution-primary-color);
  visibility: hidden;
  border-radius: 8px;
  transition: opacity 150ms ease-out , visibility 150ms ease-out;
  box-sizing: border-box;
}
.react-number-input-field.active {
  box-sizing: border-box;
}
.react-number-input-field.active::after {
  visibility: visible;
  opacity: 0.3;
  transition: opacity 200ms ease-in , visibility 200ms ease-in;
}
.react-number-input-field.active input {
  box-sizing: border-box;
  border: 1px solid var(--solution-primary-color);
}
.react-number-input-field input {
  width: 100%;
  padding: 0 10px 0 10px;
  background-color: transparent;
  line-height: normal;
  text-overflow: ellipsis;
  transition: border 150ms ease-out;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}
.react-number-input-field input::placeholder {
  font-family: inherit;
  letter-spacing: -0.21px;
}
.react-number-input-field input::-webkit-inner-spin-button {
  display: none;
}
.react-number-input-field--text-color-primary input {
  color: var(--typo-primary, #2E3538);
}
.react-number-input-field--text-color-secondary input {
  color: var(--typo-secondary, #878B92);
}
.react-number-input-field--text-color-reverse input {
  color: var(--typo-white, var(--G-0, #FFFFFF));
}
.react-number-input-field--text-color-tertiary input {
  color: var(--tertiary, #6B6B6B);
}
.react-number-input-field--text-color-inactive input {
  color: var(--inactive, #B2B2B3);
}
.react-number-input-field--text-color-error input {
  color: #FF5757;
}
.react-number-input-field--text-color-success input {
  color: #3EAC40;
}
.react-number-input-field--text-color-link input {
  color: var(--solution-primary-color);
}
.react-number-input-field--text-color-currentColor input {
  color: currentColor;
}
.react-number-input-field--text-size-xs input {
  font-size: 11px;
}
.react-number-input-field--text-size-s input {
  font-size: 12px;
}
.react-number-input-field--text-size-m input {
  font-size: 13px;
}
.react-number-input-field--text-size-l input {
  font-size: 14px;
}
.react-number-input-field--text-size-xl input {
  font-size: 20px;
}
.react-number-input-field--placeholder-color-inactive input::placeholder {
  color: var(--inactive, #B2B2B3);
}
.react-number-input-field--placeholder-color-secondary input::placeholder {
  color: var(--typo-secondary, #878B92);
}
.react-number-input-field--placeholder-color-primary input::placeholder {
  color: var(--typo-primary, #2E3538);
}
.react-number-input-field--background-color-transparent {
  background-color: transparent;
}
.react-number-input-field--background-color-white {
  background-color: var(--G-0, #FFFFFF);
}
.react-number-input-field--background-color-G-0-5 {
  background-color: var(--G-0-5, #FAFAFA);
}
.react-number-input-field--background-color-G-1 {
  background-color: var(--G-1, #F3F3F4);
}
.react-number-input-field--border-color-transparent input {
  border: 0;
}
.react-number-input-field--border-color-G-1-5 input {
  border: 1px solid var(--G-1-5, #E9E9E9);
}
.react-number-input-field--border-color-E5E5E5 input {
  border: 1px solid #E5E5E5;
}
.react-number-input-field--border-hover-color-transparent input:hover {
  border: 0;
}
.react-number-input-field--border-hover-color-G-1-5 input:hover {
  border: 1px solid var(--G-1-5, #E9E9E9);
  transition: border 200ms ease-in;
}
.react-number-input-field--border-hover-color-G-3 input:hover {
  border: 1px solid var(--G-3, #C7C8C9);
  transition: border 200ms ease-in;
}
.react-number-input-field--border-focus-color-transparent input:focus {
  border: 0;
}
.react-number-input-field--border-focus-color-G-1-5 input:focus {
  border: 1px solid var(--G-1-5, #E9E9E9);
  transition: border 200ms ease-in;
}
.react-number-input-field--border-focus-color-G-3 input:focus {
  border: 1px solid var(--G-3, #C7C8C9);
  transition: border 200ms ease-in;
}
.react-number-input-field--border-focus-color-solution-color input:focus {
  border: 1px solid var(--solution-primary-color);
  transition: border 200ms ease-in;
}
.react-number-input-field--border-radius-5 {
  border-radius: 5px;
}
.react-number-input-field--border-radius-5 input {
  border-radius: 5px;
}
.react-number-input-field--border-radius-100 {
  border-radius: 100px;
}
.react-number-input-field--border-radius-100 input {
  border-radius: 100px;
}
.react-number-input-field__overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 11px;
  display: flex;
  align-items: center;
  pointer-events: none;
  white-space: nowrap;
}
.react-number-input-field__suffix-text {
  position: absolute;
  top: 0;
  right: 30px;
  line-height: 35px;
}
.react-number-input-field__navigation {
  position: absolute;
  top: 1px;
  right: 0;
  bottom: 1px;
  border-left: 1px solid var(--G-1, #F3F3F4);
}
.react-number-input-field__navigation--arrow {
  display: flex;
  width: 19px;
  height: 50%;
  padding: 0 1px;
  color: var(--G-5, #9B9C9E);
  cursor: pointer;
  overflow: hidden;
}
.react-number-input-field__navigation--arrow:hover {
  color: #2d2d2d;
}
.react-number-input-field--auto-hide-navigation .react-number-input-field__navigation {
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms ease-out;
}
.react-number-input-field--auto-hide-navigation.is-focus .react-number-input-field__navigation, .react-number-input-field--auto-hide-navigation:hover .react-number-input-field__navigation {
  opacity: 1;
  pointer-events: all;
  transition: opacity 200ms ease-in;
}
.react-number-input-field.is-overlay-text input {
  color: rgba(255, 255, 255, 0);
}
.react-number-input-field.is-overlay-text.is-focus input {
  color: var(--typo-primary, #2E3538);
}
.react-number-input-field.is-overlay-text.is-focus .react-number-input-field__overlay {
  opacity: 0;
}

.react-input-group {
  display: flex;
  border-radius: 5px;
  position: relative;
  width: 100%;
  min-height: 34px;
  transition: border-color 150ms ease-out , background 150ms ease-out;
}
.react-input-group::after {
  content: "";
  position: absolute;
  top: -4px;
  right: -4px;
  bottom: -4px;
  left: -4px;
  opacity: 0;
  pointer-events: none;
  border: 3px solid var(--input-group-shadow-color-active, var(--solution-primary-color));
  visibility: hidden;
  border-radius: 8px;
  transition: opacity 150ms ease-out , visibility 150ms ease-out;
}
.react-input-group__tooltip.tooltip {
  position: absolute;
  top: 50%;
  right: 10px;
  color: #FF5757;
  transform: translateY(-50%);
}
.react-input-group--rounded {
  border-radius: 40px;
}
.react-input-group--rounded::before, .react-input-group--rounded::after {
  border-radius: inherit;
}
.react-input-group--white {
  border: 1px solid var(--G-1-5, #E9E9E9);
  background-color: var(--G-0, #FFFFFF);
}
.react-input-group--white:hover {
  border-color: var(--input-group-white-hover-border-color, var(--G-4, #B2B2B3));
}
.react-input-group--white.react-input-group.is-error {
  background-color: var(--G-0, #FFFFFF);
}
.react-input-group--grey {
  border: 1px solid var(--G-1, #F3F3F4);
  background-color: var(--G-1, #F3F3F4);
}
.react-input-group--grey:hover {
  border-color: var(--G-4, #B2B2B3);
}
.react-input-group--grey.is-active:not(.react-input-group--read-only) {
  background-color: var(--G-0, #FFFFFF);
  transition: background 200ms ease-in;
}
.react-input-group--grey.is-read-only.is-active, .react-input-group--grey.is-read-only:hover, .react-input-group--grey.react-input-group--read-only.is-active, .react-input-group--grey.react-input-group--read-only:hover {
  border-color: var(--G-4, #B2B2B3);
}
.react-input-group--grey.is-read-only.is-active::after, .react-input-group--grey.is-read-only:hover::after, .react-input-group--grey.react-input-group--read-only.is-active::after, .react-input-group--grey.react-input-group--read-only:hover::after {
  opacity: 0;
  visibility: hidden;
}
.react-input-group--grey.is-error {
  background-color: var(--G-1, #F3F3F4);
  transition: background 200ms ease-in;
}
.react-input-group--darken-border {
  border: 1px solid var(--G-4, #B2B2B3);
}
.react-input-group--darken-border.is-active {
  border-color: var(--solution-primary-color);
}
.react-input-group--darken-border:focus {
  box-shadow: 0 0 0 2px #B7E3FB;
}
.react-input-group--transparent {
  background-color: transparent;
  transition: background-color 200ms ease-in;
}
.react-input-group--transparent:hover, .react-input-group--transparent.is-active {
  background-color: rgba(45, 45, 45, 0.2);
}
.react-input-group--transparent:hover .search-sort-by-dropdown, .react-input-group--transparent.is-active .search-sort-by-dropdown {
  background-color: var(--G-1, #F3F3F4);
}
.react-input-group--transparent:after {
  display: none;
}
.react-input-group--fully-transparent {
  background-color: transparent;
  transition: background-color 200ms ease-in;
}
.react-input-group--fully-transparent:hover, .react-input-group--fully-transparent.is-active {
  background-color: transparent;
}
.react-input-group.is-active, .react-input-group:hover, .react-input-group.is-error {
  transition: border-color 200ms ease-in;
}
.react-input-group.is-active {
  border-color: var(--input-group-border-color-active, var(--solution-primary-color));
}
.react-input-group.is-active::after {
  visibility: visible;
  opacity: 0.3;
  transition: opacity 200ms ease-in , visibility 200ms ease-in;
}
.react-input-group.is-error {
  background-color: var(--G-1, #F3F3F4);
  border-color: #FF5757;
  transition: background 200ms ease-in;
}
.react-input-group.is-disabled {
  pointer-events: none;
}
.react-input-group.is-read-only > *:not(.allow-pointer-events), .react-input-group--read-only > *:not(.allow-pointer-events) {
  pointer-events: none;
}
.react-input-group.is-read-only > *:not(.allow-pointer-events) *, .react-input-group--read-only > *:not(.allow-pointer-events) * {
  pointer-events: none;
}

.native-select {
  width: 100%;
  padding: 0px 7px;
  border: none;
  background-color: transparent;
  color: var(--typo-primary, #2E3538);
  font-size: 13px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  transition: border-color 150ms ease-out;
}
.native-select--multiple {
  padding: 7px;
}
.native-select--placeholder {
  color: var(--inactive, #B2B2B3);
}

.input-picker-group {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.input-picker-group--size-32 {
  min-height: 32px;
}
.input-picker-group--size-32 .input-picker-group__plus-button {
  top: 7px;
  right: 8px;
}
.input-picker-group--size-36 {
  min-height: 36px;
}
.input-picker-group--size-36 .input-picker-group__plus-button {
  top: 9px;
  right: 9px;
}
.input-picker-group--addbutton {
  padding-right: 30px;
}
.input-picker-group__plus-button {
  position: absolute;
  display: inline-flex;
  cursor: pointer;
}

.picker-input-field {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding-top: var(--picker-input-field-gutter);
  padding-left: 4px;
  cursor: text;
}
.picker-input-field--size-32 {
  --picker-input-field-gutter: 3px;
}
.picker-input-field--size-36 {
  --picker-input-field-gutter: 4px;
}
.picker-input-field__placeholder {
  margin-bottom: var(--picker-input-field-gutter);
  margin-left: 4px;
}
.picker-input-field__input {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-size: 13px;
  margin: 0 4px var(--picker-input-field-gutter) 4px;
  flex: 1;
}
.picker-input-field__input::placeholder {
  text-overflow: ellipsis;
  color: var(--inactive, #B2B2B3);
}
.picker-input-field__pill {
  margin: 0 4px var(--picker-input-field-gutter) 0;
}

.limited-text-counter {
  text-align: right;
  display: inline-block;
  width: 100%;
  opacity: 0;
  transition: opacity 150ms ease-out;
}
.limited-text-counter.is-visible {
  opacity: 1;
  transition: opacity 200ms ease-in;
}

.plain-form-control {
  --active-color: var(--typo-primary, #2E3538);
  width: 100%;
  margin-bottom: 18px;
}
.plain-form-control__header {
  display: flex;
  align-items: center;
  margin-bottom: 4px;
}
.plain-form-control__header-icon {
  line-height: 0;
  margin-right: 5px;
  color: var(--typo-secondary, #878B92);
}
.plain-form-control__tooltip {
  margin-left: 4px;
}
.plain-form-control__label {
  margin-bottom: 0;
  transition: color 150ms ease-out;
}
.plain-form-control__error {
  margin-top: 4px;
}
.plain-form-control__required {
  position: relative;
  margin: 0 0 0 4px;
  padding-left: 7px;
  line-height: 100%;
}
.plain-form-control__required:before {
  content: "";
  position: absolute;
  top: 50%;
  margin-top: -1px;
  height: 3px;
  width: 3px;
  border-radius: 50%;
  left: 0;
  background-color: #FF5757;
}
.plain-form-control:hover .plain-form-control__label, .plain-form-control:hover .plain-form-control__header-icon, .plain-form-control.is-active .plain-form-control__label, .plain-form-control.is-active .plain-form-control__header-icon {
  color: var(--active-color);
  transition: color 200ms ease-in;
}
.plain-form-control.is-error .plain-form-control__label, .plain-form-control.is-error .plain-form-control__header-icon {
  color: #FF5757;
  transition: color 200ms ease-in;
}
.plain-form-control__inline-help {
  margin-top: 4px;
  cursor: default;
  white-space: break-spaces;
}
.plain-form-control__caption {
  margin-top: -3px;
  margin-bottom: 9px;
}
.plain-form-control.is-row-direction {
  display: flex;
  flex-direction: row;
}
.plain-form-control.is-row-direction .plain-form-control__header {
  margin-bottom: 0;
  width: 50%;
}
.plain-form-control.is-row-direction .plain-form-control__body {
  width: 50%;
}

.switcher {
  cursor: pointer;
  position: relative;
  display: inline-flex;
  align-items: center;
}
.switcher input {
  display: none;
}
.switcher__control {
  position: relative;
}
.switcher__control:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: var(--switcher-background-opacity, 0.3);
  border-radius: 12px;
  pointer-events: none;
  background-color: var(--switcher-background, var(--solution-primary-color));
  transition: opacity 150ms ease-out;
}
.switcher__toggle {
  z-index: 5;
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  background-color: var(--G-0, #FFFFFF);
  border-radius: 50%;
  transition: transform 150ms ease-out;
}
.switcher__label {
  margin-left: 12px;
}
.switcher--size-s .switcher__control {
  width: 30px;
  height: 16px;
}
.switcher--size-s .switcher__toggle {
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  transform: translateX(14px);
}
.switcher--size-l .switcher__control {
  width: 42px;
  height: 25px;
}
.switcher--size-l .switcher__toggle {
  top: 4px;
  left: 4px;
  width: 17px;
  height: 17px;
  transform: translateX(17px);
}
.switcher.is-checked .switcher__toggle {
  transform: translateX(0);
  transition: transform 200ms ease-in;
}
.switcher.is-checked .switcher__control:before {
  opacity: 1;
  transition: opacity 200ms ease-in;
}
.switcher.is-disabled {
  pointer-events: none;
}
.switcher.is-flipped.switcher--size-s .switcher__toggle {
  left: 2px;
  transform: translateX(0);
}
.switcher.is-flipped.switcher--size-s.is-checked .switcher__toggle {
  transform: translateX(14px);
}
.switcher.is-flipped.switcher--size-l .switcher__toggle {
  left: 4px;
  transform: translateX(0);
}
.switcher.is-flipped.switcher--size-l.is-checked .switcher__toggle {
  transform: translateX(17px);
}

.switcher-automation {
  cursor: pointer;
  position: relative;
  display: inline-flex;
  align-items: center;
}
.switcher-automation input {
  display: none;
}
.switcher-automation__control {
  position: relative;
}
.switcher-automation__control:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 12px;
  pointer-events: none;
  background-color: var(--switcher-background, #B2B2B3);
}
.switcher-automation__toggle {
  z-index: 5;
  position: absolute;
  top: 1px;
  left: 1px;
  width: 14px;
  height: 14px;
  background-color: var(--G-0, #FFFFFF);
  border-radius: 50%;
  transition: transform 150ms ease-out;
}
.switcher-automation__labels {
  position: absolute;
  top: 2px;
  left: 0;
  width: 100%;
  height: 100%;
  color: var(--typo-white, var(--G-0, #FFFFFF));
  transition: all 0.4s ease-in-out;
  font-size: 9px;
  line-height: 11px;
  text-transform: uppercase;
  font-weight: 700;
}
.switcher-automation__labels:after {
  content: attr(data-off);
  position: absolute;
  right: 5px;
  opacity: 1;
}
.switcher-automation__labels:before {
  content: attr(data-on);
  position: absolute;
  left: 5px;
  opacity: 0;
}
.switcher-automation .switcher-automation__control {
  width: 41px;
  height: 16px;
}
.switcher-automation.is-checked .switcher-automation__toggle {
  transform: translateX(25px);
  transition: transform 200ms ease-in;
}
.switcher-automation.is-checked .switcher-automation__control .switcher-automation__labels:after {
  opacity: 0;
}
.switcher-automation.is-checked .switcher-automation__control .switcher-automation__labels:before {
  opacity: 1;
}
.switcher-automation.is-checked .switcher-automation__control:before {
  opacity: 1;
  transition: opacity 200ms ease-in;
  background-color: var(--switcher-background, #3EAC40);
}
.switcher-automation.is-disabled {
  pointer-events: none;
}

.r-textarea {
  width: 100%;
  background-color: transparent;
  border: 0;
  border-radius: 5px;
  font-size: 13px;
  line-height: 18px;
  color: var(--typo-primary, #2E3538);
  resize: none;
  overflow: hidden;
  display: block;
  padding: 8px 10px 7px;
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}
.r-textarea::placeholder {
  color: var(--inactive, #B2B2B3);
}

.color-picker-palette {
  padding: 16px 14px 14px;
}
.color-picker-palette__list {
  display: flex;
  flex-wrap: wrap;
  margin: 0 var(--color-picker-item-indent-negative, -7.5px) var(--color-picker-item-bottom-indent-negative, -15px);
}
.color-picker-palette__item {
  padding: 0 var(--color-picker-item-indent, 7.5px);
  font-size: 0;
  margin-bottom: var(--color-picker-item-bottom-indent, 15px);
}
.color-picker-palette__button {
  min-width: var(--color-picker-item-dimension, 28px);
  width: var(--color-picker-item-dimension, 28px);
  height: var(--color-picker-item-dimension, 28px);
  border-radius: var(--color-picker-item-radius, 4px);
  transform: scale(1);
  transition: transform 150ms ease-out;
  position: relative;
}
.color-picker-palette__button:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 9px;
  opacity: 0;
  border-bottom: 2px solid var(--G-0, #FFFFFF);
  border-right: 2px solid var(--G-0, #FFFFFF);
  transform: rotate(45deg);
  margin-left: -2px;
  margin-top: -6px;
  display: none;
  transition: opacity 150ms ease-out;
}
.color-picker-palette__button:after {
  content: "";
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  border-radius: 6px;
  border: 2px solid currentColor;
  opacity: 0;
  transform: scale(0.95);
  transition: transform 150ms ease-out , opacity 150ms ease-out;
}
.color-picker-palette__button.is-darken:before {
  border-color: var(--ic-dark, #2D2D2D);
}
.color-picker-palette__button:hover:after, .color-picker-palette__button.is-active:after {
  opacity: 1;
  transform: scale(1);
  transition: transform 200ms ease-in , opacity 200ms ease-in;
}
.color-picker-palette__button:hover:before, .color-picker-palette__button.is-active:before {
  opacity: 1;
  transition: opacity 200ms ease-in;
}
.color-picker-palette__button.is-active::before {
  display: block;
}

.color-picker-palette-no-color {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border: 1px solid var(--G-1-5, #E9E9E9);
  height: 28px;
  margin-bottom: 16px;
  border-radius: 4px;
  position: relative;
  cursor: pointer;
  transition: border-color 150ms ease-out;
}
.color-picker-palette-no-color__check {
  opacity: 0;
  position: absolute;
  left: 7px;
  color: var(--solution-primary-color);
  transition: opacity 150ms ease-out;
}
.color-picker-palette-no-color:hover {
  border-color: var(--G-3, #C7C8C9);
  transition: border-color 200ms ease-in;
}
.color-picker-palette-no-color--selected {
  border-color: var(--solution-primary-color);
}
.color-picker-palette-no-color--selected .color-picker-palette-no-color__check {
  opacity: 1;
  transition: opacity 200ms ease-in;
}
.color-picker-palette-no-color--selected:hover {
  border-color: var(--solution-primary-color);
  transition: border-color 200ms ease-in;
}

.custom-scrollbar-textarea {
  overflow: hidden;
  display: flex;
  width: 100%;
  min-width: 100%;
}
.custom-scrollbar-textarea__scrollbar {
  width: 100%;
}
.custom-scrollbar-textarea__resizer {
  position: absolute;
  right: 0;
  bottom: 0;
  font-size: 0;
  color: #b6b6b9;
  border-radius: 0 0 5px 0;
  cursor: se-resize;
}
.custom-scrollbar-textarea__field {
  min-height: 100%;
  padding: 6px 8px 5px;
  -ms-overflow-style: none;
  scrollbar-width: none;
  overflow: -moz-scrollbars-none;
}
.custom-scrollbar-textarea__field::-webkit-scrollbar {
  display: none !important;
  width: 0;
  height: 0;
}

.calendar-picker-group-input {
  display: inline-flex;
  align-items: center;
  padding: 0 30px 0 10px;
  font-size: 13px;
  letter-spacing: -0.21px;
  cursor: pointer;
  white-space: nowrap;
  width: auto;
}
.calendar-picker-group-input__icons {
  display: flex;
  gap: 10px;
  position: absolute;
  top: 50%;
  right: 7px;
  margin-top: -8px;
}
.calendar-picker-group-input.is-empty {
  color: var(--typo-secondary, #878B92);
}
.calendar-picker-group-input.is-active .calendar-picker-group-input__icon {
  color: var(--solution-highlight-color);
}

.radio-button input {
  display: none;
}
.radio-button input:checked + .radio-button__label:before {
  opacity: 1;
}
.radio-button__wrapper {
  display: flex;
}
.radio-button__label {
  position: relative;
  display: block;
  width: 18px;
  height: 18px;
  border: 2px solid var(--G-2, #DEDEDE);
  border-radius: 50%;
  background-color: var(--G-0, #FFFFFF);
  cursor: pointer;
}
.radio-button__label:before {
  content: "";
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  width: 8px;
  height: 8px;
  background-color: var(--solution-primary-color);
  border-radius: 50%;
}
.radio-button:hover:not(.is-error) .radio-button__label {
  border-color: var(--solution-primary-color);
  transition: border 0.2s ease-in-out;
}
.radio-button.is-error .radio-button__label {
  border-color: #FF5757;
}
.radio-button.is-error .radio-button__label:before {
  background-color: #FF5757;
}

.radio-button-label__icon {
  margin-right: 8px;
}
.radio-button-label__container {
  display: flex;
  align-items: center;
  cursor: default;
}
.radio-button-label__control {
  margin-right: 10px;
}
.radio-button-label__value {
  margin-top: 7px;
}
.radio-button-label--clickable .radio-button-label__container {
  cursor: pointer;
}
.radio-button-label.is-disable {
  pointer-events: none;
  cursor: default;
}
.radio-button-label.is-disable .radio-button-label__content {
  color: var(--typo-secondary, #878B92);
}
.radio-button-label:hover:not(.is-error) .radio-button-label__radio-button .radio-button__label {
  border-color: var(--solution-primary-color);
  transition: border 0.2s ease-in-out;
}

.checkbox-label {
  position: relative;
}
.checkbox-label__in {
  display: flex;
  align-items: center;
  cursor: pointer;
}
.checkbox-label__in:hover .checkbox-label__checkbox .checkbox__label {
  border-color: var(--solution-primary-color);
  transition: border 0.2s ease-in-out;
}
.checkbox-label__control {
  margin-right: 10px;
}
.checkbox-label__error {
  margin-top: 4px;
}
.checkbox-label.is-disable .checkbox-label__in {
  pointer-events: none;
  cursor: default;
  color: var(--typo-secondary, #878B92);
}
.checkbox-label--error-overlap .checkbox-label__error {
  position: absolute;
  top: 100%;
  left: 0;
}

.basic-onoff {
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  cursor: pointer;
}
.basic-onoff input {
  position: absolute;
  opacity: 0;
  visibility: hidden;
}
.basic-onoff__control {
  position: relative;
  display: inline-flex;
  height: 26px;
  border: 1px solid var(--border-color);
  border-radius: 5px;
  background-color: var(--default-color);
  color: var(--G-7, #6F7173);
  transition: background-color 0.2s ease-in-out;
}
.basic-onoff__control:hover {
  background-color: var(--default-hover, inherit);
}
.basic-onoff__placeholders {
  opacity: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 3px;
  margin: 0 var(--toggle-offset, 3px);
  border: var(--toggle-offset, 3px) solid transparent;
  padding-right: var(--toggle-width, 20px);
  pointer-events: none;
  visibility: hidden;
}
.basic-onoff__toggle {
  z-index: 5;
  position: absolute;
  top: 50%;
  left: var(--toggle-offset, 3px);
  width: var(--toggle-width, 20px);
  height: 20px;
  border-radius: 3px;
  background-color: var(--toggle-color);
  transition: all 200ms cubic-bezier(0.55, 0.085, 0.68, 0.53);
  transform: translateY(-50%);
}
.basic-onoff__lines {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  width: 1px;
  height: 13px;
  margin: auto;
  background-color: var(--G-2, #DEDEDE);
}
.basic-onoff__lines:before {
  content: "";
  position: absolute;
  top: 0;
  left: -4px;
  display: block;
  width: 1px;
  height: inherit;
  background-color: var(--G-2, #DEDEDE);
}
.basic-onoff__lines:after {
  content: "";
  position: absolute;
  top: 0;
  right: -4px;
  display: block;
  width: 1px;
  height: inherit;
  background-color: var(--G-2, #DEDEDE);
}
.basic-onoff__on {
  opacity: 0;
  position: absolute;
  top: 0;
  right: calc(var(--toggle-width, 20px) + var(--toggle-offset, 3px) * 2);
  bottom: 0;
  left: var(--toggle-offset, 3px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--G-0, #FFFFFF);
  transition: opacity 0.2s ease-in-out;
}
.basic-onoff__off {
  position: absolute;
  top: 0;
  right: var(--toggle-offset, 3px);
  bottom: 0;
  left: calc(var(--toggle-width, 20px) + var(--toggle-offset, 3px) * 2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--G-0, #FFFFFF);
  transition: opacity 0.2s ease-in-out;
}
.basic-onoff.is-checked .basic-onoff__control {
  background-color: var(--active-color);
  color: var(--G-0, #FFFFFF);
}
.basic-onoff.is-checked .basic-onoff__control:hover {
  background-color: var(--active-hover, inherit);
}
.basic-onoff.is-checked .basic-onoff__toggle {
  left: 100%;
  margin-left: calc(var(--toggle-offset, 3px) * -1);
  background-color: var(--active-toggle-color);
  transform: translate(-100%, -50%);
}
.basic-onoff.is-checked .basic-onoff__on {
  opacity: 1;
}
.basic-onoff.is-checked .basic-onoff__off {
  opacity: 0;
}
.basic-onoff.is-read-only {
  pointer-events: none;
}
.basic-onoff.is-reverse .basic-onoff__toggle {
  left: 100%;
  margin-left: calc(var(--toggle-offset, 3px) * -1);
  background-color: var(--active-toggle-color);
  transform: translate(-100%, -50%);
}
.basic-onoff.is-reverse .basic-onoff__on {
  right: var(--toggle-offset, 3px);
  left: calc(var(--toggle-width, 20px) + var(--toggle-offset, 3px) * 2);
}
.basic-onoff.is-reverse .basic-onoff__off {
  left: var(--toggle-offset, 3px);
  right: calc(var(--toggle-width, 20px) + var(--toggle-offset, 3px) * 2);
}
.basic-onoff.is-reverse.is-checked .basic-onoff__toggle {
  left: var(--toggle-offset, 3px);
  margin-left: 0;
  transform: translate(0, -50%);
}
.basic-onoff--xxl {
  --toggle-width: 25px;
}
.basic-onoff--xxl .basic-onoff__control {
  min-width: 65px;
  height: 36px;
  border-radius: 5px;
}
.basic-onoff--xxl .basic-onoff__toggle {
  height: 30px;
}
.basic-onoff--xxl .basic-onoff__lines {
  height: 20px;
}
.basic-onoff--xl .basic-onoff__control {
  min-width: 54px;
}
.basic-onoff--l {
  --toggle-offset: 2px;
}
.basic-onoff--l .basic-onoff__control {
  min-width: 54px;
  height: 24px;
}
.basic-onoff--m {
  --toggle-width: 12px;
  --toggle-offset: 2px;
}
.basic-onoff--m .basic-onoff__control {
  min-width: 41px;
  height: 16px;
  border-radius: 8px;
}
.basic-onoff--m .basic-onoff__toggle {
  height: 12px;
  border-radius: 50%;
}
.basic-onoff--s {
  --toggle-width: 12px;
  --toggle-offset: 2px;
}
.basic-onoff--s .basic-onoff__control {
  min-width: 30px;
  height: 16px;
  border-radius: 8px;
}
.basic-onoff--s .basic-onoff__toggle {
  height: 12px;
  border-radius: 50%;
}
.basic-onoff--xs {
  --toggle-width: 8px;
}
.basic-onoff--xs .basic-onoff__control {
  min-width: 26px;
  height: 14px;
  border-radius: 8px;
}
.basic-onoff--xs .basic-onoff__toggle {
  height: 8px;
  border-radius: 50%;
}
.basic-onoff--xxs {
  --toggle-width: 6px;
  --toggle-offset: 2px;
}
.basic-onoff--xxs .basic-onoff__control {
  min-width: 18px;
  height: 10px;
  border-radius: 8px;
}
.basic-onoff--xxs .basic-onoff__toggle {
  height: 6px;
  border-radius: 50%;
}
.basic-onoff--s .basic-onoff__control, .basic-onoff--xs .basic-onoff__control, .basic-onoff--xxs .basic-onoff__control {
  border: none;
  background-color: transparent;
}
.basic-onoff--s .basic-onoff__control:before, .basic-onoff--xs .basic-onoff__control:before, .basic-onoff--xxs .basic-onoff__control:before {
  content: "";
  opacity: 0.3;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 12px;
  background-color: var(--solution-primary-color);
  pointer-events: none;
  transition: opacity 150ms ease-out;
}
.basic-onoff--s .basic-onoff__toggle, .basic-onoff--xs .basic-onoff__toggle, .basic-onoff--xxs .basic-onoff__toggle {
  background-color: var(--G-0, #FFFFFF);
}

.small-color-picker-palette {
  background-color: var(--G-0-5, #FAFAFA);
  padding: 12px 0px 0;
  max-width: 350px;
  border-radius: 4px;
}
.small-color-picker-palette__button {
  width: 17px;
  height: 17px;
  min-width: 17px;
  border-radius: 4px;
  margin-bottom: 12px;
  margin-right: 9px;
  margin-left: 9px;
  position: relative;
}
.small-color-picker-palette__button:before {
  content: "";
  position: absolute;
  top: -6px;
  left: -6px;
  right: -6px;
  bottom: -6px;
  border: 1px solid var(--solution-primary-color);
  border-radius: 5px;
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 150ms ease-out , transform 150ms ease-out;
}
.small-color-picker-palette__button.is-active:before, .small-color-picker-palette__button:hover:before {
  opacity: 1;
  transform: scale(1);
  transition: opacity 200ms ease-in , transform 200ms ease-in;
}

.r-color-mixer {
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
}
.r-color-mixer.is-rounded .react-colorful__saturation,
.r-color-mixer.is-rounded .react-colorful__hue {
  border-radius: 8px;
}
.r-color-mixer__mirror {
  height: calc(100% - 20px);
  width: 25%;
}
.r-color-mixer__container.react-colorful {
  width: 100%;
  height: 100%;
}
.r-color-mixer .react-colorful__saturation {
  border-radius: 0;
  margin-bottom: 10px;
  border-bottom: none;
  overflow: hidden;
}
.r-color-mixer .react-colorful__hue {
  height: 10px;
  border-radius: 0;
}
.r-color-mixer .react-colorful__pointer {
  width: 10px;
  height: 10px;
  border: 1px solid var(--G-0, #FFFFFF);
}
.r-color-mixer .react-colorful__hue-pointer {
  width: 16px;
  height: 16px;
  border: 4px solid var(--G-0, #FFFFFF);
  box-shadow: 1px 1px 7px rgba(0, 0, 0, 0.122596);
}
.r-color-mixer .react-colorful__interactive:focus .react-colorful__pointer {
  transform: translate(-50%, -50%);
}
.r-color-mixer--mirror .r-color-mixer__container.react-colorful {
  position: absolute;
}
.r-color-mixer--mirror .react-colorful__saturation {
  margin-left: 25%;
}

.smart-input-group {
  width: 100%;
  margin-bottom: 18px;
}
.smart-input-group.is-active .smart-input-group__title {
  color: var(--solution-primary-color);
}
.smart-input-group.is-error .smart-input-group__title {
  color: #FF5757;
}
.smart-input-group__head {
  display: flex;
  gap: 10px;
  margin-bottom: 5px;
}
.smart-input-group__hat {
  overflow: hidden;
  flex-grow: 1;
  min-height: 20px;
  margin-bottom: 1px;
}
.smart-input-group__label {
  display: flex;
  align-items: center;
}
.smart-input-group__required {
  margin-left: 2px;
}
.smart-input-group__actions {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
}
.smart-input-group__foot {
  display: flex;
  min-height: 16px;
  margin-top: 2px;
}

.checkbox-pill {
  position: relative;
  display: inline-flex;
  border-radius: 4px;
  background-color: var(--G-0-5, #FAFAFA);
  transition: border-color 150ms ease-out , background-color 150ms ease-out;
  cursor: pointer;
}
.checkbox-pill::before {
  content: " ";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: inherit;
  border: 1px solid var(--G-1-5, #E9E9E9);
  transition: border-color 150ms ease-out , opacity 150ms ease-out;
  pointer-events: none;
}
.checkbox-pill:hover:before {
  border-color: var(--G-3, #C7C8C9);
  transition: border-color 200ms ease-in , opacity 200ms ease-in;
}
.checkbox-pill.is-checked {
  background-color: var(--solution-secondary-color);
}
.checkbox-pill.is-checked::before {
  opacity: 0.3;
  border-color: var(--solution-primary-color);
  transition: border-color 200ms ease-in , opacity 200ms ease-in;
}
.checkbox-pill__field label {
  padding: 9px 11px;
}

.rect-checkbox {
  position: relative;
  display: inline-flex;
  max-width: 100%;
  padding-left: 27px;
}
.rect-checkbox:not(.is-disabled) {
  cursor: pointer;
}
.rect-checkbox:not(.is-disabled):not(.is-checked):hover::before {
  border-color: var(--G-3, #C7C8C9);
}
.rect-checkbox.is-checked::after {
  opacity: 1;
  transition: opacity 200ms ease-in;
}
.rect-checkbox.is-disabled {
  color: var(--typo-secondary, #878B92);
}
.rect-checkbox::before {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  width: 18px;
  height: 18px;
  border: 1px solid var(--G-2, #DEDEDE);
  border-radius: 3px;
  box-sizing: border-box;
  transition: border-color 150ms ease-out;
}
.rect-checkbox::after {
  opacity: 0;
  content: " ";
  position: absolute;
  top: 4px;
  left: 4px;
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background-color: var(--solution-primary-color);
  transition: opacity 150ms ease-out;
}
.rect-checkbox__input {
  position: absolute;
  visibility: hidden;
  opacity: 0;
}

.search-input-field:hover .search-input-field__icon {
  color: var(--search-field-icon-color-hover, var(--G-4, #B2B2B3));
}
.search-input-field.is-active .search-input-field__icon {
  color: var(--search-field-icon-color-active, var(--G-4, #B2B2B3));
}
.search-input-field__icon {
  position: absolute;
  top: 50%;
  left: var(--search-field-icon-left, 10px);
  color: var(--search-field-icon-color, var(--G-3, #C7C8C9));
  transform: translate(0, -50%);
}
.search-input-field__input {
  padding-left: var(--search-field-padding-left, 22px);
}

.enable-checkbox {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  padding: 10px;
  background-color: var(--G-0-5, #FAFAFA);
  border-radius: 8px;
  font-size: 13px;
  line-height: 18px;
  cursor: pointer;
}
.enable-checkbox.is-active {
  background-color: #EEF6EE;
}
.enable-checkbox__body {
  padding-right: 30px;
}
.enable-checkbox__loader {
  position: absolute;
  top: 12px;
  right: 12px;
}

.color-picker-select__panel {
  border-radius: 8px;
}
.color-picker-select__dropdown {
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding: 12px;
}
.color-picker-select__mixer {
  width: 100%;
  height: 176px;
}
.color-picker-select__actions {
  display: flex;
  gap: 10px;
  margin-top: 5px;
}
.color-picker-select__format-select {
  max-width: 70px;
}

.color-preview {
  position: relative;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
}
.color-preview--transparent {
  border: 1px solid var(--G-2, #DEDEDE);
}
.color-preview--transparent::after {
  content: " ";
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  height: 1px;
  background-color: #FF5757;
  transform: rotate(-45deg);
}
.color-preview--white {
  border: 1px solid var(--G-2, #DEDEDE);
}

.colors-list__title {
  margin-bottom: 6px;
}
.colors-list__items {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 7px;
}
.colors-list__item {
  cursor: pointer;
}
.colors-list__item::before {
  content: " ";
  opacity: 0;
  position: absolute;
  top: -3px;
  right: -3px;
  bottom: -3px;
  left: -3px;
  border-radius: inherit;
  box-shadow: -1px 4px 8px rgba(128, 128, 128, 0.5);
  transition: opacity 150ms ease-out;
}
.colors-list__item:hover::before {
  opacity: 1;
  transition: opacity 200ms ease-in;
}
.colors-list__tooltip {
  text-transform: capitalize;
}

.color-picker-field {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  height: 100%;
  min-height: 34px;
  cursor: pointer;
}
.color-picker-field input {
  padding: 0 28px 0 40px;
}
.color-picker-field.is-active .color-picker-field__arrow {
  color: var(--solution-primary-color);
  transform: rotate(180deg);
  transition: transform 200ms ease-in;
}
.color-picker-field.is-active .color-picker-field__copy {
  color: var(--solution-primary-color);
}
.color-picker-field.is-active .color-picker-field__copy:hover {
  color: var(--solution-hover-color);
}
.color-picker-field__preview {
  position: absolute;
  top: 50%;
  left: 9px;
  width: 20px;
  height: 20px;
  border: 1px solid var(--G-1-5, #E9E9E9);
  transform: translateY(-50%);
}
.color-picker-field__arrow {
  position: absolute;
  top: 10px;
  right: 10px;
  transition: transform 150ms ease-out;
}
.color-picker-field__copy {
  position: absolute;
  top: 9px;
  right: 9px;
}
.color-picker-field__copy:hover {
  color: var(--solution-hover-color);
}

.due-date-control {
  overflow: hidden;
  display: inline-flex;
  align-items: flex-start;
  position: relative;
  width: 100%;
}
.due-date-control--with-label .due-date-control__text {
  padding-left: 7px;
}
.due-date-control__icon {
  margin: 0 4px;
}
.due-date-control__tooltip {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
}
.due-date-control__tooltip-icon {
  color: #FF5757;
}
.due-date-control__tooltip-icon:hover {
  color: #F1273F;
}
.due-date-control__arrow {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--solution-primary-color);
  transform: rotate(180deg);
  background-color: var(--G-0, #FFFFFF);
}
.due-date-control__clear {
  position: absolute;
  top: 50%;
  margin-top: -8px;
  right: 10px;
  color: var(--ic-light, #c7cdcf);
  opacity: 0;
  transition: opacity 150ms ease-out;
}
.due-date-control__clear:hover {
  color: var(--solution-primary-color);
  transition: opacity 200ms ease-in;
}
.due-date-control:hover .due-date-control__clear {
  opacity: 1;
  transition: opacity 200ms ease-in;
}
.due-date-control.is-grid-view .due-date-control__clear {
  color: black;
  top: 0;
  margin-top: 0;
  right: 20px;
  bottom: 0;
  opacity: 1;
  display: flex;
  align-items: center;
  width: 18px;
  justify-content: flex-end;
  background-color: var(--G-0, #FFFFFF);
}

.due-date-label-checkmark {
  display: flex;
  margin-top: var(--due-date-checkmark-top-indent, 0);
  cursor: default;
}
.due-date-label-checkmark--overdue {
  position: relative;
}
.due-date-label-checkmark--overdue::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 5px;
  height: 5px;
  background: red;
  border-radius: 2px;
}

.due-date-label-badge {
  color: var(--G-0, #FFFFFF);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 16px;
  border-radius: 5px;
  margin-top: var(--due-date-checkmark-top-indent, 0);
  font-size: 11px;
  padding: 0 3px;
  line-height: 10px;
  letter-spacing: -0.18px;
  font-weight: 700;
  cursor: default;
}

.due-date-label-tooltip {
  display: flex;
  margin-top: 2px;
}

.tooltip-item {
  position: relative;
  display: inline-block;
  will-change: transform;
}
.tooltip-item__in {
  overflow: hidden;
  max-width: 261px;
  padding: 4px 10px;
  border-radius: 5px;
}
.tooltip-item__close {
  z-index: 2;
  position: absolute;
  top: 10px;
  right: 10px;
}
.tooltip-item--text {
  white-space: nowrap;
}
.tooltip-item--pointer-events {
  pointer-events: all;
}
.tooltip-item--close .tooltip-item__in {
  padding-right: 20px;
}
.tooltip-item--follow-cursor {
  position: fixed;
  top: 0;
  left: 0;
  padding: 15px;
  pointer-events: none;
}
.tooltip-item--follow-cursor .tooltip-item__in {
  display: flex;
  padding: 7px 12px;
}
.tooltip-item--align-start {
  text-align: left;
}
.tooltip-item--align-center {
  text-align: center;
}
.tooltip-item--align-end {
  text-align: right;
}
.tooltip-item.tooltip-item--placement-left::before {
  left: 100%;
}
.tooltip-item.tooltip-item--placement-top {
  top: 0;
  left: -22px;
}
.tooltip-item.tooltip-item--placement-top::before {
  top: 100%;
  left: 32px;
}
.tooltip-item.tooltip-item--placement-bottom {
  top: 0;
  left: -22px;
}
.tooltip-item.tooltip-item--placement-bottom::before {
  top: 0;
  left: 32px;
}
.tooltip-item.tooltip-item--placement-top-left {
  top: -15px;
  left: -15px;
}
.tooltip-item.tooltip-item--placement-top-left .tooltip-item__in {
  transform: translate(-100%, -100%);
}
.tooltip-item.tooltip-item--placement-top-right {
  top: -15px;
}
.tooltip-item.tooltip-item--placement-top-right .tooltip-item__in {
  transform: translate(0, -100%);
}
.tooltip-item.tooltip-item--placement-bottom-left {
  left: -15px;
}
.tooltip-item.tooltip-item--placement-bottom-left .tooltip-item__in {
  transform: translate(-100%, 0);
}
.tooltip-item--wrap {
  width: 261px;
  white-space: normal;
}

.tooltip-adavanced-content {
  padding: 16px 12px;
  white-space: normal;
}
.tooltip-adavanced-content--text-only {
  padding: 0;
}
.tooltip-adavanced-content--text-align-left .tooltip-adavanced-content__text {
  text-align: left;
}
.tooltip-adavanced-content--text-align-center .tooltip-adavanced-content__text {
  text-align: center;
}
.tooltip-adavanced-content--text-align-right .tooltip-adavanced-content__text {
  text-align: right;
}
.tooltip-adavanced-content--padding-small {
  padding: 6px 5px;
}
.tooltip-adavanced-content--padding-uniform {
  padding: 6px 0;
}
.tooltip-adavanced-content__image {
  overflow: hidden;
  display: flex;
  max-width: 100%;
  margin-bottom: 12px;
  border-radius: 4px;
}
.tooltip-adavanced-content__title {
  margin-bottom: 12px;
}
.tooltip-adavanced-content__text {
  display: flex;
  align-items: flex-start;
  flex-flow: column;
}
.tooltip-adavanced-content__button {
  margin-top: var(--tooltip-content-button-margin-top, 22px);
}
.tooltip-adavanced-content__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding-right: 16px;
  font-weight: 600;
  font-size: 12px;
  line-height: 150%;
  color: var(--G-0, #FFFFFF);
  transition: color 150ms ease-out;
}
.tooltip-adavanced-content__link:hover {
  color: var(--solution-primary-color);
  transition: color 200ms ease-in;
}
.tooltip-adavanced-content__link::after {
  content: " ";
  position: absolute;
  top: 50%;
  right: 0;
  border: 4px solid transparent;
  border-left-color: currentColor;
  transform: translate(0, -50%);
}
.tooltip-adavanced-content__link span {
  border-bottom: 1px solid;
  line-height: 120%;
}
.tooltip-adavanced-content__warning {
  position: relative;
  display: flex;
  margin-top: 8px;
  padding: 10px 10px 10px 36px;
  background-color: #FF5757;
  border-radius: 5px;
}
.tooltip-adavanced-content__warning .icon {
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translate(0, -50%);
}

.tooltip-link-content {
  min-width: 180px;
  padding: 6px 0;
}
.tooltip-link-content__image {
  overflow: hidden;
  display: flex;
  max-width: 100%;
  margin-bottom: 9px;
  border-radius: 4px;
}
.tooltip-link-content__url {
  margin-bottom: 8px;
}

.tooltip-hotkey-content {
  display: flex;
  align-items: center;
}
.tooltip-hotkey-content__key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 15px;
  height: 14px;
  margin-left: 5px;
  padding: 0 3px;
  background-image: linear-gradient(to bottom, #eee, #d8d8d8);
  border-radius: 3px;
}

/**
 * * Disable mouse events for tooltip parent element
 * * This fixes the recursive open/close issue
 * */
.react-tiny-popover-container {
  pointer-events: none;
}

.tooltip {
  position: relative;
}
.tooltip__outside.is-cursor-pointer {
  cursor: pointer;
}
.tooltip--inline-block {
  display: inline-block;
}
.tooltip--inline-flex {
  display: inline-flex;
}
.tooltip--inline-flex .tooltip__outside {
  display: inline-flex;
  align-items: center;
}
.tooltip--block {
  display: block;
}
.tooltip--inline {
  display: inline;
}
.tooltip--inline .tooltip__outside {
  display: inline;
}

@keyframes tooltipFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.shortcuts {
  display: flex;
  align-items: center;
}
.shortcuts__item {
  display: flex;
  color: var(--shortcuts-color, currentColor);
}
.shortcuts__item:not(:last-child) {
  margin-right: 6px;
}

.field-group-compact {
  display: table-row;
  position: relative;
}
.field-group-compact::after {
  content: "";
  position: absolute;
  top: -3px;
  right: -3px;
  bottom: -3px;
  left: -3px;
  opacity: 0;
  pointer-events: none;
  border: 3px solid var(--solution-primary-color);
  visibility: hidden;
  border-radius: 8px;
  transition: opacity 150ms ease-out , visibility 150ms ease-out;
}
.field-group-compact__column {
  position: relative;
  background-color: var(--G-1, #F3F3F4);
  height: 100%;
  width: auto;
  text-align: right;
  padding: 8px 10px 0;
  border: 1px solid var(--G-1-5, #E9E9E9);
  border-radius: 5px 0 0 5px;
  color: var(--typo-secondary, #878B92);
  white-space: nowrap;
  font-size: 11px;
  line-height: 16px;
  text-transform: uppercase;
  font-weight: 600;
  transition: border-color 150ms ease-out;
}
.field-group-compact__column + .field-group-compact__body {
  border-left: 0;
  border-radius: 0 5px 5px 0;
}
.field-group-compact__column + .field-group-compact__body:before, .field-group-compact__column + .field-group-compact__body:after {
  content: "";
  position: absolute;
  width: 3px;
  border-top: 1px solid var(--G-1-5, #E9E9E9);
  transition: border-color 150ms ease-out;
}
.field-group-compact__column + .field-group-compact__body:before {
  top: -1px;
  left: -2px;
}
.field-group-compact__column + .field-group-compact__body:after {
  bottom: -1px;
  left: -2px;
}
.field-group-compact__caption-icon {
  color: var(--ic-light, #c7cdcf);
  display: flex;
}
.field-group-compact__body {
  position: relative;
  width: 100%;
  height: 100%;
  border: 1px solid var(--G-1-5, #E9E9E9);
  border-radius: 5px;
  transition: border-color 150ms ease-out;
}
.field-group-compact__column, .field-group-compact__body {
  display: table-cell;
  vertical-align: top;
}
.field-group-compact__tooltip {
  position: absolute;
  top: 50%;
  right: 10px;
  color: #FF5757;
  transform: translateY(-50%);
  cursor: pointer;
}
.field-group-compact:hover .field-group-compact__body,
.field-group-compact:hover .field-group-compact__column,
.field-group-compact:hover .field-group-compact__body::after,
.field-group-compact:hover .field-group-compact__body::before {
  border-color: var(--G-3, #C7C8C9);
  transition: border-color 200ms ease-in , color 200ms ease-in;
}
.field-group-compact:hover .field-group-compact__caption {
  color: var(--typo-primary, #2E3538);
}
.field-group-compact.is-active .field-group-compact__body,
.field-group-compact.is-active .field-group-compact__column,
.field-group-compact.is-active .field-group-compact__body::after,
.field-group-compact.is-active .field-group-compact__body::before {
  border-color: var(--solution-primary-color);
}
.field-group-compact.is-active .field-group-compact__column {
  border-right-color: var(--G-3, #C7C8C9);
}
.field-group-compact.is-active .field-group-compact__caption-icon {
  color: var(--solution-primary-color);
}
.field-group-compact.is-active::after {
  visibility: visible;
  opacity: 0.3;
  transition: opacity 200ms ease-in , visibility 200ms ease-in;
}
.field-group-compact:hover .field-group-compact__column, .field-group-compact.is-active .field-group-compact__column {
  color: var(--typo-primary, #2E3538);
}
.field-group-compact.is-error .field-group-compact__body,
.field-group-compact.is-error .field-group-compact__column,
.field-group-compact.is-error .field-group-compact__body::after,
.field-group-compact.is-error .field-group-compact__body::before {
  border-color: #FF5757;
}
.field-group-compact.is-error .field-group-compact__column {
  border-right-color: var(--G-1-5, #E9E9E9);
}
.field-group-compact.is-error.is-required .field-group-compact__column::before {
  content: "";
  z-index: 1;
  position: absolute;
  top: 3px;
  left: 3px;
  width: 7px;
  height: 7px;
  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iN3B4IiBoZWlnaHQ9IjdweCIgdmlld0JveD0iMCAwIDcgNyIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggNTIuMSAoNjcwNDgpIC0gaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoIC0tPgogICAgPHRpdGxlPlJRVDwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxkZWZzPgogICAgICAgIDxwYXRoIGQ9Ik0xLDAgTDcsMCBMMCw3IEwwLDEgQy02Ljc2MzUzNzUxZS0xNywwLjQ0NzcxNTI1IDAuNDQ3NzE1MjUsMS4wMTQ1MzA2M2UtMTYgMSwwIFoiIGlkPSJwYXRoLTEiPjwvcGF0aD4KICAgIDwvZGVmcz4KICAgIDxnIGlkPSJTeW1ib2xzIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iTWlzYy0vLVJRVC10YWciPgogICAgICAgICAgICA8ZyBpZD0iUlFUIj4KICAgICAgICAgICAgICAgIDxtYXNrIGlkPSJtYXNrLTIiIGZpbGw9IndoaXRlIj4KICAgICAgICAgICAgICAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNwYXRoLTEiPjwvdXNlPgogICAgICAgICAgICAgICAgPC9tYXNrPgogICAgICAgICAgICAgICAgPHVzZSBpZD0iTWFzayIgZmlsbD0iI0Q4RDhEOCIgeGxpbms6aHJlZj0iI3BhdGgtMSI+PC91c2U+CiAgICAgICAgICAgICAgICA8ZyBpZD0i8J+OqC1Db2xvcnMtLy1NYWluLS8tNCIgbWFzaz0idXJsKCNtYXNrLTIpIiBmaWxsPSIjRkY1QTVGIj4KICAgICAgICAgICAgICAgICAgICA8cmVjdCBpZD0i8J+OqC1Db2xvci1Db3B5LTMiIHg9IjAiIHk9IjAiIHdpZHRoPSI3IiBoZWlnaHQ9IjciPjwvcmVjdD4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+");
}
.field-group-compact.is-read-only .field-group-compact__body *,
.field-group-compact.is-read-only .field-group-compact__column * {
  pointer-events: none;
}
.field-group-compact--select .field-group-compact__column {
  padding: 0;
  text-align: right;
}
.field-group-compact--select:hover .field-group-compact__column, .field-group-compact--select.is-active .field-group-compact__column, .field-group-compact--select.is-error .field-group-compact__column {
  border-right-color: var(--G-1-5, #E9E9E9);
}
.field-group-compact--grey .field-group-compact__body {
  background-color: var(--G-1, #F3F3F4);
}
.field-group-compact--grey.is-active .field-group-compact__body, .field-group-compact--grey.is-error .field-group-compact__body {
  background-color: var(--G-0, #FFFFFF);
}
.field-group-compact.caption-right .field-group-compact__column {
  text-align: right;
}

.input-group-compact-wrapper {
  display: table;
  width: 100%;
  margin: -12px 0;
  border-spacing: 0 12px;
}

.r-search-field {
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
}
.r-search-field__icon {
  display: flex;
  color: var(--search-icon-color, var(--ic-light, #c7cdcf));
  margin-right: 3px;
}
.r-search-field__input {
  flex-grow: 1;
  display: flex;
}
.r-search-field__clear {
  color: var(--ic-light, #c7cdcf);
  display: flex;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 150ms ease-out , visibility 150ms ease-out;
}
.r-search-field__clear:hover {
  color: #FF5757;
}
.r-search-field__line {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  border-radius: 20px;
  background-color: var(--solution-primary-color);
  transition: transform 250ms ease-in-out, background 250ms ease-in-out;
  transform: scaleX(0);
  transform-origin: left top;
}
.r-search-field.is-focus .r-search-field__line, .r-search-field.is-active .r-search-field__line {
  transform: scaleX(1);
}
.r-search-field.is-active:not(.is-focus) .r-search-field__line {
  background-color: var(--G-2, #DEDEDE);
}
.r-search-field.is-clear-visible .r-search-field__clear {
  opacity: 1;
  visibility: visible;
  transition: opacity 200ms ease-in , visibility 200ms ease-in;
}
.r-search-field--main {
  padding-left: 9px;
  padding-bottom: 3px;
}
.r-search-field--main .r-search-field__clear {
  margin-right: 10px;
}
.r-search-field--light {
  background-color: var(--G-0-5, #FAFAFA);
  border-radius: 5px;
}
.r-search-field--outsides {
  padding: 0 10px;
}
.r-search-field--dark-clear .r-search-field__clear {
  color: var(--ic-dark, #2D2D2D);
}
.r-search-field--highlight.is-active .r-search-field__icon {
  color: var(--search-icon-highlight-color);
}

.dialog-image {
  margin-bottom: 17px;
  min-height: 80px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -28px;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  box-shadow: 0 5px 18px 0 rgba(0, 0, 0, 0.11);
  display: flex;
  justify-content: center;
  align-items: center;
}
.dialog-image--background-white {
  background-color: var(--G-0, #FFFFFF);
}
.dialog-image--background-red {
  background-color: #FF5757;
}
.dialog-image--background-blue {
  background-color: var(--solution-primary-color);
}
.dialog-image--background-green {
  background-color: #3EAC40;
}

.dialog-header {
  width: 100%;
  text-align: center;
  padding: 0 31px 0 30px;
}
.dialog-header__title {
  margin-bottom: 12px;
}
.dialog-header__description {
  margin-bottom: 25px;
  word-break: break-word;
}

.dialog-body {
  max-width: 100%;
  padding-left: 30px;
  padding-right: 30px;
  margin-bottom: 25px;
}
.dialog-body--full-width {
  width: 100%;
}
.dialog-body--text-center {
  text-align: center;
}

.dialog-footer {
  display: flex;
  align-items: center;
  justify-content: center;
}
.dialog-footer__button:not(:last-child) {
  margin-right: 15px;
}

.dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 84px 0 32px;
  background-color: var(--G-0, #FFFFFF);
  border-radius: 5px;
  box-shadow: rgba(15, 15, 15, 0.05) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px 3px 6px, rgba(15, 15, 15, 0.2) 0px 9px 24px;
}
.dialog:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  border-radius: 5px;
  height: 4px;
}
.dialog__close {
  color: var(--typo-primary, #2E3538);
  position: absolute;
  top: 10px;
  right: 10px;
}
.dialog--warning:before {
  background-color: #FF5757;
}
.dialog--confirm:before {
  background-color: var(--solution-primary-color);
}
.dialog--success:before {
  background-color: #3EAC40;
}
.dialog--size-S {
  width: 497px;
}
.dialog--size-M {
  width: 730px;
}

.modal {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  box-shadow: rgba(15, 15, 15, 0.05) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px 3px 6px, rgba(15, 15, 15, 0.2) 0px 9px 24px;
  border-radius: 5px 50px 5px 5px;
}
.modal--body-corners .modal__body {
  border-radius: 0 0 5px 5px;
  overflow: hidden;
}
.modal--without-hat {
  border-radius: 5px;
}
.modal--filled .modal-header {
  background-color: var(--solution-primary-color);
}
.modal--filled .modal-header__title, .modal--filled .modal-header__subtitle {
  color: var(--G-0, #FFFFFF);
}
.modal--size-XS {
  width: 413px;
}
.modal--size-S {
  width: 497px;
}
.modal--size-SX {
  width: 540px;
}
.modal--size-SM {
  width: 650px;
}
.modal--size-MS {
  width: 667px;
}
.modal--size-M {
  width: 730px;
}
.modal--size-L {
  width: 811px;
}
.modal--size-XL {
  width: 963px;
}
.modal--size-XXL {
  width: 1200px;
}
.modal--size-auto {
  width: 100%;
  margin: 45px 30px;
}
.modal__overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  resize: both;
  overflow: hidden;
  opacity: 0;
  min-width: var(--modal-min-width);
  max-width: var(--modal-max-width);
  min-height: var(--modal-min-height);
  max-height: var(--modal-max-height);
}
.modal__resize {
  color: var(--G-5, #9B9C9E);
  position: absolute;
  bottom: 0;
  right: 0;
  pointer-events: none;
}
.modal__hat {
  position: relative;
}
.modal__hat:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  right: 18px;
  height: 18px;
  background-color: currentColor;
  border-radius: 5px 0 0 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.066);
  pointer-events: none;
}
.modal__arrow {
  position: absolute;
  top: -20px;
  right: 270px;
  border: 10px solid transparent;
  border-bottom-color: var(--G-0, #FFFFFF);
}
.modal__corner {
  position: absolute;
  top: 0;
  right: 0;
}
.modal__close {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(50%, -50%);
  z-index: 1;
}
.modal__header {
  position: relative;
}
.modal__body {
  position: relative;
  flex-grow: 1;
  background-color: #fff;
}
.modal--type-base .modal__body {
  padding: 24px 30px;
  background-color: var(--G-0-5, #FAFAFA);
}
.modal--type-split .modal__body {
  display: flex;
}
.modal--type-draggable {
  border-radius: 8px 50px 8px 8px;
}
.modal--type-draggable .modal__hat {
  cursor: grab;
}
.modal--type-draggable .modal__hat:active {
  cursor: grabbing;
}
.modal--type-draggable .modal__hat::before {
  height: 19px;
  border-radius: 8px 0 0 0;
}
.modal--type-draggable .modal__header {
  transform: translateY(-18px);
  padding-top: 18px;
  margin-bottom: -18px;
  cursor: grab;
  background-color: transparent;
}
.modal--type-draggable .modal__header:active {
  cursor: grabbing;
}
.modal--type-draggable .modal__body {
  position: relative;
  min-height: 346px;
  max-height: 70vh;
  border-radius: 0 0 8px 8px;
  transition: height 150ms ease-out;
}
.modal--transparent-bg .modal__body {
  background-color: transparent;
}
.modal--upstairs-content .modal__body {
  margin-top: -18px;
}
.modal--vertical-axis .modal__body {
  display: flex;
  flex-direction: column;
}
.modal--full-height .modal__body {
  height: 100%;
}
.modal--full-corners .modal__body {
  border-radius: 5px;
}
.modal--free-content .modal__body {
  overflow: visible;
}

.modal-close-button {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--solution-primary-color);
  transform: rotate(0);
  position: relative;
  transition: transform 150ms ease-out;
}
.modal-close-button--XL {
  width: 36px;
  height: 36px;
}
.modal-close-button--border::after {
  border: 1px solid var(--G-2, #DEDEDE);
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  border-radius: 50%;
}
.modal-close-button--dark {
  color: var(--G-0, #FFFFFF);
}
.modal-close-button--dark:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transform: scale(1);
  border-radius: 50%;
  background-color: #2d2d2d;
  transition: background 150ms ease-out , transform 150ms ease-out;
  z-index: -1;
}
.modal-close-button--dark:hover {
  color: var(--G-0, #FFFFFF);
}
.modal-close-button--white {
  width: 28px;
  height: 28px;
  z-index: 1;
}
.modal-close-button--white:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transform: scale(1);
  border-radius: 50%;
  background-color: var(--G-0, #FFFFFF);
  transition: background 150ms ease-out , transform 150ms ease-out;
  z-index: -1;
}
.modal-close-button--white:hover(&:not(.modal-close-button--border)):before {
  transform: scale(1.143);
  background-color: #E7F0FE;
  transition: background 200ms ease-in , transform 200ms ease-in;
}
.modal-close-button:hover:not(.modal-close-button--white):not(.modal-close-button--dark) {
  color: var(--solution-hover-color);
}
.modal-close-button:hover {
  transform: rotate(90deg);
  transition: transform 200ms ease-in;
}

.modal-default-content {
  padding: 30px 30px;
  background-color: var(--G-0-5, #FAFAFA);
}
.modal-default-content--rounded-corners {
  border-radius: 0 0 5px 5px;
}

.modal-iframe-content {
  margin-bottom: -3px;
  padding: 0;
  background-color: transparent;
}

.modal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--G-2, #DEDEDE);
  min-height: 55px;
  padding: 0 30px;
  background-color: var(--G-0, #FFFFFF);
  border-radius: 0 0 5px 5px;
}
.modal-footer__buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  flex: 0 0 auto;
  margin-left: auto;
}
.modal-footer__actions {
  max-width: 100%;
  flex-grow: 1;
  overflow: hidden;
}

.modal-header {
  display: flex;
  align-items: center;
  min-height: 48px;
  border-bottom: 1px solid var(--G-2, #DEDEDE);
  padding: 0 30px 16px 30px;
  background-color: var(--G-0, #FFFFFF);
}
.modal-header--independent {
  padding-top: 16px;
  border-radius: 5px 5px 0 0;
}
.modal-header--type-simple {
  min-height: 36px;
  padding-bottom: 11px;
}
.modal-header--type-simple .modal-header__in {
  align-items: center;
  margin-top: -7px;
}
.modal-header--type-simple .modal-header__icon {
  width: 30px;
  min-width: 30px;
  height: 30px;
}
.modal-header--type-simple .modal-header__actions {
  margin-top: -8px;
}
.modal-header--type-simple.modal-header--position-center .modal-header__in {
  justify-content: center;
}
.modal-header__in {
  display: flex;
  align-items: flex-start;
  flex-grow: 1;
  margin-top: -2px;
}
.modal-header__icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 46px;
  min-width: 46px;
  height: 46px;
  margin-right: 15px;
  background-color: var(--modal-header-icon-bg, var(--solution-primary-color));
  border-radius: 5px;
  color: var(--modal-header-icon-color, var(--G-0, #FFFFFF));
}
.modal-header__title {
  display: flex;
  align-items: center;
  color: var(--typo-primary, #2E3538);
}
.modal-header__badge {
  margin-left: 8px;
}
.modal-header__subtitle {
  margin-top: 3px;
  color: var(--typo-secondary, #878B92);
}
.modal-header__actions {
  display: flex;
  margin-left: auto;
  padding-left: 15px;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-overlay--backdrop {
  background: rgba(0, 0, 0, 0.4);
}
.modal-overlay__transition--fade-enter, .modal-overlay__transition--fade-appear {
  opacity: 0;
}
.modal-overlay__transition--fade-enter-active, .modal-overlay__transition--fade-appear-active {
  opacity: 1;
  transition: opacity 150ms ease-out;
}
.modal-overlay__transition--fade-exit {
  opacity: 1;
}
.modal-overlay__transition--fade-exit-active {
  opacity: 0;
  transition: opacity 150ms ease-out;
}

.fancy-dialog {
  position: relative;
  width: 100%;
  min-width: 498px;
  max-width: 498px;
}
.fancy-dialog__close {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 26px;
  height: 26px;
}
.fancy-dialog__wrapper {
  border-radius: 8px;
  border: var(--border-rte, rgba(15, 15, 15, 0.1));
  background-color: var(--G-0, #FFFFFF);
  box-shadow: 0px 1px 2px 0 rgba(0, 0, 30, 0.1), 0px 2px 4px 0 rgba(0, 0, 30, 0.1);
}
.fancy-dialog__cover {
  height: 230px;
  border-bottom: 1px solid var(--G-1-5, #E9E9E9);
  background-color: var(--solution-primary-color);
  border-radius: 8px 8px 0 0;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.fancy-dialog__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 36px 30px 40px;
}
.fancy-dialog__footer {
  margin-top: 2px;
  border: var(--border-rte, rgba(15, 15, 15, 0.1));
  padding: 16px 30px 22px;
  border-radius: 8px;
  background-color: var(--G-0-5, #FAFAFA);
  box-shadow: 0px 1px 2px 0 rgba(0, 0, 30, 0.1), 0px 2px 4px 0 rgba(0, 0, 30, 0.1);
}

.gate-dialog {
  position: relative;
  width: 498px;
  margin: 20px;
  padding: 60px 30px 40px 30px;
  background-color: var(--G-0, #FFFFFF);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.066);
  border-radius: 8px;
}
.gate-dialog::before {
  content: " ";
  position: absolute;
  top: 2px;
  right: 8px;
  left: 8px;
  height: 4px;
  background-color: var(--solution-primary-color);
  border-radius: 5px;
}
.gate-dialog__icon {
  position: absolute;
  top: -19px;
  right: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 46px;
  height: 46px;
  margin: 0 auto;
  border-radius: 50%;
  background-color: var(--solution-primary-color);
  color: var(--G-0, #FFFFFF);
}
.gate-dialog__heading {
  text-align: center;
}
.gate-dialog__heading + .gate-dialog__body {
  margin-top: 50px;
}
.gate-dialog__title {
  margin-bottom: 18px;
}
.gate-dialog--danger::before {
  background-color: #FF5757;
}
.gate-dialog--danger .gate-dialog__icon {
  background-color: #FF5757;
}

.modal-light-header {
  display: flex;
  align-items: center;
  height: 75px;
  border-bottom: 1px solid var(--G-1-5, #E9E9E9);
  padding: 0 20px 0 30px;
  background-color: var(--G-0, #FFFFFF);
  border-radius: 8px 8px 0 0;
}
.modal-light-header__icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  margin-right: 14px;
  border-radius: 5px;
  background-color: var(--solution-primary-color);
}
.modal-light-header__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}
.modal-light-header__close {
  width: 34px;
  height: 34px;
}

.modal-figure-header {
  position: relative;
  display: flex;
  border-bottom: 1px solid var(--G-1-5, #E9E9E9);
  padding: 30px;
  background-color: var(--G-0, #FFFFFF);
  border-radius: 8px 8px 0 0;
}
.modal-figure-header__icon {
  display: flex;
  align-items: center;
  width: 38px;
  margin-right: 20px;
  border-right: 1px solid var(--G-1-5, #E9E9E9);
}
.modal-figure-header__description {
  margin-top: 2px;
}
.modal-figure-header__close {
  position: absolute;
  top: 20px;
  right: 20px;
}

.modal-narrow {
  border-radius: 8px;
}
.modal-narrow__close {
  position: absolute;
  top: 10px;
  right: 10px;
}

.modal-header-expanded {
  display: flex;
  height: 40px;
  border-bottom: 1px solid var(--G-1-5, #E9E9E9);
  padding-left: 20px;
  padding-right: 20px;
  background-color: var(--G-0, #FFFFFF);
}
.modal-header-expanded__icon {
  margin-top: 2px;
}
.modal-header-expanded__hat {
  position: relative;
  display: flex;
  flex-direction: column;
  max-width: 95%;
  margin-top: -9px;
  margin-left: 10px;
  padding-left: 10px;
}
.modal-header-expanded__hat:before {
  opacity: 0.3;
  content: "";
  position: absolute;
  top: 1px;
  left: -1px;
  display: block;
  width: 1px;
  height: 36px;
  background-color: var(--G-4, #B2B2B3);
}
.modal-header-expanded__subtitle {
  position: relative;
  max-width: 100%;
  margin-bottom: 2px;
  padding-right: 5px;
}

.modal-header-compact {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 58px;
  border-bottom: 1px solid var(--G-2, #DEDEDE);
  padding: 16px 30px;
  background-color: var(--G-0, #FFFFFF);
  border-radius: 8px 8px 0 0;
}
.modal-header-compact__hat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.modal-header-compact__close {
  position: absolute;
  top: 10px;
  right: 10px;
}

.month-day-picker {
  column-gap: 8px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  row-gap: 8px;
  width: 244px;
}
.month-day-picker__option {
  background-color: var(--default-button-bg-color);
  border-radius: 9999px;
  color: var(--typo-primary, #2E3538);
  flex: auto 0 0;
  height: 28px;
  padding: 5px 0;
  transition: background-color ease 200ms, color ease 200ms;
  width: 28px;
}
.month-day-picker__option.selected {
  background-color: var(--solution-primary-color);
  color: var(--G-0, #FFFFFF);
}
.month-day-picker__option.expanded {
  flex: auto 1 0;
  height: auto;
}
.month-day-picker__option:hover {
  background-color: var(--solution-hover-color);
  color: var(--G-0, #FFFFFF);
}

.week-day-picker {
  display: flex;
  flex-direction: row;
  column-gap: 8px;
}
.week-day-picker__option {
  border-radius: 70px;
  padding: 5px 8px;
  color: var(--typo-primary, #2E3538);
  background-color: var(--default-button-bg-color);
  min-width: 30px;
  flex: auto 0 0;
  transition: background-color ease 200ms, color ease 200ms;
}
.week-day-picker__option.selected {
  background-color: var(--solution-primary-color);
  color: var(--G-0, #FFFFFF);
}
.week-day-picker__option:hover {
  background-color: var(--solution-hover-color);
  color: var(--G-0, #FFFFFF);
}

.capsule-select {
  height: 33px;
  display: inline-block;
  position: relative;
}

.combo-select {
  display: flex;
  flex: 1 auto;
  background-color: var(--G-0-5, #FAFAFA);
  border-radius: 5px;
  max-width: 100%;
}
.combo-select__main {
  flex-basis: 100%;
  overflow: hidden;
  border-radius: 5px;
  border-right: 1px solid var(--G-1-5, #E9E9E9);
  background-color: var(--G-0, #FFFFFF);
  transition: border 150ms ease-out;
}
.combo-select__main:hover {
  border-right-color: var(--G-3, #C7C8C9);
  transition: border 200ms ease-in;
}
.combo-select__aggregation {
  min-width: 70px;
  position: relative;
  border-right: 1px solid var(--G-1-5, #E9E9E9);
}
.combo-select__mark {
  border-right: 1px solid var(--G-1-5, #E9E9E9);
}
.combo-select__color-picker {
  display: flex;
  align-items: center;
  padding-left: 5px;
}
.combo-select__delete {
  padding: 0 10px;
  color: var(--ic-light, #c7cdcf);
  cursor: pointer;
  display: flex;
  align-items: center;
}
.combo-select__delete:hover {
  color: var(--ic-dark, #2D2D2D);
}
.combo-select__delete.is-disabled {
  opacity: 0.5;
  pointer-events: none;
}
.combo-select:not(.combo-select--only-fields) .combo-select__aggregation,
.combo-select:not(.combo-select--only-fields) .combo-select__main {
  border-right: none;
}
.combo-select--big-aggregation .combo-select__aggregation {
  min-width: 95px;
}
.combo-select--aggregation:not(.combo-select--only-fields) .combo-select__aggregation,
.combo-select--aggregation:not(.combo-select--only-fields) .combo-select__main {
  border-right: 1px solid var(--G-1-5, #E9E9E9);
}
.combo-select--disable-colors:not(.combo-select--only-fields) .combo-select__aggregation {
  border-right: none;
}

.capsule-option {
  height: 28px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  border-radius: 5px;
}
.capsule-option.is-selected {
  padding-right: 0;
  padding-left: 0;
}

.checkmark-option {
  position: relative;
  height: var(--checkmark-option-height, 36px);
  padding: 0 10px;
  display: flex;
  align-items: center;
  border-radius: 5px;
  gap: 10px;
  padding-left: 36px;
  color: var(--checkmark-option-color, #6B6B6B);
}
.checkmark-option:hover {
  color: var(--checkmark-option-hover-color);
}
.checkmark-option.is-placeholder {
  padding-left: var(--checkmark-option-gutter, 5px);
  color: var(--checkmark-placeholder-color);
}
.checkmark-option.is-selected {
  --checkmark-option-color: #2E3538;
}
.checkmark-option.is-selected::before {
  content: " ";
  position: absolute;
  top: 50%;
  left: 20px;
  display: block;
  width: 5px;
  height: 9px;
  border-right: 2px solid var(--solution-primary-color);
  border-bottom: 2px solid var(--solution-primary-color);
  transform: translate(0, -50%) rotate(45deg);
}
.checkmark-option--right-align-selected {
  padding-left: var(--checkmark-option-gutter, 10px);
}
.checkmark-option--right-align-selected.is-selected {
  padding-right: 36px;
}
.checkmark-option--right-align-selected.is-selected::before {
  left: auto;
  right: var(--checkmark-option-icon-right, 20px);
  border-color: #3EAC40;
}
.checkmark-option__note {
  margin-left: auto;
}

.role-option {
  color: var(--typo-secondary, #878B92);
  padding: 9px 10px;
}
.role-option:hover {
  color: var(--typo-primary, #2E3538);
}

.removable-static-option {
  display: flex;
  align-items: center;
  gap: 5px;
  width: 100%;
  height: 36px;
  border: 1px solid var(--G-1-5, #E9E9E9);
  padding: 0 10px 0 13px;
  border-radius: 5px;
  background-color: var(--G-0-5, #FAFAFA);
}
.removable-static-option__delete {
  margin-left: auto;
}

.custom-multiselect-add-button {
  padding-left: 10px;
}

.small-dropdown {
  width: 76px;
}

.date-select__button {
  display: inline-flex;
  align-items: center;
  padding: 0 7px;
  height: 24px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  color: var(--typo-primary, #2E3538);
  transition: background-color 150ms ease-out;
  border-radius: 5px;
}
.date-select__button.is-active {
  transition: background-color 200ms ease-in;
  background-color: var(--G-1, #F3F3F4);
}
.date-select__button--icon {
  padding-right: 0;
}
.date-select__button-text {
  margin-right: 2px;
}
.date-select__button-icon {
  color: var(--ic-dark, #2D2D2D);
}
.date-select__option {
  width: 100%;
  height: 30px;
  padding: 0 10px;
  color: var(--select-option-active-color);
  line-height: 30px;
  border-radius: 5px;
  margin-right: 15px;
}
.date-select__option:hover {
  color: var(--typo-primary, #2E3538);
}

.default-option {
  height: 36px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  border-radius: 5px;
  color: var(--select-option-active-color-text-type);
  background-color: var(--select-option-active-background-text-type);
}
.default-option.is-selected {
  padding: 0;
}

.dropdown-search {
  position: relative;
  display: flex;
  align-items: center;
  border: 1px solid transparent;
  padding: 0 10px;
  background-color: var(--G-1, #F3F3F4);
  border-radius: 5px;
  transition: border-color 150ms ease-out , background-color 150ms ease-out;
}
.dropdown-search.is-highlight-active-state:after {
  content: "";
  position: absolute;
  top: -4px;
  right: -4px;
  bottom: -4px;
  left: -4px;
  opacity: 0;
  pointer-events: none;
  border: 3px solid var(--solution-primary-color);
  visibility: visible;
  border-radius: 8px;
  transition: opacity 150ms ease-out , visibility 150ms ease-out;
}
.dropdown-search.is-active.is-highlight-active-state {
  border-color: var(--solution-primary-color);
  background-color: var(--G-0, #FFFFFF);
  transition: border-color 200ms ease-in , background-color 200ms ease-in;
}
.dropdown-search.is-active.is-highlight-active-state::after {
  visibility: visible;
  opacity: 0.3;
  transition: opacity 200ms ease-in , visibility 200ms ease-in;
}
.dropdown-search__icon {
  margin-right: 13px;
  color: var(--ic-light, #c7cdcf);
  display: flex;
}
.dropdown-search__placeholder {
  opacity: 0;
  visibility: hidden;
  display: flex;
  font-size: 13px;
  white-space: nowrap;
  pointer-events: none;
}
.dropdown-search input {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0 15px;
  background-color: transparent;
  font-size: 13px;
  color: var(--typo-primary, #2E3538);
}
.dropdown-search input::placeholder {
  color: var(--typo-secondary, #878B92);
}
.dropdown-search--no-icon {
  height: 35px;
}
.dropdown-search--no-icon input {
  padding: 0 var(--dropdown-search-no-icon-input-gutter, 15px);
}
.dropdown-search--with-icon {
  height: 32px;
}
.dropdown-search--with-icon input {
  padding-left: 32px;
}
.dropdown-search--without-background {
  background-color: transparent;
}

.multiple-placeholder-wrapper--h-4 {
  margin-left: 4px;
}
.multiple-placeholder-wrapper--h-7 {
  margin-left: 7px;
}
.multiple-placeholder-wrapper--v-4 {
  margin-bottom: 4px;
}
.multiple-placeholder-wrapper--v-5 {
  margin-bottom: 5px;
}

.multiple-select {
  width: 100%;
  height: 100%;
  min-height: inherit;
}
.multiple-select__select-list-items .option.is-active {
  --select-option-active-background-text-type: inherit;
  --select-option-active-color-text-type: inherit;
}

.option {
  overflow: hidden;
  display: flex;
  max-width: 100%;
  background-color: transparent;
  border-radius: 5px;
  color: var(--option-color, #6B6B6B);
  transition: background 150ms ease-out;
  cursor: pointer;
  --select-option-is-hover-opacity: 0;
  --select-option-is-hover-background-color: var(--G-1, #F3F3F4);
}
.option:not(:last-child) {
  margin-bottom: var(--select-option-margin-bottom, 1px);
}
.option:hover {
  --select-option-is-hover-opacity: 1;
}
.option:hover, .option.is-active {
  --select-option-is-hover-background-color: var(--G-0-5, #FAFAFA);
}
.option.is-active {
  --select-option-active-color-text-type: var(--G-0, #FFFFFF);
  --select-option-active-background-text-type: var(--solution-primary-color);
}
.option:hover, .option.is-focused {
  color: var(--typo-primary, #2E3538);
  background-color: var(--select-option-highlight-background, var(--G-1, #F3F3F4));
}
.option:hover {
  transition: background 200ms ease-in;
}
.option.is-active:not(:hover) {
  color: var(--select-option-active-color, var(--typo-primary, #2E3538));
  background-color: var(--select-option-active-background, var(--G-1, #F3F3F4));
  transition: background 200ms ease-in;
}
.option.is-disabled {
  cursor: default;
  color: var(--G-4, #B2B2B3);
}
.option.is-disabled:hover {
  color: var(--G-4, #B2B2B3);
  background-color: var(--G-0-5, #FAFAFA);
  transition: background 200ms ease-in;
}
.option__content {
  flex-grow: 1;
  overflow: inherit;
}
.option__checkbox {
  margin: var(--select-items-checkbox-margin, auto auto auto 10px);
  pointer-events: none;
  position: relative;
  top: var(--select-items-checkbox-top, 0);
}
.option--check-mark {
  padding-left: 22px;
  position: relative;
}
.option--check-mark.is-active::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 9px;
  height: 9px;
  min-height: auto;
  width: 5px;
  margin-top: -2px;
  border-bottom: 2px solid var(--ic-darker, #151515);
  border-right: 2px solid var(--ic-darker, #151515);
  transform: rotate(45deg) translate(0, -50%);
}
.option--no-active-highlight.is-active {
  background-color: var(--G-0, #FFFFFF);
}

.options-list.is-horizontal {
  display: flex;
  flex-wrap: wrap;
}
.options-list.is-horizontal .options-list__option:hover, .options-list.is-horizontal .options-list__option.is-focused, .options-list.is-horizontal .options-list__option.is-active {
  background-color: transparent;
}

.select-list-items__in {
  display: flex;
  flex-direction: column;
  padding: 6px 4px;
}
.select-list-items__search {
  margin-bottom: 4px;
}
.select-list-items__search + .select-list-items__toggleall {
  margin-top: -12px;
}
.select-list-items__toggleall {
  display: flex;
  align-items: center;
  height: 32px;
  margin: 0 -4px 8px -4px;
  padding: 0 14px;
  border-bottom: 1px solid var(--G-1-5, #E9E9E9);
  cursor: pointer;
}
.select-list-items__toggleall-label {
  margin-left: 10px;
}
.select-list-items__scrollarea {
  max-width: 100%;
  max-height: inherit;
}
.select-list-items__scrollarea .ScrollbarsCustom.trackYVisible .select-list-items__options {
  padding-right: 11px;
}
.select-list-items__scrollarea .ScrollbarsCustom.trackYVisible .select-list-items__label {
  margin-right: 11px;
}
.select-list-items__additional-list {
  position: relative;
  margin-top: var(--select-list-items-additional-margin-top, 0);
  margin-bottom: var(--select-list-items-additional-margin-bottom, 6px);
  padding-bottom: var(--select-list-items-additional-padding-bottom, 0px);
}
.select-list-items__additional-list::before {
  content: "";
  position: absolute;
  bottom: -4px;
  left: -4px;
  right: -4px;
  height: 1px;
  background-color: #C2C2C2;
  opacity: 0.22;
}
.select-list-items__empty-message {
  padding: 0 10px;
  height: 36px;
  display: flex;
  align-items: center;
}
.select-list-items__footer {
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}
.select-list-items__label {
  padding-left: 10px;
}
.select-list-items__group:not(:last-child) {
  margin-bottom: 5px;
}
.select-list-items__group:not(:first-child) .select-list-items__chart-group-label {
  margin-top: 14px;
}
.select-list-items--gutter-bigger .select-list-items__in {
  padding: 6px 4px 6px 10px;
}
.select-list-items--without-bottom-gutter .select-list-items__in {
  padding-bottom: 0;
}
.select-list-items--autowidth {
  max-width: calc(100% - 1px);
}
.select-list-items--autowidth .option {
  overflow: visible;
}
.select-list-items--autowidth .select-list-items__scrollarea .ScrollbarsCustom.trackYVisible .select-list-items__options,
.select-list-items--autowidth .select-list-items__scrollarea .ScrollbarsCustom.trackYVisible .select-list-items__label {
  padding-right: 0;
}
.select-list-items--centered-empty-message .select-list-items__empty-message {
  display: flex;
  justify-content: center;
  align-items: center;
}
.select-list-items--additional-options-to-top .select-list-items__search {
  order: 2;
  margin-bottom: 5px;
}
.select-list-items--additional-options-to-top .select-list-items__additional-list {
  order: 1;
  margin-bottom: 10px;
}
.select-list-items--additional-options-to-top .select-list-items__scrollarea {
  order: 3;
}
.select-list-items--search-enabled .select-list-items__options {
  padding-top: 12px;
}
.select-list-items--grouped.select-list-items--search-enabled .select-list-items__options {
  padding-top: 0;
}
.select-list-items--expanding .options-list__option {
  overflow: visible;
}
.select-list-items--expanding .options-list__option .option__content {
  flex-grow: var(--expanding-dropdown-option-grow, 0);
}

.select-placeholder {
  display: flex;
  height: 100%;
  align-items: center;
  min-height: inherit;
  position: relative;
}
.select-placeholder__value {
  min-height: inherit;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  padding-left: var(--select-placeholder-padding-left, 10px);
  padding-right: var(--select-placeholder-padding-right, 23px);
}
.select-placeholder__actions {
  display: flex;
}
.select-placeholder__loading {
  color: var(--ic-light, #c7cdcf);
  margin-left: 10px;
}
.select-placeholder__clear-tooltip {
  display: flex;
  align-items: center;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 28px;
  font-size: 0;
  opacity: var(--select-clear-button-opacity, 1);
  transition: opacity 150ms ease-out;
}
.select-placeholder__clear-button {
  color: var(--G-3, #C7C8C9);
}
.select-placeholder__clear-button:hover {
  color: var(--ic-dark, #2D2D2D);
}
.select-placeholder__add-button {
  cursor: pointer;
  margin-left: 10px;
  max-width: 18px;
  max-height: 18px;
  min-width: 18px;
  min-height: 18px;
  border-radius: 50%;
  height: 18px;
  width: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--G-0, #FFFFFF);
  background-color: var(--solution-primary-color);
  transition: background-color 150ms ease-out;
}
.select-placeholder__add-button:hover {
  background-color: var(--solution-primary-color);
  transition: background-color 200ms ease-in;
}
.select-placeholder__placeholder {
  display: flex;
  align-items: center;
  overflow: hidden;
  user-select: none;
}
.select-placeholder__placeholder-icon {
  flex-shrink: 0;
  margin-right: 11px;
  color: var(--ic-light, #c7cdcf);
}
.select-placeholder__option {
  max-width: 100%;
}
.select-placeholder__arrow-icon {
  display: flex;
  position: relative;
  transform: rotate(0deg);
  transition: transform 150ms ease-out;
}
.select-placeholder__arrow {
  position: absolute;
  top: var(--arrow-select-top-position, 0);
  bottom: 0;
  right: var(--arrow-select-right-position, 0);
  display: flex;
  align-items: flex-start;
  cursor: pointer;
}
.select-placeholder__lock {
  color: var(--inactive, #B2B2B3);
  position: absolute;
  top: 50%;
  margin-top: -8px;
  right: 8px;
  opacity: var(--select-placeholder-lock-opacity, 1);
}
.select-placeholder.select-placeholder--no-selection .select-placeholder__value {
  cursor: default;
}
.select-placeholder--regular .select-placeholder__arrow {
  padding-right: var(--select-placeholder-arrow-right, 8px);
  padding-top: 9px;
}
.select-placeholder--capsule .select-placeholder__arrow {
  padding-right: var(--capsule-arrow-padding-right, 5px);
  padding-top: var(--capsule-arrow-padding-top, 8px);
}
.select-placeholder--capsule-transparent .select-placeholder__arrow {
  padding-right: 2px;
  padding-top: 8px;
}
.select-placeholder--capsule-transparent:hover .select-placeholder__arrow {
  color: var(--solution-primary-color);
}
.select-placeholder--type .select-placeholder__arrow {
  padding-right: 16px;
  padding-top: 17px;
}
.select-placeholder--auth .select-placeholder__value {
  padding-left: 20px;
  padding-right: 30px;
}
.select-placeholder--auth .select-placeholder__arrow {
  padding-right: 9px;
  align-items: center;
}
.select-placeholder--arrow-outline .select-placeholder__arrow, .select-placeholder--arrow-outline-separator .select-placeholder__arrow {
  color: var(--G-7, #6F7173);
}
.select-placeholder--arrow-outline-separator .select-placeholder__arrow {
  width: 32px;
  border-left: 1px solid var(--G-1-5, #E9E9E9);
  display: flex;
  padding-right: var(--outline-separator-arrow-padding-right, 0);
  padding-top: var(--outline-separator-arrow-padding-top, 9px);
  justify-content: center;
  background-color: var(--G-0, #FFFFFF);
  border-radius: 0 5px 5px 0;
}
.select-placeholder--arrow-outline-separator .select-placeholder__arrow-icon {
  height: 16px;
}
.select-placeholder--arrow-filled-small-arrow .select-placeholder__arrow {
  color: var(--G-7, #6F7173);
}
.select-placeholder--arrow-filled-small-arrow.is-active .select-placeholder__arrow {
  color: var(--solution-primary-color);
}
.select-placeholder--clear-on-hover .select-placeholder__clear-button {
  opacity: 0;
  transition: opacity 200ms ease-in;
}
.select-placeholder--clear-on-hover:hover .select-placeholder__clear-button {
  opacity: 1;
}
.select-placeholder--single .select-placeholder__option {
  width: 100%;
}
.select-placeholder--single .select-placeholder__value {
  cursor: pointer;
  align-items: center;
}
.select-placeholder--single.select-placeholder--clear .select-placeholder__value {
  padding-right: 36px;
}
.select-placeholder--multiple .select-placeholder__value {
  cursor: pointer;
}
.select-placeholder--multiple .select-placeholder__arrow {
  cursor: pointer;
}
.select-placeholder--multiple .select-placeholder__placeholder {
  padding-right: 10px;
}
.select-placeholder--multiple.select-placeholder--clear .select-placeholder__value {
  padding-right: 32px;
}
.select-placeholder--multiple:hover .select-placeholder__arrow, .select-placeholder--multiple.is-active .select-placeholder__arrow {
  color: var(--solution-primary-color);
}
.select-placeholder--arrow-filled .select-placeholder__arrow {
  color: var(--G-5, #9B9C9E);
}
.select-placeholder--arrow-filled .select-placeholder__value {
  padding-right: var(--select-placeholder-arrow-filled-right, 22px);
}
.select-placeholder--arrow-filled.no-arrow .select-placeholder__value {
  padding-right: var(--select-placeholder-padding-right, 10px);
}
.select-placeholder--arrow-filled-dark .select-placeholder__arrow {
  color: var(--ic-dark, #2D2D2D);
}
.select-placeholder--arrow-filled-dark .select-placeholder__value {
  padding-right: var(--select-placeholder-arrow-filled-right, 22px);
}
.select-placeholder--arrow-filled-dark.no-arrow .select-placeholder__value {
  padding-right: var(--select-placeholder-padding-right, 10px);
}
.select-placeholder--panel {
  border-radius: 5px;
  padding: 3px 0;
}
.select-placeholder--panel .select-placeholder__arrow {
  opacity: 0.5;
  color: var(--G-0, #FFFFFF);
  padding-right: 7px;
  align-items: center;
}
.select-placeholder--panel .select-placeholder__placeholder {
  opacity: 0.6;
  color: var(--G-0, #FFFFFF);
}
.select-placeholder--panel .select-placeholder__value {
  padding-right: 26px;
  margin-right: 0;
}
.select-placeholder--panel:hover, .select-placeholder--panel.is-active {
  background-color: var(--panel-select-placeholder-background, rgba(45, 45, 45, 0.2));
}
.select-placeholder--panel.is-active .select-placeholder__arrow {
  opacity: 1;
}
.select-placeholder--panel-reverse {
  border-radius: 5px;
}
.select-placeholder--panel-reverse .select-placeholder__arrow {
  color: var(--G-4, #B2B2B3);
  padding-right: 7px;
  align-items: center;
}
.select-placeholder--panel-reverse .select-placeholder__value {
  padding-right: 26px;
  margin-right: 0;
}
.select-placeholder--panel-reverse:hover, .select-placeholder--panel-reverse.is-active {
  background-color: rgba(45, 45, 45, 0.1);
}
.select-placeholder--panel-reverse:hover .select-placeholder__arrow {
  color: var(--G-4, #B2B2B3);
}
.select-placeholder--panel-reverse.is-active .select-placeholder__arrow {
  color: var(--solution-primary-color);
}
.select-placeholder--figure .select-placeholder__arrow {
  padding-right: 8px;
  align-items: center;
}
.select-placeholder--nowrap .select-placeholder__value {
  flex-wrap: nowrap;
}
.select-placeholder--wrap .select-placeholder__value {
  flex-wrap: wrap;
}
.select-placeholder:hover:not(.select-placeholder--panel, .select-placeholder--panel-reverse) {
  transition: border 200ms ease-in;
}
.select-placeholder:hover:not(.select-placeholder--panel, .select-placeholder--panel-reverse) .select-placeholder__arrow {
  color: var(--solution-primary-color);
}
.select-placeholder--clear:not(.is-empty):not(.is-active):not(.select-placeholder--multiple):not(.select-placeholder--status-lg) .select-placeholder__value {
  padding-right: 45px;
}
.select-placeholder--automation .select-placeholder__value {
  padding-left: 0;
}
.select-placeholder--automation .select-placeholder__arrow {
  padding-right: 8px;
  padding-top: 8px;
}
.select-placeholder--grid-status .select-placeholder__value {
  padding-left: 0;
  padding-right: 0;
}
.select-placeholder--grid-status .select-placeholder__arrow {
  padding-right: 8px;
}
.select-placeholder--status-md.select-placeholder:not(.is-empty).is-active:not(.select-placeholder--panel) .select-placeholder__arrow,
.select-placeholder--status-md.select-placeholder:not(.is-empty).is-active:not(.select-placeholder--panel) .select-placeholder__clear-button, .select-placeholder--status-md.select-placeholder:not(.is-empty):hover:not(.select-placeholder--panel) .select-placeholder__arrow,
.select-placeholder--status-md.select-placeholder:not(.is-empty):hover:not(.select-placeholder--panel) .select-placeholder__clear-button {
  color: var(--status-arrow-color);
}
.select-placeholder--status-md:not(.is-empty) .select-placeholder__arrow {
  color: var(--status-arrow-color);
}
.select-placeholder--status-md .select-placeholder__value {
  padding-left: 0;
  padding-right: 0;
}
.select-placeholder--status-md .select-placeholder__arrow {
  display: flex;
  align-items: center;
  padding-top: 0;
}
.select-placeholder--status-md.is-empty .select-placeholder__value {
  padding-right: 25px;
}
.select-placeholder--status-lg .select-placeholder__arrow {
  align-items: center;
  border-left: 1px solid var(--G-0, #FFFFFF);
  padding-left: 8px;
}
.select-placeholder--status-lg .select-placeholder__clear-button {
  opacity: 0;
  color: var(--status-text-color, var(--G-0, #FFFFFF));
  transition: opacity 150ms ease-out;
}
.select-placeholder--status-lg .select-placeholder__clear-tooltip {
  right: 40px;
}
.select-placeholder--status-lg.select-placeholder.is-active .select-placeholder__clear-button, .select-placeholder--status-lg.select-placeholder:hover .select-placeholder__clear-button {
  opacity: 1;
  transition: opacity 200ms ease-in;
}
.select-placeholder--status-lg.select-placeholder.is-active:not(.select-placeholder--panel) .select-placeholder__arrow, .select-placeholder--status-lg.select-placeholder:hover:not(.select-placeholder--panel) .select-placeholder__arrow {
  color: var(--G-0, #FFFFFF);
}
.select-placeholder--status-lg.is-filled .select-placeholder__value {
  padding-left: 0;
  padding-right: 0;
}
.select-placeholder--status-lg.is-filled .select-placeholder__arrow {
  color: var(--status-text-color, var(--G-0, #FFFFFF));
}
.select-placeholder--status-lg.is-empty .select-placeholder__value {
  padding-right: 30px;
  padding-left: 10px;
}
.select-placeholder--team .select-placeholder__value {
  display: block;
}
.select-placeholder--plain, .select-placeholder--plain-body {
  height: var(--plain-placeholder-select-height, 34px);
  background-color: var(--G-1, #F3F3F4);
  border-radius: 5px;
}
.select-placeholder--plain .select-placeholder__arrow, .select-placeholder--plain-body .select-placeholder__arrow {
  margin-right: 8px;
  align-items: center;
}
.select-placeholder.is-active:not(.select-placeholder--panel) .select-placeholder__arrow {
  color: var(--solution-primary-color);
}
.select-placeholder.is-active:not(.select-placeholder--panel).select-placeholder--status .select-placeholder__arrow {
  color: var(--G-0, #FFFFFF);
}
.select-placeholder.is-active:not(.select-placeholder--arrow-outline-separator) .select-placeholder__arrow-icon {
  transform: rotate(var(--active-placeholder-arrow-rotate, 180deg));
  transition: transform 200ms ease-in;
}
.select-placeholder.is-disabled .select-placeholder__value {
  pointer-events: none;
}
.select-placeholder.is-disabled .select-placeholder__option {
  color: var(--typo-secondary, #878B92);
}
.select-placeholder--state {
  position: relative;
  width: 18px;
  height: 18px;
}
.select-placeholder--state .select-placeholder__placeholder {
  display: block;
  width: 18px;
  min-width: 18px;
  height: 18px;
  border: 2px solid var(--G-2, #DEDEDE);
  border-radius: 50%;
  background-color: var(--G-0, #FFFFFF);
}
.select-placeholder--state .select-placeholder__value {
  padding-right: 0;
  padding-left: 0;
}
.select-placeholder--state:hover .select-placeholder__placeholder {
  border-color: var(--G-3, #C7C8C9);
}
.select-placeholder--state:not(.is-empty):not(.is-active):not(.select-placeholder--multiple) .select-placeholder__value {
  padding-right: 0;
}
.select-placeholder--state.is-active .select-placeholder__placeholder {
  border-color: var(--G-5, #9B9C9E);
}
.select-placeholder--circle-dashed {
  position: relative;
  width: 26px;
  height: 26px;
}
.select-placeholder--circle-dashed .select-placeholder__value {
  padding-right: 0;
  padding-left: 0;
}
.select-placeholder--time-input {
  height: 33px;
  width: 100%;
}
.select-placeholder--time-input .select-placeholder__placeholder {
  padding-right: 0;
  padding-left: 0;
}
.select-placeholder--time-input .select-placeholder__value {
  padding-right: 0;
}
.select-placeholder--report-toolbar-timeline .select-placeholder__value {
  padding-left: 20px;
}
.select-placeholder--report-toolbar-timeline:hover .select-placeholder__clear-tooltip {
  transition: opacity 200ms ease-in;
  opacity: 1;
}
.select-placeholder--report-toolbar-timeline .select-placeholder__clear-tooltip {
  right: 8px;
  opacity: 0;
  transition: opacity 150ms ease-out;
}
.select-placeholder--report-toolbar-timeline:not(.is-empty):not(.is-active):not(.select-placeholder--multiple) .select-placeholder__value {
  padding-right: 28px;
}
.select-placeholder--tag-field-edit-record .select-placeholder__value {
  padding: 4px 4px 0;
}
.select-placeholder--tag-field-edit-record .select-placeholder__add-button {
  position: absolute;
  z-index: 1;
  top: 9px;
  left: 9px;
  margin: 0;
}
.select-placeholder--tag-field-edit-record .select-placeholder__add-button + .select-placeholder__value > .select-placeholder__option:first-child {
  margin-left: 29px;
}
.select-placeholder--search-solution-dropdown {
  max-width: 380px;
  min-width: 225px;
}
.select-placeholder--plans-and-billing {
  background-color: rgba(255, 255, 255, 0.4);
  min-height: 40px;
  border-radius: 20px;
  cursor: pointer;
  transition: background-color 200ms ease-in;
}
.select-placeholder--plans-and-billing:hover:not(.select-placeholder--panel, .select-placeholder--panel-reverse), .select-placeholder--plans-and-billing.is-active:not(.select-placeholder--panel, .select-placeholder--panel-reverse) {
  background-color: rgba(255, 255, 255, 0.55);
  transition: background-color 150ms ease-out;
}
.select-placeholder--plans-and-billing:hover:not(.select-placeholder--panel, .select-placeholder--panel-reverse) .select-placeholder__arrow, .select-placeholder--plans-and-billing.is-active:not(.select-placeholder--panel, .select-placeholder--panel-reverse) .select-placeholder__arrow {
  color: var(--G-0, #FFFFFF);
}
.select-placeholder--plans-and-billing .select-placeholder__value {
  padding-left: 22px;
}
.select-placeholder--plans-and-billing .select-placeholder__arrow {
  padding-top: 11px;
  padding-right: 15px;
  color: var(--G-0, #FFFFFF);
}
.select-placeholder--plans-and-billing:hover .select-placeholder__arrow {
  color: var(--G-0, #FFFFFF);
}
.select-placeholder--grid-select .select-placeholder__value {
  align-items: flex-start;
  padding-top: 8px;
  padding-left: 16px;
}
.select-placeholder--grid-select .select-placeholder__value .select-placeholder__placeholder {
  padding-top: 2px;
}
.select-placeholder--multiple-select-grid .select-placeholder__add-button {
  align-self: flex-start;
  margin-top: 12px;
}
.select-placeholder--multiple-select-grid .select-placeholder__value {
  align-items: flex-start;
  align-content: flex-start;
  padding-top: 8px;
  padding-left: 16px;
}
.select-placeholder--multiple-select-grid .select-placeholder__value .select-placeholder__placeholder {
  padding-top: 2px;
}
.select-placeholder--multiple-select-grid .select-placeholder__option {
  margin-right: 7px;
  margin-bottom: 8px;
}
.select-placeholder.select-placeholder--arrow-filled-gray-dark:hover .select-placeholder__arrow, .select-placeholder.select-placeholder--arrow-filled-gray-dark.is-active .select-placeholder__arrow {
  color: var(--ic-dark, #2D2D2D);
}
.select-placeholder.select-placeholder--arrow-filled-gray-dark .select-placeholder__arrow {
  color: var(--G-5, #9B9C9E);
}
.select-placeholder.select-placeholder--arrow-filled-gray-dark .select-placeholder__value {
  padding-right: var(--select-placeholder-arrow-filled-right, 22px);
}
.select-placeholder.select-placeholder--arrow-filled-gray-dark.no-arrow .select-placeholder__value {
  padding-right: var(--select-placeholder-padding-right, 10px);
}

.single-select {
  width: 100%;
  min-height: var(--single-select-min-height, 33px);
  height: 100%;
  position: relative;
}
.single-select--expanding.is-open .single-select__wrap {
  position: absolute;
  top: 0;
  left: 0;
  right: var(--expanding-right-position, auto);
}
.single-select__expandholder {
  opacity: 0;
}
.single-select__wrap {
  height: 100%;
  width: var(--single-select-wrap-width, auto);
}
.single-select__placeholder {
  height: 100%;
  min-height: inherit;
}
.single-select:not(.single-select--type-capsule, .single-select--type-capsule-transparent, .single-select--type-capsule-body, .single-select--type-state) {
  min-height: var(--single-select-min-height, 34px);
}
.single-select:not(.single-select--type-capsule, .single-select--type-capsule-transparent, .single-select--type-capsule-body, .single-select--type-state) .single-select__wrap {
  min-height: var(--single-select-min-height, 34px);
}
.single-select.single-select--type-panel {
  min-height: 30px;
}
.single-select.single-select--type-panel-reverse {
  min-height: 24px;
}
.single-select--type-capsule .single-select__placeholder {
  background-color: var(--select-placeholder-background, var(--G-1, #F3F3F4));
  border-radius: 5px;
  position: relative;
  z-index: 2;
  transition: background-color 150ms ease-out;
}
.single-select--type-capsule .single-select__list {
  padding-top: var(--capsule-select-list-padding-top, 33px);
}
.single-select--type-capsule.is-open .single-select__placeholder {
  background-color: var(--select-placeholder-active-background);
  transition: background-color 200ms ease-in;
}
.single-select--type-capsule:hover .single-select__placeholder {
  background-color: var(--select-placeholder-hover-background);
  transition: background-color 200ms ease-in;
}
.single-select--type-capsule-transparent .single-select__placeholder {
  border-radius: 5px 5px 0 0;
  position: relative;
  z-index: 2;
}
.single-select--type-capsule-transparent .single-select__list {
  padding-top: 33px;
}
.single-select--type-capsule-transparent.is-open .single-select__placeholder {
  background-color: var(--G-1, #F3F3F4);
}
.single-select--type-capsule-transparent.single-select--expanding .single-select__wrap {
  left: auto;
  right: 0;
}
.single-select--type-panel {
  display: inline-block;
  width: auto;
}
.single-select--type-auth:not(.single-select--type-capsule) {
  height: 40px;
}
.single-select--type-auth .single-select__wrap {
  height: 40px;
}
.single-select--type-plain {
  height: 34px;
}
.single-select--type-plain .single-select__list {
  padding-top: 34px;
}
.single-select--type-plain .single-select__placeholder {
  position: relative;
  z-index: 4;
}
.single-select--type-state {
  min-height: 18px;
}

.small-option {
  height: 24px;
  padding: 0 10px;
  display: flex;
  align-items: center;
}

.select-field-dropdown {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  height: 22px;
  border: 1px dashed var(--G-2, #DEDEDE);
  padding: 0 3px 0 8px;
  background-color: var(--G-0, #FFFFFF);
  border-radius: 4px;
  cursor: pointer;
  transition: border-color 150ms ease-out;
}
.select-field-dropdown:not(.has-value):hover {
  border-color: var(--G-3, #C7C8C9);
  transition: border-color 200ms ease-in;
}
.select-field-dropdown.is-active .select-field-dropdown__arrow {
  transform: rotate(180deg);
  transition: transform 200ms ease-in;
}
.select-field-dropdown.has-value {
  border-style: solid;
  border-color: var(--G-1-5, #E9E9E9);
}
.select-field-dropdown__arrow {
  margin-left: 2px;
  color: var(--G-6, #868788);
  transition: transform 150ms ease-out;
}
.select-field-dropdown__heading {
  border-bottom: 1px solid var(--G-1-5, #E9E9E9);
  padding: 10px 15px;
}
.select-field-dropdown-panel {
  --menu-option-height: 28px;
}
.select-field-dropdown-panel__placeholder {
  padding: 1px 15px;
  text-align: center;
}

.short-select {
  position: relative;
  display: inline-block;
  max-width: 100%;
  --active-placeholder-arrow-rotate: 0;
  --select-placeholder-padding-left: 0px;
  --single-select-min-height: 18px;
  --arrow-select-top-position: var(--short-select-arrow-top, -7px);
  --select-placeholder-arrow-filled-right: 19px;
  --select-placeholder-arrow-right: 0;
  color: var(--tertiary, #6B6B6B);
}
.short-select .is-open {
  color: var(--typo-primary, #2E3538);
}
.short-select__dropdown {
  --checkmark-option-height: 28px;
  --checkmark-option-gutter: 12px;
  --select-option-margin-bottom: 4px;
  --select-list-items-additional-padding-bottom: 4px;
}
.short-select-selected__value {
  color: var(--short-select-selected-value-color, currentColor);
}

.editable-filter-option {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 36px;
  border: 1px solid transparent;
  padding: 0 8px;
  background-color: var(--G-0-5, #FAFAFA);
  border-radius: 5px;
  transition: background-color 150ms ease-out , border-color 150ms ease-out;
}
.editable-filter-option:hover {
  border-color: var(--G-2, #DEDEDE);
  transition: border-color 200ms ease-in;
}
.editable-filter-option:hover .editable-filter-option__drag {
  color: var(--G-6, #868788);
}
.editable-filter-option:hover .editable-filter-option__actions {
  opacity: 1;
  transition: opacity 200ms ease-in;
}
.editable-filter-option.is-active {
  border-color: var(--G-2, #DEDEDE);
  background-color: var(--G-1, #F3F3F4);
  transition: background-color 200ms ease-in , border-color 200ms ease-in;
}
.editable-filter-option.is-active .editable-filter-option__arrow {
  background-color: var(--G-1-5, #E9E9E9);
}
.editable-filter-option.is-active .editable-filter-option__actions {
  opacity: 1;
}
.editable-filter-option.is-opened-dots {
  border-color: var(--G-2, #DEDEDE);
  transition: border-color 200ms ease-in;
}
.editable-filter-option.is-opened-dots .editable-filter-option__actions {
  opacity: 1;
  transition: opacity 200ms ease-in;
}
.editable-filter-option.is-renaming {
  border-color: var(--solution-primary-color);
  background-color: var(--G-0, #FFFFFF);
  transition: background-color 200ms ease-in , border-color 200ms ease-in;
}
.editable-filter-option.can-rename .editable-filter-option__name span {
  border-bottom: 1px dashed transparent;
}
.editable-filter-option.can-rename .editable-filter-option__name span:hover {
  border-bottom-color: var(--G-3, #C7C8C9);
}
.editable-filter-option--arrow-on-hover:hover .editable-filter-option__arrow, .editable-filter-option--arrow-on-hover.is-active .editable-filter-option__arrow {
  opacity: 1;
  transition: opacity 200ms ease-in;
}
.editable-filter-option--arrow-on-hover .editable-filter-option__arrow {
  opacity: 0;
  transition: opacity 150ms ease-out;
}
.editable-filter-option__drag {
  display: inline-flex;
  margin-right: 5px;
  color: var(--G-4, #B2B2B3);
  cursor: grab;
}
.editable-filter-option__drag:hover {
  color: var(--G-5, #9B9C9E);
}
.editable-filter-option__drag:active {
  cursor: grabbing;
}
.editable-filter-option__body {
  overflow: hidden;
  display: flex;
  align-items: center;
  flex-grow: 1;
  height: 100%;
  cursor: pointer;
}
.editable-filter-option__input {
  width: 100%;
  height: 34px;
  font-weight: 500;
  font-size: 13px;
  line-height: 18px;
  font-family: inherit;
  color: var(--typo-primary, #2E3538);
}
.editable-filter-option__input::placeholder {
  font-weight: normal;
  color: var(--typo-secondary, #878B92);
}
.editable-filter-option__actions {
  opacity: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  transition: opaicty 150ms ease-out;
}
.editable-filter-option__arrow {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  border-radius: 5px;
  transition: background-color 150ms ease-out;
  cursor: pointer;
}
.editable-filter-option__arrow:hover {
  background-color: var(--G-1-5, #E9E9E9);
  transition: background-color 200ms ease-in;
}
.editable-filter-option__delete {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  border-radius: 5px;
  color: var(--G-8, #4d4d4d);
  transition: background-color 150ms ease-out;
  cursor: pointer;
}
.editable-filter-option__delete:hover {
  background-color: var(--G-1-5, #E9E9E9);
  transition: background-color 200ms ease-in;
}
.editable-filter-option__save {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  border-radius: 5px;
  background-color: #EEF6EE;
  color: #3EAC40;
  cursor: pointer;
  transition: background-color 150ms ease-out , color 150ms ease-out;
}
.editable-filter-option__save:hover {
  background-color: #3EAC40;
  color: #EEF6EE;
  transition: background-color 200ms ease-in , color 200ms ease-in;
}

.fields-with-condition-select {
  position: relative;
  display: inline-flex;
}
.fields-with-condition-select::before {
  content: " ";
  opacity: 0;
  position: absolute;
  top: -3px;
  right: -3px;
  bottom: -3px;
  left: -3px;
  background-color: var(--solution-primary-color);
  border-radius: 10px;
  transition: opacity 150ms ease-out;
  pointer-events: none;
}
.fields-with-condition-select__in {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 2px;
  max-width: 100%;
  height: 32px;
  border: 1px solid var(--G-1-5, #E9E9E9);
  padding: 0 8px 0 15px;
  border-radius: 8px;
  background-color: var(--G-0, #FFFFFF);
  transition: border-color 150ms ease-out;
}
.fields-with-condition-select:hover .fields-with-condition-select__in {
  border-color: var(--G-2, #DEDEDE);
  transition: border-color 200ms ease-in;
}
.fields-with-condition-select:hover .fields-with-condition-select__arrow {
  color: var(--G-8, #4d4d4d);
}
.fields-with-condition-select.is-active::before {
  opacity: 0.2;
  transition: opacity 200ms ease-in;
}
.fields-with-condition-select.is-active .fields-with-condition-select__in {
  border-color: var(--solution-primary-color);
  transition: border-color 200ms ease-in;
}
.fields-with-condition-select.is-active .fields-with-condition-select__arrow {
  color: var(--solution-hover-color);
  transform: rotate(180deg);
  transition: color 200ms ease-in , transform 200ms ease-in;
}
.fields-with-condition-select__value {
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 5px;
}
.fields-with-condition-select__name {
  max-width: var(--fields-with-condition-select-name-max-width);
}
.fields-with-condition-select__arrow {
  color: var(--G-5, #9B9C9E);
  transition: color 150ms ease-out , transform 150ms ease-out;
}
.fields-with-condition-select__counter {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-width: 18px;
  height: 18px;
  border: 1px solid var(--G-1-5, #E9E9E9);
  padding: 0 3px;
  background-color: var(--G-1, #F3F3F4);
  border-radius: 5px;
}
.fields-with-condition-select-footer {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 37px;
  border-top: 1px solid var(--G-1-5, #E9E9E9);
  padding: 8px 8px 8px 17px;
}
.fields-with-condition-select-footer::before {
  content: " ";
  z-index: -1;
  position: absolute;
  top: 5px;
  right: 5px;
  bottom: 5px;
  left: 5px;
  border-radius: 6px;
  background-color: var(--G-1, #F3F3F4);
}
.fields-with-condition-select-footer__text {
  overflow: hidden;
  display: flex;
  align-items: center;
  flex-grow: 1;
  gap: 4px;
}
.fields-with-condition-select-footer__actions {
  margin-left: auto;
}
.fields-with-condition-select-footer__clear {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 20px;
  border: 1px solid var(--G-2, #DEDEDE);
  padding: 0 10px;
  border-radius: 4px;
  background-color: var(--G-1-5, #E9E9E9);
  color: var(--tertiary, #6B6B6B);
  transition: background-color 150ms ease-out , color 150ms ease-out;
}
.fields-with-condition-select-footer__clear:hover {
  background-color: var(--G-2, #DEDEDE);
  color: var(--G-8, #4d4d4d);
  transition: background-color 200ms ease-in , color 200ms ease-in;
}
.fields-with-condition-select__list {
  --select-option-margin-bottom: 4px;
  --select-option-active-background: transparent;
}

.radio-option {
  display: flex;
  align-items: center;
  gap: var(--radio-option-gap, 10px);
  min-height: var(--radio-option-min-height, 28px);
  padding: var(--radio-option-padding, 2px 11px);
  font-size: 13px;
  color: var(--tertiary, #6B6B6B);
  cursor: pointer;
  transition: color 150ms ease-out;
}
.radio-option:hover {
  color: var(--typo-primary, #2E3538);
  transition: color 200ms ease-in;
}
.radio-option__field {
  pointer-events: none;
}
.radio-option__body {
  flex-grow: 1;
  overflow: hidden;
}

.text-color-select {
  position: relative;
  width: 28px;
  height: 28px;
  border: 1px solid transparent;
  border-radius: 5px;
  background-color: var(--G-0, #FFFFFF);
  transition: border-color 150ms ease-out;
}
.text-color-select::before {
  content: " ";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  width: 20px;
  height: 20px;
  border: 1px solid var(--G-1-5, #E9E9E9);
  margin: auto;
  border-radius: 50%;
  background-color: currentColor;
}
.text-color-select:hover {
  border-color: var(--G-1, #F3F3F4);
  transition: border-color 200ms ease-in;
}
.text-color-select.is-active {
  border-color: var(--G-1-5, #E9E9E9);
  transition: border-color 200ms ease-in;
}
.text-color-select__title {
  padding: 8px 10px 0 10px;
}

.text-color-option {
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 30px;
  max-width: 100%;
  padding: 0 5px;
}
.text-color-option__preview {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border: 1px solid var(--G-1-5, #E9E9E9);
  border-radius: 5px;
  background-color: var(--G-0, #FFFFFF);
}

.source-select__in {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  width: 100%;
  height: var(--source-select-height, 34px);
  padding: 0 8px 0 10px;
  border-radius: 8px;
  background-color: var(--G-0, #FFFFFF);
  text-align: left;
  transition: border-color 150ms ease-out;
}
.source-select:hover .source-select__arrow {
  color: var(--solution-primary-color);
}
.source-select.is-active .source-select__arrow {
  color: var(--solution-primary-color);
  transform: rotate(180deg);
  transition: color 200ms ease-in , transform 200ms ease-in;
}
.source-select__value {
  overflow: hidden;
  flex-grow: 1;
}
.source-select__arrow {
  color: var(--ic-darker, #151515);
  transition: color 150ms ease-out , transform 150ms ease-out;
}
.source-select__list {
  --dropdown-search-no-icon-input-gutter: 11px;
  --checkmark-option-height: 28px;
  --select-option-margin-bottom: 4px;
  --select-option-active-background: transparent;
}
.source-select__list .select-list-items__group {
  padding-top: 10px;
}
.source-select__list .select-list-items__group:not(:first-child) {
  border-top: 1px solid var(--G-1-5, #E9E9E9);
}
.source-select__hat {
  margin-bottom: 3px;
  border-bottom: 1px solid var(--G-1, #F3F3F4);
  padding: 5px;
}
.source-select__title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  height: 26px;
  padding: 0 10px;
  cursor: default;
}
.source-select__title.is-clickable {
  cursor: pointer;
}
.source-select__title.is-clickable:hover {
  color: var(--solution-hover-color);
}

.arrow-step-option {
  position: relative;
  justify-content: space-between;
  height: var(--arrow-step-option-height, 28px);
  padding: 0 10px;
  display: flex;
  align-items: center;
  border-radius: 5px;
  color: var(--arrow-step-option-color, #6B6B6B);
}
.arrow-step-option:hover {
  color: var(--arrow-step-option-hover-color);
}
.arrow-step-option.is-placeholder {
  color: var(--arrow-step-placeholder-color);
}
.arrow-step-option.is-selected {
  --arrow-step-option-color: #2E3538;
}
.arrow-step-option__icon {
  margin-left: 10px;
  color: var(--G-8, #4d4d4d);
}

.record-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  cursor: pointer;
}
.record-option:not(.is-placeholder) {
  min-height: 40px;
  border: 1px solid var(--G-1-5, #E9E9E9);
  border-radius: 8px;
  background-color: var(--G-0, #FFFFFF);
  color: var(--typo-primary, #2E3538);
  transition: background-color 150ms ease-out , border-color 150ms ease-out;
}
.record-option:not(.is-placeholder):not(.is-selected):hover {
  background-color: var(--G-0-5, #FAFAFA);
  transition: background-color 200ms ease-in;
}
.record-option.is-placeholder {
  color: var(--record-placeholder-color, #2E3538);
}
.record-option.is-selected {
  border-color: var(--solution-primary-color);
  transition: border-color 200ms ease-in;
}
.record-option.is-extended {
  align-items: flex-start;
  padding-top: 10px;
  padding-bottom: 10px;
}
.record-option__cover {
  display: block;
  width: 68px;
  min-width: 68px;
  height: 68px;
  border-radius: 8px;
  object-fit: cover;
  object-position: center;
}
.record-option__inner {
  overflow: hidden;
  flex-grow: 1;
}
.record-option__fields {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 10px;
}
.record-option__field {
  display: flex;
  gap: 4px;
}

.source-select-group-label {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px 4px 10px;
}

.rect-option {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  width: 100%;
  min-height: 68px;
  padding: 10px;
  border-radius: 5px;
  color: var(--tertiary, #6B6B6B);
  cursor: pointer;
  text-align: center;
  transition: background-color 150ms ease-out , color 150ms ease-out;
}
.rect-option.icon-only {
  min-height: 60px;
}
.rect-option::before {
  content: " ";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: 1px solid var(--G-1-5, #E9E9E9);
  border-radius: inherit;
  transition: opacity 150ms ease-out , border-color 150ms ease-out;
}
.rect-option.is-active, .rect-option:hover {
  color: var(--typo-primary, #2E3538);
  transition: background-color 200ms ease-in , color 200ms ease-in;
}
.rect-option.is-active::before, .rect-option:hover::before {
  opacity: 0.5;
  border-color: var(--solution-primary-color);
  transition: opacity 200ms ease-in , border-color 200ms ease-in;
}
.rect-option.is-active .rect-option__icon, .rect-option:hover .rect-option__icon {
  opacity: var(--rect-option-active-icon-opacity, 1);
  color: var(--rect-option-active-icon-color, var(--solution-primary-color));
  transition: opacity 200ms ease-in , color 200ms ease-in;
}
.rect-option.is-active {
  background-color: var(--solution-secondary-color);
}
.rect-option__icon {
  opacity: var(--rect-option-icon-opacity, 0.4);
  color: var(--rect-option-icon-color, #151515);
  transition: opacity 150ms ease-out , color 150ms ease-out;
}

.rect-option-select {
  display: flex;
  gap: 10px;
}

.bg-color-picker-type-option {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  width: 100%;
  min-height: 66px;
  padding: 6px;
  border-radius: 5px;
  color: var(--tertiary, #6B6B6B);
  cursor: pointer;
  text-align: center;
  transition: background-color 150ms ease-out , color 150ms ease-out;
}
.bg-color-picker-type-option::before {
  content: " ";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: 1px solid var(--G-1-5, #E9E9E9);
  border-radius: inherit;
  transition: opacity 150ms ease-out , border-color 150ms ease-out;
}
.bg-color-picker-type-option.is-active, .bg-color-picker-type-option:hover {
  color: var(--typo-primary, #2E3538);
  transition: background-color 200ms ease-in , color 200ms ease-in;
}
.bg-color-picker-type-option.is-active::before, .bg-color-picker-type-option:hover::before {
  opacity: 0.5;
  border-color: var(--solution-primary-color);
  transition: opacity 200ms ease-in , border-color 200ms ease-in;
}
.bg-color-picker-type-option.is-active {
  background-color: var(--solution-secondary-color);
}
.bg-color-picker-type-option--white:not(.is-active) .bg-color-picker-type-option__preview::after {
  border-color: var(--G-1, #F3F3F4);
}
.bg-color-picker-type-option--neutral.is-active .bg-color-picker-type-option__preview::after {
  opacity: 1;
  border-color: var(--G-1-5, #E9E9E9);
}
.bg-color-picker-type-option--custom:not(.is-active) .bg-color-picker-type-option__preview::before {
  opacity: 0.5;
}
.bg-color-picker-type-option--custom:not(.is-active) .bg-color-picker-type-option__preview::after {
  opacity: 0;
}
.bg-color-picker-type-option--custom.is-active .bg-color-picker-type-option__preview::before {
  opacity: 0.5;
}
.bg-color-picker-type-option--custom.is-active .bg-color-picker-type-option__preview::after {
  opacity: 0.2;
  border-color: var(--option-type-border-color);
}
.bg-color-picker-type-option__preview {
  position: relative;
  width: 100%;
  min-height: 31px;
  border-radius: 4px;
}
.bg-color-picker-type-option__preview::before {
  content: " ";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: inherit;
  background-color: var(--option-type-background-color, transparent);
}
.bg-color-picker-type-option__preview::after {
  content: " ";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: 1px solid transparent;
  border-radius: inherit;
}

.bg-color-picker-pill {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: 23px;
  height: 23px;
  box-shadow: 0 0 0 0px transparent;
  background-color: var(--color-pill-background-color);
  border-radius: 50%;
  transition: box-shadow 150ms ease-out;
}
.bg-color-picker-pill.is-active {
  box-shadow: 0 0 0 3px var(--color-pill-border-color);
  transition: box-shadow 200ms ease-in;
}

.bg-color-picker-palette {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}
.bg-color-picker-palette__static {
  flex-shrink: 0;
  border-right: 1px solid var(--G-1, #F3F3F4);
  padding-right: 10px;
}

.bg-color-picker__options {
  display: flex;
  gap: 10px;
}

.icon--transition {
  transition: color 200ms ease-in , fill 200ms ease-in;
}
.icon--transition:hover {
  transition: color 150ms ease-out , fill 150ms ease-out;
}

.preloader {
  position: absolute;
  pointer-events: none;
  transform: translate3d(0, 0, 0);
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1001;
}
.preloader--primary {
  color: var(--solution-primary-color);
}
.preloader--white {
  color: var(--G-0, #FFFFFF);
}
.preloader--backdrop {
  background-color: var(--G-0, #FFFFFF);
}
.preloader__dots {
  width: 100%;
  max-width: 60px;
}
.preloader__spinners {
  width: 44px;
  height: 44px;
  position: relative;
  transform: scaleX(-1);
  padding: 0 2px;
}
.preloader__spin {
  background-color: currentColor;
  height: 12px;
  width: 40px;
  display: block;
  border-radius: 47% 0% 43% 0%/116% 0% 130% 0%;
}
.preloader__center-pin {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -5px;
  margin-left: -8px;
  height: 10px;
  width: 16px;
  background-color: currentColor;
  border-radius: 10px;
  z-index: 1;
}
.preloader__spin-wrapper {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  display: flex;
  justify-content: center;
}
.preloader__spin-wrapper--bottom .preloader__spin, .preloader__spin-wrapper--top .preloader__spin {
  transform: scaleX(-1);
}
.preloader__spin-wrapper--top {
  animation: topSpin 833ms linear infinite forwards;
}
.preloader__spin-wrapper--center .preloader__spin {
  margin-top: 16px;
  animation: centerSpin 833ms linear infinite forwards;
}
.preloader__spin-wrapper--bottom {
  animation: bottomSpin 833ms linear infinite forwards;
}
.preloader__spin-wrapper--bottom .preloader__spin {
  margin-top: 32px;
}

@keyframes topSpin {
  0% {
    transform: rotate(-360deg);
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
  }
  76% {
    transform: rotate(-540deg);
  }
  100% {
    transform: rotate(-540deg);
  }
}
@keyframes centerSpin {
  0% {
    transform: scaleX(1) scaleY(1);
  }
  38% {
    transform: scaleX(0) scaleY(0.7);
  }
  76% {
    transform: scaleX(1) scaleY(1);
  }
  100% {
    transform: scaleX(1) scaleY(1);
  }
}
@keyframes bottomSpin {
  0% {
    transform: rotate(0deg);
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
  }
  76% {
    transform: rotate(-180deg);
  }
  100% {
    transform: rotate(-180deg);
  }
}
.scrollbar {
  height: 100%;
  max-height: inherit;
  max-width: inherit;
  min-height: inherit;
  min-width: inherit;
  position: relative;
  width: 100%;
}
.scrollbar .ScrollbarsCustom {
  position: relative;
  width: 100%;
}
.scrollbar .ScrollbarsCustom-Scroller {
  -webkit-overflow-scrolling: touch;
}
.scrollbar .ScrollbarsCustom-Wrapper {
  position: absolute;
  top: 0px;
  left: 0px;
  bottom: 0;
  right: 0;
}
.scrollbar .ScrollbarsCustom-Content {
  box-sizing: border-box;
  display: block !important;
}
.scrollbar__thumb {
  opacity: 0.4;
  background-color: var(--G-5, #9B9C9E);
  cursor: pointer;
  border-radius: 5px;
  position: relative;
  transition: opacity 150ms ease-out;
}
.scrollbar__thumb:hover {
  opacity: 0.6;
  transition: opacity 200ms ease-in;
}
.scrollbar__thumb--Y {
  height: 0;
  right: 0px;
  width: 8px;
}
.scrollbar__thumb--X {
  bottom: 0;
  height: 8px;
  width: 0;
}
.scrollbar__track {
  background-color: transparent;
  overflow: hidden;
  position: absolute;
  border-radius: 4px;
  user-select: none;
  right: 0;
}
.scrollbar__track--Y {
  height: 100%;
  right: 0;
  top: 0;
  width: 8px;
}
.scrollbar__track--X {
  bottom: 0;
  height: 8px;
  left: 0;
  width: 100%;
}
.scrollbar--show-on-hover .scrollbar__track--Y,
.scrollbar--show-on-hover .scrollbar__track--X {
  opacity: 0;
  transition: opacity 150ms ease-out;
}
.scrollbar--show-on-hover:hover .scrollbar__track--Y,
.scrollbar--show-on-hover:hover .scrollbar__track--X {
  opacity: 1;
  transition: opacity 200ms ease-in;
}

.base-avatar {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}
.base-avatar:before {
  content: "";
  z-index: 1;
  position: absolute;
  top: 2px;
  left: 2px;
  right: 2px;
  bottom: 2px;
  display: block;
  border: 1px solid var(--G-0, #FFFFFF);
  border-radius: 50%;
}
.base-avatar__status {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  width: 12px;
  height: 12px;
  border: 2px solid var(--G-0, #FFFFFF);
  border-radius: 50%;
}
.base-avatar__image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
}
.base-avatar__initials {
  font-weight: 700;
  line-height: 100%;
  color: currentColor;
  text-transform: uppercase;
  overflow: hidden;
}
.base-avatar__button {
  display: none;
  position: absolute;
  color: white;
  left: -3px;
  top: -3px;
  width: 12px;
  height: 12px;
  z-index: 1;
}
.base-avatar:hover {
  z-index: 1;
}
.base-avatar:hover .base-avatar__button {
  display: flex;
}
.base-avatar.is-clickable {
  cursor: pointer;
}
.base-avatar--online .base-avatar__status {
  background-color: #3EAC40;
}
.base-avatar--offline .base-avatar__status {
  background-color: #FF5757;
}
.base-avatar--size-xxxxl {
  width: 200px;
  height: 200px;
}
.base-avatar--size-xxxxl:after {
  display: none;
}
.base-avatar--size-xxxxl .base-avatar__initials {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 6px;
  font-size: 96px;
}
.base-avatar--size-xxxxl .base-avatar__status {
  top: 17px;
  right: 28px;
}
.base-avatar--size-xxxl {
  height: 112px;
  width: 112px;
}
.base-avatar--size-xxxl:after {
  display: none;
}
.base-avatar--size-xxxl .base-avatar__initials {
  font-size: 44px;
}
.base-avatar--size-xxxl .base-avatar__status {
  top: 8px;
  right: 14px;
}
.base-avatar--size-xxl {
  width: 88px;
  min-width: 88px;
  height: 88px;
}
.base-avatar--size-xxl:before {
  display: none;
}
.base-avatar--size-xxl .base-avatar__initials {
  font-size: 40px;
}
.base-avatar--size-xxl .base-avatar__status {
  top: 10px;
  right: 5px;
}
.base-avatar--size-xl {
  width: 64px;
  min-width: 64px;
  height: 64px;
}
.base-avatar--size-xl .base-avatar__initials {
  font-size: 20px;
}
.base-avatar--size-xl .base-avatar__status {
  top: 7px;
  right: -2px;
}
.base-avatar--size-l {
  width: 44px;
  min-width: 44px;
  height: 44px;
}
.base-avatar--size-l .base-avatar__initials {
  font-size: 15px;
}
.base-avatar--size-l .base-avatar__status {
  top: 2px;
}
.base-avatar--size-l.is-invited {
  background-color: var(--G-7, #6F7173);
}
.base-avatar--size-m-2 {
  width: 32px;
  min-width: 32px;
  height: 32px;
}
.base-avatar--size-m-2:before {
  display: none;
}
.base-avatar--size-m-2 .base-avatar__initials {
  font-size: 12px;
}
.base-avatar--size-m {
  width: 24px;
  min-width: 24px;
  height: 24px;
}
.base-avatar--size-m:before {
  display: none;
}
.base-avatar--size-m .base-avatar__initials {
  font-size: 10px;
}
.base-avatar--size-m .base-avatar__status {
  top: -3px;
  right: -5px;
}
.base-avatar--size-s {
  width: 16px;
  min-width: 16px;
  height: 16px;
}
.base-avatar--size-s:before {
  display: none;
}
.base-avatar--size-s .base-avatar__initials {
  font-size: 8px;
}
.base-avatar--size-s .base-avatar__status {
  top: -1px;
  right: -2px;
  width: 6px;
  height: 6px;
  border-width: 0;
}
.base-avatar--size-member-preview {
  height: 112px;
  min-width: 112px;
  width: 112px;
}
.base-avatar--size-member-preview .base-avatar__initials {
  font-size: 40px;
}
.base-avatar.has-avatar::before {
  display: none;
}

.avatar-invited {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background-color: var(--G-7, #6F7173);
}
.avatar-invited--size-m {
  background-color: var(--G-2, #DEDEDE);
}

.avatar-pill {
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  padding-right: 12px;
  background-color: var(--G-0, #FFFFFF);
  height: 26px;
  border-radius: calc(26px / 2);
  border: 1px solid var(--G-1-5, #E9E9E9);
  position: relative;
  cursor: pointer;
  color: var(--typo-primary, #2E3538);
  transition: border 150ms ease-out;
}
.avatar-pill--solution-color {
  color: var(--solution-primary-color);
}
.avatar-pill--have-hover:hover {
  color: var(--solution-primary-color);
  border-color: var(--G-4, #B2B2B3);
  transition: border 200ms ease-in;
}
.avatar-pill__avatar {
  margin-right: 6px;
}
.avatar-pill__remove {
  color: var(--G-3, #C7C8C9);
  position: absolute;
  top: 50%;
  margin-top: -8px;
  right: 5px;
  z-index: 5;
}
.avatar-pill__remove:hover {
  color: #FF5757;
}
.avatar-pill--removable {
  padding-right: 26px;
}
.avatar-pill.is-active {
  color: var(--solution-primary-color);
}
.avatar-pill--removable-on-hover {
  transition: border 150ms ease-out , padding 150ms ease-out;
  padding-right: 0;
}
.avatar-pill--removable-on-hover .avatar-pill__avatar {
  margin-right: 0;
  position: relative;
  left: 1px;
  z-index: 1;
  line-height: 1;
}
.avatar-pill--removable-on-hover .avatar-pill__name {
  overflow: hidden;
  background-color: var(--G-0, #FFFFFF);
  border: 1px solid var(--G-1-5, #E9E9E9);
  border-radius: 26px;
  min-height: 26px;
  max-height: 26px;
  line-height: 26px;
  padding-left: 32px;
  padding-right: 12px;
  margin-left: -24px;
  position: relative;
  max-width: 100%;
  transition: all 200ms ease-out;
  width: auto;
}
.avatar-pill--removable-on-hover .avatar-pill__remove {
  right: -8px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
}
.avatar-pill--removable-on-hover:hover {
  box-shadow: inset 2px 0 0 1px var(--G-1-5, #E9E9E9);
  z-index: 2;
  transition: box-shadow 200ms ease-in;
}
.avatar-pill--removable-on-hover:hover .avatar-pill__remove {
  opacity: 1;
  pointer-events: auto;
}
.avatar-pill--removable-on-hover:hover .avatar-pill__name {
  border-radius: 13px 0 0 13px;
  border-right-color: var(--G-0, #FFFFFF);
  transition: border-radius 200ms ease-in;
}
.avatar-pill--removable-on-hover:hover p {
  box-shadow: 2px 0 0 2px var(--G-0, #FFFFFF);
}
.avatar-pill--removable-on-hover:hover .avatar-pill__overlay {
  opacity: 1;
}
.avatar-pill--removable-on-hover:hover .avatar-pill__overlay::before {
  transform: translateX(-2px);
  box-shadow: inset 0 0 0 1px var(--G-3, #C7C8C9), 2px 0 0 0 var(--G-0, #FFFFFF);
  transition: transform 200ms ease-in , box-shadow 200ms ease-in;
}
.avatar-pill__overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: -16px;
  overflow: hidden;
  bottom: 0;
  border-radius: 13px;
  z-index: -1;
  color: var(--G-0, #FFFFFF);
  opacity: 0;
}
.avatar-pill__overlay:before {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: 13px;
  transform: translateX(-13px);
  transition: transform 150ms ease-out;
  background-color: currentColor;
  box-shadow: inset 0 0 0 1px var(--G-3, #C7C8C9), 2px 0 0 0 var(--G-0, #FFFFFF);
}

.r-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background-color: var(--background);
  height: var(--height);
  width: var(--width);
  min-width: var(--min-width);
  padding: var(--side-padding);
  border-radius: var(--border-radius);
  color: var(--text-color);
}
.r-badge:hover {
  background-color: var(--background-hover);
  color: var(--text-color-hover);
}
.r-badge__icon {
  display: flex;
  margin-right: 3px;
}

.react-datepicker-wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
}

.react-datepicker {
  position: relative;
  display: inline-flex;
  background-color: var(--G-0, #FFFFFF);
  font-size: 13px;
  color: var(--typo-primary, #2E3538);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  border: none;
  border-radius: 0;
}
.react-datepicker__header {
  background-color: var(--G-0, #FFFFFF);
  padding: 3px 0 3px 0;
  border-radius: 0;
  border: none;
}
.react-datepicker__day-names {
  display: flex;
  justify-content: center;
  margin-bottom: 0;
  padding: 10px 0 4px;
}
.react-datepicker__day-name {
  width: 30px;
  height: 29px;
  margin: 0 2px;
  text-align: center;
}
.react-datepicker__month {
  margin: 0;
}
.react-datepicker__week {
  display: flex;
  align-items: flex-start;
}
.react-datepicker__week:not(:last-child) {
  padding-bottom: 4px;
}
.react-datepicker__day {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  line-height: 1;
  background-color: transparent;
  margin: 0 2px;
}
.react-datepicker__day:hover {
  background-color: transparent;
}
.react-datepicker__day span {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid transparent;
  cursor: pointer;
  user-select: none;
  color: var(--typo-primary, #2E3538);
}
.react-datepicker__day--keyboard-selected {
  background: transparent;
}
.react-datepicker__day--keyboard-selected span {
  color: var(--typo-primary, #2E3538);
}
.react-datepicker__day--outside-month {
  opacity: 0;
  cursor: default;
  pointer-events: none;
}
.react-datepicker__day--highlighted span, .react-datepicker__day--today span {
  font-weight: 400;
}
.react-datepicker__day--highlighted.react-datepicker__day--in-range span, .react-datepicker__day--today.react-datepicker__day--in-range span {
  border-color: transparent;
}
.react-datepicker__day--focused:not(.react-datepicker__day--in-range) span:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.2;
  background-color: var(--solution-primary-color);
  border-radius: 50%;
  z-index: -1;
  pointer-events: none;
}
.react-datepicker__day:not(.react-datepicker__day--selected):hover span, .react-datepicker__day--highlighted span, .react-datepicker__day--today span {
  border-color: var(--solution-primary-color);
}
.react-datepicker__day--selected span {
  background-color: var(--solution-primary-color);
  border: 2px solid var(--G-0, #FFFFFF);
  box-shadow: 1px 1px 7px 0 rgba(0, 0, 0, 0.12);
  color: var(--G-0, #FFFFFF);
  font-weight: 600;
}
.react-datepicker__day--selected:hover span {
  background-color: var(--solution-primary-color);
}
.react-datepicker__day--selecting-range-start span {
  border: 1px solid var(--G-0, #FFFFFF) !important;
  background-color: var(--solution-primary-color);
  box-shadow: 1px 1px 7px 0 rgba(0, 0, 0, 0.12);
  color: var(--G-0, #FFFFFF);
  font-weight: 600;
}
.react-datepicker__day--selecting-range-start:hover span {
  border: 1px solid var(--G-0, #FFFFFF) !important;
}
.react-datepicker__day--in-range::after {
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  top: 0;
  bottom: 0;
  background-color: var(--solution-secondary-color);
  border-radius: 0;
  z-index: 0;
}
.react-datepicker__day--in-range:not(.react-datepicker__day--range-start):not(.react-datepicker__day--range-end):hover span {
  color: var(--typo-primary, #2E3538);
  border-color: transparent;
}
.react-datepicker__day--in-range.react-datepicker__day--range-end::after, .react-datepicker__day--in-range.react-datepicker__day--range-start::after {
  width: calc(50% + 2px);
}
.react-datepicker__day--in-range.react-datepicker__day--range-end span, .react-datepicker__day--in-range.react-datepicker__day--range-start span {
  border: 1px solid var(--G-0, #FFFFFF);
  background-color: var(--solution-primary-color);
  box-shadow: 1px 1px 7px 0 rgba(0, 0, 0, 0.12);
  color: var(--G-0, #FFFFFF);
  font-weight: 600;
}
.react-datepicker__day--in-range.react-datepicker__day--range-end:hover span, .react-datepicker__day--in-range.react-datepicker__day--range-start:hover span {
  border-color: var(--G-0, #FFFFFF);
}
.react-datepicker__day--in-range.react-datepicker__day--range-start:after {
  left: 50%;
}
.react-datepicker__day--in-range.react-datepicker__day--range-start span {
  border: 1px solid var(--G-0, #FFFFFF);
}
.react-datepicker__day--in-range.react-datepicker__day--range-end:after {
  left: -2px;
}
.react-datepicker__day--in-range.react-datepicker__day--range-start.react-datepicker__day--range-end:after {
  display: none;
}
.react-datepicker--range .react-datepicker__day {
  background-color: transparent !important;
}

.calendar-footer-group {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 15px 0 18px;
  border-top: 1px solid var(--G-1-6, #E8E8E8);
}
.calendar-footer-group__cancel-button, .calendar-footer-group__done-button {
  justify-content: center;
}
.calendar-footer-group__cancel-button {
  margin-right: 18px;
  min-width: 116px;
}
.calendar-footer-group__done-button {
  min-width: 128px;
}

.calendar-header-navigation {
  position: relative;
  display: flex;
  justify-content: center;
}
.calendar-header-navigation__button {
  position: absolute;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-top: -14px;
  color: var(--ic-light, #c7cdcf);
}
.calendar-header-navigation__button:hover {
  color: var(--solution-highlight-color);
}
.calendar-header-navigation__button--prev {
  left: -6px;
}
.calendar-header-navigation__button--next {
  right: -6px;
}

.date-calendar-dropdown-header {
  padding: 20px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  background-color: var(--solution-primary-color);
  border-radius: 5px 5px 0 0;
  color: var(--G-0, #FFFFFF);
}
.date-calendar-dropdown-header__day {
  opacity: 0.6;
}
.date-calendar-dropdown-header__date-text {
  width: 100%;
  font-size: 28px;
  line-height: 34px;
  text-align: center;
}
.date-calendar-dropdown-header__select-date-text {
  width: 100%;
  text-align: center;
}

.due-date-calendar-view__calendar {
  padding-top: 18px;
  padding-bottom: 25px;
  position: relative;
  z-index: 2;
  background-color: var(--G-0, #FFFFFF);
}

.due-date-calendar {
  display: inline-flex;
  width: 100%;
  height: 100%;
}

.due-date-calendar-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 10px;
}

.due-date-calendar-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  border-top: 1px solid var(--G-1-6, #E8E8E8);
  height: 48px;
  position: relative;
  z-index: 1;
}
.due-date-calendar-footer__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.due-date-calendar-footer__cancel-button {
  font-size: 12px;
  padding: 0 12px;
}
.due-date-calendar-footer__time {
  color: var(--solution-primary-color);
  min-width: 28px;
  width: 28px;
  height: 28px;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: transparent;
  border: 1px solid transparent;
  position: relative;
}
.due-date-calendar-footer__time::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  border-radius: 5px;
  border: 1px solid transparent;
  transition: border-color 150ms ease-out , opacity 150ms ease-out;
}
.due-date-calendar-footer__time:hover:before {
  border-color: var(--solution-primary-color);
  opacity: 0.4;
}
.due-date-calendar-footer__time.is-active {
  background-color: var(--solution-secondary-color);
}
.due-date-calendar-footer__time.is-active:before {
  border-color: var(--solution-primary-color);
  opacity: 0.7;
}

.due-date-calendar-header {
  background-color: var(--solution-primary-color);
  border-radius: 5px 5px 0 0;
  position: relative;
  z-index: 1;
}
.due-date-calendar-header__title {
  padding: 9px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.14);
  text-align: center;
  color: var(--G-0, #FFFFFF);
}
.due-date-calendar-header__selection-groups {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
  background-color: var(--solution-primary-color);
  overflow: hidden;
  border-radius: 5px;
}
.due-date-calendar-header__selection-groups:before {
  content: "";
  position: absolute;
  left: 50%;
  display: block;
  z-index: 1;
  opacity: 0.3;
  width: 72px;
  height: 100%;
  background: linear-gradient(-115deg, var(--solution-hover-color), var(--solution-primary-color) 80%);
  transform: translateX(-85%) rotate(45deg) skew(20deg, 20deg);
}
.due-date-calendar-header.is-time-enabled .due-date-calendar-header__selection-groups:before {
  width: 94px;
  transform: translateX(-90%) rotate(45deg) skew(20deg, 20deg);
}

.due-date-calendar-range-selection {
  z-index: 2;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 50%;
  height: 100%;
  padding: 10px;
}
.due-date-calendar-range-selection__inner {
  text-align: center;
  cursor: pointer;
}
.due-date-calendar-range-selection__date-value {
  width: 110px;
  font-size: 16px;
  height: 28px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 5px;
  text-align: center;
  line-height: 28px;
  padding: 0 5px;
}
.due-date-calendar-range-selection__placeholder-button {
  color: var(--G-0, #FFFFFF);
  opacity: 0.6;
  font-size: 11px;
  padding: 0 16px;
  height: 22px;
  font-weight: 500;
  line-height: 22px;
}
.due-date-calendar-range-selection__placeholder-button:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 5px;
  border: 1px dashed var(--G-1, #F3F3F4);
  opacity: 0.3;
}
.due-date-calendar-range-selection__title {
  margin-bottom: 4px;
}
.due-date-calendar-range-selection__input {
  width: 130px;
  position: relative;
  outline: 2px solid rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.4);
  height: 28px;
}
.due-date-calendar-range-selection__input input {
  padding-right: 25px;
  background-color: rgba(0, 0, 0, 0.1);
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  height: 26px !important;
  color: var(--G-0, #FFFFFF);
}
.due-date-calendar-range-selection__input input::placeholder {
  color: rgba(255, 255, 255, 0.35);
}
.due-date-calendar-range-selection__input-clear {
  color: var(--G-0, #FFFFFF);
  opacity: 0.3;
  height: 26px;
  transition: opacity 150ms ease-out;
}
.due-date-calendar-range-selection__input-clear:hover {
  color: var(--G-0, #FFFFFF) !important;
  opacity: 1;
  transition: opacity 200ms ease-in;
}
.due-date-calendar-range-selection__time-group {
  margin-top: 3px;
}
.due-date-calendar-range-selection.is-empty-date-value .due-date-calendar-range-selection__input input {
  padding-right: 10px;
}

.due-date-time-placeholder {
  height: 22px;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  padding: 0 10px;
  margin-top: 4px;
  opacity: 0.6;
  line-height: 22px;
}
.due-date-time-placeholder:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 1px dashed var(--G-0, #FFFFFF);
  opacity: 0.3;
  border-radius: 5px;
}

.due-date-time-value {
  height: 22px;
  background-color: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 110px;
  margin-top: 4px;
  border-radius: 5px;
}

.due-date-time-picker {
  gap: 0 !important;
  position: relative;
}
.due-date-time-picker .icon-button {
  position: absolute;
  top: 7px;
  right: 6px;
  color: var(--G-0, #FFFFFF) !important;
  opacity: 0.3;
}
.due-date-time-picker .icon-button:hover {
  opacity: 1;
}
.due-date-time-picker .react-input-group {
  margin-top: 4px;
  border: none;
  height: 22px;
  min-height: 22px;
  background-color: rgba(255, 255, 255, 0.1);
}
.due-date-time-picker .react-input-group input {
  height: 22px !important;
  color: var(--G-0, #FFFFFF);
  padding-right: 22px;
}
.due-date-time-picker .react-input-group input::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

.date-calendar-dropdown__calendar {
  padding-top: 18px;
  padding-bottom: 25px;
}
.date-calendar-dropdown__calendar .react-datepicker__day-name {
  text-transform: capitalize;
}

.emoji-category-bar__char {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  width: 32px;
  height: 32px;
  cursor: pointer;
  filter: grayscale(1);
  opacity: 0.5;
}
.emoji-category-bar__char--selected {
  filter: none;
  opacity: 1;
}
.emoji-category-bar__char:hover {
  filter: none;
}

.emoji-preview {
  display: flex;
  align-items: center;
  padding: 12px;
  background: var(--emoji-preview-background-color, var(--G-0-5, #FAFAFA));
  border-top: 1px solid var(--emoji-preview-border-top-color, var(--G-1-5, #E9E9E9));
}
.emoji-preview__char {
  font-size: 27px;
  margin-right: 12px;
}
.emoji-preview__title {
  max-width: 240px;
}

.emoji-list {
  padding: 10px;
  overflow: auto;
  height: 210px;
}
.emoji-list__category {
  margin-bottom: 5px;
}
.emoji-list__category-name {
  margin-top: 9px;
}
.emoji-list__category-content {
  display: flex;
  flex-wrap: wrap;
}
.emoji-list__emoji-char {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  cursor: pointer;
  border-radius: 5px;
  width: 34px;
  height: 34px;
  margin-right: 2px;
  margin-bottom: 1px;
}
.emoji-list__emoji-char:hover, .emoji-list__emoji-char--selected {
  background: var(--emoji-list-char-active, var(--G-1-5, #E9E9E9));
}

.emoji-picker {
  width: 310px;
  background: var(--emoji-picker-background-color, var(--G-0, #FFFFFF));
  border: 1px solid var(--emoji-picker-border-color, var(--G-1-5, #E9E9E9));
  border-radius: 5px;
  box-shadow: var(--emoji-picker-box-shadow, 0 2px 6px rgba(0, 0, 0, 0.066));
  overflow: hidden;
}
.emoji-picker__category-bar {
  border-bottom: 1px solid var(--emoji-picker-category-bar-color, var(--G-1-5, #E9E9E9));
  padding: 5px;
}
.emoji-picker__search.react-input-field {
  margin: 5px;
  width: auto;
}

.field-type-pill {
  display: inline-flex;
  align-items: center;
  height: 24px;
  max-width: 400px;
  border: 1px solid var(--solution-secondary-color);
  padding: 0 8px;
  border-radius: 4px;
  background-color: var(--solution-secondary-color);
  color: var(--typo-primary, #2E3538);
  transition: border-color 150ms ease-out;
}
.field-type-pill.is-selected {
  border-color: var(--solution-primary-color);
}
.field-type-pill.is-disabled {
  border-color: var(--G-1-5, #E9E9E9);
  background-color: var(--G-0-5, #FAFAFA);
  color: var(--G-6, #868788);
}
.field-type-pill.is-disabled .field-type-pill__icon {
  fill: var(--G-4, #B2B2B3);
}
.field-type-pill.is-error {
  border-color: #FFC7E7;
  background-color: #FFC7E7;
}
.field-type-pill__icon {
  margin-right: 7px;
  fill: var(--solution-primary-color);
}
.field-type-pill__avatar {
  margin-right: 7px;
}
.field-type-pill__remove {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 14px;
  height: 14px;
  margin: 0 -4px 0 7px;
  color: rgba(77, 77, 77, 0.7);
  cursor: pointer;
}
.field-type-pill__remove:hover {
  color: #FF5757;
}

.field-type-pills-list {
  display: flex;
  flex-wrap: wrap;
}
.field-type-pills-list__item {
  margin: 0 6px 4px 0;
}
.field-type-pills-list__more {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 8px;
}
.field-type-pills-list__more .icon {
  margin-right: 7px;
}
.field-type-pills-list__more:hover {
  color: var(--solution-hover-color);
}

.pill {
  height: var(--r-pill-height);
  position: relative;
  display: inline-flex;
  cursor: pointer;
  border-radius: var(--r-border-radius-default);
  color: var(--r-color-default);
  overflow: var(--r-pill-overflow, visible);
  transition: color 150ms ease-out;
}
.pill__in {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: var(--r-pill-justify-content, center);
  border-radius: inherit;
  border: 1px solid var(--r-border-default);
  background-color: var(--r-background-default);
  padding: 0 10px;
  padding-left: var(--r-padding);
  transition: background-color 150ms ease-out , border-color 150ms ease-out , border-radius 150ms ease-out;
}
.pill__dot {
  color: var(--solution-primary-color);
  margin-right: 6px;
  min-width: 12px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
}
.pill__icon {
  color: var(--solution-primary-color);
  margin-right: 6px;
  display: flex;
}
.pill__remove {
  color: var(--r-remove-button-color);
  position: absolute;
  top: 50%;
  margin-top: -8px;
  right: 5px;
}
.pill__remove:hover {
  color: var(--r-remove-button-color-hover);
}
.pill:hover {
  color: var(--r-color-hover);
  transition: color 200ms ease-in;
}
.pill:hover .pill__in {
  border-color: var(--r-border-hover);
  background-color: var(--r-background-hover);
  transition: background-color 200ms ease-in , border-color 200ms ease-in , border-radius 200ms ease-in;
}
.pill.is-active {
  color: var(--r-color-active);
  transition: color 200ms ease-in;
}
.pill--removable .pill__in {
  padding-right: 26px;
}
.pill--removable.pill--animated-remove::before, .pill--removable.pill--animated-remove::after {
  content: "";
  width: 100%;
  height: var(--r-pill-height);
  position: absolute;
  top: 0;
  left: 0;
  background-color: inherit;
  z-index: -1;
  border-radius: inherit;
  border: 1px solid transparent;
  transform-origin: 0 50%;
  transition: transform 150ms ease-out , border-color 150ms ease-out;
}
.pill--removable.pill--animated-remove::before {
  background-color: var(--G-0, #FFFFFF);
  left: 2px;
}
.pill--removable.pill--animated-remove::after {
  background-color: var(--r-background-default);
  border-color: var(--r-border-default);
}
.pill--removable.pill--animated-remove .pill__remove {
  right: -10px;
  opacity: 0;
  pointer-events: none;
}
.pill--removable.pill--animated-remove.pill--removable .pill__in {
  padding-right: 10px;
}
.pill--removable.pill--animated-remove:hover {
  z-index: 2;
}
.pill--removable.pill--animated-remove:hover .pill__in {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right-color: transparent;
}
.pill--removable.pill--animated-remove:hover::before, .pill--removable.pill--animated-remove:hover::after {
  transform: translateX(15px);
  transition: transform 200ms ease-in , border-color 200ms ease-in;
}
.pill--removable.pill--animated-remove:hover::after {
  background-color: var(--r-background-hover);
  border-color: var(--r-border-hover);
}
.pill--removable.pill--animated-remove:hover .pill__remove {
  opacity: 1;
  pointer-events: auto;
  transition: opacity 200ms ease-in;
}
.multiple-select-field-control--linked-card .pill, .single-select-field-control--linked-card .pill {
  height: 24px;
}
.pill--ellipsis {
  max-width: 100%;
}

.editable-pill {
  display: inline-flex;
  align-items: center;
  padding: 0 8px 0 10px;
  margin-right: 4px;
  margin-bottom: 4px;
  height: 26px;
  max-width: calc(100% - 6px);
  background-color: var(--G-0-5, #FAFAFA);
  border: 1px solid var(--G-2, #DEDEDE);
  border-radius: 46px;
}
.editable-pill__input {
  background-color: transparent;
  min-width: 6px;
}
.editable-pill__label {
  margin-right: 4px;
  color: var(--solution-primary-color);
  transition: color 150ms ease-out;
}
.editable-pill__label:hover {
  color: var(--solution-hover-color);
  transition: color 200ms ease-in;
}
.editable-pill.is-active {
  border-color: var(--G-5, #9B9C9E);
}
.editable-pill.is-error {
  background-color: rgba(254, 236, 238, 0.2);
  border-color: #FF5757;
}
.editable-pill.is-error .editable-pill__label {
  color: var(--typo-primary, #2E3538);
}

.select-pill {
  display: flex;
  align-items: center;
  max-width: 100%;
}
.select-pill__icon {
  display: flex;
  margin-right: 7px;
}
.select-pill__text {
  overflow: hidden;
}
.select-pill__emoji {
  display: inline-block;
  width: auto;
  height: auto;
  font-size: 16px;
  min-width: 18px;
  margin-right: 7px;
}

.two-month-calendar-header-navigation {
  display: flex;
  width: 100%;
  height: 24px;
  position: relative;
  justify-content: center;
  margin: 25px 0 15px;
}
.two-month-calendar-header-navigation__month {
  line-height: 24px;
}
.two-month-calendar-header-navigation__button {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 32px;
}
.two-month-calendar-header-navigation__button--prev {
  left: 0;
}
.two-month-calendar-header-navigation__button--next {
  right: 0;
}

.two-month-date-picker .react-datepicker__header {
  padding: 0;
}
.two-month-date-picker .react-datepicker__month-container {
  padding: 0 10px 10px;
}
.two-month-date-picker .react-datepicker__month-container:not(:last-child) {
  border-right: 1px solid var(--G-1-6, #E8E8E8);
}
.two-month-date-picker .react-datepicker__day-name {
  width: 41px;
  height: 30px;
  color: var(--typo-secondary, #878B92);
}
.two-month-date-picker .react-datepicker__day {
  width: 41px;
  height: 41px;
  border-radius: 50%;
  font-size: 13px;
  border: 1px solid transparent;
  cursor: pointer;
}
.two-month-date-picker .react-datepicker__day:hover:not(.two-month-date-picker .react-datepicker__day--today, .two-month-date-picker .react-datepicker__day--selected, .two-month-date-picker .react-datepicker__day--in-range) {
  border-color: var(--G-2, #DEDEDE);
}
.two-month-date-picker .react-datepicker__day:hover {
  font-weight: 500;
}
.two-month-date-picker .react-datepicker__day--in-selecting-range, .two-month-date-picker .react-datepicker__day--keyboard-selected {
  color: inherit;
  background-color: inherit;
}
.two-month-date-picker .react-datepicker__day--today {
  border-color: var(--G-2, #DEDEDE);
  font-weight: 500;
}
.two-month-date-picker .react-datepicker__day--selected {
  border-color: var(--solution-primary-color);
  background-color: var(--solution-primary-color);
  font-weight: 500;
  color: var(--G-0, #FFFFFF);
}
.two-month-date-picker .react-datepicker__day--selected:hover {
  color: var(--G-0, #FFFFFF);
  border-color: var(--solution-primary-color);
  background-color: var(--solution-primary-color);
}
.two-month-date-picker .react-datepicker__day--in-range {
  border-color: var(--solution-primary-color);
  z-index: 1;
  color: var(--G-0, #FFFFFF);
  font-weight: 500;
  background-color: var(--solution-primary-color);
}
.two-month-date-picker .react-datepicker__day--in-range:after {
  background-color: var(--solution-primary-color);
  z-index: -1;
  top: -1px;
  bottom: -1px;
  left: -3px;
  right: -3px;
}
.two-month-date-picker .react-datepicker__day--in-range:hover {
  background-color: var(--solution-primary-color);
}
.two-month-date-picker .react-datepicker__day--range-end:after {
  left: -4px;
}
.two-month-date-picker .react-datepicker__day--range-start:after {
  left: auto;
  right: -4px;
}
.two-month-date-picker .react-datepicker__day--range-start:before, .two-month-date-picker .react-datepicker__day--range-end:before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border: 1px solid var(--G-0, #FFFFFF);
  border-radius: 50%;
}
.two-month-date-picker .react-datepicker__day--in-range.react-datepicker__day--range-start.react-datepicker__day--range-end:after {
  display: none;
}
.two-month-date-picker .react-datepicker__day--in-range.react-datepicker__day--range-start:after {
  width: calc(50% + 3px);
}
.two-month-date-picker .react-datepicker__day--in-range.react-datepicker__day--range-end:after {
  left: -3px;
}

.pro-plan-label {
  align-items: center;
  background-color: #FFF2DC;
  border-radius: 10px;
  border: 1px solid rgba(255, 185, 56, 0.5);
  display: inline-flex;
  height: 20px;
  min-width: 49px;
  padding: 0px 5px 0px 8px;
}
.pro-plan-label__icon {
  margin-left: 4px;
}

.emoji-dropdown__picker.emoji-picker {
  width: 100%;
}

.time-picker {
  margin: 0 10px;
  display: flex;
  gap: 10px;
}
.time-picker__dropdown {
  --menu-option-height: 28px;
}
.time-picker__scrollbar {
  max-height: 200px;
}

.time-picker-option {
  height: 28px;
  display: flex;
  align-items: center;
  padding: 0 10px;
}

.calendar-dropdown {
  padding: 10px 12px;
  border-radius: 5px;
}
.calendar-dropdown__panel {
  padding-bottom: 12px;
}

.color-picker-pill {
  position: relative;
  display: inline-block;
  height: 22px;
  padding-right: 8px;
  padding-left: 30px;
  background-color: var(--G-1-5, #E9E9E9);
  border-radius: 5px;
  line-height: 22px;
  flex-shrink: 0;
}
.color-picker-pill:before {
  content: " ";
  position: absolute;
  top: 1px;
  left: 1px;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  background-color: var(--colorpicker-pill-color);
}
.color-picker-pill__clear {
  position: absolute;
  top: 50%;
  right: 2px;
  background-color: var(--G-1-5, #E9E9E9);
  transform: translateY(-50%);
}
.color-picker-pill.is-removable {
  padding-right: 20px;
}
.color-picker-pill--clear-on-hover.is-removable {
  padding-right: 8px;
  transition: padding-right 150ms ease-out;
}
.color-picker-pill--clear-on-hover.is-removable .color-picker-pill__clear {
  opacity: 0;
  transition: opacity 150ms ease-out;
}
.color-picker-pill--clear-on-hover.is-removable:hover {
  padding-right: 20px;
  transition: padding-right 200ms ease-in;
}
.color-picker-pill--clear-on-hover.is-removable:hover .color-picker-pill__clear {
  opacity: 1;
  transition: opacity 200ms ease-in;
}

.color-picker-dropdown__wrapper {
  position: relative;
  padding: 10px;
}
.color-picker-dropdown__mixer {
  display: flex;
  align-items: stretch;
  padding-bottom: 22px;
  margin-bottom: 10px;
}
.color-picker-dropdown__preview {
  width: 90px;
  margin-right: 1px;
}
.color-picker-dropdown .react-colorful {
  position: static;
  flex-grow: 1;
  height: 152px;
  width: auto;
}
.color-picker-dropdown .react-colorful__saturation, .color-picker-dropdown .react-colorful__last-control {
  border-radius: 0;
}
.color-picker-dropdown .react-colorful__hue {
  position: absolute;
  top: 170px;
  left: 10px;
  right: 10px;
  height: 10px;
}
.color-picker-dropdown .react-colorful__saturation-pointer {
  width: 10px;
  height: 10px;
  border: 1px solid var(--G-0, #FFFFFF);
}
.color-picker-dropdown .react-colorful__hue-pointer {
  width: 16px;
  height: 16px;
  border: 4px solid var(--G-0, #FFFFFF);
}
.color-picker-dropdown__inputs {
  display: grid;
  grid-template-columns: 25% 1fr 40%;
  grid-gap: 10px;
}
.color-picker-dropdown__input {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.color-picker-dropdown__name-input {
  display: flex;
  flex-direction: column;
  gap: 4px;
  grid-column-start: 1;
  grid-column-end: 4;
}

.hashtag-pill {
  position: relative;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  line-height: 26px;
  height: 26px;
  background-color: var(--G-1-5, #E9E9E9);
  border-radius: 4px;
  color: var(--typo-primary, #2E3538);
  transition: background-color 150ms ease-out;
}
.hashtag-pill__icon {
  margin-right: 7px;
  background-image: url("data:image/svg+xml,%3Csvg width='16px' height='16px' viewBox='0 0 16 16' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cpath d='M10.1913344,4.02859512 L11.1476392,4.32096683 L10.634,5.99959512 L13,6 L13,7 L10.328,6.99959512 L9.716,8.99959512 L12,9 L12,10 L9.411,9.99959512 L8.80866556,11.9714049 L7.8523608,11.6790332 L8.365,9.99959512 L6.411,9.99959512 L5.80866556,11.9714049 L4.8523608,11.6790332 L5.365,9.99959512 L3,10 L3,9 L5.671,8.99959512 L6.283,6.99959512 L4,7 L4,6 L6.588,5.99959512 L7.19133444,4.02859512 L8.1476392,4.32096683 L7.634,5.99959512 L9.588,5.99959512 L10.1913344,4.02859512 Z M9.283,6.99959512 L7.328,6.99959512 L6.716,8.99959512 L8.671,8.99959512 L9.283,6.99959512 Z'%3E%3C/path%3E%3C/svg%3E");
  width: 16px;
  height: 16px;
  transition: opacity 150ms ease-out;
}
.hashtag-pill__remove {
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity 150ms ease-out;
}
.hashtag-pill:hover {
  background-color: var(--G-2, #DEDEDE);
  transition: background-color 200ms ease-in;
}
.hashtag-pill.is-disabled {
  cursor: default;
}
.hashtag-pill.is-disabled:hover {
  background-color: var(--G-1-5, #E9E9E9);
}
.hashtag-pill--remove:hover {
  background-color: var(--G-2, #DEDEDE);
  transition: background-color 200ms ease-in;
}
.hashtag-pill--remove:hover .hashtag-pill__icon {
  opacity: 0;
  transition: opacity 200ms ease-in;
}
.hashtag-pill--remove:hover .hashtag-pill__remove {
  opacity: 1;
  transition: opacity 200ms ease-in;
}

@keyframes circle-loader-spinning {
  to {
    transform: rotate(360deg);
  }
}
.circle-loader-icon {
  display: inline-flex;
  animation: circle-loader-spinning 1s infinite linear;
}

.loading-detail-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 27px;
  border-radius: 10px;
  background-color: var(--G-0, #FFFFFF);
  box-shadow: 1px 1px 7px 0 rgba(0, 0, 0, 0.12);
}
.loading-detail-panel__icon {
  color: var(--G-4, #B2B2B3);
  animation: spin 1s infinite linear;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.loading-detail-panel__title {
  margin-top: 18px;
}
.loading-detail-panel__description {
  margin-top: 4px;
}

.scroll-controller {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.scroll-controller.is-scrolling {
  z-index: 7;
}

.results-not-found {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
}
.results-not-found__image--gutter {
  margin-bottom: 22px;
}
.results-not-found__title {
  margin-bottom: 8px;
}
.results-not-found__description {
  color: var(--typo-secondary, #878B92);
  text-align: center;
}
.results-not-found__link {
  margin-top: 20px;
}

.danger-alert {
  position: relative;
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 8px 15px;
}
.danger-alert::before {
  content: " ";
  opacity: 0.5;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #FEECEE;
  border-radius: 8px;
  pointer-events: none;
}
.danger-alert__icon {
  position: relative;
  color: #FF5757;
}
.danger-alert__body {
  position: relative;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 4px;
}

.upgrade-plan-warning {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 8px;
  background-color: #FFF2DC;
}
.upgrade-plan-warning__icon {
  color: #FFB938;
}
.upgrade-plan-warning__body {
  flex-grow: 1;
  font-size: 13px;
  line-height: 18px;
}
.upgrade-plan-warning__actions {
  flex-shrink: 0;
  margin-left: auto;
}

.faq-accordion-item {
  align-self: flex-start;
  width: 100%;
  border: 1px solid var(--G-1-5, #E9E9E9);
  border-radius: 8px;
  transition: border-color 150ms ease-out;
}
.faq-accordion-item.is-active .faq-accordion-item__arrow {
  opacity: 1;
  transform: rotate(180deg);
  transition: transform 200ms ease-in , opacity 200ms ease-in;
}
.faq-accordion-item:not(.is-active):hover {
  border-color: var(--G-3, #C7C8C9);
  transition: border-color 200ms ease-in;
}
.faq-accordion-item:not(.is-active):hover .faq-accordion-item__title {
  opacity: 1;
  transition: opacity 200ms ease-in;
}
.faq-accordion-item__head {
  display: flex;
  gap: 15px;
  width: 100%;
  padding: 11px 20px 12px;
  cursor: pointer;
  text-align: left;
}
.faq-accordion-item__title {
  opacity: 0.9;
  transition: opacity 150ms ease-out;
}
.faq-accordion-item__arrow {
  opacity: 0.6;
  margin-top: 5px;
  margin-left: auto;
  color: var(--G-8, #4d4d4d);
  transition: transform 150ms ease-out , opacity 150ms ease-out;
}
.faq-accordion-item__content {
  overflow: hidden;
  padding: 0 20px 12px 20px;
  font-size: 14px;
  line-height: 22px;
}

.faq-lists-item {
  align-self: flex-start;
}
.faq-lists-item__content {
  padding-top: 10px;
  font-size: 14px;
  line-height: 22px;
}

.faq-lists-table-item {
  display: flex;
  align-items: flex-start;
  gap: 30px;
}
.faq-lists-table-item:not(:last-child) {
  margin-bottom: 20px;
  border-bottom: 1px solid var(--G-1-5, #E9E9E9);
  padding-bottom: 20px;
}
.faq-lists-table-item__title {
  width: 40%;
}
.faq-lists-table-item__content {
  width: 60%;
  font-size: 14px;
  line-height: 22px;
}

.warning-info {
  position: relative;
  display: flex;
  gap: 10px;
  padding: 10px;
  border-radius: 8px;
}
.warning-info::before, .warning-info::after {
  content: " ";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: inherit;
  pointer-events: none;
}
.warning-info::before {
  opacity: 0.5;
  background-color: #FFF2DC;
}
.warning-info::after {
  opacity: 0.3;
  border: 1px solid #FFB938;
}
.warning-info__icon {
  position: relative;
  color: #FFB938;
}
.warning-info__body {
  position: relative;
  font-size: 12px;
  line-height: 18px;
  color: var(--tertiary, #6B6B6B);
}

.basic-tabs {
  display: flex;
  position: relative;
}
.basic-tabs--center {
  justify-content: center;
}
.basic-tabs--left {
  justify-content: flex-start;
}
.basic-tabs--line {
  border-bottom: 1px solid;
}
.basic-tabs--line.basic-tabs--large {
  border-color: var(--G-2, #DEDEDE);
}
.basic-tabs--line.basic-tabs--small {
  border-color: var(--G-1-5, #E9E9E9);
}

.r-basic-tab {
  display: flex;
  align-items: center;
  position: relative;
  cursor: pointer;
  padding-bottom: 6px;
  z-index: 3;
  color: var(--typo-secondary, #878B92);
}
.r-basic-tab svg {
  margin-right: 5px;
}
.r-basic-tab:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
}
.r-basic-tab__badge {
  margin-top: -1px;
  margin-left: 5px;
}
.r-basic-tab__indicator {
  position: relative;
  width: 4px;
  height: 4px;
  border-radius: 5px;
  background-color: #F1273F;
}
.r-basic-tab:hover {
  color: var(--typo-primary, #2E3538);
}
.r-basic-tab.is-active {
  color: var(--typo-primary, #2E3538);
}
.r-basic-tab--large {
  padding: 10px 0;
  z-index: 1;
}
.r-basic-tab--large:before {
  left: -15px;
  right: -15px;
}
.r-basic-tab--large:not(:last-child) {
  margin-right: 30px;
}
.r-basic-tab--middle {
  padding: 13px 0;
}
.r-basic-tab--middle:before {
  left: -15px;
  right: -15px;
}
.r-basic-tab--middle:not(:last-child) {
  margin-right: 30px;
}
.r-basic-tab--small {
  padding: var(--basic-tab-small-paddings, 13px 0);
  position: relative;
}
.r-basic-tab--small:after, .r-basic-tab--small:before {
  width: 10px;
  height: 100%;
  position: absolute;
  top: 0;
  content: "";
  z-index: 2;
}
.r-basic-tab--small:after {
  right: -10px;
}
.r-basic-tab--small:before {
  left: -10px;
}
.r-basic-tab--small:first-child:before, .r-basic-tab--small:last-child:after {
  display: none;
}
.r-basic-tab--small:before {
  left: -10px;
  right: -10px;
}
.r-basic-tab--small:not(:last-child) {
  margin-right: var(--basic-tab-small-gap, 20px);
}
.r-basic-tab--small .r-basic-tab__indicator {
  top: -6px;
  right: -2px;
}
.r-basic-tab--view-primary {
  padding-bottom: 9px;
  color: var(--typo-primary, #2E3538);
}
.r-basic-tab--view-primary.is-active {
  color: var(--solution-primary-color);
}
.r-basic-tab--icon {
  padding: 14px 15px;
}
.r-basic-tab--icon:not(:last-child) {
  margin-right: 20px;
}

.basic-tab-slider {
  display: block;
  position: absolute;
  bottom: 0;
  height: 3px;
  transition: width 150ms ease-out , left 150ms ease-out;
  background-color: var(--solution-primary-color);
}
.basic-tab-slider--rounded {
  border-radius: 5px;
}
.basic-tab-slider--large {
  height: 4px;
}
.basic-tab-slider--middle {
  bottom: 8px;
}
.basic-tab-slider--small {
  height: var(--basic-tabs-slider-height, 3px);
  bottom: var(--basic-tabs-slider-small-bottom, 6px);
}

.simple-table {
  overflow: hidden;
  border: 1px solid var(--G-1-5, #E9E9E9);
  border-radius: 8px;
  background-color: var(--G-0, #FFFFFF);
}
.simple-table-row {
  display: flex;
  justify-content: space-between;
}
.simple-table-header {
  border-bottom: 1px solid var(--G-1-5, #E9E9E9);
  background-color: var(--G-0-5, #FAFAFA);
}
.simple-table-header__col {
  padding: 10px 0 10px 15px;
}
.simple-table-header__col:last-child {
  padding-right: 15px;
}
.simple-table-body .simple-table-row {
  position: relative;
}
.simple-table-body .simple-table-row:not(:last-child)::after {
  content: " ";
  position: absolute;
  right: 15px;
  bottom: 0;
  left: 15px;
  height: 1px;
  background-color: var(--G-1-5, #E9E9E9);
}
.simple-table-body__col {
  padding: 12px 0 12px 15px;
}
.simple-table-body__col:last-child {
  padding-right: 15px;
}
.simple-table__empty {
  padding: 12px 15px;
}

.pagination {
  display: flex;
  align-items: center;
  gap: 15px;
  user-select: none;
}
.pagination__arrow {
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--G-8, #4d4d4d);
}
.pagination__arrow[disabled] {
  opacity: 0.3;
  cursor: default;
}
.pagination__list {
  display: flex;
  align-items: center;
  gap: 4px;
}
.pagination__item {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 24px;
  height: 20px;
  padding-right: 8px;
  padding-left: 8px;
  border-radius: 6px;
  color: var(--tertiary, #6B6B6B);
}
.pagination__item:hover {
  color: var(--typo-primary, #2E3538);
}
.pagination__item.is-active {
  background-color: var(--G-1, #F3F3F4);
  color: var(--typo-primary, #2E3538);
}