:root {
  --font-base-size: 14px;
  --line-height-base: 1.43;

  --font-size-xl: 42px;
  --font-weight-xl: 600;
  --font-line-height-xl: 44px;

  --font-size-lg: 28px;
  --font-weight-lg: 600;
  --font-line-height-lg: 32px;

  --font-size-md: 28px;
  --font-weight-md: 400;
  --font-line-height-md: 32px;

  --font-size-xs: 20px;
  --font-weight-xs: 600;
  --font-line-height-xs: 28px;

  --heading-size: 16px;
  --heading-weight: 600;
  --heading-line-height: 24px;

  --subheading-size: 12px;
  --subheading-weight: 600;
  --subheading-line-height: 16px;

  --caption-size: 12px;
  --caption-weight: 400;
  --caption-line-height: 16px;
}
:root {
  --brand: #165bfb;
  --brand-l1: #9ebbff;
  --brand-l2: #bfd2ff;
  --brand-l3: #dee8ff;
  --brand-l4: #eff4ff;
  --brand-d1: #022a87;
  --brand-d2: #011033;
  --brand-d3: #353b48;

  --success: #61a854;
  --success-l1: #8cc781;
  --success-l2: #b9e3b1;
  --success-l3: #def5da;
  --success-l4: #f4fff2;
  --success-d1: #44873b;
  --success-d2: #286624;
  --success-d3: #154d13;

  --warning: #f29130;
  --warning-l1: #ffb259;
  --warning-l2: #ffdfb3;
  --warning-l3: #ffefd6;
  --warning-l4: #fff9f0;
  --warning-d1: #e66205;
  --warning-d2: #c75000;
  --warning-d3: #a64200;

  --danger: #d9534c;
  --danger-l1: #f28179;
  --danger-l2: #ffb9b3;
  --danger-l3: #ffddd9;
  --danger-l4: #fff6f5;
  --danger-d1: #cc3833;
  --danger-d2: #a62121;
  --danger-d3: #8c1515;

  --sky: #c5cbd6;
  --sky-l1: #dfe2e8;
  --sky-l2: #edf0f5;
  --sky-l3: #f7f8fa;

  --ink: #212736;
  --ink-l1: #464c5c;
  --ink-l2: #646e82;
  --ink-l3: #9199ab;

  --secondary-green: #b1bf43;
  --secondary-violet: #8f43bf;
  --secondary-brown: #b29a00;
  --secondary-orange: #f5b41d;
  --secondary-light-grey: #f2f1eb;

  --disabled-opacity: .6;

  --collection-decorator: rgba(158, 158, 158, 0.15);
  --collection-item-decorator: rgba(158, 158, 158, .05);
}
:root {
  --input-height: 36px;
  --textarea-height: 80px;
}
:root {
  --top-nav-height: 48px;
  --drop-down-offset: 8px;
}
:root {
  --hover-box-shadow: 0 1px 4px 0 rgba(197, 203, 214, 0.75);

  --box-shadow-menu: 0 2px 16px 0 rgba(33, 39, 54, 0.1),
    0 0 0 1px rgba(33, 39, 54, 0.05);
    
  --active-box-shadow: 0 1px 4px 0 rgba(197, 203, 214, 0.75);

  --border-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.03);
}
:root {
  --border-color: #e8e9ea;

  --disabled-bg: rgba(255, 255, 255, 0.6);

  --separator-color: rgba(33, 39, 54, 0.08);

  --border-radius: 3px;
  --border-radius-md: 4px;
  --border-radius-lg: 5px;
}
:root {
  --button-size: 34px;
  --button-size-xs: 28px;
  --button-size-lg: 42px;
  --icon-size: 24px;
}
.icon {
  display: inline-block;
  position: relative;
  max-width: 100%;
  max-height: 100%;
  font-size: 0;
  fill: currentColor;
  transform-origin: 50% 50%;
  transition: fill 0.2s ease-in-out, stroke 0.2s ease-in-out, transform 0.2s ease-out;
}

  .icon--inverse-y {
      transform: scaleY(-1);
    }

  .icon--inverse-x {
      transform: scaleX(-1);
    }

  .icon--absolute-center {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
.asLink {
  --link-focus-bg: rgba(33, 39, 54, 0.1);

  display: inline-block;
  padding: 2px 4px;
  border: 0;
  text-decoration: none;
  background: none;
  box-shadow: none;
  border-radius: 2px;
  font-size: var(--font-base-size);
  cursor: pointer;
  color: var(--brand);
  transition: color 0.2s ease-out;
}
.asLink:hover {
    color: var(--brand-d1);
  }
.asLink:focus {
    background-color: var(--link-focus-bg);
  }
.asLink--no-bgcolor {
    background: none;
    color: var(--ink-l2);
  }
.asLink--no-bgcolor:focus {
      background: none;
    }
.asLink--danger {
    color: var(--ink-l2);
  }
.asLink--danger:hover, .asLink--danger:focus {
      color: var(--danger);
    }
.asLink--secondary {
    color: var(--ink-l2);
  }
.asLink--secondary:hover, .asLink--secondary:focus {
      color: var(--brand);
    }
.asLink__icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    vertical-align: middle;
  }
.drop-container {
  --drop-offset: 8px;
  --before-color: #e6e6e6;
  --box-shadow: 0 2px 16px 0 rgba(33, 39, 54, 0.1);
  --drop-offset-display: block;

  display: inline-block;
  position: absolute;
  z-index: 999;
}
.drop-container--is-hover {
    visibility: hidden;
    opacity: 0;
  }
.drop-container--offset-none .drop-container__inner {
      padding: 0;
    }
.drop-container--center {
    left: 50%;
    transform: translateX(-50%);
  }
.drop-container--center .drop-container__inner::before {
      left: 50%;
      margin-left: calc(-1 * var(--drop-offset) / 2 - var(--drop-container-shift));
    }
.drop-container--bottom {
    top: 100%;
    padding-top: var(--drop-offset);
  }
.drop-container--bottom .drop-container__inner::before {
      top: calc(-1 * var(--drop-offset) / 2 - 1px);
      transform: rotate(45deg);
      border-radius: 2px 0 0;
      border-width: 1px 0 0 1px;
    }
.drop-container--bottom-right {
      right: 0;
    }
.drop-container--bottom-right .drop-container__inner::before {
        right: 16px;
      }
.drop-container--bottom-left {
      left: 0;
    }
.drop-container--bottom-left .drop-container__inner::before {
        left: 16px;
      }
.drop-container--bottom-custom-type {
      right: -82px;
    }
.drop-container--bottom-custom-type .drop-container__inner::before {
        right: 98px;
      }
.drop-container--top {
    bottom: 100%;
    padding-bottom: var(--drop-offset);
  }
.drop-container--top .drop-container__inner::before {
      bottom: calc(-1 * var(--drop-offset) / 2 - 1px);
      transform: rotate(-135deg);
      border-width: 1px 0 0 1px;
      border-radius: 2px 0 0;
    }
.drop-container--top-right {
      right: 0;
    }
.drop-container--top-right .drop-container__inner::before {
        right: 16px;
      }
.drop-container--top-left {
      left: 0;
    }
.drop-container--top-left .drop-container__inner::before {
        left: 16px;
      }
.drop-container--top-zero {
      top: 0;
      bottom: auto;
      padding-top: 0;
    }
.drop-container--top-zero .drop-container__inner::before {
        display: none;
      }
.drop-container--offset-left {
      left: -4px;
    }
.drop-container__inner {
    position: relative;
    padding: 8px 0;
    background-color: #fff;
    box-shadow: var(--box-shadow);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
  }
.drop-container__inner::before {
      content: "";
      position: absolute;
      width: var(--drop-offset);
      height: var(--drop-offset);
      right: 32px;
      background-color: #fff;
      border: 1px solid var(--border-color);
    }
.drop-container--static {
    position: static;
    width: 100%;
    transform: none;
    z-index: initial;
    --box-shadow: none;
    --drop-offset-display: none;
  }
.drop-container--static .drop-container__inner {
      border: 0;
    }
.drop-container--static .drop-container__inner::before {
        display: none;
      }
.button {
  --button-font-size-lg: 16px;

  --button-size: 34px;	
  --button-size-xs: 32px;	
  --button-size-lg: 42px;

  --button-padding: 8px 15px;
  --button-padding-xs: 5px 15px;
  --button-padding-lg: 12px 24px;

  --button-line-height: 18px;

  --button-primary: var(--brand);
  --button-primary-hover: #1555eb;
  --button-primary-focus: var(--brand-d1);
  --button-primary-active: #0846d5;
  --button-primary-z: #0846d5;

  --button-default: var(--sky);
  --button-default-hover: var(--sky-l2);
  --button-defult-active: var(--sky);
  --button-default-focus: var(--sky);
  --button-default-disable: var(--sky-l2);

  --button-secondary: rgba(35, 36, 39, 0.75);
  --button-secondary-hover: rgba(33, 39, 54, 0.85);
  --button-secondary-active: gba(33, 39, 54, 0.9);
  --button-secondary-focus: rgba(33, 39, 54, 0.85);
  --button-secondary-disable: rgba(33, 39, 54, 0.85);
  --button-secondary-shadow: 0 2px 11px 0 rgba(0, 0, 0, 0.2);
  --button-secondary-border: rgba(242, 244, 247, 0.4);

  --button-danger-hover: #e04a33;
  --button-danger-active: #c53a24;

  --button-flat: rgba(33, 39, 54, 0.75);
  --button-flat-hover: rgba(33, 39, 54, 0.85);
  --button-flat-shadow: 0 2px 11px 0 rgba(0, 0, 0, 0.2);
  --button-flat-hover-shadow: 0 2px 11px 0 rgba(0, 0, 0, 0.2);
  --button-flat-border-color: rgba(242, 244, 247, 0.4);

  display: inline-block;
  position: relative;
  padding: var(--button-padding);
  background-color: #fff;
  border: solid 1px var(--button-default);
  font-size: var(--font-base-size);
  color: var(--ink);
  border-radius: var(--border-radius);
  font-family: inherit;
  line-height: var(--button-line-height);
  white-space: nowrap;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.2s ease-out, color 0.2s ease-out, border-color 0.2s ease-out, box-shadow .2s ease-out;
}
.button:hover {
    border-color: var(--sky);
    background-color: var(--sky-l3);
  }
.button:focus {
    border-color: transparent;
    box-shadow: 0 0 0 2px var(--brand);
  }
.button:active {
    border-color: var(--sky);
    background-color: var(--sky-l2);

  }
.button[disabled], .button--disabled {
    border-color: var(--sky, --button-default-disable);
    background-color: var(--button-default-disable);
    color: var(--ink-l3);
    pointer-events: none;
  }
.button--loading {
    stroke: var(--brand-l2);
    color: transparent;
  }
.button--loading .button__icon {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      transform-origin: 50% 50%;
      animation: loading 1s infinite;
    }
.button--loading:hover, .button--loading:focus, .button--loading:active {
      color: transparent;
    }
.button--primary {
    background-color: var(--button-primary);
    border-color: var(--button-primary);
    color: #fff;
  }
.button--primary:hover {
      background-color: var(--button-primary-hover);
      border-color: var(--button-primary-hover);
      color: #fff;
    }
.button--primary:focus {
      box-shadow: 0 0 0 2px var(--brand-d1);
      color: #fff;
      border-color: var(--button-primary-hover);
    }
.button--primary:active {
      color: #fff;
      background-color: var(--button-primary-active);
    }
.button--primary--disabled, .button--primary[disabled] {
      background-color: var(--brand-l2);
      border-color: var(--brand-l2);
      color: #fff;
    }
.button--primary--disabled:hover, .button--primary--disabled:focus, .button--primary--disabled:active, .button--primary[disabled]:hover, .button--primary[disabled]:focus, .button--primary[disabled]:active {
        background-color: var(--brand-l2);
        color: #fff;
      }
.button--secondary {
    background-color: var(--button-secondary);
    border-color: var(--button-secondary-border);
    box-shadow: var(--button-secondary-shadow);
    color: #fff;
  }
.button--secondary:hover {
      background-color: var(--button-secondary-hover);
      border-color: var(--button-secondary-border);
      color: #fff;
    }
.button--secondary:focus {
      box-shadow: 0 0 0 2px var(--brand-d1), var(--button-secondary-shadow);
      color: #fff;
      border-color: var(--button-secondary-border);
    }
.button--secondary:active {
      color: #fff;
      background-color: var(--button-secondary-active);
    }
.button--secondary--disabled, .button--secondary[disabled] {
      background-color: var(--button-secondary-disable);
      border-color: var(--button-secondary-border);
      color: #fff;
    }
.button--secondary--disabled:hover, .button--secondary--disabled:focus, .button--secondary--disabled:active, .button--secondary[disabled]:hover, .button--secondary[disabled]:focus, .button--secondary[disabled]:active {
        background-color: var(--button-secondary-disable);
        color: #fff;
      }
.button--danger {
    background-color: var(--danger);
    border-color: var(--danger);
    color: #fff;
  }
.button--danger:hover {
      background-color: var(--button-danger-hover);
      color: #fff;
      border-color: var(--danger);
    }
.button--danger:focus {
      background-color: var(--danger);
      box-shadow: 0 0 0 2px var(--danger-d1);
      border-color: var(--danger);
    }
.button--danger:active {
      color: #fff;
      background-color: var(--button-danger-active);
    }
.button--danger--disabled {
      background-color: var(--danger-l1);
      color: #fff;
    }
.button--danger--disabled:hover, .button--danger--disabled:focus, .button--danger--disabled:active {
        background-color: var(--danger-l1);
        color: #fff;
      }
.button--flat {
    background-color: var(--button-flat);
    box-shadow: var(--button-flat-shadow);
    border-color: var(--button-flat-border-color);
    color: #fff;
  }
.button--flat:hover, .button--flat:focus, .button--flat:active {
      background-color: var(--button-flat-hover);
      box-shadow: var(--button-flat-hover-shadow);
      border-color: var(--button-flat-border-color);
      color: #fff;
    }
.button--as-link {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
  }
.button--as-link:hover, .button--as-link:focus {
      background-color: transparent;
      color: var(--brand);
      box-shadow: none;
    }
.button--as-link:hover .icon, .button--as-link:focus .icon {
        color: var(--brand);
      }
.button--as-link .icon {
      color: var(--ink-l1);
    }
.button--as-link--disabled, .button--as-link[disabled] {
      border-color: var(--sky, --button-default-disable);
      background-color: transparent;
      color: var(--ink-l3);
      pointer-events: none;
    }
.button--as-link--disabled .icon, .button--as-link[disabled] .icon {
        color: var(--ink-l3);
      }
.button--arrow .button__arrow {
      display: block;
    }
.button__inner {
    display: flex;
    align-items: center;
    justify-content: center;
  }
.button__icon {
    display: inline-flex;
    width: 20px;
    height: 20px;
    margin-right: 4px;
    justify-content: center;
    align-items: center;
  }
.button__icon--nomargin {
      margin: 0;
    }
.button--add-field {
    background-color: transparent;
    border: dashed 1px var(--sky);
    color: var(--brand);
  }
.button--add-field:hover, .button--add-field:active, .button--add-field:focus {
      background-color: transparent;
      color: var(--brand);
      border-color: var(--brand);
      box-shadow: none;
    }
.button--add-field[disabled] {
      border-color: var(--sky);
      pointer-events: none;
    }
.button--add-field .button__inner {
      justify-content: center;
    }
.button__arrow {
    display: inline-flex;
    width: 10px;
    height: 5px;
    margin-left: 9px;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    color: var(--ink-l3);
  }
.button--open-modal {
    border-radius: var(--border-radius-md);
    background-color: var(--sky);
    color: #fff;
  }
.button--open-modal:hover {
      background-color: var(--sky);
    }
.button--open-modal .button__icon {
      display: flex;
      position: absolute;
      width: 10px;
      height: 5px;
      top: 50%;
      right: 16px;
      transform: translateY(-50%) rotate(-90deg);
      align-items: center;
      justify-content: center;
      color: #fff;
    }
.button--align-left {
      text-align: left;
    }
.button--icon {
    padding: 8px;
  }
.button--size-xs {
      padding: var(--button-padding-xs);
    }
