survey-creator-core 1.12.16-patch.1 → 1.12.17

package/survey-creator-core.css

@@ -1,5 +1,5 @@
 /*!
- * SurveyJS Creator v1.12.16-patch.1
+ * SurveyJS Creator v1.12.17
  * (c) 2015-2024 Devsoft Baltic OÜ - http://surveyjs.io/
  * Github: https://github.com/surveyjs/survey-creator
  * License: https://surveyjs.io/Licenses#SurveyCreator
@@ -228,7 +228,7 @@
 }
 
 /*# sourceMappingURL=fonts.fontless.css.map*//*!
- * SurveyJS Creator v1.12.16-patch.1
+ * SurveyJS Creator v1.12.17
  * (c) 2015-2024 Devsoft Baltic OÜ - http://surveyjs.io/
  * Github: https://github.com/surveyjs/survey-creator
  * License: https://surveyjs.io/Licenses#SurveyCreator
@@ -437,6 +437,7 @@
   display: flex;
   width: var(--ctr-list-item-icon-width, calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
   height: var(--ctr-list-item-icon-height, calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
+  flex-shrink: 0;
   justify-content: center;
   align-items: center;
 }
@@ -505,6 +506,7 @@
   font-style: normal;
   font-weight: 400;
   line-height: var(--ctr-font-default-line-height, var(--thm-default-line-height, 24px));
+  background-color: transparent;
   color: var(--ctr-list-search-text-color, var(--sjs-general-dim-forecolor, rgba(0, 0, 0, 0.91)));
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -604,7 +606,7 @@ svc-tab-json-editor-textarea {
 }
 
 .svc-json-editor-tab__content-area {
-  font-family: var(--ctr-font-family-code, "DM Mono");
+  font-family: var(--ctr-font-family-code, monospace);
   font-size: var(--ctr-font-code-size, 16px);
   font-style: normal;
   font-weight: 400;
@@ -749,7 +751,6 @@ svc-tab-json-editor-textarea {
   top: 50%;
   left: 50%;
   transform: scale(1.26) translate(-50%, -50%);
-  overflow: overlay;
   border: 2px solid var(--sjs-border-inside, var(--border-inside, rgba(0, 0, 0, 0.16)));
 }
 
@@ -757,10 +758,10 @@ svc-tab-json-editor-textarea {
   margin: 0 auto;
   position: relative;
   overflow: hidden;
-  border-radius: 32px;
-  border: 4px solid var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
-  background: var(--sjs-general-backcolor, var(--background, #fff));
-  box-shadow: 0px 16px 32px 0px rgba(0, 0, 0, 0.1), 0px 4px 16px 0px rgba(0, 0, 0, 0.05);
+  border-radius: var(--ctr-preview-device-corner-radius, 32px);
+  border: var(--ctr-preview-device-border-width, 4px) solid var(--ctr-preview-device-border-color, var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3)));
+  background: var(--ctr-preview-device-background-color, var(--sjs-general-backcolor, var(--background, #fff)));
+  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.1), 0px 8px 16px 0px var(--ctr-preview-device-shadow-2-color, rgba(0, 0, 0, 0.05));
 }
 
 .svd-simulator-main {
@@ -796,12 +797,6 @@ svc-tab-json-editor-textarea {
   position: relative;
 }
 
-@media screen and (-webkit-min-device-pixel-ratio: 0) {
-  ::i-block-chrome,
-  .svd-simulator-content {
-    overflow-y: scroll;
-  }
-}
 .svd-simulator .sv-popup--overlay {
   --sv-popup-overlay-height: 100%;
 }
@@ -826,9 +821,6 @@ svc-tab-test {
   gap: 0px;
 }
 
-.svc-test-tab__content .svc-plugin-tab__content {
-  overflow-y: overlay;
-}
 .svc-test-tab__content .svc-plugin-tab__content .sv-root-modern .sv-completedpage,
 .svc-test-tab__content .svc-plugin-tab__content .sv_default_css .sv_completed_page {
   margin: 0;
@@ -1280,6 +1272,10 @@ svc-tab-test {
   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;
 }
@@ -1619,6 +1615,10 @@ svc-tab-test {
 
 .st-root-modern {
   width: 100%;
+  height: fit-content;
+  max-height: 100%;
+  overflow-y: auto;
+  background-color: var(--ctr-string-table-background-color, var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3)));
 }
 
 .st-title.st-panel__title,
@@ -2150,6 +2150,10 @@ td.st-table__cell:first-of-type span {
 .svc-logic-tab__leave-apply-button {
   background-color: var(--ctr-button-background-color-danger, var(--sjs-special-red, var(--red, #e60a3e)));
 }
+
+.svc-logic-question-value.sd-element--with-frame {
+  box-shadow: var(--lbr-question-panel-shadow-offset-x, 0px) var(--lbr-question-panel-shadow-offset-y, 1px) var(--lbr-question-panel-shadow-blur, 2px) var(--lbr-question-panel-shadow-spread, 0px) var(--lbr-question-panel-shadow-color, rgba(0, 0, 0, 0.15));
+}
 /*!************************************************************************************************************************************************************************************!*\
   !*** 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/designer.scss ***!
   \************************************************************************************************************************************************************************************/
