survey-creator-core 1.9.110 → 1.9.111

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,12 +1,12 @@
1
1
  /*!
2
- * SurveyJS Creator v1.9.110
2
+ * SurveyJS Creator v1.9.111
3
3
  * (c) 2015-2023 Devsoft Baltic OÜ - http://surveyjs.io/
4
4
  * Github: https://github.com/surveyjs/survey-creator
5
5
  * License: https://surveyjs.io/Licenses#SurveyCreator
6
6
  */
7
7
  .svc-context-container {
8
8
  display: flex;
9
- gap: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
9
+ gap: var(--sjs-base-unit, var(--base-unit, 8px));
10
10
  width: max-content;
11
11
  }
12
12
 
@@ -15,10 +15,10 @@
15
15
  box-sizing: border-box;
16
16
  background-color: var(--sjs-general-backcolor, var(--background, #fff));
17
17
  border-radius: 50%;
18
- width: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
19
- height: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
18
+ width: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
19
+ height: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
20
20
  cursor: pointer;
21
- padding: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
21
+ padding: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
22
22
  outline: none;
23
23
  }
24
24
  .svc-context-button use {
@@ -119,13 +119,13 @@ svc-tab-json-editor-textarea {
119
119
 
120
120
  .svc-json-error {
121
121
  font-family: var(--font-family);
122
- font-size: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
123
- line-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
124
- 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)));
122
+ font-size: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
123
+ line-height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
124
+ 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))));
125
125
  background: var(--sjs-special-red-light, var(--red-light, rgba(230, 10, 62, 0.1)));
126
126
  display: flex;
127
127
  align-items: center;
128
- gap: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
128
+ gap: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
129
129
  }
130
130
 