.button--size-xs__icon {
        width: 0.929em;
        height: 0.929em;
      }
.button--size-lg {
      padding: var(--button-padding-lg);
      font-size: var(--button-font-size-lg);
      --button-line-height: 16px;
    }
.button--full-width {
    width: 100%;
  }
.button--is-icon {
    min-width: var(--button-size-xs, 32px);
    min-height: var(--button-size-xs, 32px);
    padding: 0;
  }
.button--is-icon .button__text {
      display: flex;
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      align-items: center;
      justify-content: center;
    }
@keyframes loading {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
/* stylelint-disable selector-max-compound-selectors */
/* stylelint-disable max-nesting-depth */
.checkbox {
  --checkbox-button-size: 16px;
  --line-width: 28px;
  --line-height: 12px;
  --point-size: 16px;
  --line-color: var(--sky);
  --line-color-active: var(--brand);
  --label-color: #525252;
  --point-color: #fff;
  --point-color-active: #fff;
  --point-shadow: 0 0 2px 0 rgba(33, 39, 54, 0.1), 0 2px 3px 0 rgba(22, 91, 251, 0.1);
  --label-color: #b0b0b0;
  --box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);

  display: inline-flex;
  position: relative;
  align-items: center;
  user-select: none;
}
.checkbox--danger .checkbox__label-ico {
      border-color: var(--danger);
      background-color: var(--danger-l2);
      color: var(--danger);
    }
.checkbox--danger .checkbox__input:focus + .checkbox__label .checkbox__label-ico {
        border-color: var(--danger);
        box-shadow: 0 0 0 1px var(--danger);
        color: var(--danger);
      }
.checkbox--danger .checkbox__input:checked + .checkbox__label .checkbox__label-ico {
        border-color: var(--danger);
        color: var(--danger);
      }
.checkbox--danger .checkbox__input:checked + .checkbox__label:focus .checkbox__label-ico {
        border-color: var(--danger);
        box-shadow: 0 0 0 1px var(--danger);
      }
.checkbox--danger .checkbox__input:checked:focus + .checkbox__label .checkbox__label-ico {
        border-color: var(--danger);
        box-shadow: 0 0 0 1px var(--danger);
        color: var(--danger);
      }
.checkbox--toggle .checkbox__label-ico {
      display: none;
    }
.checkbox--toggle .checkbox__label::before {
        content: "";
        display: inline-flex;
        height: var(--line-height);
        min-width: var(--line-width);
        margin: 5px 0;
        margin-right: 8px;
        background-color: var(--line-color);
        border-radius: calc(var(--line-height) / 2);
        box-sizing: border-box;
        transition: color 0.2s ease-out, border-color 0.2s ease-out;
      }
.checkbox--toggle .checkbox__label::after {
        content: "";
        position: absolute;
        height: var(--point-size);
        min-width: var(--point-size);
        top: 50%;
        left: 0;
        transform: translate(-2px, -50%);
        border-radius: 50%;
        background-color: var(--point-color);
        box-shadow: var(--point-shadow);
        transition: transform 0.15s ease-out, background-color 0.15s ease-out,
          border-color 0.2s ease-out;
      }
.checkbox--toggle .checkbox__input:checked + .checkbox__label::before {
        background-color: var(--line-color-active);
      }
.checkbox--toggle .checkbox__input:checked + .checkbox__label::after {
        transform: translate(calc(var(--line-width) - var(--point-size) + 2px), -50%);
        background-color: var(--point-color-active);
      }
.checkbox--toggle .checkbox__input:focus + .checkbox__label::after, .checkbox--toggle .checkbox__input:active + .checkbox__label::after {
        box-shadow: inset 0 0 0 2px var(--brand);
      }
.checkbox--toggle .checkbox__input[disabled]:focus + .checkbox__label::after, .checkbox--toggle .checkbox__input[disabled]:active + .checkbox__label::after {
        box-shadow: var(--point-shadow);
      }
.checkbox--toggle .checkbox__input[disabled] + .checkbox__label {
        cursor: default;
      }
.checkbox--toggle .checkbox__input[disabled] + .checkbox__label::after {
          background-color: var(--point-color);
          pointer-events: none;
          cursor: default;
        }
.checkbox--toggle .checkbox__input[disabled] + .checkbox__label::before {
          background-color: var(--line-color);
          pointer-events: none;
          cursor: default;
        }
.checkbox--reverse .checkbox__label::before, .checkbox--reverse .checkbox__label-ico {
      order: 2;
      margin-right: 0;
      margin-left: 8px;
    }
.checkbox--reverse .checkbox__label::after {
      right: 0;
      left: auto;
      transform: translate(-14px, -50%);
      order: 2;
    }
.checkbox--reverse .checkbox__input:checked + .checkbox__label::after {
        transform: translate(2px, -50%);
      }
.checkbox--button .checkbox__label::before, .checkbox--button .checkbox__label-ico {
      display: none;
    }
.checkbox--button .checkbox__label {
      width: 100%;
      height: var(--input-height, 30px);
      min-width: var(--input-height, 30px);
      flex: 1;
      color: var(--ink-l1);
      justify-content: center;
    }
.checkbox--button .checkbox__label:hover {
      background-color: var(--sky-l2);
    }
.checkbox--button .checkbox__input:checked + .checkbox__label {
        background-color: var(--sky);
      }
.checkbox--button-square .checkbox__label {
      height: var(--input-height, 30px);
      min-width: var(--input-height, 30px);
      padding: 0;
      background-color: #fff;
      border: solid 1px var(--sky);
      border-radius: var(--border-radius);
      justify-content: center;
      align-items: center;
    }
.checkbox--button-square .checkbox__label:hover {
      background-color: var(--sky-l2);
    }
.checkbox--button-square .checkbox__input:checked + .checkbox__label {
        background-color: var(--sky);
      }
.checkbox--button-square .checkbox__label::before, .checkbox--button-square .checkbox__label-ico {
      display: none;
    }
.checkbox--full-width {
    width: 100%;
  }
.checkbox__input {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
  }
.checkbox__input:checked + .checkbox__label .checkbox__label-ico {
        border-color: var(--brand);
        color: var(--brand);
      }
.checkbox__input:checked + .checkbox__label .icon {
        transform: scale(1);
      }
.checkbox__input:focus + .checkbox__label .checkbox__label-ico, .checkbox__input:checked:focus + .checkbox__label .checkbox__label-ico {
        border-color: var(--brand);
        color: var(--brand);
        box-shadow: 0 0 0 1px var(--brand);
      }
.checkbox__input[disabled] {
      cursor: not-allowed;
    }
.checkbox__input[disabled] + .checkbox__label .checkbox__label-ico {
        border-color: var(--sky);
        color: var(--ink-l3);
        background-color: var(--sky-l2);
      }
.checkbox__input[disabled]:checked + .checkbox__label .checkbox__label-ico {
        border-color: var(--sky);
        color: var(--ink-l3);
      }
.checkbox__label {
    display: inline-flex;
    position: relative;
    align-items: center;
    cursor: pointer;
    outline: none;
  }
.checkbox__label:focus::before {
      content: "";
      box-shadow: 0 0 0 2px var(--brand);
    }
.checkbox__label-ico {
    display: inline-flex;
    width: var(--checkbox-button-size);
    height: var(--checkbox-button-size);
    background-color: #fff;
    border-radius: 3px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
    border: solid 1px var(--sky);
    transition: background-color 0.2s ease-out, border-color 0.2s ease-out;
  }
.checkbox__label-ico .icon {
      width: 10px;
      height: 8px;
      transform: scale(0);
      transition: 0.1s ease-out;
    }
.check-group__action {
    display: flex;
    align-items: center;
  }
.check-group__btn {
    position: relative;
    padding-right: 18px;
  }
.check-group__icon {
    position: absolute;
    width: 10px;
    height: 5px;
    top: calc(50% + 1px);
    right: 0;
    transform: translateY(-50%) rotate(0);
    color: var(--ink-l3);
    transition: color 0.2s ease-out, transform 0.2s ease-out;
  }
.check-group__icon--active {
      transform: translateY(-50%) rotate(-180deg);
    }
.check-group__list {
    color: var(--ink-l2);
  }
.radio-button {
  --radio-button-size: 16px;

  display: inline-flex;
  position: relative;
  align-items: center;
}
.radio-button--content .radio-button__label::before {
      display: none;
    }
.radio-button--content .radio-button__label::after {
      display: none;
    }
.radio-button--content .radio-button__label {
      width: 100%;
      //padding: 2px;
      border-radius: var(--border-radius);
      //border: solid 2px transparent;
    }
.radio-button--content .radio-button__input:checked + .radio-button__label {
        border-color: var(--brand);
        box-shadow: inset 0 0 0 3px transparent,
          0 0 0 2px #fff, 0 0 0 4px var(--brand),
          0 2px 8px 0 rgba(33, 39, 54, 0.5);
      }
.radio-button--content .radio-button__input:focus + .radio-button__label, .radio-button--content .radio-button__input:active + .radio-button__label {
      box-shadow: inset 0 0 0 3px transparent,
        0 0 0 2px #fff, 0 0 0 4px var(--brand),
        0 2px 6px 0 rgba(145, 153, 171, 0.37);
    }
.radio-button--content-shadow .radio-button__label {
        padding: 0;
        border: 0;
      }
.radio-button--content-shadow .radio-button__input:checked + .radio-button__label {
          box-shadow: inset 0 0 0 3px transparent, 0 0 0 1px #fff, 0 0 0 3px var(--brand),
            0 2px 8px 0 rgba(33, 39, 54, 0.08);
        }
.radio-button--content-shadow .radio-button__input:focus + .radio-button__label, .radio-button--content-shadow .radio-button__input:active + .radio-button__label {
        box-shadow: inset 0 0 0 3px transparent, 0 0 0 2px #fff, 0 0 0 4px var(--brand),
          0 2px 8px 0 rgba(33, 39, 54, 0.08);
      }
.radio-button--button .radio-button__label::before, .radio-button--button-square .radio-button__label::before {
      display: none;
    }
.radio-button--button .radio-button__label::after, .radio-button--button-square .radio-button__label::after {
      display: none;
    }
.radio-button--button .radio-button__label:hover, .radio-button--button-square .radio-button__label:hover {
      background-color: var(--sky-l3);
    }
.radio-button--button .radio-button__input:checked + .radio-button__label, .radio-button--button-square .radio-button__input:checked + .radio-button__label {
        background-color: var(--sky-l2);
      }
.radio-button--button .radio-button__input:focus + .radio-button__label, .radio-button--button .radio-button__input:active + .radio-button__label, .radio-button--button-square .radio-button__input:focus + .radio-button__label, .radio-button--button-square .radio-button__input:active + .radio-button__label {
      background-color: var(--sky-l2);
    }
.radio-button--button .radio-button__label {
      padding: var(--button-paddings, 0 8px);
      flex: 1;
      background-color: #fff;
      justify-content: center;
    }
.radio-button--button-square .radio-button__label {
      height: var(--input-height, 30px);
      min-width: var(--input-height, 30px);
      padding: 0;
      background-color: #fff;
      border: solid 1px var(--sky);
      border-radius: var(--border-radius);
      justify-content: center;
      align-items: center;
    }
.radio-button--danger .radio-button__input:checked + .radio-button__label:focus::before {
          box-shadow: 0 0 0 2px var(--danger);
        }
.radio-button--danger .radio-button__input:checked + .radio-button__label::before {
          border-color: var(--danger);
        }
.radio-button--danger .radio-button__input:checked + .radio-button__label::after {
          background-color: var(--danger);
        }
.radio-button--danger .radio-button__input:checked:focus + .radio-button__label::before {
          box-shadow: 0 0 0 2px var(--danger);
          border-color: transparent;
        }
.radio-button--no-border .radio-button__label {
      border: 0;
      border-radius: 0;
    }
.radio-button--flex {
    display: flex;
    align-items: stretch;
  }
.radio-button--flex .radio-button__label {
      display: flex;
      align-items: stretch;
    }
.radio-button--full-width {
    width: 100%;
  }
.radio-button__input {
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
  }
.radio-button__input:checked + .radio-button__label::after {
        transform: translateY(-50%) scale(1);
        opacity: 1;
      }
.radio-button__input:checked + .radio-button__label:focus::before {
        box-shadow: 0 0 0 2px var(--brand);
      }
.radio-button__input:checked:focus + .radio-button__label::before {
        box-shadow: 0 0 0 2px var(--brand);
        border-color: transparent;
      }
.radio-button__label {
    display: inline-flex;
    position: relative;
    align-items: center;
    cursor: pointer;
    outline: none;
    transition: border-color 0.2s ease-out, color 0.2s ease-out, box-shadow 0.1s ease-out,
      transform 0.2s ease-out, background-color 0.2s ease-out;
  }
.radio-button__label::before {
      content: "";
      height: var(--radio-button-size);
      min-width: var(--radio-button-size);
      background-color: #fff;
      border-radius: 50%;
      cursor: pointer;
      margin-right: 8px;
      border: solid 1px var(--sky);
      transition: background-color 0.2s ease-out, border-color 0.1s ease-out,
        box-shadow 0.2s ease-out;
    }
.radio-button__label::after {
      content: "";
      position: absolute;
      width: calc(var(--radio-button-size) / 2);
      height: calc(var(--radio-button-size) / 2);
      top: 50%;
      left: calc(var(--radio-button-size) / 4);
      transform: translateY(-50%) scale(0);
      border-radius: 50%;
      opacity: 0;
      background-color: var(--brand);
      transform-origin: center center;
      transition: transform 0.2s ease-out, opacity 0.2s ease-out;
    }
.radio-button__label:focus::before {
      box-shadow: 0 0 0 2px var(--brand);
    }
.radio-button.disabled .radio-button__label, .radio-button[disabled] .radio-button__label {
      cursor: not-allowed;
    }
.radio-button.disabled .radio-button__label::before, .radio-button[disabled] .radio-button__label::before {
        background-color: var(--sky-l2);
        border: solid 1px var(--sky);
      }
.radio-button.disabled .radio-button__label::after, .radio-button[disabled] .radio-button__label::after {
      background-color: var(--sky);
    }
.radio-group {
  display: flex;
  flex-wrap: wrap;
  border: 0;
  user-select: none;
  align-items: stretch;
}
.radio-group--column {
    flex-direction: column;
    align-items: flex-start;
  }
.radio-group--column .radio-group__btn:not(:last-child) {
        margin-bottom: 12px;
      }
.radio-group--buttons {
    display: inline-flex;
    min-height: var(--button-size);
    flex-direction: row;
    border-radius: var(--border-radius);
    align-items: stretch;
    border: solid 1px var(--sky);
    overflow: hidden;
  }
.radio-group--buttons .radio-group__btn {
      display: flex;
      min-width: 64px;
      margin-bottom: 0;
      align-items: stretch;
      margin-right: 0;
      flex: 1;
    }
.radio-group--buttons .radio-group__btn:not(:last-child) {
        border-right: solid 1px var(--sky);
      }
.drop-down {
  --ico-size: 10px;
  --offset-right-custom: -82px;
  position: relative;
}
.drop-down--is-hover-bottom:hover .drop-down__content {
        visibility: visible;
        animation: fade-up-in 0.15s ease-out forwards;
      }
.drop-down--is-hover-bottom:hover .drop-down__ico {
        transform: rotate(-180deg);
        will-change: transform;
        color: var(--ink-l3);
      }
.drop-down--is-hover-top:hover .drop-down__content {
        visibility: visible;
        animation: drop-in-top 0.15s ease-out forwards;
      }
.drop-down--is-hover-top:hover .drop-down__ico {
        transform: rotate(-180deg);
        will-change: transform;
      }
.drop-down--flex-inner .drop-container__inner {
      display: flex;
    }
.drop-down__title {
    position: relative;
    width: 100%;
    padding: 0 16px;
    line-height: 36px;
    color: #fff;
    z-index: 2;
    text-align: left;
    white-space: nowrap;
    border-radius: var(--border-radius-md);
    background-color: var(--sky);
    transition: background-color 0.2s ease-out;
  }
.drop-down__title:hover::after, .drop-down__title:focus::after {
      opacity: 1;
    }
