survey-creator-core/survey-creator-core.fontless.css

Use SurveyJS Creator to create or edit JSON for SurveyJS Form Library.

/*!
 * SurveyJS Creator v2.3.1
 * (c) 2015-2025 Devsoft Baltic OÜ - http://surveyjs.io/
 * Github: https://github.com/surveyjs/survey-creator
 * License: https://surveyjs.io/Licenses#SurveyCreator
 */
/*!********************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./src/utils/context-button.scss ***!
  \********************************************************************************************************************************************************************************/
.svc-context-container {
  display: flex;
  gap: var(--sjs-base-unit, var(--base-unit, 8px));
  width: max-content;
}

.svc-context-button {
  display: flex;
  box-sizing: border-box;
  background-color: var(--ctr-survey-contextual-button-background-color, var(--sjs-layer-1-background-500, white));
  border-radius: var(--ctr-survey-contextual-button-corner-radius, var(--lbr-corner-radius-round));
  width: var(--ctr-survey-contextual-button-width, var(--lbr-size-x6));
  height: var(--ctr-survey-contextual-button-height, var(--lbr-size-x6));
  padding: var(--ctr-survey-contextual-button-padding-top, var(--lbr-spacing-x150)) var(--ctr-survey-contextual-button-padding-right, var(--lbr-spacing-x150)) var(--ctr-survey-contextual-button-padding-bottom, var(--lbr-spacing-x150)) var(--ctr-survey-contextual-button-padding-left, var(--lbr-spacing-x150));
  cursor: pointer;
  outline: none;
}
.svc-context-button .sv-svg-icon {
  --thm-button-contextual-button-icon-width: calc(
    var(--ctr-survey-contextual-button-width, var(--lbr-size-x6)) - var(--ctr-survey-contextual-button-padding-right, var(--lbr-spacing-x150)) -
      var(--ctr-survey-contextual-button-padding-left, var(--lbr-spacing-x150))
  );
  --thm-button-contextual-button-icon-height: calc(
    var(--ctr-survey-contextual-button-height, var(--lbr-size-x6)) - var(--ctr-survey-contextual-button-padding-top, var(--lbr-spacing-x150)) -
      var(--ctr-survey-contextual-button-padding-bottom, var(--lbr-spacing-x150))
  );
  width: var(--thm-button-contextual-button-icon-width, calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
  height: var(--thm-button-contextual-button-icon-height, calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
}
.svc-context-button use {
  fill: var(--ctr-survey-contextual-button-icon-color, var(--sjs-layer-1-foreground-50, rgba(0, 0, 0, 0.5019607843)));
  transition: fill var(--sjs-creator-transition-duration, 150ms);
}

.svc-context-button:hover use, .svc-context-button:focus use {
  fill: var(--ctr-survey-contextual-button-icon-color-positive, var(--sjs-primary-background-500, #19b394));
}

.svc-context-button--danger:hover use, .svc-context-button--danger:focus use {
  fill: var(--ctr-survey-contextual-button-icon-color-negative, var(--sjs-semantic-red-background-500, #e50a3e));
}
/*!***************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./src/components/list.scss ***!
  \***************************************************************************************************************************************************************************/
.svc-list {
  width: 100%;
  padding: var(--ctr-list-padding-top, var(--sjs-spacing-x1)) var(--ctr-list-padding-right, var(--sjs-spacing-x1)) var(--ctr-list-padding-bottom, var(--sjs-spacing-x1)) var(--ctr-list-padding-left, var(--sjs-spacing-x1));
  margin: 0;
  overflow-y: auto;
  list-style-type: none;
  box-sizing: border-box;
}

.svc-list__item {
  width: 100%;
  outline: none;
}

.svc-list__item-body {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-family: var(--ctr-font-family, var(--sjs-font-family, var(--font-family)));
  font-size: var(--ctr-font-default-size, var(--sjs-font-size-x2));
  font-style: normal;
  font-weight: 400;
  line-height: var(--ctr-font-default-line-height, var(--sjs-line-height-x3));
  text-align: start;
  color: var(--ctr-list-item-text-color, var(--sjs-layer-1-foreground-100, rgba(0, 0, 0, 0.9019607843)));
  transition: color var(--sjs-creator-transition-duration, 150ms);
  --thm-list-item-padding-delta: var(--ctr-list-item-padding-left, var(--sjs-spacing-x2));
  --thm-list-item-padding-left: calc(var(--sjs-list-item-level) * var(--thm-list-item-padding-delta));
  display: flex;
  flex: 1 0 0;
  padding-block-start: var(--ctr-list-item-padding-top, var(--sjs-spacing-x150));
  padding-block-end: var(--ctr-list-item-padding-bottom, var(--sjs-spacing-x150));
  padding-inline-start: var(--thm-list-item-padding-left, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
  padding-inline-end: var(--ctr-list-item-padding-right, var(--sjs-spacing-x6));
  align-items: center;
  gap: var(--ctr-list-item-gap, var(--sjs-spacing-x2));
  border-radius: var(--ctr-list-item-corner-radius, var(--sjs-corner-radius-x075));
  cursor: pointer;
  transition: background-color var(--sjs-creator-transition-duration, 150ms);
}
.svc-list__item-body > span, .svc-list__item-body > sv-ng-string {
  flex: 1 0 0;
}

.svc-list__item:disabled,
.svc-list__item--disabled {
  opacity: var(--ctr-list-item-opacity-disabled, 0.25);
  pointer-events: none;
}

.svc-list__item:focus > .svc-list__item-body,
.svc-list__item:hover > .svc-list__item-body,
.svc-list__item--focused > .svc-list__item-body,
.svc-list__item--hovered > .svc-list__item-body {
  background: var(--ctr-list-item-background-color-hovered, var(--sjs-primary-background-10, rgba(25, 179, 148, 0.1019607843)));
  color: var(--ctr-list-item-text-color-hovered, var(--sjs-layer-1-foreground-100, rgba(0, 0, 0, 0.9019607843)));
}
.svc-list__item:focus > .svc-list__item-body .svc-list__item-icon use,
.svc-list__item:hover > .svc-list__item-body .svc-list__item-icon use,
.svc-list__item--focused > .svc-list__item-body .svc-list__item-icon use,
.svc-list__item--hovered > .svc-list__item-body .svc-list__item-icon use {
  fill: var(--ctr-list-item-icon-color-hovered, var(--sjs-primary-background-500, #19b394));
}
.svc-list__item:focus > .svc-list__item-body .svc-list-item__marker-icon use,
.svc-list__item:hover > .svc-list__item-body .svc-list-item__marker-icon use,
.svc-list__item--focused > .svc-list__item-body .svc-list-item__marker-icon use,
.svc-list__item--hovered > .svc-list__item-body .svc-list-item__marker-icon use {
  fill: var(--ctr-list-item-submenu-arrow-color-hovered-item, var(--sjs-layer-1-foreground-75, rgba(0, 0, 0, 0.7490196078)));
}

.svc-list__item--selected > .svc-list__item-body,
.svc-list__item--selected:hover > .svc-list__item-body,
.svc-list__item--selected:focus > .svc-list__item-body,
.svc-list__item.svc-list__item--selected:hover > .svc-list__item-body {
  font-family: var(--ctr-font-family, var(--sjs-font-family, var(--font-family)));
  font-size: var(--ctr-font-default-size, var(--sjs-font-size-x2));
  font-style: normal;
  font-weight: 400;
  line-height: var(--ctr-font-default-line-height, var(--sjs-line-height-x3));
  font-weight: 600;
  color: var(--ctr-list-item-text-color-selected, var(--sjs-primary-foreground-100, white));
  background: var(--ctr-list-item-background-color-selected, var(--sjs-primary-background-500, #19b394));
}
.svc-list__item--selected > .svc-list__item-body .svc-list__item-icon use,
.svc-list__item--selected:hover > .svc-list__item-body .svc-list__item-icon use,
.svc-list__item--selected:focus > .svc-list__item-body .svc-list__item-icon use,
.svc-list__item.svc-list__item--selected:hover > .svc-list__item-body .svc-list__item-icon use {
  fill: var(--ctr-list-item-icon-color-selected, var(--sjs-primary-foreground-100, white));
}

.svc-list__item--group-selected > .svc-list__item-body,
.svc-list__item--group-selected:hover > .svc-list__item-body,
.svc-list__item--group-selected:focus > .svc-list__item-body {
  font-family: var(--ctr-font-family, var(--sjs-font-family, var(--font-family)));
  font-size: var(--ctr-font-default-size, var(--sjs-font-size-x2));
  font-style: normal;
  font-weight: 400;
  line-height: var(--ctr-font-default-line-height, var(--sjs-line-height-x3));
  color: var(--ctr-list-item-text-color-selected-submenu, var(--sjs-layer-1-foreground-100, rgba(0, 0, 0, 0.9019607843)));
  background: var(--ctr-list-item-background-color-selected-submenu, var(--sjs-layer-1-background-400, whitesmoke));
}
.svc-list__item--group-selected > .svc-list__item-body .svc-list__item-icon use,
.svc-list__item--group-selected:hover > .svc-list__item-body .svc-list__item-icon use,
.svc-list__item--group-selected:focus > .svc-list__item-body .svc-list__item-icon use {
  fill: var(--ctr-list-item-icon-color-selected-submenu, var(--sjs-primary-background-500, #19b394));
}
.svc-list__item--group-selected > .svc-list__item-body .svc-list-item__marker-icon use,
.svc-list__item--group-selected:hover > .svc-list__item-body .svc-list-item__marker-icon use,
.svc-list__item--group-selected:focus > .svc-list__item-body .svc-list-item__marker-icon use {
  fill: var(--ctr-list-item-submenu-arrow-color-selected-item-submenu, var(--sjs-layer-1-foreground-75, rgba(0, 0, 0, 0.7490196078)));
}

.svc-list__item--with-icon > .svc-list__item-body {
  padding-block-start: var(--ctr-list-item-padding-top-with-icon, var(--sjs-spacing-x150));
  padding-block-end: var(--ctr-list-item-padding-bottom-with-icon, var(--sjs-spacing-x150));
  padding-inline-start: var(--thm-list-item-padding-left, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
  padding-inline-end: var(--ctr-list-item-padding-right, var(--sjs-spacing-x6));
}

.svc-list__item--group > .svc-list__item-body {
  padding-block-start: var(--ctr-list-item-padding-top, var(--sjs-spacing-x150));
  padding-block-end: var(--ctr-list-item-padding-bottom, var(--sjs-spacing-x150));
  padding-inline-start: var(--thm-list-item-padding-left, var(--sjs-base-unit, var(--base-unit, 8px)));
  padding-inline-end: var(--ctr-list-item-padding-right-submenu, var(--sjs-spacing-x1));
}

.svc-list__item--with-icon.svc-list__item--group > .svc-list__item-body {
  padding-block-start: var(--ctr-list-item-padding-top-with-icon, var(--sjs-spacing-x150));
  padding-block-end: var(--ctr-list-item-padding-bottom-with-icon, var(--sjs-spacing-x150));
  padding-inline-start: var(--thm-list-item-padding-left, var(--sjs-base-unit, var(--base-unit, 8px)));
  padding-inline-end: var(--ctr-list-item-padding-right-submenu, var(--sjs-spacing-x1));
}

.svc-list__item--with-icon.svc-list__item--group .sv-popup-inner > .sv-popup__container {
  margin-top: calc(var(--ctr-list-item-padding-top, var(--sjs-spacing-x150)) - var(--ctr-list-item-padding-top-with-icon, var(--sjs-spacing-x150)) - var(--ctr-list-padding-top, var(--sjs-spacing-x1)));
}

.svc-list__item-separator {
  width: 100%;
  height: var(--ctr-separator-width, var(--sjs-stroke-x1));
  margin: var(--ctr-separator-margin-vertical-small, var(--sjs-spacing-x1)) 0px;
  background-color: var(--ctr-separator-color, var(--sjs-border-25, #d4d4d4));
}

.svc-list__item-icon {
  display: flex;
  width: var(--ctr-list-item-icon-width, var(--sjs-font-size-x3));
  height: var(--ctr-list-item-icon-height, var(--sjs-font-size-x3));
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
}
.svc-list__item-icon use {
  fill: var(--ctr-list-item-icon-color, var(--sjs-primary-background-500, #19b394));
}

.svc-list-item__marker-icon {
  display: flex;
  padding: var(--ctr-list-item-submenu-arrow-padding, var(--sjs-spacing-x05));
  align-items: flex-start;
  width: var(--ctr-list-item-submenu-arrow-width, var(--sjs-font-size-x2));
  height: var(--ctr-list-item-submenu-arrow-height, var(--sjs-font-size-x2));
  box-sizing: content-box;
  justify-content: center;
}
.svc-list-item__marker-icon use {
  fill: var(--ctr-list-item-submenu-arrow-color, var(--sjs-layer-1-foreground-75, rgba(0, 0, 0, 0.7490196078)));
}

.svc-list-item__marker-icon + * {
  --thm-list-item-gap: var(--ctr-list-item-gap, var(--sjs-spacing-x2));
  margin-inline-start: calc(0px - var(--thm-list-item-gap));
}

.svc-list__container {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  min-height: 0;
  height: 100%;
}

.svc-list__filter {
  display: flex;
  align-items: flex-start;
  align-items: center;
  gap: var(--ctr-list-search-gap, var(--sjs-spacing-x2));
  padding-inline-start: var(--ctr-list-search-padding-left, var(--sjs-spacing-x3));
  padding-inline-end: var(--ctr-list-search-padding-right, var(--sjs-spacing-x2));
  padding-block-start: var(--ctr-list-search-padding-top, var(--sjs-spacing-x250));
  padding-block-end: var(--ctr-list-search-padding-bottom, var(--sjs-spacing-x250));
  border-radius: var(--ctr-toolbox-search-corner-radius, 0px);
  border-bottom: var(--ctr-list-search-border-width-bottom, var(--sjs-stroke-x1)) solid var(--ctr-list-search-border-color, var(--sjs-border-25, #d4d4d4));
}

.svc-list__filter-icon {
  opacity: var(--ctr-list-search-icon-opacity, 1);
  display: flex;
  width: var(--ctr-list-search-icon-width, var(--sjs-font-size-x3));
  height: var(--ctr-list-search-icon-height, var(--sjs-font-size-x3));
  align-items: center;
}
.svc-list__filter-icon .sv-svg-icon {
  width: var(--ctr-list-search-icon-width, var(--sjs-font-size-x3));
  height: var(--ctr-list-search-icon-height, var(--sjs-font-size-x3));
}
.svc-list__filter-icon use {
  fill: var(--ctr-list-search-icon-color, var(--sjs-layer-1-foreground-75, rgba(0, 0, 0, 0.7490196078)));
}

.svc-list__input {
  font-family: var(--ctr-font-family, var(--sjs-font-family, var(--font-family)));
  font-size: var(--ctr-font-default-size, var(--sjs-font-size-x2));
  font-style: normal;
  font-weight: 400;
  line-height: var(--ctr-font-default-line-height, var(--sjs-line-height-x3));
  background-color: transparent;
  color: var(--ctr-list-search-text-color, var(--sjs-layer-1-foreground-100, rgba(0, 0, 0, 0.9019607843)));
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  border: none;
  padding: 0;
  width: 100%;
}
.svc-list__input::placeholder {
  color: var(--ctr-list-search-text-color-placeholder, var(--sjs-layer-1-foreground-50, rgba(0, 0, 0, 0.5019607843)));
}

.svc-list__filter-clear-button {
  display: flex;
  padding: var(--ctr-search-button-padding-vertical, var(--sjs-spacing-x05)) var(--ctr-search-button-padding-horizontal, var(--sjs-spacing-x05));
  justify-content: center;
  align-items: center;
  border-radius: var(--ctr-search-button-corner-radius, var(--sjs-corner-radius-x05));
  appearance: none;
  border: none;
  border-radius: 100%;
  background-color: transparent;
}
.svc-list__filter-clear-button svg {
  display: flex;
  width: var(--ctr-search-button-icon-width, var(--sjs-font-size-x2));
  height: var(--ctr-search-button-icon-height, var(--sjs-font-size-x2));
  justify-content: center;
  align-items: center;
}
.svc-list__filter-clear-button svg use {
  fill: var(--ctr-search-button-icon-color, var(--sjs-layer-1-foreground-50, rgba(0, 0, 0, 0.5019607843)));
}
.svc-list__filter-clear-button:hover {
  background: var(--ctr-search-button-background-color-clear-hovered, var(--sjs-semantic-red-background-10, rgba(229, 10, 62, 0.1019607843)));
}
.svc-list__filter-clear-button:hover use {
  fill: var(--ctr-search-button-icon-color-clear-hovered, var(--sjs-semantic-red-background-500, #e50a3e));
}

.svc-list__empty-container {
  padding: var(--ctr-list-padding-top-no-data, var(--sjs-spacing-x4)) var(--ctr-list-padding-right-no-data, var(--sjs-spacing-x2)) var(--ctr-list-padding-bottom-no-data, var(--sjs-spacing-x4)) var(--ctr-list-padding-left-no-data, var(--sjs-spacing-x2));
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-grow: 1;
}

.svc-list__empty-text {
  font-family: var(--ctr-font-family, var(--sjs-font-family, var(--font-family)));
  font-size: var(--ctr-font-default-size, var(--sjs-font-size-x2));
  font-style: normal;
  font-weight: 400;
  line-height: var(--ctr-font-default-line-height, var(--sjs-line-height-x3));
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: center;
  align-self: stretch;
  color: var(--ctr-list-no-data-text-color, var(--sjs-layer-1-foreground-50, rgba(0, 0, 0, 0.5019607843)));
}

.sv-popup--menu-phone .svc-list-item__marker-icon,
.sv-popup--menu-tablet .svc-list-item__marker-icon {
  display: none;
}
.sv-popup--menu-phone .svc-list__item-body,
.sv-popup--menu-tablet .svc-list__item-body {
  pointer-events: none;
}
.sv-popup--menu-phone .svc-list__item--group-selected > .svc-list__item-body,
.sv-popup--menu-tablet .svc-list__item--group-selected > .svc-list__item-body {
  font-family: var(--ctr-font-family, var(--sjs-font-family, var(--font-family)));
  font-size: var(--ctr-font-default-size, var(--sjs-font-size-x2));
  font-style: normal;
  font-weight: 400;
  line-height: var(--ctr-font-default-line-height, var(--sjs-line-height-x3));
  font-weight: 600;
  color: var(--ctr-list-item-text-color-selected, var(--sjs-primary-foreground-100, white));
  background: var(--ctr-list-item-background-color-selected, var(--sjs-primary-background-500, #19b394));
}
.sv-popup--menu-phone .svc-list__item--group-selected > .svc-list__item-body use,
.sv-popup--menu-tablet .svc-list__item--group-selected > .svc-list__item-body use {
  fill: var(--ctr-list-item-icon-color-selected, var(--sjs-primary-foreground-100, white));
}
/*!*******************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./src/components/tabs/json-editor-ace.scss ***!
  \*******************************************************************************************************************************************************************************************/
.svc-json-editor-tab__content {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.svc-json-editor-tab__ace-editor {
  height: 100%;
}
/*!************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./src/components/tabs/json-editor-textarea.scss ***!
  \************************************************************************************************************************************************************************************************/
svc-tab-json-editor-textarea {
  width: 100%;
  height: 100%;
  background: var(--ctr-code-viewer-background-color, var(--sjs-layer-1-background-500, white));
}

.svc-json-editor-tab__content {
  position: relative;
  height: 100%;
}

.svc-json-editor-tab__content-area {
  font-family: var(--ctr-font-family-code, monospace);
  font-size: var(--ctr-font-code-size, var(--sjs-font-size-x2));
  font-style: normal;
  font-weight: 400;
  line-height: var(--ctr-font-code-line-height, var(--sjs-line-height-x3));
  color: var(--ctr-code-viewer-text-color, var(--sjs-code-gray-300, #505050));
  background: var(--ctr-code-viewer-background-color, var(--sjs-layer-1-background-500, white));
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  box-sizing: content-box;
}

/*
.svc-json-editor-tab__errros_button {
  position: absolute;
  top: 0%;
  right: calc(0% + calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))));
  min-height: calc(2.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
  max-height: calc(2.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
  border: none;
  background-color: $primary;
  color: $primary-foreground;
  font-weight: bold;
}

.svc-json-editor-tab__content-errors {
  position: absolute;
  right: 0%;
  top: calc(0% + calc(3 * var(--sjs-base-unit, var(--base-unit, 8px))));
  max-width: calc(100% - calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))));
  padding: $base-unit;

  background-color: $background;
  background-image: linear-gradient(to bottom, transparent, var(--sjs-border-inside, var(--border-inside, rgba(0, 0, 0, 0.16))));
  border: 1px solid var(--sjs-border-default, var(--border, #d6d6d6));
  border-radius: 1px;

  color: $foreground;
  font-family: monospace;

  span {
    white-space: pre-line;

    >b {
      color: var(--sjs-semantic-red-background-500, #e50a3eff);
    }
  }
}

.svc-json-editor-tab__content-errors:empty {
  display: none;
}
*/
.svc-json-errors {
  --thm-json-error-row: calc(
    var(--ctr-code-viewer-code-error-row-border-width-top, var(--sjs-stroke-x1)) +
      var(--ctr-code-viewer-code-error-row-padding-top, var(--sjs-spacing-x1)) +
      var(--ctr-code-viewer-code-error-row-padding-bottom, var(--sjs-spacing-x1)) +
      var(--ctr-code-viewer-code-error-row-fix-button-icon-height, var(--sjs-font-size-x3))
  );
  display: flex;
  max-height: calc(5 * var(--thm-json-error-row));
  overflow-y: auto;
  flex-direction: column;
  padding: 0;
  margin: 0;
}

.svc-json-errors__item {
  pointer-events: none;
  display: block;
  border-top: var(--ctr-code-viewer-code-error-row-border-width-top, var(--sjs-stroke-x1)) solid var(--ctr-code-viewer-code-error-row-border-color, var(--sjs-border-25, #d4d4d4));
  background: var(--ctr-code-viewer-code-error-row-background-color, var(--sjs-semantic-red-background-10, rgba(229, 10, 62, 0.1019607843)));
}

.svc-json-error {
  font-family: var(--ctr-font-family, var(--sjs-font-family, var(--font-family)));
  font-size: var(--ctr-font-default-size, var(--sjs-font-size-x2));
  font-style: normal;
  font-weight: 400;
  line-height: var(--ctr-font-default-line-height, var(--sjs-line-height-x3));
  padding: var(--ctr-code-viewer-code-error-row-padding-top, var(--sjs-spacing-x1)) var(--ctr-code-viewer-code-error-row-padding-right, var(--sjs-spacing-x1)) var(--ctr-code-viewer-code-error-row-padding-bottom, var(--sjs-spacing-x1)) var(--ctr-code-viewer-code-error-row-padding-left, var(--sjs-spacing-x2));
  display: flex;
  align-items: center;
  gap: var(--ctr-code-viewer-code-error-row-gap, var(--sjs-spacing-x2));
}

.svc-json-error .sv-string-viewer {
  pointer-events: all;
  cursor: pointer;
}

.svc-json-error .sv-string-viewer:hover {
  text-decoration: underline;
}

.svc-json-error__icon {
  fill: var(--sjs-semantic-red-background-500, #e50a3e);
  width: var(--ctr-code-viewer-code-error-row-icon-width, var(--sjs-font-size-x2));
  height: var(--ctr-code-viewer-code-error-row-icon-height, var(--sjs-font-size-x2));
  box-sizing: border-box;
  display: block;
}

.svc-json-error__container {
  display: flex;
  gap: var(--ctr-code-viewer-code-error-row-gap, var(--sjs-spacing-x2));
}

.svc-json-error__title {
  flex: 1 1 auto;
}

.svc-json-error__fix-button {
  appearance: none;
  flex-grow: 0;
  flex-shrink: 0;
  pointer-events: all;
  border: none;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--ctr-code-viewer-code-error-row-fix-button-padding-top, 0px) var(--ctr-code-viewer-code-error-row-fix-button-padding-right, var(--sjs-spacing-x1)) var(--ctr-code-viewer-code-error-row-fix-button-padding-bottom, 0px) var(--ctr-code-viewer-code-error-row-fix-button-padding-left, var(--sjs-spacing-x1));
  border-radius: var(--ctr-code-viewer-code-error-row-fix-button-corner-radius, var(--sjs-corner-radius-x05));
  background: var(--ctr-code-viewer-code-error-row-fix-button-background-color, var(--sjs-layer-1-background-500, white));
  box-shadow: var(--ctr-code-viewer-code-error-row-fix-button-shadow-offset-x, 0px) var(--ctr-code-viewer-code-error-row-fix-button-shadow-offset-y, 1px) var(--ctr-code-viewer-code-error-row-fix-button-shadow-blur, 2px) var(--ctr-code-viewer-code-error-row-fix-button-shadow-spread, 0px) var(--ctr-code-viewer-code-error-row-fix-button-shadow-color, var(--sjs-special-shadow, rgba(0, 0, 0, 0.2509803922)));
}
.svc-json-error__fix-button svg {
  fill: var(--ctr-code-viewer-code-error-row-fix-button-icon-color, var(--sjs-layer-1-foreground-50, rgba(0, 0, 0, 0.5019607843)));
  width: var(--ctr-code-viewer-code-error-row-fix-button-icon-width, var(--sjs-font-size-x3));
  height: var(--ctr-code-viewer-code-error-row-fix-button-icon-height, var(--sjs-font-size-x3));
}

.svc-json-error__fix-button:hover svg {
  fill: var(--ctr-code-viewer-code-error-row-fix-button-icon-color-hovered, var(--sjs-primary-background-500, #19b394));
}
/*!********************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./src/components/simulator.scss ***!
  \********************************************************************************************************************************************************************************/
.svd-simulator {
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  box-sizing: content-box;
  transform-origin: 0 0;
  top: 50%;
  left: 50%;
  transform: scale(1.26) translate(-50%, -50%);
  border: var(--ctr-preview-device-frame-border-width, var(--sjs-stroke-x2)) solid var(--ctr-preview-device-frame-border-color, var(--sjs-border-25, #d4d4d4));
  background: var(--ctr-preview-device-frame-background-color, var(--sjs-layer-3-background-500, #f4f4f4));
}

.svd-simulator-wrapper {
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  border-radius: var(--ctr-preview-device-corner-radius, var(--sjs-corner-radius-x4));
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.1), 0px 8px 16px 0px var(--ctr-preview-device-shadow-2-color, var(--sjs-special-glow, rgba(0, 76, 68, 0.1019607843)));
  border: var(--ctr-preview-device-border-width, var(--sjs-stroke-x4)) solid var(--ctr-preview-device-border-color, var(--sjs-layer-3-background-500, #f4f4f4));
  background: var(--ctr-preview-device-background-color, var(--sjs-layer-1-background-500, white));
  box-sizing: content-box;
}

.svd-simulator-main {
  min-height: 100%;
}
.svd-simulator-main.svd-simulator-main--desktop {
  min-height: auto;
}
.svd-simulator-main.svd-simulator-main--desktop.svd-simulator-main--running {
  height: 100%;
}
.svd-simulator-main.svd-simulator-main--frame {
  display: flex;
  align-items: center;
}
.svd-simulator-main:not(.svd-simulator-main--frame) {
  background-color: transparent;
}
.svd-simulator-main .sd-root-modern {
  min-height: 100%;
}
.svd-simulator-main .sd-root-modern .sv-popup--menu-popup {
  width: auto;
  right: 0;
}

.svd-simulator-content {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: relative;
}
/*!********************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./src/components/tabs/test.scss ***!
  \********************************************************************************************************************************************************************************/
.svc-test-tab__content {
  align-items: center;
  justify-content: center;
}

.svc-test-tab__content .svc-plugin-tab__content .svc-preview__test-again {
  width: calc(33 * (var(--sjs-base-unit, var(--base-unit, 8px))));
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: calc(12 * (var(--sjs-base-unit, var(--base-unit, 8px))));
  margin-top: 8px;
}

.svc-creator-tab__content--with-toolbar.svc-test-tab__content .svc-plugin-tab__content {
  height: calc(100% - 6 * var(--sjs-base-unit, var(--base-unit, 8px)));
}

.svc-test-tab__content-actions {
  position: relative;
  width: 100%;
}
.svc-test-tab__content-actions .sv-action-bar {
  padding: var(--ctr-preview-pager-padding-top, var(--sjs-spacing-x1)) var(--ctr-preview-pager-padding-right, 0px) var(--ctr-preview-pager-padding-bottom, var(--sjs-spacing-x1)) var(--ctr-preview-pager-padding-left, 0px);
  box-shadow: inset 0 var(--ctr-preview-pager-border-width-top, var(--sjs-stroke-x1)) 0 0 var(--ctr-preview-pager-border-color, var(--sjs-border-25, #d4d4d4));
  background: var(--ctr-preview-pager-background-color, var(--sjs-layer-1-background-500, white));
  width: 100%;
}
.svc-test-tab__content-actions .sv-action-bar.sv-action-bar--pages {
  left: 0;
  right: 0;
  justify-content: center;
  gap: var(--sjs-base-unit, var(--base-unit, 8px));
}
.svc-test-tab__content-actions .sv-action-bar.sv-action-bar--pages .sv-action__content {
  padding: 0;
}
.svc-test-tab__content-actions .sv-action-bar.sv-action-bar--pages .sv-action-bar-item {
  margin: 0;
}
.svc-test-tab__content-actions .sv-action-bar.sv-action-bar--pages .sv-action-bar-item use {
  fill: var(--ctr-survey-question-panel-toolbar-item-icon-color, var(--sjs-secondary-background-500, #19b394));
}
.svc-test-tab__content-actions .sv-action-bar.sv-action-bar--pages .sv-action-bar-item:not(.sv-action-bar-item--pressed):enabled:focus {
  background: var(--ctr-survey-question-panel-toolbar-item-background-color-selected, var(--sjs-secondary-background-10, rgba(25, 179, 148, 0.1019607843)));
}
.svc-test-tab__content-actions .sv-action-bar.sv-action-bar--pages .sv-action-bar-item:not(.sv-action-bar-item--pressed):enabled:hover {
  background: var(--ctr-survey-question-panel-toolbar-item-background-color-hovered, var(--sjs-secondary-background-10, rgba(25, 179, 148, 0.1019607843)));
}
.svc-test-tab__content-actions .sv-action-bar.sv-action-bar--pages .sv-action-bar-item--pressed:not(.sv-action-bar-item--active) {
  background: var(--ctr-survey-question-panel-toolbar-item-background-color-selected, var(--sjs-secondary-background-10, rgba(25, 179, 148, 0.1019607843)));
}
.svc-test-tab__content-actions .sv-action-bar.sv-action-bar--pages .sv-action-bar-item__title {
  color: var(--ctr-survey-question-panel-toolbar-item-text-color, var(--sjs-layer-1-foreground-100, rgba(0, 0, 0, 0.9019607843)));
}
.svc-test-tab__content-actions .sv-action-bar-item {
  font-family: var(--ctr-font-family, var(--sjs-font-family, var(--font-family)));
  font-size: var(--ctr-font-small-size, var(--sjs-font-size-x150));
  font-style: normal;
  font-weight: 400;
  line-height: var(--ctr-font-small-line-height, var(--sjs-line-height-x2));
  font-weight: 600;
  width: 100%;
  height: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
  transition: background-color var(--sjs-creator-transition-duration, 150ms);
}
.svc-test-tab__content-actions .svc-page-selector {
  max-width: 50%;
}

.svc-page-invisible .svc-list__item-body {
  padding-block-start: var(--ctr-list-item-padding-top, var(--sjs-spacing-x150));
  padding-block-end: var(--ctr-list-item-padding-bottom, var(--sjs-spacing-x150));
  padding-inline-start: var(--ctr-list-item-padding-left, var(--sjs-spacing-x2));
  padding-inline-end: var(--ctr-list-item-padding-right-with-label-icon, var(--sjs-spacing-x150));
}
.svc-page-invisible .svc-list-item__marker-icon {
  padding: 0;
  opacity: var(--ctr-list-item-icon-opacity-label, 0.5);
  width: var(--ctr-list-item-icon-width, var(--sjs-font-size-x3));
  height: var(--ctr-list-item-icon-height, var(--sjs-font-size-x3));
}

.svc-test-tab__content .sd-body--empty {
  font-family: var(--ctr-font-family, var(--sjs-font-family, var(--font-family)));
  font-size: var(--ctr-font-default-size, var(--sjs-font-size-x2));
  font-style: normal;
  font-weight: 400;
  line-height: var(--ctr-font-default-line-height, var(--sjs-line-height-x3));
  color: var(--sjs-layer-1-foreground-100, rgba(0, 0, 0, 0.9019607843));
  text-align: center;
  overflow: hidden;
  position: static;
  display: flex;
  flex-direction: column;
}

.svc-preview-pager__item {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  display: flex;
  box-sizing: border-box;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  max-width: 100%;
  padding: var(--ctr-preview-pager-item-padding-top-with-text, var(--sjs-spacing-x1)) var(--ctr-preview-pager-item-padding-right-with-text, var(--sjs-spacing-x1)) var(--ctr-preview-pager-item-padding-bottom-with-text, var(--sjs-spacing-x1)) var(--ctr-preview-pager-item-padding-left-with-text, var(--sjs-spacing-x1));
  justify-content: center;
  align-items: center;
  border-radius: var(--ctr-preview-pager-item-corner-radius, var(--sjs-corner-radius-x05));
  background-color: transparent;
}
.svc-preview-pager__item:hover {
  background: var(--ctr-survey-question-panel-toolbar-item-background-color-hovered, var(--sjs-secondary-background-10, rgba(25, 179, 148, 0.1019607843)));
}
.svc-preview-pager__item:disabled {
  opacity: var(--ctr-survey-question-panel-toolbar-item-opacity-disabled, 0.25);
}
.svc-preview-pager__item.svc-preview-pager__item--pressed {
  opacity: var(--ctr-survey-question-panel-toolbar-item-opacity-pressed, 0.5);
  background: var(--ctr-survey-question-panel-toolbar-item-background-color-hovered, var(--sjs-secondary-background-10, rgba(25, 179, 148, 0.1019607843)));
}
.svc-preview-pager__item.svc-preview-pager__item--active {
  background: var(--ctr-survey-question-panel-toolbar-item-background-color-selected, var(--sjs-secondary-background-10, rgba(25, 179, 148, 0.1019607843)));
}

.svc-preview-pager__item--icon {
  padding: var(--ctr-preview-pager-item-padding-top, var(--sjs-spacing-x1)) var(--ctr-preview-pager-item-padding-right, var(--sjs-spacing-x1)) var(--ctr-preview-pager-item-padding-bottom, var(--sjs-spacing-x1)) var(--ctr-preview-pager-item-padding-left, var(--sjs-spacing-x1));
}
.svc-preview-pager__item--icon:hover {
  background: var(--ctr-survey-question-panel-toolbar-item-background-color-hovered, var(--sjs-secondary-background-10, rgba(25, 179, 148, 0.1019607843)));
}
.svc-preview-pager__item--icon:disabled {
  opacity: var(--ctr-survey-question-panel-toolbar-item-opacity-disabled, 0.25);
}
.svc-preview-pager__item--icon:disabled use {
  fill: var(--ctr-survey-question-panel-toolbar-item-icon-color-disabled, var(--sjs-layer-1-foreground-50, rgba(0, 0, 0, 0.5019607843)));
}
.svc-preview-pager__item--icon.svc-preview-pager__item--pressed {
  opacity: var(--ctr-survey-question-panel-toolbar-item-opacity-pressed, 0.5);
  background: var(--ctr-survey-question-panel-toolbar-item-background-color-hovered, var(--sjs-secondary-background-10, rgba(25, 179, 148, 0.1019607843)));
}
.svc-preview-pager__item--icon.svc-preview-pager__item--pressed use {
  fill: var(--ctr-survey-question-panel-toolbar-item-icon-color-pressed, var(--sjs-layer-1-foreground-75, rgba(0, 0, 0, 0.7490196078)));
}
.svc-preview-pager__item--icon.svc-preview-pager__item--active {
  background: var(--ctr-survey-question-panel-toolbar-item-background-color-selected, var(--sjs-secondary-background-10, rgba(25, 179, 148, 0.1019607843)));
}

.svc-preview-pager-item__icon {
  box-sizing: border-box;
  display: flex;
  width: var(--ctr-preview-pager-item-icon-container-width, var(--sjs-font-size-x2));
  height: var(--ctr-preview-pager-item-icon-container-height, var(--sjs-font-size-x2));
  padding: var(--ctr-preview-pager-item-icon-padding-top, 0px) var(--ctr-preview-pager-item-icon-padding-right, 0px) var(--ctr-preview-pager-item-icon-padding-bottom, 0px) var(--ctr-preview-pager-item-icon-padding-left, 0px);
  justify-content: center;
  align-items: center;
}
.svc-preview-pager-item__icon use {
  fill: var(--ctr-survey-question-panel-toolbar-item-icon-color, var(--sjs-secondary-background-500, #19b394));
}

.svc-preview-pager-item__title {
  font-family: var(--ctr-font-family, var(--sjs-font-family, var(--font-family)));
  font-size: var(--ctr-font-small-size, var(--sjs-font-size-x150));
  font-style: normal;
  font-weight: 400;
  line-height: var(--ctr-font-small-line-height, var(--sjs-line-height-x2));
  font-weight: 600;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--ctr-survey-question-panel-toolbar-item-text-color, var(--sjs-layer-1-foreground-100, rgba(0, 0, 0, 0.9019607843)));
}

.svc-footer-bar .svc-preview-pager__item {
  --thm-menu-toolbar-button-gap: calc(var(--ctr-menu-toolbar-gap, var(--sjs-spacing-x2)) / 2);
  margin: 0 var(--thm-menu-toolbar-button-gap);
}
.svc-footer-bar .svc-preview-pager-item__icon {
  width: var(--ctr-menu-toolbar-button-icon-width, var(--sjs-font-size-x3));
  height: var(--ctr-menu-toolbar-button-icon-height, var(--sjs-font-size-x3));
  box-sizing: content-box;
}
.svc-footer-bar .svc-preview-pager-item__icon use {
  fill: var(--ctr-menu-toolbar-button-icon-color, var(--sjs-layer-1-foreground-75, rgba(0, 0, 0, 0.7490196078)));
}
/*!*********************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./src/components/tabs/logic.scss ***!
  \*********************************************************************************************************************************************************************************/
.sl-table {
  width: 50%;
  margin: 0 25%;
  margin-top: calc(-2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
}

.sl-table__row {
  position: relative;
}

.sl-table__cell.st-table__cell--actions:first-of-type .sv-action-bar {
  margin-top: var(--ctr-collapse-button-margin-top, var(--sjs-spacing-x05n));
  padding-right: var(--ctr-collapse-button-margin-right, var(--sjs-spacing-x2));
}

.sl-table .sl-table__detail-button.sl-table__detail-button {
  box-sizing: border-box;
  border-radius: var(--ctr-collapse-button-corner-radius, var(--sjs-corner-radius-x1));
  padding: var(--ctr-collapse-button-padding, var(--sjs-spacing-x150));
  transition: background-color var(--sjs-creator-transition-duration, 150ms);
}
.sl-table .sl-table__detail-button.sl-table__detail-button:focus:enabled {
  background-color: transparent;
}
.sl-table .sl-table__detail-button.sl-table__detail-button use {
  transition: fill var(--sjs-creator-transition-duration, 150ms);
}
.sl-table .sl-table__detail-button.sl-table__detail-button:hover:enabled, .sl-table .sl-table__detail-button.sl-table__detail-button.sv-focused--by-key.sv-focused--by-key {
  background-color: var(--ctr-collapse-button-background-color-hovered, var(--sjs-primary-background-10, rgba(25, 179, 148, 0.1019607843)));
  outline: none;
}
.sl-table .sl-table__detail-button.sl-table__detail-button:hover:enabled use, .sl-table .sl-table__detail-button.sl-table__detail-button.sv-focused--by-key.sv-focused--by-key use {
  fill: var(--ctr-collapse-button-icon-color-hovered, var(--sjs-layer-3-foreground-75, rgba(0, 0, 0, 0.7490196078)));
}
.sl-table .sl-table__detail-button.sl-table__detail-button .sv-action-bar-item__icon {
  width: var(--ctr-collapse-button-icon-width, var(--sjs-font-size-x3));
  height: var(--ctr-collapse-button-icon-height, var(--sjs-font-size-x3));
}

.sl-table__remove-button .sv-action-bar-item {
  padding: var(--ctr-expression-item-padding-top, var(--sjs-spacing-x1)) var(--ctr-expression-item-padding-right-icon-only, var(--sjs-spacing-x1)) var(--ctr-expression-item-padding-bottom, var(--sjs-spacing-x1)) var(--ctr-expression-item-padding-left-icon-only, var(--sjs-spacing-x1));
  cursor: pointer;
  border: none;
  border-radius: var(--ctr-expression-item-corner-radius, var(--sjs-corner-radius-x1));
}
.sl-table__remove-button .sv-action-bar-item:focus:enabled {
  background-color: transparent;
}
.sl-table__remove-button .sv-action-bar-item use {
  fill: var(--ctr-expression-item-icon-color, var(--sjs-semantic-red-background-500, #e50a3e));
}
.sl-table__remove-button .sv-action-bar-item:hover:enabled, .sl-table__remove-button .sv-action-bar-item.sv-focused--by-key.sv-focused--by-key {
  background-color: var(--ctr-expression-item-background-color-remove-button-hovered, var(--sjs-semantic-red-background-10, rgba(229, 10, 62, 0.1019607843)));
  outline: none;
}
.sl-table__remove-button .sv-action-bar-item:hover:enabled use, .sl-table__remove-button .sv-action-bar-item.sv-focused--by-key.sv-focused--by-key use {
  fill: var(--ctr-expression-item-icon-color, var(--sjs-semantic-red-background-500, #e50a3e));
}
.sl-table__remove-button .sv-action-bar-item .sv-action-bar-item__icon {
  width: var(--ctr-expression-item-icon-width, var(--sjs-font-size-x3));
  height: var(--ctr-expression-item-icon-height, var(--sjs-font-size-x3));
}

.sl-table__remove-button .sv-action-bar-item__icon {
  width: var(--ctr-survey-action-button-icon-width, var(--lbr-size-x3));
  height: var(--ctr-survey-action-button-icon-height, var(--lbr-size-x3));
}

.sl-table__cell .sv-action-bar-item__icon {
  opacity: 0;
  transition: opacity var(--sjs-creator-transition-duration, 150ms);
}

.sl-table__row:hover .sl-table__cell .sv-action-bar-item__icon,
.sl-table__cell .sv-action-bar-item.sv-focused--by-key .sv-action-bar-item__icon {
  opacity: 1;
}

.sl-table__row.sl-table__row--additional .sl-table__cell .svc-action-button {
  color: var(--lbr-page-header-title-color-not-completed-rule, var(--sjs-secondary-background-500, #19b394));
}

.sl-table .svc-action-button {
  padding: var(--ctr-survey-page-header-padding-vertical-with-button, var(--sjs-spacing-x05)) 0px;
  margin-left: 0;
}

.sl-table__cell .svc-action-button,
.sl-table__cell .svc-action-button:hover,
.sl-table__cell .svc-action-button:focus,
.sl-table__cell .svc-action-button:hover:enabled,
.sl-table__cell .svc-action-button:focus:enabled {
  font-family: var(--ctr-font-family, var(--sjs-font-family, var(--font-family)));
  font-size: var(--ctr-font-medium-size, var(--sjs-font-size-x3));
  font-style: normal;
  font-weight: 400;
  line-height: var(--ctr-font-medium-line-height, var(--sjs-line-height-x4));
  font-weight: 700;
  --thm-logic-header-max-height: var(--ctr-font-medium-line-height, var(--ctr-medium-bold-line-height, calcSize(4)));
  background: transparent;
  outline: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
  color: var(--lbr-page-header-title-color, var(--sjs-layer-3-foreground-100, rgba(0, 0, 0, 0.9019607843)));
  box-sizing: content-box;
  max-height: calc(3 * var(--thm-logic-header-max-height));
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.sl-table__cell {
  vertical-align: top;
  padding: 0;
  width: 100%;
}

.sl-table__row .sl-table__cell {
  --animation-padding-top: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
  padding-top: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
}

.sl-table__cell--actions {
  position: absolute;
  width: max-content;
}
.sl-table__cell--actions:first-of-type {
  transform: translateX(-100%);
}

.sl-table__cell--detail-button {
  overflow: hidden;
  appearance: none;
  outline: none;
  border: none;
  background-color: transparent;
}

.sl-table {
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}
.sl-table thead th:first-child {
  position: absolute;
  left: 0;
  transform: translateX(-100%);
}
.sl-table thead th:last-child {
  position: absolute;
  right: 0;
  transform: translateX(100%);
}
.sl-table thead .sl-table__cell.st-table__cell--header {
  text-align: left;
}
.sl-table td:first-of-type,
.sl-table th:first-of-type {
  padding-left: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
}
.sl-table td:first-of-type .sv-action-bar,
.sl-table th:first-of-type .sv-action-bar {
  justify-content: flex-end;
}
.sl-table td:last-of-type,
.sl-table th:last-of-type {
  padding-right: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
}

.sl-panel .sl-panel__footer {
  padding: 0;
}
.sl-panel .sl-panel__footer .sv-action {
  width: 100%;
}
.sl-panel .sl-panel__footer .sv-action__content {
  width: 100%;
}
.sl-panel .sl-panel__footer button.sl-panel__done-button {
  font-family: var(--ctr-font-family, var(--sjs-font-family, var(--font-family)));
  font-size: var(--ctr-font-default-size, var(--sjs-font-size-x2));
  font-style: normal;
  font-weight: 400;
  line-height: var(--ctr-font-default-line-height, var(--sjs-line-height-x3));
  font-weight: 600;
  width: auto;
  margin: var(--ctr-expression-rows-gap, var(--sjs-spacing-x2)) 0 0 0;
  color: var(--ctr-expression-item-text-color-button, var(--sjs-primary-background-500, #19b394));
  background-color: var(--ctr-expression-item-background-color-button, var(--sjs-primary-background-10, rgba(25, 179, 148, 0.1019607843)));
  border-radius: var(--ctr-expression-item-corner-radius, var(--sjs-corner-radius-x1));
  padding: var(--ctr-expression-item-padding-top, var(--sjs-spacing-x1)) var(--ctr-expression-item-padding-right-button, var(--sjs-spacing-x4)) var(--ctr-expression-item-padding-bottom, var(--sjs-spacing-x1)) var(--ctr-expression-item-padding-left-button, var(--sjs-spacing-x4));
  display: flex;
  align-items: center;
  vertical-align: baseline;
  text-align: center;
  user-select: none;
  transition: background-color var(--sjs-creator-transition-duration, 150ms), color var(--sjs-creator-transition-duration, 150ms);
}
.sl-panel .sl-panel__footer button:hover:enabled {
  background-color: var(--ctr-expression-item-background-color-button-hovered, var(--sjs-primary-background-500, #19b394));
  color: var(--ctr-expression-item-text-color-button-hovered, var(--sjs-primary-foreground-100, white));
}
.sl-panel .sl-panel__footer .sv-action-bar-item__title {
  font-family: var(--ctr-font-family, var(--sjs-font-family, var(--font-family)));
  font-size: var(--ctr-font-default-size, var(--sjs-font-size-x2));
  font-style: normal;
  font-weight: 400;
  line-height: var(--ctr-font-default-line-height, var(--sjs-line-height-x3));
  font-weight: 600;
  color: inherit;
  display: flex;
  align-items: center;
  flex-grow: 1;
  justify-content: center;
}

.sl-element .sd-paneldynamic__buttons-container {
  padding: 0;
}

.sl-question {
  display: flex;
  align-items: center;
  margin-top: var(--ctr-expression-rows-gap, var(--sjs-spacing-x2));
}

.sl-row {
  display: flex;
  align-items: flex-start;
  flex-flow: row wrap;
}

.svc-creator-popup .sl-panel-wrapper:first-child .sl-question {
  margin-top: 0;
}

.sl-row--multiple .sl-panel {
  padding-bottom: 0;
}

.sl-question__header--left {
  margin-right: var(--ctr-expression-items-gap, var(--sjs-spacing-x1));
}

.sl-row .sd-rating {
  overflow-x: auto;
  padding: 2px;
  margin: -2px;
}

.sl-question__title {
  font-family: var(--ctr-font-family, var(--sjs-font-family, var(--font-family)));
  font-size: var(--ctr-font-default-size, var(--sjs-font-size-x2));
  font-style: normal;
  font-weight: 400;
  line-height: var(--ctr-font-default-line-height, var(--sjs-line-height-x3));
  font-weight: 600;
  color: var(--ctr-expression-item-text-color-function, var(--sjs-layer-3-foreground-100, rgba(0, 0, 0, 0.9019607843)));
  margin: 0;
}
.sl-question__title span + span {
  display: none;
}

.sl-row--multiple .sl-question {
  padding-right: var(--ctr-expression-items-gap, var(--sjs-spacing-x1));
}

.svc-logic-question-text-editor {
  margin-top: var(--ctr-expression-rows-gap, var(--sjs-spacing-x2));
}

.svc-logic-question-value {
  --sd-base-padding: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
  --sd-base-vertical-padding: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
  --sd-page-vertical-padding: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
  padding-right: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
  margin-top: var(--ctr-expression-rows-gap, var(--sjs-spacing-x2));
}

.svc-logic_trigger-editor {
  margin-top: var(--ctr-expression-rows-gap, var(--sjs-spacing-x2));
}

.svc-logic_trigger-editor .svc-logic-question-value {
  margin-top: 0;
}

.sv-popup.svc-property-editor .sl-row {
  flex-flow: nowrap;
}

.spg-comment.sl-comment {
  height: calc(17 * (var(--sjs-base-unit, var(--base-unit, 8px))));
}

.sl-body .sd-row--leave,
.sl-body .sd-row--enter {
  animation: none;
}
.sl-body .sd-element-wrapper--leave,
.sl-body .sd-element-wrapper--enter {
  animation: none;
}
.sl-body .sd-element__content--enter,
.sl-body .sd-element__content--leave {
  animation: none;
}
.sl-body .sd-paneldynamic__panel-wrapper--enter,
.sl-body .sd-paneldynamic__panel-wrapper--leave {
  animation: none;
}
.sl-body .sd-item--enter {
  animation: none;
}
.sl-body .sd-item--leave {
  animation: none;
}
.sl-body .sd-table__row--leave,
.sl-body .sd-table__row--enter {
  animation: none;
}

.sl-panel-wrapper--list.sl-panel-wrapper--leave, .sl-panel-wrapper--list.sl-panel-wrapper--enter {
  animation-name: fadeIn, moveInWithOverflow;
  animation-fill-mode: forwards;
  min-height: 0 !important;
}
.sl-panel-wrapper--list.sl-panel-wrapper--enter {
  opacity: 0;
  animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
  animation-duration: var(--sl-pd-list-fade-in-duration, 250ms), var(--sl-pd-list-move-in-duration, 150ms);
  animation-delay: var(--sl-pd-list-fade-in-delay, 150ms), 0s;
}
.sl-panel-wrapper--list.sl-panel-wrapper--leave {
  animation-direction: reverse;
  animation-timing-function: cubic-bezier(0.42, 0, 1, 1);
  animation-duration: var(--sl-pd-list-fade-out-duration, 100ms), var(--sl-pd-