survey-creator-core 1.12.15 → 1.12.16

package/survey-creator-core.fontless.css

@@ -1,5 +1,5 @@
 /*!
- * SurveyJS Creator v1.12.15
+ * SurveyJS Creator v1.12.16
  * (c) 2015-2024 Devsoft Baltic OÜ - http://surveyjs.io/
  * Github: https://github.com/surveyjs/survey-creator
  * License: https://surveyjs.io/Licenses#SurveyCreator
@@ -48,6 +48,300 @@
 .svc-context-button--danger:hover use, .svc-context-button--danger:focus use {
   fill: var(--sjs-special-red, var(--red, #e60a3e));
 }
+/*!***************************************************************************************************************************************************************************!*\
+  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./src/components/list.scss ***!
+  \***************************************************************************************************************************************************************************/
+.svc-list {
+  width: 100%;
+  padding: var(--ctr-list-padding-top, var(--sjs-base-unit, var(--base-unit, 8px))) var(--ctr-list-padding-right, 0) var(--ctr-list-padding-bottom, var(--sjs-base-unit, var(--base-unit, 8px))) var(--ctr-list-padding-left, 0);
+  margin: 0;
+  overflow-y: auto;
+  list-style-type: none;
+  box-sizing: border-box;
+}
+
+.svc-list__item {
+  width: 100%;
+  outline: none;
+}
+
+.svc-list__item-body {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  --thm-default-font-size: var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))));
+  --thm-default-line-height: calc(1.5 * var(--thm-default-font-size));
+  font-family: var(--ctr-font-family, var(--sjs-font-family, var(--font-family)));
+  font-size: var(--ctr-font-default-size, var(--thm-default-font-size, 16px));
+  font-style: normal;
+  font-weight: 400;
+  line-height: var(--ctr-font-default-line-height, var(--thm-default-line-height, 24px));
+  text-align: start;
+  color: var(--ctr-list-item-text-color, var(--sjs-general-dim-forecolor, rgba(0, 0, 0, 0.91)));
+  transition: color var(--sjs-creator-transition-duration, 150ms);
+  --thm-list-item-padding-left-default: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  --thm-list-item-padding-delta: var(--ctr-list-item-padding-left, var(--thm-list-item-padding-left-default));
+  --thm-list-item-padding-left: calc(var(--sjs-list-item-level) * var(--thm-list-item-padding-delta));
+  display: flex;
+  flex: 1 0 0;
+  padding-block-start: var(--ctr-list-item-padding-top, var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding-block-end: var(--ctr-list-item-padding-bottom, var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding-inline-start: var(--thm-list-item-padding-left, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
+  padding-inline-end: var(--ctr-list-item-padding-right, calc(8 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
+  align-items: center;
+  gap: var(--ctr-list-item-gap, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
+  border-radius: var(--ctr-list-item-corner-radius, 0px);
+  cursor: pointer;
+  transition: background-color var(--sjs-creator-transition-duration, 150ms);
+}
+.svc-list__item-body > span, .svc-list__item-body > sv-ng-string {
+  flex: 1 0 0;
+}
+
+.svc-list__item:disabled,
+.svc-list__item--disabled {
+  opacity: var(--ctr-list-item-opacity-disabled, 0.25);
+  pointer-events: none;
+}
+
+.svc-list__item:focus > .svc-list__item-body,
+.svc-list__item:hover > .svc-list__item-body,
+.svc-list__item--focused > .svc-list__item-body,
+.svc-list__item--hovered > .svc-list__item-body {
+  background: var(--ctr-list-item-background-color-hovered, var(--sjs-questionpanel-hovercolor, var(--sjs-general-backcolor-dark, rgb(248, 248, 248))));
+  color: var(--ctr-list-item-text-color-hovered, var(--sjs-general-forecolor, var(--foreground, #161616)));
+}
+.svc-list__item:focus > .svc-list__item-body .svc-list__item-icon use,
+.svc-list__item:hover > .svc-list__item-body .svc-list__item-icon use,
+.svc-list__item--focused > .svc-list__item-body .svc-list__item-icon use,
+.svc-list__item--hovered > .svc-list__item-body .svc-list__item-icon use {
+  fill: var(--ctr-list-item-icon-color-hovered, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
+}
+.svc-list__item:focus > .svc-list__item-body .svc-list-item__marker-icon use,
+.svc-list__item:hover > .svc-list__item-body .svc-list-item__marker-icon use,
+.svc-list__item--focused > .svc-list__item-body .svc-list-item__marker-icon use,
+.svc-list__item--hovered > .svc-list__item-body .svc-list-item__marker-icon use {
+  fill: var(--ctr-list-item-submenu-arrow-color-hovered-item, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
+}
+
+.svc-list__item--selected > .svc-list__item-body,
+.svc-list__item--selected:hover > .svc-list__item-body,
+.svc-list__item--selected:focus > .svc-list__item-body,
+.svc-list__item.svc-list__item--selected:hover > .svc-list__item-body {
+  --thm-default-font-size: var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))));
+  --thm-default-line-height: calc(1.5 * var(--thm-default-font-size));
+  font-family: var(--ctr-font-family, var(--sjs-font-family, var(--font-family)));
+  font-size: var(--ctr-font-default-size, var(--thm-default-font-size, 16px));
+  font-style: normal;
+  font-weight: 400;
+  line-height: var(--ctr-font-default-line-height, var(--thm-default-line-height, 24px));
+  font-weight: 600;
+  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)));
+}
+.svc-list__item--selected > .svc-list__item-body .svc-list__item-icon use,
+.svc-list__item--selected:hover > .svc-list__item-body .svc-list__item-icon use,
+.svc-list__item--selected:focus > .svc-list__item-body .svc-list__item-icon use,
+.svc-list__item.svc-list__item--selected:hover > .svc-list__item-body .svc-list__item-icon use {
+  fill: var(--ctr-list-item-icon-color-selected, var(--sjs-general-backcolor, var(--background, #fff)));
+}
+
+.svc-list__item--group-selected > .svc-list__item-body,
+.svc-list__item--group-selected:hover > .svc-list__item-body,
+.svc-list__item--group-selected:focus > .svc-list__item-body {
+  --thm-default-font-size: var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))));
+  --thm-default-line-height: calc(1.5 * var(--thm-default-font-size));
+  font-family: var(--ctr-font-family, var(--sjs-font-family, var(--font-family)));
+  font-size: var(--ctr-font-default-size, var(--thm-default-font-size, 16px));
+  font-style: normal;
+  font-weight: 400;
+  line-height: var(--ctr-font-default-line-height, var(--thm-default-line-height, 24px));
+  color: var(--ctr-list-item-text-color-selected-submenu, var(--sjs-general-forecolor, var(--foreground, #161616)));
+  background: var(--ctr-list-item-background-color-selected-submenu, var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1))));
+}
+.svc-list__item--group-selected > .svc-list__item-body .svc-list__item-icon use,
+.svc-list__item--group-selected:hover > .svc-list__item-body .svc-list__item-icon use,
+.svc-list__item--group-selected:focus > .svc-list__item-body .svc-list__item-icon use {
+  fill: var(--ctr-list-item-icon-color-selected-submenu, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
+}
+.svc-list__item--group-selected > .svc-list__item-body .svc-list-item__marker-icon use,
+.svc-list__item--group-selected:hover > .svc-list__item-body .svc-list-item__marker-icon use,
+.svc-list__item--group-selected:focus > .svc-list__item-body .svc-list-item__marker-icon use {
+  fill: var(--ctr-list-item-submenu-arrow-color-selected-item-submenu, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
+}
+
+.svc-list__item--with-icon > .svc-list__item-body {
+  padding-block-start: var(--ctr-list-item-padding-top-with-icon, calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
+  padding-block-end: var(--ctr-list-item-padding-bottom-with-icon, calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
+  padding-inline-start: var(--thm-list-item-padding-left, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
+  padding-inline-end: var(--ctr-list-item-padding-right, calc(8 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
+}
+
+.svc-list__item--group > .svc-list__item-body {
+  padding-block-start: var(--ctr-list-item-padding-top, var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding-block-end: var(--ctr-list-item-padding-bottom, var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding-inline-start: var(--thm-list-item-padding-left, var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding-inline-end: var(--ctr-list-item-padding-right-submenu, var(--sjs-base-unit, var(--base-unit, 8px)));
+}
+
+.svc-list__item--with-icon.svc-list__item--group > .svc-list__item-body {
+  padding-block-start: var(--ctr-list-item-padding-top-with-icon, calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
+  padding-block-end: var(--ctr-list-item-padding-bottom-with-icon, calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
+  padding-inline-start: var(--thm-list-item-padding-left, var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding-inline-end: var(--ctr-list-item-padding-right-submenu, var(--sjs-base-unit, var(--base-unit, 8px)));
+}
+
+.svc-list__item--with-icon.svc-list__item--group .sv-popup-inner > .sv-popup__container {
+  --thm-inner-popup-margin-top: calc(var(--ctr-list-item-padding-top) - var(--ctr-list-item-padding-top-with-icon) - var(--ctr-list-padding-top));
+  --thm-inner-popup-margin-top-default: calc(-0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  margin-top: var(--thm-inner-popup-margin-top, var(--thm-inner-popup-margin-top-default, -4px));
+}
+
+.svc-list__item-separator {
+  width: 100%;
+  height: var(--ctr-separator-width, 1px);
+  margin: var(--ctr-separator-margin-vertical-small, var(--sjs-base-unit, var(--base-unit, 8px))) 0px;
+  background-color: var(--ctr-separator-color, var(--sjs-border-default, var(--border, #d6d6d6)));
+}
+
+.svc-list__item-icon {
+  display: flex;
+  width: var(--ctr-list-item-icon-width, calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
+  height: var(--ctr-list-item-icon-height, calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+}
+.svc-list__item-icon use {
+  fill: var(--ctr-list-item-icon-color, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
+}
+
+.svc-list-item__marker-icon {
+  display: flex;
+  padding: var(--ctr-list-item-submenu-arrow-padding, calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
+  align-items: flex-start;
+  width: var(--ctr-list-item-submenu-arrow-width, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
+  height: var(--ctr-list-item-submenu-arrow-height, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
+  box-sizing: content-box;
+  justify-content: center;
+}
+.svc-list-item__marker-icon use {
+  fill: var(--ctr-list-item-submenu-arrow-color, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
+}
+
+.svc-list-item__marker-icon + * {
+  --thm-list-item-gap: var(--ctr-list-item-gap, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))));
+  margin-inline-start: calc(0px - var(--thm-list-item-gap));
+}
+
+.svc-list__container {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  height: 100%;
+}
+
+.svc-list__filter {
+  display: flex;
+  align-items: flex-start;
+  align-items: center;
+  gap: var(--ctr-list-search-gap, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
+  padding-inline-start: var(--ctr-list-search-padding-left, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
+  padding-inline-end: var(--ctr-list-search-padding-right, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
+  padding-block-start: var(--ctr-list-search-padding-top, calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
+  padding-block-end: var(--ctr-list-search-padding-bottom, calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
+  border-radius: var(--ctr-toolbox-search-corner-radius, 0px);
+  border-bottom: var(--ctr-list-search-border-width-bottom, 1px) solid var(--ctr-list-search-border-color, rgba(0, 0, 0, 0.16));
+}
+
+.svc-list__filter-icon {
+  opacity: var(--ctr-list-search-icon-opacity, 1);
+  display: flex;
+  width: var(--ctr-list-search-icon-width, calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
+  height: var(--ctr-list-search-icon-height, calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
+  align-items: center;
+}
+.svc-list__filter-icon .sv-svg-icon {
+  width: var(--ctr-list-search-icon-width, calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
+  height: var(--ctr-list-search-icon-height, calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
+}
+.svc-list__filter-icon use {
+  fill: var(--ctr-list-search-icon-color, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
+}
+
+.svc-list__input {
+  --thm-default-font-size: var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))));
+  --thm-default-line-height: calc(1.5 * var(--thm-default-font-size));
+  font-family: var(--ctr-font-family, var(--sjs-font-family, var(--font-family)));
+  font-size: var(--ctr-font-default-size, var(--thm-default-font-size, 16px));
+  font-style: normal;
+  font-weight: 400;
+  line-height: var(--ctr-font-default-line-height, var(--thm-default-line-height, 24px));
+  color: var(--ctr-list-search-text-color, var(--sjs-general-dim-forecolor, rgba(0, 0, 0, 0.91)));
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  outline: none;
+  border: none;
+}
+.svc-list__input::placeholder {
+  color: var(--ctr-list-search-text-color-placeholder, var(--sjs-general-dim-forecolor-light, rgba(0, 0, 0, 0.45)));
+}
+
+.svc-list__filter-clear-button {
+  display: flex;
+  padding: var(--ctr-search-button-padding-vertical, calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))))) var(--ctr-search-button-padding-horizontal, calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
+  justify-content: center;
+  align-items: center;
+  border-radius: var(--ctr-search-button-corner-radius, 1024px);
+}
+.svc-list__filter-clear-button:hover {
+  background: var(--ctr-search-button-background-color-clear-hovered, var(--sjs-special-red-light, var(--red-light, rgba(230, 10, 62, 0.1))));
+}
+.svc-list__filter-clear-button:hover use {
+  fill: var(--ctr-search-button-icon-color-clear-hovered, var(--sjs-special-red, var(--red, #e60a3e)));
+}
+
+.svc-list__empty-container {
+  padding: var(--ctr-list-padding-top-no-data, calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))))) var(--ctr-list-padding-right-no-data, calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))))) var(--ctr-list-padding-bottom-no-data, calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))))) var(--ctr-list-padding-left-no-data, calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
+}
+
+.svc-list__empty-text {
+  --thm-default-font-size: var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))));
+  --thm-default-line-height: calc(1.5 * var(--thm-default-font-size));
+  font-family: var(--ctr-font-family, var(--sjs-font-family, var(--font-family)));
+  font-size: var(--ctr-font-default-size, var(--thm-default-font-size, 16px));
+  font-style: normal;
+  font-weight: 400;
+  line-height: var(--ctr-font-default-line-height, var(--thm-default-line-height, 24px));
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  text-align: center;
+  color: var(--ctr-list-no-data-text-color, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
+}
+
+.sv-popup--overlay .svc-list-item__marker-icon {
+  display: none;
+}
+.sv-popup--overlay .svc-list__item-body {
+  pointer-events: none;
+}
+.sv-popup--overlay .svc-list__item--group-selected > .svc-list__item-body {
+  --thm-default-font-size: var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))));
+  --thm-default-line-height: calc(1.5 * var(--thm-default-font-size));
+  font-family: var(--ctr-font-family, var(--sjs-font-family, var(--font-family)));
+  font-size: var(--ctr-font-default-size, var(--thm-default-font-size, 16px));
+  font-style: normal;
+  font-weight: 400;
+  line-height: var(--ctr-font-default-line-height, var(--thm-default-line-height, 24px));
+  font-weight: 600;
+  color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
+  background-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
+}
+.sv-popup--overlay .svc-list__item--group-selected > .svc-list__item-body use {
+  fill: var(--sjs-general-backcolor, var(--background, #fff));
+}
 /*!*******************************************************************************************************************************************************************************************!*\
   !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./src/components/tabs/json-editor-ace.scss ***!
   \*******************************************************************************************************************************************************************************************/
@@ -390,13 +684,17 @@ svc-tab-test {
   display: inline-block;
 }
 
-.svc-page-invisible .sv-list-item__marker-icon {
-  --sjs-general-forecolor-light: rgba(0, 0, 0, 0.45);
+.svc-page-invisible .svc-list__item-body {
+  padding-block-start: var(--ctr-list-item-padding-top, var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding-block-end: var(--ctr-list-item-padding-bottom, var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding-inline-start: var(--ctr-list-item-padding-left, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
+  padding-inline-end: var(--ctr-list-item-padding-right-with-label-icon, calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
+}
+.svc-page-invisible .svc-list-item__marker-icon {
   padding: 0;
-  width: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  opacity: 0.5;
-  margin-inline-end: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  opacity: var(--ctr-list-item-icon-opacity-label, 0.5);
+  width: var(--ctr-list-item-icon-width, calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
+  height: var(--ctr-list-item-icon-height, calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
 }
 
 .svc-test-tab__content .sd-body--empty {
@@ -754,6 +1052,10 @@ svc-tab-test {
   flex-flow: row wrap;
 }
 
+.svc-creator-popup .sl-panel-wrapper:first-child .sl-question {
+  margin-top: 0;
+}
+
 .sl-row--multiple .sl-panel {
   padding-bottom: 0;
 }
@@ -1591,11 +1893,6 @@ td.st-table__cell:first-of-type span {
   white-space: nowrap;
 }
 
-.sl-list__item-body {
-  padding-block: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  border-radius: var(--ctr-list-item-corner-radius, 4px);
-}
-
 .svc-logic-placeholder {
   width: calc(78 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   min-width: 100%;
@@ -1629,21 +1926,6 @@ td.st-table__cell:first-of-type span {
 .svc-logic-tab__leave-apply-button {
   background-color: var(--ctr-button-background-color-danger, var(--sjs-special-red, var(--red, #e60a3e)));
 }
-
-.sl-list {
-  padding-right: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  padding-left: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-}
-.sl-list .sv-list__filter {
-  padding-top: 0;
-}
-.sl-list .sv-list__filter-icon {
-  top: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
-}
-
-.sv-popup--dropdown-overlay .sv-list__filter {
-  padding-top: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-}
 /*!************************************************************************************************************************************************************************************!*\
   !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./src/components/tabs/designer.scss ***!
   \************************************************************************************************************************************************************************************/
@@ -1820,7 +2102,6 @@ svc-tab-designer {
   flex-direction: column;
 }
 .svc-tab-designer__surface-toolbar .sv-action-bar-separator {
-  background: var(--ctr-separator-color, var(--sjs-border-default, var(--border, #d6d6d6)));
   height: var(--ctr-separator-width, 1px);
   width: var(--ctr-page-navigator-button-icon-width, var(--sjs-base-unit, var(--base-unit, 8px)));
   padding: 0px var(--ctr-separator-margin-vertical-small, var(--sjs-base-unit, var(--base-unit, 8px)));
@@ -1830,6 +2111,10 @@ svc-tab-designer {
 .svc-tab-designer__surface-toolbar .sv-action__content {
   flex-direction: column;
 }
+
+.sv-action-bar-separator {
+  background: var(--ctr-separator-color, var(--sjs-border-default, var(--border, #d6d6d6)));
+}
 /*!************************************************************************************************************************************************************************!*\
   !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./src/responsivity.scss ***!
   \************************************************************************************************************************************************************************/
@@ -2093,6 +2378,12 @@ svc-tab-designer {
   gap: var(--ctr-popup-gap, 32px);
   box-shadow: unset;
 }
+.svc-creator-popup.sv-popup--dropdown-overlay .sv-popup__scrolling-content {
+  height: auto;
+}
+.svc-creator-popup.sv-popup--overlay.sv-popup--tablet > .sv-popup__container {
+  background-color: var(--ctr-popup-haze-background-color, var(--background-semitransparent, rgba(144, 144, 144, 0.5)));
+}
 .svc-creator-popup.sv-popup--overlay .sv-popup__container {
   background-color: var(--ctr-popup-haze-background-color, var(--background-semitransparent, rgba(144, 144, 144, 0.5)));
 }
@@ -2132,105 +2423,13 @@ svc-tab-designer {
   background-color: var(--ctr-popup-background-color, var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3)));
   border-radius: calc(4 * (var(--ctr-popup-menu-corner-radius, 4px))) calc(4 * (var(--ctr-popup-menu-corner-radius, 4px))) 0px 0px;
 }
-.svc-creator-popup.sv-popup--dropdown .sv-popup__body-content {
+.svc-creator-popup.sv-popup--dropdown .sv-popup__body-content, .svc-creator-popup.sv-popup--dropdown-overlay .sv-popup__body-content {
   background-color: var(--ctr-popup-menu-background-color, var(--sjs-general-backcolor, var(--background, #fff)));
+  padding: 0;
 }
 .svc-creator-popup.sv-popup--dropdown.svc-toolbox-subtypes .sv-popup__body-content {
   background: unset;
 }
-.svc-creator-popup .sv-list {
-  padding-inline-start: var(--ctr-list-padding-left);
-  padding-inline-end: var(--ctr-list-padding-right);
-}
-.svc-creator-popup .sv-list__filter {
-  border-bottom: 1px solid var(--ctr-list-search-border-color, var(--sjs-border-inside, var(--border-inside, rgba(0, 0, 0, 0.16))));
-}
-.svc-creator-popup .sv-list__filter .sv-list__input {
-  --thm-default-font-size: var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))));
-  --thm-default-line-height: calc(1.5 * var(--thm-default-font-size));
-  font-family: var(--ctr-font-family, var(--sjs-font-family, var(--font-family)));
-  font-size: var(--ctr-font-default-size, var(--thm-default-font-size, 16px));
-  font-style: normal;
-  font-weight: 400;
-  line-height: var(--ctr-font-default-line-height, var(--thm-default-line-height, 24px));
-  color: var(--ctr-list-search-text-color-placeholder, var(--sjs-general-dim-forecolor-light, rgba(0, 0, 0, 0.45)));
-  background-color: transparent;
-}
-.svc-creator-popup .sv-list__filter .sv-list__input::placeholder {
-  color: var(--ctr-list-search-text-color-placeholder, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
-}
-.svc-creator-popup .sv-list__filter .sv-list__filter-icon use {
-  fill: var(--ctr-list-search-icon-color, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
-}
-.svc-creator-popup .sv-list__item-body {
-  --thm-default-font-size: var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))));
-  --thm-default-line-height: calc(1.5 * var(--thm-default-font-size));
-  font-family: var(--ctr-font-family, var(--sjs-font-family, var(--font-family)));
-  font-size: var(--ctr-font-default-size, var(--thm-default-font-size, 16px));
-  font-style: normal;
-  font-weight: 400;
-  line-height: var(--ctr-font-default-line-height, var(--thm-default-line-height, 24px));
-  color: var(--ctr-list-item-text-color, var(--sjs-general-dim-forecolor, rgba(0, 0, 0, 0.91)));
-  transition: background-color var(--sjs-creator-transition-duration, 150ms), color var(--sjs-creator-transition-duration, 150ms);
-  border-radius: var(--ctr-list-item-corner-radius);
-}
-.svc-creator-popup .sv-list__item-icon use {
-  fill: var(--ctr-list-item-icon-color, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
-}
-.svc-creator-popup .sv-list__item:focus > .sv-list__item-body,
-.svc-creator-popup .sv-list__item:hover > .sv-list__item-body,
-.svc-creator-popup .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))));
-}
-.svc-creator-popup .sv-list__item:focus > .sv-list__item-body .sv-list__item-icon use,
-.svc-creator-popup .sv-list__item:hover > .sv-list__item-body .sv-list__item-icon use,
-.svc-creator-popup .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)));
-}
-.svc-creator-popup .sv-list__item--selected > .sv-list__item-body,
-.svc-creator-popup .sv-list__item--selected:hover > .sv-list__item-body,
-.svc-creator-popup .sv-list__item--selected:focus > .sv-list__item-body,
-.svc-creator-popup .sv-list__item.sv-list__item--selected:hover > .sv-list__item-body {
-  --thm-default-font-size: var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))));
-  --thm-default-line-height: calc(1.5 * var(--thm-default-font-size));
-  font-family: var(--ctr-font-family, var(--sjs-font-family, var(--font-family)));
-  font-size: var(--ctr-font-default-size, var(--thm-default-font-size, 16px));
-  font-style: normal;
-  font-weight: 400;
-  line-height: var(--ctr-font-default-line-height, var(--thm-default-line-height, 24px));
-  font-weight: 600;
-  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)));
-}
-.svc-creator-popup .sv-list__item--selected .sv-list__item-icon use,
-.svc-creator-popup .sv-list__item--selected:hover .sv-list__item-icon use,
-.svc-creator-popup .sv-list__item--selected:focus .sv-list__item-icon use,
-.svc-creator-popup .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)));
-}
-.svc-creator-popup .sv-list__item--group-selected > .sv-list__item-body,
-.svc-creator-popup .sv-list__item--group-selected:hover > .sv-list__item-body,
-.svc-creator-popup .sv-list__item--group-selected:focus > .sv-list__item-body {
-  background: var(--ctr-list-item-background-color-selected-submenu, var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1))));
-  color: var(--ctr-list-item-text-color-selected-submenu, var(--sjs-general-forecolor, var(--foreground, #161616)));
-  font-weight: 400;
-}
-.svc-creator-popup .sv-list__item--group-selected .sv-list__item-icon use,
-.svc-creator-popup .sv-list__item--group-selected:hover .sv-list__item-icon use,
-.svc-creator-popup .sv-list__item--group-selected:focus .sv-list__item-icon use {
-  fill: var(--ctr-list-item-icon-color-selected-submenu, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
-}
-.svc-creator-popup .sv-list__item--group-selected .sv-list-item__marker-icon use,
-.svc-creator-popup .sv-list__item--group-selected:hover .sv-list-item__marker-icon use,
-.svc-creator-popup .sv-list__item--group-selected:focus .sv-list-item__marker-icon use {
-  fill: var(--ctr-list-item-submenu-arrow-color-selected-item-submenu, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
-}
-.svc-creator-popup .sv-list__item.sv-action-bar-item--secondary:focus .sv-list__item-icon use,
-.svc-creator-popup .sv-list__item.sv-action-bar-item--secondary:hover .sv-list__item-icon use,
-.svc-creator-popup .sv-list__item.sv-action-bar-item--secondary .sv-list__item-icon use {
-  fill: var(--ctr-survey-question-panel-toolbar-item-icon-color, var(--sjs-secondary-backcolor, var(--secondary, #ff9814)));
-}
 .svc-creator-popup.sv-popup--dropdown-overlay .sv-popup__button.sv-popup__button {
   color: var(--ctr-actionbar-button-text-color, var(--sjs-primary-backcolor, var(--primary, #19b394)));
   border-radius: var(--ctr-actionbar-button-corner-radius, calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
@@ -2245,39 +2444,6 @@ svc-tab-designer {
   color: var(--ctr-actionbar-button-text-color-disabled, var(--sjs-general-forecolor, var(--foreground, #161616)));
   opacity: var(--ctr-actionbar-button-opacity-disabled, 0.25);
 }
-.svc-creator-popup.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)));
-}
-.svc-creator-popup.sv-popup--dropdown-overlay .sv-list__input {
-  color: var(--ctr-list-item-text-color, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
-}
-.svc-creator-popup.sv-popup--dropdown-overlay .sv-list__item:hover .sv-list__item-body,
-.svc-creator-popup.sv-popup--dropdown-overlay .sv-list__item:focus .sv-list__item-body,
-.svc-creator-popup.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)));
-}
-.svc-creator-popup.sv-popup--dropdown-overlay .sv-list__item:hover.sv-list__item--selected .sv-list__item-body,
-.svc-creator-popup.sv-popup--dropdown-overlay .sv-list__item:focus.sv-list__item--selected .sv-list__item-body,
-.svc-creator-popup.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)));
-}
-.svc-creator-popup.sv-popup--dropdown-overlay .sv-list__item:hover .sv-list__item-icon use,
-.svc-creator-popup.sv-popup--dropdown-overlay .sv-list__item:focus .sv-list__item-icon use,
-.svc-creator-popup.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)));
-}
-.svc-creator-popup.sv-popup--dropdown-overlay .sv-list__item:hover.sv-list__item--selected.sv-list__item--group > .sv-list__item-body,
-.svc-creator-popup.sv-popup--dropdown-overlay .sv-list__item:focus.sv-list__item--selected.sv-list__item--group > .sv-list__item-body,
-.svc-creator-popup.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)));
-}
-.svc-creator-popup.sv-popup--dropdown-overlay .sv-list__item:hover.sv-list__item--selected.sv-list__item--group .sv-list__item-icon use,
-.svc-creator-popup.sv-popup--dropdown-overlay .sv-list__item:focus.sv-list__item--selected.sv-list__item--group .sv-list__item-icon use,
-.svc-creator-popup.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)));
-}
 .svc-creator-popup.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)));
 }