.drop-down__title-inner {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
.drop-down__title::after {
      content: "";
      position: absolute;
      top: 0;
      right: 10px;
      bottom: 0;
      left: 10px;
      opacity: 0;
      box-shadow: var(--active-box-shadow);
      transition: opacity 0.2s ease-out;
    }
.drop-down--group-btn {
    --drop-offset-display: none;
    --ico-size: 8px;

    display: flex;
    background-color: #fff;
    border-right: 1px solid var(--border-right);
  }
.drop-down--group-btn:only-child, .drop-down--group-btn:last-child {
      border: 0;
    }
.drop-down--group-btn:hover {
      background-color: var(--sky-l2);
    }
.drop-down--group-btn:last-child {
      border-radius: 0 var(--border-radius) var(--border-radius) 0;
      border-left: 1px solid var(--border-color);
    }
.drop-down--group-btn:first-child {
      border-radius: var(--border-radius) 0 0 var(--border-radius);
      border-left: 0;
    }
.drop-down--group-btn:first-child .drop-down__title {
        border-radius: var(--border-radius) 0 0 var(--border-radius);
      }
.drop-down--group-btn .drop-down__ico {
      display: inline-flex;
      position: static;
      width: var(--ico-size);
      height: var(--ico-size);
      transform: rotate(0deg);
      vertical-align: middle;
      color: var(--sky);
      margin-left: 8px;
    }
.drop-down--group-btn .drop-down__ico--down {
        transform: rotate(-180deg);
        will-change: transform;
      }
.drop-down--group-btn .drop-down__title {
      padding: var(--padding);
      border-radius: 0 var(--border-radius) var(--border-radius) 0;
      background-color: transparent;
      line-height: var(--height);
      color: var(--ink-l1);
    }
.drop-down--group-btn .drop-down__title::after {
        display: none;
      }
.drop-down--group-btn .drop-down__title:hover {
        background-color: var(--sky-l2);
      }
.drop-down--default .drop-down__title {
      padding: 0;
      border-radius: 0;
      background-color: transparent;
      line-height: normal;
      color: inherit;
    }
.drop-down--default .drop-down__title::after {
        display: none;
      }
.drop-down--transparent .drop-down__title {
      padding: 0;
      font-size: var(--subheading-size);
      text-transform: uppercase;
      font-weight: var(--subheading-weight);
      color: var(--ink);
      line-height: normal;
      background-color: transparent;
      border-radius: 0;
    }
.drop-down--transparent .drop-down__title:after {
        display: none;
      }
.drop-down--transparent .drop-container__inner {
      background-color: transparent;
    }
.drop-down--transparent .drop-down__ico {
      display: none;
    }
.drop-down__ico {
    display: flex;
    position: absolute;
    width: var(--ico-size);
    height: calc(var(--ico-size) / 2);
    top: 50%;
    right: 8px;
    transform: translateY(-50%) rotate(0deg);
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    color: #fff;
    transform-origin: center;
    transition: transform 0.2s ease-out;
  }
.drop-down__ico--down {
      transform: translateY(-50%) rotate(-180deg);
      will-change: transform;
    }
.drop-down__ico .icon {
        margin-top: 2px;
      }
.controls-group {
  --button-paddings: 0 16px;
  --border-color-inner: rgba(33, 39, 54, 0.1);
  --border-color-outer: rgba(255, 255, 255, 0.2);
  --border-right: var(--sky);

  display: inline-flex;
  height: var(--input-height, 32px);
  border: solid 1px var(--sky);
  user-select: none;
  align-items: stretch;
  overflow: hidden;
  border-radius: var(--border-radius);
}
.controls-group--controls-btn {
    --button-paddings: 0 12px;
    --input-height: 36px;
    --border-right: var(--border-color-inner);
    
    overflow: visible;
    align-items: stretch;
    border: 1px solid var(--border-color-inner);
    box-shadow: 0 0 0 1px transparent, 0 0 0 1px var(--border-color-outer);
  }
.controls-group--controls-btn .controls-group__btn {
      min-width: calc(var(--input-height) - 2px);
      justify-content: center;
    }
.controls-group--size-xs {
      --input-height: 34px;
      --button-paddings: 0 8px;
    }
.controls-group--full-width {
    display: flex;
  }
.controls-group--full-width .controls-group__btn {
      flex: 1;
    }
.controls-group--overflow-v {
    overflow: visible;
  }
.controls-group--column {
    height: auto;
    flex-direction: column;
    align-items: flex-start;
    border: 0;
    overflow: visible;
    border-radius: 0;
  }
.controls-group--column .controls-group__btn {
      align-items: initial;
    }
.controls-group--column .controls-group__btn:not(:last-child) {
        border-right: 0;
      }
.controls-group--no-border {
    border: 0;
  }
.controls-group__btn {
    display: inline-flex;
    align-items: stretch;
    white-space: nowrap;
    border: 0;
    border-radius: 0;
  }
.controls-group__btn--rect {
      display: inline-block;
      width: var(--input-height);
      padding: 0;
      font-size: 0;
    }
.controls-group__btn--rect .controls-group__btn {
        padding: 0;
      }
.controls-group__btn--padding {
      display: inline-block;
      padding: var(--button-paddings);
    }
.controls-group__btn--flex {
      display: flex;
      align-items: center;
    }
.controls-group__btn:focus {
      box-shadow: none;
    }
.controls-group__btn:not(:last-child) {
      border-right: solid 1px var(--border-right);
    }
.controls-group__btn:first-child {
      border-radius: var(--border-radius) 0 0 var(--border-radius);
    }
.controls-group__btn:last-child {
      border-radius: 0 var(--border-radius)  var(--border-radius) 0;
    }
.controls-group__btn:only-child {
      border-radius: var(--border-radius);
    }
.flex {
  display: flex;
  width: 100%;
}
.flex--justify-flex-end {
      justify-content: flex-end;
    }
.flex--justify-flex-start {
      justify-content: flex-start;
    }
.flex--justify-center {
      justify-content: center;
    }
.flex--justify-between {
      justify-content: space-between;
    }
.flex--justify-around {
      justify-content: space-around;
    }
.flex--align-center {
      align-items: center;
    }
.flex--align-stretch {
      align-items: stretch;
    }
.flex--align-flex-end {
      align-items: flex-end;
    }
.flex--align-flex-start {
      align-items: flex-start;
    }
.flex--align-baseline {
      align-items: baseline;
    }
.flex--inline {
    display: inline-flex;
    width: initial;
  }
.flex--direction-column {
      flex-direction: column;
    }
.flex--wrap {
    flex-wrap: wrap;
  }
.flex--no-wrap {
    flex-wrap: wrap;
  }
.flex--width-auto {
      width: auto;
    }
.flex--reverse-col {
      flex-direction: column-reverse;
    }
.flex--reverse-row {
      flex-direction: row-reverse;
    }
.button-group {
  --border-color-inner: rgba(33, 39, 54, 0.1);
  --border-color-outer: rgba(255, 255, 255, 0.2);
  --padding: 0 12px;
  --height: 32px;

  display: inline-flex;
  align-items: stretch;
  border-radius: var(--border-radius);
  border: 1px solid var(--border-color-inner);
  box-shadow: 0 0 0 1px transparent, 0 0 0 1px var(--border-color-outer);
}
.button-group--offset-left {
    margin-left: 9px;
  }
.button-group--absolute {
    position: absolute;
  }
.button-group__btn {
    position: relative;
    height: var(--height);
    min-width: var(--height);
    text-align: center;
    vertical-align: middle;
    color: var(--ink-l1);
    border-right: 0;
    line-height: normal;
    background-color: #fff;
    transition: background-color 0.2s ease-out;
  }
.button-group__btn:hover, .button-group__btn:focus {
      background-color: var(--sky-l2);
    }
.button-group__btn:not(:first-child) {
      border-left: 1px solid var(--border-color);
    }
.button-group__btn:active {
      background-color: var(--sky-l2);
    }
.button-group__btn:last-child {
      border-radius: 0 var(--border-radius) var(--border-radius) 0;
    }
.button-group__btn:first-child {
      border-radius: var(--border-radius) 0 0 var(--border-radius);
    }
.button-group__btn:only-child {
      border-radius: var(--border-radius);
      border: 0;
    }
.button-group__btn--label {
      padding: var(--padding);
    }
.button-group__btn--small-ico .icon {
        width: 8px;
        height: 8px;
      }
.button-group__btn--active {
      background-color: var(--sky-l2);
    }
.button-group__btn--active:hover, .button-group__btn--active:active {
        background-color: var(--sky-l2);
      }
.button-group__btn--large-ico .icon {
        width: 18px;
      }
.button-group__btn--move-cursor {
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: move;
    }
.button-group__btn--move-cursor:after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
      }
.button-group__btn--list-btn {
      --drop-offset: 8px;

      width: 100%;
      height: auto;
      min-width: 164px;
      padding: 0 16px;
      text-align: left;
      line-height: 36px;
      border: 0;
      background-color: #fff;
    }
.button-group__btn--list-btn .icon {
        margin-right: 8px;
      }
.button-group__btn--list-btn:first-child {
        border: 0;
        border-radius: var(--border-radius) var(--border-radius) 0 0;
      }
.button-group__btn--list-btn:not(:first-child) {
        border-left: 0;
      }
.button-group__btn--list-btn:last-child {
        border: 0;
        border-radius: 0 0 var(--border-radius) var(--border-radius);
      }
.button-group__btn--list-btn:hover {
        background-color: var(--sky-l2);
      }
.button-group__btn[disabled], .button-group__btn--disabled {
      border-color: var(--sky);
      background-color: var(--sky-l3);
      color: var(--ink-l3);
      pointer-events: none;
    }
.button-group__wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
  }
.button-group__wrapper--block {
      display: block;
    }
.button-group__wrapper--align-left {
      justify-content: left;
    }
.button-group__btn-label {
    display: inline-flex;
    white-space: nowrap;
    margin-right: 8px;
    align-items: center;
  }
.list {
  --button-height: 32px;
  padding: 8px 0;
}
.list--size-md {
      --button-height: 40px;
    }
.list--with-checkbox .list__btn-wrapper {
      justify-content: space-between;
    }
.list--with-checkbox .list__btn-ico {
      color: var(--brand);
    }
.list__btn-ico {
    width: 14px;
    height: 14px;
    min-width: 14px;
    margin-left: 8px;
    color: var(--ink-l1);
    font-size: 0;
  }
.list__btn {
    width: 100%;
    min-width: 164px;
    padding: 8px 16px;
    text-align: left;
    border: 0;
    color: var(--ink);
    line-height: var(--line-height-base);
    background-color: #fff;
    transition: background-color 0.2s ease-out;
  }
.list__btn:hover {
      background-color: var(--sky-l2);
    }
.list__btn:first-child {
      border: 0;
      border-radius: var(--border-radius) var(--border-radius) 0 0;
    }
.list__btn:not(:first-child) {
      border-left: 0;
    }
.list__btn:last-child {
      border: 0;
      border-radius: 0 0 var(--border-radius) var(--border-radius);
    }
.list__btn--active {
      background-color: var(--sky-l2);
    }
.list__btn--active:hover {
        background-color: var(--sky-l2);
      }
.list__btn--active .list__btn-ico {
        color: var(--brand);
      }
