survey-creator-core 1.9.110 → 1.9.112

package/survey-creator-core.css

@@ -1,5 +1,5 @@
 /*!
- * SurveyJS Creator v1.9.110
+ * SurveyJS Creator v1.9.112
  * (c) 2015-2023 Devsoft Baltic OÜ - http://surveyjs.io/
  * Github: https://github.com/surveyjs/survey-creator
  * License: https://surveyjs.io/Licenses#SurveyCreator
@@ -225,14 +225,14 @@
 }
 
 /*# sourceMappingURL=fonts.fontless.css.map*//*!
- * SurveyJS Creator v1.9.110
+ * SurveyJS Creator v1.9.112
  * (c) 2015-2023 Devsoft Baltic OÜ - http://surveyjs.io/
  * Github: https://github.com/surveyjs/survey-creator
  * License: https://surveyjs.io/Licenses#SurveyCreator
  */
 .svc-context-container {
   display: flex;
-  gap: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  gap: var(--sjs-base-unit, var(--base-unit, 8px));
   width: max-content;
 }
 
@@ -241,10 +241,10 @@
   box-sizing: border-box;
   background-color: var(--sjs-general-backcolor, var(--background, #fff));
   border-radius: 50%;
-  width: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  height: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  width: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  height: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   cursor: pointer;
-  padding: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   outline: none;
 }
 .svc-context-button use {
@@ -345,13 +345,13 @@ svc-tab-json-editor-textarea {
 
 .svc-json-error {
   font-family: var(--font-family);
-  font-size: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  line-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  font-size: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  line-height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding: var(--sjs-base-unit, var(--base-unit, 8px)) var(--sjs-base-unit, var(--base-unit, 8px)) var(--sjs-base-unit, var(--base-unit, 8px)) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   background: var(--sjs-special-red-light, var(--red-light, rgba(230, 10, 62, 0.1)));
   display: flex;
   align-items: center;
-  gap: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  gap: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .svc-json-errors__item:not(:first-of-type) .svc-json-error {
@@ -373,7 +373,7 @@ svc-tab-json-editor-textarea {
 
 .svc-json-error__container {
   display: flex;
-  gap: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  gap: var(--sjs-base-unit, var(--base-unit, 8px));
 }
 
 .svc-json-error__title {
@@ -385,19 +385,19 @@ svc-tab-json-editor-textarea {
   flex-grow: 0;
   flex-shrink: 0;
   pointer-events: all;
-  padding: 0 calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  width: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding: 0 var(--sjs-base-unit, var(--base-unit, 8px));
+  width: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   background: var(--sjs-general-backcolor, var(--background, #fff));
   border: none;
-  border-radius: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  border-radius: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   box-shadow: var(--sjs-shadow-small, 0px 1px 2px 0px rgba(0, 0, 0, 0.15));
   cursor: pointer;
 }
 .svc-json-error__fix-button svg {
   fill: var(--sjs-general-dim-forecolor-light, rgba(0, 0, 0, 0.45));
-  width: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  width: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .svc-json-error__fix-button:hover svg {
@@ -548,10 +548,10 @@ svc-tab-test {
   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)));
+  width: calc(33 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   margin-left: auto;
   margin-right: auto;
-  margin-bottom: calc(12 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  margin-bottom: calc(12 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   margin-top: 8px;
 }
 
@@ -574,7 +574,7 @@ svc-tab-test {
   left: 0;
   right: 0;
   justify-content: center;
-  gap: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  gap: var(--sjs-base-unit, var(--base-unit, 8px));
 }
 .svc-test-tab__content-actions .sv-action-bar.sv-action-bar--pages .sv-action__content {
   padding: 0;
@@ -583,13 +583,14 @@ svc-tab-test {
   margin: 0;
 }
 .svc-test-tab__content-actions .sv-action-bar-item {
-  font-family: var(--font-family, var(--font-family));
+  --small-bold-font-size: var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))));
+  font-family: var(--font-family);
   font-style: normal;
   font-weight: 600;
-  font-size: calc(0.75 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
-  line-height: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
+  font-size: calc(0.75 * var(--small-bold-font-size));
+  line-height: var(--sjs-font-size, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
   width: 100%;
-  height: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  height: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .svc-test-tab__content-actions .svc-page-selector {
   max-width: 50%;
@@ -606,7 +607,7 @@ svc-tab-test {
   font-family: var(--font-family);
   font-style: normal;
   font-weight: 400;
-  font-size: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  font-size: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
   text-align: center;
   overflow: hidden;
@@ -624,15 +625,15 @@ svc-tab-test {
 }
 
 .sl-table__cell.st-table__cell--actions:first-of-type .sv-action-bar {
-  margin-top: calc(-0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  padding-right: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  margin-top: calc(-0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding-right: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .sl-table .sl-table__detail-button.sl-table__detail-button {
-  width: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  height: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  width: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  height: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   box-sizing: border-box;
-  border-radius: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  border-radius: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   padding: 0;
 }
 .sl-table .sl-table__detail-button.sl-table__detail-button:hover:enabled, .sl-table .sl-table__detail-button.sl-table__detail-button.sv-focused--by-key {
@@ -644,8 +645,8 @@ svc-tab-test {
 }
 
 .sl-table__remove-button .sv-action-bar-item {
-  border-radius: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  border-radius: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding: var(--sjs-base-unit, var(--base-unit, 8px));
   cursor: pointer;
 }
 .sl-table__remove-button .sv-action-bar-item:hover:enabled, .sl-table__remove-button .sv-action-bar-item.sv-focused--by-key {
@@ -667,8 +668,8 @@ svc-tab-test {
 
 .sl-table__row #remove-row .sv-action-bar-item {
   border: none;
-  width: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  height: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  width: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  height: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .sl-table__row #remove-row .sv-action-bar-item__icon use {
   fill: var(--sjs-special-red, var(--red, #e60a3e));
@@ -683,17 +684,18 @@ svc-tab-test {
 .sl-table__cell .svc-action-button:focus,
 .sl-table__cell .svc-action-button:hover:enabled,
 .sl-table__cell .svc-action-button:focus:enabled {
+  --medium-bold-font-size: var(--sjs-base-unit, var(--base-unit, 8px));
   font-family: var(--font-family);
   font-style: normal;
   font-weight: bold;
-  font-size: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  line-height: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  font-size: calc(3 * var(--medium-bold-font-size));
+  line-height: calc(4 * var(--medium-bold-font-size));
   background: transparent;
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
   outline: none;
   border: none;
   box-shadow: none;
-  max-height: calc(13.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  max-height: calc(13.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   overflow: hidden;
   display: -webkit-box;
   -webkit-line-clamp: 3;
@@ -703,10 +705,10 @@ svc-tab-test {
 .sl-table__cell {
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
   font-weight: bold;
-  font-size: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  font-size: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   font-family: var(--font-family);
   vertical-align: top;
-  padding: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))) 0;
+  padding: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0;
   width: 100%;
 }
 
@@ -745,14 +747,14 @@ svc-tab-test {
   text-align: left;
 }
 .sl-table tbody tr:last-of-type .sl-table__cell {
-  padding-bottom: calc(10 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding-bottom: calc(10 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .sl-table tr:first-of-type .sl-table__cell {
-  padding-top: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding-top: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .sl-table td:first-of-type,
 .sl-table th:first-of-type {
-  padding-left: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding-left: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .sl-table td:first-of-type .sv-action-bar,
 .sl-table th:first-of-type .sv-action-bar {
@@ -760,7 +762,7 @@ svc-tab-test {
 }
 .sl-table td:last-of-type,
 .sl-table th:last-of-type {
-  padding-right: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding-right: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .sl-panel .sl-panel__footer {
@@ -774,12 +776,12 @@ svc-tab-test {
 }
 .sl-panel .sl-panel__footer button.sl-panel__done-button {
   width: 100%;
-  margin: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))) 0 calc(10 * var(--sjs-base-unit, var(--base-unit, 8px))) 0;
+  margin: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0 calc(10 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0;
   color: var(--sjs-primary-backcolor, var(--primary, #19b394));
   background-color: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
   font-family: var(--font-family);
-  font-size: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  border-radius: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  font-size: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  border-radius: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   display: flex;
   align-items: center;
   vertical-align: baseline;
@@ -806,7 +808,7 @@ svc-tab-test {
 .sl-question {
   display: flex;
   align-items: center;
-  margin-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  margin-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .sl-row {
@@ -820,7 +822,7 @@ svc-tab-test {
 }
 
 .sl-question__header--left {
-  margin-right: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  margin-right: var(--sjs-base-unit, var(--base-unit, 8px));
 }
 
 .sl-row .sd-scrollable-container:not(.sd-scrollable-container--compact) {
@@ -829,8 +831,8 @@ svc-tab-test {
 
 .sl-question__title {
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
-  font-size: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  line-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  font-size: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  line-height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   margin: 0;
   font-weight: 600;
 }
@@ -839,19 +841,19 @@ svc-tab-test {
 }
 
 .sl-row--multiple .sl-question {
-  padding-right: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding-right: var(--sjs-base-unit, var(--base-unit, 8px));
 }
 
 .svc-logic-question-value {
   --sd-base-padding: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
   --sd-base-vertical-padding: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
   --sd-page-vertical-padding: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  padding-right: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  margin-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding-right: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  margin-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .svc-logic_trigger-editor {
-  margin-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  margin-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .svc-logic_trigger-editor .svc-logic-question-value {
@@ -863,7 +865,7 @@ svc-tab-test {
 }
 
 .spg-comment.sl-comment {
-  height: calc(17 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  height: calc(17 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .svc-tab-translation {
   width: 100%;
@@ -874,15 +876,15 @@ svc-tab-test {
 .st-properties {
   background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
   flex-grow: 1;
-  padding-right: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  padding-left: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  padding-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding-right: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding-left: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .st-properties .spg-table .spg-table__cell:first-of-type {
-  width: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  width: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .st-properties .spg-table .spg-table__question-wrapper {
-  padding: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) var(--sjs-base-unit, var(--base-unit, 8px));
 }
 .st-properties .spg-table .spg-table__question-wrapper .spg-checkbox {
   margin: 0;
@@ -896,10 +898,11 @@ svc-tab-test {
 }
 
 .st-no-strings {
+  --center-text-font-size: var(--sjs-base-unit, var(--base-unit, 8px));
   font-family: var(--font-family);
   font-style: normal;
   font-weight: 400;
-  font-size: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  font-size: calc(2 * var(--center-text-font-size));
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
   width: 100%;
   position: absolute;
@@ -936,7 +939,7 @@ svc-tab-test {
 }
 
 .st-property-panel .spg-panel__content .spg-row:first-child {
-  margin-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  margin-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .st-strings-header .st-table__cell {
@@ -950,19 +953,20 @@ svc-tab-test {
 
 .st-title.st-panel__title,
 .st-table__cell.st-table__cell--header {
-  font-family: var(--font-family, var(--font-family));
+  --small-bold-font-size: var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))));
+  font-family: var(--font-family);
   font-style: normal;
   font-weight: 600;
-  font-size: calc(0.75 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
-  line-height: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
+  font-size: calc(0.75 * var(--small-bold-font-size));
+  line-height: var(--sjs-font-size, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
   color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
   text-align: left;
 }
 
 .st-title.st-panel__title {
-  height: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  line-height: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  padding-left: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  height: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  line-height: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding-left: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   margin: 0;
   background-color: var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9));
   border-bottom: 1px solid var(--sjs-border-light, var(--border-light, #eaeaea));
@@ -979,26 +983,27 @@ svc-tab-test {
   box-sizing: border-box;
   background-color: var(--sjs-general-backcolor, var(--background, #fff));
   border-bottom: 1px solid var(--sjs-border-light, var(--border-light, #eaeaea));
-  padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) 0;
+  padding: var(--sjs-base-unit, var(--base-unit, 8px)) 0;
 }
 
 td.st-table__cell:first-of-type {
-  font-family: var(--font-family, var(--font-family));
+  --default-bold-font-size: var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))));
+  font-family: var(--font-family);
   font-style: normal;
   font-weight: 600;
-  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
-  line-height: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
+  font-size: var(--sjs-font-size, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
+  line-height: calc(1.5 * var(--default-bold-font-size));
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
   max-width: 300px;
-  padding-right: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding-right: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 td.st-table__cell:first-of-type span {
   display: inline-block;
-  padding-left: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding-left: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .st-panel-indent .st-table__cell:first-of-type span {
-  padding-left: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding-left: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .st-table {
@@ -1009,10 +1014,11 @@ td.st-table__cell:first-of-type span {
 }
 
 .st-comment {
-  font-family: var(--font-family, var(--font-family));
+  --default-font-size: var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))));
+  font-family: var(--font-family);
   font-style: normal;
-  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
-  line-height: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
+  font-size: var(--sjs-font-size, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
+  line-height: calc(1.5 * var(--default-font-size));
   display: block;
   width: calc(100% - 3 * var(--sjs-base-unit, var(--base-unit, 8px)));
   border: unset;
@@ -1024,9 +1030,34 @@ td.st-table__cell:first-of-type span {
 }
 
 .sd-translation-line-skeleton {
-  min-height: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  min-height: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
 }
+
+.st-navigation-btn {
+  padding-left: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding-right: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+
+.svc-translation-machine {
+  margin-right: auto;
+}
+
+.st-body__footer {
+  padding: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  background: var(--sjs-general-backcolor, var(--background, #fff));
+  border-bottom: 1px solid var(--sjs-border-light, var(--border-light, #eaeaea));
+}
+
+.st-translation-dialog .sv-popup__body-header {
+  margin-bottom: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+
+.st-translation-dialog .st-root-modern > .sd-root-modern__wrapper {
+  border-radius: 4px;
+  box-shadow: var(--sjs-shadow-small, 0px 1px 2px 0px rgba(0, 0, 0, 0.15));
+  overflow: hidden;
+}
 .svc-tab-logic-edit {
   width: 100%;
   height: 100%;
@@ -1058,23 +1089,23 @@ td.st-table__cell:first-of-type span {
 }
 
 .svc-logic-paneldynamic div.svc-logic-operator {
-  height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   box-sizing: content-box;
 }
 
 .svc-logic-paneldynamic .svc-logic-operator {
   -webkit-appearance: none;
   appearance: none;
-  padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  border-radius: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding: var(--sjs-base-unit, var(--base-unit, 8px)) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  border-radius: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   border: none;
   outline: none;
   font-weight: 600;
   font-family: var(--font-family);
-  font-size: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  font-size: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
-  height: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  line-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  height: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  line-height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   cursor: pointer;
 }
 .svc-logic-paneldynamic .svc-logic-operator option {
@@ -1140,11 +1171,11 @@ td.st-table__cell:first-of-type span {
 
 .svc-logic-condition-remove.svc-icon-remove {
   display: none;
-  width: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  height: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  width: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  height: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   background-repeat: no-repeat;
   background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22 4H20H16V2C16 0.9 15.1 0 14 0H10C8.9 0 8 0.9 8 2V4H4H2V6H4V20C4 21.1 4.9 22 6 22H18C19.1 22 20 21.1 20 20V6H22V4ZM10 2H14V4H10V2ZM18 20H6V6H8H16H18V20ZM14 8H16V18H14V8ZM11 8H13V18H11V8ZM8 8H10V18H8V8Z' fill='%23E60A3E'/%3E%3C/svg%3E%0A");
-  background-size: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  background-size: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   background-position: center;
 }
 
@@ -1159,7 +1190,7 @@ td.st-table__cell:first-of-type span {
 }
 
 .svc-logic-condition-remove-question {
-  height: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  height: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .svc-logic-paneldynamic__button.svc-logic-paneldynamic__remove-btn {
@@ -1173,7 +1204,7 @@ td.st-table__cell:first-of-type span {
 .svc-logic-operator--action.sl-paneldynamic__add-btn.sl-paneldynamic__add-btn,
 .svc-logic-operator--operator.sl-paneldynamic__add-btn.sl-paneldynamic__add-btn {
   color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
-  margin-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  margin-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .svc-logic-operator--action.sl-paneldynamic__add-btn.sl-paneldynamic__add-btn:hover, .svc-logic-operator--action.sl-paneldynamic__add-btn.sl-paneldynamic__add-btn:focus,
 .svc-logic-operator--operator.sl-paneldynamic__add-btn.sl-paneldynamic__add-btn:hover,
@@ -1189,17 +1220,17 @@ td.st-table__cell:first-of-type span {
   top: 35%;
 }
 .svc-logic-tab__content.svc-logic-tab__empty .svc-logic-tab__content-action {
-  width: calc(33 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  margin-top: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  width: calc(33 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  margin-top: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .svc-logic-tab__content .svc-logic-tab__content-action {
   margin-left: 25%;
   margin-right: 25%;
-  margin-bottom: calc(8 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  margin-bottom: calc(8 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .svc-logic-tab__content .svc-logic-tab__content-action--disabled {
   cursor: default;
-  outline: solid calc(0.25 * var(--sjs-base-unit, var(--base-unit, 8px))) transparent;
+  outline: solid calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px)))) transparent;
 }
 .svc-logic-tab__content .svc-logic-tab__content-action--disabled:focus, .svc-logic-tab__content .svc-logic-tab__content-action--disabled:hover {
   background-color: var(--sjs-general-backcolor, var(--background, #fff));
@@ -1259,19 +1290,19 @@ td.st-table__cell:first-of-type span {
 }
 
 .sl-list__item-body {
-  padding-block: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding-block: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .svc-logic-placeholder {
-  width: calc(78 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  width: calc(78 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   min-width: 100%;
   max-width: 100%;
   box-sizing: border-box;
-  margin-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  margin-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   background: var(--sjs-general-backcolor, var(--background, #fff));
   box-shadow: var(--sjs-shadow-small, 0px 1px 2px 0px rgba(0, 0, 0, 0.15));
-  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)));
+  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))));
 }
 
 .sv-popup--overlay .svc-logic-placeholder {
@@ -1282,12 +1313,12 @@ td.st-table__cell:first-of-type span {
   font-family: var(--font-family);
   font-style: normal;
   font-weight: 400;
-  font-size: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  line-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  font-size: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  line-height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   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: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(8 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .svc-logic-tab__leave-apply-button {
@@ -1321,7 +1352,7 @@ svc-tab-designer {
 }
 
 .svc-tab-designer--with-place-holder .svc-designer-header {
-  min-width: calc(84 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  min-width: calc(84 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .svc-tab-designer .svc-designer-header .sd-container-modern__title {
@@ -1334,14 +1365,14 @@ svc-tab-designer {
   display: flex;
 }
 .svc-tab-designer .sd-container-modern {
-  min-width: calc(70 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  min-width: calc(70 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   width: 100%;
   box-sizing: border-box;
   margin-left: auto;
   margin-right: auto;
 }
 .svc-tab-designer .sd-container-modern.sd-container-modern--static {
-  max-width: calc(84 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  max-width: calc(84 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .svc-tab-designer .sd-container-modern.sd-container-modern--responsive {
   max-width: initial;
@@ -1365,16 +1396,16 @@ svc-tab-designer {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   box-sizing: border-box;
 }
 
 .svc-designer-placeholder-page {
-  margin-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  margin-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .svc-designer-placeholder-page .svc-page__footer {
-  width: calc(33 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  width: calc(33 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   margin: auto;
 }
 
@@ -1395,10 +1426,10 @@ svc-tab-designer {
   margin-left: 0;
 }
 .svc-creator--mobile .svc-question__content--selected .svc-rating-question-controls {
-  bottom: calc(10 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  bottom: calc(10 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .svc-creator--mobile .svc-page {
-  margin-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  margin-top: var(--sjs-base-unit, var(--base-unit, 8px));
 }
 .svc-creator--mobile .svc-page__content {
   padding-left: 0;
@@ -1409,26 +1440,26 @@ svc-tab-designer {
   margin: 0;
 }
 .svc-creator--mobile .svc-page__content.svc-page__content--selected .sd-page__title {
-  margin: calc(2.5 * var(--sjs-base-unit, var(--base-unit, 8px))) 0 0 0;
+  margin: calc(2.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0 0 0;
 }
 .svc-creator--mobile .svc-page__content .sd-page {
-  padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(3 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding: var(--sjs-base-unit, var(--base-unit, 8px)) calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .svc-creator--mobile .svc-page__content .svc-page__footer {
-  margin-left: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  margin-right: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  margin-left: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  margin-right: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .svc-creator--mobile .svc-question__content {
-  padding: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(3 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .svc-creator--mobile .svc-question__content.svc-question__content--selected {
-  padding-bottom: calc(8 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding-bottom: calc(8 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .svc-creator--mobile .svc-tab-designer {
   justify-content: initial;
 }
 .svc-creator--mobile .svc-tab-designer .sd-title.sd-container-modern__title {
-  padding: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   flex-direction: column-reverse;
   align-items: flex-start;
 }
@@ -1436,19 +1467,19 @@ svc-tab-designer {
   margin-top: 0;
 }
 .svc-creator--mobile .svc-tab-designer .sd-title.sd-container-modern__title .svc-logo-image-placeholder {
-  margin-left: calc(-2 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  margin-top: calc(-2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  margin-left: calc(-2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  margin-top: calc(-2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .svc-creator--mobile .svc-tab-designer .sd-title.sd-container-modern__title h3 {
   margin: 0;
-  font-size: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  line-height: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  font-size: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  line-height: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .svc-creator--mobile .svc-tab-designer .sd-title.sd-container-modern__title h5 {
   margin: 0;
 }
 .svc-creator--mobile .svc-tab-designer .sd-container-modern {
-  min-width: calc(43 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  min-width: calc(43 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   padding: 0;
 }
 .svc-creator--mobile .svc-properties-wrapper {
@@ -1456,13 +1487,13 @@ svc-tab-designer {
 }
 .svc-creator--mobile .svc-question__content-actions {
   width: calc(100% - 3 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  left: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  left: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .svc-creator--mobile .svc-question__content-actions .sv-action-bar-item {
   border: 0;
 }
 .svc-creator--mobile .svc-page__content-actions .sv-action-bar {
-  padding-right: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding-right: var(--sjs-base-unit, var(--base-unit, 8px));
 }
 .svc-creator--mobile .svc-page__content-actions .sv-action-bar .sv-action .sv-action__content {
   padding-right: 0;
@@ -1489,10 +1520,10 @@ svc-tab-test {
   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)));
+  width: calc(33 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   margin-left: auto;
   margin-right: auto;
-  margin-bottom: calc(12 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  margin-bottom: calc(12 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   margin-top: 8px;
 }
 
@@ -1515,7 +1546,7 @@ svc-tab-test {
   left: 0;
   right: 0;
   justify-content: center;
-  gap: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  gap: var(--sjs-base-unit, var(--base-unit, 8px));
 }
 .svc-test-tab__content-actions .sv-action-bar.sv-action-bar--pages .sv-action__content {
   padding: 0;
@@ -1524,13 +1555,14 @@ svc-tab-test {
   margin: 0;
 }
 .svc-test-tab__content-actions .sv-action-bar-item {
-  font-family: var(--font-family, var(--font-family));
+  --small-bold-font-size: var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))));
+  font-family: var(--font-family);
   font-style: normal;
   font-weight: 600;
-  font-size: calc(0.75 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
-  line-height: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
+  font-size: calc(0.75 * var(--small-bold-font-size));
+  line-height: var(--sjs-font-size, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
   width: 100%;
-  height: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  height: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .svc-test-tab__content-actions .svc-page-selector {
   max-width: 50%;
@@ -1549,23 +1581,24 @@ svc-tab-test {
 
 .svc-notifier {
   position: absolute;
-  bottom: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  left: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  bottom: var(--sjs-base-unit, var(--base-unit, 8px));
+  left: var(--sjs-base-unit, var(--base-unit, 8px));
   background: var(--sjs-general-backcolor, var(--background, #fff));
   opacity: 0;
-  padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding: var(--sjs-base-unit, var(--base-unit, 8px)) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   box-shadow: var(--sjs-shadow-medium, 0px 2px 6px 0px rgba(0, 0, 0, 0.1));
-  border-radius: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  border-radius: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
-  min-width: calc(30 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  min-width: calc(30 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   text-align: center;
   z-index: 1600;
   visibility: hidden;
-  font-family: var(--font-family, var(--font-family));
+  --small-bold-font-size: var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))));
+  font-family: var(--font-family);
   font-style: normal;
   font-weight: 600;
-  font-size: calc(0.75 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
-  line-height: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
+  font-size: calc(0.75 * var(--small-bold-font-size));
+  line-height: var(--sjs-font-size, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
 }
 
 .svc-notifier.svc-notifier--error {
@@ -1576,7 +1609,7 @@ svc-tab-test {
 
 .svc-creator--mobile .svc-notifier {
   left: 0;
-  bottom: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  bottom: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   width: 100%;
   box-sizing: border-box;
   opacity: 1;
@@ -1679,10 +1712,10 @@ survey-creator ::-webkit-scrollbar-thumb:hover,
 
 .svc-creator__banner {
   position: absolute;
-  bottom: calc(-4 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  bottom: calc(-4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   width: 100%;
-  height: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  line-height: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  height: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  line-height: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   background-color: var(--sjs-secondary-backcolor, var(--secondary, #ff9814));
   text-align: center;
   overflow: hidden;
@@ -1696,7 +1729,7 @@ survey-creator ::-webkit-scrollbar-thumb:hover,
   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)));
+  border-radius: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   box-shadow: var(--sjs-shadow-medium, 0px 2px 6px 0px rgba(0, 0, 0, 0.1));
   transition: max-width 0.1s ease-in-out, padding 0.2s ease-in-out;
 }
@@ -1705,7 +1738,7 @@ survey-creator ::-webkit-scrollbar-thumb:hover,
   color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
   font-family: var(--font-family);
   font-weight: bold;
-  font-size: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  font-size: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   text-transform: uppercase;
   vertical-align: middle;
 }
@@ -1715,9 +1748,9 @@ survey-creator ::-webkit-scrollbar-thumb:hover,
 }
 
 .sv-drag-drop-ghost {
-  top: calc(0.75 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  top: calc(0.75 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   width: 100%;
-  height: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  height: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   background: var(--sjs-secondary-backcolor, var(--secondary, #ff9814));
   position: absolute;
 }
@@ -1729,11 +1762,11 @@ survey-creator ::-webkit-scrollbar-thumb:hover,
 
 .sv-drag-drop-ghost--item-value-bottom {
   top: initial;
-  bottom: calc(-0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  bottom: calc(-0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .sv-list__filter {
-  margin-bottom: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  margin-bottom: var(--sjs-base-unit, var(--base-unit, 8px));
 }
 .sd-element__title .svc-string-editor {
   display: inline-block;
@@ -1786,12 +1819,12 @@ survey-creator ::-webkit-scrollbar-thumb:hover,
   z-index: 20;
   padding: 0px;
   vertical-align: top;
-  margin-inline-start: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  font-size: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  margin-inline-start: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  font-size: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   font-family: var(--font-family);
   font-weight: 400;
   color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
-  line-height: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  line-height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .svc-string-editor__border {
@@ -1805,9 +1838,9 @@ survey-creator ::-webkit-scrollbar-thumb:hover,
 }
 
 .svc-string-editor__error {
-  margin-left: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  line-height: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  font-size: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  margin-left: var(--sjs-base-unit, var(--base-unit, 8px));
+  line-height: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  font-size: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   color: red;
   display: none;
 }
@@ -1816,9 +1849,9 @@ survey-creator ::-webkit-scrollbar-thumb:hover,
   position: absolute;
   left: 100%;
   height: 100%;
-  width: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  width: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   top: 0;
-  padding-left: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding-left: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   z-index: 12;
   display: none;
   align-items: center;
@@ -1835,9 +1868,9 @@ survey-creator ::-webkit-scrollbar-thumb:hover,
 }
 
 .svc-string-editor__button--edit {
-  height: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  width: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  width: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding: var(--sjs-base-unit, var(--base-unit, 8px));
 }
 .svc-string-editor__button--edit .sv-svg-icon {
   vertical-align: bottom;
@@ -1854,26 +1887,26 @@ survey-creator ::-webkit-scrollbar-thumb:hover,
   display: flex;
   top: 0;
   bottom: 0;
-  left: calc(-0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  right: calc(-0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  left: calc(-0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  right: calc(-0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   border-radius: 3px;
-  box-shadow: 0px 0px 0px calc(0.25 * var(--sjs-base-unit, var(--base-unit, 8px))) rgba(0, 0, 0, 0.16);
+  box-shadow: 0px 0px 0px calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px)))) rgba(0, 0, 0, 0.16);
 }
 
 .svc-string-editor:focus-within .svc-string-editor__border {
   display: flex;
-  top: calc(-0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  bottom: calc(-0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  left: calc(-1 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  right: calc(-1 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  top: calc(-0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  bottom: calc(-0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  left: calc(-1 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  right: calc(-1 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   border-radius: 3px;
   box-sizing: content-box;
   background-color: var(--sjs-general-backcolor, var(--background, #fff));
-  box-shadow: var(--sjs-shadow-medium, 0px 2px 6px 0px rgba(0, 0, 0, 0.1)), 0px 0px 0px calc(0.25 * var(--sjs-base-unit, var(--base-unit, 8px))) var(--sjs-primary-backcolor, var(--primary, #19b394));
+  box-shadow: var(--sjs-shadow-medium, 0px 2px 6px 0px rgba(0, 0, 0, 0.1)), 0px 0px 0px calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px)))) var(--sjs-primary-backcolor, var(--primary, #19b394));
 }
 
 .svc-string-editor.svc-string-editor--error:focus-within .svc-string-editor__border {
-  box-shadow: var(--sjs-shadow-medium, 0px 2px 6px 0px rgba(0, 0, 0, 0.1)), 0px 0px 0px calc(0.25 * var(--sjs-base-unit, var(--base-unit, 8px))) var(--sjs-special-red, var(--red, #e60a3e));
+  box-shadow: var(--sjs-shadow-medium, 0px 2px 6px 0px rgba(0, 0, 0, 0.1)), 0px 0px 0px calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px)))) var(--sjs-special-red, var(--red, #e60a3e));
 }
 
 .sd-boolean .sv-string-editor:focus-within {
@@ -1881,7 +1914,7 @@ survey-creator ::-webkit-scrollbar-thumb:hover,
 }
 
 .sd-rating .sd-rating__item:focus-within {
-  border: calc(0.25 * var(--sjs-base-unit, var(--base-unit, 8px))) solid var(--sjs-primary-backcolor, var(--primary, #19b394));
+  border: calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px)))) solid var(--sjs-primary-backcolor, var(--primary, #19b394));
 }
 .sd-rating:not(.sd-rating__min-text) .svc-string-editor:focus-within .svc-string-editor__border {
   display: none;
@@ -1889,12 +1922,12 @@ survey-creator ::-webkit-scrollbar-thumb:hover,
 
 .sd-table__cell--actions .svc-string-editor__button--done,
 .sd-matrixdynamic__add-btn .svc-string-editor__button--done {
-  width: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  width: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .sd-table__cell--column-title .svc-matrix-cell:not(:focus):focus-within .svc-matrix-cell--selected {
-  border: calc(0.25 * var(--sjs-base-unit, var(--base-unit, 8px))) solid var(--sjs-primary-backcolor, var(--primary, #19b394));
-  border-radius: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  border: calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px)))) solid var(--sjs-primary-backcolor, var(--primary, #19b394));
+  border-radius: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   display: block;
 }
 .sd-table__cell--column-title .svc-string-editor:focus-within .svc-string-editor__border {
@@ -1902,8 +1935,8 @@ survey-creator ::-webkit-scrollbar-thumb:hover,
 }
 
 .sd-item__control-label .svc-string-editor:focus-within .svc-string-editor__border {
-  left: calc(-0.7 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  right: calc(-0.7 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  left: calc(-0.7 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  right: calc(-0.7 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .svc-string-editor:hover ~ .sd-question__required-text, .svc-string-editor:focus-within ~ .sd-question__required-text {
@@ -1912,16 +1945,16 @@ survey-creator ::-webkit-scrollbar-thumb:hover,
 .svc-btn {
   display: flex;
   align-items: center;
-  height: calc(7 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  line-height: calc(7 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  height: calc(7 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  line-height: calc(7 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   vertical-align: baseline;
   text-align: center;
   background-color: var(--sjs-general-backcolor, var(--background, #fff));
   box-shadow: var(--sjs-shadow-small, 0px 1px 2px 0px rgba(0, 0, 0, 0.15));
-  border-radius: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  border-radius: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   cursor: pointer;
   user-select: none;
-  outline: solid calc(0.25 * var(--sjs-base-unit, var(--base-unit, 8px))) transparent;
+  outline: solid calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px)))) transparent;
 }
 .svc-btn .svc-text {
   display: flex;
@@ -1941,14 +1974,14 @@ survey-creator ::-webkit-scrollbar-thumb:hover,
 
 .svc-action-button {
   display: inline-block;
-  padding: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   box-sizing: border-box;
-  border-radius: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  border-radius: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   color: var(--sjs-primary-backcolor, var(--primary, #19b394));
   font-weight: 600;
-  font-size: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  line-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  border: calc(0.25 * var(--sjs-base-unit, var(--base-unit, 8px))) solid transparent;
+  font-size: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  line-height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  border: calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px)))) solid transparent;
 }
 .svc-action-button:focus, .svc-action-button:hover {
   background-color: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
@@ -1971,9 +2004,9 @@ svc-page-navigator,
 
 .svc-page-navigator__navigator-icon {
   display: block;
-  height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  width: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  padding: calc(1.25 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  width: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding: calc(1.25 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   border-radius: 50%;
   cursor: pointer;
 }
@@ -1982,9 +2015,9 @@ svc-page-navigator,
 }
 
 .svc-page-navigator__selector {
-  width: calc(5.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  height: calc(5.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  min-height: calc(5.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  width: calc(5.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  height: calc(5.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  min-height: calc(5.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 survey-creator .svc-page-navigator__selector:hover, survey-creator .svc-page-navigator__selector:focus,
@@ -2012,20 +2045,20 @@ survey-creator .svc-page-navigator__selector:hover .svc-page-navigator__navigato
 }
 
 .svc-page-navigator__popup {
-  min-width: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  min-width: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .svc-tab-designer--with-page-navigator .svc-tab-designer_content {
-  margin-right: calc(6.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  margin-right: calc(6.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .svc-tab-designer__page-navigator {
-  width: calc(5.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  width: calc(5.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   position: absolute;
-  padding: calc(16.5 * var(--sjs-base-unit, var(--base-unit, 8px))) 0;
+  padding: calc(16.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0;
   top: 0;
   bottom: 0;
-  right: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  right: var(--sjs-base-unit, var(--base-unit, 8px));
 }
 
 .svc-creator__toolbox--right .svc-tab-designer--with-page-navigator .svc-tab-designer_content,
@@ -2033,21 +2066,21 @@ survey-creator .svc-page-navigator__selector:hover .svc-page-navigator__navigato
 [style*="direction:rtl"] .svc-tab-designer--with-page-navigator .svc-tab-designer_content,
 [style*="direction: rtl"] .svc-tab-designer--with-page-navigator .svc-tab-designer_content {
   margin-right: 0;
-  margin-left: calc(6.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  margin-left: calc(6.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .svc-creator__toolbox--right .svc-tab-designer__page-navigator,
 [dir=rtl] .svc-tab-designer__page-navigator,
 [style*="direction:rtl"] .svc-tab-designer__page-navigator,
 [style*="direction: rtl"] .svc-tab-designer__page-navigator {
   right: unset;
-  left: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  left: var(--sjs-base-unit, var(--base-unit, 8px));
 }
 svc-page-navigator-item,
 .svc-page-navigator-item {
   display: block;
-  width: calc(5.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  height: calc(4.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  min-height: calc(4.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  width: calc(5.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  height: calc(4.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  min-height: calc(4.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   cursor: pointer;
   position: relative;
 }
@@ -2088,22 +2121,22 @@ svc-page-navigator-item,
 }
 
 .svc-page-navigator-item--selected .svc-page-navigator-item__dot {
-  width: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  height: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  width: var(--sjs-base-unit, var(--base-unit, 8px));
+  height: var(--sjs-base-unit, var(--base-unit, 8px));
   right: calc(50% - 1.5 * var(--sjs-base-unit, var(--base-unit, 8px)) / 2);
   top: calc(50% - 1.5 * var(--sjs-base-unit, var(--base-unit, 8px)) / 2);
   background: var(--sjs-general-backcolor, var(--background, #fff));
-  border: calc(0.25 * var(--sjs-base-unit, var(--base-unit, 8px))) solid var(--sjs-primary-backcolor, var(--primary, #19b394));
+  border: calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px)))) solid var(--sjs-primary-backcolor, var(--primary, #19b394));
 }
 
 .svc-page-navigator-item__banner {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  right: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  right: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   display: flex;
   align-items: center;
-  line-height: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  line-height: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   animation: 0.5s ease-in;
   padding: 0;
   opacity: 0;
@@ -2112,8 +2145,8 @@ svc-page-navigator-item,
 .svc-page-navigator-item__banner .svc-page-navigator-item__dot {
   position: absolute;
   display: inline-block;
-  top: calc(1.75 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  right: calc(1.75 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  top: calc(1.75 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  right: calc(1.75 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .svc-creator__toolbox--right .svc-page-navigator-item__banner,
@@ -2128,20 +2161,20 @@ svc-page-navigator-item,
 [style*="direction:rtl"] .svc-page-navigator-item__banner .svc-page-navigator-item__dot,
 [style*="direction: rtl"] .svc-page-navigator-item__banner .svc-page-navigator-item__dot {
   right: unset;
-  left: calc(1.75 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  left: calc(1.75 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .svc-page-navigator-item-content:not(.svc-page-navigator-item--disabled) .svc-page-navigator-item__banner .svc-page-navigator-item__dot {
-  width: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  height: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  width: var(--sjs-base-unit, var(--base-unit, 8px));
+  height: var(--sjs-base-unit, var(--base-unit, 8px));
   border: none;
   background: var(--sjs-primary-backcolor, var(--primary, #19b394));
 }
 
 .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 {
-  padding: 0 calc(4.5 * var(--sjs-base-unit, var(--base-unit, 8px))) 0 calc(2.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  max-width: calc(25 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding: 0 calc(4.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0 calc(2.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  max-width: calc(25 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   opacity: 1;
 }
 
@@ -2153,7 +2186,7 @@ svc-page-navigator-item,
 [style*="direction:rtl"] .svc-page-navigator-item-content:not(.svc-page-navigator-item--selected):focus .svc-page-navigator-item__banner,
 [style*="direction: rtl"] .svc-page-navigator-item-content:not(.svc-page-navigator-item--selected):hover .svc-page-navigator-item__banner,
 [style*="direction: rtl"] .svc-page-navigator-item-content:not(.svc-page-navigator-item--selected):focus .svc-page-navigator-item__banner {
-  padding: 0 calc(2.5 * var(--sjs-base-unit, var(--base-unit, 8px))) 0 calc(4.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding: 0 calc(2.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0 calc(4.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .svc-page-navigator-item--disabled .svc-page-navigator-item__banner {
@@ -2165,31 +2198,31 @@ svc-page {
 }
 
 .svc-page {
-  margin-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  margin-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .svc-page .sd-page__title {
-  margin: calc(2.5 * var(--sjs-base-unit, var(--base-unit, 8px))) 0 0 0;
+  margin: calc(2.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0 0 0;
 }
 
 .svc-page__content {
   position: relative;
-  border-radius: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(0 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  border-radius: var(--sjs-base-unit, var(--base-unit, 8px));
+  padding: var(--sjs-base-unit, var(--base-unit, 8px)) calc(0 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   box-sizing: border-box;
   width: 100%;
   outline: none;
 }
 .svc-page__content .sd-page {
   margin: 0;
-  padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(3 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding: var(--sjs-base-unit, var(--base-unit, 8px)) calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .svc-page__content-actions {
   position: absolute;
   display: none;
-  top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  top: var(--sjs-base-unit, var(--base-unit, 8px));
   inset-inline-end: 0;
-  padding: 0 calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding: 0 calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   z-index: 1;
 }
 
@@ -2212,9 +2245,9 @@ svc-page {
 
 .svc-page__footer {
   overflow: visible;
-  margin-left: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  margin-right: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  gap: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  margin-left: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  margin-right: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  gap: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .svc-page__footer .sv-action {
   flex: 1 1 0;
@@ -2225,20 +2258,20 @@ svc-page {
 }
 
 .svc-page__add-new-question .svc-text {
-  margin-left: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  margin-left: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .svc-page__question-type-selector {
   appearance: none;
   display: flex;
-  height: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  height: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding: var(--sjs-base-unit, var(--base-unit, 8px));
   box-sizing: border-box;
   border: none;
   border-radius: 2px;
   background-color: transparent;
   cursor: pointer;
-  margin-inline-end: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  margin-inline-end: var(--sjs-base-unit, var(--base-unit, 8px));
   outline: none;
 }
 .svc-page__question-type-selector use {
@@ -2255,8 +2288,8 @@ svc-page {
   content: " ";
   position: absolute;
   background: var(--sjs-secondary-backcolor, var(--secondary, #ff9814));
-  left: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  bottom: calc(11.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  left: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  bottom: calc(11.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   width: calc(100% - 48px);
   height: 2px;
 }
@@ -2279,9 +2312,9 @@ svc-page {
   flex-wrap: nowrap;
   margin-top: 0;
   padding-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  padding-right: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding-right: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   padding-bottom: 2px;
-  margin-right: calc(-2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  margin-right: calc(-2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   margin-bottom: -2px;
 }
 .svc-row .sd-row.sd-row--multiple .sd-row--multiple {
@@ -2289,7 +2322,7 @@ svc-page {
 }
 
 .sd-panel .svc-row .sd-row--multiple {
-  padding: calc(0 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding: calc(0 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   box-shadow: none;
   border-radius: 0;
   padding: 2px;
@@ -2306,12 +2339,12 @@ svc-page {
   box-shadow: none;
 }
 .svc-row.svc-row--ghost .sd-row {
-  height: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  height: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .svc-row.svc-row--ghost:last-child .sd-row {
   height: initial;
-  margin-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  margin-bottom: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  margin-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  margin-bottom: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .svc-row.svc-row--ghost + .svc-row .sd-page__row {
   margin-top: 0;
@@ -2319,8 +2352,8 @@ svc-page {
 
 .svc-panel .svc-row.svc-row--ghost.svc-row.svc-row--ghost .sd-row {
   height: initial;
-  margin-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  margin-bottom: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  margin-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  margin-bottom: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .svc-row--drag-over-top:before {
@@ -2354,13 +2387,13 @@ svc-page {
 .svc-carry-forward-panel {
   box-sizing: border-box;
   width: 100%;
-  padding: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(8 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  border-radius: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(8 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  border-radius: var(--sjs-base-unit, var(--base-unit, 8px));
   background-color: #F8F8F8;
   text-align: center;
   font-weight: 400;
-  font-size: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  line-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  font-size: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  line-height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   color: rgba(0, 0, 0, 0.45);
 }
 
@@ -2408,9 +2441,9 @@ svc-question {
   position: relative;
   width: 100%;
   height: 100%;
-  border-radius: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  border-radius: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   box-sizing: border-box;
-  padding: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(5 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(8 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(8 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   background: var(--sjs-general-backcolor, var(--background, #fff));
   box-shadow: var(--sjs-shadow-small, 0px 1px 2px 0px rgba(0, 0, 0, 0.15));
   outline: none;
@@ -2418,8 +2451,8 @@ svc-question {
 
 .svc-question__content .sd-selectbase:not(.sd-imagepicker) {
   overflow-x: auto;
-  padding-left: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  margin-left: calc(-5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding-left: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  margin-left: calc(-5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .svc-question__content .sd-table .sd-selectbase:not(.sd-imagepicker) {
   overflow-x: visible;
@@ -2450,16 +2483,16 @@ svc-question {
 .svc-question__content-actions {
   position: absolute;
   display: none;
-  bottom: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  inset-inline-start: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  inset-inline-end: calc(3.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  bottom: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  inset-inline-start: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  inset-inline-end: calc(3.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .svc-question__content-actions .sv-action--convertTo {
   max-width: max-content;
 }
 .svc-question__content-actions .sv-action--convertTo .sv-action-bar-item--icon {
   max-width: 100%;
-  padding: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .svc-question__content-actions .sv-action--convertTo .sv-action-bar-item__title {
   overflow: hidden;
@@ -2471,9 +2504,9 @@ svc-question {
 .svc-question__content-actions .sv-action--convertTo .sv-action-bar-item__title::after {
   content: " ";
   display: inline-block;
-  margin-inline-start: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  width: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  height: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  margin-inline-start: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  width: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   vertical-align: bottom;
   background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 11L13 6H3L8 11Z' fill='%23ff9814'/%3E%3C/svg%3E%0A");
 }
@@ -2494,9 +2527,9 @@ svc-question {
   margin-inline-end: auto;
 }
 .svc-question__content-actions .sv-dots {
-  width: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  margin-left: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  margin-right: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  width: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  margin-left: var(--sjs-base-unit, var(--base-unit, 8px));
+  margin-right: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .svc-question__content-actions .sv-dots.sv-action--hidden {
   width: 0;
@@ -2537,17 +2570,17 @@ svc-question {
 }
 
 .svc-question__content .sd-question.sd-question--table {
-  margin-top: calc(-1 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  padding-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  margin-top: calc(-1 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding-top: var(--sjs-base-unit, var(--base-unit, 8px));
 }
 
 .svc-dragged-element-shortcut {
-  height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  border-radius: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  border-radius: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   background-color: var(--sjs-general-backcolor, var(--background, #fff));
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
-  padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  padding-right: calc(3.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding: var(--sjs-base-unit, var(--base-unit, 8px)) calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding-right: calc(3.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   cursor: grabbing;
   position: absolute;
   z-index: 1000;
@@ -2570,19 +2603,20 @@ svc-question {
 }
 
 .svc-dragged-element-shortcut__text {
-  font-family: var(--font-family, var(--font-family));
+  --small-bold-font-size: var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))));
+  font-family: var(--font-family);
   font-style: normal;
   font-weight: 600;
-  font-size: calc(0.75 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
-  line-height: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
-  margin-left: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  line-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  font-size: calc(0.75 * var(--small-bold-font-size));
+  line-height: var(--sjs-font-size, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
+  margin-left: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  line-height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .svc-dragged-element-shortcut__icon {
   position: absolute;
-  width: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  width: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .svc-question__content--drag-over-inside .svc-panel__placeholder_frame,
@@ -2730,7 +2764,7 @@ svc-question .sv-action-bar,
   top: 0;
   left: 0;
   visibility: hidden;
-  height: calc(3.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  height: calc(3.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   width: 100%;
   display: flex;
   align-items: center;
@@ -2739,7 +2773,7 @@ svc-question .sv-action-bar,
 
 .svc-question__drag-element {
   width: 100%;
-  height: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  height: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   opacity: 0.5;
 }
 .svc-question__drag-element use {
@@ -2795,12 +2829,12 @@ svc-question .sv-action-bar,
   border: 1px dashed var(--sjs-border-default, var(--border, #d6d6d6));
   width: 100%;
   box-sizing: border-box;
-  height: calc(30 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  height: calc(30 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
-  padding: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(8 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(8 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   flex-grow: 1;
 }
 
@@ -2813,12 +2847,12 @@ svc-question .sv-action-bar,
 
 .svc-panel__add-new-question {
   align-items: center;
-  margin-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  margin-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   margin-left: 0;
   margin-right: 0;
   width: auto;
-  height: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  line-height: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  height: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  line-height: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   vertical-align: baseline;
   text-align: center;
   cursor: pointer;
@@ -2834,8 +2868,8 @@ svc-question .sv-action-bar,
   align-items: center;
   flex-grow: 1;
   justify-content: center;
-  margin: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  line-height: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  margin: var(--sjs-base-unit, var(--base-unit, 8px)) calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  line-height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   color: var(--sjs-primary-backcolor, var(--primary, #19b394));
   text-wrap: nowrap;
 }
@@ -2843,16 +2877,16 @@ svc-question .sv-action-bar,
 .svc-panel__question-type-selector {
   appearance: none;
   display: flex;
-  height: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  height: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding: var(--sjs-base-unit, var(--base-unit, 8px));
   box-sizing: border-box;
   border: none;
   border-radius: 2px;
   background-color: transparent;
   cursor: pointer;
-  margin-right: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  margin-right: var(--sjs-base-unit, var(--base-unit, 8px));
   outline: none;
-  top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   margin: 0;
   position: absolute;
   right: 0;
@@ -2872,7 +2906,7 @@ svc-question .sv-action-bar,
 }
 
 .sd-panel .svc-row {
-  margin-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  margin-top: var(--sjs-base-unit, var(--base-unit, 8px));
 }
 .sd-panel .svc-row:first-of-type {
   margin-top: 0;
@@ -2880,7 +2914,7 @@ svc-question .sv-action-bar,
 .sd-panel .svc-row .sd-row {
   margin-top: 0;
   margin-bottom: 0;
-  gap: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  gap: var(--sjs-base-unit, var(--base-unit, 8px));
 }
 
 .svc-question__content .sd-element__header--location-top {
@@ -2898,7 +2932,7 @@ svc-question .sv-action-bar,
   padding-top: 0;
 }
 .svc-question__content .sd-table__cell--detail-panel .sd-panel__content {
-  padding-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding-top: var(--sjs-base-unit, var(--base-unit, 8px));
 }
 .svc-question__content .sd-paneldynamic__panel-wrapper {
   padding: 0;
@@ -2912,14 +2946,24 @@ svc-question .sv-action-bar,
 }
 
 .svc-question__content .svc-carry-forward-panel {
-  margin-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  margin-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .svc-question__content--ranking .svc-carry-forward-panel {
   margin-top: 0;
 }
+
+.svc-required-action .sv-svg-icon use {
+  fill: var(--sjs-secondary-backcolor, var(--secondary, #ff9814));
+}
+
+.svc-required-action--active:not(.sv-action-bar-item--pressed):enabled:hover,
+.svc-required-action--active:not(.sv-action-bar-item--pressed):enabled:focus,
+.svc-required-action--active {
+  background-color: var(--sjs-secondary-backcolor-semi-light, rgba(255, 152, 20, 0.1));
+}
 .svc-question__dropdown-choices {
-  margin-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  margin-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .svc-question__dropdown-choice--collapsed:nth-last-child(1) {
@@ -2935,14 +2979,14 @@ svc-question .sv-action-bar,
 }
 
 .svc-question__dropdown-choices--wrapper .svc-action-button {
-  margin-left: calc(6.75 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  margin-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  margin-left: calc(6.75 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  margin-top: var(--sjs-base-unit, var(--base-unit, 8px));
   cursor: pointer;
 }
 .svc-image-question-controls {
   position: absolute;
-  top: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  right: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  top: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  right: var(--sjs-base-unit, var(--base-unit, 8px));
   display: none;
 }
 
@@ -2951,7 +2995,7 @@ svc-question .sv-action-bar,
 }
 
 .svc-question__content--image:not(.svc-question__content--loading):not(.svc-question__content--empty) {
-  padding: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px))) 0 calc(8 * var(--sjs-base-unit, var(--base-unit, 8px))) 0;
+  padding: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0 calc(8 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0;
 }
 .svc-question__content--image:not(.svc-question__content--loading):not(.svc-question__content--empty) .sd-image__image {
   border-radius: 0;
@@ -2978,7 +3022,7 @@ svc-question .sv-action-bar,
   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)));
+  height: calc(27.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   border: 1px dashed var(--sjs-border-inside, var(--border-inside, rgba(0, 0, 0, 0.16)));
 }
 
@@ -3001,7 +3045,7 @@ svc-question .sv-action-bar,
 }
 
 .svc-question__content .sd-rating {
-  margin-inline-start: calc(9 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  margin-inline-start: calc(9 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   width: calc(100% - 9 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 .svc-question__content .sd-rating.sd-rating--wrappable fieldset {
@@ -3030,13 +3074,13 @@ svc-question .sv-action-bar,
 }
 .svc-question__content .svc-rating-question-controls {
   display: flex;
-  width: calc(8 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  width: calc(8 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   min-width: auto;
   justify-content: flex-start;
 }
 .svc-question__content .sd-rating__item--fixed-size:focus-within {
   width: unset;
-  padding: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .svc-creator--mobile .svc-rating-question-content {
@@ -3061,23 +3105,23 @@ svc-question .sv-action-bar,
 .svc-item-value-wrapper {
   position: relative;
   display: flex;
-  gap: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  gap: var(--sjs-base-unit, var(--base-unit, 8px));
   align-items: center;
-  margin-left: calc(-5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  margin-left: calc(-5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .svc-question__dropdown-choice .svc-item-value-wrapper,
 .sd-selectbase .svc-item-value-wrapper {
   align-items: flex-start;
-  min-width: calc(28 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  min-width: calc(28 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .svc-question__dropdown-choice .svc-item-value__item,
 .sd-selectbase .svc-item-value__item {
-  padding-right: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding-right: var(--sjs-base-unit, var(--base-unit, 8px));
 }
 
 .svc-question__content .sd-selectbase__column {
-  margin-left: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  margin-left: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .svc-question__content .sd-selectbase--mobile .sd-selectbase__column,
 .svc-question__content .sd-selectbase__column:first-of-type,
@@ -3091,9 +3135,9 @@ svc-question .sv-action-bar,
 .svc-item-value--dragging {
   background: var(--sjs-general-backcolor, var(--background, #fff));
   box-shadow: var(--sjs-shadow-large, 0px 8px 16px 0px rgba(0, 0, 0, 0.1));
-  border-radius: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  padding-right: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  padding-left: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  border-radius: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding-right: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding-left: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   -moz-user-select: none;
   -webkit-user-select: none;
   -ms-user-select: none;
@@ -3102,8 +3146,8 @@ svc-question .sv-action-bar,
 
 .svc-item-value-controls {
   display: flex;
-  margin: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) 0;
-  height: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  margin: var(--sjs-base-unit, var(--base-unit, 8px)) 0;
+  height: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   box-sizing: border-box;
   flex-shrink: 0;
   min-width: 72px;
@@ -3112,11 +3156,11 @@ svc-question .sv-action-bar,
 
 .svc-item-value-controls__button {
   border-radius: 50%;
-  padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding: var(--sjs-base-unit, var(--base-unit, 8px));
   cursor: pointer;
   display: inline-block;
   outline: none;
-  height: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   box-sizing: content-box;
 }
 .svc-item-value-controls__button .sv-svg-icon {
@@ -3137,7 +3181,7 @@ svc-question .sv-action-bar,
 }
 
 .svc-item-value-controls__drag {
-  padding: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) var(--sjs-base-unit, var(--base-unit, 8px));
   cursor: move;
   opacity: 0.25;
 }
@@ -3190,7 +3234,7 @@ svc-question .sv-action-bar,
 
 .sv-ranking .svc-item-value-wrapper {
   align-items: center;
-  min-width: calc(27 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  min-width: calc(27 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .sv-ranking .svc-item-value__item {
   padding-right: 0;
@@ -3262,8 +3306,8 @@ svc-question .sv-action-bar,
 .svc-item-value__ghost {
   display: none;
   background: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
-  border-radius: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  width: calc(25 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  border-radius: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  width: calc(25 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   height: 40px;
   z-index: 11;
   position: absolute;
@@ -3293,7 +3337,7 @@ svc-question .sv-action-bar,
 .svc-creator--mobile .svc-tab-designer .svc-question__content--ranking .svc-item-value-wrapper,
 .svc-creator--mobile .svc-tab-designer .sd-selectbase .svc-item-value-wrapper,
 .svc-creator--mobile .svc-tab-designer .svc-question__dropdown-choices .svc-item-value-wrapper {
-  margin-left: calc(-3 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  margin-left: calc(-3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .svc-creator--touch:not(.svc-creator--mobile) .svc-tab-designer .svc-question__content--ranking .svc-item-value-controls__drag-icon,
@@ -3304,7 +3348,7 @@ svc-question .sv-action-bar,
 .svc-creator--touch:not(.svc-creator--mobile) .svc-tab-designer .svc-question__content--ranking .svc-item-value-wrapper,
 .svc-creator--touch:not(.svc-creator--mobile) .svc-tab-designer .sd-selectbase .svc-item-value-wrapper,
 .svc-creator--touch:not(.svc-creator--mobile) .svc-tab-designer .svc-question__dropdown-choices .svc-item-value-wrapper {
-  margin-left: calc(-6 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  margin-left: calc(-6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .svc-creator--touch:not(.svc-creator--mobile) .svc-tab-designer .svc-question__content--ranking .svc-item-value-controls__drag,
 .svc-creator--touch:not(.svc-creator--mobile) .svc-tab-designer .sd-selectbase .svc-item-value-controls__drag,
@@ -3341,8 +3385,8 @@ svc-question .sv-action-bar,
 
 .svc-image-item-value-controls {
   position: absolute;
-  top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  right: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  top: var(--sjs-base-unit, var(--base-unit, 8px));
+  right: var(--sjs-base-unit, var(--base-unit, 8px));
 }
 
 .svc-image-item-value--new .svc-image-item-value-controls {
@@ -3378,8 +3422,8 @@ svc-question .sv-action-bar,
   display: none;
   cursor: move;
   position: absolute;
-  top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  left: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  top: var(--sjs-base-unit, var(--base-unit, 8px));
+  left: var(--sjs-base-unit, var(--base-unit, 8px));
 }
 
 .svc-question__content--selected .svc-image-item-value-wrapper:hover .svc-image-item-value-controls__drag-area-indicator {
@@ -3402,7 +3446,7 @@ svc-question .sv-action-bar,
   width: 100%;
 }
 .svc-image-item-value--single .sd-imagepicker__image {
-  height: calc(30 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  height: calc(30 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .svc-image-item-value__loading {
@@ -3416,20 +3460,20 @@ svc-question .sv-action-bar,
 }
 
 .svc-question__adorner .sd-table .sd-table__cell--column-title {
-  padding: 0 calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding: 0 var(--sjs-base-unit, var(--base-unit, 8px));
 }
 .svc-question__adorner .sd-table .sd-table__cell--column-title .svc-matrix-cell {
-  padding: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) var(--sjs-base-unit, var(--base-unit, 8px));
 }
 
 .svc-matrix-cell--selected {
   position: absolute;
-  border: calc(0.25 * var(--sjs-base-unit, var(--base-unit, 8px))) solid var(--sjs-secondary-backcolor, var(--secondary, #ff9814));
-  border-radius: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  top: calc(0 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  left: calc(0 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  right: calc(0 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  bottom: calc(0 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  border: calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px)))) solid var(--sjs-secondary-backcolor, var(--secondary, #ff9814));
+  border-radius: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  top: calc(0 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  left: calc(0 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  right: calc(0 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  bottom: calc(0 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   display: none;
 }
 .svc-matrix-cell--selected.svc-visible {
@@ -3437,8 +3481,8 @@ svc-question .sv-action-bar,
 }
 
 .svc-hovered > .svc-matrix-cell--selected:not(.svc-visible) {
-  border: calc(0.25 * var(--sjs-base-unit, var(--base-unit, 8px))) solid var(--sjs-secondary-backcolor-light, var(--secondary-light, rgba(255, 152, 20, 0.25)));
-  border-radius: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  border: calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px)))) solid var(--sjs-secondary-backcolor-light, var(--secondary-light, rgba(255, 152, 20, 0.25)));
+  border-radius: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   display: block;
 }
 
@@ -3452,13 +3496,13 @@ svc-question .sv-action-bar,
 
 .svc-matrix-cell__question-controls-button {
   display: block;
-  width: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  height: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  width: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  height: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   background: var(--sjs-general-backcolor, var(--background, #fff));
   border: 1px solid var(--sjs-border-default, var(--border, #d6d6d6));
   box-sizing: border-box;
   border-radius: 50%;
-  padding: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   cursor: pointer;
 }
 .svc-matrix-cell__question-controls-button use {
@@ -3471,12 +3515,12 @@ svc-question .sv-action-bar,
 
 .svc-question__content--in-popup {
   width: calc(100% - 25 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  min-width: calc(70 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  padding: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  min-width: calc(70 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .svc-matrix-cell__popup .sv-popup__scrolling-content {
-  margin-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  margin-top: var(--sjs-base-unit, var(--base-unit, 8px));
   padding-top: 0;
 }
 .svc-matrix-cell__popup .svc-question__content {
@@ -3487,7 +3531,7 @@ svc-question .sv-action-bar,
 }
 
 .svc-question__content .sd-table__cell--detail-panel {
-  padding-left: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding-left: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .svd-test-results {
   font-family: var(--font-family);
@@ -3499,8 +3543,8 @@ svc-question .sv-action-bar,
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  font-size: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  font-size: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
   border-bottom: 2px solid var(--sjs-border-light, var(--border-light, #eaeaea));
   background-color: var(--sjs-general-backcolor, var(--background, #fff));
@@ -3510,12 +3554,12 @@ svc-question .sv-action-bar,
 }
 .svd-test-results .svd-test-results__header .svd-test-results__header-types {
   display: flex;
-  gap: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  gap: var(--sjs-base-unit, var(--base-unit, 8px));
 }
 .svd-test-results .svd-test-results__text {
   display: flex;
-  padding: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  width: calc(100% - 6 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  width: calc(100% - 6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   overflow: auto;
   user-select: text;
   white-space: pre-wrap;
@@ -3532,7 +3576,7 @@ svc-question .sv-action-bar,
 }
 .svd-test-results .svd-test-results__table table .svd-test-results__marker {
   position: absolute;
-  top: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  top: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .svd-test-results .svd-test-results__table table .svd-test-results__marker .sv-svg-icon {
   transition: transform 0.2s ease-in-out;
@@ -3545,7 +3589,7 @@ svc-question .sv-action-bar,
   transform: rotate(90deg);
 }
 .svd-test-results .svd-test-results__table table th {
-  padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding: var(--sjs-base-unit, var(--base-unit, 8px)) var(--sjs-base-unit, var(--base-unit, 8px));
   background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
   text-align: left;
   font-weight: 600;
@@ -3553,11 +3597,11 @@ svc-question .sv-action-bar,
   color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
 }
 .svd-test-results .svd-test-results__table table th:nth-child(1) {
-  padding-left: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding-left: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .svd-test-results .svd-test-results__table table td {
-  padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  max-width: calc(50 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding: var(--sjs-base-unit, var(--base-unit, 8px)) var(--sjs-base-unit, var(--base-unit, 8px));
+  max-width: calc(50 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   overflow: auto;
   border-top: 2px solid var(--sjs-border-light, var(--border-light, #eaeaea));
   user-select: text;
@@ -3569,7 +3613,7 @@ svc-question .sv-action-bar,
 }
 .svd-test-results .svd-test-results__table table td:nth-child(2) {
   width: 50%;
-  padding-right: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding-right: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .svd-test-results .svd-test-results__table table .survey-result-value {
   word-break: break-all;
@@ -3582,7 +3626,7 @@ svc-question .sv-action-bar,
 }
 .svc-designer-header .sd-container-modern__title {
   gap: 0;
-  column-gap: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  column-gap: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .svc-logo-image {
@@ -3595,32 +3639,32 @@ svc-question .sv-action-bar,
 }
 .svc-logo-image .svc-image-item-value-controls {
   display: block;
-  top: calc(2.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  right: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  top: calc(2.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  right: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .svc-logo-image__loading {
-  width: calc(8 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  height: calc(8 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  width: calc(8 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  height: calc(8 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding: var(--sjs-base-unit, var(--base-unit, 8px));
   box-sizing: border-box;
-  margin-right: calc(-2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  margin-right: calc(-2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .svc-logo-image-placeholder {
-  font-size: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  font-size: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
   opacity: 0.25;
   white-space: nowrap;
   word-break: keep-all;
   padding: 0;
-  width: calc(8 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  height: calc(8 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  width: calc(8 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  height: calc(8 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   display: flex;
   justify-content: center;
   align-items: center;
-  margin-right: calc(-2 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  border-radius: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  margin-right: calc(-2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  border-radius: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .svc-logo-image-placeholder:hover {
   background-color: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
@@ -3630,8 +3674,8 @@ svc-question .sv-action-bar,
   fill: var(--sjs-primary-backcolor, var(--primary, #19b394));
 }
 .svc-logo-image-placeholder svg {
-  width: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  height: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  width: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  height: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .svc-logo-image-placeholder use {
@@ -3672,7 +3716,7 @@ svc-question .sv-action-bar,
 }
 
 .svc-link-value-button {
-  margin-left: calc(-2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  margin-left: calc(-2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .svc-question-link__clear-button {
@@ -3686,7 +3730,7 @@ svc-question .sv-action-bar,
   background-color: var(--sjs-special-red-light, var(--red-light, rgba(230, 10, 62, 0.1)));
 }
 .svc-property-panel__item {
-  margin: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))) 0;
+  margin: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0;
   width: 100%;
 }
 .svc-property-panel__group {
@@ -3694,7 +3738,7 @@ svc-question .sv-action-bar,
   -moz-appearance: none;
   appearance: none;
   width: 100%;
-  padding: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   border: none;
   outline: none;
   color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
@@ -3703,7 +3747,7 @@ svc-question .sv-action-bar,
   background: var(--sjs-general-backcolor, var(--background, #fff));
   box-shadow: inset 0px -1px 0px var(--sjs-border-default, var(--border, #d6d6d6));
   font-family: var(--font-family);
-  font-size: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  font-size: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .svc-property-panel__group:disabled,
@@ -3727,9 +3771,9 @@ svc-question .sv-action-bar,
   background-color: var(--sjs-general-backcolor, var(--background, #fff));
 }
 .svc-tabbed-menu-item {
-  padding: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  height: calc(8 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  line-height: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  height: calc(8 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  line-height: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   box-sizing: border-box;
   cursor: pointer;
 }
@@ -3763,7 +3807,7 @@ svc-question .sv-action-bar,
 
 .svc-tabbed-menu-item .svc-tabbed-menu-item__text {
   white-space: nowrap;
-  line-height: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  line-height: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .svc-tabbed-menu-item-container .sv-dots__item {
@@ -3774,7 +3818,7 @@ svc-question .sv-action-bar,
   white-space: nowrap;
   overflow: hidden;
   align-items: center;
-  height: calc(8 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  height: calc(8 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .svc-tabbed-menu-wrapper {
@@ -3787,12 +3831,12 @@ svc-question .sv-action-bar,
   align-items: center;
   z-index: 20;
   outline: none;
-  padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding: var(--sjs-base-unit, var(--base-unit, 8px)) calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .svc-toolbox__item sv-svg-icon,
 .svc-toolbox__item .sv-svg-icon {
   display: block;
-  height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .svc-toolbox__item-container {
@@ -3808,13 +3852,13 @@ svc-question .sv-action-bar,
   box-sizing: border-box;
   align-items: center;
   margin-right: 0;
-  margin-left: calc(-1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  margin-left: calc(-1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .svc-toolbox__item-banner .svc-toolbox__item-icon {
   position: absolute;
   display: block;
-  left: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  left: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  top: var(--sjs-base-unit, var(--base-unit, 8px));
 }
 .svc-toolbox__item-banner .svc-toolbox__item-title {
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
@@ -3832,8 +3876,8 @@ svc-question .sv-action-bar,
 [style*="direction: rtl"] .svc-toolbox__item:hover .svc-toolbox__item-banner,
 [style*="direction: rtl"] .svc-toolbox__item:focus .svc-toolbox__item-banner {
   flex-direction: row-reverse;
-  padding-right: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  padding-left: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding-right: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding-left: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   margin-left: 0;
   margin-right: 0;
   transform: translateX(calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px))));
@@ -3846,8 +3890,8 @@ svc-question .sv-action-bar,
 [style*="direction:rtl"] .svc-toolbox__item:focus .svc-toolbox__item-banner .svc-toolbox__item-title,
 [style*="direction: rtl"] .svc-toolbox__item:hover .svc-toolbox__item-banner .svc-toolbox__item-title,
 [style*="direction: rtl"] .svc-toolbox__item:focus .svc-toolbox__item-banner .svc-toolbox__item-title {
-  padding-left: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  padding-right: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding-left: var(--sjs-base-unit, var(--base-unit, 8px));
+  padding-right: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .svc-creator__toolbox--right .svc-toolbox__item,
 [dir=rtl] .svc-toolbox__item,
@@ -3878,38 +3922,39 @@ svc-question .sv-action-bar,
 [style*="direction:rtl"] .svc-toolbox__item-banner .svc-toolbox__item-icon,
 [style*="direction: rtl"] .svc-toolbox__item-banner .svc-toolbox__item-icon {
   left: auto;
-  right: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  right: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .svc-toolbox__item-title {
-  font-family: var(--font-family, var(--font-family));
+  --small-bold-font-size: var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))));
+  font-family: var(--font-family);
   font-style: normal;
   font-weight: 600;
-  font-size: calc(0.75 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
-  line-height: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
+  font-size: calc(0.75 * var(--small-bold-font-size));
+  line-height: var(--sjs-font-size, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
   display: block;
-  padding-left: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  padding-right: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding-left: var(--sjs-base-unit, var(--base-unit, 8px));
+  padding-right: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   white-space: nowrap;
   color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
 }
 
 .svc-toolbox__item:hover .svc-toolbox__item-banner,
 .svc-toolbox__item:focus .svc-toolbox__item-banner {
-  max-width: calc(100 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  padding-left: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  padding-right: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  max-width: calc(100 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding-left: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding-right: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   opacity: 1;
 }
 .svc-toolbox__item:hover .svc-toolbox__item-banner .svc-toolbox__item-title,
 .svc-toolbox__item:focus .svc-toolbox__item-banner .svc-toolbox__item-title {
-  padding-left: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding-left: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .svc-toolbox:not(.svc-toolbox--compact) .svc-toolbox__item:not(.sv-dots):focus,
 .svc-toolbox:not(.svc-toolbox--compact) .svc-toolbox__item:not(.sv-dots):hover {
   overflow: hidden;
-  border-radius: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  border-radius: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   background-color: var(--sjs-general-backcolor, var(--background, #fff));
   box-shadow: var(--sjs-shadow-medium, 0px 2px 6px 0px rgba(0, 0, 0, 0.1));
   transition: 0.1s ease-in-out;
@@ -3927,7 +3972,7 @@ svc-question .sv-action-bar,
 .svc-toolbox__tool .sv-dots__item:focus:enabled,
 .svc-toolbox__tool .sv-dots__item.sv-action-bar-item--pressed {
   background-color: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
-  border-radius: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  border-radius: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .svc-toolbox__tool .sv-dots__item:hover:enabled .sv-svg-icon use,
 .svc-toolbox__tool .sv-dots__item:focus:enabled .sv-svg-icon use,
@@ -3945,10 +3990,10 @@ svc-question .sv-action-bar,
   display: none;
 }
 .svc-toolbox-popup .sv-list__item .sv-list__item-body {
-  padding-top: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  padding-bottom: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  padding-inline-start: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  padding-inline-end: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding-top: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding-bottom: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding-inline-start: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding-inline-end: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .svc-toolbox .svc-toolbox__tool--pressed .svc-toolbox__item:not(.sv-dots),
@@ -3973,14 +4018,14 @@ svc-toolbox {
 
 .svc-toolbox {
   height: 100%;
-  padding: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   box-sizing: border-box;
   overflow-y: auto;
   direction: rtl;
 }
 
 .svc-toolbox--compact {
-  width: calc(10.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  width: calc(10.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   overflow: visible;
   direction: ltr;
 }
@@ -4001,25 +4046,25 @@ svc-toolbox {
 }
 
 .svc-toolbox__tool .sv-dots__item {
-  width: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  margin-top: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  width: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  margin-top: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .svc-toolbox__category-separator {
   height: 1px;
-  width: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  width: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   background-color: var(--sjs-border-default, var(--border, #d6d6d6));
-  margin: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) 0 calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  margin: var(--sjs-base-unit, var(--base-unit, 8px)) 0 calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .svc-toolbox__category-header {
-  height: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  padding: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  height: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   background: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
   border-bottom: 1px solid var(--sjs-border-default, var(--border, #d6d6d6));
   box-sizing: border-box;
   width: 100%;
-  min-width: calc(20 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  min-width: calc(20 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   position: relative;
 }
 
@@ -4029,9 +4074,9 @@ svc-toolbox {
 
 .svc-toolbox__category-title {
   font-family: var(--font-family);
-  font-size: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  font-size: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   font-weight: bold;
-  line-height: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  line-height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
   vertical-align: middle;
   display: block;
@@ -4039,8 +4084,8 @@ svc-toolbox {
 
 .svc-toolbox__category-header__controls {
   position: absolute;
-  right: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  right: var(--sjs-base-unit, var(--base-unit, 8px));
+  top: var(--sjs-base-unit, var(--base-unit, 8px));
   display: none;
 }
 
@@ -4057,7 +4102,7 @@ svc-toolbox {
 }
 .svc-toolbox__tool .sv-action__content {
   display: flex;
-  padding-top: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding-top: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   flex-direction: column;
   align-items: flex-start;
 }
@@ -4100,9 +4145,9 @@ svc-toolbox {
 .svc-side-bar__container-header {
   background: var(--sjs-general-backcolor, var(--background, #fff));
   box-shadow: inset 0px -2px 0px var(--sjs-primary-backcolor, var(--primary, #19b394));
-  line-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  line-height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   display: flex;
-  height: calc(8 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  height: calc(8 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .svc-side-bar__container-content {
@@ -4119,7 +4164,7 @@ svc-toolbox {
   flex-direction: column;
   align-items: flex-start;
   width: 100%;
-  padding: 0px calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding: 0px calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   box-sizing: border-box;
   background: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
   box-shadow: inset 0px -1px 0px var(--sjs-border-default, var(--border, #d6d6d6));
@@ -4127,26 +4172,23 @@ svc-toolbox {
 
 .svc-side-bar__container-title {
   display: flex;
-  line-height: calc(4.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  line-height: calc(4.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   flex-grow: 1;
   flex-shrink: 0;
   justify-content: flex-end;
-  padding: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .svc-side-bar__container-actions {
   width: 100%;
-  padding: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  box-sizing: border-box;
+  padding: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) var(--sjs-base-unit, var(--base-unit, 8px));
 }
 .svc-side-bar__container-actions .sv-action-bar {
   justify-content: flex-end;
   padding: 0;
 }
 
-.svc-side-bar__container-close {
-  display: none;
-}
-
 .svc-flex-column.svc-side-bar__wrapper {
   width: auto;
   border-left: 1px solid var(--sjs-border-default, var(--border, #d6d6d6));
@@ -4182,6 +4224,17 @@ svc-toolbox {
   max-width: 100%;
 }
 
+.sv-action--object-selector {
+  max-width: 70%;
+}
+.sv-action--object-selector .sv-action-bar-item {
+  flex-shrink: 1;
+}
+.sv-action--object-selector .sv-action-bar-item__title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .svc-full-container.svc-creator__side-bar--left {
   flex-direction: row-reverse;
 }
@@ -4205,40 +4258,11 @@ svc-toolbox {
   margin-inline-end: auto;
 }
 
-.sv-mobile-side-bar .svc-side-bar__container-actions {
-  display: none;
-}
-.sv-mobile-side-bar .svc-side-bar__container-title {
-  display: block;
-  font-weight: bold;
-  font-size: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  line-height: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  flex: unset;
-}
-.sv-mobile-side-bar .svc-side-bar__wrapper {
-  top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  background: none;
-}
-.sv-mobile-side-bar .svc-side-bar__container {
+.sv-mobile-side-bar .svc-flyout-side-bar .svc-side-bar__wrapper {
   width: 100%;
-  min-width: 338px;
 }
-.sv-mobile-side-bar .svc-side-bar__container-header {
-  border: unset;
-  box-shadow: 0px calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  border-radius: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))) 0px 0px;
-}
-.sv-mobile-side-bar .svc-side-bar__container-content {
-  height: calc(100% - 20 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
-}
-.sv-mobile-side-bar .svc-side-bar__container-close {
-  display: flex;
-  background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
-}
-.sv-mobile-side-bar .svc-side-bar__container-close .svc-side-bar__container-close-button {
+.sv-mobile-side-bar .svc-side-bar__container {
   width: 100%;
-  margin: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 
 .svc-side-bar .svc-toolbox {
@@ -4247,7 +4271,7 @@ svc-toolbox {
 .spg-action-bar {
   display: flex;
   box-sizing: content-box;
-  padding-right: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding-right: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   position: relative;
   align-items: center;
   margin-left: auto;
@@ -4263,15 +4287,15 @@ svc-toolbox {
   -moz-appearance: none;
   appearance: none;
   display: flex;
-  padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding: var(--sjs-base-unit, var(--base-unit, 8px));
   box-sizing: border-box;
   border: none;
   color: var(--sjs-primary-backcolor, var(--primary, #19b394));
   font-weight: 600;
-  font-size: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  line-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  font-size: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  line-height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   font-family: var(--font-family);
-  border-radius: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  border-radius: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   background-color: transparent;
   cursor: pointer;
 }
@@ -4302,7 +4326,7 @@ svc-toolbox {
 }
 
 button.spg-action-button--large {
-  padding: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .spg-action-button:disabled {
@@ -4320,7 +4344,7 @@ button.spg-action-button--large {
 }
 
 .spg-action-button--text {
-  padding: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .spg-question {
@@ -4337,9 +4361,9 @@ button.spg-action-button--large {
 .spg-question__title {
   width: 100%;
   margin: 0;
-  padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) 0;
-  line-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  font-size: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding: var(--sjs-base-unit, var(--base-unit, 8px)) 0;
+  line-height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  font-size: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   font-family: var(--font-family);
   color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
   font-weight: normal;
@@ -4368,35 +4392,35 @@ button.spg-action-button--large {
   align-items: flex-end;
   padding: 0px;
   font-family: var(--font-family);
-  line-height: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  font-size: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  line-height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  font-size: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
   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)));
+  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))));
 }
 
 .spg-question__description {
-  line-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  font-size: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  line-height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  font-size: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
-  padding-bottom: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding-bottom: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   white-space: normal;
 }
 
 .spg-row-narrow__question {
-  margin-top: calc(-2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  margin-top: calc(-2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .spg-row--multiple > div > .spg-row-narrow__question {
-  margin-top: calc(-1 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  margin-top: calc(-1 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .spg-question--location--left {
   flex-direction: row;
   background: var(--sjs-general-backcolor, var(--background, #fff));
   box-shadow: inset 0 0 0 1px var(--sjs-border-inside, var(--border-inside, rgba(0, 0, 0, 0.16)));
-  line-height: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  line-height: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   vertical-align: middle;
   align-items: stretch;
 }
@@ -4413,7 +4437,7 @@ button.spg-action-button--large {
   align-items: center;
 }
 .spg-question__header--location--left .spg-question__title {
-  padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding: var(--sjs-base-unit, var(--base-unit, 8px)) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   border-right: 1px solid var(--sjs-border-default, var(--border, #d6d6d6));
   display: inline-block;
 }
@@ -4432,15 +4456,15 @@ button.spg-action-button--large {
 
 .spg-row--multiple {
   display: flex;
-  gap: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  gap: var(--sjs-base-unit, var(--base-unit, 8px));
   flex-wrap: wrap;
 }
 .spg-row--multiple > div {
   flex-grow: 1;
-  min-width: calc(25.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  min-width: calc(25.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .spg-row--multiple > div .spg-question__header--location--left {
-  min-width: calc(8 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  min-width: calc(8 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .spg-row--multiple > div input {
   min-width: max(17 * var(--sjs-base-unit, var(--base-unit, 8px)), 100%);
@@ -4448,33 +4472,33 @@ button.spg-action-button--large {
 }
 
 .spg-question__erbox {
-  padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding: var(--sjs-base-unit, var(--base-unit, 8px)) calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) var(--sjs-base-unit, var(--base-unit, 8px)) calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
   background-color: var(--sjs-special-red-light, var(--red-light, rgba(230, 10, 62, 0.1)));
-  border-radius: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  line-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  border-radius: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  line-height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .spg-question__erbox > div {
   display: flex;
-  gap: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  gap: var(--sjs-base-unit, var(--base-unit, 8px));
 }
 
 .spg-question__erbox-icon {
   display: block;
   flex-grow: 0;
   flex-shrink: 0;
-  width: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  background-size: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  width: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  background-size: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   background-repeat: no-repeat;
   background-position: 0 0;
-  line-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  line-height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   white-space: normal;
   background-image: url("data:image/svg+xml,%3Csvg width='24' height='20' viewBox='0 0 24 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23.0336 15.4803L14.5736 1.45346C13.9936 0.487805 12.9936 0 12.0036 0C11.0136 0 10.0136 0.487805 9.43364 1.45346L0.973642 15.4803C-0.226358 17.4714 1.21364 20 3.54364 20H20.4536C22.7836 20 24.2236 17.4714 23.0236 15.4803H23.0336ZM21.3336 17.5112C21.2436 17.6605 20.9936 18.0189 20.4636 18.0189H3.54364C3.01364 18.0189 2.76364 17.6705 2.67364 17.5112C2.58364 17.3519 2.41364 16.9537 2.68364 16.5057L11.1436 2.47885C11.4036 2.04082 11.8336 1.99104 12.0036 1.99104C12.1736 1.99104 12.5936 2.04082 12.8636 2.47885L21.3136 16.5057C21.5836 16.9537 21.4136 17.3519 21.3236 17.5112H21.3336ZM13.0036 7.05824V12.0358C13.0036 12.5834 12.5536 13.0314 12.0036 13.0314C11.4536 13.0314 11.0036 12.5834 11.0036 12.0358V7.05824C11.0036 6.5107 11.4536 6.06272 12.0036 6.06272C12.5536 6.06272 13.0036 6.5107 13.0036 7.05824ZM13.0036 15.0224C13.0036 15.5699 12.5536 16.0179 12.0036 16.0179C11.4536 16.0179 11.0036 15.5699 11.0036 15.0224C11.0036 14.4749 11.4536 14.0269 12.0036 14.0269C12.5536 14.0269 13.0036 14.4749 13.0036 15.0224Z' fill='%23E60A3E'/%3E%3C/svg%3E");
 }
 
 .spg-question__erbox--location--bottom {
-  margin-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  margin-top: var(--sjs-base-unit, var(--base-unit, 8px));
 }
 
 .spg-input {
@@ -4485,12 +4509,12 @@ button.spg-action-button--large {
   background-color: var(--sjs-general-backcolor, var(--background, #fff));
   box-sizing: border-box;
   width: 100%;
-  height: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  height: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   border: none;
   box-shadow: inset 0 0 0 1px var(--sjs-border-inside, var(--border-inside, rgba(0, 0, 0, 0.16)));
-  padding: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   outline: none;
-  font-size: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  font-size: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   font-family: var(--font-family);
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
 }
@@ -4515,7 +4539,7 @@ button.spg-action-button--large {
 .spg-input[type=color] {
   padding-left: 0;
   padding-right: 0;
-  min-width: calc(8 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  min-width: calc(8 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .spg-input__edit-button {
@@ -4525,9 +4549,9 @@ button.spg-action-button--large {
   background: var(--sjs-general-backcolor, var(--background, #fff));
   border: none;
   outline: none;
-  width: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  height: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  width: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  height: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding: var(--sjs-base-unit, var(--base-unit, 8px));
   line-height: 0;
 }
 .spg-input__edit-button:hover {
@@ -4554,9 +4578,9 @@ button.spg-action-button--large {
   display: flex;
   justify-content: space-between;
   cursor: default;
-  padding: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   align-items: center;
-  gap: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  gap: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   box-shadow: 0 0 0 1px inset var(--sjs-border-inside, var(--border-inside, rgba(0, 0, 0, 0.16)));
 }
 
@@ -4567,7 +4591,7 @@ button.spg-action-button--large {
   height: auto;
 }
 .spg-input-container--multiline sv-ng-question-comment {
-  height: calc(9 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  height: calc(9 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .spg-input-container--multiline .spg-input-container__input {
   box-sizing: border-box;
@@ -4577,13 +4601,13 @@ button.spg-action-button--large {
 .spg-input-container__input {
   flex-grow: 1;
   width: 100%;
-  padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding: var(--sjs-base-unit, var(--base-unit, 8px)) calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
-  font-size: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  font-size: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   font-family: var(--font-family);
   outline: none;
   border: none;
-  line-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  line-height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   background-color: transparent;
 }
 
@@ -4593,15 +4617,15 @@ button.spg-action-button--large {
 
 .spg-input-container__buttons-container {
   display: flex;
-  gap: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  gap: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .spg-dropdown {
   border-radius: 0;
   display: flex;
-  padding-right: calc(5.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding-right: calc(5.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   line-height: normal;
-  background-position: right calc(1.625 * var(--sjs-base-unit, var(--base-unit, 8px))) top 50%, 0 0;
+  background-position: right calc(1.625 * (var(--sjs-base-unit, var(--base-unit, 8px)))) top 50%, 0 0;
 }
 
 .spg-dropdown__filter-string-input {
@@ -4613,11 +4637,11 @@ button.spg-action-button--large {
 }
 
 .spg-comment {
-  height: calc(9 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  height: calc(9 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   max-width: 100%;
-  min-width: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  min-height: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  line-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  min-width: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  min-height: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  line-height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .spg-panel__title {
@@ -4626,7 +4650,7 @@ button.spg-action-button--large {
   appearance: none;
   box-sizing: border-box;
   width: 100%;
-  padding: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   border: none;
   outline: none;
   color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
@@ -4635,7 +4659,7 @@ button.spg-action-button--large {
   background-color: var(--sjs-general-backcolor, var(--background, #fff));
   box-shadow: inset 0px -1px 0px var(--sjs-border-default, var(--border, #d6d6d6));
   font-family: var(--font-family);
-  font-size: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  font-size: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   font-weight: 400;
   margin: 0;
 }
@@ -4662,7 +4686,7 @@ button.spg-action-button--large {
   flex-direction: column;
   align-items: flex-start;
   width: 100%;
-  padding: 0 calc(4 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding: 0 calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   box-sizing: border-box;
   background: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
   box-shadow: inset 0px -1px 0px var(--sjs-border-default, var(--border, #d6d6d6));
@@ -4670,14 +4694,14 @@ button.spg-action-button--large {
 
 .spg-panel__content .spg-row {
   width: 100%;
-  margin-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  margin-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .spg-panel__content .spg-row--multiple {
-  margin-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  margin-top: var(--sjs-base-unit, var(--base-unit, 8px));
 }
 
 .sv-mobile-side-bar .spg-panel__content {
-  padding: 0 calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding: 0 calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .spg-question__nopadding .spg-panel__content {
@@ -4687,7 +4711,7 @@ button.spg-action-button--large {
 
 .spg-checkbox {
   cursor: pointer;
-  margin-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  margin-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .spg-checkbox--disabled {
@@ -4702,17 +4726,17 @@ button.spg-action-button--large {
 
 .spg-checkbox__caption {
   font-family: var(--font-family);
-  font-size: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  font-size: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
-  line-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  line-height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .spg-checkbox__rectangle {
   background: var(--sjs-general-backcolor, var(--background, #fff));
   border: 1px solid var(--sjs-border-default, var(--border, #d6d6d6));
   box-sizing: border-box;
-  width: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  width: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   flex-shrink: 0;
   padding: 1px 1px;
 }
@@ -4736,10 +4760,10 @@ button.spg-action-button--large {
 
 .spg-checkbox--checked .spg-checkbox__svg {
   display: block;
-  width: calc(2.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  height: calc(2.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  width: calc(2.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  height: calc(2.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   background-repeat: no-repeat;
-  background-size: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  background-size: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   fill: var(--sjs-primary-backcolor, var(--primary, #19b394));
 }
 
@@ -4769,11 +4793,11 @@ button.spg-action-button--large {
 .spg-selectbase__label {
   display: flex;
   align-items: flex-start;
-  gap: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  gap: var(--sjs-base-unit, var(--base-unit, 8px));
 }
 
 .spg-matrixdynamic__drag-element {
-  padding: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  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));
@@ -4781,13 +4805,13 @@ button.spg-action-button--large {
 .spg-matrixdynamic__drag-element:after {
   content: " ";
   display: block;
-  height: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  height: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .spg-drag-element__svg {
-  width: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  width: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding: var(--sjs-base-unit, var(--base-unit, 8px));
   display: block;
   opacity: 0.5;
 }
@@ -4804,7 +4828,7 @@ button.spg-action-button--large {
 .spg-matrixdynamic__drag-drop-ghost-position-bottom::after {
   content: "";
   width: 100%;
-  height: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  height: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   background-color: var(--sjs-secondary-backcolor, var(--secondary, #ff9814));
   position: absolute;
   left: 0;
@@ -4819,7 +4843,7 @@ button.spg-action-button--large {
 }
 
 .spg-matrixdynamic__placeholder {
-  padding: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px))) 0;
+  padding: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0;
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -4833,8 +4857,8 @@ button.spg-action-button--large {
 }
 
 .spg-matrixdynamic__placeholder-text {
-  font-size: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  line-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  font-size: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  line-height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
 }
 
@@ -4842,29 +4866,29 @@ button.spg-action-button--large {
   display: none;
   appearance: none;
   border: none;
-  margin-top: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  margin-top: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   background: transparent;
   color: var(--sjs-primary-backcolor, var(--primary, #19b394));
   font-family: var(--font-family);
-  font-size: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  font-size: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   font-weight: 600;
-  line-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  line-height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .spg-smiley-icon {
-  width: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  margin: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  width: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  margin: var(--sjs-base-unit, var(--base-unit, 8px));
   border-radius: 100px;
   border: 1px solid var(--sjs-general-forecolor, var(--foreground, #161616));
   display: flex;
   justify-content: center;
   align-items: center;
-  margin-right: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  margin-right: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .spg-smiley-icon svg {
-  width: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  height: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  width: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  height: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   fill: var(--sjs-general-forecolor, var(--foreground, #161616));
 }
 
@@ -4886,7 +4910,7 @@ button.spg-action-button--large {
   padding: 0;
 }
 .spg-table__cell .spg-checkbox {
-  margin: 0 calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  margin: 0 calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .spg-table__cell--detail-panel {
@@ -4902,12 +4926,12 @@ button.spg-action-button--large {
 
 .spg-table__cell:not(.spg-table__cell--detail-panel) .spg-input {
   appearance: none;
-  line-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  font-size: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  line-height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  font-size: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   box-shadow: none;
-  border-radius: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  border-radius: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   background-color: transparent;
-  padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding: var(--sjs-base-unit, var(--base-unit, 8px));
   height: auto;
 }
 .spg-table__cell:not(.spg-table__cell--detail-panel) .spg-input[type=color] {
@@ -4923,19 +4947,19 @@ button.spg-action-button--large {
 
 .spg-table__cell:not(.spg-table__cell--detail-panel) .spg-dropdown {
   width: max-content;
-  padding-right: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  background-size: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  background-position: right calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px))) top 50%, 0 0;
+  padding-right: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  background-size: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  background-position: right calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) top 50%, 0 0;
   background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 15L17 10H7L12 15Z' fill='%2390909080'/%3E%3C/svg%3E%0A");
   background-repeat: no-repeat;
 }
 
 .spg-table__cell:not(.spg-table__cell--detail-panel):first-of-type .spg-text {
-  padding-left: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding-left: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .spg-table__cell--actions:first-of-type {
-  width: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  width: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .spg-table__cell--actions:last-of-type .spg-action-bar {
@@ -4944,15 +4968,15 @@ button.spg-action-button--large {
 
 .spg-table__cell--actions > .spg-matrixdynamic__drag-element {
   display: inline-block;
-  margin-top: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  margin-top: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   cursor: move;
 }
 
 .spg-table__cell--header {
-  font-size: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  font-size: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   font-weight: normal;
   color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
-  line-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  line-height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   background: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
   text-align: left;
   white-space: nowrap;
@@ -4968,14 +4992,14 @@ button.spg-action-button--large {
 }
 
 .spg-table__question-wrapper {
-  padding: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px))) 0;
+  padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0;
 }
 
 .spg-question-group .spg-row {
   margin-top: 0;
 }
 .spg-question-group .spg-row:not(:first-of-type) {
-  margin-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  margin-top: var(--sjs-base-unit, var(--base-unit, 8px));
 }
 
 .spg-color-editor__color-input {
@@ -4993,7 +5017,7 @@ button.spg-action-button--large {
 
 .spg-color-editor__color-item {
   display: flex;
-  gap: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  gap: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .spg-color-editor__color-item .spg-color-editor__color-swatch {
   margin-left: 0;
@@ -5004,16 +5028,16 @@ button.spg-action-button--large {
   flex-shrink: 0;
   flex-grow: 0;
   border-radius: 3px;
-  width: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  width: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   box-sizing: border-box;
   border: 1px solid rgba(0, 0, 0, 0.16);
-  margin-left: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  margin-left: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .spg-color-editor__color-swatch .sv-svg-icon {
   position: absolute;
-  width: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  height: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  width: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
@@ -5029,7 +5053,7 @@ button.spg-action-button--large {
 }
 
 .spg-color-editor .spg-input__edit-button + * {
-  margin-inline-end: calc(-0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  margin-inline-end: calc(-0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .spg-file-edit__choose-button {
@@ -5043,10 +5067,10 @@ button.spg-action-button--large {
 .spg-theme-builder-root .spg-paneldynamic__separator {
   border: none;
   margin: 0;
-  height: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .spg-theme-builder-root .spg-panel__footer {
-  margin: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) auto 0;
+  margin: var(--sjs-base-unit, var(--base-unit, 8px)) auto 0;
 }
 .spg-theme-builder-root .spg-paneldynamic__add-btn {
   margin: 0 auto;
@@ -5058,14 +5082,16 @@ button.spg-action-button--large {
   min-width: auto;
 }
 .spg-theme-builder-root .spg-row--multiple > div {
-  flex: 1 1 calc(50% - var(--sjs-base-unit, var(--base-unit, 8px)) * 0.5);
+  flex-grow: 1;
+  flex-shrink: 1;
+  flex-basis: calc(50% - var(--sjs-base-unit, var(--base-unit, 8px)) * 0.5);
   min-width: auto;
 }
 .spg-theme-builder-root .spg-row--multiple > div input {
   min-width: 0;
 }
 .spg-theme-builder-root .spg-row--multiple > div .spg-question--location--left {
-  height: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  height: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   box-sizing: border-box;
 }
 .spg-theme-builder-root .spg-row--multiple > div .spg-question--location--left .spg-input {
@@ -5085,19 +5111,19 @@ button.spg-action-button--large {
 }
 .spg-theme-builder-root .spg-panel__content .spg-panel__content {
   padding: 0;
-  padding-bottom: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding-bottom: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   box-shadow: none;
 }
 .spg-theme-builder-root .spg-panel__content .spg-panel__content .spg-panel__title {
   background-color: transparent;
   box-shadow: none;
-  padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) 0;
+  padding: var(--sjs-base-unit, var(--base-unit, 8px)) 0;
 }
 .spg-theme-builder-root .spg-panel__content .spg-panel__content::after {
   content: " ";
   display: block;
   position: relative;
-  left: calc(-4 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  left: calc(-4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   top: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
   width: calc(8 * var(--sjs-base-unit, var(--base-unit, 8px)) + 100%);
   height: 1px;
@@ -5113,7 +5139,7 @@ button.spg-action-button--large {
   content: none;
 }
 .spg-theme-builder-root .spg-panel__content .spg-panel__content .spg-panel__content .spg-row {
-  margin-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  margin-top: var(--sjs-base-unit, var(--base-unit, 8px));
 }
 .spg-theme-builder-root .spg-panel__content .spg-panel__content .spg-panel__content .spg-row:first-of-type {
   margin-top: 0;
@@ -5125,6 +5151,11 @@ button.spg-action-button--large {
   content: none;
 }
 
+.sv-mobile-side-bar .spg-theme-builder-root .spg-panel__content .spg-panel__content::after {
+  width: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)) + 100%);
+  left: calc(-2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+}
+
 .spg-boolean-wrapper--overriding.spg-boolean-wrapper--overriding {
   min-width: 0;
   flex: 0 0 max-content;
@@ -5151,7 +5182,7 @@ button.spg-action-button--large {
 }
 
 .sv-popup--modal {
-  padding: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .sv-popup--modal.sv-property-editor .sv-popup__container .sv-popup_shadow {
   background-color: transparent;
@@ -5168,7 +5199,7 @@ button.spg-action-button--large {
 }
 .sv-popup--modal .sd-body,
 .sv-popup--modal .sl-body {
-  min-width: calc(78 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  min-width: calc(78 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .sv-popup.sv-property-editor .sd-root-modern {
@@ -5176,8 +5207,8 @@ button.spg-action-button--large {
 }
 
 .svc-object-selector .sv-popup__container {
-  margin-left: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  margin-right: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  margin-left: var(--sjs-base-unit, var(--base-unit, 8px));
+  margin-right: var(--sjs-base-unit, var(--base-unit, 8px));
 }
 
 .svc-object-selector__content {
@@ -5189,8 +5220,8 @@ button.spg-action-button--large {
 }
 
 .spg-title .spg-action-bar {
-  margin-top: calc(-1 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  margin-bottom: calc(-1 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  margin-top: calc(-1 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  margin-bottom: calc(-1 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   margin-right: 1px;
 }
 
@@ -5199,7 +5230,7 @@ button.spg-action-button--large {
 }
 
 .spg-body--empty {
-  margin: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  margin: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .svc-text {
   font-family: var(--font-family);
@@ -5209,13 +5240,13 @@ button.spg-action-button--large {
 }
 
 .svc-text--normal {
-  font-size: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  line-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  font-size: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  line-height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .svc-text--small {
-  font-size: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  line-height: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  font-size: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  line-height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .svc-text--bold {
@@ -5247,15 +5278,15 @@ button.spg-action-button--large {
 }
 
 .sv-action-bar--default-size-mode .sv-action-bar-separator {
-  height: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  height: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .sv-action-bar--small-size-mode .sv-action-bar-separator {
-  height: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  height: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .svc-creator--mobile .sv-action-bar-separator {
-  height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .sv-action-bar--small-size-mode .sv-action-bar-item {
@@ -5274,11 +5305,17 @@ button.spg-action-button--large {
   display: flex;
 }
 .svc-top-bar .svc-toolbar-wrapper .sv-action-bar {
-  padding: 0 calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding: 0 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 {
+  display: inline-block;
+}
 .svc-top-bar .svc-toolbar-wrapper .sv-action .sv-action-bar-item {
-  margin: 0 calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  margin: 0 var(--sjs-base-unit, var(--base-unit, 8px));
 }
 
 .svc-footer-bar .svc-toolbar-wrapper {
@@ -5286,7 +5323,7 @@ button.spg-action-button--large {
   left: 0;
   right: 0;
   bottom: 0;
-  height: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  height: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .svc-footer-bar .svc-toolbar-wrapper .sv-action-bar {
   justify-content: center;