@@ -2169,7 +2173,7 @@ svc-tab-designer {
   width: 0;
 }
 
-.svc-tab-designer--with-place-holder .svc-designer-header {
+.svc-tab-designer--with-placeholder .svc-designer-header {
   min-width: calc(84 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
@@ -2225,14 +2229,14 @@ svc-tab-designer {
   padding-inline-end: var(--ctr-survey-page-margin-left, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
 }
 
-.svc-tab-designer--with-place-holder .svc-tab-designer_content {
+.svc-tab-designer--with-placeholder .svc-tab-designer_content {
   display: flex;
   justify-content: center;
   flex-direction: column;
   min-height: 100%;
 }
 
-.svc-tab-designer--with-page-navigator .svc-tab-designer_content {
+.svc-tab-designer--with-surface-tools .svc-tab-designer_content {
   padding-inline-start: var(--ctr-survey-page-margin-right-with-toolbar, calc(9 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
   padding-inline-end: var(--ctr-survey-page-margin-left-with-toolbar, calc(9 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
 }
@@ -2342,9 +2346,6 @@ svc-tab-designer {
 /*!************************************************************************************************************************************************************************!*\
   !*** 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/responsivity.scss ***!
   \************************************************************************************************************************************************************************/
-.svc-creator--mobile .svc-tab-designer {
-  overflow-y: overlay;
-}
 .svc-creator--mobile .sd-root-modern,
 .svc-creator--mobile .sd-container-modern {
   --sd-base-padding: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
@@ -2709,11 +2710,11 @@ svc-tab-designer {
   align-items: center;
   justify-content: center;
 }
-.svc-creator-popup.sv-popup--modal .sv-popup__button--cancel {
+.svc-creator-popup.sv-popup--modal .sv-popup__button {
   background: var(--ctr-button-background-color, var(--sjs-general-backcolor, var(--background, #fff)));
   color: var(--ctr-button-text-color, var(--sjs-primary-backcolor, var(--primary, #19b394)));
 }
-.svc-creator-popup.sv-popup--modal .sv-popup__button--cancel:hover {
+.svc-creator-popup.sv-popup--modal .sv-popup__button:hover {
   background: var(--ctr-button-background-color-hovered, var(--sjs-questionpanel-hovercolor, var(--sjs-general-backcolor-dark, rgb(248, 248, 248))));
 }
 .svc-creator-popup.sv-popup--modal .sv-popup__button--apply {
@@ -2723,6 +2724,13 @@ svc-tab-designer {
 .svc-creator-popup.sv-popup--modal .sv-popup__button--apply:hover {
   background: var(--ctr-button-background-color-cta-hovered, var(--sjs-primary-backcolor-dark, rgb(20, 164, 139)));
 }
+.svc-creator-popup.sv-popup--modal .sd-btn--danger {
+  background: var(--ctr-button-background-color-danger, var(--sjs-special-red, var(--red, #e60a3e)));
+  color: var(--ctr-button-text-color-danger, var(--sjs-special-red-forecolor, #ffffff));
+}
+.svc-creator-popup.sv-popup--modal .sd-btn--danger:hover {
+  background: var(--ctr-button-background-color-danger-hovered, var(--sjs-special-red, var(--red, #e60a3e)));
+}
 
 .svc-surface-placeholder {
   display: flex;
@@ -3662,7 +3670,6 @@ svc-page-navigator-item,
 }
 
 .svc-page-navigator-item__banner {
-  display: flex;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -3678,6 +3685,8 @@ svc-page-navigator-item,
   position: absolute;
   top: 0;
   right: 0;
+  z-index: 1;
+  display: none;
 }
 .svc-page-navigator-item__banner .svc-page-navigator-item__dot-content {
   width: var(--ctr-page-navigator-item-dot-radius-large, var(--sjs-base-unit, var(--base-unit, 8px)));
@@ -3712,6 +3721,7 @@ svc-page-navigator-item,
 
 .svc-page-navigator-item-content:not(.svc-page-navigator-item--selected):hover .svc-page-navigator-item__banner,
 .svc-page-navigator-item-content:not(.svc-page-navigator-item--selected):focus .svc-page-navigator-item__banner {
+  display: flex;
   opacity: 1;
 }
 
@@ -3831,7 +3841,7 @@ svc-page {
 .svc-page-toolbar__item use {
   fill: var(--ctr-survey-question-panel-toolbar-item-icon-color, var(--sjs-secondary-backcolor, var(--secondary, #ff9814)));
 }
-.svc-page-toolbar__item:hover, .svc-page-toolbar__item:focus {
+.svc-page-toolbar__item:hover, .svc-page-toolbar__item:focus-visible {
   background-color: var(--ctr-survey-page-toolbar-item-background-color-hovered, var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3)));
 }
 .svc-page-toolbar__item:active, .svc-page-toolbar__item.svc-page-toolbar__item--pressed {
@@ -4454,7 +4464,7 @@ svc-question {
 .svc-survey-element-toolbar__item use {
   fill: var(--ctr-survey-question-panel-toolbar-item-icon-color, var(--sjs-secondary-backcolor, var(--secondary, #ff9814)));
 }
-.svc-survey-element-toolbar__item:hover, .svc-survey-element-toolbar__item:focus {
+.svc-survey-element-toolbar__item:hover, .svc-survey-element-toolbar__item:focus-visible {
   background-color: var(--ctr-survey-question-panel-toolbar-item-background-color-hovered, var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3)));
 }
 .svc-survey-element-toolbar__item:active, .svc-survey-element-toolbar__item.svc-survey-element-toolbar__item--pressed {
@@ -4878,11 +4888,10 @@ svc-question {
 }
 
 .svc-dragged-element-shortcut {
-  height: auto;
   border-radius: var(--ctr-toolbox-item-corner-radius, calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
   background-color: var(--ctr-toolbox-item-background-color-floating, var(--sjs-general-backcolor, var(--background, #fff)));
   color: var(--ctr-toolbox-item-text-color-hovered, var(--sjs-general-forecolor, var(--foreground, #161616)));
-  padding: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding: var(--ctr-toolbox-item-padding-top-submenu, calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))))) var(--ctr-toolbox-item-padding-right, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))))) var(--ctr-toolbox-item-padding-bottom-submenu, calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))))) var(--ctr-toolbox-item-padding-left-submenu, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
   cursor: grabbing;
   position: absolute;
   z-index: 1000;
@@ -4915,22 +4924,25 @@ svc-question {
   font-weight: 400;
   line-height: var(--ctr-font-small-line-height, var(--ctr-small-bold-line-height, 16px));
   font-weight: 600;
-  line-height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .svc-dragged-element-shortcut--has-icon {
-  padding: var(--sjs-base-unit, var(--base-unit, 8px)) calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  padding-right: calc(3.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding: var(--ctr-toolbox-item-padding-top, var(--sjs-base-unit, var(--base-unit, 8px))) var(--ctr-toolbox-item-padding-right, calc(3.5 * (var(--sjs-base-unit, var(--base-unit, 8px))))) var(--ctr-toolbox-item-padding-bottom, var(--sjs-base-unit, var(--base-unit, 8px))) var(--ctr-toolbox-item-padding-left, calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
+  display: flex;
+  gap: var(--ctr-toolbox-item-gap, var(--sjs-base-unit, var(--base-unit, 8px)));
+  justify-content: center;
+  align-items: center;
 }
 .svc-dragged-element-shortcut--has-icon .svc-dragged-element-shortcut__text {
-  line-height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  margin-inline-start: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  display: block;
 }
 
 .svc-dragged-element-shortcut__icon {
-  position: absolute;
-  width: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  display: flex;
+}
+.svc-dragged-element-shortcut__icon svg {
+  width: var(--ctr-toolbox-item-icon-width, calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
+  height: var(--ctr-toolbox-item-icon-height, calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
 }
 
 .svc-question__content--drag-over-inside .svc-panel__placeholder_frame,
@@ -5536,7 +5548,7 @@ svc-question .sv-action-bar,
   opacity: var(--ctr-survey-question-panel-toolbar-item-opacity-muted, 0.5);
   background-color: transparent;
 }
-.svc-survey-element-top-toolbar__item:hover, .svc-survey-element-top-toolbar__item:focus {
+.svc-survey-element-top-toolbar__item:hover, .svc-survey-element-top-toolbar__item:focus-visible {
   opacity: initial;
   background-color: var(--ctr-survey-question-panel-toolbar-item-background-color-hovered, var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3)));
 }
@@ -5600,8 +5612,8 @@ svc-question .sv-action-bar,
   font-style: normal;
   line-height: var(--lbr-font-default-line-height, var(--thm-default-line-height, 24px));
   font-weight: 600;
-  margin-left: calc(6.75 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  margin-top: var(--sjs-base-unit, var(--base-unit, 8px));
+  margin-left: var(--ctr-survey-radio-button-group-show-more-button-margin-left, calc(6.75 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
+  margin-top: var(--ctr-survey-radio-button-group-show-more-button-margin-top, var(--sjs-base-unit, var(--base-unit, 8px)));
   padding: var(--ctr-survey-action-button-padding-top, calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))))) var(--ctr-survey-action-button-padding-right, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))))) var(--ctr-survey-action-button-padding-bottom, calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))))) var(--ctr-survey-action-button-padding-left, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
   border-radius: var(--ctr-survey-action-button-corner-radius, 1024px);
   cursor: pointer;
@@ -6258,11 +6270,16 @@ svc-question .sv-action-bar,
   !*** 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/results.scss ***!
   \******************************************************************************************************************************************************************************/
 .svd-test-results {
-  border-radius: 4px;
-  box-shadow: inset 0px 1px 0px 0px var(--sjs-border-inside, var(--border-inside, rgba(0, 0, 0, 0.16)));
+  border-radius: var(--ctr-string-table-corner-radius, calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
+  box-shadow: inset 0px 1px 0px 0px var(--ctr-string-table-shadow-color, var(--sjs-border-inside, var(--border-inside, rgba(0, 0, 0, 0.16))));
   padding: calc(12 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
-.svd-test-results .svd-test-results__header {
+
+.svd-test-results__content {
+  box-shadow: var(--ctr-string-table-shadow-offset-x, 0px) var(--ctr-string-table-shadow-offset-y, 1px) var(--ctr-string-table-shadow-blur, 2px) var(--ctr-string-table-shadow-spread, 0px) var(--ctr-string-table-shadow-color, rgba(0, 0, 0, 0.15));
+}
+
+.svd-test-results__header {
   --thm-default-font-size: var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))));
   --thm-default-line-height: calc(1.5 * var(--thm-default-font-size));
   font-family: var(--ctr-font-family, var(--sjs-font-family, var(--font-family)));
@@ -6273,19 +6290,32 @@ svc-question .sv-action-bar,
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
-  border-bottom: 2px solid var(--sjs-border-light, var(--border-light, #eaeaea));
-  background-color: var(--sjs-general-backcolor, var(--background, #fff));
+  padding: var(--ctr-string-table-title-padding-top, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))))) var(--ctr-string-table-title-padding-right, calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))))) var(--ctr-string-table-title-padding-bottom, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))))) var(--ctr-string-table-title-padding-left, calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
+  color: var(--ctr-string-table-title-caption-color, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
+  border-bottom: var(--ctr-string-table-title-border-width-bottom, 2px) solid var(--ctr-string-table-title-border-color, var(--sjs-border-light, var(--border-light, #eaeaea)));
+  background-color: var(--ctr-string-table-title-background-color, var(--sjs-general-backcolor, var(--background, #fff)));
 }
-.svd-test-results .svd-test-results__header .svd-test-results__header-text {
+.svd-test-results__header .svd-test-results__header-text {
   margin: 0;
 }
-.svd-test-results .svd-test-results__header .svd-test-results__header-types {
+.svd-test-results__header .svd-test-results__header-types {
   display: flex;
-  gap: var(--sjs-base-unit, var(--base-unit, 8px));
+  gap: var(--ctr-string-table-title-actionbar-gap, var(--sjs-base-unit, var(--base-unit, 8px)));
+}
+.svd-test-results__header .svc-action-button {
+  color: var(--ctr-actionbar-button-text-color, var(--sjs-primary-backcolor, var(--primary, #19b394)));
+  border-radius: var(--ctr-actionbar-button-corner-radius, calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
+  background-color: transparent;
+}
+.svd-test-results__header .svc-action-button:focus, .svd-test-results__header .svc-action-button:hover {
+  background-color: var(--ctr-survey-action-button-background-color-hovered-positive, var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1))));
+  outline: none;
 }
-.svd-test-results .svd-test-results__text {
+.svd-test-results__header .svc-action-button.svc-action-button--selected {
+  border: var(--ctr-actionbar-button-border-width-selected, calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px))))) solid var(--ctr-actionbar-button-border-color-selected, var(--sjs-primary-backcolor, var(--primary, #19b394)));
+}
+
+.svd-test-results__text {
   --thm-default-font-size: var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))));
   --thm-default-line-height: calc(1.5 * var(--thm-default-font-size));
   font-family: var(--ctr-font-family, var(--sjs-font-family, var(--font-family)));
@@ -6294,37 +6324,37 @@ svc-question .sv-action-bar,
   font-weight: 400;
   line-height: var(--ctr-font-default-line-height, var(--thm-default-line-height, 24px));
   display: flex;
-  padding: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding: var(--ctr-code-viewer-text-margin-top-results-table, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))))) var(--ctr-code-viewer-text-margin-right-results-table, calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))))) var(--ctr-code-viewer-text-margin-bottom-results-table, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))))) var(--ctr-code-viewer-text-margin-left-results-table, calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
   width: calc(100% - 6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   overflow: auto;
   user-select: text;
   white-space: pre-wrap;
-  background-color: var(--sjs-general-backcolor, var(--background, #fff));
+  background: var(--ctr-code-viewer-background-color, var(--sjs-general-backcolor, var(--background, #fff)));
+  color: var(--ctr-code-viewer-text-color, rgb(0, 0, 0));
 }
-.svd-test-results .svd-test-results__table {
-  background-color: var(--sjs-general-backcolor, var(--background, #fff));
+
+.svd-test-results__table {
   width: 100%;
-  box-shadow: 0px 1px 2px 0px var(--ctr-shadow-small-color, rgba(0, 0, 0, 0.15));
 }
-.svd-test-results .svd-test-results__table table {
+.svd-test-results__table table {
   width: 100%;
   border-collapse: collapse;
 }
-.svd-test-results .svd-test-results__table table .svd-test-results__marker {
+.svd-test-results__table table .svd-test-results__marker {
   position: absolute;
   top: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
-.svd-test-results .svd-test-results__table table .svd-test-results__marker .sv-svg-icon {
+.svd-test-results__table table .svd-test-results__marker .sv-svg-icon {
   transition: transform 0.2s ease-in-out;
 }
-.svd-test-results .svd-test-results__table table .svd-test-results__marker .sv-svg-icon use {
-  fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
+.svd-test-results__table table .svd-test-results__marker .sv-svg-icon use {
+  fill: var(--ctr-string-table-row-expand-button-icon-color-default, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
 }
-.svd-test-results .svd-test-results__table table .svd-test-results__marker.svd-test-results__marker--expanded .sv-svg-icon {
+.svd-test-results__table table .svd-test-results__marker.svd-test-results__marker--expanded .sv-svg-icon {
   transform-origin: center;
   transform: rotate(90deg);
 }
-.svd-test-results .svd-test-results__table table th {
+.svd-test-results__table table th {
   --small-bold-font-size: var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))));
   --ctr-small-bold-font-size: calc(0.75 * var(--small-bold-font-size));
   --ctr-small-bold-line-height: var(--small-bold-font-size);
@@ -6334,15 +6364,15 @@ svc-question .sv-action-bar,
   font-weight: 400;
   line-height: var(--ctr-font-small-line-height, var(--ctr-small-bold-line-height, 16px));
   font-weight: 600;
-  padding: var(--sjs-base-unit, var(--base-unit, 8px)) var(--sjs-base-unit, var(--base-unit, 8px));
-  background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
+  padding: var(--ctr-string-table-row-padding-top, var(--sjs-base-unit, var(--base-unit, 8px))) var(--ctr-string-table-row-padding-right, var(--sjs-base-unit, var(--base-unit, 8px))) var(--ctr-string-table-row-padding-bottom, var(--sjs-base-unit, var(--base-unit, 8px))) var(--ctr-string-table-row-padding-left, var(--sjs-base-unit, var(--base-unit, 8px)));
+  background: var(--ctr-string-table-header-background-color, var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3)));
   text-align: left;
-  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
+  color: var(--ctr-string-table-header-text-color, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
 }
-.svd-test-results .svd-test-results__table table th:nth-child(1) {
-  padding-left: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+.svd-test-results__table table th:nth-child(1) {
+  padding-left: var(--ctr-string-table-row-padding-left, calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
 }
-.svd-test-results .svd-test-results__table table td {
+.svd-test-results__table table td {
   --thm-default-font-size: var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))));
   --thm-default-line-height: calc(1.5 * var(--thm-default-font-size));
   font-family: var(--ctr-font-family, var(--sjs-font-family, var(--font-family)));
@@ -6350,13 +6380,14 @@ svc-question .sv-action-bar,
   font-style: normal;
   font-weight: 400;
   line-height: var(--ctr-font-default-line-height, var(--thm-default-line-height, 24px));
-  padding: var(--sjs-base-unit, var(--base-unit, 8px)) var(--sjs-base-unit, var(--base-unit, 8px));
+  padding: var(--ctr-string-table-row-padding-top, var(--sjs-base-unit, var(--base-unit, 8px))) var(--ctr-string-table-row-padding-right, var(--sjs-base-unit, var(--base-unit, 8px))) var(--ctr-string-table-row-padding-bottom, var(--sjs-base-unit, var(--base-unit, 8px))) var(--ctr-string-table-row-padding-left, var(--sjs-base-unit, var(--base-unit, 8px)));
   max-width: calc(50 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   overflow: auto;
-  border-top: 2px solid var(--sjs-border-light, var(--border-light, #eaeaea));
+  border-top: var(--ctr-string-table-row-border-width-bottom, 2px) solid var(--ctr-string-table-row-border-color, var(--sjs-border-light, var(--border-light, #eaeaea)));
   user-select: text;
+  background: var(--ctr-string-table-row-background-color, var(--sjs-general-backcolor, var(--background, #fff)));
 }
-.svd-test-results .svd-test-results__table table td:nth-child(1) {
+.svd-test-results__table table td:nth-child(1) {
   --thm-default-font-size: var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))));
   --thm-default-line-height: calc(1.5 * var(--thm-default-font-size));
   font-family: var(--ctr-font-family, var(--sjs-font-family, var(--font-family)));
@@ -6368,18 +6399,22 @@ svc-question .sv-action-bar,
   position: relative;
   width: 50%;
 }
-.svd-test-results .svd-test-results__table table td:nth-child(2) {
+.svd-test-results__table table td:nth-child(2) {
   width: 50%;
-  padding-right: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding-right: var(--ctr-string-table-row-padding-right, calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
 }
-.svd-test-results .svd-test-results__table table .survey-result-value {
+.svd-test-results__table table .survey-result-value {
   word-break: break-all;
 }
-.svd-test-results .svd-test-results__table table tr {
+.svd-test-results__table table tr {
   vertical-align: top;
 }
-.svd-test-results .svd-test-results__table table tr .svd-test-results__node-value {
-  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
+.svd-test-results__table table tr .svd-test-results__node-value {
+  color: var(--ctr-string-table-row-text-color, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
+}
+
+.svd-dark-border-color {
+  color: var(--ctr-string-table-row-text-color-title, rgb(0, 0, 0));
 }
 /*!****************************************************************************************************************************************************************************************!*\
   !*** 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/header/logo-image.scss ***!
@@ -6490,6 +6525,7 @@ svc-question .sv-action-bar,
   font-weight: 400;
   line-height: var(--ctr-font-default-line-height, var(--thm-default-line-height, 24px));
   font-weight: 600;
+  border-radius: var(--ctr-actionbar-button-corner-radius, calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
 }
 
 .svc-question-link__set-button {
@@ -6499,7 +6535,6 @@ svc-question .sv-action-bar,
 .svc-link-value-button {
   --thm-margin-inline-start: calc(-1 * var(--ctr-actionbar-button-padding-left-medium-text));
   margin-inline-start: var(--thm-margin-inline-start, calc(-2 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
-  border-radius: var(--ctr-actionbar-button-corner-radius, calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
 }
 
 .svc-question-link__clear-button {
@@ -6679,7 +6714,6 @@ svc-question .sv-action-bar,
 
 .svc-property-grid-placeholder__header {
   display: flex;
-  width: var(--ctr-property-grid-placeholder-text-max-width, 256px);
   max-width: var(--ctr-property-grid-placeholder-text-max-width, 256px);
   flex-direction: column;
   justify-content: center;
@@ -7775,8 +7809,7 @@ svc-question .sv-action-bar,
 }
 
 .svc-side-bar--flyout .svc-side-bar__shadow {
-  background-color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
-  opacity: 0.75;
+  background-color: var(--ctr-popup-haze-background-color, var(--background-semitransparent, rgba(144, 144, 144, 0.5)));
   position: absolute;
   top: 0;
   bottom: 0;
@@ -8261,17 +8294,17 @@ button.spg-action-button--large {
 }
 
 .spg-action-button:disabled {
-  opacity: var(--ctr-library-action-button-opacity-disabled, 0.25);
+  opacity: var(--ctr-actionbar-button-opacity-disabled, 0.25);
   pointer-events: none;
   cursor: default;
 }
 
 .spg-action-button--muted {
-  opacity: 0.5;
+  opacity: var(--ctr-actionbar-button-opacity-muted, 0.5);
 }
 
 .spg-action-button:active {
-  opacity: 0.5;
+  opacity: var(--ctr-actionbar-button-opacity-pressed, 0.5);
 }
 
 .spg-action-button--text {
@@ -8376,7 +8409,8 @@ button.spg-action-button--large {
 }
 
 .spg-row--multiple > div > .spg-row-narrow__question {
-  margin-top: calc(-1 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  --thm-ctr-editor-layout-gap: var(--ctr-editor-layout-gap, var(--sjs-base-unit, var(--base-unit, 8px)));
+  margin-top: calc(-1 * var(--thm-ctr-editor-layout-gap));
 }
 
 .spg-question--location--left {
@@ -8738,6 +8772,16 @@ input.spg-input:read-only::placeholder {
   height: 0;
 }
 
+.spg-dropdown__clean-button {
+  --thm-ctr-editor-content-margin-top: var(--ctr-editor-content-margin-top, var(--sjs-base-unit, var(--base-unit, 8px)));
+  --thm-ctr-editor-content-margin-bottom: var(--ctr-editor-content-margin-bottom, var(--sjs-base-unit, var(--base-unit, 8px)));
+  margin-top: calc(-1 * var(--thm-ctr-editor-content-margin-top));
+  margin-bottom: calc(-1 * var(--thm-ctr-editor-content-margin-bottom));
+}
+.spg-dropdown__clean-button use {
+  fill: inherit;
+}
+
 .spg-comment {
   height: auto;
   max-width: 100%;
@@ -8816,7 +8860,7 @@ input.spg-input:read-only::placeholder {
   margin-top: var(--ctr-property-grid-form-gap, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
 }
 .spg-panel__content .spg-row--multiple {
-  margin-top: var(--sjs-base-unit, var(--base-unit, 8px));
+  margin-top: var(--ctr-editor-layout-gap, var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 
 .spg-panel__content > .spg-row:first-of-type {
@@ -9027,6 +9071,7 @@ input.spg-input:read-only::placeholder {
 
 .spg-checkbox .spg-question__description {
   padding: 0;
+  padding-top: var(--ctr-checkbox-description-text-margin-top, calc(0.75 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
   padding-inline-start: var(--ctr-checkbox-description-text-margin-left, calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
   color: var(--ctr-checkbox-description-text-color, var(--sjs-general-dim-forecolor-light, rgba(0, 0, 0, 0.45)));
 }
@@ -9092,7 +9137,7 @@ input.spg-input:read-only::placeholder {
   border: 1px solid var(--ctr-survey-placeholder-border-color, var(--sjs-border-default, var(--border, #d6d6d6)));
   border-radius: var(--ctr-data-table-placeholder-corner-radius);
   box-sizing: border-box;
-  padding: var(--ctr-survey-placeholder-padding-top-with-button, calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))))) var(--ctr-survey-placeholder-padding-right, 0) var(--ctr-survey-placeholder-padding-bottom-with-button, calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))))) var(--ctr-survey-placeholder-padding-left, 0);
+  padding: var(--ctr-data-table-placeholder-padding-top, calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))))) var(--ctr-data-table-placeholder-padding-right, 0) var(--ctr-data-table-placeholder-padding-bottom, calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))))) var(--ctr-data-table-placeholder-padding-left, 0);
   gap: var(--ctr-survey-placeholder-gap, calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
 }
 .spg-matrixdynamic__placeholder .spg-matrixdynamic__add-btn {
@@ -9528,19 +9573,20 @@ input.spg-input:read-only::placeholder {
   margin-top: calc(-2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .spg-theme-builder-root .sd-question--title-top .spg-paneldynamic {
-  margin-top: calc(-1 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  --thm-ctr-editor-layout-gap: var(--ctr-editor-layout-gap, var(--sjs-base-unit, var(--base-unit, 8px)));
+  margin-top: calc(-1 * var(--thm-ctr-editor-layout-gap));
 }
-.spg-theme-builder-root .spg-question.spg-row__question:not(.sd-question--title-top):not(.spg-question--boolean) {
-  margin-top: calc(-1 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+.spg-theme-builder-root .spg-question.spg-row__question:not(.sd-question--title-top):not(.spg-question--boolean),
+.spg-theme-builder-root .spg-question__content-coloralpha {
+  --thm-ctr-property-grid-form-gap: var(--ctr-property-grid-form-gap, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
+  --thm-ctr-editor-layout-gap: var(--ctr-editor-layout-gap, var(--sjs-base-unit, var(--base-unit, 8px)));
+  margin-top: calc(var(--thm-ctr-editor-layout-gap) - var(--thm-ctr-property-grid-form-gap));
 }
 .spg-theme-builder-root .spg-row--multiple .spg-question.spg-row__question:not(.sd-question--title-top) {
   margin-top: 0;
 }
-.spg-theme-builder-root .spg-question__content-coloralpha {
-  margin-top: calc(-1 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-}
 .spg-theme-builder-root .spg-question-composite__content .spg-row:first-of-type {
-  margin-top: var(--sjs-base-unit, var(--base-unit, 8px));
+  margin-top: var(--ctr-editor-layout-gap, var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 
 .svc-side-bar--mobile .spg-theme-builder-root .spg-nested-panel__content::after {
@@ -9981,6 +10027,27 @@ input.spg-input:read-only::placeholder {
   transition: background-color var(--sjs-creator-transition-duration, 150ms);
   height: auto;
 }
+.svc-top-bar .sv-action-bar-item:hover, .svc-top-bar .sv-action-bar-item:focus {
+  background-color: var(--ctr-menu-toolbar-button-background-color-hovered, var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3)));
+}
+.svc-top-bar .sv-action-bar-item:active, .svc-top-bar .sv-action-bar-item.sv-action-bar-item--pressed {
+  opacity: var(--ctr-menu-toolbar-button-opacity-pressed, 0.5);
+  background-color: var(--ctr-menu-toolbar-button-background-color-pressed, var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3)));
+}
+.svc-top-bar .sv-action-bar-item:active use, .svc-top-bar .sv-action-bar-item.sv-action-bar-item--pressed use {
+  fill: black;
+  opacity: 0.45;
+}
+.svc-top-bar .sv-action-bar-item.sv-action-bar-item--active {
+  background-color: var(--ctr-menu-toolbar-button-background-color-selected, var(--sjs-general-backcolor, var(--background, #fff)));
+}
+.svc-top-bar .sv-action-bar-item.sv-action-bar-item--active use {
+  fill: var(--ctr-menu-toolbar-button-text-color-selected, var(--sjs-primary-backcolor, var(--primary, #19b394)));
+}
+.svc-top-bar .sv-action-bar-item:disabled {
+  background-color: transparent;
+  opacity: var(--ctr-menu-toolbar-button-opacity-disabled, 0.25);
+}
 .svc-top-bar .sv-action-bar-item--icon {
   padding: var(--ctr-menu-toolbar-button-padding-top, var(--sjs-base-unit, var(--base-unit, 8px))) var(--ctr-menu-toolbar-button-padding-right, var(--sjs-base-unit, var(--base-unit, 8px))) var(--ctr-menu-toolbar-button-padding-bottom, var(--sjs-base-unit, var(--base-unit, 8px))) var(--ctr-menu-toolbar-button-padding-left, var(--sjs-base-unit, var(--base-unit, 8px)));
   border-radius: var(--ctr-menu-toolbar-button-corner-radius, 0);
@@ -9992,28 +10059,10 @@ input.spg-input:read-only::placeholder {
 .svc-top-bar .sv-action-bar-item__icon use {
   fill: var(--ctr-menu-toolbar-button-icon-color, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
 }
-.svc-top-bar .sv-action-bar-item:not(.sv-action-bar-item--pressed):hover:enabled,
-.svc-top-bar .sv-action-bar-item:not(.sv-action-bar-item--pressed):focus:enabled {
-  background-color: var(--ctr-menu-toolbar-button-background-color-hovered, var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3)));
-}
-.svc-top-bar .sv-action-bar-item:not(.sv-action-bar-item--pressed):active:enabled {
-  opacity: var(--ctr-menu-toolbar-button-opacity-pressed, 0.5);
-  background-color: var(--ctr-menu-toolbar-button-background-color-pressed, var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3)));
-}
-.svc-top-bar .sv-action-bar-item:disabled {
-  opacity: var(--ctr-menu-toolbar-button-opacity-disabled, 0.25);
-}
-.svc-top-bar .sv-action-bar-item--active .sv-action-bar-item__icon use {
-  fill: var(--ctr-menu-toolbar-button-text-color-selected, var(--sjs-primary-backcolor, var(--primary, #19b394)));
-}
 .svc-top-bar .sv-action-bar-item-dropdown {
   border-radius: calcCornerRadius(0.5);
   background-color: transparent;
 }
-.svc-top-bar .sv-action-bar-item--pressed:not(.sv-action-bar-item--active) {
-  background-color: var(--ctr-menu-toolbar-button-background-color-pressed, var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3)));
-  opacity: var(--ctr-menu-toolbar-button-opacity-pressed, 50%);
-}
 
 .svc-footer-bar .svc-toolbar-wrapper {
   height: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
@@ -10100,6 +10149,9 @@ input.spg-input:read-only::placeholder {
 .spg-boolean-switch__button--checked .spg-boolean-switch__thumb--right {
   background: var(--ctr-toggle-button-thumb-background-color-checked, #ffffff);
 }
+.spg-boolean-switch__button--checked:hover {
+  background: var(--ctr-toggle-button-background-color-checked, #19b394);
+}
 .spg-boolean-switch__button--checked:focus {
   background: var(--ctr-toggle-button-background-color-checked-focused, #ffffff);
 }