survey-creator-core 1.11.9 → 1.11.10

package/survey-creator-core.fontless.css

@@ -1,5 +1,5 @@
 /*!
- * SurveyJS Creator v1.11.9
+ * SurveyJS Creator v1.11.10
  * (c) 2015-2024 Devsoft Baltic OÜ - http://surveyjs.io/
  * Github: https://github.com/surveyjs/survey-creator
  * License: https://surveyjs.io/Licenses#SurveyCreator
@@ -94,7 +94,7 @@ svc-tab-json-editor-textarea {
   max-width: calc(100% - 2 * var(--sjs-base-unit, var(--base-unit, 8px)));
   padding: var(--sjs-base-unit, var(--base-unit, 8px));
   background-color: var(--sjs-general-backcolor, var(--background, #fff));
-  background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.1));
+  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: var(--sjs-general-forecolor, var(--foreground, #161616));
@@ -174,7 +174,7 @@ svc-tab-json-editor-textarea {
   background: var(--sjs-general-backcolor, var(--background, #fff));
   border: none;
   border-radius: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  box-shadow: var(--sjs-shadow-small, 0px 1px 2px 0px rgba(0, 0, 0, 0.15));
+  box-shadow: 0px 1px 2px 0px var(--ctr-shadow-small-color, rgba(0, 0, 0, 0.15));
   cursor: pointer;
 }
 .svc-json-error__fix-button svg {
@@ -253,6 +253,9 @@ svc-tab-json-editor-textarea {
     overflow-y: scroll;
   }
 }
+.svd-simulator .sv-popup--overlay {
+  --sv-popup-overlay-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/test.scss ***!
   \********************************************************************************************************************************************************************************/