.list__btn-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
.list__btn-wrapper-inner {
      display: block;
      max-width: 100%;
      align-items: center;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
.input-number {
  position: relative;
  --width-controls: 16px;
}
.input-number--secondary .input-number__inner {
      background-color: #fff;
    }
.input-number__inner {
    display: flex;
    position: relative;
    width: 80px;
    height: var(--input-height);
    align-items: center;
    padding-left: 4px;
    border: 1px solid transparent;
    background-color: var(--sky-l2);
    border-radius: var(--border-radius);
    transition: border-color 0.2s ease-out, background-color 0.2s ease-out;
  }
.input-number__inner:hover {
      border: 1px solid var(--sky);
      background-color: #fff;
    }
.input-number__inner:hover .input-number__controls {
        opacity: 1;
      }
.input-number__inner--focus {
      border-color: var(--brand);
    }
.input-number__label {
    display: block;
    line-height: 1.43;
    padding-bottom: 4px;
  }
.input-number__unit {
    color: var(--ink-l3);
    cursor: default;
    padding-left: 4px;
  }
.input-number__input {
    width: 100%;
    max-width: 30px;
    font-size: var(--font-base-size);
    border: 0;
    text-align: right;
    box-sizing: border-box;
    border-radius: var(--border-radius);
    text-overflow: ellipsis;
    background-color: inherit;

    -moz-appearance: textfield;
  }
.input-number__input::-webkit-inner-spin-button, .input-number__input::-webkit-outer-spin-button {
      -webkit-appearance: none;
    }
.input-number__input--readonly {
      cursor: default;
      pointer-events: none;
    }
.input-number__input--full {
      max-width: none;
      padding: 0 calc(var(--width-controls) + 8px) 0 8px;
      text-align: left;
    }
.input-number--with-border .input-number__inner {
      border: 1px solid var(--sky);
      background-color: #fff;
    }
.input-number--with-border .input-number__controls {
      opacity: 1;
    }
.input-number__controls {
    display: flex;
    position: absolute;
    width: var(--width-controls);
    height: 100%;
    top: 0;
    right: 0;
    opacity: 0;
    flex-direction: column;
    background-color: #fff;
    overflow: hidden;
    border-top-right-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
    border-left: 1px solid var(--sky);
    transition: opacity 0.2s ease-out;
  }
.input-number__btn {
    position: relative;
    width: 100%;
    top: 0;
    padding: 0;
    flex: 1;
    color: var(--ink-l3);
    cursor: pointer;
    transition: color 0.2s ease-out;
  }
.input-number__btn:hover, .input-number__btn:focus {
      background-color: var(--sky-l1);
    }
.input-number__btn:active {
      border-color: var(--sky);
      background-color: var(--sky);
    }
.input-number__btn::before {
      transition: background-color 0.2s;
    }
.input-number__btn .icon {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
.input-number__btn--plus {
      top: 0;
      border-top-right-radius: var(--border-radius);
      border-bottom: 1px solid var(--sky);
    }
.input-number__btn--plus .icon {
        transform: translate(-50%, -50%) rotate(-180deg);
      }
.input-number__btn--minus {
      bottom: 0;
      transform: rotate(0);
      border-bottom-right-radius: var(--border-radius);
    }
.input-number--size-xs {
      --input-height: 30px;
    }
.scroll-bar-wrapper {
  --shadow-inner-bottom: inset 0 -7px 6px -6px rgba(0, 0, 0, 0.14);
  --shadow-inner-top: inset 0 7px 6px -6px rgba(0, 0, 0, 0.14);

  display: flex;
  flex-direction: column;
  flex: 1;
}
.scroll-bar {
  flex: 1;
}
.scroll-bar--shadow {
    position: relative;
  }
.scroll-bar--shadow::after, .scroll-bar--shadow::before {
      content: "";
      position: absolute;
      width: 100%;
      height: 24px;
      left: 0;
      pointer-events: none;
      z-index: 1;
    }
.scroll-bar--shadow::after {
      bottom: 0;
      box-shadow: var(--shadow-inner-bottom);
    }
.scroll-bar--shadow::before {
      top: 0;
      box-shadow: var(--shadow-inner-top);
    }
.scroll-bar--border-radius {
    border-radius: 0 0 var(--border-radius) var(--border-radius);
  }
.scroll-bar--offset-px-24 .scroll-bar__view {
        padding: 0 24px;
      }
.scroll-bar--offset-px-16 .scroll-bar__view {
        padding: 0 24px;
      }
.scroll-bar--offset-pr-24 .scroll-bar__view {
        padding-right: 24px;
      }
.scroll-bar--offset-pl-24 .scroll-bar__view {
        padding-left: 24px;
      }
.scroll-bar--offset-py-24 .scroll-bar__view {
        padding-top: 24px;
        padding-bottom: 24px;
      }
.scroll-bar--offset-pb-24 {
      border-bottom: 1px solid white;
    }
.scroll-bar--offset-pb-24 .scroll-bar__view {
        padding-bottom: 24px;
      }
.scroll-bar--no-thumb-vertical {
    flex: 1;
  }
.scroll-bar--no-thumb-vertical .scroll-bar__thumb-vertical {
      display: none;
    }
.select {
  --input-color-disabled: #919eab;
}
.select__inner {
    position: relative;
  }
.select__input {
    width: 100%;
    height: var(--input-height);
    padding: 0 36px 0 12px;
    border-radius: var(--border-radius);
    background-color: #fff;
    border: solid 1px var(--sky);
    font-size: var(--font-base-size);
    transition: color 0.2s ease-out, box-shadow 0.2s ease-out, border-color 0.2s ease-out;
    -webkit-appearance: none;
    -moz-appearance: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -webkit-padding-end: 36px;
    -moz-padding-end: 36px;
    -webkit-padding-start: 12px;
    -moz-padding-start: 12px;
  }
.select__input:focus {
      outline: none;
      box-shadow: 0 0 0 2px var(--brand);
    }
.select__arrow {
    display: flex;
    position: absolute;
    width: 6px;
    height: 6px;
    right: 15px;
    align-items: center;
    justify-content: center;
    color: var(--ink-l2);
  }
.select__arrow--top {
      top: calc(50% - 7px);
      transform: rotate(180deg);
    }
.select__arrow--bottom {
      bottom: calc(50% - 7px);
    }
.select__message {
    display: flex;
    position: absolute;
    bottom: -22px;
    left: 0;
    align-items: center;
    color: var(--danger-d1);
  }
.select__badge {
    display: inline-block;
    position: absolute;
    top: 50%;
    right: 36px;
    padding: 0 8px;
    transform: translateY(-50%);
    line-height: 16px;
    font-size: 10px;
    border-radius: var(--border-radius);
    text-align: center;
  }
.select__badge--green {
      background-color: var(--success);
      color: #fff;
    }
.select__label {
    display: block;
    font-size: var(--font-base-size);
    line-height: 1.43;
    padding-bottom: 4px;
  }
.select__message-ico {
    display: inline-block;
    width: 18px;
    height: 16px;
    margin-right: 6px;
  }
.select--danger .select__input {
      background-color: var(--danger-l2);
      border-color: var(--danger);
    }
.select--danger .select__input:focus {
        outline: none;
        box-shadow: 0 0 0 2px var(--danger);
      }
.select--badge .select__input {
      padding-right: 110px;
    }
.select--size-xs {
      --input-height: 30px;
    }
.select--disabled {
    cursor: not-allowed;
  }
.select--disabled .select__input, .select--disabled .select__input[disabled] {
      background-color: var(--sky-l2);
      border-color: var(--sky);
      color: var(--input-color-disabled);
      pointer-events: none;
    }
.select--disabled .select__arrow {
      color: var(--input-color-disabled);
    }
.select--label-subheading .select__label {
      font-size: var(--subheading-size);
      font-weight: var(--subheading-weight);
      line-height: var(--subheading-line-height);
      padding-bottom: 8px;
    }
.select--label-uppercase .select__label {
      text-transform: uppercase;
    }
.select--width-full {
    width: 100%;
  }
.sort-list {
  border-radius: var(--border-radius);
}
.sort-list--drag-in-progress {
    cursor: move;
  }
.sort-item {
  --active-box-shadow: 0 2px 6px 0 rgba(145, 153, 171, 0.37);
  --dragging-box-shadow: 0 2px 6px 0 rgba(145, 153, 171, 0.5);

  display: flex;
  position: relative;
  height: 44px;
  align-items: center;
  margin-bottom: 8px;
  user-select: none;
  list-style: none;
}
.sort-item--expanded {
    height: auto;
    flex-wrap: wrap;
    border-radius: var(--border-radius);
    background-color: var(--sky-l2);
    justify-content: space-between;
  }
.sort-item--expanded::before {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      opacity: 0;
      z-index: -1;
      border-radius: var(--border-radius);
      transition: opacity 0.2s ease-out;
      box-shadow: var(--active-box-shadow);
    }
.sort-item--expanded .sort-item__drag-ico {
      color: var(--sky);
    }
.sort-item--expanded .sort-item__drag-area {
      display: flex;
      width: 100%;
      height: 44px;
      align-items: center;
      justify-content: space-between;
    }
.sort-item__inner-wrapper {
    display: flex;
    flex: 1;
    align-items: stretch;
  }
.sort-item__icon-wrapper {
    display: flex;
    width: 58px;
    min-width: 58px;
    align-items: center;
    padding-left: 8px;
    border-radius: var(--border-radius) 0 0 var(--border-radius);
  }
.sort-item__control {
    display: inline-flex;
    margin-left: 8px;
  }
.sort-item__input .input-text__input {
      border-radius: 0 var(--border-radius) var(--border-radius) 0;
      border-left: 0;
    }
.sort-item__input .input-text__input:focus, .sort-item__input .input-text__input:active {
        box-shadow: none;
        border-color: var(--brand);
      }
.sort-item__icon {
    display: flex;
    width: 28px;
    height: 28px;
    padding: 4px;
    color: #fff;
    align-items: center;
    justify-content: center;
  }
.sort-item:not(:last-child) {
    margin-bottom: 8px;
  }
.sort-item--active {
    z-index: 100;
  }
.sort-item--active::before {
      opacity: 1;
    }
.sort-item--dragging {
    z-index: 999;
  }
.sort-item--dragging::before {
      box-shadow: var(--dragging-box-shadow);
      opacity: 1;
    }
.sort-item__drag-ico {
    display: inline-block;
    font-size: 0;
    cursor: move;
    color: rgba(255, 255, 255, 0.7);
  }
.sort-item__title {
    border-radius: var(--border-radius);
    flex: 1;
    text-align: left;
    cursor: pointer;
    transition: color 0.2s ease-out;
  }
.sort-item__title:focus, .sort-item__title:active {
      color: var(--ink-l1);
    }
.sort-item__content {
    width: 100%;
    border-radius: 0 0 var(--border-radius) var(--border-radius);
  }
.sort-item__btn {
    display: inline-block;
    color: var(--sky);
    transition: color 0.2s ease-out;
  }
.sort-item__btn:hover, .sort-item__btn:focus, .sort-item__btn:active {
      color: var(--ink-l1);
    }
.tabs {
  --tab-primary-active: #0846d5;
  --tab-primary-hover: #074ee6;

  --tab-default-hover: #f1f1f1;

  display: flex;
  flex-direction: column;
  flex: 1;
}
.tabs__control {
    display: flex;
    position: relative;
    padding: 0 20px;
    background-color: var(--sky-l2);
  }
.tabs__control-item {
    display: inline-block;
    max-width: 50%;
    padding: 1px 0 12px;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    white-space: nowrap;
    cursor: pointer;
    font-size: var(--font-base-size);
    border-bottom: 2px solid transparent;
    border-right: 0;
    color: var(--ink);
    transition: background-color 0.2s ease-out, color 0.2s ease-out, border-color 0.2s ease-out;
  }
.tabs__control-item:hover {
      border-color: var(--tab-default-hover);
    }
.tabs__control-item--active, .tabs__control-item--active:hover, .tabs__control-item:focus {
      border-color: var(--brand);
    }
.tabs__control-item:not(:last-child) {
      margin-right: 20px;
    }
.tabs__content {
    display: flex;
    width: 100%;
    flex-direction: column;
    flex: 1;
  }
.tabs__control-icon {
    width: 10px;
    height: 10px;
    margin: 0 auto 10px;
  }
.tabs--primary .tabs__control-item {
      background-color: var(--brand);
      color: #fff;
      border: 0;
    }
.tabs--primary .tabs__control-item:hover {
        background-color: var(--tab-primary-hover);
      }
.tabs--primary .tabs__control-item--active, .tabs--primary .tabs__control-item--active:hover {
        background-color: var(--tab-primary-active);
        color: #fff;
      }
.tabs--buttons .tabs__control {
      margin: 24px;
      padding: 0;
      border: 0;
      overflow: hidden;
      border-radius: var(--border-radius);
      background-color: #fff;
    }
.tabs--buttons .tabs__control-item {
      margin: 0;
      padding: 8px;
      flex: 1;
      background-color: #fff;
      border-top: 1px solid var(--sky);
      border-bottom: 1px solid var(--sky);
      line-height: 1.43;
      border-right: 1px solid var(--sky);
    }
.tabs--buttons .tabs__control-item:first-child {
        border-left: 1px solid var(--sky);
        border-radius: var(--border-radius) 0 0 var(--border-radius);
      }
.tabs--buttons .tabs__control-item:last-child {
        border-radius: 0 var(--border-radius) var(--border-radius) 0;
      }
.tabs--buttons .tabs__control-item:hover {
        background-color: var(--sky-l3);
      }
.tabs--buttons .tabs__control-item--active, .tabs--buttons .tabs__control-item--active:hover, .tabs--buttons .tabs__control-item--active:focus {
        background-color: var(--sky-l2);
      }
.tabs--tabs-left .tabs__control {
      padding: 0 24px;
      justify-content: flex-start;
    }
.tabs--tabs-left .tabs__control-item {
      padding: 0;
      flex: initial;
    }
.tabs--tabs-left .tabs__control-item:not(:last-child) {
        margin-right: 40px;
      }
.tabs--tabs-offset-right .tabs__control {
      padding: 0 24px;
      justify-content: flex-start;
    }
.tabs--tabs-offset-right .tabs__control-item {
      padding: 0;
    }
.tabs--tabs-offset-right .tabs__control-item:not(:last-child) {
        margin-right: 40px;
      }
.tabs--space-between .tabs__control {
      justify-content: space-between;
    }
.tabs--space-between .tabs__control-item {
      flex: initial;
    }
.tabs--offset-zero .tabs__control {
      margin: 0;
    }
.text--subheading {
    font-size: var(--subheading-size);
    font-weight: var(--subheading-weight);
    line-height: var(--subheading-line-height);
  }
.text--heading {
    font-size: var(--heading-size);
    font-weight: var(--heading-weight);
    line-height: var(--heading-line-height);
  }
.text--caption {
    font-size: var(--caption-size);
    font-weight: var(--caption-weight);
    line-height: var(--caption-line-height);
  }
.text--size-xs {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-xs);
    line-height: var(--font-line-height-xs);
  }
.text--size-lg {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-lg);
    line-height: var(--font-line-height-lg);
  }
.text--size-xl {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-xl);
    line-height: var(--font-line-height-xl);
  }
.text--uppercase {
    text-transform: uppercase;
  }
.text--align-center {
      text-align: center;
    }
.text--danger {
    color: var(--danger);
  }
.text--light {
    color: var(--ink-l2);
  }
.text--extra-light {
    color: var(--ink-l3);
  }
.text--preline {
    white-space: pre-line;
  }
.text--relative {
    position: relative;
  }
.text sup {
    line-height: 0;
  }
.textarea__input {
    display: block;
    width: 100%;
    height: var(--textarea-height);
    padding: 8px 12px;
    border: solid 1px var(--sky);
    font-size: var(--font-base-size);
    background-color: #fff;
    border-radius: var(--border-radius);
    resize: none;
    transition: box-shadow 0.2s ease-out, border-color 0.2s ease-out;
  }
.textarea__input:focus {
      box-shadow: 0 0 0 2px var(--brand);
      outline: none;
    }
.textarea__input::placeholder {
      color: var(--sky);
      opacity: 1;
    }
.textarea__label {
    display: inline-block;
    font-size: var(--font-base-size);
    margin-bottom: 6px;
  }
.textarea__message {
    display: flex;
    position: absolute;
    bottom: -22px;
    left: 0;
    align-items: center;
    color: var(--danger-d1);
  }
.textarea__wrapper {
    position: relative;
  }
.textarea__message-ico {
    display: inline-block;
    width: 18px;
    height: 16px;
    margin-right: 6px;
  }
.textarea--danger .textarea__input {
      background-color: var(--danger-l2);
      border-color: var(--danger);
    }
.textarea--danger .textarea__input:focus {
        box-shadow: 0 0 0 2px var(--danger);
      }
.textarea--disabled {
    cursor: not-allowed;
  }
.textarea--disabled .textarea__input, .textarea--disabled .textarea__input[disabled] {
      background-color: var(--sky-l2);
      border-color: var(--sky);
      color: var(--input-color-disabled);
      pointer-events: none;
    }
.textarea--disabled .textarea__arrow {
      color: var(--input-color-disabled);
    }
.textarea--subheading .textarea__label {
      display: block;
      margin-bottom: 0;
      padding-bottom: 8px;
      font-size: var(--subheading-size);
      font-weight: var(--subheading-weight);
      line-height: var(--subheading-line-height);
    }
.textarea--uppercase .textarea__label {
      text-transform: uppercase;
    }
.input-text {
  width: 100%;
}
.input-text__input {
    width: 100%;
    height: var(--input-height);
    padding: 0 12px;
    border: solid 1px var(--sky);
    font-size: var(--font-base-size);
    background-color: #fff;
    text-overflow: ellipsis;
    border-radius: var(--border-radius);
    color: var(--ink);
    appearance: none;
    transition: color 0.2s ease-out, box-shadow 0.2s ease-out, border-color 0.2s ease-out;
  }
.input-text__input:focus {
      box-shadow: inset 0 0 0 1px var(--brand);
      outline: none;
      border-color: var(--brand);
    }
.input-text__input--search {
      padding-left: 34px;
      padding-right: 36px;
    }
.input-text__input[type="search"]::-webkit-search-decoration, .input-text__input[type="search"]::-webkit-search-cancel-button, .input-text__input[type="search"]::-webkit-search-results-button, .input-text__input[type="search"]::-webkit-search-results-decoration {
      display: none;
    }
.input-text__ico {
    display: block;
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    color: var(--ink-l3);
    transform-origin: center center;
  }
.input-text__label {
    display: block;
    font-size: var(--font-base-size);
    padding-bottom: 4px;
  }
.input-text__message {
    display: flex;
    position: relative;
    align-items: center;
    margin-top: 8px;
    color: var(--danger-d1);
  }
.input-text__wrapper {
    position: relative;
  }
.input-text__message-ico {
    display: inline-block;
    position: absolute;
    width: 24px;
    height: 24px;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    font-size: 0;
    color: var(--danger);
  }
.input-text__reset-btn {
    position: absolute;
    width: 12px;
    height: 12px;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    font-size: 0;
    color: var(--ink-l3);
    transition: color 0.2s ease-out;
  }
.input-text__reset-btn:hover, .input-text__reset-btn:focus {
      color: var(--ink-l1);
    }
.input-text--size-xs {
      --input-height: 30px;
      --padding-input: 8px;
    }
.input-text--danger .input-text__input {
      border-color: var(--danger);
      padding-right: 32px;
    }
.input-text--danger .input-text__input:focus {
        box-shadow: inset 0 0 0 1px var(--danger);
      }
.input-text--disabled {
    cursor: not-allowed;
  }
.input-text--disabled .input-text__input, .input-text--disabled .input-text__input[disabled] {
      background-color: var(--sky-l2);
      border-color: var(--sky);
      color: var(--input-color-disabled);
      pointer-events: none;
    }
.input-text--disabled .input-text__arrow {
      color: var(--input-color-disabled);
    }
.input-text--xs .input-text__input {
      --input-height: 30px;
    }
.input-text--subheading .input-text__label {
      display: block;
      padding-bottom: 8px;
      font-size: var(--subheading-size);
      font-weight: var(--subheading-weight);
      line-height: var(--subheading-line-height);
    }
.input-text--flat-message {
    position: relative;
  }
.input-text--flat-message .input-text__message {
      position: absolute;
      top: 100%;
      right: 0;
      padding: 8px;
      font-size: var(--caption-font-size);
      color: var(--ink);
      background-color: #fff;
      line-height: var(--caption-line-height);
      box-shadow: 0 2px 16px 0 rgba(33, 39, 54, 0.1);
      border: 1px solid var(--border-color);
      border-radius: var(--border-radius);
      z-index: var(--max-index);
    }
.input-text--flat-message .input-text__message::before {
        content: "";
        display: block;
        position: absolute;
        width: 8px;
        height: 8px;
        top: -4px;
        right: 14px;
        transform: rotate(45deg);
        background-color: #fff;
        border: 1px solid var(--border-color);
        font-size: 0;
        border-right-width: 0;
        border-bottom-width: 0;
      }
.input-text--uppercase .input-text__label {
      text-transform: uppercase;
    }
