survey-core 1.9.110 → 1.9.112

package/modern.css

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.9.110
+ * surveyjs - Survey JavaScript library v1.9.112
  * Copyright (c) 2015-2023 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -96,7 +96,7 @@ sv-popup {
 
 .sv-popup__container {
   box-shadow: var(--sjs-shadow-large, 0px 8px 16px 0px rgba(0, 0, 0, 0.1));
-  border-radius: calc(1 * var(--sjs-corner-radius, 4px));
+  border-radius: var(--sjs-corner-radius, 4px);
   position: absolute;
   padding: 0;
 }
@@ -104,12 +104,12 @@ sv-popup {
 .sv-popup__shadow {
   width: 100%;
   height: 100%;
-  border-radius: calc(1 * var(--sjs-corner-radius, 4px));
+  border-radius: var(--sjs-corner-radius, 4px);
 }
 
 .sv-popup__body-content {
   background-color: var(--sjs-general-backcolor, var(--background, #fff));
-  border-radius: calc(1 * var(--sjs-corner-radius, 4px));
+  border-radius: var(--sjs-corner-radius, 4px);
   width: 100%;
   height: 100%;
   box-sizing: border-box;
@@ -124,14 +124,43 @@ sv-popup {
   align-items: center;
   justify-content: center;
   background-color: var(--background-semitransparent, rgba(144, 144, 144, 0.5));
-  padding: calc(11 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(15 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding: calc(11 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(15 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   box-sizing: border-box;
 }
 .sv-popup.sv-popup--modal .sv-popup__body-content {
-  padding: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   height: auto;
 }
 
+.sv-popup--confirm-delete .sv-popup__shadow {
+  height: initial;
+}
+.sv-popup--confirm-delete .sv-popup__container {
+  border-radius: var(--sjs-base-unit, var(--base-unit, 8px));
+}
+.sv-popup--confirm-delete .sv-popup__body-content {
+  border-radius: var(--sjs-base-unit, var(--base-unit, 8px));
+}
+.sv-popup--confirm-delete .sv-popup__body-header {
+  color: var(--sjs-font-editorfont-color, var(--sjs-general-forecolor, rgba(0, 0, 0, 0.91)));
+  margin-bottom: 0;
+  /* UI/Default */
+  font-family: var(--font-family);
+  font-size: var(--sjs-font-size, 16px);
+  font-style: normal;
+  font-weight: 400;
+  line-height: calc(1.5 * (var(--sjs-font-size, 16px))); /* 150% */
+}
+.sv-popup--confirm-delete .sv-popup__scrolling-content {
+  display: none;
+}
+.sv-popup--confirm-delete .sv-popup__body-footer {
+  padding-bottom: 0;
+}
+.sv-popup--confirm-delete .sv-popup__body-footer .sv-action-bar {
+  gap: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+
 .sv-popup.sv-popup--modal > .sv-popup__container {
   position: static;
 }
@@ -146,23 +175,23 @@ sv-popup {
   max-height: calc(var(--sv-popup-overlay-height, 100vh) - 1 * var(--sjs-base-unit, var(--base-unit, 8px)));
   height: calc(var(--sv-popup-overlay-height, 100vh) - 1 * var(--sjs-base-unit, var(--base-unit, 8px)));
   width: 100%;
-  padding-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   border: unset;
 }
 .sv-popup--overlay.sv-popup--overlay .sv-popup__body-content {
   max-height: var(--sv-popup-overlay-height, 100vh);
   max-width: 100vw;
-  border-radius: calc(4 * var(--sjs-corner-radius, 4px)) calc(4 * var(--sjs-corner-radius, 4px)) 0px 0px;
+  border-radius: calc(4 * (var(--sjs-corner-radius, 4px))) calc(4 * (var(--sjs-corner-radius, 4px))) 0px 0px;
   background: var(--sjs-general-backcolor, var(--background, #fff));
   box-shadow: var(--sjs-shadow-large, 0px 8px 16px 0px rgba(0, 0, 0, 0.1));
-  padding: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   height: calc(100% - 1 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 .sv-popup--overlay.sv-popup--overlay .sv-popup__scrolling-content {
   height: calc(100% - 10 * var(--base-unit, 8px));
 }
 .sv-popup--overlay.sv-popup--overlay .sv-popup__body-footer {
-  margin-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  margin-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .sv-popup--overlay.sv-popup--overlay .sv-popup__body-footer .sv-action-bar {
   width: 100%;
@@ -211,22 +240,22 @@ sv-popup {
 }
 
 .sv-popup--show-pointer.sv-popup--top .sv-popup__pointer {
-  transform: translate(calc(-1 * var(--sjs-base-unit, var(--base-unit, 8px)))) rotate(180deg);
+  transform: translate(calc(-1 * (var(--sjs-base-unit, var(--base-unit, 8px))))) rotate(180deg);
 }
 
 .sv-popup--show-pointer.sv-popup--bottom .sv-popup__pointer {
-  transform: translate(calc(-1 * var(--sjs-base-unit, var(--base-unit, 8px))), calc(-1 * var(--sjs-base-unit, var(--base-unit, 8px))));
+  transform: translate(calc(-1 * (var(--sjs-base-unit, var(--base-unit, 8px)))), calc(-1 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
 }
 
 .sv-popup--show-pointer.sv-popup--right .sv-popup__container {
-  transform: translate(calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))));
+  transform: translate(var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 .sv-popup--show-pointer.sv-popup--right .sv-popup__container .sv-popup__pointer {
   transform: translate(-12px, -4px) rotate(-90deg);
 }
 
 .sv-popup--show-pointer.sv-popup--left .sv-popup__container {
-  transform: translate(calc(-1 * var(--sjs-base-unit, var(--base-unit, 8px))));
+  transform: translate(calc(-1 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
 }
 .sv-popup--show-pointer.sv-popup--left .sv-popup__container .sv-popup__pointer {
   transform: translate(-4px, -4px) rotate(90deg);
@@ -241,42 +270,42 @@ sv-popup {
   display: block;
   width: 0;
   height: 0;
-  border-left: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) solid transparent;
-  border-right: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) solid transparent;
-  border-bottom: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) solid var(--sjs-general-backcolor, var(--background, #fff));
+  border-left: var(--sjs-base-unit, var(--base-unit, 8px)) solid transparent;
+  border-right: var(--sjs-base-unit, var(--base-unit, 8px)) solid transparent;
+  border-bottom: var(--sjs-base-unit, var(--base-unit, 8px)) solid var(--sjs-general-backcolor, var(--background, #fff));
   align-self: center;
 }
 
 .sv-popup__body-header {
   font-family: Open Sans;
-  font-size: calc(1.5 * var(--sjs-font-size, 16px));
-  line-height: calc(2 * var(--sjs-font-size, 16px));
+  font-size: calc(1.5 * (var(--sjs-font-size, 16px)));
+  line-height: calc(2 * (var(--sjs-font-size, 16px)));
   font-style: normal;
   font-weight: 700;
-  margin-bottom: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  margin-bottom: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
 }
 
 .sv-popup__body-footer {
   display: flex;
-  margin-top: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  margin-top: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .sv-popup__body-footer .sv-action-bar {
-  gap: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  gap: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .sv-popup__button {
-  margin: calc(0.25 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  margin: calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .sv-popup--modal .sv-list__filter,
 .sv-popup--overlay .sv-list__filter {
-  padding-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding-top: var(--sjs-base-unit, var(--base-unit, 8px));
 }
 .sv-popup--modal .sv-list__filter-icon,
 .sv-popup--overlay .sv-list__filter-icon {
-  top: calc(2.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  top: calc(2.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .sv-dropdown-popup.sv-popup--overlay {
@@ -295,8 +324,8 @@ sv-popup {
   color: var(--sjs-primary-backcolor, var(--primary, #19b394));
   border: none;
   box-shadow: 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))));
   margin: 0;
 }
 .sv-dropdown-popup.sv-popup--overlay .sv-popup__container {
@@ -310,40 +339,40 @@ sv-popup {
 .sv-dropdown-popup.sv-popup--overlay .sv-popup__body-footer {
   background-color: var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9));
   margin-top: 0;
-  padding-top: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  padding-bottom: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding-top: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding-bottom: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   border-top: 1px solid var(--sjs-border-light, var(--border-light, #eaeaea));
 }
 .sv-dropdown-popup.sv-popup--overlay .sv-popup__scrolling-content {
   height: calc(100% - 6 * var(--base-unit, 8px));
 }
 .sv-dropdown-popup.sv-popup--overlay .sv-list__filter-icon .sv-svg-icon {
-  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))));
 }
 .sv-dropdown-popup.sv-popup--overlay .sv-list__container {
   padding: 0;
 }
 .sv-dropdown-popup.sv-popup--overlay .sv-list {
   flex-grow: 1;
-  padding: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .sv-dropdown-popup.sv-popup--overlay .sv-list__filter {
   display: flex;
   align-items: center;
-  padding: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) 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)))) var(--sjs-base-unit, var(--base-unit, 8px)) calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .sv-dropdown-popup.sv-popup--overlay .sv-list__filter-icon {
   position: static;
-  top: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  height: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  top: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .sv-dropdown-popup.sv-popup--overlay .sv-list__empty-container {
   display: flex;
   flex-direction: column;
   justify-content: center;
   flex-grow: 1;
-  padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding: var(--sjs-base-unit, var(--base-unit, 8px)) calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   background-color: var(--sjs-general-backcolor, var(--background, #fff));
 }
 .sv-dropdown-popup.sv-popup--overlay .sv-popup__button:disabled {
@@ -352,27 +381,27 @@ sv-popup {
   opacity: 0.25;
 }
 .sv-dropdown-popup.sv-popup--overlay .sv-list__filter-clear-button {
-  height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  width: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  padding: calc(0.5 * 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(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   appearance: none;
   border: none;
   border-radius: 100%;
   background-color: transparent;
 }
 .sv-dropdown-popup.sv-popup--overlay .sv-list__filter-clear-button svg {
-  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))));
+  width: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .sv-dropdown-popup.sv-popup--overlay .sv-list__filter-clear-button svg use {
   fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
 }
 .sv-dropdown-popup.sv-popup--overlay .sv-list__input {
   color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
-  font-size: calc(1 * var(--sjs-font-size, 16px));
-  line-height: calc(1.5 * var(--sjs-font-size, 16px));
+  font-size: var(--sjs-font-size, 16px);
+  line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
   font-family: var(--font-family);
-  padding: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px))) 0 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)))) 0 calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) var(--sjs-base-unit, var(--base-unit, 8px));
 }
 .sv-dropdown-popup.sv-popup--overlay .sv-list__item:hover .sv-list__item-body,
 .sv-dropdown-popup.sv-popup--overlay .sv-list__item:focus .sv-list__item-body,
@@ -403,12 +432,12 @@ sv-popup {
   left: 50%;
   top: 50%;
   max-height: var(--sv-popup-overlay-max-height);
-  min-height: min(var(--sv-popup-overlay-max-height), 31 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  min-height: min(var(--sv-popup-overlay-max-height), 31 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   height: auto;
   width: auto;
-  min-width: min(40 * var(--sjs-base-unit, var(--base-unit, 8px)), var(--sv-popup-overlay-max-width));
+  min-width: min(40 * (var(--sjs-base-unit, var(--base-unit, 8px))), var(--sv-popup-overlay-max-width));
   max-width: var(--sv-popup-overlay-max-width);
-  border-radius: calc(1 * var(--sjs-corner-radius, 4px));
+  border-radius: var(--sjs-corner-radius, 4px);
   overflow: hidden;
   margin: 0;
 }
@@ -435,7 +464,7 @@ sv-popup {
   display: inline-block;
   vertical-align: top;
   margin-top: 22px;
-  font-size: calc(0.875 * var(--sjs-font-size, 16px));
+  font-size: calc(0.875 * (var(--sjs-font-size, 16px)));
   width: 16px;
   height: 16px;
   cursor: pointer;
@@ -446,7 +475,7 @@ sv-popup {
   display: inline-block;
   vertical-align: top;
   margin-top: 22px;
-  font-size: calc(0.875 * var(--sjs-font-size, 16px));
+  font-size: calc(0.875 * (var(--sjs-font-size, 16px)));
   width: 16px;
   height: 16px;
   cursor: pointer;
@@ -474,7 +503,7 @@ sv-popup {
 
 .sv_progress-buttons__list li {
   width: 138px;
-  font-size: calc(0.875 * var(--sjs-font-size, 16px));
+  font-size: calc(0.875 * (var(--sjs-font-size, 16px)));
   font-family: var(--font-family, var(--font-family));
   position: relative;
   text-align: center;
@@ -528,12 +557,12 @@ sv-popup {
 }
 
 .sv_progress-toc {
-  padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding: var(--sjs-base-unit, var(--base-unit, 8px));
   max-width: 336px;
   height: 100%;
   background: #FFFFFF;
   box-sizing: border-box;
-  min-width: calc(32 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  min-width: calc(32 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .sv_progress-toc .sv-list__item.sv-list__item--selected .sv-list__item-body {
   background: rgba(25, 179, 148, 0.1);
@@ -544,11 +573,11 @@ sv-popup {
   white-space: break-spaces;
 }
 .sv_progress-toc .sv-list__item-body {
-  padding-inline-start: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  padding-inline-end: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  border-radius: calc(1 * var(--sjs-corner-radius, 4px));
-  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(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  border-radius: var(--sjs-corner-radius, 4px);
+  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))));
 }
 
 .sv_progress-toc--left {
@@ -561,18 +590,18 @@ sv-popup {
 
 .sv_progress-toc--mobile {
   position: fixed;
-  top: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  right: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  top: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  right: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   width: auto;
   min-width: auto;
   height: auto;
   background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
   z-index: 15;
-  border-radius: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  border-radius: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .sv_progress-toc--mobile > div {
-  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))));
 }
 .sv_progress-toc--mobile:hover {
   background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
@@ -630,7 +659,7 @@ sv-popup {
 
 .sv-body {
   width: 100%;
-  padding-bottom: calc(10 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding-bottom: calc(10 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .sv-body__timer,
@@ -656,7 +685,7 @@ sv-popup {
 }
 
 .sv-body__timer {
-  padding: 0 calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding: 0 var(--sjs-base-unit, var(--base-unit, 8px));
   box-sizing: border-box;
 }
 
@@ -1847,6 +1876,10 @@ sv-popup {
   justify-content: space-between;
 }
 
+.sv-dropdown input[readonly] {
+  pointer-events: none;
+}
+
 .sv-dropdown:focus,
 .sv-dropdown:focus-within {
   background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 10 10' style='enable-background:new 0 0 10 10;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%231AB394;%7D%0A%3C/style%3E%3Cpolygon class='st0' points='2,2 0,4 5,9 10,4 8,2 5,5 '/%3E%3C/svg%3E ");
@@ -2478,11 +2511,11 @@ select.sv-dropdown {
 }
 
 .sv-action-bar--default-size-mode .sv-action-bar-separator {
-  margin: 0 calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  margin: 0 var(--sjs-base-unit, var(--base-unit, 8px));
 }
 
 .sv-action-bar--small-size-mode .sv-action-bar-separator {
-  margin: 0 calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  margin: 0 calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .sv-action-bar-item {
@@ -2490,10 +2523,10 @@ select.sv-dropdown {
   -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;
-  border-radius: calc(0.5 * var(--sjs-corner-radius, 4px));
+  border-radius: calc(0.5 * (var(--sjs-corner-radius, 4px)));
   background-color: transparent;
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
   cursor: pointer;
@@ -2507,17 +2540,17 @@ button.sv-action-bar-item {
 }
 
 .sv-action-bar--default-size-mode .sv-action-bar-item {
-  height: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  font-size: calc(1 * var(--sjs-font-size, 16px));
-  line-height: calc(1.5 * var(--sjs-font-size, 16px));
-  margin: 0 calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  height: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  font-size: var(--sjs-font-size, 16px);
+  line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
+  margin: 0 var(--sjs-base-unit, var(--base-unit, 8px));
 }
 
 .sv-action-bar--small-size-mode .sv-action-bar-item {
-  height: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  font-size: calc(0.75 * var(--sjs-font-size, 16px));
-  line-height: calc(1 * var(--sjs-font-size, 16px));
-  margin: 0 calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  height: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  font-size: calc(0.75 * (var(--sjs-font-size, 16px)));
+  line-height: var(--sjs-font-size, 16px);
+  margin: 0 calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .sv-action:first-of-type .sv-action-bar-item {
@@ -2529,11 +2562,11 @@ button.sv-action-bar-item {
 }
 
 .sv-action-bar--default-size-mode .sv-action-bar-item__title--with-icon {
-  margin-inline-start: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  margin-inline-start: var(--sjs-base-unit, var(--base-unit, 8px));
 }
 
 .sv-action-bar--small-size-mode .sv-action-bar-item__title--with-icon {
-  margin-inline-start: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  margin-inline-start: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .sv-action-bar-item__icon svg {
@@ -2581,15 +2614,15 @@ button.sv-action-bar-item {
   -moz-appearance: none;
   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: calc(0.5 * var(--sjs-corner-radius, 4px));
+  border-radius: calc(0.5 * (var(--sjs-corner-radius, 4px)));
   background-color: transparent;
   cursor: pointer;
-  line-height: calc(1.5 * var(--sjs-font-size, 16px));
-  font-size: calc(1 * var(--sjs-font-size, 16px));
+  line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
+  font-size: var(--sjs-font-size, 16px);
   font-family: var(--font-family, var(--font-family));
 }
 
@@ -2648,35 +2681,35 @@ button.sv-action-bar-item {
 }
 
 .sv-dragged-element-shortcut {
-  height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  min-width: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  border-radius: calc(4.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  min-width: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  border-radius: calc(4.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   background-color: var(--sjs-general-backcolor, var(--background, #fff));
-  padding: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   cursor: grabbing;
   position: absolute;
   z-index: 10000;
   box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1);
   font-family: var(--font-family, var(--font-family));
-  font-size: calc(1 * var(--sjs-font-size, 16px));
-  padding-left: calc(2.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  line-height: calc(1.5 * var(--sjs-font-size, 16px));
+  font-size: var(--sjs-font-size, 16px);
+  padding-left: calc(2.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
 }
 
 .sv-matrixdynamic__drag-icon {
-  padding-top: calc(1.75 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding-top: calc(1.75 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .sv-matrixdynamic__drag-icon:after {
   content: " ";
   display: block;
-  height: calc(0.75 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  width: calc(2.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  height: calc(0.75 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  width: calc(2.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   border: 1px solid #e7e7e7;
   box-sizing: border-box;
-  border-radius: calc(1.25 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  border-radius: calc(1.25 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   cursor: move;
-  margin-top: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  margin-top: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .sv-matrix-row--drag-drop-ghost-mod td {
@@ -2708,7 +2741,7 @@ sv-popup {
 
 .sv-popup__container {
   box-shadow: var(--sjs-shadow-large, 0px 8px 16px 0px rgba(0, 0, 0, 0.1));
-  border-radius: calc(1 * var(--sjs-corner-radius, 4px));
+  border-radius: var(--sjs-corner-radius, 4px);
   position: absolute;
   padding: 0;
 }
@@ -2716,12 +2749,12 @@ sv-popup {
 .sv-popup__shadow {
   width: 100%;
   height: 100%;
-  border-radius: calc(1 * var(--sjs-corner-radius, 4px));
+  border-radius: var(--sjs-corner-radius, 4px);
 }
 
 .sv-popup__body-content {
   background-color: var(--sjs-general-backcolor, var(--background, #fff));
-  border-radius: calc(1 * var(--sjs-corner-radius, 4px));
+  border-radius: var(--sjs-corner-radius, 4px);
   width: 100%;
   height: 100%;
   box-sizing: border-box;
@@ -2736,14 +2769,43 @@ sv-popup {
   align-items: center;
   justify-content: center;
   background-color: var(--background-semitransparent, rgba(144, 144, 144, 0.5));
-  padding: calc(11 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(15 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding: calc(11 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(15 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   box-sizing: border-box;
 }
 .sv-popup.sv-popup--modal .sv-popup__body-content {
-  padding: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   height: auto;
 }
 
+.sv-popup--confirm-delete .sv-popup__shadow {
+  height: initial;
+}
+.sv-popup--confirm-delete .sv-popup__container {
+  border-radius: var(--sjs-base-unit, var(--base-unit, 8px));
+}
+.sv-popup--confirm-delete .sv-popup__body-content {
+  border-radius: var(--sjs-base-unit, var(--base-unit, 8px));
+}
+.sv-popup--confirm-delete .sv-popup__body-header {
+  color: var(--sjs-font-editorfont-color, var(--sjs-general-forecolor, rgba(0, 0, 0, 0.91)));
+  margin-bottom: 0;
+  /* UI/Default */
+  font-family: var(--font-family);
+  font-size: var(--sjs-font-size, 16px);
+  font-style: normal;
+  font-weight: 400;
+  line-height: calc(1.5 * (var(--sjs-font-size, 16px))); /* 150% */
+}
+.sv-popup--confirm-delete .sv-popup__scrolling-content {
+  display: none;
+}
+.sv-popup--confirm-delete .sv-popup__body-footer {
+  padding-bottom: 0;
+}
+.sv-popup--confirm-delete .sv-popup__body-footer .sv-action-bar {
+  gap: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+
 .sv-popup.sv-popup--modal > .sv-popup__container {
   position: static;
 }
@@ -2758,23 +2820,23 @@ sv-popup {
   max-height: calc(var(--sv-popup-overlay-height, 100vh) - 1 * var(--sjs-base-unit, var(--base-unit, 8px)));
   height: calc(var(--sv-popup-overlay-height, 100vh) - 1 * var(--sjs-base-unit, var(--base-unit, 8px)));
   width: 100%;
-  padding-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   border: unset;
 }
 .sv-popup--overlay.sv-popup--overlay .sv-popup__body-content {
   max-height: var(--sv-popup-overlay-height, 100vh);
   max-width: 100vw;
-  border-radius: calc(4 * var(--sjs-corner-radius, 4px)) calc(4 * var(--sjs-corner-radius, 4px)) 0px 0px;
+  border-radius: calc(4 * (var(--sjs-corner-radius, 4px))) calc(4 * (var(--sjs-corner-radius, 4px))) 0px 0px;
   background: var(--sjs-general-backcolor, var(--background, #fff));
   box-shadow: var(--sjs-shadow-large, 0px 8px 16px 0px rgba(0, 0, 0, 0.1));
-  padding: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   height: calc(100% - 1 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 .sv-popup--overlay.sv-popup--overlay .sv-popup__scrolling-content {
   height: calc(100% - 10 * var(--base-unit, 8px));
 }
 .sv-popup--overlay.sv-popup--overlay .sv-popup__body-footer {
-  margin-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  margin-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .sv-popup--overlay.sv-popup--overlay .sv-popup__body-footer .sv-action-bar {
   width: 100%;
@@ -2823,22 +2885,22 @@ sv-popup {
 }
 
 .sv-popup--show-pointer.sv-popup--top .sv-popup__pointer {
-  transform: translate(calc(-1 * var(--sjs-base-unit, var(--base-unit, 8px)))) rotate(180deg);
+  transform: translate(calc(-1 * (var(--sjs-base-unit, var(--base-unit, 8px))))) rotate(180deg);
 }
 
 .sv-popup--show-pointer.sv-popup--bottom .sv-popup__pointer {
-  transform: translate(calc(-1 * var(--sjs-base-unit, var(--base-unit, 8px))), calc(-1 * var(--sjs-base-unit, var(--base-unit, 8px))));
+  transform: translate(calc(-1 * (var(--sjs-base-unit, var(--base-unit, 8px)))), calc(-1 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
 }
 
 .sv-popup--show-pointer.sv-popup--right .sv-popup__container {
-  transform: translate(calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))));
+  transform: translate(var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 .sv-popup--show-pointer.sv-popup--right .sv-popup__container .sv-popup__pointer {
   transform: translate(-12px, -4px) rotate(-90deg);
 }
 
 .sv-popup--show-pointer.sv-popup--left .sv-popup__container {
-  transform: translate(calc(-1 * var(--sjs-base-unit, var(--base-unit, 8px))));
+  transform: translate(calc(-1 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
 }
 .sv-popup--show-pointer.sv-popup--left .sv-popup__container .sv-popup__pointer {
   transform: translate(-4px, -4px) rotate(90deg);
@@ -2853,42 +2915,42 @@ sv-popup {
   display: block;
   width: 0;
   height: 0;
-  border-left: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) solid transparent;
-  border-right: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) solid transparent;
-  border-bottom: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) solid var(--sjs-general-backcolor, var(--background, #fff));
+  border-left: var(--sjs-base-unit, var(--base-unit, 8px)) solid transparent;
+  border-right: var(--sjs-base-unit, var(--base-unit, 8px)) solid transparent;
+  border-bottom: var(--sjs-base-unit, var(--base-unit, 8px)) solid var(--sjs-general-backcolor, var(--background, #fff));
   align-self: center;
 }
 
 .sv-popup__body-header {
   font-family: Open Sans;
-  font-size: calc(1.5 * var(--sjs-font-size, 16px));
-  line-height: calc(2 * var(--sjs-font-size, 16px));
+  font-size: calc(1.5 * (var(--sjs-font-size, 16px)));
+  line-height: calc(2 * (var(--sjs-font-size, 16px)));
   font-style: normal;
   font-weight: 700;
-  margin-bottom: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  margin-bottom: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
 }
 
 .sv-popup__body-footer {
   display: flex;
-  margin-top: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  margin-top: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .sv-popup__body-footer .sv-action-bar {
-  gap: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  gap: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .sv-popup__button {
-  margin: calc(0.25 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  margin: calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .sv-popup--modal .sv-list__filter,
 .sv-popup--overlay .sv-list__filter {
-  padding-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding-top: var(--sjs-base-unit, var(--base-unit, 8px));
 }
 .sv-popup--modal .sv-list__filter-icon,
 .sv-popup--overlay .sv-list__filter-icon {
-  top: calc(2.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  top: calc(2.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .sv-dropdown-popup.sv-popup--overlay {
@@ -2907,8 +2969,8 @@ sv-popup {
   color: var(--sjs-primary-backcolor, var(--primary, #19b394));
   border: none;
   box-shadow: 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))));
   margin: 0;
 }
 .sv-dropdown-popup.sv-popup--overlay .sv-popup__container {
@@ -2922,40 +2984,40 @@ sv-popup {
 .sv-dropdown-popup.sv-popup--overlay .sv-popup__body-footer {
   background-color: var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9));
   margin-top: 0;
-  padding-top: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  padding-bottom: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding-top: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding-bottom: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   border-top: 1px solid var(--sjs-border-light, var(--border-light, #eaeaea));
 }
 .sv-dropdown-popup.sv-popup--overlay .sv-popup__scrolling-content {
   height: calc(100% - 6 * var(--base-unit, 8px));
 }
 .sv-dropdown-popup.sv-popup--overlay .sv-list__filter-icon .sv-svg-icon {
-  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))));
 }
 .sv-dropdown-popup.sv-popup--overlay .sv-list__container {
   padding: 0;
 }
 .sv-dropdown-popup.sv-popup--overlay .sv-list {
   flex-grow: 1;
-  padding: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .sv-dropdown-popup.sv-popup--overlay .sv-list__filter {
   display: flex;
   align-items: center;
-  padding: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) 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)))) var(--sjs-base-unit, var(--base-unit, 8px)) calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .sv-dropdown-popup.sv-popup--overlay .sv-list__filter-icon {
   position: static;
-  top: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  height: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  top: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .sv-dropdown-popup.sv-popup--overlay .sv-list__empty-container {
   display: flex;
   flex-direction: column;
   justify-content: center;
   flex-grow: 1;
-  padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding: var(--sjs-base-unit, var(--base-unit, 8px)) calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   background-color: var(--sjs-general-backcolor, var(--background, #fff));
 }
 .sv-dropdown-popup.sv-popup--overlay .sv-popup__button:disabled {
@@ -2964,27 +3026,27 @@ sv-popup {
   opacity: 0.25;
 }
 .sv-dropdown-popup.sv-popup--overlay .sv-list__filter-clear-button {
-  height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  width: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  padding: calc(0.5 * 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(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   appearance: none;
   border: none;
   border-radius: 100%;
   background-color: transparent;
 }
 .sv-dropdown-popup.sv-popup--overlay .sv-list__filter-clear-button svg {
-  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))));
+  width: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .sv-dropdown-popup.sv-popup--overlay .sv-list__filter-clear-button svg use {
   fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
 }
 .sv-dropdown-popup.sv-popup--overlay .sv-list__input {
   color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
-  font-size: calc(1 * var(--sjs-font-size, 16px));
-  line-height: calc(1.5 * var(--sjs-font-size, 16px));
+  font-size: var(--sjs-font-size, 16px);
+  line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
   font-family: var(--font-family);
-  padding: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px))) 0 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)))) 0 calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) var(--sjs-base-unit, var(--base-unit, 8px));
 }
 .sv-dropdown-popup.sv-popup--overlay .sv-list__item:hover .sv-list__item-body,
 .sv-dropdown-popup.sv-popup--overlay .sv-list__item:focus .sv-list__item-body,
@@ -3015,12 +3077,12 @@ sv-popup {
   left: 50%;
   top: 50%;
   max-height: var(--sv-popup-overlay-max-height);
-  min-height: min(var(--sv-popup-overlay-max-height), 31 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  min-height: min(var(--sv-popup-overlay-max-height), 31 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   height: auto;
   width: auto;
-  min-width: min(40 * var(--sjs-base-unit, var(--base-unit, 8px)), var(--sv-popup-overlay-max-width));
+  min-width: min(40 * (var(--sjs-base-unit, var(--base-unit, 8px))), var(--sv-popup-overlay-max-width));
   max-width: var(--sv-popup-overlay-max-width);
-  border-radius: calc(1 * var(--sjs-corner-radius, 4px));
+  border-radius: var(--sjs-corner-radius, 4px);
   overflow: hidden;
   margin: 0;
 }
@@ -3034,7 +3096,7 @@ sv-popup {
   display: flex;
   align-items: center;
   flex-direction: row;
-  font-size: calc(1 * var(--sjs-font-size, 16px));
+  font-size: var(--sjs-font-size, 16px);
   overflow: auto;
   border: 1px solid var(--sjs-border-default, var(--border, #d6d6d6));
 }
@@ -3052,10 +3114,10 @@ sv-popup {
   align-items: center;
   appearance: none;
   width: 100%;
-  padding: 11px calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  line-height: calc(1.5 * var(--sjs-font-size, 16px));
+  padding: 11px calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
   outline: none;
-  font-size: calc(1 * var(--sjs-font-size, 16px));
+  font-size: var(--sjs-font-size, 16px);
   font-weight: 400;
   background: var(--sjs-general-backcolor, var(--background, #fff));
   cursor: pointer;
@@ -3073,7 +3135,7 @@ sv-popup {
 
 .sv-button-group__item-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))));
 }
 .sv-button-group__item-icon use {
   fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
@@ -3104,7 +3166,7 @@ sv-popup {
 }
 
 .sv-button-group__item-icon + .sv-button-group__item-caption {
-  margin-left: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  margin-left: var(--sjs-base-unit, var(--base-unit, 8px));
 }
 
 .sv-button-group__item--disabled {
@@ -3158,7 +3220,7 @@ sv-popup {
 
 .sv-title-actions .sv-title-actions__title {
   flex-wrap: wrap;
-  flex: 0 0 auto;
+  flex: 0 1 auto;
   max-width: unset;
   min-width: unset;
 }
@@ -3175,7 +3237,7 @@ sv-popup {
   background-color: cadetblue;
   padding: 1px;
   font-family: var(--font-family, var(--font-family));
-  font-size: calc(0.875 * var(--sjs-font-size, 16px));
+  font-size: calc(0.875 * (var(--sjs-font-size, 16px)));
   font-style: normal;
   font-weight: 400;
   line-height: 1.42857143;
@@ -3194,7 +3256,7 @@ sv-popup {
   background-clip: padding-box;
   border: 1px solid #ccc;
   border: 1px solid rgba(0, 0, 0, 0.2);
-  border-radius: calc(1.5 * var(--sjs-corner-radius, 4px));
+  border-radius: calc(1.5 * (var(--sjs-corner-radius, 4px)));
   -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
   box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
   line-break: auto;
@@ -3204,10 +3266,10 @@ sv-popup {
 .sv_window_title {
   padding: 8px 14px;
   margin: 0;
-  font-size: calc(0.875 * var(--sjs-font-size, 16px));
+  font-size: calc(0.875 * (var(--sjs-font-size, 16px)));
   background-color: #f7f7f7;
   border-bottom: 1px solid #ebebeb;
-  border-radius: calc(1 * var(--sjs-corner-radius, 4px)) calc(1 * var(--sjs-corner-radius, 4px)) 0 0;
+  border-radius: var(--sjs-corner-radius, 4px) var(--sjs-corner-radius, 4px) 0 0;
   display: flex;
 }
 
@@ -3222,7 +3284,7 @@ sv-popup {
 .sv_window_title a:link,
 .sv_window_title a:visited {
   text-decoration: none;
-  font-size: calc(0.875 * var(--sjs-font-size, 16px));
+  font-size: calc(0.875 * (var(--sjs-font-size, 16px)));
   font-style: normal;
   color: black;
 }
@@ -3247,8 +3309,8 @@ sv-popup {
 
 .sv-brand-info__text {
   font-weight: 600;
-  font-size: calc(1 * var(--sjs-font-size, 16px));
-  line-height: calc(1.5 * var(--sjs-font-size, 16px));
+  font-size: var(--sjs-font-size, 16px);
+  line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
   color: #161616;
 }
 
@@ -3261,8 +3323,8 @@ sv-popup {
 
 .sv-brand-info__terms {
   font-weight: 400;
-  font-size: calc(0.75 * var(--sjs-font-size, 16px));
-  line-height: calc(1 * var(--sjs-font-size, 16px));
+  font-size: calc(0.75 * (var(--sjs-font-size, 16px)));
+  line-height: var(--sjs-font-size, 16px);
 }
 .sv-brand-info__terms a {
   color: #909090;
@@ -3297,21 +3359,21 @@ sv-popup {
 
 .sv-ranking-item:focus .sv-ranking-item__icon--focus {
   visibility: visible;
-  top: calc(0.6 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  top: calc(0.6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .sv-ranking-item:focus .sv-ranking-item__index {
   background: var(--sjs-general-backcolor, var(--background, #fff));
-  outline: calc(0.25 * var(--sjs-base-unit, var(--base-unit, 8px))) solid var(--sjs-primary-backcolor, var(--primary, #19b394));
+  outline: calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px)))) solid var(--sjs-primary-backcolor, var(--primary, #19b394));
 }
 
 .sv-ranking-item__content.sv-ranking-item__content {
   display: flex;
   align-items: center;
   line-height: 1em;
-  padding: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px))) 0px;
-  border-radius: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0px;
+  border-radius: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .sv-ranking-item__icon-container {
@@ -3320,8 +3382,8 @@ sv-popup {
   top: 0;
   bottom: 0;
   flex-shrink: 0;
-  width: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  height: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  width: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  height: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .sv-ranking-item--disabled.sv-ranking-item--disabled {
@@ -3335,9 +3397,9 @@ sv-popup {
   visibility: hidden;
   fill: var(--sjs-primary-backcolor, var(--primary, #19b394));
   position: absolute;
-  top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  width: calc(1.75 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  height: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  top: var(--sjs-base-unit, var(--base-unit, 8px));
+  width: calc(1.75 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .sv-ranking-item__index.sv-ranking-item__index {
@@ -3347,21 +3409,21 @@ sv-popup {
   justify-content: center;
   background-color: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
-  font-size: calc(1 * var(--sjs-font-size, 16px));
+  font-size: var(--sjs-font-size, 16px);
   border-radius: 100%;
-  border: calc(0.25 * var(--sjs-base-unit, var(--base-unit, 8px))) solid transparent;
-  width: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  height: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  line-height: calc(1.5 * var(--sjs-font-size, 16px));
+  border: calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px)))) solid transparent;
+  width: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  height: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
   box-sizing: border-box;
   font-weight: 600;
-  margin-left: calc(0 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  margin-left: calc(0 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .sv-ranking-item__index.sv-ranking-item__index:empty {
   background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAArSURBVHgB7cuhEQAwDMNAtUN4//m8RMtygcE5PxMQxAKnh6Q3mWzXd4mAD4cJBAQCqfbUAAAAAElFTkSuQmCC");
   background-position: center;
   background-repeat: no-repeat;
-  background-size: calc(1 * var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
+  background-size: var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px));
 }
 
 .sv-ranking-item__text {
@@ -3370,9 +3432,9 @@ sv-popup {
   text-overflow: ellipsis;
   white-space: nowrap;
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
-  font-size: var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px))));
-  line-height: calc(1.5 * var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
-  margin: 0 calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  font-size: var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px));
+  line-height: calc(1.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))));
+  margin: 0 calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .sd-ranking--disabled .sv-ranking-item__text {
@@ -3388,18 +3450,18 @@ sv-popup {
 .sv-ranking-item__ghost.sv-ranking-item__ghost {
   display: none;
   background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
-  border-radius: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  width: calc(31 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  height: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  border-radius: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  width: calc(31 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  height: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   z-index: 1;
   position: absolute;
   left: 0;
-  top: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  top: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 [dir=rtl] .sv-ranking-item__ghost {
   left: initilal;
-  right: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  right: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .sv-ranking-item--ghost .sv-ranking-item__ghost {
@@ -3412,7 +3474,7 @@ sv-popup {
 
 .sv-ranking-item--drag .sv-ranking-item__content {
   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)));
+  border-radius: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .sv-ranking--drag .sv-ranking-item:hover .sv-ranking-item__icon {
@@ -3460,7 +3522,7 @@ sv-popup {
 }
 
 .sv-ranking-shortcut .sv-ranking-item__text {
-  margin-right: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  margin-right: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .sv-ranking-shortcut .sv-ranking-item__icon--hover {
@@ -3468,16 +3530,16 @@ sv-popup {
 }
 
 .sv-ranking-shortcut .sv-ranking-item__icon {
-  width: calc(1.75 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  height: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  width: calc(1.75 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  top: var(--sjs-base-unit, var(--base-unit, 8px));
 }
 
 .sv-ranking-shortcut .sv-ranking-item__content {
-  padding-left: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding-left: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .sv-ranking-shortcut .sv-ranking-item__icon-container {
-  margin-left: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  margin-left: var(--sjs-base-unit, var(--base-unit, 8px));
 }
 
 .sv-ranking--select-to-rank {
@@ -3488,39 +3550,42 @@ sv-popup {
   flex-direction: column-reverse;
 }
 .sv-ranking--select-to-rank-vertical .sv-ranking__containers-divider {
-  margin: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px))) 0;
+  margin: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0;
   height: 1px;
 }
 .sv-ranking--select-to-rank-vertical .sv-ranking__container--empty {
-  padding-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  padding-bottom: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding-top: var(--sjs-base-unit, var(--base-unit, 8px));
+  padding-bottom: var(--sjs-base-unit, var(--base-unit, 8px));
   display: flex;
   justify-content: center;
   align-items: center;
 }
 
+.sv-ranking--select-to-rank-horizontal .sv-ranking__container {
+  max-width: calc(50% - 1px);
+}
 .sv-ranking--select-to-rank-horizontal .sv-ranking__containers-divider {
   width: 1px;
 }
 .sv-ranking--select-to-rank-horizontal .sv-ranking__container--to .sv-ranking-item {
-  left: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  left: var(--sjs-base-unit, var(--base-unit, 8px));
 }
 .sv-ranking--select-to-rank-horizontal .sv-ranking__container--empty.sv-ranking__container--to .sv-ranking-item {
   left: initial;
 }
 .sv-ranking--select-to-rank-horizontal .sv-ranking__container--empty.sv-ranking__container--to .sv-ranking__container-placeholder {
-  padding-left: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding-left: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .sv-ranking--select-to-rank-horizontal .sv-ranking__container--empty.sv-ranking__container--from .sv-ranking__container-placeholder {
-  padding-right: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding-right: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .sv-ranking__container-placeholder {
   color: var(--sjs-general-dim-forecolor-light, rgba(0, 0, 0, 0.45));
   font-family: var(--font-family, var(--font-family));
   font-style: normal;
-  font-size: calc(1 * var(--sjs-font-size, 16px));
-  line-height: calc(1.5 * var(--sjs-font-size, 16px));
+  font-size: var(--sjs-font-size, 16px);
+  line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
   white-space: break-spaces;
   display: flex;
   justify-content: center;
@@ -3558,15 +3623,15 @@ sv-popup {
   width: 100%;
   font-family: var(--font-family, var(--font-family));
   box-sizing: border-box;
-  padding: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(8 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(8 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
 .sv-list__empty-text {
-  line-height: calc(1.5 * var(--sjs-font-size, 16px));
-  font-size: calc(1 * var(--sjs-font-size, 16px));
+  line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
+  font-size: var(--sjs-font-size, 16px);
   font-weight: 400;
   text-align: center;
   color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
@@ -3587,13 +3652,13 @@ sv-popup {
   width: 100%;
   align-items: center;
   box-sizing: border-box;
-  padding-block: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  padding-inline-end: calc(8 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  padding-inline-start: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding-block: var(--sjs-base-unit, var(--base-unit, 8px));
+  padding-inline-end: calc(8 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding-inline-start: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
   font-weight: normal;
-  font-size: calc(1 * var(--sjs-font-size, 16px));
-  line-height: calc(1.5 * var(--sjs-font-size, 16px));
+  font-size: var(--sjs-font-size, 16px);
+  line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
   cursor: pointer;
   overflow: hidden;
   text-align: left;
@@ -3605,14 +3670,14 @@ sv-popup {
   outline: none;
 }
 .sv-list__item.sv-list__item--focused:not(.sv-list__item--selected) .sv-list__item-body {
-  border: calc(0.25 * var(--sjs-base-unit, var(--base-unit, 8px))) solid var(--sjs-border-light, var(--border-light, #eaeaea));
-  border-radius: calc(1 * var(--sjs-corner-radius, 4px));
-  padding-block: calc(0.75 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  padding-inline-end: calc(7.75 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  padding-inline-start: calc(1.75 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  border: calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px)))) solid var(--sjs-border-light, var(--border-light, #eaeaea));
+  border-radius: var(--sjs-corner-radius, 4px);
+  padding-block: calc(0.75 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding-inline-end: calc(7.75 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding-inline-start: calc(1.75 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .sv-list__item.sv-list__item--focused:not(.sv-list__item--selected) .sv-string-viewer {
-  margin-inline-start: calc(-0.25 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  margin-inline-start: calc(-0.25 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .sv-list__item:hover,
@@ -3628,17 +3693,17 @@ sv-popup {
   padding: 0;
 }
 .sv-list__item--with-icon.sv-list__item--with-icon .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)));
-  gap: calc(2 * 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))));
+  gap: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   display: flex;
 }
 
 .sv-list__item-icon {
   float: left;
   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)));
+  width: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .sv-list__item-icon svg {
   display: block;
@@ -3654,7 +3719,7 @@ sv-popup {
 }
 
 .sv-list__item-separator {
-  margin: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) 0;
+  margin: var(--sjs-base-unit, var(--base-unit, 8px)) 0;
   height: 1px;
   background-color: var(--sjs-border-default, var(--border, #d6d6d6));
 }
@@ -3708,18 +3773,18 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 .sv-list__filter {
   border-bottom: 1px solid var(--sjs-border-inside, var(--border-inside, rgba(0, 0, 0, 0.16)));
   background: var(--sjs-general-backcolor, var(--background, #fff));
-  padding-bottom: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding-bottom: var(--sjs-base-unit, var(--base-unit, 8px));
 }
 
 .sv-list__filter-icon {
   display: block;
   position: absolute;
-  top: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  inset-inline-start: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  top: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  inset-inline-start: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .sv-list__filter-icon .sv-svg-icon {
-  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))));
 }
 .sv-list__filter-icon .sv-svg-icon use {
   fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
@@ -3734,11 +3799,11 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   box-sizing: border-box;
   width: 100%;
   outline: none;
-  font-size: calc(1 * var(--sjs-font-size, 16px));
+  font-size: var(--sjs-font-size, 16px);
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
-  padding: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  padding-inline-start: calc(7 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  line-height: calc(1.5 * var(--sjs-font-size, 16px));
+  padding: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding-inline-start: calc(7 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
   border: none;
 }
 
@@ -3762,24 +3827,24 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 .sv-save-data_root {
   position: fixed;
   left: 50%;
-  bottom: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  bottom: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   background: var(--sjs-general-backcolor, var(--background, #fff));
   opacity: 0;
-  padding: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(6 * (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(2 * var(--sjs-corner-radius, 4px));
+  border-radius: calc(2 * (var(--sjs-corner-radius, 4px)));
   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;
   font-family: var(--font-family, var(--font-family));
-  font-size: calc(1 * var(--sjs-font-size, 16px));
-  line-height: calc(1.5 * var(--sjs-font-size, 16px));
+  font-size: var(--sjs-font-size, 16px);
+  line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
-  transform: translateX(-50%) translateY(calc(3 * var(--sjs-base-unit, var(--base-unit, 8px))));
+  transform: translateX(-50%) translateY(calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
   transition-timing-function: ease-in;
   transition-property: transform, opacity;
   transition-delay: 0.25s;
@@ -3813,20 +3878,20 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   background-color: var(--sjs-special-red, var(--red, #e60a3e));
   color: var(--sjs-general-backcolor, var(--background, #fff));
   font-weight: 600;
-  padding: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  gap: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  gap: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .sv-save-data_root.sv-save-data_error .sv-save-data_button {
   font-weight: 600;
-  font-size: calc(1 * var(--sjs-font-size, 16px));
-  line-height: calc(1.5 * var(--sjs-font-size, 16px));
-  height: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  font-size: var(--sjs-font-size, 16px);
+  line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
+  height: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   color: #ffffff;
   background-color: var(--sjs-special-red, var(--red, #e60a3e));
-  border: calc(0.25 * var(--sjs-base-unit, var(--base-unit, 8px))) solid #ffffff;
-  border-radius: calc(1.5 * var(--sjs-corner-radius, 4px));
-  padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  border: calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px)))) solid #ffffff;
+  border-radius: calc(1.5 * (var(--sjs-corner-radius, 4px)));
+  padding: var(--sjs-base-unit, var(--base-unit, 8px)) calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   display: flex;
   align-items: center;
 }
@@ -3972,6 +4037,10 @@ sv-components-container,
   flex-grow: 1;
 }
 
+.sv-components-row > .sv-components-column--expandable {
+  width: 1px;
+}
+
 .sv_m600 .sv-root-modern .sv-container-modern .sv-body .sv-page .sv-row .sv-question,
 .sv_m600 .sv-root-modern .sv-container-modern .sv-body .sv-page .sv-row .sv-row__question {
   display: block;