/*!*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../seed/repo/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!../../seed/repo/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!../../seed/repo/node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!../../seed/repo/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./projects/scodix-app/src/styles.scss ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
@import url(https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap);
/*!*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../seed/repo/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!../../seed/repo/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!../../seed/repo/node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!../../seed/repo/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./projects/scodix-app/src/styles.scss (1) ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/

/* You can add global styles to this file, and also import other style files */
.cdk-overlay-container,.cdk-global-overlay-wrapper{pointer-events:none;top:0;left:0;height:100%;width:100%}
.cdk-overlay-container{position:fixed;z-index:1000}
.cdk-overlay-container:empty{display:none}
.cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:1000}
.cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;z-index:1000;display:flex;max-width:100%;max-height:100%}
.cdk-overlay-backdrop{position:absolute;top:0;bottom:0;left:0;right:0;z-index:1000;pointer-events:auto;-webkit-tap-highlight-color:rgba(0,0,0,0);transition:opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);opacity:0}
.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:1}
.cdk-high-contrast-active .cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:.6}
.cdk-overlay-dark-backdrop{background:rgba(0,0,0,.32)}
.cdk-overlay-transparent-backdrop{transition:visibility 1ms linear,opacity 1ms linear;visibility:hidden;opacity:1}
.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing{opacity:0;visibility:visible}
.cdk-overlay-backdrop-noop-animation{transition:none}
.cdk-overlay-connected-position-bounding-box{position:absolute;z-index:1000;display:flex;flex-direction:column;min-width:1px;min-height:1px}
.cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}
.eui-editor,
.eui-editor-overlay,
.eui-toast-bar,
.eui-overlay-spinner {
  quotes: initial;
}
.eui-editor,
.eui-editor-overlay,
.eui-toast-bar,
.eui-overlay-spinner {
  cursor: auto;
  -webkit-user-select: auto;
          user-select: auto;
}
.eui-editor,
.eui-editor-overlay,
.eui-toast-bar,
.eui-overlay-spinner {
  border-collapse: separate;
  border-spacing: 0;
  caption-side: top;
}
.eui-editor,
.eui-editor-overlay,
.eui-toast-bar,
.eui-overlay-spinner {
  list-style-type: none;
  list-style-position: outside;
  list-style-image: none;
}
.eui-color-section.eui-color-section_mode-list .eui-color-section__swatch-item, .eui-image-colors, .eui-pagination__info, .eui-assets-panel__text, .eui-editor,
.eui-editor-overlay,
.eui-toast-bar,
.eui-overlay-spinner {
  color: initial;
  font-family: var(--he-font-family, "Inter");
  font-size: var(--he-body-font-size, 14px);
  font-style: initial;
  font-variant: initial;
  font-variant-ligatures: normal;
  font-variant-caps: normal;
  font-variant-numeric: normal;
  font-variant-east-asian: normal;
  font-weight: var(--he-body-font-weight-regular, 400);
  line-height: var(--he-body-line-heigh, 20px);
  letter-spacing: normal;
  word-spacing: normal;
  white-space: normal;
  text-align: initial;
  text-indent: 0;
  text-transform: none;
  text-decoration: none;
  text-decoration-color: initial;
  text-decoration-line: none;
  text-decoration-style: initial;
  text-decoration-thickness: initial;
  text-shadow: none;
  direction: ltr;
  unicode-bidi: normal;
  font-kerning: auto;
  font-feature-settings: normal;
  font-variation-settings: normal;
}
.eui-checkbox {
  box-sizing: border-box;
  max-width: 100%;
  width: max-content;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.eui-checkbox * {
  box-sizing: border-box;
}
.eui-checkbox:hover .eui-checkbox__wrapper {
  border: 1px solid #8a8a8a;
}
.eui-checkbox .eui-checkbox__wrapper.eui-error {
  border-color: darkred;
}
.eui-checkbox .eui-checkbox__input {
  display: none;
}
.eui-checkbox__wrapper {
  flex-shrink: 0;
  border: 1px solid #c4c4c4;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  margin-right: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
}
.eui-checkbox__wrapper svg {
  display: none;
}
.eui-checkbox__wrapper:focus-visible {
  outline: #000 solid 2px;
  outline-offset: 1px;
}
.eui-checkbox__text {
  margin: 0;
  white-space: nowrap;
  text-overflow: ellipsis;
  flex: 1 1;
  overflow: hidden;
  font-family: Inter, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0;
  text-decoration: none;
  text-transform: none;
}
.eui-checkbox__input:checked ~ .eui-checkbox__wrapper {
  background: var(--he-color-primary, #2450ff);
  border: none;
}
.eui-checkbox__input:checked ~ .eui-checkbox__wrapper svg {
  display: block;
}
.eui-checkbox__input:checked ~ .eui-checkbox__wrapper.eui-error {
  background: darkred;
}
.eui-checkbox__input:disabled ~ .eui-checkbox__wrapper {
  border: 1px solid #ddd;
}
.eui-checkbox:hover .eui-checkbox__input:checked ~ .eui-checkbox__wrapper {
  background: var(--he-color-primary-hover, #1d4ed8);
}
.eui-disabled .eui-checkbox {
  color: #adadad;
  pointer-events: none;
}
.eui-disabled .eui-checkbox__input:checked ~ .eui-checkbox__wrapper {
  background: #f0f0f0;
}
.eui-disabled .eui-checkbox svg {
  color: #adadad;
}
.eui-chips {
  padding: 6px 12px;
  border: solid 1px #d8d8d8;
  border-radius: 18px;
  min-width: 38px;
  font-size: 14px;
  font-weight: 400;
  font-family: Inter, sans-serif;
  line-height: 20px;
  letter-spacing: 0;
  text-decoration: none;
  text-transform: none;
  cursor: pointer;
  text-align: center;
  box-sizing: border-box;
}
.eui-chips:hover {
  background: #f0f0f0;
  border: 1px solid #d8d8d8;
}
.eui-chips:active {
  background: #d6d6d6;
}
.eui-chips.eui-selected {
  background: var(--he-color-primary, #2450ff);
  color: #ffffff;
  border-color: transparent;
}
.eui-chips.eui-selected:hover {
  background: var(--he-color-primary-hover, #1d4ed8);
}
.eui-chips.eui-selected:active {
  background: var(--he-color-primary-active, #1e40af);
}
.eui-focused .eui-chips.eui-selected {
  outline: 2px solid black;
  outline-offset: 1px;
}
.eui-disabled.eui-chips {
  pointer-events: none;
  cursor: default;
  color: #adadad;
  border: solid 1px #e0e0e0;
}
.eui-disabled.eui-chips.eui-selected {
  background: #f0f0f0;
}
.eui-select__body {
  display: flex;
  border: 1px solid #d6d6d6;
  border-radius: 4px;
  font-size: 14px;
  font-family: Inter, sans-serif;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0;
  text-decoration: none;
  text-transform: none;
  gap: 16px;
  justify-content: space-between;
  align-items: center;
  padding: 5px 11px;
  overflow: hidden;
  cursor: pointer;
}
.eui-select__body_disabled {
  cursor: default;
  background: #f5f5f5;
}
.eui-select__body.eui-select__body_disabled:focus-within {
  outline: none;
  border: 1px solid #d6d6d6;
}
.eui-select__body-content {
  flex-shrink: 1;
  overflow: hidden;
  width: 100%;
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */ /* Konqueror HTML */ /* Old versions of Firefox */ /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}
.eui-select__body-mark {
  flex-shrink: 0;
  color: #686868;
}
.eui-select__body-mark.eui-open svg {
  transform: scale(-1, -1);
}
.eui-select__body .eui-select__placeholder {
  color: #d6d6d6;
}
.eui-select__body:hover {
  border-color: #c4c4c4;
}
.eui-select__body:focus, .eui-select__body:focus-visible, .eui-select__body:focus-within {
  outline: 2px solid #0090ff;
  border-color: transparent;
}
.eui-select__dropdown {
  background: #ffffff;
  box-shadow: 0px 2px 8px -3px rgba(34, 34, 34, 0.08), 0px 8px 20px -4px rgba(34, 34, 34, 0.12);
  border-radius: 8px;
  width: 100%;
  display: flex;
  flex-direction: column;
  padding-top: 8px;
  padding-bottom: 8px;
  overflow: hidden auto;
}
.eui-select__dropdown .eui-disabled.eui-select__option {
  pointer-events: none;
  cursor: default;
  font-size: 14px;
  font-family: Inter, sans-serif;
  font-weight: 400;
  line-height: 20px;
}
.eui-select__dropdown .eui-select__option {
  padding: 6px 16px;
  border-radius: 0;
  font-size: 14px;
  font-family: Inter, sans-serif;
  font-weight: 400;
  line-height: 20px;
  cursor: pointer;
}
.eui-select__dropdown .eui-select__option.eui-focused, .eui-select__dropdown .eui-select__option:hover {
  background: #f5f5f5;
}
.eui-select__dropdown .eui-select__option.eui-selected {
  background: #f5f5f5;
}
.eui-combo-box {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #d6d6d6;
  border-radius: 4px;
  padding: 6px 8px 6px 12px;
  cursor: text;
}
.eui-combo-box.eui-open {
  background: #f2f2f2;
}
.eui-combo-box.eui-open svg {
  transform: scale(-1, -1);
}
.eui-combo-box__dropdown {
  display: flex;
  flex-direction: column;
  padding: 8px;
  background: #ffffff;
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.1607843137);
  border-radius: 8px;
  width: 100%;
  overflow: hidden auto;
}
.eui-combo-box__item {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 8px;
  cursor: pointer;
  border-radius: 4px;
  font-size: 14px;
  font-family: Inter, sans-serif;
  font-weight: 400;
  line-height: 20px;
}
.eui-combo-box__item.eui-focused, .eui-combo-box__item:hover {
  background: #f5f5f5;
}
.eui-combo-box__item-check {
  visibility: hidden;
}
.eui-selected .eui-combo-box__item-check {
  visibility: visible;
}
.eui-combo-box__chevron {
  position: relative;
}
.eui-combo-box__chevron::after {
  cursor: pointer;
  position: absolute;
  content: "";
  top: 50%;
  left: 50%;
  width: 32px;
  height: 32px;
  transform: translate(-50%, -50%);
}
.eui-combo-box input {
  width: 100%;
  padding: 0;
  height: 20px;
  border: none;
  outline: none;
  background-color: transparent;
  font-size: 14px;
  font-family: Inter, sans-serif;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0;
  text-decoration: none;
  text-transform: none;
}
.eui-radio-group.eui-disabled .eui-radio {
  cursor: default;
}
.eui-radio-group.eui-disabled .eui-radio .eui-unselected {
  background: #d8d8d8;
}
.eui-radio-group.eui-disabled .eui-radio .eui-selected {
  background: #d8d8d8;
}
.eui-radio {
  display: flex;
  padding: 6px;
  cursor: pointer;
  align-items: flex-start;
}
.eui-radio.eui-disabled {
  pointer-events: none;
  cursor: default;
}
.eui-radio.eui-disabled .eui-unselected {
  border: 2px solid #e0e0e0;
}
.eui-radio.eui-disabled .eui-selected {
  background: #e0e0e0;
}
.eui-radio.eui-disabled .label-content {
  color: #adadad;
}
.eui-radio__button {
  margin-top: 3px;
  width: 18px;
  height: 18px;
  box-sizing: border-box;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.eui-radio .eui-selected {
  background: var(--he-color-primary, #2450ff);
  border: 0 solid transparent;
}
.eui-focused .eui-radio .eui-selected {
  outline: 2px solid black;
  outline-offset: 1px;
}
.eui-radio .eui-selected .eui-dot {
  background: #ffffff;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.eui-radio .eui-unselected {
  border: 2px solid #d8d8d8;
  flex-shrink: 0;
}
.eui-radio .label-content {
  margin-left: 9px;
  font-family: Inter, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0;
  text-decoration: none;
  text-transform: none;
}
.eui-swatch {
  width: min-content;
  overflow: hidden;
  border: 1px solid #d8d8d8;
  border-radius: 2px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
}
.eui-swatch:hover {
  border-color: #adadad;
}
.eui-swatch.eui-selected {
  border: 2px solid #0090ff;
  padding: 0;
}
.eui-swatch.eui-selected.eui-swatch__color {
  padding: 2px;
}
.eui-swatch.eui-selected.eui-swatch__color > div {
  top: 2px;
  bottom: 2px;
  left: 2px;
  right: 2px;
}
.eui-swatch > div {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: 2px;
}
.eui-swatch_empty > div {
  color: #b8b8b8;
  background: #f5f5f5;
  display: flex;
  justify-content: center;
  align-items: center;
}
.eui-swatch_image {
  width: 100%;
  height: 100%;
}
.eui-swatch.eui-swatch__color {
  overflow: hidden;
}
.eui-selected .eui-swatch {
  border: 2px solid #0090ff;
  padding: 0;
}
.eui-selected .eui-swatch.eui-swatch__color {
  padding: 2px;
  position: relative;
}
.eui-selected .eui-swatch.eui-swatch__color > div {
  top: 2px;
  bottom: 2px;
  left: 2px;
  right: 2px;
  border-radius: 0;
}
.eui-focused .eui-selected .eui-swatch {
  outline: 2px solid #000;
  outline-offset: 0;
}
.eui-disabled .eui-swatch {
  cursor: default;
}
.eui-disabled .eui-swatch.eui-selected {
  border: 2px solid #d8d8d8;
}
.eui-header {
  margin-bottom: 8px;
  font-size: 14px;
  line-height: 20px;
}
.eui-header__group {
  display: flex;
  font-weight: 600;
  width: 100%;
  font-style: normal;
  margin-bottom: 4px;
  align-items: center;
}
.eui-header__title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 1;
  margin: 0;
}
.eui-header__value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0;
  flex-shrink: 3;
}
.eui-header__value span {
  font-weight: 400;
}
.eui-header__tooltip {
  margin: 0 0 0 8px;
  padding: 4px;
  color: #686868;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.eui-header__tooltip:hover {
  color: #282828;
}
.eui-header__tooltip-text {
  position: relative;
  background: #000;
  color: #fff;
  padding: 6px 12px;
  border-radius: 4px;
  box-shadow: 0 3px 6px -3px rgba(0, 0, 0, 0.08), 0px 8px 20px -4px rgba(0, 0, 0, 0.12);
  margin: 8px;
  font-weight: normal;
  font-size: 14px;
  line-height: 20px;
}
.eui-header__description {
  color: #686868;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  line-height: 20px;
}
.mdo-header__tooltip_tc:before, .mdo-header__tooltip_tl:before, .mdo-header__tooltip_tr:before, .mdo-header__tooltip_bl:before, .mdo-header__tooltip_bc:before, .mdo-header__tooltip_br:before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
}
.mdo-header__tooltip_tc:before {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  border-width: 8px 8px 0 8px;
  border-color: #000 transparent transparent transparent;
}
.mdo-header__tooltip_tl:before {
  bottom: 0;
  transform: translateX(100%);
  border-width: 8px 8px 0 8px;
  border-color: #000 transparent transparent transparent;
}
.mdo-header__tooltip_tr:before {
  bottom: 0;
  transform: translateX(-100%);
  border-width: 8px 8px 0 8px;
  border-color: #000 transparent transparent transparent;
}
.mdo-header__tooltip_bc:before {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  border-width: 0 8px 8px 8px;
  border-color: transparent transparent #000 transparent;
}
.mdo-header__tooltip_br:before {
  top: 0;
  right: 0;
  transform: translateX(-100%);
  border-width: 0 8px 8px 8px;
  border-color: transparent transparent #000 transparent;
}
.mdo-header__tooltip_bl:before {
  top: 0;
  transform: translateX(100%);
  border-width: 0 8px 8px 8px;
  border-color: transparent transparent #000 transparent;
}
.eui-content {
  font-size: 14px;
  line-height: 20px;
  width: 100%;
}
.eui-content__item {
  width: min-content;
}
.eui-content__item.eui-disabled {
  cursor: default;
  pointer-events: none;
}
.eui-content img {
  object-fit: contain;
}
.eui-content__preview {
  margin-right: 12px;
}
.eui-content__value {
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}
.eui-content__value-name {
  margin-bottom: 2px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.eui-content__value-text {
  color: #686868;
  font-size: 14px;
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.eui-content_list .eui-content__item {
  display: flex;
  padding: 6px 0;
  align-items: center;
}
.eui-content_color-list .eui-content__preview .eui-swatch {
  height: 40px;
  width: 40px;
  border-radius: 2px;
}
.eui-content_color-list .eui-content__preview .eui-swatch > div {
  border-radius: 2px;
}
.eui-content_color-list .eui-content__item {
  cursor: pointer;
}
.eui-content_image-list .eui-content__preview .eui-swatch,
.eui-content_image-list .eui-content__preview .eui-swatch {
  height: 64px;
  width: 64px;
  border-radius: 2px;
}
.eui-content_image-list .eui-content__item {
  cursor: pointer;
}
.eui-content_chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.eui-content_chips .eui-content__item {
  width: fit-content;
  max-width: 100%;
}
.eui-content_chips .eui-content__item .eui-chips {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.eui-content_grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 40px);
  grid-gap: 8px;
}
.eui-content_grid .eui-content__item {
  width: 100%;
  cursor: pointer;
}
.eui-content_color-grid {
  grid-template-columns: repeat(auto-fit, minmax(40px, 40px));
}
.eui-content_color-grid .eui-content__preview {
  margin-right: 0;
}
.eui-content_color-grid .eui-content__preview .eui-swatch {
  height: 40px;
  width: 40px;
  border-radius: 2px;
}
.eui-content_image-grid {
  grid-template-columns: repeat(auto-fit, minmax(136px, 1fr));
}
.eui-content_image-grid .eui-content__preview {
  margin-right: 0;
}
.eui-content_image-grid .eui-content__preview .eui-swatch {
  width: 100%;
  height: 100%;
}
.eui-content_image-grid .eui-content__value-name {
  text-align: center;
}
.eui-content_image-grid .eui-content__preview .eui-swatch {
  width: 100%;
  position: relative;
}
.eui-content_image-grid .eui-content__preview .eui-swatch:after {
  content: "";
  padding-bottom: 100%;
}
.eui-content_image-grid .eui-content__preview .eui-swatch_color,
.eui-content_image-grid .eui-content__preview .eui-swatch_image {
  position: absolute;
  height: 100%;
  width: 100%;
  border-radius: 2px;
}
.eui-content_image-grid_empty {
  color: #616161;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  text-align: center;
}
.eui-disabled .eui-content__preview {
  position: relative;
}
.eui-disabled .eui-content__preview::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: #e5e5e5;
  opacity: 60%;
  z-index: 1;
}
.eui-disabled .eui-content__preview::after {
  content: "";
  position: absolute;
  top: -0.3px;
  right: 0;
  border-bottom: 1px solid #686868;
  width: 141%;
  transform: rotate(-45deg);
  transform-origin: right;
  border-radius: 15%;
}
.eui-disabled .eui-content__value-name {
  color: #adadad;
}
.eui-disabled .eui-content__value-text {
  color: #adadad;
}
.eui-content__item_select {
  display: flex;
  align-items: center;
  width: 100%;
}
.eui-content__item_select .eui-big {
  width: 32px;
  height: 32px;
}
.eui-content__item_select .eui-small {
  width: 24px;
  height: 24px;
}
.eui-content__item_select .eui-content__value-name {
  font-size: 14px;
  line-height: inherit;
}
.eui-content__item_select .eui-content__value-text {
  font-size: 12px;
  line-height: inherit;
}
.eui-content__item_select .eui-content__preview {
  outline: 1px solid #d6d6d6;
  flex-shrink: 0;
  background-size: contain;
}
eui-selection:focus, eui-selection:focus-visible, eui-selection:focus-within,
eui-chips-group:focus,
eui-chips-group:focus-visible,
eui-chips-group:focus-within,
eui-radio-group:focus,
eui-radio-group:focus-visible,
eui-radio-group:focus-within {
  outline: none;
}
.eui-hor-slider-alpha {
  width: 100%;
  height: 100%;
  border: 1px solid #e5e5e5;
  border-radius: 2px;
  position: relative;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  cursor: pointer;
}
.eui-hor-slider-alpha::after {
  background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%, transparent 74%, rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0.1)), linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%, transparent 74%, rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0.1));
  background-size: 10px 10px;
  background-position: 0 0, 5px 5px;
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
}
.eui-hor-slider-alpha .pointer {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
}
.eui-hor-slider-alpha .pointer > div {
  position: absolute;
  width: 16px;
  height: 16px;
  border: 4px solid #fff;
  border-radius: 50%;
  box-sizing: border-box;
  z-index: 10;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
  background: #fff;
}
.eui-ver-slider-alpha {
  width: 100%;
  height: 100%;
  border: 1px solid #e5e5e5;
  border-radius: 2px;
  position: relative;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  cursor: pointer;
}
.eui-ver-slider-alpha::after {
  background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%, transparent 74%, rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0.1)), linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%, transparent 74%, rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0.1));
  background-size: 10px 10px;
  background-position: 0 0, 5px 5px;
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
}
.eui-ver-slider-alpha .pointer {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
}
.eui-ver-slider-alpha .pointer > div {
  position: absolute;
  width: 16px;
  height: 16px;
  border: 4px solid #fff;
  border-radius: 50%;
  box-sizing: border-box;
  z-index: 10;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
  background: #fff;
}
.eui-hor-slider-hue {
  width: 100%;
  height: 100%;
  border: 1px solid #e5e5e5;
  border-radius: 2px;
  position: relative;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  cursor: pointer;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  background: linear-gradient(to right, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red 100%);
}
.eui-hor-slider-hue .pointer {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
}
.eui-hor-slider-hue .pointer > div {
  position: absolute;
  width: 16px;
  height: 16px;
  border: 4px solid #fff;
  border-radius: 50%;
  box-sizing: border-box;
  z-index: 10;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
  background: #fff;
}
.eui-ver-slider-hue {
  width: 100%;
  height: 100%;
  border: 1px solid #e5e5e5;
  border-radius: 2px;
  position: relative;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  cursor: pointer;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  background: linear-gradient(to bottom, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red 100%);
}
.eui-ver-slider-hue .pointer {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
}
.eui-ver-slider-hue .pointer > div {
  position: absolute;
  width: 16px;
  height: 16px;
  border: 4px solid #fff;
  border-radius: 50%;
  box-sizing: border-box;
  z-index: 10;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
  background: #fff;
}
.eui-hor-slider-red {
  width: 100%;
  height: 100%;
  border: 1px solid #e5e5e5;
  border-radius: 2px;
  position: relative;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  cursor: pointer;
  background: linear-gradient(to right, rgb(255, 255, 255), rgb(255, 0, 0));
}
.eui-hor-slider-red .pointer {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
}
.eui-hor-slider-red .pointer > div {
  position: absolute;
  width: 16px;
  height: 16px;
  border: 4px solid #fff;
  border-radius: 50%;
  box-sizing: border-box;
  z-index: 10;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
  background: #fff;
}
.eui-hor-slider-green {
  width: 100%;
  height: 100%;
  border: 1px solid #e5e5e5;
  border-radius: 2px;
  position: relative;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  cursor: pointer;
  background: linear-gradient(to right, rgb(255, 255, 255), rgb(0, 255, 0));
}
.eui-hor-slider-green .pointer {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
}
.eui-hor-slider-green .pointer > div {
  position: absolute;
  width: 16px;
  height: 16px;
  border: 4px solid #fff;
  border-radius: 50%;
  box-sizing: border-box;
  z-index: 10;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
  background: #fff;
}
.eui-hor-slider-blue {
  width: 100%;
  height: 100%;
  border: 1px solid #e5e5e5;
  border-radius: 2px;
  position: relative;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  cursor: pointer;
  background: linear-gradient(to right, rgb(255, 255, 255), rgb(0, 0, 255));
}
.eui-hor-slider-blue .pointer {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
}
.eui-hor-slider-blue .pointer > div {
  position: absolute;
  width: 16px;
  height: 16px;
  border: 4px solid #fff;
  border-radius: 50%;
  box-sizing: border-box;
  z-index: 10;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
  background: #fff;
}
.eui-ver-slider-red {
  width: 100%;
  height: 100%;
  border: 1px solid #e5e5e5;
  border-radius: 2px;
  position: relative;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  cursor: pointer;
  background: linear-gradient(to bottom, rgb(255, 255, 255), rgb(255, 0, 0));
}
.eui-ver-slider-red .pointer {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
}
.eui-ver-slider-red .pointer > div {
  position: absolute;
  width: 16px;
  height: 16px;
  border: 4px solid #fff;
  border-radius: 50%;
  box-sizing: border-box;
  z-index: 10;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
  background: #fff;
}
.eui-ver-slider-green {
  width: 100%;
  height: 100%;
  border: 1px solid #e5e5e5;
  border-radius: 2px;
  position: relative;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  cursor: pointer;
  background: linear-gradient(to bottom, rgb(255, 255, 255), rgb(0, 255, 0));
}
.eui-ver-slider-green .pointer {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
}
.eui-ver-slider-green .pointer > div {
  position: absolute;
  width: 16px;
  height: 16px;
  border: 4px solid #fff;
  border-radius: 50%;
  box-sizing: border-box;
  z-index: 10;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
  background: #fff;
}
.eui-ver-slider-blue {
  width: 100%;
  height: 100%;
  border: 1px solid #e5e5e5;
  border-radius: 2px;
  position: relative;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  cursor: pointer;
  background: linear-gradient(to bottom, rgb(255, 255, 255), rgb(0, 0, 255));
}
.eui-ver-slider-blue .pointer {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
}
.eui-ver-slider-blue .pointer > div {
  position: absolute;
  width: 16px;
  height: 16px;
  border: 4px solid #fff;
  border-radius: 50%;
  box-sizing: border-box;
  z-index: 10;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
  background: #fff;
}
.eui-hor-slider-cyan {
  width: 100%;
  height: 100%;
  border: 1px solid #e5e5e5;
  border-radius: 2px;
  position: relative;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  cursor: pointer;
  background: linear-gradient(to right, rgb(255, 255, 255), rgb(31, 255, 255));
}
.eui-hor-slider-cyan .pointer {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
}
.eui-hor-slider-cyan .pointer > div {
  position: absolute;
  width: 16px;
  height: 16px;
  border: 4px solid #fff;
  border-radius: 50%;
  box-sizing: border-box;
  z-index: 10;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
  background: #fff;
}
.eui-hor-slider-magenta {
  width: 100%;
  height: 100%;
  border: 1px solid #e5e5e5;
  border-radius: 2px;
  position: relative;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  cursor: pointer;
  background: linear-gradient(to right, rgb(255, 255, 255), rgb(255, 0, 255));
}
.eui-hor-slider-magenta .pointer {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
}
.eui-hor-slider-magenta .pointer > div {
  position: absolute;
  width: 16px;
  height: 16px;
  border: 4px solid #fff;
  border-radius: 50%;
  box-sizing: border-box;
  z-index: 10;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
  background: #fff;
}
.eui-hor-slider-yellow {
  width: 100%;
  height: 100%;
  border: 1px solid #e5e5e5;
  border-radius: 2px;
  position: relative;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  cursor: pointer;
  background: linear-gradient(to right, rgb(255, 255, 255), rgb(255, 255, 18));
}
.eui-hor-slider-yellow .pointer {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
}
.eui-hor-slider-yellow .pointer > div {
  position: absolute;
  width: 16px;
  height: 16px;
  border: 4px solid #fff;
  border-radius: 50%;
  box-sizing: border-box;
  z-index: 10;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
  background: #fff;
}
.eui-hor-slider-key {
  width: 100%;
  height: 100%;
  border: 1px solid #e5e5e5;
  border-radius: 2px;
  position: relative;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  cursor: pointer;
  background: linear-gradient(to right, rgb(255, 255, 255), rgb(36, 36, 36));
}
.eui-hor-slider-key .pointer {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
}
.eui-hor-slider-key .pointer > div {
  position: absolute;
  width: 16px;
  height: 16px;
  border: 4px solid #fff;
  border-radius: 50%;
  box-sizing: border-box;
  z-index: 10;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
  background: #fff;
}
.eui-ver-slider-cyan {
  width: 100%;
  height: 100%;
  border: 1px solid #e5e5e5;
  border-radius: 2px;
  position: relative;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  cursor: pointer;
  background: linear-gradient(to bottom, rgb(255, 255, 255), rgb(31, 255, 255));
}
.eui-ver-slider-cyan .pointer {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
}
.eui-ver-slider-cyan .pointer > div {
  position: absolute;
  width: 16px;
  height: 16px;
  border: 4px solid #fff;
  border-radius: 50%;
  box-sizing: border-box;
  z-index: 10;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
  background: #fff;
}
.eui-ver-slider-magenta {
  width: 100%;
  height: 100%;
  border: 1px solid #e5e5e5;
  border-radius: 2px;
  position: relative;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  cursor: pointer;
  background: linear-gradient(to bottom, rgb(255, 255, 255), rgb(255, 0, 255));
}
.eui-ver-slider-magenta .pointer {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
}
.eui-ver-slider-magenta .pointer > div {
  position: absolute;
  width: 16px;
  height: 16px;
  border: 4px solid #fff;
  border-radius: 50%;
  box-sizing: border-box;
  z-index: 10;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
  background: #fff;
}
.eui-ver-slider-yellow {
  width: 100%;
  height: 100%;
  border: 1px solid #e5e5e5;
  border-radius: 2px;
  position: relative;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  cursor: pointer;
  background: linear-gradient(to bottom, rgb(255, 255, 255), rgb(255, 255, 18));
}
.eui-ver-slider-yellow .pointer {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
}
.eui-ver-slider-yellow .pointer > div {
  position: absolute;
  width: 16px;
  height: 16px;
  border: 4px solid #fff;
  border-radius: 50%;
  box-sizing: border-box;
  z-index: 10;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
  background: #fff;
}
.eui-ver-slider-key {
  width: 100%;
  height: 100%;
  border: 1px solid #e5e5e5;
  border-radius: 2px;
  position: relative;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  cursor: pointer;
  background: linear-gradient(to bottom, rgb(255, 255, 255), rgb(36, 36, 36));
}
.eui-ver-slider-key .pointer {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
}
.eui-ver-slider-key .pointer > div {
  position: absolute;
  width: 16px;
  height: 16px;
  border: 4px solid #fff;
  border-radius: 50%;
  box-sizing: border-box;
  z-index: 10;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
  background: #fff;
}
.eui-gradient {
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  width: 100%;
  height: 100%;
  border: 1px solid #e5e5e5;
  border-radius: 2px;
  position: relative;
  box-sizing: border-box;
  cursor: pointer;
}
.eui-gradient .pointer {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
}
.eui-gradient .pointer > div {
  position: absolute;
  width: 16px;
  height: 16px;
  border: 4px solid #fff;
  border-radius: 50%;
  box-sizing: border-box;
  z-index: 10;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
  background: #fff;
}
.eui-gradient .eui-brightness {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, #000, rgba(0, 0, 0, 0));
}
.eui-gradient .eui-saturation {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, #fff, rgba(0, 0, 0, 0));
}
.eui-classic-swatch {
  width: 22px;
  height: 22px;
  border: 1px solid rgba(229, 229, 229, 0.5764705882);
  border-radius: 2px;
  box-sizing: border-box;
  position: relative;
  cursor: pointer;
  overflow: hidden;
}
.eui-classic-swatch .eui-select-border {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  box-sizing: border-box;
  width: calc(100% - 4px);
  height: calc(100% - 4px);
}
.eui-classic-swatch .eui-layer-transparent {
  width: 100%;
  height: 100%;
  background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%, transparent 74%, rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0.1)), linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%, transparent 74%, rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0.1));
  background-size: 10px 10px;
  background-position: 0 0, 5px 5px;
}
.eui-classic-swatch .eui-layer-hover-overlay {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  box-sizing: border-box;
}
.eui-classic-swatch .eui-layer-no-color {
  width: 2px;
  height: 30px;
  background: red;
  rotate: 45deg;
  transform: translate(3px, -10px);
}
.eui-classic-swatch .eui-layer-icon {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
}
.eui-classic-swatch .eui-layer-color {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  box-sizing: border-box;
}
.eui-classic-swatch:hover .eui-layer-hover-overlay {
  background: rgba(255, 255, 255, 0.2);
}
.eui-classic-add-button {
  width: 22px;
  height: 22px;
  border: 1px solid rgba(229, 229, 229, 0.5764705882);
  border-radius: 2px;
  box-sizing: border-box;
  position: relative;
  cursor: pointer;
  overflow: hidden;
}
.eui-classic-add-button .eui-select-border {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  box-sizing: border-box;
  width: calc(100% - 4px);
  height: calc(100% - 4px);
}
.eui-classic-add-button .eui-layer-transparent {
  width: 100%;
  height: 100%;
  background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%, transparent 74%, rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0.1)), linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%, transparent 74%, rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0.1));
  background-size: 10px 10px;
  background-position: 0 0, 5px 5px;
}
.eui-classic-add-button .eui-layer-hover-overlay {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  box-sizing: border-box;
}
.eui-classic-add-button .eui-layer-icon {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
}
.eui-classic-add-button .eui-layer-color {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  box-sizing: border-box;
}
.eui-classic-add-button:hover .eui-layer-hover-overlay {
  background: rgba(255, 255, 255, 0.2);
}
.eui-swatch {
  width: 32px;
  height: 32px;
  border: 1px solid rgba(229, 229, 229, 0.5764705882);
  border-radius: 4px;
  box-sizing: border-box;
  position: relative;
  cursor: pointer;
  overflow: hidden;
}
.eui-swatch.selected:not(.disabled) {
  border: 2px solid #000;
}
.eui-swatch.selected:not(.disabled) .eui-select-border {
  border: 2px solid #fff;
}
.eui-swatch .eui-select-border {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  box-sizing: border-box;
}
.eui-swatch .eui-layer-transparent {
  width: 100%;
  height: 100%;
  background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%, transparent 74%, rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0.1)), linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%, transparent 74%, rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0.1));
  background-size: 10px 10px;
  background-position: 0 0, 5px 5px;
}
.eui-swatch .eui-layer-hover-overlay {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  box-sizing: border-box;
}
.eui-swatch .eui-layer-icon {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
}
.eui-swatch .eui-layer-color {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  box-sizing: border-box;
}
.eui-swatch .eui-no-color::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: linear-gradient(to right bottom, white, white 46%, red 47%, red 53%, white 54%, white) !important;
}
.eui-swatch:hover:not(.disabled) .eui-layer-hover-overlay {
  background: rgba(255, 255, 255, 0.2);
}
.eui-modern-add-button {
  width: 32px;
  height: 32px;
  border: 1px solid rgba(229, 229, 229, 0.5764705882);
  border-radius: 4px;
  box-sizing: border-box;
  position: relative;
  cursor: pointer;
  overflow: hidden;
}
.eui-modern-add-button .eui-select-border {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  box-sizing: border-box;
}
.eui-modern-add-button .eui-layer-transparent {
  width: 100%;
  height: 100%;
  background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%, transparent 74%, rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0.1)), linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%, transparent 74%, rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0.1));
  background-size: 10px 10px;
  background-position: 0 0, 5px 5px;
}
.eui-modern-add-button .eui-layer-hover-overlay {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  box-sizing: border-box;
}
.eui-modern-add-button .eui-layer-icon {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
}
.eui-modern-add-button .eui-layer-color {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  box-sizing: border-box;
}
.eui-modern-add-button:hover .eui-layer-hover-overlay {
  background: rgba(255, 255, 255, 0.2);
}
.eui-line-swatch {
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}
.eui-line-swatch .eui-line-swatch-title {
  font-family: Inter;
  font-size: 12px;
}
.eui-cmyk-form {
  display: flex;
  justify-content: space-between;
}
.eui-cmyk-form .eui-form-item {
  display: flex;
  flex-direction: column;
  width: 34px;
}
.eui-cmyk-form .eui-form-item .eui-number-input {
  padding: 4px;
}
.eui-cmyk-form .eui-form-item .eui-number-input > input {
  text-align: center;
}
.eui-cmyk-form .eui-form-item .eui-form-label {
  display: flex;
  justify-content: center;
  font-family: Inter;
  font-size: 10px;
}
.eui-rgb-form {
  display: flex;
  justify-content: space-between;
}
.eui-rgb-form .eui-form-item {
  display: flex;
  flex-direction: column;
  width: 42px;
}
.eui-rgb-form .eui-form-item .eui-number-input {
  padding: 4px;
}
.eui-rgb-form .eui-form-item .eui-number-input > input {
  text-align: center;
}
.eui-rgb-form .eui-form-item .eui-form-label {
  display: flex;
  justify-content: center;
  font-family: Inter;
  font-size: 10px;
}
.eui-dropper {
  background: none;
  border: 1px solid #e5e5e5;
  border-radius: 2px;
  width: 28px;
  height: 28px;
  padding: 0;
  color: #000000;
  display: flex;
  justify-content: center;
  align-items: center;
}
.eui-palette-section .eui-palette-section-label {
  font-family: Inter;
  font-size: 12px;
  margin: 6px 0;
}
.eui-palette-section .eui-palette-section-colors .eui-colors-container {
  display: flex;
  flex-wrap: wrap;
}
.eui-palette-section .eui-palette-section-colors .eui-colors-container.line-container {
  flex-direction: column;
}
.eui-palette-section .eui-palette-section-colors .eui-recent-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5px;
}
.eui-palette {
  height: 100%;
}
.picker {
  display: flex;
  flex-direction: column;
  width: max-content;
  gap: 5px;
}
.picker .hsb-picker {
  display: flex;
  gap: 10px;
}
.ng-touched.ng-invalid .eui-number-input {
  display: inline-flex;
  box-sizing: border-box;
  height: fit-content;
  align-items: center;
  border: 1px #d8d8d8 solid;
  border-radius: 4px;
  padding: 0 8px;
  background: #ffffff;
  width: 100%;
  border-color: #ff0000;
}
.ng-touched.ng-invalid .eui-number-input.with-stepper {
  padding-right: 4px;
}
.ng-touched.ng-invalid .eui-number-input.disabled {
  background: #f5f5f5;
}
.ng-touched.ng-invalid .eui-number-input.readonly {
  background: #fcfcfc;
}
.ng-touched.ng-invalid .eui-number-input.focus {
  border-color: #0090ff;
}
.ng-touched.ng-invalid .eui-number-input input {
  width: 100%;
  padding: 0;
  height: fit-content;
  border: none;
  outline: none;
  background-color: transparent;
  font-family: Inter, sans-serif;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0;
  text-decoration: none;
  text-transform: none;
  font-size: 14px;
}
.ng-touched.ng-invalid .eui-number-input input.with-stepper {
  margin-right: 6px;
}
.ng-touched.ng-invalid .eui-number-input input.with-stepper.with-suffix {
  margin-right: 0;
}
.ng-touched.ng-invalid .eui-number-input input:disabled {
  background-color: transparent;
}
.ng-touched.ng-invalid .eui-number-input input[readonly] {
  cursor: default;
}
.ng-touched.ng-invalid .eui-number-input .suffix {
  -webkit-user-select: none;
          user-select: none;
  font-family: Inter, sans-serif;
  font-weight: 400;
  line-height: 20px;
  font-size: 14px;
  letter-spacing: 0;
  text-decoration: none;
  text-transform: none;
}
.ng-touched.ng-invalid .eui-number-input .suffix.with-stepper {
  margin-right: 6px;
}
.ng-touched.ng-invalid .eui-number-input .stepper {
  display: flex;
  flex-direction: column;
}
.ng-touched.ng-invalid .eui-number-input .stepper .up,
.ng-touched.ng-invalid .eui-number-input .stepper .down {
  cursor: pointer;
  width: 20px;
  height: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  border: none;
  background: transparent;
}
.ng-touched.ng-invalid .eui-number-input .stepper .up:hover,
.ng-touched.ng-invalid .eui-number-input .stepper .down:hover {
  background: #d6d6d6;
  transition: background 0.2s;
}
.ng-touched.ng-invalid .eui-number-input.focus {
  border-color: #ff0000;
}
.ng-touched.ng-invalid .eui-input {
  display: inline-flex;
  box-sizing: border-box;
  align-items: center;
  border: 1px #d8d8d8 solid;
  border-radius: 4px;
  padding: 8px;
  background: #ffffff;
  width: 100%;
  border-color: #ff0000;
}
.ng-touched.ng-invalid .eui-input.disabled {
  background: #f5f5f5;
}
.ng-touched.ng-invalid .eui-input.readonly {
  background: #fcfcfc;
}
.ng-touched.ng-invalid .eui-input.focus {
  border-color: #0090ff;
}
.ng-touched.ng-invalid .eui-input input {
  width: 100%;
  padding: 0;
  height: fit-content;
  border: none;
  outline: none;
  background-color: transparent;
  font-family: Inter, sans-serif;
  font-weight: 400;
  line-height: 20px;
  font-size: 14px;
  letter-spacing: 0;
  text-decoration: none;
  text-transform: none;
}
.ng-touched.ng-invalid .eui-input input:disabled {
  background-color: transparent;
}
.ng-touched.ng-invalid .eui-input input[readonly] {
  cursor: default;
}
.ng-touched.ng-invalid .eui-text-area {
  display: inline-flex;
  box-sizing: border-box;
  align-items: center;
  border: 1px #d8d8d8 solid;
  border-radius: 4px;
  padding: 8px;
  background: #ffffff;
  width: 100%;
}
.ng-touched.ng-invalid .eui-text-area.disabled {
  background: #f5f5f5;
}
.ng-touched.ng-invalid .eui-text-area.readonly {
  background: #fcfcfc;
}
.ng-touched.ng-invalid .eui-text-area.focus {
  border-color: #0090ff;
}
.ng-touched.ng-invalid .eui-text-area input {
  width: 100%;
  padding: 0;
  height: fit-content;
  border: none;
  outline: none;
  background-color: transparent;
  font-family: Inter, sans-serif;
  font-weight: 400;
  line-height: 20px;
  font-size: 14px;
  letter-spacing: 0;
  text-decoration: none;
  text-transform: none;
}
.ng-touched.ng-invalid .eui-text-area input:disabled {
  background-color: transparent;
}
.ng-touched.ng-invalid .eui-text-area input[readonly] {
  cursor: default;
}
.eui-number-input {
  display: inline-flex;
  box-sizing: border-box;
  height: fit-content;
  align-items: center;
  border: 1px #d8d8d8 solid;
  border-radius: 4px;
  padding: 0 8px;
  background: #ffffff;
  width: 100%;
}
.eui-number-input.with-stepper {
  padding-right: 4px;
}
.eui-number-input.disabled {
  background: #f5f5f5;
}
.eui-number-input.readonly {
  background: #fcfcfc;
}
.eui-number-input.focus {
  border-color: #0090ff;
}
.eui-number-input input {
  width: 100%;
  padding: 0;
  height: fit-content;
  border: none;
  outline: none;
  background-color: transparent;
  font-family: Inter, sans-serif;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0;
  text-decoration: none;
  text-transform: none;
  font-size: 14px;
}
.eui-number-input input.with-stepper {
  margin-right: 6px;
}
.eui-number-input input.with-stepper.with-suffix {
  margin-right: 0;
}
.eui-number-input input:disabled {
  background-color: transparent;
}
.eui-number-input input[readonly] {
  cursor: default;
}
.eui-number-input .suffix {
  -webkit-user-select: none;
          user-select: none;
  font-family: Inter, sans-serif;
  font-weight: 400;
  line-height: 20px;
  font-size: 14px;
  letter-spacing: 0;
  text-decoration: none;
  text-transform: none;
}
.eui-number-input .suffix.with-stepper {
  margin-right: 6px;
}
.eui-number-input .stepper {
  display: flex;
  flex-direction: column;
}
.eui-number-input .stepper .up,
.eui-number-input .stepper .down {
  cursor: pointer;
  width: 20px;
  height: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  border: none;
  background: transparent;
}
.eui-number-input .stepper .up:hover,
.eui-number-input .stepper .down:hover {
  background: #d6d6d6;
  transition: background 0.2s;
}
.eui-input {
  display: inline-flex;
  box-sizing: border-box;
  align-items: center;
  border: 1px #d8d8d8 solid;
  border-radius: 4px;
  padding: 8px;
  background: #ffffff;
  width: 100%;
  height: fit-content;
}
.eui-input.disabled {
  background: #f5f5f5;
}
.eui-input.readonly {
  background: #fcfcfc;
}
.eui-input.focus {
  border-color: #0090ff;
}
.eui-input input {
  width: 100%;
  padding: 0;
  height: fit-content;
  border: none;
  outline: none;
  background-color: transparent;
  font-family: Inter, sans-serif;
  font-weight: 400;
  line-height: 20px;
  font-size: 14px;
  letter-spacing: 0;
  text-decoration: none;
  text-transform: none;
}
.eui-input input:disabled {
  background-color: transparent;
}
.eui-input input[readonly] {
  cursor: default;
}
.eui-text-area {
  display: inline-flex;
  box-sizing: border-box;
  align-items: center;
  border: 1px #d8d8d8 solid;
  border-radius: 4px;
  padding: 8px;
  background: #ffffff;
  width: 100%;
  padding: 4px;
}
.eui-text-area.disabled {
  background: #f5f5f5;
}
.eui-text-area.readonly {
  background: #fcfcfc;
}
.eui-text-area.focus {
  border-color: #0090ff;
}
.eui-text-area input {
  width: 100%;
  padding: 0;
  height: fit-content;
  border: none;
  outline: none;
  background-color: transparent;
  font-family: Inter, sans-serif;
  font-weight: 400;
  line-height: 20px;
  font-size: 14px;
  letter-spacing: 0;
  text-decoration: none;
  text-transform: none;
}
.eui-text-area input:disabled {
  background-color: transparent;
}
.eui-text-area input[readonly] {
  cursor: default;
}
.eui-text-area textarea {
  min-height: 18px;
  padding: 4px;
  border: none;
  outline: none;
  background-color: transparent;
}
.eui-toast {
  padding: 8px 16px;
  border-radius: 8px;
  width: max-content;
  box-shadow: 0px 8px 20px -4px rgba(0, 0, 0, 0.1215686275), 0px 3px 6px -3px rgba(0, 0, 0, 0.0784313725);
  color: #fff;
  font-family: Inter, sans-serif;
  font-weight: 400;
  line-height: 20px;
  font-size: 14px;
  letter-spacing: 0;
  text-decoration: none;
  text-transform: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.eui-toast__warn {
  background: var(--he-color-warning, #ff7b00);
}
.eui-toast__error {
  background: var(--he-color-danger, #dc2626);
}
.eui-toast__success {
  background: #79fc3c;
}
.eui-toast__common {
  background: #000000;
}
.eui-divider {
  width: 1px;
  height: 24px;
  background: #e6e6e6;
}
.eui-toast-close-button {
  padding: 4px;
  border: none;
  cursor: pointer;
  color: #ffffff;
  background: transparent;
}
.eui-free-panel.eui-toast-bar {
  background: transparent;
}
.eui-toast-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
:root {
  --eui-bottom-sheet-overlay-space: 72px;
  --eui-bottom-sheet-split-max-size: 45vh;
}
.eui-bottom-sheet {
  background: var(--he-color-background, #ffffff);
  box-sizing: border-box;
  border-radius: 20px 20px 0 0;
  box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 999;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.eui-bottom-sheet__target {
  padding-top: 12px;
  height: 8px;
  display: flex;
  justify-content: center;
}
.eui-bottom-sheet__drag-area {
  width: 36px;
  height: 4px;
  background: #eeeeee;
  cursor: grabbing;
}
.eui-bottom-sheet__hit-box {
  position: absolute;
  top: calc(-20px + 12px);
  left: 0;
  right: 0;
  height: 40px;
  pointer-events: auto;
}
.eui-bottom-sheet__head {
  display: flex;
  flex-direction: column;
}
.eui-bottom-sheet__head-base {
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: relative;
}
.eui-bottom-sheet__head-extend {
  display: flex;
  padding: 8px 24px 16px 24px;
}
.eui-bottom-sheet__head-extend:empty {
  padding: 0;
}
.eui-bottom-sheet__head-title {
  font: Inter, sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: 0;
}
.eui-bottom-sheet__icon {
  width: 48px;
  height: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  cursor: pointer;
}
.eui-bottom-sheet__icon--left {
  left: 0;
}
.eui-bottom-sheet__icon--right {
  right: 0;
}
.eui-bottom-sheet__body {
  padding: 0 24px;
  overflow: auto;
  flex: 1 1 auto;
  min-height: 0;
}
.eui-bottom-sheet__body_fullscreen {
  overflow: auto;
}
.eui-bottom-sheet-holder {
  width: 100%;
  background: #f2f2f2;
}
.eui-bottom-sheet-holder.eui-bottom-sheet-holder_overlay {
  background: rgba(0, 0, 0, 0.3882352941);
  position: absolute;
  bottom: 0;
  height: 100%;
  width: 100%;
  z-index: 999;
}
.eui-bottom-sheet-holder.eui-bottom-sheet-holder_overlay .eui-bottom-sheet__container {
  max-height: calc(100% - 72px);
  height: auto;
  width: 100%;
  position: absolute;
  bottom: 0;
  overflow: hidden;
}
.eui-bottom-sheet-holder .eui-bottom-sheet__container {
  width: 100%;
  height: auto;
}
.eui-bottom-sheet_drag-overlay {
  position: fixed !important;
  bottom: 0;
  z-index: calc(999 + 1);
  will-change: height;
}
.eui-drop-zone-container {
  display: flex;
  width: 100%;
  height: 100%;
}
.eui-drop-zone-container .eui-drop-zone {
  cursor: pointer;
  border: 1px dashed #d8d8d8;
  width: 100%;
  height: 100%;
  transition: 0.5s background;
}
.eui-drop-zone-container .eui-drop-zone.active {
  border-color: var(--he-color-primary, #2450ff);
  background: rgba(0, 145, 255, 0.062745098);
  transition: 0.5s background;
}
.eui-drop-zone-container .eui-drop-zone:hover {
  border-color: var(--he-color-primary, #2450ff);
  background: rgba(0, 145, 255, 0.062745098);
  transition: 0.5s background;
}
.eui-drop-zone-container .eui-drop-zone .eui-label {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  font-weight: 400;
  font-family: Inter, sans-serif;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0;
  text-decoration: none;
  text-transform: none;
  align-items: center;
}
.eui-toggle-switch-container {
  padding: 8px 0px;
  display: inline-flex;
  align-items: center;
}
.eui-toggle-switch-container .toggle-switch {
  line-height: 16px;
  width: 32px;
  height: 16px;
  display: flex;
  align-items: center;
  border-radius: 8px;
  transition: background 0.2s ease-in-out;
  background: #8a8a8a;
  cursor: pointer;
}
.eui-toggle-switch-container .toggle-switch.checked {
  background: var(--he-color-primary, #2450ff);
}
.eui-toggle-switch-container .toggle-switch.indeterminate {
  background: var(--he-color-primary, #2450ff);
}
.eui-toggle-switch-container .toggle-switch.disabled {
  cursor: default;
  background: #d8d8d8;
}
.eui-toggle-switch-container .toggle-switch input[type=checkbox] {
  display: none;
}
.eui-toggle-switch-container .toggle-switch .thumb {
  width: 12px;
  height: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: initial;
  border: 2px transparent solid;
  border-radius: 50%;
  transition: margin 0.2s ease-in-out;
}
.eui-toggle-switch-container .toggle-switch .thumb.checked {
  margin-left: 16px;
}
.eui-toggle-switch-container .toggle-switch .thumb.indeterminate {
  margin-left: 8px;
}
.eui-toggle-switch-container .toggle-switch .thumb.indeterminate .thumb-item {
  width: 10px;
  height: 2px;
  border-radius: 1px;
}
.eui-toggle-switch-container .toggle-switch .thumb .thumb-item {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #ffffff;
  transition: width, height 0.2s;
}
.eui-color-button-container {
  width: 100%;
  height: 100%;
  padding: 0;
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.32);
  box-sizing: border-box;
  border-radius: 2px;
  cursor: pointer;
  transition: 0.3s background;
  position: relative;
  outline: none;
}
.eui-color-button-container.eui-disabled {
  cursor: not-allowed;
}
.eui-color-button-container.eui-disabled .substrate:hover {
  background: none;
}
.eui-color-button-container:hover {
  border: 1px solid rgba(0, 0, 0, 0.32);
}
.eui-color-button-container:focus {
  outline: none;
}
.eui-color-button-container:focus-within {
  outline: none;
}
.eui-color-button-container .fill {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
}
.eui-color-button-container .fill img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.eui-color-button-container .transparent {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34' fill='none'%3E%3Crect width='17' height='17' fill='%23C4C4C4'/%3E%3Crect x='17' y='17' width='17' height='17' fill='%23C4C4C4'/%3E%3C/svg%3E");
}
.eui-color-button-container .substrate {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  background: none;
  transition: 0.3s background;
  display: flex;
  align-items: center;
  justify-content: center;
}
.eui-color-button-container .substrate > * {
  opacity: 0;
  transition: 0.3s opacity;
}
.eui-color-button-container .substrate:hover {
  background: rgba(0, 0, 0, 0.1);
  transition: 0.3s background;
}
.eui-color-button-container .substrate:hover > * {
  opacity: 1;
  transition: 0.3s opacity;
}
.eui-color-button-container .indeterminate {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' width='24px' height='24px'%3E%3Cpath d='M7.90039 8.07955C7.90039 3.30679 15.4004 3.30683 15.4004 8.07956C15.4004 11.4886 11.9913 10.8067 11.9913 14.8976' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 19.0101L12.01 18.999' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-color: #ffffff;
}
.ng-touched.ng-invalid .eui-number-input {
  display: inline-flex;
  box-sizing: border-box;
  height: fit-content;
  align-items: center;
  border: 1px #d8d8d8 solid;
  border-radius: 4px;
  padding: 0 8px;
  background: #ffffff;
  width: 100%;
  border-color: #ff0000;
}
.ng-touched.ng-invalid .eui-number-input.with-stepper {
  padding-right: 4px;
}
.ng-touched.ng-invalid .eui-number-input.disabled {
  background: #f5f5f5;
}
.ng-touched.ng-invalid .eui-number-input.readonly {
  background: #fcfcfc;
}
.ng-touched.ng-invalid .eui-number-input.focus {
  border-color: #0090ff;
}
.ng-touched.ng-invalid .eui-number-input input {
  width: 100%;
  padding: 0;
  height: fit-content;
  border: none;
  outline: none;
  background-color: transparent;
  font-family: Inter, sans-serif;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0;
  text-decoration: none;
  text-transform: none;
  font-size: 14px;
}
.ng-touched.ng-invalid .eui-number-input input.with-stepper {
  margin-right: 6px;
}
.ng-touched.ng-invalid .eui-number-input input.with-stepper.with-suffix {
  margin-right: 0;
}
.ng-touched.ng-invalid .eui-number-input input:disabled {
  background-color: transparent;
}
.ng-touched.ng-invalid .eui-number-input input[readonly] {
  cursor: default;
}
.ng-touched.ng-invalid .eui-number-input .suffix {
  -webkit-user-select: none;
          user-select: none;
  font-family: Inter, sans-serif;
  font-weight: 400;
  line-height: 20px;
  font-size: 14px;
  letter-spacing: 0;
  text-decoration: none;
  text-transform: none;
}
.ng-touched.ng-invalid .eui-number-input .suffix.with-stepper {
  margin-right: 6px;
}
.ng-touched.ng-invalid .eui-number-input .stepper {
  display: flex;
  flex-direction: column;
}
.ng-touched.ng-invalid .eui-number-input .stepper .up,
.ng-touched.ng-invalid .eui-number-input .stepper .down {
  cursor: pointer;
  width: 20px;
  height: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  border: none;
  background: transparent;
}
.ng-touched.ng-invalid .eui-number-input .stepper .up:hover,
.ng-touched.ng-invalid .eui-number-input .stepper .down:hover {
  background: #d6d6d6;
  transition: background 0.2s;
}
.ng-touched.ng-invalid .eui-number-input.focus {
  border-color: #ff0000;
}
.ng-touched.ng-invalid .eui-input {
  display: inline-flex;
  box-sizing: border-box;
  align-items: center;
  border: 1px #d8d8d8 solid;
  border-radius: 4px;
  padding: 8px;
  background: #ffffff;
  width: 100%;
  border-color: #ff0000;
}
.ng-touched.ng-invalid .eui-input.disabled {
  background: #f5f5f5;
}
.ng-touched.ng-invalid .eui-input.readonly {
  background: #fcfcfc;
}
.ng-touched.ng-invalid .eui-input.focus {
  border-color: #0090ff;
}
.ng-touched.ng-invalid .eui-input input {
  width: 100%;
  padding: 0;
  height: fit-content;
  border: none;
  outline: none;
  background-color: transparent;
  font-family: Inter, sans-serif;
  font-weight: 400;
  line-height: 20px;
  font-size: 14px;
  letter-spacing: 0;
  text-decoration: none;
  text-transform: none;
}
.ng-touched.ng-invalid .eui-input input:disabled {
  background-color: transparent;
}
.ng-touched.ng-invalid .eui-input input[readonly] {
  cursor: default;
}
.ng-touched.ng-invalid .eui-text-area {
  display: inline-flex;
  box-sizing: border-box;
  align-items: center;
  border: 1px #d8d8d8 solid;
  border-radius: 4px;
  padding: 8px;
  background: #ffffff;
  width: 100%;
}
.ng-touched.ng-invalid .eui-text-area.disabled {
  background: #f5f5f5;
}
.ng-touched.ng-invalid .eui-text-area.readonly {
  background: #fcfcfc;
}
.ng-touched.ng-invalid .eui-text-area.focus {
  border-color: #0090ff;
}
.ng-touched.ng-invalid .eui-text-area input {
  width: 100%;
  padding: 0;
  height: fit-content;
  border: none;
  outline: none;
  background-color: transparent;
  font-family: Inter, sans-serif;
  font-weight: 400;
  line-height: 20px;
  font-size: 14px;
  letter-spacing: 0;
  text-decoration: none;
  text-transform: none;
}
.ng-touched.ng-invalid .eui-text-area input:disabled {
  background-color: transparent;
}
.ng-touched.ng-invalid .eui-text-area input[readonly] {
  cursor: default;
}
.eui-number-input {
  display: inline-flex;
  box-sizing: border-box;
  height: fit-content;
  align-items: center;
  border: 1px #d8d8d8 solid;
  border-radius: 4px;
  padding: 0 8px;
  background: #ffffff;
  width: 100%;
}
.eui-number-input.with-stepper {
  padding-right: 4px;
}
.eui-number-input.disabled {
  background: #f5f5f5;
}
.eui-number-input.readonly {
  background: #fcfcfc;
}
.eui-number-input.focus {
  border-color: #0090ff;
}
.eui-number-input input {
  width: 100%;
  padding: 0;
  height: fit-content;
  border: none;
  outline: none;
  background-color: transparent;
  font-family: Inter, sans-serif;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0;
  text-decoration: none;
  text-transform: none;
  font-size: 14px;
}
.eui-number-input input.with-stepper {
  margin-right: 6px;
}
.eui-number-input input.with-stepper.with-suffix {
  margin-right: 0;
}
.eui-number-input input:disabled {
  background-color: transparent;
}
.eui-number-input input[readonly] {
  cursor: default;
}
.eui-number-input .suffix {
  -webkit-user-select: none;
          user-select: none;
  font-family: Inter, sans-serif;
  font-weight: 400;
  line-height: 20px;
  font-size: 14px;
  letter-spacing: 0;
  text-decoration: none;
  text-transform: none;
}
.eui-number-input .suffix.with-stepper {
  margin-right: 6px;
}
.eui-number-input .stepper {
  display: flex;
  flex-direction: column;
}
.eui-number-input .stepper .up,
.eui-number-input .stepper .down {
  cursor: pointer;
  width: 20px;
  height: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  border: none;
  background: transparent;
}
.eui-number-input .stepper .up:hover,
.eui-number-input .stepper .down:hover {
  background: #d6d6d6;
  transition: background 0.2s;
}
.eui-input {
  display: inline-flex;
  box-sizing: border-box;
  align-items: center;
  border: 1px #d8d8d8 solid;
  border-radius: 4px;
  padding: 8px;
  background: #ffffff;
  width: 100%;
  height: fit-content;
}
.eui-input.disabled {
  background: #f5f5f5;
}
.eui-input.readonly {
  background: #fcfcfc;
}
.eui-input.focus {
  border-color: #0090ff;
}
.eui-input input {
  width: 100%;
  padding: 0;
  height: fit-content;
  border: none;
  outline: none;
  background-color: transparent;
  font-family: Inter, sans-serif;
  font-weight: 400;
  line-height: 20px;
  font-size: 14px;
  letter-spacing: 0;
  text-decoration: none;
  text-transform: none;
}
.eui-input input:disabled {
  background-color: transparent;
}
.eui-input input[readonly] {
  cursor: default;
}
.eui-text-area {
  display: inline-flex;
  box-sizing: border-box;
  align-items: center;
  border: 1px #d8d8d8 solid;
  border-radius: 4px;
  padding: 8px;
  background: #ffffff;
  width: 100%;
  padding: 4px;
}
.eui-text-area.disabled {
  background: #f5f5f5;
}
.eui-text-area.readonly {
  background: #fcfcfc;
}
.eui-text-area.focus {
  border-color: #0090ff;
}
.eui-text-area input {
  width: 100%;
  padding: 0;
  height: fit-content;
  border: none;
  outline: none;
  background-color: transparent;
  font-family: Inter, sans-serif;
  font-weight: 400;
  line-height: 20px;
  font-size: 14px;
  letter-spacing: 0;
  text-decoration: none;
  text-transform: none;
}
.eui-text-area input:disabled {
  background-color: transparent;
}
.eui-text-area input[readonly] {
  cursor: default;
}
.eui-text-area textarea {
  min-height: 18px;
  padding: 4px;
  border: none;
  outline: none;
  background-color: transparent;
}
.ng-invalid .eui-number-stepper {
  display: inline-flex;
  box-sizing: border-box;
  height: 32px;
  align-items: center;
  border: 1px #d8d8d8 solid;
  border-radius: 4px;
  padding: 0 0;
  background: #ffffff;
  border-color: #ff0000;
}
.ng-invalid .eui-number-stepper.disabled {
  background: #f5f5f5;
}
.ng-invalid .eui-number-stepper input {
  height: 32px;
  border: none;
  outline: none;
  background-color: transparent;
  font-family: Inter, sans-serif;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0;
  text-decoration: none;
  text-transform: none;
  font-size: 14px;
  padding: 0 8px;
  box-sizing: border-box;
  width: 100%;
  text-align: center;
}
.ng-invalid .eui-number-stepper input:disabled {
  background-color: transparent;
}
.ng-invalid .eui-number-stepper .input-stepper {
  width: 48px;
  border: 1px transparent solid;
}
.ng-invalid .eui-number-stepper .input-stepper.focus {
  border: 1px #0090ff solid;
}
.ng-invalid .eui-number-stepper button {
  background: none;
  cursor: pointer;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 3px;
  border-top: 1px solid #d8d8d8;
  border-bottom: 1px solid #d8d8d8;
}
.ng-invalid .eui-number-stepper button:hover {
  background-color: #f2f2f2;
}
.ng-invalid .eui-number-stepper button:active {
  background-color: #e6e6e6;
}
.ng-invalid .eui-number-stepper button.increase {
  border-left: 1px solid #d8d8d8;
  border-radius: 0 4px 4px 0;
  border-right: none;
}
.ng-invalid .eui-number-stepper button.decrease {
  border-radius: 4px 0 0 4px;
  border-right: 1px solid #d8d8d8;
  border-left: none;
}
.ng-invalid .eui-number-stepper.focus {
  border-color: #ff0000;
}
.eui-number-stepper {
  display: inline-flex;
  box-sizing: border-box;
  height: 32px;
  align-items: center;
  border: 1px #d8d8d8 solid;
  border-radius: 4px;
  padding: 0 0;
  background: #ffffff;
}
.eui-number-stepper.disabled {
  background: #f5f5f5;
}
.eui-number-stepper input {
  height: 32px;
  border: none;
  outline: none;
  background-color: transparent;
  font-family: Inter, sans-serif;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0;
  text-decoration: none;
  text-transform: none;
  font-size: 14px;
  padding: 0 8px;
  box-sizing: border-box;
  width: 100%;
  text-align: center;
}
.eui-number-stepper input:disabled {
  background-color: transparent;
}
.eui-number-stepper .input-stepper {
  width: 48px;
  border: 1px transparent solid;
}
.eui-number-stepper .input-stepper.focus {
  border: 1px #0090ff solid;
}
.eui-number-stepper button {
  background: none;
  cursor: pointer;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 3px;
  border-top: 1px solid #d8d8d8;
  border-bottom: 1px solid #d8d8d8;
}
.eui-number-stepper button:hover {
  background-color: #f2f2f2;
}
.eui-number-stepper button:active {
  background-color: #e6e6e6;
}
.eui-number-stepper button.increase {
  border-left: 1px solid #d8d8d8;
  border-radius: 0 4px 4px 0;
  border-right: none;
}
.eui-number-stepper button.decrease {
  border-radius: 4px 0 0 4px;
  border-right: 1px solid #d8d8d8;
  border-left: none;
}
.eui-toggle-button {
  height: 32px;
  background: transparent;
  padding: 4px;
  border: none;
  cursor: pointer;
}
.eui-toggle-button.active {
  color: #0090ff;
}
.eui-toggle-button-group {
  display: flex;
}
.eui-toast {
  padding: 8px 16px;
  border-radius: 8px;
  width: max-content;
  box-shadow: 0px 8px 20px -4px rgba(0, 0, 0, 0.1215686275), 0px 3px 6px -3px rgba(0, 0, 0, 0.0784313725);
  color: #fff;
  font-family: Inter, sans-serif;
  font-weight: 400;
  line-height: 20px;
  font-size: 14px;
  letter-spacing: 0;
  text-decoration: none;
  text-transform: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.eui-toast__warn {
  background: var(--he-color-warning, #ff7b00);
}
.eui-toast__error {
  background: var(--he-color-danger, #dc2626);
}
.eui-toast__success {
  background: #79fc3c;
}
.eui-toast__common {
  background: #000000;
}
.eui-divider {
  width: 1px;
  height: 24px;
  background: #e6e6e6;
}
.eui-toast-close-button {
  padding: 4px;
  border: none;
  cursor: pointer;
  color: #ffffff;
  background: transparent;
}
.eui-free-panel.eui-toast-bar {
  background: transparent;
}
.eui-toast-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.resize__grip {
  border: 2px solid var(--he-color-primary, #2450ff);
  background: white;
  position: absolute;
}
.hitbox {
  background-color: transparent;
  position: absolute;
}
.resize-wrapper_top {
  position: relative;
  border-top: 1px solid var(--he-color-primary, #2450ff);
  border-left: 1px solid var(--he-color-primary, #2450ff);
  border-right: 1px solid var(--he-color-primary, #2450ff);
}
.resize-wrapper_top * {
  border: none;
}
.resize-wrapper_bottom {
  position: relative;
  border-bottom: 1px solid var(--he-color-primary, #2450ff);
  border-left: 1px solid var(--he-color-primary, #2450ff);
  border-right: 1px solid var(--he-color-primary, #2450ff);
}
.resize-wrapper_bottom #bottom-resize {
  border-bottom: none !important;
}
.eui-picture-frame-wrapper {
  width: 100%;
  margin: 0 auto;
  position: relative;
  height: 100%;
}
.eui-picture-frame-wrapper .error__wrapper {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(0, 0, 0, 0.5);
  background: rgba(255, 255, 255, 0.7);
  font-size: 0.8em;
}
.eui-picture-frame-wrapper img {
  display: block;
  width: 100%;
  visibility: hidden;
}
.eui-picture-frame-wrapper:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  pointer-events: none;
  z-index: 2;
}
.image {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  transform: translateZ(0);
}
.image .space {
  height: 100%;
  width: 100%;
  cursor: grabbing;
  display: block;
}
.frame {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
}
.frame .resize-wrapper {
  display: flex;
}
.frame .resize-wrapper .resize {
  box-sizing: border-box;
}
.frame .resize-wrapper .space {
  cursor: grabbing;
}
.frame .resize-wrapper .space {
  display: flex;
  justify-content: center;
  align-items: center;
}
.frame .resize-wrapper .space .frame-name {
  color: yellowgreen;
}
.frame .resize-wrapper .space .frame-name .hidden {
  display: none;
}
.frame .resize-wrapper .space .frame-name.active {
  color: rgb(205, 50, 50);
}
.frame .resize-wrapper .space .frame-name::selection {
  background: transparent;
}
.frame .resize-wrapper #bottom-resize {
  border-color: var(--he-color-primary, #2450ff);
  border-bottom: solid 1px var(--he-color-primary, #2450ff);
}
.frame .resize-wrapper #bottom-resize.active {
  border-color: var(--he-color-primary, #2450ff);
}
.frame .resize-wrapper #right-resize {
  position: relative;
  border-color: var(--he-color-primary, #2450ff);
  border-right: solid 1px var(--he-color-primary, #2450ff);
  height: 100%;
}
.frame .resize-wrapper #right-resize.active {
  border-color: var(--he-color-primary, #2450ff);
}
.frame .resize-wrapper #left-resize {
  position: relative;
  border-color: var(--he-color-primary, #2450ff);
  border-left: solid 1px var(--he-color-primary, #2450ff);
  height: 100%;
}
.frame .resize-wrapper #left-resize.active {
  border-color: var(--he-color-primary, #2450ff);
}
.frame .resize-wrapper #top-left,
.frame .resize-wrapper #bottom-right {
  background: white;
  border: 2px solid var(--he-color-primary, #2450ff);
  cursor: nwse-resize;
}
.frame .resize-wrapper #top-left.active,
.frame .resize-wrapper #bottom-right.active {
  background: white;
  border: 2px solid var(--he-color-primary, #2450ff);
}
.frame .resize-wrapper #top-right,
.frame .resize-wrapper #bottom-left {
  background: white;
  border: 2px solid var(--he-color-primary, #2450ff);
  cursor: nesw-resize;
}
.frame .resize-wrapper #top-right.active,
.frame .resize-wrapper #bottom-left.active {
  background: white;
  border: 2px solid var(--he-color-primary, #2450ff);
}
.eui-progress-bar {
  height: 8px;
  border-radius: 4px;
  background-color: #d8d8d8;
  display: block;
  overflow: hidden;
}
.eui-progress-bar__progress {
  background-color: var(--he-color-primary, #2450ff);
  transition: all ease-in 200ms;
  display: block;
  width: 0;
  height: 100%;
}
.eui-tabs {
  background: #ffffff;
}
.eui-tabs__header {
  display: flex;
  gap: 0;
  border-bottom: 1px solid #d8d8d8;
}
.eui-tabs__label {
  position: relative;
  padding: 12px 16px;
  color: #8a8a8a;
  cursor: pointer;
  font-family: Inter, sans-serif;
  font-weight: 500;
  font-size: 13px;
  line-height: 16px;
  letter-spacing: 0;
  text-decoration: none;
  text-transform: none;
}
.eui-tabs__label.eui-active {
  color: var(--he-color-primary, #2450ff);
  font-weight: 500;
}
.eui-tabs__label.eui-active::after {
  content: "";
  position: absolute;
  left: 0;
  top: 100%;
  height: 1px;
  width: 100%;
  background-color: #d8d8d8;
  z-index: 2;
}
.eui-panel {
  border-bottom: 1px solid #d8d8d8;
  padding-bottom: 8px;
  padding-top: 8px;
}
.eui-panel__header {
  display: flex;
  height: 32px;
  width: 100%;
  align-items: center;
}
.eui-panel__header-item {
  cursor: pointer;
  display: flex;
  align-items: center;
}
.eui-panel__header-item:last-child {
  width: 100%;
  height: 100%;
  height: 32px;
}
.eui-panel__header-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 32px;
  padding-right: 4px;
  padding-left: 12px;
}
.eui-panel__body_open {
  opacity: 1;
  visibility: visible;
  max-height: none;
  overflow: hidden;
  transition: all 0.3s ease-in;
}
.eui-panel__body_close {
  visibility: hidden;
  opacity: 0;
  max-height: 0px;
  transition: all 0.3s ease-out;
}
.eui-close {
  transform: rotate(-90deg);
}
.eui-animated-selector__container {
  position: relative;
}
.eui-animated-selector__wrapper {
  display: flex;
  justify-content: space-between;
  background: #f2f2f2;
  border-radius: 2px;
  text-align: center;
  align-items: center;
  font-feature-settings: "pnum" on, "lnum" on;
  color: #686868;
  transition: all ease-in-out 250ms;
}
.eui-animated-selector__btn {
  padding: 9px 4px;
  font-weight: 500;
  font-size: 14px;
  font-family: Inter, sans-serif;
  line-height: 20px;
  letter-spacing: 0;
  text-decoration: none;
  text-transform: none;
  cursor: pointer;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  flex-shrink: 2;
}
.eui-animated-selector__glass {
  opacity: 1;
  top: 2px;
  bottom: 2px;
  left: 2px;
  right: 2px;
  position: absolute;
  pointer-events: none;
}
.eui-animated-selector__sub {
  border-radius: 2px;
  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.08);
  position: relative;
  height: 100%;
  overflow: hidden;
  transition: all ease-in-out 250ms;
}
.eui-animated-selector__sub .eui-animated-selector__wrapper {
  position: absolute;
}
.eui-animated-selector__sub .eui-animated-selector__btn {
  color: #000;
  padding: 7px 2px;
  background: #ffffff;
}
.eui-animated-selector__sub .eui-animated-selector__btn:first-child {
  padding-left: 0;
}
.eui-animated-selector__sub .eui-animated-selector__btn:last-child {
  padding-right: 0;
}
.eui-gallery-selector {
  width: 100%;
  position: relative;
  overflow: hidden;
}
.eui-gallery-selector.vertical {
  height: 100%;
}
.eui-gallery-selector__items-list {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
  left: 0;
}
.eui-gallery-selector__items-list.vertical {
  width: 80px;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.eui-gallery-selector__items-list.desktop-animate {
  transition: all ease 1s;
}
.eui-gallery-selector__arrow {
  position: absolute;
  top: 24px;
  color: #d6d6d6;
  cursor: pointer;
  z-index: 1;
  padding: 3px;
  border: 1px solid #d6d6d6;
  border-radius: 50%;
  background-color: white;
}
.eui-gallery-selector__arrow.vertical {
  left: 24px;
}
.eui-gallery-selector__arrow-left {
  left: 0;
  transform: rotate(180deg);
}
.eui-gallery-selector__arrow-left.vertical {
  top: 0;
  transform: rotate(270deg);
}
.eui-gallery-selector__arrow-right {
  right: 0;
}
.eui-gallery-selector__arrow-right.vertical {
  transform: rotate(90deg);
  right: unset;
  top: unset;
  bottom: 0;
}
.eui-gallery-selector__arrow.active {
  color: #0090ff;
}
.eui-gallery-selector .gallery-item {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 80px;
}
.eui-gallery-selector .gallery-item__preview {
  width: 80px;
  height: 80px;
  background-clip: content-box;
  box-sizing: border-box;
  border-radius: 4px;
  background-repeat: no-repeat;
  background-position: center;
  border: 2px solid #d6d6d6;
  padding: 3px;
  background-size: contain;
}
.eui-gallery-selector .gallery-item__preview.active {
  border: 2px solid #0090ff;
}
.eui-gallery-selector .gallery-item__preview_loading {
  color: #0090ff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.eui-gallery-selector .gallery-item__preview_loading svg {
  animation: au-spinner 1.2s linear infinite;
}
.eui-gallery-selector .gallery-item__title {
  font-family: Inter, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: 0;
  text-decoration: none;
  text-transform: none;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  text-align: center;
}
@keyframes au-spinner {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.eui-scrollbar-container {
  position: relative;
  width: 100%;
  height: 100%;
}
.eui-checkbox {
  box-sizing: border-box;
  max-width: 100%;
  width: max-content;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.eui-checkbox * {
  box-sizing: border-box;
}
.eui-checkbox:hover .eui-checkbox__wrapper {
  border: 1px solid #8a8a8a;
}
.eui-checkbox .eui-checkbox__wrapper.eui-error {
  border-color: darkred;
}
.eui-checkbox .eui-checkbox__input {
  display: none;
}
.eui-checkbox__wrapper {
  flex-shrink: 0;
  border: 1px solid #c4c4c4;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  margin-right: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
}
.eui-checkbox__wrapper svg {
  display: none;
}
.eui-checkbox__wrapper:focus-visible {
  outline: #000 solid 2px;
  outline-offset: 1px;
}
.eui-checkbox__text {
  margin: 0;
  white-space: nowrap;
  text-overflow: ellipsis;
  flex: 1 1;
  overflow: hidden;
  font-family: Inter, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0;
  text-decoration: none;
  text-transform: none;
}
.eui-checkbox__input:checked ~ .eui-checkbox__wrapper {
  background: var(--he-color-primary, #2450ff);
  border: none;
}
.eui-checkbox__input:checked ~ .eui-checkbox__wrapper svg {
  display: block;
}
.eui-checkbox__input:checked ~ .eui-checkbox__wrapper.eui-error {
  background: darkred;
}
.eui-checkbox__input:disabled ~ .eui-checkbox__wrapper {
  border: 1px solid #ddd;
}
.eui-checkbox:hover .eui-checkbox__input:checked ~ .eui-checkbox__wrapper {
  background: var(--he-color-primary-hover, #1d4ed8);
}
.eui-disabled .eui-checkbox {
  color: #adadad;
  pointer-events: none;
}
.eui-disabled .eui-checkbox__input:checked ~ .eui-checkbox__wrapper {
  background: #f0f0f0;
}
.eui-disabled .eui-checkbox svg {
  color: #adadad;
}
.eui-radio-group.eui-disabled .eui-radio {
  cursor: default;
}
.eui-radio-group.eui-disabled .eui-radio .eui-unselected {
  background: #d8d8d8;
}
.eui-radio-group.eui-disabled .eui-radio .eui-selected {
  background: #d8d8d8;
}
.eui-radio {
  display: flex;
  padding: 6px;
  cursor: pointer;
  align-items: flex-start;
}
.eui-radio.eui-disabled {
  pointer-events: none;
  cursor: default;
}
.eui-radio.eui-disabled .eui-unselected {
  border: 2px solid #e0e0e0;
}
.eui-radio.eui-disabled .eui-selected {
  background: #e0e0e0;
}
.eui-radio.eui-disabled .label-content {
  color: #adadad;
}
.eui-radio__button {
  margin-top: 3px;
  width: 18px;
  height: 18px;
  box-sizing: border-box;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.eui-radio .eui-selected {
  background: var(--he-color-primary, #2450ff);
  border: 0 solid transparent;
}
.eui-focused .eui-radio .eui-selected {
  outline: 2px solid black;
  outline-offset: 1px;
}
.eui-radio .eui-selected .eui-dot {
  background: #ffffff;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.eui-radio .eui-unselected {
  border: 2px solid #d8d8d8;
  flex-shrink: 0;
}
.eui-radio .label-content {
  margin-left: 9px;
  font-family: Inter, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0;
  text-decoration: none;
  text-transform: none;
}
.eui-chips {
  padding: 6px 12px;
  border: solid 1px #d8d8d8;
  border-radius: 18px;
  min-width: 38px;
  font-size: 14px;
  font-weight: 400;
  font-family: Inter, sans-serif;
  line-height: 20px;
  letter-spacing: 0;
  text-decoration: none;
  text-transform: none;
  cursor: pointer;
  text-align: center;
  box-sizing: border-box;
}
.eui-chips:hover {
  background: #f0f0f0;
  border: 1px solid #d8d8d8;
}
.eui-chips:active {
  background: #d6d6d6;
}
.eui-chips.eui-selected {
  background: var(--he-color-primary, #2450ff);
  color: #ffffff;
  border-color: transparent;
}
.eui-chips.eui-selected:hover {
  background: var(--he-color-primary-hover, #1d4ed8);
}
.eui-chips.eui-selected:active {
  background: var(--he-color-primary-active, #1e40af);
}
.eui-focused .eui-chips.eui-selected {
  outline: 2px solid black;
  outline-offset: 1px;
}
.eui-disabled.eui-chips {
  pointer-events: none;
  cursor: default;
  color: #adadad;
  border: solid 1px #e0e0e0;
}
.eui-disabled.eui-chips.eui-selected {
  background: #f0f0f0;
}
.eui-select__body {
  display: flex;
  border: 1px solid #d6d6d6;
  border-radius: 4px;
  font-size: 14px;
  font-family: Inter, sans-serif;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0;
  text-decoration: none;
  text-transform: none;
  gap: 16px;
  justify-content: space-between;
  align-items: center;
  padding: 5px 11px;
  overflow: hidden;
  cursor: pointer;
}
.eui-select__body_disabled {
  cursor: default;
  background: #f5f5f5;
}
.eui-select__body.eui-select__body_disabled:focus-within {
  outline: none;
  border: 1px solid #d6d6d6;
}
.eui-select__body-content {
  flex-shrink: 1;
  overflow: hidden;
  width: 100%;
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */ /* Konqueror HTML */ /* Old versions of Firefox */ /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}
.eui-select__body-mark {
  flex-shrink: 0;
  color: #686868;
}
.eui-select__body-mark.eui-open svg {
  transform: scale(-1, -1);
}
.eui-select__body .eui-select__placeholder {
  color: #d6d6d6;
}
.eui-select__body:hover {
  border-color: #c4c4c4;
}
.eui-select__body:focus, .eui-select__body:focus-visible, .eui-select__body:focus-within {
  outline: 2px solid #0090ff;
  border-color: transparent;
}
.eui-select__dropdown {
  background: #ffffff;
  box-shadow: 0px 2px 8px -3px rgba(34, 34, 34, 0.08), 0px 8px 20px -4px rgba(34, 34, 34, 0.12);
  border-radius: 8px;
  width: 100%;
  display: flex;
  flex-direction: column;
  padding-top: 8px;
  padding-bottom: 8px;
  overflow: hidden auto;
}
.eui-select__dropdown .eui-disabled.eui-select__option {
  pointer-events: none;
  cursor: default;
  font-size: 14px;
  font-family: Inter, sans-serif;
  font-weight: 400;
  line-height: 20px;
}
.eui-select__dropdown .eui-select__option {
  padding: 6px 16px;
  border-radius: 0;
  font-size: 14px;
  font-family: Inter, sans-serif;
  font-weight: 400;
  line-height: 20px;
  cursor: pointer;
}
.eui-select__dropdown .eui-select__option.eui-focused, .eui-select__dropdown .eui-select__option:hover {
  background: #f5f5f5;
}
.eui-select__dropdown .eui-select__option.eui-selected {
  background: #f5f5f5;
}
.eui-combo-box {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #d6d6d6;
  border-radius: 4px;
  padding: 6px 8px 6px 12px;
  cursor: text;
}
.eui-combo-box.eui-open {
  background: #f2f2f2;
}
.eui-combo-box.eui-open svg {
  transform: scale(-1, -1);
}
.eui-combo-box__dropdown {
  display: flex;
  flex-direction: column;
  padding: 8px;
  background: #ffffff;
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.1607843137);
  border-radius: 8px;
  width: 100%;
  overflow: hidden auto;
}
.eui-combo-box__item {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 8px;
  cursor: pointer;
  border-radius: 4px;
  font-size: 14px;
  font-family: Inter, sans-serif;
  font-weight: 400;
  line-height: 20px;
}
.eui-combo-box__item.eui-focused, .eui-combo-box__item:hover {
  background: #f5f5f5;
}
.eui-combo-box__item-check {
  visibility: hidden;
}
.eui-selected .eui-combo-box__item-check {
  visibility: visible;
}
.eui-combo-box__chevron {
  position: relative;
}
.eui-combo-box__chevron::after {
  cursor: pointer;
  position: absolute;
  content: "";
  top: 50%;
  left: 50%;
  width: 32px;
  height: 32px;
  transform: translate(-50%, -50%);
}
.eui-combo-box input {
  width: 100%;
  padding: 0;
  height: 20px;
  border: none;
  outline: none;
  background-color: transparent;
  font-size: 14px;
  font-family: Inter, sans-serif;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0;
  text-decoration: none;
  text-transform: none;
}
.eui-free-panel,
.eui-target-panel {
  background: #ffffff;
}
.eui-context-menu__container {
  position: fixed;
  z-index: 1000;
  pointer-events: none;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.eui-context-menu {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  padding: 4px;
  border-radius: 8px;
  box-shadow: 0px 8px 32px 0px rgba(0, 0, 0, 0.0784313725);
  background-color: #ffffff;
  min-width: 200px;
}
.eui-context-menu__item {
  padding: 6px 8px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 32px;
  cursor: pointer;
  box-sizing: border-box;
  border-radius: 4px;
}
.eui-context-menu__item-check {
  margin-right: 8px;
  width: 16px;
  height: 16px;
}
.eui-context-menu__item-name {
  white-space: nowrap;
  color: #222;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  font-family: Inter, sans-serif;
  line-height: 20px;
  letter-spacing: 0;
  text-decoration: none;
  text-transform: none;
  flex: 1 1 0;
}
.eui-context-menu__item-vector {
  color: #989898;
}
.eui-context-menu__item-hotkey {
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px;
  font-family: Inter, sans-serif;
  letter-spacing: 0;
  text-decoration: none;
  text-transform: none;
  color: #8a8a8a;
  background-color: rgba(0, 0, 0, 0.0509803922);
  border-radius: 2px;
  padding: 2px 4px;
  white-space: nowrap;
  margin-left: 32px;
}
.eui-context-menu__item:hover {
  background-color: #f2f2f2;
}
.eui-context-menu__item_disabled {
  opacity: 0.4;
}
.eui-context-menu__item_disabled text {
  -webkit-user-select: none;
          user-select: none;
}
.eui-context-menu__item_disabled:hover {
  background-color: initial;
  cursor: default;
}
.eui-context-menu__divider {
  border: 0.5px solid #e6e6e6;
}
.eui-context-menu__divider__container {
  padding: 8px 0;
}
.eui-slider-container {
  padding: 12px 0;
  box-sizing: border-box;
  position: relative;
  touch-action: none;
  cursor: pointer;
}
.eui-slider-container.eui-disabled {
  cursor: default;
}
.eui-slider-container.eui-disabled .eui-tracker {
  background: gray;
}
.eui-slider-container.eui-disabled .eui-thumb {
  background: gray;
}
.eui-slider-container.eui-vertical {
  height: 100%;
  padding: 0;
}
.eui-slider-container.eui-vertical .eui-tracker {
  position: relative;
  width: 4px;
  height: 100%;
}
.eui-slider-container.eui-vertical .eui-tracker .eui-fill {
  top: 0;
  width: 100%;
  height: 0;
}
.eui-slider-container.eui-vertical .eui-tracker .eui-beforePointFill {
  content: "";
  position: absolute;
  bottom: 0;
  width: 100%;
  background-color: #e6e6e6;
}
.eui-slider-container.eui-vertical .eui-thumb {
  left: 0;
}
.eui-slider-container.eui-vertical .eui-point {
  width: 8px;
  height: 2px;
  left: 50%;
  transform: translateX(-50%);
}
.eui-slider-container.eui-horizontal .eui-tracker {
  height: 4px;
  width: 100%;
  position: relative;
}
.eui-slider-container.eui-horizontal .eui-tracker .eui-fill {
  right: 0;
  width: 0;
  height: 100%;
}
.eui-slider-container.eui-horizontal .eui-tracker .eui-beforePointFill {
  content: "";
  position: absolute;
  left: 0;
  height: 100%;
  background-color: #e6e6e6;
}
.eui-slider-container.eui-horizontal .eui-thumb {
  top: 50%;
  transform: translateY(-50%);
}
.eui-slider-container.eui-horizontal .eui-point {
  width: 2px;
  height: 8px;
  top: 50%;
  transform: translateY(-50%);
}
.eui-slider-container .eui-tracker {
  overflow: hidden;
  position: relative;
  display: flex;
  justify-content: center;
  border-radius: 0;
  background: #000000;
}
.eui-slider-container .eui-tracker .eui-fill {
  content: "";
  position: absolute;
  background: #e6e6e6;
}
.eui-slider-container .eui-thumb {
  position: absolute;
  background: #000000;
  border: 2px solid #fff;
  border-radius: 50%;
  z-index: 10;
  transition: border ease 200ms, box-shadow ease 200ms;
  transform-origin: center;
  box-sizing: border-box;
}
.eui-slider-container .eui-thumb_drag {
  border: 0 solid #000;
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.16);
}
.eui-slider-container .eui-point {
  position: absolute;
  background-color: #d8d8d8;
}
.eui-overlay-spinner {
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(255, 255, 255, 0.75);
}
.eui-brand-spinner-overlay {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.eui-brand-spinner-overlay .eui-spinner-message {
  margin-top: 14px;
  font-size: 14px;
  line-height: 26px;
  font-size: 14px;
  font-weight: 400;
  font-family: Inter, sans-serif;
  letter-spacing: 0;
  text-decoration: none;
  text-transform: none;
  text-align: center;
  color: #222222;
}
.eui-brand-spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.eui-brand-spinner .eui-spinner {
  font-size: inherit;
  border-left: 3px solid var(--he-color-primary, #2450ff);
  border-right: 3px solid #c4c4c4;
  border-top: 3px solid #c4c4c4;
  border-bottom: 3px solid #c4c4c4;
  background-image: none;
  background-clip: unset;
  background-origin: unset;
  transform: translateZ(0);
  animation: spin 1.1s infinite linear;
  border-radius: 50%;
  height: 60px;
  width: 60px;
}
.eui-brand-spinner .eui-logo {
  position: absolute;
  width: 32px;
  height: 32px;
}
.eui-brand-spinner .eui-logo > img {
  width: 32px;
  height: 32px;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.eui-circle-spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.eui-circle-spinner .eui-spinner {
  font-size: 14px;
  font-weight: 400;
  font-family: Inter, sans-serif;
  line-height: 20px;
  letter-spacing: 0;
  text-decoration: none;
  text-transform: none;
  border-left: 4px solid var(--he-color-primary, #2450ff);
  border-right: 4px solid var(--he-color-primary, #2450ff);
  border-top: 4px solid var(--he-color-primary, #2450ff);
  border-bottom: 4px solid #d6d6d6;
  transform: translateZ(0);
  animation: spin 1.1s infinite linear;
  border-radius: 50%;
}
.eui-template-spinner {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.eui-circle-progress .eui-circle {
  stroke: #c4c4c4;
}
.eui-circle-progress .eui-progress {
  stroke: var(--he-color-primary, #2450ff);
}
.eui-tooltip {
  color: #ffffff;
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-weight: var(--he-body-font-weight-medium, 500);
  letter-spacing: 0;
  line-height: 20px;
  text-decoration: none;
  text-transform: none;
  text-align: center;
  background-color: #000000;
  border-radius: 4px;
  padding: 4px 8px;
  max-width: 180px;
  position: relative;
  box-shadow: 0px 8px 20px -4px rgba(0, 0, 0, 0.12), 0px 3px 6px -3px rgba(0, 0, 0, 0.08);
}
.eui-tooltip-panel {
  background: transparent;
}
.eui-tooltip-panel .eui-tip {
  background-color: #000000;
  width: 8px;
  height: 4px;
  position: absolute;
}
.eui-tooltip-panel_left .eui-tip, .eui-tooltip-panel_right .eui-tip {
  width: 4px;
  height: 8px;
}
.eui-tooltip-panel_top .eui-tip, .eui-tooltip-panel_bottom .eui-tip {
  width: 8px;
  height: 4px;
}
.eui-tooltip-panel_left .eui-tooltip, .eui-tooltip-panel_right .eui-tooltip, .eui-tooltip-panel_top .eui-tooltip, .eui-tooltip-panel_bottom .eui-tooltip {
  margin: 4px;
}
.eui-tooltip-panel_left .eui-tip, .eui-tooltip-panel_right .eui-tip, .eui-tooltip-panel_top .eui-tip, .eui-tooltip-panel_bottom .eui-tip {
  background-color: #000000;
}
.eui-tooltip-panel_left .eui-tooltip {
  margin-right: 8px;
}
.eui-tooltip-panel_left .eui-tip {
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  clip-path: polygon(100% 50%, 0% 0%, 0% 100%);
}
.eui-tooltip-panel_right .eui-tooltip {
  margin-left: 8px;
}
.eui-tooltip-panel_right .eui-tip {
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  clip-path: polygon(100% 0%, 0% 50%, 100% 100%);
}
.eui-tooltip-panel_top .eui-tooltip {
  margin-bottom: 12px;
}
.eui-tooltip-panel_top .eui-tip {
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  clip-path: polygon(100% 0%, 0% 0%, 50% 100%);
}
.eui-tooltip-panel_bottom .eui-tooltip {
  margin-top: 12px;
}
.eui-tooltip-panel_bottom .eui-tip {
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
:host {
  display: block;
}
.eui-font-size {
  margin: 0 2px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}
.eui-font-size .eui-font-size__decrease {
  border-left: 1px solid #d6d6d6;
  border-top: 1px solid #d6d6d6;
  border-bottom: 1px solid #d6d6d6;
  border-radius: 4px 0px 0px 4px;
  border-right: none;
  background: none;
  cursor: pointer;
  padding: 3px;
  margin: 0;
  width: 32px;
  height: 32px;
}
.eui-font-size__input {
  width: 48px;
  height: 32px;
}
.eui-font-size__input:hover {
  background: #f2f2f2;
}
.eui-font-size__input .eui-number-input {
  border-radius: 0;
  height: 32px;
}
.eui-font-size__input .eui-number-input input {
  text-align: center;
}
.eui-font-size .eui-font-size__increase {
  padding: 3px;
  margin: 0;
  border-radius: 0px 4px 4px 0px;
  border-right: 1px solid #d6d6d6;
  border-top: 1px solid #d6d6d6;
  border-bottom: 1px solid #d6d6d6;
  border-left: none;
  background: none;
  cursor: pointer;
  width: 32px;
  height: 32px;
}
.eui-font-size-values {
  padding: 8px;
  margin: 0;
  max-height: 60vh;
  overflow: hidden scroll;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.16);
}
.eui-font-size-values__item {
  padding: 6px;
  margin: 0;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.eui-font-size-values__item:hover {
  background: #f2f2f2;
}
.eui-font-size-values__check {
  margin-right: 8px;
}
.eui-font-size-values__text {
  font-size: 14px;
  line-height: 20px;
  width: 39px;
}
.eui-action-button {
  cursor: pointer;
  background: #ffffff;
  border-radius: 4px;
  padding: 6px 8px;
  border: 0px solid transparent;
  color: #1e1e1e;
  font-size: 14px;
  line-height: 20px;
  height: 100%;
  display: block;
}
.eui-action-button:hover {
  background: #f2f2f2;
}
.eui-action-button:active {
  background: #e6e6e6;
}
.eui-action-button:focus-visible {
  outline: 2px solid #2450ff;
  background: #f2f2f2;
}
.eui-action-button:disabled {
  background: #ffffff;
  color: #b2b2b2;
  cursor: auto;
}
.eui-action-button_icon {
  padding: 4px;
  width: 32px;
  height: 32px;
}
.eui-action-button_icon-text {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
}
.eui-action-button_selected {
  background: #f2f2f2;
}
.eui-action-button_fit {
  width: 100%;
}
.eui-action-button_active {
  background: #e6e6e6;
}
@media (max-width: 768px) {
  .eui-action-button {
    background: #fcfcfc;
  }
  .eui-action-button:hover {
    background: #fcfcfc;
  }
  .eui-action-button_icon {
    background: #ffffff;
  }
}
.eui-icon-swatch {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.32);
  border-radius: 2px;
  width: 24px;
  height: 24px;
  box-sizing: border-box;
  display: block;
  cursor: pointer;
}
.eui-icon-swatch_no-color::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: linear-gradient(to right bottom, white, white 46%, red 47%, red 53%, white 54%, white) !important;
}
.eui-icon-swatch_border {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
}
.eui-icon-swatch_border:before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 1px;
  background: white;
  border: 1px solid rgba(0, 0, 0, 0.5490196078);
  z-index: 2;
}
.eui-slider-name {
  font-size: 12px;
  line-height: 16px;
  margin-bottom: 4px;
}
.eui-slider-group {
  display: flex;
  align-items: center;
}
.eui-slider-body {
  width: 100%;
  min-width: 168px;
  margin-right: 16px;
}
@media (max-width: 768px) {
  .eui-slider-body {
    width: 100%;
  }
}
.eui-slider-input {
  width: 64px;
  max-width: 64px;
}
.eui-select-item {
  font-size: 14px;
  font-family: Inter;
  line-height: 20px;
  text-wrap: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
eui-select .eui-select__body-mark {
  color: black;
}
.eui-align {
  display: flex;
  box-sizing: border-box;
  justify-content: space-between;
  gap: 8px;
}
.eui-align__mobile {
  padding: 0 0 24px 0;
}
.eui-align eui-svg-icon {
  margin-right: 8px;
  flex-grow: 0;
}
.eui-align .eui-action-button {
  flex: 1 1 0;
}
.eui-align__column {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.eui-align__item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.eui-align__text {
  flex-grow: 2;
  text-align: left;
}
.eui-arrange {
  display: flex;
  flex-direction: column;
}
.eui-arrange__item {
  display: flex;
  align-items: center;
  gap: 8px;
}
@media (max-width: 768px) {
  .eui-arrange__item {
    justify-content: center;
  }
}
.eui-group .tree-out {
  gap: 4px;
}
.eui-combo-box-name {
  font-size: 12px;
  line-height: 16px;
  margin-bottom: 4px;
}
.eui-combo-box-body {
  width: 168px;
  margin-right: 16px;
}
.eui-combo-box-body__text {
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
}
@keyframes shine-gradient {
  0% {
    background-position: 0px;
  }
  40%, 100% {
    background-position: 214px;
  }
}
.eui-color-picker {
  width: 232px;
}
.eui-color-picker__header {
  padding: 0 0 16px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.eui-color-picker__header-actions {
  display: flex;
}
.eui-color-picker__title {
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}
.eui-color-picker__palette-grid {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.eui-color-picker__palette-sections {
  display: flex;
  gap: 16px;
  flex-direction: column;
}
.eui-color-picker__picker {
  margin-top: 16px;
}
.eui-color-picker__picker_gradient {
  width: 232px;
  height: 132px;
}
.eui-color-picker__picker_gradient.eui-skeleton {
  background-image: linear-gradient(90deg, #f5f5f5 0px, #fdfdfd 40px, #f5f5f5 80px);
  background-size: 250px;
  animation: shine-gradient 1.6s infinite linear;
}
.eui-color-picker__picker_hue {
  width: 232px;
  height: 16px;
}
.eui-color-picker__picker_hue.eui-skeleton {
  background-image: linear-gradient(90deg, #f5f5f5 0px, #fdfdfd 40px, #f5f5f5 80px);
  background-size: 250px;
  animation: shine-gradient 1.6s infinite linear;
}
.eui-color-picker__picker_form {
  height: 39px;
  width: 100%;
}
.eui-color-picker__picker_form.eui-skeleton {
  background-image: linear-gradient(90deg, #f5f5f5 0px, #fdfdfd 40px, #f5f5f5 80px);
  background-size: 250px;
  animation: shine-gradient 1.6s infinite linear;
}
.eui-color-picker__picker-skeleton-container {
  width: 230px;
  height: 158px;
  align-items: center;
  gap: 10px;
  display: flex;
  flex-direction: column;
}
.eui-transform {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.eui-transform .field-row {
  display: flex;
  gap: 8px;
}
.eui-transform .field-row .field {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.eui-transform .field-row .field .label {
  margin-bottom: 4px;
  display: flex;
  align-items: center;
}
.eui-transform .field-row .field .input-container {
  display: flex;
  align-items: center;
  width: 116px;
}
.eui-transform .field-row .field .input-container .eui-number-input {
  height: 32px;
}
.eui-icon-swatch .color-full,
.eui-icon-swatch .color-half,
.eui-icon-swatch .color-third,
.eui-icon-swatch .color-corner {
  min-height: 0;
  min-width: 0;
}
.eui-icon-swatch .single-color {
  width: 100%;
  height: 100%;
}
.eui-icon-swatch .color-full {
  width: 100%;
  height: 100%;
}
.eui-icon-swatch .two-colors {
  display: flex;
  width: 100%;
  height: 100%;
}
.eui-icon-swatch .color-half {
  flex: 1;
  height: 100%;
}
.eui-icon-swatch .three-colors {
  display: flex;
  width: 100%;
  height: 100%;
}
.eui-icon-swatch .color-third {
  flex: 1;
  height: 100%;
}
.eui-icon-swatch .four-colors {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  width: 100%;
  height: 100%;
}
.eui-icon-swatch .color-corner {
  min-width: 0;
  min-height: 0;
}
.eui-icon-swatch .top-left {
  border-top-left-radius: inherit;
}
.eui-icon-swatch .top-right {
  border-top-right-radius: inherit;
}
.eui-icon-swatch .bottom-left {
  border-bottom-left-radius: inherit;
}
.eui-icon-swatch .bottom-right {
  border-bottom-right-radius: inherit;
}
.eui-icon-swatch.eui-icon-swatch_border:before {
  position: absolute;
}
.eui-apply-finish__button {
  display: flex;
  height: 32px;
  padding: 0 4px;
}
.eui-apply-finish__button-item {
  background: #ffffff;
  color: #1e1e1e;
  font-size: 14px;
  line-height: 20px;
  height: 100%;
  cursor: pointer;
}
.eui-apply-finish__button-item:hover {
  background-color: #f2f2f2;
}
.eui-apply-finish__button-item:active {
  background-color: #e6e6e6;
}
.eui-apply-finish__button-action {
  border: 1px solid #d6d6d6;
  border-radius: 4px 0 0 4px;
  padding: 6px 8px;
  white-space: nowrap;
}
.eui-apply-finish__button-panel {
  border-top: 1px solid #d6d6d6;
  border-right: 1px solid #d6d6d6;
  border-bottom: 1px solid #d6d6d6;
  border-left-width: 0;
  border-radius: 0 4px 4px 0;
  padding: 8px;
}
.eui-apply-finish__button-panel eui-svg-icon {
  color: #1e1e1e;
}
.eui-apply-finish__button_active {
  background: #f2f2f2;
}
.eui-apply-finish__button_active eui-svg-icon {
  transform: rotate(180deg);
}
.eui-apply-finish__button_single {
  border-radius: 4px;
}
.eui-apply-finish__panel {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 4px;
  border-radius: 4px;
}
.eui-apply-finish__panel-item {
  text-wrap: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  padding: 6px 8px;
  width: 100%;
  box-sizing: border-box;
  cursor: pointer;
  border-radius: 4px;
}
.eui-apply-finish__panel-item:hover {
  background-color: #f2f2f2;
}
.eui-apply-finish__panel-item:active {
  background-color: #e6e6e6;
}
.eui-apply-finish__panel-item_active {
  background-color: #f2f2f2;
}
.eui-apply-finish eui-select {
  width: 100%;
  min-width: 167px;
}
.eui-select__dropdown {
  max-height: 60vh;
  overflow: hidden scroll;
}
.eui-divider-container {
  padding: 4px;
}
.eui-divider-container .eui-divider {
  width: 1px;
  height: 24px;
  background: #e0e0e0;
}
.eui-menu-md,
.eui-menu-sm,
.eui-menu-lg {
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.16);
  background: #fff;
  border-radius: 8px;
}
.eui-menu-md .tree-out,
.eui-menu-sm .tree-out,
.eui-menu-lg .tree-out {
  flex-direction: column;
}
.cdk-overlay-pane .tree-out {
  gap: 16px;
}
.tree-out {
  display: flex;
}
.eui-float-panel-md {
  padding: 16px;
}
.eui-color-picker-panel {
  padding: 24px;
}
.eui-float-panel-sm {
  padding: 8px;
}
.eui-font-family-item {
  border-radius: 4px;
  background-color: #ffffff;
  padding: 4px 8px;
  line-height: 24px;
  font-size: 16px;
}
.eui-font-family-item__selected {
  background-color: #f2f2f2;
}
@keyframes shine-gradient {
  0% {
    background-position: 0px;
  }
  40%, 100% {
    background-position: 214px;
  }
}
.eui-mobile-color-picker {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.eui-mobile-color-picker__content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px 0 24px 0;
}
.eui-mobile-color-picker__picker-skeleton-container_gradient {
  background-image: linear-gradient(90deg, #f5f5f5 0px, #fdfdfd 40px, #f5f5f5 80px);
  background-size: 250px;
  animation: shine-gradient 1.6s infinite linear;
}
.eui-mobile-color-picker__picker-skeleton-container_hue {
  background-image: linear-gradient(90deg, #f5f5f5 0px, #fdfdfd 40px, #f5f5f5 80px);
  background-size: 250px;
  animation: shine-gradient 1.6s infinite linear;
}
.eui-mobile-color-picker .spectrum-gradient {
  width: 100%;
  height: 200px;
  border-radius: 8px;
}
.eui-mobile-color-picker .spectrum-hue {
  width: 100%;
  height: 32px;
}
.eui-mobile-color-picker .spectrum-hue .eui-hor-slider-hue {
  border-radius: 16px;
}
.eui-mobile-color-picker .eui-hor-slider-hue .pointer > div,
.eui-mobile-color-picker .eui-gradient .pointer > div {
  width: 32px;
  height: 32px;
  border: 6px solid #fff;
}
.eui-mobile-color-picker .swatches {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.eui-mobile-color-picker .swatches .eui-swatch {
  width: 48px;
  height: 48px;
}
.eui-mobile-color-picker .swatch-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.eui-mobile-color-picker .spectrum-label {
  font-family: Inter, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0;
}
.eui-font-family-item {
  border-radius: 4px;
  background-color: #ffffff;
  padding: 4px 8px;
  line-height: 24px;
  font-size: 16px;
}
.eui-font-family-item__selected {
  background-color: #f2f2f2;
}
.eui-border-style-container {
  display: flex;
  gap: 8px;
  justify-content: space-between;
}
.eui-slider-group {
  display: flex;
  align-items: center;
  height: 40px;
  gap: 8px;
}
.eui-slider-group .eui-slider-body {
  flex: 1;
}
.eui-slider-group .eui-slider-input {
  width: 72px;
  text-align: center;
}
.property-viewer-item {
  color: #000000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  padding: 0;
  min-width: 64px;
  height: 64px;
  font-size: 12px;
  font-weight: 500;
  background: #fff;
  border: none;
  line-height: 16px;
  text-wrap: nowrap;
}
.bs-content-container {
  padding: 24px 0;
}
.bs-content-container .tree-out {
  flex-direction: column;
  gap: 16px;
}
.eui-divider {
  width: 1px;
  height: 100%;
  background: #e0e0e0;
}
.eui-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
  font-family: var(--he-font-family, "Inter");
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  border-radius: var(--he-buttons-border-radius, 24px);
  border: none;
  box-sizing: border-box;
  width: 100%;
  cursor: pointer;
}
.eui-btn_primary {
  color: var(--he-color-primary-contrast, #ffffff);
  background: var(--he-color-primary, #2450ff);
}
.eui-btn_primary:disabled {
  color: #b2b2b2;
  background: #e6e6e6;
  cursor: default;
}
.eui-btn_primary:hover:not(:disabled) {
  background: var(--he-color-primary-hover, #1d4ed8);
}
.eui-btn_primary:hover:not(:disabled):active {
  background: var(--he-color-primary-active, #1e40af);
}
.eui-btn_secondary {
  color: #1e1e1e;
  background: #f2f2f2;
}
.eui-btn_secondary:disabled {
  background: #e6e6e6;
  color: #b2b2b2;
  cursor: default;
}
.eui-btn_secondary:hover:not(:disabled) {
  background: #e6e6e6;
}
.eui-btn_secondary:hover:not(:disabled):active {
  background: #d6d6d6;
}
.eui-btn_fit {
  width: fit-content;
}
.eui-btn_lg {
  padding: 12px 24px;
}
.eui-btn_elg {
  padding: 16px 24px;
  border-radius: 28px;
}
.eui-btn_md {
  padding: 10px 16px;
  font-size: 14px;
  line-height: 20px;
}
.eui-btn_sm {
  padding: 6px 16px;
  font-size: 14px;
  line-height: 20px;
}
@media (max-width: 768px) {
  .eui-btn_lg {
    padding: 10px 16px;
    font-size: 14px;
  }
}
.eui-thumb[draggable=true] .eui-thumb-preview {
  cursor: grab;
}
.eui-thumb.is-dragging {
  opacity: 0.55;
}
.eui-thumb:focus-visible {
  border-radius: 8px;
  outline: 2px solid var(--he-color-primary, #2450ff);
  outline-offset: 4px;
}
.eui-thumb-preview {
  padding-top: 100%;
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.15);
  background: #f2f2f2;
}
.eui-thumb-preview__preview {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  display: flex;
  align-items: center;
  justify-content: center;
}
.eui-thumb-preview__preview.eui-thumb-preview__preview_is-shape {
  top: 19px;
  left: 19px;
  right: 19px;
  bottom: 19px;
}
.eui-thumb-preview__empty {
  color: #b6b6b6;
}
.eui-thumb-preview:hover {
  border: 1px solid rgba(0, 0, 0, 0.3);
}
.eui-thumb-preview:hover .eui-thumb-preview__delete {
  display: block;
}
.eui-thumb-preview:not(:last-child) {
  margin-bottom: 5px;
}
.eui-thumb-preview__delete {
  display: none;
  position: absolute;
  right: 3px;
  top: 3px;
  z-index: 1;
}
.eui-thumb-preview__delete_visible {
  display: block;
}
.eui-thumb__label {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 14px;
  font-style: normal;
  text-align: center;
}
.eui-skeleton {
  background-color: #eee;
  background-image: linear-gradient(90deg, #eee 0px, #f6f6f6 55px, #eee 110px);
  background-repeat: no-repeat;
  animation: skeleton 3.2s infinite ease-in;
  padding-top: 100%;
  border-radius: 16px;
}
@keyframes skeleton {
  0% {
    background-position: -110px;
  }
  40%, 100% {
    background-position: 100%;
  }
}
.eui-search-input {
  display: flex;
  flex-direction: row;
  border: 1px solid #d6d6d6;
  border-radius: 20px;
  gap: 8px;
  padding: 6px 0 6px 12px;
  box-sizing: border-box;
  width: 100%;
}
.eui-search-input_focused {
  outline: 2px solid var(--he-color-primary, #2450ff);
}
.eui-search-input > input {
  border: none;
  outline: none;
  width: 100%;
  border-bottom-right-radius: 20px;
  border-top-right-radius: 20px;
}
.eui-search-input__reset {
  width: 32px;
  height: 100%;
  background-color: transparent;
  border: none;
  outline: none;
  cursor: pointer;
}
.eui-data-input > input {
  width: 100%;
  height: 40px;
  padding: 10px 12px;
  border-radius: 4px;
  border: 1px solid #d6d6d6;
  outline: none;
  box-sizing: border-box;
  font-size: var(--he-body-font-size, 14px);
}
.eui-data-input > input:focus {
  border: 2px solid var(--he-color-primary, #2450ff);
  padding: 9px 11px;
}
.eui-data-input > input.ng-invalid.ng-dirty {
  border: 2px solid var(--he-color-danger, #dc2626) !important;
}
.eui-data-input__error-message {
  color: var(--he-color-danger, #dc2626);
  font-size: 14px;
  margin-top: 5px;
}
.eui-data-area__capture {
  padding-bottom: 8px;
  font-family: var(--he-font-family, "Inter");
  font-weight: 600;
  font-size: 12px;
}
.eui-data-area textarea {
  min-height: 112px;
  width: 100%;
  padding: 6px 8px;
  border: 1px solid #d6d6d6;
  border-radius: 4px;
  font-family: var(--he-font-family, "Inter");
  line-height: 20px;
  font-weight: 400;
  resize: none;
  color: #1e1e1e;
}
.eui-data-area textarea:focus {
  outline: none;
  border: 2px solid var(--he-color-primary, #2450ff);
}
.eui-assets-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--he-color-background, #ffffff);
  padding: 16px 4px;
  width: 76px;
}
.eui-assets-panel__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
}
.eui-assets-panel__item:hover .eui-assets-panel__icon {
  background: #f2f2f2;
}
.eui-assets-panel__item_selected .eui-assets-panel__icon, .eui-assets-panel__item:active .eui-assets-panel__icon {
  background: rgba(36, 80, 255, 0.12);
}
.eui-assets-panel__icon {
  padding: 4px 16px;
  border-radius: 16px;
}
.eui-assets-panel__text {
  width: 100%;
  text-align: center;
  font-size: 10px;
  font-family: var(--he-font-family, "Inter");
  font-weight: 400;
  line-height: 12px;
}
.eui-bottom-panel {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  padding: 8px;
  background: var(--he-color-background, #ffffff);
  border: solid 1px #e0e0e0;
  height: 48px;
}
.eui-zoom {
  display: flex;
  gap: 4px;
}
.eui-zoom__slider {
  width: 160px;
  margin: auto 0;
}
.eui-zoom__button {
  width: calc(5ch + 16px);
  text-align: center;
}
.eui-pagination {
  display: flex;
  align-items: center;
  gap: 4px;
}
.eui-pagination__info {
  width: fit-content;
  display: flex;
  justify-content: center;
}
.eui-pagination__tab {
  height: 32px;
  padding: 0 20px;
  border-radius: 32px;
  border: 2px solid transparent;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #e6e6e6;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  color: #686868;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.eui-pagination__tab_active {
  background-color: transparent;
  border-color: #000000;
  color: #000000;
}
.eui-history {
  display: flex;
  gap: 4px;
}
.eui-3d-animation-slider-control {
  background: var(--he-color-background, #ffffff);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px;
  height: 48px;
}
.eui-3d-animation-slider-control .eui-animation-slider {
  display: flex;
  padding: 0 4px 0 4px;
}
.eui-3d-animation-slider-control .eui-animation-slider > input[type=range] {
  border-radius: 4px;
  width: 120px;
  height: 6px;
  overflow: hidden;
  display: inline-block;
  -webkit-appearance: none;
  background-color: #d6d6d6;
  position: relative;
  cursor: pointer;
  margin: 0;
}
.eui-3d-animation-slider-control .eui-animation-slider > input[type=range]::-webkit-slider-runnable-track {
  height: 6px;
  -webkit-appearance: none;
  color: var(--he-color-primary, #2450ff);
}
.eui-3d-animation-slider-control .eui-animation-slider > input[type=range]::-webkit-slider-thumb {
  width: 1px;
  -webkit-appearance: none;
  height: 6px;
  cursor: pointer;
  background: #d6d6d6;
  box-shadow: -280px 0 0 280px var(--he-color-primary, #2450ff);
}
.eui-3d-animation-slider-control .eui-animation-slider > input[type=range]::-moz-range-progress {
  background-color: var(--he-color-primary, #2450ff);
}
.eui-3d-animation-slider-control .eui-animation-slider > input[type=range]::-moz-range-track {
  background-color: #d6d6d6;
}
.eui-3d-animation-slider-control .eui-animation-slider > input[type=range]::-ms-fill-lower {
  background-color: var(--he-color-primary, #2450ff);
}
.eui-3d-animation-slider-control .eui-animation-slider > input[type=range]::-ms-fill-upper {
  background-color: #d6d6d6;
}
.eui-buttons-animation-control {
  display: flex;
  align-items: center;
}
.eui-buttons-animation-control .eui-animated-selector {
  width: 100%;
  border-radius: 4px;
}
.threeD-viewer {
  width: 100%;
  height: 100%;
}
.eui-design-colors {
  width: fit-content;
  background: var(--he-color-background, #ffffff);
  height: 48px;
  padding: 8px;
  border: solid 1px #e0e0e0;
  display: flex;
  align-items: center;
  max-width: 480px;
  overflow: hidden;
}
.eui-design-colors__label {
  font-size: var(--he-body-font-size, 14px);
  padding: 0 8px;
  text-wrap-mode: nowrap;
}
.eui-design-colors__color-list {
  display: flex;
  gap: 8px;
  max-width: 256px;
  width: fit-content;
  overflow: auto;
}
.eui-design-colors__color-list .eui-swatch {
  width: 24px;
  height: 24px;
  position: relative;
  border-radius: 4px;
  cursor: default;
  border: none;
}
.eui-design-colors__color-list .eui-swatch:hover {
  border: none;
}
.eui-design-colors__color-list .eui-palette-section-label {
  width: 24px;
  height: 24px;
  position: relative;
}
.eui-design-colors__color-list .eui-layer-color {
  border: 1px solid rgba(0, 0, 0, 0.55);
}
.eui-design-colors__color-list .eui-layer-color,
.eui-design-colors__color-list .eui-layer-hover-overlay,
.eui-design-colors__color-list .eui-select-border {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
}
.eui-target-panel.eui-popover {
  background: transparent;
}
.eui-popover-hint {
  background-color: var(--he-color-background, #ffffff);
  padding: 24px 64px 24px 24px;
  border-radius: 16px;
  max-width: 480px;
  box-shadow: var(--he-color-shadow, rgba(0, 0, 0, 0.1607843137));
  font-size: var(--he-body-font-size, 14px);
  font-weight: 400;
  line-height: 20px;
  display: flex;
  margin-bottom: 16px;
  position: relative;
}
.eui-popover-hint__close {
  position: absolute;
  top: 16px;
  right: 16px;
}
.eui-popover-hint__tip {
  background-color: var(--he-color-background, #ffffff);
  position: absolute;
  width: 16px;
  height: 8px;
  top: 100%;
  left: 20px;
  transform: translateX(-50%);
  clip-path: polygon(100% 0%, 0% 0%, 50% 100%);
  box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
  z-index: 1;
}
.eui-popover-hint__tip-shadow {
  position: absolute;
  width: 18px;
  height: 8px;
  top: 101%;
  left: 20px;
  transform: translateX(-50%);
  clip-path: polygon(100% 0%, 0% 0%, 50% 100%);
  filter: blur(10px) opacity(30%);
  background: black;
}
.eui-right-custom-panel {
  background-color: var(--he-color-background, #ffffff);
  width: var(--he-right-custom-panel-width, clamp(480px, 34vw, 680px));
  min-width: 420px;
  max-width: 50vw;
  height: calc(100vh - 112px);
  box-sizing: border-box;
}
.eui-right-custom-panel__head {
  padding: 16px 16px 16px 24px;
  display: flex;
  justify-content: space-between;
  position: sticky;
  top: 0;
  background: var(--he-color-background, #ffffff);
  z-index: 1;
}
.eui-right-custom-panel__title {
  font-weight: var(--he-heading-2-font-weight, 600);
  font-size: var(--he-heading-2-font-size, 18px);
  line-height: var(--he-heading-2-line-height, 24px);
}
.eui-right-custom-panel__content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 24px 24px 24px;
  min-width: 0;
}
@media (max-width: 1280px) {
  .eui-right-custom-panel {
    width: var(--he-right-custom-panel-width, 420px);
    min-width: 360px;
    max-width: 46vw;
  }
}
.eui-image-colors {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 0 16px;
}
.eui-image-colors-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(30px, 1fr));
  gap: 8px;
}
.eui-image-colors-reset {
  display: flex;
  justify-content: center;
}
.eui-image-colors .eui-image-colors__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.eui-image-colors .eui-image-colors__list .eui-swatch {
  width: 24px;
  height: 24px;
}
.eui-image-colors .eui-image-colors__item {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
  border: 1px solid #d6d6d6;
  border-radius: 4px;
  height: 40px;
  width: 100%;
  cursor: pointer;
  font-size: 12px;
  min-width: 0;
}
.eui-image-colors .eui-image-colors__item__text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}
.eui-image-colors .eui-image-colors__item .eui-swatch {
  width: 24px;
  height: 24px;
}
.eui-image-colors .eui-image-colors__empty {
  padding: 0 8px;
  color: #686868;
  font-style: italic;
}
.eui-image-colors .eui-image-colors-reset {
  display: flex;
  justify-content: center;
}
.eui-generate-image-form {
  display: flex;
  flex-direction: column;
  padding: 0 0 24px;
  gap: 16px;
}
.eui-qr-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: stretch;
  margin-block-end: 16px;
}
.eui-change-color-head {
  display: flex;
  gap: 10px;
  align-items: center;
}
.eui-color-section.eui-color-section_mode-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(30px, 1fr));
  gap: 8px;
}
.eui-color-section.eui-color-section_mode-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.eui-color-section.eui-color-section_mode-list .eui-color-section__swatch-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}
.eui-dropdown-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.eui-dropdown-container .eui-reset-button {
  width: 100px;
  font-weight: 600;
  font-size: 14px;
  padding: 8px 16px;
  border-radius: 20px;
  border-color: transparent;
  background-color: #f2f2f2;
  cursor: pointer;
}
.eui-product-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.eui-asset-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 8px;
}
.eui-asset-panel__title {
  font-size: var(--he-heading-2-font-size, 18px);
  font-family: var(--he-font-family, "Inter");
  font-weight: var(--he-heading-2-font-weight, 600);
  line-height: var(--he-heading-2-line-height, 24px);
  margin: 0;
  flex: 0 0;
  white-space: nowrap;
}
.eui-asset-panel__close {
  cursor: pointer;
  right: -8px;
  position: relative;
  width: 32px;
  height: 32px;
}
.eui-asset-panel__left-icon {
  cursor: pointer;
  position: relative;
  left: -8px;
  width: 32px;
  height: 32px;
}
.eui-asset-panel__left-icon:empty {
  width: 0;
  height: 0;
}
.eui-asset-panel__head {
  display: flex;
  padding: 16px 24px;
  flex-direction: column;
  gap: 8px;
  justify-content: space-between;
}
.eui-asset-panel__head-container {
  display: flex;
}
.eui-asset-panel__head-title-container {
  display: flex;
  justify-content: space-between;
  width: 100%;
  align-items: center;
}
.eui-asset-panel__body {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  padding: 0 24px;
  height: 100%;
}
.eui-asset-panel__footer {
  font-size: 12px;
  font-family: var(--he-font-family, "Inter");
  font-weight: 400;
  line-height: 16px;
  padding: 8px 24px;
  flex: 0 0;
}
.eui-asset-panel__link {
  display: inline;
  text-decoration: none;
  color: #0000ff;
}
.eui-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 12px;
  align-content: flex-start;
}
.eui-grid__mobile {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 8px;
  padding: 0;
  align-content: flex-start;
}
.eui-grid .eui-scroll-anchor {
  display: block;
  width: 100%;
  height: 1px;
  pointer-events: none;
  visibility: hidden;
}
.eui-empty {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: var(--he-body-font-size, 14px);
  font-weight: 400;
  line-height: 20px;
  padding: 24px;
  flex: 1 1 0;
}
.spinner {
  margin: 0 auto;
  grid-column: span 2;
}
.spinner__mobile {
  grid-column: span 3;
}
.eui-text-hint {
  font-size: var(--he-body-font-size, 14px);
  font-weight: 400;
  line-height: 20px;
  text-align: center;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}
.eui-dropdown-common {
  width: 240px;
  font-weight: 400;
  display: flex;
  flex-direction: column;
  height: 100%;
  font-size: 12px;
  color: #686868;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-radius: 8px;
  box-shadow: 0px 2px 8px 0px var(--he-color-shadow, rgba(0, 0, 0, 0.1607843137));
}
.eui-dropdown-common .eui-color-section__swatch-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}
.eui-dropdown-common .eui-color-section-wrapper {
  margin-top: 8px;
  margin-left: 8px;
}
.eui-dropdown-common .eui-color-section-wrapper .eui-swatch {
  width: 24px;
  height: 24px;
}
.eui-dropdown-common .eui-color-section__swatch-item {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 4px 0;
}
.eui-dropdown-common .eui-color-section__swatch-item_titles {
  padding: 0;
}
.eui-dropdown-common .eui-color-section__swatch-item cp-swatch {
  flex-shrink: 0;
}
.eui-dropdown-common .eui-color-section__swatch-item span {
  color: black;
}
.eui-dropdown-common .eui-search-wrapper {
  padding: 16px;
}
.eui-dropdown-common hr {
  border: 0;
  height: 1px;
  background-color: #e6e6e6;
  margin: 8px 0;
}
.eui-dropdown-common .eui-scrollable-area {
  padding: 0 8px 0px 8px;
  overflow-y: auto;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.eui-editor-body .eui-3d-viewer .eui-animation-controller, .eui-editor-body .eui-editor-viewer__bottom-toolbar, .eui-editor-body .eui-editor-viewer__design-colors, .eui-editor-body__3d-viewer-toggle {
  position: absolute;
  box-shadow: 0px 1px 4px 0px var(--he-color-shadow, rgba(0, 0, 0, 0.1607843137));
  overflow: hidden;
  z-index: 100;
  border-radius: 8px;
}
.eui-editor {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  background: var(--he-color-background, #ffffff);
}
.eui-editor-header {
  width: 100%;
  height: 64px;
  padding: 8px 16px;
  border: solid 1px #e0e0e0;
  border-bottom: 0;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  align-items: center;
}
.eui-editor-header__steps {
  display: flex;
  gap: 8px;
}
.eui-editor-header__default-logo:not(:only-child) {
  display: none;
}
.eui-editor-properties-panel {
  width: 100%;
  height: 48px;
  box-sizing: border-box;
  border: solid 1px #e0e0e0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-shrink: 0;
}
.eui-editor-body {
  display: flex;
  height: 100%;
  min-height: 0;
  position: relative;
}
.eui-editor-body_docked-left {
  --he-action-rail-width: 76px;
  --he-action-panel-width: 320px;
  --he-left-workspace-width: var(--he-action-rail-width);
}
.eui-editor-body_docked-left.eui-editor-body_action-panel-open {
  --he-left-workspace-width: calc(var(--he-action-rail-width) + var(--he-action-panel-width));
}
.eui-editor-body__3d-viewer-toggle {
  top: 8px;
  right: 8px;
  border-radius: 4px;
}
.eui-editor-body .eui-editor-left-workspace {
  position: relative;
  width: var(--he-left-workspace-width, 0);
  min-width: var(--he-left-workspace-width, 0);
  height: 100%;
  box-sizing: border-box;
  background: var(--he-color-background, #ffffff);
  border-right: 1px solid #e0e0e0;
  z-index: 101;
}
.eui-editor-body .eui-editor-left-workspace .eui-assets-panel {
  width: var(--he-action-rail-width, 76px);
  height: 100%;
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: hidden;
}
.eui-editor-body .eui-editor-left-workspace__tour-panel-target {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--he-action-rail-width, 76px);
  width: var(--he-action-panel-width, 320px);
  pointer-events: none;
}
.eui-editor-body .eui-editor-viewer {
  position: relative;
  height: 100%;
  width: auto;
  min-width: 0;
  flex: 1 1 auto;
}
.eui-editor-body .eui-editor-viewer__design-colors {
  bottom: 8px;
  left: 8px;
}
.eui-editor-body .eui-editor-viewer__bottom-toolbar {
  bottom: 8px;
  right: 8px;
}
.eui-editor-body .eui-editor-right-workspace {
  height: 100%;
  min-width: 0;
  flex: 0 0 auto;
}
.eui-editor-body .eui-3d-viewer {
  position: relative;
  width: 100%;
}
.eui-editor-body .eui-3d-viewer .eui-animation-controller {
  bottom: 8px;
  left: 50%;
  transform: translate(-50%);
}
.eui-editor-body .eui-3d-viewer__not-found-label {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
.eui-mobile-editor-head {
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 8px 16px 8px 8px;
}
.eui-mobile-editor-head__burger-menu {
  border-radius: 4px;
  padding: 6px;
  border-color: transparent;
  background-color: transparent;
}
.eui-mobile-editor-body {
  height: calc(100dvh - 56px);
  display: flex;
  flex-direction: column;
}
.eui-mobile-editor-viewer {
  height: 100%;
}
.eui-actions-menu {
  padding: 16px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.eui-actions-menu__element {
  display: flex;
  align-items: center;
  padding: 4px 0;
  gap: 8px;
}
.eui-mobile-editor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px;
  background: var(--he-color-background, #ffffff);
}
.eui-mobile-editor-head__block {
  display: flex;
  align-items: center;
  gap: 8px;
}
.eui-mobile-editor-head__logo {
  max-width: 28px;
  height: auto;
}
.eui-mobile-editor-head__default-logo {
  max-width: 28px;
  height: auto;
}
.eui-mobile-editor-head__default-logo:not(:only-child) {
  display: none;
}
.eui-mobile-toolbar {
  height: 84px;
  background: #f2f2f2;
  display: flex;
  align-items: center;
}
.eui-mobile-toolbar-float {
  padding: 16px;
}
.eui-mobile-toolbar-float__add-button {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  background: var(--he-color-primary, #2450ff);
  color: #ffffff;
}
.eui-mobile-toolbar-items {
  display: flex;
  flex-direction: row;
}
.eui-mobile-toolbar-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  gap: 4px;
  padding: 8px 4px;
  min-width: 64px;
  height: 68px;
  font-size: 14px;
  border: none;
  text-align: center;
}
.eui-mobile-toolbar-item__label {
  min-width: 72px;
}
.eui-mobile-pages-panel {
  padding-top: 16px;
  padding-bottom: 8px;
  background: #f2f2f2;
}
.eui-pages-list {
  display: flex;
  flex-direction: row;
  gap: 8px;
  overflow-x: auto;
  overflow-y: visible;
  padding-left: 16px;
  padding-right: 16px;
}
.eui-pages-list-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.eui-pages-list-item__label {
  width: 100%;
  text-align: center;
}
.eui-pages-list-item-preview {
  margin: 1.5px;
  padding: 4px;
  border-radius: 4px;
  background-color: #dddddd;
  box-shadow: 0px 0px 0px 2px rgb(204, 204, 204) inset, 0px 0px 0px 1px rgb(242, 242, 242) inset;
}
.eui-pages-list-item-preview_active {
  box-shadow: 0px 0px 0px 2px var(--he-color-primary, #2450ff);
}
.eui-pages-list-item-preview-image {
  height: 60px;
  width: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.eui-pages-list-item-preview-image__image {
  height: 100%;
  object-fit: contain;
  max-width: 80px;
}
.eui-pages-list-item-preview-image__skeleton {
  width: 100%;
  height: 100%;
  border-radius: 2px;
  background-image: linear-gradient(90deg, #dddddd 0px, #f0f0f0 40px, #dddddd 80px);
  background-size: 160px;
  background-position: -160px;
  background-repeat: no-repeat;
  animation: skeleton-shine 1.5s infinite linear;
}
@keyframes skeleton-shine {
  0% {
    background-position: -80px;
  }
  40%, 100% {
    background-position: 80px;
  }
}
.eui-ui-mobile-logo {
  display: block;
  max-width: 28px;
}
.eui-ui-mobile-logo img {
  width: 100%;
  max-width: 28px;
  height: auto;
  display: block;
}
.eui-mobile-panel-header {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 5px;
}
.eui-float-panel {
  position: absolute !important;
  top: 0;
  left: 0;
  z-index: 100;
  border-radius: 8px;
  background: var(--he-color-background, #ffffff);
  box-shadow: 0px 2px 8px 0px var(--he-color-shadow, rgba(0, 0, 0, 0.1607843137));
}
.eui-float-panel > * {
  width: 100%;
}
.eui-float-panel_fit-content {
  position: absolute !important;
  top: 0;
  left: 0;
  z-index: 100;
  border-radius: 8px;
  background: var(--he-color-background, #ffffff);
  box-shadow: 0px 2px 8px 0px var(--he-color-shadow, rgba(0, 0, 0, 0.1607843137));
  display: flex;
  flex-direction: column;
  max-height: 80vh;
  overflow: hidden;
}
.eui-float-panel_docked-left {
  border-radius: 0 !important;
  box-shadow: none !important;
  border-right: 1px solid #e0e0e0;
  background: var(--he-color-background, #ffffff);
  overflow: hidden;
}
.eui-modal-backdrop {
  background: rgba(0, 0, 0, 0.4);
}
.eui-dialog {
  display: flex;
  flex-direction: column;
  padding: 24px;
  background-color: var(--he-color-background, #ffffff);
  border-radius: 16px;
  gap: 16px;
}
@media (max-width: 768px) {
  .eui-dialog {
    max-width: 400px;
    margin: 0 auto;
    padding: 20px;
    gap: 12px;
  }
}
.eui-dialog__head {
  font-size: var(--he-heading-3-font-size, 16px);
  font-weight: var(--he-heading-3-font-weight, 600);
  line-height: var(--he-heading-3-line-height, 24px);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.eui-dialog__content {
  font-size: var(--he-body-font-size, 14px);
  font-weight: 400;
  line-height: 20px;
}
.eui-dialog__footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.eui-approval-modal {
  position: relative;
  width: 100vw;
  height: 100vh;
}
.eui-approval-modal__close {
  position: fixed;
  top: 24px;
  right: 24px;
}
.eui-approval {
  display: flex;
  background: var(--he-color-background, #ffffff);
  align-items: center;
  overflow-y: auto;
  width: 100%;
  height: 100%;
}
@media (max-width: 768px) {
  .eui-approval {
    flex-direction: column;
  }
}
.eui-approval__warning-message {
  color: var(--he-color-danger, #dc2626);
}
.eui-approval__preview {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  width: 60%;
}
@media (max-width: 768px) {
  .eui-approval__preview {
    width: 100%;
    position: static;
  }
}
.eui-approval__preview-image {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32px;
  width: 100%;
  height: 100%;
}
@media (max-width: 768px) {
  .eui-approval__preview-image {
    padding: 72 24 0 24;
  }
}
.eui-approval__preview-image-item {
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
}
@media (max-width: 768px) {
  .eui-approval__preview-image-item {
    width: 364px;
    height: 364px;
  }
}
.eui-approval__preview-image-skeleton {
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, #f4f6f8 0%, #fcfdfe 20%, #f4f6f8 40%, #f4f6f8 100%);
  background-size: 200% 100%;
  background-repeat: repeat !important;
  animation: shimmer 1.8s ease-in-out infinite;
}
.eui-approval__preview-stepper {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 32px 10px;
}
.eui-approval__preview-stepper eui-selection {
  display: flex;
  gap: 8px;
}
.eui-approval__preview-stepper-button {
  padding: 10px 20px;
  border-radius: 32px;
  border: 2px solid #e6e6e6;
  background: #e6e6e6;
  color: #686868;
  cursor: pointer;
}
.eui-approval__preview-stepper-button.eui-selected {
  border: 2px solid #000000;
  color: #000000;
  background-color: white;
}
.eui-approval__review {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 40%;
  padding: 64px 48px 48px 48px;
  align-self: start;
}
.eui-approval__review ul {
  margin-left: -24px;
}
@media (max-width: 768px) {
  .eui-approval__review {
    width: 100%;
    padding: 16px 16px 114px 16px;
  }
}
.eui-approval__review-header {
  font-size: var(--he-heading-1-font-size, 32px);
  font-weight: var(--he-heading-1-font-weight, 600);
  line-height: var(--he-heading-1-line-height, 40px);
}
@media (max-width: 768px) {
  .eui-approval__review-header {
    font-size: 32px;
    line-height: 40px;
  }
}
.eui-approval__review-description-header {
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  margin-bottom: 16px;
}
@media (max-width: 768px) {
  .eui-approval__review-description-header {
    font-weight: 500;
  }
}
.eui-approval__review-description-content {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  padding-left: 9px;
}
@media (max-width: 768px) {
  .eui-approval__review-description-content li {
    position: relative;
    padding-left: 20px;
    text-indent: -21px;
    margin-bottom: 8px;
  }
}
.eui-approval__review-warnings-header, .eui-approval__review-errors-header {
  display: flex;
  gap: 10px;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  margin-bottom: 16px;
}
.eui-approval__review-warnings-header eui-svg-icon, .eui-approval__review-errors-header eui-svg-icon {
  margin: 0;
}
.eui-approval__review-warnings-content, .eui-approval__review-errors-content {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  padding-left: 9px;
}
.eui-approval__review-warnings {
  color: var(--he-color-warning, #ff7b00);
}
.eui-approval__review-errors {
  color: var(--he-color-danger, #dc2626);
}
.eui-approval__review-divider {
  background: #e6e6e6;
  height: 1px;
  width: 100%;
}
.eui-approval__review-finish {
  display: flex;
  gap: 16px;
  flex-direction: column;
}
.eui-approval__review-finish-checkbox {
  display: flex;
}
@keyframes headShake {
  0% {
    transform: translateX(0);
  }
  6.5% {
    transform: translateX(-6px) rotateY(-9deg);
  }
  18.5% {
    transform: translateX(5px) rotateY(7deg);
  }
  31.5% {
    transform: translateX(-3px) rotateY(-5deg);
  }
  43.5% {
    transform: translateX(2px) rotateY(3deg);
  }
  50% {
    transform: translateX(0);
  }
}
.eui-shake-animate {
  animation-timing-function: ease-in-out;
  animation-name: headShake;
  animation-iteration-count: 1;
  animation-duration: 1s;
}
html,
body {
  overscroll-behavior-y: contain;
}
#textEditor > div[contenteditable=true] {
  outline: none;
}
.eui-editor,
.eui-editor-overlay,
.eui-toast-bar,
.eui-overlay-spinner {
  box-sizing: border-box;
}
.eui-editor p:first-child::first-line,
.eui-editor-overlay p:first-child::first-line,
.eui-toast-bar p:first-child::first-line,
.eui-overlay-spinner p:first-child::first-line {
  line-height: inherit !important;
}
.eui-editor div:empty,
.eui-editor p:empty,
.eui-editor h1:empty,
.eui-editor h2:empty,
.eui-editor h3:empty,
.eui-editor h4:empty,
.eui-editor h5:empty,
.eui-editor h6:empty,
.eui-editor-overlay div:empty,
.eui-editor-overlay p:empty,
.eui-editor-overlay h1:empty,
.eui-editor-overlay h2:empty,
.eui-editor-overlay h3:empty,
.eui-editor-overlay h4:empty,
.eui-editor-overlay h5:empty,
.eui-editor-overlay h6:empty,
.eui-toast-bar div:empty,
.eui-toast-bar p:empty,
.eui-toast-bar h1:empty,
.eui-toast-bar h2:empty,
.eui-toast-bar h3:empty,
.eui-toast-bar h4:empty,
.eui-toast-bar h5:empty,
.eui-toast-bar h6:empty,
.eui-overlay-spinner div:empty,
.eui-overlay-spinner p:empty,
.eui-overlay-spinner h1:empty,
.eui-overlay-spinner h2:empty,
.eui-overlay-spinner h3:empty,
.eui-overlay-spinner h4:empty,
.eui-overlay-spinner h5:empty,
.eui-overlay-spinner h6:empty {
  display: block;
}
.eui-editor *:focus-visible,
.eui-editor-overlay *:focus-visible,
.eui-toast-bar *:focus-visible,
.eui-overlay-spinner *:focus-visible {
  outline-color: var(--he-color-primary, #2450ff);
  box-shadow: unset;
}
.eui-editor input,
.eui-editor-overlay input,
.eui-toast-bar input,
.eui-overlay-spinner input {
  color: inherit;
  font-family: inherit;
}
.eui-editor *,
.eui-editor *:before,
.eui-editor *:after,
.eui-editor-overlay *,
.eui-editor-overlay *:before,
.eui-editor-overlay *:after,
.eui-toast-bar *,
.eui-toast-bar *:before,
.eui-toast-bar *:after,
.eui-overlay-spinner *,
.eui-overlay-spinner *:before,
.eui-overlay-spinner *:after {
  box-sizing: inherit;
}
.eui-editor p,
.eui-editor-overlay p,
.eui-toast-bar p,
.eui-overlay-spinner p {
  padding: 0;
  margin: 0;
}
.da-select-image-button,
.da-handle-image-button {
  display: none;
}
.color-picker {
  box-shadow: 0px 2px 8px 0px var(--he-color-shadow, rgba(0, 0, 0, 0.1607843137));
  background: #fff;
  border-radius: 8px;
}
body {
  margin: 0;
  font-family: var(--he-font-family, "Inter");
}
*[custom] {
  display: none;
}
:root {
  --he-color-primary: #ffa724;
  --he-color-primary-hover: #d8971d;
  --he-color-primary-active: #af6b1e;
  --he-color-primary-contrast: #ffffff;
  --he-color-warning: #b45309;
  --he-color-danger: #dc2626;
  --he-color-background: #ffffff;
  --he-color-shadow: #00000029;
  --he-font-family: Inter;
  --he-buttons-border-radius: 24px;
  --he-heading-1-font-size: 32px;
  --he-heading-1-font-weight: 600;
  --he-heading-1-line-height: 40px;
  --he-heading-2-font-size: 18px;
  --he-heading-2-font-weight: 600;
  --he-heading-2-line-height: 24px;
  --he-heading-3-font-size: 16px;
  --he-heading-3-font-weight: 600;
  --he-heading-3-line-height: 24px;
  --he-body-font-size: 14px;
  --he-body-line-height: 20px;
  --he-body-font-weight-regular: 400;
  --he-body-font-weight-medium: 500;
  --he-body-font-weight-bold: 600;
  --he-caption-font-size: 12px;
  --he-caption-line-height: 16px;
  --he-caption-font-weight-regular: 400;
  --he-caption-font-weight-medium: 500;
}
/* Experiment 016 / Slice 3: native Design Atoms empty-placeholder CTA. */
.da-select-image-button.modern-placeholder-add-photo {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 118px;
  min-height: 54px;
  padding: 8px 14px;
  border: 1px solid rgba(255, 167, 36, 0.72);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 8px 24px rgba(23, 32, 51, 0.14);
  color: #9d5700;
  font-family: var(--he-font-family, Inter, sans-serif);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  backdrop-filter: blur(8px);
}
.da-select-image-button.modern-placeholder-add-photo::before {
  content: "+";
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #ffa724;
  color: #ffffff;
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
}
.da-select-image-button.modern-placeholder-add-photo::after {
  content: attr(aria-label);
}
.da-select-image-button.modern-placeholder-add-photo:hover {
  border-color: #ffa724;
  background: #fff8ec;
  box-shadow: 0 10px 28px rgba(23, 32, 51, 0.18);
}
.da-select-image-button.modern-placeholder-add-photo:focus-visible {
  outline: 3px solid rgba(255, 167, 36, 0.42);
  outline-offset: 3px;
}
.da-select-image-button.modern-placeholder-add-photo_compact {
  min-width: 42px;
  min-height: 42px;
  padding: 6px;
  border-radius: 50%;
}
.da-select-image-button.modern-placeholder-add-photo_compact::after {
  display: none;
}
.da-select-image-button.modern-placeholder-add-photo_compact::before {
  width: 28px;
  height: 28px;
}
.da-select-image-button.modern-placeholder-add-photo_micro {
  min-width: 30px;
  min-height: 30px;
  padding: 2px;
  border-width: 0;
  box-shadow: 0 4px 12px rgba(23, 32, 51, 0.18);
}
.da-select-image-button.modern-placeholder-add-photo_micro::before {
  width: 24px;
  height: 24px;
  font-size: 18px;
}
/*!********************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../seed/repo/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[1]!../../seed/repo/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[2]!../../seed/repo/node_modules/perfect-scrollbar/css/perfect-scrollbar.css ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************/
/*
 * Container style
 */
.ps {
  overflow: hidden !important;
  overflow-anchor: none;
  -ms-overflow-style: none;
  touch-action: auto;
  -ms-touch-action: auto;
}
/*
 * Scrollbar rail styles
 */
.ps__rail-x {
  display: none;
  opacity: 0;
  transition: background-color .2s linear, opacity .2s linear;
  -webkit-transition: background-color .2s linear, opacity .2s linear;
  height: 15px;
  /* there must be 'bottom' or 'top' for ps__rail-x */
  bottom: 0px;
  /* please don't change 'position' */
  position: absolute;
}
.ps__rail-y {
  display: none;
  opacity: 0;
  transition: background-color .2s linear, opacity .2s linear;
  -webkit-transition: background-color .2s linear, opacity .2s linear;
  width: 15px;
  /* there must be 'right' or 'left' for ps__rail-y */
  right: 0;
  /* please don't change 'position' */
  position: absolute;
}
.ps--active-x > .ps__rail-x,
.ps--active-y > .ps__rail-y {
  display: block;
  background-color: transparent;
}
.ps:hover > .ps__rail-x,
.ps:hover > .ps__rail-y,
.ps--focus > .ps__rail-x,
.ps--focus > .ps__rail-y,
.ps--scrolling-x > .ps__rail-x,
.ps--scrolling-y > .ps__rail-y {
  opacity: 0.6;
}
.ps .ps__rail-x:hover,
.ps .ps__rail-y:hover,
.ps .ps__rail-x:focus,
.ps .ps__rail-y:focus,
.ps .ps__rail-x.ps--clicking,
.ps .ps__rail-y.ps--clicking {
  background-color: #eee;
  opacity: 0.9;
}
/*
 * Scrollbar thumb styles
 */
.ps__thumb-x {
  background-color: #aaa;
  border-radius: 6px;
  transition: background-color .2s linear, height .2s ease-in-out;
  -webkit-transition: background-color .2s linear, height .2s ease-in-out;
  height: 6px;
  /* there must be 'bottom' for ps__thumb-x */
  bottom: 2px;
  /* please don't change 'position' */
  position: absolute;
}
.ps__thumb-y {
  background-color: #aaa;
  border-radius: 6px;
  transition: background-color .2s linear, width .2s ease-in-out;
  -webkit-transition: background-color .2s linear, width .2s ease-in-out;
  width: 6px;
  /* there must be 'right' for ps__thumb-y */
  right: 2px;
  /* please don't change 'position' */
  position: absolute;
}
.ps__rail-x:hover > .ps__thumb-x,
.ps__rail-x:focus > .ps__thumb-x,
.ps__rail-x.ps--clicking .ps__thumb-x {
  background-color: #999;
  height: 11px;
}
.ps__rail-y:hover > .ps__thumb-y,
.ps__rail-y:focus > .ps__thumb-y,
.ps__rail-y.ps--clicking .ps__thumb-y {
  background-color: #999;
  width: 11px;
}
/* MS supports */
@supports (-ms-overflow-style: none) {
  .ps {
    overflow: auto !important;
  }
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .ps {
    overflow: auto !important;
  }
}


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