.input-text .zoom-icon-exited, .input-text .zoom-icon-exiting {
    animation: zoom-icon-out 0.2s var(--ease-in-quad) forwards;
    transform-origin: center;
  }
.input-text .zoom-icon-entered, .input-text .zoom-icon-entering {
    opacity: 0;
    animation: zoom-icon-in 0.2s var(--ease-in-quad) forwards;
  }
@keyframes zoom-icon-in {
  0% {
    transform: scale(0.9) translateY(-50%);
    opacity: 0;
  }

  100% {
    transform: scale(1) translateY(-50%);
    opacity: 1;
  }
}
@keyframes zoom-icon-out {
  0% {
    transform: scale(1) translateY(-50%);
    opacity: 1;
  }

  100% {
    transform: scale(0.9) translateY(-50%);
    opacity: 0;
  }
}
.tooltip {
  display: none;
  position: absolute;
  user-select: none;
  text-transform: none;
  z-index: 9999;
  --triangle-size: 4px;
  --offset-container: 10px;
}
.tooltip--active {
    display: block;
  }
.tooltip--top {
    bottom: 100%;
    padding-bottom: 10px;
  }
.tooltip--top .tooltip__inner::before {
      bottom: calc(-1 * var(--triangle-size));
      border-top: var(--triangle-size) solid var(--ink-l1);
      border-left: var(--triangle-size) solid transparent;
      border-right: var(--triangle-size) solid transparent;
    }
.tooltip--bottom {
    top: 100%;
    padding-top: var(--offset-container);
  }
.tooltip--bottom .tooltip__inner::before {
      top: calc(-1 * var(--triangle-size));
      border-bottom: var(--triangle-size) solid var(--ink-l1);
      border-left: var(--triangle-size) solid transparent;
      border-right: var(--triangle-size) solid transparent;
    }
.tooltip--left {
    left: 0;
  }
.tooltip--left .tooltip__inner::before {
      left: 11px;
    }
.tooltip--center {
    left: 50%;
    transform: translate(-50%, 0);
  }
.tooltip--center .tooltip__inner::before {
      left: 50%;
      transform: translate(-50%, 0);
    }
.tooltip--center-right {
      top: 50%;
      left: 100%;
      transform: translateY(-50%);
      padding-left: var(--offset-container);
    }
.tooltip--center-right .tooltip__inner::before {
        top: 50%;
        left: calc(-1 * var( --triangle-size));
        transform: translateY(-50%);
        border-right: var( --triangle-size) solid var(--ink-l1);
        border-bottom: var( --triangle-size) solid transparent;
        border-top: var( --triangle-size) solid transparent;

      }
.tooltip--center-left {
      top: 50%;
      right: 100%;
      transform: translateY(-50%);
      padding-right: var(--offset-container);
    }
.tooltip--center-left .tooltip__inner::before {
        top: 50%;
        right: calc(-1 * var( --triangle-size));
        transform: translateY(-50%);
        border-left: var( --triangle-size) solid var(--ink-l1);
        border-bottom: var( --triangle-size) solid transparent;
        border-top: var( --triangle-size) solid transparent;

      }
.tooltip--right {
    top: 50%;
    left: 100%;
  }
.tooltip--right .tooltip__inner::before {
      top: 50%;
      left: calc(-1 * var( --triangle-size));
      transform: translateY(-50%);
      border-top: var( --triangle-size) solid var(--ink-l1);
      border-left: var( --triangle-size) solid transparent;
      border-right: var( --triangle-size) solid transparent;
    }
.tooltip--width-md {
      width: 163px;
      min-width: 163px;
    }
.tooltip--width-lg {
      width: 244px;
      min-width: 244px;
    }
.tooltip--width-auto {
      width: auto;
    }
.tooltip--width .tooltip__inner {
      white-space: normal;
    }
.tooltip--flex .tooltip__inner {
      display: flex;
      align-items: center;
    }
.tooltip--bottom-right {
    bottom: calc(-1 * calc(var(--triangle-size) / 2));
    left: calc(-1 * var(--triangle-size));
  }
.tooltip--bottom-right .tooltip__inner {
      border: solid 1px var(--sky-l1);
    }
.tooltip--bottom-right .tooltip__inner::before {
        content: "";
        display: block;
        position: absolute;
        width: var(--triangle-size);
        height: var(--triangle-size);
        bottom: 10px;
        left: calc(var(--triangle-size) + 1px);
        transform: rotate(0);
      }
.tooltip--light .tooltip__inner {
      padding: 12px 16px;
      background-color: var(--sky-l2);
      color: var(--ink);
    }
.tooltip--light .tooltip__inner::before {
        width: var(--triangle-size);
        height: var(--triangle-size);
        transform: rotate(45deg);
        background-color: var(--sky-l2);
        border-width: 0 0 1px 1px;
        border-style: solid;
        border-color: var(--sky-l1);
      }
.tooltip--text-align-left .tooltip__inner {
        text-align: left;
      }
.tooltip--offset-small {
    --offset-container: 4px;
  }
.tooltip__inner {
    position: relative;
    padding: 8px;
    background-color: var(--ink-l1);
    text-align: center;
    font-size: var(--caption-size);
    white-space: nowrap;
    cursor: default;
    border-radius: 4px;
    color: #fff;
  }
.tooltip__inner::before {
      content: "";
      display: block;
      position: absolute;
      width: 0;
      height: 0;
    }
.tooltip-active {
  position: relative;
  font-size: 0;
  cursor: pointer;
}
.tooltip-active:hover .tooltip {
      display: block;
      opacity: 0;
    }
.tooltip-active:hover .tooltip--top.tooltip--center {
      animation: fade-down-center-in  0.2s ease-out forwards;
    }
.tooltip-active:hover .tooltip--bottom.tooltip--center {
      animation: fade-up-center-in 0.2s ease-out forwards;
    }
.tooltip-active:hover .tooltip--left.tooltip--bottom, .tooltip-active:hover .tooltip--right.tooltip--bottom {
      animation: fade-up-in 0.2s ease-out forwards;
    }
.tooltip-active:hover .tooltip--bottom {
      animation: fade-up-in 0.2s ease-out forwards;
    }
.tooltip-active:hover .tooltip--top {
      animation: fade-down-in 0.2s ease-out forwards;
    }
.tooltip-active:hover .tooltip--center-right {
      animation: fade-left-center-in 0.2s ease-out forwards;
    }
.tooltip-active:hover .tooltip--center-left {
      animation: fade-right-center-in 0.2s ease-out forwards;
    }
.badge {
  display: block;
  position: absolute;
  width: 12px;
  height: 12px;
  top: -6px;
  right: -4px;
  border-radius: 50%;
  line-height: normal;
  background-color: var(--brand);
  border: solid 3px #fff;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.11);
}
.button__input {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    visibility: hidden;
  }
.button--empty-style {
    padding: 0;
    border: 0;
    background-color: none;
    box-shadow: none;
    color: var(--ink-l2);
  }
.button--empty-style:focus, .button--empty-style:hover, .button--empty-style:active {
      color: var(--ink-l2);
    }
.button--as-link .button__input:focus + .button__inner {
      color: var(--brand);
    }
.color {
  --size: 24px;

  display: block;
  position: relative;
  width: var(--size);
  height: var(--size);
  border-radius: var(--border-radius);
  cursor: pointer;
  color: var(--ink-l1);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
  transition: box-shadow .2s ease-out, color .2s ease-out;
}
.color::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: svg-load("img/pattern.svg");
    background-repeat: repeat;
    border-radius: var(--border-radius);
    z-index: -1;
  }
.color--size-md {
      --size: 56px;
    }
.color--wizard {
    color: var(--sky);
    background-color: #fff;
  }
.color--wizard .color__wizard {
      display: flex;
    }
.color--wizard::before {
      background-image: none;
    }
.color--wizard:hover, .color--wizard:focus {
      color: var(--sky-d2);
    }
.color--settings {
    position: relative;
    overflow: hidden;
  }
.color--settings .color__overlay {
      display: block;
    }
.color--settings:hover .color__overlay {
        opacity: 1;
        background-color: rgba(0, 0, 0, 0.5);
      }
.color--active {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--brand), inset 0 0 0 1px rgba(0, 0, 0, 0.08);
  }
.color--empty {
    background-color: #fff;
    overflow: hidden;
  }
.color--empty::after {
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      top: 1px;
      left: 0;
      background-image: linear-gradient( to top left,
      transparent 50%,
      var(--danger),
      transparent calc(50% + 2px));
    }
.color--empty::before {
      z-index: 2;
      background-image: none;
      box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
    }
.color__overlay {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.2s ease-out;
  }
.color__icon {
    position: absolute;
    width: 44px;
    height: 33px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
.wizard {
  display: none;
  height: var(--size);
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.wizard__value {
    display: block;
    position: absolute;
    width: 100%;
    height: 4px;
    bottom: 0;
    left: 0;
    border-radius: 0 0 var(--border-radius) var(--border-radius);
    border: 1px solid #ebebeb;
    border-top: 0;
  }
.wizard__icon {
    width: 16px;
    height: 16px;
  }
.color-input {
  --value-size: 2px;

  display: flex;
  position: relative;
  width: 24px;
  height: 24px;
  align-items: center;
  border-radius: var(--border-radius);
  justify-content: center;
  cursor: pointer;
  background-color: #fff;
  backface-visibility: hidden;
  color: var(--sky);
  transition: border-color 0.2s ease-out, box-shadow .2s ease-out;
  box-shadow: 0 0 0 1px var(--sky);
}
.color-input:hover, .color-input:focus {
    color: var(--sky-d2);
  }
.color-input--size-md {
      --icon-size: 24px;
      --value-size: 6px;
    }
.color-input--size-lg {
      --icon-size: 24px;
      --value-size: 6px;
      width: 72px;
      height: 72px;
      border: 2px dashed var(--sky);
    }
.color-input--size-lg:hover {
        border-color: var(--brand);
      }
.color-input--active {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--brand), inset 0 0 0 1px var(--sky);
  }
.color-input__value {
    display: block;
    position: absolute;
    height: var(--value-size);
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 0 0 3px 3px;
  }
.modal {
  --box-shadow: 0 2px 8px 0 rgba(33, 39, 54, 0.08);
  --btn-close-size: 24px;
  --overlay-color: #000;
  --overlay-opacity: 0.2;

  display: flex;
  position: fixed;
  width: 100%;
  height: 100%;
  top: var(--top-nav-height, 48px);
  left: 0;
  padding: 20px;
  justify-content: center;
  align-items: center;
  z-index: 10;
}
.modal__overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
  }
.modal--message .modal__drag-area {
      display: none;
    }
.modal--message .modal__overlay {
      background-color: var(--overlay-color);
      opacity: var(--overlay-opacity);
      animation: fadeOverlay 0.2s ease-out forwards;
    }
.modal--overlay-in .modal__overlay {
      animation: overlayIn .2s ease-out both;
    }
.modal--full-height {
    top: 0;
  }
.modal__input .input-text__input {
      padding: 0 8px;
      font-size: 20px;
    }
.modal__inners-wrapper {
    position: relative;
    border-radius: var(--border-radius);
    transition: box-shadow .2s ease-out, transform 0.2s ease-out, height 0.2s ease-out;
  }
.modal__inners-wrapper--overflow {
      overflow: hidden;
    }
.modal__inners-wrapper--inner-bg .modal__inner {
        background-color: #fff;
        box-shadow: var(--box-shadow);
      }
.modal__inners-wrapper .modal__inner:not(:last-child) {
      overflow: hidden;
    }
.modal__inners-wrapper--entering .modal__inner:not(:last-child), .modal__inners-wrapper--exiting .modal__inner:not(:last-child) {
        position: absolute;
        right: 0;
        left: 0;
        overflow: initial;
      }
.modal__inners-wrapper--entered .modal__inner, .modal__inners-wrapper--exited .modal__inner {
        height: 0;
      }
.modal__inners-wrapper--entered .modal__inner:last-child, .modal__inners-wrapper--exited .modal__inner:last-child {
        position: relative;
        height: auto;
        top: 0;
      }
.modal__inner {
    display: flex;
    position: relative;
    width: 100%;
    flex-direction: column;
    border-radius: var(--border-radius);
    z-index: 2;
    box-shadow: var(--box-shadow);
    background-color: #fff;
  }
.modal__inner--slide {
      position: absolute;
      top: 0;
      bottom: 0;
      left: -3px;
      z-index: 1;
      background-color: #fff;
      box-shadow: var(--box-shadow);
    }
.modal__inner--slide-in {
        position: absolute;
        left: 0;
        z-index: 10;
        background-color: #fff;
        border-radius: var(--border-radius);
        box-shadow: var(--box-shadow);
      }
.modal__title {
    display: flex;
    width: 100%;
    font-size: var(--font-size-xs);
    line-height: var(--line-height-base);
    font-weight: 600;
    justify-content: space-between;
    align-items: center;
  }
.modal__title--start {
      justify-content: flex-start;
    }
.modal__title-inner {
      display: inline-block;
      padding: 0 8px;
      font-size: var(--font-size-xs);
      line-height: var(--line-height-base);
      font-weight: 600; 
    }
.modal__header {
    display: flex;
    position: relative;
    padding: 18px 24px;
    cursor: move;
    user-select: none;
    align-items: center;
    border-radius: var(--border-radius) var(--border-radius) 0 0; 
    justify-content: space-between;
    background-color: var(--sky-l2);
    font-size: var(--font-size-xs);
  }
.modal__content {
    display: flex;
    min-height: 0;
    flex-direction: column;
    flex: 1;
    user-select: none;
  }
.modal__close-btn {
    display: flex;	
    width: var(--btn-close-size);	
    height: var(--btn-close-size);	
    right: 20px;
    flex: 0 0 var(--btn-close-size);
    font-size: 0;
    box-sizing: content-box;
    color: var(--ink-l3);
    transition: color 0.2s ease-in;
  }
.modal__close-btn--left {
      order: -1;
    }
.modal__close-btn:hover, .modal__close-btn:focus, .modal__close-btn:active {
      color: var(--ink);
    }
.modal__footer {
    padding: 10px 24px;
    text-align: right;
    box-shadow: var(--border-shadow);
  }
.modal__footer .button {
        margin-right: 8px;
      }
.modal__footer .button:last-child {
          margin-right: 0;
        }
.modal--size-sm .modal__inners-wrapper {
    width: 400px;
  }
.modal--size-md .modal__inners-wrapper {
    width: 488px;
  }
.modal--size-lg .modal__inners-wrapper {
    width: 1040px;
  }
.modal--size-sm .modal__inner--slide {
    width: 403px;
  }
.modal--separator .modal__header {
      border-bottom: 1px solid var(--sky);
    }
.modal--with-tab .modal__header {
      padding: 18px 24px;
    }
.modal--size-xs .modal__drag-area {
      display: none;
    }
.modal--size-xs .modal__header {
      padding: 12px 16px;
      border-radius: var(--border-radius) var(--border-radius) 0 0;
    }
.modal--size-xs .modal__inner {
      max-width: 280px;
    }
.modal--size-xs .modal__title {
      text-transform: uppercase;
      font-size: var(--caption-size);
      font-weight: 600;
    }
.modal--size-xs .modal__title-overflow {
        overflow: hidden;
      }
.modal--size-xs .modal__close-btn {
      right: 12px;
    }
.modal--tabs .modal__header {
      padding-bottom: 4px;
      border-bottom: 0;
    }
.modal--type-full {
      height: auto;
      top: 0;
      right: 0;
      bottom: 0;
      padding: 0;
      align-items: stretch;
    }
.modal--type-full .modal__inners-wrapper {
        display: flex;
        flex: 1;
      }
.modal--type-full .modal__inner {
        box-shadow: none;
        flex: 1;
        padding-left: 64px;
        padding-right: 64px;
        background-color: var(--sky-l2);
      }
.modal--type-full .modal__drag-area {
        display: none;
      }
.modal--type-full .modal__title {
        font-size: 26px;
        line-height: 1.23;
      }
.modal--type-full .modal__header {
        background-color: transparent;
        padding-left: 0;
        padding-right: 0;
        padding-bottom: 17px;
        border-bottom: 1px solid var(--separator-color);
      }
