survey-creator-core 2.0.0 → 2.0.1

package/survey-creator-core.fontless.css

@@ -1,5 +1,5 @@
 /*!
- * SurveyJS Creator v2.0.0
+ * SurveyJS Creator v2.0.1
  * (c) 2015-2025 Devsoft Baltic OÜ - http://surveyjs.io/
  * Github: https://github.com/surveyjs/survey-creator
  * License: https://surveyjs.io/Licenses#SurveyCreator
@@ -37,16 +37,16 @@
   height: var(--thm-button-contextual-button-icon-height, calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
 }
 .svc-context-button use {
-  fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
+  fill: var(--ctr-survey-contextual-button-icon-color, var(--sjs-layer-1-foreground-50, rgba(0, 0, 0, 0.5019607843)));
   transition: fill var(--sjs-creator-transition-duration, 150ms);
 }
 
 .svc-context-button:hover use, .svc-context-button:focus use {
-  fill: var(--sjs-primary-backcolor, var(--primary, #19b394));
+  fill: var(--ctr-survey-contextual-button-icon-color-positive, var(--sjs-primary-background-500, #19b394));
 }
 
 .svc-context-button--danger:hover use, .svc-context-button--danger:focus use {
-  fill: var(--sjs-semantic-red-background-500, #e50a3e);
+  fill: var(--ctr-survey-contextual-button-icon-color-negative, var(--sjs-semantic-red-background-500, #e50a3e));
 }
 /*!***************************************************************************************************************************************************************************!*\
   !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./src/components/list.scss ***!
@@ -190,7 +190,7 @@
 
 .svc-list__item-separator {
   width: 100%;
-  height: var(--ctr-separator-width, var(--sjs-size-x0125));
+  height: var(--ctr-separator-width, var(--sjs-stroke-x1));
   margin: var(--ctr-separator-margin-vertical-small, var(--sjs-spacing-x1)) 0px;
   background-color: var(--ctr-separator-color, var(--sjs-border-25, #d4d4d4));
 }
@@ -228,6 +228,7 @@
 .svc-list__container {
   display: flex;
   flex-direction: column;
+  flex-grow: 1;
   min-height: 0;
   height: 100%;
 }
@@ -273,6 +274,8 @@
   appearance: none;
   outline: none;
   border: none;
+  padding: 0;
+  width: 100%;
 }
 .svc-list__input::placeholder {
   color: var(--ctr-list-search-text-color-placeholder, var(--sjs-layer-1-foreground-50, rgba(0, 0, 0, 0.5019607843)));
@@ -284,6 +287,20 @@
   justify-content: center;
   align-items: center;
   border-radius: var(--ctr-search-button-corner-radius, var(--sjs-corner-radius-x05));
+  appearance: none;
+  border: none;
+  border-radius: 100%;
+  background-color: transparent;
+}
+.svc-list__filter-clear-button svg {
+  display: flex;
+  width: var(--ctr-search-button-icon-width, var(--sjs-font-size-x2));
+  height: var(--ctr-search-button-icon-height, var(--sjs-font-size-x2));
+  justify-content: center;
+  align-items: center;
+}
+.svc-list__filter-clear-button svg use {
+  fill: var(--ctr-search-button-icon-color, var(--sjs-layer-1-foreground-50, rgba(0, 0, 0, 0.5019607843)));
 }
 .svc-list__filter-clear-button:hover {
   background: var(--ctr-search-button-background-color-clear-hovered, var(--sjs-semantic-red-background-10, rgba(229, 10, 62, 0.1019607843)));
@@ -294,6 +311,10 @@
 
 .svc-list__empty-container {
   padding: var(--ctr-list-padding-top-no-data, var(--sjs-spacing-x4)) var(--ctr-list-padding-right-no-data, var(--sjs-spacing-x2)) var(--ctr-list-padding-bottom-no-data, var(--sjs-spacing-x4)) var(--ctr-list-padding-left-no-data, var(--sjs-spacing-x2));
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  flex-grow: 1;
 }
 
 .svc-list__empty-text {
@@ -306,37 +327,36 @@
   white-space: nowrap;
   text-overflow: ellipsis;
   text-align: center;
+  align-self: stretch;
   color: var(--ctr-list-no-data-text-color, var(--sjs-layer-1-foreground-50, rgba(0, 0, 0, 0.5019607843)));
 }
 
-.sv-popup--overlay .svc-list-item__marker-icon {
+.sv-popup--menu-phone .svc-list-item__marker-icon,
+.sv-popup--menu-tablet .svc-list-item__marker-icon {
   display: none;
 }
-.sv-popup--overlay .svc-list__item-body {
+.sv-popup--menu-phone .svc-list__item-body,
+.sv-popup--menu-tablet .svc-list__item-body {
   pointer-events: none;
 }
-.sv-popup--overlay .svc-list__item--group-selected > .svc-list__item-body {
+.sv-popup--menu-phone .svc-list__item--group-selected > .svc-list__item-body,
+.sv-popup--menu-tablet .svc-list__item--group-selected > .svc-list__item-body {
   font-family: var(--ctr-font-family, var(--sjs-font-family, var(--font-family)));
   font-size: var(--ctr-font-default-size, var(--sjs-font-size-x2));
   font-style: normal;
   font-weight: 400;
   line-height: var(--ctr-font-default-line-height, var(--sjs-line-height-x3));
   font-weight: 600;
-  color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
-  background-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
+  color: var(--ctr-list-item-text-color-selected, var(--sjs-primary-foreground-100, white));
+  background: var(--ctr-list-item-background-color-selected, var(--sjs-primary-background-500, #19b394));
 }
-.sv-popup--overlay .svc-list__item--group-selected > .svc-list__item-body use {
-  fill: var(--sjs-general-backcolor, var(--background, #fff));
+.sv-popup--menu-phone .svc-list__item--group-selected > .svc-list__item-body use,
+.sv-popup--menu-tablet .svc-list__item--group-selected > .svc-list__item-body use {
+  fill: var(--ctr-list-item-icon-color-selected, var(--sjs-primary-foreground-100, white));
 }
 /*!*******************************************************************************************************************************************************************************************!*\
   !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./src/components/tabs/json-editor-ace.scss ***!
   \*******************************************************************************************************************************************************************************************/