@@ -3017,7 +3183,7 @@ survey-creator .sv-drag-drop-choices-shortcut .sv-drag-drop-choices-shortcut__co
 
 .svc-string-editor:hover:not(.svc-string-editor--readonly):not(:focus-within) .svc-string-editor__border--hover {
   opacity: 1;
-  transition-delay: 200ms;
+  transition-delay: 0ms;
 }
 .svc-string-editor:hover:not(.svc-string-editor--readonly):not(:focus-within) .svc-string-editor__border--focus {
   transition: none;
@@ -3272,7 +3438,6 @@ svc-page-navigator-item,
 }
 
 .svc-page-navigator-item__banner {
-  display: flex;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -3288,6 +3453,8 @@ svc-page-navigator-item,
   position: absolute;
   top: 0;
   right: 0;
+  z-index: 1;
+  display: none;
 }
 .svc-page-navigator-item__banner .svc-page-navigator-item__dot-content {
   width: var(--ctr-page-navigator-item-dot-radius-large, var(--sjs-base-unit, var(--base-unit, 8px)));
@@ -3322,6 +3489,7 @@ svc-page-navigator-item,
 
 .svc-page-navigator-item-content:not(.svc-page-navigator-item--selected):hover .svc-page-navigator-item__banner,
 .svc-page-navigator-item-content:not(.svc-page-navigator-item--selected):focus .svc-page-navigator-item__banner {
+  display: flex;
   opacity: 1;
 }
 
@@ -3438,6 +3606,32 @@ svc-page {
   background-color: transparent;
   transition: background-color var(--sjs-creator-transition-duration, 150ms);
 }
+.svc-page-toolbar__item use {
+  fill: var(--ctr-survey-question-panel-toolbar-item-icon-color, var(--sjs-secondary-backcolor, var(--secondary, #ff9814)));
+}
+.svc-page-toolbar__item:hover, .svc-page-toolbar__item:focus {
+  background-color: var(--ctr-survey-page-toolbar-item-background-color-hovered, var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3)));
+}
+.svc-page-toolbar__item:active, .svc-page-toolbar__item.svc-page-toolbar__item--pressed {
+  background-color: var(--ctr-survey-page-toolbar-item-background-color-hovered, var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3)));
+  opacity: var(--ctr-survey-question-panel-toolbar-item-opacity-pressed, 0.5);
+}
+.svc-page-toolbar__item:active use, .svc-page-toolbar__item.svc-page-toolbar__item--pressed use {
+  fill: black;
+  opacity: 0.5;
+}
+.svc-page-toolbar__item.svc-survey-element-toolbar__item--active {
+  background-color: var(--ctr-survey-page-toolbar-item-background-color-selected, var(--sjs-secondary-backcolor-semi-light, rgba(255, 152, 20, 0.1)));
+}
+.svc-page-toolbar__item.svc-survey-element-toolbar__item--active .svc-survey-element-toolbar-item__title {
+  color: var(--ctr-survey-page-toolbar-item-text-color-selected, var(--sjs-general-forecolor, var(--foreground, #161616)));
+}
+.svc-page-toolbar__item.svc-survey-element-toolbar__item--active use {
+  fill: var(--ctr-survey-page-toolbar-item-icon-color-selected, var(--sjs-secondary-backcolor, var(--secondary, #ff9814)));
+}
+.svc-page-toolbar__item :disabled {
+  opacity: var(--ctr-survey-question-panel-toolbar-item-opacity-disabled, 0.25);
+}
 
 .svc-page-toolbar__item--with-text {
   --thm-survey-question-panel-toolbar-item-padding-right: calc(var(--ctr-survey-question-panel-toolbar-item-padding-right-with-text) + var(--ctr-survey-question-panel-toolbar-item-icon-padding-right));
@@ -3454,31 +3648,6 @@ svc-page {
   margin-inline-start: 0;
 }
 
-.svc-page-toolbar__item:not(.svc-page-toolbar__item--pressed):hover:enabled {
-  background-color: var(--ctr-survey-page-toolbar-item-background-color-hovered, var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3)));
-}
-
-.svc-page-toolbar__item:not(.svc-page-toolbar__item--pressed):focus:enabled {
-  background-color: var(--ctr-survey-page-toolbar-item-background-color-selected, var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3)));
-}
-
-.svc-page-toolbar__item:not(.svc-page-toolbar__item--pressed):active:enabled {
-  opacity: var(--ctr-survey-question-panel-toolbar-item-opacity-pressed, 0.5);
-}
-
-.svc-page-toolbar__item:disabled {
-  opacity: var(--ctr-survey-question-panel-toolbar-item-opacity-disabled, 0.25);
-}
-
-.svc-page-toolbar__item--active .svc-page-toolbar-item__icon use {
-  fill: var(--ctr-survey-question-panel-toolbar-item-icon-color, var(--sjs-secondary-backcolor, var(--secondary, #ff9814)));
-}
-
-.svc-page-toolbar__item--pressed:not(.svc-page-toolbar__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-toolbar-item__icon {
   --thm-survey-page-toolbar-item-icon-width: calc(var(--ctr-survey-question-panel-toolbar-item-icon-container-width) - var(--ctr-survey-question-panel-toolbar-item-icon-padding-right) - var(--ctr-survey-question-panel-toolbar-item-icon-padding-left));
   --thm-survey-page-toolbar-item-icon-height: calc(var(--ctr-survey-question-panel-toolbar-item-icon-container-height) - var(--ctr-survey-question-panel-toolbar-item-icon-padding-top) - var(--ctr-survey-question-panel-toolbar-item-icon-padding-bottom));
@@ -3486,15 +3655,6 @@ svc-page {
   height: var(--thm-survey-page-toolbar-item-icon-height, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
 }
 
-.svc-page-toolbar-item__icon use {
-  fill: var(--ctr-survey-question-panel-toolbar-item-icon-color, var(--sjs-secondary-backcolor, var(--secondary, #ff9814)));
-}
-
-.svc-page-toolbar__item:active .svc-page-toolbar-item__icon use {
-  fill: black;
-  opacity: 0.5;
-}
-
 .svc-page-toolbar-item__title {
   --thm-small-line-height: var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))));
   --thm-small-font-size: calc(0.75 * var(--thm-small-line-height));
@@ -3703,37 +3863,6 @@ svc-page {
   height: auto;
 }
 
-.svc-element__add-new-question .sv-list__item.sv-list__item--disabled,
-.svc-question__adorner .sv-list__item.sv-list__item--disabled {
-  opacity: 0.25;
-  pointer-events: none;
-}
-.svc-element__add-new-question .sv-popup--overlay .sv-list-item__marker-icon,
-.svc-question__adorner .sv-popup--overlay .sv-list-item__marker-icon {
-  display: none;
-}
-.svc-element__add-new-question .sv-popup--overlay .sv-list__item-body,
-.svc-question__adorner .sv-popup--overlay .sv-list__item-body {
-  pointer-events: none;
-}
-.svc-element__add-new-question .sv-popup--overlay .sv-list__item.sv-list__item--group-selected > .sv-list__item-body,
-.svc-question__adorner .sv-popup--overlay .sv-list__item.sv-list__item--group-selected > .sv-list__item-body {
-  --thm-default-font-size: var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))));
-  --thm-default-line-height: calc(1.5 * var(--thm-default-font-size));
-  font-family: var(--ctr-font-family, var(--sjs-font-family, var(--font-family)));
-  font-size: var(--ctr-font-default-size, var(--thm-default-font-size, 16px));
-  font-style: normal;
-  font-weight: 400;
-  line-height: var(--ctr-font-default-line-height, var(--thm-default-line-height, 24px));
-  font-weight: 600;
-  background-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
-  color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
-}
-.svc-element__add-new-question .sv-popup--overlay .sv-list__item.sv-list__item--group-selected > .sv-list__item-body use,
-.svc-question__adorner .sv-popup--overlay .sv-list__item.sv-list__item--group-selected > .sv-list__item-body use {
-  fill: var(--sjs-general-backcolor, var(--background, #fff));
-}
-
 .svc-page__content--collapsed > .sv-action-bar {
   display: none;
 }
@@ -4091,42 +4220,45 @@ svc-question {
   border: none;
   cursor: pointer;
   white-space: nowrap;
-  --thm-survey-question-panel-toolbar-item-padding-top: calc(
-    var(--ctr-survey-question-panel-toolbar-item-padding-top) +
-      var(--ctr-survey-question-panel-toolbar-item-icon-padding-top)
-  );
-  --thm-survey-question-panel-toolbar-item-padding-right: calc(
-    var(--ctr-survey-question-panel-toolbar-item-padding-right) +
-      var(--ctr-survey-question-panel-toolbar-item-icon-padding-right)
-  );
-  --thm-survey-question-panel-toolbar-item-padding-bottom: calc(
-    var(--ctr-survey-question-panel-toolbar-item-padding-bottom) +
-      var(--ctr-survey-question-panel-toolbar-item-icon-padding-bottom)
-  );
-  --thm-survey-question-panel-toolbar-item-padding-left: calc(
-    var(--ctr-survey-question-panel-toolbar-item-padding-left) +
-      var(--ctr-survey-question-panel-toolbar-item-icon-padding-left)
-  );
   --thm-survey-question-panel-toolbar-button-gap: calc(var(--ctr-survey-question-panel-toolbar-gap) / 2);
   margin: 0 var(--thm-survey-question-panel-toolbar-button-gap, calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
   border-radius: var(--ctr-survey-question-panel-toolbar-item-corner-radius, calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
-  padding: var(--thm-survey-question-panel-toolbar-item-padding-top, var(--sjs-base-unit, var(--base-unit, 8px))) var(--thm-survey-question-panel-toolbar-item-padding-right, var(--sjs-base-unit, var(--base-unit, 8px))) var(--thm-survey-question-panel-toolbar-item-padding-bottom, var(--sjs-base-unit, var(--base-unit, 8px))) var(--thm-survey-question-panel-toolbar-item-padding-left, var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding: var(--ctr-survey-question-panel-toolbar-item-padding-top, calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))))) var(--ctr-survey-question-panel-toolbar-item-padding-right, calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))))) var(--ctr-survey-question-panel-toolbar-item-padding-bottom, calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))))) var(--ctr-survey-question-panel-toolbar-item-padding-left, calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
   justify-content: center;
   align-items: center;
   background-color: transparent;
   transition: background var(--sjs-creator-transition-duration, 150ms), opacity var(--sjs-creator-transition-duration, 150ms);
 }