.modal--type-full .modal__close-btn {
        right: 0;
      }
.modal--type-full .modal__content {
        padding: 20px 0 0;
      }
.slide-right-entering, .slide-right-entered {
  transform: translateX(-50%);
}
.slide-right-exiting {
  transform: translateX(50%);
  transition-delay: 0.3s;
}
.slide-right-exited {
  transform: translateX(0);
}
@keyframes overlayIn {
  0% {
    background-color: rgba(33, 39, 54, 0);
  }

  100% {
    background-color: rgba(33, 39, 54, 0.8);
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
.text-elipsis {
  max-width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.text-elipsis--wrap {
    white-space: wrap;
  }.mb-4 {
      margin-bottom: 4px;
    }
    .mb-8 {
      margin-bottom: 8px;
    }
    .mb-12 {
      margin-bottom: 12px;
    }
    .mb-16 {
      margin-bottom: 16px;
    }
    .mb-20 {
      margin-bottom: 20px;
    }
    .mb-24 {
      margin-bottom: 24px;
    }
    .mb-28 {
      margin-bottom: 28px;
    }
    .mb-32 {
      margin-bottom: 32px;
    }
  .mt-4 {
      margin-top: 4px;
    }
  .mt-8 {
      margin-top: 8px;
    }
  .mt-12 {
      margin-top: 12px;
    }
  .mt-16 {
      margin-top: 16px;
    }
  .mt-20 {
      margin-top: 20px;
    }
  .mt-24 {
      margin-top: 24px;
    }
  .mr-4 {
      margin-right: 4px;
    }
  .mr-8 {
      margin-right: 8px;
    }
  .mr-12 {
      margin-right: 12px;
    }
  .mr-16 {
      margin-right: 16px;
    }
  .mr-20 {
      margin-right: 20px;
    }
  .mr-24 {
      margin-right: 24px;
    }
  .mr-28 {
      margin-right: 28px;
    }
  .mr-32 {
      margin-right: 32px;
    }
  .ml-4 {
      margin-left: 4px;
    }
  .ml-8 {
      margin-left: 8px;
    }
  .ml-12 {
      margin-left: 12px;
    }
  .ml-16 {
      margin-left: 16px;
    }
  .ml-20 {
      margin-left: 20px;
    }
  .ml-24 {
      margin-left: 24px;
    }
  .p-4 {
      padding: 4px;
    }
  .p-8 {
      padding: 8px;
    }
  .p-12 {
      padding: 12px;
    }
  .p-16 {
      padding: 16px;
    }
  .p-20 {
      padding: 20px;
    }
  .p-24 {
      padding: 24px;
    }
  .pt-4 {
      padding-top: 4px;
    }
  .pt-8 {
      padding-top: 8px;
    }
  .pt-12 {
      padding-top: 12px;
    }
  .pt-16 {
      padding-top: 16px;
    }
  .pt-20 {
      padding-top: 20px;
    }
  .pt-24 {
      padding-top: 24px;
    }
  .pb-4 {
      padding-bottom: 4px;
    }
  .pb-8 {
      padding-bottom: 8px;
    }
  .pb-12 {
      padding-bottom: 12px;
    }
  .pb-16 {
      padding-bottom: 16px;
    }
  .pb-20 {
      padding-bottom: 20px;
    }
  .pb-24 {
      padding-bottom: 24px;
    }
  .pb-32 {
      padding-bottom: 32px;
    }
  .pb-36 {
      padding-bottom: 36px;
    }
  .pb-40 {
      padding-bottom: 40px;
    }
  .pl-4 {
      padding-left: 4px;
    }
  .pl-8 {
      padding-left: 8px;
    }
  .pl-12 {
      padding-left: 12px;
    }
  .pl-16 {
      padding-left: 16px;
    }
  .pl-20 {
      padding-left: 20px;
    }
  .pl-24 {
      padding-left: 24px;
    }
  .pl-32 {
      padding-left: 32px;
    }
  .pr-4 {
      padding-right: 4px;
    }
  .pr-8 {
      padding-right: 8px;
    }
  .pr-12 {
      padding-right: 12px;
    }
  .pr-16 {
      padding-right: 16px;
    }
  .pr-20 {
      padding-right: 20px;
    }
  .pr-24 {
      padding-right: 24px;
    }
  .pr-32 {
      padding-right: 32px;
    }
  .px-4 {
      padding-left: 4px;
      padding-right: 4px;
    }
  .px-8 {
      padding-left: 8px;
      padding-right: 8px;
    }
  .px-12 {
      padding-left: 12px;
      padding-right: 12px;
    }
  .px-16 {
      padding-left: 16px;
      padding-right: 16px;
    }
  .px-20 {
      padding-left: 20px;
      padding-right: 20px;
    }
  .px-24 {
      padding-left: 24px;
      padding-right: 24px;
    }
  .px-30 {
      padding-left: 30px;
      padding-right: 30px;
    }
  .py-4 {
      padding-top: 4px;
      padding-bottom: 4px;
    }
  .py-8 {
      padding-top: 8px;
      padding-bottom: 8px;
    }
  .py-12 {
      padding-top: 12px;
      padding-bottom: 12px;
    }
  .py-16 {
      padding-top: 16px;
      padding-bottom: 16px;
    }
  .py-20 {
      padding-top: 20px;
      padding-bottom: 20px;
    }
  .py-24 {
      padding-top: 24px;
      padding-bottom: 24px;
    }
  .separator {
    width: 100%;
    height: 1px;
    background-color: var(--separator-color);
  }
  .text-elipsis {
    max-width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
  .text-elipsis--wrap {
      white-space: wrap;
    }
  .align-center {
      text-align: center;
    }
  .align-middle {
      vertical-align: middle;
    }

html {
  font-size: var(--font-base-size);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  line-height: var(--line-height-base);
  font-smooth: auto;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body, html {
  margin: 0;
}

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

button, iframe, figure {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  border-radius: 0;
  font-size: inherit;
  outline: none;
}

input {
  border: 0;
  box-shadow: none;
}

input:focus {
    outline: none;
  }

h1, h2, h3, h4, h5, h6, p {
  margin: 0;
  padding: 0;
}

input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus input:-webkit-autofill, textarea:-webkit-autofill, textarea:-webkit-autofill:hover textarea:-webkit-autofill:focus, select:-webkit-autofill, select:-webkit-autofill:hover, select:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink);
  -webkit-box-shadow: 0 0 0 1000px transparent inset;
  transition: background-color 5000s ease-in-out 0s;
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
/* @import "../components/template/style.css"; */
/*@import "../components/settings.css";*/
/*@import "../components/palette/style.css";*/
.loading-screen_19j {
  position: fixed;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  top: 0px;
  right: 0px;
  left: 0px;
  bottom: 0px;
  background: #fff;
}
.login-screen--bg_3yK {
    position: fixed;
    top: -40px;
    right: -40px;
    left: -40px;
    bottom: -40px;
    background-image: url(/static/media/bg.edb91386.png);
    background-size: cover;
    filter: blur(26px);
  }
.login-screen--content_2Mo {
    position: fixed;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    top: 0px;
    right: 0px;
    left: 0px;
    bottom: 0px;
    background: rgba(0, 0, 0, 0.4);
  }
.login-screen--avatar_2f3 {
    width: 80px;
    height: 80px;
    margin-top: -200px;
    border-radius: 50%;
    background-image: url(/static/media/av.bd4a8020.png);
    background-size: cover;
  }
.login-screen--title_2OA {
    color: rgb(240, 240, 240);
    font-size: 17px;
    font-weight: 500;
    margin: 20px 0;
  }
.login-screen--button_17o {
    width: 30px;
    height: 30px;
    background-size: cover;
    background-image: url(/static/media/lg.171d099f.png);
    opacity: 0.7;
    transition: opacity 0.4s ease-in-out;
  }
.login-screen--button_17o:hover {
      opacity: 1;
    }
.create_link_dXg {
  cursor: pointer;
}
.sandbox_ho4 {
  --container: 1088px;
}
.container_2T8 {
  display: flex;
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
  flex-direction: column;
  padding-left: 24px;
  padding-right: 24px;
}
.container--scroll_3HR {
    height: calc(100vh - 148px);
  }
.container--settings_3v4 {
    --container: 1240px;
  }
.header_-Y7 {
  display: flex;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: #fff;
  height: var(--top-nav-height);
  align-items: stretch;
  z-index: 4;
  border-bottom: 1px solid var(--sky);
}
.header_-Y7:before {
    content: '';
    position: absolute;
    left: 0;
    bottom: -25px;
    width: 100%;
    height: 24px;
    background-color: #fff;
    z-index: 5;
  }
.header__logo_lDh {
    display: inline-flex;
    padding: 0 16px;
    align-items: center;
    border-right: 1px solid var(--separator-color);
  }
.header__nav_23T {
    display: flex;
    width: 100%;
    padding: 0 16px;
    justify-content: space-between;
    align-items: center;
  }
.header__button__1M {
    display: flex;
    align-items: center;
    color: var(--ink-l3);
    transition: color 0.2s ease-out;
  }
.header__button__1M:hover {
      color: var(--ink);
    }
.header__drop-btn_Fhp {
    display: flex;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    color: var(--sky);
    border-radius: var(--border-radius);
    background-color: var(--sky-l1);
    transition: color 0.2s ease-out;
  }
.header__drop-btn_Fhp:focus, .header__drop-btn_Fhp:hover {
      box-shadow: none;
      color: var(--sky-d2);
    }
.panel_166 {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  padding: 24px 0;
  z-index: 3;
  box-shadow: 0 2px 4px 0 rgba(231, 231, 231, 0.5);
}
.account-btn_266 {
  display: flex;
  align-items: center;
  color: var(--ink-l3);
  transition: color 0.2s ease-out;
}
.account-btn_266:hover, .account-btn_266:focus {
    color: var(--ink-l2);
  }
.account-btn__pic_3z6 {
    display: block;
    width: 30px;
    height: 30px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 50%;
    margin-right: 8px;
  }
.input-wrapper_2Pl {
  position: relative;
}
.input-wrapper__btn_1dC {
    position: absolute;
    right: 5px;
    bottom: 5px;
    padding: 2px;
  }
.scroll-inner_aGf {
  padding-bottom: 100px;
}
.template_1ex {
  display: flex;
  height: 72px;
  cursor: pointer;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--sky);
}

  .template__name_1wp, .template__label_3xt {
    max-width: 33.333%;
    flex-basis: 33.333%;
  }

  .template__label_3xt {
    text-align: right;
  }

.palette_31G {
  display: flex;
  width: 100%;
  height: 24px;
  max-width: 420px;
  padding: 1px;
  overflow: hidden;
  border-radius: var(--border-radius);
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.08);
}

.palette__item_Xvc {
    flex: 1;
  }

.palette__item_Xvc:not(:last-child) {
      border-right: 1px solid rgba(0, 0, 0, 0.08);
    }
.avatar__wrapper_20v {
    display: block;
    margin: auto;
  }
  .avatar__image_1x9 {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }
.label_1kD {
  display: inline-block;
  min-width: 88px;
  border: 1px solid;
  text-align: center;
  text-transform: uppercase;
  line-height: 22px;
  border-radius: var(--border-radius-md);
  font-weight: var(--subheading-weight);
  font-size: var(--subheading-size);
}

  .label--draft_3dT {
    color: var(--ink-l2);
    background-color: var(--sky-l1);
    border-color: var(--sky);
  }

  .label--in-review_1_u {
    color: var(--warning-d2);
    background-color: var(--warning-l2);
    border-color: var(--warning);
  }

  .label--published_3Yz {
    color: var(--success-d2);
    background-color: var(--success-l2);
    border-color: var(--success-d1);
  }
.settings_2so {
  --preview-height: 128px;
  --control-width: 520px;
  --preview-width: 416px;

  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-end;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--sky);
}

@media (max-width: 1199px) {

.settings_2so {
    flex-wrap: wrap;
    justify-content: flex-start
}
  }

.settings--offset-collapse_3gh {
    padding-bottom: 0;
    border-bottom: 0;
  }

.settings--color_3p1 {
    border-bottom: 0;
    padding-bottom: 62px;
  }

.settings--add_2PK {
    border-top: 1px solid var(--sky);
    margin-top: 47px;
  }

.settings--start_3aK {
    justify-content: flex-start;
  }

.settings__name_ZIN {
    position: -webkit-sticky;
    position: sticky;
    top: 170px;
    max-width: 193px;
    flex-basis: 193px;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-xs);
    padding-bottom: 50px;
    flex: 1;
  }

.settings__name--static_1jX {
      position: static;
    }

@media (max-width: 1199px) {

.settings__name_ZIN {
      width: 100%;
      max-width: 100%;
      flex-basis: auto;
      padding-bottom: 16px;
      justify-content: flex-start
  }
    }

.settings__control_2iN {
    display: flex;
    position: relative;
    width: var(--control-width);
    flex-direction: column;
    align-items: stretch;
  }

@media (max-width: 1199px) {

.settings__control_2iN {
      margin-bottom: 24px
  }
    }

.settings__control--row_yEB {
      flex-direction: row;
      --control-width: auto;
    }

.settings__control--start_12B {
      align-items: flex-start;
    }

.settings__control--full_2VG {
      width: 100%;
      flex:1
    }

.settings__control--width-full_3nV {
      width: 100%;
    }

.settings__label_tLf {
    position: relative;
    text-align: center;
  }

.settings__label_tLf:before {
      content: "";
      position: absolute;
      width: 100%;
      height: 1px;
      top: 50%;
      left: 0;
      transform: translateY(-50%);
      background-color: var(--sky);
    }

.settings__label-inner_2rM {
      display: inline-block;
      position: relative;
      padding: 0 8px;
      font-size: var(--subheading-size);
      font-weight: var(--subheading-weight);
      text-transform: uppercase;
      background-color: #fff;
    }

.settings__input_s4O {
    width: 136px;
  }

.settings__input--md_7cY {
      width: 168px;
    }

.settings__input--xs_1_0 {
      min-width: 96px;
    }

.settings__input--drop_Pbp {
      display: flex;
      width: 103px;
      align-items: flex-end;
    }

.settings__drop-btn_2TN {
    display: flex;
    width: 18px;
    height: 30px;
    color: var(--sky);
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius);
    transition: background-color 0.2s ease-out, color 0.2s ease-out;
  }

.settings__drop-btn_2TN:hover {
      background-color: var(--sky-l1);
      color: var(--ink-l1);
    }

.settings__message_2Ps {
    display: flex;
    position: absolute;
    bottom: 30px;
    left: 0;
    line-height: normal;
    font-size: 12px;
    font-weight: 400;
    align-items: center;
    color: var(--danger-d1);
  }

@media (max-width: 1199px) {

.settings__message_2Ps {
      bottom: 100%
  }
    }

.settings__message--center_14V {
      bottom: 8px;
      left: 50%;
      transform: translateX(-50%);
    }

.settings__message--attention_1ZN {
      color: var(--warning-d2);
    }

.settings__preview_27O {
    display: flex;
    width: var(--preview-width);
    min-height: var(--preview-height);
    margin-left: 32px;
    border: solid 1px var(--sky-l1);
  }

@media (max-width: 1199px) {

.settings__preview_27O {
      margin-left: 0
  }
    }

.settings__preview--size-xs_1NL {
      --preview-height: 56px;
      height: var(--preview-height);
      -ms-grid-row-align: center;
          align-self: center;
    }

.settings__preview-item_30x {
      display: flex;
      flex-wrap: wrap;
      position: relative;
      padding: 16px 4px 16px 16px;
      flex: 1;
      align-items: center;
      overflow: hidden;
      -webkit-hyphens: auto;
          -ms-hyphens: auto;
              hyphens: auto;
    }

.settings__preview-item_30x span {
        min-width: 90%;
      }

.settings__preview--center_1fJ {
      justify-content: center;
      align-items: center;
      -ms-grid-row-align: center;
          align-self: center;
    }

.settings__preview--start_1FB {
      align-self: flex-start;
      justify-content: center;
      align-items: center;
      position: -webkit-sticky;
      position: sticky;
      top: 170px;
      z-index: 2;
    }

.settings__preview--noborder_1A5 {
      border: 0;
    }

