survey-creator-core/ui-preset-editor/index.css

A framework-independent core package of the SurveyJS Survey Creator component. With Survey Creator, you can visually design complex, interactive JSON forms and surveys in a drag-and-drop interface.

/*!**************************************************************************************************************************************************************************************************!*\
  !*** 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/ui-preset-editor/presets-theme/presets.scss ***!
  \**************************************************************************************************************************************************************************************************/
.sps-action-bar {
  display: flex;
  box-sizing: content-box;
  position: relative;
  align-items: center;
  margin-left: auto;
  overflow: hidden;
  white-space: nowrap;
}

.sps-action {
  display: flex;
}

.sps-action--grow {
  flex-grow: 1;
}

.sps-btn {
  appearance: none;
  border: none;
  display: flex;
  padding: calc(var(--sjs2-layout-control-action-medium-box-vertical, 12px) + var(--sjs2-layout-control-action-medium-label-vertical, 0px)) calc(var(--sjs2-layout-control-action-medium-box-horizontal, 12px) + var(--sjs2-layout-control-action-medium-label-horizontal, 12px));
  justify-content: center;
  align-items: center;
  gap: var(--sjs2-layout-control-action-medium-box-gap, 0);
  border-radius: var(--sjs2-radius-control-button, 8px);
  background: var(--sjs2-color-bg-brand-primary, #19b394);
  color: var(--sjs2-color-fg-static-main-primary, #fff);
  text-align: center;
  /* sjs2/typography/default-strong */
  font-family: var(--sjs2-font-family-semantic-default, "Open Sans");
  font-size: var(--sjs2-font-size-semantic-default, 16px);
  font-style: normal;
  font-weight: 600;
  line-height: var(--sjs2-line-height-semantic-default, 24px); /* 150% */
}
.sps-btn:hover, .sps-btn:focus {
  background: var(--sjs2-color-bg-brand-primary-dim, #15987e);
}
.sps-btn:active {
  background: var(--sjs2-color-bg-brand-primary, #19b394);
}
.sps-btn:disabled {
  opacity: var(--sjs2-opacity-disabled, 0.25);
  background: var(--sjs2-color-bg-state-common-disabled, #D4D4D4);
  color: var(--sjs2-color-fg-state-common-disabled, rgba(28, 27, 32, 0.4));
  pointer-events: none;
}

.sps-btn--secondary-brand {
  background: var(--sjs2-color-bg-brand-secondary, rgba(25, 179, 148, 0.1));
  color: var(--sjs2-color-fg-brand-primary, #19b394);
}
.sps-btn--secondary-brand:hover, .sps-btn--secondary-brand:focus {
  background: var(--sjs2-color-bg-brand-secondary-dim, rgba(25, 179, 148, 0.15));
}
.sps-btn--secondary-brand:active {
  background: var(--sjs2-color-bg-brand-secondary, rgba(25, 179, 148, 0.1));
}

.sps-btn--secondary-alert {
  background: var(--sjs2-color-bg-alert-secondary, rgba(229, 10, 62, 0.1));
  color: var(--sjs2-color-fg-alert-primary, #C30935);
}
.sps-btn--secondary-alert:hover, .sps-btn--secondary-alert:focus {
  background: var(--sjs2-color-bg-alert-secondary-dim, rgba(229, 10, 62, 0.15));
}
.sps-btn--secondary-alert:active {
  background: var(--sjs2-color-bg-alert-secondary, rgba(229, 10, 62, 0.1));
}

.sps-action-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;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: flex;
  padding: var(--ctr-actionbar-button-padding-top-large-icon, var(--sjs-spacing-x1)) var(--ctr-actionbar-button-padding-right-large-icon, var(--sjs-spacing-x1)) var(--ctr-actionbar-button-padding-bottom-large-icon, var(--sjs-spacing-x1)) var(--ctr-actionbar-button-padding-left-large-icon, var(--sjs-spacing-x1));
  box-sizing: border-box;
  border: none;
  color: var(--ctr-actionbar-button-text-color, var(--sjs-primary-background-500, #19b394));
  border-radius: var(--sjs2-radius-control-action-icon, 8px);
  background: var(--sjs2-color-bg-neutral-tertiary, rgba(28, 27, 32, 0));
  cursor: pointer;
  transition: background-color var(--sjs-creator-transition-duration, 150ms), opacity var(--sjs-creator-transition-duration, 150ms);
}
.sps-action-button.sps-action-button--pressed, .sps-action-button:hover, .sps-action-button:focus {
  opacity: 1;
  outline: none;
  background: var(--sjs2-color-bg-neutral-tertiary-dim, rgba(28, 27, 32, 0.05));
}
.sps-action-button.sps-action-button--pressed use, .sps-action-button:hover use, .sps-action-button:focus use {
  fill: var(--ctr-actionbar-button-icon-color-hovered, var(--sjs-layer-1-foreground-75, rgba(0, 0, 0, 0.7490196078)));
}
.sps-action-button:disabled use {
  fill: var(--sjs2-color-fg-state-common-disabled, rgba(28, 27, 32, 0.4));
}

.sps-action-button--icon {
  padding: var(--ctr-actionbar-button-padding-top-large-icon, var(--sjs-spacing-x1));
}

.sps-action-button__icon {
  display: block;
  width: 24px;
  height: 24px;
}
.sps-action-button__icon use {
  fill: var(--ctr-actionbar-button-icon-color, var(--sjs-layer-1-foreground-75, rgba(0, 0, 0, 0.7490196078)));
  transition: fill var(--sjs-creator-transition-duration, 150ms);
}

.sps-action-button--danger {
  color: var(--ctr-library-action-button-text-color-negative, var(--sjs-semantic-red-background-500, #e50a3e));
}
.sps-action-button--danger:hover, .sps-action-button--danger:focus {
  background-color: var(--ctr-library-action-button-background-color-negative-hovered, var(--sjs-semantic-red-background-10, rgba(229, 10, 62, 0.1019607843)));
}
.sps-action-button--danger:hover use, .sps-action-button--danger:focus use {
  fill: var(--ctr-library-action-button-icon-color-negative, var(--sjs-semantic-red-background-500, #e50a3e));
}

.sps-action-button:disabled {
  opacity: var(--ctr-actionbar-button-opacity-disabled, 0.25);
  pointer-events: none;
  cursor: default;
}

.sps-action-button--muted {
  opacity: var(--ctr-actionbar-button-opacity-muted, 0.35);
}

.sps-action-button:active {
  opacity: var(--ctr-actionbar-button-opacity-pressed, 0.5);
}

.sps-action-button--text {
  padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
}

.sps-menu-floating-action .svc-menu-action__button {
  background: var(--sjs2-color-bg-brand-primary, #19B394);
}
.sps-menu-floating-action .svc-menu-action__button use {
  fill: var(--sjs2-color-fg-static-main-primary, #FFF);
}
.sps-menu-floating-action .svc-menu-action__button:hover,
.sps-menu-floating-action .svc-menu-action__button:focus,
.sps-menu-floating-action .svc-menu-action__button:focus-within {
  background: var(--sjs2-color-bg-brand-primary-dim, #15987E);
}
.sps-menu-floating-action .svc-menu-action__button:active {
  background: var(--sjs2-color-bg-brand-primary, #19B394);
}

.sps-question {
  background: var(--sjs2-color-bg-basic-primary, #fff);
}

.sps-question--main {
  min-height: 420px;
}

.sps-question--with-frame {
  border-radius: var(--sjs2-radius-x250, 20px);
  border: var(--sjs2-border-width-x100, 1px) solid var(--sjs2-color-border-basic-secondary, #d4d4d4);
}
.sps-question--with-frame .sps-question__content {
  padding: var(--sjs2-spacing-x150, 12px) var(--sjs2-spacing-x250, 20px) var(--sjs2-spacing-x250, 20px) var(--sjs2-spacing-x250, 20px);
}

.sps-question__header {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: var(--sjs2-spacing-x200, 16px) var(--sjs2-spacing-x250, 20px) 0 var(--sjs2-spacing-x250, 20px);
  align-items: flex-start;
  align-self: stretch;
}

.sps-question__title {
  color: var(--sjs2-color-fg-basic-primary, #1c1b20);
  /* sjs2/typography/default-strong */
  font-family: var(--sjs2-font-family-semantic-default, "Open Sans");
  font-size: var(--sjs2-font-size-semantic-default, 16px);
  font-style: normal;
  font-weight: 600;
  line-height: var(--sjs2-line-height-semantic-default, 24px); /* 150% */
}
.sps-question__title .sv-title-actions {
  gap: var(--sjs2-spacing-x050, 4px);
}

.sps-question--nested .sps-question__title {
  color: var(--sjs2-color-fg-basic-secondary, rgba(28, 27, 32, 0.6));
  padding: var(--sjs2-layout-control-caption-medium-caption-vertical, 8px) var(--sjs2-layout-control-caption-medium-caption-horizontal, 0);
  /* sjs2/typography/default */
  font-family: var(--sjs2-font-family-semantic-default, "Open Sans");
  font-size: var(--sjs2-font-size-semantic-default, 16px);
  font-style: normal;
  font-weight: 400;
  line-height: var(--sjs2-line-height-semantic-default, 24px); /* 150% */
}
.sps-question--nested .sps-question__header {
  width: 100%;
  display: flex;
  padding: 0;
  align-items: flex-start;
  align-self: stretch;
}
.sps-question--nested .sps-question__content {
  padding: 0;
}
.sps-question--nested .sps-question__description {
  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));
  color: var(--ctr-caption-with-actions-description-text-color, var(--sjs-layer-1-foreground-50, rgba(0, 0, 0, 0.5019607843)));
  padding-bottom: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
  white-space: normal;
}

.sps-question__content {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  align-self: stretch;
}

.sps-question__description {
  white-space: normal;
  color: var(--sjs2-color-fg-basic-tertiary, rgba(28, 27, 32, 0.4));
}

.sps-question__description--under {
  display: flex;
  padding: var(--sjs2-spacing-x100, 8px);
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  flex: 1 0 0;
  align-self: stretch;
}

.sps-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));
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: block;
  box-sizing: border-box;
  width: 100%;
  border: none;
  border-radius: var(--sjs2-radius-semantic-form, 8px);
  background: var(--sjs2-color-control-formbox-default-bg, rgba(28, 27, 32, 0.05));
  box-shadow: inset 0 0 0 var(--sjs2-border-width-default, 1px) var(--sjs2-color-control-formbox-default-border, #D4D4D4);
  transition: box-shadow var(--sjs-creator-transition-duration, 150ms);
  padding-top: calc(var(--sjs2-layout-form-box-medium-vertical, 4px) + var(--ctr-editor-content-margin-top, var(--sjs-spacing-x1)));
  padding-right: calc(var(--sjs2-layout-form-box-medium-horizontal, 4px) + var(--ctr-editor-content-margin-right, var(--sjs-spacing-x150)));
  padding-bottom: calc(var(--sjs2-layout-form-box-medium-vertical, 4px) + var(--ctr-editor-content-margin-bottom, var(--sjs-spacing-x1)));
  padding-left: calc(var(--sjs2-layout-form-box-medium-horizontal, 4px) + var(--ctr-editor-content-margin-left, var(--sjs-spacing-x150)));
  outline: none;
  color: var(--ctr-editor-content-text-color, var(--sjs-layer-3-foreground-100, rgba(0, 0, 0, 0.9019607843)));
}

.sps-input::placeholder {
  color: var(--ctr-editor-content-text-color-placeholder, var(--sjs-layer-3-foreground-50, rgba(0, 0, 0, 0.5019607843)));
}

.sps-input--readonly {
  color: var(--sjs2-color-control-input-readonly-value, #1C1B20);
  background: var(--sjs2-color-control-formbox-readonly-bg, #FFF);
}

.sps-input::-webkit-datetime-edit, .sps-input::-webkit-datetime-edit-fields-wrapper, .sps-input::-webkit-datetime-edit-ampm-field, .sps-input::-webkit-datetime-edit-day-field, .sps-input::-webkit-datetime-edit-hour-field, .sps-input::-webkit-datetime-edit-millisecond-field, .sps-input::-webkit-datetime-edit-minute-field, .sps-input::-webkit-datetime-edit-month-field, .sps-input::-webkit-datetime-edit-second-field, .sps-input::-webkit-datetime-edit-week-field, .sps-input::-webkit-datetime-edit-year-field {
  display: flex;
  flex-wrap: nowrap;
  padding-top: 0;
  padding-bottom: 0;
}

.sps-input[type=date]:empty,
.sps-input[type=datetime-local]:empty {
  min-height: calc(var(--ctr-font-default-line-height, var(--sjs-line-height-x3)) + var(--ctr-editor-padding-top, var(--sjs-spacing-x05)) + var(--ctr-editor-content-margin-top, var(--sjs-spacing-x1)) + var(--ctr-editor-padding-bottom, var(--sjs-spacing-x05)) + var(--ctr-editor-content-margin-bottom, var(--sjs-spacing-x1)));
}

.sps-input:focus:not(:disabled),
.sps-input.sps-dropdown:focus:not(:disabled),
.sps-input.sps-dropdown:focus-within:not(:disabled),
.sps-input-container:focus-within {
  box-shadow: inset 0 0 0 var(--ctr-editor-border-width-focused, var(--sjs-stroke-x2)) var(--ctr-editor-border-color-focused, var(--sjs-primary-background-500, #19b394));
}

.sps-input[type=color] {
  padding-left: 0;
  padding-right: 0;
  min-width: calc(8 * (var(--sjs-base-unit, var(--base-unit, 8px))));
}

.sps-input__edit-button {
  position: relative;
  box-sizing: border-box;
  appearance: none;
  background: transparent;
  border: none;
  outline: none;
  border-radius: var(--ctr-editor-button-corner-radius, var(--sjs-corner-radius-x05));
  padding: var(--ctr-editor-button-padding-top, var(--sjs-spacing-x1)) var(--ctr-editor-button-padding-right, var(--sjs-spacing-x1)) var(--ctr-editor-button-padding-bottom, var(--sjs-spacing-x1)) var(--ctr-editor-button-padding-left, var(--sjs-spacing-x1));
  line-height: 0;
  transition: background var(--sjs-creator-transition-duration, 150ms), opacity var(--sjs-creator-transition-duration, 150ms);
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sps-input__edit-button:focus, .sps-input__edit-button:hover {
  background: var(--ctr-editor-button-background-color-hovered, var(--sjs-layer-3-background-400, #eaeaea));
}
.sps-input__edit-button:active {
  opacity: var(--ctr-editor-button-icon-opacity-pressed, 0.5);
}
.sps-input__edit-button svg {
  width: var(--ctr-editor-button-icon-width, var(--sjs-font-size-x3));
  height: var(--ctr-editor-button-icon-height, var(--sjs-font-size-x3));
  fill: var(--ctr-editor-button-icon-color, var(--sjs-layer-3-foreground-75, rgba(0, 0, 0, 0.7490196078)));
}

.sps-input-container--multiline .sps-input__edit-button {
  align-self: flex-end;
}

.sps-input__edit-button--disabled,
.sps-input__edit-button:disabled {
  opacity: var(--ctr-editor-button-icon-opacity-disabled, 0.25);
  background: transparent;
}
.sps-input__edit-button--disabled svg,
.sps-input__edit-button:disabled svg {
  fill: var(--ctr-editor-button-icon-color-disabled, var(--sjs-layer-3-foreground-75, rgba(0, 0, 0, 0.7490196078)));
}

.sps-input.sps-input--error {
  box-shadow: 0 0 0 1px inset var(--ctr-editor-border-color-error, var(--sjs-semantic-red-background-500, #e50a3e));
}

.sps-input-container {
  display: flex;
  justify-content: space-between;
  cursor: default;
  padding: var(--ctr-editor-padding-top, var(--sjs-spacing-x05)) var(--ctr-editor-padding-right, var(--sjs-spacing-x05)) var(--ctr-editor-padding-bottom, var(--sjs-spacing-x05)) var(--ctr-editor-padding-left, var(--sjs-spacing-x05));
  align-items: center;
  gap: var(--ctr-editor-gap, var(--sjs-spacing-x05));
  box-shadow: inset 0 0 0 var(--ctr-editor-border-width, var(--sjs-stroke-x1)) var(--ctr-editor-border-color, var(--sjs-border-10, gainsboro));
}

.sps-input-container--multiline {
  align-items: end;
  flex-direction: column;
  gap: 0;
  height: auto;
}
.sps-input-container--multiline sv-ng-question-comment {
  display: flex;
}
.sps-input-container--multiline .sps-input-container__input {
  box-sizing: border-box;
  resize: none;
}

.sps-input-container__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));
  flex-grow: 1;
  width: 100%;
  padding: var(--ctr-editor-content-margin-top, var(--sjs-spacing-x1)) var(--ctr-editor-content-margin-right, var(--sjs-spacing-x150)) var(--ctr-editor-content-margin-bottom, var(--sjs-spacing-x1)) var(--ctr-editor-content-margin-left, var(--sjs-spacing-x150));
  color: var(--ctr-editor-content-text-color, var(--sjs-layer-3-foreground-100, rgba(0, 0, 0, 0.9019607843)));
  outline: none;
  border: none;
  background-color: transparent;
}
.sps-input-container__input::placeholder {
  color: var(--ctr-editor-content-text-color-placeholder, var(--sjs-layer-3-foreground-50, rgba(0, 0, 0, 0.5019607843)));
}

.sps-input-container__input:disabled,
.sps-input-container__input:disabled::placeholder {
  opacity: var(--ctr-editor-content-text-opacity-disabled, 0.25);
  color: var(--ctr-editor-content-text-color-disabled, var(--sjs-layer-1-foreground-100, rgba(0, 0, 0, 0.9019607843)));
  background-color: var(--ctr-editor-background-color-disabled, var(--sjs-layer-1-background-500, white));
}

.sps-input-container__buttons-container {
  display: flex;
  gap: var(--ctr-editor-buttons-gap, var(--sjs-spacing-x05));
  align-self: stretch;
}

.sps-dropdown {
  display: flex;
  padding: var(--sjs2-layout-control-formbox-medium-vertical, 4px) var(--sjs2-layout-control-formbox-medium-horizontal, 4px);
  align-items: stretch;
  align-self: stretch;
  border-radius: var(--sjs2-radius-semantic-form, 8px);
}
.sps-dropdown .sps-dropdown__filter-string-input {
  display: flex;
  padding: var(--sjs2-layout-control-input-medium-content-vertical, 8px) var(--sjs2-layout-control-input-medium-content-horizontal, 12px);
  align-items: flex-start;
  flex: 1 0 0;
  box-shadow: none;
  border: none;
  color: var(--sjs2-color-control-input-default-value, #1C1B20);
}

.sps-question__content sv-ng-dropdown-question, .sps-question__content sv-ng-dropdown {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.sps-dropdown__value {
  display: flex;
  padding: var(--sjs2-layout-control-input-medium-content-vertical, 8px) var(--sjs2-layout-control-input-medium-content-horizontal, 12px);
  align-items: flex-start;
  flex: 1 0 0;
  position: relative;
}
.sps-dropdown__value.sv-string-viewer {
  white-space: nowrap;
}

.sps-dropdown__hint-prefix, .sps-dropdown__hint-suffix {
  color: var(--sjs2-color-control-input-default-placeholder, rgba(28, 27, 32, 0.6));
}

.sps-dropdown-popup.sv-popup--menu-popup {
  height: 0;
}

.sps-dropdown_select-wrapper {
  flex-grow: 1;
}

.sps-dropdown__clean-button {
  --thm-ctr-editor-content-margin-top: var(--ctr-editor-content-margin-top, var(--sjs-spacing-x1));
  --thm-ctr-editor-content-margin-bottom: var(--ctr-editor-content-margin-bottom, var(--sjs-spacing-x1));
  margin-top: calc(-1 * var(--thm-ctr-editor-content-margin-top));
  margin-bottom: calc(-1 * var(--thm-ctr-editor-content-margin-bottom));
}
.sps-dropdown__clean-button use {
  fill: inherit;
}

.sps-dropdown .sd-dropdown-action-bar {
  display: flex;
  align-items: flex-start;
  gap: var(--sjs2-layout-control-input-medium-group-gap, 4px);
  align-self: stretch;
}
.sps-dropdown .sd-editor-button-item {
  display: flex;
  padding: var(--sjs2-layout-control-action-small-box-vertical, 8px) var(--sjs2-layout-control-action-small-box-horizontal, 8px);
  justify-content: center;
  align-items: center;
  gap: var(--sjs2-layout-control-action-small-box-gap, 0);
  border-radius: var(--sjs2-radius-semantic-form-item, 4px);
  background: var(--sjs2-color-bg-neutral-tertiary, rgba(28, 27, 32, 0));
}
.sps-dropdown .sd-editor-button-item:hover, .sps-dropdown .sd-editor-button-item:focus {
  border-radius: var(--ctr-editor-button-corner-radius, var(--sjs-corner-radius-x05));
  background: var(--ctr-editor-button-background-color-hovered, var(--sjs-layer-3-background-400, #eaeaea));
  transition: background var(--sjs-creator-transition-duration, 150ms);
}
.sps-dropdown .sd-editor-button-item.sd-editor-button-item--pressed {
  border-radius: var(--ctr-editor-button-corner-radius, var(--sjs-corner-radius-x05));
  opacity: var(--ctr-editor-button-icon-opacity-pressed, 0.5);
  background: var(--ctr-editor-button-background-color-hovered, var(--sjs-layer-3-background-400, #eaeaea));
  transition-property: opacity, background-color;
  transition-duration: var(--sjs-creator-transition-duration, 150ms);
}
.sps-dropdown .sd-editor-button-item use {
  fill: var(--ctr-editor-button-icon-color, var(--sjs-layer-3-foreground-75, rgba(0, 0, 0, 0.7490196078)));
}
.sps-dropdown .sv-editor-button-item__icon {
  display: flex;
  width: var(--sjs2-size-icon-medium, 24px);
  height: var(--sjs2-size-icon-medium, 24px);
  padding: var(--sjs2-layout-control-action-small-icon-vertical, 0) var(--sjs2-layout-control-action-small-icon-horizontal, 0);
  justify-content: center;
  align-items: center;
}
.sps-dropdown .sd-dropdown__hint-prefix {
  padding-left: var(--sjs2-layout-control-input-medium-content-horizontal, 12px);
}
.sps-dropdown .sd-dropdown__hint-prefix + .sps-dropdown__value {
  padding-left: 0;
}
.sps-dropdown .sd-dropdown__hint-prefix + .sps-dropdown__value .sps-dropdown__filter-string-input {
  padding-left: 0;
}

.sps-dropdown.sd-input--disabled {
  opacity: 1;
}
.sps-dropdown.sd-input--disabled .sps-dropdown__value {
  opacity: var(--ctr-editor-content-text-opacity-disabled, 0.25);
}
.sps-dropdown.sd-input--disabled .sd-editor-button-item {
  opacity: var(--ctr-editor-button-icon-opacity-disabled, 0.25);
  background: transparent;
}
.sps-dropdown.sd-input--disabled .sd-editor-button-item svg {
  fill: var(--ctr-editor-button-icon-color-disabled, var(--sjs-layer-3-foreground-75, rgba(0, 0, 0, 0.7490196078)));
}

.sps-icon-item {
  display: flex;
  gap: var(--sjs2-spacing-x100, 8px);
}

svg.sps-icon-item__icon, svg.sps-icon-item__icon use {
  width: var(--sjs2-size-icon-medium, 24px);
  height: var(--sjs2-size-icon-medium, 24px);
  fill: var(--sjs2-color-fg-brand-primary, #19b394);
}

.sv-list__item--selected svg.sps-icon-item__icon use {
  fill: currentColor;
}

.sps-icon-item__text {
  white-space: nowrap;
}

.sps-tagbox.sps-tagbox {
  background-color: var(--ctr-editor-background-color, var(--sjs-layer-3-background-500, #f4f4f4));
  border-radius: var(--ctr-editor-corner-radius, var(--sjs-corner-radius-x075));
  box-shadow: inset 0 0 0 var(--ctr-editor-border-width, var(--sjs-stroke-x1)) var(--ctr-editor-border-color, var(--sjs-border-10, gainsboro));
  transition: box-shadow var(--sjs-creator-transition-duration, 150ms);
}
.sps-tagbox.sps-tagbox:focus-within {
  box-shadow: inset 0 0 0 var(--ctr-editor-border-width-focused, var(--sjs-stroke-x2)) var(--ctr-editor-border-color-focused, var(--sjs-primary-background-500, #19b394));
}

.sps-tagbox__value.sps-tagbox__value {
  gap: var(--ctr-tag-box-gap, var(--sjs-spacing-x05));
  overflow: visible;
}

.sps-tagbox__value .sv-tagbox__item {
  padding: var(--ctr-tag-box-item-padding-top, var(--sjs-spacing-x1)) var(--ctr-tag-box-item-padding-right, var(--sjs-spacing-x150)) var(--ctr-tag-box-item-padding-bottom, var(--sjs-spacing-x1)) var(--ctr-tag-box-item-padding-left, var(--sjs-spacing-x150));
  border-radius: var(--ctr-tag-box-item-corner-radius, var(--sjs-corner-radius-x025));
  box-shadow: inset 0 0 0 var(--ctr-tag-box-item-border-width, var(--sjs-stroke-x1)) var(--ctr-tag-box-item-border-color, var(--sjs-border-default, #d4d4d4));
  background: var(--ctr-tag-box-item-background-color, var(--sjs-layer-1-background-500, #ffffff));
}
.sps-tagbox__value .sv-tagbox__item-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));
  font-weight: 600;
  color: var(--ctr-tag-box-item-text-color, var(--sjs-primary-background-500, #19b394));
}

.sps-tagbox-item_clean-button {
  background: linear-gradient(270deg, var(--ctr-tag-box-item-mask-color-1, var(--sjs-primary-foreground-100, #ffffff)) 50%, var(--ctr-tag-box-item-mask-color-2, var(--sjs-primary-foreground-25, rgba(255, 255, 255, 0.2509803922))) 100%);
}

.sps-tagbox-item_clean-button-svg use {
  fill: var(--ctr-tag-box-item-remove-button-icon-color, var(--sjs-primary-background-500, #19b394));
}

.sps-tagbox-item_clean-button-svg:hover {
  border-radius: var(--ctr-tag-box-item-remove-button-corner-radius, var(--sjs-corner-radius-round));
  background: var(--ctr-tag-box-item-remove-button-background-color-hovered, var(--sjs-primary-background-10, rgba(25, 179, 148, 0.1019607843)));
}

.sps-panel--with-frame {
  border-radius: var(--sjs2-radius-x250, 20px);
  border: var(--sjs2-border-width-x100, 1px) solid var(--sjs2-color-border-basic-secondary, #D4D4D4);
  background: var(--sjs2-color-bg-basic-primary, #FFF);
  overflow: hidden;
}

.sps-panel--navigation {
  position: relative;
  display: flex;
  flex-direction: row-reverse;
  padding: var(--sjs2-spacing-x150, 12px) var(--sjs2-spacing-x150, 12px) var(--sjs2-spacing-x150, 12px) var(--sjs2-spacing-x250, 20px);
  align-items: center;
  gap: var(--sjs2-spacing-x150, 12px);
}
.sps-panel--navigation .sps-panel__header {
  width: auto;
  flex-grow: 1;
  padding: 0;
  display: flex;
  justify-content: flex-end;
}
.sps-panel--navigation .sps-panel__content {
  display: flex;
  flex-direction: row;
  padding: 0;
}
.sps-panel--navigation .sps-row {
  border: none;
  padding: 0 0 0 var(--tokens-spacing-static-positive-x300, 24px);
  border-left: var(--sjs2-border-width-x100, 1px) solid var(--sjs2-color-border-basic-secondary, #D4D4D4);
}
.sps-panel--navigation .sps-row:first-of-type {
  padding-left: 0;
  border-left: none;
}
.sps-panel--navigation .sps-question__content {
  padding: 0;
}
.sps-panel--navigation .sps-row--multiple > div {
  padding: 0;
  border: none;
}
.sps-panel--navigation .sps-row--multiple .sps-question--nested {
  overflow-y: visible;
}

.sps-panel__header {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  padding: var(--sjs2-spacing-x200, 16px) var(--sjs2-spacing-x250, 20px) 0 var(--sjs2-spacing-x250, 20px);
  align-items: flex-start;
  align-self: stretch;
}

.sps-panel__title {
  flex-grow: 1;
  color: var(--sjs2-color-fg-basic-primary, #1C1B20);
  /* sjs2/typography/default-strong */
  font-family: var(--sjs2-font-family-semantic-default, "Open Sans");
  font-size: var(--sjs2-font-size-semantic-default, 16px);
  font-style: normal;
  font-weight: 600;
  line-height: var(--sjs2-line-height-semantic-default, 24px); /* 150% */
}

.sps-panel__content {
  display: flex;
  flex-direction: column;
  padding: var(--sjs2-spacing-x150, 12px) var(--sjs2-spacing-x250, 20px) var(--sjs2-spacing-x250, 20px) var(--sjs2-spacing-x250, 20px);
  gap: var(--sjs2-spacing-x200, 16px);
}

.sps-panel--nested .sps-panel__header {
  padding: 0;
}
.sps-panel--nested .sps-panel__content {
  padding: var(--sjs2-spacing-x200, 16px) 0 0;
}

.sps-panel--collapsed {
  padding-bottom: var(--sjs2-spacing-x200, 16px);
}

.sps-checkbox {
  cursor: pointer;
}

.sps-checkbox--disabled {
  cursor: default;
}
.sps-checkbox--disabled .sps-checkbox {
  cursor: default;
}
.sps-checkbox--disabled .sps-checkbox__caption {
  color: var(--ctr-checkbox-text-color-disabled, var(--sjs-layer-1-foreground-100, rgba(0, 0, 0, 0.9019607843)));
}
.sps-checkbox--disabled .sps-checkbox__rectangle, .sps-checkbox--disabled.sps-checkbox:active .sps-checkbox__rectangle, .sps-checkbox--disabled.sps-checkbox__control:focus + .sps-checkbox__rectangle {
  border: var(--ctr-checkbox-border-width, var(--sjs-stroke-x1)) solid var(--ctr-checkbox-border-color-disabled, var(--sjs-border-10, gainsboro));
  background: var(--ctr-checkbox-background-color-disabled, var(--sjs-layer-1-background-500, white));
  outline: none;
}

.sps-checkbox__caption {
  /* sjs2/typography/default */
  font-family: var(--sjs2-font-family-semantic-default, "Open Sans");
  font-size: var(--sjs2-font-size-semantic-default, 16px);
  font-style: normal;
  font-weight: 400;
  line-height: var(--sjs2-line-height-semantic-default, 24px); /* 150% */
  color: var(--sjs2-color-fg-basic-primary, #1C1B20);
}
.sps-checkbox__caption .sv-title-actions {
  gap: var(--sjs2-spacing-x050, 4px);
}

.sps-checkbox__rectangle {
  border-radius: var(--sjs2-radius-control-checkbox, 4px);
  border: var(--sjs2-border-width-default, 1px) solid var(--sjs2-color-control-check-false-default-border, #D4D4D4);
  background: var(--sjs2-color-control-check-false-default-bg, rgba(28, 27, 32, 0.05));
  /* sjs2/shadow/inner */
  box-sizing: border-box;
  width: var(--sjs2-size-x300, 24px);
  height: var(--sjs2-size-x300, 24px);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  padding: 1px 1px;
  outline: 2px solid transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background var(--sjs-creator-transition-duration, 150ms), background-color var(--sjs-creator-transition-duration, 150ms), outline var(--sjs-creator-transition-duration, 150ms);
}

.sps-checkbox:hover .sps-checkbox__rectangle {
  background: var(--sjs2-color-control-check-false-hovered-bg, rgba(28, 27, 32, 0.1));
}

.sps-checkbox.sps-checkbox--checked:hover .sps-checkbox__rectangle {
  background: var(--sjs2-color-control-check-true-hovered-bg, #15987E);
}

.sps-checkbox:active .sps-checkbox__rectangle,
.sps-checkbox__control:focus:not(:disabled) + .sps-checkbox__rectangle {
  outline: 2px solid var(--ctr-checkbox-border-color-focused, var(--sjs-primary-background-500, #19b394));
  outline-offset: -2px;
}

.sps-checkbox .sps-checkbox__svg {
  display: block;
  opacity: 0;
  fill: transparent;
  width: var(--ctr-checkbox-button-check-mark-width, 16px);
  height: var(--ctr-checkbox-button-check-mark-height, 16px);
  background-repeat: no-repeat;
  background-size: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
  transition: opacity var(--sjs-creator-transition-duration, 150ms), fill var(--sjs-creator-transition-duration, 150ms);
}

.sps-checkbox.sd-checkbox--label-rendered {
  gap: 0;
}

.sps-checkbox--checked .sps-checkbox__rectangle {
  background: var(--sjs2-color-control-check-true-default-bg, #19B394);
  border: var(--sjs2-border-width-default, 1px) solid var(--sjs2-color-control-check-true-default-border, #19B394);
}
.sps-checkbox--checked .sps-checkbox__svg {
  opacity: 1;
  fill: var(--sjs2-color-control-check-true-default-icon, #ffffff);
}

.sps-checkbox--disabled.sps-checkbox--checked .sps-checkbox__svg {
  fill: var(--ctr-checkbox-button-check-mark-color-disabled, var(--sjs-border-25, #d4d4d4));
}

.sps-checkbox__control {
  position: fixed;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px 1px 1px 1px);
  clip: rect(1px, 1px, 1px, 1px);
}

.sps-checkbox__hidden {
  display: none;
}

.sps-selectbase {
  border: none;
  padding: 0;
  margin: 0;
  align-self: stretch;
  display: flex;
}

.sps-selectbase__column {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: var(--sjs2-spacing-x200, 16px);
  padding-top: var(--sjs2-spacing-x200, 16px);
}

.sps-selectbase__label {
  display: flex;
  align-items: flex-start;
  gap: var(--ctr-checkbox-gap, var(--sjs-spacing-x1));
  cursor: pointer;
}

.sps-checkbox .sps-question__description {
  padding: 0;
  padding-top: var(--ctr-checkbox-description-text-margin-top, var(--sjs-spacing-x1));
  padding-inline-start: var(--ctr-checkbox-description-text-margin-left, var(--sjs-font-size-x4));
  color: var(--ctr-checkbox-description-text-color, var(--sjs-layer-1-foreground-50, rgba(0, 0, 0, 0.5019607843)));
}
.sps-checkbox .sps-help-action use {
  pointer-events: none;
}

.sps-drag-element__svg {
  box-sizing: content-box;
  width: var(--sjs2-size-icon-medium, 24px);
  height: var(--sjs2-size-icon-medium, 24px);
  display: flex;
  padding: var(--sjs2-spacing-x100, 8px);
  padding-right: 0;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.sps-drag-element__svg use {
  fill: var(--sjs2-color-fg-basic-tertiary, rgba(from #1c1b20 r g b/0.4));
}

.sps-matrixdynamic__drag-drop-ghost-position-top,
.sps-matrixdynamic__drag-drop-ghost-position-bottom {
  position: relative;
}

.sps-matrixdynamic__drag-drop-ghost-position-top::after,
.sps-matrixdynamic__drag-drop-ghost-position-bottom::after {
  content: "";
  width: 100%;
  height: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
  background-color: var(--sjs-secondary-background-500, #19b394);
  position: absolute;
  left: 0;
}

.sps-matrixdynamic__drag-drop-ghost-position-top::after {
  top: 0;
}

.sps-matrixdynamic__drag-drop-ghost-position-bottom::after {
  bottom: 0;
}

.sps-question--matrixdynamic {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.sps-question--matrixdynamic .sps-question__title {
  padding: 0;
  line-height: var(--sjs2-typography-line-height-default, 24px); /* 150% */
  color: var(--sjs2-color-fg-basic-primary, #1c1b20);
  /* sjs2/typography/default-strong */
  font-family: var(--sjs2-font-family-semantic-default, "Open Sans");
  font-size: var(--sjs2-font-size-semantic-default, 16px);
  font-style: normal;
  font-weight: 600;
  line-height: var(--sjs2-line-height-semantic-default, 24px); /* 150% */
}

.sps-matrixdynamic__content {
  padding: var(--sjs2-spacing-x150, 12px);
}
.sps-matrixdynamic__content, .sps-matrixdynamic__content > div {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.sps-matrixdynamic__content .sps-question__description--under {
  flex-grow: 0;
}

.sps-table__row--detail .sps-matrixdynamic__content {
  padding: 0;
}

.sps-matrixdynamic__placeholder {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: var(--ctr-property-grid-background-color, var(--sjs-layer-1-background-500, white));
  border: 1px solid var(--ctr-survey-placeholder-border-color, var(--sjs-border-25, #d4d4d4));
  border-radius: var(--ctr-data-table-placeholder-corner-radius, var(--sjs-corner-radius-x075));
  box-sizing: border-box;
  padding: var(--ctr-data-table-placeholder-padding-top, var(--sjs-spacing-x6)) var(--ctr-data-table-placeholder-padding-right, var(--sjs-spacing-x8)) var(--ctr-data-table-placeholder-padding-bottom, var(--sjs-spacing-x6)) var(--ctr-data-table-placeholder-padding-left, var(--sjs-spacing-x8));
  gap: var(--ctr-survey-placeholder-gap, var(--lbr-spacing-x05));
}
.sps-matrixdynamic__placeholder .sps-matrixdynamic__add-btn {
  display: initial;
  margin: 0;
}

.sps-matrixdynamic__placeholder-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));
  color: var(--ctr-survey-placeholder-text-color, var(--sjs-layer-1-foreground-50, rgba(0, 0, 0, 0.5019607843)));
  text-align: center;
}

.sps-matrixdynamic__row-icon {
  width: var(--sjs2-size-icon-medium, 24px);
  height: var(--sjs2-size-icon-medium, 24px);
  padding: 0;
  margin: var(--ctr-actionbar-button-padding-top-large-icon, var(--sjs-spacing-x1)) 0 var(--ctr-actionbar-button-padding-bottom-large-icon, var(--sjs-spacing-x1)) 0;
  margin-left: var(--sjs2-spacing-x150, 12px);
}
.sps-matrixdynamic__row-icon:disabled {
  opacity: 1;
}
.sps-matrixdynamic__row-icon:disabled use {
  fill: var(--sjs2-color-fg-brand-primary, #19b394);
}

.sps-matrixdynamic__footer {
  margin: 0 calc(-1 * var(--sjs2-spacing-x150, 12px)) var(--sjs2-spacing-x150, 12px);
  padding: 0 var(--sjs2-spacing-x150, 12px) var(--sjs2-spacing-x150, 12px);
  border-bottom: var(--sjs2-border-width-x100, 1px) solid var(--sjs2-color-border-basic-secondary, #d4d4d4);
  display: flex;
}

.sps-table-wrapper ~ .sps-matrixdynamic__footer, sv-ng-matrix-table ~ .sps-matrixdynamic__footer {
  border-bottom: none;
  margin-bottom: 0;
  padding-top: var(--sjs2-spacing-x075, 6px);
  padding-bottom: var(--sjs2-spacing-x050, 4px);
  display: flex;
  justify-content: stretch;
}

.sps-matrixdynamic__add-btn {
  /* sjs2/typography/default */
  font-family: var(--sjs2-font-family-semantic-default, "Open Sans");
  font-size: var(--sjs2-font-size-semantic-default, 16px);
  font-style: normal;
  font-weight: 400;
  line-height: var(--sjs2-line-height-semantic-default, 24px); /* 150% */
  appearance: none;
  border: none;
  background: var(--sjs2-color-bg-neutral-secondary, rgba(95, 94, 97, 0.1));
  color: var(--sjs2-color-fg-basic-primary, #1c1b20);
  text-align: center;
  flex-grow: 1;
}
.sps-matrixdynamic__add-btn:hover {
  background: var(--sjs2-color-bg-neutral-secondary-dim, rgba(95, 94, 97, 0.1));
}

.sps-matrixdynamic__add-btn--icon {
  flex-direction: row-reverse;
  background: transparent;
  padding: var(--sjs2-spacing-x100, 8px);
  justify-content: flex-end;
}
.sps-matrixdynamic__add-btn--icon .sv-string-viewer {
  padding: 0 0 0 var(--sjs2-spacing-x100, 8px);
}

.sps-matrixdynamic__add-btn-icon {
  display: flex;
}
.sps-matrixdynamic__add-btn-icon svg {
  width: 24px;
  height: 24px;
  fill: var(--sjs2-color-fg-basic-primary-muted, #424146);
}

.sps-smiley-icon {
  width: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
  height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
  margin: var(--sjs-base-unit, var(--base-unit, 8px));
  border-radius: 100px;
  border: 1px solid var(--ctr-actionbar-button-icon-color, var(--sjs-layer-1-foreground-75, rgba(0, 0, 0, 0.7490196078)));
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
}
.sps-smiley-icon svg {
  width: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
  height: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
  fill: var(--ctr-actionbar-button-icon-color, var(--sjs-layer-1-foreground-75, rgba(0, 0, 0, 0.7490196078)));
}

.sps-question--matrixdynamic.sps-question--nested .sps-question__header {
  padding: var(--sjs2-spacing-x200, 16px) var(--sjs2-spacing-x250, 20px) var(--sjs2-spacing-x100, 8px) var(--sjs2-spacing-x250, 20px);
  border-bottom: var(--sjs2-border-width-x100, 1px) solid var(--sjs2-color-border-basic-secondary, #d4d4d4);
  box-sizing: border-box;
}

.sps-matrixdynamic__dragged-row {
  cursor: grabbing;
  position: absolute;
  z-index: 10000;
}
.sps-matrixdynamic__dragged-row .sps-table__row {
  display: flex;
  align-items: center;
  flex: 1 0 0;
  border-radius: var(--ctr-data-table-row-corner-radius-floating, var(--sjs-corner-radius-x05));
  background: var(--ctr-data-table-row-background-color, var(--sjs-layer-1-background-500, white));
  box-shadow: var(--ctr-data-table-row-shadow-floating-1-offset-x, 0px) var(--ctr-data-table-row-shadow-floating-1-offset-y, 2px) var(--ctr-data-table-row-shadow-floating-1-blur, 8px) var(--ctr-data-table-row-shadow-floating-1-spread, 0px) var(--ctr-data-table-row-shadow-floating-1-color, var(--sjs-special-glow, rgba(0, 76, 68, 0.1019607843))), var(--ctr-data-table-row-shadow-floating-2-offset-x, 0px) var(--ctr-data-table-row-shadow-floating-2-offset-y, 16px) var(--ctr-data-table-row-shadow-floating-2-blur, 32px) var(--ctr-data-table-row-shadow-floating-2-spread, 0px) var(--ctr-data-table-row-shadow-floating-2-color, var(--sjs-special-glow, rgba(0, 76, 68, 0.1019607843)));
}

.sps-table-wrapper {
  overflow: hidden;
}

.sps-table {
  width: 100%;
  background-color: var(--sjs2-color-bg-basic-primary, #fff);
  border-collapse: collapse;
}
.sps-table > tbody > tr {
  background-color: var(--sjs2-color-bg-basic-primary, #fff);
}
.sps-table > tbody > tr > td:last-of-type > .sps-action-bar .sps-action-button {
  opacity: 0;
}
.sps-table > tbody > tr:hover > td > div {
  background: var(--sjs2-color-bg-basic-primary-dim, rgba(28, 27, 32, 0.05));
}
.sps-table > tbody > tr:hover > td:last-of-type > .sps-action-bar .sps-action-button {
  opacity: 1;
}
.sps-table tbody > tr:last-of-type {
  border-bottom: none;
}
.sps-table tbody > tr:last-of-type td {
  border-bottom: none;
  padding-bottom: 0;
}
.sps-table tbody > tr:first-of-type {
  border-top: none;
}
.sps-table tbody > tr:first-of-type td {
  border-top: none;
  padding-top: 0;
}

.sd-table__row--expanded > td > div .sps-input {
  /* sjs2/typography/default-strong */
  font-family: var(--sjs2-font-family-semantic-default, "Open Sans");
  font-size: var(--sjs2-font-size-semantic-default, 16px);
  font-style: normal;
  font-weight: 600;
  line-height: var(--sjs2-line-height-semantic-default, 24px); /* 150% */
}

.sps-table__cell {
  padding: 0;
  padding-bottom: var(--sjs2-spacing-x075, 6px);
  padding-top: 0;
  border-top: none;
}
.sps-table__cell:first-of-type > div {
  border-top-left-radius: var(--sjs2-radius-semantic-form, 8px);
  border-bottom-left-radius: var(--sjs2-radius-semantic-form, 8px);
}
.sps-table__cell:last-of-type > div {
  border-top-right-radius: var(--sjs2-radius-semantic-form, 8px);
  border-bottom-right-radius: var(--sjs2-radius-semantic-form, 8px);
}
.sps-table__cell .sps-action-bar {
  justify-content: flex-end;
}

.sps-table__row--main > .sps-table__cell {
  padding-bottom: calc(var(--sjs2-spacing-x075, 6px) + var(--sjs2-spacing-x050, 4px));
  padding-top: calc(var(--sjs2-spacing-x075, 6px) + var(--sjs2-spacing-x050, 4px));
  border-top: var(--sjs2-border-width-x100, 1px) solid var(--sjs2-color-border-basic-secondary, #d4d4d4);
}
.sps-table__row--main > .sps-table__cell.sps-table__cell--detail-panel {
  border-top: none;
  padding: 0 0 var(--sjs2-spacing-x075, 6px) 0;
}

.sps-table__cell--detail-panel .sps-panel__content {
  box-shadow: none;
  padding: 0;
}
.sps-table__cell--detail-panel .sps-row .sps-question--nested {
  overflow: initial;
}
.sps-table__cell--detail-panel .sps-panel {
  border: none;
  margin-top: calc(-1 * var(--sjs2-spacing-x075, 6px));
}
.sps-table__cell--detail-panel .sps-table__cell--detail-panel .sps-panel {
  margin-top: 0;
  margin-left: 32px;
}
.sps-table__cell--detail-panel .sps-table__row--empty {
  height: 40px;
}

.sps-table__cell:where(:not(.sps-table__cell--detail-panel)) .sps-checkbox {
  margin: 0 calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
}

.sps-table__cell:not(.sps-table__cell--detail-panel):not(.sps-table__cell--actions):first-of-type {
  padding-left: 8px;
}

.sps-table__cell:not(.sps-table__cell--detail-panel) .sps-input {
  appearance: none;
  box-shadow: none;
  background-color: transparent;
  height: auto;
  padding: var(--sjs2-spacing-x100, 8px) 0;
  width: calc(100% + var(--action-container-width));
  margin-right: calc(-1 * var(--action-container-width));
  text-overflow: ellipsis;
  border-radius: var(--sjs2-radius-semantic-form, 8px);
  padding: var(--sjs2-spacing-x100, 8px);
  margin-left: 0;
  transition: margin-left var(--sjs-creator-transition-duration, 150ms);
}
.sps-table__cell:not(.sps-table__cell--detail-panel) .sps-input:hover {
  background: var(--sjs2-color-control-formbox-focused-bg, #f5f5f5);
  box-shadow: var(--sjs2-border-offset-x-form-focused, 0) var(--sjs2-border-offset-y-form-focused, 0) var(--sjs2-border-blur-form-focused, 0) var(--sjs2-border-spread-form-focused, 2px) var(--sjs2-color-control-formbox-hovered-border, #d4d4d4) inset;
}
.sps-table__cell:not(.sps-table__cell--detail-panel) .sps-input:focus, .sps-table__cell:not(.sps-table__cell--detail-panel) .sps-input:focus-within {
  background: var(--sjs2-color-control-formbox-focused-bg, #f5f5f5);
  box-shadow: var(--sjs2-border-offset-x-form-focused, 0) var(--sjs2-border-offset-y-form-focused, 0) var(--sjs2-border-blur-form-focused, 0) var(--sjs2-border-spread-form-focused, 2px) var(--sjs2-color-control-formbox-focused-border, #19b394) inset;
  margin-left: var(--sjs2-spacing-x100, 8px);
}

.sps-matrixdynamic__dragged-row .sps-table__cell {
  padding: 0;
}
.sps-matrixdynamic__dragged-row .sps-input {
  pointer-events: none;
}
.sps-matrixdynamic__dragged-row .sps-drag-element__svg {
  display: none;
}

.sps-table__row {
  --action-width: calc(
    2 * var(--ctr-actionbar-button-padding-top-large-icon, 8px) +
      var(--ctr-actionbar-button-icon-width, var(--sjs-font-size-x3))
  );
  --action-container-width: calc(3 * var(--action-width));
}

.sps-table__row:has(> .sps-table__cell:last-of-type .sv-action:nth-child(4)) {
  --action-container-width: calc(4 * var(--action-width));
}

.sps-table__row:hover .sps-table__cell:not(.sps-table__cell--detail-panel) .sps-input, .sps-table__row:focus-within .sps-table__cell:not(.sps-table__cell--detail-panel) .sps-input {
  width: calc(100% - var(--sjs2-spacing-x100, 8px));
  margin-right: 0;
}

.sps-table__cell:not(.sps-table__cell--detail-panel):first-of-type .sps-text {
  padding-left: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
}

.sps-table__cell--actions {
  width: 0;
}

.sps-table__row--leave,
.sps-table__row--enter {
  animation-name: empty;
  --move-whole-animation-duration: calc(var(--move-animation-duration) + var(--move-animation-delay));
  --fade-whole-animation-duration: calc(var(--fade-animation-duration) + var(--fade-animation-delay));
  animation-duration: max(var(--fade-whole-animation-duration), var(--move-whole-animation-duration));
}
.sps-table__row--leave > td > div,
.sps-table__row--enter > td > div {
  animation-name: fadeIn, moveInWithOverflow;
  opacity: 0;
  animation-direction: var(--animation-direction);
  animation-timing-function: var(--animation-timing-function);
  animation-fill-mode: forwards;
  animation-duration: var(--fade-animation-duration), var(--move-animation-duration), var(--move-animation-duration);
  animation-delay: var(--fade-animation-delay), var(--move-animation-delay), var(--move-animation-delay);
}

.sps-table__row--enter {
  --move-animation-delay: 0s;
  --move-animation-duration: var(--sjs-sps-matrix-row-move-in-duration, 150ms);
  --fade-animation-duration: var(--sjs-sps-matrix-row-fade-in-duration, 250ms);
  --fade-animation-delay: var(--sjs-sps-matrix-row-fade-in-delay, 150ms);
  --animation-direction: normal;
  --animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
}

.sps-table__row--leave {
  --move-animation-delay: var(--sjs-sps-matrix-row-move-out-delay, 100ms);
  --move-animation-duration: var(--sjs-sps-matrix-row-move-out-duration, 250ms);
  --fade-animation-duration: var(--sjs-sps-matrix-row-fade-out-duration, 100ms);
  --fade-animation-delay: 0s;
  --animation-direction: reverse;
  --animation-timing-function: cubic-bezier(0.42, 0, 1, 1);
}

.sps-table__row--detail.sps-table__row--enter {
  --move-animation-delay: 0s;
  --move-animation-duration: var(--sjs-sps-matrix-detail-row-move-in-duration, 150ms);
  --fade-animation-duration: var(--sjs-sps-matrix-detail-row-fade-in-duration, 500ms);
  --fade-animation-delay: var(--sjs-sps-matrix-detail-row-fade-in-delay, 150ms);
  --animation-direction: normal;
  --animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
}
.sps-table__row--detail.sps-table__row--leave {
  --move-animation-delay: var(--sjs-sps-matrix-detail-row-move-out-delay, 100ms);
  --move-animation-duration: var(--sjs-sps-matrix-detail-row-move-out-duration, 250ms);
  --fade-animation-duration: var(--sjs-sps-matrix-detail-row-fade-out-duration, 150ms);
  --fade-animation-delay: 0s;
  --animation-direction: reverse;
  --animation-timing-function: cubic-bezier(0.42, 0, 1, 1);
}

.svc-creator--disable-animations .sps-table__row--enter,
.svc-creator--disable-animations .sps-table__row--leave {
  animation: none;
}

.sps-table__row--empty {
  /* sjs2/typography/default */
  font-family: var(--sjs2-font-family-semantic-default, "Open Sans");
  font-size: var(--sjs2-font-size-semantic-default, 16px);
  font-style: normal;
  font-weight: 400;
  line-height: var(--sjs2-line-height-semantic-default, 24px); /* 150% */
  color: var(--sjs2-color-fg-basic-primary, #1c1b20);
  text-align: center;
  height: calc(var(--sjs2-spacing-x400, 32px) + var(--sjs2-spacing-x300, 24px) + var(--sjs2-typography-line-height-default, 24px));
}

.sps-launch,
.sps-launch * {
  box-sizing: border-box;
}

.sps-launch {
  padding: var(--sjs2-spacing-x200, 16px) var(--sjs2-spacing-x400, 32px) 0px var(--sjs2-spacing-x400, 32px);
  display: flex;
  flex-direction: column;
  gap: var(--sjs2-spacing-x200, 16px);
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}

.sps-launch__card {
  background: var(--sjs2-color-bg-basic-primary, #ffffff);
  border-radius: var(--radius-semantic-form, 8px);
  border-style: solid;
  border-color: var(--sjs2-color-border-basic-secondary, #d4d4d4);
  border-width: 1px;
  display: flex;
  flex-direction: row;
  gap: 0px;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
  cursor: pointer;
  appearance: none;
  padding: var(--sjs2-spacing-x200, 16px);
}
.sps-launch__card:hover {
  background: var(--sjs2-color-bg-basic-primary-dim, rgba(28, 27, 32, 0.05));
}
.sps-launch__card:active {
  background: var(--sjs2-color-bg-basic-primary, #ffffff);
}
.sps-launch__card::after {
  content: "";
  display: block;
  width: var(--sjs2-spacing-x600, 48px);
  align-self: stretch;
}

.sps-launch__container {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
  justify-content: flex-start;
  flex: 1;
  position: relative;
}

.sps-launch__text {
  color: var(--sjs2-color-fg-basic-primary, #1C1B20);
  text-align: left;
  font-family: var(--sjs2-typography-default-strong-font-family, "OpenSans-SemiBold", sans-serif);
  font-size: var(--sjs2-typography-default-strong-font-size, 16px);
  line-height: var(--sjs2-typography-default-strong-line-height, 24px);
  font-weight: var(--sjs2-typography-default-strong-font-weight, 600);
  position: relative;
  align-self: stretch;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}