131
131
  .svc-json-errors__item:not(:first-of-type) .svc-json-error {
@@ -147,7 +147,7 @@ svc-tab-json-editor-textarea {
147
147
 
148
148
  .svc-json-error__container {
149
149
  display: flex;
150
- gap: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
150
+ gap: var(--sjs-base-unit, var(--base-unit, 8px));
151
151
  }
152
152
 
153
153
  .svc-json-error__title {
@@ -159,19 +159,19 @@ svc-tab-json-editor-textarea {
159
159
  flex-grow: 0;
160
160
  flex-shrink: 0;
161
161
  pointer-events: all;
162
- padding: 0 calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
163
- width: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
164
- height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
162
+ padding: 0 var(--sjs-base-unit, var(--base-unit, 8px));
163
+ width: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
164
+ height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
165
165
  background: var(--sjs-general-backcolor, var(--background, #fff));
166
166
  border: none;
167
- border-radius: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
167
+ border-radius: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
168
168
  box-shadow: var(--sjs-shadow-small, 0px 1px 2px 0px rgba(0, 0, 0, 0.15));
169
169
  cursor: pointer;
170
170
  }
171
171
  .svc-json-error__fix-button svg {
172
172
  fill: var(--sjs-general-dim-forecolor-light, rgba(0, 0, 0, 0.45));
173
- width: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
174
- height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
173
+ width: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
174
+ height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
175
175
  }
176
176
 
177
177
  .svc-json-error__fix-button:hover svg {
@@ -322,10 +322,10 @@ svc-tab-test {
322
322
  border: 0;
323
323
  }
324
324
  .svc-test-tab__content .svc-plugin-tab__content .svc-preview__test-again {
325
- width: calc(33 * var(--sjs-base-unit, var(--base-unit, 8px)));
325
+ width: calc(33 * (var(--sjs-base-unit, var(--base-unit, 8px))));
326
326
  margin-left: auto;
327
327
  margin-right: auto;
328
- margin-bottom: calc(12 * var(--sjs-base-unit, var(--base-unit, 8px)));
328
+ margin-bottom: calc(12 * (var(--sjs-base-unit, var(--base-unit, 8px))));
329
329
  margin-top: 8px;
330
330
  }
331
331
 
@@ -348,7 +348,7 @@ svc-tab-test {
348
348
  left: 0;
349
349
  right: 0;
350
350
  justify-content: center;
351
- gap: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
351
+ gap: var(--sjs-base-unit, var(--base-unit, 8px));
352
352
  }
353
353
  .svc-test-tab__content-actions .sv-action-bar.sv-action-bar--pages .sv-action__content {
354
354
  padding: 0;
@@ -357,13 +357,14 @@ svc-tab-test {
357
357
  margin: 0;
358
358
  }
359
359
  .svc-test-tab__content-actions .sv-action-bar-item {
360
- font-family: var(--font-family, var(--font-family));
360
+ --small-bold-font-size: var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))));
361
+ font-family: var(--font-family);
361
362
  font-style: normal;
362
363
  font-weight: 600;
363
- font-size: calc(0.75 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
364
- line-height: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
364
+ font-size: calc(0.75 * var(--small-bold-font-size));
365
+ line-height: var(--sjs-font-size, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
365
366
  width: 100%;
366
- height: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
367
+ height: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
367
368
  }
368
369
  .svc-test-tab__content-actions .svc-page-selector {
369
370
  max-width: 50%;
@@ -380,7 +381,7 @@ svc-tab-test {
380
381
  font-family: var(--font-family);
381
382
  font-style: normal;
382
383
  font-weight: 400;
383
- font-size: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
384
+ font-size: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
384
385
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
385
386
  text-align: center;
386
387
  overflow: hidden;
@@ -398,15 +399,15 @@ svc-tab-test {
398
399
  }
399
400
 
400
401
  .sl-table__cell.st-table__cell--actions:first-of-type .sv-action-bar {
401
- margin-top: calc(-0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
402
- padding-right: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
402
+ margin-top: calc(-0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
403
+ padding-right: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
403
404
  }
404
405
 
405
406
  .sl-table .sl-table__detail-button.sl-table__detail-button {
406
- width: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
407
- height: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
407
+ width: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
408
+ height: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
408
409
  box-sizing: border-box;
409
- border-radius: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
410
+ border-radius: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
410
411
  padding: 0;
411
412
  }
412
413
  .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 {
@@ -418,8 +419,8 @@ svc-tab-test {
418
419
  }
419
420
 
420
421
  .sl-table__remove-button .sv-action-bar-item {
421
- border-radius: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
422
- padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
422
+ border-radius: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
423
+ padding: var(--sjs-base-unit, var(--base-unit, 8px));
423
424
  cursor: pointer;
424
425
  }
425
426
  .sl-table__remove-button .sv-action-bar-item:hover:enabled, .sl-table__remove-button .sv-action-bar-item.sv-focused--by-key {
@@ -441,8 +442,8 @@ svc-tab-test {
441
442
 
442
443
  .sl-table__row #remove-row .sv-action-bar-item {
443
444
  border: none;
444
- width: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
445
- height: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
445
+ width: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
446
+ height: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
446
447
  }
447
448
  .sl-table__row #remove-row .sv-action-bar-item__icon use {
448
449
  fill: var(--sjs-special-red, var(--red, #e60a3e));
@@ -457,17 +458,18 @@ svc-tab-test {
457
458
  .sl-table__cell .svc-action-button:focus,
458
459
  .sl-table__cell .svc-action-button:hover:enabled,
459
460
  .sl-table__cell .svc-action-button:focus:enabled {
461
+ --medium-bold-font-size: var(--sjs-base-unit, var(--base-unit, 8px));
460
462
  font-family: var(--font-family);
461
463
  font-style: normal;
462
464
  font-weight: bold;
463
- font-size: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
464
- line-height: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
465
+ font-size: calc(3 * var(--medium-bold-font-size));
466
+ line-height: calc(4 * var(--medium-bold-font-size));
465
467
  background: transparent;
466
468
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
467
469
  outline: none;
468
470
  border: none;
469
471
  box-shadow: none;
470
- max-height: calc(13.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
472
+ max-height: calc(13.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
471
473
  overflow: hidden;
472
474
  display: -webkit-box;
473
475
  -webkit-line-clamp: 3;
@@ -477,10 +479,10 @@ svc-tab-test {
477
479
  .sl-table__cell {
478
480
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
479
481
  font-weight: bold;
480
- font-size: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
482
+ font-size: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
481
483
  font-family: var(--font-family);
482
484
  vertical-align: top;
483
- padding: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))) 0;
485
+ padding: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0;
484
486
  width: 100%;
485
487
  }
486
488
 
@@ -519,14 +521,14 @@ svc-tab-test {
519
521
  text-align: left;
520
522
  }
521
523
  .sl-table tbody tr:last-of-type .sl-table__cell {
522
- padding-bottom: calc(10 * var(--sjs-base-unit, var(--base-unit, 8px)));
524
+ padding-bottom: calc(10 * (var(--sjs-base-unit, var(--base-unit, 8px))));
523
525
  }
524
526
  .sl-table tr:first-of-type .sl-table__cell {
525
- padding-top: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
527
+ padding-top: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
526
528
  }
527
529
  .sl-table td:first-of-type,
528
530
  .sl-table th:first-of-type {
529
- padding-left: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
531
+ padding-left: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
530
532
  }
531
533
  .sl-table td:first-of-type .sv-action-bar,
532
534
  .sl-table th:first-of-type .sv-action-bar {
@@ -534,7 +536,7 @@ svc-tab-test {
534
536
  }
535
537
  .sl-table td:last-of-type,
536
538
  .sl-table th:last-of-type {
537
- padding-right: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
539
+ padding-right: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
538
540
  }
539
541
 
540
542
  .sl-panel .sl-panel__footer {
@@ -548,12 +550,12 @@ svc-tab-test {
548
550
  }
549
551
  .sl-panel .sl-panel__footer button.sl-panel__done-button {
550
552
  width: 100%;
551
- margin: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))) 0 calc(10 * var(--sjs-base-unit, var(--base-unit, 8px))) 0;
553
+ margin: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0 calc(10 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0;
552
554
  color: var(--sjs-primary-backcolor, var(--primary, #19b394));
553
555
  background-color: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
554
556
  font-family: var(--font-family);
555
- font-size: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
556
- border-radius: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
557
+ font-size: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
558
+ border-radius: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
557
559
  display: flex;
558
560
  align-items: center;
559
561
  vertical-align: baseline;
@@ -580,7 +582,7 @@ svc-tab-test {
580
582
  .sl-question {
581
583
  display: flex;
582
584
  align-items: center;
583
- margin-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
585
+ margin-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
584
586
  }
585
587
 
586
588
  .sl-row {
@@ -594,7 +596,7 @@ svc-tab-test {
594
596
  }
595
597
 
596
598
  .sl-question__header--left {
597
- margin-right: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
599
+ margin-right: var(--sjs-base-unit, var(--base-unit, 8px));
598
600
  }
599
601
 
600
602
  .sl-row .sd-scrollable-container:not(.sd-scrollable-container--compact) {
@@ -603,8 +605,8 @@ svc-tab-test {
603
605
 
604
606
  .sl-question__title {
605
607
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
606
- font-size: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
607
- line-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
608
+ font-size: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
609
+ line-height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
608
610
  margin: 0;
609
611
  font-weight: 600;
610
612
  }
@@ -613,19 +615,19 @@ svc-tab-test {
613
615
  }
614
616
 
615
617
  .sl-row--multiple .sl-question {
616
- padding-right: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
618
+ padding-right: var(--sjs-base-unit, var(--base-unit, 8px));
617
619
  }
618
620
 
619
621
  .svc-logic-question-value {
620
622
  --sd-base-padding: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
621
623
  --sd-base-vertical-padding: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
622
624
  --sd-page-vertical-padding: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
623
- padding-right: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
624
- margin-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
625
+ padding-right: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
626
+ margin-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
625
627
  }
626
628
 
627
629
  .svc-logic_trigger-editor {
628
- margin-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
630
+ margin-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
629
631
  }
630
632
 
631
633
  .svc-logic_trigger-editor .svc-logic-question-value {
@@ -637,7 +639,7 @@ svc-tab-test {
637
639
  }
638
640
 
639
641
  .spg-comment.sl-comment {
640
- height: calc(17 * var(--sjs-base-unit, var(--base-unit, 8px)));
642
+ height: calc(17 * (var(--sjs-base-unit, var(--base-unit, 8px))));
641
643
  }
642
644
  .svc-tab-translation {
643
645
  width: 100%;
@@ -648,15 +650,15 @@ svc-tab-test {
648
650
  .st-properties {
649
651
  background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
650
652
  flex-grow: 1;
651
- padding-right: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
652
- padding-left: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
653
- padding-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
653
+ padding-right: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
654
+ padding-left: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
655
+ padding-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
654
656
  }
655
657
  .st-properties .spg-table .spg-table__cell:first-of-type {
656
- width: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
658
+ width: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
657
659
  }
658
660
  .st-properties .spg-table .spg-table__question-wrapper {
659
- padding: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
661
+ padding: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) var(--sjs-base-unit, var(--base-unit, 8px));
660
662
  }
661
663
  .st-properties .spg-table .spg-table__question-wrapper .spg-checkbox {
662
664
  margin: 0;
@@ -670,10 +672,11 @@ svc-tab-test {
670
672
  }
671
673
 
672
674
  .st-no-strings {
675
+ --center-text-font-size: var(--sjs-base-unit, var(--base-unit, 8px));
673
676
  font-family: var(--font-family);
674
677
  font-style: normal;
675
678
  font-weight: 400;
676
- font-size: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
679
+ font-size: calc(2 * var(--center-text-font-size));
677
680
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
678
681
  width: 100%;
679
682
  position: absolute;
@@ -710,7 +713,7 @@ svc-tab-test {
710
713
  }
711
714
 
712
715
  .st-property-panel .spg-panel__content .spg-row:first-child {
713
- margin-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
716
+ margin-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
714
717
  }
715
718
 
716
719
  .st-strings-header .st-table__cell {
@@ -724,19 +727,20 @@ svc-tab-test {
724
727
 
725
728
  .st-title.st-panel__title,
726
729
  .st-table__cell.st-table__cell--header {
727
- font-family: var(--font-family, var(--font-family));
730
+ --small-bold-font-size: var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))));
731
+ font-family: var(--font-family);
728
732
  font-style: normal;
729
733
  font-weight: 600;
730
- font-size: calc(0.75 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
731
- line-height: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
734
+ font-size: calc(0.75 * var(--small-bold-font-size));
735
+ line-height: var(--sjs-font-size, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
732
736
  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
733
737
  text-align: left;
734
738
  }
735
739
 
736
740
  .st-title.st-panel__title {
737
- height: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
738
- line-height: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
739
- padding-left: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
741
+ height: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
742
+ line-height: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
743
+ padding-left: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
740
744
  margin: 0;
741
745
  background-color: var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9));
742
746
  border-bottom: 1px solid var(--sjs-border-light, var(--border-light, #eaeaea));
@@ -753,26 +757,27 @@ svc-tab-test {
753
757
  box-sizing: border-box;
754
758
  background-color: var(--sjs-general-backcolor, var(--background, #fff));
755
759
  border-bottom: 1px solid var(--sjs-border-light, var(--border-light, #eaeaea));
756
- padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) 0;
760
+ padding: var(--sjs-base-unit, var(--base-unit, 8px)) 0;
757
761
  }
758
762
 
759
763
  td.st-table__cell:first-of-type {
760
- font-family: var(--font-family, var(--font-family));
764
+ --default-bold-font-size: var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))));
765
+ font-family: var(--font-family);
761
766
  font-style: normal;
762
767
  font-weight: 600;
763
- font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
764
- line-height: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
768
+ font-size: var(--sjs-font-size, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
769
+ line-height: calc(1.5 * var(--default-bold-font-size));
765
770
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
766
771
  max-width: 300px;
767
- padding-right: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
772
+ padding-right: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
768
773
  }
769
774
  td.st-table__cell:first-of-type span {
770
775
  display: inline-block;
771
- padding-left: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
776
+ padding-left: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
772
777
  }
773
778
 
774
779
  .st-panel-indent .st-table__cell:first-of-type span {
775
- padding-left: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
780
+ padding-left: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
776
781
  }
777
782
 
778
783
  .st-table {
@@ -783,10 +788,11 @@ td.st-table__cell:first-of-type span {
783
788
  }
784
789
 
785
790
  .st-comment {
786
- font-family: var(--font-family, var(--font-family));
791
+ --default-font-size: var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))));
792
+ font-family: var(--font-family);
787
793
  font-style: normal;
788
- font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
789
- line-height: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
794
+ font-size: var(--sjs-font-size, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
795
+ line-height: calc(1.5 * var(--default-font-size));
790
796
  display: block;
791
797
  width: calc(100% - 3 * var(--sjs-base-unit, var(--base-unit, 8px)));
792
798
  border: unset;
@@ -798,9 +804,34 @@ td.st-table__cell:first-of-type span {
798
804
  }
799
805
 
800
806
  .sd-translation-line-skeleton {
801
- min-height: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
807
+ min-height: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
802
808
  background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
803
809
  }
810
+
811
+ .st-navigation-btn {
812
+ padding-left: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
813
+ padding-right: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
814
+ }
815
+
816
+ .svc-translation-machine {
817
+ margin-right: auto;
818
+ }
819
+
820
+ .st-body__footer {
821
+ padding: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
822
+ background: var(--sjs-general-backcolor, var(--background, #fff));
823
+ border-bottom: 1px solid var(--sjs-border-light, var(--border-light, #eaeaea));
824
+ }
825
+
826
+ .st-translation-dialog .sv-popup__body-header {
827
+ margin-bottom: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
828
+ }
829
+
830
+ .st-translation-dialog .st-root-modern > .sd-root-modern__wrapper {
831
+ border-radius: 4px;
832
+ box-shadow: var(--sjs-shadow-small, 0px 1px 2px 0px rgba(0, 0, 0, 0.15));
833
+ overflow: hidden;
834
+ }
804
835
  .svc-tab-logic-edit {
805
836
  width: 100%;
806
837
  height: 100%;
@@ -832,23 +863,23 @@ td.st-table__cell:first-of-type span {
832
863
  }
833
864
 
834
865
  .svc-logic-paneldynamic div.svc-logic-operator {
835
- height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
866
+ height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
836
867
  box-sizing: content-box;
837
868
  }
838
869
 
839
870
  .svc-logic-paneldynamic .svc-logic-operator {
840
871
  -webkit-appearance: none;
841
872
  appearance: none;
842
- padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
843
- border-radius: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
873
+ padding: var(--sjs-base-unit, var(--base-unit, 8px)) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
874
+ border-radius: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
844
875
  border: none;
845
876
  outline: none;
846
877
  font-weight: 600;
847
878
  font-family: var(--font-family);
848
- font-size: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
879
+ font-size: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
849
880
  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
850
- height: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
851
- line-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
881
+ height: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
882
+ line-height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
852
883
  cursor: pointer;
853
884
  }
854
885
  .svc-logic-paneldynamic .svc-logic-operator option {
@@ -914,11 +945,11 @@ td.st-table__cell:first-of-type span {
914
945
 
915
946
  .svc-logic-condition-remove.svc-icon-remove {
916
947
  display: none;
917
- width: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
918
- height: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
948
+ width: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
949
+ height: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
919
950
  background-repeat: no-repeat;
920
951
  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");
921
- background-size: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
952
+ background-size: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
922
953
  background-position: center;
923
954
  }
924
955
 
@@ -933,7 +964,7 @@ td.st-table__cell:first-of-type span {
933
964
  }
934
965
 
935
966
  .svc-logic-condition-remove-question {
936
- height: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
967
+ height: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
937
968
  }
938
969
 
939
970
  .svc-logic-paneldynamic__button.svc-logic-paneldynamic__remove-btn {
@@ -947,7 +978,7 @@ td.st-table__cell:first-of-type span {
947
978
  .svc-logic-operator--action.sl-paneldynamic__add-btn.sl-paneldynamic__add-btn,
948
979
  .svc-logic-operator--operator.sl-paneldynamic__add-btn.sl-paneldynamic__add-btn {
949
980
  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
950
- margin-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
981
+ margin-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
951
982
  }
952
983
  .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,
953
984
  .svc-logic-operator--operator.sl-paneldynamic__add-btn.sl-paneldynamic__add-btn:hover,
@@ -963,17 +994,17 @@ td.st-table__cell:first-of-type span {
963
994
  top: 35%;
964
995
  }
965
996
  .svc-logic-tab__content.svc-logic-tab__empty .svc-logic-tab__content-action {
966
- width: calc(33 * var(--sjs-base-unit, var(--base-unit, 8px)));
967
- margin-top: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
997
+ width: calc(33 * (var(--sjs-base-unit, var(--base-unit, 8px))));
998
+ margin-top: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
968
999
  }
969
1000
  .svc-logic-tab__content .svc-logic-tab__content-action {
970
1001
  margin-left: 25%;
971
1002
  margin-right: 25%;
972
- margin-bottom: calc(8 * var(--sjs-base-unit, var(--base-unit, 8px)));
1003
+ margin-bottom: calc(8 * (var(--sjs-base-unit, var(--base-unit, 8px))));
973
1004
  }
974
1005
  .svc-logic-tab__content .svc-logic-tab__content-action--disabled {
975
1006
  cursor: default;
976
- outline: solid calc(0.25 * var(--sjs-base-unit, var(--base-unit, 8px))) transparent;
1007
+ outline: solid calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px)))) transparent;
977
1008
  }
978
1009
  .svc-logic-tab__content .svc-logic-tab__content-action--disabled:focus, .svc-logic-tab__content .svc-logic-tab__content-action--disabled:hover {
979
1010
  background-color: var(--sjs-general-backcolor, var(--background, #fff));
@@ -1033,19 +1064,19 @@ td.st-table__cell:first-of-type span {
1033
1064
  }
1034
1065
 
1035
1066
  .sl-list__item-body {
1036
- padding-block: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
1067
+ padding-block: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1037
1068
  }
1038
1069
 
1039
1070
  .svc-logic-placeholder {
1040
- width: calc(78 * var(--sjs-base-unit, var(--base-unit, 8px)));
1071
+ width: calc(78 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1041
1072
  min-width: 100%;
1042
1073
  max-width: 100%;
1043
1074
  box-sizing: border-box;
1044
- margin-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
1075
+ margin-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1045
1076
  background: var(--sjs-general-backcolor, var(--background, #fff));
1046
1077
  box-shadow: var(--sjs-shadow-small, 0px 1px 2px 0px rgba(0, 0, 0, 0.15));
1047
- border-radius: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
1048
- 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)));
1078
+ border-radius: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1079
+ 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))));
1049
1080
  }
1050
1081
 
1051
1082
  .sv-popup--overlay .svc-logic-placeholder {
@@ -1056,12 +1087,12 @@ td.st-table__cell:first-of-type span {
1056
1087
  font-family: var(--font-family);
1057
1088
  font-style: normal;
1058
1089
  font-weight: 400;
1059
- font-size: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
1060
- line-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
1090
+ font-size: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1091
+ line-height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1061
1092
  text-align: center;
1062
1093
  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
1063
1094
  display: block;
1064
- padding: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(8 * var(--sjs-base-unit, var(--base-unit, 8px)));
1095
+ padding: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(8 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1065
1096
  }
1066
1097
 
1067
1098
  .svc-logic-tab__leave-apply-button {
@@ -1095,7 +1126,7 @@ svc-tab-designer {
1095
1126
  }
1096
1127
 
1097
1128
  .svc-tab-designer--with-place-holder .svc-designer-header {
1098
- min-width: calc(84 * var(--sjs-base-unit, var(--base-unit, 8px)));
1129
+ min-width: calc(84 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1099
1130
  }
1100
1131
 
1101
1132
  .svc-tab-designer .svc-designer-header .sd-container-modern__title {
@@ -1108,14 +1139,14 @@ svc-tab-designer {
1108
1139
  display: flex;
1109
1140
  }
1110
1141
  .svc-tab-designer .sd-container-modern {
1111
- min-width: calc(70 * var(--sjs-base-unit, var(--base-unit, 8px)));
1142
+ min-width: calc(70 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1112
1143
  width: 100%;
1113
1144
  box-sizing: border-box;
1114
1145
  margin-left: auto;
1115
1146
  margin-right: auto;
1116
1147
  }
1117
1148
  .svc-tab-designer .sd-container-modern.sd-container-modern--static {
1118
- max-width: calc(84 * var(--sjs-base-unit, var(--base-unit, 8px)));
1149
+ max-width: calc(84 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1119
1150
  }
1120
1151
  .svc-tab-designer .sd-container-modern.sd-container-modern--responsive {
1121
1152
  max-width: initial;
@@ -1139,16 +1170,16 @@ svc-tab-designer {
1139
1170
  flex-direction: column;
1140
1171
  align-items: center;
1141
1172
  justify-content: center;
1142
- padding: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
1173
+ padding: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1143
1174
  box-sizing: border-box;
1144
1175
  }
1145
1176
 
1146
1177
  .svc-designer-placeholder-page {
1147
- margin-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
1178
+ margin-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1148
1179
  }
1149
1180
 
1150
1181
  .svc-designer-placeholder-page .svc-page__footer {
1151
- width: calc(33 * var(--sjs-base-unit, var(--base-unit, 8px)));
1182
+ width: calc(33 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1152
1183
  margin: auto;
1153
1184
  }
1154
1185
 
@@ -1169,10 +1200,10 @@ svc-tab-designer {
1169
1200
  margin-left: 0;
1170
1201
  }
1171
1202
  .svc-creator--mobile .svc-question__content--selected .svc-rating-question-controls {
1172
- bottom: calc(10 * var(--sjs-base-unit, var(--base-unit, 8px)));
1203
+ bottom: calc(10 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1173
1204
  }
1174
1205
  .svc-creator--mobile .svc-page {
1175
- margin-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
1206
+ margin-top: var(--sjs-base-unit, var(--base-unit, 8px));
1176
1207
  }
1177
1208
  .svc-creator--mobile .svc-page__content {
1178
1209
  padding-left: 0;
@@ -1183,26 +1214,26 @@ svc-tab-designer {
1183
1214
  margin: 0;
1184
1215
  }
1185
1216
  .svc-creator--mobile .svc-page__content.svc-page__content--selected .sd-page__title {
1186
- margin: calc(2.5 * var(--sjs-base-unit, var(--base-unit, 8px))) 0 0 0;
1217
+ margin: calc(2.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0 0 0;
1187
1218
  }
1188
1219
  .svc-creator--mobile .svc-page__content .sd-page {
1189
- 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)));
1220
+ 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))));
1190
1221
  }
1191
1222
  .svc-creator--mobile .svc-page__content .svc-page__footer {
1192
- margin-left: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
1193
- margin-right: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
1223
+ margin-left: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1224
+ margin-right: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1194
1225
  }
1195
1226
  .svc-creator--mobile .svc-question__content {
1196
- 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)));
1227
+ 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))));
1197
1228
  }
1198
1229
  .svc-creator--mobile .svc-question__content.svc-question__content--selected {
1199
- padding-bottom: calc(8 * var(--sjs-base-unit, var(--base-unit, 8px)));
1230
+ padding-bottom: calc(8 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1200
1231
  }
1201
1232
  .svc-creator--mobile .svc-tab-designer {
1202
1233
  justify-content: initial;
1203
1234
  }
1204
1235
  .svc-creator--mobile .svc-tab-designer .sd-title.sd-container-modern__title {
1205
- padding: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
1236
+ padding: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1206
1237
  flex-direction: column-reverse;
1207
1238
  align-items: flex-start;
1208
1239
  }
@@ -1210,19 +1241,19 @@ svc-tab-designer {
1210
1241
  margin-top: 0;
1211
1242
  }
1212
1243
  .svc-creator--mobile .svc-tab-designer .sd-title.sd-container-modern__title .svc-logo-image-placeholder {
1213
- margin-left: calc(-2 * var(--sjs-base-unit, var(--base-unit, 8px)));
1214
- margin-top: calc(-2 * var(--sjs-base-unit, var(--base-unit, 8px)));
1244
+ margin-left: calc(-2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1245
+ margin-top: calc(-2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1215
1246
  }
1216
1247
  .svc-creator--mobile .svc-tab-designer .sd-title.sd-container-modern__title h3 {
1217
1248
  margin: 0;
1218
- font-size: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
1219
- line-height: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
1249
+ font-size: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1250
+ line-height: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1220
1251
  }
1221
1252
  .svc-creator--mobile .svc-tab-designer .sd-title.sd-container-modern__title h5 {
1222
1253
  margin: 0;
1223
1254
  }
1224
1255
  .svc-creator--mobile .svc-tab-designer .sd-container-modern {
1225
- min-width: calc(43 * var(--sjs-base-unit, var(--base-unit, 8px)));
1256
+ min-width: calc(43 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1226
1257
  padding: 0;
1227
1258
  }
1228
1259
  .svc-creator--mobile .svc-properties-wrapper {
@@ -1230,13 +1261,13 @@ svc-tab-designer {
1230
1261
  }
1231
1262
  .svc-creator--mobile .svc-question__content-actions {
1232
1263
  width: calc(100% - 3 * var(--sjs-base-unit, var(--base-unit, 8px)));
1233
- left: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
1264
+ left: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1234
1265
  }
1235
1266
  .svc-creator--mobile .svc-question__content-actions .sv-action-bar-item {
1236
1267
  border: 0;
1237
1268
  }
1238
1269
  .svc-creator--mobile .svc-page__content-actions .sv-action-bar {
1239
- padding-right: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
1270
+ padding-right: var(--sjs-base-unit, var(--base-unit, 8px));
1240
1271
  }
1241
1272
  .svc-creator--mobile .svc-page__content-actions .sv-action-bar .sv-action .sv-action__content {
1242
1273
  padding-right: 0;
@@ -1263,10 +1294,10 @@ svc-tab-test {
1263
1294
  border: 0;
1264
1295
  }
1265
1296
  .svc-test-tab__content .svc-plugin-tab__content .svc-preview__test-again {
1266
- width: calc(33 * var(--sjs-base-unit, var(--base-unit, 8px)));
1297
+ width: calc(33 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1267
1298
  margin-left: auto;
1268
1299
  margin-right: auto;
1269
- margin-bottom: calc(12 * var(--sjs-base-unit, var(--base-unit, 8px)));
1300
+ margin-bottom: calc(12 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1270
1301
  margin-top: 8px;
1271
1302
  }
1272
1303
 
@@ -1289,7 +1320,7 @@ svc-tab-test {
1289
1320
  left: 0;
1290
1321
  right: 0;
1291
1322
  justify-content: center;
1292
- gap: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
1323
+ gap: var(--sjs-base-unit, var(--base-unit, 8px));
1293
1324
  }
1294
1325
  .svc-test-tab__content-actions .sv-action-bar.sv-action-bar--pages .sv-action__content {
1295
1326
  padding: 0;
@@ -1298,13 +1329,14 @@ svc-tab-test {
1298
1329
  margin: 0;
1299
1330
  }
1300
1331
  .svc-test-tab__content-actions .sv-action-bar-item {
1301
- font-family: var(--font-family, var(--font-family));
1332
+ --small-bold-font-size: var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))));
1333
+ font-family: var(--font-family);
1302
1334
  font-style: normal;
1303
1335
  font-weight: 600;
1304
- font-size: calc(0.75 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
1305
- line-height: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
1336
+ font-size: calc(0.75 * var(--small-bold-font-size));
1337
+ line-height: var(--sjs-font-size, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
1306
1338
  width: 100%;
1307
- height: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
1339
+ height: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1308
1340
  }
1309
1341
  .svc-test-tab__content-actions .svc-page-selector {
1310
1342
  max-width: 50%;
@@ -1323,23 +1355,24 @@ svc-tab-test {
1323
1355
 
1324
1356
  .svc-notifier {
1325
1357
  position: absolute;
1326
- bottom: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
1327
- left: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
1358
+ bottom: var(--sjs-base-unit, var(--base-unit, 8px));
1359
+ left: var(--sjs-base-unit, var(--base-unit, 8px));
1328
1360
  background: var(--sjs-general-backcolor, var(--background, #fff));
1329
1361
  opacity: 0;
1330
- padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
1362
+ padding: var(--sjs-base-unit, var(--base-unit, 8px)) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1331
1363
  box-shadow: var(--sjs-shadow-medium, 0px 2px 6px 0px rgba(0, 0, 0, 0.1));
1332
- border-radius: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
1364
+ border-radius: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1333
1365
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
1334
- min-width: calc(30 * var(--sjs-base-unit, var(--base-unit, 8px)));
1366
+ min-width: calc(30 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1335
1367
  text-align: center;
1336
1368
  z-index: 1600;
1337
1369
  visibility: hidden;
1338
- font-family: var(--font-family, var(--font-family));
1370
+ --small-bold-font-size: var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))));
1371
+ font-family: var(--font-family);
1339
1372
  font-style: normal;
1340
1373
  font-weight: 600;
1341
- font-size: calc(0.75 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
1342
- line-height: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
1374
+ font-size: calc(0.75 * var(--small-bold-font-size));
1375
+ line-height: var(--sjs-font-size, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
1343
1376
  }
1344
1377
 
1345
1378
  .svc-notifier.svc-notifier--error {
@@ -1350,7 +1383,7 @@ svc-tab-test {
1350
1383
 
1351
1384
  .svc-creator--mobile .svc-notifier {
1352
1385
  left: 0;
1353
- bottom: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
1386
+ bottom: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1354
1387
  width: 100%;
1355
1388
  box-sizing: border-box;
1356
1389
  opacity: 1;
@@ -1453,10 +1486,10 @@ survey-creator ::-webkit-scrollbar-thumb:hover,
1453
1486
 
1454
1487
  .svc-creator__banner {
1455
1488
  position: absolute;
1456
- bottom: calc(-4 * var(--sjs-base-unit, var(--base-unit, 8px)));
1489
+ bottom: calc(-4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1457
1490
  width: 100%;
1458
- height: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
1459
- line-height: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
1491
+ height: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1492
+ line-height: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1460
1493
  background-color: var(--sjs-secondary-backcolor, var(--secondary, #ff9814));
1461
1494
  text-align: center;
1462
1495
  overflow: hidden;
@@ -1470,7 +1503,7 @@ survey-creator ::-webkit-scrollbar-thumb:hover,
1470
1503
  height: 100%;
1471
1504
  background-color: var(--sjs-general-backcolor, var(--background, #fff));
1472
1505
  /* Shadow / Medium */
1473
- border-radius: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
1506
+ border-radius: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1474
1507
  box-shadow: var(--sjs-shadow-medium, 0px 2px 6px 0px rgba(0, 0, 0, 0.1));
1475
1508
  transition: max-width 0.1s ease-in-out, padding 0.2s ease-in-out;
1476
1509
  }
@@ -1479,7 +1512,7 @@ survey-creator ::-webkit-scrollbar-thumb:hover,
1479
1512
  color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
1480
1513
  font-family: var(--font-family);
1481
1514
  font-weight: bold;
1482
- font-size: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
1515
+ font-size: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1483
1516
  text-transform: uppercase;
1484
1517
  vertical-align: middle;
1485
1518
  }
@@ -1489,9 +1522,9 @@ survey-creator ::-webkit-scrollbar-thumb:hover,
1489
1522
  }
1490
1523
 
1491
1524
  .sv-drag-drop-ghost {
1492
- top: calc(0.75 * var(--sjs-base-unit, var(--base-unit, 8px)));
1525
+ top: calc(0.75 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1493
1526
  width: 100%;
1494
- height: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
1527
+ height: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1495
1528
  background: var(--sjs-secondary-backcolor, var(--secondary, #ff9814));
1496
1529
  position: absolute;
1497
1530
  }
@@ -1503,11 +1536,11 @@ survey-creator ::-webkit-scrollbar-thumb:hover,
1503
1536
 
1504
1537
  .sv-drag-drop-ghost--item-value-bottom {
1505
1538
  top: initial;
1506
- bottom: calc(-0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
1539
+ bottom: calc(-0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1507
1540
  }
1508
1541
 
1509
1542
  .sv-list__filter {
1510
- margin-bottom: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
1543
+ margin-bottom: var(--sjs-base-unit, var(--base-unit, 8px));
1511
1544
  }
1512
1545
  .sd-element__title .svc-string-editor {
1513
1546
  display: inline-block;
@@ -1560,12 +1593,12 @@ survey-creator ::-webkit-scrollbar-thumb:hover,
1560
1593
  z-index: 20;
1561
1594
  padding: 0px;
1562
1595
  vertical-align: top;
1563
- margin-inline-start: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
1564
- font-size: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
1596
+ margin-inline-start: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1597
+ font-size: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1565
1598
  font-family: var(--font-family);
1566
1599
  font-weight: 400;
1567
1600
  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
1568
- line-height: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
1601
+ line-height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1569
1602
  }
1570
1603
 
1571
1604
  .svc-string-editor__border {
@@ -1579,9 +1612,9 @@ survey-creator ::-webkit-scrollbar-thumb:hover,
1579
1612
  }
1580
1613
 
1581
1614
  .svc-string-editor__error {
1582
- margin-left: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
1583
- line-height: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
1584
- font-size: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
1615
+ margin-left: var(--sjs-base-unit, var(--base-unit, 8px));
1616
+ line-height: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1617
+ font-size: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1585
1618
  color: red;
1586
1619
  display: none;
1587
1620
  }
@@ -1590,9 +1623,9 @@ survey-creator ::-webkit-scrollbar-thumb:hover,
1590
1623
  position: absolute;
1591
1624
  left: 100%;
1592
1625
  height: 100%;
1593
- width: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
1626
+ width: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1594
1627
  top: 0;
1595
- padding-left: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
1628
+ padding-left: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1596
1629
  z-index: 12;
1597
1630
  display: none;
1598
1631
  align-items: center;
@@ -1609,9 +1642,9 @@ survey-creator ::-webkit-scrollbar-thumb:hover,
1609
1642
  }
1610
1643
 
1611
1644
  .svc-string-editor__button--edit {
1612
- height: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
1613
- width: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
1614
- padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
1645
+ height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1646
+ width: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1647
+ padding: var(--sjs-base-unit, var(--base-unit, 8px));
1615
1648
  }
1616
1649
  .svc-string-editor__button--edit .sv-svg-icon {
1617
1650
  vertical-align: bottom;
@@ -1628,26 +1661,26 @@ survey-creator ::-webkit-scrollbar-thumb:hover,
1628
1661
  display: flex;
1629
1662
  top: 0;
1630
1663
  bottom: 0;
1631
- left: calc(-0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
1632
- right: calc(-0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
1664
+ left: calc(-0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1665
+ right: calc(-0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1633
1666
  border-radius: 3px;
1634
- box-shadow: 0px 0px 0px calc(0.25 * var(--sjs-base-unit, var(--base-unit, 8px))) rgba(0, 0, 0, 0.16);
1667
+ box-shadow: 0px 0px 0px calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px)))) rgba(0, 0, 0, 0.16);
1635
1668
  }
1636
1669
 
1637
1670
  .svc-string-editor:focus-within .svc-string-editor__border {
1638
1671
  display: flex;
1639
- top: calc(-0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
1640
- bottom: calc(-0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
1641
- left: calc(-1 * var(--sjs-base-unit, var(--base-unit, 8px)));
1642
- right: calc(-1 * var(--sjs-base-unit, var(--base-unit, 8px)));
1672
+ top: calc(-0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1673
+ bottom: calc(-0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1674
+ left: calc(-1 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1675
+ right: calc(-1 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1643
1676
  border-radius: 3px;
1644
1677
  box-sizing: content-box;
1645
1678
  background-color: var(--sjs-general-backcolor, var(--background, #fff));
1646
- 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));
1679
+ 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));
1647
1680
  }
1648
1681
 
1649
1682
  .svc-string-editor.svc-string-editor--error:focus-within .svc-string-editor__border {
1650
- 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));
1683
+ 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));
1651
1684
  }
1652
1685
 
1653
1686
  .sd-boolean .sv-string-editor:focus-within {
@@ -1655,7 +1688,7 @@ survey-creator ::-webkit-scrollbar-thumb:hover,
1655
1688
  }
1656
1689
 
1657
1690
  .sd-rating .sd-rating__item:focus-within {
1658
- border: calc(0.25 * var(--sjs-base-unit, var(--base-unit, 8px))) solid var(--sjs-primary-backcolor, var(--primary, #19b394));
1691
+ border: calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px)))) solid var(--sjs-primary-backcolor, var(--primary, #19b394));
1659
1692
  }
1660
1693
  .sd-rating:not(.sd-rating__min-text) .svc-string-editor:focus-within .svc-string-editor__border {
1661
1694
  display: none;
@@ -1663,12 +1696,12 @@ survey-creator ::-webkit-scrollbar-thumb:hover,
1663
1696
 
1664
1697
  .sd-table__cell--actions .svc-string-editor__button--done,
1665
1698
  .sd-matrixdynamic__add-btn .svc-string-editor__button--done {
1666
- width: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
1699
+ width: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1667
1700
  }
1668
1701
 
1669
1702
  .sd-table__cell--column-title .svc-matrix-cell:not(:focus):focus-within .svc-matrix-cell--selected {
1670
- border: calc(0.25 * var(--sjs-base-unit, var(--base-unit, 8px))) solid var(--sjs-primary-backcolor, var(--primary, #19b394));
1671
- border-radius: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
1703
+ border: calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px)))) solid var(--sjs-primary-backcolor, var(--primary, #19b394));
1704
+ border-radius: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1672
1705
  display: block;
1673
1706
  }
1674
1707
  .sd-table__cell--column-title .svc-string-editor:focus-within .svc-string-editor__border {
@@ -1676,8 +1709,8 @@ survey-creator ::-webkit-scrollbar-thumb:hover,
1676
1709
  }
1677
1710
 
1678
1711
  .sd-item__control-label .svc-string-editor:focus-within .svc-string-editor__border {
1679
- left: calc(-0.7 * var(--sjs-base-unit, var(--base-unit, 8px)));
1680
- right: calc(-0.7 * var(--sjs-base-unit, var(--base-unit, 8px)));
1712
+ left: calc(-0.7 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1713
+ right: calc(-0.7 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1681
1714
  }
1682
1715
 
1683
1716
  .svc-string-editor:hover ~ .sd-question__required-text, .svc-string-editor:focus-within ~ .sd-question__required-text {
@@ -1686,16 +1719,16 @@ survey-creator ::-webkit-scrollbar-thumb:hover,
1686
1719
  .svc-btn {
1687
1720
  display: flex;
1688
1721
  align-items: center;
1689
- height: calc(7 * var(--sjs-base-unit, var(--base-unit, 8px)));
1690
- line-height: calc(7 * var(--sjs-base-unit, var(--base-unit, 8px)));
1722
+ height: calc(7 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1723
+ line-height: calc(7 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1691
1724
  vertical-align: baseline;
1692
1725
  text-align: center;
1693
1726
  background-color: var(--sjs-general-backcolor, var(--background, #fff));
1694
1727
  box-shadow: var(--sjs-shadow-small, 0px 1px 2px 0px rgba(0, 0, 0, 0.15));
1695
- border-radius: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
1728
+ border-radius: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1696
1729
  cursor: pointer;
1697
1730
  user-select: none;
1698
- outline: solid calc(0.25 * var(--sjs-base-unit, var(--base-unit, 8px))) transparent;
1731
+ outline: solid calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px)))) transparent;
1699
1732
  }
1700
1733
  .svc-btn .svc-text {
1701
1734
  display: flex;
@@ -1715,14 +1748,14 @@ survey-creator ::-webkit-scrollbar-thumb:hover,
1715
1748
 
1716
1749
  .svc-action-button {
1717
1750
  display: inline-block;
1718
- padding: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
1751
+ padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1719
1752
  box-sizing: border-box;
1720
- border-radius: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
1753
+ border-radius: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1721
1754
  color: var(--sjs-primary-backcolor, var(--primary, #19b394));
1722
1755
  font-weight: 600;
1723
- font-size: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
1724
- line-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
1725
- border: calc(0.25 * var(--sjs-base-unit, var(--base-unit, 8px))) solid transparent;
1756
+ font-size: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1757
+ line-height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1758
+ border: calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px)))) solid transparent;
1726
1759
  }
1727
1760
  .svc-action-button:focus, .svc-action-button:hover {
1728
1761
  background-color: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
@@ -1745,9 +1778,9 @@ svc-page-navigator,
1745
1778
 
1746
1779
  .svc-page-navigator__navigator-icon {
1747
1780
  display: block;
1748
- height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
1749
- width: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
1750
- padding: calc(1.25 * var(--sjs-base-unit, var(--base-unit, 8px)));
1781
+ height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1782
+ width: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1783
+ padding: calc(1.25 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1751
1784
  border-radius: 50%;
1752
1785
  cursor: pointer;
1753
1786
  }
@@ -1756,9 +1789,9 @@ svc-page-navigator,
1756
1789
  }
1757
1790
 
1758
1791
  .svc-page-navigator__selector {
1759
- width: calc(5.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
1760
- height: calc(5.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
1761
- min-height: calc(5.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
1792
+ width: calc(5.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1793
+ height: calc(5.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1794
+ min-height: calc(5.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1762
1795
  }
1763
1796
 
1764
1797
  survey-creator .svc-page-navigator__selector:hover, survey-creator .svc-page-navigator__selector:focus,
@@ -1786,20 +1819,20 @@ survey-creator .svc-page-navigator__selector:hover .svc-page-navigator__navigato
1786
1819
  }
1787
1820
 
1788
1821
  .svc-page-navigator__popup {
1789
- min-width: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
1822
+ min-width: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1790
1823
  }
1791
1824
 
1792
1825
  .svc-tab-designer--with-page-navigator .svc-tab-designer_content {
1793
- margin-right: calc(6.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
1826
+ margin-right: calc(6.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1794
1827
  }
1795
1828
 
1796
1829
  .svc-tab-designer__page-navigator {
1797
- width: calc(5.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
1830
+ width: calc(5.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1798
1831
  position: absolute;
1799
- padding: calc(16.5 * var(--sjs-base-unit, var(--base-unit, 8px))) 0;
1832
+ padding: calc(16.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0;
1800
1833
  top: 0;
1801
1834
  bottom: 0;
1802
- right: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
1835
+ right: var(--sjs-base-unit, var(--base-unit, 8px));
1803
1836
  }
1804
1837
 
1805
1838
  .svc-creator__toolbox--right .svc-tab-designer--with-page-navigator .svc-tab-designer_content,
@@ -1807,21 +1840,21 @@ survey-creator .svc-page-navigator__selector:hover .svc-page-navigator__navigato
1807
1840
  [style*="direction:rtl"] .svc-tab-designer--with-page-navigator .svc-tab-designer_content,
1808
1841
  [style*="direction: rtl"] .svc-tab-designer--with-page-navigator .svc-tab-designer_content {
1809
1842
  margin-right: 0;
1810
- margin-left: calc(6.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
1843
+ margin-left: calc(6.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1811
1844
  }
1812
1845
  .svc-creator__toolbox--right .svc-tab-designer__page-navigator,
1813
1846
  [dir=rtl] .svc-tab-designer__page-navigator,
1814
1847
  [style*="direction:rtl"] .svc-tab-designer__page-navigator,
1815
1848
  [style*="direction: rtl"] .svc-tab-designer__page-navigator {
1816
1849
  right: unset;
1817
- left: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
1850
+ left: var(--sjs-base-unit, var(--base-unit, 8px));
1818
1851
  }
1819
1852
  svc-page-navigator-item,
1820
1853
  .svc-page-navigator-item {
1821
1854
  display: block;
1822
- width: calc(5.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
1823
- height: calc(4.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
1824
- min-height: calc(4.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
1855
+ width: calc(5.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1856
+ height: calc(4.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1857
+ min-height: calc(4.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1825
1858
  cursor: pointer;
1826
1859
  position: relative;
1827
1860
  }
@@ -1862,22 +1895,22 @@ svc-page-navigator-item,
1862
1895
  }
1863
1896
 
1864
1897
  .svc-page-navigator-item--selected .svc-page-navigator-item__dot {
1865
- width: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
1866
- height: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
1898
+ width: var(--sjs-base-unit, var(--base-unit, 8px));
1899
+ height: var(--sjs-base-unit, var(--base-unit, 8px));
1867
1900
  right: calc(50% - 1.5 * var(--sjs-base-unit, var(--base-unit, 8px)) / 2);
1868
1901
  top: calc(50% - 1.5 * var(--sjs-base-unit, var(--base-unit, 8px)) / 2);
1869
1902
  background: var(--sjs-general-backcolor, var(--background, #fff));
1870
- border: calc(0.25 * var(--sjs-base-unit, var(--base-unit, 8px))) solid var(--sjs-primary-backcolor, var(--primary, #19b394));
1903
+ border: calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px)))) solid var(--sjs-primary-backcolor, var(--primary, #19b394));
1871
1904
  }
1872
1905
 
1873
1906
  .svc-page-navigator-item__banner {
1874
1907
  overflow: hidden;
1875
1908
  white-space: nowrap;
1876
1909
  text-overflow: ellipsis;
1877
- right: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
1910
+ right: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1878
1911
  display: flex;
1879
1912
  align-items: center;
1880
- line-height: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
1913
+ line-height: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1881
1914
  animation: 0.5s ease-in;
1882
1915
  padding: 0;
1883
1916
  opacity: 0;
@@ -1886,8 +1919,8 @@ svc-page-navigator-item,
1886
1919
  .svc-page-navigator-item__banner .svc-page-navigator-item__dot {
1887
1920
  position: absolute;
1888
1921
  display: inline-block;
1889
- top: calc(1.75 * var(--sjs-base-unit, var(--base-unit, 8px)));
1890
- right: calc(1.75 * var(--sjs-base-unit, var(--base-unit, 8px)));
1922
+ top: calc(1.75 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1923
+ right: calc(1.75 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1891
1924
  }
1892
1925
 
1893
1926
  .svc-creator__toolbox--right .svc-page-navigator-item__banner,
@@ -1902,20 +1935,20 @@ svc-page-navigator-item,
1902
1935
  [style*="direction:rtl"] .svc-page-navigator-item__banner .svc-page-navigator-item__dot,
1903
1936
  [style*="direction: rtl"] .svc-page-navigator-item__banner .svc-page-navigator-item__dot {
1904
1937
  right: unset;
1905
- left: calc(1.75 * var(--sjs-base-unit, var(--base-unit, 8px)));
1938
+ left: calc(1.75 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1906
1939
  }
1907
1940
 
1908
1941
  .svc-page-navigator-item-content:not(.svc-page-navigator-item--disabled) .svc-page-navigator-item__banner .svc-page-navigator-item__dot {
1909
- width: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
1910
- height: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
1942
+ width: var(--sjs-base-unit, var(--base-unit, 8px));
1943
+ height: var(--sjs-base-unit, var(--base-unit, 8px));
1911
1944
  border: none;
1912
1945
  background: var(--sjs-primary-backcolor, var(--primary, #19b394));
1913
1946
  }
1914
1947
 
1915
1948
  .svc-page-navigator-item-content:not(.svc-page-navigator-item--selected):hover .svc-page-navigator-item__banner,
1916
1949
  .svc-page-navigator-item-content:not(.svc-page-navigator-item--selected):focus .svc-page-navigator-item__banner {
1917
- 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)));
1918
- max-width: calc(25 * var(--sjs-base-unit, var(--base-unit, 8px)));
1950
+ 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))));
1951
+ max-width: calc(25 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1919
1952
  opacity: 1;
1920
1953
  }
1921
1954
 
@@ -1927,7 +1960,7 @@ svc-page-navigator-item,
1927
1960
  [style*="direction:rtl"] .svc-page-navigator-item-content:not(.svc-page-navigator-item--selected):focus .svc-page-navigator-item__banner,
1928
1961
  [style*="direction: rtl"] .svc-page-navigator-item-content:not(.svc-page-navigator-item--selected):hover .svc-page-navigator-item__banner,
1929
1962
  [style*="direction: rtl"] .svc-page-navigator-item-content:not(.svc-page-navigator-item--selected):focus .svc-page-navigator-item__banner {
1930
- 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)));
1963
+ 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))));
1931
1964
  }
1932
1965
 
1933
1966
  .svc-page-navigator-item--disabled .svc-page-navigator-item__banner {
@@ -1939,31 +1972,31 @@ svc-page {
1939
1972
  }
1940
1973
 
1941
1974
  .svc-page {
1942
- margin-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
1975
+ margin-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1943
1976
  }
1944
1977
  .svc-page .sd-page__title {
1945
- margin: calc(2.5 * var(--sjs-base-unit, var(--base-unit, 8px))) 0 0 0;
1978
+ margin: calc(2.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0 0 0;
1946
1979
  }
1947
1980
 
1948
1981
  .svc-page__content {
1949
1982
  position: relative;
1950
- border-radius: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
1951
- 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)));
1983
+ border-radius: var(--sjs-base-unit, var(--base-unit, 8px));
1984
+ 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))));
1952
1985
  box-sizing: border-box;
1953
1986
  width: 100%;
1954
1987
  outline: none;
1955
1988
  }
1956
1989
  .svc-page__content .sd-page {
1957
1990
  margin: 0;
1958
- 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)));
1991
+ 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))));
1959
1992
  }
1960
1993
 
1961
1994
  .svc-page__content-actions {
1962
1995
  position: absolute;
1963
1996
  display: none;
1964
- top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
1997
+ top: var(--sjs-base-unit, var(--base-unit, 8px));
1965
1998
  inset-inline-end: 0;
1966
- padding: 0 calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
1999
+ padding: 0 calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1967
2000
  z-index: 1;
1968
2001
  }
1969
2002
 
@@ -1986,9 +2019,9 @@ svc-page {
1986
2019
 
1987
2020
  .svc-page__footer {
1988
2021
  overflow: visible;
1989
- margin-left: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
1990
- margin-right: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
1991
- gap: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
2022
+ margin-left: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2023
+ margin-right: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2024
+ gap: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1992
2025
  }
1993
2026
  .svc-page__footer .sv-action {
1994
2027
  flex: 1 1 0;
@@ -1999,20 +2032,20 @@ svc-page {
1999
2032
  }
2000
2033
 
2001
2034
  .svc-page__add-new-question .svc-text {
2002
- margin-left: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
2035
+ margin-left: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2003
2036
  }
2004
2037
 
2005
2038
  .svc-page__question-type-selector {
2006
2039
  appearance: none;
2007
2040
  display: flex;
2008
- height: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
2009
- padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
2041
+ height: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2042
+ padding: var(--sjs-base-unit, var(--base-unit, 8px));
2010
2043
  box-sizing: border-box;
2011
2044
  border: none;
2012
2045
  border-radius: 2px;
2013
2046
  background-color: transparent;
2014
2047
  cursor: pointer;
2015
- margin-inline-end: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
2048
+ margin-inline-end: var(--sjs-base-unit, var(--base-unit, 8px));
2016
2049
  outline: none;
2017
2050
  }
2018
2051
  .svc-page__question-type-selector use {
@@ -2029,8 +2062,8 @@ svc-page {
2029
2062
  content: " ";
2030
2063
  position: absolute;
2031
2064
  background: var(--sjs-secondary-backcolor, var(--secondary, #ff9814));
2032
- left: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
2033
- bottom: calc(11.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
2065
+ left: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2066
+ bottom: calc(11.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2034
2067
  width: calc(100% - 48px);
2035
2068
  height: 2px;
2036
2069
  }
@@ -2053,9 +2086,9 @@ svc-page {
2053
2086
  flex-wrap: nowrap;
2054
2087
  margin-top: 0;
2055
2088
  padding-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
2056
- padding-right: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
2089
+ padding-right: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2057
2090
  padding-bottom: 2px;
2058
- margin-right: calc(-2 * var(--sjs-base-unit, var(--base-unit, 8px)));
2091
+ margin-right: calc(-2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2059
2092
  margin-bottom: -2px;
2060
2093
  }
2061
2094
  .svc-row .sd-row.sd-row--multiple .sd-row--multiple {
@@ -2063,7 +2096,7 @@ svc-page {
2063
2096
  }
2064
2097
 
2065
2098
  .sd-panel .svc-row .sd-row--multiple {
2066
- padding: calc(0 * var(--sjs-base-unit, var(--base-unit, 8px)));
2099
+ padding: calc(0 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2067
2100
  box-shadow: none;
2068
2101
  border-radius: 0;
2069
2102
  padding: 2px;
@@ -2080,12 +2113,12 @@ svc-page {
2080
2113
  box-shadow: none;
2081
2114
  }
2082
2115
  .svc-row.svc-row--ghost .sd-row {
2083
- height: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
2116
+ height: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2084
2117
  }
2085
2118
  .svc-row.svc-row--ghost:last-child .sd-row {
2086
2119
  height: initial;
2087
- margin-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
2088
- margin-bottom: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
2120
+ margin-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2121
+ margin-bottom: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2089
2122
  }
2090
2123
  .svc-row.svc-row--ghost + .svc-row .sd-page__row {
2091
2124
  margin-top: 0;
@@ -2093,8 +2126,8 @@ svc-page {
2093
2126
 
2094
2127
  .svc-panel .svc-row.svc-row--ghost.svc-row.svc-row--ghost .sd-row {
2095
2128
  height: initial;
2096
- margin-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
2097
- margin-bottom: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
2129
+ margin-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2130
+ margin-bottom: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2098
2131
  }
2099
2132
 
2100
2133
  .svc-row--drag-over-top:before {
@@ -2128,13 +2161,13 @@ svc-page {
2128
2161
  .svc-carry-forward-panel {
2129
2162
  box-sizing: border-box;
2130
2163
  width: 100%;
2131
- padding: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(8 * var(--sjs-base-unit, var(--base-unit, 8px)));
2132
- border-radius: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
2164
+ padding: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(8 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2165
+ border-radius: var(--sjs-base-unit, var(--base-unit, 8px));
2133
2166
  background-color: #F8F8F8;
2134
2167
  text-align: center;
2135
2168
  font-weight: 400;
2136
- font-size: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
2137
- line-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
2169
+ font-size: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2170
+ line-height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2138
2171
  color: rgba(0, 0, 0, 0.45);
2139
2172
  }
2140
2173
 
@@ -2182,9 +2215,9 @@ svc-question {
2182
2215
  position: relative;
2183
2216
  width: 100%;
2184
2217
  height: 100%;
2185
- border-radius: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
2218
+ border-radius: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2186
2219
  box-sizing: border-box;
2187
- 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)));
2220
+ 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))));
2188
2221
  background: var(--sjs-general-backcolor, var(--background, #fff));
2189
2222
  box-shadow: var(--sjs-shadow-small, 0px 1px 2px 0px rgba(0, 0, 0, 0.15));
2190
2223
  outline: none;
@@ -2192,8 +2225,8 @@ svc-question {
2192
2225
 
2193
2226
  .svc-question__content .sd-selectbase:not(.sd-imagepicker) {
2194
2227
  overflow-x: auto;
2195
- padding-left: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
2196
- margin-left: calc(-5 * var(--sjs-base-unit, var(--base-unit, 8px)));
2228
+ padding-left: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2229
+ margin-left: calc(-5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2197
2230
  }
2198
2231
  .svc-question__content .sd-table .sd-selectbase:not(.sd-imagepicker) {
2199
2232
  overflow-x: visible;
@@ -2224,16 +2257,16 @@ svc-question {
2224
2257
  .svc-question__content-actions {
2225
2258
  position: absolute;
2226
2259
  display: none;
2227
- bottom: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
2228
- inset-inline-start: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
2229
- inset-inline-end: calc(3.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
2260
+ bottom: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2261
+ inset-inline-start: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2262
+ inset-inline-end: calc(3.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2230
2263
  }
2231
2264
  .svc-question__content-actions .sv-action--convertTo {
2232
2265
  max-width: max-content;
2233
2266
  }
2234
2267
  .svc-question__content-actions .sv-action--convertTo .sv-action-bar-item--icon {
2235
2268
  max-width: 100%;
2236
- padding: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
2269
+ padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2237
2270
  }
2238
2271
  .svc-question__content-actions .sv-action--convertTo .sv-action-bar-item__title {
2239
2272
  overflow: hidden;
@@ -2245,9 +2278,9 @@ svc-question {
2245
2278
  .svc-question__content-actions .sv-action--convertTo .sv-action-bar-item__title::after {
2246
2279
  content: " ";
2247
2280
  display: inline-block;
2248
- margin-inline-start: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
2249
- width: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
2250
- height: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
2281
+ margin-inline-start: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2282
+ width: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2283
+ height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2251
2284
  vertical-align: bottom;
2252
2285
  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");
2253
2286
  }
@@ -2268,9 +2301,9 @@ svc-question {
2268
2301
  margin-inline-end: auto;
2269
2302
  }
2270
2303
  .svc-question__content-actions .sv-dots {
2271
- width: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
2272
- margin-left: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
2273
- margin-right: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
2304
+ width: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2305
+ margin-left: var(--sjs-base-unit, var(--base-unit, 8px));
2306
+ margin-right: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2274
2307
  }
2275
2308
  .svc-question__content-actions .sv-dots.sv-action--hidden {
2276
2309
  width: 0;
@@ -2311,17 +2344,17 @@ svc-question {
2311
2344
  }
2312
2345
 
2313
2346
  .svc-question__content .sd-question.sd-question--table {
2314
- margin-top: calc(-1 * var(--sjs-base-unit, var(--base-unit, 8px)));
2315
- padding-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
2347
+ margin-top: calc(-1 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2348
+ padding-top: var(--sjs-base-unit, var(--base-unit, 8px));
2316
2349
  }
2317
2350
 
2318
2351
  .svc-dragged-element-shortcut {
2319
- height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
2320
- border-radius: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
2352
+ height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2353
+ border-radius: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2321
2354
  background-color: var(--sjs-general-backcolor, var(--background, #fff));
2322
2355
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
2323
- padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
2324
- padding-right: calc(3.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
2356
+ padding: var(--sjs-base-unit, var(--base-unit, 8px)) calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2357
+ padding-right: calc(3.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2325
2358
  cursor: grabbing;
2326
2359
  position: absolute;
2327
2360
  z-index: 1000;
@@ -2344,19 +2377,20 @@ svc-question {
2344
2377
  }
2345
2378
 
2346
2379
  .svc-dragged-element-shortcut__text {
2347
- font-family: var(--font-family, var(--font-family));
2380
+ --small-bold-font-size: var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))));
2381
+ font-family: var(--font-family);
2348
2382
  font-style: normal;
2349
2383
  font-weight: 600;
2350
- font-size: calc(0.75 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
2351
- line-height: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
2352
- margin-left: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
2353
- line-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
2384
+ font-size: calc(0.75 * var(--small-bold-font-size));
2385
+ line-height: var(--sjs-font-size, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
2386
+ margin-left: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2387
+ line-height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2354
2388
  }
2355
2389
 
2356
2390
  .svc-dragged-element-shortcut__icon {
2357
2391
  position: absolute;
2358
- width: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
2359
- height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
2392
+ width: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2393
+ height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2360
2394
  }
2361
2395
 
2362
2396
  .svc-question__content--drag-over-inside .svc-panel__placeholder_frame,
@@ -2504,7 +2538,7 @@ svc-question .sv-action-bar,
2504
2538
  top: 0;
2505
2539
  left: 0;
2506
2540
  visibility: hidden;
2507
- height: calc(3.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
2541
+ height: calc(3.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2508
2542
  width: 100%;
2509
2543
  display: flex;
2510
2544
  align-items: center;
@@ -2513,7 +2547,7 @@ svc-question .sv-action-bar,
2513
2547
 
2514
2548
  .svc-question__drag-element {
2515
2549
  width: 100%;
2516
- height: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
2550
+ height: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2517
2551
  opacity: 0.5;
2518
2552
  }
2519
2553
  .svc-question__drag-element use {
@@ -2569,12 +2603,12 @@ svc-question .sv-action-bar,
2569
2603
  border: 1px dashed var(--sjs-border-default, var(--border, #d6d6d6));
2570
2604
  width: 100%;
2571
2605
  box-sizing: border-box;
2572
- height: calc(30 * var(--sjs-base-unit, var(--base-unit, 8px)));
2606
+ height: calc(30 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2573
2607
  display: flex;
2574
2608
  align-items: center;
2575
2609
  justify-content: center;
2576
2610
  flex-direction: column;
2577
- padding: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(8 * var(--sjs-base-unit, var(--base-unit, 8px)));
2611
+ padding: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(8 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2578
2612
  flex-grow: 1;
2579
2613
  }
2580
2614
 
@@ -2587,12 +2621,12 @@ svc-question .sv-action-bar,
2587
2621
 
2588
2622
  .svc-panel__add-new-question {
2589
2623
  align-items: center;
2590
- margin-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
2624
+ margin-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2591
2625
  margin-left: 0;
2592
2626
  margin-right: 0;
2593
2627
  width: auto;
2594
- height: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
2595
- line-height: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
2628
+ height: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2629
+ line-height: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2596
2630
  vertical-align: baseline;
2597
2631
  text-align: center;
2598
2632
  cursor: pointer;
@@ -2608,8 +2642,8 @@ svc-question .sv-action-bar,
2608
2642
  align-items: center;
2609
2643
  flex-grow: 1;
2610
2644
  justify-content: center;
2611
- margin: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
2612
- line-height: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
2645
+ margin: var(--sjs-base-unit, var(--base-unit, 8px)) calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2646
+ line-height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2613
2647
  color: var(--sjs-primary-backcolor, var(--primary, #19b394));
2614
2648
  text-wrap: nowrap;
2615
2649
  }
@@ -2617,16 +2651,16 @@ svc-question .sv-action-bar,
2617
2651
  .svc-panel__question-type-selector {
2618
2652
  appearance: none;
2619
2653
  display: flex;
2620
- height: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
2621
- padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
2654
+ height: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2655
+ padding: var(--sjs-base-unit, var(--base-unit, 8px));
2622
2656
  box-sizing: border-box;
2623
2657
  border: none;
2624
2658
  border-radius: 2px;
2625
2659
  background-color: transparent;
2626
2660
  cursor: pointer;
2627
- margin-right: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
2661
+ margin-right: var(--sjs-base-unit, var(--base-unit, 8px));
2628
2662
  outline: none;
2629
- top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
2663
+ top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2630
2664
  margin: 0;
2631
2665
  position: absolute;
2632
2666
  right: 0;
@@ -2646,7 +2680,7 @@ svc-question .sv-action-bar,
2646
2680
  }
2647
2681
 
2648
2682
  .sd-panel .svc-row {
2649
- margin-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
2683
+ margin-top: var(--sjs-base-unit, var(--base-unit, 8px));
2650
2684
  }
2651
2685
  .sd-panel .svc-row:first-of-type {
2652
2686
  margin-top: 0;
@@ -2654,7 +2688,7 @@ svc-question .sv-action-bar,
2654
2688
  .sd-panel .svc-row .sd-row {
2655
2689
  margin-top: 0;
2656
2690
  margin-bottom: 0;
2657
- gap: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
2691
+ gap: var(--sjs-base-unit, var(--base-unit, 8px));
2658
2692
  }
2659
2693
 
2660
2694
  .svc-question__content .sd-element__header--location-top {
@@ -2672,7 +2706,7 @@ svc-question .sv-action-bar,
2672
2706
  padding-top: 0;
2673
2707
  }
2674
2708
  .svc-question__content .sd-table__cell--detail-panel .sd-panel__content {
2675
- padding-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
2709
+ padding-top: var(--sjs-base-unit, var(--base-unit, 8px));
2676
2710
  }
2677
2711
  .svc-question__content .sd-paneldynamic__panel-wrapper {
2678
2712
  padding: 0;
@@ -2686,14 +2720,24 @@ svc-question .sv-action-bar,
2686
2720
  }
2687
2721
 
2688
2722
  .svc-question__content .svc-carry-forward-panel {
2689
- margin-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
2723
+ margin-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2690
2724
  }
2691
2725
 
2692
2726
  .svc-question__content--ranking .svc-carry-forward-panel {
2693
2727
  margin-top: 0;
2694
2728
  }
2729
+
2730
+ .svc-required-action .sv-svg-icon use {
2731
+ fill: var(--sjs-secondary-backcolor, var(--secondary, #ff9814));
2732
+ }
2733
+
2734
+ .svc-required-action--active:not(.sv-action-bar-item--pressed):enabled:hover,
2735
+ .svc-required-action--active:not(.sv-action-bar-item--pressed):enabled:focus,
2736
+ .svc-required-action--active {
2737
+ background-color: var(--sjs-secondary-backcolor-semi-light, rgba(255, 152, 20, 0.1));
2738
+ }
2695
2739
  .svc-question__dropdown-choices {
2696
- margin-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
2740
+ margin-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2697
2741
  }
2698
2742
 
2699
2743
  .svc-question__dropdown-choice--collapsed:nth-last-child(1) {
@@ -2709,14 +2753,14 @@ svc-question .sv-action-bar,
2709
2753
  }
2710
2754
 
2711
2755
  .svc-question__dropdown-choices--wrapper .svc-action-button {
2712
- margin-left: calc(6.75 * var(--sjs-base-unit, var(--base-unit, 8px)));
2713
- margin-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
2756
+ margin-left: calc(6.75 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2757
+ margin-top: var(--sjs-base-unit, var(--base-unit, 8px));
2714
2758
  cursor: pointer;
2715
2759
  }
2716
2760
  .svc-image-question-controls {
2717
2761
  position: absolute;
2718
- top: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
2719
- right: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
2762
+ top: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2763
+ right: var(--sjs-base-unit, var(--base-unit, 8px));
2720
2764
  display: none;
2721
2765
  }
2722
2766
 
@@ -2725,7 +2769,7 @@ svc-question .sv-action-bar,
2725
2769
  }
2726
2770
 
2727
2771
  .svc-question__content--image:not(.svc-question__content--loading):not(.svc-question__content--empty) {
2728
- padding: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px))) 0 calc(8 * var(--sjs-base-unit, var(--base-unit, 8px))) 0;
2772
+ padding: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0 calc(8 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0;
2729
2773
  }
2730
2774
  .svc-question__content--image:not(.svc-question__content--loading):not(.svc-question__content--empty) .sd-image__image {
2731
2775
  border-radius: 0;
@@ -2752,7 +2796,7 @@ svc-question .sv-action-bar,
2752
2796
  position: relative;
2753
2797
  background-color: var(--sjs-general-backcolor, var(--background, #fff));
2754
2798
  width: 100%;
2755
- height: calc(27.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
2799
+ height: calc(27.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2756
2800
  border: 1px dashed var(--sjs-border-inside, var(--border-inside, rgba(0, 0, 0, 0.16)));
2757
2801
  }
2758
2802
 
@@ -2775,7 +2819,7 @@ svc-question .sv-action-bar,
2775
2819
  }
2776
2820
 
2777
2821
  .svc-question__content .sd-rating {
2778
- margin-inline-start: calc(9 * var(--sjs-base-unit, var(--base-unit, 8px)));
2822
+ margin-inline-start: calc(9 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2779
2823
  width: calc(100% - 9 * var(--sjs-base-unit, var(--base-unit, 8px)));
2780
2824
  }
2781
2825
  .svc-question__content .sd-rating.sd-rating--wrappable fieldset {
@@ -2804,13 +2848,13 @@ svc-question .sv-action-bar,
2804
2848
  }
2805
2849
  .svc-question__content .svc-rating-question-controls {
2806
2850
  display: flex;
2807
- width: calc(8 * var(--sjs-base-unit, var(--base-unit, 8px)));
2851
+ width: calc(8 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2808
2852
  min-width: auto;
2809
2853
  justify-content: flex-start;
2810
2854
  }
2811
2855
  .svc-question__content .sd-rating__item--fixed-size:focus-within {
2812
2856
  width: unset;
2813
- padding: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
2857
+ padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2814
2858
  }
2815
2859
 
2816
2860
  .svc-creator--mobile .svc-rating-question-content {
@@ -2835,23 +2879,23 @@ svc-question .sv-action-bar,
2835
2879
  .svc-item-value-wrapper {
2836
2880
  position: relative;
2837
2881
  display: flex;
2838
- gap: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
2882
+ gap: var(--sjs-base-unit, var(--base-unit, 8px));
2839
2883
  align-items: center;
2840
- margin-left: calc(-5 * var(--sjs-base-unit, var(--base-unit, 8px)));
2884
+ margin-left: calc(-5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2841
2885
  }
2842
2886
 
2843
2887
  .svc-question__dropdown-choice .svc-item-value-wrapper,
2844
2888
  .sd-selectbase .svc-item-value-wrapper {
2845
2889
  align-items: flex-start;
2846
- min-width: calc(28 * var(--sjs-base-unit, var(--base-unit, 8px)));
2890
+ min-width: calc(28 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2847
2891
  }
2848
2892
  .svc-question__dropdown-choice .svc-item-value__item,
2849
2893
  .sd-selectbase .svc-item-value__item {
2850
- padding-right: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
2894
+ padding-right: var(--sjs-base-unit, var(--base-unit, 8px));
2851
2895
  }
2852
2896
 
2853
2897
  .svc-question__content .sd-selectbase__column {
2854
- margin-left: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
2898
+ margin-left: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2855
2899
  }
2856
2900
  .svc-question__content .sd-selectbase--mobile .sd-selectbase__column,
2857
2901
  .svc-question__content .sd-selectbase__column:first-of-type,
@@ -2865,9 +2909,9 @@ svc-question .sv-action-bar,
2865
2909
  .svc-item-value--dragging {
2866
2910
  background: var(--sjs-general-backcolor, var(--background, #fff));
2867
2911
  box-shadow: var(--sjs-shadow-large, 0px 8px 16px 0px rgba(0, 0, 0, 0.1));
2868
- border-radius: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
2869
- padding-right: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
2870
- padding-left: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
2912
+ border-radius: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2913
+ padding-right: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2914
+ padding-left: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2871
2915
  -moz-user-select: none;
2872
2916
  -webkit-user-select: none;
2873
2917
  -ms-user-select: none;
@@ -2876,8 +2920,8 @@ svc-question .sv-action-bar,
2876
2920
 
2877
2921
  .svc-item-value-controls {
2878
2922
  display: flex;
2879
- margin: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) 0;
2880
- height: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
2923
+ margin: var(--sjs-base-unit, var(--base-unit, 8px)) 0;
2924
+ height: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2881
2925
  box-sizing: border-box;
2882
2926
  flex-shrink: 0;
2883
2927
  min-width: 72px;
@@ -2886,11 +2930,11 @@ svc-question .sv-action-bar,
2886
2930
 
2887
2931
  .svc-item-value-controls__button {
2888
2932
  border-radius: 50%;
2889
- padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
2933
+ padding: var(--sjs-base-unit, var(--base-unit, 8px));
2890
2934
  cursor: pointer;
2891
2935
  display: inline-block;
2892
2936
  outline: none;
2893
- height: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
2937
+ height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2894
2938
  box-sizing: content-box;
2895
2939
  }
2896
2940
  .svc-item-value-controls__button .sv-svg-icon {
@@ -2911,7 +2955,7 @@ svc-question .sv-action-bar,
2911
2955
  }
2912
2956
 
2913
2957
  .svc-item-value-controls__drag {
2914
- padding: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
2958
+ padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) var(--sjs-base-unit, var(--base-unit, 8px));
2915
2959
  cursor: move;
2916
2960
  opacity: 0.25;
2917
2961
  }
@@ -2964,7 +3008,7 @@ svc-question .sv-action-bar,
2964
3008
 
2965
3009
  .sv-ranking .svc-item-value-wrapper {
2966
3010
  align-items: center;
2967
- min-width: calc(27 * var(--sjs-base-unit, var(--base-unit, 8px)));
3011
+ min-width: calc(27 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2968
3012
  }
2969
3013
  .sv-ranking .svc-item-value__item {
2970
3014
  padding-right: 0;
@@ -3036,8 +3080,8 @@ svc-question .sv-action-bar,
3036
3080
  .svc-item-value__ghost {
3037
3081
  display: none;
3038
3082
  background: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
3039
- border-radius: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3040
- width: calc(25 * var(--sjs-base-unit, var(--base-unit, 8px)));
3083
+ border-radius: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3084
+ width: calc(25 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3041
3085
  height: 40px;
3042
3086
  z-index: 11;
3043
3087
  position: absolute;
@@ -3067,7 +3111,7 @@ svc-question .sv-action-bar,
3067
3111
  .svc-creator--mobile .svc-tab-designer .svc-question__content--ranking .svc-item-value-wrapper,
3068
3112
  .svc-creator--mobile .svc-tab-designer .sd-selectbase .svc-item-value-wrapper,
3069
3113
  .svc-creator--mobile .svc-tab-designer .svc-question__dropdown-choices .svc-item-value-wrapper {
3070
- margin-left: calc(-3 * var(--sjs-base-unit, var(--base-unit, 8px)));
3114
+ margin-left: calc(-3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3071
3115
  }
3072
3116
 
3073
3117
  .svc-creator--touch:not(.svc-creator--mobile) .svc-tab-designer .svc-question__content--ranking .svc-item-value-controls__drag-icon,
@@ -3078,7 +3122,7 @@ svc-question .sv-action-bar,
3078
3122
  .svc-creator--touch:not(.svc-creator--mobile) .svc-tab-designer .svc-question__content--ranking .svc-item-value-wrapper,
3079
3123
  .svc-creator--touch:not(.svc-creator--mobile) .svc-tab-designer .sd-selectbase .svc-item-value-wrapper,
3080
3124
  .svc-creator--touch:not(.svc-creator--mobile) .svc-tab-designer .svc-question__dropdown-choices .svc-item-value-wrapper {
3081
- margin-left: calc(-6 * var(--sjs-base-unit, var(--base-unit, 8px)));
3125
+ margin-left: calc(-6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3082
3126
  }
3083
3127
  .svc-creator--touch:not(.svc-creator--mobile) .svc-tab-designer .svc-question__content--ranking .svc-item-value-controls__drag,
3084
3128
  .svc-creator--touch:not(.svc-creator--mobile) .svc-tab-designer .sd-selectbase .svc-item-value-controls__drag,
@@ -3115,8 +3159,8 @@ svc-question .sv-action-bar,
3115
3159
 
3116
3160
  .svc-image-item-value-controls {
3117
3161
  position: absolute;
3118
- top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
3119
- right: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
3162
+ top: var(--sjs-base-unit, var(--base-unit, 8px));
3163
+ right: var(--sjs-base-unit, var(--base-unit, 8px));
3120
3164
  }
3121
3165
 
3122
3166
  .svc-image-item-value--new .svc-image-item-value-controls {
@@ -3152,8 +3196,8 @@ svc-question .sv-action-bar,
3152
3196
  display: none;
3153
3197
  cursor: move;
3154
3198
  position: absolute;
3155
- top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
3156
- left: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
3199
+ top: var(--sjs-base-unit, var(--base-unit, 8px));
3200
+ left: var(--sjs-base-unit, var(--base-unit, 8px));
3157
3201
  }
3158
3202
 
3159
3203
  .svc-question__content--selected .svc-image-item-value-wrapper:hover .svc-image-item-value-controls__drag-area-indicator {
@@ -3176,7 +3220,7 @@ svc-question .sv-action-bar,
3176
3220
  width: 100%;
3177
3221
  }
3178
3222
  .svc-image-item-value--single .sd-imagepicker__image {
3179
- height: calc(30 * var(--sjs-base-unit, var(--base-unit, 8px)));
3223
+ height: calc(30 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3180
3224
  }
3181
3225
 
3182
3226
  .svc-image-item-value__loading {
@@ -3190,20 +3234,20 @@ svc-question .sv-action-bar,
3190
3234
  }
3191
3235
 
3192
3236
  .svc-question__adorner .sd-table .sd-table__cell--column-title {
3193
- padding: 0 calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
3237
+ padding: 0 var(--sjs-base-unit, var(--base-unit, 8px));
3194
3238
  }
3195
3239
  .svc-question__adorner .sd-table .sd-table__cell--column-title .svc-matrix-cell {
3196
- padding: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
3240
+ padding: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) var(--sjs-base-unit, var(--base-unit, 8px));
3197
3241
  }
3198
3242
 
3199
3243
  .svc-matrix-cell--selected {
3200
3244
  position: absolute;
3201
- border: calc(0.25 * var(--sjs-base-unit, var(--base-unit, 8px))) solid var(--sjs-secondary-backcolor, var(--secondary, #ff9814));
3202
- border-radius: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3203
- top: calc(0 * var(--sjs-base-unit, var(--base-unit, 8px)));
3204
- left: calc(0 * var(--sjs-base-unit, var(--base-unit, 8px)));
3205
- right: calc(0 * var(--sjs-base-unit, var(--base-unit, 8px)));
3206
- bottom: calc(0 * var(--sjs-base-unit, var(--base-unit, 8px)));
3245
+ border: calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px)))) solid var(--sjs-secondary-backcolor, var(--secondary, #ff9814));
3246
+ border-radius: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3247
+ top: calc(0 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3248
+ left: calc(0 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3249
+ right: calc(0 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3250
+ bottom: calc(0 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3207
3251
  display: none;
3208
3252
  }
3209
3253
  .svc-matrix-cell--selected.svc-visible {
@@ -3211,8 +3255,8 @@ svc-question .sv-action-bar,
3211
3255
  }
3212
3256
 
3213
3257
  .svc-hovered > .svc-matrix-cell--selected:not(.svc-visible) {
3214
- 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)));
3215
- border-radius: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3258
+ 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)));
3259
+ border-radius: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3216
3260
  display: block;
3217
3261
  }
3218
3262
 
@@ -3226,13 +3270,13 @@ svc-question .sv-action-bar,
3226
3270
 
3227
3271
  .svc-matrix-cell__question-controls-button {
3228
3272
  display: block;
3229
- width: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
3230
- height: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
3273
+ width: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3274
+ height: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3231
3275
  background: var(--sjs-general-backcolor, var(--background, #fff));
3232
3276
  border: 1px solid var(--sjs-border-default, var(--border, #d6d6d6));
3233
3277
  box-sizing: border-box;
3234
3278
  border-radius: 50%;
3235
- padding: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3279
+ padding: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3236
3280
  cursor: pointer;
3237
3281
  }
3238
3282
  .svc-matrix-cell__question-controls-button use {
@@ -3245,12 +3289,12 @@ svc-question .sv-action-bar,
3245
3289
 
3246
3290
  .svc-question__content--in-popup {
3247
3291
  width: calc(100% - 25 * var(--sjs-base-unit, var(--base-unit, 8px)));
3248
- min-width: calc(70 * var(--sjs-base-unit, var(--base-unit, 8px)));
3249
- padding: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3292
+ min-width: calc(70 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3293
+ padding: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3250
3294
  }
3251
3295
 
3252
3296
  .svc-matrix-cell__popup .sv-popup__scrolling-content {
3253
- margin-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
3297
+ margin-top: var(--sjs-base-unit, var(--base-unit, 8px));
3254
3298
  padding-top: 0;
3255
3299
  }
3256
3300
  .svc-matrix-cell__popup .svc-question__content {
@@ -3261,7 +3305,7 @@ svc-question .sv-action-bar,
3261
3305
  }
3262
3306
 
3263
3307
  .svc-question__content .sd-table__cell--detail-panel {
3264
- padding-left: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
3308
+ padding-left: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3265
3309
  }
3266
3310
  .svd-test-results {
3267
3311
  font-family: var(--font-family);
@@ -3273,8 +3317,8 @@ svc-question .sv-action-bar,
3273
3317
  display: flex;
3274
3318
  justify-content: space-between;
3275
3319
  align-items: center;
3276
- padding: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
3277
- font-size: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
3320
+ padding: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3321
+ font-size: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3278
3322
  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
3279
3323
  border-bottom: 2px solid var(--sjs-border-light, var(--border-light, #eaeaea));
3280
3324
  background-color: var(--sjs-general-backcolor, var(--background, #fff));
@@ -3284,12 +3328,12 @@ svc-question .sv-action-bar,
3284
3328
  }
3285
3329
  .svd-test-results .svd-test-results__header .svd-test-results__header-types {
3286
3330
  display: flex;
3287
- gap: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
3331
+ gap: var(--sjs-base-unit, var(--base-unit, 8px));
3288
3332
  }
3289
3333
  .svd-test-results .svd-test-results__text {
3290
3334
  display: flex;
3291
- padding: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
3292
- width: calc(100% - 6 * var(--sjs-base-unit, var(--base-unit, 8px)));
3335
+ padding: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3336
+ width: calc(100% - 6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3293
3337
  overflow: auto;
3294
3338
  user-select: text;
3295
3339
  white-space: pre-wrap;
@@ -3306,7 +3350,7 @@ svc-question .sv-action-bar,
3306
3350
  }
3307
3351
  .svd-test-results .svd-test-results__table table .svd-test-results__marker {
3308
3352
  position: absolute;
3309
- top: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3353
+ top: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3310
3354
  }
3311
3355
  .svd-test-results .svd-test-results__table table .svd-test-results__marker .sv-svg-icon {
3312
3356
  transition: transform 0.2s ease-in-out;
@@ -3319,7 +3363,7 @@ svc-question .sv-action-bar,
3319
3363
  transform: rotate(90deg);
3320
3364
  }
3321
3365
  .svd-test-results .svd-test-results__table table th {
3322
- padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
3366
+ padding: var(--sjs-base-unit, var(--base-unit, 8px)) var(--sjs-base-unit, var(--base-unit, 8px));
3323
3367
  background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
3324
3368
  text-align: left;
3325
3369
  font-weight: 600;
@@ -3327,11 +3371,11 @@ svc-question .sv-action-bar,
3327
3371
  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
3328
3372
  }
3329
3373
  .svd-test-results .svd-test-results__table table th:nth-child(1) {
3330
- padding-left: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
3374
+ padding-left: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3331
3375
  }
3332
3376
  .svd-test-results .svd-test-results__table table td {
3333
- padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
3334
- max-width: calc(50 * var(--sjs-base-unit, var(--base-unit, 8px)));
3377
+ padding: var(--sjs-base-unit, var(--base-unit, 8px)) var(--sjs-base-unit, var(--base-unit, 8px));
3378
+ max-width: calc(50 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3335
3379
  overflow: auto;
3336
3380
  border-top: 2px solid var(--sjs-border-light, var(--border-light, #eaeaea));
3337
3381
  user-select: text;
@@ -3343,7 +3387,7 @@ svc-question .sv-action-bar,
3343
3387
  }
3344
3388
  .svd-test-results .svd-test-results__table table td:nth-child(2) {
3345
3389
  width: 50%;
3346
- padding-right: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
3390
+ padding-right: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3347
3391
  }
3348
3392
  .svd-test-results .svd-test-results__table table .survey-result-value {
3349
3393
  word-break: break-all;
@@ -3356,7 +3400,7 @@ svc-question .sv-action-bar,
3356
3400
  }
3357
3401
  .svc-designer-header .sd-container-modern__title {
3358
3402
  gap: 0;
3359
- column-gap: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
3403
+ column-gap: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3360
3404
  }
3361
3405
 
3362
3406
  .svc-logo-image {
@@ -3369,32 +3413,32 @@ svc-question .sv-action-bar,
3369
3413
  }
3370
3414
  .svc-logo-image .svc-image-item-value-controls {
3371
3415
  display: block;
3372
- top: calc(2.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3373
- right: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3416
+ top: calc(2.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3417
+ right: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3374
3418
  }
3375
3419
 
3376
3420
  .svc-logo-image__loading {
3377
- width: calc(8 * var(--sjs-base-unit, var(--base-unit, 8px)));
3378
- height: calc(8 * var(--sjs-base-unit, var(--base-unit, 8px)));
3379
- padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
3421
+ width: calc(8 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3422
+ height: calc(8 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3423
+ padding: var(--sjs-base-unit, var(--base-unit, 8px));
3380
3424
  box-sizing: border-box;
3381
- margin-right: calc(-2 * var(--sjs-base-unit, var(--base-unit, 8px)));
3425
+ margin-right: calc(-2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3382
3426
  }
3383
3427
 
3384
3428
  .svc-logo-image-placeholder {
3385
- font-size: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
3429
+ font-size: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3386
3430
  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
3387
3431
  opacity: 0.25;
3388
3432
  white-space: nowrap;
3389
3433
  word-break: keep-all;
3390
3434
  padding: 0;
3391
- width: calc(8 * var(--sjs-base-unit, var(--base-unit, 8px)));
3392
- height: calc(8 * var(--sjs-base-unit, var(--base-unit, 8px)));
3435
+ width: calc(8 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3436
+ height: calc(8 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3393
3437
  display: flex;
3394
3438
  justify-content: center;
3395
3439
  align-items: center;
3396
- margin-right: calc(-2 * var(--sjs-base-unit, var(--base-unit, 8px)));
3397
- border-radius: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
3440
+ margin-right: calc(-2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3441
+ border-radius: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3398
3442
  }
3399
3443
  .svc-logo-image-placeholder:hover {
3400
3444
  background-color: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
@@ -3404,8 +3448,8 @@ svc-question .sv-action-bar,
3404
3448
  fill: var(--sjs-primary-backcolor, var(--primary, #19b394));
3405
3449
  }
3406
3450
  .svc-logo-image-placeholder svg {
3407
- width: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
3408
- height: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
3451
+ width: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3452
+ height: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3409
3453
  }
3410
3454
 
3411
3455
  .svc-logo-image-placeholder use {
@@ -3446,7 +3490,7 @@ svc-question .sv-action-bar,
3446
3490
  }
3447
3491
 
3448
3492
  .svc-link-value-button {
3449
- margin-left: calc(-2 * var(--sjs-base-unit, var(--base-unit, 8px)));
3493
+ margin-left: calc(-2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3450
3494
  }
3451
3495
 
3452
3496
  .svc-question-link__clear-button {
@@ -3460,7 +3504,7 @@ svc-question .sv-action-bar,
3460
3504
  background-color: var(--sjs-special-red-light, var(--red-light, rgba(230, 10, 62, 0.1)));
3461
3505
  }
3462
3506
  .svc-property-panel__item {
3463
- margin: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))) 0;
3507
+ margin: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0;
3464
3508
  width: 100%;
3465
3509
  }
3466
3510
  .svc-property-panel__group {
@@ -3468,7 +3512,7 @@ svc-question .sv-action-bar,
3468
3512
  -moz-appearance: none;
3469
3513
  appearance: none;
3470
3514
  width: 100%;
3471
- padding: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
3515
+ padding: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3472
3516
  border: none;
3473
3517
  outline: none;
3474
3518
  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
@@ -3477,7 +3521,7 @@ svc-question .sv-action-bar,
3477
3521
  background: var(--sjs-general-backcolor, var(--background, #fff));
3478
3522
  box-shadow: inset 0px -1px 0px var(--sjs-border-default, var(--border, #d6d6d6));
3479
3523
  font-family: var(--font-family);
3480
- font-size: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
3524
+ font-size: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3481
3525
  }
3482
3526
 
3483
3527
  .svc-property-panel__group:disabled,
@@ -3501,9 +3545,9 @@ svc-question .sv-action-bar,
3501
3545
  background-color: var(--sjs-general-backcolor, var(--background, #fff));
3502
3546
  }
3503
3547
  .svc-tabbed-menu-item {
3504
- padding: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
3505
- height: calc(8 * var(--sjs-base-unit, var(--base-unit, 8px)));
3506
- line-height: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
3548
+ padding: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3549
+ height: calc(8 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3550
+ line-height: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3507
3551
  box-sizing: border-box;
3508
3552
  cursor: pointer;
3509
3553
  }
@@ -3537,7 +3581,7 @@ svc-question .sv-action-bar,
3537
3581
 
3538
3582
  .svc-tabbed-menu-item .svc-tabbed-menu-item__text {
3539
3583
  white-space: nowrap;
3540
- line-height: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
3584
+ line-height: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3541
3585
  }
3542
3586
 
3543
3587
  .svc-tabbed-menu-item-container .sv-dots__item {
@@ -3548,7 +3592,7 @@ svc-question .sv-action-bar,
3548
3592
  white-space: nowrap;
3549
3593
  overflow: hidden;
3550
3594
  align-items: center;
3551
- height: calc(8 * var(--sjs-base-unit, var(--base-unit, 8px)));
3595
+ height: calc(8 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3552
3596
  }
3553
3597
 
3554
3598
  .svc-tabbed-menu-wrapper {
@@ -3561,12 +3605,12 @@ svc-question .sv-action-bar,
3561
3605
  align-items: center;
3562
3606
  z-index: 20;
3563
3607
  outline: none;
3564
- padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3608
+ padding: var(--sjs-base-unit, var(--base-unit, 8px)) calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3565
3609
  }
3566
3610
  .svc-toolbox__item sv-svg-icon,
3567
3611
  .svc-toolbox__item .sv-svg-icon {
3568
3612
  display: block;
3569
- height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
3613
+ height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3570
3614
  }
3571
3615
 
3572
3616
  .svc-toolbox__item-container {
@@ -3582,13 +3626,13 @@ svc-question .sv-action-bar,
3582
3626
  box-sizing: border-box;
3583
3627
  align-items: center;
3584
3628
  margin-right: 0;
3585
- margin-left: calc(-1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3629
+ margin-left: calc(-1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3586
3630
  }
3587
3631
  .svc-toolbox__item-banner .svc-toolbox__item-icon {
3588
3632
  position: absolute;
3589
3633
  display: block;
3590
- left: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3591
- top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
3634
+ left: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3635
+ top: var(--sjs-base-unit, var(--base-unit, 8px));
3592
3636
  }
3593
3637
  .svc-toolbox__item-banner .svc-toolbox__item-title {
3594
3638
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
@@ -3606,8 +3650,8 @@ svc-question .sv-action-bar,
3606
3650
  [style*="direction: rtl"] .svc-toolbox__item:hover .svc-toolbox__item-banner,
3607
3651
  [style*="direction: rtl"] .svc-toolbox__item:focus .svc-toolbox__item-banner {
3608
3652
  flex-direction: row-reverse;
3609
- padding-right: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3610
- padding-left: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
3653
+ padding-right: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3654
+ padding-left: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3611
3655
  margin-left: 0;
3612
3656
  margin-right: 0;
3613
3657
  transform: translateX(calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px))));
@@ -3620,8 +3664,8 @@ svc-question .sv-action-bar,
3620
3664
  [style*="direction:rtl"] .svc-toolbox__item:focus .svc-toolbox__item-banner .svc-toolbox__item-title,
3621
3665
  [style*="direction: rtl"] .svc-toolbox__item:hover .svc-toolbox__item-banner .svc-toolbox__item-title,
3622
3666
  [style*="direction: rtl"] .svc-toolbox__item:focus .svc-toolbox__item-banner .svc-toolbox__item-title {
3623
- padding-left: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
3624
- padding-right: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
3667
+ padding-left: var(--sjs-base-unit, var(--base-unit, 8px));
3668
+ padding-right: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3625
3669
  }
3626
3670
  .svc-creator__toolbox--right .svc-toolbox__item,
3627
3671
  [dir=rtl] .svc-toolbox__item,
@@ -3652,38 +3696,39 @@ svc-question .sv-action-bar,
3652
3696
  [style*="direction:rtl"] .svc-toolbox__item-banner .svc-toolbox__item-icon,
3653
3697
  [style*="direction: rtl"] .svc-toolbox__item-banner .svc-toolbox__item-icon {
3654
3698
  left: auto;
3655
- right: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3699
+ right: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3656
3700
  }
3657
3701
 
3658
3702
  .svc-toolbox__item-title {
3659
- font-family: var(--font-family, var(--font-family));
3703
+ --small-bold-font-size: var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))));
3704
+ font-family: var(--font-family);
3660
3705
  font-style: normal;
3661
3706
  font-weight: 600;
3662
- font-size: calc(0.75 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
3663
- line-height: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
3707
+ font-size: calc(0.75 * var(--small-bold-font-size));
3708
+ line-height: var(--sjs-font-size, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
3664
3709
  display: block;
3665
- padding-left: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
3666
- padding-right: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3710
+ padding-left: var(--sjs-base-unit, var(--base-unit, 8px));
3711
+ padding-right: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3667
3712
  white-space: nowrap;
3668
3713
  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
3669
3714
  }
3670
3715
 
3671
3716
  .svc-toolbox__item:hover .svc-toolbox__item-banner,
3672
3717
  .svc-toolbox__item:focus .svc-toolbox__item-banner {
3673
- max-width: calc(100 * var(--sjs-base-unit, var(--base-unit, 8px)));
3674
- padding-left: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3675
- padding-right: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
3718
+ max-width: calc(100 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3719
+ padding-left: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3720
+ padding-right: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3676
3721
  opacity: 1;
3677
3722
  }
3678
3723
  .svc-toolbox__item:hover .svc-toolbox__item-banner .svc-toolbox__item-title,
3679
3724
  .svc-toolbox__item:focus .svc-toolbox__item-banner .svc-toolbox__item-title {
3680
- padding-left: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
3725
+ padding-left: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3681
3726
  }
3682
3727
 
3683
3728
  .svc-toolbox:not(.svc-toolbox--compact) .svc-toolbox__item:not(.sv-dots):focus,
3684
3729
  .svc-toolbox:not(.svc-toolbox--compact) .svc-toolbox__item:not(.sv-dots):hover {
3685
3730
  overflow: hidden;
3686
- border-radius: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3731
+ border-radius: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3687
3732
  background-color: var(--sjs-general-backcolor, var(--background, #fff));
3688
3733
  box-shadow: var(--sjs-shadow-medium, 0px 2px 6px 0px rgba(0, 0, 0, 0.1));
3689
3734
  transition: 0.1s ease-in-out;
@@ -3701,7 +3746,7 @@ svc-question .sv-action-bar,
3701
3746
  .svc-toolbox__tool .sv-dots__item:focus:enabled,
3702
3747
  .svc-toolbox__tool .sv-dots__item.sv-action-bar-item--pressed {
3703
3748
  background-color: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
3704
- border-radius: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3749
+ border-radius: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3705
3750
  }
3706
3751
  .svc-toolbox__tool .sv-dots__item:hover:enabled .sv-svg-icon use,
3707
3752
  .svc-toolbox__tool .sv-dots__item:focus:enabled .sv-svg-icon use,
@@ -3719,10 +3764,10 @@ svc-question .sv-action-bar,
3719
3764
  display: none;
3720
3765
  }
3721
3766
  .svc-toolbox-popup .sv-list__item .sv-list__item-body {
3722
- padding-top: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3723
- padding-bottom: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3724
- padding-inline-start: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
3725
- padding-inline-end: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3767
+ padding-top: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3768
+ padding-bottom: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3769
+ padding-inline-start: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3770
+ padding-inline-end: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3726
3771
  }
3727
3772
 
3728
3773
  .svc-toolbox .svc-toolbox__tool--pressed .svc-toolbox__item:not(.sv-dots),
@@ -3747,14 +3792,14 @@ svc-toolbox {
3747
3792
 
3748
3793
  .svc-toolbox {
3749
3794
  height: 100%;
3750
- padding: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
3795
+ padding: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3751
3796
  box-sizing: border-box;
3752
3797
  overflow-y: auto;
3753
3798
  direction: rtl;
3754
3799
  }
3755
3800
 
3756
3801
  .svc-toolbox--compact {
3757
- width: calc(10.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3802
+ width: calc(10.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3758
3803
  overflow: visible;
3759
3804
  direction: ltr;
3760
3805
  }
@@ -3775,25 +3820,25 @@ svc-toolbox {
3775
3820
  }
3776
3821
 
3777
3822
  .svc-toolbox__tool .sv-dots__item {
3778
- width: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
3779
- margin-top: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3823
+ width: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3824
+ margin-top: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3780
3825
  }
3781
3826
 
3782
3827
  .svc-toolbox__category-separator {
3783
3828
  height: 1px;
3784
- width: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
3829
+ width: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3785
3830
  background-color: var(--sjs-border-default, var(--border, #d6d6d6));
3786
- margin: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) 0 calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3831
+ margin: var(--sjs-base-unit, var(--base-unit, 8px)) 0 calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3787
3832
  }
3788
3833
 
3789
3834
  .svc-toolbox__category-header {
3790
- height: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3791
- padding: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3835
+ height: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3836
+ padding: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3792
3837
  background: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
3793
3838
  border-bottom: 1px solid var(--sjs-border-default, var(--border, #d6d6d6));
3794
3839
  box-sizing: border-box;
3795
3840
  width: 100%;
3796
- min-width: calc(20 * var(--sjs-base-unit, var(--base-unit, 8px)));
3841
+ min-width: calc(20 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3797
3842
  position: relative;
3798
3843
  }
3799
3844
 
@@ -3803,9 +3848,9 @@ svc-toolbox {
3803
3848
 
3804
3849
  .svc-toolbox__category-title {
3805
3850
  font-family: var(--font-family);
3806
- font-size: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3851
+ font-size: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3807
3852
  font-weight: bold;
3808
- line-height: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
3853
+ line-height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3809
3854
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
3810
3855
  vertical-align: middle;
3811
3856
  display: block;
@@ -3813,8 +3858,8 @@ svc-toolbox {
3813
3858
 
3814
3859
  .svc-toolbox__category-header__controls {
3815
3860
  position: absolute;
3816
- right: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
3817
- top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
3861
+ right: var(--sjs-base-unit, var(--base-unit, 8px));
3862
+ top: var(--sjs-base-unit, var(--base-unit, 8px));
3818
3863
  display: none;
3819
3864
  }
3820
3865
 
@@ -3831,7 +3876,7 @@ svc-toolbox {
3831
3876
  }
3832
3877
  .svc-toolbox__tool .sv-action__content {
3833
3878
  display: flex;
3834
- padding-top: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3879
+ padding-top: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3835
3880
  flex-direction: column;
3836
3881
  align-items: flex-start;
3837
3882
  }
@@ -3874,9 +3919,9 @@ svc-toolbox {
3874
3919
  .svc-side-bar__container-header {
3875
3920
  background: var(--sjs-general-backcolor, var(--background, #fff));
3876
3921
  box-shadow: inset 0px -2px 0px var(--sjs-primary-backcolor, var(--primary, #19b394));
3877
- line-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
3922
+ line-height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3878
3923
  display: flex;
3879
- height: calc(8 * var(--sjs-base-unit, var(--base-unit, 8px)));
3924
+ height: calc(8 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3880
3925
  }
3881
3926
 
3882
3927
  .svc-side-bar__container-content {
@@ -3893,7 +3938,7 @@ svc-toolbox {
3893
3938
  flex-direction: column;
3894
3939
  align-items: flex-start;
3895
3940
  width: 100%;
3896
- padding: 0px calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
3941
+ padding: 0px calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3897
3942
  box-sizing: border-box;
3898
3943
  background: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
3899
3944
  box-shadow: inset 0px -1px 0px var(--sjs-border-default, var(--border, #d6d6d6));
@@ -3901,26 +3946,23 @@ svc-toolbox {
3901
3946
 
3902
3947
  .svc-side-bar__container-title {
3903
3948
  display: flex;
3904
- line-height: calc(4.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3949
+ line-height: calc(4.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3905
3950
  flex-grow: 1;
3906
3951
  flex-shrink: 0;
3907
3952
  justify-content: flex-end;
3908
- padding: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
3953
+ padding: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3909
3954
  }
3910
3955
 
3911
3956
  .svc-side-bar__container-actions {
3912
3957
  width: 100%;
3913
- padding: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
3958
+ box-sizing: border-box;
3959
+ padding: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) var(--sjs-base-unit, var(--base-unit, 8px));
3914
3960
  }
3915
3961
  .svc-side-bar__container-actions .sv-action-bar {
3916
3962
  justify-content: flex-end;
3917
3963
  padding: 0;
3918
3964
  }
3919
3965
 
3920
- .svc-side-bar__container-close {
3921
- display: none;
3922
- }
3923
-
3924
3966
  .svc-flex-column.svc-side-bar__wrapper {
3925
3967
  width: auto;
3926
3968
  border-left: 1px solid var(--sjs-border-default, var(--border, #d6d6d6));
@@ -3956,6 +3998,17 @@ svc-toolbox {
3956
3998
  max-width: 100%;
3957
3999
  }
3958
4000
 
4001
+ .sv-action--object-selector {
4002
+ max-width: 70%;
4003
+ }
4004
+ .sv-action--object-selector .sv-action-bar-item {
4005
+ flex-shrink: 1;
4006
+ }
4007
+ .sv-action--object-selector .sv-action-bar-item__title {
4008
+ overflow: hidden;
4009
+ text-overflow: ellipsis;
4010
+ }
4011
+
3959
4012
  .svc-full-container.svc-creator__side-bar--left {
3960
4013
  flex-direction: row-reverse;
3961
4014
  }
@@ -3979,40 +4032,11 @@ svc-toolbox {
3979
4032
  margin-inline-end: auto;
3980
4033
  }
3981
4034
 
3982
- .sv-mobile-side-bar .svc-side-bar__container-actions {
3983
- display: none;
3984
- }
3985
- .sv-mobile-side-bar .svc-side-bar__container-title {
3986
- display: block;
3987
- font-weight: bold;
3988
- font-size: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
3989
- line-height: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
3990
- flex: unset;
3991
- }
3992
- .sv-mobile-side-bar .svc-side-bar__wrapper {
3993
- top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
3994
- background: none;
3995
- }
3996
- .sv-mobile-side-bar .svc-side-bar__container {
4035
+ .sv-mobile-side-bar .svc-flyout-side-bar .svc-side-bar__wrapper {
3997
4036
  width: 100%;
3998
- min-width: 338px;
3999
- }
4000
- .sv-mobile-side-bar .svc-side-bar__container-header {
4001
- border: unset;
4002
- box-shadow: 0px calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
4003
- border-radius: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))) 0px 0px;
4004
- }
4005
- .sv-mobile-side-bar .svc-side-bar__container-content {
4006
- height: calc(100% - 20 * var(--sjs-base-unit, var(--base-unit, 8px)));
4007
- background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
4008
4037
  }
4009
- .sv-mobile-side-bar .svc-side-bar__container-close {
4010
- display: flex;
4011
- background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
4012
- }
4013
- .sv-mobile-side-bar .svc-side-bar__container-close .svc-side-bar__container-close-button {
4038
+ .sv-mobile-side-bar .svc-side-bar__container {
4014
4039
  width: 100%;
4015
- margin: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
4016
4040
  }
4017
4041
 
4018
4042
  .svc-side-bar .svc-toolbox {
@@ -4021,7 +4045,7 @@ svc-toolbox {
4021
4045
  .spg-action-bar {
4022
4046
  display: flex;
4023
4047
  box-sizing: content-box;
4024
- padding-right: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
4048
+ padding-right: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4025
4049
  position: relative;
4026
4050
  align-items: center;
4027
4051
  margin-left: auto;
@@ -4037,15 +4061,15 @@ svc-toolbox {
4037
4061
  -moz-appearance: none;
4038
4062
  appearance: none;
4039
4063
  display: flex;
4040
- padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
4064
+ padding: var(--sjs-base-unit, var(--base-unit, 8px));
4041
4065
  box-sizing: border-box;
4042
4066
  border: none;
4043
4067
  color: var(--sjs-primary-backcolor, var(--primary, #19b394));
4044
4068
  font-weight: 600;
4045
- font-size: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
4046
- line-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
4069
+ font-size: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4070
+ line-height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4047
4071
  font-family: var(--font-family);
4048
- border-radius: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
4072
+ border-radius: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4049
4073
  background-color: transparent;
4050
4074
  cursor: pointer;
4051
4075
  }
@@ -4076,7 +4100,7 @@ svc-toolbox {
4076
4100
  }
4077
4101
 
4078
4102
  button.spg-action-button--large {
4079
- padding: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
4103
+ padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4080
4104
  }
4081
4105
 
4082
4106
  .spg-action-button:disabled {
@@ -4094,7 +4118,7 @@ button.spg-action-button--large {
4094
4118
  }
4095
4119
 
4096
4120
  .spg-action-button--text {
4097
- padding: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
4121
+ padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4098
4122
  }
4099
4123
 
4100
4124
  .spg-question {
@@ -4111,9 +4135,9 @@ button.spg-action-button--large {
4111
4135
  .spg-question__title {
4112
4136
  width: 100%;
4113
4137
  margin: 0;
4114
- padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) 0;
4115
- line-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
4116
- font-size: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
4138
+ padding: var(--sjs-base-unit, var(--base-unit, 8px)) 0;
4139
+ line-height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4140
+ font-size: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4117
4141
  font-family: var(--font-family);
4118
4142
  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
4119
4143
  font-weight: normal;
@@ -4142,35 +4166,35 @@ button.spg-action-button--large {
4142
4166
  align-items: flex-end;
4143
4167
  padding: 0px;
4144
4168
  font-family: var(--font-family);
4145
- line-height: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
4146
- font-size: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
4169
+ line-height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4170
+ font-size: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4147
4171
  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
4148
4172
  position: absolute;
4149
- inset-inline-end: calc(0.75 * var(--sjs-base-unit, var(--base-unit, 8px)));
4150
- inset-block-end: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
4173
+ inset-inline-end: calc(0.75 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4174
+ inset-block-end: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4151
4175
  }
4152
4176
 
4153
4177
  .spg-question__description {
4154
- line-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
4155
- font-size: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
4178
+ line-height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4179
+ font-size: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4156
4180
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
4157
- padding-bottom: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
4181
+ padding-bottom: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4158
4182
  white-space: normal;
4159
4183
  }
4160
4184
 
4161
4185
  .spg-row-narrow__question {
4162
- margin-top: calc(-2 * var(--sjs-base-unit, var(--base-unit, 8px)));
4186
+ margin-top: calc(-2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4163
4187
  }
4164
4188
 
4165
4189
  .spg-row--multiple > div > .spg-row-narrow__question {
4166
- margin-top: calc(-1 * var(--sjs-base-unit, var(--base-unit, 8px)));
4190
+ margin-top: calc(-1 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4167
4191
  }
4168
4192
 
4169
4193
  .spg-question--location--left {
4170
4194
  flex-direction: row;
4171
4195
  background: var(--sjs-general-backcolor, var(--background, #fff));
4172
4196
  box-shadow: inset 0 0 0 1px var(--sjs-border-inside, var(--border-inside, rgba(0, 0, 0, 0.16)));
4173
- line-height: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
4197
+ line-height: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4174
4198
  vertical-align: middle;
4175
4199
  align-items: stretch;
4176
4200
  }
@@ -4187,7 +4211,7 @@ button.spg-action-button--large {
4187
4211
  align-items: center;
4188
4212
  }
4189
4213
  .spg-question__header--location--left .spg-question__title {
4190
- padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
4214
+ padding: var(--sjs-base-unit, var(--base-unit, 8px)) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4191
4215
  border-right: 1px solid var(--sjs-border-default, var(--border, #d6d6d6));
4192
4216
  display: inline-block;
4193
4217
  }
@@ -4206,15 +4230,15 @@ button.spg-action-button--large {
4206
4230
 
4207
4231
  .spg-row--multiple {
4208
4232
  display: flex;
4209
- gap: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
4233
+ gap: var(--sjs-base-unit, var(--base-unit, 8px));
4210
4234
  flex-wrap: wrap;
4211
4235
  }
4212
4236
  .spg-row--multiple > div {
4213
4237
  flex-grow: 1;
4214
- min-width: calc(25.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
4238
+ min-width: calc(25.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4215
4239
  }
4216
4240
  .spg-row--multiple > div .spg-question__header--location--left {
4217
- min-width: calc(8 * var(--sjs-base-unit, var(--base-unit, 8px)));
4241
+ min-width: calc(8 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4218
4242
  }
4219
4243
  .spg-row--multiple > div input {
4220
4244
  min-width: max(17 * var(--sjs-base-unit, var(--base-unit, 8px)), 100%);
@@ -4222,33 +4246,33 @@ button.spg-action-button--large {
4222
4246
  }
4223
4247
 
4224
4248
  .spg-question__erbox {
4225
- 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)));
4249
+ 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))));
4226
4250
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
4227
4251
  background-color: var(--sjs-special-red-light, var(--red-light, rgba(230, 10, 62, 0.1)));
4228
- border-radius: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
4229
- line-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
4252
+ border-radius: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4253
+ line-height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4230
4254
  }
4231
4255
  .spg-question__erbox > div {
4232
4256
  display: flex;
4233
- gap: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
4257
+ gap: var(--sjs-base-unit, var(--base-unit, 8px));
4234
4258
  }
4235
4259
 
4236
4260
  .spg-question__erbox-icon {
4237
4261
  display: block;
4238
4262
  flex-grow: 0;
4239
4263
  flex-shrink: 0;
4240
- width: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
4241
- height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
4242
- background-size: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
4264
+ width: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4265
+ height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4266
+ background-size: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4243
4267
  background-repeat: no-repeat;
4244
4268
  background-position: 0 0;
4245
- line-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
4269
+ line-height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4246
4270
  white-space: normal;
4247
4271
  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");
4248
4272
  }
4249
4273
 
4250
4274
  .spg-question__erbox--location--bottom {
4251
- margin-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
4275
+ margin-top: var(--sjs-base-unit, var(--base-unit, 8px));
4252
4276
  }
4253
4277
 
4254
4278
  .spg-input {
@@ -4259,12 +4283,12 @@ button.spg-action-button--large {
4259
4283
  background-color: var(--sjs-general-backcolor, var(--background, #fff));
4260
4284
  box-sizing: border-box;
4261
4285
  width: 100%;
4262
- height: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
4286
+ height: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4263
4287
  border: none;
4264
4288
  box-shadow: inset 0 0 0 1px var(--sjs-border-inside, var(--border-inside, rgba(0, 0, 0, 0.16)));
4265
- padding: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
4289
+ padding: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4266
4290
  outline: none;
4267
- font-size: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
4291
+ font-size: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4268
4292
  font-family: var(--font-family);
4269
4293
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
4270
4294
  }
@@ -4289,7 +4313,7 @@ button.spg-action-button--large {
4289
4313
  .spg-input[type=color] {
4290
4314
  padding-left: 0;
4291
4315
  padding-right: 0;
4292
- min-width: calc(8 * var(--sjs-base-unit, var(--base-unit, 8px)));
4316
+ min-width: calc(8 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4293
4317
  }
4294
4318
 
4295
4319
  .spg-input__edit-button {
@@ -4299,9 +4323,9 @@ button.spg-action-button--large {
4299
4323
  background: var(--sjs-general-backcolor, var(--background, #fff));
4300
4324
  border: none;
4301
4325
  outline: none;
4302
- width: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
4303
- height: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
4304
- padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
4326
+ width: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4327
+ height: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4328
+ padding: var(--sjs-base-unit, var(--base-unit, 8px));
4305
4329
  line-height: 0;
4306
4330
  }
4307
4331
  .spg-input__edit-button:hover {
@@ -4328,9 +4352,9 @@ button.spg-action-button--large {
4328
4352
  display: flex;
4329
4353
  justify-content: space-between;
4330
4354
  cursor: default;
4331
- padding: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
4355
+ padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4332
4356
  align-items: center;
4333
- gap: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
4357
+ gap: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4334
4358
  box-shadow: 0 0 0 1px inset var(--sjs-border-inside, var(--border-inside, rgba(0, 0, 0, 0.16)));
4335
4359
  }
4336
4360
 
@@ -4341,7 +4365,7 @@ button.spg-action-button--large {
4341
4365
  height: auto;
4342
4366
  }
4343
4367
  .spg-input-container--multiline sv-ng-question-comment {
4344
- height: calc(9 * var(--sjs-base-unit, var(--base-unit, 8px)));
4368
+ height: calc(9 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4345
4369
  }
4346
4370
  .spg-input-container--multiline .spg-input-container__input {
4347
4371
  box-sizing: border-box;
@@ -4351,13 +4375,13 @@ button.spg-action-button--large {
4351
4375
  .spg-input-container__input {
4352
4376
  flex-grow: 1;
4353
4377
  width: 100%;
4354
- padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
4378
+ padding: var(--sjs-base-unit, var(--base-unit, 8px)) calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4355
4379
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
4356
- font-size: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
4380
+ font-size: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4357
4381
  font-family: var(--font-family);
4358
4382
  outline: none;
4359
4383
  border: none;
4360
- line-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
4384
+ line-height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4361
4385
  background-color: transparent;
4362
4386
  }
4363
4387
 
@@ -4367,15 +4391,15 @@ button.spg-action-button--large {
4367
4391
 
4368
4392
  .spg-input-container__buttons-container {
4369
4393
  display: flex;
4370
- gap: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
4394
+ gap: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4371
4395
  }
4372
4396
 
4373
4397
  .spg-dropdown {
4374
4398
  border-radius: 0;
4375
4399
  display: flex;
4376
- padding-right: calc(5.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
4400
+ padding-right: calc(5.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4377
4401
  line-height: normal;
4378
- background-position: right calc(1.625 * var(--sjs-base-unit, var(--base-unit, 8px))) top 50%, 0 0;
4402
+ background-position: right calc(1.625 * (var(--sjs-base-unit, var(--base-unit, 8px)))) top 50%, 0 0;
4379
4403
  }
4380
4404
 
4381
4405
  .spg-dropdown__filter-string-input {
@@ -4387,11 +4411,11 @@ button.spg-action-button--large {
4387
4411
  }
4388
4412
 
4389
4413
  .spg-comment {
4390
- height: calc(9 * var(--sjs-base-unit, var(--base-unit, 8px)));
4414
+ height: calc(9 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4391
4415
  max-width: 100%;
4392
- min-width: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
4393
- min-height: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
4394
- line-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
4416
+ min-width: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4417
+ min-height: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4418
+ line-height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4395
4419
  }
4396
4420
 
4397
4421
  .spg-panel__title {
@@ -4400,7 +4424,7 @@ button.spg-action-button--large {
4400
4424
  appearance: none;
4401
4425
  box-sizing: border-box;
4402
4426
  width: 100%;
4403
- padding: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
4427
+ padding: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4404
4428
  border: none;
4405
4429
  outline: none;
4406
4430
  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
@@ -4409,7 +4433,7 @@ button.spg-action-button--large {
4409
4433
  background-color: var(--sjs-general-backcolor, var(--background, #fff));
4410
4434
  box-shadow: inset 0px -1px 0px var(--sjs-border-default, var(--border, #d6d6d6));
4411
4435
  font-family: var(--font-family);
4412
- font-size: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
4436
+ font-size: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4413
4437
  font-weight: 400;
4414
4438
  margin: 0;
4415
4439
  }
@@ -4436,7 +4460,7 @@ button.spg-action-button--large {
4436
4460
  flex-direction: column;
4437
4461
  align-items: flex-start;
4438
4462
  width: 100%;
4439
- padding: 0 calc(4 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
4463
+ padding: 0 calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4440
4464
  box-sizing: border-box;
4441
4465
  background: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
4442
4466
  box-shadow: inset 0px -1px 0px var(--sjs-border-default, var(--border, #d6d6d6));
@@ -4444,14 +4468,14 @@ button.spg-action-button--large {
4444
4468
 
4445
4469
  .spg-panel__content .spg-row {
4446
4470
  width: 100%;
4447
- margin-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
4471
+ margin-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4448
4472
  }
4449
4473
  .spg-panel__content .spg-row--multiple {
4450
- margin-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
4474
+ margin-top: var(--sjs-base-unit, var(--base-unit, 8px));
4451
4475
  }
4452
4476
 
4453
4477
  .sv-mobile-side-bar .spg-panel__content {
4454
- padding: 0 calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
4478
+ padding: 0 calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4455
4479
  }
4456
4480
 
4457
4481
  .spg-question__nopadding .spg-panel__content {
@@ -4461,7 +4485,7 @@ button.spg-action-button--large {
4461
4485
 
4462
4486
  .spg-checkbox {
4463
4487
  cursor: pointer;
4464
- margin-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
4488
+ margin-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4465
4489
  }
4466
4490
 
4467
4491
  .spg-checkbox--disabled {
@@ -4476,17 +4500,17 @@ button.spg-action-button--large {
4476
4500
 
4477
4501
  .spg-checkbox__caption {
4478
4502
  font-family: var(--font-family);
4479
- font-size: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
4503
+ font-size: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4480
4504
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
4481
- line-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
4505
+ line-height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4482
4506
  }
4483
4507
 
4484
4508
  .spg-checkbox__rectangle {
4485
4509
  background: var(--sjs-general-backcolor, var(--background, #fff));
4486
4510
  border: 1px solid var(--sjs-border-default, var(--border, #d6d6d6));
4487
4511
  box-sizing: border-box;
4488
- width: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
4489
- height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
4512
+ width: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4513
+ height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4490
4514
  flex-shrink: 0;
4491
4515
  padding: 1px 1px;
4492
4516
  }
@@ -4510,10 +4534,10 @@ button.spg-action-button--large {
4510
4534
 
4511
4535
  .spg-checkbox--checked .spg-checkbox__svg {
4512
4536
  display: block;
4513
- width: calc(2.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
4514
- height: calc(2.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
4537
+ width: calc(2.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4538
+ height: calc(2.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4515
4539
  background-repeat: no-repeat;
4516
- background-size: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
4540
+ background-size: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4517
4541
  fill: var(--sjs-primary-backcolor, var(--primary, #19b394));
4518
4542
  }
4519
4543
 
@@ -4543,11 +4567,11 @@ button.spg-action-button--large {
4543
4567
  .spg-selectbase__label {
4544
4568
  display: flex;
4545
4569
  align-items: flex-start;
4546
- gap: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
4570
+ gap: var(--sjs-base-unit, var(--base-unit, 8px));
4547
4571
  }
4548
4572
 
4549
4573
  .spg-matrixdynamic__drag-element {
4550
- padding: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
4574
+ padding: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4551
4575
  }
4552
4576
  .spg-matrixdynamic__drag-element:hover {
4553
4577
  background-color: var(--sjs-general-backcolor, var(--background, #fff));
@@ -4555,13 +4579,13 @@ button.spg-action-button--large {
4555
4579
  .spg-matrixdynamic__drag-element:after {
4556
4580
  content: " ";
4557
4581
  display: block;
4558
- height: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
4582
+ height: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4559
4583
  }
4560
4584
 
4561
4585
  .spg-drag-element__svg {
4562
- width: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
4563
- height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
4564
- padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
4586
+ width: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4587
+ height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4588
+ padding: var(--sjs-base-unit, var(--base-unit, 8px));
4565
4589
  display: block;
4566
4590
  opacity: 0.5;
4567
4591
  }
@@ -4578,7 +4602,7 @@ button.spg-action-button--large {
4578
4602
  .spg-matrixdynamic__drag-drop-ghost-position-bottom::after {
4579
4603
  content: "";
4580
4604
  width: 100%;
4581
- height: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
4605
+ height: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4582
4606
  background-color: var(--sjs-secondary-backcolor, var(--secondary, #ff9814));
4583
4607
  position: absolute;
4584
4608
  left: 0;
@@ -4593,7 +4617,7 @@ button.spg-action-button--large {
4593
4617
  }
4594
4618
 
4595
4619
  .spg-matrixdynamic__placeholder {
4596
- padding: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px))) 0;
4620
+ padding: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0;
4597
4621
  display: flex;
4598
4622
  flex-direction: column;
4599
4623
  justify-content: center;
@@ -4607,8 +4631,8 @@ button.spg-action-button--large {
4607
4631
  }
4608
4632
 
4609
4633
  .spg-matrixdynamic__placeholder-text {
4610
- font-size: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
4611
- line-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
4634
+ font-size: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4635
+ line-height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4612
4636
  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
4613
4637
  }
4614
4638
 
@@ -4616,29 +4640,29 @@ button.spg-action-button--large {
4616
4640
  display: none;
4617
4641
  appearance: none;
4618
4642
  border: none;
4619
- margin-top: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
4643
+ margin-top: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4620
4644
  background: transparent;
4621
4645
  color: var(--sjs-primary-backcolor, var(--primary, #19b394));
4622
4646
  font-family: var(--font-family);
4623
- font-size: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
4647
+ font-size: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4624
4648
  font-weight: 600;
4625
- line-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
4649
+ line-height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4626
4650
  }
4627
4651
 
4628
4652
  .spg-smiley-icon {
4629
- width: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
4630
- height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
4631
- margin: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
4653
+ width: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4654
+ height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4655
+ margin: var(--sjs-base-unit, var(--base-unit, 8px));
4632
4656
  border-radius: 100px;
4633
4657
  border: 1px solid var(--sjs-general-forecolor, var(--foreground, #161616));
4634
4658
  display: flex;
4635
4659
  justify-content: center;
4636
4660
  align-items: center;
4637
- margin-right: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
4661
+ margin-right: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4638
4662
  }
4639
4663
  .spg-smiley-icon svg {
4640
- width: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
4641
- height: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
4664
+ width: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4665
+ height: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4642
4666
  fill: var(--sjs-general-forecolor, var(--foreground, #161616));
4643
4667
  }
4644
4668
 
@@ -4660,7 +4684,7 @@ button.spg-action-button--large {
4660
4684
  padding: 0;
4661
4685
  }
4662
4686
  .spg-table__cell .spg-checkbox {
4663
- margin: 0 calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
4687
+ margin: 0 calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4664
4688
  }
4665
4689
 
4666
4690
  .spg-table__cell--detail-panel {
@@ -4676,12 +4700,12 @@ button.spg-action-button--large {
4676
4700
 
4677
4701
  .spg-table__cell:not(.spg-table__cell--detail-panel) .spg-input {
4678
4702
  appearance: none;
4679
- line-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
4680
- font-size: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
4703
+ line-height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4704
+ font-size: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4681
4705
  box-shadow: none;
4682
- border-radius: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
4706
+ border-radius: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4683
4707
  background-color: transparent;
4684
- padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
4708
+ padding: var(--sjs-base-unit, var(--base-unit, 8px));
4685
4709
  height: auto;
4686
4710
  }
4687
4711
  .spg-table__cell:not(.spg-table__cell--detail-panel) .spg-input[type=color] {
@@ -4697,19 +4721,19 @@ button.spg-action-button--large {
4697
4721
 
4698
4722
  .spg-table__cell:not(.spg-table__cell--detail-panel) .spg-dropdown {
4699
4723
  width: max-content;
4700
- padding-right: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
4701
- background-size: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
4702
- background-position: right calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px))) top 50%, 0 0;
4724
+ padding-right: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4725
+ background-size: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4726
+ background-position: right calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) top 50%, 0 0;
4703
4727
  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");
4704
4728
  background-repeat: no-repeat;
4705
4729
  }
4706
4730
 
4707
4731
  .spg-table__cell:not(.spg-table__cell--detail-panel):first-of-type .spg-text {
4708
- padding-left: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
4732
+ padding-left: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4709
4733
  }
4710
4734
 
4711
4735
  .spg-table__cell--actions:first-of-type {
4712
- width: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
4736
+ width: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4713
4737
  }
4714
4738
 
4715
4739
  .spg-table__cell--actions:last-of-type .spg-action-bar {
@@ -4718,15 +4742,15 @@ button.spg-action-button--large {
4718
4742
 
4719
4743
  .spg-table__cell--actions > .spg-matrixdynamic__drag-element {
4720
4744
  display: inline-block;
4721
- margin-top: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
4745
+ margin-top: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4722
4746
  cursor: move;
4723
4747
  }
4724
4748
 
4725
4749
  .spg-table__cell--header {
4726
- font-size: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
4750
+ font-size: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4727
4751
  font-weight: normal;
4728
4752
  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
4729
- line-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
4753
+ line-height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4730
4754
  background: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
4731
4755
  text-align: left;
4732
4756
  white-space: nowrap;
@@ -4742,14 +4766,14 @@ button.spg-action-button--large {
4742
4766
  }
4743
4767
 
4744
4768
  .spg-table__question-wrapper {
4745
- padding: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px))) 0;
4769
+ padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0;
4746
4770
  }
4747
4771
 
4748
4772
  .spg-question-group .spg-row {
4749
4773
  margin-top: 0;
4750
4774
  }
4751
4775
  .spg-question-group .spg-row:not(:first-of-type) {
4752
- margin-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
4776
+ margin-top: var(--sjs-base-unit, var(--base-unit, 8px));
4753
4777
  }
4754
4778
 
4755
4779
  .spg-color-editor__color-input {
@@ -4767,7 +4791,7 @@ button.spg-action-button--large {
4767
4791
 
4768
4792
  .spg-color-editor__color-item {
4769
4793
  display: flex;
4770
- gap: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
4794
+ gap: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4771
4795
  }
4772
4796
  .spg-color-editor__color-item .spg-color-editor__color-swatch {
4773
4797
  margin-left: 0;
@@ -4778,16 +4802,16 @@ button.spg-action-button--large {
4778
4802
  flex-shrink: 0;
4779
4803
  flex-grow: 0;
4780
4804
  border-radius: 3px;
4781
- width: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
4782
- height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
4805
+ width: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4806
+ height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4783
4807
  box-sizing: border-box;
4784
4808
  border: 1px solid rgba(0, 0, 0, 0.16);
4785
- margin-left: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
4809
+ margin-left: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4786
4810
  }
4787
4811
  .spg-color-editor__color-swatch .sv-svg-icon {
4788
4812
  position: absolute;
4789
- width: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
4790
- height: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
4813
+ width: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4814
+ height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4791
4815
  left: 50%;
4792
4816
  top: 50%;
4793
4817
  transform: translate(-50%, -50%);
@@ -4803,7 +4827,7 @@ button.spg-action-button--large {
4803
4827
  }
4804
4828
 
4805
4829
  .spg-color-editor .spg-input__edit-button + * {
4806
- margin-inline-end: calc(-0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
4830
+ margin-inline-end: calc(-0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4807
4831
  }
4808
4832
 
4809
4833
  .spg-file-edit__choose-button {
@@ -4817,10 +4841,10 @@ button.spg-action-button--large {
4817
4841
  .spg-theme-builder-root .spg-paneldynamic__separator {
4818
4842
  border: none;
4819
4843
  margin: 0;
4820
- height: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
4844
+ height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4821
4845
  }
4822
4846
  .spg-theme-builder-root .spg-panel__footer {
4823
- margin: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) auto 0;
4847
+ margin: var(--sjs-base-unit, var(--base-unit, 8px)) auto 0;
4824
4848
  }
4825
4849
  .spg-theme-builder-root .spg-paneldynamic__add-btn {
4826
4850
  margin: 0 auto;
@@ -4839,7 +4863,7 @@ button.spg-action-button--large {
4839
4863
  min-width: 0;
4840
4864
  }
4841
4865
  .spg-theme-builder-root .spg-row--multiple > div .spg-question--location--left {
4842
- height: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
4866
+ height: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4843
4867
  box-sizing: border-box;
4844
4868
  }
4845
4869
  .spg-theme-builder-root .spg-row--multiple > div .spg-question--location--left .spg-input {
@@ -4859,19 +4883,19 @@ button.spg-action-button--large {
4859
4883
  }
4860
4884
  .spg-theme-builder-root .spg-panel__content .spg-panel__content {
4861
4885
  padding: 0;
4862
- padding-bottom: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
4886
+ padding-bottom: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4863
4887
  box-shadow: none;
4864
4888
  }
4865
4889
  .spg-theme-builder-root .spg-panel__content .spg-panel__content .spg-panel__title {
4866
4890
  background-color: transparent;
4867
4891
  box-shadow: none;
4868
- padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) 0;
4892
+ padding: var(--sjs-base-unit, var(--base-unit, 8px)) 0;
4869
4893
  }
4870
4894
  .spg-theme-builder-root .spg-panel__content .spg-panel__content::after {
4871
4895
  content: " ";
4872
4896
  display: block;
4873
4897
  position: relative;
4874
- left: calc(-4 * var(--sjs-base-unit, var(--base-unit, 8px)));
4898
+ left: calc(-4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4875
4899
  top: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
4876
4900
  width: calc(8 * var(--sjs-base-unit, var(--base-unit, 8px)) + 100%);
4877
4901
  height: 1px;
@@ -4887,7 +4911,7 @@ button.spg-action-button--large {
4887
4911
  content: none;
4888
4912
  }
4889
4913
  .spg-theme-builder-root .spg-panel__content .spg-panel__content .spg-panel__content .spg-row {
4890
- margin-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
4914
+ margin-top: var(--sjs-base-unit, var(--base-unit, 8px));
4891
4915
  }
4892
4916
  .spg-theme-builder-root .spg-panel__content .spg-panel__content .spg-panel__content .spg-row:first-of-type {
4893
4917
  margin-top: 0;
@@ -4925,7 +4949,7 @@ button.spg-action-button--large {
4925
4949
  }
4926
4950
 
4927
4951
  .sv-popup--modal {
4928
- padding: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
4952
+ padding: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4929
4953
  }
4930
4954
  .sv-popup--modal.sv-property-editor .sv-popup__container .sv-popup_shadow {
4931
4955
  background-color: transparent;
@@ -4942,7 +4966,7 @@ button.spg-action-button--large {
4942
4966
  }
4943
4967
  .sv-popup--modal .sd-body,
4944
4968
  .sv-popup--modal .sl-body {
4945
- min-width: calc(78 * var(--sjs-base-unit, var(--base-unit, 8px)));
4969
+ min-width: calc(78 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4946
4970
  }
4947
4971
 
4948
4972
  .sv-popup.sv-property-editor .sd-root-modern {
@@ -4950,8 +4974,8 @@ button.spg-action-button--large {
4950
4974
  }
4951
4975
 
4952
4976
  .svc-object-selector .sv-popup__container {
4953
- margin-left: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
4954
- margin-right: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
4977
+ margin-left: var(--sjs-base-unit, var(--base-unit, 8px));
4978
+ margin-right: var(--sjs-base-unit, var(--base-unit, 8px));
4955
4979
  }
4956
4980
 
4957
4981
  .svc-object-selector__content {
@@ -4963,8 +4987,8 @@ button.spg-action-button--large {
4963
4987
  }
4964
4988
 
4965
4989
  .spg-title .spg-action-bar {
4966
- margin-top: calc(-1 * var(--sjs-base-unit, var(--base-unit, 8px)));
4967
- margin-bottom: calc(-1 * var(--sjs-base-unit, var(--base-unit, 8px)));
4990
+ margin-top: calc(-1 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4991
+ margin-bottom: calc(-1 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4968
4992
  margin-right: 1px;
4969
4993
  }
4970
4994
 
@@ -4973,7 +4997,7 @@ button.spg-action-button--large {
4973
4997
  }
4974
4998
 
4975
4999
  .spg-body--empty {
4976
- margin: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
5000
+ margin: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4977
5001
  }
4978
5002
  .svc-text {
4979
5003
  font-family: var(--font-family);
@@ -4983,13 +5007,13 @@ button.spg-action-button--large {
4983
5007
  }
4984
5008
 
4985
5009
  .svc-text--normal {
4986
- font-size: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
4987
- line-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
5010
+ font-size: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
5011
+ line-height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4988
5012
  }
4989
5013
 
4990
5014
  .svc-text--small {
4991
- font-size: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
4992
- line-height: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
5015
+ font-size: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
5016
+ line-height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4993
5017
  }
4994
5018
 
4995
5019
  .svc-text--bold {
@@ -5021,15 +5045,15 @@ button.spg-action-button--large {
5021
5045
  }
5022
5046
 
5023
5047
  .sv-action-bar--default-size-mode .sv-action-bar-separator {
5024
- height: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
5048
+ height: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
5025
5049
  }
5026
5050
 
5027
5051
  .sv-action-bar--small-size-mode .sv-action-bar-separator {
5028
- height: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
5052
+ height: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
5029
5053
  }
5030
5054
 
5031
5055
  .svc-creator--mobile .sv-action-bar-separator {
5032
- height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
5056
+ height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
5033
5057
  }
5034
5058
 
5035
5059
  .sv-action-bar--small-size-mode .sv-action-bar-item {
@@ -5048,11 +5072,17 @@ button.spg-action-button--large {
5048
5072
  display: flex;
5049
5073
  }
5050
5074
  .svc-top-bar .svc-toolbar-wrapper .sv-action-bar {
5051
- padding: 0 calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
5075
+ padding: 0 var(--sjs-base-unit, var(--base-unit, 8px));
5052
5076
  justify-content: flex-end;
5053
5077
  }
5078
+ .svc-top-bar .svc-toolbar-wrapper .sv-action-bar-separator {
5079
+ display: none;
5080
+ }
5081
+ .svc-top-bar .svc-toolbar-wrapper .sv-action-bar > .sv-action:not(.sv-action--hidden) ~ .sv-action .sv-action-bar-separator {
5082
+ display: inline-block;
5083
+ }
5054
5084
  .svc-top-bar .svc-toolbar-wrapper .sv-action .sv-action-bar-item {
5055
- margin: 0 calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
5085
+ margin: 0 var(--sjs-base-unit, var(--base-unit, 8px));
5056
5086
  }
5057
5087
 
5058
5088
  .svc-footer-bar .svc-toolbar-wrapper {
@@ -5060,7 +5090,7 @@ button.spg-action-button--large {
5060
5090
  left: 0;
5061
5091
  right: 0;
5062
5092
  bottom: 0;
5063
- height: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
5093
+ height: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
5064
5094
  }
5065
5095
  .svc-footer-bar .svc-toolbar-wrapper .sv-action-bar {
5066
5096
  justify-content: center;