.settings__preview--empty_21m .settings__preview-item_30x::before {
          content: "";
          position: absolute;
          width: 100%;
          height: 100%;
          top: 0;
          left: 0;
          background-image: linear-gradient(
            to top left,
            transparent calc(50% - 1px),
            var(--danger),
            transparent calc(50% + 1px)
          );
        }

.settings__mobile-check_nh6 {
    margin-top: 16px;
    flex-basis: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;
  }

.settings__mobile-check-title_2xL {
      font-size: var(--font-size-xs);
      font-weight: var(--font-weight-xs);
    }

.settings__mobile-check-container_2ki {
      position: relative;
      width: 322px;
      padding-top: 30px;
      padding-left: 15px;
      padding-right: 15px;
      padding-bottom: 30px;
      border-width: 1px;
      border-style: solid;
      background-color: #999;
      border-color: #000;
      margin-top: 16px;

      text-align: center;

      overflow: hidden;
    }

.settings__mobile-check-container_2ki::before {
        content: "";

        position: absolute;
        top: 0;
        left: 15px;
        right: 15px;
        bottom: 0;

        border-width: 0 1px;
        border-style: dashed;
        border-color: #f00;
      }

.settings__mobile-check-container_2ki::after {
        content: "";

        position: absolute;
        top: 0;
        left: 20px;
        right: 20px;
        bottom: 0;

        border-width: 0 1px;
        border-style: dashed;
        border-color: #0f0;
      }

.settings__mobile-check-inner-container_lyS {
      background-color: #f005;
    }

.settings__mobile-check-controls_1PF {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      margin-top: 16px;
      width: 320px;
    }

.panel_2ox {
  position: -webkit-sticky;
  position: sticky;
  top: calc(var(--top-nav-height) + 24px);
  padding: 24px 0;
  z-index: 3;
  box-shadow: 0 2px 4px 0 rgba(231, 231, 231, 0.5);
}

.panel--primary_3rY {
    display: flex;
    justify-content: space-between;
    border-radius: var(--border-radius);
    background-color: var(--brand-l3);
    box-shadow: none;
    padding-left: 16px;
    padding-right: 16px;
  }

.active .settings__drop-btn_2TN {
        background-color: var(--sky-l2);
        color: var(--ink-l1);
      }

.value_22R {
  display: flex;
  align-items: center;
  align-self: stretch;
  color: var(--sky);
  font-size: 12px;
}

.value__ico_2GL {
    margin: 0 8px;
  }

.flex1_1iW {
  flex: 1;
}

.nowrap_2Bg {
  white-space: nowrap;
}
.color_1Dp {
  width: 94px;
}

  .color_1Dp:not(:first-child) {
    margin-left: 16px;
  }

  .color__value_3f- {
    position: relative;
    height: 94px;
    overflow: hidden;
    border-radius: var(--border-radius);
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.08);
  }

  .color__value--empty_RGG::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-image: linear-gradient(
          to top left,
          transparent calc(50% - 1px),
          var(--danger),
          transparent calc(50% + 2px)
        );
      }
.colors_NuQ {
  padding-bottom: 8px;
}
  
  .colors__btn_15T {
    width: 170px;
    padding: 0 16px;
    text-align: left;
    transition: background-color 0.2s ease-out;

  }
  
  .colors__btn_15T:hover {
      background-color: var(--sky-l2);
    }
  
  .colors__btn-active_ClL {
      color: var(--brand);
    }
  
  .colors__btn-inner_1st {
      display: flex;
      height: 32px;
      align-items: center;
    }
  
  .colors__value_1yt {
    display: inline-block;
    width: 22px;
    height: 22px;
    margin-right: 8px;
  }.checked-group_1MF {
  display: flex;
  height: var(--input-height);
  align-items: stretch;
  border: solid 1px var(--sky);
  overflow: hidden;
  border-radius: var(--border-radius);
}

  .checked-group--size-xs_1FQ {
      --input-height: 30px;
    }

  .checked-group__btn_1ol {
    display: flex;
    min-width: var(--input-height);
    align-items: stretch;
    flex: 1;
  }

  .checked-group__btn_1ol:not(:last-child) {
      border-right: solid 1px var(--sky);
    }.iconElement_ZTI {
  display: block;
  height: 100%;
  max-width: 100%;
  align-items: center;
  justify-content: center;
}

  .iconElement_ZTI svg {
    max-width: 100%;
    max-height: 100%;
    fill: currentColor;
  }

.icon_3rx {
  position: relative;
}

.ui-icon_3-7 {
  color: var(--ui-block-title-color);
}

.ui-icon--light_QAQ {
    color: var(--ui-block-title-color-light);
  }