+.svc-survey-element-toolbar__item use {
+  fill: var(--ctr-survey-question-panel-toolbar-item-icon-color, var(--sjs-secondary-backcolor, var(--secondary, #ff9814)));
+}
+.svc-survey-element-toolbar__item:hover, .svc-survey-element-toolbar__item:focus {
+  background-color: var(--ctr-survey-question-panel-toolbar-item-background-color-hovered, var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3)));
+}
+.svc-survey-element-toolbar__item:active, .svc-survey-element-toolbar__item.svc-survey-element-toolbar__item--pressed {
+  opacity: var(--ctr-survey-question-panel-toolbar-item-opacity-pressed, 0.5);
+  background-color: var(--ctr-survey-question-panel-toolbar-item-background-color-pressed, var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3)));
+}
+.svc-survey-element-toolbar__item:active use, .svc-survey-element-toolbar__item.svc-survey-element-toolbar__item--pressed use {
+  fill: black;
+  opacity: 0.45;
+}
+.svc-survey-element-toolbar__item.svc-survey-element-toolbar__item--active {
+  background-color: var(--ctr-survey-question-panel-toolbar-item-background-color-selected, var(--sjs-secondary-backcolor-semi-light, rgba(255, 152, 20, 0.1)));
+}
+.svc-survey-element-toolbar__item.svc-survey-element-toolbar__item--active .svc-survey-element-toolbar-item__title {
+  color: var(--ctr-survey-question-panel-toolbar-item-text-color-selected, var(--sjs-general-forecolor, var(--foreground, #161616)));
+}
+.svc-survey-element-toolbar__item.svc-survey-element-toolbar__item--active use {
+  fill: var(--ctr-survey-question-panel-toolbar-item-icon-color-selected, var(--sjs-secondary-backcolor, var(--secondary, #ff9814)));
+}
+.svc-survey-element-toolbar__item :disabled {
+  opacity: var(--ctr-survey-question-panel-toolbar-item-opacity-disabled, 0.25);
+}
 
 .svc-survey-element-toolbar__item--with-text {
-  --thm-survey-question-panel-toolbar-item-padding-right: calc(
-    var(--ctr-survey-question-panel-toolbar-item-padding-right-with-text) +
-      var(--ctr-survey-question-panel-toolbar-item-icon-padding-right)
-  );
-  --thm-survey-question-panel-toolbar-item-gap: calc(
-    var(--ctr-survey-question-panel-toolbar-item-gap) + var(--ctr-survey-question-panel-toolbar-item-icon-padding-right)
-  );
-  padding-inline-end: var(--thm-survey-question-panel-toolbar-item-padding-right, var(--sjs-base-unit, var(--base-unit, 8px)));
-  gap: var(--thm-survey-question-panel-toolbar-item-gap, calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
+  padding-inline-end: var(--ctr-survey-question-panel-toolbar-item-padding-right-with-text, var(--sjs-base-unit, var(--base-unit, 8px)));
+  gap: var(--ctr-survey-question-panel-toolbar-item-gap, calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
 }
 
 .svc-survey-element-toolbar .sv-action:last-of-type .svc-survey-element-toolbar__item {
@@ -4138,84 +4270,27 @@ svc-question {
 }
 
 .svc-dropdown-action--convertTo .svc-survey-element-toolbar__item--with-text {
-  --thm-survey-question-panel-toolbar-item-padding-left: calc(
-    var(--ctr-survey-question-panel-toolbar-item-padding-left) +
-      var(--ctr-survey-question-panel-toolbar-item-icon-padding-left-with-text)
-  );
-  --thm-survey-question-panel-toolbar-item-gap: calc(
-    var(--ctr-survey-question-panel-toolbar-item-gap) + var(--ctr-survey-question-panel-toolbar-item-icon-padding-left)
-  );
+  padding-inline-end: var(--ctr-survey-question-panel-toolbar-item-padding-right, 4px);
+  padding-inline-start: var(--ctr-survey-question-panel-toolbar-item-padding-left-with-text, var(--sjs-base-unit, var(--base-unit, 8px)));
   flex-direction: row-reverse;
-  padding-inline-start: var(--thm-survey-question-panel-toolbar-item-padding-left, var(--sjs-base-unit, var(--base-unit, 8px)));
-  gap: var(--thm-survey-question-panel-toolbar-item-gap, calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
+  gap: var(--ctr-survey-question-panel-toolbar-item-gap, calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
 }
 
-.svc-dropdown-action--convertTo .svc-survey-element-toolbar__item--icon {
-  padding: var(--ctr-survey-question-panel-toolbar-item-padding-top, calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))))) var(--ctr-survey-question-panel-toolbar-item-padding-right, calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))))) var(--ctr-survey-question-panel-toolbar-item-padding-bottom, calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))))) var(--ctr-survey-question-panel-toolbar-item-padding-left, calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
-}
 .svc-dropdown-action--convertTo .svc-survey-element-toolbar__item--icon .svc-survey-element-toolbar-item__icon {
   padding: 0;
   width: var(--ctr-survey-question-panel-toolbar-item-icon-container-width, calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
   height: var(--ctr-survey-question-panel-toolbar-item-icon-container-height, calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
-}
-
-.svc-survey-element-toolbar .svc-survey-element-toolbar-item__icon use {
-  fill: var(--ctr-survey-question-panel-toolbar-item-icon-color, var(--sjs-secondary-backcolor, var(--secondary, #ff9814)));
-}
-
-.svc-survey-element-toolbar__item:not(.svc-survey-element-toolbar__item--pressed):hover:enabled {
-  background-color: var(--ctr-survey-question-panel-toolbar-item-background-color-hovered, var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3)));
-}
-.svc-survey-element-toolbar__item:not(.svc-survey-element-toolbar__item--pressed):focus:enabled {
-  background-color: var(--ctr-survey-question-panel-toolbar-item-background-color-selected, var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3)));
-}
-
-.svc-survey-element-toolbar__item:not(.svc-survey-element-toolbar__item--pressed):active:enabled {
-  opacity: var(--ctr-survey-question-panel-toolbar-item-opacity-pressed, 0.5);
-  background-color: var(--ctr-survey-question-panel-toolbar-item-background-color-pressed, var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3)));
-}
-.svc-survey-element-toolbar__item:not(.svc-survey-element-toolbar__item--pressed):active:enabled use {
-  fill: black;
-  opacity: 0.45;
-}
-
-.svc-survey-element-toolbar__item:disabled {
-  opacity: var(--ctr-survey-question-panel-toolbar-item-opacity-disabled, 0.25);
-}
-
-.svc-survey-element-toolbar__item--active .svc-survey-element-toolbar-item__icon use {
-  fill: var(--ctr-survey-question-panel-toolbar-item-icon-color, var(--sjs-secondary-backcolor, var(--secondary, #ff9814)));
-}
-
-.svc-survey-element-toolbar__item--pressed:not(.svc-survey-element-toolbar__item--active) {
-  background-color: var(--ctr-survey-question-panel-toolbar-item-background-color-pressed, var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3)));
-  opacity: var(--ctr-survey-question-panel-toolbar-item-opacity-pressed, 50%);
-}
-.svc-survey-element-toolbar__item--pressed:not(.svc-survey-element-toolbar__item--active) use {
-  fill: black;
-  opacity: 0.45;
-}
-
-.svc-survey-element-toolbar__item--active:not(.svc-survey-element-toolbar__item--pressed):enabled:hover,
-.svc-survey-element-toolbar__item--active:not(.svc-survey-element-toolbar__item--pressed):enabled:focus,
-.svc-survey-element-toolbar__item--active {
-  background-color: var(--ctr-survey-question-panel-toolbar-item-background-color-selected, var(--sjs-secondary-backcolor-semi-light, rgba(255, 152, 20, 0.1)));
+  box-sizing: border-box;
+  display: block;
 }
 
 .svc-survey-element-toolbar-item__icon,
 .svc-survey-element-toolbar__dots-item .sv-svg-icon.sv-action-bar-item__icon {
-  --ctr-survey-question-toolbar-item-icon-width: calc(
-    var(--ctr-survey-question-panel-toolbar-item-icon-container-width) -
-      var(--ctr-survey-question-panel-toolbar-item-icon-padding-right) -
-      var(--ctr-survey-question-panel-toolbar-item-icon-padding-left)
-  );
-  --ctr-survey-question-toolbar-item-icon-height: calc(
-    var(--ctr-survey-question-panel-toolbar-item-icon-container-height) -
-      var(--ctr-survey-question-panel-toolbar-item-icon-padding-top) -
-      var(--ctr-survey-question-panel-toolbar-item-icon-padding-bottom)
-  );
-  width: var(--ctr-survey-question-toolbar-item-icon-width, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
-  height: var(--ctr-survey-question-toolbar-item-icon-height, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
+  box-sizing: border-box;
+  display: block;
+  padding: var(--ctr-survey-question-panel-toolbar-item-icon-padding-top, calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))))) var(--ctr-survey-question-panel-toolbar-item-icon-padding-right, calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))))) var(--ctr-survey-question-panel-toolbar-item-icon-padding-bottom, calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))))) var(--ctr-survey-question-panel-toolbar-item-icon-padding-left, calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
+  width: var(--ctr-survey-question-panel-toolbar-item-icon-container-width, calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
+  height: var(--ctr-survey-question-panel-toolbar-item-icon-container-height, calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
 }
 
 .svc-survey-element-toolbar-item__title {
@@ -4456,7 +4531,7 @@ svc-question {
 .svc-survey-element-toolbar__dots-item .sv-dots__item {
   margin-left: 0;
 }
-.svc-survey-element-toolbar__dots-item .sv-list__item-icon {
+.svc-survey-element-toolbar__dots-item .svc-list__item-icon {
   --ctr-survey-question-toolbar-item-icon-width: calc(
     var(--ctr-survey-question-panel-toolbar-item-icon-container-width) -
       var(--ctr-survey-question-panel-toolbar-item-icon-padding-right) -
@@ -4470,7 +4545,7 @@ svc-question {
   width: var(--ctr-survey-question-toolbar-item-icon-width, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
   height: var(--ctr-survey-question-toolbar-item-icon-height, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
 }
-.svc-survey-element-toolbar__dots-item .sv-list__item:hover > .sv-list__item-body .sv-svg-icon use,
+.svc-survey-element-toolbar__dots-item .svc-list__item:hover > .svc-list__item-body .sv-svg-icon use,
 .svc-survey-element-toolbar__dots-item .sv-svg-icon use {
   fill: var(--sjs-secondary-backcolor, var(--secondary, #ff9814));
 }
@@ -4922,27 +4997,16 @@ svc-question .sv-action-bar,
 .sd-panel .svc-question__content {
   border-radius: 0;
   box-shadow: none;
+  outline: var(--ctr-survey-question-panel-border-width-nested, 1px) dashed var(--ctr-survey-question-panel-border-color-nested, var(--sjs-border-default, var(--border, #d6d6d6)));
+  outline-offset: calc(-1 * var(--ctr-survey-question-panel-border-width-nested, 1px));
 }
-.sd-panel .svc-question__content:after {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  border: var(--ctr-survey-question-panel-border-width-nested, 1px) dashed var(--ctr-survey-question-panel-border-color-nested, var(--sjs-border-default, var(--border, #d6d6d6)));
-}
-.sd-panel .svc-hovered .svc-question__content:not(.svc-question__content--dragged) {
+.sd-panel .svc-hovered > .svc-question__content:not(.svc-question__content--dragged) {
   box-shadow: 0 0 0 var(--ctr-survey-question-panel-border-width-hovered, 2px) var(--ctr-survey-question-panel-border-color-hovered, var(--sjs-secondary-backcolor-light, var(--secondary-light, rgba(255, 152, 20, 0.25)))) inset;
-}
-.sd-panel .svc-hovered .svc-question__content:not(.svc-question__content--dragged):after {
-  content: initial;
+  outline: none;
 }
 .sd-panel .svc-question__content.svc-question__content--selected:not(.svc-question__content--dragged) {
   box-shadow: 0 0 0 var(--ctr-survey-question-panel-border-width-selected, 2px) var(--ctr-survey-question-panel-border-color-selected, var(--sjs-secondary-backcolor, var(--secondary, #ff9814))) inset;
-}
-.sd-panel .svc-question__content.svc-question__content--selected:not(.svc-question__content--dragged):after {
-  content: initial;
+  outline: none;
 }
 
 .sd-panel .svc-row--ghost.svc-row--ghost .svc-question__content.svc-question__content {
@@ -5245,23 +5309,7 @@ svc-question .sv-action-bar,
   border: none;
   cursor: pointer;
   white-space: nowrap;
-  --thm-survey-question-panel-toolbar-item-padding-top-small: calc(
-    var(--ctr-survey-question-panel-toolbar-item-padding-top-small) +
-      var(--ctr-survey-question-panel-toolbar-item-icon-padding-top)
-  );
-  --thm-survey-question-panel-toolbar-item-padding-right-small: calc(
-    var(--ctr-survey-question-panel-toolbar-item-padding-right-small) +
-      var(--ctr-survey-question-panel-toolbar-item-icon-padding-right)
-  );
-  --thm-survey-question-panel-toolbar-item-padding-bottom-small: calc(
-    var(--ctr-survey-question-panel-toolbar-item-padding-bottom-small) +
-      var(--ctr-survey-question-panel-toolbar-item-icon-padding-bottom)
-  );
-  --thm-survey-question-panel-toolbar-item-padding-left-small: calc(
-    var(--ctr-survey-question-panel-toolbar-item-padding-left-small) +
-      var(--ctr-survey-question-panel-toolbar-item-icon-padding-left)
-  );
-  padding: var(--thm-survey-question-panel-toolbar-item-padding-top-small, calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))))) var(--thm-survey-question-panel-toolbar-item-padding-right-small, calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))))) var(--thm-survey-question-panel-toolbar-item-padding-bottom-small, calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))))) var(--thm-survey-question-panel-toolbar-item-padding-left-small, calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
+  padding: 0;
   border-radius: var(--ctr-survey-question-panel-toolbar-item-corner-radius, 2px);
   opacity: var(--ctr-survey-question-panel-toolbar-item-opacity-muted, 0.5);
   background-color: transparent;
@@ -6220,6 +6268,7 @@ svc-question .sv-action-bar,
   font-weight: 400;
   line-height: var(--ctr-font-default-line-height, var(--thm-default-line-height, 24px));
   font-weight: 600;
+  border-radius: var(--ctr-actionbar-button-corner-radius, calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
 }
 
 .svc-question-link__set-button {
@@ -6229,7 +6278,6 @@ svc-question .sv-action-bar,
 .svc-link-value-button {
   --thm-margin-inline-start: calc(-1 * var(--ctr-actionbar-button-padding-left-medium-text));
   margin-inline-start: var(--thm-margin-inline-start, calc(-2 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
-  border-radius: var(--ctr-actionbar-button-corner-radius, calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
 }
 
 .svc-question-link__clear-button {
@@ -6560,12 +6608,9 @@ svc-question .sv-action-bar,
   width: auto;
 }
 
-.svc-tabbed-menu-item-container .sv-list__item-icon {
+.svc-tabbed-menu-item-container .svc-list__item-icon {
   display: none;
 }
-.svc-tabbed-menu-item-container .sv-list__item--with-icon.sv-list__item--with-icon > .sv-list__item-body {
-  padding-block: var(--sjs-base-unit, var(--base-unit, 8px));
-}
 /*!**********************************************************************************************************************************************************************************************!*\
   !*** 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/tabbed-menu/tabbed-menu.scss ***!
   \**********************************************************************************************************************************************************************************************/
@@ -7392,8 +7437,8 @@ svc-question .sv-action-bar,
   flex-direction: column;
   display: flex;
   position: relative;
-  min-width: 370px;
-  width: 450px;
+  width: var(--ctr-property-grid-width, 450px);
+  min-width: var(--ctr-property-grid-min-width, 370px);
   height: 100%;
   border-inline-start: 1px solid var(--ctr-property-grid-border-color, var(--sjs-border-default, var(--border, #d6d6d6)));
 }
@@ -8104,11 +8149,13 @@ button.spg-action-button--large {
 }
 
 .spg-row-narrow__question {
-  margin-top: calc(-2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  --thm-ctr-property-grid-form-gap: var(--ctr-property-grid-form-gap, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
+  margin-top: calc(-1 * var(--thm-ctr-property-grid-form-gap));
 }
 
 .spg-row--multiple > div > .spg-row-narrow__question {
-  margin-top: calc(-1 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  --thm-ctr-editor-layout-gap: var(--ctr-editor-layout-gap, var(--sjs-base-unit, var(--base-unit, 8px)));
+  margin-top: calc(-1 * var(--thm-ctr-editor-layout-gap));
 }
 
 .spg-question--location--left {
@@ -8470,6 +8517,16 @@ input.spg-input:read-only::placeholder {
   height: 0;
 }
 
+.spg-dropdown__clean-button {
+  --thm-ctr-editor-content-margin-top: var(--ctr-editor-content-margin-top, var(--sjs-base-unit, var(--base-unit, 8px)));
+  --thm-ctr-editor-content-margin-bottom: var(--ctr-editor-content-margin-bottom, var(--sjs-base-unit, var(--base-unit, 8px)));
+  margin-top: calc(-1 * var(--thm-ctr-editor-content-margin-top));
+  margin-bottom: calc(-1 * var(--thm-ctr-editor-content-margin-bottom));
+}
+.spg-dropdown__clean-button use {
+  fill: inherit;
+}
+
 .spg-comment {
   height: auto;
   max-width: 100%;
@@ -8548,7 +8605,7 @@ input.spg-input:read-only::placeholder {
   margin-top: var(--ctr-property-grid-form-gap, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
 }
 .spg-panel__content .spg-row--multiple {
-  margin-top: var(--sjs-base-unit, var(--base-unit, 8px));
+  margin-top: var(--ctr-editor-layout-gap, var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 
 .spg-panel__content > .spg-row:first-of-type {
@@ -8640,6 +8697,7 @@ input.spg-input:read-only::placeholder {
   padding-inline-end: var(--ctr-label-padding-right, 0px);
   padding-bottom: var(--ctr-label-padding-bottom, var(--sjs-base-unit, var(--base-unit, 8px)));
   padding-inline-start: var(--ctr-label-padding-left, 0px);
+  color: var(--ctr-label-text-color, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
 }
 .spg-panel.spg-panel--group .spg-row {
   margin-top: var(--ctr-editor-layout-gap, var(--sjs-base-unit, var(--base-unit, 8px)));
@@ -8823,7 +8881,7 @@ input.spg-input:read-only::placeholder {
   border: 1px solid var(--ctr-survey-placeholder-border-color, var(--sjs-border-default, var(--border, #d6d6d6)));
   border-radius: var(--ctr-data-table-placeholder-corner-radius);
   box-sizing: border-box;
-  padding: var(--ctr-survey-placeholder-padding-top-with-button, calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))))) var(--ctr-survey-placeholder-padding-right, 0) var(--ctr-survey-placeholder-padding-bottom-with-button, calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))))) var(--ctr-survey-placeholder-padding-left, 0);
+  padding: var(--ctr-data-table-placeholder-padding-top, calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))))) var(--ctr-data-table-placeholder-padding-right, 0) var(--ctr-data-table-placeholder-padding-bottom, calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))))) var(--ctr-data-table-placeholder-padding-left, 0);
   gap: var(--ctr-survey-placeholder-gap, calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
 }
 .spg-matrixdynamic__placeholder .spg-matrixdynamic__add-btn {
@@ -9101,13 +9159,9 @@ input.spg-input:read-only::placeholder {
   transform: translateY(-50%);
 }
 
-.spg-color-editor__color-item {
-  display: flex;
-  gap: var(--ctr-list-item-gap, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
-  padding: var(--ctr-list-item-padding-top-with-icon, var(--sjs-base-unit, var(--base-unit, 8px))) var(--ctr-list-item-padding-right, calc(8 * (var(--sjs-base-unit, var(--base-unit, 8px))))) var(--ctr-list-item-padding-bottom-with-icon, var(--sjs-base-unit, var(--base-unit, 8px))) var(--ctr-list-item-padding-left, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
-}
-.spg-color-editor__color-item .spg-color-editor__color-swatch {
+.svc-list__item-body .spg-color-editor__color-swatch {
   margin-left: 0;
+  flex: 0 1 auto;
 }
 
 .spg-color-editor__color-swatch {
@@ -9263,19 +9317,20 @@ input.spg-input:read-only::placeholder {
   margin-top: calc(-2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .spg-theme-builder-root .sd-question--title-top .spg-paneldynamic {
-  margin-top: calc(-1 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  --thm-ctr-editor-layout-gap: var(--ctr-editor-layout-gap, var(--sjs-base-unit, var(--base-unit, 8px)));
+  margin-top: calc(-1 * var(--thm-ctr-editor-layout-gap));
 }
-.spg-theme-builder-root .spg-question.spg-row__question:not(.sd-question--title-top):not(.spg-question--boolean) {
-  margin-top: calc(-1 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+.spg-theme-builder-root .spg-question.spg-row__question:not(.sd-question--title-top):not(.spg-question--boolean),
+.spg-theme-builder-root .spg-question__content-coloralpha {
+  --thm-ctr-property-grid-form-gap: var(--ctr-property-grid-form-gap, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
+  --thm-ctr-editor-layout-gap: var(--ctr-editor-layout-gap, var(--sjs-base-unit, var(--base-unit, 8px)));
+  margin-top: calc(var(--thm-ctr-editor-layout-gap) - var(--thm-ctr-property-grid-form-gap));
 }
 .spg-theme-builder-root .spg-row--multiple .spg-question.spg-row__question:not(.sd-question--title-top) {
   margin-top: 0;
 }
-.spg-theme-builder-root .spg-question__content-coloralpha {
-  margin-top: calc(-1 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-}
 .spg-theme-builder-root .spg-question-composite__content .spg-row:first-of-type {
-  margin-top: var(--sjs-base-unit, var(--base-unit, 8px));
+  margin-top: var(--ctr-editor-layout-gap, var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 
 .svc-side-bar--mobile .spg-theme-builder-root .spg-nested-panel__content::after {
@@ -9673,30 +9728,32 @@ input.spg-input:read-only::placeholder {
   display: flex;
 }
 .svc-top-bar .svc-toolbar-wrapper .sv-action-bar {
-  padding: var(--ctr-menu-toolbar-padding-vertical, 0) var(--ctr-menu-toolbar-padding-horizontal, var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding: var(--ctr-menu-toolbar-padding-vertical, 0) var(--ctr-menu-toolbar-padding-horizontal, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
   justify-content: flex-end;
 }
 .svc-top-bar .svc-toolbar-wrapper .sv-action-bar-separator {
   display: none;
 }
 .svc-top-bar .svc-toolbar-wrapper .sv-action-bar > .sv-action:not(.sv-action--hidden) ~ .sv-action .sv-action-bar-separator {
-  --thm-menu-toolbar-button-gap: calc(var(--ctr-menu-toolbar-gap) / 2);
   --thm-menu-toolbar-button-height: calc(
     var(--ctr-menu-toolbar-button-padding-top) + var(--ctr-menu-toolbar-button-padding-bottom) +
       var(--ctr-menu-toolbar-button-icon-width)
   );
   display: inline-block;
-  margin: 0 var(--thm-menu-toolbar-button-gap, var(--sjs-base-unit, var(--base-unit, 8px)));
+  margin: 0;
+  margin-inline-start: var(--ctr-menu-toolbar-gap, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
   height: var(--thm-menu-toolbar-button-height, calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
 }
 .svc-top-bar .svc-toolbar-wrapper .sv-action .sv-action-bar-item {
-  --thm-menu-toolbar-button-gap: calc(var(--ctr-menu-toolbar-gap) / 2);
-  margin: 0 var(--thm-menu-toolbar-button-gap, var(--sjs-base-unit, var(--base-unit, 8px)));
+  margin: 0;
   padding: var(--ctr-menu-toolbar-button-padding-top, var(--sjs-base-unit, var(--base-unit, 8px))) var(--ctr-menu-toolbar-button-padding-right, var(--sjs-base-unit, var(--base-unit, 8px))) var(--ctr-menu-toolbar-button-padding-bottom, var(--sjs-base-unit, var(--base-unit, 8px))) var(--ctr-menu-toolbar-button-padding-left, var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 .svc-top-bar .svc-toolbar-wrapper .sv-action .sv-action-bar-item--active {
   background: var(--ctr-menu-toolbar-button-background-color-selected, transparent);
 }
+.svc-top-bar .svc-toolbar-wrapper .sv-action:not(.sv-action--hidden) ~ .sv-action:not(.sv-action--hidden) .sv-action-bar-item {
+  margin-inline-start: var(--ctr-menu-toolbar-gap, calc(2 * (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)));
 }
@@ -9714,6 +9771,27 @@ input.spg-input:read-only::placeholder {
   transition: background-color var(--sjs-creator-transition-duration, 150ms);
   height: auto;
 }
+.svc-top-bar .sv-action-bar-item:hover, .svc-top-bar .sv-action-bar-item:focus {
+  background-color: var(--ctr-menu-toolbar-button-background-color-hovered, var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3)));
+}
+.svc-top-bar .sv-action-bar-item:active, .svc-top-bar .sv-action-bar-item.sv-action-bar-item--pressed {
+  opacity: var(--ctr-menu-toolbar-button-opacity-pressed, 0.5);
+  background-color: var(--ctr-menu-toolbar-button-background-color-pressed, var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3)));
+}
+.svc-top-bar .sv-action-bar-item:active use, .svc-top-bar .sv-action-bar-item.sv-action-bar-item--pressed use {
+  fill: black;
+  opacity: 0.45;
+}
+.svc-top-bar .sv-action-bar-item.sv-action-bar-item--active {
+  background-color: var(--ctr-menu-toolbar-button-background-color-selected, var(--sjs-general-backcolor, var(--background, #fff)));
+}
+.svc-top-bar .sv-action-bar-item.sv-action-bar-item--active use {
+  fill: var(--ctr-menu-toolbar-button-text-color-selected, var(--sjs-primary-backcolor, var(--primary, #19b394)));
+}
+.svc-top-bar .sv-action-bar-item:disabled {
+  background-color: transparent;
+  opacity: var(--ctr-menu-toolbar-button-opacity-disabled, 0.25);
+}
 .svc-top-bar .sv-action-bar-item--icon {
   padding: var(--ctr-menu-toolbar-button-padding-top, var(--sjs-base-unit, var(--base-unit, 8px))) var(--ctr-menu-toolbar-button-padding-right, var(--sjs-base-unit, var(--base-unit, 8px))) var(--ctr-menu-toolbar-button-padding-bottom, var(--sjs-base-unit, var(--base-unit, 8px))) var(--ctr-menu-toolbar-button-padding-left, var(--sjs-base-unit, var(--base-unit, 8px)));
   border-radius: var(--ctr-menu-toolbar-button-corner-radius, 0);
@@ -9725,27 +9803,10 @@ input.spg-input:read-only::placeholder {
 .svc-top-bar .sv-action-bar-item__icon use {
   fill: var(--ctr-menu-toolbar-button-icon-color, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
 }
-.svc-top-bar .sv-action-bar-item:not(.sv-action-bar-item--pressed):hover:enabled,
-.svc-top-bar .sv-action-bar-item:not(.sv-action-bar-item--pressed):focus:enabled {
-  background-color: var(--ctr-menu-toolbar-button-background-color-hovered, var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3)));
-}
-.svc-top-bar .sv-action-bar-item:not(.sv-action-bar-item--pressed):active:enabled {
-  opacity: var(--ctr-menu-toolbar-button-opacity-pressed, 0.5);
-}
-.svc-top-bar .sv-action-bar-item:disabled {
-  opacity: var(--ctr-menu-toolbar-button-opacity-disabled, 0.25);
-}
-.svc-top-bar .sv-action-bar-item--active .sv-action-bar-item__icon use {
-  fill: var(--ctr-menu-toolbar-button-text-color-selected, var(--sjs-primary-backcolor, var(--primary, #19b394)));
-}
 .svc-top-bar .sv-action-bar-item-dropdown {
   border-radius: calcCornerRadius(0.5);
   background-color: transparent;
 }
-.svc-top-bar .sv-action-bar-item--pressed:not(.sv-action-bar-item--active) {
-  background-color: var(--ctr-menu-toolbar-button-background-color-pressed, var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3)));
-  opacity: var(--ctr-menu-toolbar-button-opacity-pressed, 50%);
-}
 
 .svc-footer-bar .svc-toolbar-wrapper {
   height: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
@@ -9755,14 +9816,34 @@ input.spg-input:read-only::placeholder {
   padding: 0;
   width: 100%;
   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));
+  background: var(--ctr-menu-background-color, var(--sjs-general-backcolor, var(--background, #fff)));
+  border-top: var(--ctr-menu-border-width, 1px) solid var(--ctr-menu-border-color, var(--sjs-border-default, var(--border, #d6d6d6)));
   box-sizing: border-box;
 }
+.svc-footer-bar .svc-toolbar-wrapper .sv-action-bar-item {
+  border-radius: var(--ctr-menu-toolbar-button-corner-radius, calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
+  padding: var(--ctr-menu-toolbar-button-padding-top, var(--sjs-base-unit, var(--base-unit, 8px))) var(--ctr-menu-toolbar-button-padding-right, var(--sjs-base-unit, var(--base-unit, 8px))) var(--ctr-menu-toolbar-button-padding-bottom, var(--sjs-base-unit, var(--base-unit, 8px))) var(--ctr-menu-toolbar-button-padding-left, var(--sjs-base-unit, var(--base-unit, 8px)));
+}
+.svc-footer-bar .svc-toolbar-wrapper .sv-action-bar-item:not(.sv-action-bar-item--pressed):hover:enabled,
+.svc-footer-bar .svc-toolbar-wrapper .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-footer-bar .svc-toolbar-wrapper .sv-action-bar-item--active {
+  background-color: var(--ctr-menu-toolbar-button-background-color-selected, var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1))));
+}
+.svc-footer-bar .svc-toolbar-wrapper .sv-action-bar-item--active.sv-action-bar-item:not(.sv-action-bar-item--pressed):hover:enabled, .svc-footer-bar .svc-toolbar-wrapper .sv-action-bar-item--active.sv-action-bar-item:not(.sv-action-bar-item--pressed):focus:enabled {
+  background-color: var(--ctr-menu-toolbar-button-background-color-selected, var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1))));
+}
+.svc-footer-bar .svc-toolbar-wrapper .sv-action-bar-item--active .sv-action-bar-item__icon use {
+  fill: var(--ctr-menu-toolbar-button-icon-color-selected, var(--sjs-primary-backcolor, var(--primary, #19b394)));
+}
 .svc-footer-bar .svc-toolbar-wrapper .sv-action-bar-item__icon {
   width: var(--ctr-menu-toolbar-button-icon-width, calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
   height: var(--ctr-menu-toolbar-button-icon-height, calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
 }
+.svc-footer-bar .svc-toolbar-wrapper .sv-action-bar-item__icon use {
+  fill: var(--ctr-menu-toolbar-button-icon-color, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
+}
 /*!*******************************************************************************************************************************************************************************************!*\
   !*** 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/custom-questions/boolean-switch.scss ***!
   \*******************************************************************************************************************************************************************************************/
@@ -9812,6 +9893,9 @@ input.spg-input:read-only::placeholder {
 .spg-boolean-switch__button--checked .spg-boolean-switch__thumb--right {
   background: var(--ctr-toggle-button-thumb-background-color-checked, #ffffff);
 }
+.spg-boolean-switch__button--checked:hover {
+  background: var(--ctr-toggle-button-background-color-checked, #19b394);
+}
 .spg-boolean-switch__button--checked:focus {
   background: var(--ctr-toggle-button-background-color-checked-focused, #ffffff);
 }