-svc-tab-json-editor-ace {
-  width: 100%;
-  height: 100%;
-  background: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
-}
-
 .svc-json-editor-tab__content {
   position: relative;
   height: 100%;
@@ -547,7 +567,7 @@ svc-tab-json-editor-textarea {
 .svd-simulator-main .sd-root-modern {
   min-height: 100%;
 }
-.svd-simulator-main .sd-root-modern .sv-popup:not(.sv-popup--overlay):not(.sv-popup--modal) {
+.svd-simulator-main .sd-root-modern .sv-popup--menu-popup {
   width: auto;
   right: 0;
 }
@@ -560,32 +580,18 @@ svc-tab-json-editor-textarea {
   position: relative;
 }
 
-.svd-simulator .sv-popup--overlay {
+.svd-simulator .sv-popup--menu-phone,
+.svd-simulator .sv-popup--menu-tablet {
   --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 ***!
   \********************************************************************************************************************************************************************************/
-svc-tab-preview {
-  width: 100%;
-  height: 100%;
-  background: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
-}
-
 .svc-test-tab__content {
   align-items: center;
   justify-content: center;
 }
 
-.svc-test-tab__content .svc-plugin-tab__content .sv-root-modern .sv-completedpage,
-.svc-test-tab__content .svc-plugin-tab__content .sv_default_css .sv_completed_page {
-  margin: 0;
-  border: 0;
-  background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
-}
-.svc-test-tab__content .svc-plugin-tab__content .sv_default_css .sv_body {
-  border: 0;
-}
 .svc-test-tab__content .svc-plugin-tab__content .svc-preview__test-again {
   width: calc(33 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   box-sizing: border-box;
@@ -650,13 +656,6 @@ svc-tab-preview {
 .svc-test-tab__content-actions .svc-page-selector {
   max-width: 50%;
 }
-.svc-test-tab__content-actions .svc-page-selector .sv-action-bar-item__title {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  color: var(--sjs-general-forecolor, var(--foreground, #161616));
-  display: inline-block;
-}
 
 .svc-page-invisible .svc-list__item-body {
   padding-block-start: var(--ctr-list-item-padding-top, var(--sjs-spacing-x150));
@@ -677,7 +676,7 @@ svc-tab-preview {
   font-style: normal;
   font-weight: 400;
   line-height: var(--ctr-font-default-line-height, var(--sjs-line-height-x3));
-  color: var(--sjs-general-forecolor, var(--foreground, #161616));
+  color: var(--sjs-layer-1-foreground-100, rgba(0, 0, 0, 0.9019607843));
   text-align: center;
   overflow: hidden;
   position: static;
@@ -1455,6 +1454,8 @@ td.st-table__cell:first-of-type span {
   white-space: nowrap;
 }
 .st-navigation-btn .sd-action__icon {
+  width: var(--ctr-actionbar-button-icon-width, var(--sjs-font-size-x3));
+  height: var(--ctr-actionbar-button-icon-height, var(--sjs-font-size-x3));
   margin-left: 0;
 }
 
@@ -1601,14 +1602,6 @@ td.st-table__cell:first-of-type span {
   outline: none;
   cursor: pointer;
 }
-.svc-logic-paneldynamic .svc-logic-operator option {
-  background: var(--sjs-general-backcolor, var(--background, #fff));
-  color: var(--sjs-general-forecolor, var(--foreground, #161616));
-}
-
-.svc-logic-operator:focus {
-  outline: 1px dotted var(--sjs-primary-backcolor, var(--primary, #19b394));
-}
 
 .svc-logic-operator.svc-logic-operator {
   transition: background-color var(--sjs-creator-transition-duration, 150ms), color var(--sjs-creator-transition-duration, 150ms);
@@ -1833,27 +1826,26 @@ td.st-table__cell:first-of-type span {
   min-width: 100%;
   max-width: 100%;
   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: 0px 1px 2px 0px var(--ctr-shadow-small-color, var(--sjs-special-shadow, rgba(0, 0, 0, 0.2509803922)));
-  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))));
+  margin-top: var(--lbr-question-panel-header-padding-bottom, var(--lbr-spacing-x2));
+  border-radius: var(--lbr-question-panel-corner-radius, var(--lbr-corner-radius-x05));
+  background: var(--lbr-question-panel-background-color, var(--sjs-layer-1-background-500, white));
+  box-shadow: var(--lbr-question-panel-shadow-offset-x, 0px) var(--lbr-question-panel-shadow-offset-y, 1px) var(--lbr-question-panel-shadow-blur, 2px) var(--lbr-question-panel-shadow-spread, 0px) var(--lbr-question-panel-shadow-color, var(--sjs-special-shadow, rgba(0, 0, 0, 0.2509803922)));
 }
 
-.sv-popup--overlay .svc-logic-placeholder {
+.sv-popup--menu-phone .svc-logic-placeholder,
+.sv-popup--menu-tablet .svc-logic-placeholder {
   width: initial;
 }
 
 .svc-logic-placeholder__text.svc-logic-placeholder__text {
-  font-family: var(--ctr-font-family, var(--sjs-font-family, var(--font-family)));
-  font-size: var(--ctr-font-default-size, var(--sjs-font-size-x2));
+  font-family: var(--lbr-font-family, var(--sjs-font-family, var(--font-family)));
+  font-size: var(--lbr-font-default-size, var(--lbr-font-size-x2));
   font-style: normal;
-  font-weight: 400;
-  line-height: var(--ctr-font-default-line-height, var(--sjs-line-height-x3));
+  line-height: var(--lbr-font-default-line-height, var(--lbr-line-height-x3));
+  color: var(--lbr-placeholder-text-color, var(--sjs-layer-1-foreground-50, rgba(0, 0, 0, 0.5019607843)));
   text-align: center;
-  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
   display: block;
-  padding: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(8 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding: var(--lbr-placeholder-padding-top, var(--lbr-spacing-x2)) var(--lbr-placeholder-padding-right, var(--lbr-spacing-x8)) var(--lbr-placeholder-padding-bottom, var(--lbr-spacing-x2)) var(--lbr-placeholder-padding-left, var(--lbr-spacing-x8));
 }
 
 .svc-logic-tab__leave-apply-button {
@@ -2297,50 +2289,81 @@ svc-tab-designer {
   z-index: 1000;
 }
 
-.svc-creator-popup.sv-popup--modal {
+.svc-creator-popup.sv-popup--modal-popup {
   background-color: var(--ctr-popup-haze-background-color, var(--sjs-special-haze, rgba(204, 238, 238, 0.3490196078)));
 }
-.svc-creator-popup.sv-popup--modal > .sv-popup__container {
+.svc-creator-popup.sv-popup--modal-popup > .sv-popup__container {
   background-color: var(--ctr-popup-background-color, var(--sjs-layer-1-background-500, white));
   border-radius: var(--ctr-popup-corner-radius, var(--sjs-corner-radius-x2));
   box-shadow: var(--ctr-popup-shadow-1-offset-x, 0px) var(--ctr-popup-shadow-1-offset-y, 2px) var(--ctr-popup-shadow-1-blur, 8px) var(--ctr-popup-shadow-1-spread, 0px) var(--ctr-popup-shadow-1-color, var(--sjs-special-glow, rgba(0, 76, 68, 0.1019607843))), var(--ctr-popup-shadow-2-offset-x, 0px) var(--ctr-popup-shadow-2-offset-y, 16px) var(--ctr-popup-shadow-2-blur, 32px) var(--ctr-popup-shadow-2-spread, 0px) var(--ctr-popup-shadow-2-color, var(--sjs-special-glow, rgba(0, 76, 68, 0.1019607843))), var(--ctr-popup-shadow-3-offset-x, 0px) var(--ctr-popup-shadow-3-offset-y, 32px) var(--ctr-popup-shadow-3-blur, 64px) var(--ctr-popup-shadow-3-spread, 0px) var(--ctr-popup-shadow-3-color, var(--sjs-special-glow, rgba(0, 76, 68, 0.1019607843)));
 }
-.svc-creator-popup.sv-popup--modal > .sv-popup__container .sv-footer-action-bar {
+.svc-creator-popup.sv-popup--modal-popup > .sv-popup__container .sv-modal-footer-action-bar {
   gap: var(--ctr-popup-buttons-gap, var(--sjs-spacing-x2));
 }
-.svc-creator-popup.sv-popup--modal > .sv-popup__container > .sv-popup__body-content {
+.svc-creator-popup.sv-popup--modal-popup > .sv-popup__container > .sv-popup__body-content {
   background-color: var(--ctr-popup-background-color, var(--sjs-layer-1-background-500, white));
   border-radius: var(--ctr-popup-corner-radius, var(--sjs-corner-radius-x2));
   padding: var(--ctr-popup-padding-top, var(--sjs-spacing-x4)) var(--ctr-popup-padding-right, var(--sjs-spacing-x4)) var(--ctr-popup-padding-bottom, var(--sjs-spacing-x4)) var(--ctr-popup-padding-left, var(--sjs-spacing-x4));
   gap: var(--ctr-popup-gap, var(--sjs-spacing-x4));
   box-shadow: unset;
 }
-.svc-creator-popup.sv-popup--dropdown-overlay .sv-popup__scrolling-content {
-  height: auto;
+.svc-creator-popup.sv-popup--modal-popup .sv-popup__scrolling-content {
+  overflow: visible;
 }
-.svc-creator-popup.sv-popup--overlay.sv-popup--tablet {
-  background-color: var(--ctr-popup-haze-background-color, var(--sjs-special-haze, rgba(204, 238, 238, 0.3490196078)));
+.svc-creator-popup.sv-popup--modal-overlay {
+  background: var(--ctr-popup-haze-background-color, var(--sjs-special-haze, rgba(204, 238, 238, 0.3490196078)));
+  padding-top: var(--ctr-popup-margin-top-mobile, var(--sjs-spacing-x2));
 }
-.svc-creator-popup.sv-popup--overlay {
-  background-color: var(--ctr-popup-haze-background-color, var(--sjs-special-haze, rgba(204, 238, 238, 0.3490196078)));
+.svc-creator-popup.sv-popup--modal-overlay > .sv-popup__container {
+  width: 100vw;
+  max-height: calc(100vh- var(--ctr-popup-margin-top-mobile, var(--sjs-spacing-x2)));
+  height: calc(100vh - var(--ctr-popup-margin-top-mobile, var(--sjs-spacing-x2)));
+  display: flex;
+  border-radius: var(--ctr-popup-corner-radius-mobile, var(--sjs-corner-radius-x2)) var(--ctr-popup-corner-radius-mobile, var(--sjs-corner-radius-x2)) 0px 0px;
+  background: var(--ctr-popup-background-color, var(--sjs-layer-1-background-500, white));
+  box-shadow: var(--ctr-popup-shadow-3-offset-x, 0px) var(--ctr-popup-shadow-3-offset-y, 32px) var(--ctr-popup-shadow-3-blur, 64px) var(--ctr-popup-shadow-3-spread, 0px) var(--ctr-popup-shadow-3-color, var(--sjs-special-glow, rgba(0, 76, 68, 0.1019607843))), var(--ctr-popup-shadow-2-offset-x, 0px) var(--ctr-popup-shadow-2-offset-y, 16px) var(--ctr-popup-shadow-2-blur, 32px) var(--ctr-popup-shadow-2-spread, 0px) var(--ctr-popup-shadow-2-color, var(--sjs-special-glow, rgba(0, 76, 68, 0.1019607843))), var(--ctr-popup-shadow-1-offset-x, 0px) var(--ctr-popup-shadow-1-offset-y, 2px) var(--ctr-popup-shadow-1-blur, 8px) var(--ctr-popup-shadow-1-spread, 0px) var(--ctr-popup-shadow-1-color, var(--sjs-special-glow, rgba(0, 76, 68, 0.1019607843)));
 }
-.svc-creator-popup.sv-popup--overlay:not(.sv-popup--dropdown-overlay) .sv-popup__body-content {
-  background-color: var(--ctr-popup-background-color, var(--sjs-layer-1-background-500, white));
+.svc-creator-popup.sv-popup--modal-overlay > .sv-popup__container > .sv-popup__body-content {
+  display: flex;
+  min-height: 100%;
+  padding: var(--ctr-popup-padding-top-mobile, var(--sjs-spacing-x3)) var(--ctr-popup-padding-right-mobile, var(--sjs-spacing-x3)) var(--ctr-popup-padding-bottom-mobile, var(--sjs-spacing-x3)) var(--ctr-popup-padding-left-mobile, var(--sjs-spacing-x3));
+  border-radius: var(--ctr-popup-corner-radius-mobile, var(--sjs-corner-radius-x2)) var(--ctr-popup-corner-radius-mobile, var(--sjs-corner-radius-x2)) 0px 0px;
+  box-sizing: border-box;
+  flex-direction: column;
+  gap: var(--ctr-popup-gap-mobile, var(--sjs-spacing-x3));
+  flex: 1 0 0;
+  align-self: stretch;
 }
-.svc-creator-popup.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-background-500, #19b394));
-  border: 2px solid var(--ctr-button-background-color-cta, var(--sjs-primary-background-500, #19b394));
-  color: var(--ctr-button-text-color-cta, var(--sjs-primary-foreground-100, white));
+.svc-creator-popup.sv-popup--modal-overlay .sv-popup__scrolling-content {
+  display: flex;
+  flex-direction: column;
+  flex: 1 0 0;
+  align-self: stretch;
+  overflow: visible;
+}
+.svc-creator-popup.sv-popup--modal-overlay .sv-popup__body-footer {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: var(--ctr-popup-buttons-gap, var(--sjs-spacing-x2));
+  align-self: stretch;
+}
+.svc-creator-popup.sv-popup--modal-overlay .sv-modal-footer-action-bar {
+  width: 100%;
+}
+.svc-creator-popup.sv-popup--modal-overlay .sv-modal-footer-action-bar .sv-action {
+  display: flex;
+  align-items: center;
+  flex: 1 0 0;
+}
+.svc-creator-popup.sv-popup--modal-overlay .sv-modal-footer-action-bar .sv-action__content {
+  display: flex;
+  flex-grow: 1;
 }
 .svc-creator-popup .sv-popup__pointer:after {
   content: " ";
   border-bottom: var(--sjs-base-unit, var(--base-unit, 8px)) solid var(--ctr-popup-menu-pointer-color, var(--sjs-layer-1-background-500, white));
 }
-.svc-creator-popup .sv-popup__container {
-  background-color: transparent;
-  border-radius: var(--ctr-popup-menu-corner-radius, var(--sjs-corner-radius-x1));
-  box-shadow: var(--ctr-popup-menu-shadow-1-offset-x, 0px) var(--ctr-popup-menu-shadow-1-offset-y, 2px) var(--ctr-popup-menu-shadow-1-blur, 8px) var(--ctr-popup-menu-shadow-1-spread, 0px) var(--ctr-popup-menu-shadow-1-color, var(--sjs-special-glow, rgba(0, 76, 68, 0.1019607843))), var(--ctr-popup-menu-shadow-2-offset-x, 0px) var(--ctr-popup-menu-shadow-2-offset-y, 16px) var(--ctr-popup-menu-shadow-2-blur, 32px) var(--ctr-popup-menu-shadow-2-spread, 0px) var(--ctr-popup-menu-shadow-2-color, var(--sjs-special-glow, rgba(0, 76, 68, 0.1019607843)));
-}
 .svc-creator-popup .sv-popup__body-header {
   font-family: var(--ctr-font-family, var(--sjs-font-family, var(--font-family)));
   font-size: var(--ctr-font-medium-size, var(--sjs-font-size-x3));
@@ -2350,48 +2373,70 @@ svc-tab-designer {
   font-weight: 700;
   color: var(--ctr-popup-title-color, var(--sjs-layer-1-foreground-100, rgba(0, 0, 0, 0.9019607843)));
 }
-.svc-creator-popup.sv-popup--dropdown-overlay.sv-popup--tablet .sv-popup__body-content,
-.svc-creator-popup .sv-popup__body-content {
+.svc-creator-popup.sv-popup--menu-popup .sv-popup-inner > .sv-popup__container, .svc-creator-popup.sv-popup--menu-popup > .sv-popup__container {
+  background: transparent;
   border-radius: var(--ctr-popup-menu-corner-radius, var(--sjs-corner-radius-x1));
+  box-shadow: var(--ctr-popup-menu-shadow-1-offset-x, 0px) var(--ctr-popup-menu-shadow-1-offset-y, 2px) var(--ctr-popup-menu-shadow-1-blur, 8px) var(--ctr-popup-menu-shadow-1-spread, 0px) var(--ctr-popup-menu-shadow-1-color, var(--sjs-special-glow, rgba(0, 76, 68, 0.1019607843))), var(--ctr-popup-menu-shadow-2-offset-x, 0px) var(--ctr-popup-menu-shadow-2-offset-y, 16px) var(--ctr-popup-menu-shadow-2-blur, 32px) var(--ctr-popup-menu-shadow-2-spread, 0px) var(--ctr-popup-menu-shadow-2-color, var(--sjs-special-glow, rgba(0, 76, 68, 0.1019607843)));
 }
-.svc-creator-popup.svc-property-editor.sv-popup--overlay:not(.sv-popup--dropdown-overlay) .sv-popup__body-content {
-  background-color: var(--ctr-popup-background-color, var(--sjs-layer-1-background-500, white));
-  border-radius: calc(4 * (var(--ctr-popup-menu-corner-radius, var(--sjs-corner-radius-x1)))) calc(4 * (var(--ctr-popup-menu-corner-radius, var(--sjs-corner-radius-x1)))) 0px 0px;
+.svc-creator-popup.sv-popup--menu-popup .sv-popup-inner > .sv-popup__container > .sv-popup__body-content, .svc-creator-popup.sv-popup--menu-popup > .sv-popup__container > .sv-popup__body-content {
+  border-radius: var(--ctr-popup-menu-corner-radius, var(--sjs-corner-radius-x1));
+  background: var(--ctr-popup-menu-background-color, var(--sjs-layer-1-background-500, white));
+  display: flex;
+  padding: var(--ctr-popup-menu-padding-top, 0px) var(--ctr-popup-menu-padding-right, 0px) var(--ctr-popup-menu-padding-bottom, 0px) var(--ctr-popup-menu-padding-left, 0px);
+  flex-direction: column;
+  align-self: stretch;
 }
-.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-layer-1-background-500, white));
-  padding: 0;
+.svc-creator-popup.sv-popup--menu-tablet {
+  background-color: var(--ctr-popup-haze-background-color, var(--sjs-special-haze, rgba(204, 238, 238, 0.3490196078)));
 }
-.svc-creator-popup.sv-popup--dropdown.svc-toolbox-subtypes .sv-popup__body-content {
-  background: unset;
+.svc-creator-popup.sv-popup--menu-tablet > .sv-popup__container {
+  border-radius: var(--ctr-popup-menu-corner-radius, var(--sjs-corner-radius-x1));
+  box-shadow: var(--ctr-popup-menu-shadow-1-offset-x, 0px) var(--ctr-popup-menu-shadow-1-offset-y, 2px) var(--ctr-popup-menu-shadow-1-blur, 8px) var(--ctr-popup-menu-shadow-1-spread, 0px) var(--ctr-popup-menu-shadow-1-color, var(--sjs-special-glow, rgba(0, 76, 68, 0.1019607843))), var(--ctr-popup-menu-shadow-2-offset-x, 0px) var(--ctr-popup-menu-shadow-2-offset-y, 16px) var(--ctr-popup-menu-shadow-2-blur, 32px) var(--ctr-popup-menu-shadow-2-spread, 0px) var(--ctr-popup-menu-shadow-2-color, var(--sjs-special-glow, rgba(0, 76, 68, 0.1019607843)));
+}
+.svc-creator-popup.sv-popup--menu-tablet > .sv-popup__container > .sv-popup__body-content {
+  background: var(--ctr-popup-menu-background-color, var(--sjs-layer-1-background-500, white));
 }
-.svc-creator-popup.sv-popup--dropdown-overlay .sv-popup__button.sv-popup__button {
+.svc-creator-popup.sv-popup--menu-phone > .sv-popup__container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex: 1 0 0;
+  align-self: stretch;
+}
+.svc-creator-popup.sv-popup--menu-phone > .sv-popup__container > .sv-popup__body-content {
+  display: flex;
+  padding: var(--ctr-popup-menu-padding-top, 0px) var(--ctr-popup-menu-padding-right, 0px) var(--ctr-popup-menu-padding-bottom, 0px) var(--ctr-popup-menu-padding-left, 0px);
+  flex-direction: column;
+  flex: 1 0 0;
+  align-self: stretch;
+  background-color: var(--ctr-popup-menu-background-color, var(--sjs-layer-1-background-500, white));
+}
+.svc-creator-popup.sv-popup--menu-phone .sv-menu-popup__button, .svc-creator-popup.sv-popup--menu-tablet .sv-menu-popup__button {
+  font-family: var(--ctr-font-family, var(--sjs-font-family, var(--font-family)));
+  font-size: var(--ctr-font-default-size, var(--sjs-font-size-x2));
+  font-style: normal;
+  font-weight: 400;
+  line-height: var(--ctr-font-default-line-height, var(--sjs-line-height-x3));
+  font-weight: 600;
   color: var(--ctr-actionbar-button-text-color, var(--sjs-primary-background-500, #19b394));
   border-radius: var(--ctr-actionbar-button-corner-radius, var(--sjs-corner-radius-x1));
   padding: var(--ctr-actionbar-button-padding-top-medium-text, var(--sjs-spacing-x05)) var(--ctr-actionbar-button-padding-right-medium-text, var(--sjs-spacing-x2)) var(--ctr-actionbar-button-padding-bottom-medium-text, var(--sjs-spacing-x05)) var(--ctr-actionbar-button-padding-left-medium-text, var(--sjs-spacing-x2));
 }
-.svc-creator-popup.sv-popup--dropdown-overlay .sv-popup__body-footer {
+.svc-creator-popup.sv-popup--menu-phone .sv-popup__body-footer, .svc-creator-popup.sv-popup--menu-tablet .sv-popup__body-footer {
   background-color: var(--ctr-popup-menu-footer-background-color, var(--sjs-layer-3-background-500, #f4f4f4));
   border-top: 1px solid var(--ctr-popup-menu-footer-border-color, var(--sjs-border-25, #d4d4d4));
   padding: var(--ctr-popup-menu-footer-padding-top, var(--sjs-spacing-x05)) var(--ctr-popup-menu-footer-padding-right, var(--sjs-spacing-x1)) var(--ctr-popup-menu-footer-padding-bottom, var(--sjs-spacing-x05)) var(--ctr-popup-menu-footer-padding-left, var(--sjs-spacing-x1));
 }
-.svc-creator-popup.sv-popup--dropdown-overlay .sv-popup__button:disabled {
+.svc-creator-popup.sv-popup--menu-phone .sv-menu-popup__button:disabled, .svc-creator-popup.sv-popup--menu-tablet .sv-menu-popup__button:disabled {
   color: var(--ctr-actionbar-button-text-color-disabled, var(--sjs-layer-1-foreground-100, rgba(0, 0, 0, 0.9019607843)));
   opacity: var(--ctr-actionbar-button-opacity-disabled, 0.25);
 }
-.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)));
-}
-.svc-creator-popup .sv-popup__content {
-  font-family: var(--ctr-font-family, var(--sjs-font-family, var(--font-family)));
-  font-size: var(--ctr-font-default-size, var(--sjs-font-size-x2));
-  font-style: normal;
-  font-weight: 400;
-  line-height: var(--ctr-font-default-line-height, var(--sjs-line-height-x3));
-  color: var(--ctr-popup-message-color, var(--sjs-layer-1-foreground-100, rgba(0, 0, 0, 0.9019607843)));
+.svc-creator-popup.sv-dropdown-popup.sv-popup--menu-phone .sv-popup__body-footer, .svc-creator-popup.sv-dropdown-popup.sv-popup--menu-tablet .sv-popup__body-footer {
+  background-color: var(--ctr-contextual-menu-footer-background-color, var(--sjs-layer-3-background-500, var(--background-dim, #f3f3f3)));
 }
 
-.svc-creator-popup.sv-popup--modal .sd-btn.sv-popup__button {
+.svc-creator-popup.sv-popup--modal-popup .sv-modal-popup__button,
+.svc-creator-popup.sv-popup--modal-overlay .sv-modal-popup__button {
   border-radius: var(--ctr-button-corner-radius-small, var(--sjs-corner-radius-x075));
   padding: var(--ctr-button-padding-vertical-small, var(--sjs-spacing-x150)) var(--ctr-button-padding-horizontal-small, var(--sjs-spacing-x4)) var(--ctr-button-padding-vertical-small, var(--sjs-spacing-x150)) var(--ctr-button-padding-horizontal-small, var(--sjs-spacing-x4));
   display: flex;
@@ -2402,8 +2447,15 @@ svc-tab-designer {
   flex-shrink: 0;
   position: relative;
   box-shadow: var(--ctr-button-shadow-offset-x, 0px) var(--ctr-button-shadow-offset-y, 1px) var(--ctr-button-shadow-blur, 2px) var(--ctr-button-shadow-spread, 0px) var(--ctr-button-shadow-color, var(--sjs-special-shadow, rgba(0, 0, 0, 0.2509803922)));
+  background: var(--ctr-button-background-color, var(--sjs-layer-1-background-500, white));
+  color: var(--ctr-button-text-color, var(--sjs-primary-background-500, #19b394));
+}
+.svc-creator-popup.sv-popup--modal-popup .sv-modal-popup__button:hover,
+.svc-creator-popup.sv-popup--modal-overlay .sv-modal-popup__button:hover {
+  background: var(--ctr-button-background-color-hovered, var(--sjs-primary-background-10, rgba(25, 179, 148, 0.1019607843)));
 }
-.svc-creator-popup.sv-popup--modal .sd-btn.sv-popup__button span {
+.svc-creator-popup.sv-popup--modal-popup .sv-modal-popup__button span,
+.svc-creator-popup.sv-popup--modal-overlay .sv-modal-popup__button span {
   font-family: var(--ctr-font-family, var(--sjs-font-family, var(--font-family)));
   font-size: var(--ctr-font-default-size, var(--sjs-font-size-x2));
   font-style: normal;
@@ -2416,25 +2468,22 @@ svc-tab-designer {
   align-items: center;
   justify-content: center;
 }
-.svc-creator-popup.sv-popup--modal .sv-popup__button {
-  background: var(--ctr-button-background-color, var(--sjs-layer-1-background-500, white));
-  color: var(--ctr-button-text-color, var(--sjs-primary-background-500, #19b394));
-}
-.svc-creator-popup.sv-popup--modal .sv-popup__button:hover {
-  background: var(--ctr-button-background-color-hovered, var(--sjs-primary-background-10, rgba(25, 179, 148, 0.1019607843)));
-}
-.svc-creator-popup.sv-popup--modal .sv-popup__button--apply {
+.svc-creator-popup.sv-popup--modal-popup .sv-popup__button--apply,
+.svc-creator-popup.sv-popup--modal-overlay .sv-popup__button--apply {
   background: var(--ctr-button-background-color-cta, var(--sjs-primary-background-500, #19b394));
   color: var(--ctr-button-text-color-cta, var(--sjs-primary-foreground-100, white));
 }
-.svc-creator-popup.sv-popup--modal .sv-popup__button--apply:hover {
+.svc-creator-popup.sv-popup--modal-popup .sv-popup__button--apply:hover,
+.svc-creator-popup.sv-popup--modal-overlay .sv-popup__button--apply:hover {
   background: var(--ctr-button-background-color-cta-hovered, var(--sjs-primary-background-400, #14a48b));
 }
-.svc-creator-popup.sv-popup--modal .sd-btn--danger {
+.svc-creator-popup.sv-popup--modal-popup .sd-btn--danger,
+.svc-creator-popup.sv-popup--modal-overlay .sd-btn--danger {
   background: var(--ctr-button-background-color-danger, var(--sjs-semantic-red-background-500, #e50a3e));
   color: var(--ctr-button-text-color-danger, var(--sjs-semantic-red-foreground-100, white));
 }
-.svc-creator-popup.sv-popup--modal .sd-btn--danger:hover {
+.svc-creator-popup.sv-popup--modal-popup .sd-btn--danger:hover,
+.svc-creator-popup.sv-popup--modal-overlay .sd-btn--danger:hover {
   background: var(--ctr-button-background-color-danger-hovered, var(--sjs-semantic-red-background-500, #e50a3e));
 }
 
@@ -2913,18 +2962,6 @@ survey-creator .sv-drag-drop-choices-shortcut .sv-drag-drop-choices-shortcut__co
   text-align: center;
 }
 
-.svc-item__banner {
-  position: relative;
-  max-width: 0;
-  overflow: hidden;
-  height: 100%;
-  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: 0px 2px 6px 0px var(--ctr-shadow-medium-color, var(--sjs-special-glow, rgba(0, 76, 68, 0.1019607843)));
-  transition: max-width 0.1s ease-in-out, padding 0.2s ease-in-out;
-}
-
 .svc-creator__non-commercial-text {
   font-family: var(--ctr-font-family, var(--sjs-font-family, var(--font-family)));
   font-size: var(--ctr-font-default-size, var(--sjs-font-size-x2));
@@ -3019,11 +3056,10 @@ survey-creator .sv-drag-drop-choices-shortcut .sv-drag-drop-choices-shortcut__co
 }
 
 .svc-remaining-character-counter {
-  font-family: var(--ctr-font-family, var(--sjs-font-family, var(--font-family)));
-  font-size: var(--ctr-font-small-size, var(--sjs-font-size-x150));
+  font-family: var(--lbr-font-family, var(--sjs-font-family, var(--font-family)));
+  font-size: var(--lbr-font-small-size, var(--lbr-font-size-x150));
   font-style: normal;
-  font-weight: 400;
-  line-height: var(--ctr-font-small-line-height, var(--sjs-line-height-x2));
+  line-height: var(--lbr-font-small-line-height, var(--lbr-line-height-x2));
   display: none;
   position: relative;
   outline: none;
@@ -3031,7 +3067,7 @@ survey-creator .sv-drag-drop-choices-shortcut .sv-drag-drop-choices-shortcut__co
   padding: 0px;
   vertical-align: top;
   margin-inline-start: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
+  color: var(--ctr-text-decor-text-color-placeholder, var(--sjs-layer-1-foreground-50, rgba(0, 0, 0, 0.5019607843)));
 }
 
 .svc-string-editor__border {
@@ -3273,6 +3309,11 @@ svc-page-navigator,
   fill: var(--ctr-page-navigator-button-icon-color-disabled, var(--sjs-layer-3-foreground-100, rgba(0, 0, 0, 0.9019607843)));
 }
 
+.svc-page-navigator-item--disabled .svc-page-navigator-item__banner {
+  color: var(--ctr-page-navigator-button-icon-color-disabled, var(--sjs-layer-3-foreground-100, rgba(0, 0, 0, 0.9019607843)));
+  opacity: var(--ctr-page-navigator-button-icon-opacity-disabled, 0.25);
+}
+
 .svc-page-navigator__button--pressed .svc-page-navigator__button-icon,
 .svc-page-navigator__button:active .svc-page-navigator__button-icon {
   background: var(--ctr-page-navigator-button-background-color-pressed, var(--sjs-primary-background-10, rgba(25, 179, 148, 0.1019607843)));
@@ -3416,10 +3457,6 @@ svc-page-navigator-item,
   padding: var(--ctr-page-navigator-item-padding-top, var(--sjs-spacing-x1)) var(--ctr-page-navigator-item-padding-left-hovered, var(--sjs-spacing-x2)) var(--ctr-page-navigator-item-padding-bottom, var(--sjs-spacing-x1)) var(--ctr-page-navigator-item-padding-left, var(--sjs-spacing-x125));
   direction: rtl;
 }
-.svc-page-navigator-item--disabled .svc-page-navigator-item__banner {
-  color: var(--sjs-general-forecolor, var(--foreground, #161616));
-  opacity: 0.25;
-}
 /*!***************************************************************************************************************************************************************************!*\
   !*** 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.scss ***!
   \***************************************************************************************************************************************************************************/
@@ -3498,7 +3535,6 @@ svc-page {
   justify-content: flex-end;
   box-sizing: border-box;
   padding: 0 var(--sjs-base-unit, var(--base-unit, 8px)) 0 var(--ctr-survey-page-drag-indicator-width, var(--lbr-size-x3));
-  z-index: 12;
   transition: opacity var(--sjs-creator-transition-duration, 150ms);
   white-space: nowrap;
 }
@@ -3521,6 +3557,19 @@ svc-page {
 .svc-page-toolbar .sv-action {
   pointer-events: all;
 }
+.svc-page-toolbar > .sv-dots {
+  width: auto;
+}
+.svc-page-toolbar > .sv-dots .sv-dots__item {
+  width: auto;
+}
+.svc-page-toolbar > .sv-dots.sv-action--hidden {
+  width: 0;
+}
+.svc-page-toolbar > .sv-dots .svc-list__item-icon {
+  width: var(--ctr-list-item-icon-width-small, var(--sjs-font-size-x2));
+  height: var(--ctr-list-item-icon-height-small, var(--sjs-font-size-x2));
+}
 
 .svc-page-toolbar--collapse {
   flex-grow: 0;
@@ -3556,7 +3605,7 @@ svc-page {
     var(--ctr-survey-question-panel-toolbar-gap, var(--lbr-spacing-x1)) / 2
   );
   margin: 0 var(--thm-survey-question-panel-toolbar-button-gap);
-  border-radius: var(--ctr-survey-page-toolbar-item-corner-radius, var(--lbr-corner-radius-x05));
+  border-radius: var(--ctr-survey-page-toolbar-item-corner-radius, var(--lbr-corner-radius-x075));
   padding: var(--thm-survey-question-panel-toolbar-item-padding-top) var(--thm-survey-question-panel-toolbar-item-padding-right) var(--thm-survey-question-panel-toolbar-item-padding-bottom) var(--thm-survey-question-panel-toolbar-item-padding-left);
   justify-content: center;
   align-items: center;
@@ -3575,7 +3624,6 @@ svc-page {
 }
 .svc-page-toolbar__item:active use, .svc-page-toolbar__item.svc-page-toolbar__item--pressed use {
   fill: var(--ctr-menu-toolbar-button-icon-color, var(--sjs-layer-1-foreground-75, rgba(0, 0, 0, 0.7490196078)));
-  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-primary-background-10, rgba(25, 179, 148, 0.1019607843)));
@@ -3647,10 +3695,6 @@ svc-page {
 .svc-hovered.svc-page__content .svc-page__content-actions {
   opacity: 1;
 }
-.svc-page__content--selected > .svc-question__drag-area,
-.svc-hovered.svc-page__content > .svc-question__drag-area {
-  z-index: 1;
-}
 .svc-page__content--selected > .svc-question__drag-area .svc-question__drag-element,
 .svc-hovered.svc-page__content > .svc-question__drag-area .svc-question__drag-element {
   width: var(--ctr-survey-page-drag-indicator-width, var(--lbr-size-x3));
@@ -4152,8 +4196,8 @@ svc-question {
   border: none;
 }
 .svc-question__adorner .sv-action-bar .sv-action:not(:first-child) .sv-action-bar-item:active {
-  opacity: 0.5;
-  background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
+  opacity: var(--ctr-survey-question-panel-toolbar-item-opacity-pressed, 0.5);
+  background: var(--ctr-survey-question-panel-toolbar-item-background-color-pressed, var(--sjs-layer-1-background-400, whitesmoke));
 }
 .svc-question__adorner:before {
   position: absolute;
@@ -4178,6 +4222,7 @@ svc-question {
   border: none;
   cursor: pointer;
   white-space: nowrap;
+  --thm-icon-color: var(--ctr-survey-question-panel-toolbar-item-icon-color, var(--sjs-secondary-background-500, #19b394ff));
   --thm-survey-question-panel-toolbar-button-gap: calc(
     var(--ctr-survey-question-panel-toolbar-gap, var(--lbr-spacing-x1)) / 2
   );
@@ -4190,7 +4235,7 @@ svc-question {
   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-background-500, #19b394));
+  fill: var(--thm-icon-color);
 }
 .svc-survey-element-toolbar__item:hover, .svc-survey-element-toolbar__item:focus-visible {
   background-color: var(--ctr-survey-question-panel-toolbar-item-background-color-hovered, var(--sjs-secondary-background-10, rgba(25, 179, 148, 0.1019607843)));
@@ -4201,7 +4246,6 @@ svc-question {
 }
 .svc-survey-element-toolbar__item:active use, .svc-survey-element-toolbar__item.svc-survey-element-toolbar__item--pressed use {
   fill: var(--ctr-menu-toolbar-button-icon-color, var(--sjs-layer-1-foreground-75, rgba(0, 0, 0, 0.7490196078)));
-  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-background-10, rgba(25, 179, 148, 0.1019607843)));
@@ -4250,8 +4294,7 @@ svc-question {
   display: block;
 }
 
-.svc-survey-element-toolbar-item__icon,
-.svc-survey-element-toolbar__dots-item .sv-svg-icon.sv-action-bar-item__icon {
+.svc-survey-element-toolbar-item__icon {
   box-sizing: border-box;
   display: block;
   padding: var(--ctr-survey-question-panel-toolbar-item-icon-padding-top, var(--lbr-spacing-x05)) var(--ctr-survey-question-panel-toolbar-item-icon-padding-right, var(--lbr-spacing-x05)) var(--ctr-survey-question-panel-toolbar-item-icon-padding-bottom, var(--lbr-spacing-x05)) var(--ctr-survey-question-panel-toolbar-item-icon-padding-left, var(--lbr-spacing-x05));
@@ -4334,13 +4377,6 @@ svc-question {
 .svc-question__content .sd-question.sd-question--table {
   overflow-x: initial;
 }
-.svc-question__content .sd-multipletext__item-title {
-  color: var(--sjs-general-forecolor, var(--foreground, #161616));
-}
-.svc-question__content .sd-matrixdynamic__btn.sd-matrixdynamic__add-btn {
-  color: var(--sjs-general-forecolor, var(--foreground, #161616));
-  opacity: 0.25;
-}
 .svc-question__content .sjs_sp_placeholder {
   user-select: all;
   pointer-events: all;
@@ -4461,11 +4497,9 @@ svc-question {
   justify-content: left;
 }
 .svc-dropdown-action--convertTo .svc-survey-element-toolbar-item__icon:last-child {
+  --thm-icon-color: var(--sjs-primary-background-500, #19b394);
   margin-inline-start: 0;
 }
-.svc-dropdown-action--convertTo .svc-survey-element-toolbar-item__icon:last-child use {
-  fill: var(--sjs-primary-backcolor, var(--primary, #19b394));
-}
 
 .svc-dropdown-action--convertTo.sv-action--hidden {
   min-width: 0;
@@ -4494,8 +4528,7 @@ svc-question {
   width: calc(var(--ctr-survey-question-panel-toolbar-item-icon-container-width, var(--lbr-size-x3)) - var(--ctr-survey-question-panel-toolbar-item-icon-padding-right, var(--lbr-spacing-x05)) - var(--ctr-survey-question-panel-toolbar-item-icon-padding-left, var(--lbr-spacing-x05)));
   height: calc(var(--ctr-survey-question-panel-toolbar-item-icon-container-height, var(--lbr-size-x3)) - var(--ctr-survey-question-panel-toolbar-item-icon-padding-top, var(--lbr-spacing-x05)) - var(--ctr-survey-question-panel-toolbar-item-icon-padding-bottom, var(--lbr-spacing-x05)));
 }
-.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 {
+.svc-survey-element-toolbar__dots-item .svc-list__item > .svc-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 {
   fill: var(--sjs-secondary-background-500, #19b394);
 }
 
@@ -4509,38 +4542,38 @@ svc-question {
 }
 
 .svc-question__content--collapsed-drag-over-inside:not(.svc-question__content--dragged) {
-  box-shadow: 0 0 0 2px var(--sjs-primary-backcolor, var(--primary, #19b394));
-  background: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
+  box-shadow: 0 0 0 var(--ctr-survey-placeholder-border-width-hovered, var(--lbr-stroke-x2)) var(--ctr-survey-placeholder-border-color-hovered, var(--sjs-primary-background-500, #19b394));
+  background: var(--ctr-survey-placeholder-background-color-hovered, var(--sjs-primary-background-10, rgba(25, 179, 148, 0.1019607843)));
   animation: collapsed-drag-over-inside-blinking 1s;
 }
 
 @keyframes collapsed-drag-over-inside-blinking {
   0% {
-    background: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
+    background: var(--ctr-survey-panel-background-color-overing, var(--sjs-primary-background-10, rgba(25, 179, 148, 0.1019607843)));
   }
   40% {
-    background: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
+    background: var(--ctr-survey-panel-background-color-overing, var(--sjs-primary-background-10, rgba(25, 179, 148, 0.1019607843)));
   }
   50% {
     background: transparent;
   }
   55% {
-    background: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
+    background: var(--ctr-survey-panel-background-color-overing, var(--sjs-primary-background-10, rgba(25, 179, 148, 0.1019607843)));
   }
   65% {
     background: transparent;
   }
   70% {
-    background: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
+    background: var(--ctr-survey-panel-background-color-overing, var(--sjs-primary-background-10, rgba(25, 179, 148, 0.1019607843)));
   }
   80% {
     background: transparent;
   }
   85% {
-    background: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
+    background: var(--ctr-survey-panel-background-color-overing, var(--sjs-primary-background-10, rgba(25, 179, 148, 0.1019607843)));
   }
   100% {
-    background: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
+    background: var(--ctr-survey-panel-background-color-overing, var(--sjs-primary-background-10, rgba(25, 179, 148, 0.1019607843)));
   }
 }
 .svc-question__content--selected > .svc-question__content-actions,
@@ -4661,9 +4694,9 @@ svc-question {
 
 .svc-question__content--drag-over-inside .svc-panel__placeholder_frame,
 .svc-hovered > .svc-question__content--drag-over-inside .svc-panel__placeholder_frame {
-  box-shadow: 0 0 0 1px var(--sjs-primary-backcolor, var(--primary, #19b394));
-  border: 1px solid var(--sjs-primary-backcolor, var(--primary, #19b394));
-  background: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
+  box-shadow: 0 0 0 1px var(--ctr-survey-placeholder-border-color-hovered, var(--sjs-primary-background-500, #19b394));
+  border: 1px solid var(--ctr-survey-placeholder-border-color-hovered, var(--sjs-primary-background-500, #19b394));
+  background: var(--ctr-survey-placeholder-background-color-hovered, var(--sjs-primary-background-10, rgba(25, 179, 148, 0.1019607843)));
 }
 .svc-question__content--drag-over-inside .svc-panel__placeholder_frame > .svc-question__content-actions,
 .svc-hovered > .svc-question__content--drag-over-inside .svc-panel__placeholder_frame > .svc-question__content-actions {
@@ -5043,7 +5076,7 @@ svc-question .sv-action-bar,
   display: none;
 }
 .svc-panel__add-new-question-wrapper .svc-element__add-new-question-icon use {
-  fill: var(--sjs-primary-backcolor, var(--primary, #19b394));
+  fill: var(--ctr-survey-contextual-button-icon-color-positive, var(--sjs-primary-background-500, #19b394));
 }
 .svc-panel__add-new-question-wrapper .svc-element__question-type-selector {
   position: absolute;
@@ -5091,7 +5124,7 @@ svc-question .sv-action-bar,
   display: none;
 }
 .svc-panel__add-new-question-icon use {
-  fill: var(--sjs-primary-backcolor, var(--primary, #19b394));
+  fill: var(--ctr-survey-contextual-button-icon-color-positive, var(--sjs-primary-background-500, #19b394));
 }
 
 .svc-panel__question-type-selector-popup {
@@ -5178,13 +5211,6 @@ svc-question .sv-action-bar,
 .svc-question__content .sd-paneldynamic__panel-wrapper {
   padding: 0;
 }
-.svc-question__content .sd-table__cell--actions .sv-action-bar-item:disabled {
-  background: var(--sjs-general-backcolor, var(--background, #fff));
-  opacity: 1;
-}
-.svc-question__content .sd-table__cell--actions .sv-action-bar-item:disabled use {
-  fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
-}
 .svc-question__content .sd-table__row-disabled > .sd-table__cell {
   opacity: 1;
 }
@@ -5383,7 +5409,6 @@ svc-question .sv-action-bar,
 
 .svc-image-question__loading-placeholder {
   position: relative;
-  background-color: var(--sjs-general-backcolor, var(--background, #fff));
   width: 100%;
   height: calc(27.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   border: var(--ctr-survey-placeholder-border-width, var(--lbr-stroke-x1)) dashed var(--ctr-survey-placeholder-border-color, var(--sjs-border-25, #D4D4D4));
@@ -5539,7 +5564,6 @@ svc-question .sv-action-bar,
 }
 
 .svc-item-value--dragging {
-  background: var(--sjs-general-backcolor, var(--background, #fff));
   box-shadow: 0px 8px 16px 0px var(--ctr-shadow-large-color, var(--sjs-special-glow, rgba(0, 76, 68, 0.1019607843)));
   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))));
@@ -5640,16 +5664,17 @@ svc-question .sv-action-bar,
 
 .svc-item-value--new .svc-item-value__item .sd-item__control-label,
 .svc-item-value--new .svc-item-value__item .sv-ranking-item__text {
-  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
+  color: var(--ctr-survey-ranking-item-text-color-inactive, var(--sjs-layer-1-foreground-50, rgba(0, 0, 0, 0.5019607843)));
 }
 .svc-item-value--new .svc-item-value__item .sd-item__decorator {
   opacity: 0.35;
 }
 .svc-item-value--new .sv-ranking-item__index {
-  background: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
+  border-radius: var(--lbr-ranking-item-number-corner-radius, var(--lbr-corner-radius-round));
+  background: var(--ctr-survey-ranking-item-digit-background-color-inactive, var(--sjs-layer-3-background-500, #f4f4f4));
 }
 .svc-item-value--new .sv-ranking-item__index svg {
-  fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
+  fill: var(--ctr-survey-ranking-item-digit-text-color-inactive, var(--sjs-layer-3-foreground-50, rgba(0, 0, 0, 0.5019607843)));
 }
 
 .sv-ranking .svc-item-value-wrapper {
@@ -5979,7 +6004,7 @@ svc-question .sv-action-bar,
   cursor: initial;
 }
 .svc-question__content .sd-drag-element__svg use {
-  fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
+  fill: --ctr-data-table-row-drag-area-icon-color, var(--sjs-layer-1-foreground-50, rgba(0, 0, 0, 0.5019607843));
 }
 /*!******************************************************************************************************************************************************************************!*\
   !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./src/components/results.scss ***!
@@ -6537,8 +6562,25 @@ svc-question .sv-action-bar,
   fill: var(--ctr-menu-item-icon-color, var(--sjs-layer-1-foreground-75, rgba(0, 0, 0, 0.7490196078)));
 }
 
-.svc-tabbed-menu-item-container .sv-dots__item {
+.svc-tabbed-menu-dots__item {
   width: auto;
+  padding: var(--ctr-menu-toolbar-button-padding-top, var(--sjs-spacing-x1)) var(--ctr-menu-toolbar-button-padding-right, var(--sjs-spacing-x1)) var(--ctr-menu-toolbar-button-padding-bottom, var(--sjs-spacing-x1)) var(--ctr-menu-toolbar-button-padding-left, var(--sjs-spacing-x1));
+}
+.svc-tabbed-menu-dots__item svg {
+  width: var(--ctr-menu-toolbar-button-icon-width, var(--sjs-font-size-x3));
+  height: var(--ctr-menu-toolbar-button-icon-height, var(--sjs-font-size-x3));
+}
+.svc-tabbed-menu-dots__item use {
+  fill: var(--ctr-menu-toolbar-button-icon-color, var(--sjs-layer-1-foreground-75, rgba(0, 0, 0, 0.7490196078)));
+}
+.svc-tabbed-menu-dots__item:hover, .svc-tabbed-menu-dots__item:focus {
+  border-radius: var(--ctr-menu-toolbar-button-corner-radius, var(--sjs-corner-radius-x1));
+  background: var(--ctr-menu-toolbar-button-background-color-hovered, var(--sjs-layer-1-background-400, whitesmoke));
+}
+.svc-tabbed-menu-dots__item.sv-action-bar-item--pressed {
+  border-radius: var(--ctr-menu-toolbar-button-corner-radius, var(--sjs-corner-radius-x1));
+  opacity: var(--ctr-menu-toolbar-button-opacity-pressed, 0.5);
+  background: var(--ctr-menu-toolbar-button-background-color-pressed, var(--sjs-layer-1-background-400, whitesmoke));
 }
 
 .svc-tabbed-menu-item-container .svc-list__item-icon {
@@ -6561,7 +6603,6 @@ svc-question .sv-action-bar,
 /*!*******************************************************************************************************************************************************************************************!*\
   !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./src/components/toolbox/toolbox-tool.scss ***!
   \*******************************************************************************************************************************************************************************************/
-@charset "UTF-8";
 .svc-toolbox__item {
   display: flex;
   position: relative;
@@ -6594,7 +6635,7 @@ svc-question .sv-action-bar,
   top: 50%;
 }
 .svc-toolbox__tool:first-of-type > .svc-toolbox__tool-content .svc-toolbox__item-submenu-button {
-  top: calc(var(--ctr-toolbox-item-padding-top, var(--sjs-spacing-x1)));
+  top: 0;
 }
 
 .svc-toolbox__tool-content {
@@ -6642,7 +6683,6 @@ svc-question .sv-action-bar,
   white-space: nowrap;
   color: var(--ctr-toolbox-item-text-color-hovered, var(--sjs-layer-1-foreground-100, rgba(0, 0, 0, 0.9019607843)));
   transition: opacity var(--sjs-creator-transition-duration, 150ms);
-  background-color: var(--sjs-general-backcolor, var(--background, #fff));
   /* Shadow / Medium */
   border-radius: var(--ctr-tooltip-corner-radius, var(--sjs-corner-radius-x075));
   box-shadow: var(--ctr-tooltip-shadow-1-offset-x, 0px) var(--ctr-tooltip-shadow-1-offset-y, 2px) var(--ctr-tooltip-shadow-1-blur, 8px) var(--ctr-tooltip-shadow-1-spread, 0px) var(--ctr-tooltip-shadow-1-color, var(--sjs-special-glow, rgba(0, 76, 68, 0.1019607843))), var(--ctr-tooltip-shadow-2-offset-x, 0px) var(--ctr-tooltip-shadow-2-offset-y, 1px) var(--ctr-tooltip-shadow-2-blur, 2px) var(--ctr-tooltip-shadow-2-spread, 0px) var(--ctr-tooltip-shadow-2-color, var(--sjs-special-shadow, rgba(0, 0, 0, 0.2509803922)));
@@ -6763,8 +6803,11 @@ svc-question .sv-action-bar,
   position: absolute;
   inset-inline-end: var(--ctr-toolbox-item-padding-right, var(--sjs-spacing-x2));
   margin-inline-end: var(--ctr-toolbox-item-submenu-button-margin-right, var(--sjs-spacing-x1n));
-  top: calc(var(--ctr-toolbox-item-padding-top, var(--sjs-spacing-x1)) + var(--ctr-toolbox-gap, var(--sjs-spacing-x05)));
-  bottom: var(--ctr-toolbox-item-padding-bottom, var(--dft-toolbox-item-padding-bottom));
+  top: var(--ctr-toolbox-gap, var(--sjs-spacing-x05));
+  bottom: 0;
+  margin-top: auto;
+  margin-bottom: auto;
+  height: fit-content;
   display: inline-flex;
   padding: var(--ctr-toolbox-item-submenu-button-padding-top, var(--sjs-spacing-x05)) var(--ctr-toolbox-item-submenu-button-padding-right, var(--sjs-spacing-x05)) var(--ctr-toolbox-item-submenu-button-padding-bottom, var(--sjs-spacing-x05)) var(--ctr-toolbox-item-submenu-button-padding-left, var(--sjs-spacing-x05));
   box-sizing: border-box;
@@ -6820,7 +6863,7 @@ svc-question .sv-action-bar,
   column-gap: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   row-gap: var(--ctr-toolbox-group-gap, var(--sjs-spacing-x05));
 }
-.svc-toolbox-subtypes .sv-popup__body-content {
+.svc-toolbox-subtypes > .sv-popup__container > .sv-popup__body-content {
   border-radius: var(--ctr-toolbox-submenu-corner-radius, var(--sjs-corner-radius-x1));
   box-shadow: var(--ctr-toolbox-submenu-shadow-1-offset-x, 0px) var(--ctr-toolbox-submenu-shadow-1-offset-y, 2px) var(--ctr-toolbox-submenu-shadow-1-blur, 8px) var(--ctr-toolbox-submenu-shadow-1-spread, 0px) var(--ctr-toolbox-submenu-shadow-1-color, var(--sjs-special-glow, rgba(0, 76, 68, 0.1019607843))), var(--ctr-toolbox-submenu-shadow-2-offset-x, 0px) var(--ctr-toolbox-submenu-shadow-2-offset-y, 16px) var(--ctr-toolbox-submenu-shadow-2-blur, 32px) var(--ctr-toolbox-submenu-shadow-2-spread, 0px) var(--ctr-toolbox-submenu-shadow-2-color, var(--sjs-special-glow, rgba(0, 76, 68, 0.1019607843)));
   background: var(--ctr-toolbox-submenu-background-color, var(--sjs-layer-1-background-500, white));
@@ -6895,16 +6938,6 @@ svc-question .sv-action-bar,
   box-sizing: border-box;
   align-self: flex-start;
 }
-.svc-toolbox--compact .svc-toolbox__item:after {
-  content: " ";
-  font-family: var(--ctr-font-family, var(--sjs-font-family, var(--font-family)));
-  font-size: var(--ctr-font-small-size, var(--sjs-font-size-x150));
-  font-style: normal;
-  font-weight: 400;
-  line-height: var(--ctr-font-small-line-height, var(--sjs-line-height-x2));
-  font-weight: 600;
-  width: 0;
-}
 .svc-toolbox--compact .svc-toolbox__tool--dots {
   padding-inline-end: 0;
   padding-inline-start: 0;
@@ -7070,7 +7103,7 @@ svc-question .sv-action-bar,
 .svc-toolbox__category-separator:after {
   content: "";
   display: block;
-  height: var(--ctr-toolbox-separator-height, var(--sjs-size-x0125));
+  height: var(--ctr-toolbox-separator-height, var(--sjs-stroke-x1));
   background-color: var(--ctr-toolbox-separator-color, var(--sjs-border-25, #d4d4d4));
 }
 
@@ -7125,7 +7158,7 @@ svc-question .sv-action-bar,
   font-weight: 400;
   line-height: var(--ctr-font-small-line-height, var(--sjs-line-height-x2));
   font-weight: 600;
-  color: var(--sjs-general-forecolor, var(--foreground, #161616));
+  color: var(--ctr-toolbox-group-header-text-color, var(--sjs-layer-1-foreground-100, rgba(0, 0, 0, 0.9019607843)));
   vertical-align: middle;
   display: block;
   flex-grow: 1;
@@ -7141,7 +7174,7 @@ svc-question .sv-action-bar,
 }
 
 .svc-toolbox__category-header__button {
-  fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
+  fill: var(--ctr-toolbox-group-header-expand-button-color, var(--sjs-layer-1-foreground-75, rgba(0, 0, 0, 0.7490196078)));
   height: var(--ctr-toolbox-item-icon-height, var(--sjs-font-size-x3));
   width: var(--ctr-toolbox-item-icon-width, var(--sjs-font-size-x3));
 }
@@ -8003,7 +8036,6 @@ button.spg-action-button--large {
 
 .spg-question__content {
   width: 100%;
-  color: var(--sjs-primary-backcolor, var(--primary, #19b394));
   cursor: pointer;
 }
 
@@ -8027,7 +8059,7 @@ button.spg-action-button--large {
   justify-content: flex-end;
   align-items: flex-end;
   padding: 0px;
-  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
+  color: var(--ctr-editor-label-color, var(--sjs-layer-3-foreground-50, rgba(0, 0, 0, 0.5019607843)));
   position: absolute;
   inset-inline-end: calc(0.75 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   inset-block-end: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
@@ -8416,7 +8448,7 @@ input.spg-input:read-only::placeholder {
   height: var(--ctr-editor-button-icon-height, var(--sjs-font-size-x3));
 }
 
-.spg-dropdown-popup:not(.sv-popup--dropdown-overlay) {
+.spg-dropdown-popup.sv-popup--menu-popup {
   height: 0;
 }
 
@@ -8715,18 +8747,6 @@ input.spg-input:read-only::placeholder {
   pointer-events: none;
 }
 
-.spg-matrixdynamic__drag-element {
-  padding: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-}
-.spg-matrixdynamic__drag-element:hover {
-  background-color: var(--sjs-general-backcolor, var(--background, #fff));
-}
-.spg-matrixdynamic__drag-element:after {
-  content: " ";
-  display: block;
-  height: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-}
-
 .spg-drag-element__svg {
   width: var(--ctr-data-table-row-drag-area-icon-width, var(--sjs-font-size-x3));
   height: var(--ctr-data-table-row-drag-area-icon-height, var(--sjs-font-size-x3));
@@ -8932,12 +8952,6 @@ input.spg-input:read-only::placeholder {
   padding-inline-end: var(--ctr-data-table-row-padding-right, var(--sjs-spacing-x05));
 }
 
-.spg-table__cell--actions > .spg-matrixdynamic__drag-element {
-  display: inline-block;
-  margin-top: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  cursor: move;
-}
-
 .spg-table__cell--header {
   background: var(--ctr-data-table-row-background-color-header, var(--sjs-layer-3-background-500, #f4f4f4));
   text-align: left;
@@ -9067,7 +9081,7 @@ input.spg-input:read-only::placeholder {
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
-  fill: var(--sjs-general-backcolor, var(--background, #fff));
+  fill: var(--ctr-editor-color-swatch-icon-color-stroke, rgba(0, 0, 0, 0.2509803922));
 }
 
 .spg-question--disabled .spg-color-editor {
@@ -9096,7 +9110,7 @@ input.spg-input:read-only::placeholder {
 
 .sv-string-viewer .spg-link {
   display: initial;
-  color: var(--sjs-primary-backcolor, var(--primary, #19b394));
+  color: var(--ctr-survey-action-button-text-color-positive, var(--sjs-primary-background-500, #19b394));
   font-weight: 600;
   text-decoration-line: underline;
 }
@@ -9440,24 +9454,24 @@ input.spg-input:read-only::placeholder {
   box-shadow: unset;
 }
 
-.sv-popup--modal.svc-property-editor .sv-popup__container .sv-popup_shadow {
+.sv-popup--modal-popup.svc-property-editor .sv-popup__container .sv-popup_shadow {
   background-color: transparent;
 }
-.sv-popup--modal.svc-property-editor .sv-popup__container .sd-root-modern {
+.sv-popup--modal-popup.svc-property-editor .sv-popup__container .sd-root-modern {
   background-color: transparent;
 }
-.sv-popup--modal.svc-property-editor .sv-popup__container .sd-page {
+.sv-popup--modal-popup.svc-property-editor .sv-popup__container .sd-page {
   margin: 0;
   padding: 0;
 }
-.sv-popup--modal.svc-property-editor .sv-popup__container .sv-components-column--expandable {
+.sv-popup--modal-popup.svc-property-editor .sv-popup__container .sv-components-column--expandable {
   min-width: calc(78 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
-.sv-popup--modal .sv-popup__footer {
+.sv-popup--modal-popup .sv-popup__footer {
   padding-bottom: 2px;
 }
-.sv-popup--modal .sd-body,
-.sv-popup--modal .sl-body {
+.sv-popup--modal-popup .sd-body,
+.sv-popup--modal-popup .sl-body {
   min-width: calc(78 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   padding: 0;
 }
@@ -9757,10 +9771,10 @@ input.spg-input:read-only::placeholder {
   background: var(--ctr-toggle-button-background-color-checked, var(--sjs-primary-background-500, #19b394));
 }
 .spg-boolean-switch__button--checked:focus {
-  background: var(--ctr-toggle-button-background-color-checked-focused, #ffffff);
+  background: var(--ctr-toggle-button-background-color-checked-focused, var(--sjs-primary-foreground-100, #ffffff));
 }
 .spg-boolean-switch__button--checked:focus .spg-boolean-switch__thumb--right {
-  background: var(--ctr-toggle-button-thumb-background-color-checked-focused, #19b394);
+  background: var(--ctr-toggle-button-thumb-background-color-checked-focused, var(--sjs-primary-background-500, #19b394));
 }
 
 .spg-boolean-switch__thumb {