.button_5a4 {
  display: inline-block;
  position: relative;
  max-width: 100%;
  text-decoration: none;
  text-align: center;
  overflow: visible;
  cursor: pointer;
  transition: color 0.2s ease-in, background-color 0.2s ease-in, border-color 0.2s ease-in, box-shadow 0.2s ease-in;
  word-wrap: break-word;
}

  .button__border_mo- {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
  }

  .button__content_2MH {
    position: relative;
  }

  .button__icon_1py {
    display: inline-block;
    width: 24px;	
    height: 24px;
    vertical-align: middle;
  }

  .button__icon--left_2kC {
      margin-right: 10px;
    }

  .button__icon--right_fQ_ {
      margin-left: 10px;
    }@keyframes fadeInBottom_1II {
  from {
    transform: translate3d(0, 100%, 0);
    opacity: 0;
  }

  to {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.fade-in-bottom_vDA {
  animation-name: fadeInBottom_1II;
}

@keyframes fadeInLeft_1UL {
  from {
    transform: translate3d(-100%, 0, 0);
    opacity: 0;
  }

  to {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.fade-in-left_2Y3 {
  animation-name: fadeInLeft_1UL;
}

@keyframes fadeInRight_3hK {
  from {
    transform: translate3d(100%, 0, 0);
    opacity: 0;
  }

  to {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.fade-in-right_26J {
  animation-name: fadeInRight_3hK;
}

@keyframes fadeInTop_Sl2 {
  from {
    transform: translate3d(0, -100%, 0);
    opacity: 0;
  }

  to {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.fade-in-top_3IZ {
  animation-name: fadeInTop_Sl2;
}

@keyframes fadeIn_1G9 {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fade-in-center_2bv {
  animation-name: fadeIn_1G9;
}

@keyframes slideInTop_1-B {
  from {
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

.slide-in-top_1G2 {
  animation-name: slideInTop_1-B;
}

@keyframes slideInLeft_2tu {
  from {
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

.slide-in-left_3Rw {
  animation-name: slideInLeft_2tu;
}

@keyframes slideInRight_BOW {
  from {
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

.slide-in-right_16d {
  animation-name: slideInRight_BOW;
}

@keyframes slideInBottom_olu {
  from {
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

.slide-in-bottom_10- {
  animation-name: slideInBottom_olu;
}

@keyframes zoomInTop_3L3 {
  from {
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    opacity: 0;
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    opacity: 1;
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

.zoom-in-top_u90 {
  animation-name: zoomInTop_3L3;
}

@keyframes zoomInLeft_2n- {
  from {
    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    opacity: 0;
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    opacity: 1;
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

.zoom-in-left_2fi {
  animation-name: zoomInLeft_2n-;
}

@keyframes zoomInRight_xPY {
  from {
    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    opacity: 0;
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    opacity: 1;
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

.zoom-in-right_rr0 {
  animation-name: zoomInRight_xPY;
}

@keyframes zoomInBottom_y64 {
  from {
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    opacity: 0;
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    opacity: 1;
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

.zoom-in-bottom_34r {
  animation-name: zoomInBottom_y64;
}

@keyframes zoomIn_2df {
  from {
    transform: scale3d(0.3, 0.3, 0.3);
    opacity: 0;
  }

  50% {
    opacity: 1;
  }
}

.zoom-in-center_2Ad {
  animation-name: zoomIn_2df;
}

.animated_1nN {
  animation-fill-mode: both;
  animation-timing-function: ease-in-out;
}

.hidden_I4j {
  visibility: hidden;
  opacity: 0;
}

.slow_1q8 {
  animation-duration: 1s;
}

.normal_1b6 {
  animation-duration: .6s;
}

.fast_l7w {
  animation-duration: .2s;
}
/* stylelint-disable max-nesting-depth */
.ui-button {
    font-family: var(--ui-btn-font-family);
    font-style: var(--ui-btn-font-style);
    letter-spacing: var(--ui-btn-letter-spacing);
    text-transform: var(--ui-btn-text-transform);
  }
.ui-button--primary-light {
      font-weight: var(--ui-btn-primary-font-weight);
      color: var(--ui-btn-primary-color);
      box-shadow: var(--ui-btn-primary-shadow-x) var(--ui-btn-primary-shadow-y) var(--ui-btn-primary-shadow-blur) var(--ui-btn-primary-shadow-spread) var(--ui-btn-primary-shadow-color);
      background-color: var(--ui-btn-primary-bg-color);
      background-image: linear-gradient(var(--ui-btn-primary-bg-gradient-angle), var(--ui-btn-primary-bg-gradient-colors-dark));
    }
.ui-button--primary-light .ui-button__border {
        border-color: var(--ui-btn-primary-border-color);
        border-style: var(--ui-btn-primary-border-style);
      }
.ui-button--primary-light:not(.editor-button):hover {
        color: var(--ui-btn-primary-hover-color);
        box-shadow: var(--ui-btn-primary-hover-shadow-x) var(--ui-btn-primary-hover-shadow-y) var(--ui-btn-primary-hover-shadow-blur) var(--ui-btn-primary-hover-shadow-spread) var(--ui-btn-primary-hover-shadow-color);
        background-color: var(--ui-btn-primary-hover-bg-color);
        background-image: linear-gradient(var(--ui-btn-primary-hover-bg-gradient-angle), var(--ui-btn-primary-hover-bg-gradient-colors-dark));
        font-weight: var(--ui-btn-primary-hover-font-weight);
      }
.ui-button--primary-light:not(.editor-button):hover .ui-button__border {
          border-style: var(--ui-btn-primary-hover-border-style);
          border-color: var(--ui-btn-primary-hover-border-color);
        }
.ui-button--primary-light:not(.editor-button):active {
        color: var(--ui-btn-primary-active-color);
        box-shadow: var(--ui-btn-primary-active-shadow-x) var(--ui-btn-primary-active-shadow-y) var(--ui-btn-primary-active-shadow-blur) var(--ui-btn-primary-active-shadow-spread) var(--ui-btn-primary-active-shadow-color);
        background-color: var(--ui-btn-primary-active-bg-color);
        background-image: linear-gradient(var(--ui-btn-primary-active-bg-gradient-angle), var(--ui-btn-primary-active-bg-gradient-colors-dark));
        font-weight: var(--ui-btn-primary-active-font-weight);
      }
.ui-button--primary-light:not(.editor-button):active .ui-button__border {
          border-style: var(--ui-btn-primary-active-border-style);
          border-color: var(--ui-btn-primary-active-border-color);
        }
.ui-button--primary-dark {
      font-weight: var(--ui-btn-primary-font-weight);
      color: var(--ui-btn-primary-color-light);
      box-shadow: var(--ui-btn-primary-shadow-x) var(--ui-btn-primary-shadow-y) var(--ui-btn-primary-shadow-blur) var(--ui-btn-primary-shadow-spread) var(--ui-btn-primary-shadow-color-light);
      background-color: var(--ui-btn-primary-bg-color-light);
      background-image: linear-gradient(var(--ui-btn-primary-bg-gradient-angle), var(--ui-btn-primary-bg-gradient-colors-dark));
    }
.ui-button--primary-dark .ui-button__border {
        border-color: var(--ui-btn-primary-border-color-light);
        border-style: var(--ui-btn-primary-border-style);
      }
.ui-button--primary-dark:not(.editor-button):hover {
        font-weight: var(--ui-btn-primary-hover-font-weight);
        color: var(--ui-btn-primary-hover-color-light);
        box-shadow: var(--ui-btn-primary-hover-shadow-x) var(--ui-btn-primary-hover-shadow-y) var(--ui-btn-primary-hover-shadow-blur) var(--ui-btn-primary-hover-shadow-spread) var(--ui-btn-primary-hover-shadow-color-light);
        background-color: var(--ui-btn-primary-hover-bg-color-light);
        background-image: linear-gradient(var(--ui-btn-primary-hover-bg-gradient-angle), var(--ui-btn-primary-hover-bg-gradient-colors-dark));
      }
.ui-button--primary-dark:not(.editor-button):hover .ui-button__border {
          border-color: var(--ui-btn-primary-hover-border-color-light);
          border-style: var(--ui-btn-primary-hover-border-style);
        }
.ui-button--primary-dark:not(.editor-button):active {
        font-weight: var(--ui-btn-primary-active-font-weight);
        color: var(--ui-btn-primary-active-color-light);
        box-shadow: var(--ui-btn-primary-active-shadow-x) var(--ui-btn-primary-active-shadow-y) var(--ui-btn-primary-active-shadow-blur) var(--ui-btn-primary-active-shadow-spread) var(--ui-btn-primary-active-shadow-color-light);
        background-color: var(--ui-btn-primary-active-bg-color-light);
        background-image: linear-gradient(var(--ui-btn-primary-active-bg-gradient-angle), var(--ui-btn-primary-active-bg-gradient-colors-dark));
      }
.ui-button--primary-dark:not(.editor-button):active .ui-button__border {
          border-color: var(--ui-btn-primary-active-border-color-light);
          border-style: var(--ui-btn-primary-active-border-style);
        }
.ui-button--primary-alt-light {
      font-weight: var(--ui-btn-primary-alt-font-weight);
      color: var(--ui-btn-primary-alt-color);
      box-shadow: var(--ui-btn-primary-alt-shadow-x) var(--ui-btn-primary-alt-shadow-y) var(--ui-btn-primary-alt-shadow-blur) var(--ui-btn-primary-alt-shadow-spread) var(--ui-btn-primary-alt-shadow-color);
      background-color: var(--ui-btn-primary-alt-bg-color);
      background-image: linear-gradient(var(--ui-btn-primary-alt-bg-gradient-angle), var(--ui-btn-primary-alt-bg-gradient-colors-dark));
    }
.ui-button--primary-alt-light .ui-button__border {
        border-color: var(--ui-btn-primary-alt-border-color);
        border-style: var(--ui-btn-primary-alt-border-style);
      }
.ui-button--primary-alt-light:not(.editor-button):hover {
        color: var(--ui-btn-primary-alt-hover-color);
        box-shadow: var(--ui-btn-primary-alt-hover-shadow-x) var(--ui-btn-primary-alt-hover-shadow-y) var(--ui-btn-primary-alt-hover-shadow-blur) var(--ui-btn-primary-alt-hover-shadow-spread) var(--ui-btn-primary-alt-hover-shadow-color);
        background-color: var(--ui-btn-primary-alt-hover-bg-color);
        background-image: linear-gradient(var(--ui-btn-primary-alt-hover-bg-gradient-angle), var(--ui-btn-primary-alt-hover-bg-gradient-colors-dark));
        font-weight: var(--ui-btn-primary-alt-hover-font-weight);
      }
.ui-button--primary-alt-light:not(.editor-button):hover .ui-button__border {
          border-style: var(--ui-btn-primary-alt-hover-border-style);
          border-color: var(--ui-btn-primary-alt-hover-border-color);
        }
.ui-button--primary-alt-light:not(.editor-button):active {
        color: var(--ui-btn-primary-alt-active-color);
        box-shadow: var(--ui-btn-primary-alt-active-shadow-x) var(--ui-btn-primary-alt-active-shadow-y) var(--ui-btn-primary-alt-active-shadow-blur) var(--ui-btn-primary-alt-active-shadow-spread) var(--ui-btn-primary-alt-active-shadow-color);
        background-color: var(--ui-btn-primary-alt-active-bg-color);
        background-image: linear-gradient(var(--ui-btn-primary-alt-active-bg-gradient-angle), var(--ui-btn-primary-alt-active-bg-gradient-colors-dark));
        font-weight: var(--ui-btn-primary-alt-active-font-weight);
      }
.ui-button--primary-alt-light:not(.editor-button):active .ui-button__border {
          border-style: var(--ui-btn-primary-alt-active-border-style);
          border-color: var(--ui-btn-primary-alt-active-border-color);
        }
.ui-button--primary-alt-dark {
      font-weight: var(--ui-btn-primary-alt-font-weight);
      color: var(--ui-btn-primary-alt-color-light);
      box-shadow: var(--ui-btn-primary-alt-shadow-x) var(--ui-btn-primary-alt-shadow-y) var(--ui-btn-primary-alt-shadow-blur) var(--ui-btn-primary-alt-shadow-spread) var(--ui-btn-primary-alt-shadow-color-light);
      background-color: var(--ui-btn-primary-alt-bg-color-light);
      background-image: linear-gradient(var(--ui-btn-primary-alt-bg-gradient-angle), var(--ui-btn-primary-alt-bg-gradient-colors-dark));
    }
.ui-button--primary-alt-dark .ui-button__border {
        border-color: var(--ui-btn-primary-alt-border-color-light);
        border-style: var(--ui-btn-primary-alt-border-style);
      }
.ui-button--primary-alt-dark:not(.editor-button):hover {
        font-weight: var(--ui-btn-primary-alt-hover-font-weight);
        color: var(--ui-btn-primary-alt-hover-color-light);
        box-shadow: var(--ui-btn-primary-alt-hover-shadow-x) var(--ui-btn-primary-alt-hover-shadow-y) var(--ui-btn-primary-alt-hover-shadow-blur) var(--ui-btn-primary-alt-hover-shadow-spread) var(--ui-btn-primary-alt-hover-shadow-color-light);
        background-color: var(--ui-btn-primary-alt-hover-bg-color-light);
        background-image: linear-gradient(var(--ui-btn-primary-alt-hover-bg-gradient-angle), var(--ui-btn-primary-alt-hover-bg-gradient-colors-dark));
      }
.ui-button--primary-alt-dark:not(.editor-button):hover .ui-button__border {
          border-color: var(--ui-btn-primary-alt-hover-border-color-light);
          border-style: var(--ui-btn-primary-alt-hover-border-style);
        }
.ui-button--primary-alt-dark:not(.editor-button):active {
        font-weight: var(--ui-btn-primary-alt-active-font-weight);
        color: var(--ui-btn-primary-alt-active-color-light);
        box-shadow: var(--ui-btn-primary-alt-active-shadow-x) var(--ui-btn-primary-alt-active-shadow-y) var(--ui-btn-primary-alt-active-shadow-blur) var(--ui-btn-primary-alt-active-shadow-spread) var(--ui-btn-primary-alt-active-shadow-color-light);
        background-color: var(--ui-btn-primary-alt-active-bg-color-light);
        background-image: linear-gradient(var(--ui-btn-primary-alt-active-bg-gradient-angle), var(--ui-btn-primary-alt-active-bg-gradient-colors-dark));
      }
.ui-button--primary-alt-dark:not(.editor-button):active .ui-button__border {
          border-color: var(--ui-btn-primary-alt-active-border-color-light);
          border-style: var(--ui-btn-primary-alt-active-border-style);
        }
.ui-button--secondary-light {
      font-weight: var(--ui-btn-secondary-font-weight);
      color: var(--ui-btn-secondary-color);
      box-shadow: var(--ui-btn-secondary-shadow-x) var(--ui-btn-secondary-shadow-y) var(--ui-btn-secondary-shadow-blur) var(--ui-btn-secondary-shadow-spread) var(--ui-btn-secondary-shadow-color);
      background-color: var(--ui-btn-secondary-bg-color);
      background-image: linear-gradient(var(--ui-btn-secondary-bg-gradient-angle), var(--ui-btn-secondary-bg-gradient-colors-dark));
    }
.ui-button--secondary-light .ui-button__border {
        border-color: var(--ui-btn-secondary-border-color);
        border-style: var(--ui-btn-secondary-border-style);
      }
.ui-button--secondary-light:not(.editor-button):hover {
        color: var(--ui-btn-secondary-hover-color);
        box-shadow: var(--ui-btn-secondary-hover-shadow-x) var(--ui-btn-secondary-hover-shadow-y) var(--ui-btn-secondary-hover-shadow-blur) var(--ui-btn-secondary-hover-shadow-spread) var(--ui-btn-secondary-hover-shadow-color);
        background-color: var(--ui-btn-secondary-hover-bg-color);
        background-image: linear-gradient(var(--ui-btn-secondary-hover-bg-gradient-angle), var(--ui-btn-secondary-hover-bg-gradient-colors-dark));
        font-weight: var(--ui-btn-secondary-hover-font-weight);
      }
.ui-button--secondary-light:not(.editor-button):hover .ui-button__border {
          border-style: var(--ui-btn-secondary-hover-border-style);
          border-color: var(--ui-btn-secondary-hover-border-color);
        }
.ui-button--secondary-light:not(.editor-button):active {
        color: var(--ui-btn-secondary-active-color);
        box-shadow: var(--ui-btn-secondary-active-shadow-x) var(--ui-btn-secondary-active-shadow-y) var(--ui-btn-secondary-active-shadow-blur) var(--ui-btn-secondary-active-shadow-spread) var(--ui-btn-secondary-active-shadow-color);
        background-color: var(--ui-btn-secondary-active-bg-color);
        background-image: linear-gradient(var(--ui-btn-secondary-active-bg-gradient-angle), var(--ui-btn-secondary-active-bg-gradient-colors-dark));
        font-weight: var(--ui-btn-secondary-active-font-weight);
      }
.ui-button--secondary-light:not(.editor-button):active .ui-button__border {
          border-style: var(--ui-btn-secondary-active-border-style);
          border-color: var(--ui-btn-secondary-active-border-color);
        }
.ui-button--secondary-dark {
      font-weight: var(--ui-btn-secondary-font-weight);
      color: var(--ui-btn-secondary-color-light);
      box-shadow: var(--ui-btn-secondary-shadow-x) var(--ui-btn-secondary-shadow-y) var(--ui-btn-secondary-shadow-blur) var(--ui-btn-secondary-shadow-spread) var(--ui-btn-secondary-shadow-color-light);
      background-color: var(--ui-btn-secondary-bg-color-light);
      background-image: linear-gradient(var(--ui-btn-secondary-bg-gradient-angle), var(--ui-btn-secondary-bg-gradient-colors-dark));
    }
.ui-button--secondary-dark .ui-button__border {
        border-color: var(--ui-btn-secondary-border-color-light);
        border-style: var(--ui-btn-secondary-border-style);
      }
.ui-button--secondary-dark:not(.editor-button):hover {
        font-weight: var(--ui-btn-secondary-hover-font-weight);
        color: var(--ui-btn-secondary-hover-color-light);
        box-shadow: var(--ui-btn-secondary-hover-shadow-x) var(--ui-btn-secondary-hover-shadow-y) var(--ui-btn-secondary-hover-shadow-blur) var(--ui-btn-secondary-hover-shadow-spread) var(--ui-btn-secondary-hover-shadow-color-light);
        background-color: var(--ui-btn-secondary-hover-bg-color-light);
        background-image: linear-gradient(var(--ui-btn-secondary-hover-bg-gradient-angle), var(--ui-btn-secondary-hover-bg-gradient-colors-dark));
      }
.ui-button--secondary-dark:not(.editor-button):hover .ui-button__border {
          border-color: var(--ui-btn-secondary-hover-border-color-light);
          border-style: var(--ui-btn-secondary-hover-border-style);
        }
.ui-button--secondary-dark:not(.editor-button):active {
        font-weight: var(--ui-btn-secondary-active-font-weight);
        color: var(--ui-btn-secondary-active-color-light);
        box-shadow: var(--ui-btn-secondary-active-shadow-x) var(--ui-btn-secondary-active-shadow-y) var(--ui-btn-secondary-active-shadow-blur) var(--ui-btn-secondary-active-shadow-spread) var(--ui-btn-secondary-active-shadow-color-light);
        background-color: var(--ui-btn-secondary-active-bg-color-light);
        background-image: linear-gradient(var(--ui-btn-secondary-active-bg-gradient-angle), var(--ui-btn-secondary-active-bg-gradient-colors-dark));
      }
.ui-button--secondary-dark:not(.editor-button):active .ui-button__border {
          border-color: var(--ui-btn-secondary-active-border-color-light);
          border-style: var(--ui-btn-secondary-active-border-style);
        }
.ui-button--secondary-alt-light {
      font-weight: var(--ui-btn-secondary-alt-font-weight);
      color: var(--ui-btn-secondary-alt-color);
      box-shadow: var(--ui-btn-secondary-alt-shadow-x) var(--ui-btn-secondary-alt-shadow-y) var(--ui-btn-secondary-alt-shadow-blur) var(--ui-btn-secondary-alt-shadow-spread) var(--ui-btn-secondary-alt-shadow-color);
      background-color: var(--ui-btn-secondary-alt-bg-color);
      background-image: linear-gradient(var(--ui-btn-secondary-alt-bg-gradient-angle), var(--ui-btn-secondary-alt-bg-gradient-colors-dark));
    }
.ui-button--secondary-alt-light .ui-button__border {
        border-color: var(--ui-btn-secondary-alt-border-color);
        border-style: var(--ui-btn-secondary-alt-border-style);
      }
.ui-button--secondary-alt-light:not(.editor-button):hover {
        color: var(--ui-btn-secondary-alt-hover-color);
        box-shadow: var(--ui-btn-secondary-alt-hover-shadow-x) var(--ui-btn-secondary-alt-hover-shadow-y) var(--ui-btn-secondary-alt-hover-shadow-blur) var(--ui-btn-secondary-alt-hover-shadow-spread) var(--ui-btn-secondary-alt-hover-shadow-color);
        background-color: var(--ui-btn-secondary-alt-hover-bg-color);
        background-image: linear-gradient(var(--ui-btn-secondary-alt-hover-bg-gradient-angle), var(--ui-btn-secondary-alt-hover-bg-gradient-colors-dark));
        font-weight: var(--ui-btn-secondary-alt-hover-font-weight);
      }
.ui-button--secondary-alt-light:not(.editor-button):hover .ui-button__border {
          border-style: var(--ui-btn-secondary-alt-hover-border-style);
          border-color: var(--ui-btn-secondary-alt-hover-border-color);
        }
.ui-button--secondary-alt-light:not(.editor-button):active {
        color: var(--ui-btn-secondary-alt-active-color);
        box-shadow: var(--ui-btn-secondary-alt-active-shadow-x) var(--ui-btn-secondary-alt-active-shadow-y) var(--ui-btn-secondary-alt-active-shadow-blur) var(--ui-btn-secondary-alt-active-shadow-spread) var(--ui-btn-secondary-alt-active-shadow-color);
        background-color: var(--ui-btn-secondary-alt-active-bg-color);
        background-image: linear-gradient(var(--ui-btn-secondary-alt-active-bg-gradient-angle), var(--ui-btn-secondary-alt-active-bg-gradient-colors-dark));
        font-weight: var(--ui-btn-secondary-alt-active-font-weight);
      }
.ui-button--secondary-alt-light:not(.editor-button):active .ui-button__border {
          border-style: var(--ui-btn-secondary-alt-active-border-style);
          border-color: var(--ui-btn-secondary-alt-active-border-color);
        }
.ui-button--secondary-alt-dark {
      font-weight: var(--ui-btn-secondary-alt-font-weight);
      color: var(--ui-btn-secondary-alt-color-light);
      box-shadow: var(--ui-btn-secondary-alt-shadow-x) var(--ui-btn-secondary-alt-shadow-y) var(--ui-btn-secondary-alt-shadow-blur) var(--ui-btn-secondary-alt-shadow-spread) var(--ui-btn-secondary-alt-shadow-color-light);
      background-color: var(--ui-btn-secondary-alt-bg-color-light);
      background-image: linear-gradient(var(--ui-btn-secondary-alt-bg-gradient-angle), var(--ui-btn-secondary-alt-bg-gradient-colors-dark));
    }
.ui-button--secondary-alt-dark .ui-button__border {
        border-color: var(--ui-btn-secondary-alt-border-color-light);
        border-style: var(--ui-btn-secondary-alt-border-style);
      }
.ui-button--secondary-alt-dark:not(.editor-button):hover {
        font-weight: var(--ui-btn-secondary-alt-hover-font-weight);
        color: var(--ui-btn-secondary-alt-hover-color-light);
        box-shadow: var(--ui-btn-secondary-alt-hover-shadow-x) var(--ui-btn-secondary-alt-hover-shadow-y) var(--ui-btn-secondary-alt-hover-shadow-blur) var(--ui-btn-secondary-alt-hover-shadow-spread) var(--ui-btn-secondary-alt-hover-shadow-color-light);
        background-color: var(--ui-btn-secondary-alt-hover-bg-color-light);
        background-image: linear-gradient(var(--ui-btn-secondary-alt-hover-bg-gradient-angle), var(--ui-btn-secondary-alt-hover-bg-gradient-colors-dark));
      }
.ui-button--secondary-alt-dark:not(.editor-button):hover .ui-button__border {
          border-color: var(--ui-btn-secondary-alt-hover-border-color-light);
          border-style: var(--ui-btn-secondary-alt-hover-border-style);
        }
.ui-button--secondary-alt-dark:not(.editor-button):active {
        font-weight: var(--ui-btn-secondary-alt-active-font-weight);
        color: var(--ui-btn-secondary-alt-active-color-light);
        box-shadow: var(--ui-btn-secondary-alt-active-shadow-x) var(--ui-btn-secondary-alt-active-shadow-y) var(--ui-btn-secondary-alt-active-shadow-blur) var(--ui-btn-secondary-alt-active-shadow-spread) var(--ui-btn-secondary-alt-active-shadow-color-light);
        background-color: var(--ui-btn-secondary-alt-active-bg-color-light);
        background-image: linear-gradient(var(--ui-btn-secondary-alt-active-bg-gradient-angle), var(--ui-btn-secondary-alt-active-bg-gradient-colors-dark));
      }
.ui-button--secondary-alt-dark:not(.editor-button):active .ui-button__border {
          border-color: var(--ui-btn-secondary-alt-active-border-color-light);
          border-style: var(--ui-btn-secondary-alt-active-border-style);
        }
.ui-button--size-sm {
      padding: var(--ui-btn-sm-padding);
      font-size: var(--ui-btn-sm-font-size);
      border-radius: var(--ui-btn-sm-border-radius);
      line-height: var(--ui-btn-sm-line-height);
    }
.ui-button--size-sm .ui-button__border {
        border-width: var(--ui-btn-sm-border-width);
        border-radius: var(--ui-btn-sm-border-radius);
      }
.ui-button--size-md {
      padding: var(--ui-btn-md-padding);
      font-size: var(--ui-btn-md-font-size);
      border-radius: var(--ui-btn-md-border-radius);
      line-height: var(--ui-btn-md-line-height);
    }
.ui-button--size-md .ui-button__border {
        border-width: var(--ui-btn-md-border-width);
        border-radius: var(--ui-btn-md-border-radius);
      }
.ui-button--size-lg {
      padding: var(--ui-btn-lg-padding);
      font-size: var(--ui-btn-lg-font-size);
      border-radius: var(--ui-btn-lg-border-radius);
      line-height: var(--ui-btn-lg-line-height);
    }
.ui-button--size-lg .ui-button__border {
        border-width: var(--ui-btn-lg-border-width);
        border-radius: var(--ui-btn-lg-border-radius);
      }
.ui-button--link-light {
      padding: 0;
      background-color: transparent;
      color: var(--ui-link-color);
    }
.ui-button--link-light:not(.editor-button):hover {
        color: var(--ui-link-hover-color);
        text-decoration: underline;
      }
.ui-button--link-dark {
      padding: 0;
      background-color: transparent;
      color: var(--ui-link-color-light);
    }
.ui-button--link-dark:not(.editor-button):hover {
        color: var(--ui-link-hover-color-light);
        text-decoration: underline;
      }
.js-focus-visible :focus:not(.focus-visible) {
    outline: 0;
  }
/* stylelint-enable max-nesting-depth */
.group-btn_25t {
  display: flex;
  position: relative;
  width: 32px;
  height: 32px;
  color: var(--ink-l3);
}

/*# sourceMappingURL=style.css.map*/