@@ -292,8 +295,8 @@ svc-tab-test {
 .svc-test-tab__content-actions .sv-action-bar {
   padding: 0;
   height: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  background: var(--sjs-general-backcolor, var(--background, #fff));
-  border-top: 1px solid var(--sjs-border-default, var(--border, #d6d6d6));
+  border-top: 1px solid var(--ctr-preview-pager-border-color, var(--sjs-border-default, var(--border, #d6d6d6)));
+  background: var(--ctr-preview-pager-background-color, var(--sjs-general-backcolor, var(--background, #fff)));
   width: 100%;
   position: absolute;
 }
@@ -374,11 +377,11 @@ svc-tab-test {
   padding: 0;
 }
 .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 {
-  background-color: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
+  background-color: var(--ctr-collapse-button-background-color-hovered, var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1))));
   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 use {
-  fill: var(--sjs-primary-backcolor, var(--primary, #19b394));
+  fill: var(--ctr-collapse-button-icon-color-hovered, var(--sjs-primary-backcolor, var(--primary, #19b394)));
 }
 
 .sl-table__remove-button .sv-action-bar-item {
@@ -387,11 +390,11 @@ svc-tab-test {
   cursor: pointer;
 }
 .sl-table__remove-button .sv-action-bar-item:hover:enabled, .sl-table__remove-button .sv-action-bar-item.sv-focused--by-key {
-  background-color: var(--sjs-special-red-light, var(--red-light, rgba(230, 10, 62, 0.1)));
+  background-color: var(--ctr-library-action-button-background-color-negative-hovered, var(--sjs-special-red-light, var(--red-light, rgba(230, 10, 62, 0.1))));
   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 use {
-  fill: var(--sjs-special-red, var(--red, #e60a3e));
+  fill: var(--lbr-action-button-icon-color-negative, var(--sjs-special-red, var(--red, #e60a3e)));
 }
 
 .sl-table__cell .sv-action-bar-item__icon {
@@ -409,7 +412,7 @@ svc-tab-test {
   height: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .sl-table__row #remove-row .sv-action-bar-item__icon use {
-  fill: var(--sjs-special-red, var(--red, #e60a3e));
+  fill: var(--lbr-action-button-icon-color-negative, var(--sjs-special-red, var(--red, #e60a3e)));
 }
 
 .sl-table__row.sl-table__row--additional .sl-table__cell .svc-action-button {
@@ -428,7 +431,6 @@ svc-tab-test {
   font-size: calc(3 * var(--medium-bold-font-size));
   line-height: calc(4 * var(--medium-bold-font-size));
   background: transparent;
-  color: var(--sjs-general-forecolor, var(--foreground, #161616));
   outline: none;
   border: none;
   box-shadow: none;
@@ -514,8 +516,8 @@ svc-tab-test {
 .sl-panel .sl-panel__footer button.sl-panel__done-button {
   width: 100%;
   margin: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0 calc(10 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0;
-  color: var(--sjs-primary-backcolor, var(--primary, #19b394));
-  background-color: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
+  color: var(--ctr-expression-item-text-color-button, var(--sjs-primary-backcolor, var(--primary, #19b394)));
+  background-color: var(--ctr-expression-item-background-color-button, var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1))));
   font-family: var(--sjs-font-family, var(--font-family));
   font-size: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   border-radius: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
@@ -526,8 +528,8 @@ svc-tab-test {
   user-select: none;
 }
 .sl-panel .sl-panel__footer button:hover:enabled {
-  background-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
-  color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
+  background-color: var(--ctr-expression-item-background-color-button-hovered, var(--sjs-primary-backcolor, var(--primary, #19b394)));
+  color: var(--ctr-expression-item-text-color-button-hovered, var(--sjs-primary-forecolor, var(--primary-foreground, #fff)));
 }
 .sl-panel .sl-panel__footer .sv-action-bar-item__title {
   color: inherit;
@@ -569,7 +571,7 @@ svc-tab-test {
 }
 
 .sl-question__title {
-  color: var(--sjs-general-forecolor, var(--foreground, #161616));
+  color: var(--ctr-expression-item-text-color-function, var(--sjs-general-forecolor, var(--foreground, #161616)));
   font-size: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   line-height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   margin: 0;
@@ -637,7 +639,7 @@ svc-tab-test {
 .svc-tab-translation {
   width: 100%;
   height: 100%;
-  background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
+  background-color: var(--ctr-surface-background-color, var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3)));
 }
 .svc-tab-translation * {
   -webkit-transition: none !important;
@@ -647,7 +649,7 @@ svc-tab-test {
 }
 
 .st-properties {
-  background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
+  background-color: var(--ctr-property-grid-background-color, var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3)));
   flex-grow: 1;
   padding-right: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   padding-left: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
@@ -716,7 +718,7 @@ svc-tab-test {
 }
 
 .st-strings-header .st-table__cell {
-  background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
+  background-color: var(--ctr-string-table-header-background-color, var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3)));
   height: auto;
 }
 
@@ -732,17 +734,21 @@ svc-tab-test {
   font-weight: 600;
   font-size: calc(0.75 * var(--small-bold-font-size));
   line-height: var(--sjs-font-size, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
-  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
   text-align: left;
 }
 
+.st-table__cell.st-table__cell--header {
+  color: var(--ctr-string-table-header-text-color, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
+}
+
 .st-title.st-panel__title {
   height: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   line-height: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   padding-left: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   margin: 0;
-  background-color: var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9));
-  border-bottom: 1px solid var(--sjs-border-light, var(--border-light, #eaeaea));
+  color: var(--ctr-string-table-group-header-text-color, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
+  background-color: var(--ctr-string-table-group-header-background-color, var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9)));
+  border-bottom: 1px solid var(--ctr-string-table-row-border-color, var(--sjs-border-light, var(--border-light, #eaeaea)));
 }
 
 .st-table tr {
@@ -754,8 +760,8 @@ svc-tab-test {
   display: block;
   flex: 1 1;
   box-sizing: border-box;
-  background-color: var(--sjs-general-backcolor, var(--background, #fff));
-  border-bottom: 1px solid var(--sjs-border-light, var(--border-light, #eaeaea));
+  background-color: var(--ctr-string-table-row-background-color, var(--sjs-general-backcolor, var(--background, #fff)));
+  border-bottom: 1px solid var(--ctr-string-table-row-border-color, var(--sjs-border-light, var(--border-light, #eaeaea)));
   padding: var(--sjs-base-unit, var(--base-unit, 8px)) 0;
 }
 
@@ -766,7 +772,7 @@ td.st-table__cell:first-of-type {
   font-weight: 600;
   font-size: var(--sjs-font-size, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
   line-height: calc(1.5 * var(--default-bold-font-size));
-  color: var(--sjs-general-forecolor, var(--foreground, #161616));
+  color: var(--ctr-string-table-row-text-color-title, var(--sjs-general-forecolor, var(--foreground, #161616)));
   max-width: 300px;
   padding-right: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
@@ -796,8 +802,8 @@ td.st-table__cell:first-of-type span {
   width: calc(100% - 3 * var(--sjs-base-unit, var(--base-unit, 8px)));
   border: unset;
   outline: none;
-  background-color: var(--sjs-general-backcolor, var(--background, #fff));
-  color: var(--sjs-general-forecolor, var(--foreground, #161616));
+  background-color: var(--ctr-string-table-row-background-color, var(--sjs-general-backcolor, var(--background, #fff)));
+  color: var(--ctr-string-table-row-text-color-title, var(--sjs-general-forecolor, var(--foreground, #161616)));
   resize: none;
   padding: 0;
 }
@@ -879,7 +885,7 @@ td.st-table__cell:first-of-type span {
   padding: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   padding-left: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   background: var(--sjs-general-backcolor, var(--background, #fff));
-  border-bottom: 1px solid var(--sjs-border-light, var(--border-light, #eaeaea));
+  border-bottom: 1px solid var(--ctr-string-table-row-border-color, var(--sjs-border-light, var(--border-light, #eaeaea)));
 }
 
 .st-translation-dialog .sv-popup__body-header {
@@ -888,7 +894,7 @@ td.st-table__cell:first-of-type span {
 
 .st-translation-dialog .st-strings-wrapper {
   border-radius: 4px;
-  box-shadow: var(--sjs-shadow-small, 0px 1px 2px 0px rgba(0, 0, 0, 0.15));
+  box-shadow: 0px 1px 2px 0px var(--ctr-shadow-small-color, rgba(0, 0, 0, 0.15));
   overflow: hidden;
 }
 
@@ -975,7 +981,7 @@ td.st-table__cell:first-of-type span {
   font-weight: 600;
   font-family: var(--sjs-font-family, var(--font-family));
   font-size: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
+  color: var(--ctr-expression-item-text-color-parameter-empty, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
   height: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   line-height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   cursor: pointer;
@@ -990,43 +996,55 @@ td.st-table__cell:first-of-type span {
 }
 
 .sl-question.svc-logic-question--answered .svc-logic-operator {
-  color: var(--sjs-general-forecolor, var(--foreground, #161616));
+  color: var(--ctr-expression-item-text-color-parameter, var(--sjs-general-forecolor, var(--foreground, #161616)));
 }
 
 .svc-logic-operator.svc-logic-operator:hover, .svc-logic-operator.svc-logic-operator:focus {
-  color: #ffffff;
+  color: var(--ctr-expression-item-text-color-parameter-hovered, var(--sjs-primary-forecolor, var(--primary-foreground, #fff)));
   outline: none;
   box-shadow: none;
 }
 
 .svc-logic-operator.svc-logic-operator--question {
-  background-color: var(--sjs-special-blue-light, var(--blue-light, rgba(67, 127, 217, 0.1)));
+  background-color: var(--ctr-expression-item-background-color-parameter, var(--sjs-special-blue-light, var(--blue-light, rgba(67, 127, 217, 0.1))));
+  color: var(--ctr-expression-item-text-color-parameter, var(--sjs-general-forecolor, var(--foreground, #161616)));
 }
 .svc-logic-operator.svc-logic-operator--question:hover, .svc-logic-operator.svc-logic-operator--question:focus {
-  background-color: var(--sjs-special-blue, #437fd9);
+  background-color: var(--ctr-expression-item-background-color-parameter-hovered, var(--sjs-special-blue, #437fd9));
+  color: var(--ctr-expression-item-text-color-parameter-hovered, var(--sjs-general-backcolor, var(--background, #fff)));
+}
+
+.svc-logic-operator.svc-logic-operator--conjunction {
+  background-color: var(--ctr-expression-item-background-color-conjunction, var(--sjs-special-yellow-light, var(--yellow-light, rgba(255, 152, 20, 0.1))));
+  color: var(--ctr-expression-item-text-color-conjunction, var(--sjs-general-forecolor, var(--foreground, #161616)));
+}
+.svc-logic-operator.svc-logic-operator--conjunction:hover, .svc-logic-operator.svc-logic-operator--conjunction:focus {
+  background-color: var(--ctr-expression-item-background-color-conjunction-hovered, var(--sjs-special-yellow, var(--yellow, #ff9814)));
+  color: var(--ctr-expression-item-text-color-conjunction-hovered, var(--sjs-general-forecolor, var(--foreground, #161616)));
 }
 
-.svc-logic-operator.svc-logic-operator--conjunction,
 .svc-logic-operator.svc-logic-operator--operator {
-  background-color: var(--sjs-special-yellow-light, var(--yellow-light, rgba(255, 152, 20, 0.1)));
+  background-color: var(--ctr-expression-item-background-color-operator, var(--sjs-special-yellow-light, var(--yellow-light, rgba(255, 152, 20, 0.1))));
+  color: var(--ctr-expression-item-text-color-operator, var(--sjs-general-forecolor, var(--foreground, #161616)));
 }
-.svc-logic-operator.svc-logic-operator--conjunction:hover, .svc-logic-operator.svc-logic-operator--conjunction:focus,
-.svc-logic-operator.svc-logic-operator--operator:hover,
-.svc-logic-operator.svc-logic-operator--operator:focus {
-  background-color: var(--sjs-special-yellow, var(--yellow, #ff9814));
+.svc-logic-operator.svc-logic-operator--operator:hover, .svc-logic-operator.svc-logic-operator--operator:focus {
+  background-color: var(--ctr-expression-item-background-color-operator-hovered, var(--sjs-special-yellow, var(--yellow, #ff9814)));
+  color: var(--ctr-expression-item-text-color-operator-hovered, var(--sjs-general-forecolor, var(--foreground, #161616)));
 }
 
 .svc-logic-operator.svc-logic-operator--action {
-  background-color: var(--sjs-special-red-light, var(--red-light, rgba(230, 10, 62, 0.1)));
+  background-color: var(--ctr-expression-item-background-color-action, var(--sjs-special-red-light, var(--red-light, rgba(230, 10, 62, 0.1))));
+  color: var(--ctr-expression-item-text-color-action, var(--sjs-general-forecolor, var(--foreground, #161616)));
 }
 .svc-logic-operator.svc-logic-operator--action:hover, .svc-logic-operator.svc-logic-operator--action:focus {
-  background-color: var(--sjs-special-red, var(--red, #e60a3e));
+  background-color: var(--ctr-expression-item-background-color-action-hovered, var(--sjs-special-red, var(--red, #e60a3e)));
+  color: var(--ctr-expression-item-text-color-action-hovered, var(--sjs-general-forecolor, var(--foreground, #161616)));
 }
 
 .svc-logic-operator.svc-logic-operator--error {
-  background-color: var(--sjs-general-backcolor, var(--background, #fff));
-  color: var(--sjs-special-red, var(--red, #e60a3e));
-  box-shadow: inset 0 0 0 2px var(--sjs-special-red, var(--red, #e60a3e));
+  background-color: var(--ctr-expression-item-background-color-parameter-error, var(--sjs-general-backcolor, var(--background, #fff)));
+  color: var(--ctr-expression-item-text-color-parameter-error, var(--sjs-special-red, var(--red, #e60a3e)));
+  box-shadow: inset 0 0 0 2px var(--ctr-expression-item-text-color-parameter-error, var(--sjs-special-red, var(--red, #e60a3e)));
 }
 
 .svc-logic-operator__error {
@@ -1051,14 +1069,36 @@ td.st-table__cell:first-of-type span {
   background-position: center;
 }
 
+.svc-action-button--icon.svc-logic-condition-remove.svc-icon-remove {
+  display: none;
+  width: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  height: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  background: none;
+  justify-content: center;
+  align-items: center;
+  padding: 0;
+}
+.svc-action-button--icon.svc-logic-condition-remove.svc-icon-remove use {
+  fill: var(--ctr-survey-action-button-icon-color-negative, var(--sjs-special-red, var(--red, #e60a3e)));
+}
+
+.svc-action-button--disabled.svc-action-button--icon.svc-logic-condition-remove.svc-icon-remove use {
+  fill: var(--ctr-survey-action-button-icon-color-disabled, var(--sjs-general-dim-forecolor-light, rgba(0, 0, 0, 0.45)));
+}
+
 .sl-panel-wrapper--in-row:hover .svc-logic-condition-remove.svc-icon-remove,
 .sl-panel-wrapper--in-row:focus-within .svc-logic-condition-remove.svc-icon-remove {
   display: block;
 }
 
+.sl-panel-wrapper--in-row:hover .svc-logic-condition-remove.svc-icon-remove.svc-action-button--icon,
+.sl-panel-wrapper--in-row:focus-within .svc-logic-condition-remove.svc-icon-remove.svc-action-button--icon {
+  display: flex;
+}
+
 .svc-logic-condition-remove.svc-icon-remove:hover,
 .svc-logic-condition-remove.svc-icon-remove:focus {
-  background-color: var(--sjs-special-red-light, var(--red-light, rgba(230, 10, 62, 0.1)));
+  background-color: var(--ctr-library-action-button-background-color-negative-hovered, var(--sjs-special-red-light, var(--red-light, rgba(230, 10, 62, 0.1))));
 }
 
 .svc-logic-condition-remove-question {
@@ -1075,13 +1115,13 @@ td.st-table__cell:first-of-type span {
 
 .svc-logic-operator--action.sl-paneldynamic__add-btn.sl-paneldynamic__add-btn,
 .svc-logic-operator--operator.sl-paneldynamic__add-btn.sl-paneldynamic__add-btn {
-  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
+  color: var(--ctr-expression-item-text-color-operator-empty, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
   margin-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .svc-logic-operator--action.sl-paneldynamic__add-btn.sl-paneldynamic__add-btn:hover, .svc-logic-operator--action.sl-paneldynamic__add-btn.sl-paneldynamic__add-btn:focus,
 .svc-logic-operator--operator.sl-paneldynamic__add-btn.sl-paneldynamic__add-btn:hover,
 .svc-logic-operator--operator.sl-paneldynamic__add-btn.sl-paneldynamic__add-btn:focus {
-  color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
+  color: var(--ctr-expression-item-background-color-operator-hovered, var(--sjs-primary-forecolor, var(--primary-foreground, #fff)));
 }
 
 .svc-logic-tab__content.svc-logic-tab__empty {
@@ -1104,18 +1144,22 @@ td.st-table__cell:first-of-type span {
   outline: solid calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px)))) transparent;
 }
 .svc-logic-tab__content .svc-logic-tab__content-action--disabled:focus, .svc-logic-tab__content .svc-logic-tab__content-action--disabled:hover {
-  background-color: var(--sjs-general-backcolor, var(--background, #fff));
-  box-shadow: var(--sjs-shadow-small, 0px 1px 2px 0px rgba(0, 0, 0, 0.15));
+  background-color: var(--ctr-button-background-color-hovered, var(--sjs-general-backcolor, var(--background, #fff)));
+  box-shadow: 0px 1px 2px 0px var(--ctr-shadow-small-color, rgba(0, 0, 0, 0.15));
 }
 .svc-logic-tab__content .svc-logic-tab__content-action--disabled .svc-text {
-  color: var(--sjs-general-forecolor, var(--foreground, #161616));
-  opacity: 0.25;
+  color: var(--ctr-button-text-color-disabled, var(--sjs-general-forecolor, var(--foreground, #161616)));
+  opacity: var(--ctr-button-text-opacity-disabled, 0.25);
 }
 .svc-logic-tab__content .sd-paneldynamic__panel-wrapper--in-row {
   margin-top: 0;
   align-items: start;
 }
 
+.svc-logic-tab__content-empty .svc-text {
+  color: var(--ctr-surface-placeholder-text-description-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
+}
+
 .svc-logic-paneldynamic {
   font-family: var(--sjs-font-family, var(--font-family));
 }
@@ -1138,6 +1182,10 @@ td.st-table__cell:first-of-type span {
   flex-flow: row wrap;
 }
 
+.sl-table__cell.sd-table__cell-action--show-detail use {
+  fill: var(--ctr-collapse-button-icon-color, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
+}
+
 .sl-table__cell--detail-panel .sd-body {
   margin: 0;
   min-width: none;
@@ -1171,7 +1219,7 @@ td.st-table__cell:first-of-type span {
   box-sizing: border-box;
   margin-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   background: var(--sjs-general-backcolor, var(--background, #fff));
-  box-shadow: var(--sjs-shadow-small, 0px 1px 2px 0px rgba(0, 0, 0, 0.15));
+  box-shadow: 0px 1px 2px 0px var(--ctr-shadow-small-color, rgba(0, 0, 0, 0.15));
   border-radius: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   padding: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
@@ -1193,7 +1241,7 @@ td.st-table__cell:first-of-type span {
 }
 
 .svc-logic-tab__leave-apply-button {
-  background-color: var(--sjs-special-red, var(--red, #e60a3e));
+  background-color: var(--ctr-button-background-color-danger, var(--sjs-special-red, var(--red, #e60a3e)));
 }
 
 .sl-list {
@@ -1225,6 +1273,10 @@ svc-tab-designer {
   height: 100%;
   overflow-y: scroll;
   position: static;
+  background: var(--ctr-surface-background-color, var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3)));
+}
+.svc-tab-designer .svc-text {
+  color: var(--ctr-surface-placeholder-text-title-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
 }
 
 .svc-tab-designer--with-place-holder .svc-tab-designer_content {
@@ -1261,6 +1313,7 @@ svc-tab-designer {
 }
 .svc-tab-designer .sd-container-modern.sd-container-modern--responsive {
   max-width: initial;
+  padding: 0 calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .svc-tab-designer .sd-question.sd-question--image {
   width: 100%;
@@ -1273,6 +1326,12 @@ svc-tab-designer {
 .svc-designer-header {
   border-bottom: 2px solid transparent;
 }
+.svc-designer-header h3.sd-title .sv-string-editor[aria-placeholder]:empty:before {
+  color: var(--ctr-survey-header-text-title-color-placeholder, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
+}
+.svc-designer-header .sd-description {
+  color: var(--ctr-survey-header-text-description-color-placeholder, #909090);
+}
 
 .svc-designer__placeholder-container {
   display: flex;
@@ -1447,8 +1506,8 @@ svc-tab-test {
 .svc-test-tab__content-actions .sv-action-bar {
   padding: 0;
   height: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  background: var(--sjs-general-backcolor, var(--background, #fff));
-  border-top: 1px solid var(--sjs-border-default, var(--border, #d6d6d6));
+  border-top: 1px solid var(--ctr-preview-pager-border-color, var(--sjs-border-default, var(--border, #d6d6d6)));
+  background: var(--ctr-preview-pager-background-color, var(--sjs-general-backcolor, var(--background, #fff)));
   width: 100%;
   position: absolute;
 }
@@ -1464,6 +1523,21 @@ svc-tab-test {
 .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-general-forecolor-light, var(--foreground-light, #909090)));
+}
+.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-general-backcolor-dim, var(--background-dim, #f3f3f3)));
+}
+.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-general-backcolor-dim, var(--background-dim, #f3f3f3)));
+}
+.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-general-backcolor-dim, var(--background-dim, #f3f3f3)));
+}
+.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-general-forecolor, var(--foreground, #161616)));
+}
 .svc-test-tab__content-actions .sv-action-bar-item {
   --small-bold-font-size: var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))));
   font-family: var(--sjs-font-family, var(--font-family));
@@ -1573,19 +1647,19 @@ svc-tab-test {
   \******************************************************************************************************************************************************************************/
 .svc-notifier.svc-notifier--shown {
   visibility: visible;
-  opacity: 0.75;
+  opacity: var(--ctr-notification-opacity, 0.75);
 }
 
 .svc-notifier {
   position: absolute;
   bottom: var(--sjs-base-unit, var(--base-unit, 8px));
   left: var(--sjs-base-unit, var(--base-unit, 8px));
-  background: var(--sjs-general-backcolor, var(--background, #fff));
+  background: var(--ctr-notification-background-color, var(--sjs-general-backcolor, var(--background, #fff)));
   opacity: 0;
   padding: var(--sjs-base-unit, var(--base-unit, 8px)) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  box-shadow: var(--sjs-shadow-medium, 0px 2px 6px 0px rgba(0, 0, 0, 0.1));
+  box-shadow: 0px 2px 6px 0px var(--ctr-shadow-medium-color, rgba(0, 0, 0, 0.1));
   border-radius: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  color: var(--sjs-general-forecolor, var(--foreground, #161616));
+  color: var(--ctr-notification-text-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
   min-width: calc(30 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   text-align: center;
   z-index: 1600;
@@ -1599,9 +1673,9 @@ svc-tab-test {
 }
 
 .svc-notifier.svc-notifier--error {
-  background-color: var(--sjs-special-red, var(--red, #e60a3e));
-  color: #ffffff;
-  opacity: 1;
+  background-color: var(--ctr-notification-background-color-error, var(--sjs-special-red, var(--red, #e60a3e)));
+  color: var(--ctr-notification-text-color-error, var(--sjs-special-red-forecolor, #ffffff));
+  opacity: var(--ctr-notification-opacity-error, 1);
 }
 
 .svc-creator--mobile .svc-notifier {
@@ -1613,6 +1687,211 @@ svc-tab-test {
   z-index: 1000;
 }
 
+survey-creator:not(.svd-simulator-content) .sv-popup .sd-btn,
+.svc-creator:not(.svd-simulator-content) .sv-popup .sd-btn {
+  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)));
+}
+survey-creator:not(.svd-simulator-content) .sv-popup .sd-btn:hover,
+.svc-creator:not(.svd-simulator-content) .sv-popup .sd-btn:hover {
+  background: var(--ctr-button-background-color-hovered, var(--sjs-questionpanel-hovercolor, var(--sjs-general-backcolor-dark, rgb(248, 248, 248))));
+}
+survey-creator:not(.svd-simulator-content) .sv-popup .sd-btn--action,
+.svc-creator:not(.svd-simulator-content) .sv-popup .sd-btn--action {
+  background: var(--ctr-button-background-color-cta, var(--sjs-primary-backcolor, var(--primary, #19b394)));
+  color: var(--ctr-button-text-color-cta, var(--sjs-primary-forecolor, var(--primary-foreground, #fff)));
+}
+survey-creator:not(.svd-simulator-content) .sv-popup .sd-btn--action:hover,
+.svc-creator:not(.svd-simulator-content) .sv-popup .sd-btn--action:hover {
+  background: var(--ctr-button-background-color-cta-hovered, var(--sjs-primary-backcolor-dark, rgb(20, 164, 139)));
+}
+survey-creator:not(.svd-simulator-content) .sv-popup--modal,
+.svc-creator:not(.svd-simulator-content) .sv-popup--modal {
+  background-color: var(--ctr-popup-haze-background-color, var(--background-semitransparent, rgba(144, 144, 144, 0.5)));
+}
+survey-creator:not(.svd-simulator-content) .sv-popup--modal > .sv-popup__container,
+.svc-creator:not(.svd-simulator-content) .sv-popup--modal > .sv-popup__container {
+  background-color: var(--ctr-popup-background-color, var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9)));
+}
+survey-creator:not(.svd-simulator-content) .sv-popup--modal > .sv-popup__container > .sv-popup__shadow > .sv-popup__body-content,
+.svc-creator:not(.svd-simulator-content) .sv-popup--modal > .sv-popup__container > .sv-popup__shadow > .sv-popup__body-content {
+  background-color: var(--ctr-popup-background-color, var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9)));
+}
+survey-creator:not(.svd-simulator-content) .sv-popup--overlay:not(.sv-popup--dropdown-overlay) .sv-popup__container,
+.svc-creator:not(.svd-simulator-content) .sv-popup--overlay:not(.sv-popup--dropdown-overlay) .sv-popup__container {
+  background: var(--ctr-popup-haze-background-color, var(--background-semitransparent, rgba(144, 144, 144, 0.5)));
+}
+survey-creator:not(.svd-simulator-content) .sv-popup--overlay:not(.sv-popup--dropdown-overlay) .sv-popup__body-content,
+.svc-creator:not(.svd-simulator-content) .sv-popup--overlay:not(.sv-popup--dropdown-overlay) .sv-popup__body-content {
+  background-color: var(--ctr-popup-background-color, var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3)));
+}
+survey-creator:not(.svd-simulator-content) .sv-popup--overlay:not(.sv-popup--dropdown-overlay) .sv-popup__button.sv-popup__button,
+.svc-creator:not(.svd-simulator-content) .sv-popup--overlay:not(.sv-popup--dropdown-overlay) .sv-popup__button.sv-popup__button {
+  background-color: var(--ctr-button-background-color-cta, var(--sjs-primary-backcolor, var(--primary, #19b394)));
+  border: 2px solid var(--ctr-button-background-color-cta, var(--sjs-primary-backcolor, var(--primary, #19b394)));
+  color: var(--ctr-button-text-color-cta, var(--sjs-primary-forecolor, var(--primary-foreground, #fff)));
+}
+survey-creator:not(.svd-simulator-content) .sv-popup__pointer:after,
+.svc-creator:not(.svd-simulator-content) .sv-popup__pointer:after {
+  content: " ";
+  border-bottom: var(--sjs-base-unit, var(--base-unit, 8px)) solid var(--ctr-contextual-menu-pointer-color, var(--sjs-general-backcolor, var(--background, #fff)));
+}
+survey-creator:not(.svd-simulator-content) .sv-popup__body-header,
+.svc-creator:not(.svd-simulator-content) .sv-popup__body-header {
+  color: var(--ctr-popup-title-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
+}
+survey-creator:not(.svd-simulator-content) .sv-popup--dropdown .sv-popup__body-content,
+.svc-creator:not(.svd-simulator-content) .sv-popup--dropdown .sv-popup__body-content {
+  background-color: var(--ctr-contextual-menu-background-color, var(--sjs-general-backcolor, var(--background, #fff)));
+}
+survey-creator:not(.svd-simulator-content) .sv-popup--dropdown.toolbox-subtypes .sv-popup__body-content,
+.svc-creator:not(.svd-simulator-content) .sv-popup--dropdown.toolbox-subtypes .sv-popup__body-content {
+  background: unset;
+}
+survey-creator:not(.svd-simulator-content) .sv-list__filter,
+.svc-creator:not(.svd-simulator-content) .sv-list__filter {
+  background-color: var(--ctr-contextual-menu-background-color, var(--sjs-general-backcolor, var(--background, #fff)));
+  border-bottom: 1px solid var(--ctr-list-search-border-color, var(--sjs-border-inside, var(--border-inside, rgba(0, 0, 0, 0.16))));
+}
+survey-creator:not(.svd-simulator-content) .sv-list__filter .sv-list__input,
+.svc-creator:not(.svd-simulator-content) .sv-list__filter .sv-list__input {
+  color: var(--ctr-list-search-text-color-placeholder, var(--sjs-general-dim-forecolor-light, rgba(0, 0, 0, 0.45)));
+  background-color: transparent;
+}
+survey-creator:not(.svd-simulator-content) .sv-list__filter .sv-list__input::placeholder,
+.svc-creator:not(.svd-simulator-content) .sv-list__filter .sv-list__input::placeholder {
+  color: var(--ctr-list-search-text-color-placeholder, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
+}
+survey-creator:not(.svd-simulator-content) .sv-list__filter .sv-list__filter-icon use,
+.svc-creator:not(.svd-simulator-content) .sv-list__filter .sv-list__filter-icon use {
+  fill: var(--ctr-list-search-icon-color, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
+}
+survey-creator:not(.svd-simulator-content) .sv-list__item-body,
+.svc-creator:not(.svd-simulator-content) .sv-list__item-body {
+  color: var(--ctr-list-item-text-color, var(--sjs-general-dim-forecolor, rgba(0, 0, 0, 0.91)));
+}
+survey-creator:not(.svd-simulator-content) .sv-list__item-icon use,
+.svc-creator:not(.svd-simulator-content) .sv-list__item-icon use {
+  fill: var(--ctr-list-item-icon-color, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
+}
+survey-creator:not(.svd-simulator-content) .sv-list__item--hovered > .sv-list__item-body,
+.svc-creator:not(.svd-simulator-content) .sv-list__item--hovered > .sv-list__item-body {
+  color: var(--ctr-list-item-text-color-hovered, var(--sjs-general-forecolor, var(--foreground, #161616)));
+  background: var(--ctr-list-item-background-color-hovered, var(--sjs-questionpanel-hovercolor, var(--sjs-general-backcolor-dark, rgb(248, 248, 248))));
+}
+survey-creator:not(.svd-simulator-content) .sv-list__item--hovered > .sv-list__item-body .sv-list__item-icon use,
+.svc-creator:not(.svd-simulator-content) .sv-list__item--hovered > .sv-list__item-body .sv-list__item-icon use {
+  fill: var(--ctr-list-item-icon-color-hovered, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
+}
+survey-creator:not(.svd-simulator-content) .sv-list__item--selected > .sv-list__item-body,
+survey-creator:not(.svd-simulator-content) .sv-list__item.sv-list__item--selected:hover > .sv-list__item-body,
+.svc-creator:not(.svd-simulator-content) .sv-list__item--selected > .sv-list__item-body,
+.svc-creator:not(.svd-simulator-content) .sv-list__item.sv-list__item--selected:hover > .sv-list__item-body {
+  color: var(--ctr-list-item-text-color-selected, var(--sjs-primary-forecolor, var(--primary-foreground, #fff)));
+  background: var(--ctr-list-item-background-color-selected, var(--sjs-primary-backcolor, var(--primary, #19b394)));
+}
+survey-creator:not(.svd-simulator-content) .sv-list__item--selected .sv-list__item-icon use,
+survey-creator:not(.svd-simulator-content) .sv-list__item.sv-list__item--selected:hover .sv-list__item-icon use,
+.svc-creator:not(.svd-simulator-content) .sv-list__item--selected .sv-list__item-icon use,
+.svc-creator:not(.svd-simulator-content) .sv-list__item.sv-list__item--selected:hover .sv-list__item-icon use {
+  fill: var(--ctr-list-item-icon-color-selected, var(--sjs-general-backcolor, var(--background, #fff)));
+}
+survey-creator:not(.svd-simulator-content) .sv-list__item--selected.sv-list__item--group > .sv-list__item-body,
+survey-creator:not(.svd-simulator-content) .sv-list__item.sv-list__item--selected:hover.sv-list__item--group > .sv-list__item-body,
+.svc-creator:not(.svd-simulator-content) .sv-list__item--selected.sv-list__item--group > .sv-list__item-body,
+.svc-creator:not(.svd-simulator-content) .sv-list__item.sv-list__item--selected:hover.sv-list__item--group > .sv-list__item-body {
+  background: var(--ctr-list-item-background-color-selected, var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1))));
+  color: var(--ctr-list-item-text-color-selected, var(--sjs-general-forecolor, var(--foreground, #161616)));
+  font-weight: 400;
+}
+survey-creator:not(.svd-simulator-content) .sv-list__item--selected.sv-list__item--group .sv-list__item-icon use,
+survey-creator:not(.svd-simulator-content) .sv-list__item.sv-list__item--selected:hover.sv-list__item--group .sv-list__item-icon use,
+.svc-creator:not(.svd-simulator-content) .sv-list__item--selected.sv-list__item--group .sv-list__item-icon use,
+.svc-creator:not(.svd-simulator-content) .sv-list__item.sv-list__item--selected:hover.sv-list__item--group .sv-list__item-icon use {
+  fill: var(--ctr-list-item-icon-color-hovered, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
+}
+survey-creator:not(.svd-simulator-content) .sv-popup--dropdown-overlay .sv-popup__button.sv-popup__button,
+.svc-creator:not(.svd-simulator-content) .sv-popup--dropdown-overlay .sv-popup__button.sv-popup__button {
+  color: var(--ctr-actionbar-button-text-color, var(--sjs-primary-backcolor, var(--primary, #19b394)));
+}
+survey-creator:not(.svd-simulator-content) .sv-popup--dropdown-overlay .sv-popup__body-footer,
+.svc-creator:not(.svd-simulator-content) .sv-popup--dropdown-overlay .sv-popup__body-footer {
+  background-color: var(--ctr-contextual-menu-footer-background-color, var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3)));
+  border-top: 1px solid var(--ctr-contextual-menu-footer-border-color, var(--sjs-border-light, var(--border-light, #eaeaea)));
+}
+survey-creator:not(.svd-simulator-content) .sv-popup--dropdown-overlay .sv-list__empty-container,
+.svc-creator:not(.svd-simulator-content) .sv-popup--dropdown-overlay .sv-list__empty-container {
+  background-color: var(--ctr-contextual-menu-background-color, var(--sjs-general-backcolor, var(--background, #fff)));
+}
+survey-creator:not(.svd-simulator-content) .sv-popup--dropdown-overlay .sv-popup__button:disabled,
+.svc-creator:not(.svd-simulator-content) .sv-popup--dropdown-overlay .sv-popup__button:disabled {
+  color: var(--ctr-actionbar-button-text-color-disabled, var(--sjs-general-forecolor, var(--foreground, #161616)));
+  opacity: var(--ctr-actionbar-button-opacity-disabled, 0.25);
+}
+survey-creator:not(.svd-simulator-content) .sv-popup--dropdown-overlay .sv-list__filter-clear-button svg use,
+.svc-creator:not(.svd-simulator-content) .sv-popup--dropdown-overlay .sv-list__filter-clear-button svg use {
+  fill: var(--ctr-list-item-icon-color, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
+}
+survey-creator:not(.svd-simulator-content) .sv-popup--dropdown-overlay .sv-list__input,
+.svc-creator:not(.svd-simulator-content) .sv-popup--dropdown-overlay .sv-list__input {
+  color: var(--ctr-list-item-text-color, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
+}
+survey-creator:not(.svd-simulator-content) .sv-popup--dropdown-overlay .sv-list__item:hover .sv-list__item-body,
+survey-creator:not(.svd-simulator-content) .sv-popup--dropdown-overlay .sv-list__item:focus .sv-list__item-body,
+survey-creator:not(.svd-simulator-content) .sv-popup--dropdown-overlay .sv-list__item--focused .sv-list__item-body,
+.svc-creator:not(.svd-simulator-content) .sv-popup--dropdown-overlay .sv-list__item:hover .sv-list__item-body,
+.svc-creator:not(.svd-simulator-content) .sv-popup--dropdown-overlay .sv-list__item:focus .sv-list__item-body,
+.svc-creator:not(.svd-simulator-content) .sv-popup--dropdown-overlay .sv-list__item--focused .sv-list__item-body {
+  background: var(--ctr-list-item-background-color-hovered, var(--sjs-general-backcolor, var(--background, #fff)));
+}
+survey-creator:not(.svd-simulator-content) .sv-popup--dropdown-overlay .sv-list__item:hover.sv-list__item--selected .sv-list__item-body,
+survey-creator:not(.svd-simulator-content) .sv-popup--dropdown-overlay .sv-list__item:focus.sv-list__item--selected .sv-list__item-body,
+survey-creator:not(.svd-simulator-content) .sv-popup--dropdown-overlay .sv-list__item--focused.sv-list__item--selected .sv-list__item-body,
+.svc-creator:not(.svd-simulator-content) .sv-popup--dropdown-overlay .sv-list__item:hover.sv-list__item--selected .sv-list__item-body,
+.svc-creator:not(.svd-simulator-content) .sv-popup--dropdown-overlay .sv-list__item:focus.sv-list__item--selected .sv-list__item-body,
+.svc-creator:not(.svd-simulator-content) .sv-popup--dropdown-overlay .sv-list__item--focused.sv-list__item--selected .sv-list__item-body {
+  background: var(--ctr-list-item-background-color-selected, var(--sjs-primary-backcolor, var(--primary, #19b394)));
+  color: var(--ctr-list-item-text-color-selected, var(--sjs-primary-forecolor, var(--primary-foreground, #fff)));
+}
+survey-creator:not(.svd-simulator-content) .sv-popup--dropdown-overlay .sv-list__item:hover .sv-list__item-icon use,
+survey-creator:not(.svd-simulator-content) .sv-popup--dropdown-overlay .sv-list__item:focus .sv-list__item-icon use,
+survey-creator:not(.svd-simulator-content) .sv-popup--dropdown-overlay .sv-list__item--focused .sv-list__item-icon use,
+.svc-creator:not(.svd-simulator-content) .sv-popup--dropdown-overlay .sv-list__item:hover .sv-list__item-icon use,
+.svc-creator:not(.svd-simulator-content) .sv-popup--dropdown-overlay .sv-list__item:focus .sv-list__item-icon use,
+.svc-creator:not(.svd-simulator-content) .sv-popup--dropdown-overlay .sv-list__item--focused .sv-list__item-icon use {
+  fill: var(--ctr-list-item-icon-color-hovered, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
+}
+survey-creator:not(.svd-simulator-content) .sv-popup--dropdown-overlay .sv-list__item:hover.sv-list__item--selected.sv-list__item--group > .sv-list__item-body,
+survey-creator:not(.svd-simulator-content) .sv-popup--dropdown-overlay .sv-list__item:focus.sv-list__item--selected.sv-list__item--group > .sv-list__item-body,
+survey-creator:not(.svd-simulator-content) .sv-popup--dropdown-overlay .sv-list__item--focused.sv-list__item--selected.sv-list__item--group > .sv-list__item-body,
+.svc-creator:not(.svd-simulator-content) .sv-popup--dropdown-overlay .sv-list__item:hover.sv-list__item--selected.sv-list__item--group > .sv-list__item-body,
+.svc-creator:not(.svd-simulator-content) .sv-popup--dropdown-overlay .sv-list__item:focus.sv-list__item--selected.sv-list__item--group > .sv-list__item-body,
+.svc-creator:not(.svd-simulator-content) .sv-popup--dropdown-overlay .sv-list__item--focused.sv-list__item--selected.sv-list__item--group > .sv-list__item-body {
+  background: var(--ctr-list-item-background-color-selected, var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1))));
+  color: var(--ctr-list-item-text-color-selected, var(--sjs-general-forecolor, var(--foreground, #161616)));
+  font-weight: 400;
+}
+survey-creator:not(.svd-simulator-content) .sv-popup--dropdown-overlay .sv-list__item:hover.sv-list__item--selected.sv-list__item--group .sv-list__item-icon use,
+survey-creator:not(.svd-simulator-content) .sv-popup--dropdown-overlay .sv-list__item:focus.sv-list__item--selected.sv-list__item--group .sv-list__item-icon use,
+survey-creator:not(.svd-simulator-content) .sv-popup--dropdown-overlay .sv-list__item--focused.sv-list__item--selected.sv-list__item--group .sv-list__item-icon use,
+.svc-creator:not(.svd-simulator-content) .sv-popup--dropdown-overlay .sv-list__item:hover.sv-list__item--selected.sv-list__item--group .sv-list__item-icon use,
+.svc-creator:not(.svd-simulator-content) .sv-popup--dropdown-overlay .sv-list__item:focus.sv-list__item--selected.sv-list__item--group .sv-list__item-icon use,
+.svc-creator:not(.svd-simulator-content) .sv-popup--dropdown-overlay .sv-list__item--focused.sv-list__item--selected.sv-list__item--group .sv-list__item-icon use {
+  fill: var(--ctr-list-item-icon-color-hovered, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
+}
+survey-creator:not(.svd-simulator-content) .sv-popup--dropdown-overlay .sd-btn,
+.svc-creator:not(.svd-simulator-content) .sv-popup--dropdown-overlay .sd-btn {
+  background: var(--ctr-button-background-color, rgba(0, 0, 0, 0));
+}
+survey-creator:not(.svd-simulator-content) .sv-dropdown-popup.sv-popup--dropdown-overlay .sv-popup__body-footer,
+.svc-creator:not(.svd-simulator-content) .sv-dropdown-popup.sv-popup--dropdown-overlay .sv-popup__body-footer {
+  background-color: var(--ctr-contextual-menu-footer-background-color, var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3)));
+}
+survey-creator:not(.svd-simulator-content) .sv-popup__content,
+.svc-creator:not(.svd-simulator-content) .sv-popup__content {
+  color: var(--ctr-popup-message-color, #404040);
+}
+
 survey-creator,
 .svc-creator {
   display: flex;
@@ -1640,7 +1919,7 @@ survey-creator ::-webkit-scrollbar-thumb,
   border: 4px solid rgba(0, 0, 0, 0);
   background-clip: padding-box;
   border-radius: 32px;
-  background-color: var(--sjs-border-default, var(--border, #d6d6d6));
+  background-color: var(--ctr-scrollbar-background-color, var(--sjs-border-default, var(--border, #d6d6d6)));
 }
 survey-creator ::-webkit-scrollbar-track,
 .svc-creator ::-webkit-scrollbar-track {
@@ -1649,9 +1928,16 @@ survey-creator ::-webkit-scrollbar-track,
 survey-creator ::-webkit-scrollbar-thumb:hover,
 .svc-creator ::-webkit-scrollbar-thumb:hover {
   border: 2px solid rgba(0, 0, 0, 0);
-  background-color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
+  background-color: var(--ctr-scrollbar-background-color, var(--sjs-border-default, var(--border, #d6d6d6)));
+}
+survey-creator .sv-popup .sv-popup__scrolling-content ::-webkit-scrollbar-thumb:hover,
+.svc-creator .sv-popup .sv-popup__scrolling-content ::-webkit-scrollbar-thumb:hover {
+  background-color: var(--ctr-scrollbar-background-color, var(--sjs-border-default, var(--border, #d6d6d6)));
 }
 
+survey-creator .sv-drag-drop-choices-shortcut .sv-drag-drop-choices-shortcut__content {
+  background: var(--ctr-survey-radio-button-group-item-background-color-floating, var(--sjs-general-backcolor, var(--background, #fff)));
+}
 .svc-creator__area {
   position: relative;
   -moz-user-select: none;
@@ -1706,7 +1992,7 @@ survey-creator ::-webkit-scrollbar-thumb:hover,
 .svc-creator__banner {
   width: 100%;
   line-height: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  background-color: var(--sjs-secondary-backcolor, var(--secondary, #ff9814));
+  background-color: var(--ctr-page-banner-background-color, var(--sjs-secondary-backcolor, var(--secondary, #ff9814)));
   text-align: center;
 }
 
@@ -1718,12 +2004,12 @@ survey-creator ::-webkit-scrollbar-thumb:hover,
   background-color: var(--sjs-general-backcolor, var(--background, #fff));
   /* Shadow / Medium */
   border-radius: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  box-shadow: var(--sjs-shadow-medium, 0px 2px 6px 0px rgba(0, 0, 0, 0.1));
+  box-shadow: 0px 2px 6px 0px var(--ctr-shadow-medium-color, rgba(0, 0, 0, 0.1));
   transition: max-width 0.1s ease-in-out, padding 0.2s ease-in-out;
 }
 
 .svc-creator__non-commercial-text {
-  color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
+  color: var(--ctr-page-banner-text-color, var(--sjs-primary-forecolor, var(--primary-foreground, #fff)));
   --default-bold-font-size: var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))));
   font-family: var(--sjs-font-family, var(--font-family));
   font-style: normal;
@@ -1735,7 +2021,7 @@ survey-creator ::-webkit-scrollbar-thumb:hover,
   display: block;
 }
 .svc-creator__non-commercial-text a {
-  color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
+  color: var(--ctr-page-banner-text-color, var(--sjs-primary-forecolor, var(--primary-foreground, #fff)));
 }
 
 .svc-creator--mobile .svc-creator__non-commercial-text {
@@ -1781,7 +2067,7 @@ survey-creator ::-webkit-scrollbar-thumb:hover,
 }
 .svc-string-editor .sv-string-editor[aria-placeholder]:empty:before {
   content: attr(aria-placeholder);
-  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
+  color: var(--ctr-survey-page-header-title-color-placeholder, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
 }
 .svc-string-editor .sv-string-editor--html,
 .svc-string-editor .sv-string-editor:focus-within {
@@ -1888,7 +2174,7 @@ survey-creator ::-webkit-scrollbar-thumb:hover,
   left: calc(-0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   right: calc(-0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   border-radius: 3px;
-  box-shadow: 0px 0px 0px calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px)))) rgba(0, 0, 0, 0.16);
+  box-shadow: 0px 0px 0px calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px)))) var(--sjs-border-inside, var(--border-inside, rgba(0, 0, 0, 0.16)));
 }
 
 .svc-string-editor:focus-within .svc-string-editor__border {
@@ -1900,11 +2186,11 @@ survey-creator ::-webkit-scrollbar-thumb:hover,
   border-radius: 3px;
   box-sizing: content-box;
   background-color: var(--sjs-general-backcolor, var(--background, #fff));
-  box-shadow: var(--sjs-shadow-medium, 0px 2px 6px 0px rgba(0, 0, 0, 0.1)), 0px 0px 0px calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px)))) var(--sjs-primary-backcolor, var(--primary, #19b394));
+  box-shadow: 0px 2px 6px 0px var(--ctr-shadow-medium-color, rgba(0, 0, 0, 0.1)), 0px 0px 0px calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px)))) var(--sjs-primary-backcolor, var(--primary, #19b394));
 }
 
 .svc-string-editor.svc-string-editor--error:focus-within .svc-string-editor__border {
-  box-shadow: var(--sjs-shadow-medium, 0px 2px 6px 0px rgba(0, 0, 0, 0.1)), 0px 0px 0px calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px)))) var(--sjs-special-red, var(--red, #e60a3e));
+  box-shadow: 0px 2px 6px 0px var(--ctr-shadow-medium-color, rgba(0, 0, 0, 0.1)), 0px 0px 0px calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px)))) var(--sjs-special-red, var(--red, #e60a3e));
 }
 
 .sd-boolean .sv-string-editor:focus-within {
@@ -1951,8 +2237,8 @@ survey-creator ::-webkit-scrollbar-thumb:hover,
   line-height: calc(7 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   vertical-align: baseline;
   text-align: center;
-  background-color: var(--sjs-general-backcolor, var(--background, #fff));
-  box-shadow: var(--sjs-shadow-small, 0px 1px 2px 0px rgba(0, 0, 0, 0.15));
+  background-color: var(--ctr-button-background-color, var(--sjs-general-backcolor, var(--background, #fff)));
+  box-shadow: 0px 1px 2px 0px var(--ctr-shadow-small-color, rgba(0, 0, 0, 0.15));
   border-radius: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   cursor: pointer;
   user-select: none;
@@ -1963,15 +2249,15 @@ survey-creator ::-webkit-scrollbar-thumb:hover,
   align-items: center;
   flex-grow: 1;
   justify-content: center;
-  color: var(--sjs-primary-backcolor, var(--primary, #19b394));
+  color: var(--ctr-button-text-color, var(--sjs-primary-backcolor, var(--primary, #19b394)));
 }
 
 .svc-btn:hover {
-  background-color: var(--sjs-questionpanel-hovercolor, var(--sjs-general-backcolor-dark, rgb(248, 248, 248)));
+  background-color: var(--ctr-button-background-color-hovered, var(--sjs-questionpanel-hovercolor, var(--sjs-general-backcolor-dark, rgb(248, 248, 248))));
 }
 
 .svc-btn:focus {
-  box-shadow: 0 0 0 2px var(--sjs-primary-backcolor, var(--primary, #19b394));
+  box-shadow: 0 0 0 2px var(--ctr-button-border-color-focused, var(--sjs-primary-backcolor, var(--primary, #19b394)));
 }
 
 .svc-action-button {
@@ -1979,24 +2265,27 @@ survey-creator ::-webkit-scrollbar-thumb:hover,
   padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   box-sizing: border-box;
   border-radius: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  color: var(--sjs-primary-backcolor, var(--primary, #19b394));
+  color: var(--ctr-survey-action-button-text-color-positive, var(--sjs-primary-backcolor, var(--primary, #19b394)));
   font-weight: 600;
   font-size: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   line-height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   border: calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px)))) solid transparent;
 }
+.svc-action-button .svc-text {
+  color: var(--ctr-survey-action-button-text-color-positive, var(--sjs-primary-backcolor, var(--primary, #19b394)));
+}
 .svc-action-button:focus, .svc-action-button:hover {
-  background-color: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
+  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;
 }
 
 .svc-action-button--selected {
-  border-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
+  border-color: var(--ctr-survey-action-button-text-color-positive, var(--sjs-primary-backcolor, var(--primary, #19b394)));
 }
 
 .svc-action-button--disabled {
-  opacity: 0.25;
-  color: var(--sjs-general-forecolor, var(--foreground, #161616));
+  opacity: var(--ctr-survey-action-button-opacity-disabled, 0.25);
+  color: var(--ctr-survey-action-button-text-color-disabled, var(--sjs-general-forecolor, var(--foreground, #161616)));
 }
 /*!****************************************************************************************************************************************************************************************************!*\
   !*** 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/page-navigator/page-navigator.scss ***!
@@ -2016,7 +2305,7 @@ svc-page-navigator,
   cursor: pointer;
 }
 .svc-page-navigator__navigator-icon use {
-  fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
+  fill: var(--ctr-page-navigator-button-icon-color, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
 }
 
 .svc-page-navigator__selector {
@@ -2033,20 +2322,20 @@ survey-creator .svc-page-navigator__selector:hover, survey-creator .svc-page-nav
 survey-creator .svc-page-navigator__selector:hover .svc-page-navigator__navigator-icon, survey-creator .svc-page-navigator__selector:focus .svc-page-navigator__navigator-icon,
 .svc-creator .svc-page-navigator__selector:hover .svc-page-navigator__navigator-icon,
 .svc-creator .svc-page-navigator__selector:focus .svc-page-navigator__navigator-icon {
-  background-color: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
+  background-color: var(--ctr-page-navigator-button-background-color-hovered, var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1))));
 }
 survey-creator .svc-page-navigator__selector:hover .svc-page-navigator__navigator-icon use, survey-creator .svc-page-navigator__selector:focus .svc-page-navigator__navigator-icon use,
 .svc-creator .svc-page-navigator__selector:hover .svc-page-navigator__navigator-icon use,
 .svc-creator .svc-page-navigator__selector:focus .svc-page-navigator__navigator-icon use {
-  fill: var(--sjs-primary-backcolor, var(--primary, #19b394));
+  fill: var(--ctr-page-navigator-button-icon-color-hovered, var(--sjs-primary-backcolor, var(--primary, #19b394)));
 }
 
 .svc-page-navigator__selector--opened .svc-page-navigator__navigator-icon {
   background-color: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
-  opacity: 0.5;
+  opacity: var(--ctr-page-navigator-button-opacity-pressed, 0.5);
 }
 .svc-page-navigator__selector--opened .svc-page-navigator__navigator-icon use {
-  fill: var(--sjs-primary-backcolor, var(--primary, #19b394));
+  fill: var(--ctr-page-navigator-button-icon-color-hovered, var(--sjs-primary-backcolor, var(--primary, #19b394)));
 }
 
 .svc-page-navigator__popup {
@@ -2139,11 +2428,11 @@ svc-page-navigator-item,
   box-sizing: content-box;
   position: absolute;
   border-radius: 50%;
-  width: 6px;
-  height: 6px;
+  width: var(--ctr-page-navigator-item-dot-radius-small, 6px);
+  height: var(--ctr-page-navigator-item-dot-radius-small, 6px);
   right: calc(50% - 3px);
   top: calc(50% - 3px);
-  background: var(--sjs-border-default, var(--border, #d6d6d6));
+  background: var(--ctr-page-navigator-item-dot-color-default, var(--sjs-border-default, var(--border, #d6d6d6)));
 }
 
 .svc-page-navigator-item--selected .svc-page-navigator-item__dot {
@@ -2151,8 +2440,8 @@ svc-page-navigator-item,
   height: var(--sjs-base-unit, var(--base-unit, 8px));
   right: calc(50% - 1.5 * var(--sjs-base-unit, var(--base-unit, 8px)) / 2);
   top: calc(50% - 1.5 * var(--sjs-base-unit, var(--base-unit, 8px)) / 2);
-  background: var(--sjs-general-backcolor, var(--background, #fff));
-  border: calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px)))) solid var(--sjs-primary-backcolor, var(--primary, #19b394));
+  background: var(--ctr-page-navigator-item-dot-color-selected, var(--sjs-general-backcolor, var(--background, #fff)));
+  border: calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px)))) solid var(--ctr-page-navigator-item-dot-border-color-selected, var(--sjs-primary-backcolor, var(--primary, #19b394)));
 }
 
 .svc-page-navigator-item__banner {
@@ -2171,9 +2460,9 @@ svc-page-navigator-item,
   position: absolute;
   top: 0;
   height: 100%;
-  background-color: var(--sjs-general-backcolor, var(--background, #fff));
+  background-color: var(--ctr-page-navigator-item-background-color-hovered, var(--sjs-general-backcolor, var(--background, #fff)));
   border-radius: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  box-shadow: var(--sjs-shadow-medium, 0px 2px 6px 0px rgba(0, 0, 0, 0.1));
+  box-shadow: 0px 2px 6px 0px var(--ctr-shadow-medium-color, rgba(0, 0, 0, 0.1));
   transition: max-width 0.1s ease-in-out, padding 0.2s ease-in-out;
 }
 .svc-page-navigator-item__banner .svc-page-navigator-item__dot {
@@ -2182,6 +2471,9 @@ svc-page-navigator-item,
   top: calc(1.75 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   right: calc(1.75 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
+.svc-page-navigator-item__banner .svc-text {
+  color: var(--ctr-page-navigator-item-text-color-hovered);
+}
 
 .svc-creator__toolbox--right .svc-page-navigator-item__banner,
 [dir=rtl] .svc-page-navigator-item__banner,
@@ -2202,7 +2494,7 @@ svc-page-navigator-item,
   width: var(--sjs-base-unit, var(--base-unit, 8px));
   height: var(--sjs-base-unit, var(--base-unit, 8px));
   border: none;
-  background: var(--sjs-primary-backcolor, var(--primary, #19b394));
+  background: var(--ctr-page-navigator-item-dot-color-hovered, var(--sjs-primary-backcolor, var(--primary, #19b394)));
 }
 
 .svc-page-navigator-item-content:not(.svc-page-navigator-item--selected):hover .svc-page-navigator-item__banner,
@@ -2210,6 +2502,7 @@ svc-page-navigator-item,
   padding: 0 calc(4.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0 calc(2.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   max-width: calc(25 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   opacity: 1;
+  background: var(--ctr-page-navigator-item-background-color-hovered, var(--sjs-general-backcolor, var(--background, #fff)));
 }
 
 .svc-creator__toolbox--right .svc-page-navigator-item-content:not(.svc-page-navigator-item--selected):hover .svc-page-navigator-item__banner,
@@ -2238,7 +2531,11 @@ svc-page {
   margin-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .svc-page .sd-page__title {
-  margin: calc(2.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0 0 0;
+  margin: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0 0 0;
+  color: var(--ctr-survey-page-header-title-color-placeholder, var(--sjs-general-dim-forecolor, rgba(0, 0, 0, 0.91)));
+}
+.svc-page .svc-panel__placeholder {
+  color: var(--ctr-survey-page-placeholder-text-color, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
 }
 
 .svc-page__content {
@@ -2256,29 +2553,107 @@ svc-page {
 
 .svc-page__content-actions {
   position: absolute;
-  display: none;
+  visibility: hidden;
   top: var(--sjs-base-unit, var(--base-unit, 8px));
   inset-inline-end: 0;
   padding: 0 calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   z-index: 1;
 }
+.svc-page__content-actions .sv-action-bar-separator {
+  margin: 0 var(--sjs-base-unit, var(--base-unit, 8px));
+}
+.svc-page__content-actions h4.sd-title .sv-string-editor[aria-placeholder]:empty:before {
+  color: var(--ctr-survey-page-header-title-color-placeholder, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
+}
+
+.svc-page__content-actions .sv-action-bar-item {
+  border-radius: var(--ctr-survey-page-toolbar-item-corner-radius, 4px);
+  background-color: transparent;
+  color: var(--ctr-survey-page-toolbar-item-text-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
+}
+.svc-page__content-actions .sv-action-bar-item__icon use {
+  fill: var(--ctr-survey-question-panel-toolbar-item-icon-color, var(--sjs-secondary-backcolor, var(--secondary, #ff9814)));
+}
+.svc-page__content-actions .sv-action-bar-item:not(.sv-action-bar-item--pressed):hover:enabled,
+.svc-page__content-actions .sv-action-bar-item:not(.sv-action-bar-item--pressed):focus:enabled {
+  background-color: var(--ctr-survey-question-panel-toolbar-item-background-color-hovered, var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3)));
+}
+.svc-page__content-actions .sv-action-bar-item:not(.sv-action-bar-item--pressed):active:enabled {
+  opacity: var(--ctr-survey-question-panel-toolbar-item-opacity-pressed, 0.5);
+}
+.svc-page__content-actions .sv-action-bar-item:disabled {
+  opacity: var(--ctr-survey-question-panel-toolbar-item-opacity-disabled, 0.25);
+}
+.svc-page__content-actions .sv-action-bar-item--secondary .sv-action-bar-item__icon use {
+  fill: var(--ctr-survey-question-panel-toolbar-item-icon-color, var(--sjs-secondary-backcolor, var(--secondary, #ff9814)));
+}
+.svc-page__content-actions .sv-action-bar-item--active .sv-action-bar-item__icon use {
+  fill: var(--ctr-survey-question-panel-toolbar-item-icon-color, var(--sjs-secondary-backcolor, var(--secondary, #ff9814)));
+}
+.svc-page__content-actions .sv-action-bar-item-dropdown {
+  border-radius: calcCornerRadius(0.5);
+  background-color: transparent;
+}
+.svc-page__content-actions .sv-action-bar-item--pressed:not(.sv-action-bar-item--active) {
+  background-color: var(--ctr-survey-page-toolbar-item-background-color-selected, var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3)));
+  opacity: var(--ctr-survey-question-panel-toolbar-item-opacity-pressed, 50%);
+}
 
 .svc-page__content:not(.svc-page__content--new):focus,
 .svc-hovered.svc-page__content:not(.svc-page__content--new) {
-  background: var(--sjs-secondary-backcolor-semi-light, rgba(255, 152, 20, 0.1));
+  box-shadow: 0 0 0 2px var(--sjs-secondary-backcolor-light, var(--secondary-light, rgba(255, 152, 20, 0.25)));
+  background: var(--ctr-survey-page-background-color-hovered, var(--sjs-secondary-backcolor-semi-light, rgba(255, 152, 20, 0.1)));
 }
 
+.svc-page .svc-page__content--collapsed::after {
+  content: "";
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  border: 2px var(--sjs-border-default, var(--border, #d6d6d6)) dashed;
+  margin: -2px;
+  border-radius: calc(1.25 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  box-sizing: content-box;
+  pointer-events: none;
+}
+
+.svc-creator .svc-page .svc-page__content--selected::after,
+.svc-creator .svc-page .svc-page__content--selected:focus::after,
+.svc-hovered.svc-page__content::after {
+  display: none;
+}
 .svc-creator .svc-page .svc-page__content--selected.svc-page__content--selected,
 .svc-creator .svc-page .svc-page__content--selected:focus.svc-page__content--selected,
-.svc-hovered.svc-page__content--selected {
-  box-shadow: 0 0 0 2px inset var(--sjs-secondary-backcolor, var(--secondary, #ff9814));
+.svc-hovered.svc-page__content.svc-page__content--selected {
+  box-shadow: 0 0 0 2px var(--sjs-secondary-backcolor, var(--secondary, #ff9814));
   background: var(--sjs-secondary-backcolor-semi-light, rgba(255, 152, 20, 0.1));
 }
-.svc-creator .svc-page .svc-page__content--selected.svc-page__content--selected .svc-page__content-actions,
-.svc-creator .svc-page .svc-page__content--selected:focus.svc-page__content--selected .svc-page__content-actions,
-.svc-hovered.svc-page__content--selected .svc-page__content-actions {
+.svc-creator .svc-page .svc-page__content--selected .svc-page__content-actions,
+.svc-creator .svc-page .svc-page__content--selected:focus .svc-page__content-actions,
+.svc-hovered.svc-page__content .svc-page__content-actions {
+  visibility: visible;
+}
+
+.svc-creator--mobile .svc-page .svc-page__content--collapsed::after {
+  margin: 0;
+  border-radius: var(--sjs-base-unit, var(--base-unit, 8px));
+}
+.svc-creator--mobile.svc-creator .svc-page .svc-page__content--selected.svc-page__content--selected, .svc-creator--mobile.svc-creator .svc-page .svc-page__content--selected:focus.svc-page__content--selected,
+.svc-creator--mobile .svc-hovered.svc-page__content.svc-page__content--selected {
+  box-shadow: 0 0 0 2px inset var(--sjs-secondary-backcolor, var(--secondary, #ff9814));
+  box-shadow: 0 0 0 2px inset var(--ctr-survey-page-border-color-selected, var(--sjs-secondary-backcolor, var(--secondary, #ff9814)));
+  background: var(--ctr-survey-page-background-color-selected, var(--sjs-secondary-backcolor-semi-light, rgba(255, 152, 20, 0.1)));
+}
+.svc-creator--mobile.svc-creator .svc-page .svc-page__content--selected.svc-page__content--selected .svc-page__content-actions, .svc-creator--mobile.svc-creator .svc-page .svc-page__content--selected:focus.svc-page__content--selected .svc-page__content-actions,
+.svc-creator--mobile .svc-hovered.svc-page__content.svc-page__content--selected .svc-page__content-actions {
   display: block;
 }
+.svc-creator--mobile .svc-page__content:not(.svc-page__content--new):focus,
+.svc-creator--mobile .svc-hovered.svc-page__content:not(.svc-page__content--new) {
+  box-shadow: 0 0 0 2px inset var(--sjs-secondary-backcolor-light, var(--secondary-light, rgba(255, 152, 20, 0.25)));
+}
 
 .svc-page__footer {
   overflow: visible;
@@ -2316,13 +2691,13 @@ svc-page {
   outline: none;
 }
 .svc-page__question-type-selector use {
-  fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
+  fill: var(--ctr-library-contextual-button-icon-color, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
 }
 .svc-page__question-type-selector:hover {
-  background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
+  background-color: var(--ctr-button-contextual-button-background-color-hovered, var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3)));
 }
 .svc-page__question-type-selector:focus {
-  background-color: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
+  background-color: var(--ctr-button-contextual-button-background-color-focused, var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1))));
 }
 
 .svc-page--drag-over-empty:after {
@@ -2372,6 +2747,45 @@ svc-page {
 .svc-question__adorner .sv-popup--overlay .sv-list__item.sv-list__item--selected.sv-list__item--group > .sv-list__item-body use {
   fill: var(--sjs-general-backcolor, var(--background, #fff));
 }
+
+.svc-page__content--collapsed > * {
+  display: none;
+}
+.svc-page__content--collapsed .svc-page__content-actions {
+  display: block;
+}
+.svc-page__content--collapsed .sd-page {
+  display: flex;
+}
+.svc-page__content--collapsed .sd-page > * {
+  display: none;
+}
+.svc-page__content--collapsed .sd-page .sd-title {
+  display: block;
+}
+
+.svc-page__content.svc-page__content--collapsed .sd-page {
+  padding-bottom: 0;
+}
+
+.svc-creator .svc-page .svc-page__content--collapse-always .svc-page__content-actions {
+  visibility: visible;
+}
+.svc-creator .svc-page .svc-page__content--collapse-always .svc-page__content-actions .sv-action {
+  visibility: hidden;
+}
+.svc-creator .svc-page .svc-page__content--collapse-always .svc-page__content-actions .sv-action.sv-action-bar-item--collapse {
+  visibility: visible;
+}
+.svc-creator .svc-page .svc-page__content--collapse-always .svc-page__content-actions .sv-action.sv-action-bar-item--collapse .sv-action-bar-separator {
+  visibility: hidden;
+}
+.svc-creator .svc-page .svc-page__content--collapse-always.svc-page__content--selected .svc-page__content-actions .sv-action, .svc-creator .svc-page .svc-page__content--collapse-always.svc-hovered .svc-page__content-actions .sv-action {
+  visibility: visible;
+}
+.svc-creator .svc-page .svc-page__content--collapse-always.svc-page__content--selected .svc-page__content-actions .sv-action .sv-action-bar-separator, .svc-creator .svc-page .svc-page__content--collapse-always.svc-hovered .svc-page__content-actions .sv-action .sv-action-bar-separator {
+  visibility: visible;
+}
 /*!**************************************************************************************************************************************************************************!*\
   !*** 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/row.scss ***!
   \**************************************************************************************************************************************************************************/
@@ -2503,12 +2917,12 @@ svc-page {
   width: 100%;
   padding: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(8 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   border-radius: var(--sjs-base-unit, var(--base-unit, 8px));
-  background-color: #F8F8F8;
+  background-color: var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9));
   text-align: center;
   font-weight: 400;
   font-size: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   line-height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  color: rgba(0, 0, 0, 0.45);
+  color: var(--sjs-general-dim-forecolor-light, rgba(0, 0, 0, 0.45));
 }
 
 @container (max-width: 176px) {
@@ -2558,7 +2972,43 @@ svc-question {
 }
 .svc-question__adorner .sv-action-bar .sv-action:not(:first-child) .sv-action-bar-item:active {
   opacity: 0.5;
-  background-color: var(--background-dim, #f3f3f3);
+  background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
+}
+
+.svc-question__adorner .sv-action-bar-item {
+  background-color: transparent;
+  color: var(--ctr-survey-question-panel-toolbar-item-text-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
+}
+.svc-question__adorner .sv-action-bar-item__icon use {
+  fill: var(--ctr-survey-question-panel-toolbar-item-icon-color, var(--sjs-secondary-backcolor, var(--secondary, #ff9814)));
+}
+.svc-question__adorner .sv-action-bar-item:not(.sv-action-bar-item--pressed):hover:enabled,
+.svc-question__adorner .sv-action-bar-item:not(.sv-action-bar-item--pressed):focus:enabled {
+  background-color: var(--ctr-survey-question-panel-toolbar-item-background-color-hovered, var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3)));
+}
+.svc-question__adorner .sv-action-bar-item:not(.sv-action-bar-item--pressed):active:enabled {
+  opacity: var(--ctr-survey-question-panel-toolbar-item-opacity-pressed, 0.5);
+}
+.svc-question__adorner .sv-action-bar-item:disabled {
+  opacity: var(--ctr-survey-question-panel-toolbar-item-opacity-disabled, 0.25);
+}
+.svc-question__adorner .sv-action-bar-item--secondary .sv-action-bar-item__icon use {
+  fill: var(--ctr-survey-question-panel-toolbar-item-icon-color, var(--sjs-secondary-backcolor, var(--secondary, #ff9814)));
+}
+.svc-question__adorner .sv-action-bar-item--active .sv-action-bar-item__icon use {
+  fill: var(--ctr-survey-question-panel-toolbar-item-icon-color, var(--sjs-secondary-backcolor, var(--secondary, #ff9814)));
+}
+.svc-question__adorner .sv-action-bar-item-dropdown {
+  background-color: transparent;
+}
+.svc-question__adorner .sv-action-bar-item--pressed:not(.sv-action-bar-item--active) {
+  background-color: var(--ctr-survey-question-panel-toolbar-item-background-color-selected, var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3)));
+  opacity: var(--ctr-survey-question-panel-toolbar-item-opacity-pressed, 50%);
+}
+.svc-question__adorner .sv-action-bar-item.svc-required-action--active:not(.sv-action-bar-item--pressed):enabled:hover,
+.svc-question__adorner .sv-action-bar-item.svc-required-action--active:not(.sv-action-bar-item--pressed):enabled:focus,
+.svc-question__adorner .sv-action-bar-item.svc-required-action--active {
+  background-color: var(--sjs-secondary-backcolor-semi-light, rgba(255, 152, 20, 0.1));
 }
 
 .svc-question__content {
@@ -2573,7 +3023,7 @@ svc-question {
   box-sizing: border-box;
   padding: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(8 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   background: var(--sjs-general-backcolor, var(--background, #fff));
-  box-shadow: var(--sjs-shadow-small, 0px 1px 2px 0px rgba(0, 0, 0, 0.15));
+  box-shadow: 0px 1px 2px 0px var(--ctr-shadow-small-color, rgba(0, 0, 0, 0.15));
   outline: none;
 }
 
@@ -2586,6 +3036,9 @@ svc-question {
   padding-left: 0;
   margin-left: 0;
 }
+.svc-question__content .sd-selectbase--multi-column {
+  overflow: initial;
+}
 .svc-question__content .sd-question.sd-question--table {
   overflow-x: initial;
 }
@@ -2639,6 +3092,9 @@ svc-question {
 .svc-question__content-actions .sv-action--convertTo {
   max-width: max-content;
 }
+.svc-question__content-actions .sv-action--convertTo .sv-action-bar-item {
+  flex-direction: row-reverse;
+}
 .svc-question__content-actions .sv-action--convertTo .sv-action-bar-item--icon {
   max-width: 100%;
   padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
@@ -2646,24 +3102,15 @@ svc-question {
 .svc-question__content-actions .sv-action--convertTo .sv-action-bar-item__title {
   display: inline-block;
   justify-content: left;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
 }
-.svc-question__content-actions .sv-action--convertTo .sv-action-bar-item__title::after {
-  content: " ";
-  display: inline-block;
+.svc-question__content-actions .sv-action--convertTo .sv-action-bar-item__icon {
   margin-inline-start: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  width: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  vertical-align: bottom;
-  background-image: url("data:image/svg+xml,%3Csvg width=%2716%27 height=%2716%27 viewBox=%270 0 16 16%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M8 11L13 6H3L8 11Z%27 fill=%27%23ff9814%27/%3E%3C/svg%3E%0A");
 }
-.svc-question__content-actions .sv-action--convertTo .sv-action-bar-item__icon use {
-  fill: var(--sjs-primary-backcolor, var(--primary, #19b394));
+.svc-question__content-actions .sv-action--convertTo .sv-action-bar-item__icon:last-child {
+  margin-inline-start: 0;
 }
-.svc-question__content-actions .sv-action--convertTo .sv-action-bar-item__icon:not(:last-child) {
-  display: none;
+.svc-question__content-actions .sv-action--convertTo .sv-action-bar-item__icon:last-child use {
+  fill: var(--sjs-primary-backcolor, var(--primary, #19b394));
 }
 .svc-question__content-actions .sv-action--convertTo .sv-action-bar-item__title--with-icon {
   margin-inline-start: 0;
@@ -2729,13 +3176,13 @@ svc-question {
 .svc-dragged-element-shortcut {
   height: auto;
   border-radius: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  background-color: var(--sjs-general-backcolor, var(--background, #fff));
-  color: var(--sjs-general-forecolor, var(--foreground, #161616));
+  background-color: var(--ctr-toolbox-item-background-color-hovered, 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))));
   cursor: grabbing;
   position: absolute;
   z-index: 1000;
-  box-shadow: var(--sjs-shadow-large, 0px 8px 16px 0px rgba(0, 0, 0, 0.1));
+  box-shadow: 0px 8px 16px 0px var(--ctr-shadow-large-color, rgba(0, 0, 0, 0.1));
   -moz-user-select: none;
   -webkit-user-select: none;
   -ms-user-select: none;
@@ -2747,11 +3194,11 @@ svc-question {
 }
 
 .svc-dragged-element-shortcut .sv-svg-icon use {
-  fill: var(--sjs-primary-backcolor, var(--primary, #19b394));
+  fill: var(--ctr-toolbox-item-icon-color-hovered, var(--sjs-primary-backcolor, var(--primary, #19b394)));
 }
 
 .svc-dragged-element-shortcut--selected {
-  border: 2px solid var(--sjs-secondary-backcolor, var(--secondary, #ff9814));
+  border: 2px solid var(--ctr-toolbox-item-border-color-floating, var(--sjs-secondary-backcolor, var(--secondary, #ff9814)));
 }
 
 .svc-dragged-element-shortcut__text {
@@ -2918,32 +3365,32 @@ svc-question .sv-action-bar,
   z-index: 1;
 }
 
-.svc-question__adorner--collapsed .svc-question__content > * {
+.svc-question__adorner .svc-question__content--collapsed > * {
   display: none;
 }
-.svc-question__adorner--collapsed .svc-question__content .svc-question__drag-area {
+.svc-question__adorner .svc-question__content--collapsed .svc-question__drag-area {
   display: flex;
 }
-.svc-question__adorner--collapsed .svc-question__content .sd-element {
+.svc-question__adorner .svc-question__content--collapsed .sd-element {
   display: block;
 }
-.svc-question__adorner--collapsed .svc-question__content .sd-element > *:not(.sd-element__header) {
+.svc-question__adorner .svc-question__content--collapsed .sd-element > *:not(.sd-element__header) {
   display: none;
 }
-.svc-question__adorner--collapsed .svc-question__content .sd-element .sd-element__header > *:not(.sd-element__title) {
+.svc-question__adorner .svc-question__content--collapsed .sd-element .sd-element__header > *:not(.sd-element__title) {
   display: none;
 }
-.svc-question__adorner--collapsed .svc-question__content .sd-element .sd-element__header .sd-element__title,
-.svc-question__adorner--collapsed .svc-question__content .sd-element .sd-element__header .sd-title.sd-element__title.sd-element__title--hidden {
+.svc-question__adorner .svc-question__content--collapsed .sd-element .sd-element__header .sd-element__title,
+.svc-question__adorner .svc-question__content--collapsed .sd-element .sd-element__header .sd-title.sd-element__title.sd-element__title--hidden {
   display: block;
 }
 
-.svc-question__adorner--collapsed .svc-question__content {
+.svc-question__adorner .svc-question__content--collapsed {
   flex-grow: 0;
   padding-bottom: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
-.svc-question__adorner--collapsed .svc-question__content .sd-element__header,
-.svc-question__adorner--collapsed .svc-question__content .sd-element--complex > .sd-element__header {
+.svc-question__adorner .svc-question__content--collapsed .sd-element__header,
+.svc-question__adorner .svc-question__content--collapsed .sd-element--complex > .sd-element__header {
   padding-top: 0;
   padding-bottom: 0;
 }
@@ -2951,10 +3398,10 @@ svc-question .sv-action-bar,
 .svc-creator--mobile .svc-question__top-actions {
   padding: 0;
 }
-.svc-creator--mobile .svc-question__adorner--collapsed .svc-question__content {
+.svc-creator--mobile .svc-question__adorner .svc-question__content--collapsed {
   padding-bottom: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
-.svc-creator--mobile .svc-question__adorner--collapsed .svc-question__content--selected {
+.svc-creator--mobile .svc-question__adorner .svc-question__content--collapsed.svc-question__content--selected {
   padding-bottom: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
@@ -2977,7 +3424,7 @@ svc-question .sv-action-bar,
   visibility: hidden;
 }
 .svc-question__drag-element use {
-  fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
+  fill: var(--ctr-survey-question-panel-drag-area-drag-indicator-color, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
 }
 
 .sd-panel .svc-question__content--image:not(.svc-question__content--empty) {
@@ -3113,7 +3560,7 @@ svc-question .sv-action-bar,
   justify-content: center;
   margin: var(--sjs-base-unit, var(--base-unit, 8px)) calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   line-height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  color: var(--sjs-primary-backcolor, var(--primary, #19b394));
+  color: var(--ctr-survey-action-button-text-color-positive, var(--sjs-primary-backcolor, var(--primary, #19b394)));
   text-wrap: nowrap;
 }
 
@@ -3183,7 +3630,7 @@ svc-question .sv-action-bar,
   right: 0;
 }
 .svc-panel__question-type-selector use {
-  fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
+  fill: var(--ctr-library-contextual-button-icon-color, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
 }
 .svc-panel__question-type-selector:hover {
   background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
@@ -3266,12 +3713,6 @@ svc-question .sv-action-bar,
   fill: var(--sjs-secondary-backcolor, var(--secondary, #ff9814));
 }
 
-.svc-required-action--active:not(.sv-action-bar-item--pressed):enabled:hover,
-.svc-required-action--active:not(.sv-action-bar-item--pressed):enabled:focus,
-.svc-required-action--active {
-  background-color: var(--sjs-secondary-backcolor-semi-light, rgba(255, 152, 20, 0.1));
-}
-
 .svc-question__adorner .sv-ranking:not(.sv-ranking--select-to-rank) .svc-question__content--ranking .svc-carry-forward-panel {
   margin-top: 0;
 }
@@ -3303,12 +3744,13 @@ svc-question .sv-action-bar,
 .svc-question__top-actions .sv-action-bar-item:hover, .svc-question__top-actions .sv-action-bar-item:focus {
   opacity: initial;
 }
-.svc-question__top-actions .sv-action-bar-item use {
+.svc-question__top-actions .sv-action-bar-item .sv-action-bar-item__icon use {
   fill: var(--sjs-general-dim-forecolor-light, rgba(0, 0, 0, 0.45));
 }
 
-.svc-question__adorner--collapse-onhover.svc-hovered .svc-question__top-actions,
-.svc-question__adorner--collapse-always .svc-question__top-actions {
+.svc-question__adorner--collapse-onhover.svc-hovered > .svc-question__content > .svc-question__drag-area > .svc-question__top-actions,
+.svc-question__adorner--collapse-onhover > .svc-question__content--selected > .svc-question__drag-area > .svc-question__top-actions,
+.svc-question__adorner--collapse-always > .svc-question__content > .svc-question__drag-area > .svc-question__top-actions {
   visibility: visible;
 }
 /*!****************************************************************************************************************************************************************************************!*\
@@ -3548,7 +3990,7 @@ svc-question .sv-action-bar,
 
 .svc-item-value--dragging {
   background: var(--sjs-general-backcolor, var(--background, #fff));
-  box-shadow: var(--sjs-shadow-large, 0px 8px 16px 0px rgba(0, 0, 0, 0.1));
+  box-shadow: 0px 8px 16px 0px var(--ctr-shadow-large-color, rgba(0, 0, 0, 0.1));
   border-radius: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   padding-right: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   padding-left: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
@@ -3603,29 +4045,29 @@ svc-question .sv-action-bar,
   visibility: hidden;
 }
 .svc-item-value-controls__drag use {
-  fill: var(--sjs-general-forecolor, var(--foreground, #161616));
+  fill: var(--ctr-survey-item-actionbar-drag-indicator-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
 }
 
 .svc-item-value-controls__button--disabled {
-  fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
+  fill: var(--ctr-survey-action-button-icon-color-disabled, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
   opacity: 0.25;
   cursor: default;
 }
 
 .svc-item-value-controls__remove:not(.svc-item-value-controls__button--disabled) use {
-  fill: var(--sjs-special-red, var(--red, #e60a3e));
+  fill: var(--ctr-survey-action-button-icon-color-negative, var(--sjs-special-red, var(--red, #e60a3e)));
 }
 
 .svc-item-value-controls__add:not(.svc-item-value-controls__button--disabled) use {
-  fill: var(--sjs-primary-backcolor, var(--primary, #19b394));
+  fill: var(--ctr-survey-action-button-icon-color-positive, var(--sjs-primary-backcolor, var(--primary, #19b394)));
 }
 
 .svc-item-value-controls__add:not(.svc-item-value-controls__button--disabled):hover, .svc-item-value-controls__add:not(.svc-item-value-controls__button--disabled):focus {
-  background-color: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
+  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))));
 }
 
 .svc-item-value-controls__remove:not(.svc-item-value-controls__button--disabled):hover, .svc-item-value-controls__remove:not(.svc-item-value-controls__button--disabled):focus {
-  background-color: var(--sjs-special-red-light, var(--red-light, rgba(230, 10, 62, 0.1)));
+  background-color: var(--ctr-survey-action-button-background-color-hovered-negative, var(--sjs-special-red-light, var(--red-light, rgba(230, 10, 62, 0.1))));
 }
 
 .sv-string-editor {
@@ -3989,7 +4431,7 @@ svc-question .sv-action-bar,
 .svd-test-results .svd-test-results__table {
   background-color: var(--sjs-general-backcolor, var(--background, #fff));
   width: 100%;
-  box-shadow: var(--sjs-shadow-small, 0px 1px 2px 0px rgba(0, 0, 0, 0.15));
+  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 {
   width: 100%;
@@ -4095,11 +4537,11 @@ svc-question .sv-action-bar,
   border-radius: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .svc-logo-image-placeholder:hover {
-  background-color: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
+  background-color: var(--ctr-survey-header-logo-placeholder-background-color-hovered, var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1))));
   opacity: unset;
 }
 .svc-logo-image-placeholder:hover use {
-  fill: var(--sjs-primary-backcolor, var(--primary, #19b394));
+  fill: var(--ctr-survey-header-logo-placeholder-icon-color-hovered, var(--sjs-primary-backcolor, var(--primary, #19b394)));
 }
 .svc-logo-image-placeholder svg {
   width: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
@@ -4107,7 +4549,7 @@ svc-question .sv-action-bar,
 }
 
 .svc-logo-image-placeholder use {
-  fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
+  fill: var(--ctr-survey-header-logo-placeholder-icon-color, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
 }
 
 .svc-logo-image-container {
@@ -4218,27 +4660,29 @@ svc-question .sv-action-bar,
   cursor: pointer;
 }
 .svc-tabbed-menu-item:hover, .svc-tabbed-menu-item:focus {
-  background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
+  background-color: var(--ctr-menu-item-background-color-hovered, var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3)));
   box-shadow: inset 0px -1px 0px var(--sjs-border-default, var(--border, #d6d6d6));
   outline: none;
 }
+.svc-tabbed-menu-item .svc-text {
+  color: var(--ctr-menu-item-text-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
+}
 
 .svc-tabbed-menu-item--selected {
-  background: var(--sjs-general-backcolor, var(--background, #fff));
-  box-shadow: inset 0px -2px 0px var(--sjs-primary-backcolor, var(--primary, #19b394));
+  background: var(--ctr-menu-item-background-color, var(--sjs-general-backcolor, var(--background, #fff)));
+  box-shadow: inset 0px -2px 0px var(--ctr-menu-item-border-color-selected, var(--sjs-primary-backcolor, var(--primary, #19b394)));
 }
 .svc-tabbed-menu-item--selected:hover, .svc-tabbed-menu-item--selected:focus {
-  background: var(--sjs-general-backcolor, var(--background, #fff));
-  box-shadow: inset 0px -2px 0px var(--sjs-primary-backcolor, var(--primary, #19b394));
+  background: var(--ctr-menu-item-background-color, var(--sjs-general-backcolor, var(--background, #fff)));
+  box-shadow: inset 0px -2px 0px var(--ctr-menu-item-border-color-selected, var(--sjs-primary-backcolor, var(--primary, #19b394)));
 }
 
 .svc-tabbed-menu-item--disabled {
   cursor: default;
-  color: var(--sjs-general-forecolor, var(--foreground, #161616));
-  opacity: 0.25;
+  opacity: var(--ctr-menu-item-opacity-disabled, 0.25);
 }
 .svc-tabbed-menu-item--disabled:hover {
-  background-color: var(--sjs-general-backcolor, var(--background, #fff));
+  background-color: var(--ctr-menu-item-background-color, var(--sjs-general-backcolor, var(--background, #fff)));
 }
 
 .svc-tabbed-menu-item--hidden {
@@ -4277,12 +4721,16 @@ svc-question .sv-action-bar,
   align-items: center;
   z-index: 20;
   outline: none;
-  padding: 0 calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding-top: var(--ctr-toolbox-item-padding-top, calc(0 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
+  padding-right: var(--ctr-toolbox-item-padding-right, calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
+  padding-bottom: var(--ctr-toolbox-item-padding-bottom, calc(0 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
+  padding-left: var(--ctr-toolbox-item-padding-left, calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
 }
 .svc-toolbox__item sv-svg-icon,
 .svc-toolbox__item .sv-svg-icon {
   display: block;
-  height: 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)))));
+  width: var(--ctr-toolbox-item-icon-width, unset);
 }
 
 .svc-toolbox__tool sv-svg-icon,
@@ -4295,7 +4743,7 @@ svc-question .sv-action-bar,
   padding: var(--sjs-base-unit, var(--base-unit, 8px)) 0;
 }
 .svc-toolbox__item-container .sv-svg-icon use {
-  fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
+  fill: var(--ctr-toolbox-item-icon-color, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
 }
 
 .svc-toolbox__item-banner {
@@ -4314,10 +4762,10 @@ svc-question .sv-action-bar,
   top: var(--sjs-base-unit, var(--base-unit, 8px));
 }
 .svc-toolbox__item-banner .svc-toolbox__item-title {
-  color: var(--sjs-general-forecolor, var(--foreground, #161616));
+  color: var(--ctr-toolbox-item-text-color-hovered, var(--sjs-general-forecolor, var(--foreground, #161616)));
 }
 .svc-toolbox__item-banner .sv-svg-icon use {
-  fill: var(--sjs-primary-backcolor, var(--primary, #19b394));
+  fill: var(--ctr-toolbox-item-icon-color-hovered, var(--sjs-primary-backcolor, var(--primary, #19b394)));
 }
 
 .svc-creator__toolbox--right .svc-toolbox__tool:hover .svc-toolbox__item-banner,
@@ -4404,15 +4852,15 @@ svc-question .sv-action-bar,
   padding-left: var(--sjs-base-unit, var(--base-unit, 8px));
   padding-right: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   white-space: nowrap;
-  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
+  color: var(--ctr-toolbox-item-text-color, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
 }
 
 .svc-toolbox__tool:hover .svc-toolbox__item-banner,
 .svc-toolbox__tool--hovered .svc-toolbox__item-banner,
 .svc-toolbox__item:focus .svc-toolbox__item-banner {
   max-width: calc(100 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  padding-left: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  padding-right: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding-left: var(--ctr-toolbox-item-padding-left, calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
+  padding-right: var(--ctr-toolbox-item-padding-right, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
   margin-right: calc(-2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   opacity: 1;
 }
@@ -4439,32 +4887,32 @@ svc-question .sv-action-bar,
 .svc-toolbox:not(.svc-toolbox--compact) .svc-toolbox__tool--hovered > .sv-action__content > .svc-toolbox__item:not(.sv-dots),
 .svc-toolbox:not(.svc-toolbox--compact) .svc-toolbox__item:not(.sv-dots):hover {
   overflow: hidden;
-  border-radius: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  background-color: var(--sjs-general-backcolor, var(--background, #fff));
-  box-shadow: var(--sjs-shadow-medium, 0px 2px 6px 0px rgba(0, 0, 0, 0.1));
+  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-hovered, var(--sjs-general-backcolor, var(--background, #fff)));
+  box-shadow: 0px 2px 6px 0px var(--ctr-shadow-medium-color, rgba(0, 0, 0, 0.1));
   transition: 0.1s ease-in-out;
 }
 .svc-toolbox:not(.svc-toolbox--compact) .svc-toolbox__item:not(.sv-dots):focus .svc-toolbox__item-title,
 .svc-toolbox:not(.svc-toolbox--compact) .svc-toolbox__tool--hovered > .sv-action__content > .svc-toolbox__item:not(.sv-dots) .svc-toolbox__item-title,
 .svc-toolbox:not(.svc-toolbox--compact) .svc-toolbox__item:not(.sv-dots):hover .svc-toolbox__item-title {
-  color: var(--sjs-general-forecolor, var(--foreground, #161616));
+  color: var(--ctr-toolbox-item-text-color-hovered, var(--sjs-general-forecolor, var(--foreground, #161616)));
 }
 .svc-toolbox:not(.svc-toolbox--compact) .svc-toolbox__item:not(.sv-dots):focus .sv-svg-icon use,
 .svc-toolbox:not(.svc-toolbox--compact) .svc-toolbox__tool--hovered > .sv-action__content > .svc-toolbox__item:not(.sv-dots) .sv-svg-icon use,
 .svc-toolbox:not(.svc-toolbox--compact) .svc-toolbox__item:not(.sv-dots):hover .sv-svg-icon use {
-  fill: var(--sjs-primary-backcolor, var(--primary, #19b394));
+  fill: var(--ctr-toolbox-item-icon-color-hovered, var(--sjs-primary-backcolor, var(--primary, #19b394)));
 }
 
 .svc-toolbox__tool .sv-dots__item:hover:enabled,
 .svc-toolbox__tool .sv-dots__item:focus:enabled,
 .svc-toolbox__tool .sv-dots__item.sv-action-bar-item--pressed {
-  background-color: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
-  border-radius: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  background-color: var(--ctr-toolbox-button-background-color-hovered, var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1))));
+  border-radius: var(--ctr-toolbox-item-corner-radius, calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
 }
 .svc-toolbox__tool .sv-dots__item:hover:enabled .sv-svg-icon use,
 .svc-toolbox__tool .sv-dots__item:focus:enabled .sv-svg-icon use,
 .svc-toolbox__tool .sv-dots__item.sv-action-bar-item--pressed .sv-svg-icon use {
-  fill: var(--sjs-primary-backcolor, var(--primary, #19b394));
+  fill: var(--ctr-toolbox-item-icon-color-hovered, var(--sjs-primary-backcolor, var(--primary, #19b394)));
 }
 
 [dir=rtl] .svc-toolbox-popup,
@@ -4485,12 +4933,12 @@ svc-question .sv-action-bar,
 
 .svc-toolbox .svc-toolbox__tool--pressed .svc-toolbox__item:not(.sv-dots),
 .svc-toolbox:not(.svc-toolbox--compact) .svc-toolbox__tool--pressed .svc-toolbox__item:not(.sv-dots) {
-  color: var(--sjs-general-forecolor, var(--foreground, #161616));
+  color: var(--ctr-toolbox-item-text-color-hovered, var(--sjs-general-forecolor, var(--foreground, #161616)));
   opacity: 0.5;
 }
 .svc-toolbox .svc-toolbox__tool--pressed .svc-toolbox__item:not(.sv-dots) .sv-svg-icon use,
 .svc-toolbox:not(.svc-toolbox--compact) .svc-toolbox__tool--pressed .svc-toolbox__item:not(.sv-dots) .sv-svg-icon use {
-  fill: var(--sjs-general-forecolor, var(--foreground, #161616));
+  fill: var(--ctr-toolbox-item-icon-color-pressed, var(--sjs-general-forecolor, var(--foreground, #161616)));
   opacity: 0.5;
 }
 .svc-toolbox .svc-toolbox__tool--pressed .svc-toolbox__item.svc-toolbox__item-subtype,
@@ -4526,7 +4974,7 @@ svc-question .sv-action-bar,
   overflow: hidden;
   border-radius: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   background: var(--ctr-toolbox-item-background-color-submenu, var(--sjs-layer-2-background-500, var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9))));
-  box-shadow: var(--sjs-shadow-small, 0px 1px 2px 0px rgba(0, 0, 0, 0.15)), var(--sjs-shadow-medium, 0px 2px 6px 0px rgba(0, 0, 0, 0.1));
+  box-shadow: 0px 1px 2px 0px var(--ctr-shadow-small-color, rgba(0, 0, 0, 0.15)), 0px 2px 6px 0px var(--ctr-shadow-medium-color, rgba(0, 0, 0, 0.1));
   transition: 0.1s ease-in-out;
   padding: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
@@ -4561,6 +5009,9 @@ svc-toolbox {
   display: flex;
   flex-direction: column;
 }
+.svc-toolbox .svc-item__banner {
+  background-color: var(--ctr-toolbox-item-background-color-hovered, var(--sjs-general-backcolor, var(--background, #fff)));
+}
 .svc-toolbox .spg-search-editor_container {
   padding-top: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   padding-inline-end: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
@@ -4577,11 +5028,11 @@ svc-toolbox {
   display: none;
 }
 .svc-toolbox .spg-search-editor_bar-item.sv-action-bar-item:not(.sv-action-bar-item--pressed):hover:enabled {
-  background-color: var(--sjs-special-red-light, var(--red-light, rgba(230, 10, 62, 0.1)));
+  background-color: var(--ctr-toolbox-search-clear-button-background-color-hovered, var(--sjs-special-red-light, var(--red-light, rgba(230, 10, 62, 0.1))));
   border-radius: 100px;
 }
 .svc-toolbox .spg-search-editor_bar-item.sv-action-bar-item:not(.sv-action-bar-item--pressed):hover:enabled svg use {
-  fill: var(--sjs-special-red, var(--red, #e60a3e));
+  fill: var(--ctr-toolbox-search-clear-button-icon-color-hovered, var(--sjs-special-red, var(--red, #e60a3e)));
 }
 
 .svc-toolbox__scroller {
@@ -4635,9 +5086,9 @@ svc-toolbox {
 .svc-toolbox--flyout .svc-toolbox__panel {
   z-index: 200;
   position: relative;
-  background: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
+  background: var(--ctr-toolbox-background-color, var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3)));
   width: fit-content;
-  box-shadow: 1px 0 0 0 var(--sjs-border-inside, var(--border-inside, rgba(0, 0, 0, 0.16))), var(--sjs-shadow-medium, 0px 2px 6px 0px rgba(0, 0, 0, 0.1)), var(--sjs-shadow-large, 0px 8px 16px 0px rgba(0, 0, 0, 0.1));
+  box-shadow: 1px 0 0 0 var(--sjs-border-inside, var(--border-inside, rgba(0, 0, 0, 0.16))), 0px 2px 6px 0px var(--ctr-shadow-medium-color, rgba(0, 0, 0, 0.1)), 0px 8px 16px 0px var(--ctr-shadow-large-color, rgba(0, 0, 0, 0.1));
 }
 
 .svc-toolbox--scrollable .svc-toolbox__scroller {
@@ -4707,7 +5158,7 @@ svc-toolbox {
 [dir=rtl] .svc-toolbox--flyout .svc-toolbox__panel,
 [style*="direction:rtl"] .svc-toolbox--flyout .svc-toolbox__panel,
 [style*="direction: rtl"] .svc-toolbox--flyout .svc-toolbox__panel {
-  box-shadow: -1px 0 0 0 var(--sjs-border-inside, var(--border-inside, rgba(0, 0, 0, 0.16))), var(--sjs-shadow-medium, 0px 2px 6px 0px rgba(0, 0, 0, 0.1)), var(--sjs-shadow-large, 0px 8px 16px 0px rgba(0, 0, 0, 0.1));
+  box-shadow: -1px 0 0 0 var(--sjs-border-inside, var(--border-inside, rgba(0, 0, 0, 0.16))), 0px 2px 6px 0px var(--ctr-shadow-medium-color, rgba(0, 0, 0, 0.1)), 0px 8px 16px 0px var(--ctr-shadow-large-color, rgba(0, 0, 0, 0.1));
 }
 .svc-creator__toolbox--right .svc-toolbox__tool .sv-action__content,
 [dir=rtl] .svc-toolbox__tool .sv-action__content,
@@ -4732,7 +5183,6 @@ svc-toolbox {
   position: sticky;
   top: 0;
   z-index: 30;
-  background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
   padding-top: var(--sjs-base-unit, var(--base-unit, 8px));
   margin-bottom: var(--sjs-base-unit, var(--base-unit, 8px));
   margin-right: calc(-1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
@@ -4763,7 +5213,7 @@ svc-toolbox {
 .svc-toolbox__category-separator {
   height: 1px;
   width: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  background-color: var(--sjs-border-default, var(--border, #d6d6d6));
+  background-color: var(--ctr-toolbox-separator-color, var(--sjs-border-default, var(--border, #d6d6d6)));
   margin: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) var(--sjs-base-unit, var(--base-unit, 8px));
 }
 
@@ -4835,7 +5285,7 @@ svc-toolbox {
   padding-top: calc(12 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   margin-left: auto;
   margin-right: auto;
-  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
+  color: var(--ctr-property-grid-placeholder-text-description-color, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
   --default-font-size: var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))));
   font-family: var(--sjs-font-family, var(--font-family));
   font-style: normal;
@@ -4874,8 +5324,8 @@ svc-toolbox {
 }
 
 .svc-side-bar__container-header {
-  background: var(--sjs-general-backcolor, var(--background, #fff));
-  box-shadow: inset 0px -2px 0px var(--sjs-primary-backcolor, var(--primary, #19b394));
+  background: var(--ctr-property-grid-header-background-color, var(--sjs-general-backcolor, var(--background, #fff)));
+  box-shadow: inset 0px -2px 0px var(--ctr-property-grid-header-border-color, var(--sjs-primary-backcolor, var(--primary, #19b394)));
   line-height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   display: flex;
   height: calc(8 * (var(--sjs-base-unit, var(--base-unit, 8px))));
@@ -4887,7 +5337,7 @@ svc-toolbox {
   align-items: flex-start;
   height: calc(100% - 8 * var(--sjs-base-unit, var(--base-unit, 8px)));
   overflow-y: auto;
-  background-color: var(--sjs-general-backcolor, var(--background, #fff));
+  background-color: var(--ctr-property-grid-background-color, var(--sjs-general-backcolor, var(--background, #fff)));
 }
 
 .svc-side-bar__container-container {
@@ -4908,6 +5358,7 @@ svc-toolbox {
   flex-shrink: 0;
   justify-content: flex-end;
   padding: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  color: var(--ctr-menu-toolbar-button-text-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
 }
 
 .svc-side-bar__container-actions {
@@ -4919,12 +5370,27 @@ svc-toolbox {
   justify-content: flex-end;
   padding: 0;
 }
+.svc-side-bar__container-actions .sv-action-bar-item:not(.sv-action-bar-item--pressed):enabled:focus {
+  background: var(--ctr-menu-toolbar-button-background-color-pressed, var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3)));
+}
+.svc-side-bar__container-actions .sv-action-bar-item:not(.sv-action-bar-item--pressed):enabled:hover {
+  background: var(--ctr-menu-toolbar-button-background-color-hovered, var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3)));
+}
+.svc-side-bar__container-actions .sv-action-bar-item--pressed:not(.sv-action-bar-item--active) {
+  background: var(--ctr-menu-toolbar-button-background-color-pressed, var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3)));
+}
+.svc-side-bar__container-actions .sv-action-bar-item__title {
+  color: var(--ctr-menu-toolbar-button-text-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
+}
+.svc-side-bar__container-actions .sv-action-bar-item__icon use {
+  fill: var(--ctr-menu-toolbar-button-icon-color, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
+}
 
 .svc-flex-column.svc-side-bar__wrapper {
   width: auto;
-  border-left: 1px solid var(--sjs-border-default, var(--border, #d6d6d6));
+  border-left: 1px solid var(--ctr-property-grid-border-color, var(--sjs-border-default, var(--border, #d6d6d6)));
   height: 100%;
-  background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
+  background-color: var(--ctr-property-grid-form-background-color, var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3)));
 }
 
 .svc-side-bar {
@@ -5024,7 +5490,7 @@ svc-toolbox {
   padding: var(--sjs-base-unit, var(--base-unit, 8px));
   box-sizing: border-box;
   border: none;
-  color: var(--sjs-primary-backcolor, var(--primary, #19b394));
+  color: var(--ctr-actionbar-button-text-color, var(--sjs-primary-backcolor, var(--primary, #19b394)));
   font-weight: 600;
   font-size: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   line-height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
@@ -5036,27 +5502,27 @@ svc-toolbox {
 .spg-action-button:hover, .spg-action-button:focus {
   opacity: 1;
   outline: none;
-  background-color: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
+  background-color: var(--ctr-actionbar-button-background-color-hovered, var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1))));
 }
 .spg-action-button:hover use, .spg-action-button:focus use {
-  fill: var(--sjs-primary-backcolor, var(--primary, #19b394));
+  fill: var(--ctr-actionbar-button-icon-color-hovered, var(--sjs-primary-backcolor, var(--primary, #19b394)));
 }
 
 .spg-action-button__icon {
   display: block;
 }
 .spg-action-button__icon use {
-  fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
+  fill: var(--ctr-actionbar-button-icon-color, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
 }
 
 .spg-action-button--danger {
-  color: var(--sjs-special-red, var(--red, #e60a3e));
+  color: var(--ctr-library-action-button-text-color-negative, var(--sjs-special-red, var(--red, #e60a3e)));
 }
 .spg-action-button--danger:hover, .spg-action-button--danger:focus {
-  background-color: var(--sjs-special-red-light, var(--red-light, rgba(230, 10, 62, 0.1)));
+  background-color: var(--ctr-library-action-button-background-color-negative-hovered, var(--sjs-special-red-light, var(--red-light, rgba(230, 10, 62, 0.1))));
 }
 .spg-action-button--danger:hover use, .spg-action-button--danger:focus use {
-  fill: var(--sjs-special-red, var(--red, #e60a3e));
+  fill: var(--ctr-library-action-button-icon-color-negative, var(--sjs-special-red, var(--red, #e60a3e)));
 }
 
 button.spg-action-button--large {
@@ -5064,7 +5530,7 @@ button.spg-action-button--large {
 }
 
 .spg-action-button:disabled {
-  opacity: 0.25;
+  opacity: var(--ctr-library-action-button-opacity-disabled, 0.25);
   pointer-events: none;
   cursor: default;
 }
@@ -5099,7 +5565,7 @@ button.spg-action-button--large {
   line-height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   font-size: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   font-family: var(--sjs-font-family, var(--font-family));
-  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
+  color: var(--ctr-label-text-color, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
   font-weight: normal;
   box-sizing: border-box;
 }
@@ -5174,6 +5640,7 @@ button.spg-action-button--large {
   padding: var(--sjs-base-unit, var(--base-unit, 8px)) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   border-right: 1px solid var(--sjs-border-default, var(--border, #d6d6d6));
   display: inline-block;
+  color: var(--ctr-editor-label-color, var(--sjs-general-dim-forecolor-light, rgba(0, 0, 0, 0.45)));
 }
 
 .spg-question__content--left {
@@ -5207,30 +5674,24 @@ button.spg-action-button--large {
 
 .spg-question__erbox {
   padding: var(--sjs-base-unit, var(--base-unit, 8px)) calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) var(--sjs-base-unit, var(--base-unit, 8px)) calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  color: var(--sjs-general-forecolor, var(--foreground, #161616));
-  background-color: var(--sjs-special-red-light, var(--red-light, rgba(230, 10, 62, 0.1)));
+  color: var(--ctr-error-message-text-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
+  background-color: var(--ctr-error-message-background-color, var(--sjs-special-red-light, var(--red-light, rgba(230, 10, 62, 0.1))));
   border-radius: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   line-height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .spg-question__erbox > div,
+.spg-question__erbox > svc-question-error > div,
 sv-question-error > div {
   display: flex;
   gap: var(--sjs-base-unit, var(--base-unit, 8px));
 }
 
-.spg-question__erbox-icon {
-  display: block;
-  flex-grow: 0;
-  flex-shrink: 0;
-  width: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  background-size: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  background-repeat: no-repeat;
-  background-position: 0 0;
-  line-height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  white-space: normal;
-  background-image: url("data:image/svg+xml,%3Csvg width=%2724%27 height=%2720%27 viewBox=%270 0 24 20%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M23.0336 15.4803L14.5736 1.45346C13.9936 0.487805 12.9936 0 12.0036 0C11.0136 0 10.0136 0.487805 9.43364 1.45346L0.973642 15.4803C-0.226358 17.4714 1.21364 20 3.54364 20H20.4536C22.7836 20 24.2236 17.4714 23.0236 15.4803H23.0336ZM21.3336 17.5112C21.2436 17.6605 20.9936 18.0189 20.4636 18.0189H3.54364C3.01364 18.0189 2.76364 17.6705 2.67364 17.5112C2.58364 17.3519 2.41364 16.9537 2.68364 16.5057L11.1436 2.47885C11.4036 2.04082 11.8336 1.99104 12.0036 1.99104C12.1736 1.99104 12.5936 2.04082 12.8636 2.47885L21.3136 16.5057C21.5836 16.9537 21.4136 17.3519 21.3236 17.5112H21.3336ZM13.0036 7.05824V12.0358C13.0036 12.5834 12.5536 13.0314 12.0036 13.0314C11.4536 13.0314 11.0036 12.5834 11.0036 12.0358V7.05824C11.0036 6.5107 11.4536 6.06272 12.0036 6.06272C12.5536 6.06272 13.0036 6.5107 13.0036 7.05824ZM13.0036 15.0224C13.0036 15.5699 12.5536 16.0179 12.0036 16.0179C11.4536 16.0179 11.0036 15.5699 11.0036 15.0224C11.0036 14.4749 11.4536 14.0269 12.0036 14.0269C12.5536 14.0269 13.0036 14.4749 13.0036 15.0224Z%27 fill=%27%23E60A3E%27/%3E%3C/svg%3E");
+.spg-question__erbox-icon .sv-svg-icon {
+  vertical-align: top;
+}
+.spg-question__erbox-icon use {
+  fill: var(--ctr-error-message-icon-color, var(--sjs-special-red, var(--red, #e60a3e)));
 }
 
 .spg-question__erbox--location--bottom {
@@ -5251,34 +5712,34 @@ sv-question-error > div {
   -moz-appearance: none;
   appearance: none;
   display: block;
-  background-color: var(--sjs-general-backcolor, var(--background, #fff));
+  background-color: var(--ctr-editor-background-color, var(--sjs-general-backcolor, var(--background, #fff)));
   box-sizing: border-box;
   width: 100%;
   height: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   border: none;
-  box-shadow: inset 0 0 0 1px var(--sjs-border-inside, var(--border-inside, rgba(0, 0, 0, 0.16)));
+  box-shadow: inset 0 0 0 var(--ctr-editor-border-width, 1px) var(--ctr-editor-border-color, var(--sjs-border-inside, var(--border-inside, rgba(0, 0, 0, 0.16))));
   padding: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   outline: none;
   font-size: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   font-family: var(--sjs-font-family, var(--font-family));
-  color: var(--sjs-general-forecolor, var(--foreground, #161616));
+  color: var(--ctr-editor-content-text-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
 }
 
 .spg-input::placeholder {
-  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
+  color: var(--ctr-editor-content-text-color-placeholder, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
 }
 
 .spg-input:focus,
 .spg-input.spg-dropdown:focus,
 .spg-input.spg-dropdown:focus-within,
 .spg-input-container:focus-within {
-  box-shadow: inset 0 0 0 2px var(--sjs-primary-backcolor, var(--primary, #19b394));
+  box-shadow: inset 0 0 0 var(--ctr-editor-border-width-focused, 2px) var(--ctr-editor-border-color-focused, var(--sjs-primary-backcolor, var(--primary, #19b394)));
 }
 
 .spg-input:disabled,
 .spg-input:disabled::placeholder {
-  color: var(--sjs-general-forecolor, var(--foreground, #161616));
-  opacity: 0.25;
+  color: var(--ctr-editor-content-text-color-disabled, var(--sjs-general-forecolor, var(--foreground, #161616)));
+  opacity: var(--ctr-editor-content-text-opacity-disabled, 0.25);
 }
 
 input.spg-input:read-only,
@@ -5297,7 +5758,7 @@ input.spg-input:read-only::placeholder {
   position: relative;
   box-sizing: border-box;
   appearance: none;
-  background: var(--sjs-general-backcolor, var(--background, #fff));
+  background: var(--ctr-editor-background-color, var(--sjs-general-backcolor, var(--background, #fff)));
   border: none;
   outline: none;
   width: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
@@ -5306,23 +5767,23 @@ input.spg-input:read-only::placeholder {
   line-height: 0;
 }
 .spg-input__edit-button:focus, .spg-input__edit-button:hover {
-  background: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
+  background: var(--ctr-editor-button-background-color-hovered, var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3)));
 }
 .spg-input__edit-button:active {
-  opacity: 0.5;
+  opacity: var(--ctr-editor-button-icon-opacity-pressed, 0.5);
 }
 .spg-input__edit-button.spg-input__edit-button--disabled, .spg-input__edit-button:disabled {
-  opacity: 0.25;
-  background: var(--sjs-general-backcolor, var(--background, #fff));
+  opacity: var(--ctr-editor-button-icon-opacity-disabled, 0.25);
+  background: var(--ctr-editor-background-color, var(--sjs-general-backcolor, var(--background, #fff)));
 }
 .spg-input__edit-button svg {
   height: 24px;
   width: 24px;
-  fill: rgba(0, 0, 0, 0.45);
+  fill: var(--ctr-editor-button-icon-color, var(--sjs-general-dim-forecolor-light, rgba(0, 0, 0, 0.45)));
 }
 
 .spg-input.spg-input--error {
-  box-shadow: 0 0 0 1px inset var(--sjs-special-red, var(--red, #e60a3e));
+  box-shadow: 0 0 0 1px inset var(--ctr-editor-border-color-error, var(--sjs-special-red, var(--red, #e60a3e)));
 }
 
 .spg-input-container {
@@ -5332,7 +5793,7 @@ input.spg-input:read-only::placeholder {
   padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   align-items: center;
   gap: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  box-shadow: 0 0 0 1px inset var(--sjs-border-inside, var(--border-inside, rgba(0, 0, 0, 0.16)));
+  box-shadow: inset 0 0 0 var(--ctr-editor-border-width, 1px) var(--ctr-editor-border-color, var(--sjs-border-inside, var(--border-inside, rgba(0, 0, 0, 0.16))));
 }
 
 .spg-input-container--multiline {
@@ -5353,7 +5814,7 @@ input.spg-input:read-only::placeholder {
   flex-grow: 1;
   width: 100%;
   padding: var(--sjs-base-unit, var(--base-unit, 8px)) calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  color: var(--sjs-general-forecolor, var(--foreground, #161616));
+  color: var(--ctr-editor-content-text-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
   font-size: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   font-family: var(--sjs-font-family, var(--font-family));
   outline: none;
@@ -5361,9 +5822,12 @@ input.spg-input:read-only::placeholder {
   line-height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   background-color: transparent;
 }
+.spg-input-container__input::placeholder {
+  color: var(--ctr-editor-content-text-color-placeholder, var(--sjs-general-dim-forecolor-light, rgba(0, 0, 0, 0.45)));
+}
 
 .spg-input-container__input:disabled {
-  opacity: 0.25;
+  opacity: var(--ctr-editor-content-text-opacity-disabled, 0.25);
 }
 
 .spg-input-container__buttons-container {
@@ -5408,11 +5872,11 @@ input.spg-input:read-only::placeholder {
   padding: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   border: none;
   outline: none;
-  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
+  color: var(--ctr-property-grid-chapter-caption-text-color, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
   cursor: pointer;
   text-align: left;
-  background-color: var(--sjs-general-backcolor, var(--background, #fff));
-  box-shadow: inset 0px -1px 0px var(--sjs-border-default, var(--border, #d6d6d6));
+  background-color: var(--ctr-property-grid-chapter-caption-background-color, var(--sjs-general-backcolor, var(--background, #fff)));
+  box-shadow: inset 0px -1px 0px var(--ctr-property-grid-chapter-caption-border-color, var(--sjs-border-default, var(--border, #d6d6d6)));
   font-family: var(--sjs-font-family, var(--font-family));
   font-size: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   font-weight: 400;
@@ -5421,18 +5885,21 @@ input.spg-input:read-only::placeholder {
 
 .spg-panel__title:disabled,
 .spg-panel__title:disabled:hover {
-  color: var(--sjs-general-forecolor, var(--foreground, #161616));
+  color: var(--ctr-property-grid-chapter-caption-text-color-disabled, var(--sjs-general-forecolor, var(--foreground, #161616)));
   opacity: 0.25;
   cursor: default;
 }
 
-.spg-panel__title--collapsed:hover,
+.spg-panel__title--collapsed:hover {
+  background-color: var(--ctr-property-grid-chapter-caption-background-color-hovered, var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3)));
+}
+
 .spg-panel__title--expandable:focus {
-  background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
+  background-color: var(--ctr-property-grid-chapter-caption-background-color-focused, var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3)));
 }
 
 .spg-panel__title--expanded {
-  color: var(--sjs-general-forecolor, var(--foreground, #161616));
+  color: var(--ctr-property-grid-chapter-caption-text-color-selected, var(--sjs-general-forecolor, var(--foreground, #161616)));
   font-weight: 600;
 }
 
@@ -5443,8 +5910,8 @@ input.spg-input:read-only::placeholder {
   width: 100%;
   padding: 0 calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   box-sizing: border-box;
-  background: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
-  box-shadow: inset 0px -1px 0px var(--sjs-border-default, var(--border, #d6d6d6));
+  background: var(--ctr-property-grid-form-background-color, var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3)));
+  box-shadow: inset 0px -1px 0px var(--ctr-property-grid-chapter-caption-border-color, var(--sjs-border-default, var(--border, #d6d6d6)));
 }
 
 .spg-panel__content .spg-row {
@@ -5476,19 +5943,19 @@ input.spg-input:read-only::placeholder {
   cursor: default;
 }
 .spg-checkbox--disabled .spg-checkbox__caption {
-  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
+  color: var(--ctr-checkbox-text-color-disabled, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
 }
 
 .spg-checkbox__caption {
   font-family: var(--sjs-font-family, var(--font-family));
   font-size: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  color: var(--sjs-general-forecolor, var(--foreground, #161616));
+  color: var(--ctr-checkbox-text-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
   line-height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .spg-checkbox__rectangle {
-  background: var(--sjs-general-backcolor, var(--background, #fff));
-  border: 1px solid var(--sjs-border-default, var(--border, #d6d6d6));
+  background: var(--ctr-checkbox-background-color, var(--sjs-general-backcolor, var(--background, #fff)));
+  border: 1px solid var(--ctr-checkbox-border-color, var(--sjs-border-default, var(--border, #d6d6d6)));
   box-sizing: border-box;
   width: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
@@ -5497,15 +5964,15 @@ input.spg-input:read-only::placeholder {
 }
 
 .spg-checkbox:hover .spg-checkbox__rectangle {
-  background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
+  background-color: var(--ctr-checkbox-background-color-hovered, var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3)));
 }
 
 .spg-checkbox--disabled .spg-checkbox__rectangle:hover {
-  background: var(--sjs-general-backcolor, var(--background, #fff));
+  background: var(--ctr-checkbox-background-color-disabled, var(--sjs-general-backcolor, var(--background, #fff)));
 }
 
 .spg-checkbox__control:focus + .spg-checkbox__rectangle {
-  outline: 2px solid var(--sjs-primary-backcolor, var(--primary, #19b394));
+  outline: 2px solid var(--ctr-checkbox-border-color-focused, var(--sjs-primary-backcolor, var(--primary, #19b394)));
   outline-offset: -2px;
 }
 
@@ -5519,11 +5986,11 @@ input.spg-input:read-only::placeholder {
   height: calc(2.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   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))));
-  fill: var(--sjs-primary-backcolor, var(--primary, #19b394));
+  fill: var(--ctr-checkbox-button-check-mark-color, var(--sjs-primary-backcolor, var(--primary, #19b394)));
 }
 
 .spg-checkbox--disabled.spg-checkbox--checked .spg-checkbox__svg {
-  fill: var(--sjs-border-default, var(--border, #d6d6d6));
+  fill: var(--ctr-checkbox-button-check-mark-color-disabled, var(--sjs-border-default, var(--border, #d6d6d6)));
 }
 
 .spg-checkbox__control {
@@ -5578,7 +6045,7 @@ input.spg-input:read-only::placeholder {
   opacity: 0.5;
 }
 .spg-drag-element__svg use {
-  fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
+  fill: var(--ctr-data-table-row-drag-area-icon-color, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
 }
 
 .spg-matrixdynamic__drag-drop-ghost-position-top,
@@ -5610,8 +6077,8 @@ input.spg-input:read-only::placeholder {
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  background: var(--sjs-general-backcolor, var(--background, #fff));
-  border: 1px solid var(--sjs-border-default, var(--border, #d6d6d6));
+  background: var(--ctr-property-grid-background-color, var(--sjs-general-backcolor, var(--background, #fff)));
+  border: 1px solid var(--ctr-survey-placeholder-border-color, var(--sjs-border-default, var(--border, #d6d6d6)));
   box-sizing: border-box;
 }
 .spg-matrixdynamic__placeholder .spg-matrixdynamic__add-btn {
@@ -5621,7 +6088,7 @@ input.spg-input:read-only::placeholder {
 .spg-matrixdynamic__placeholder-text {
   font-size: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   line-height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
+  color: var(--ctr-survey-placeholder-text-color, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
 }
 
 .spg-matrixdynamic__add-btn {
@@ -5630,7 +6097,7 @@ input.spg-input:read-only::placeholder {
   border: none;
   margin-top: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   background: transparent;
-  color: var(--sjs-primary-backcolor, var(--primary, #19b394));
+  color: var(--ctr-survey-action-button-text-color-positive, var(--sjs-primary-backcolor, var(--primary, #19b394)));
   font-family: var(--sjs-font-family, var(--font-family));
   font-size: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   font-weight: 600;
@@ -5642,7 +6109,7 @@ input.spg-input:read-only::placeholder {
   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(--sjs-general-forecolor, var(--foreground, #161616));
+  border: 1px solid var(--ctr-actionbar-button-icon-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
   display: flex;
   justify-content: center;
   align-items: center;
@@ -5651,21 +6118,22 @@ input.spg-input:read-only::placeholder {
 .spg-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(--sjs-general-forecolor, var(--foreground, #161616));
+  fill: var(--ctr-actionbar-button-icon-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
 }
 
 .spg-table-wrapper {
-  border: 1px solid var(--sjs-border-default, var(--border, #d6d6d6));
+  border: 1px solid var(--ctr-data-table-border-color, var(--sjs-border-default, var(--border, #d6d6d6)));
   border-bottom: none;
 }
 
 .spg-table {
   width: 100%;
-  background-color: var(--sjs-general-backcolor, var(--background, #fff));
+  background-color: var(--ctr-data-table-background-color, var(--sjs-general-backcolor, var(--background, #fff)));
   border-collapse: collapse;
 }
 .spg-table tr {
-  border-bottom: 1px solid var(--sjs-border-default, var(--border, #d6d6d6));
+  border-bottom: 1px solid var(--ctr-data-table-row-border-color, var(--sjs-border-default, var(--border, #d6d6d6)));
+  background-color: var(--ctr-data-table-row-background-color, var(--sjs-general-backcolor, var(--background, #fff)));
 }
 
 .spg-table__cell {
@@ -5676,7 +6144,7 @@ input.spg-input:read-only::placeholder {
 }
 
 .spg-table__cell--detail-panel {
-  background: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
+  background: var(--ctr-data-table-background-color, var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3)));
 }
 .spg-table__cell--detail-panel .spg-panel__content {
   box-shadow: none;
@@ -5692,7 +6160,7 @@ input.spg-input:read-only::placeholder {
   font-size: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   box-shadow: none;
   border-radius: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  background-color: transparent;
+  background-color: var(--ctr-data-table-row-background-color, transparent);
   padding: var(--sjs-base-unit, var(--base-unit, 8px));
   height: auto;
 }
@@ -5700,7 +6168,7 @@ input.spg-input:read-only::placeholder {
   padding-right: 0;
 }
 .spg-table__cell:not(.spg-table__cell--detail-panel) .spg-input:focus, .spg-table__cell:not(.spg-table__cell--detail-panel) .spg-input:focus-within {
-  box-shadow: inset 0 0 0 2px var(--sjs-primary-backcolor, var(--primary, #19b394));
+  box-shadow: inset 0 0 0 2px var(--ctr-data-table-cell-border-color-focused, var(--sjs-primary-backcolor, var(--primary, #19b394)));
 }
 
 .spg-table__cell:not(.spg-table__cell--detail-panel) .spg-dropdown_chevron-button {
@@ -5737,9 +6205,9 @@ input.spg-input:read-only::placeholder {
 .spg-table__cell--header {
   font-size: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   font-weight: normal;
-  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
+  color: var(--ctr-data-table-cell-text-color-header, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
   line-height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  background: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
+  background: var(--ctr-data-table-row-background-color-header, var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3)));
   text-align: left;
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -5795,7 +6263,7 @@ input.spg-input:read-only::placeholder {
   width: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   box-sizing: border-box;
-  border: 1px solid rgba(0, 0, 0, 0.16);
+  border: 1px solid var(--sjs-border-inside, var(--border-inside, rgba(0, 0, 0, 0.16)));
   margin-left: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .spg-color-editor__color-swatch .sv-svg-icon {
@@ -5899,7 +6367,7 @@ input.spg-input:read-only::placeholder {
   top: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
   width: calc(8 * var(--sjs-base-unit, var(--base-unit, 8px)) + 100%);
   height: 1px;
-  background-color: var(--sjs-border-default, var(--border, #d6d6d6));
+  background-color: var(--ctr-editor-border-color, var(--sjs-border-default, var(--border, #d6d6d6)));
 }
 .spg-theme-builder-root .spg-nested-panel__content > .spg-row:first-of-type {
   margin-top: 0;
@@ -5919,7 +6387,7 @@ input.spg-input:read-only::placeholder {
   font-weight: 600;
   font-size: var(--sjs-font-size, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
   line-height: calc(1.5 * var(--default-bold-font-size));
-  color: var(--sjs-general-dim-forecolor, rgba(0, 0, 0, 0.91));
+  color: var(--ctr-property-grid-group-caption-text-color, var(--sjs-general-dim-forecolor, rgba(0, 0, 0, 0.91)));
   position: relative;
   top: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
   padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) 0;
@@ -6007,8 +6475,8 @@ input.spg-input:read-only::placeholder {
 }
 
 .spg-search-editor_container {
-  border-bottom: 1px solid var(--sjs-border-default, var(--border, #d6d6d6));
-  background: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
+  border-bottom: 1px solid var(--ctr-property-grid-search-border-color, var(--sjs-border-default, var(--border, #d6d6d6)));
+  background: var(--ctr-property-grid-search-background-color, var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3)));
   padding: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   width: calc(100% - 4 * var(--sjs-base-unit, var(--base-unit, 8px)));
@@ -6020,7 +6488,7 @@ input.spg-input:read-only::placeholder {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  color: var(--sjs-general-forecolor, var(--foreground, #161616));
+  color: var(--ctr-property-grid-search-text-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
   font-family: var(--sjs-font-family, var(--font-family));
   font-size: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   font-style: normal;
@@ -6044,7 +6512,7 @@ input.spg-input:read-only::placeholder {
 }
 
 .spg-search-editor_input::placeholder {
-  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
+  color: var(--ctr-property-grid-search-text-color-placeholder, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
 }
 
 .spg-search-editor_toolbar {
@@ -6071,8 +6539,19 @@ input.spg-input:read-only::placeholder {
   margin: 0;
 }
 
+.spg-search-editor_bar-item:not(.sv-action-bar-item--pressed):hover:enabled, .spg-search-editor_bar-item:not(.sv-action-bar-item--pressed):focus:enabled {
+  background: var(--ctr-search-button-background-color-clear-hovered, var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3)));
+}
+.spg-search-editor_bar-item:not(.sv-action-bar-item--pressed):hover:enabled .sv-action-bar-item__icon use, .spg-search-editor_bar-item:not(.sv-action-bar-item--pressed):focus:enabled .sv-action-bar-item__icon use {
+  fill: var(--ctr-search-button-icon-color-clear-hovered, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
+}
+
+.spg-search-editor_toolbar .sv-action-bar-item__icon use {
+  fill: var(--ctr-property-grid-search-button-icon-color, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
+}
+
 .spg-search-editor_toolbar-counter {
-  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
+  color: var(--ctr-property-grid-search-count-text-color, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
   font-family: var(--sjs-font-family, var(--font-family));
   font-style: normal;
   font-weight: 600;
@@ -6091,7 +6570,49 @@ input.spg-input:read-only::placeholder {
   height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .spg-search-editor_search-icon .sv-svg-icon use {
-  fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
+  fill: var(--ctr-property-grid-search-icon-color, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
+}
+
+.spg-root-modern .sv-button-group {
+  border: 1px solid var(--ctr-button-group-item-border-color, var(--sjs-border-default, var(--border, #d6d6d6)));
+}
+.spg-root-modern .sv-button-group:focus-within {
+  box-shadow: 0 0 0 1px var(--ctr-button-group-border-color-focused, var(--sjs-primary-backcolor, var(--primary, #19b394)));
+  border-color: var(--ctr-button-group-border-color-focused, var(--sjs-primary-backcolor, var(--primary, #19b394)));
+}
+.spg-root-modern .sv-button-group__item {
+  background: var(--ctr-button-group-item-background-color, var(--sjs-general-backcolor, var(--background, #fff)));
+}
+.spg-root-modern .sv-button-group__item:not(:last-of-type) {
+  border-right: 1px solid var(--ctr-button-group-item-border-color, var(--sjs-border-default, var(--border, #d6d6d6)));
+}
+.spg-root-modern .sv-button-group__item--hover:hover {
+  background-color: var(--ctr-button-group-item-background-color-hovered, var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3)));
+}
+.spg-root-modern .sv-button-group__item-icon use {
+  fill: var(--ctr-button-group-item-icon-color, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
+}
+.spg-root-modern .sv-button-group__item--selected {
+  color: var(--ctr-button-group-item-text-color-selected, var(--sjs-primary-backcolor, var(--primary, #19b394)));
+}
+.spg-root-modern .sv-button-group__item--selected .sv-button-group__item-icon use {
+  fill: var(--ctr-button-group-item-icon-color-selected, var(--sjs-primary-backcolor, var(--primary, #19b394)));
+}
+.spg-root-modern .sv-button-group__item--selected:hover {
+  background-color: var(--ctr-button-group-item-background-color-hovered, var(--sjs-general-backcolor, var(--background, #fff)));
+}
+.spg-root-modern .sv-button-group__item--disabled {
+  color: var(--ctr-button-group-item-text-color-disabled, var(--sjs-general-forecolor, var(--foreground, #161616)));
+}
+.spg-root-modern .sv-button-group__item--disabled .sv-button-group__item-icon use {
+  fill: var(--ctr-button-group-item-text-color-disabled, var(--sjs-general-forecolor, var(--foreground, #161616)));
+}
+.spg-root-modern .sv-button-group__item--disabled:hover {
+  background-color: var(--ctr-button-group-item-background-color-disabled, var(--sjs-general-backcolor, var(--background, #fff)));
+}
+.spg-root-modern .sv-button-group:focus-within {
+  box-shadow: 0 0 0 1px var(--ctr-button-group-border-color-focused, var(--sjs-primary-backcolor, var(--primary, #19b394)));
+  border-color: var(--ctr-button-group-border-color-focused, var(--sjs-primary-backcolor, var(--primary, #19b394)));
 }
 
 .spg-root-modern {
@@ -6212,7 +6733,7 @@ input.spg-input:read-only::placeholder {
   opacity: 1;
 }
 .spg-title-toolobar--single-help-action .spg-help-action .spg-action-button:active {
-  opacity: 0.5;
+  opacity: var(--ctr-actionbar-button-opacity-pressed, 0.5);
 }
 .spg-title-toolobar--single-help-action .spg-help-action svg {
   fill: var(--sjs-general-dim-forecolor-light, rgba(0, 0, 0, 0.45));
@@ -6250,7 +6771,7 @@ input.spg-input:read-only::placeholder {
 .svc-flex-row {
   display: flex;
   flex-direction: row;
-  background: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
+  background: var(--ctr-surface-background-color, var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3)));
 }
 
 .svc-full-container {
@@ -6294,9 +6815,9 @@ input.spg-input:read-only::placeholder {
 
 .svc-top-bar {
   display: flex;
-  background: var(--sjs-general-backcolor, var(--background, #fff));
+  background: var(--ctr-menu-item-background-color, var(--sjs-general-backcolor, var(--background, #fff)));
   box-sizing: border-box;
-  box-shadow: inset 0px -1px 0px var(--sjs-border-default, var(--border, #d6d6d6));
+  box-shadow: inset 0px -1px 0px var(--ctr-menu-border-color, var(--sjs-border-default, var(--border, #d6d6d6)));
 }
 .svc-top-bar .svc-toolbar-wrapper {
   flex: 0 0 auto;
@@ -6315,6 +6836,41 @@ input.spg-input:read-only::placeholder {
 .svc-top-bar .svc-toolbar-wrapper .sv-action .sv-action-bar-item {
   margin: 0 var(--sjs-base-unit, var(--base-unit, 8px));
 }
+.svc-top-bar .sv-action-bar-separator {
+  background-color: var(--ctr-separator-color, var(--sjs-border-default, var(--border, #d6d6d6)));
+}
+.svc-top-bar .sv-action-bar-item {
+  border-radius: var(--ctr-menu-toolbar-button-corner-radius, 2px);
+  background-color: transparent;
+  color: var(--ctr-menu-toolbar-button-text-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
+}
+.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);
+}
+.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--secondary .sv-action-bar-item__icon use {
+  fill: var(--sjs-secondary-backcolor, var(--secondary, #ff9814));
+}
+.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))));